/* =========================================================================
   hausmeisterservice-ab.de — warstwa wizualna (design system)
   Ładowana jako ostatnia, nadpisuje bazowe style w index.php / _inc/head-common.php.
   Język: monochrom + hairline grid, kondensowany display, mono w etykietach,
   naprzemienne sekcje jasne/czarne, animacje wejścia i element 3D.
   ========================================================================= */

/* ===== TOKENY ===== */
:root {
  /* paleta */
  --ink: #102536;
  --ink-2: #18384f;
  --paper: #eef3f7;
  --paper-2: #ffffff;
  --paper-3: #e0e9f0;
  --line: rgba(16,37,54,.14);
  --line-soft: rgba(16,37,54,.08);
  --line-dark:  rgba(255,255,255,.16);
  --ink-60: rgba(16,37,54,.72);
  --ink-45: rgba(16,37,54,.66);
  --paper-60: rgba(238,243,247,.78);
  --paper-40: rgba(238,243,247,.68);
  --accent: #005fa7;
  --accent-dark: #004b85;

  /* nadpisania tokenów bazowych, żeby stare reguły nie wracały */
  --primary: var(--ink);
  --light:   var(--paper-2);
  --text:    var(--ink);
  --text-muted: var(--ink-60);
  --border:  var(--line);
  --white:   #ffffff;
  --radius:  0px;
  --shadow:    0 1px 2px rgba(16,37,54,.05), 0 14px 34px rgba(16,37,54,.07);
  --shadow-lg: 0 6px 12px rgba(16,37,54,.06), 0 30px 70px rgba(16,37,54,.14);

  /* typografia */
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Inter-fallback', system-ui, sans-serif;

  --gut: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-3d: cubic-bezier(.22,1,.36,1);
}

/* ===== PODSTAWA ===== */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--paper); }

.container { max-width: 1320px; padding: 0 var(--gut); }

.on-dark ~ *, .sec-dark { --line-soft: rgba(255,255,255,.1); }

/* ===== TYPOGRAFIA ===== */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: .92;
  font-feature-settings: "kern" 1;
}
h1 { font-size: clamp(2.9rem, 9.5vw, 8.5rem); }
.section-title { font-size: clamp(2.1rem, 5.6vw, 4.6rem); line-height: .94; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.45rem); letter-spacing: .01em; }

p, li, td, th, input, select, textarea, label, .section-desc { font-family: var(--sans); }

/* etykieta sekcji: numer + tekst w monospace */
.section-label, .hero-badge, .hero-crumbs, .stat-label, .about-stat > span,
.trust-item, .trust-bar-item, .pstep-num, #main-nav a, .btn, .footer-col h4, .cookie-buttons button {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  font-weight: 500;
}
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; color: var(--ink-45); padding: 0; border-radius: 0;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.section-label::before {
  content: ""; width: 34px; height: 1px; background: currentColor; display: block;
}
.section-desc {
  font-size: clamp(.98rem, 1.15vw, 1.12rem);
  color: var(--ink-60);
  max-width: 62ch;
  line-height: 1.7;
}

/* akcent serif italic — pojedyncze zdania „prowadzące” */
.lede {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(14px, 2vw, 26px) 0 clamp(16px, 2.2vw, 30px);
}
@media (max-width: 899px) {
  .lede { font-size: clamp(1.35rem, 5.6vw, 2rem); line-height: 1.12; }
  .lede br { display: none; }   /* na wąskim ekranie tekst łamie się sam */
}

/* ===== SEKCJE ===== */
section { padding: clamp(72px, 10vw, 150px) 0; position: relative; }
section + section { border-top: 1px solid var(--line); }
.section-header { max-width: none; margin-bottom: clamp(38px, 5vw, 70px); text-align: left; }
.section-header.centered, .section-header { text-align: left; }
.section-header .section-title { text-align: left; }

/* Na szerokich ekranach tytuł i opis stoją obok siebie, wyrównane dołem —
   inaczej pod krótkim tytułem zostaje pas pustki na pół ekranu. */
@media (min-width: 900px) {
  .section-header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(40px, 6vw, 100px);
    align-items: end;
  }
  .section-header > .section-label { grid-column: 1 / -1; }
  .section-header > .section-title { grid-column: 1; margin-bottom: 0; }
  .section-header > .section-desc  { grid-column: 2; margin-bottom: .35em; max-width: 52ch; }
}

/* sekcje ciemne */
#fertigung, .cta-banner, footer, .sec-dark {
  background: var(--ink); color: var(--paper);
  --text: var(--paper); --text-muted: var(--paper-60);
  --line: var(--line-dark); --border: var(--line-dark);
}
#fertigung .section-title, .sec-dark .section-title, .cta-banner h2 { color: var(--paper); }
#fertigung .section-label, .sec-dark .section-label { color: var(--paper-40); }
#fertigung .section-desc, .sec-dark .section-desc { color: var(--paper-60); }

/* ===== NAGŁÓWEK ===== */
header {
  background: rgba(238,243,247,.82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 0 var(--line); }

/* Na stronie głównej nagłówek startuje bez apli — leży wprost na animacji.
   Płyta wjeżdża dopiero, gdy treść zacznie zasłaniać hero. Podstrony mają
   jasne tło od pierwszego piksela, więc ich to nie dotyczy. */
.page-home header:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.page-home header:not(.is-stuck) #main-nav a { color: var(--paper-60); }
.page-home header:not(.is-stuck) #main-nav a:hover,
.page-home header:not(.is-stuck) #main-nav a.is-current { color: var(--paper); }
.page-home header:not(.is-stuck) .hamburger span { background: var(--paper); }
.page-home header:not(.is-stuck) .btn-nav {
  background: var(--paper) !important; color: var(--ink) !important;
}
/* rozwinięte menu mobilne zawsze na własnym tle */
.page-home header:not(.is-stuck) #main-nav.open { background: var(--ink); }
.header-inner { max-width: 1320px; padding: 16px var(--gut); }
.logo img { height: 38px; }
#main-nav { gap: 4px; }
#main-nav a { color: var(--ink-60); padding: 10px 14px; border-radius: 0; transition: color .25s var(--ease); }
#main-nav a:hover { background: none; color: var(--ink); }
#main-nav a.is-current { color: var(--accent); font-weight: 700; }
#main-nav a.is-current::after {
  content: ""; display: block; height: 1px; margin-top: 5px;
  background: var(--accent);
}
.btn-nav {
  background: var(--ink) !important; color: var(--paper) !important;
  border-radius: 0 !important; padding: 12px 20px !important;
}
.btn-nav:hover { background: var(--accent) !important; }
.hamburger span { background: var(--ink); }

/* ===== PRZYCISKI ===== */
.btn {
  border-radius: 0;
  padding: 16px 30px;
  font-size: .72rem;
  letter-spacing: .16em;
  position: relative; overflow: hidden;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translate3d(0, 101%, 0);
  transition: transform .45s var(--ease);
}
.btn:hover::after { transform: translate3d(0, 0, 0); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: none; }
.btn-primary:hover { background: var(--ink); color: #fff; transform: none; box-shadow: none; }
.btn-outline { border: 1px solid currentColor; color: inherit; background: none; }
.btn-outline:hover { color: #fff; border-color: var(--accent); background: none; }
.btn-sm { padding: 12px 20px; font-size: .66rem; }

/* ===== HERO =====
   Jeden ekran, bez przejmowania scrolla. Animacja leci sama w tle, treść
   widoczna od pierwszej sekundy — wcześniejsza wersja sterowana przewijaniem
   skakała o ~4 klatki na obrót kółka i czytano to jako zacinanie. */
.hero {
  position: fixed; inset: 0; z-index: 0;
  height: 100svh; padding: 0;
  display: flex; align-items: stretch; overflow: hidden;
  color: var(--paper); background: #07070a;
}
/* treść zaczyna się ekran niżej i wjeżdża na animację, zasłaniając ją.
   Scroll działa normalnie — hero po prostu zostaje pod spodem. */
.hero + .trust-bar { margin-top: 100svh; }   /* tylko strona główna ma hero */
/* Nad przypięte hero podnosimy WYŁĄCZNIE bloki treści. Wcześniejsze `.hero ~ div`
   łapało też .lightbox i .spec-modal-backdrop — nakładki traciły position:fixed,
   więc po kliknięciu w zdjęcie strona blokowała się bez widocznego podglądu. */
.hero ~ section, .trust-bar, .cta-banner, footer { position: relative; z-index: 1; }
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--ease);
}
.hero.is-playing .hero-video { opacity: 1; }
/* plakat jako tło — widać go zanim wideo ruszy, i to on jest elementem LCP */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('/img/video/absetzmulden-fertigung-vorschaubild.webp') center/cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,37,54,.62) 0%, rgba(16,37,54,.3) 42%, rgba(16,37,54,.9) 100%);
}
/* Plakietka trzyma się górnej krawędzi, treść siada nisko — między nimi
   zostaje pusty kadr, w którym widać animację. */
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1320px; width: 100%; margin: 0 auto;
  padding: calc(var(--header-h, 72px) + clamp(18px, 3vh, 34px)) var(--gut) clamp(86px, 12vh, 130px);
  text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy p { max-width: 52ch; }
.hero-badge {
  background: none; border: 0; border-left: 1px solid var(--paper-40);
  color: var(--paper-60); border-radius: 0; padding: 2px 0 2px 10px;
  font-size: .63rem; margin: 0; flex: 0 0 auto;
}
/* Hero ma nie zasłaniać animacji — typografia zauważalnie mniejsza niż
   w sekcjach treściowych, blok trzyma się lewej kolumny. */
/* Oba wiersze mają zostać w jednej linii. Stopień pisma bez zmian — łamał je
   `max-width: 18ch`, nie rozmiar. Dodatkowy limit 7.6vw chroni bardzo wąskie
   ekrany (320 px), gdzie nawet ten stopień by nie wszedł. */
.hero h1 {
  color: var(--paper);
  font-size: min(clamp(1.55rem, 3.1vw, 2.9rem), 7.6vw);
  margin-bottom: clamp(12px, 1.6vh, 18px);
  max-width: none; white-space: nowrap;
}
.hero h1 em {
  display: block; color: var(--paper);
  font-family: var(--serif); font-style: italic; text-transform: none;
  font-size: .68em; line-height: 1.05; letter-spacing: -.01em; margin-top: .14em;
  white-space: nowrap;
}
.hero p { color: var(--paper-60); max-width: 46ch; font-size: clamp(.82rem, .95vw, .92rem); line-height: 1.6; margin-bottom: clamp(18px, 2.6vh, 28px); }
.hero-cta { justify-content: flex-start; }
.hero .btn { padding: 13px 24px; font-size: .68rem; }   /* mniejsze niż w treści, ale CTA musi zostać klikalne */
.hero .hero-cta .btn-primary { background: var(--paper); color: var(--ink); }
.hero .hero-cta .btn-primary:hover { color: #fff; }
.hero-stats {
  display: flex; gap: clamp(26px, 6vw, 90px); margin-top: clamp(26px, 5vh, 70px);
  padding-top: clamp(14px, 2.4vh, 26px); border-top: 1px solid var(--paper-40); width: 100%;
}
.hero .hero-stats .stat { text-align: left; }
.stat-num {
  font-family: var(--display); font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: .9; color: var(--paper); margin-bottom: 10px;
}
.stat-label { color: var(--paper-40); }

/* niskie okna (laptopy 13") — hero musi zmieścić się w jednym ekranie */
/* wskaźnik „przewiń” — z podpisem, bo sama kreska bywała niezauważana */
.scroll-hint {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.scroll-hint span {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em;
  font-size: .58rem; color: var(--paper-60);
}
.scroll-hint::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--paper-40), transparent);
  animation: scroll-hint 2.4s ease-in-out infinite;
}
@keyframes scroll-hint { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ===== PASEK ZAUFANIA — przewijająca się wstęga ===== */
.trust-bar { background: var(--ink); border: 0; padding: 0; overflow: hidden; }
.trust-bar-inner {
  max-width: 1320px; padding: 20px var(--gut);
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 44px); justify-content: space-between;
}
.trust-item, .trust-bar-item { color: var(--paper-60); display: flex; align-items: center; gap: 10px; }
.trust-item svg, .trust-bar-item svg { stroke: var(--accent); width: 15px; height: 15px; }
.trust-icon svg { width: 15px; height: 15px; }

/* Stan po przygotowaniu przez JS: tor sklonowanych haseł jedzie w pętli.
   Klasa dochodzi dopiero gdy klony są na miejscu, więc bez JS zostaje
   zwykły, statyczny pasek. */
.trust-bar.is-ticker { padding: 0; }
.trust-bar.is-ticker .trust-bar-inner {
  max-width: none; width: max-content;
  flex-wrap: nowrap; gap: 0; padding: 18px 0;
  justify-content: flex-start;
  animation: ticker var(--ticker-time, 45s) linear infinite;
  will-change: transform;
}
.trust-bar.is-ticker:hover .trust-bar-inner,
.trust-bar.is-ticker:focus-within .trust-bar-inner { animation-play-state: paused; }
.trust-bar.is-ticker .trust-item,
.trust-bar.is-ticker .trust-bar-item {
  flex: 0 0 auto;
  padding: 0 clamp(20px, 2.6vw, 42px);
  border-right: 1px solid var(--line-dark);
}
@keyframes ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ===== KARTY PRODUKTÓW ===== */
.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.product-card {
  background: var(--paper-2); border: 0; border-radius: 0;
  box-shadow: none; overflow: hidden; display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: none; border-color: transparent; }
.product-img { overflow: hidden; aspect-ratio: 16/10; background: var(--paper-3); }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s var(--ease); filter: grayscale(.18); }
.product-card:hover .product-img img { transform: scale(1.05); filter: grayscale(0); }
.product-badge {
  border-radius: 0; background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
}
.product-body { padding: clamp(24px, 3vw, 40px); flex: 1; display: flex; flex-direction: column; }
.product-card h3 { margin-bottom: 14px; }
.product-card p { color: var(--ink-60); font-size: .95rem; }

.product-card[id] { scroll-margin-top: calc(var(--header-h, 105px) + 20px); }
.product-drawing { position: relative; margin: 0; color: var(--ink); background: var(--paper-3); }
.product-drawing svg { display: block; width: 100%; height: 100%; }
.product-drawing figcaption { position: absolute; bottom: 14px; left: 20px; right: 20px; color: var(--ink-60); font-size: .7rem; }
.product-card .abroll-norm { color: var(--accent); font-weight: 600; }
.abroll-detail-drawing { aspect-ratio: 16/10; margin-bottom: 28px; }
.page-abroll .page-hero h1 em { white-space: normal; }
.page-abroll .specs-table th { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-weight: 600; }
.abroll-faq details { border-bottom: 1px solid var(--line); }
.abroll-faq summary { padding: 20px 0; cursor: pointer; font-weight: 600; }
.abroll-faq p { padding-bottom: 20px; color: var(--ink-60); }
.page-abroll #weitere-produkte .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .page-abroll #weitere-produkte .related-grid { grid-template-columns: 1fr; }
}

/* link wjeżdżający na zdjęcie po najechaniu na kartę */
.product-img { position: relative; }
.product-img-link {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end;
  padding: clamp(18px, 2vw, 28px);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em;
  font-size: .68rem; font-weight: 500; color: #fff;
  background: linear-gradient(to top, rgba(16,37,54,.78), rgba(16,37,54,0) 58%);
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.product-card:hover .product-img-link,
.product-card:focus-within .product-img-link { opacity: 1; transform: none; }
.product-img-link i { font-style: normal; position: relative; padding-bottom: 7px; }
.product-img-link i::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease) .12s;
}
.product-card:hover .product-img-link i::after { transform: scaleX(1); }

/* „Więcej info” jako link tekstowy z kreską wjeżdżającą przy hoverze */
.product-footer { gap: clamp(14px, 2vw, 28px); justify-content: flex-start; }
.btn-ghost {
  background: none; border: 0; padding: 10px 0; color: var(--ink);
  overflow: visible;
}
.btn-ghost::after {
  content: ""; position: absolute; inset: auto 0 4px 0; z-index: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.btn-ghost:hover { background: none; color: var(--accent); }
.btn-ghost:hover::after { transform: scaleX(1); }

/* ===== PODSTRONY: ścieżka w nagłówku, page-hero, FAQ, produkte powiązane ===== */
/* Ścieżka nawigacji — w nagłówku podstrony, nie osobnym paskiem pod menu.
   Pod menu czytano ją jako drugie menu. Tu wygląda jak adres: sam tekst
   rozdzielony ukośnikami, bez tła i bez plakietki.
   Kolor: --paper-60, nie --paper-40 — ten drugi daje na tym gradiencie
   tylko 3,4:1, za mało dla tak drobnego stopnia pisma. */
.hero-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-family: var(--mono); text-transform: uppercase; font-weight: 400;
  font-size: .52rem; letter-spacing: .16em;
  /* Duży odstęp do plakietki — oba bloki są drobnym monospace'em i przy
     mniejszym prześwicie czytało się to jako jedna linijka. */
  color: var(--paper-60); margin-bottom: clamp(50px, 8vw, 104px);
}
.hero-crumbs a { color: var(--paper-60); transition: color .3s var(--ease); }
.hero-crumbs a:hover { color: var(--paper); }
.hero-crumbs .sep { color: var(--paper-40); }
.hero-crumbs .current { color: var(--paper-60); }

.page-hero {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--paper);
  /* Górny padding zdjęty prawie do zera — ścieżka nawigacji siedzi teraz na
     samej górze nagłówka, a odstęp do plakietki robi jej margin-bottom.
     Suma (padding + ścieżka + margines) ≈ dawny padding, więc rytm zostaje. */
  padding: clamp(24px, 3.2vw, 40px) 0 clamp(60px, 9vw, 120px);
  --text: var(--paper); --text-muted: var(--paper-60);
}
/* zdjęcie produktu jako tło nagłówka podstrony — ścieżka wstrzykiwana
   inline'em w każdej podstronie (--hero-photo) */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-photo);
  background-size: cover; background-position: center;
  filter: grayscale(.3) contrast(1.02);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(16,37,54,.86) 0%, rgba(16,37,54,.62) 45%, rgba(16,37,54,.92) 100%);
}
/* strona bez zdjęcia zostaje na samym tuszu */
.page-hero:not([style*="--hero-photo"])::before,
.page-hero:not([style*="--hero-photo"])::after { display: none; }
/* position+z-index tworzą kontekst stosu — tak samo jak .hero-inner na stronie
   głównej. Bez tego wsuwane tło przycisków (.btn::after, z-index:-1) ucieka do
   .page-hero i miesza się z gradientem nagłówka. */
.page-hero-inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.page-hero .hero-badge {
  display: inline-block; background: none; border: 0; border-left: 1px solid var(--paper-40);
  color: var(--paper-60); border-radius: 0; padding: 2px 0 2px 12px; margin-bottom: 26px;
}
.page-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  color: var(--paper); margin-bottom: clamp(16px, 2.2vw, 26px); max-width: 20ch;
}
.page-hero h1 .nw { white-space: nowrap; }
/* wariant i din-norm jednym krojem — wcześniej din-norm szła Antonem i rozpychała
   nagłówek na trzy wiersze */
.page-hero h1 em {
  display: block; color: var(--paper); font-family: var(--serif); font-style: italic;
  text-transform: none; font-size: .62em; line-height: 1.1; letter-spacing: -.01em;
  margin-top: .16em; max-width: none;
}
.page-hero p { color: var(--paper-60); max-width: 60ch; margin-bottom: 34px; }
.page-hero .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.page-hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
.page-hero .hero-cta .btn-primary { background: var(--paper); color: var(--ink); }
.page-hero .hero-cta .btn-primary:hover { color: #fff; }
/* .btn-outline celowo BEZ nadpisań: .page-hero ma color:var(--paper), więc
   ogólna reguła (border:1px solid currentColor) daje ten sam wygląd i to samo
   wsuwane czerwone tło co na stronie głównej. Własne `background` na :hover
   malowało się NAD wsuwką i dawało brudny bordowy odcień. */

h3 { margin-bottom: .55em; }

/* sekcja „specyfikacja": opis po lewej, tabela parametrów po prawej */
.info-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.info-grid-specs .specs-table { margin: 0; width: 100%; }
.info-grid-specs { position: sticky; top: calc(var(--header-h, 72px) + 24px); }
@media (max-width: 900px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-grid-specs { position: static; }
}
.related-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.related-card { background: var(--paper-2); border: 0; border-radius: 0; padding: clamp(24px, 2.6vw, 38px); transition: background .4s var(--ease); }
.related-card:hover { background: var(--paper); }
.related-card p { color: var(--ink-60); font-size: .92rem; margin-bottom: 18px; }
.related-card a, .related-link {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em;
  font-size: .66rem; font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 4px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.related-card a:hover, .related-link:hover { color: var(--accent); border-color: var(--accent); }

/* Akordeon jako lista spięta hairline'ami — bez pudełek, bez białych pasów.
   head-common daje ramkę, radius i białe tło .faq-q; tu wszystko to zdejmujemy
   i zostawiamy sam rytm kresek. Mechanizm pokazywania (.faq-item.open .faq-a)
   zostaje po stronie head-common — nie ruszamy tu `display`. */
.faq-list { gap: 0; }
.faq-item {
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: none; padding: 0; overflow: visible;
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
  background: none; padding: 24px 0; gap: 28px;
  font-family: var(--display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(.92rem, 1.45vw, 1.12rem); line-height: 1.15;
  letter-spacing: -.005em; color: var(--ink);
  transition: color .35s var(--ease);
}
.faq-q:hover { background: none; color: var(--accent); }
.faq-icon { color: var(--accent); font-size: 1.4rem; font-weight: 300; line-height: 1; }
.faq-a {
  background: none; border-top: 0; padding: 0 0 26px;
  color: var(--ink-60); font-size: .92rem; line-height: 1.75; max-width: 68ch;
}
.faq-a p { padding-top: 0; color: var(--ink-60); }

.norm-box, .norm-info-box {
  background: var(--paper-3); border: 0; border-left: 2px solid var(--accent);
  border-radius: 0; padding: clamp(22px, 2.6vw, 34px);
}

/* ===== TABELE / SPECYFIKACJE ===== */
table { border-color: var(--line); }
th {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .66rem; font-weight: 500; background: var(--paper-3); color: var(--ink-60);
}
td, th { border-color: var(--line-soft); }

/* ===== GALERIA =====
   Strona główna: równe 3x3 (9 zdjęć) — siatka domyka się bez dziur.
   Podstrony: układ kolumnowy, bo liczba zdjęć bywa dowolna. */
#galerie { background: var(--paper-2); }

.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: none;
}
.gallery-item {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; box-shadow: none;
  background: var(--paper-3); margin: 0;
}
.gallery-item:first-child { grid-column: auto; grid-row: auto; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }


/* podstrony — masonry, zdjęcia zachowują własne proporcje */
.subpage-gallery-grid { display: block; columns: 4; column-gap: 2px; background: none; gap: 0; }
.subpage-gallery-item {
  display: block; width: 100%;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 2px; padding: 0;
  border-radius: 0; box-shadow: none; overflow: hidden;
  aspect-ratio: auto; background: var(--paper-3);
}
.subpage-gallery-item img { width: 100%; height: auto; display: block; }

.gallery-item:hover, .subpage-gallery-item:hover { transform: none; box-shadow: none; }
.gallery-item img, .subpage-gallery-item img {
  filter: grayscale(.2); transition: transform .9s var(--ease), filter .5s var(--ease);
}
.gallery-item:hover img, .subpage-gallery-item:hover img { transform: scale(1.05); filter: grayscale(0); }
.gallery-overlay, .subpage-gallery-overlay { border-radius: 0; }

@media (max-width: 1024px) { .subpage-gallery-grid { columns: 3; } }
@media (max-width: 768px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .subpage-gallery-grid { columns: 2; } }
@media (max-width: 420px)  { .gallery-grid { grid-template-columns: 1fr; } .subpage-gallery-grid { columns: 1; } }

/* ===== O NAS ===== */
#ueber-uns { background: var(--paper); }
.about-grid { gap: clamp(36px, 6vw, 90px); align-items: start; }
.about-text p { color: var(--ink-60); }
.about-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-top: 0; margin-top: 0;
}
.about-stat { background: var(--paper); border: 0; border-radius: 0; padding: 26px 18px; text-align: left; box-shadow: none; }
.about-stat:hover { transform: none; box-shadow: none; background: var(--paper-2); }
.about-stat strong {
  display: flex; align-items: baseline; gap: .1em;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.4vw, 3.2rem); line-height: .9; color: var(--ink);
  white-space: nowrap;   /* „2000" i „+" nie mogą się rozjechać na dwie linie */
}
/* jednostka przy liczbie — ten sam stopień, wyszarzona */
.about-stat strong em {
  font-style: normal; font-family: inherit; font-size: inherit;
  color: var(--ink-45); text-transform: none; letter-spacing: inherit;
}
/* liczba i jej sufiks (+ %) muszą być jedną bryłą — bez tego `+` i `%`
   dziedziczyły display, a sama cyfra monotyp z `.about-stat span` */
.about-stat strong .num { font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: none; }
.about-stat > span { display: block; color: var(--ink-45); margin-top: 8px; line-height: 1.45; }
.about-img-col img { border-radius: 0; box-shadow: none; transform: none; filter: grayscale(.15); }
.about-img-col:hover img { transform: none; }

/* ===== DLACZEGO MY ===== */
#vorteile { background: var(--paper-2); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.why-card {
  background: var(--paper-2); border: 0; border-radius: 0; box-shadow: none;
  padding: clamp(26px, 3vw, 42px);
  transition: background .4s var(--ease);
}
.why-card:hover { background: var(--paper); box-shadow: none; }
.why-icon {
  width: 40px; height: 40px; background: none; border-radius: 0; margin-bottom: 22px;
  border-bottom: 1px solid var(--ink); align-items: flex-end; padding-bottom: 8px;
}
.why-card:hover .why-icon { transform: none; box-shadow: none; }
.why-icon img { width: 22px; height: 22px; }
.why-card h3 { color: var(--ink); }
.why-card p { color: var(--ink-60); font-size: .92rem; }

/* ===== BANER CTA ===== */
.cta-banner { background: var(--ink); padding: clamp(60px, 7vw, 110px) 0; text-align: left; }
.cta-banner h2 {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 4.2rem);
  text-transform: uppercase; line-height: .94; margin: 0; max-width: 16ch;
}
.cta-banner p { color: var(--paper-60); margin: 0 0 30px; max-width: 46ch; }
.cta-banner .btn-primary { background: var(--paper); color: var(--ink); }
.cta-body { display: flex; flex-direction: column; align-items: flex-start; }

@media (min-width: 900px) {
  .cta-banner .container {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(40px, 6vw, 90px); align-items: center;
  }
}
@media (max-width: 899px) {
  .cta-banner h2 { margin-bottom: 26px; }
}

/* ===== KONTAKT ===== */
#kontakt { background: var(--paper); }
#kontakt .contact-grid { align-items: start; gap: clamp(32px, 4vw, 64px); }
#kontakt .section-header { margin-bottom: clamp(28px, 3vw, 44px); }
/* na desktopie formularz mówi sam za siebie — podtytuł tylko na wąskich ekranach */
@media (min-width: 900px) { #kontakt .section-header > .section-desc { display: none; } }
.contact-form-card, .contact-info { border-radius: 0; }
.contact-form-card { background: var(--paper-2); border: 1px solid var(--line); box-shadow: none; padding: clamp(26px, 3.4vw, 46px); }
label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; color: var(--ink-45); }
input, select, textarea {
  border-radius: 0; border: 1px solid var(--line); background: var(--paper);
  font-size: .95rem; padding: 14px 16px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); background: #fff; }

/* ===== STOPKA ===== */
footer { background: var(--ink); color: var(--paper-60); }
footer a { color: var(--paper-60); transition: color .25s var(--ease); }
footer a:hover { color: var(--paper); }
.footer-col h4 { color: var(--paper); letter-spacing: .14em; }

/* ===== COOKIE ===== */
#cookie-banner { border-radius: 0; background: var(--ink); border-top: 1px solid var(--line-dark); }
.cookie-btn-accept, .cookie-btn-essential { border-radius: 0; }

/* =========================================================================
   ANIMACJE
   ========================================================================= */

/* wejście elementów przy scrollu — stan startowy w CSS, więc bez mignięcia.
   Klasa .js3d jest dodawana inline'em w <head>; awaryjny timer ją zdejmuje,
   gdyby assets/site.js się nie wczytał. */
.js3d .reveal,
.js3d .section-header,
.js3d .product-card,
.js3d .why-card,
.js3d .related-card,
.js3d .about-stat,
.js3d .about-text,
.js3d .about-img-col,
.js3d .contact-info,
.js3d .contact-form-card,
.js3d .gallery-item,
.js3d .subpage-gallery-item,
.js3d .faq-item,
.js3d .norm-box,
.js3d .cta-banner .container {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * .06s);
}
.reveal.is-in, .is-in { opacity: 1 !important; transform: none !important; }
.reveal[data-delay="1"] { --i: 1; } .reveal[data-delay="2"] { --i: 2; }
.reveal[data-delay="3"] { --i: 3; } .reveal[data-delay="4"] { --i: 4; }

/* nagłówki wjeżdżające wierszami */
.js3d .line-mask { display: block; overflow: hidden; }
.js3d .line-mask > span {
  display: block; transform: translate3d(0, 105%, 0);
  transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * .08s);
}
.js3d .is-in .line-mask > span, .js3d .line-mask.is-in > span { transform: none; }

/* pochylanie kart 3D za kursorem (tylko mysz) */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0px), 0);
  transition: transform .5s var(--ease);
  will-change: transform;
}
[data-tilt].is-tilting { transition: transform .1s linear; }

/* rosnące liczby */
.num { font-variant-numeric: tabular-nums; display: inline-block; }

/* =========================================================================
   SEKCJA: PRODUKCJA → DOSTAWA
   ========================================================================= */
/* `overflow: clip` zamiast `hidden` — `hidden` tworzy kontener przewijania
   i unieruchamia position:sticky w filmie (kadr uciekał w górę, odsłaniając
   czarne tło sekcji). `clip` przycina tak samo, ale sticky działa. */
#fertigung { overflow: clip; }

/* etapy */
.fertigung-steps {
  list-style: none; margin: clamp(30px, 4vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark);
  perspective: 1400px;
}
.pstep { display: flex; }
.pstep-card {
  position: relative; width: 100%;
  padding: clamp(22px, 2vw, 30px);
  background: var(--ink); color: var(--paper);
  transform-style: preserve-3d;
  transition: background .5s var(--ease);
  overflow: hidden;
}
.pstep-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.pstep-card:hover::after, .pstep-card:focus-within::after { transform: scaleX(1); }
.pstep-card:hover { background: var(--ink-2); }
.pstep-num { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; color: var(--paper-40); margin-bottom: 16px; }
.pstep-ico {
  width: 30px; height: 30px; margin-bottom: 16px; border-radius: 0;
  display: flex; align-items: flex-end; background: none; box-shadow: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 8px; transform: none;
}
.pstep-ico svg { width: 22px; height: 22px; stroke: var(--paper); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pstep-card h3 { color: var(--paper); margin-bottom: 12px; transform: none; }
.pstep-card p { font-size: .84rem; line-height: 1.6; color: var(--paper-60); transform: none; }
.fertigung-cta { margin-top: clamp(40px, 5vw, 70px); }

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: 1fr; }
  .fertigung-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .fertigung-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  /* zdjęcie z licznikami idzie pod tekst — w kolumnie liczby przed nagłówkiem
     „O nas" pojawiałyby się, zanim wiadomo, czego dotyczą */
  .about-img-col { order: 0; margin-top: clamp(28px, 5vw, 44px); }
  .hero-stats { flex-wrap: wrap; gap: 26px 40px; }
}
@media (max-width: 620px) {
  .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* pasek zaufania: jeden rząd przewijany w poziomie zamiast rozjechanej listy */
  .trust-bar-inner {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 26px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .trust-bar-inner::-webkit-scrollbar { display: none; }
  .trust-item, .trust-bar-item { flex: 0 0 auto; scroll-snap-align: start; }
}
/* ===== MENU MOBILNE =====
   `backdrop-filter` na <header> tworzy blok zawierający dla position:fixed,
   przez co rozwinięte menu nie rozciągało się na ekran (miało wysokość
   nagłówka, a pozycje wychodziły poza tło). Na wąskich ekranach rezygnujemy
   z rozmycia — panel odzyskuje pełną wysokość okna. */
@media (max-width: 768px) {
  header { backdrop-filter: none; background: var(--paper); }
  #main-nav {
    inset: var(--header-h, 84px) 0 0; height: auto;
    background: var(--ink);
    border-top: 1px solid var(--line-dark);
    padding: clamp(14px, 4vw, 26px) var(--gut) 40px;
    gap: 0;
    align-items: stretch; justify-content: flex-start;
    overflow-y: auto; overscroll-behavior: contain;
  }
  #main-nav a {
    color: var(--paper-60); font-size: .82rem; letter-spacing: .16em;
    padding: 18px 2px; border-bottom: 1px solid var(--line-dark);
    text-align: left;
  }
  #main-nav a:hover, #main-nav a.is-current { color: var(--paper); }
  #main-nav a.is-current { color: var(--accent); }
  #main-nav a.is-current::after { display: none; }
  #main-nav .btn-nav {
    background: var(--paper) !important; color: var(--ink) !important;
    margin-top: 22px; text-align: center; border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .fertigung-steps { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { padding-top: 118px; }
}

/* ===== MNIEJ RUCHU ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .is-in, [class*="js3d"] * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pstep-card::after, .scroll-hint::after { animation: none !important; }
  [data-tilt] { transform: none !important; }
  .hero-video { display: none; }   /* zostaje sam plakat */
}

/* ===== PODSTRONY PRODUKTOWE =====
   Naprzemienne tła sekcji w nowej palecie (nadpisuje bazowe z head-common). */
.section--white { background: var(--paper); }
.section--alt   { background: var(--paper-2); }

.info-grid-content { min-width: 0; }
.specs-title { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--ink-45); margin: 0 0 12px; font-weight: 500; }
.product-tag { border-radius: 0; background: var(--accent); color: #fff; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }

.variants-table { overflow-wrap: anywhere; hyphens: auto; }

/* Marka BONK — kolory, logo i przyciski. */
/* Logo w stopce */
footer .footer-logo-text img {
  padding: 0;
  width: 216px;
  height: auto;
  object-fit: contain;
}

/* Logo w nagłówku — naturalne proporcje */
.logo img {
  padding: 0;
  width: 216px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .logo img { width: 178px; height: auto; }
}

/* Przyciski — primary blue/white, hover white/blue */
.btn-primary {
  background: var(--accent);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--accent-dark);
  color: #ffffff;
}

/* Hero CTA — light/white primary z blue hover */
.hero .hero-cta .btn-primary,
.page-hero .hero-cta .btn-primary {
  background: #ffffff;
  color: var(--ink);
}

.hero .hero-cta .btn-primary:hover,
.page-hero .hero-cta .btn-primary:hover {
  background: var(--accent);
  color: #ffffff;
}

/* Nagłówek — btn-nav blue/white, mobile identycznie */
#main-nav .btn-nav,
.page-home header:not(.is-stuck) .btn-nav {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* Focus ring branded */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


#main-nav .btn-nav:hover { background: var(--accent-dark) !important; }

.logo { padding: 6px 10px; }
@media (max-width: 899px) { #main-nav a.is-current { color: #78c5ff; } }