:root {
  --bg: #e9eef5;
  --bg-soft: #dfe8f3;
  --panel: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(238,244,251,0.98));
  --panel-2: linear-gradient(180deg, rgba(246,249,253,0.99), rgba(229,236,246,0.98));
  --stroke: rgba(15,23,42,0.10);
  --stroke-strong: rgba(37,99,235,0.24);
  --text: #111827;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-2: #38bdf8;
  --accent-soft: rgba(37,99,235,0.10);
  --dark: #0f172a;
  --shadow: 0 22px 46px rgba(15,23,42,0.13);
  --shadow-soft: 0 16px 34px rgba(15,23,42,0.10);
  --radius: 24px;
  --radius-sm: 18px;
  --maxw: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 128px; }

body {
  margin: 0;
  font-family: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 10%, rgba(56,189,248,0.18), transparent 26%),
    radial-gradient(circle at 86% 8%, rgba(37,99,235,0.12), transparent 24%),
    linear-gradient(180deg, #f1f6fb 0%, var(--bg) 44%, #dfe8f3 100%);
  padding-top: 112px;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
p, li { line-height: 1.68; }

.page-shell {
  width: min(95vw, var(--maxw));
  margin: 0 auto 24px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 28px;
  background: rgba(236,243,250,0.82);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(95vw, var(--maxw));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  border: 1px solid rgba(15,23,42,0.10);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(246,249,253,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 34px rgba(15,23,42,0.12);
}

.logo {
  display: inline-flex;
  align-items: center;
  width: min(40vw, 300px);
  flex: 0 0 auto;
}
.logo img { width: 100%; max-height: 68px; object-fit: contain; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.hamburger {
  display: none;
  width: 48px;
  height: 44px;
  border: 1px solid rgba(37,99,235,0.24);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(56,189,248,0.06));
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(37,99,235,0.10);
}
.hamburger span {
  display: block;
  width: 23px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(37,99,235,0.42);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle:checked + .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle:checked + .hamburger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked + .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.main-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.main-nav a {
  color: #1e293b;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 10px 14px;
  border-radius: 999px;
  transition: 0.2s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

main { padding: 12px 26px 30px; }

.hero-section { margin: 10px 0 20px; }
.hero-shell {
  position: relative;
  min-height: 580px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-shell--bg {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.90) 34%, rgba(255,255,255,0.54) 58%, rgba(255,255,255,0.06) 100%),
    url('assets/hero-bg-v110.png?v=124');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.hero-content {
  min-height: 580px;
  max-width: 720px;
  padding: 58px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-kicker {
  margin: 0 0 14px;
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.92rem;
}
.hero-title {
  margin: 0;
  color: var(--dark);
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero-title span { display: block; }
.hero-lead {
  margin: 22px 0 0;
  max-width: 585px;
  color: #475569;
  font-size: 1.18rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 900;
  transition: 0.2s ease;
  border: 1px solid transparent;
}
.hero-btn--primary {
  color: #ffffff;
  background: linear-gradient(180deg, #38bdf8, #2563eb);
  box-shadow: 0 12px 28px rgba(37,99,235,0.24);
}
.hero-btn--secondary {
  color: var(--dark);
  background: rgba(255,255,255,0.78);
  border-color: rgba(15,23,42,0.14);
  box-shadow: 0 12px 24px rgba(15,23,42,0.08);
}
.hero-btn--primary:hover,
.hero-btn--primary:focus-visible { transform: translateY(-1px); filter: brightness(1.04); }
.hero-btn--secondary:hover,
.hero-btn--secondary:focus-visible { background: #ffffff; border-color: rgba(37,99,235,0.24); }

.hero-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hero-values span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: #1e293b;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(37,99,235,0.16);
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
  font-size: 0.96rem;
  font-weight: 700;
}

.services-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.overview-card {
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 22px;
  background: var(--panel-2);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}
.overview-card h3 { margin: 0 0 10px; font-size: 1.12rem; color: var(--dark); }
.overview-card p { margin: 0; color: var(--muted); }

.content-section { margin-top: 18px; }

.section-title {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 18px 34px;
  margin: 0 0 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(226,232,240,0.94));
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
  color: var(--dark);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  position: relative;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 36px;
  bottom: 10px;
  width: 92px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56,189,248,0.28), var(--accent), rgba(56,189,248,0.28));
  box-shadow: 0 0 16px rgba(37,99,235,0.28);
}

.section-grid,
.section-grid--contact {
  display: grid;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.section-grid--reverse .section-visual { order: 2; }
.section-grid--reverse .section-card { order: 1; }

.section-card,
.section-visual {
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.section-copy {
  padding: 30px 30px 26px;
  font-size: 1.08rem;
}
.section-copy p:first-child { margin-top: 0; }
.section-copy p:last-child { margin-bottom: 0; }
.section-copy strong { color: #0f172a; }

.section-visual {
  position: relative;
  aspect-ratio: 4 / 5;
}
.section-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.lead-emphasis {
  margin-top: 20px;
  color: var(--accent);
  font-weight: 800;
}
.feature-list {
  margin: 14px 0 18px;
  padding-left: 20px;
  color: var(--muted);
}
.feature-list li { margin-bottom: 10px; }

.values-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.96));
  box-shadow: var(--shadow-soft);
}
.value-item {
  padding: 26px 18px 24px;
  text-align: center;
  position: relative;
}
.value-item + .value-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: rgba(15,23,42,0.10);
}
.value-icon,
.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #ffffff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.32), transparent 28%),
    linear-gradient(180deg, #38bdf8, #2563eb);
  border: 1px solid rgba(37,99,235,0.20);
  box-shadow: 0 14px 26px rgba(37,99,235,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
}
.value-icon svg,
.icon-badge svg { width: 27px; height: 27px; fill: currentColor; stroke: currentColor; }
.value-item h3 {
  margin: 0 0 12px;
  color: var(--dark);
  font-size: 1.03rem;
  letter-spacing: 0.03em;
}
.value-item p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
  font-size: 1rem;
}

.contact-layout { display: grid; gap: 16px; }
.contact-intro {
  margin: 0;
  padding: 28px 30px 0;
  font-size: 1.24rem;
  color: #334155;
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.info-card {
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  padding: 22px;
  min-height: 170px;
  box-shadow: var(--shadow-soft);
}
.info-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--dark);
}
.info-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}
.card-link-wrap { margin-top: 14px !important; }
.card-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 900;
  background: linear-gradient(180deg, #38bdf8, #2563eb);
  box-shadow: 0 10px 20px rgba(37,99,235,0.18);
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}
.small-card { padding: 24px; }
.small-card h3 { margin: 0 0 14px; font-size: 1.2rem; color: var(--dark); }
.small-card p { color: var(--muted); }

.site-footer {
  border-top: 1px solid rgba(15,23,42,0.08);
  padding: 18px 28px 24px;
  text-align: center;
  color: #64748b;
  background: rgba(232,239,248,0.86);
}

.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #f1f6fb, #e2eaf4);
  transition: opacity .45s ease, visibility .45s ease;
}
.site-preloader__inner {
  width: min(92vw, 460px);
  padding: 30px 26px;
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #ffffff;
  box-shadow: var(--shadow);
  text-align: center;
}
.site-preloader__logo {
  width: min(100%, 270px);
  margin: 0 auto 18px;
}
.site-preloader__bar {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15,23,42,0.08);
  margin-top: 14px;
}
.site-preloader__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  box-shadow: 0 0 18px rgba(37,99,235,0.28);
}
.site-preloader__percent {
  margin-top: 12px;
  color: var(--dark);
  font-weight: 900;
  letter-spacing: 0.04em;
}
.site-preloader__text {
  margin: 10px 0 0;
  color: var(--muted);
}
.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1180px) {
  .services-overview,
  .values-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-item:nth-child(3)::before { display: none; }
  .value-item:nth-child(3),
  .value-item:nth-child(4) { border-top: 1px solid rgba(15,23,42,0.08); }
}

@media (max-width: 980px) {
  .main-nav a { padding: 9px 12px; font-size: 0.96rem; }
}

@media (max-width: 880px) {
  html { scroll-padding-top: 112px; }
  body { padding-top: 96px; }

  .page-shell {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .site-header {
    width: 100%;
    left: 0;
    transform: none;
    min-height: 96px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 0 0 20px 20px;
  }

  .logo {
    max-width: min(56vw, 255px);
    width: min(56vw, 255px);
  }
  .logo img { max-height: 60px; object-position: left center; }

  .hamburger { display: inline-flex; flex: 0 0 auto; }

  .main-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 12px;
    left: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(37,99,235,0.18);
    border-radius: 20px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 22px 40px rgba(15,23,42,0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  }

  .nav-toggle:checked ~ .main-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav a {
    width: 100%;
    padding: 15px 16px;
    border-radius: 14px;
    color: var(--dark);
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.96));
    border: 1px solid rgba(15,23,42,0.08);
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(56,189,248,0.06));
  }

  main { padding: 10px 0 24px; }

  .hero-section { margin: 8px 0 14px; }
  .hero-shell {
    width: calc(100vw - 24px);
    margin: 0 12px;
    border-radius: 22px;
    min-height: 540px;
  }
  .hero-shell--bg {
    min-height: 540px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.58) 36%, rgba(255,255,255,0.92) 74%, rgba(255,255,255,0.98) 100%),
      url('assets/hero-bg-v110.png?v=124');
    background-size: cover;
    background-position: 68% center;
  }
  .hero-content {
    min-height: 540px;
    max-width: none;
    padding: 22px 18px 24px;
    justify-content: flex-end;
  }
  .hero-title { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .hero-lead { font-size: 1rem; margin-top: 16px; }
  .hero-actions { margin-top: 20px; }
  .hero-btn { width: 100%; }
  .hero-values { margin-top: 18px; gap: 8px; }
  .hero-values span { font-size: 0.9rem; min-height: 34px; }

  .services-overview {
    width: calc(100vw - 24px);
    margin: 14px 12px 0;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .content-section { margin-top: 12px; }

  .section-title {
    width: calc(100vw - 24px);
    margin: 0 12px 14px;
    justify-content: center;
    font-size: clamp(1.7rem, 7vw, 2.6rem);
    padding: 16px 22px;
    border-radius: 22px;
    text-align: center;
  }
  .section-title::after { left: 50%; transform: translateX(-50%); }

  .section-grid,
  .section-grid--contact {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .section-grid--reverse .section-visual,
  .section-grid--reverse .section-card { order: initial; }

  .section-visual {
    width: calc(100vw - 24px);
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 22px;
    aspect-ratio: auto;
    position: static;
  }
  .section-visual img {
    position: static;
    width: 100%;
    height: auto;
  }

  .section-card,
  .contact-layout,
  .contact-cards,
  .bottom-grid {
    width: calc(100vw - 24px);
    margin-left: 12px;
    margin-right: 12px;
  }

  .section-copy,
  .small-card,
  .overview-card,
  .info-card { padding: 22px 18px; }

  .contact-intro { padding: 22px 18px 0; font-size: 1.08rem; }

  .contact-cards,
  .values-strip,
  .bottom-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .values-strip {
    width: calc(100vw - 24px);
    margin: 14px 12px 0;
    border-radius: 22px;
  }
  .value-item { padding: 22px 16px; }
  .value-item + .value-item::before { display: none; }
  .value-item + .value-item { border-top: 1px solid rgba(15,23,42,0.08); }

  .site-footer { padding: 18px 18px 24px; }
}


/* FIX v4: mniej bieli, równe moduły, większy bufor między tekstem i zdjęciem */
@media (min-width: 881px) {
  main {
    padding-left: 30px;
    padding-right: 30px;
  }

  .section-grid,
  .section-grid--contact {
    display: grid !important;
    grid-template-columns: minmax(360px, 42%) minmax(0, 58%) !important;
    gap: 28px !important;
    align-items: stretch !important;
  }

  .section-grid--reverse .section-visual {
    order: 2 !important;
  }

  .section-grid--reverse .section-card {
    order: 1 !important;
  }

  .section-card,
  .contact-layout {
    min-width: 0 !important;
    position: relative;
    z-index: 2;
  }

  .section-visual {
    min-width: 0 !important;
    position: relative;
    z-index: 1;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
  }

  .section-copy {
    padding: clamp(28px, 3vw, 42px) !important;
  }

  .contact-layout {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    padding-bottom: 16px;
  }

  .contact-cards {
    padding: 0 18px 18px;
  }

  .contact-intro {
    padding: 28px 28px 2px !important;
  }
}

.section-card,
.overview-card,
.info-card,
.values-strip,
.contact-layout,
.small-card {
  background-color: #f1f5f9;
}

.section-card,
.overview-card,
.info-card,
.values-strip,
.bottom-grid .small-card,
.contact-layout {
  border-color: rgba(15, 23, 42, 0.10) !important;
}

@media (min-width: 881px) {
  .hero-content {
    min-height: 580px;
    max-width: 680px;
    margin: 34px;
    padding: 42px 46px !important;
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(248,250,252,0.90), rgba(226,232,240,0.82));
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: 0 22px 44px rgba(15,23,42,0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .hero-shell,
  .hero-shell--bg {
    min-height: 650px;
  }

  .hero-shell--bg {
    background:
      linear-gradient(90deg, rgba(226,232,240,0.72) 0%, rgba(226,232,240,0.46) 34%, rgba(226,232,240,0.16) 58%, rgba(226,232,240,0.00) 100%),
      url('assets/hero-bg-v110.png?v=124') !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
  }
}

@media (max-width: 880px) {
  .section-grid,
  .section-grid--contact {
    gap: 14px !important;
  }

  .section-card,
  .contact-layout,
  .contact-cards,
  .bottom-grid {
    width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .contact-layout {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }

  .contact-cards {
    padding: 0 12px 12px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .hero-content {
    background:
      linear-gradient(180deg, rgba(248,250,252,0.10), rgba(248,250,252,0.84) 44%, rgba(238,244,251,0.98) 100%);
  }
}


/* FIX v6: stała szerokość zdjęć w sekcjach, tekst wypełnia pozostałą przestrzeń */
@media (min-width: 881px) {
  :root {
    --section-image-width: clamp(360px, 32vw, 430px);
    --section-gap: 28px;
  }

  .section-grid,
  .section-grid--contact {
    display: grid !important;
    grid-template-columns: var(--section-image-width) minmax(0, 1fr) !important;
    gap: var(--section-gap) !important;
    align-items: stretch !important;
  }

  .section-grid--reverse,
  .section-grid--reverse.section-grid {
    grid-template-columns: minmax(0, 1fr) var(--section-image-width) !important;
  }

  .section-grid .section-visual {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .section-grid .section-card,
  .section-grid .contact-layout {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .section-grid--reverse .section-card {
    order: 1 !important;
  }

  .section-grid--reverse .section-visual {
    order: 2 !important;
  }

  .section-visual {
    aspect-ratio: 4 / 5 !important;
    min-width: 0 !important;
  }

  .section-card,
  .contact-layout {
    min-width: 0 !important;
    overflow: hidden;
  }

  .section-copy {
    width: 100% !important;
  }
}

/* Mobile bez zmian: moduły jeden pod drugim */
@media (max-width: 880px) {
  .section-grid,
  .section-grid--reverse,
  .section-grid--contact {
    grid-template-columns: 1fr !important;
  }

  .section-grid .section-visual,
  .section-grid .section-card,
  .section-grid .contact-layout,
  .section-grid--reverse .section-visual,
  .section-grid--reverse .section-card {
    order: initial !important;
  }
}


/* FIX v7: Hero mniej zasłania zdjęcie — jeden przycisk, węższy panel tekstu */
.hero-actions--single {
  margin-top: 24px;
}

.hero-actions--single .hero-btn {
  min-width: 170px;
}

@media (min-width: 881px) {
  .hero-content {
    max-width: 500px !important;
    min-height: auto !important;
    margin: 34px !important;
    padding: 34px 38px !important;
  }

  .hero-shell,
  .hero-shell--bg {
    min-height: 610px !important;
  }

  .hero-title {
    font-size: clamp(2.55rem, 4.2vw, 4.25rem) !important;
  }

  .hero-lead {
    max-width: 430px !important;
    font-size: 1.06rem !important;
  }

  .hero-values,
  .hero-btn--secondary {
    display: none !important;
  }

  .hero-shell--bg {
    background:
      linear-gradient(90deg, rgba(226,232,240,0.66) 0%, rgba(226,232,240,0.36) 30%, rgba(226,232,240,0.10) 50%, rgba(226,232,240,0.00) 100%),
      url('assets/hero-bg-v110.png?v=124') !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
  }
}

@media (max-width: 880px) {
  .hero-values,
  .hero-btn--secondary {
    display: none !important;
  }

  .hero-actions--single .hero-btn {
    width: 100%;
  }

  .hero-content {
    padding-bottom: 22px !important;
  }
}


/* FIX v8: mocniejsze, bardziej warsztatowe nagłówki sekcji */
.section-title {
  background:
    radial-gradient(circle at 8% 12%, rgba(56,189,248,0.22), transparent 28%),
    linear-gradient(135deg, #0f172a 0%, #172033 52%, #1e293b 100%) !important;
  color: #f8fafc !important;
  border-color: rgba(56,189,248,0.20) !important;
  box-shadow:
    0 16px 32px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.section-title::after {
  background:
    linear-gradient(90deg, rgba(56,189,248,0.12), #38bdf8 32%, #2563eb 68%, rgba(56,189,248,0.12)) !important;
  box-shadow:
    0 0 18px rgba(56,189,248,0.45),
    0 0 30px rgba(37,99,235,0.20) !important;
}

/* Delikatne przygaszenie kart pod nagłówkami, żeby ciemne belki wyglądały naturalnie */
.section-card,
.contact-layout,
.overview-card,
.info-card,
.values-strip,
.bottom-grid .small-card {
  background:
    linear-gradient(180deg, rgba(248,250,252,0.98), rgba(232,239,248,0.96)) !important;
}

/* Mały techniczny detal w nagłówkach — niebieska poświata, ale bez robienia całej strony niebieskiej */
.section-title::before {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(56,189,248,0.16), transparent 66%);
  pointer-events: none;
}

@media (max-width: 880px) {
  .section-title::before {
    width: 64px;
    height: 64px;
    right: 14px;
  }

  .section-title {
    box-shadow:
      0 12px 26px rgba(15,23,42,0.16),
      inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }
}


/* FIX v9: większe logo (+50%) i pionowe wyśrodkowanie */
.site-header {
  align-items: center !important;
}

.logo {
  width: min(48vw, 450px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
}

.logo img {
  width: 100% !important;
  max-height: 102px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  margin: 0 !important;
}

@media (min-width: 881px) {
  .site-header {
    min-height: 116px;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 880px) {
  .site-header {
    min-height: 102px !important;
  }

  .logo {
    max-width: min(66vw, 320px) !important;
    width: min(66vw, 320px) !important;
  }

  .logo img {
    max-height: 76px !important;
    object-position: left center !important;
  }
}


/* FIX v11: mapa Google w sekcji kontakt + spójna wysokość z kafelkami */
.map-visual {
  background: #dbe5f1 !important;
  position: relative;
  overflow: hidden;
}

.map-visual iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}

@media (min-width: 881px) {
  .section-grid--contact {
    align-items: stretch !important;
  }

  .section-grid--contact .map-visual {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  .section-grid--contact .contact-layout {
    height: 100% !important;
  }
}

@media (max-width: 880px) {
  .map-visual {
    aspect-ratio: auto !important;
    min-height: 420px !important;
    height: 420px !important;
  }

  .map-visual iframe {
    position: absolute !important;
  }
}


/* FIX v12: Kontakt — tekst na całą szerokość, stabilna mapa + 4 kafelki obok */
@media (min-width: 881px) {
  .section-grid--contact {
    display: grid !important;
    grid-template-columns: var(--section-image-width) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 18px 28px !important;
    align-items: stretch !important;
  }

  .section-grid--contact .contact-layout {
    display: contents !important;
  }

  .section-grid--contact .contact-intro {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 30px !important;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(232,239,248,0.96));
    box-shadow: var(--shadow-soft);
  }

  .section-grid--contact .map-visual {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    position: relative !important;
    overflow: hidden !important;
    transform: translateZ(0);
  }

  .section-grid--contact .map-visual iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    display: block !important;
  }

  .section-grid--contact .contact-cards {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .section-grid--contact .info-card {
    min-height: 0 !important;
  }
}

@media (max-width: 880px) {
  .section-grid--contact .contact-layout {
    display: block !important;
  }

  .section-grid--contact .contact-intro {
    width: calc(100vw - 24px) !important;
    margin: 0 12px 12px !important;
    padding: 22px 18px !important;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(232,239,248,0.96));
    box-shadow: var(--shadow-soft);
  }

  .section-grid--contact .map-visual {
    width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    height: 420px !important;
    min-height: 420px !important;
    aspect-ratio: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .section-grid--contact .map-visual iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
  }

  .section-grid--contact .contact-cards {
    width: calc(100vw - 24px) !important;
    margin: 12px 12px 0 !important;
    padding: 0 !important;
  }
}


/* =========================================================
   MatiCar v13 — finalne korekty układu desktop
   - CSS wersjonowany fizycznie jako styles-v13.css
   - naprawa sekcji z obrazem po prawej
   - stabilna mapa Google w sekcji Kontakt
   ========================================================= */

/* Sekcje desktop: stała szerokość zdjęcia, tekst wypełnia resztę, bez wychodzenia poza kontener */
@media (min-width: 881px) {
  :root {
    --section-image-width: clamp(360px, 32vw, 430px);
    --section-gap: 24px;
  }

  .content-section {
    width: 100%;
    overflow: visible;
  }

  .section-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: var(--section-image-width) minmax(0, 1fr) !important;
    gap: var(--section-gap) !important;
    align-items: stretch !important;
  }

  .section-grid--reverse {
    grid-template-columns: minmax(0, 1fr) var(--section-image-width) !important;
  }

  .section-grid .section-visual {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    aspect-ratio: 4 / 5 !important;
    align-self: stretch !important;
  }

  .section-grid .section-card {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .section-grid--reverse .section-card {
    order: 1 !important;
  }

  .section-grid--reverse .section-visual {
    order: 2 !important;
  }

  .section-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Kontakt desktop: intro full width, mapa i kafelki obok siebie, równa wysokość, zero nachodzenia */
@media (min-width: 881px) {
  .section-grid--contact {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: var(--section-image-width) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 18px var(--section-gap) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .section-grid--contact .contact-layout {
    display: contents !important;
  }

  .section-grid--contact .contact-intro {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px 30px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(232,239,248,0.96));
    box-shadow: var(--shadow-soft);
  }

  .section-grid--contact .map-visual {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .section-grid--contact .map-visual iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    display: block !important;
  }

  .section-grid--contact .contact-cards {
    grid-column: 2 !important;
    grid-row: 2 !important;
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .section-grid--contact .info-card {
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile: bezpieczny układ pionowy */
@media (max-width: 880px) {
  .section-grid,
  .section-grid--reverse,
  .section-grid--contact {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .section-grid .section-visual,
  .section-grid .section-card,
  .section-grid .contact-layout,
  .section-grid--reverse .section-visual,
  .section-grid--reverse .section-card {
    order: initial !important;
  }

  .section-grid--contact .contact-layout {
    display: block !important;
  }

  .section-grid--contact .map-visual {
    width: calc(100vw - 24px) !important;
    height: 420px !important;
    min-height: 420px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    aspect-ratio: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .section-grid--contact .map-visual iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
  }
}


/* FIX v15: nagłówki sekcji z delikatną falującą szachownicą rajdową */
.section-title {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background:
    linear-gradient(135deg, #0f172a 0%, #172033 48%, #1e293b 100%) !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow:
    0 16px 32px rgba(15,23,42,0.20),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Usunięcie wcześniejszej niebieskiej poświaty z prawej strony */
.section-title::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  right: -34px !important;
  top: -46px !important;
  width: min(42%, 360px) !important;
  height: calc(100% + 92px) !important;
  border-radius: 44% 0 0 56% / 42% 0 0 58% !important;
  transform: skewX(-10deg) rotate(-2deg) !important;
  opacity: 0.34 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(15,23,42,0.72), rgba(15,23,42,0.18) 26%, rgba(15,23,42,0.00) 100%),
    repeating-conic-gradient(
      from 8deg,
      rgba(255,255,255,0.78) 0deg 90deg,
      rgba(2,6,23,0.88) 90deg 180deg
    ) !important;
  background-size: 100% 100%, 34px 34px !important;
  box-shadow: inset 30px 0 42px rgba(15,23,42,0.82) !important;
}

/* Cienki techniczny akcent zostaje, ale jest spokojniejszy */
.section-title::after {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(56,189,248,0.10), rgba(56,189,248,0.72) 32%, rgba(37,99,235,0.58) 68%, rgba(56,189,248,0.06)) !important;
  box-shadow:
    0 0 12px rgba(56,189,248,0.28),
    0 0 22px rgba(37,99,235,0.12) !important;
}

/* Tekst zawsze nad teksturą */
.section-title > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 880px) {
  .section-title::before {
    right: -48px !important;
    top: -32px !important;
    width: 58% !important;
    height: calc(100% + 64px) !important;
    opacity: 0.28 !important;
    background-size: 100% 100%, 28px 28px !important;
  }
}


/* FIX v16: animacja sekcji — fade + delikatny slide poziomy z prawej, bez zmiany pionowej pozycji */
.reveal,
.reveal-up,
.fade-slide,
[data-reveal],
.content-section,
.section-grid,
.section-card,
.section-visual,
.service-card,
.info-card,
.value-card,
.overview-card {
  --reveal-x: 18px;
  --reveal-y: 0px;
}

/* Najczęściej używany wariant animacji */
.reveal,
.reveal-up,
.fade-slide,
[data-reveal] {
  transform: translate3d(var(--reveal-x), 0, 0) !important;
  transition:
    opacity 0.62s ease,
    transform 0.62s ease !important;
  will-change: opacity, transform;
}

.reveal.is-visible,
.reveal-up.is-visible,
.fade-slide.is-visible,
[data-reveal].is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Zabezpieczenie przed wcześniejszymi animacjami typu translateY */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Anchor / kliknięcia z menu: brak pionowego przesuwania elementów podczas odkrywania */
html {
  scroll-padding-top: 124px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .fade-slide,
  [data-reveal] {
    transform: none !important;
    transition: opacity 0.2s ease !important;
  }
}

@media (max-width: 880px) {
  .reveal,
  .reveal-up,
  .fade-slide,
  [data-reveal] {
    --reveal-x: 10px;
  }

  html {
    scroll-padding-top: 108px;
  }
}


/* =========================================================
   MatiCar v17 — naprawa animacji reveal naprawdę bez slide pionowego
   Problem w v16: strona używała innych klas stanu niż .is-visible,
   więc wcześniejszy translateY nadal działał. Tutaj przykrywamy wszystkie
   warianty klas i atrybutów używanych przez reveal/fade-scroll.
   ========================================================= */

/* Stan początkowy: tylko fade + ewentualnie minimalne przesunięcie poziome.
   Nie ma translateY, więc sekcje nie zmieniają pozycji pionowej. */
.reveal,
.reveal-up,
.fade-slide,
.fade-in,
.js-reveal,
[data-reveal],
[data-animate],
.content-section.reveal,
.section-grid.reveal,
.section-card.reveal,
.section-visual.reveal,
.service-card.reveal,
.info-card.reveal,
.value-card.reveal,
.overview-card.reveal {
  opacity: 0;
  transform: translate3d(14px, 0, 0) !important;
  translate: 0 0 !important;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease !important;
  will-change: opacity, transform;
}

/* Wszystkie popularne klasy stanu widocznego — wcześniejszy JS może używać jednej z nich */
.reveal.visible,
.reveal.is-visible,
.reveal.reveal-visible,
.reveal.is-revealed,
.reveal.in-view,
.reveal.active,
.reveal.show,
.reveal-up.visible,
.reveal-up.is-visible,
.reveal-up.reveal-visible,
.reveal-up.is-revealed,
.reveal-up.in-view,
.reveal-up.active,
.reveal-up.show,
.fade-slide.visible,
.fade-slide.is-visible,
.fade-slide.reveal-visible,
.fade-slide.is-revealed,
.fade-slide.in-view,
.fade-slide.active,
.fade-slide.show,
.fade-in.visible,
.fade-in.is-visible,
.fade-in.reveal-visible,
.fade-in.is-revealed,
.fade-in.in-view,
.fade-in.active,
.fade-in.show,
.js-reveal.visible,
.js-reveal.is-visible,
.js-reveal.reveal-visible,
.js-reveal.is-revealed,
.js-reveal.in-view,
.js-reveal.active,
.js-reveal.show,
[data-reveal].visible,
[data-reveal].is-visible,
[data-reveal].reveal-visible,
[data-reveal].is-revealed,
[data-reveal].in-view,
[data-reveal].active,
[data-reveal].show,
[data-animate].visible,
[data-animate].is-visible,
[data-animate].reveal-visible,
[data-animate].is-revealed,
[data-animate].in-view,
[data-animate].active,
[data-animate].show {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  translate: 0 0 !important;
}

/* Gdyby wcześniejszy CSS odpalał animację keyframes z translateY — nadpisujemy ją poziomo */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Scroll z menu: jeszcze większy priorytet na stabilne kotwice */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 124px !important;
}

section[id],
[id="hero"],
[id="o-warsztacie"],
[id="mechanika"],
[id="elektromechanika"],
[id="wulkanizacja"],
[id="klimatyzacja"],
[id="kontakt"],
[id="prywatnosc"] {
  scroll-margin-top: 124px !important;
}

@media (max-width: 880px) {
  .reveal,
  .reveal-up,
  .fade-slide,
  .fade-in,
  .js-reveal,
  [data-reveal],
  [data-animate] {
    transform: translate3d(8px, 0, 0) !important;
  }

  .reveal.visible,
  .reveal.is-visible,
  .reveal.reveal-visible,
  .reveal.is-revealed,
  .reveal.in-view,
  .reveal.active,
  .reveal.show,
  .reveal-up.visible,
  .reveal-up.is-visible,
  .reveal-up.reveal-visible,
  .reveal-up.is-revealed,
  .reveal-up.in-view,
  .reveal-up.active,
  .reveal-up.show,
  .fade-slide.visible,
  .fade-slide.is-visible,
  .fade-slide.reveal-visible,
  .fade-slide.is-revealed,
  .fade-slide.in-view,
  .fade-slide.active,
  .fade-slide.show,
  .fade-in.visible,
  .fade-in.is-visible,
  .fade-in.reveal-visible,
  .fade-in.is-revealed,
  .fade-in.in-view,
  .fade-in.active,
  .fade-in.show,
  .js-reveal.visible,
  .js-reveal.is-visible,
  .js-reveal.reveal-visible,
  .js-reveal.is-revealed,
  .js-reveal.in-view,
  .js-reveal.active,
  .js-reveal.show,
  [data-reveal].visible,
  [data-reveal].is-visible,
  [data-reveal].reveal-visible,
  [data-reveal].is-revealed,
  [data-reveal].in-view,
  [data-reveal].active,
  [data-reveal].show,
  [data-animate].visible,
  [data-animate].is-visible,
  [data-animate].reveal-visible,
  [data-animate].is-revealed,
  [data-animate].in-view,
  [data-animate].active,
  [data-animate].show {
    transform: translate3d(0, 0, 0) !important;
  }

  html {
    scroll-padding-top: 108px !important;
  }

  section[id],
  [id="hero"],
  [id="o-warsztacie"],
  [id="mechanika"],
  [id="elektromechanika"],
  [id="wulkanizacja"],
  [id="klimatyzacja"],
  [id="kontakt"],
  [id="prywatnosc"] {
    scroll-margin-top: 108px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .fade-slide,
  .fade-in,
  .js-reveal,
  [data-reveal],
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   MatiCar v18 — faktyczna poprawka animacji scroll
   Realna klasa używana w HTML to .fade-on-scroll.
   Usuwamy translateY i zamieniamy go na delikatny ruch poziomy z prawej.
   ========================================================= */

.fade-on-scroll {
  opacity: 0 !important;
  transform: translate3d(16px, 0, 0) !important;
  translate: 0 0 !important;
  transition:
    opacity 0.60s ease,
    transform 0.60s ease !important;
  will-change: opacity, transform;
}

.fade-on-scroll.is-visible,
.hero-section.hero-fade-start-visible,
.hero-section.hero-fade-start-visible.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  translate: 0 0 !important;
}

/* Dodatkowe zabezpieczenie: gdyby gdziekolwiek działały stare keyframes z ruchem pionowym */
@keyframes fadeOnScroll {
  from {
    opacity: 0;
    transform: translate3d(16px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Kotwice z menu — sekcje nie przesuwają się już w pionie przy odkrywaniu */
html {
  scroll-padding-top: 124px !important;
}

section[id] {
  scroll-margin-top: 124px !important;
}

@media (max-width: 880px) {
  .fade-on-scroll {
    transform: translate3d(10px, 0, 0) !important;
  }

  .fade-on-scroll.is-visible,
  .hero-section.hero-fade-start-visible,
  .hero-section.hero-fade-start-visible.is-visible {
    transform: translate3d(0, 0, 0) !important;
  }

  html {
    scroll-padding-top: 108px !important;
  }

  section[id] {
    scroll-margin-top: 108px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* FIX v19: mocniejszy, wyraźniejszy slide poziomy z prawej */
.fade-on-scroll {
  opacity: 0 !important;
  transform: translate3d(56px, 0, 0) !important;
  translate: 0 0 !important;
  transition:
    opacity 0.78s ease,
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
}

.fade-on-scroll.is-visible,
.hero-section.hero-fade-start-visible,
.hero-section.hero-fade-start-visible.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  translate: 0 0 !important;
}

@keyframes fadeOnScroll {
  from {
    opacity: 0;
    transform: translate3d(56px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 880px) {
  .fade-on-scroll {
    transform: translate3d(28px, 0, 0) !important;
    transition:
      opacity 0.70s ease,
      transform 0.70s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .fade-on-scroll.is-visible,
  .hero-section.hero-fade-start-visible,
  .hero-section.hero-fade-start-visible.is-visible {
    transform: translate3d(0, 0, 0) !important;
  }
}


/* FIX v20: kontur klucza płaskiego z lewej strony nagłówków sekcji */
.section-title {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Ikona narzędzia przed tekstem — jasny niebieski kontur */
.section-title::marker {
  display: none;
}

.section-title > span:first-child,
.section-title h2,
.section-title .section-title-text {
  position: relative;
  z-index: 2;
}

/* Jeżeli nagłówek jest zwykłym elementem tekstowym, pseudo-element działa jako ikona przed treścią */
.section-title::after {
  /* zachowujemy wcześniejszą niebieską kreskę jako dolny akcent */
}

/* Klucz płaski jako osobny kontur po lewej */
.section-title {
  padding-left: 28px !important;
}

.section-title::selection {
  background: rgba(56,189,248,0.30);
}

/* Używamy dodatkowego wewnętrznego cienia dla czytelności ikony na ciemnym tle */
.section-title::before {
  /* zostaje szachownica z v15 po prawej, dlatego ikonę dodajemy przez background-layer w samej belce */
}

/* Osobna ikona przez maskę na dodatkowym elemencie logicznym: wykorzystujemy box-shadow na inset pseudo-warstwie */
.section-title {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M45.7 6.8c-4.7-1.2-9.9.1-13.6 3.9-4.3 4.3-5.3 10.7-3 15.9L8.6 47.1c-2.1 2.1-2.1 5.5 0 7.6l.7.7c2.1 2.1 5.5 2.1 7.6 0L37.4 34.9c5.2 2.3 11.6 1.3 15.9-3 3.8-3.8 5.1-9 3.9-13.7l-9.4 9.4-8.4-3 3-8.4 9.4-9.4Z' stroke='%2367d5ff' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='51' r='2.8' stroke='%2367d5ff' stroke-width='3.4'/%3E%3C/svg%3E"),
    radial-gradient(circle at 8% 12%, rgba(56,189,248,0.22), transparent 28%),
    linear-gradient(135deg, #0f172a 0%, #172033 48%, #1e293b 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 34px 34px, auto, auto !important;
  background-position: 28px center, center, center !important;
  padding-left: 78px !important;
}

/* Ponieważ v15 używało ::before na szachownicę, zostawiamy ją po prawej — ikona jest tłem po lewej */
.section-title::before {
  right: -34px !important;
  left: auto !important;
}

/* Delikatne rozjaśnienie niebieskiej kreski, żeby ikona i akcent były z jednej rodziny */
.section-title::after {
  background:
    linear-gradient(90deg, rgba(103,213,255,0.12), rgba(103,213,255,0.82) 32%, rgba(56,189,248,0.68) 68%, rgba(103,213,255,0.08)) !important;
  box-shadow:
    0 0 14px rgba(103,213,255,0.34),
    0 0 24px rgba(56,189,248,0.16) !important;
}

@media (max-width: 880px) {
  .section-title {
    gap: 12px !important;
    padding-left: 62px !important;
    background-size: 28px 28px, auto, auto !important;
    background-position: 20px center, center, center !important;
  }
}


/* FIX v21: krótsze menu desktop + dropdown Usługi + przycisk Zadzwoń */
@media (min-width: 881px) {
  .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .main-nav > a,
  .nav-dropdown__toggle {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font: inherit !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease !important;
  }

  .main-nav > a:hover,
  .main-nav > a:focus-visible,
  .nav-dropdown:hover .nav-dropdown__toggle,
  .nav-dropdown__toggle:focus-visible,
  .nav-dropdown.is-open .nav-dropdown__toggle {
    background: rgba(56,189,248,0.10) !important;
    border-color: rgba(56,189,248,0.22) !important;
    color: #0b5fb8 !important;
    outline: none !important;
  }

  .nav-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .nav-dropdown__toggle span {
    margin-left: 7px;
    font-size: 0.82em;
    transform: translateY(1px);
  }

  .nav-dropdown__menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: auto !important;
    min-width: 250px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(248,250,252,0.98), rgba(232,239,248,0.98)) !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow:
      0 20px 42px rgba(15,23,42,0.16),
      inset 0 1px 0 rgba(255,255,255,0.70) !important;
    transform: translate3d(-50%, 8px, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 80 !important;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s ease !important;
  }

  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu,
  .nav-dropdown.is-open .nav-dropdown__menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  .nav-dropdown__menu::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(248,250,252,0.98);
    border-left: 1px solid rgba(15,23,42,0.08);
    border-top: 1px solid rgba(15,23,42,0.08);
  }

  .nav-dropdown__menu a {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    color: #172033 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    transition:
      background-color 0.18s ease,
      color 0.18s ease,
      transform 0.18s ease !important;
  }

  .nav-dropdown__menu a:hover,
  .nav-dropdown__menu a:focus-visible {
    background: rgba(56,189,248,0.13) !important;
    color: #0b5fb8 !important;
    transform: translateX(3px) !important;
    outline: none !important;
  }

  .nav-call {
    margin-left: 4px !important;
    color: #f8fafc !important;
    background:
      linear-gradient(135deg, #2563eb, #38bdf8) !important;
    border-color: rgba(37,99,235,0.22) !important;
    box-shadow: 0 10px 20px rgba(37,99,235,0.22) !important;
  }

  .nav-call:hover,
  .nav-call:focus-visible {
    color: #ffffff !important;
    background:
      linear-gradient(135deg, #1d4ed8, #0ea5e9) !important;
    box-shadow: 0 12px 24px rgba(37,99,235,0.30) !important;
  }
}

/* Mobile: hamburger zostaje, ale grupa Usługi jest czytelniej rozpisana */
@media (max-width: 880px) {
  .mobile-menu__label {
    display: block;
    margin: 10px 16px 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(15,23,42,0.10);
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mobile-menu__sub {
    padding-left: 28px !important;
    font-size: 0.95rem !important;
  }

  .mobile-call {
    margin-top: 8px !important;
    color: #f8fafc !important;
    background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
}


/* FIX v25: awaryjnie bezpieczny reveal — treść nie znika, gdy JS/observer zawiedzie */
.fade-on-scroll {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  translate: 0 0 !important;
}

/* Dopiero gdy JS się poprawnie uruchomi, sekcje czekające na animację są ukryte */
html.reveal-ready .fade-on-scroll:not(.is-visible):not(.hero-fade-start-visible) {
  opacity: 0 !important;
  transform: translate3d(56px, 0, 0) !important;
  transition:
    opacity 0.78s ease,
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Stan widoczny */
html.reveal-ready .fade-on-scroll.is-visible,
html.reveal-ready .hero-section.hero-fade-start-visible,
html.reveal-ready .hero-section.hero-fade-start-visible.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity 0.78s ease,
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (max-width: 880px) {
  html.reveal-ready .fade-on-scroll:not(.is-visible):not(.hero-fade-start-visible) {
    transform: translate3d(28px, 0, 0) !important;
  }
}


/* FIX v26: większe menu desktop + wielkie litery */
@media (min-width: 881px) {
  .main-nav > a,
  .nav-dropdown__toggle {
    font-size: 1.62rem !important; /* ok. +60–70% względem wcześniejszej skali */
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    line-height: 1 !important;
  }

  .main-nav {
    gap: 12px !important;
  }

  .nav-dropdown__toggle span {
    margin-left: 10px !important;
    font-size: 0.72em !important;
  }

  .nav-dropdown__menu {
    min-width: 310px !important;
  }

  .nav-dropdown__menu a {
    font-size: 1.05rem !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
    min-height: 48px !important;
  }

  .nav-call {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* Na średnich desktopach lekko mniejszy rozmiar, żeby menu nie zaczęło znowu łamać się w dwie linie */
@media (min-width: 881px) and (max-width: 1180px) {
  .main-nav > a,
  .nav-dropdown__toggle {
    font-size: 1.42rem !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    letter-spacing: 0.035em !important;
  }

  .main-nav {
    gap: 8px !important;
  }
}


/* FIX v28: usunięto CTA ZADZWOŃ z górnej belki — menu jest prostsze i nie dubluje Hero */
@media (min-width: 881px) {
  .main-nav {
    gap: 18px !important;
  }
}


/* FIX v30: dropdown USŁUGI — rozmiar jak górne menu + delikatne uwypuklenie pozycji */
@media (min-width: 881px) {
  .nav-dropdown__menu {
    min-width: 430px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background:
      linear-gradient(180deg, rgba(248,250,252,0.99), rgba(232,239,248,0.98)) !important;
  }

  .nav-dropdown__menu a {
    font-size: 1.62rem !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    border-radius: 15px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.86), rgba(226,232,240,0.62)) !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.88),
      0 6px 14px rgba(15,23,42,0.055) !important;
  }

  .nav-dropdown__menu a + a {
    margin-top: 8px !important;
  }

  .nav-dropdown__menu a:hover,
  .nav-dropdown__menu a:focus-visible {
    background:
      linear-gradient(180deg, rgba(239,248,255,0.96), rgba(210,231,247,0.80)) !important;
    border-color: rgba(56,189,248,0.24) !important;
    color: #0b5fb8 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.92),
      0 8px 18px rgba(37,99,235,0.12) !important;
  }
}

@media (min-width: 881px) and (max-width: 1180px) {
  .nav-dropdown__menu {
    min-width: 380px !important;
  }

  .nav-dropdown__menu a {
    font-size: 1.42rem !important;
    letter-spacing: 0.035em !important;
    min-height: 54px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}






/* === MatiCar v38: uporządkowane menu główne i dropdown Usługi === */

/* DESKTOP */
@media (min-width: 881px) {
  .site-header .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .site-header .main-nav > a,
  .site-header .nav-dropdown__toggle {
    font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0f172a !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
  }

  .site-header .nav-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .site-header .nav-dropdown__toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
  }

  .site-header .nav-dropdown__toggle span {
    margin-left: 8px !important;
    font-size: 0.72em !important;
    line-height: 1 !important;
    transform: translateY(1px) !important;
  }

  .site-header .main-nav > a:hover,
  .site-header .main-nav > a:focus-visible,
  .site-header .nav-dropdown__toggle:hover,
  .site-header .nav-dropdown__toggle:focus-visible,
  .site-header .nav-dropdown.is-open .nav-dropdown__toggle {
    background: rgba(56,189,248,0.10) !important;
    border-color: rgba(56,189,248,0.22) !important;
    color: #0b5fb8 !important;
    outline: none !important;
  }

  /* Domyślnie dropdown jest zamknięty. Hover ani focus-within go nie otwiera. */
  .site-header .nav-dropdown .nav-dropdown__menu,
  .site-header .nav-dropdown:hover .nav-dropdown__menu,
  .site-header .nav-dropdown:focus-within .nav-dropdown__menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: auto !important;
    width: 360px !important;
    min-width: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(248,250,252,0.99), rgba(232,239,248,0.98)) !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 20px 42px rgba(15,23,42,0.16), inset 0 1px 0 rgba(255,255,255,0.70) !important;
    transform: translate3d(-50%, 8px, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  }

  /* Dropdown jest otwarty tylko po kliknięciu przycisku Usługi, czyli po dodaniu .is-open przez JS. */
  .site-header .nav-dropdown.is-open .nav-dropdown__menu,
  .site-header .nav-dropdown.is-open:hover .nav-dropdown__menu,
  .site-header .nav-dropdown.is-open:focus-within .nav-dropdown__menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  .site-header .nav-dropdown__menu a {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    color: #172033 !important;
    text-decoration: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(226,232,240,0.62)) !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 6px 14px rgba(15,23,42,0.055) !important;
  }

  .site-header .nav-dropdown__menu a + a {
    margin-top: 0 !important;
  }

  .site-header .nav-dropdown__menu a:hover,
  .site-header .nav-dropdown__menu a:focus-visible {
    background: linear-gradient(180deg, rgba(239,248,255,0.96), rgba(210,231,247,0.80)) !important;
    border-color: rgba(56,189,248,0.24) !important;
    color: #0b5fb8 !important;
    transform: none !important;
    outline: none !important;
  }

  .site-header .mobile-service-link {
    display: none !important;
  }
}

/* MOBILE — bez zmian funkcjonalnie: w menu pokazują się konkretne usługi, jedna pod drugą. */
@media (max-width: 880px) {
  .site-header .nav-dropdown {
    display: block !important;
    width: 100% !important;
  }

  .site-header .nav-dropdown__toggle {
    display: none !important;
  }

  .site-header .nav-dropdown__menu,
  .site-header .nav-dropdown:hover .nav-dropdown__menu,
  .site-header .nav-dropdown:focus-within .nav-dropdown__menu,
  .site-header .nav-dropdown.is-open .nav-dropdown__menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .site-header .nav-dropdown__menu::before {
    display: none !important;
  }

  .site-header .main-nav > a,
  .site-header .nav-dropdown__menu a {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    border-radius: 14px !important;
  }

  .site-header .mobile-service-link {
    display: none !important;
  }
}


/* === MatiCar v39: lżejsze, bardziej premium nagłówki === */

@media (min-width: 881px) {
  .hero-title {
    font-weight: 700 !important;
    font-size: clamp(2.65rem, 4.35vw, 4.35rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
  }

  .section-title {
    font-weight: 700 !important;
    font-size: clamp(2rem, 3.1vw, 3.05rem) !important;
    line-height: 1.16 !important;
    letter-spacing: 0.025em !important;
  }

  .section-card h3,
  .overview-card h3,
  .value-item h3,
  .info-card h3,
  .small-card h3 {
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 0.02em !important;
  }

  .hero-kicker {
    font-weight: 700 !important;
    letter-spacing: 0.11em !important;
  }
}

@media (max-width: 880px) {
  .hero-title {
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
  }

  .section-title {
    font-weight: 700 !important;
    line-height: 1.14 !important;
    letter-spacing: 0.02em !important;
  }

  .section-card h3,
  .overview-card h3,
  .value-item h3,
  .info-card h3,
  .small-card h3 {
    font-weight: 700 !important;
    line-height: 1.16 !important;
  }
}



/* === MatiCar v43: fixed header 100% viewport bez przesunięcia w lewo === */

:root {
  --fixed-header-height: 86px;
  --content-width: min(95vw, 1600px);
  --header-side-padding: max(2.5vw, calc((100vw - 1600px) / 2 + 2.5vw));
}

/* Twardy reset położenia belki: zero transformów, zero ujemnych marginesów. */
body > .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--fixed-header-height) !important;

  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;

  border-radius: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(15,23,42,0.10) !important;

  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  z-index: 9999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  box-sizing: border-box !important;
  padding: 12px var(--header-side-padding) !important;
}

/* Kontener strony jest normalnie wyśrodkowany i ma 95% szerokości viewportu. */
.page-shell {
  width: var(--content-width) !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: calc(var(--fixed-header-height) + 28px) !important;
  transform: none !important;
}

/* Hero ma zacząć się minimalnie pod paskiem, z oddechem. */
main {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hero-section {
  margin-top: 0 !important;
}

/* Kliknięcie w menu nie chowa sekcji pod fixed headerem. */
#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 24px) !important;
}

/* Logo z lewej, menu z prawej, bez marginesów odziedziczonych z wcześniejszych prób. */
body > .site-header > .logo,
body > .site-header > .main-nav,
body > .site-header > .hamburger,
body > .site-header > .nav-toggle {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Desktop */
@media (min-width: 881px) {
  body > .site-header .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}

/* Mobile */
@media (max-width: 880px) {
  :root {
    --fixed-header-height: 78px;
    --content-width: 95vw;
    --header-side-padding: 2.5vw;
  }

  body > .site-header {
    width: 100% !important;
    min-height: var(--fixed-header-height) !important;
    padding: 10px var(--header-side-padding) !important;
  }

  .page-shell {
    width: var(--content-width) !important;
    max-width: none !important;
    padding-top: calc(var(--fixed-header-height) + 18px) !important;
  }

  body > .site-header .main-nav {
    top: calc(100% + 8px) !important;
    left: 2.5vw !important;
    right: 2.5vw !important;
    width: auto !important;
    margin: 0 !important;
  }

  .hero-shell {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* === MatiCar v44: dopasowany odstęp między fixed headerem a Hero === */

/*
  Zasada:
  - Hero nie ma własnego górnego marginesu.
  - Odstęp od belki kontroluje wyłącznie .page-shell.
  - Dzięki temu nie sumują się przypadkowe marginesy z main / hero / sekcji.
*/

.page-shell {
  padding-top: calc(var(--fixed-header-height) + 20px) !important;
}

main {
  padding-top: 0 !important;
}

.hero-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Pierwszy element strony nie dodaje dodatkowej przerwy nad Hero. */
main > .hero-section:first-child {
  margin-top: 0 !important;
}

/* Mobile: nieco ciaśniej, żeby nie tracić miejsca na małym ekranie. */
@media (max-width: 880px) {
  .page-shell {
    padding-top: calc(var(--fixed-header-height) + 14px) !important;
  }

  main,
  .hero-section,
  main > .hero-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* === MatiCar v45: odstęp pod fixed headerem kontrolowany przez body === */

/*
  Finalna zasada:
  - fixed header jest poza normalnym układem,
  - body robi miejsce na header + mały odstęp,
  - page-shell/main/hero NIE dodają już pustego pola od góry.
*/

body {
  padding-top: calc(var(--fixed-header-height) + 8px) !important;
}

.page-shell {
  padding-top: 0 !important;
}

main {
  padding-top: 0 !important;
}

.hero-section,
main > .hero-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Dla samego Hero zostawiamy tylko naturalny dystans przez body, bez dodatkowego pola. */
.hero-shell {
  margin-top: 0 !important;
}

/* Kliknięcia w menu nadal mają uwzględniać fixed header. */
#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 12px) !important;
}

@media (max-width: 880px) {
  body {
    padding-top: calc(var(--fixed-header-height) + 6px) !important;
  }

  .page-shell,
  main,
  .hero-section,
  main > .hero-section:first-child,
  .hero-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* === MatiCar v46: odstęp kontenera = wysokość belki + 3vw === */

/*
  Finalna korekta:
  - fixed header nadal siedzi na stałe u góry,
  - body nie robi już dodatkowego odstępu,
  - główny kontener strony zaczyna się od:
    wysokość belki + 3% szerokości viewportu,
  - Hero nie dokłada własnego marginesu od góry.
*/

body {
  padding-top: 0 !important;
}

.page-shell {
  padding-top: 0 !important;
  margin-top: calc(var(--fixed-header-height) + 3vw) !important;
}

main,
.hero-section,
main > .hero-section:first-child,
.hero-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kotwice przy klikaniu w menu uwzględniają fixed header oraz dodatkowy oddech. */
#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 3vw) !important;
}

@media (max-width: 880px) {
  .page-shell {
    margin-top: calc(var(--fixed-header-height) + 3vw) !important;
    padding-top: 0 !important;
  }

  body,
  main,
  .hero-section,
  main > .hero-section:first-child,
  .hero-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* === MatiCar v47: delikatnie większy odstęp nad Hero === */

/*
  Było: wysokość belki + 3vw.
  Teraz: wysokość belki + 4vw.
  Hero nadal nie dokłada własnego marginesu.
*/

.page-shell {
  margin-top: calc(var(--fixed-header-height) + 4vw) !important;
  padding-top: 0 !important;
}

main,
.hero-section,
main > .hero-section:first-child,
.hero-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 4vw) !important;
}

@media (max-width: 880px) {
  .page-shell {
    margin-top: calc(var(--fixed-header-height) + 4vw) !important;
    padding-top: 0 !important;
  }
}


/* === MatiCar v48: odstęp nad Hero = wysokość belki + 10vw === */

.page-shell {
  margin-top: calc(var(--fixed-header-height) + 10vw) !important;
  padding-top: 0 !important;
}

main,
.hero-section,
main > .hero-section:first-child,
.hero-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 10vw) !important;
}

@media (max-width: 880px) {
  .page-shell {
    margin-top: calc(var(--fixed-header-height) + 10vw) !important;
    padding-top: 0 !important;
  }
}


/* === MatiCar v49: odstęp nad Hero = wysokość belki + 2vw === */

.page-shell {
  margin-top: calc(var(--fixed-header-height) + 2vw) !important;
  padding-top: 0 !important;
}

main,
.hero-section,
main > .hero-section:first-child,
.hero-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 2vw) !important;
}

@media (max-width: 880px) {
  .page-shell {
    margin-top: calc(var(--fixed-header-height) + 2vw) !important;
    padding-top: 0 !important;
  }
}


/* === MatiCar v50: sztywna zewnętrzna wysokość fixed headera === */

/*
  Teraz --fixed-header-height jest realną zewnętrzną wysokością belki.
  Dzięki box-sizing: border-box padding i border mieszczą się w tej wysokości.
*/

body > .site-header {
  height: var(--fixed-header-height) !important;
  min-height: 0 !important;
  max-height: var(--fixed-header-height) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Logo i menu muszą mieścić się w sztywnej wysokości belki. */
body > .site-header .logo,
body > .site-header .logo img {
  max-height: calc(var(--fixed-header-height) - 24px) !important;
}

body > .site-header .main-nav,
body > .site-header .nav-dropdown,
body > .site-header .nav-dropdown__toggle,
body > .site-header .main-nav > a {
  max-height: calc(var(--fixed-header-height) - 20px) !important;
  box-sizing: border-box !important;
}

/* Odstęp strony pozostaje: realna wysokość belki + 2vw. */
.page-shell {
  margin-top: calc(var(--fixed-header-height) + 2vw) !important;
  padding-top: 0 !important;
}

main,
.hero-section,
main > .hero-section:first-child,
.hero-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 2vw) !important;
}

@media (max-width: 880px) {
  body > .site-header {
    height: var(--fixed-header-height) !important;
    min-height: 0 !important;
    max-height: var(--fixed-header-height) !important;
  }

  body > .site-header .logo,
  body > .site-header .logo img {
    max-height: calc(var(--fixed-header-height) - 20px) !important;
  }

  .page-shell {
    margin-top: calc(var(--fixed-header-height) + 2vw) !important;
    padding-top: 0 !important;
  }
}


/* === MatiCar v51: header 100px + margines kontenera 1.5vw === */

:root {
  --fixed-header-height: 100px;
}

/* Zewnętrzna wysokość belki ustawiona na sztywne 100px. */
body > .site-header {
  height: var(--fixed-header-height) !important;
  min-height: 0 !important;
  max-height: var(--fixed-header-height) !important;
  box-sizing: border-box !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Logo większe, dopasowane do belki 100px. */
body > .site-header .logo,
body > .site-header .logo img {
  max-height: 72px !important;
}

body > .site-header .logo img {
  width: auto !important;
  object-fit: contain !important;
}

/* Menu zostaje wyśrodkowane pionowo w wyższej belce. */
body > .site-header .main-nav,
body > .site-header .nav-dropdown,
body > .site-header .nav-dropdown__toggle,
body > .site-header .main-nav > a {
  max-height: calc(var(--fixed-header-height) - 24px) !important;
  box-sizing: border-box !important;
}

/* Główny kontener zaczyna się od: wysokość belki + 1.5vw. */
.page-shell {
  margin-top: calc(var(--fixed-header-height) + 1.5vw) !important;
  padding-top: 0 !important;
}

main,
.hero-section,
main > .hero-section:first-child,
.hero-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kotwice też uwzględniają nową wysokość belki i oddech. */
#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 1.5vw) !important;
}

/* Mobile zostawiamy bardziej kompaktowy, żeby belka nie zjadła za dużo ekranu. */
@media (max-width: 880px) {
  :root {
    --fixed-header-height: 82px;
  }

  body > .site-header {
    height: var(--fixed-header-height) !important;
    min-height: 0 !important;
    max-height: var(--fixed-header-height) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body > .site-header .logo,
  body > .site-header .logo img {
    max-height: 62px !important;
  }

  .page-shell {
    margin-top: calc(var(--fixed-header-height) + 1.5vw) !important;
    padding-top: 0 !important;
  }

  #top,
  #o-warsztacie,
  #mechanika,
  #elektromechanika,
  #wulkanizacja,
  #klimatyzacja,
  #kontakt,
  .content-section {
    scroll-margin-top: calc(var(--fixed-header-height) + 1.5vw) !important;
  }
}


/* === MatiCar v52: test logo 85px przy belce 100px === */

body > .site-header {
  height: 100px !important;
  min-height: 0 !important;
  max-height: 100px !important;
}

body > .site-header .logo,
body > .site-header .logo img {
  max-height: 85px !important;
}

body > .site-header .logo img {
  width: auto !important;
  object-fit: contain !important;
}

/* Mobile zostaje bez zmian względem poprzedniej wersji, żeby test dotyczył desktopu. */
@media (max-width: 880px) {
  body > .site-header .logo,
  body > .site-header .logo img {
    max-height: 62px !important;
  }
}


/* === MatiCar v53: margines kontenera = wysokość belki + 1vw === */

.page-shell {
  margin-top: calc(var(--fixed-header-height) + 1vw) !important;
  padding-top: 0 !important;
}

main,
.hero-section,
main > .hero-section:first-child,
.hero-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#top,
#o-warsztacie,
#mechanika,
#elektromechanika,
#wulkanizacja,
#klimatyzacja,
#kontakt,
.content-section {
  scroll-margin-top: calc(var(--fixed-header-height) + 1vw) !important;
}

@media (max-width: 880px) {
  .page-shell {
    margin-top: calc(var(--fixed-header-height) + 1vw) !important;
    padding-top: 0 !important;
  }

  #top,
  #o-warsztacie,
  #mechanika,
  #elektromechanika,
  #wulkanizacja,
  #klimatyzacja,
  #kontakt,
  .content-section {
    scroll-margin-top: calc(var(--fixed-header-height) + 1vw) !important;
  }
}


/* === MatiCar v54: Saira Condensed dla nagłówków === */

/*
  Barlow zostaje czcionką bazową dla tekstów, menu i UI.
  Saira Condensed nadaje charakteru tylko głównym nagłówkom i tytułom sekcji.
*/

.hero-title,
.section-title {
  font-family: "Saira Condensed", "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.015em !important;
  text-transform: uppercase !important;
}

.hero-title {
  line-height: 1.02 !important;
}

.section-title {
  line-height: 1.06 !important;
}

/* Tytuły kart dostają Sairę tylko delikatnie, żeby całość była spójna, ale nie za ciężka. */
.overview-card h3,
.value-item h3,
.info-card h3,
.small-card h3 {
  font-family: "Saira Condensed", "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  line-height: 1.08 !important;
}

/* Dłuższe nagłówki w treści i menu zostają w Barlow dla czytelności. */
.main-nav,
.nav-dropdown__menu,
.section-card,
.section-card h3,
.hero-kicker,
.hero-lead,
p,
li,
a,
button {
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Na mobile Saira zostaje, ale z odrobiną większego line-height, żeby nie była zbyt zbita. */
@media (max-width: 880px) {
  .hero-title,
  .section-title {
    line-height: 1.08 !important;
    letter-spacing: 0.012em !important;
  }

  .overview-card h3,
  .value-item h3,
  .info-card h3,
  .small-card h3 {
    line-height: 1.12 !important;
  }
}


/* === MatiCar v55: poprawka kontenera menu mobilnego === */

/*
  Tylko mobile:
  - kontener menu ma obejmować wszystkie przyciski,
  - linki usług nie mogą "wisieć" poza tłem menu,
  - dropdown Usługi na mobile jest częścią normalnej listy linków.
*/
@media (max-width: 880px) {
  body > .site-header .main-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 2.5vw !important;
    right: 2.5vw !important;
    width: auto !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;

    padding: 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(37,99,235,0.18) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.98) !important;
    box-shadow: 0 22px 40px rgba(15,23,42,0.16) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 9998 !important;
  }

  body > .site-header .nav-toggle:checked ~ .main-nav {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  body > .site-header .nav-dropdown {
    position: static !important;
    display: block !important;
    width: 100% !important;
  }

  body > .site-header .nav-dropdown__toggle {
    display: none !important;
  }

  body > .site-header .nav-dropdown__menu,
  body > .site-header .nav-dropdown:hover .nav-dropdown__menu,
  body > .site-header .nav-dropdown:focus-within .nav-dropdown__menu,
  body > .site-header .nav-dropdown.is-open .nav-dropdown__menu {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body > .site-header .nav-dropdown__menu::before {
    display: none !important;
    content: none !important;
  }

  body > .site-header .main-nav > a,
  body > .site-header .nav-dropdown__menu a {
    position: relative !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.96)) !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
    box-shadow: none !important;

    font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    text-align: center !important;
    color: var(--dark) !important;
    text-decoration: none !important;
  }

  body > .site-header .main-nav > a:hover,
  body > .site-header .main-nav > a:focus-visible,
  body > .site-header .nav-dropdown__menu a:hover,
  body > .site-header .nav-dropdown__menu a:focus-visible {
    background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(56,189,248,0.06)) !important;
    color: var(--accent) !important;
    transform: none !important;
    outline: none !important;
  }
}


/* === MatiCar v56: pełna naprawa wysokości menu mobilnego === */

/*
  Problem był najpewniej w odziedziczonych limitach max-height z headera/menu.
  Na mobile menu rozwijane musi mieć auto-height i nie może być przycinane do wysokości belki.
*/
@media (max-width: 880px) {
  body > .site-header {
    overflow: visible !important;
  }

  body > .site-header .main-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 2.5vw !important;
    right: 2.5vw !important;
    width: auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 8px !important;

    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;

    border: 1px solid rgba(37,99,235,0.18) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.98) !important;
    box-shadow: 0 22px 40px rgba(15,23,42,0.16) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
    z-index: 9998 !important;
  }

  body > .site-header .nav-toggle:checked ~ .main-nav {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  body > .site-header .nav-dropdown {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
  }

  body > .site-header .nav-dropdown__toggle {
    display: none !important;
  }

  body > .site-header .nav-dropdown__menu,
  body > .site-header .nav-dropdown:hover .nav-dropdown__menu,
  body > .site-header .nav-dropdown:focus-within .nav-dropdown__menu,
  body > .site-header .nav-dropdown.is-open .nav-dropdown__menu {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body > .site-header .nav-dropdown__menu::before {
    display: none !important;
    content: none !important;
  }

  body > .site-header .main-nav > a,
  body > .site-header .nav-dropdown__menu a {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 46px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.96)) !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
    box-shadow: none !important;

    font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    text-align: center !important;
    color: var(--dark) !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  body > .site-header .main-nav > a:hover,
  body > .site-header .main-nav > a:focus-visible,
  body > .site-header .nav-dropdown__menu a:hover,
  body > .site-header .nav-dropdown__menu a:focus-visible {
    background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(56,189,248,0.06)) !important;
    color: var(--accent) !important;
    transform: none !important;
    outline: none !important;
  }
}


/* === MatiCar v57: kontakt jako cztery kafelki === */

.contact-grid-v57 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.contact-grid-v57 .info-card {
  min-height: 100%;
}

.contact-map-card-v57 {
  overflow: hidden;
}

.contact-map-card-v57 h3 {
  margin-bottom: 14px;
}

.contact-map-v57 {
  width: 100%;
  height: 320px;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(226,232,240,0.55);
}

.contact-map-v57 iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 880px) {
  .contact-grid-v57 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-map-v57 {
    height: 300px;
    border-radius: 16px;
  }
}


/* === MatiCar v58: kontakt — mapa po lewej, trzy kafelki po prawej === */

.contact-layout-v58 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: stretch;
}

.contact-side-v58 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

.contact-layout-v58 .info-card {
  min-height: 100%;
}

.contact-map-card-v58 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contact-map-card-v58 h3 {
  margin-bottom: 14px;
}

.contact-map-v58 {
  width: 100%;
  flex: 1 1 auto;
  min-height: 520px;
  height: 100%;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(226,232,240,0.55);
}

.contact-map-v58 iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  border: 0;
}

@media (max-width: 880px) {
  .contact-layout-v58 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-side-v58 {
    gap: 14px;
  }

  .contact-map-v58 {
    min-height: 300px;
    height: 300px;
    border-radius: 16px;
  }

  .contact-map-v58 iframe {
    min-height: 300px;
  }
}


/* === MatiCar v59: kontakt — telefon i adres po lewej, mapa po prawej === */

.contact-layout-v59 {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.35fr);
  gap: 18px;
  align-items: stretch;
}

.contact-side-v59 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

.contact-layout-v59 .info-card {
  min-height: 100%;
}

.contact-map-card-v59 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contact-map-card-v59 h3 {
  margin-bottom: 14px;
}

.contact-map-v59 {
  width: 100%;
  flex: 1 1 auto;
  min-height: 100%;
  height: 100%;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(226,232,240,0.55);
}

.contact-map-v59 iframe {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 880px) {
  .contact-layout-v59 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-side-v59 {
    gap: 14px;
  }

  .contact-map-v59 {
    min-height: 300px;
    height: 300px;
    border-radius: 16px;
  }

  .contact-map-v59 iframe {
    min-height: 300px;
  }
}


/* === MatiCar v60: mapa edge-to-edge w sekcji kontakt === */

.contact-map-card-v59 {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.contact-map-card-v59 h3 {
  display: none !important;
}

.contact-map-v59 {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

.contact-map-v59 iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  border: 0 !important;
}

@media (max-width: 880px) {
  .contact-map-card-v59 {
    padding: 0 !important;
  }

  .contact-map-v59 {
    min-height: 300px !important;
    height: 300px !important;
    border-radius: inherit !important;
  }

  .contact-map-v59 iframe {
    min-height: 300px !important;
  }
}


/* === MatiCar v61: menu bez dropdownu + usunięta sekcja O warsztacie === */
body > .site-header .main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body > .site-header .main-nav > a {
  white-space: nowrap !important;
}

@media (min-width: 881px) {
  body > .site-header .main-nav {
    width: auto !important;
    max-width: calc(100vw - 260px) !important;
  }

  body > .site-header .main-nav > a {
    min-height: 38px !important;
    padding: 0 13px !important;
    font-size: clamp(0.78rem, 0.85vw, 0.92rem) !important;
    letter-spacing: 0.018em !important;
  }
}

@media (max-width: 880px) {
  body > .site-header .main-nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body > .site-header .main-nav > a {
    min-height: 46px !important;
  }
}


/* === MatiCar v63: sekcje usług z poziomym tłem na desktopie i pełnym kadrem na mobile === */
@media (min-width: 881px) {
  .immersive-section {
    position: relative;
    margin-top: 18px;
    padding: 24px;
    border: 1px solid rgba(15,23,42,0.10);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 22px 44px rgba(15,23,42,0.12);
    background-color: #edf3f8;
    background-image: var(--section-overlay), var(--section-bg-image);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center center, center center;
  }

  /* Gdy osoba jest po prawej, lewa strona płynnie zanika pod kolor sekcji. */
  .immersive-section--person-right {
    --section-overlay: linear-gradient(to right,
      rgba(237,243,248,0.985) 0%,
      rgba(237,243,248,0.955) 22%,
      rgba(237,243,248,0.78) 42%,
      rgba(237,243,248,0.42) 58%,
      rgba(237,243,248,0.14) 72%,
      rgba(237,243,248,0.00) 84%);
  }

  /* Gdy osoba jest po lewej, prawa strona płynnie zanika pod kolor sekcji. */
  .immersive-section--person-left {
    --section-overlay: linear-gradient(to left,
      rgba(237,243,248,0.985) 0%,
      rgba(237,243,248,0.955) 22%,
      rgba(237,243,248,0.78) 42%,
      rgba(237,243,248,0.42) 58%,
      rgba(237,243,248,0.14) 72%,
      rgba(237,243,248,0.00) 84%);
  }

  .immersive-section .section-title {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 0 18px;
    padding: 18px 34px;
    border-radius: 22px;
    background: rgba(248,250,252,0.60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(15,23,42,0.10);
  }

  .immersive-section .section-title::after {
    left: 36px;
    bottom: 10px;
  }

  .immersive-section .section-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100%;
  }

  .immersive-section--text-left .section-grid {
    justify-content: flex-start;
  }

  .immersive-section--text-right .section-grid {
    justify-content: flex-end;
  }

  .immersive-section .section-visual {
    display: none !important;
  }

  .immersive-section .section-card {
    width: 100%;
    max-width: 60%;
    min-width: 0;
    margin: 0;
    background: rgba(241,245,249,0.62) !important;
    border: 1px solid rgba(255,255,255,0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 36px rgba(15,23,42,0.12);
  }

  .immersive-section .section-copy {
    padding: clamp(28px, 3vw, 42px) !important;
  }

  .immersive-section .section-copy p,
  .immersive-section .section-copy li {
    color: #334155;
  }

  .immersive-section .section-copy strong,
  .immersive-section .section-copy h3,
  .immersive-section .section-copy h4 {
    color: #0f172a;
  }
}

@media (max-width: 880px) {
  .immersive-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .immersive-section .section-visual {
    width: calc(100vw - 24px);
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 22px;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,0.08);
    background: #e5edf6;
    box-shadow: 0 12px 28px rgba(15,23,42,0.10);
  }

  .immersive-section .section-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}



/* === MatiCar v67: twarda korekta szerokości kontenera treści w sekcjach usług === */
@media (min-width: 881px) {
  .immersive-section .section-grid {
    display: flex !important;
    width: 100% !important;
  }

  .immersive-section--text-left .section-grid {
    justify-content: flex-start !important;
  }

  .immersive-section--text-right .section-grid {
    justify-content: flex-end !important;
  }

  .immersive-section .section-grid > .section-card.section-copy,
  .immersive-section .section-grid > .section-card {
    flex: 0 1 60% !important;
    width: 60% !important;
    max-width: 60% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* === MatiCar v69: większy oddech nagłówków, bez dolnej kreski, karta treści bardziej zawieszona === */
.section-title {
  padding-top: 36px !important;
  padding-bottom: 24px !important;
  font-family: 'Saira Condensed', 'Barlow', system-ui, sans-serif !important;
}

.section-title::after {
  display: none !important;
}

.hero-title,
.section-title,
.overview-card h3,
.info-card h3,
.small-card h3,
.value-item h3,
.main-nav a,
.hero-btn {
  font-family: 'Saira Condensed', 'Barlow', system-ui, sans-serif !important;
  letter-spacing: 0.01em;
}

body,
p,
li,
.info-card p,
.overview-card p,
.section-copy,
.contact-intro {
  font-family: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

@media (min-width: 881px) {
  .immersive-section .section-card {
    box-shadow:
      0 28px 58px rgba(15, 23, 42, 0.24),
      0 10px 24px rgba(37, 99, 235, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
    transform: translateY(-2px);
  }

  .immersive-section .section-title {
    width: 100% !important;
    padding-top: 36px !important;
    padding-bottom: 24px !important;
  }
}

@media (max-width: 880px) {
  .section-title {
    padding-top: 30px !important;
    padding-bottom: 22px !important;
  }
}


/* === MatiCar v70: kafle usług jako osobny moduł + idealne centrowanie ikony i tekstu === */
.services-overview {
  position: relative;
  z-index: 5;
  margin-top: 28px !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
}

.overview-card {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center !important;
  align-content: center !important;
  min-height: 156px;
}

.overview-card .icon-badge {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center !important;
  justify-self: center;
  margin: 0 !important;
}

.overview-card h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 0 6px !important;
  line-height: 1.05 !important;
}

.overview-card p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0 !important;
  line-height: 1.45 !important;
}

@media (max-width: 880px) {
  .services-overview {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }

  .overview-card {
    min-height: 132px;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px;
  }
}


/* === MatiCar v71: nagłówek poza kontenerem zdjęcia + pionowe centrowanie tekstu i ozdobnego elementu === */
@media (min-width: 881px) {
  .content-section > .section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 96px !important;
    margin: 0 0 18px !important;
    padding: 0 34px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .content-section > .section-title::before {
    align-self: center !important;
  }

  .content-section > .section-title::after {
    display: none !important;
  }

  .content-section > .immersive-section {
    margin-top: 0 !important;
  }

  .immersive-section .section-title {
    display: none !important;
  }
}

@media (max-width: 880px) {
  .content-section > .section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 82px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .content-section > .section-title::before {
    align-self: center !important;
  }

  .content-section > .section-title::after {
    display: none !important;
  }
}


/* === MatiCar v72: premium redesign usług i bardziej ekskluzywny charakter strony === */
:root {
  --premium-bg: #eaf1f8;
  --premium-panel: rgba(247, 250, 253, 0.66);
  --premium-border: rgba(255,255,255,0.34);
  --premium-shadow: 0 28px 70px rgba(15,23,42,0.16);
}

.page-shell {
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.08), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(37,99,235,0.08), transparent 24%),
    rgba(236,243,250,0.84);
}

.services-overview {
  gap: 18px;
}

.overview-card {
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(241,245,249,0.88));
  box-shadow:
    0 16px 36px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.60);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.overview-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 44px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.65);
}

.premium-title {
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.44) !important;
  background:
    linear-gradient(180deg, rgba(250,252,255,0.88), rgba(236,242,248,0.82)) !important;
  box-shadow:
    0 16px 34px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.60);
}

.premium-title::before {
  content: attr(data-kicker);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 38px;
  padding: 0 14px;
  margin-right: 16px;
  border-radius: 999px;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(37,99,235,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}

@media (min-width: 881px) {
  .content-section {
    margin-top: 26px;
  }

  .content-section > .premium-title {
    min-height: 112px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin-bottom: 20px !important;
  }

  .immersive-section {
    position: relative;
    padding: 22px;
    border-radius: 34px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    overflow: hidden;
    box-shadow:
      0 28px 70px rgba(15,23,42,0.16),
      inset 0 1px 0 rgba(255,255,255,0.26) !important;
    isolation: isolate;
  }

  .immersive-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 26%, rgba(15,23,42,0.06) 100%);
    z-index: 0;
    pointer-events: none;
  }

  .immersive-section::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    pointer-events: none;
    z-index: 0;
  }

  .immersive-section .section-grid {
    position: relative;
    z-index: 1;
  }

  .immersive-section .section-card {
    position: relative;
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(248,251,254,0.74), rgba(239,245,250,0.64)) !important;
    border: 1px solid var(--premium-border) !important;
    box-shadow:
      0 30px 64px rgba(15,23,42,0.20),
      0 10px 24px rgba(37,99,235,0.06),
      inset 0 1px 0 rgba(255,255,255,0.44) !important;
    transform: translateY(-1px);
  }

  .immersive-section .section-copy {
    padding: clamp(32px, 3.2vw, 48px) !important;
  }

  .immersive-section .section-card::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 26px;
    width: 86px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(56,189,248,0.95), rgba(37,99,235,0.95));
    box-shadow: 0 0 18px rgba(37,99,235,0.20);
  }

  .immersive-section .section-copy > .section-eyebrow:first-child {
    margin-top: 4px;
  }
}

.section-eyebrow {
  margin: 0 0 16px;
  color: #2563eb;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.feature-list {
  margin: 18px 0 18px;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  margin: 0 0 12px;
  padding: 14px 16px 14px 48px;
  border-radius: 18px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #38bdf8, #2563eb);
  box-shadow: 0 0 0 5px rgba(37,99,235,0.08);
}

.contact-layout-v59 .info-card,
.bottom-grid .small-card,
.values-strip {
  border-radius: 26px;
  box-shadow:
    0 18px 40px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.60);
}

.site-footer {
  background:
    linear-gradient(180deg, rgba(232,239,248,0.82), rgba(225,234,245,0.94));
}

@media (max-width: 880px) {
  .premium-title {
    padding-left: 22px !important;
    padding-right: 22px !important;
    min-height: 92px !important;
    gap: 10px;
    flex-wrap: wrap;
  }

  .premium-title::before {
    margin-right: 0;
    min-height: 34px;
    font-size: 0.72rem;
  }

  .immersive-section .section-card {
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(248,251,254,0.94), rgba(239,245,250,0.90)) !important;
  }

  .feature-list li {
    padding: 13px 14px 13px 44px;
  }
}


/* === MatiCar v73: poprawa nagłówków premium + mocniejsze dopracowanie kontenera sekcji === */
.content-section > .premium-title,
.section-title.premium-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  min-height: 104px !important;
  padding: 22px 30px !important;
  margin: 0 0 18px !important;
  color: #0f172a !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(241,246,251,0.93)) !important;
  background-image: none !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 36px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.78) !important;
  text-shadow: none !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
}

.content-section > .premium-title::before,
.section-title.premium-title::before {
  content: "" !important;
  display: block !important;
  position: relative !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 0 !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 16px !important;
  transform: none !important;
  opacity: 1 !important;
  background-color: #eaf3ff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M45.7 6.8c-4.7-1.2-9.9.1-13.6 3.9-4.3 4.3-5.3 10.7-3 15.9L8.6 47.1c-2.1 2.1-2.1 5.5 0 7.6l.7.7c2.1 2.1 5.5 2.1 7.6 0L37.4 34.9c5.2 2.3 11.6 1.3 15.9-3 3.8-3.8 5.1-9 3.9-13.7l-9.4 9.4-8.4-3 3-8.4 9.4-9.4Z' stroke='%232563eb' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='51' r='2.8' stroke='%232563eb' stroke-width='3.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 26px 26px !important;
  box-shadow: 0 10px 24px rgba(37,99,235,0.14), inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.content-section > .premium-title::after,
.section-title.premium-title::after {
  display: none !important;
}

@media (min-width: 881px) {
  .content-section > .immersive-section {
    margin-top: 0 !important;
    padding: 28px !important;
    border-radius: 38px !important;
    border: 1px solid rgba(255,255,255,0.34) !important;
    background-color: rgba(234,241,248,0.84) !important;
    box-shadow: 0 28px 64px rgba(15,23,42,0.15), inset 0 1px 0 rgba(255,255,255,0.30) !important;
  }

  .content-section > .immersive-section::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 24%, rgba(15,23,42,0.08) 100%) !important;
  }

  .content-section > .immersive-section::after {
    inset: 16px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
  }

  .immersive-section .section-card {
    position: relative !important;
    width: 60% !important;
    max-width: 60% !important;
    min-width: 0 !important;
    border-radius: 32px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(242,247,251,0.74)) !important;
    border: 1px solid rgba(255,255,255,0.56) !important;
    box-shadow: 0 34px 72px rgba(15,23,42,0.22), 0 10px 26px rgba(37,99,235,0.08), inset 0 1px 0 rgba(255,255,255,0.76) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    transform: translateY(-3px) !important;
  }

  .immersive-section .section-copy {
    padding: 40px 40px 38px !important;
  }

  .immersive-section .section-card::before {
    left: 40px !important;
    top: 28px !important;
    width: 96px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #38bdf8, #2563eb) !important;
    box-shadow: 0 0 18px rgba(37,99,235,0.18) !important;
  }
}

@media (max-width: 880px) {
  .content-section > .premium-title,
  .section-title.premium-title {
    min-height: 90px !important;
    padding: 18px 20px !important;
    gap: 14px !important;
  }

  .content-section > .premium-title::before,
  .section-title.premium-title::before {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
    background-size: 22px 22px !important;
  }

  .immersive-section .section-card {
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(242,247,251,0.90)) !important;
    box-shadow: 0 20px 42px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.72) !important;
  }
}


/* === MatiCar v74: mocniejsze nagłówki sekcji — wyraźny start kolejnego bloku === */
.content-section {
  margin-top: 34px !important;
}

.content-section > .premium-title,
.section-title.premium-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  min-height: 106px !important;
  padding: 22px 30px !important;
  margin: 0 0 20px !important;
  color: #f8fafc !important;
  background:
    radial-gradient(circle at 10% 14%, rgba(56,189,248,0.22), transparent 26%),
    linear-gradient(135deg, #07111f 0%, #0f2542 46%, #123a68 100%) !important;
  background-image:
    radial-gradient(circle at 10% 14%, rgba(56,189,248,0.22), transparent 26%),
    linear-gradient(135deg, #07111f 0%, #0f2542 46%, #123a68 100%) !important;
  border: 1px solid rgba(103,213,255,0.18) !important;
  border-radius: 26px !important;
  box-shadow:
    0 20px 42px rgba(15,23,42,0.24),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.34) !important;
  line-height: 1 !important;
  letter-spacing: 0.015em !important;
}

.content-section > .premium-title::before,
.section-title.premium-title::before {
  content: "" !important;
  display: block !important;
  position: relative !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
  transform: none !important;
  opacity: 1 !important;
  background-color: rgba(56,189,248,0.14) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M45.7 6.8c-4.7-1.2-9.9.1-13.6 3.9-4.3 4.3-5.3 10.7-3 15.9L8.6 47.1c-2.1 2.1-2.1 5.5 0 7.6l.7.7c2.1 2.1 5.5 2.1 7.6 0L37.4 34.9c5.2 2.3 11.6 1.3 15.9-3 3.8-3.8 5.1-9 3.9-13.7l-9.4 9.4-8.4-3 3-8.4 9.4-9.4Z' stroke='%2367d5ff' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='51' r='2.8' stroke='%2367d5ff' stroke-width='3.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 28px 28px !important;
  border: 1px solid rgba(103,213,255,0.22) !important;
  box-shadow:
    0 12px 26px rgba(56,189,248,0.16),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

.content-section > .premium-title::after,
.section-title.premium-title::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 4px !important;
  border-radius: 0 0 26px 26px !important;
  background: linear-gradient(90deg, rgba(103,213,255,0.10), rgba(103,213,255,0.92) 22%, rgba(37,99,235,0.74) 62%, rgba(103,213,255,0.08)) !important;
  box-shadow:
    0 0 18px rgba(103,213,255,0.24),
    0 0 28px rgba(37,99,235,0.16) !important;
  pointer-events: none !important;
}

@media (min-width: 881px) {
  .content-section > .premium-title,
  .section-title.premium-title {
    min-height: 112px !important;
  }
}

@media (max-width: 880px) {
  .content-section {
    margin-top: 22px !important;
  }

  .content-section > .premium-title,
  .section-title.premium-title {
    min-height: 92px !important;
    padding: 18px 18px !important;
    gap: 14px !important;
    border-radius: 22px !important;
    font-size: clamp(1.65rem, 7vw, 2.45rem) !important;
  }

  .content-section > .premium-title::before,
  .section-title.premium-title::before {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 16px !important;
    background-size: 24px 24px !important;
  }

  .content-section > .premium-title::after,
  .section-title.premium-title::after {
    height: 3px !important;
    border-radius: 0 0 22px 22px !important;
  }
}


/* === MatiCar v75: ikony nagłówków dopasowane do sekcji === */
#mechanika > .premium-title::before,
#mechanika.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M45.7 6.8c-4.7-1.2-9.9.1-13.6 3.9-4.3 4.3-5.3 10.7-3 15.9L8.6 47.1c-2.1 2.1-2.1 5.5 0 7.6l.7.7c2.1 2.1 5.5 2.1 7.6 0L37.4 34.9c5.2 2.3 11.6 1.3 15.9-3 3.8-3.8 5.1-9 3.9-13.7l-9.4 9.4-8.4-3 3-8.4 9.4-9.4Z' stroke='%2367d5ff' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='51' r='2.8' stroke='%2367d5ff' stroke-width='3.4'/%3E%3C/svg%3E") !important;
}

#elektromechanika > .premium-title::before,
#elektromechanika.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M36 6 16 34h13l-3 24 22-31H35l1-21Z' stroke='%2367d5ff' stroke-width='4.2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#wulkanizacja > .premium-title::before,
#wulkanizacja.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='32' cy='32' r='21' stroke='%2367d5ff' stroke-width='4.2'/%3E%3Ccircle cx='32' cy='32' r='9' stroke='%2367d5ff' stroke-width='4.2'/%3E%3Cpath d='M32 11v8M53 32h-8M32 53v-8M11 32h8M46.8 17.2l-5.7 5.7M46.8 46.8l-5.7-5.7M17.2 46.8l5.7-5.7M17.2 17.2l5.7 5.7' stroke='%2367d5ff' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#klimatyzacja > .premium-title::before,
#klimatyzacja.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 7v50M32 32 16 22M32 32l16-10M32 32 16 42M32 32l16 10M18 15l28 34M46 15 18 49' stroke='%2367d5ff' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='32' r='4.2' stroke='%2367d5ff' stroke-width='4'/%3E%3C/svg%3E") !important;
}

#kontakt > .premium-title::before,
#kontakt.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 56s16-15.4 16-30c0-8.8-7.2-16-16-16S16 17.2 16 26c0 14.6 16 30 16 30Z' stroke='%2367d5ff' stroke-width='4.2' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='26' r='6.8' stroke='%2367d5ff' stroke-width='4.2'/%3E%3C/svg%3E") !important;
}


/* === MatiCar v79: twarda podmiana tła HERO na nowy obraz — desktop + mobile === */
.hero-shell.hero-shell--bg,
.hero-shell--bg {
  background-image:
    linear-gradient(90deg, rgba(226,232,240,0.72) 0%, rgba(226,232,240,0.46) 34%, rgba(226,232,240,0.16) 58%, rgba(226,232,240,0.00) 100%),
    url('assets/hero-bg-v110.png?v=124') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 880px) {
  .hero-shell.hero-shell--bg,
  .hero-shell--bg {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.56) 36%, rgba(255,255,255,0.92) 74%, rgba(255,255,255,0.98) 100%),
      url('assets/hero-bg-v110.png?v=124') !important;
    background-size: cover !important;
    background-position: 58% center !important;
    background-repeat: no-repeat !important;
  }
}


/* MatiCar v80: picture support for service graphics */
.section-visual picture { display:block; width:100%; height:100%; }
.section-visual picture > img { display:block; width:100%; height:100%; }







/* Stare klasy reveal/fade nie mogą już niczego ukrywać, nawet jeśli wrócą w HTML przypadkiem. */
.fade-on-scroll,
.fade-on-scroll.is-visible,
.hero-fade-start-visible,
.hero-fade-start-visible.is-visible,
.reveal,
.reveal-up,
.fade-slide,
.fade-in,
.js-reveal,
[data-reveal],
[data-animate] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: 0 0 !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
  content-visibility: visible !important;
}

/* Jedyny dopuszczalny efekt: całe UI pojawia się po zakończeniu preloadera. */
body:not(.is-loaded) .site-header,
body:not(.is-loaded) .page-shell {
  opacity: 0 !important;
}

body.is-loaded .site-header,
body.is-loaded .page-shell {
  opacity: 1 !important;
  transition: opacity 0.55s ease !important;
}

/* Obrazy usługowe są gotowe wcześniej i nie mają natywnego lazy-renderingu. */
.section-visual img,
.section-visual picture,
.immersive-section {
  opacity: 1 !important;
  visibility: visible !important;
  content-visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  body.is-loaded .site-header,
  body.is-loaded .page-shell {
    transition: none !important;
  }
}


/* === MatiCar v84: zero reveal-on-scroll; sekcje i grafiki usług są w DOM przed zniknięciem preloadera === */

/* Stare mechanizmy reveal/fade/scroll nie mogą ukrywać ani przesuwać sekcji. */
.fade-on-scroll,
.fade-on-scroll.is-visible,
.hero-fade-start-visible,
.hero-fade-start-visible.is-visible,
.reveal,
.reveal-up,
.fade-slide,
.fade-in,
.js-reveal,
[data-reveal],
[data-animate],
.content-section,
.services-overview,
.values-strip,
.hero-section,
.contact-layout-v59,
.contact-side-v59,
.info-card,
.immersive-section,
.section-grid,
.section-card,
.section-copy,
.section-visual,
.overview-card,
.value-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: 0 0 !important;
  animation: none !important;
  will-change: auto !important;
  content-visibility: visible !important;
}

/* Usuwamy CSS-backgroundi usług — Safari/iOS potrafi malować je dopiero przy scrollu. */
.immersive-section {
  position: relative !important;
  overflow: hidden !important;
  background-image: none !important;
  background-color: #edf3f8 !important;
}

/* Prawdziwy obraz jako tło sekcji na desktopie. */
.section-bg-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  content-visibility: visible !important;
}

.section-bg-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Gradienty pozostają jako warstwa nad obrazem, a pod kartą tekstową. */
.immersive-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.immersive-section--person-right::before {
  background: linear-gradient(to right,
    rgba(237,243,248,0.985) 0%,
    rgba(237,243,248,0.955) 22%,
    rgba(237,243,248,0.78) 42%,
    rgba(237,243,248,0.42) 58%,
    rgba(237,243,248,0.14) 72%,
    rgba(237,243,248,0.00) 84%) !important;
}

.immersive-section--person-left::before {
  background: linear-gradient(to left,
    rgba(237,243,248,0.985) 0%,
    rgba(237,243,248,0.955) 22%,
    rgba(237,243,248,0.78) 42%,
    rgba(237,243,248,0.42) 58%,
    rgba(237,243,248,0.14) 72%,
    rgba(237,243,248,0.00) 84%) !important;
}

/* Treść sekcji zawsze nad obrazem i gradientem. */
.immersive-section .section-grid,
.immersive-section .section-card,
.immersive-section .section-copy {
  position: relative !important;
  z-index: 2 !important;
}

/* Figure pozostaje dla mobile/fallbacku, ale bez lazy-load i bez animacji. */
.section-visual,
.section-visual picture,
.section-visual img {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  content-visibility: visible !important;
}

/* Na mobile używamy normalnego obrazka w układzie sekcji, żeby nie dublować tła. */
@media (max-width: 880px) {
  .section-bg-media {
    display: none !important;
  }
}

/* Jedyny efekt: cała strona pojawia się po preloaderze, nie sekcje przy scrollu. */
body:not(.is-loaded) .site-header,
body:not(.is-loaded) .page-shell {
  opacity: 0 !important;
}

body.is-loaded .site-header,
body.is-loaded .page-shell {
  opacity: 1 !important;
  transition: opacity 0.45s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  body.is-loaded .site-header,
  body.is-loaded .page-shell {
    transition: none !important;
  }
}


/* === MatiCar v85: anty-pop-in na iOS/Safari === */
/* Zero animacji po preloaderze. Strona ma być od razu widoczna. */
body:not(.is-loaded) .site-header,
body:not(.is-loaded) .page-shell,
body.is-loaded .site-header,
body.is-loaded .page-shell {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Sekcje, karty i obrazy: brak reveal, brak późnego ukrywania, brak transformów. */
.content-section,
.services-overview,
.values-strip,
.hero-section,
.contact-layout-v59,
.contact-side-v59,
.info-card,
.immersive-section,
.section-grid,
.section-card,
.section-copy,
.section-visual,
.section-bg-media,
.overview-card,
.value-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: 0 0 !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
  content-visibility: visible !important;
  contain: none !important;
}

/* Usuwamy ciężkie filtry z dużych sekcji — na iPhonie potrafią powodować późne kompozytowanie przy scrollu. */
.immersive-section,
.immersive-section .section-card,
.immersive-section .section-copy,
.content-section .section-card,
.section-card,
.info-card,
.overview-card,
.value-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Obraz tła sekcji jest zwykłym, lekkim obrazem 1920x1080 w DOM-ie. */
.immersive-section {
  background-image: none !important;
  background-color: #edf3f8 !important;
  isolation: isolate !important;
}

.section-bg-media,
.section-bg-media img,
.section-visual,
.section-visual picture,
.section-visual img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  content-visibility: visible !important;
  contain: none !important;
}

.section-bg-media img,
.section-visual img {
  image-rendering: auto;
}

/* Stare klasy/atrybuty reveal, jeśli przypadkiem wrócą, nie robią już nic. */
.fade-on-scroll,
.fade-on-scroll.is-visible,
.hero-fade-start-visible,
.hero-fade-start-visible.is-visible,
.reveal,
.reveal-up,
.fade-slide,
.fade-in,
.js-reveal,
[data-reveal],
[data-animate] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: 0 0 !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
  content-visibility: visible !important;
  contain: none !important;
}


/* === MatiCar v86: delikatnie oddalone kadry display, bez zmiany mechanizmu ładowania z v85 === */
.section-bg-media img,
.section-visual img {
  object-fit: cover !important;
  object-position: center center !important;
}


/* === MatiCar v87: większe krycie tła kontenera treści na desktopie === */
@media (min-width: 881px) {
  .immersive-section .section-card,
  .immersive-section .section-copy {
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.94),
      rgba(242,247,251,0.90)
    ) !important;
  }
}


/* === MatiCar v95: większa górna belka na dużym desktopie === */
@media (min-width: 881px) {
  :root {
    --fixed-header-height: 120px !important;
  }

  .site-header {
    min-height: 120px !important;
    height: 120px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    align-items: center !important;
  }

  .site-header .logo {
    width: auto !important;
    height: 100px !important;
    max-height: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .site-header .logo img {
    width: auto !important;
    height: 100px !important;
    max-height: 100px !important;
    object-fit: contain !important;
  }

  .site-header .main-nav > a,
  .site-header .nav-dropdown__toggle {
    font-size: 1.25em !important;
  }
}


/* === MatiCar v96: twarda poprawka większej belki desktop === */
@media (min-width: 881px) {
  :root {
    --fixed-header-height: 120px !important;
  }

  body > .site-header {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: var(--header-side-padding) !important;
    padding-right: var(--header-side-padding) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  body > .site-header > .logo {
    width: auto !important;
    height: 100px !important;
    max-height: 100px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  body > .site-header > .logo img {
    width: auto !important;
    height: 100px !important;
    max-height: 100px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
  }

  body > .site-header .main-nav {
    align-items: center !important;
  }

  body > .site-header .main-nav > a {
    font-size: 2.025rem !important; /* 1.62rem + 25% */
    min-height: 64px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    line-height: 1 !important;
  }

  body > .site-header .nav-dropdown__toggle {
    font-size: 2.025rem !important;
    min-height: 64px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    line-height: 1 !important;
  }

  .page-shell {
    padding-top: calc(var(--fixed-header-height) + 28px) !important;
  }

  #top,
  #mechanika,
  #elektromechanika,
  #wulkanizacja,
  #klimatyzacja,
  #kontakt,
  .content-section {
    scroll-margin-top: calc(var(--fixed-header-height) + 24px) !important;
  }
}


/* === MatiCar v97: korekta rozmiaru czcionki menu desktop do 60% względem v96 === */
@media (min-width: 881px) {
  body > .site-header .main-nav > a,
  body > .site-header .nav-dropdown__toggle {
    font-size: 1.215rem !important; /* 60% z 2.025rem */
    min-height: 54px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    line-height: 1 !important;
  }
}


/* === MatiCar v98: hero bez dodatkowego odsunięcia pod górną belką === */
@media (min-width: 881px) {
  .page-shell {
    padding-top: var(--fixed-header-height) !important;
  }

  main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .hero-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .hero-shell {
    margin-top: 0 !important;
  }
}


/* === MatiCar v99: usunięcie pustego pola wewnątrz kontenera przed Hero === */
@media (min-width: 881px) {
  body {
    padding-top: calc(var(--fixed-header-height) + 8px) !important;
  }

  .page-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  main,
  main#top,
  .hero-section,
  main > .hero-section:first-child,
  .hero-shell,
  .hero-shell--bg {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* === MatiCar v100: lżejszy wygląd menu w górnej belce desktop === */
@media (min-width: 881px) {
  body > .site-header .main-nav > a,
  body > .site-header .nav-dropdown__toggle {
    font-weight: 600 !important;
    color: #334155 !important;
  }

  body > .site-header .main-nav > a:hover,
  body > .site-header .main-nav > a:focus-visible,
  body > .site-header .nav-dropdown:hover .nav-dropdown__toggle,
  body > .site-header .nav-dropdown__toggle:focus-visible,
  body > .site-header .nav-dropdown.is-open .nav-dropdown__toggle {
    color: #0b5fb8 !important;
  }
}


/* === MatiCar v101: subtelny gradient tła górnej belki === */
@media (min-width: 881px) {
  body > .site-header {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(247, 250, 253, 0.97) 48%,
        rgba(229, 238, 248, 0.95) 100%
      ) !important;
  }
}


/* === MatiCar v102: ten sam subtelny gradient belki również na mobile === */
@media (max-width: 880px) {
  body > .site-header {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(247, 250, 253, 0.97) 48%,
        rgba(229, 238, 248, 0.95) 100%
      ) !important;
  }
}


/* === MatiCar v103: numer telefonu i informacja o indywidualnym umawianiu wizyt === */
#kontakt .contact-phone-number {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 8px 0 10px !important;
  color: #0f172a !important;
  font-family: "Saira Condensed", "Barlow", system-ui, sans-serif !important;
  font-size: clamp(2rem, 3.2vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
}

#kontakt .contact-phone-number:hover,
#kontakt .contact-phone-number:focus-visible {
  color: #0b5fb8 !important;
  outline: none !important;
}

#kontakt .contact-call-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  margin: 4px 0 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  background: linear-gradient(180deg, #38bdf8, #2563eb) !important;
  box-shadow: 0 10px 20px rgba(37,99,235,0.18) !important;
}

#kontakt .appointment-note {
  margin: 14px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  color: #334155 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  background: rgba(37, 99, 235, 0.06) !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
}

@media (max-width: 880px) {
  #kontakt .contact-phone-number {
    font-size: clamp(2.15rem, 10vw, 3rem) !important;
  }

  #kontakt .contact-call-button {
    width: 100% !important;
    min-height: 50px !important;
  }

  #kontakt .appointment-note {
    font-size: 0.98rem !important;
  }
}


/* === MatiCar v105: przycisk Zadzwoń pod numerem telefonu === */
#kontakt .contact-phone-number {
  display: block !important;
  width: fit-content !important;
  margin: 8px 0 12px !important;
}

#kontakt .contact-call-button {
  display: flex !important;
  width: fit-content !important;
  margin: 0 0 0 !important;
}

#kontakt .appointment-note {
  margin-top: 16px !important;
}

@media (max-width: 880px) {
  #kontakt .contact-call-button {
    width: 100% !important;
  }
}


/* === MatiCar v107: nowe zdjęcie HERO PNG 4K 300 DPI === */
.hero-shell--bg {
  background-image:
    linear-gradient(90deg, rgba(248,250,252,0.94) 0%, rgba(248,250,252,0.82) 36%, rgba(248,250,252,0.12) 68%, rgba(248,250,252,0.02) 100%),
    url("assets/hero-bg-v110.png?v=124") !important;
}

@media (max-width: 880px) {
  .hero-shell--bg {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.58) 36%, rgba(255,255,255,0.92) 74%, rgba(255,255,255,0.98) 100%),
      url("assets/hero-bg-v110.png?v=124") !important;
  }
}


/* === MatiCar v109: nowy układ HERO z osobną kartą tekstową i nowym tłem === */
/* Górna belka pozostaje bez zmian — poniższe reguły dotyczą wyłącznie sekcji Hero. */

.hero-section-v109 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero-shell-v109.hero-shell--bg,
.hero-shell-v109 {
  position: relative !important;
  min-height: 720px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  background-image: url("assets/hero-bg-v110.png?v=124") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.hero-shell-v109::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.16) 0%,
      rgba(15, 23, 42, 0.04) 34%,
      rgba(15, 23, 42, 0.00) 72%
    ) !important;
  z-index: 0 !important;
}

.hero-card-v109 {
  position: relative !important;
  z-index: 1 !important;
  width: min(520px, calc(100% - 64px)) !important;
  max-width: 520px !important;
  min-height: auto !important;
  margin: 0 0 0 clamp(28px, 4.8vw, 68px) !important;
  padding: clamp(30px, 3.2vw, 48px) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.93)) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-kicker-v109 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 24px !important;
  color: #0b5fb8 !important;
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.hero-kicker-v109 .hero-kicker-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.10) !important;
  font-weight: 900 !important;
}

.hero-title-v109,
.hero-card-v109 .hero-title {
  margin: 0 !important;
  color: #0f172a !important;
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(3rem, 4vw, 4.2rem) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  text-transform: none !important;
}

.hero-title-v109 span {
  display: block !important;
}

.hero-title-line {
  display: block !important;
  width: 46px !important;
  height: 3px !important;
  margin: 24px 0 24px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
}

.hero-lead-v109 {
  max-width: 420px !important;
  margin: 0 !important;
  color: #475569 !important;
  font-size: 1.1rem !important;
  line-height: 1.58 !important;
}

.hero-actions-v109 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 28px !important;
}

.hero-actions-v109 .hero-btn {
  width: auto !important;
  min-width: 168px !important;
  min-height: 54px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.hero-actions-v109 .hero-btn--secondary {
  display: inline-flex !important;
  color: #0f172a !important;
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(15,23,42,0.22) !important;
  box-shadow: none !important;
}

.hero-values-v109 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  margin-top: 26px !important;
}

.hero-values-v109 span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: auto !important;
  padding: 0 !important;
  color: #64748b !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
}

.hero-values-v109 span::before {
  content: "●" !important;
  margin-right: 7px !important;
  color: #2563eb !important;
  font-size: 0.65em !important;
}

@media (max-width: 880px) {
  .hero-shell-v109.hero-shell--bg,
  .hero-shell-v109 {
    min-height: 720px !important;
    align-items: flex-end !important;
    background-image: url("assets/hero-bg-v110.png?v=124") !important;
    background-size: cover !important;
    background-position: 58% center !important;
  }

  .hero-shell-v109::before {
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.00) 0%,
        rgba(255,255,255,0.08) 28%,
        rgba(241,245,249,0.92) 72%,
        rgba(241,245,249,0.98) 100%
      ) !important;
  }

  .hero-card-v109 {
    width: auto !important;
    max-width: none !important;
    margin: 16px !important;
    padding: 26px 22px !important;
    border-radius: 24px !important;
  }

  .hero-title-v109,
  .hero-card-v109 .hero-title {
    font-size: clamp(2.35rem, 11vw, 3.15rem) !important;
    line-height: 1.05 !important;
  }

  .hero-lead-v109 {
    font-size: 1rem !important;
  }

  .hero-actions-v109 {
    gap: 10px !important;
  }

  .hero-actions-v109 .hero-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero-values-v109 {
    display: grid !important;
    gap: 8px !important;
  }
}


/* === MatiCar v110: ciemne HERO z kafelkami usług w tym samym kontenerze === */
/* Górna belka zostaje bez zmian. */

.hero-section-v110 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero-shell-v110.hero-shell--bg,
.hero-shell-v110 {
  position: relative !important;
  min-height: 760px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(34px, 5vw, 72px) clamp(28px, 4vw, 64px) 150px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background-image: url("assets/hero-bg-v110.png?v=124") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.hero-shell-v110::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(2, 6, 23, 0.92) 0%,
      rgba(15, 23, 42, 0.82) 28%,
      rgba(15, 23, 42, 0.45) 52%,
      rgba(15, 23, 42, 0.08) 78%,
      rgba(15, 23, 42, 0.00) 100%
    ) !important;
}

.hero-shell-v110::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 34% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(2, 6, 23, 0.00) 0%,
      rgba(2, 6, 23, 0.52) 64%,
      rgba(2, 6, 23, 0.78) 100%
    ) !important;
}

.hero-content-v110 {
  position: relative !important;
  z-index: 2 !important;
  width: min(620px, 52vw) !important;
  max-width: 620px !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.hero-kicker-v110 {
  margin: 0 0 18px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.hero-title-v110,
.hero-content-v110 .hero-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(4rem, 6vw, 6.5rem) !important;
  line-height: 0.98 !important;
  font-weight: 800 !important;
  letter-spacing: -0.065em !important;
  text-transform: none !important;
  text-shadow: 0 18px 44px rgba(2, 6, 23, 0.44) !important;
}

.hero-title-v110 span {
  display: block !important;
}

.hero-title-line-v110 {
  display: block !important;
  width: 82px !important;
  height: 4px !important;
  margin: 30px 0 28px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  box-shadow: 0 0 22px rgba(37, 99, 235, 0.45) !important;
}

.hero-lead-v110 {
  max-width: 560px !important;
  margin: 0 !important;
  color: rgba(248, 250, 252, 0.90) !important;
  font-size: clamp(1.08rem, 1.25vw, 1.28rem) !important;
  line-height: 1.62 !important;
  text-shadow: 0 10px 30px rgba(2, 6, 23, 0.34) !important;
}

.hero-actions-v110 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  margin-top: 34px !important;
}

.hero-actions-v110 .hero-btn {
  width: auto !important;
  min-width: 170px !important;
  min-height: 56px !important;
  padding: 0 26px !important;
  border-radius: 10px !important;
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.hero-actions-v110 .hero-btn--secondary {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: none !important;
}

.hero-actions-v110 .hero-btn--secondary:hover,
.hero-actions-v110 .hero-btn--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.70) !important;
}

.services-overview-v110 {
  position: absolute !important;
  left: clamp(20px, 4vw, 58px) !important;
  right: clamp(20px, 4vw, 58px) !important;
  bottom: clamp(22px, 3vw, 42px) !important;
  z-index: 2 !important;
  width: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 18px 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(2, 6, 23, 0.52) !important;
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.services-overview-v110 .overview-card {
  min-height: auto !important;
  padding: 18px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.services-overview-v110 .overview-card + .overview-card {
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.services-overview-v110 .overview-card h3 {
  margin: 0 0 7px !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.services-overview-v110 .overview-card p {
  margin: 0 !important;
  color: rgba(248, 250, 252, 0.78) !important;
  font-size: 0.94rem !important;
  line-height: 1.45 !important;
}

.services-overview-v110 .icon-badge {
  width: 46px !important;
  height: 46px !important;
  margin: 0 0 12px !important;
  border-radius: 16px !important;
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
}

.services-overview-v110 .icon-badge svg {
  width: 25px !important;
  height: 25px !important;
  fill: currentColor !important;
}

@media (max-width: 1180px) and (min-width: 881px) {
  .hero-shell-v110.hero-shell--bg,
  .hero-shell-v110 {
    min-height: 820px !important;
    padding-bottom: 250px !important;
    background-position: 58% center !important;
  }

  .hero-content-v110 {
    width: min(560px, 58vw) !important;
  }

  .services-overview-v110 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .services-overview-v110 .overview-card:nth-child(3) {
    border-left: 0 !important;
  }

  .services-overview-v110 .overview-card:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  }
}

@media (max-width: 880px) {
  .hero-shell-v110.hero-shell--bg,
  .hero-shell-v110 {
    min-height: auto !important;
    display: block !important;
    padding: 0 !important;
    background-image: url("assets/hero-bg-v110.png?v=124") !important;
    background-size: cover !important;
    background-position: 58% top !important;
  }

  .hero-shell-v110::before {
    background:
      linear-gradient(
        180deg,
        rgba(2, 6, 23, 0.08) 0%,
        rgba(2, 6, 23, 0.18) 34%,
        rgba(2, 6, 23, 0.88) 68%,
        rgba(2, 6, 23, 0.96) 100%
      ) !important;
  }

  .hero-shell-v110::after {
    display: none !important;
  }

  .hero-content-v110 {
    width: auto !important;
    max-width: none !important;
    min-height: 620px !important;
    justify-content: flex-end !important;
    padding: 260px 22px 28px !important;
  }

  .hero-kicker-v110 {
    font-size: 0.82rem !important;
    margin-bottom: 12px !important;
  }

  .hero-title-v110,
  .hero-content-v110 .hero-title {
    font-size: clamp(2.75rem, 13vw, 4.2rem) !important;
    line-height: 1.02 !important;
  }

  .hero-title-line-v110 {
    margin: 22px 0 20px !important;
    width: 64px !important;
  }

  .hero-lead-v110 {
    font-size: 1rem !important;
  }

  .hero-actions-v110 {
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .hero-actions-v110 .hero-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .services-overview-v110 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    grid-template-columns: 1fr !important;
    margin: 0 14px 16px !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    background: rgba(2, 6, 23, 0.70) !important;
  }

  .services-overview-v110 .overview-card {
    padding: 16px 4px !important;
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    column-gap: 14px !important;
    align-items: center !important;
  }

  .services-overview-v110 .overview-card + .overview-card {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  .services-overview-v110 .icon-badge {
    margin: 0 !important;
  }

  .services-overview-v110 .overview-card h3 {
    margin-bottom: 4px !important;
  }
}


/* === MatiCar v111: naprawa ładowania logo w belce i preloaderze === */
.logo img,
.site-header .logo img,
.site-preloader__logo img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
}


/* === MatiCar v112: odchudzona treść HERO, bez opisu, z bardziej kompaktowym układem === */
.hero-content-v110 {
  transform: translateY(-34px) !important;
}

.hero-kicker-v110 {
  margin: 0 0 12px !important;
  font-size: 0.92rem !important;
  opacity: 0.92 !important;
}

.hero-title-line-v110 {
  margin: 20px 0 18px !important;
  width: 70px !important;
}

.hero-actions-v110 {
  margin-top: 10px !important;
}

@media (max-width: 880px) {
  .hero-content-v110 {
    transform: none !important;
    min-height: 560px !important;
    padding: 240px 22px 22px !important;
  }

  .hero-kicker-v110 {
    margin-bottom: 10px !important;
    font-size: 0.78rem !important;
  }

  .hero-title-line-v110 {
    margin: 18px 0 16px !important;
    width: 58px !important;
  }

  .hero-actions-v110 {
    margin-top: 8px !important;
  }
}


/* === MatiCar v113: mniejsza pusta przestrzeń nad treścią HERO === */
@media (min-width: 881px) {
  .hero-shell-v110.hero-shell--bg,
  .hero-shell-v110 {
    padding-top: clamp(16px, 2.6vw, 34px) !important;
    padding-right: clamp(28px, 4vw, 64px) !important;
    padding-bottom: 150px !important;
    padding-left: clamp(28px, 4vw, 64px) !important;
  }

  .hero-content-v110 {
    transform: translateY(-68px) !important;
  }

  .hero-kicker-v110 {
    margin-bottom: 8px !important;
  }
}

@media (max-width: 880px) {
  .hero-content-v110 {
    min-height: 540px !important;
    padding-top: 220px !important;
    padding-right: 22px !important;
    padding-bottom: 22px !important;
    padding-left: 22px !important;
  }

  .hero-kicker-v110 {
    margin-bottom: 8px !important;
  }
}


/* === MatiCar v114: nagłówki sekcji dopasowane kolorystycznie do ciemnego HERO === */
.section-title,
.premium-title,
.content-section > .premium-title {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  background:
    linear-gradient(
      135deg,
      #050b14 0%,
      #0f172a 42%,
      #123a63 100%
    ) !important;
  box-shadow:
    0 18px 40px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(37,99,235,0.14) !important;
}

/* subtelny niebieski akcent pod tytułem */
.section-title::after,
.premium-title::after {
  background:
    linear-gradient(
      90deg,
      rgba(56,189,248,0.12),
      #38bdf8 18%,
      #60a5fa 50%,
      #2563eb 78%,
      rgba(56,189,248,0.20)
    ) !important;
  box-shadow:
    0 0 16px rgba(37,99,235,0.28),
    0 0 28px rgba(56,189,248,0.16) !important;
}

/* chip / kicker typu „USŁUGA 01” */
.premium-title::before {
  color: #dbeafe !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 8px 20px rgba(2,6,23,0.18) !important;
}

/* delikatne dostrojenie czytelności i oddechu */
@media (min-width: 881px) {
  .content-section > .premium-title {
    min-height: 112px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 880px) {
  .section-title,
  .premium-title,
  .content-section > .premium-title {
    box-shadow:
      0 12px 28px rgba(2, 6, 23, 0.24),
      inset 0 1px 0 rgba(255,255,255,0.06) !important;
  }

  .premium-title::before {
    color: #e2e8f0 !important;
    background: rgba(255,255,255,0.10) !important;
  }
}


/* === MatiCar v115: ikony nagłówków w czystszym niebieskim, zgodnym z CTA w Hero === */

/* Wspólna baza kafelka/ikony przed tytułem */
.content-section > .premium-title::before,
.section-title.premium-title::before {
  background-color: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  box-shadow:
    0 12px 26px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* Mechanika */
#mechanika > .premium-title::before,
#mechanika.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M45.7 6.8c-4.7-1.2-9.9.1-13.6 3.9-4.3 4.3-5.3 10.7-3 15.9L8.6 47.1c-2.1 2.1-2.1 5.5 0 7.6l.7.7c2.1 2.1 5.5 2.1 7.6 0L37.4 34.9c5.2 2.3 11.6 1.3 15.9-3 3.8-3.8 5.1-9 3.9-13.7l-9.4 9.4-8.4-3 3-8.4 9.4-9.4Z' stroke='%232563eb' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='51' r='2.8' stroke='%232563eb' stroke-width='3.4'/%3E%3C/svg%3E") !important;
}

/* Elektromechanika */
#elektromechanika > .premium-title::before,
#elektromechanika.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M36 6 16 34h13l-3 24 22-31H35l1-21Z' stroke='%232563eb' stroke-width='4.2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Wulkanizacja */
#wulkanizacja > .premium-title::before,
#wulkanizacja.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='32' cy='32' r='21' stroke='%232563eb' stroke-width='4.2'/%3E%3Ccircle cx='32' cy='32' r='9' stroke='%232563eb' stroke-width='4.2'/%3E%3Cpath d='M32 11v8M53 32h-8M32 53v-8M11 32h8M46.8 17.2l-5.7 5.7M46.8 46.8l-5.7-5.7M17.2 46.8l5.7-5.7M17.2 17.2l5.7 5.7' stroke='%232563eb' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Klimatyzacja */
#klimatyzacja > .premium-title::before,
#klimatyzacja.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 7v50M32 32 16 22M32 32l16-10M32 32 16 42M32 32l16 10M18 15l28 34M46 15 18 49' stroke='%232563eb' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='32' r='4.2' stroke='%232563eb' stroke-width='4'/%3E%3C/svg%3E") !important;
}

/* Kontakt */
#kontakt > .premium-title::before,
#kontakt.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 56s16-15.4 16-30c0-8.8-7.2-16-16-16S16 17.2 16 26c0 14.6 16 30 16 30Z' stroke='%232563eb' stroke-width='4.2' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='26' r='6.8' stroke='%232563eb' stroke-width='4.2'/%3E%3C/svg%3E") !important;
}


/* === MatiCar v116: jaśniejsze, bardziej wyraziste ikonki w nagłówkach === */
.content-section > .premium-title::before,
.section-title.premium-title::before {
  background-color: rgba(96, 165, 250, 0.16) !important;
  border: 1px solid rgba(96, 165, 250, 0.40) !important;
  box-shadow:
    0 14px 28px rgba(37, 99, 235, 0.20),
    0 0 18px rgba(96, 165, 250, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

#mechanika > .premium-title::before,
#mechanika.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M45.7 6.8c-4.7-1.2-9.9.1-13.6 3.9-4.3 4.3-5.3 10.7-3 15.9L8.6 47.1c-2.1 2.1-2.1 5.5 0 7.6l.7.7c2.1 2.1 5.5 2.1 7.6 0L37.4 34.9c5.2 2.3 11.6 1.3 15.9-3 3.8-3.8 5.1-9 3.9-13.7l-9.4 9.4-8.4-3 3-8.4 9.4-9.4Z' stroke='%2360a5fa' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='51' r='2.8' stroke='%2360a5fa' stroke-width='3.6'/%3E%3C/svg%3E") !important;
}

#elektromechanika > .premium-title::before,
#elektromechanika.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M36 6 16 34h13l-3 24 22-31H35l1-21Z' stroke='%2360a5fa' stroke-width='4.2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#wulkanizacja > .premium-title::before,
#wulkanizacja.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='32' cy='32' r='21' stroke='%2360a5fa' stroke-width='4.2'/%3E%3Ccircle cx='32' cy='32' r='9' stroke='%2360a5fa' stroke-width='4.2'/%3E%3Cpath d='M32 11v8M53 32h-8M32 53v-8M11 32h8M46.8 17.2l-5.7 5.7M46.8 46.8l-5.7-5.7M17.2 46.8l5.7-5.7M17.2 17.2l5.7 5.7' stroke='%2360a5fa' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#klimatyzacja > .premium-title::before,
#klimatyzacja.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 7v50M32 32 16 22M32 32l16-10M32 32 16 42M32 32l16 10M18 15l28 34M46 15 18 49' stroke='%2360a5fa' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='32' r='4.2' stroke='%2360a5fa' stroke-width='4'/%3E%3C/svg%3E") !important;
}

#kontakt > .premium-title::before,
#kontakt.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 56s16-15.4 16-30c0-8.8-7.2-16-16-16S16 17.2 16 26c0 14.6 16 30 16 30Z' stroke='%2360a5fa' stroke-width='4.2' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='26' r='6.8' stroke='%2360a5fa' stroke-width='4.2'/%3E%3C/svg%3E") !important;
}


/* === MatiCar v117: neutralniejsze, chłodno-szare tła zamiast bladoniebieskich === */

/* HTML / BODY */
html {
  background: #eef1f4 !important;
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(148, 163, 184, 0.09), transparent 26%),
    radial-gradient(circle at 86% 8%, rgba(100, 116, 139, 0.08), transparent 24%),
    linear-gradient(180deg, #f5f7fa 0%, #f1f4f7 44%, #e9edf2 100%) !important;
}

/* Główna powłoka strony — lekko bardziej neutralna */
.page-shell {
  background: rgba(242, 245, 248, 0.84) !important;
  border-color: rgba(15,23,42,0.08) !important;
}

/* Górna belka z menu */
.site-header {
  background:
    linear-gradient(180deg, rgba(248,250,252,0.96) 0%, rgba(238,242,247,0.92) 100%) !important;
  border-color: rgba(15,23,42,0.10) !important;
  box-shadow: 0 18px 34px rgba(15,23,42,0.11) !important;
}

/* Mobilny hamburger też lekko neutralizujemy, ale zostawiamy niebieski akcent */
.hamburger {
  background: linear-gradient(180deg, rgba(226,232,240,0.72), rgba(241,245,249,0.52)) !important;
  border-color: rgba(37,99,235,0.18) !important;
  box-shadow: 0 0 18px rgba(15,23,42,0.06) !important;
}

/* Sekcja kontakt */
#kontakt .section-card,
#kontakt .section-visual,
#kontakt .info-card {
  background:
    linear-gradient(180deg, rgba(249,250,251,0.98) 0%, rgba(241,245,249,0.96) 100%) !important;
  border-color: rgba(15,23,42,0.08) !important;
}

#kontakt .contact-intro {
  color: #334155 !important;
}

#kontakt .map-visual {
  background:
    linear-gradient(180deg, rgba(229,231,235,0.94) 0%, rgba(241,245,249,0.96) 100%) !important;
}

/* Polityka prywatności / dolne małe sekcje */
.bottom-grid .small-card {
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: var(--radius-sm) !important;
  background:
    linear-gradient(180deg, rgba(249,250,251,0.98) 0%, rgba(241,245,249,0.96) 100%) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Stopka */
.site-footer {
  background:
    linear-gradient(180deg, rgba(237,241,245,0.92) 0%, rgba(229,233,238,0.95) 100%) !important;
  color: #5b6677 !important;
  border-top-color: rgba(15,23,42,0.08) !important;
}

/* Drobna spójność przy bardzo małych ekranach */
@media (max-width: 880px) {
  html {
    background: #f0f3f6 !important;
  }

  body {
    background:
      linear-gradient(180deg, #f6f8fa 0%, #eef2f5 100%) !important;
  }

  .page-shell {
    background: rgba(244,247,249,0.92) !important;
  }

  .site-header {
    background:
      linear-gradient(180deg, rgba(248,250,252,0.98) 0%, rgba(239,243,247,0.96) 100%) !important;
  }
}


/* === MatiCar v118: końcowe szlify — mobile HERO, kontakt, neutralne tła, czytelność === */

/* 1) Mobile HERO: poprawa kadrowania zdjęcia.
   Wcześniej obraz łapał czubek głowy — na mobile przesuwamy tło tak,
   aby ważniejsza część kadru była niżej i bardziej centralnie widoczna. */
@media (max-width: 880px) {
  .hero-shell.hero-shell--bg,
  .hero-shell--bg,
  .hero-shell-v110.hero-shell--bg,
  .hero-shell-v110 {
    background-size: cover !important;
    background-position: 58% 28% !important;
  }

  .hero-content-v110 {
    min-height: 590px !important;
    padding-top: 250px !important;
    padding-right: 22px !important;
    padding-bottom: 24px !important;
    padding-left: 22px !important;
  }

  .hero-title-v110,
  .hero-title {
    font-size: clamp(2.15rem, 10vw, 3.25rem) !important;
    line-height: 0.95 !important;
  }

  .hero-actions-v110,
  .hero-actions {
    gap: 10px !important;
  }
}

/* Bardzo wąskie telefony — jeszcze bezpieczniej dla kadru i tekstu */
@media (max-width: 430px) {
  .hero-shell.hero-shell--bg,
  .hero-shell--bg,
  .hero-shell-v110.hero-shell--bg,
  .hero-shell-v110 {
    background-position: 60% 24% !important;
  }

  .hero-content-v110 {
    min-height: 610px !important;
    padding-top: 265px !important;
  }
}

/* 2) Kontakt: telefon ma być mocniejszym punktem sprzedażowym strony. */
#kontakt .info-card:first-child {
  border-color: rgba(37, 99, 235, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(243,246,250,0.98) 100%) !important;
  box-shadow:
    0 18px 36px rgba(15,23,42,0.11),
    0 0 0 1px rgba(37,99,235,0.04) inset !important;
}

#kontakt .info-card:first-child h3 {
  color: #0f172a !important;
}

#kontakt .contact-phone-number {
  display: inline-block !important;
  margin-top: 2px !important;
  font-size: clamp(1.26rem, 2vw, 1.62rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  color: #0f172a !important;
}

#kontakt .card-link {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  box-shadow:
    0 12px 24px rgba(37,99,235,0.24),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

#kontakt .card-link:hover,
#kontakt .card-link:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 16px 30px rgba(37,99,235,0.28),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* 3) Delikatne ujednolicenie jasnych kart po neutralizacji tła.
   Nie wybijamy błękitu z akcentów — tylko z dużych powierzchni. */
.section-card,
.info-card,
.small-card,
.values-strip,
.overview-card,
.contact-layout {
  background:
    linear-gradient(180deg, rgba(250,250,251,0.98) 0%, rgba(241,243,246,0.96) 100%) !important;
  border-color: rgba(15,23,42,0.075) !important;
}

.section-copy,
.info-card,
.small-card {
  color: #1f2937 !important;
}

.section-copy p,
.info-card p,
.small-card p,
.feature-list {
  color: #566273 !important;
}

/* 4) Górna belka: jeszcze mniej bladoniebieska, bardziej neutralna i premium. */
.site-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(240,242,245,0.94) 100%) !important;
  border-color: rgba(15,23,42,0.09) !important;
}

/* 5) Stopka: neutralna, spokojna, bez niebieskawego mleka. */
.site-footer {
  background:
    linear-gradient(180deg, rgba(239,241,244,0.96) 0%, rgba(226,230,235,0.98) 100%) !important;
}

/* 6) Kafelki usług w HERO na mobile — trochę ciaśniej i czytelniej,
   żeby pierwszy ekran nie był niepotrzebnie ciężki. */
@media (max-width: 880px) {
  .hero-services-v110,
  .hero-service-grid-v110 {
    gap: 10px !important;
  }

  .hero-service-card-v110 {
    padding: 14px 14px !important;
    border-radius: 18px !important;
  }

  .hero-service-card-v110 h3 {
    font-size: 0.94rem !important;
  }

  .hero-service-card-v110 p {
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
  }
}

/* 7) Focus/accessibility — subtelny, ale widoczny obrys dla klawiatury. */
a:focus-visible,
button:focus-visible,
label:focus-visible {
  outline: 3px solid rgba(37,99,235,0.38) !important;
  outline-offset: 3px !important;
}

/* 8) Mapę lekko neutralizujemy, żeby nie była zbyt kolorową plamą przy nowej bazie. */
#kontakt .map-visual iframe {
  filter: saturate(0.86) contrast(1.02) brightness(0.99) !important;
}


/* === MatiCar v119: mobile HERO — obraz tylko nad kafelkami === */
@media (max-width: 880px) {
  /* Na mobile nie rozciągamy zdjęcia przez całą wysokość sekcji.
     Zamiast tego obraz jest tylko w górnej części Hero, do momentu
     gdzie zaczynają się kafelki usług. */
  .hero-shell.hero-shell--bg,
  .hero-shell--bg,
  .hero-shell-v110.hero-shell--bg,
  .hero-shell-v110 {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #08111f 0%, #0b1321 100%) !important;
    background-image: none !important;
  }

  /* Obraz jako osobna warstwa tylko w górnej części Hero */
  .hero-shell.hero-shell--bg::before,
  .hero-shell--bg::before,
  .hero-shell-v110.hero-shell--bg::before,
  .hero-shell-v110::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 590px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 6, 23, 0.08) 0%,
        rgba(2, 6, 23, 0.14) 20%,
        rgba(2, 6, 23, 0.40) 56%,
        rgba(2, 6, 23, 0.86) 84%,
        rgba(2, 6, 23, 0.96) 100%
      ),
      url("assets/hero-bg-v110.png?v=124") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 58% 24% !important;
  }

  /* Wyłączamy dolną nakładkę, bo obraz nie obejmuje już całej sekcji */
  .hero-shell.hero-shell--bg::after,
  .hero-shell--bg::after,
  .hero-shell-v110.hero-shell--bg::after,
  .hero-shell-v110::after {
    display: none !important;
  }

  /* Wysokość części tekstowej dopasowana do wysokości obrazu,
     tak aby kafelki zaczynały się od razu pod nim. */
  .hero-content-v110 {
    position: relative !important;
    z-index: 2 !important;
    min-height: 590px !important;
    padding-top: 255px !important;
    padding-right: 22px !important;
    padding-bottom: 24px !important;
    padding-left: 22px !important;
  }

  /* Kafelki zostają pod obrazem jako osobna część tej samej sekcji */
  .services-overview-v110 {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
  }
}

/* Bardzo wąskie telefony — trochę niższy i ciaśniej kadrowany blok obrazu */
@media (max-width: 430px) {
  .hero-shell.hero-shell--bg::before,
  .hero-shell--bg::before,
  .hero-shell-v110.hero-shell--bg::before,
  .hero-shell-v110::before {
    height: 565px !important;
    background-position: 60% 22% !important;
  }

  .hero-content-v110 {
    min-height: 565px !important;
    padding-top: 245px !important;
  }
}


/* === MatiCar v120: mobile HERO — czarne tło pod kafelkami i poza zdjęciem === */
@media (max-width: 880px) {
  .hero-shell.hero-shell--bg,
  .hero-shell--bg,
  .hero-shell-v110.hero-shell--bg,
  .hero-shell-v110 {
    background: #000000 !important;
  }

  .services-overview-v110 {
    background: #000000 !important;
    border-color: rgba(255,255,255,0.12) !important;
  }
}

@media (max-width: 430px) {
  .hero-shell.hero-shell--bg,
  .hero-shell--bg,
  .hero-shell-v110.hero-shell--bg,
  .hero-shell-v110,
  .services-overview-v110 {
    background: #000000 !important;
  }
}


/* === MatiCar v121: ujednolicenie ikonek nagłówków i kafelków HERO === */

/* Kolor zgodny z akcentem z HERO */
.hero-title-line-v110 {
  background: #2563eb !important;
  box-shadow: 0 0 22px rgba(37, 99, 235, 0.45) !important;
}

/* Nagłówki sekcji: ikonki dokładnie w kolorze akcentu HERO */
#mechanika > .premium-title::before,
#mechanika.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M45.7 6.8c-4.7-1.2-9.9.1-13.6 3.9-4.3 4.3-5.3 10.7-3 15.9L8.6 47.1c-2.1 2.1-2.1 5.5 0 7.6l.7.7c2.1 2.1 5.5 2.1 7.6 0L37.4 34.9c5.2 2.3 11.6 1.3 15.9-3 3.8-3.8 5.1-9 3.9-13.7l-9.4 9.4-8.4-3 3-8.4 9.4-9.4Z' stroke='%232563eb' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='51' r='2.8' stroke='%232563eb' stroke-width='3.6'/%3E%3C/svg%3E") !important;
  color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

#elektromechanika > .premium-title::before,
#elektromechanika.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M36 6 16 34h13l-3 24 22-31H35l1-21Z' stroke='%232563eb' stroke-width='4.2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

#wulkanizacja > .premium-title::before,
#wulkanizacja.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='32' cy='32' r='21' stroke='%232563eb' stroke-width='4.2'/%3E%3Ccircle cx='32' cy='32' r='9' stroke='%232563eb' stroke-width='4.2'/%3E%3Cpath d='M32 11v8M53 32h-8M32 53v-8M11 32h8M46.8 17.2l-5.7 5.7M46.8 46.8l-5.7-5.7M17.2 46.8l5.7-5.7M17.2 17.2l5.7 5.7' stroke='%232563eb' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

#klimatyzacja > .premium-title::before,
#klimatyzacja.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 7v50M32 32 16 22M32 32l16-10M32 32 16 42M32 32l16 10M18 15l28 34M46 15 18 49' stroke='%232563eb' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='32' r='4.2' stroke='%232563eb' stroke-width='4'/%3E%3C/svg%3E") !important;
  color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

#kontakt > .premium-title::before,
#kontakt.section-title.premium-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 56s16-15.4 16-30c0-8.8-7.2-16-16-16S16 17.2 16 26c0 14.6 16 30 16 30Z' stroke='%232563eb' stroke-width='4.2' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='26' r='6.8' stroke='%232563eb' stroke-width='4.2'/%3E%3C/svg%3E") !important;
  color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

/* Kafelki usług w HERO: dokładnie te same ikonki co w nagłówkach */
.services-overview-v110 .icon-badge--service {
  position: relative !important;
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.services-overview-v110 .icon-badge--service svg {
  display: none !important;
}

.services-overview-v110 .icon-badge--service::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 24px 24px !important;
}

.services-overview-v110 .overview-card--mechanika .icon-badge--service::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M45.7 6.8c-4.7-1.2-9.9.1-13.6 3.9-4.3 4.3-5.3 10.7-3 15.9L8.6 47.1c-2.1 2.1-2.1 5.5 0 7.6l.7.7c2.1 2.1 5.5 2.1 7.6 0L37.4 34.9c5.2 2.3 11.6 1.3 15.9-3 3.8-3.8 5.1-9 3.9-13.7l-9.4 9.4-8.4-3 3-8.4 9.4-9.4Z' stroke='%232563eb' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='51' r='2.8' stroke='%232563eb' stroke-width='3.6'/%3E%3C/svg%3E") !important;
}

.services-overview-v110 .overview-card--elektromechanika .icon-badge--service::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M36 6 16 34h13l-3 24 22-31H35l1-21Z' stroke='%232563eb' stroke-width='4.2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.services-overview-v110 .overview-card--wulkanizacja .icon-badge--service::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='32' cy='32' r='21' stroke='%232563eb' stroke-width='4.2'/%3E%3Ccircle cx='32' cy='32' r='9' stroke='%232563eb' stroke-width='4.2'/%3E%3Cpath d='M32 11v8M53 32h-8M32 53v-8M11 32h8M46.8 17.2l-5.7 5.7M46.8 46.8l-5.7-5.7M17.2 46.8l5.7-5.7M17.2 17.2l5.7 5.7' stroke='%232563eb' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.services-overview-v110 .overview-card--klimatyzacja .icon-badge--service::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 7v50M32 32 16 22M32 32l16-10M32 32 16 42M32 32l16 10M18 15l28 34M46 15 18 49' stroke='%232563eb' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='32' r='4.2' stroke='%232563eb' stroke-width='4'/%3E%3C/svg%3E") !important;
}


/* === MatiCar v122: ciemna polityka prywatności + ciemniejsza stopka === */

/* Sekcja polityki prywatności */
.bottom-grid {
  margin-top: 26px !important;
}

.bottom-grid .small-card {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      145deg,
      #05090f 0%,
      #0b1220 42%,
      #111827 100%
    ) !important;
  border: 1px solid rgba(96, 165, 250, 0.16) !important;
  box-shadow:
    0 24px 48px rgba(2, 6, 23, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.bottom-grid .small-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,0.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)) !important;
}

.bottom-grid .small-card > * {
  position: relative !important;
  z-index: 1 !important;
}

.bottom-grid .small-card h3 {
  color: #ffffff !important;
}

.bottom-grid .small-card p,
.bottom-grid .small-card li {
  color: #cbd5e1 !important;
}

.bottom-grid .small-card strong {
  color: #f8fafc !important;
}

.bottom-grid .small-card a {
  color: #60a5fa !important;
}

.bottom-grid .small-card .icon-badge {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  box-shadow:
    0 10px 24px rgba(37,99,235,0.14),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.bottom-grid .small-card .icon-badge svg {
  fill: currentColor !important;
}

/* Stopka — ciemniejsza, spokojniejsza, domykająca */
.site-footer {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: #94a3b8 !important;
  background:
    linear-gradient(180deg, #0a0f18 0%, #06090f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.site-footer p {
  color: inherit !important;
}

/* Delikatne dostrojenie na małych ekranach */
@media (max-width: 880px) {
  .bottom-grid .small-card {
    padding: 22px 20px !important;
  }

  .bottom-grid .small-card p {
    color: #d3dbe6 !important;
  }

  .site-footer {
    padding: 18px 20px 22px !important;
  }
}


/* === MatiCar v123: polityka prywatności + stopka jako jedna bryła === */

/* usuwamy dolną przerwę z main, która rozdzielała politykę i stopkę */
main {
  padding-bottom: 0 !important;
}

/* pełna szerokość dolnego bloku wewnątrz page-shell */
.bottom-grid {
  display: block !important;
  gap: 0 !important;
  margin: 26px -26px 0 !important;
  padding: 0 !important;
  background:
    linear-gradient(145deg, #05090f 0%, #0b1220 42%, #111827 100%) !important;
  border-top: 1px solid rgba(96, 165, 250, 0.12) !important;
}

.bottom-grid .small-card {
  position: relative !important;
  margin: 0 !important;
  padding: 34px 34px 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bottom-grid .small-card::before {
  display: none !important;
}

.bottom-grid .small-card h3 {
  color: #ffffff !important;
}

.bottom-grid .small-card p,
.bottom-grid .small-card li {
  color: #cbd5e1 !important;
}

.bottom-grid .small-card strong {
  color: #f8fafc !important;
}

.bottom-grid .small-card a {
  color: #60a5fa !important;
}

.bottom-grid .small-card .icon-badge {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  box-shadow:
    0 10px 24px rgba(37,99,235,0.14),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* stopka staje się kontynuacją tego samego bloku, tylko oddzieloną cienką linią */
.site-footer {
  margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  color: #94a3b8 !important;
  background:
    linear-gradient(145deg, #05090f 0%, #0b1220 42%, #111827 100%) !important;
  box-shadow: none !important;
}

.site-footer p {
  margin: 0 !important;
  color: inherit !important;
}

@media (max-width: 880px) {
  main {
    padding-bottom: 0 !important;
  }

  .bottom-grid {
    margin: 22px 0 0 !important;
  }

  .bottom-grid .small-card {
    padding: 24px 20px 22px !important;
  }

  .site-footer {
    padding: 18px 20px 22px !important;
  }
}


/* === MatiCar v124: HERO — osobne kafelki z przezroczystym gapem === */
.services-overview-v110 {
  gap: clamp(10px, 1.2vw, 16px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.services-overview-v110 .overview-card {
  overflow: hidden !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
  background: rgba(2, 6, 23, 0.66) !important;
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.services-overview-v110 .overview-card + .overview-card {
  border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.services-overview-v110 .overview-card h3,
.services-overview-v110 .overview-card p,
.services-overview-v110 .icon-badge--service {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 1180px) and (min-width: 881px) {
  .services-overview-v110 {
    gap: 14px !important;
  }

  .services-overview-v110 .overview-card,
  .services-overview-v110 .overview-card:nth-child(3),
  .services-overview-v110 .overview-card:nth-child(n+3),
  .services-overview-v110 .overview-card + .overview-card {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 880px) {
  .services-overview-v110 {
    margin: 0 14px 16px !important;
    padding: 0 !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .services-overview-v110 .overview-card {
    padding: 16px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, 0.88) !important;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.26) !important;
  }

  .services-overview-v110 .overview-card + .overview-card {
    border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.13) !important;
  }
}

@media (max-width: 430px) {
  .services-overview-v110 {
    background: transparent !important;
  }
}

/* === MatiCar v125: dół strony — gradient tła jak w nagłówkach, bez niebieskiej linii === */
.bottom-grid {
  background:
    linear-gradient(
      135deg,
      #050b14 0%,
      #0f172a 42%,
      #123a63 100%
    ) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.bottom-grid .small-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-footer {
  background:
    linear-gradient(
      135deg,
      #050b14 0%,
      #0f172a 42%,
      #123a63 100%
    ) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* === MatiCar v126: polityka prywatności — padding 2vw === */
.bottom-grid .small-card {
  padding: 2vw !important;
}

@media (max-width: 880px) {
  .bottom-grid .small-card {
    padding: 2vw !important;
  }
}


/* === MatiCar v127: polityka prywatności — pewny padding 3vw od krawędzi gradientowego kontenera === */
.bottom-grid {
  box-sizing: border-box !important;
  padding: 5vw 10vw 5vw 5vw !important;
}

.bottom-grid .small-card {
  box-sizing: border-box !important;
  padding: 0 !important;
}

.bottom-grid .small-card > * {
  max-width: 100% !important;
}

@media (max-width: 880px) {
  .bottom-grid {
    padding: 3vw !important;
  }

  .bottom-grid .small-card {
    padding: 0 !important;
  }
}


/* === MatiCar v128: polityka prywatności — wymuszony realny padding treści === */
.bottom-grid {
  box-sizing: border-box !important;
  padding: 0 !important;
}

.bottom-grid > article.section-card.small-card.privacy-card-v128 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: max(3vw, 24px) !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.bottom-grid > article.section-card.small-card.privacy-card-v128 > * {
  max-width: 100% !important;
}

@media (max-width: 880px) {
  .bottom-grid {
    padding: 0 !important;
  }

  .bottom-grid > article.section-card.small-card.privacy-card-v128 {
    padding: max(3vw, 24px) !important;
  }
}

/* === MatiCar v132: dół strony wyrównany do szerokości pozostałych sekcji === */
.privacy-footer-v129 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 26px 0 0 !important;
  padding: 5vw 10vw 5vw 5vw !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(
      135deg,
      #050b14 0%,
      #0f172a 42%,
      #123a63 100%
    ) !important;
  box-shadow: none !important;
  color: #cbd5e1 !important;
}

.privacy-content-v129 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.privacy-content-v129 > * {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
}

.privacy-content-v129 .icon-badge {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  box-shadow:
    0 10px 24px rgba(37,99,235,0.14),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.privacy-content-v129 .icon-badge svg {
  fill: currentColor !important;
}

.privacy-content-v129 h3 {
  margin: 0 0 14px !important;
  color: #ffffff !important;
  font-size: 1.2rem !important;
}

.privacy-content-v129 p,
.privacy-content-v129 li {
  color: #cbd5e1 !important;
}

.privacy-content-v129 strong {
  color: #f8fafc !important;
}

.privacy-content-v129 a {
  color: #60a5fa !important;
}

.privacy-divider-v129 {
  width: 100% !important;
  height: 1px !important;
  margin: clamp(22px, 2.2vw, 36px) 0 clamp(16px, 1.6vw, 26px) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

.privacy-footer-bar-v129 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  text-align: center !important;
}

.privacy-footer-bar-v129 p {
  margin: 0 !important;
  color: inherit !important;
}

/* Stare klasy dolnej sekcji/stopki nie są już używane, ale zostają neutralne dla bezpieczeństwa. */
.bottom-grid,
.site-footer {
  display: none !important;
}

@media (max-width: 880px) {
  .privacy-footer-v129 {
    margin: 22px 0 0 !important;
    padding: 5vw 10vw 5vw 5vw !important;
  }
}

/* === MatiCar v133: przezroczysty główny kontener + zaokrąglony dół od góry === */
.page-shell {
  background: transparent !important;
}

.privacy-footer-v129 {
  border-radius: 28px !important;
  overflow: hidden !important;
}

/* === MatiCar v134: usunięcie subtelnej poświaty/tła głównego wrappera === */
/* .page-shell ma pełnić wyłącznie rolę kontenera szerokości — bez własnego koloru, obramowania, cienia ani maskowania krawędzi. */
.page-shell {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

/* Usunięcie dekoracyjnych poświat z tła strony, żeby między sekcjami i przy krawędziach nie pojawiał się inny odcień/gradient. */
body {
  background: #f1f4f7 !important;
  background-image: none !important;
}

/* === MatiCar v135: subtelny cień premium pod głównymi elementami === */
:root {
  --premium-shadow-soft-v135: 0 14px 34px rgba(10, 22, 38, 0.075);
  --premium-shadow-section-v135: 0 16px 38px rgba(10, 22, 38, 0.085);
  --premium-shadow-header-v135: 0 10px 26px rgba(10, 22, 38, 0.070);
}

/* Główny wrapper nadal bez tła i bez cienia — cień dostają dopiero konkretne elementy. */
.page-shell {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-shell,
.values-strip,
.section-grid--contact .contact-intro,
.section-grid--contact .map-visual,
.section-grid--contact .info-card,
.privacy-footer-v129 {
  box-shadow: var(--premium-shadow-section-v135) !important;
}

.section-title {
  box-shadow:
    var(--premium-shadow-header-v135),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

@media (min-width: 881px) {
  .immersive-section {
    box-shadow: var(--premium-shadow-section-v135) !important;
  }

  .immersive-section .section-card {
    box-shadow: var(--premium-shadow-soft-v135) !important;
  }
}

@media (max-width: 880px) {
  .hero-shell,
  .section-title,
  .section-visual,
  .section-card,
  .values-strip,
  .contact-layout,
  .map-visual,
  .privacy-footer-v129 {
    box-shadow: 0 10px 26px rgba(10, 22, 38, 0.070) !important;
  }
}


/* === MatiCar v137: neutralne szare tło body + grafitowa belka bez niebieskiego === */
body {
  background:
    linear-gradient(180deg, #f5f6f7 0%, #eef0f2 48%, #f6f7f8 100%) !important;
  background-image:
    linear-gradient(180deg, #f5f6f7 0%, #eef0f2 48%, #f6f7f8 100%) !important;
}

.site-header {
  background: linear-gradient(135deg, #111315 0%, #1d2024 52%, #101214 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
}


/* === MatiCar v138: wyraźniejszy greige na body + czysty grafit header bez błękitu === */
body {
  background:
    linear-gradient(180deg, #f0efec 0%, #e4e2dd 48%, #f3f2ef 100%) !important;
  background-image:
    linear-gradient(180deg, #f0efec 0%, #e4e2dd 48%, #f3f2ef 100%) !important;
}

.site-header {
  background: linear-gradient(135deg, #0f0f10 0%, #252525 50%, #141414 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.55) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18) !important;
}

/* === MatiCar v140: stabilny hover menu — niebieska linia + czarne tło rosnące od dołu === */
@media (min-width: 881px) {
  body > .site-header .main-nav > a {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: inset 0 -6px 0 #2563eb !important;
    color: #f8fafc !important;
    text-shadow: none !important;
    transition:
      color 0.22s ease,
      box-shadow 0.22s ease !important;
  }

  body > .site-header .main-nav > a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 6px !important;
    height: 0 !important;
    background: #050505 !important;
    z-index: -1 !important;
    transition: height 0.28s cubic-bezier(.22,.72,.22,1) !important;
  }

  body > .site-header .main-nav > a:hover,
  body > .site-header .main-nav > a:focus-visible {
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: inset 0 -6px 0 #2563eb !important;
    outline: none !important;
  }

  body > .site-header .main-nav > a:hover::before,
  body > .site-header .main-nav > a:focus-visible::before {
    height: calc(100% - 6px) !important;
  }
}

/* === MatiCar v141: menu — czarne etykiety w spoczynku + zaokrąglenia tylko u góry === */
@media (min-width: 881px) {
  body > .site-header .main-nav > a {
    border-radius: 14px 14px 0 0 !important;
    color: #050505 !important;
  }

  body > .site-header .main-nav > a::before {
    border-radius: 14px 14px 0 0 !important;
  }

  body > .site-header .main-nav > a:hover,
  body > .site-header .main-nav > a:focus-visible {
    color: #ffffff !important;
  }
}

/* === MatiCar v142: menu — wysuwane tło ma gradient jak nagłówki sekcji === */
@media (min-width: 881px) {
  body > .site-header .main-nav > a::before {
    background: linear-gradient(135deg, #0f172a 0%, #172033 48%, #1e293b 100%) !important;
  }
}

/* === MatiCar v143: menu — wyraźniejszy gradient hover niezależnie od szerokości przycisku === */
@media (min-width: 881px) {
  body > .site-header .main-nav > a::before {
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        #050505 38%,
        #0f172a 58%,
        #1e293b 100%
      ) !important;
  }
}

/* === MatiCar v144: menu — lżejszy dolny border 3px === */
@media (min-width: 881px) {
  body > .site-header .main-nav > a {
    box-shadow: inset 0 -3px 0 #2563eb !important;
  }

  body > .site-header .main-nav > a::before {
    bottom: 3px !important;
  }

  body > .site-header .main-nav > a:hover,
  body > .site-header .main-nav > a:focus-visible {
    box-shadow: inset 0 -3px 0 #2563eb !important;
  }

  body > .site-header .main-nav > a:hover::before,
  body > .site-header .main-nav > a:focus-visible::before {
    height: calc(100% - 3px) !important;
  }
}

/* === MatiCar v145: Hero — stabilniejsze wczytywanie zdjęcia tła ===
   Zostawiamy oryginalny PNG 4K w assets, ale do tła CSS używamy lekkiej
   wersji JPG wygenerowanej z tego samego obrazu. Ma to zapobiec efektowi,
   że duży PNG wygląda jakby ładował się tylko częściowo. */
.hero-shell--bg {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.90) 34%, rgba(255,255,255,0.54) 58%, rgba(255,255,255,0.06) 100%),
    url('assets/hero-bg-v110-display.jpg?v=145') !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  background-color: #e2e8f0 !important;
}

@media (min-width: 881px) {
  .hero-shell--bg {
    background-image:
      linear-gradient(90deg, rgba(226,232,240,0.72) 0%, rgba(226,232,240,0.46) 34%, rgba(226,232,240,0.16) 58%, rgba(226,232,240,0.00) 100%),
      url('assets/hero-bg-v110-display.jpg?v=145') !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
  }
}

@media (max-width: 880px) {
  .hero-shell--bg {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.58) 36%, rgba(255,255,255,0.92) 74%, rgba(255,255,255,0.98) 100%),
      url('assets/hero-bg-v110-display.jpg?v=145') !important;
    background-size: cover !important;
    background-position: 68% center !important;
    background-repeat: no-repeat !important;
  }
}

/* === MatiCar v146: menu — jaśniejszy granatowy hover + minimalne odstępy === */
@media (min-width: 881px) {
  body > .site-header .main-nav {
    gap: 3px !important;
  }

  body > .site-header .main-nav > a {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body > .site-header .main-nav > a::before {
    background:
      linear-gradient(
        180deg,
        #1e293b 0%,
        #172033 48%,
        #0f172a 100%
      ) !important;
  }
}

/* === MatiCar v147: menu — czysty granat z bardzo subtelnym pionowym gradientem === */
@media (min-width: 881px) {
  body > .site-header .main-nav {
    gap: 3px !important;
  }

  body > .site-header .main-nav > a::before {
    background:
      linear-gradient(
        180deg,
        #1e293b 0%,
        #1b2536 48%,
        #172033 100%
      ) !important;
  }
}