/* ==========================================================================
   SMOTO — style stron modeli (v19.4)

   Osobny arkusz, wczytywany tylko na stronach z szablonem page-model.php.
   Powody:
     1. main.css uzywa juz klas .hero, .section, .btn i .faq — kazda z nich
        znaczy tam co innego. Dlatego wszystko tutaj ma prefiks .mdl-
        i nic nie moze nadpisac stylow strony glownej.
     2. main.css zostaje nietkniety. Przy jednej z poprzednich wersji zepsulem
        mu kodowanie i trzeba bylo odtwarzac plik z paczki — nie ma potrzeby
        ryzykowac tym ponownie dla siedmiu podstron.

   Kolory, fonty i promienie brane sa ze zmiennych motywu z main.css, wiec
   strona modelu automatycznie trzyma sie kolorystyki serwisu.
   ========================================================================== */

.mdl {
  --mdl-wrap: var(--container-width, 1120px);
  --mdl-pad: var(--container-padding, clamp(24px, 5vw, 48px));
}

.mdl-wrap {
  max-width: var(--mdl-wrap);
  margin: 0 auto;
  padding-inline: var(--mdl-pad);
}

.mdl h1,
.mdl h2,
.mdl h3 {
  font-family: var(--font-heading);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}

.mdl img {
  max-width: 100%;
  height: auto;
  display: block;
}

.mdl-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.mdl-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-primary);
}

/* --- HERO: siedzenie jako obiekt, nie zdjecie w ramce ---
   Cien i swiatlo konturowe robione filtrem CSS, a nie wypalone w pikselach:
   zdjecia sa przezroczystymi WebP, wiec czarna kanapa na czarnym tle bez tego
   znika, a z wypalonym cieniem nie dalaby sie juz przestroic. */
.mdl-hero {
  position: relative;
  padding: clamp(40px, 6vw, 70px) 0 clamp(50px, 7vw, 90px);
  overflow: hidden;
}

.mdl-hero::before {
  content: "";
  position: absolute;
  inset: auto -20% 18% 34%;
  height: 70%;
  background: radial-gradient(closest-side, var(--color-primary-glow), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.mdl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  position: relative;
}

.mdl-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  font-weight: 800;
  margin: 18px 0 0;
}

.mdl-accent {
  color: var(--color-primary);
}

.mdl-lead {
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  max-width: 46ch;
  margin: 20px 0 0;
}

.mdl-hero-obj img {
  width: 118%;
  max-width: none;
  margin-left: -9%;
  transform: rotate(-6deg);
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.85))
          drop-shadow(0 0 1px rgba(245, 245, 247, 0.28));
}

.mdl-tally {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: 34px;
  justify-content: flex-start;
}

.mdl-tally > div { flex: 0 0 auto; }

.mdl-tally b {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mdl-tally span {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.03em;
  display: block;
  margin-top: 4px;
}

.mdl-sekcja {
  padding: clamp(70px, 9vw, 120px) 0;
  border-top: 1px solid var(--color-border);
}

.mdl-naglowek {
  max-width: 64ch;
  margin-bottom: clamp(34px, 4.5vw, 56px);
}

.mdl-naglowek h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600;
  margin-top: 16px;
}

.mdl-naglowek p {
  color: var(--color-text-secondary);
  margin: 14px 0 0;
}

/* --- uslugi z realnymi zakresami --- */
.mdl-uslugi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

.mdl-usluga {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 12px);
  padding: clamp(20px, 2.4vw, 28px);
}

.mdl-usluga h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.mdl-usluga p {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.mdl-zakres {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* v19.5: jednostka przy liczbie miała --color-text-tertiary (#6e6e73) na tle
   #0d0d0d — kontrast ok. 4,0:1, czyli poniżej progu 4,5:1 dla małego tekstu.
   Lighthouse wskazał ten element wprost („mm<small>"). Jaśniejszy odcień
   wystarcza, a hierarchia nadal jest czytelna. */
.mdl-zakres small {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* v19.5: okruszki na stronach modeli. Lighthouse zgłosił za niski kontrast na
   linkach „SMOTO" i „HONDA" — main.css daje im --color-text-tertiary. Podnosimy
   tylko w obrębie .mdl, żeby nie zmieniać wyglądu pozostałych podstron. */
.mdl .breadcrumb-list,
.mdl .breadcrumb-item a {
  color: var(--color-text-secondary);
}

.mdl .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-tertiary);
}

/* --- realizacje --- */
.mdl-realizacje {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
}

.mdl-real {
  margin: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast, 0.25s), background var(--transition-fast, 0.25s);
}

.mdl-real:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-border-hover);
}

.mdl-real .mdl-box {
  height: clamp(200px, 20vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
}

/* Podswietlenie POD obiektem, nie rozjasnianie zdjecia: wersje "cala czarna"
   na czarnej karcie inaczej znikaja, a produkt ma zostac taki, jaki jest. */
.mdl-real .mdl-box::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06), transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

.mdl-real img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  position: relative;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 1px rgba(245, 245, 247, 0.2));
}

.mdl-real figcaption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.mdl-gen {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mdl-gen b {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
}

.mdl-gen span {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
}

.mdl-co {
  font-size: 0.86rem;
  color: var(--color-primary);
  font-weight: 500;
}

.mdl-spec {
  font-size: 0.84rem;
  color: var(--color-text-secondary);
}

/* Plakietka wyniku — liczba mowi, co klient dostal, nie jak to zrobilismy.
   Zdjecia etapu pianki ze znacznikami ciecia nie ida na strone: pokazuja
   know-how warsztatu. Zostaje sam wynik. */
.mdl-wynik {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.mdl-wynik i {
  width: 14px;
  height: 1px;
  background: var(--color-primary);
  display: block;
  font-style: normal;
}

/* --- FAQ: te same pytania co FAQPage w JSON-LD --- */
.mdl-faq {
  display: grid;
  gap: 12px;
  max-width: 80ch;
}

.mdl-faq details {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 12px);
  padding: 18px clamp(18px, 2vw, 24px);
}

.mdl-faq details[open] {
  border-color: var(--color-border-hover);
}

.mdl-faq summary {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

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

.mdl-faq summary::after {
  content: "+";
  color: var(--color-primary);
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
}

.mdl-faq details[open] summary::after {
  content: "\2013";
}

.mdl-faq p {
  color: var(--color-text-secondary);
  margin: 12px 0 0;
  font-size: 0.92rem;
}

/* --- linkowanie: marka + siostrzane modele --- */
.mdl-linki {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mdl-linki a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: border-color 0.2s, color 0.2s;
}

.mdl-linki a:hover,
.mdl-linki a:focus-visible {
  border-color: var(--color-border-hover);
  color: var(--color-text);
}

/* --- cennik i CTA --- */
.mdl-cta {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.mdl-cta p {
  color: var(--color-text-secondary);
  max-width: 48ch;
  margin-top: 14px;
}

.mdl-cennik {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdl-cennik li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.mdl-cennik span {
  color: var(--color-text-secondary);
}

.mdl-cennik b {
  font-family: var(--font-heading);
  font-weight: 600;
  white-space: nowrap;
}

.mdl-akcje {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.mdl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--font-heading);
  transition: background var(--transition-fast, 0.25s);
}

.mdl-btn:hover,
.mdl-btn:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
}

.mdl-btn-obrys {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.mdl-btn-obrys:hover,
.mdl-btn-obrys:focus-visible {
  background: var(--color-bg-card);
  border-color: var(--color-border-hover);
  color: var(--color-text);
}

.mdl :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* --- sekcja modeli na stronie marki --- */
.mdl-marka-modele {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}

.mdl-marka-modele a {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.25s, background 0.25s;
}

.mdl-marka-modele a:hover,
.mdl-marka-modele a:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-border-hover);
}

.mdl-marka-modele img {
  height: 110px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.8));
}

.mdl-marka-modele b {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
}

.mdl-marka-modele em {
  font-style: normal;
  color: var(--color-text-tertiary);
  font-size: 0.78rem;
}

@media (max-width: 960px) {
  .mdl-uslugi,
  .mdl-realizacje,
  .mdl-marka-modele {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .mdl-hero-grid,
  .mdl-cta {
    grid-template-columns: 1fr;
  }

  .mdl-hero-obj {
    order: -1;
  }

  .mdl-hero-obj img {
    width: 100%;
    margin-left: 0;
    transform: rotate(-4deg);
  }

  .mdl-tally {
    gap: 20px 28px;
  }
}

@media (max-width: 560px) {
  .mdl-uslugi,
  .mdl-realizacje,
  .mdl-marka-modele {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mdl * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── v19.8: strony usług ─────────────────────────────────────────────────
   Karta realizacji na stronie usługi jest linkiem do strony modelu — cała
   figura klika, kolor i podkreślenie nie mogą się zmienić względem kart
   na stronach modeli, gdzie linku nie ma. */
.mdl-real > .mdl-real-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.mdl-real-model {
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.mdl-real:hover .mdl-real-model,
.mdl-real:focus-within .mdl-real-model {
  text-decoration: underline;
}

/* Blok „Zobacz też" pod wpisem bloga (inc/blog-linki.php). Ten sam wygląd
   co .mdl-linki, tylko z węższym marginesem, bo siedzi w kolumnie treści. */
.mdl-powiazane {
  margin: 40px 0 8px;
  padding: 22px 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
}
.mdl-powiazane .mdl-eyebrow { margin-bottom: 6px; }
.mdl-powiazane h2 {
  font-size: 1.15rem;
  margin: 0 0 14px;
}
.mdl-powiazane .mdl-linki { margin-top: 0; }

/* ── v19.9: strona /wycena/ ──────────────────────────────────────────────
   Pola dziedziczą .form-group / .form-row / .btn-primary z main.css; tu tylko
   układ dwóch kolumn, siatka checkboxów, pole pliku i komunikaty. */
.wyc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px) {
  .wyc-grid { grid-template-columns: 1fr; }
}
.wyc-bok { display: grid; gap: 16px; }
.wyc-form .form-row .form-group { margin-top: 0; }
.wyc-form fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.wyc-form legend {
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-text);
}
.wyc-zakres-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 20px;
}
.wyc-zakres-siatka label,
.wyc-zgoda label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.45;
  cursor: pointer;
}
.wyc-form .wyc-zakres-siatka input[type="checkbox"],
.wyc-form .wyc-zgoda input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  accent-color: var(--color-primary);
}
.wyc-form .wyc-zakres-siatka label,
.wyc-form .wyc-zgoda label {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
}
.wyc-form .wyc-zgoda label {
  font-weight: 400;
  color: var(--color-text-secondary);
  max-width: 62ch;
}
.wyc-form .wyc-zgoda label a { color: var(--color-primary); text-decoration: underline; }
.wyc-zgoda { margin-top: 18px; }
.wyc-zgoda a { color: var(--color-primary); }
.wyc-form input[type="file"] {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm, 10px);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}
.wyc-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.wyc-form label small { font-weight: 400; color: var(--color-text-secondary); }
.wyc-submit { margin-top: 22px; }
.wyc-alt { margin-top: 14px; font-size: 0.92rem; color: var(--color-text-secondary); }
.wyc-alt a { color: var(--color-primary); }
.wyc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.wyc-komunikat {
  padding: 16px 18px;
  border-radius: var(--radius-sm, 10px);
  margin-bottom: 22px;
  font-weight: 500;
  line-height: 1.5;
}
.wyc-ok { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.45); }
.wyc-blad { background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.5); }

/* ══ v19.9.4: efekty na stronach .mdl ═══════════════════════════════════
   Zasady: tylko transform/opacity (kompozytor, zero layoutu), wszystko
   wyłączone przy prefers-reduced-motion, wejścia na scroll w czystym CSS
   (animation-timeline: view()) — przeglądarka bez wsparcia po prostu
   pokazuje treść bez animacji. */

/* — hero: kaskada tekstu (H1 bez opacity, żeby nie opóźniać LCP) — */
@keyframes mdlRise { from { transform: translateY(18px); } to { transform: translateY(0); } }
@keyframes mdlRiseFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.mdl-hero h1 { animation: mdlRise .7s cubic-bezier(.2,.7,.2,1) both; }
.mdl-hero .mdl-eyebrow { animation: mdlRiseFade .6s cubic-bezier(.2,.7,.2,1) .05s both; }
.mdl-hero .mdl-lead { animation: mdlRiseFade .7s cubic-bezier(.2,.7,.2,1) .18s both; }
.mdl-hero .mdl-tally > div { animation: mdlRiseFade .6s cubic-bezier(.2,.7,.2,1) both; }
.mdl-hero .mdl-tally > div:nth-child(1) { animation-delay: .30s; }
.mdl-hero .mdl-tally > div:nth-child(2) { animation-delay: .38s; }
.mdl-hero .mdl-tally > div:nth-child(3) { animation-delay: .46s; }
.mdl-hero .mdl-tally > div:nth-child(4) { animation-delay: .54s; }

/* — hero: siedzenie unosi się, poświata oddycha — */
@keyframes mdlFloat {
  0%, 100% { transform: rotate(-6deg) translate3d(0, 0, 0); }
  50%      { transform: rotate(-6deg) translate3d(0, -7px, 0); }
}
@keyframes mdlBreath {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50%      { opacity: .95; transform: scale(1.04); }
}
@keyframes mdlHeroIn { from { opacity: 0; transform: rotate(-6deg) translate3d(0, 26px, 0) scale(.97); } to { opacity: 1; transform: rotate(-6deg) translate3d(0, 0, 0) scale(1); } }
.mdl-hero-obj { position: relative; }
.mdl-hero-obj::before {
  content: "";
  position: absolute;
  inset: 12% 8% 6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(232, 52, 78, 0.22), transparent 70%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent 65%);
  filter: blur(18px);
  pointer-events: none;
  will-change: opacity, transform;
  animation: mdlBreath 7s ease-in-out infinite;
}
.mdl-hero-obj img {
  position: relative;
  will-change: transform;
  backface-visibility: hidden;
  animation: mdlHeroIn .9s cubic-bezier(.2,.7,.2,1) .1s both, mdlFloat 9s ease-in-out 1s infinite;
}

/* — wejścia na scroll — */
@keyframes mdlReveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@supports (animation-timeline: view()) {
  .mdl-sekcja .mdl-naglowek,
  .mdl-usluga,
  .mdl-real,
  .mdl-faq details,
  .mdl-marka-modele a,
  .mdl-cta,
  .mdl-linki {
    animation: mdlReveal linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 42%;
  }
  /* hero ma własną kaskadę — kafle w hero nie dostają timeline'u */
  .mdl-hero .mdl-usluga { animation: mdlRiseFade .6s cubic-bezier(.2,.7,.2,1) both; }
}

/* — reflektor pod kursorem (JS ustawia --mx/--my) — */
.fx-spot { position: relative; overflow: hidden; --mx: 50%; --my: 50%; }
.fx-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.075), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.fx-spot:hover::after { opacity: 1; }
.fx-spot.mdl-real:hover,
.fx-spot.mdl-usluga:hover { border-color: rgba(232, 52, 78, 0.45); }
.fx-spot > * { position: relative; z-index: 1; }

/* — przechył zdjęcia w karcie — */
.fx-tilt { perspective: 760px; }
.fx-tilt img {
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  transform-style: preserve-3d;
}

/* — przyciski i FAQ — */
.mdl-btn { transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.mdl-btn:hover, .mdl-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(232, 52, 78, 0.28);
}
.mdl-btn-obrys:hover, .mdl-btn-obrys:focus-visible { box-shadow: 0 10px 26px rgba(255, 255, 255, 0.06); }
.mdl-faq details[open] > p { animation: faqSlideDown .32s ease both; }
.mdl-faq summary { transition: color .2s ease; }
.mdl-faq details[open] > summary { color: var(--color-primary-light, #ff5068); }

/* — wyłączenie ruchu — */
@media (prefers-reduced-motion: reduce) {
  .mdl-hero h1, .mdl-hero .mdl-eyebrow, .mdl-hero .mdl-lead, .mdl-hero .mdl-tally > div,
  .mdl-hero-obj img, .mdl-hero-obj::before,
  .mdl-sekcja .mdl-naglowek, .mdl-usluga, .mdl-real, .mdl-faq details, .mdl-marka-modele a, .mdl-cta, .mdl-linki,
  .mdl-faq details[open] > p {
    animation: none !important;
    opacity: 1 !important;
  }
  .mdl-hero-obj img { transform: rotate(-6deg) !important; }
  .fx-tilt img, .mdl-btn { transition: none; }
}

/* — v19.9.6: stany błędu formularza wyceny — */
.wyc-form .wyc-pole-blad input:not([type="checkbox"]),
.wyc-form .wyc-pole-blad textarea,
.wyc-form .wyc-pole-blad input[type="file"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.wyc-form .wyc-pole-blad label,
.wyc-form .wyc-pole-blad legend { color: var(--color-primary-light, #ff5068); }
.wyc-form .wyc-zgoda.wyc-pole-blad {
  padding: 12px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm, 10px);
  background: rgba(232, 52, 78, 0.08);
}
.wyc-inline-blad {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 10px);
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.5);
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.45;
}
.wyc-submit[disabled] { opacity: .7; cursor: progress; }

/* — v19.9.7: okruszki pod przyklejonym nagłówkiem —
   .header jest position:fixed (~80 px z paddingiem 16 px + logo). Strony marek
   dają pod nim 150 px w hero; tu okruszki są pierwszym elementem, więc odstęp
   idzie na nie. Wcześniej inline 26 px chowało je pod logo. */
.mdl > .mdl-okruszki {
  padding-top: clamp(96px, 11vw, 124px);
  margin-bottom: 0;
}

/* — v19.9.8: kontrast przycisku z numerem —
   main.css maluje linki tel: w treści na jasną czerwień (żeby nie wyglądały
   jak zwykły tekst). Reguła jest starsza niż strony modeli i nie znała klasy
   .mdl-btn, więc numer w przycisku wychodził czerwony na czerwonym. Wyjątek
   dopisany w main.css; to jest druga linia obrony, gdyby ktoś go usunął. */
.mdl-btn[href^="tel:"],
.mdl-akcje a.mdl-btn { color: #fff; }
.mdl-btn-obrys[href^="tel:"],
.mdl-akcje a.mdl-btn-obrys { color: var(--color-text); }