/* Barlow + Barlow Condensed — hostowane lokalnie (bez Google Fonts) */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/barlow-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/barlow-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-condensed-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-condensed-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   StoneZone — wspolny arkusz stylow dla wszystkich podstron.
   Kolor marki kazdej strony ustawia atrybut style na <body>, np.
   <body style="--brand:#c8102e; --brand2:#e8425a;">
   Czcionki wczytuje <link> w <head> kazdej strony.
   ===================================================================== */
:root {
  --black: #111111;
  --dark: #1a1a1a;
  --mid: #2e2e2e;
  --accent: #31A051;
  --accent2: #3dbf62;
  --light: #f4f4f4;
  --white: #ffffff;
  --text: #1a1a1a;
  --muted: #666;

  /* per-brand accent, overridden per page via body class */
  --brand: var(--accent);
  --brand2: var(--accent2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x:hidden na body robi z niego kontener przewijania, a to wylacza
   position:sticky u jego dzieci — przez co przyklejona nawigacja nigdy nie
   dzialala. `clip` obcina tak samo, ale kontenera nie tworzy. */
html { overflow-x: clip; }
body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Barlow', sans-serif;
  background: var(--light);
  color: var(--text);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ===== LAYOUT WRAPPER ===== */
.w, .nav-inner, .hero-inner, .section-pad,
.dist-strip-inner, .catalog-bar-inner, .footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
}
@media (max-width: 1100px){
  .w, .nav-inner, .hero-inner, .section-pad,
  .dist-strip-inner, .catalog-bar-inner, .footer-inner { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 640px){
  .w, .nav-inner, .hero-inner, .section-pad,
  .dist-strip-inner, .catalog-bar-inner, .footer-inner { padding-left: 18px; padding-right: 18px; }
}

/* ===== NAV ===== */
nav { position: sticky; top: 0; z-index: 100; background: var(--black); box-shadow: 0 2px 20px rgba(0,0,0,0.4); }
nav::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cline x1='0' y1='40' x2='40' y2='0' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E") repeat;
  background-size: 40px 40px;
}
nav > * { position: relative; z-index: 1; }
.nav-inner { height: 70px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo img { height: 34px; }
.nav-logo .divider { color: rgba(255,255,255,0.2); font-size: 1.3rem; line-height: 1; }
.nav-logo .brand-sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; color: #888; text-transform: uppercase; }
.nav-links { display: flex; list-style: none; align-items: center; }
.nav-links li { margin-left: 30px; }
.nav-links li:first-child { margin-left: 0; }
.nav-links a {
  color: #aaa; text-decoration: none; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
  transition: color .2s; padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--brand); }
.nav-links a.current { color: #fff; border-color: var(--brand); }
/* selektor musi byc mocniejszy niz `.nav-links a`, inaczej padding ponizej
   przegrywa specyficznoscia i przycisk sklei sie z tekstem */
.nav-links a.nav-cta {
  display: inline-block; background: var(--brand); color: var(--black) !important;
  padding: 9px 22px; border-radius: 2px; border-bottom: none !important; line-height: 1.15;
}
.nav-links a.nav-cta:hover { background: var(--brand2) !important; color: var(--black) !important; }
/* ===== NAV DROPDOWNS ===== */
.nav-links li.has-sub { position: relative; }
.nav-links li.has-sub > a::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.nav-sub {
  list-style: none; position: absolute; top: calc(100% + 14px); left: -20px; min-width: 232px;
  background: #111; border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid var(--brand);
  box-shadow: 0 16px 36px rgba(0,0,0,0.55); padding: 6px 0; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-sub li { margin-left: 0 !important; }
.nav-sub a {
  display: block; padding: 11px 20px; border-bottom: none; color: #b5b5b5;
  font-size: 0.92rem; letter-spacing: 0.05em; transition: background .18s, color .18s;
}
.nav-sub a:hover { background: rgba(255,255,255,0.06); color: var(--brand); }
.nav-sub a.current { color: #fff; }
.nav-sub-toggle { display: none; }
@media (min-width: 981px){
  /* niewidoczny mostek, zeby kursor nie gubil menu w przerwie */
  .nav-links li.has-sub::after { content: ''; position: absolute; left: 0; right: -20px; top: 100%; height: 18px; }
  .nav-links li.has-sub:hover > .nav-sub,
  .nav-links li.has-sub:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links li.has-sub:hover > a::after { transform: translateY(1px) rotate(-135deg); }
}
@media (max-width: 980px){
  .nav-links li.has-sub > a::after { display: none; }
  .nav-sub-toggle {
    display: flex; align-items: center; justify-content: center; position: absolute;
    top: 0; right: 0; width: 56px; height: 55px; background: none; border: none; cursor: pointer; padding: 0;
  }
  .nav-sub-toggle::before {
    content: ''; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: translateY(-3px) rotate(45deg); transition: transform .25s;
  }
  .nav-sub-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
  .nav-sub {
    position: static; opacity: 1; visibility: visible; transform: none; display: none;
    min-width: 0; background: rgba(255,255,255,0.03); border: none; border-left: 2px solid var(--brand);
    box-shadow: none; margin: 0 0 6px 10px; padding: 0;
    box-sizing: border-box; width: calc(100% - 10px); max-width: calc(100% - 10px);
  }
  .nav-links li.has-sub.open > .nav-sub { display: block; }
  .nav-sub a { padding: 13px 14px; font-size: 0.98rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-sub li:last-child a { border-bottom: none; }
}

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:34px; background:none; border:none; cursor:pointer; padding:0; z-index:110; }
.nav-toggle span{ display:block; width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .25s, opacity .25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width: 980px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none; position:fixed; top:70px; left:0; right:0; bottom:0; background:#111; flex-direction:column;
    align-items:stretch; padding:10px 24px 30px; overflow-y:auto; box-shadow:0 12px 24px rgba(0,0,0,.5); z-index:105;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ margin-left:0; width:100%; }
  .nav-links a{ display:block; padding:16px 4px; font-size:1.05rem; border-bottom:1px solid rgba(255,255,255,0.08); }
  .nav-links a.nav-cta{ margin-top:14px; text-align:center; display:block; padding:14px 22px; }
}

/* ===== HERO ===== */
.hero { background: var(--black); color: var(--white); position: relative; overflow: hidden; padding: 0; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(200,168,75,0.03) 40px, rgba(200,168,75,0.03) 41px);
}
.hero-inner { position: relative; padding: 84px 60px 70px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; }
@media (max-width: 1100px){ .hero-inner { grid-template-columns: 1fr; padding: 56px 32px; } .hero-right { display: none !important; } }
.hero-content { position: relative; z-index: 1; }
.hero-badge {
  display: inline-block; background: var(--brand); color: var(--black);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 14px; margin-bottom: 24px; border-radius: 1px;
}
.hero h1 {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 900; line-height: 1.02; text-transform: uppercase; margin-bottom: 20px;
}
.hero h1 span { color: var(--brand); }
.hero p.lede { font-size: 1.08rem; color: #bbb; max-width: 520px; margin-bottom: 32px; font-weight: 300; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
  display: inline-block; background: var(--brand); color: var(--black);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 13px 30px; text-decoration: none;
  border-radius: 2px; transition: background .2s, transform .15s; border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--brand2); transform: translateY(-1px); }
.btn-outline {
  display: inline-block; border: 2px solid rgba(255,255,255,0.3); color: var(--white);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 28px; text-decoration: none;
  border-radius: 2px; transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.hero-right { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-photo { width: 100%; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-badge-dist {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 4px;
  padding: 32px 40px; text-align: center; width: 100%;
}
.hero-badge-dist .dist-label { font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.hero-badge-dist .dist-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--white); line-height: 1.15; }
.hero-badge-dist .dist-sub { margin-top: 10px; font-size: 0.9rem; color: #999; }
/* dla marek bez logotypu w wersji na ciemne tlo: nazwa zlozona z czcionki
   zamiast bitmapy wklejonej na bialym prostokacie */
.hero-badge-dist .dist-title + .dist-podpis {
  margin-top: 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.86rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand);
}

/* ===== DISTRIBUTOR / STRIP ===== */
.dist-strip { background: var(--brand); padding: 18px 0; }
.dist-strip-inner { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.dist-strip p { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--black); letter-spacing: 0.04em; text-transform: uppercase; }
.dist-strip span { font-weight: 400; }

/* ===== CATALOG / LINK BAR ===== */
.catalog-bar { background: var(--black); padding: 26px 0; }
.catalog-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.catalog-bar p { font-family: 'Barlow Condensed', sans-serif; font-size: 1.12rem; font-weight: 600; color: #ccc; letter-spacing: 0.05em; text-transform: uppercase; }
.catalog-btn {
  display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 2px solid var(--brand);
  color: var(--brand); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 26px; text-decoration: none; border-radius: 2px;
  transition: background .2s, color .2s; animation: cat-pulse 2.5s infinite;
}
.catalog-btn:hover { background: var(--brand); color: #fff; animation: none; }
@keyframes cat-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(49,160,81,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(49,160,81,0); }
}

/* ===== SECTIONS ===== */
section { padding: 80px 0; }
section.dark { background: var(--dark); }
section.mid { background: #e8e8e2; }
.section-header { margin-bottom: 48px; }
.section-header.center { text-align: center; }
.section-header.center .section-desc { margin: 12px auto 0; }
.section-label { font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; display: block; }
.section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; text-transform: uppercase; line-height: 1.05; color: var(--black); }
.section-desc { font-size: 1rem; color: var(--muted); max-width: 580px; margin-top: 12px; font-weight: 300; }

/* ===== PRODUCT LINE WRAPPERS ===== */
.xp-line-wrapper { background: var(--black); border-radius: 6px; padding: 44px 40px 48px; margin-bottom: 48px; position: relative; overflow: hidden; isolation: isolate; }
.xp-line-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand), #1a6e35, var(--brand)); }
.xp-line-header { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.xp-line-badge { background: var(--brand); color: var(--white); font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 18px; border-radius: 2px; flex-shrink: 0; }
.xp-line-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 800; text-transform: uppercase; color: var(--white); }
.xp-line-desc { font-size: 0.9rem; color: #888; margin-left: auto; max-width: 340px; text-align: right; }
@media (max-width: 768px){ .xp-line-desc{ display:none; } .xp-line-wrapper{ padding:24px 18px 30px; } }

.standard-line-wrapper { background: var(--black); border-radius: 6px; margin-top: 24px; padding: 36px 40px 48px; isolation: isolate; }
.standard-line-header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 2px solid rgba(255,255,255,0.1); }
.standard-line-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; color: #fff; }
.standard-line-desc { font-size: 0.9rem; color: #888; }
@media (max-width: 768px){ .standard-line-wrapper{ padding:22px 18px 30px; } }

/* ===== BLADE CARDS ===== */
.blades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
/* tych kart jest mniej niz w linii XP — siatka na sztywno wyliczona na
   pelna szerokosc zostawiala pusta trzecia kolumne. Wysrodkowana i z
   nizszym kadrem zdjecia czyta sie jak zamknieta calosc, nie jak brak */
.blades-grid-standard {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  max-width: 860px; margin-inline: auto;
}
/* przy dwoch kartach wezsza siatka trzyma je razem; od trzeciej karty
   ograniczenie zaczeloby je scieśniac, wiec je zdejmujemy */
.blades-grid-standard:has(> :nth-child(3)) { max-width: none; }
.blade-card { background: var(--white); border: 1px solid #ddd; border-radius: 3px; overflow: hidden; position: relative; isolation: isolate; transition: box-shadow .2s, transform .2s; }
.blade-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); transform: translateY(-3px); }
.blade-card-img { height: 0; padding-bottom: 100%; position: relative; overflow: hidden; background: var(--black); }
.blade-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blade-card-body { padding: 24px 26px; }
.blade-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.55rem; font-weight: 800; text-transform: uppercase; color: var(--black); margin-bottom: 4px; }
.blade-type { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.blade-desc { font-size: 0.92rem; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.blade-features { list-style: none; margin-bottom: 20px; }
.blade-features li { font-size: 0.87rem; color: #444; padding: 5px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 8px; }
.blade-features li::before { content: '▸'; color: var(--brand); font-size: 0.7rem; margin-top: 3px; flex-shrink: 0; }
.blade-material-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.material-tag { background: #e8f2ec; color: #555; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; }
.blade-link { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand); padding-bottom: 1px; }
.blade-link:hover { color: var(--black); border-color: var(--black); }

/* dark variant (used inside black wrappers) */
.xp-card, .standard-line-wrapper .blade-card { background: #1a1a1a; border-color: rgba(49,160,81,0.2); }
.xp-card:hover, .standard-line-wrapper .blade-card:hover { border-color: rgba(49,160,81,0.6); box-shadow: 0 8px 32px rgba(49,160,81,0.15); }
.xp-card .blade-name, .standard-line-wrapper .blade-name { color: #fff; }
.xp-card .blade-desc, .standard-line-wrapper .blade-desc { color: #999; }
.xp-card .blade-features li, .standard-line-wrapper .blade-features li { color: #bbb; border-color: rgba(255,255,255,0.06); }
.xp-card .material-tag, .standard-line-wrapper .material-tag { background: rgba(49,160,81,0.12); color: #aaa; }
.xp-ribbon { position: absolute; top: 14px; right: -28px; background: var(--brand); color: var(--white); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 40px; transform: rotate(45deg); z-index: 2; }

/* ===== CNC / FEATURE GRID ===== */
.cnc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1100px){ .cnc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .cnc-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px){
  .cnc-card { padding: 0 18px 26px; }
  .cnc-photo-slot { margin: 0 -18px 18px; }
}
.cnc-card { background: #1c1c1c; border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 0 24px 30px; position: relative; isolation: isolate; transition: background .2s, border-color .2s; overflow: hidden; }
.cnc-card:hover { background: #222; border-color: rgba(49,160,81,0.4); }
/* zdjecie ma siegac krawedzi karty, tekst nie — stad ujemne marginesy
   rownowazace poziomy padding .cnc-card */
.cnc-photo-slot { height: 0; padding-bottom: 72%; position: relative; overflow: hidden; margin: 0 -24px 20px; }

/* katalogowe ujecia narzedzi na jednolitym tle: pokazujemy caly przedmiot
   (contain), a tlo ramki dopasowujemy do tla zdjecia, zeby nie bylo widac
   laczenia. `cover` przycinal te zdjecia i sztucznie je powiekszal. */
/* pliki sa juz dociete i dopelnione wlasnym kolorem tla do tych proporcji,
   wiec zdjecie wypelnia ramke bez widocznego laczenia */
.cnc-photo-slot.produkt { padding-bottom: 84%; background: #c1e1c9; }
.cnc-photo-slot.produkt img { object-fit: cover; }
.cnc-photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cnc-body { padding: 0 28px; }
.cnc-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.45rem; font-weight: 800; text-transform: uppercase; color: var(--white); margin-bottom: 6px; }
.cnc-type { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.cnc-desc { font-size: 0.9rem; color: #aaa; line-height: 1.65; margin-bottom: 16px; }
.cnc-features { list-style: none; }
.cnc-features li { font-size: 0.85rem; color: #888; padding: 4px 0; display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cnc-features li::before { content: '▸'; color: var(--brand); font-size: 0.65rem; margin-top: 4px; flex-shrink: 0; }

/* ===== WHY GRID ===== */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.why-item { text-align: center; padding: 32px 20px; background: var(--white); border-radius: 3px; border-bottom: 3px solid var(--brand); isolation: isolate; }
/* tlo kolka bierze kolor marki biezacej strony (sztywny zielony nie pasowal
   do czerwonego Poseidona, zlotego Vitium itd.) */
.why-icon { width: 56px; height: 56px; background: color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  color: var(--brand); font-size: 1.35rem; line-height: 1; }
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .why-icon { background: rgba(255,255,255,0.08); }
}
.why-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; color: var(--black); margin-bottom: 8px; }
.why-text { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }

/* ===== FEATURE / SPLIT ROW ===== */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-row.reverse .split-img { order: 2; }
.split-img { border-radius: 4px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
.split-img img { width: 100%; display: block; }
.split-row.dark .split-img { border-color: rgba(255,255,255,0.1); }
@media (max-width: 900px){ .split-row { grid-template-columns: 1fr; } .split-row.reverse .split-img { order: 0; } }

/* ===== BRAND SECTION BANNER (maszyny.html) ===== */
.brand-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.brand-banner .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--brand); flex-shrink:0; }
.brand-banner .name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .2em; color: var(--brand); text-transform: uppercase; }

/* ===== SPEC TABLE ===== */
.spectable { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--white); }
.spectable th, .spectable td { text-align: left; padding: 11px 16px; border-bottom: 1px solid #e2e2de; }
.spectable th { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .04em; color: var(--muted); font-size: 12px; text-transform: uppercase; background: #ececE6; }
.spectable tr:last-child td { border-bottom: none; }

/* ===== SUB-PAGE ANCHOR NAV ===== */
.subnav { position: sticky; top: 70px; z-index: 90; background: var(--white); border-bottom: 1px solid #ddd; }
.subnav-inner { display: flex; gap: 4px; overflow-x: auto; }
.subnav a { padding: 15px 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; text-decoration:none; }
.subnav a:hover { color: var(--black); }
.subnav a.active { color: var(--black); border-color: var(--brand); }

/* ===== CONTACT ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 900px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-info h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: var(--black); margin-bottom: 24px; }
.contact-item { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.contact-item-icon { width: 38px; height: 38px; background: var(--brand); border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.contact-item-text { font-size: 0.95rem; color: #444; }
.contact-item-text a { text-decoration: none; color: var(--text); }
.contact-item-text a:hover { color: var(--brand); }
.contact-item-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.contact-form-box { background: rgba(17,17,17,0.97); padding: 40px; border-radius: 3px; }
.contact-form-box h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: var(--white); margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: var(--white);
  padding: 11px 14px; font-family: 'Barlow', sans-serif; font-size: 0.92rem; border-radius: 2px; outline: none; transition: border-color .2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--brand); }
.form-group select option { background: var(--dark); color: var(--white); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-submit { width: 100%; background: var(--brand); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px; border: none; border-radius: 2px; cursor: pointer; margin-top: 8px; transition: background .2s; }
.form-submit:hover { background: var(--brand2); }
.social-links { display: flex; gap: 12px; align-items: center; }
.social-link { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(0,0,0,0.15); border-radius: 50%; color: #555; text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.social-link:hover { border-color: var(--brand); color: var(--brand); background: rgba(49,160,81,0.08); }

/* ===== CTA BAND (used to close subpages) ===== */
.cta-band { background: var(--dark); padding: 64px 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #999; max-width: 60ch; margin: 14px auto 28px; font-size: 1rem; font-weight: 300; }

/* ===== FOOTER ===== */
footer { background: #111; color: #666; padding: 40px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cline x1='0' y1='40' x2='40' y2='0' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E"); background-size: 40px 40px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-logo { display: flex; align-items: center; gap: 14px; }
.footer-logo img { height: 28px; opacity: 0.7; }
footer p { font-size: 0.82rem; }
footer a { color: #888; text-decoration: none; }
footer a:hover { color: var(--brand); }

/* ===== DIVIDER ===== */
.gold-line { height: 3px; background: linear-gradient(90deg, transparent, var(--brand), transparent); border: none; opacity: 0.4; }

/* ===== WHATSAPP FLOAT ===== */
.wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 999; }
.wa-btn {
  display: flex; align-items: center; gap: 10px; background: #25D366; color: #fff; text-decoration: none;
  padding: 13px 20px 13px 16px; border-radius: 50px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: 0.04em; box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  animation: wa-pulse 2.2s infinite; transition: transform .2s, box-shadow .2s; white-space: nowrap;
}
.wa-btn:hover { transform: scale(1.05); box-shadow: 0 6px 28px rgba(37,211,102,0.65); animation: none; }
@keyframes wa-pulse { 0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45); } 50% { box-shadow: 0 4px 32px rgba(37,211,102,0.8), 0 0 0 8px rgba(37,211,102,0.12); } }
@media (max-width: 480px){ .wa-btn span { display: none; } .wa-btn { padding: 13px; border-radius: 50%; } }

/* ===== SCROLL REVEAL ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== STRIPED SECTION BGs ===== */
.stripe-light { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cline x1='0' y1='40' x2='40' y2='0' stroke='rgba(0,0,0,0.06)' stroke-width='1'/%3E%3C/svg%3E"); background-size: 40px 40px; }
.stripe-dark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cline x1='0' y1='40' x2='40' y2='0' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E"); background-size: 40px 40px; }

/* ===== BRAND PAGE HERO STRIP (used on wodiam/abr/maszyny to intro brand within page) ===== */
.brand-hero { background: var(--dark); color: #fff; padding: 54px 0 46px; position: relative; border-top: 3px solid var(--brand); }
.brand-hero .tag { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--brand); text-transform: uppercase; }
.brand-hero h2 { margin-top: 10px; font-family:'Barlow Condensed',sans-serif; font-weight:900; text-transform:uppercase; font-size: clamp(1.9rem,4vw,3rem); color:#fff; }
.brand-hero p { margin-top: 14px; max-width: 62ch; color: #aaa; font-size: 1rem; font-weight:300; }

/* generic helpers */
.mt-0{margin-top:0} .center-text{text-align:center}

/* ===================================================================
   NEUTRAL HOMEPAGE SYSTEM (no brand colors — monochrome + motion)
   =================================================================== */
:root{
  --mono-1:#0a0a0a; --mono-2:#151515; --mono-3:#5f6470; --mono-4:#c9c9c6; --mono-5:#f6f5f2; --mono-line:rgba(255,255,255,0.09);
}
.home-hero{
  position:relative; background:var(--mono-1); color:#fff; overflow:hidden; min-height:92vh;
  display:flex; align-items:center;
}
.home-hero .noise{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:64px 64px;
  animation:gridshift 26s linear infinite;
}
@keyframes gridshift{ 0%{background-position:0 0,0 0;} 100%{background-position:64px 128px,128px 64px;} }
.home-hero .glow{
  position:absolute; width:60vw; height:60vw; max-width:900px; max-height:900px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.09) 0%, transparent 68%);
  top:-20%; right:-10%; filter:blur(10px); animation:pulseglow 8s ease-in-out infinite;
}
@keyframes pulseglow{ 0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:.9; transform:scale(1.08);} }
.home-hero-inner{ position:relative; z-index:2; padding:0 60px; max-width:1600px; margin:0 auto; width:100%; }
@media (max-width:1100px){ .home-hero-inner{ padding:0 32px; } }
.home-kicker{
  display:inline-flex; align-items:center; gap:10px; font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mono-4);
  opacity:0; animation:riseIn .8s ease forwards .1s;
}
.home-kicker::before{ content:''; width:34px; height:1px; background:var(--mono-4); }
.home-hero h1{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.8rem,7vw,6.4rem); line-height:1.08; margin-top:22px; letter-spacing:-.01em;
}
.home-hero h1 .line{ display:block; overflow:hidden;
  /* zapas na ogonki i brzuszki polskich liter (Ę, ą, Ł) — bez niego
     overflow:hidden przycinal je przy odslanianiu wiersza */
  padding-bottom:.18em; margin-bottom:-.18em; }
.home-hero h1 .line span{ display:inline-block; opacity:0; transform:translateY(100%); animation:riseIn .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }
.home-hero p.lede{
  margin-top:28px; max-width:52ch; font-size:1.15rem; color:var(--mono-4); font-weight:300;
  opacity:0; animation:riseIn .8s ease forwards .5s;
}
.home-hero-btns{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation:riseIn .8s ease forwards .65s; }
.btn-mono{
  display:inline-flex; align-items:center; gap:10px; background:#fff; color:#0a0a0a;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.05em; text-transform:uppercase;
  padding:14px 30px; border:1px solid #fff; transition:background .25s, color .25s, transform .2s;
}
.btn-mono:hover{ background:transparent; color:#fff; transform:translateY(-2px); }
.btn-mono-outline{
  display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1rem; letter-spacing:.05em; text-transform:uppercase;
  padding:13px 28px; border:1px solid rgba(255,255,255,.35); transition:border-color .25s, background .25s;
}
.btn-mono-outline:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

/* marquee ticker */
.marquee-wrap{ background:#fff; border-top:1px solid #e4e2dc; border-bottom:1px solid #e4e2dc; overflow:hidden; padding:18px 0; }
.marquee-track{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
.marquee-track span{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mono-1); padding:0 40px; white-space:nowrap; opacity:.72;
}
.marquee-track span::after{ content:'●'; margin-left:40px; font-size:.5rem; vertical-align:middle; color:#c9c9c6; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* monochrome brand grid (home) */
/* ===== GRUPY MAREK (narzedzia / maszyny) ===== */
.mono-group + .mono-group, .mono-group { margin-bottom: 4px; }
.mono-group-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 18px; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid #e4e2dc; }
.mono-group-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mono-4,#9a978f); }
.mono-group-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(1.7rem,3vw,2.5rem); text-transform:uppercase; line-height:1; }
.mono-group-desc { flex:1 1 320px; font-size:.95rem; color:var(--mono-3,#6a6a66); max-width:60ch; }
.mono-group-all { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--mono-1,#111); border-bottom:2px solid var(--accent); padding-bottom:2px; white-space:nowrap; transition:color .2s,border-color .2s; }
.mono-group-all:hover { color:var(--accent); }
.mono-grid.mono-grid-3 { --kol:3; }
#narzedzia, #maszyny-grupa { scroll-margin-top: 90px; }
@media (max-width:980px){ .mono-grid.mono-grid-3 { --kol:2; } }
@media (max-width:600px){ .mono-grid.mono-grid-3 { --kol:1; } }
.mono-group + .mono-group { margin-top: 54px; }

/* Siatka na sztywno podzielona na kolumny zostawiala puste pola, gdy liczba
   kafelkow nie dzielila sie przez liczbe kolumn — przy pieciu markach w trzech
   kolumnach byla to szara dziura w prawym dolnym rogu. Na flexie ostatni rzad
   rozciaga sie na pelna szerokosc, wiec dziury nie ma przy zadnej liczbie marek.
   Odstep 1px na tle kontenera dalej rysuje wloskowate linie miedzy kafelkami. */
.mono-grid{ display:flex; flex-wrap:wrap; gap:1px; background:#e4e2dc; border:1px solid #e4e2dc; }
.mono-grid > *{ flex:1 1 calc(100% / var(--kol, 4) - 1px); min-width:0; }
.mono-card{
  position:relative; background:#fff; padding:44px 30px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between;
  text-decoration:none; color:var(--mono-1); overflow:hidden; transition:background .3s;
}
.mono-card:hover{ background:var(--mono-1); color:#fff; }
.mono-card .mono-num{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.18em; color:var(--mono-3);
  transition:color .3s;
}
.mono-card:hover .mono-num{ color:#8c8c8c; }
.mono-card h3{ font-size:1.8rem; margin-top:auto; padding-top:24px; min-height:2.25em; line-height:1.12; display:flex; align-items:flex-end; }
.mono-card p{ font-size:.86rem; color:var(--mono-3); margin-top:10px; transition:color .3s; }
.mono-card:hover p{ color:#b7b7b3; }
.mono-card .arrow{
  position:absolute; top:38px; right:30px; width:34px; height:34px; border:1px solid #e4e2dc; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:transform .3s, border-color .3s, background .3s; z-index:2;
}
.mono-card:hover .arrow{ transform:rotate(45deg) scale(1.1); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); }
.mono-card .mono-num, .mono-card h3, .mono-card p{ position:relative; z-index:2; }
.mono-bg{
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:.10; filter:grayscale(1) contrast(1.05);
  transition:opacity .4s, transform .6s; z-index:1; transform:scale(1.02);
}
.mono-card:hover .mono-bg{ opacity:.22; transform:scale(1.08); }
@media (max-width:980px){ .mono-grid{ --kol:2; } }
@media (max-width:600px){ .mono-grid{ --kol:1; } }

/* stat counters */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e4e2dc; border-top:1px solid #e4e2dc; border-bottom:1px solid #e4e2dc; }
.stat-cell{ background:var(--mono-5); padding:38px 30px; text-align:left; }
.stat-num{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:2.6rem; color:var(--mono-1); }
.stat-label{ font-size:.82rem; color:var(--mono-3); margin-top:6px; text-transform:uppercase; letter-spacing:.06em; font-family:'Barlow Condensed',sans-serif; font-weight:600; }
@media (max-width:900px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }

/* fade-up on scroll (generic, JS toggles .visible) */
.fade-up{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.visible{ opacity:1; transform:translateY(0); }

/* neutral section on white */
.home-section{ padding:100px 0; }
.home-section-head{ max-width:640px; margin-bottom:56px; }
.home-section-head .home-kicker{ opacity:1; animation:none; color:var(--mono-3); }
.home-section-head h2{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; margin-top:14px;
  font-size:clamp(2rem,3.6vw,3.2rem); color:var(--mono-1); line-height:1.04;
}
.home-section-head p{ margin-top:16px; color:var(--mono-3); font-size:1.02rem; max-width:56ch; }

/* process row */
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.process-step{ padding-top:22px; border-top:2px solid var(--mono-1); }
.process-step .pn{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:.85rem; color:var(--mono-3); letter-spacing:.1em; }
.process-step h3{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.25rem; text-transform:uppercase; margin-top:10px; color:var(--mono-1); }
.process-step p{ font-size:.9rem; color:var(--mono-3); margin-top:8px; }
@media (max-width:900px){ .process-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .process-row{ grid-template-columns:1fr; } }

/* neutral dark cta */
.home-cta{ background:var(--mono-1); color:#fff; padding:110px 0; text-align:center; position:relative; overflow:hidden; }
.home-cta h2{ font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(2.2rem,5vw,4rem); }
.home-cta p{ color:var(--mono-4); max-width:56ch; margin:18px auto 34px; font-size:1.05rem; font-weight:300; }

/* honeypot (hidden from humans, visible to bots) */
.hp-field{ position:absolute !important; left:-9999px !important; top:-9999px !important; opacity:0 !important; height:0 !important; width:0 !important; overflow:hidden !important; }

/* simple captcha row */
.captcha-row{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); padding:12px 14px; border-radius:2px; }
.captcha-row .captcha-q{ font-family:'Barlow Condensed',sans-serif; font-weight:700; color:#fff; font-size:1rem; white-space:nowrap; }
.captcha-row input{ width:70px !important; text-align:center; }
.form-note{ font-size:.76rem; color:#5f6470; margin-top:8px; }
.form-error{ background:rgba(200,50,50,0.14); border:1px solid #c44; color:#f3a; color:#ffb3b3; padding:11px 14px; font-size:.85rem; border-radius:2px; margin-bottom:14px; display:none; }
.form-success{ background:rgba(49,160,81,0.14); border:1px solid #31A051; color:#8ee8ab; padding:14px 16px; font-size:.9rem; border-radius:2px; margin-bottom:16px; display:none; font-weight:600; }

@media (max-width:900px){
  .mono-grid{ --kol:1; }
  .stat-row{ grid-template-columns:1fr; }
}

/* ===== HOMEPAGE LIGHT-SECTION ORNAMENTATION ===== */
.home-section, #kontakt {
  position: relative;
  background-image: radial-gradient(rgba(17,17,17,0.055) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  background-position: -6px -6px;
}
.home-section::before, #kontakt::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, transparent 55%, var(--mono-5) 100%);
}
.home-section > *, #kontakt > * { position: relative; z-index: 1; }
.home-section-head { position: relative; padding-left: 18px; }
.home-section-head::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--mono-1), transparent);
}

/* ===== CONTRAST FIXES: contact area ===== */
.contact-item-label { color: #4a4a4a; }
.contact-item-text { color: #222; }
.contact-form-box .form-note { color: #9a9a9a; }
.form-group select option, .form-group select optgroup { background: #151515; color: #fff; }
.form-group select { color: #fff; }
.captcha-row .captcha-q { color: #fff; }
.form-submit { color: #111 !important; }

/* =====================================================================
   DOBIERANIE NARZEDZIA — interaktywny konfigurator (strona glowna)
   ===================================================================== */
.cfg { background: var(--mono-1); color: #fff; position: relative; overflow: hidden; }
.cfg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 54px 54px;
}
.cfg > * { position: relative; z-index: 1; }
.cfg-head { max-width: 680px; margin-bottom: 40px; }
.cfg-head h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1; margin-top: 14px;
}
.cfg-head p { margin-top: 16px; color: var(--mono-4); font-size: 1.02rem; max-width: 56ch; }

.cfg-box { border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.02); }
.cfg-steps { display: flex; border-bottom: 1px solid rgba(255,255,255,0.13); }
.cfg-step {
  flex: 1; padding: 15px 20px; display: flex; align-items: center; gap: 11px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #5f6470;
  border-right: 1px solid rgba(255,255,255,0.13); transition: color .3s, background .3s;
}
.cfg-step:last-child { border-right: none; }
.cfg-step .n {
  width: 24px; height: 24px; flex: none; border: 1px solid currentColor; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.76rem;
}
.cfg-step.active { color: #fff; background: rgba(255,255,255,0.05); }
.cfg-step.done { color: var(--accent); }
.cfg-step.done .n { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }

.cfg-panel { padding: 34px 30px; }
.cfg-panel[hidden] { display: none; }
.cfg-q {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.28rem;
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px;
}
.cfg-hint { color: var(--mono-3); font-size: 0.9rem; margin-bottom: 22px; }
.cfg-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cfg-opt {
  text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14);
  color: #fff; padding: 17px 18px; cursor: pointer; font-family: inherit;
  transition: border-color .22s, background .22s, transform .22s;
}
.cfg-opt:hover, .cfg-opt:focus-visible {
  border-color: var(--accent); background: rgba(49,160,81,0.1); transform: translateY(-2px); outline: none;
}
.cfg-opt .t {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.cfg-opt .d { display: block; margin-top: 5px; font-size: 0.83rem; color: var(--mono-3); line-height: 1.45; }

.cfg-back {
  margin-top: 22px; background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mono-3); transition: color .2s;
}
.cfg-back:hover { color: #fff; }

/* wynik */
.cfg-res-top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding-bottom: 16px;
  margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.13);
}
.cfg-res-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.cfg-res-sum { font-size: 0.92rem; color: var(--mono-3); }
.cfg-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cfg-pick {
  display: block; text-decoration: none; color: #fff; padding: 20px 20px 18px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.14);
  border-top: 2px solid var(--pick, var(--accent)); transition: background .22s, transform .22s;
}
.cfg-pick:hover { background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.cfg-pick .brand {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--pick, var(--accent));
}
.cfg-pick .prod {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.42rem;
  text-transform: uppercase; margin-top: 5px; line-height: 1.1;
}
.cfg-pick .why { font-size: 0.86rem; color: var(--mono-4); margin-top: 9px; line-height: 1.5; }
.cfg-pick .more {
  display: inline-block; margin-top: 13px; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--pick, var(--accent));
}
.cfg-res-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.cfg-note { margin-top: 18px; font-size: 0.82rem; color: #5f6470; max-width: 60ch; line-height: 1.55; }
@media (max-width: 720px){
  .cfg-steps { flex-direction: column; }
  .cfg-step { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.13); }
  .cfg-panel { padding: 26px 20px; }
}

/* =====================================================================
   PASEK CTA, PASEK POSTEPU, POWROT DO GORY
   ===================================================================== */
.readbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: var(--brand); transition: width .1s linear; pointer-events: none;
}
.ctabar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: rgba(10,10,10,0.96); border-top: 2px solid var(--brand);
  backdrop-filter: blur(8px); transform: translateY(105%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1); padding: 12px 0;
}
.ctabar.show { transform: translateY(0); }
.ctabar-inner {
  max-width: 1600px; margin: 0 auto; padding: 0 60px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.ctabar-text { flex: 1 1 260px; min-width: 0; }
.ctabar-text strong {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.04rem; letter-spacing: 0.03em; text-transform: uppercase; color: #fff;
}
.ctabar-text span { font-size: 0.84rem; color: #9a9a9a; }
.ctabar-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ctabar-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 19px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.28); color: #fff; transition: background .2s, border-color .2s, color .2s;
}
.ctabar-btn:hover { border-color: var(--brand); color: var(--brand); }
.ctabar-btn.solid { background: var(--brand); border-color: var(--brand); color: #0a0a0a; }
.ctabar-btn.solid:hover { background: var(--brand2); border-color: var(--brand2); color: #0a0a0a; }
.ctabar-close {
  background: none; border: none; color: #5f6470; cursor: pointer; font-size: 1.5rem;
  line-height: 1; padding: 0 2px; transition: color .2s;
}
.ctabar-close:hover { color: #fff; }
@media (max-width: 1100px){ .ctabar-inner { padding: 0 32px; } }
/* skrocona etykieta przycisku — podmieniana na waskich ekranach */
.ctabar-btn .lbl-short { display: none; }
@media (max-width: 760px){
  /* na telefonie pasek musi byc niski: wiersz tekstu + wiersz przyciskow.
     Siatka zamiast flexa, zeby krzyzyk nie spadal do wlasnego wiersza. */
  .ctabar { padding: 9px 0; }
  .ctabar-inner {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 10px;
    padding: 0 14px; align-items: center;
  }
  .ctabar-text { grid-column: 1; grid-row: 1; min-width: 0; }
  .ctabar-text strong {
    font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ctabar-text span { display: none; }
  .ctabar-close { grid-column: 2; grid-row: 1; }
  .ctabar-btns { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; gap: 7px; }
  .ctabar-btn {
    flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
    padding: 11px 6px; font-size: 0.84rem; letter-spacing: 0.02em;
  }
  .ctabar-btn .lbl-full { display: none; }
  .ctabar-btn .lbl-short { display: inline; }
}
/* pasek CTA nie moze zaslaniac przycisku WhatsApp ani przycisku powrotu;
   --ctabar-h ustawia skrypt po zmierzeniu paska.
   Oba przyciski stoja w tym samym rogu, wiec strzalka powrotu siedzi nad
   WhatsAppem — wczesniej jeden zaslanial drugi. --wa-h to wysokosc pigulki
   WhatsAppa z odstepem. */
:root { --wa-h: 62px; }
body.ctabar-on .wa-float { bottom: calc(var(--ctabar-h, 72px) + 16px); }
body.ctabar-on .totop { bottom: calc(var(--ctabar-h, 72px) + 16px + var(--wa-h)); }
.wa-float, .totop { transition: bottom .35s cubic-bezier(.2,.8,.2,1); }

.totop {
  position: fixed; right: 28px; bottom: calc(28px + var(--wa-h)); z-index: 140; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(10,10,10,0.9); border: 1px solid rgba(255,255,255,0.22); color: #fff;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s, border-color .2s, background .2s;
}
.totop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 760px){ .totop { width: 42px; height: 42px; right: 31px; } }

/* licznik */
.stat-num .cnt { font-variant-numeric: tabular-nums; }

/* =====================================================================
   PLACEHOLDER DLA ZDJEC, KTORYCH JESZCZE NIE MA
   ===================================================================== */
.img-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 16px;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.028) 0 10px, transparent 10px 20px),
    #17171a;
  border: 1px dashed rgba(255,255,255,0.15); color: #6f6f75;
}
.img-ph svg { opacity: .5; }
.img-ph span {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.img-ph-host { position: relative; min-height: 150px; }

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

/* =====================================================================
   STRONA GLOWNA — zdjecie w hero
   ===================================================================== */
.home-hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.home-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  filter: grayscale(0.55) contrast(1.06) brightness(0.62);
  transform: scale(1.04); animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.home-hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--mono-1) 6%, rgba(10,10,10,0.82) 44%, rgba(10,10,10,0.45) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.85) 0%, transparent 28%, rgba(10,10,10,0.9) 100%);
}
.home-hero .noise, .home-hero .glow { z-index: 1; }
.home-hero-inner { z-index: 2; }
@media (max-width: 760px){
  .home-hero-photo::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.72) 40%, rgba(10,10,10,0.94) 100%);
  }
}

/* przewin dalej — delikatna zacheta na dole hero */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45);
  text-decoration: none; transition: color .25s;
}
.scroll-cue:hover { color: #fff; }
.scroll-cue .rail {
  width: 1px; height: 42px; background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue .rail::after {
  content: ''; position: absolute; left: 0; width: 1px; height: 14px; background: #fff;
  animation: cueRun 2.1s ease-in-out infinite;
}
@keyframes cueRun { 0% { top: -14px; opacity: 0; } 30% { opacity: 1; } 100% { top: 42px; opacity: 0; } }
@media (max-width: 760px){ .scroll-cue { display: none; } }

/* =====================================================================
   REALIZACJE — mozaika zdjec
   ===================================================================== */
.gal { background: var(--mono-1); color: #fff; }
.gal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 10px;
}
.gal-item {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  background: #151517; border: 1px solid rgba(255,255,255,0.08);
}
.gal-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.35) brightness(0.86); transform: scale(1.01);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s;
}
.gal-item:hover img { transform: scale(1.09); filter: grayscale(0) brightness(1); }
.gal-item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(8,8,9,0.9) 100%);
  opacity: .9; transition: opacity .4s;
}
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px;
  transform: translateY(6px); opacity: 0; transition: transform .4s, opacity .4s;
}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { transform: translateY(0); opacity: 1; }
.gal-cap .k {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent2);
}
.gal-cap .t {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.16rem;
  text-transform: uppercase; line-height: 1.12; margin-top: 3px; color: #fff;
}
/* zawsze widoczna etykieta na dotyku — hover tam nie istnieje */
@media (hover: none){ .gal-cap { opacity: 1; transform: none; } }

.gal-item.w2 { grid-column: span 2; }
.gal-item.h2 { grid-row: span 2; }
@media (max-width: 1100px){
  /* przy dwoch kolumnach wysokie kafelki splaszczamy, zeby siatka nie zostawiala dziur */
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .gal-item.w2 { grid-column: span 2; }
  .gal-item.h2 { grid-row: auto; }
}
@media (max-width: 600px){
  .gal-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gal-item.w2, .gal-item.h2 { grid-column: auto; grid-row: auto; }
}

/* podglad zdjecia po klinieciu */
.lb {
  position: fixed; inset: 0; z-index: 300; background: rgba(6,6,7,0.94);
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.lb.open { opacity: 1; visibility: visible; }
/* na czas podgladu chowamy elementy plywajace, zeby nie zaslanialy zdjecia */
body.lb-open .wa-float, body.lb-open .ctabar, body.lb-open .totop, body.lb-open .readbar { display: none; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-cap {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #cfcfcf;
}
.lb-x, .lb-nav {
  position: absolute; background: none; border: 1px solid rgba(255,255,255,0.25);
  color: #fff; cursor: pointer; width: 46px; height: 46px; display: flex;
  align-items: center; justify-content: center; font-size: 1.3rem; transition: border-color .2s, color .2s;
}
.lb-x:hover, .lb-nav:hover { border-color: var(--accent); color: var(--accent); }
.lb-x { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px){
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-x { top: 12px; right: 12px; }
}

/* karty marek — zdjecia maja byc widoczne, nie ledwo majaczyc */
.mono-bg { opacity: .17; }
.mono-card:hover .mono-bg { opacity: .3; }

/* zgoda na kontakt w formularzu */
.form-consent { margin-top: 4px; }
/* to jest <label> wewnatrz .form-group, wiec trzeba zdjac styl etykiet pol */
.form-consent label.consent-row {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-family: 'Barlow', sans-serif; margin-bottom: 0; color: inherit;
}
.consent-row input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); cursor: pointer;
}
.consent-row span { font-size: 0.85rem; color: #a8a8a8; line-height: 1.5; }
.form-submit[disabled] { opacity: .6; cursor: progress; }
.form-error a, .form-success a { color: inherit; }

/* nagranie z hali */
.film-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.film-box video {
  width: auto; max-width: 100%; max-height: 72vh; height: auto; display: block;
  background: #0d0d0e; border: 1px solid rgba(255,255,255,0.12);
}
.film-note { font-size: 0.84rem; color: #5f6470; text-align: center; }

/* karta do pobrania (PDF) */
.plik-karta {
  display: inline-flex; align-items: center; gap: 16px; text-decoration: none;
  padding: 18px 24px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.14); border-left: 3px solid var(--brand);
  transition: background .22s, transform .22s;
}
.plik-karta:hover { background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.plik-karta .ikona { flex: none; color: var(--brand); }
.plik-karta .tytul {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.16rem;
  text-transform: uppercase; color: #fff; line-height: 1.15;
}
.plik-karta .opis { font-size: 0.85rem; color: #9a9a9a; margin-top: 3px; }

/* =====================================================================
   SIATKI POMOCNICZE
   Wczesniej liczba kolumn byla wpisywana w atrybut style, ktory bije
   reguly z arkusza — takie siatki zostawaly trzykolumnowe takze na
   telefonie. Te klasy zmieniaja liczbe kolumn razem z szerokoscia ekranu.
   ===================================================================== */
.siatka-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px){ .siatka-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .siatka-3 { grid-template-columns: 1fr; } }

.cnc-grid.kolumny-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .cnc-grid.kolumny-2 { grid-template-columns: 1fr; } }

.gal-grid.galeria-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px){ .gal-grid.galeria-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .gal-grid.galeria-3 { grid-template-columns: 1fr; } }


/* =====================================================================
   KATALOG PRODUKTOW — karty
   Zdjecie, nazwa, podstawowe dane techniczne i przycisk zakupu.
   ===================================================================== */
.podgrupa { margin-top: 34px; }
.podgrupa-tytul {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.12rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--mono-1, #111);
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 2px solid var(--brand);
}
.podgrupa-tytul span { font-size: 0.72rem; letter-spacing: 0.12em; color: #8d8d8d; font-weight: 700; }

/* podgrupy katalogu sa zwijane — w calosci rozwiniety katalog ABR dawal
   strone dluga na trzydziesci kilka ekranow i nikt nie doczytywal do konca */
details.podgrupa > summary { cursor: pointer; list-style: none; }
details.podgrupa > summary::-webkit-details-marker { display: none; }
details.podgrupa > summary::after {
  content: ''; margin-left: auto; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
details.podgrupa[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
details.podgrupa > summary:hover { color: var(--brand); }
details.podgrupa > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ details.podgrupa > summary::after { transition: none; } }

.pk-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }

.pk {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e2de;
  border-radius: 3px; overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.pk:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.09); transform: translateY(-2px); border-color: #d2d2cc; }

.pk-foto {
  position: relative; height: 0; padding-bottom: 76%; background: #f6f5f2;
  border-bottom: 1px solid #eeeeea; overflow: hidden;
}
.pk-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.pk-brak {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c9c9c2;
}

.pk-nazwa {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.06rem;
  text-transform: uppercase; line-height: 1.16; color: var(--mono-1, #111);
  padding: 14px 16px 0;
}
.pk-opis { padding: 6px 16px 0; font-size: 0.82rem; color: #60605a; line-height: 1.5; }

.pk-meta { padding: 12px 16px 0; margin: 0; display: grid; gap: 6px; }
/* etykieta nad wartoscia — w waskiej karcie uklad dwukolumnowy sie zlewal */
.pk-meta-w { display: block; }
.pk-meta dt {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: #a3a39a; margin-bottom: 1px;
}
.pk-meta dd {
  margin: 0; font-size: 0.78rem; color: #55554f; line-height: 1.45;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.pk-ref {
  padding: 10px 16px 0; font-size: 0.72rem; color: #a3a39a; font-variant-numeric: tabular-nums;
}

/* przycisk zakupu — wspolny dla katalogu ABR i kart narzedzi na pozostalych
   stronach, zeby wszedzie wygladal i zachowywal sie tak samo */
.btn-sklep {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  row-gap: 2px; text-decoration: none; text-align: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 14px; border-radius: 2px;
  background: var(--brand); color: #fff; transition: background .2s;
}
.btn-sklep:hover { background: var(--brand2); }
/* sklep dopiero powstaje — przycisk jest widoczny, ale nie udaje dzialajacego */
.btn-sklep.wkrotce { background: #edece8; color: #5f6470; cursor: default; border: 1px dashed #d4d3cd; }
.btn-sklep.wkrotce:hover { background: #edece8; }
.btn-sklep em {
  font-style: normal; font-size: 0.64rem; letter-spacing: 0.1em; color: #a9a9a0;
  border-left: 1px solid #d4d3cd; padding-left: 8px; white-space: nowrap;
}
/* na ciemnym tle wariant „wkrotce" musi byc czytelny */
.dark .btn-sklep.wkrotce, section.dark .btn-sklep.wkrotce, .blade-card .btn-sklep.wkrotce {
  background: rgba(255,255,255,0.05); color: #c2c2ba; border-color: rgba(255,255,255,0.22);
}
.dark .btn-sklep.wkrotce:hover, section.dark .btn-sklep.wkrotce:hover,
.blade-card .btn-sklep.wkrotce:hover { background: rgba(255,255,255,0.05); }
.dark .btn-sklep em, section.dark .btn-sklep em, .blade-card .btn-sklep em {
  color: #a5a59c; border-left-color: rgba(255,255,255,0.22);
}

/* w karcie katalogu przycisk dociagamy do dolu */
.pk-kup { margin: 14px 16px 16px; margin-top: auto; }

@media (max-width: 520px){
  /* w waskiej karcie dopisek nie miesci sie obok napisu — idzie do drugiego wiersza */
  .btn-sklep { flex-direction: column; gap: 3px; padding: 10px 8px; }
  .btn-sklep em { border-left: none; padding-left: 0; font-size: 0.6rem; }
}

/* para akcji pod karta narzedzia: zapytanie + sklep */
.karta-akcje { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.karta-akcje .blade-link { margin: 0; }

.katalog-nota { margin-top: 36px; font-size: 0.84rem; color: #60605a; line-height: 1.6; max-width: 80ch; }

@media (max-width: 520px){
  .pk-siatka { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
  .pk-nazwa { font-size: 0.96rem; padding: 12px 12px 0; }
  .pk-opis, .pk-meta, .pk-ref { padding-left: 12px; padding-right: 12px; }
  .pk-kup { margin: 12px; }

}

/* =====================================================================
   TECHNOLOGIE ABR
   ===================================================================== */
.tech-grupa { margin-top: 30px; }
.tech-grupa:first-child { margin-top: 6px; }
.tech-grupa-tytul {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.14);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.02rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
.tech-grupa-tytul span {
  font-size: 0.7rem; letter-spacing: 0.12em; color: var(--brand); font-weight: 700;
}
.tech-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.tech-karta {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
  border-left: 2px solid var(--brand); border-radius: 2px; padding: 15px 17px;
  transition: background .2s, transform .2s;
}
.tech-karta:hover { background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.tech-nazwa {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.04rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: #fff; line-height: 1.2;
}
.tech-opis { margin-top: 6px; font-size: 0.82rem; color: #9d9d95; line-height: 1.55; }
@media (max-width: 520px){
  .tech-siatka { grid-template-columns: 1fr; }
}

/* =====================================================================
   KATALOG MASZYN — podzial wedlug zastosowania
   ===================================================================== */
.mk-kategoria { margin-top: 44px; scroll-margin-top: 90px; }
.mk-kategoria:first-child { margin-top: 10px; }
.mk-naglowek { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--brand); }
.mk-tytul {
  display: flex; align-items: baseline; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.45rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--mono-1, #111);
}
.mk-tytul span { font-size: 0.72rem; letter-spacing: 0.12em; color: #9a9a92; font-weight: 700; }
.mk-podtytul { margin-top: 6px; font-size: 0.9rem; color: #5f6470; max-width: 78ch; line-height: 1.55; }

.mk-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.mk {
  display: flex; flex-direction: column; text-decoration: none; background: #fff;
  border: 1px solid #e2e2de; border-top: 3px solid var(--mk, var(--brand)); border-radius: 3px;
  overflow: hidden; transition: box-shadow .2s, transform .2s;
}
.mk:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.1); transform: translateY(-2px); }
.mk-foto { position: relative; height: 0; padding-bottom: 58%; background: #141416; overflow: hidden; }
.mk-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-brak { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5f6470; }
.mk-tresc { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.mk-marka {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mk, var(--brand));
}
.mk-nazwa {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.28rem;
  text-transform: uppercase; line-height: 1.16; margin-top: 3px; color: var(--mono-1, #111);
}
.mk-opis { margin-top: 8px; font-size: 0.85rem; color: #5f6470; line-height: 1.55; }
.mk-wiecej {
  margin-top: auto; padding-top: 14px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk, var(--brand));
}
.mk-pusto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; background: #f3f2ef; border: 1px dashed #d8d7d1; border-radius: 3px;
}
.mk-pusto p { font-size: 0.88rem; color: #5f6470; max-width: 62ch; line-height: 1.55; margin: 0; }
@media (max-width: 520px){
  .mk-siatka { grid-template-columns: 1fr; }
  .mk-pusto { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   WYROWNANIE AKCJI W KARTACH
   Karty w siatce maja rowna wysokosc, ale przyciski wedrowaly za koncem
   tekstu. Rozciagamy tresc i dociagamy akcje do dolu, zeby w calym rzedzie
   lezaly w jednej linii.
   ===================================================================== */
.blade-card { display: flex; flex-direction: column; }
.blade-card-body { display: flex; flex-direction: column; flex: 1; }
.cnc-card { display: flex; flex-direction: column; }
.karta-akcje { margin-top: auto; padding-top: 16px; }
/* lista cech nie moze rozpychac sie kosztem dosuniecia akcji */
.blade-card-body .blade-features,
.cnc-card .cnc-features { margin-bottom: 0; }

/* =====================================================================
   HERO PODSTRON — ten sam jezyk co strona glowna
   (pelnowymiarowe tlo ze zdjeciem + animowany tekst)
   ===================================================================== */
.pod-hero {
  position: relative; background: var(--mono-1, #0a0a0a); color: #fff; padding: 0;
  overflow: hidden; min-height: 66vh; display: flex; align-items: center;
  border-top: 3px solid var(--brand);
}
.pod-hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pod-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  filter: grayscale(0.5) contrast(1.08) brightness(0.68);
  transform: scale(1.04); animation: heroDrift 26s ease-in-out infinite alternate;
}
.pod-hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #0a0a0a 2%, rgba(10,10,10,0.8) 40%, rgba(10,10,10,0.3) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.82) 0%, transparent 30%, rgba(10,10,10,0.88) 100%);
}
.pod-hero .noise, .pod-hero .glow { z-index: 1; }
.pod-hero .noise {
  position: absolute; inset: 0; opacity: .42; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px; animation: gridshift 26s linear infinite;
}
.pod-hero .glow {
  position: absolute; width: 54vw; height: 54vw; max-width: 780px; max-height: 780px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 68%);
  top: -22%; right: -12%; filter: blur(10px); animation: pulseglow 8s ease-in-out infinite;
}
.pod-hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1600px; margin: 0 auto;
  padding: 74px 60px; box-sizing: border-box;
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 60px; align-items: center;
}
.pod-hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand);
  opacity: 0; animation: riseIn .8s ease forwards .1s;
}
.pod-hero-kicker::before { content: ''; width: 34px; height: 1px; background: var(--brand); }
.pod-hero h1 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 4.6vw, 4.2rem); line-height: 1.14; margin-top: 20px; letter-spacing: -.01em;
}
.pod-hero h1 .line { display: block; overflow: hidden;
  /* zapas na ogonki polskich liter — patrz .home-hero h1 .line */
  padding-bottom: .18em; margin-bottom: -.18em; }
.pod-hero h1 .line > span { display: inline-block; opacity: 0; transform: translateY(100%); animation: riseIn .9s cubic-bezier(.2,.8,.2,1) forwards; }
.pod-hero h1 em { font-style: normal; color: var(--brand); }
.pod-hero p.lede {
  margin-top: 24px; max-width: 58ch; font-size: 1.06rem; color: #c9c9c6; font-weight: 300;
  opacity: 0; animation: riseIn .8s ease forwards .5s;
}
.pod-hero-btns {
  margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; animation: riseIn .8s ease forwards .68s;
}
.pod-hero-side { opacity: 0; animation: riseIn .9s ease forwards .8s; }
.pod-hero-side .hero-badge-dist { background: rgba(12,12,12,0.62); backdrop-filter: blur(4px); }
.pod-hero-side .hero-photo { box-shadow: 0 24px 60px rgba(0,0,0,0.45); }

@media (max-width: 1100px){
  .pod-hero { min-height: 72vh; }
  /* odstep daje sama odznaka — pusta kolumna (strony maszyn) nie zostawia
     wtedy dziury pod przyciskami */
  .pod-hero-inner { grid-template-columns: 1fr; gap: 0; padding: 56px 32px; }
  /* zdjecie maszyny obok tekstu znika — to samo ujecie jest juz w tle;
     logo producenta zostaje, bo na stronie marki to wazna informacja */
  .pod-hero-side .hero-photo { display: none; }
  .pod-hero-side .hero-badge-dist {
    display: flex; align-items: center; gap: 14px; text-align: left;
    padding: 12px 16px; max-width: 420px; margin-top: 26px;
  }
  .pod-hero-side .hero-badge-dist img {
    height: 34px !important; width: auto !important; max-width: 160px;
    margin: 0 !important; object-fit: contain;
  }
  /* WODIAM ma w odznace dwa logotypy — na telefonie zostaje sam znak
     z nazwa (ostatni). !important, bo wysokosci sa wpisane w atrybucie
     style, a ten wygrywa ze zwyklą regula arkusza */
  .pod-hero-side .hero-badge-dist img:not(:last-of-type) { display: none !important; }
  .pod-hero-side .hero-badge-dist .dist-label {
    margin-bottom: 0; font-size: 0.66rem; line-height: 1.3; flex: 0 0 76px;
  }
  .pod-hero-side .hero-badge-dist .dist-sub { display: none; }
  /* gdyby logo producenta sie nie wczytalo, ramka zastepcza nie moze
     rozciagac odznaki na pol ekranu */
  .pod-hero-side .img-ph-host { min-height: 0; }
  .pod-hero-side .img-ph { position: static; min-height: 0; height: 34px; padding: 0 10px; }
  .pod-hero-side .img-ph svg { display: none; }
  .pod-hero-photo::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.7) 42%, rgba(10,10,10,0.93) 100%);
  }
}
@media (max-width: 640px){
  .pod-hero { min-height: 78vh; }
  .pod-hero-inner { padding: 40px 18px; }
  .pod-hero-kicker { font-size: .72rem; letter-spacing: .14em; }
  .pod-hero-kicker::before { width: 22px; flex: 0 0 22px; }
  .pod-hero h1 { margin-top: 16px; }
  .pod-hero p.lede { font-size: 1rem; margin-top: 20px; }
  .pod-hero-btns { margin-top: 26px; gap: 10px; }
  .pod-hero-btns > a { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){
  .pod-hero-photo img, .pod-hero .noise, .pod-hero .glow { animation: none; }
  .pod-hero-kicker, .pod-hero h1 .line > span, .pod-hero p.lede,
  .pod-hero-btns, .pod-hero-side { opacity: 1; transform: none; animation: none; }
}

/* =====================================================================
   MEGA MENU — dwie drogi: wedlug zastosowania i wedlug marki
   ===================================================================== */
.grupa-anchor { scroll-margin-top: 90px; }
.nav-mega { padding: 0; min-width: 0; }
@media (min-width: 981px){
  .nav-mega {
    left: auto; right: -20px; width: 790px; display: grid; grid-template-columns: 1fr 1.3fr;
    gap: 0; padding: 0;
  }
  .nav-mega .nav-kol + .nav-kol { border-left: 1px solid rgba(255,255,255,0.08); }
}
.nav-mega .nav-kol { padding: 14px 0 12px; display: flex; flex-direction: column; }
.nav-mega .nav-kol-tytul {
  display: block; padding: 0 20px 8px; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: #5f6470;
}
.nav-mega ul { list-style: none; margin: 0; padding: 0; }
.nav-mega li { margin-left: 0 !important; }
.nav-mega a small {
  display: block; font-size: .76rem; color: #7c7c7c; letter-spacing: .01em;
  text-transform: none; margin-top: 2px;
}
.nav-mega a:hover small { color: #9a9a9a; }
.nav-mega .nav-kol-stopka {
  margin-top: auto; padding: 10px 20px 0; border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-mega .nav-kol-stopka a {
  padding: 8px 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.nav-mega .nav-kol-stopka a:hover { background: none; text-decoration: underline; }
@media (max-width: 980px){
  .nav-mega { display: none; }
  .nav-links li.has-sub.open > .nav-mega { display: block; }
  .nav-mega .nav-kol { padding: 6px 0 4px; }
  .nav-mega .nav-kol + .nav-kol { border-top: 1px solid rgba(255,255,255,0.08); }
  .nav-mega .nav-kol-tytul { padding: 10px 14px 4px; }
  .nav-mega a small { display: none; }
}

/* logo w nawigacji prowadzi na strone glowna */
.nav-logo-link { display: inline-flex; align-items: center; transition: opacity .2s; }
.nav-logo-link:hover { opacity: .75; }

/* zastepnik obrazka w nawigacji nie moze rozpychac paska */
.nav-logo .img-ph, .nav-logo-link .img-ph {
  position: static; min-height: 0; height: 30px; width: auto; padding: 0 10px;
  border: 1px dashed rgba(255,255,255,0.25); background: rgba(255,255,255,0.04);
}
.nav-logo .img-ph svg { display: none; }
.nav-logo .img-ph span { font-size: .62rem; white-space: nowrap; }

/* pasek marki w nawigacji — logo StoneZone nigdy sie nie sciska */
.nav-logo { min-width: 0; }
.nav-logo-link { flex: 0 0 auto; }
.nav-logo-link img { width: auto; }
@media (max-width: 640px){
  .nav-logo > .divider,
  .nav-logo > .brand-sub { display: none; }
  .nav-logo { gap: 10px; }
}

/* logo marek w nawigacji — jeden, spojny rozmiar wzgledem logo StoneZone */
/* Znak marki obok naszego logo. Kazdy producent ma inaczej zbudowany
   logotyp — jeden to sam napis, inny napis z podpisem, jeszcze inny napis
   w ramce. Gdyby wszystkie dostaly te sama wysokosc pliku, w pasku
   wygladalyby na rozne. Dlatego wysokosc ustawiamy tak, zeby zrownac
   wysokosc samych liter, a nie ramek i podpisow wokol nich. */
.nav-logo .nav-marka {
  height: 26px; width: auto; max-width: 150px; object-fit: contain;
  display: block; flex: none;
  /* znak marki nigdy nie moze gorowac nad naszym logo (34 px) */
  max-height: 30px;
}
/* Wysokosci nie sa wziete z oka. Dla kazdego pliku zmierzylismy, jaka czesc
   jego wysokosci zajmuje sam napis (reszta to znak graficzny, podpis, ramka),
   i dobralismy wysokosc tak, zeby napisy mialy okolo 17 px — czyli dwie
   trzecie naszego logo obok. Blok nie przekracza 30 px, zeby logotyp ze
   znakiem (WODIAM) nie urosl ponad pasek.
   ABR i Lantania maja tu wersje bez podpisu (-znak): przy 20 px podpisy
   „SURFACE TECHNOLOGIES” i „PROTETTIVI PER SUPERFICI” mialy 2 px i robily
   sie plama. Pelne lockupy zostaja tam, gdzie jest na nie miejsce —
   w odznace dystrybutora i w kafelkach mega-menu. */
.nav-logo .nav-marka[src*="logo-evds"]     { height: 29px; }
.nav-logo .nav-marka[src*="logo-wodiam"]   { height: 30px; }
.nav-logo .nav-marka[src*="logo-abr"]      { height: 20px; }
.nav-logo .nav-marka[src*="logo-lantania"] { height: 21px; }
.nav-logo .nav-marka[src*="logo-aardwolf"] { height: 22px; }
.nav-logo .nav-marka[src*="logo-poseidon"]  { height: 22px; }
.nav-logo .nav-marka[src*="logo-vitium"]    { height: 36px; }
@media (max-width: 640px){
  .nav-logo-link img { height: 28px; }
  .nav-logo .nav-marka { height: 20px; max-width: 108px; }
  .nav-logo .nav-marka[src*="logo-evds"]     { height: 24px; }
  .nav-logo .nav-marka[src*="logo-wodiam"]   { height: 25px; }
  .nav-logo .nav-marka[src*="logo-abr"]      { height: 16px; }
  .nav-logo .nav-marka[src*="logo-lantania"] { height: 17px; }
  .nav-logo .nav-marka[src*="logo-aardwolf"] { height: 18px; }
  .nav-logo .nav-marka[src*="logo-poseidon"]  { height: 18px; }
  .nav-logo .nav-marka[src*="logo-vitium"]    { height: 30px; }
  .nav-logo .img-ph { height: 22px; }
}
/* waskie telefony: logo StoneZone + logo marki + jezyk + menu musza sie zmiescic */
@media (max-width: 380px){
  .nav-logo { gap: 8px; }
  .nav-logo-link img { height: 24px; }
  .nav-logo .nav-marka { max-width: 84px; object-fit: contain; object-position: left center; }
}
@media (max-width: 340px){
  .nav-logo-link img { height: 21px; }
  .nav-logo .nav-marka { max-width: 70px; }
}

/* =====================================================================
   WIZYTOWKA NFC (wizytowka.html)
   Strona poza nawigacja: otwierana z brelokow NFC, bez menu i stopki
   serwisu. Wszystko ma byc klikalne kciukiem, bez zoomowania.
   ===================================================================== */
.vc-body { background: #0a0a0a; color: #e8e8e6; }
.vc-sekcja { max-width: 640px; margin: 0 auto; padding: 34px 18px; }
.vc-sekcja + .vc-sekcja { border-top: 1px solid rgba(255,255,255,0.08); }

/* --- gora --- */
.vc-top { position: relative; overflow: hidden; background: #0a0a0a; text-align: center; }
.vc-photo { position: absolute; inset: 0; z-index: 0; }
.vc-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.6) brightness(0.5);
  transform: scale(1.05); animation: heroDrift 30s ease-in-out infinite alternate;
}
.vc-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.6) 45%, #0a0a0a 100%);
}
.vc-top-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 46px 18px 34px; }
.vc-logo { height: 46px; width: auto; margin: 0 auto 18px; }
.vc-tagline {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.12; color: #fff; letter-spacing: -.005em;
}
.vc-marki {
  margin-top: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: #9a9a97;
}

/* --- cztery przyciski kontaktu --- */
.vc-akcje-sekcja { padding-top: 26px; }
.vc-akcje { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vc-akcja {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 92px; padding: 14px 10px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
  transition: background .2s, border-color .2s, transform .15s;
}
.vc-akcja:active { transform: scale(.97); }
.vc-akcja svg { width: 24px; height: 24px; }
.vc-akcja span {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .92rem;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
}
.vc-akcja:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
.vc-akcja.wa { background: rgba(37,211,102,0.12); border-color: rgba(37,211,102,0.4); color: #4ade80; }
.vc-akcja.wa:hover { background: rgba(37,211,102,0.2); }
.vc-akcja.zapisz { background: #fff; border-color: #fff; color: #0a0a0a; }
.vc-akcja.zapisz:hover { background: #e8e8e6; }
.vc-dane { margin-top: 16px; text-align: center; font-size: .95rem; color: #9a9a97; }
.vc-dane a { color: #e8e8e6; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); }
.vc-dane span { margin: 0 8px; color: #555; }

/* --- naglowki sekcji --- */
.vc-tytul {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 1.35rem; color: #fff; margin-bottom: 16px; line-height: 1.2;
}
.vc-podtytul {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: #8a8a87; margin: 22px 0 10px;
}
.vc-podtytul:first-of-type { margin-top: 4px; }

/* --- trzy duze kafelki --- */
.vc-kafel {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  text-decoration: none; color: inherit;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--brand); border-radius: 3px;
  transition: background .2s, transform .15s;
}
.vc-kafel + .vc-kafel { margin-top: 10px; }
.vc-kafel:active { transform: scale(.99); }
.vc-kafel:hover { background: rgba(255,255,255,0.08); }
.vc-kafel-nr {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.1rem;
  color: var(--brand); flex: none;
}
.vc-kafel-tresc { flex: 1; min-width: 0; }
.vc-kafel-tresc strong {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.08rem; text-transform: uppercase; color: #fff; letter-spacing: .01em;
}
.vc-kafel-tresc small { display: block; margin-top: 4px; font-size: .86rem; color: #9a9a97; line-height: 1.45; }
.vc-kafel-strzalka { flex: none; color: #5f6470; font-size: 1.1rem; }

/* --- pigulki katalogu --- */
.vc-pigulki { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px){ .vc-pigulki { grid-template-columns: 1fr 1fr; } }
.vc-pigulki a {
  display: block; padding: 12px 14px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .02em; transition: background .2s, border-color .2s;
}
.vc-pigulki a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
.vc-pigulki a small {
  display: block; margin-top: 2px; font-family: 'Barlow', sans-serif; font-weight: 400;
  font-size: .8rem; letter-spacing: 0; text-transform: none; color: #8a8a87;
}
.vc-sklep-info {
  margin-top: 18px; padding: 13px 15px; font-size: .86rem; color: #9a9a97; line-height: 1.5;
  background: rgba(255,255,255,0.03); border-left: 2px solid rgba(255,255,255,0.2);
}

/* --- formularz --- */
.vc-form-lede { margin: -6px 0 18px; font-size: .92rem; color: #9a9a97; }
.vc-form-sekcja .form-submit { background: #fff; color: #0a0a0a !important; }
.vc-form-sekcja .form-submit:hover { background: #e8e8e6; }

/* --- stopka --- */
.vc-stopka { max-width: 640px; margin: 0 auto; padding: 28px 18px 40px; text-align: center; border-top: 1px solid rgba(255,255,255,0.08); }
.vc-social { display: flex; justify-content: center; gap: 12px; }
.vc-social a {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; color: #c9c9c6; transition: color .2s, border-color .2s;
}
.vc-social a svg { width: 19px; height: 19px; }
.vc-social a:hover { color: #fff; border-color: #fff; }
.vc-www {
  display: inline-block; margin-top: 18px; color: #fff; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem;
  letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--brand); padding-bottom: 3px;
}
.vc-stopka-note { margin-top: 20px; font-size: .74rem; color: #5f6470; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce){ .vc-photo img { animation: none; } }

/* =====================================================================
   WYSZUKIWARKA W KATALOGU
   Pokazuje sie dopiero, gdy zadziala JavaScript (atrybut hidden zdejmuje
   skrypt) — bez niego katalog wyglada tak jak wczesniej.
   ===================================================================== */
.szukaj { margin: 30px 0 8px; }
.szukaj-rzad {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid #dcdbd5; border-radius: 3px; padding: 4px 6px 4px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.szukaj-rzad:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.szukaj-ikona { width: 19px; height: 19px; flex: none; color: #5f6470; }
.szukaj-pole {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-family: 'Barlow', sans-serif; font-size: 1rem; color: #17171a; padding: 12px 0;
}
.szukaj-pole::placeholder { color: #9d9d95; }
.szukaj-pole::-webkit-search-cancel-button { display: none; }
.szukaj-wyczysc {
  flex: none; border: none; background: #17171a; color: #fff; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; border-radius: 2px;
}
.szukaj-wyczysc:hover { background: var(--brand); }
.szukaj-chipy { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.szukaj-chip {
  border: 1px solid #d8d7d1; background: #fff; color: #55554f; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .84rem;
  letter-spacing: .07em; text-transform: uppercase; padding: 7px 13px; border-radius: 99px;
  transition: border-color .2s, color .2s, background .2s;
}
.szukaj-chip:hover { border-color: var(--brand); color: var(--brand); }
.szukaj-chip.wybrany { background: var(--brand); border-color: var(--brand); color: #fff; }
.szukaj-licznik {
  margin-top: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #5f6470;
}
.szukaj-pusto {
  margin-top: 18px; padding: 24px; background: #fff; border: 1px dashed #d8d7d1; border-radius: 3px;
}
.szukaj-pusto p { color: #55554f; font-size: .95rem; margin-bottom: 8px; }
.szukaj-pusto strong { color: #17171a; }
.szukaj-pusto .btn-primary { margin-top: 12px; display: inline-block; }
/* w trakcie szukania nagłówki kategorii nie trzymają dużych odstępów */
.szukaj.szuka ~ .grupa-anchor { margin-top: 34px !important; }

/* =====================================================================
   ZAPIS NA POWIADOMIENIE O STARCIE SKLEPU (js/sklep.js)
   ===================================================================== */
.btn-sklep.wkrotce { cursor: pointer; font-family: 'Barlow Condensed', sans-serif; }
.btn-sklep.wkrotce:hover { background: #e4e3de; border-color: #b9b8b1; color: #55554f; }
.dark .btn-sklep.wkrotce:hover, section.dark .btn-sklep.wkrotce:hover,
.blade-card .btn-sklep.wkrotce:hover { background: rgba(255,255,255,0.1); color: #d8d8d2; }
.btn-sklep.wkrotce.zapisany { border-style: solid; border-color: #31A051; color: #2f7a48; }
.dark .btn-sklep.wkrotce.zapisany, .blade-card .btn-sklep.wkrotce.zapisany { color: #7fd6a0; border-color: #31A051; }

body.sklep-otwarte { overflow: hidden; }
.sklep-okno { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 18px; }
.sklep-okno[hidden] { display: none; }
.sklep-tlo { position: absolute; inset: 0; background: rgba(8,8,8,0.72); backdrop-filter: blur(2px); }
.sklep-panel {
  position: relative; width: 100%; max-width: 430px; background: #141416; color: #e8e8e6;
  border: 1px solid rgba(255,255,255,0.12); border-top: 3px solid var(--brand);
  border-radius: 3px; padding: 28px 26px 26px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  max-height: calc(100vh - 36px); overflow-y: auto;
}
.sklep-x {
  position: absolute; top: 8px; right: 10px; background: none; border: none; cursor: pointer;
  color: #8a8a87; font-size: 1.7rem; line-height: 1; padding: 4px 8px;
}
.sklep-x:hover { color: #fff; }
.sklep-label {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand);
}
.sklep-panel h3 {
  margin-top: 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; font-size: 1.35rem; color: #fff; line-height: 1.16;
}
.sklep-produkt {
  margin-top: 12px; padding: 10px 13px; background: rgba(255,255,255,0.05);
  border-left: 2px solid var(--brand); font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 1.02rem; color: #fff; text-transform: uppercase;
}
.sklep-opis { margin-top: 14px; font-size: .88rem; color: #9a9a97; line-height: 1.55; }
.sklep-opis a { color: #d8d8d2; text-decoration: underline; }
.sklep-etykieta {
  display: block; margin-top: 18px; margin-bottom: 6px; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #8a8a87;
}
.sklep-mail {
  width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 12px 14px;
  font-family: 'Barlow', sans-serif; font-size: .95rem; border-radius: 2px; outline: none;
}
.sklep-mail:focus { border-color: var(--brand); }
.sklep-zgoda { display: flex; align-items: flex-start; gap: 10px; margin-top: 13px; cursor: pointer; }
.sklep-zgoda input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); }
.sklep-zgoda span { font-size: .84rem; color: #9a9a97; line-height: 1.5; }
.sklep-blad {
  margin-top: 12px; padding: 10px 13px; background: rgba(200,50,50,0.14); border: 1px solid #c44;
  color: #ffb3b3; font-size: .85rem; border-radius: 2px;
}
.sklep-blad a { color: inherit; }
.sklep-wyslij {
  width: 100%; margin-top: 16px; background: #fff; color: #0a0a0a; border: none; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 13px; border-radius: 2px;
}
.sklep-wyslij:hover { background: #e8e8e6; }
.sklep-wyslij[disabled] { opacity: .6; cursor: progress; }
.sklep-ok {
  margin-top: 18px; padding: 16px; background: rgba(49,160,81,0.14); border: 1px solid #31A051;
  color: #8ee8ab; font-size: .92rem; border-radius: 2px;
}
.sklep-ok strong { color: #b6f5cb; }
@media (max-width: 420px){ .sklep-panel { padding: 24px 18px 20px; } }

/* =====================================================================
   HISTORIA MARKI — krotki rys kazdego producenta
   ===================================================================== */
.hist { background: #f4f4f0; }
.hist.ciemna { background: #0c0c0c; }
.hist.ciemna .section-title { color: #fff; }
.hist.ciemna .section-desc { color: #a8a8a3; }

.hist-os { list-style: none; margin: 34px 0 0; padding: 0; }
.hist-os li {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px;
  padding: 22px 0; border-top: 1px solid #dedcd5;
}
.hist.ciemna .hist-os li { border-top-color: rgba(255,255,255,0.1); }
.hist-os li:last-child { border-bottom: 1px solid #dedcd5; }
.hist.ciemna .hist-os li:last-child { border-bottom-color: rgba(255,255,255,0.1); }
.hist-rok {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--brand); line-height: 1.1; letter-spacing: .01em;
}
.hist-rok small {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #9a9a92; margin-top: 2px;
}
.hist.ciemna .hist-rok small { color: #5f6470; }
.hist-tytul {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.16rem;
  text-transform: uppercase; color: #17171a; letter-spacing: .01em;
}
.hist.ciemna .hist-tytul { color: #fff; }
.hist-os p { margin-top: 7px; color: #55554f; font-size: .96rem; line-height: 1.65; max-width: 68ch; }
.hist.ciemna .hist-os p { color: #a8a8a3; }

.hist-fakty {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin-top: 30px; background: #dedcd5; border: 1px solid #dedcd5;
}
.hist.ciemna .hist-fakty { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.1); }
.hist-fakt { background: #f4f4f0; padding: 18px 20px; }
.hist.ciemna .hist-fakt { background: #0c0c0c; }
.hist-fakt dt {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: #9a9a92; margin-bottom: 5px;
}
.hist-fakt dd { margin: 0; font-size: .96rem; color: #17171a; font-weight: 500; }
.hist.ciemna .hist-fakt dd { color: #fff; }

@media (max-width: 680px){
  .hist-os li { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .hist-rok { font-size: 1.25rem; }
}

/* hero bez zdjecia — gdy nie mamy wlasnego, uczciwego kadru dla tematu */
.pod-hero.bez-zdjecia { min-height: 52vh; }
/* bez zdjecia w tle prawa kolumna zostaje tylko wtedy, gdy jest w niej
   odznaka dystrybutora — samo puste miejsce nie ma sensu */
.pod-hero.bez-zdjecia .pod-hero-inner:not(:has(.hero-badge-dist)) { grid-template-columns: 1fr; }
@media (max-width: 1100px){ .pod-hero.bez-zdjecia { min-height: 0; } }

/* =====================================================================
   BEZPLATNY TEST NARZEDZIA U KLIENTA
   Najmocniejszy argument w ofercie, wiec sekcja ma sie wyrozniac:
   jasny pas na ciemnym tle, duzy naglowek, trzy kroki i jedno wezwanie.
   ===================================================================== */
.test { background: var(--mono-1, #0a0a0a); color: #fff; position: relative; overflow: hidden; padding: 0; }
.test::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 58px 58px;
}
.test::after {
  content: ''; position: absolute; top: -40%; right: -12%; width: 52vw; height: 52vw;
  max-width: 720px; max-height: 720px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 68%);
}
.test-inner {
  position: relative; z-index: 1; max-width: 1600px; margin: 0 auto;
  padding: 64px 60px; box-sizing: border-box;
}
.test-znacznik {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px;
  border: 1px solid var(--brand); border-radius: 99px; background: rgba(255,255,255,.04);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brand);
}
.test-znacznik::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  animation: testPuls 2.4s ease-in-out infinite;
}
@keyframes testPuls { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(1.35); } }
.test h2 {
  margin-top: 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.06;
  color: #fff; letter-spacing: -.01em; max-width: 24ch;
}
.test h2 em { font-style: normal; color: var(--brand); }
.test-lede { margin-top: 20px; max-width: 62ch; font-size: 1.06rem; color: #c9c9c6; font-weight: 300; }
.test-kroki {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; margin-top: 36px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}
.test-krok { background: #0d0d0f; padding: 22px 24px; }
.test-krok-nr {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--brand); line-height: 1;
}
.test-krok h3 {
  margin-top: 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.1rem; text-transform: uppercase; color: #fff;
}
.test-krok p { margin-top: 7px; font-size: .92rem; color: #a8a8a3; line-height: 1.6; }
.test-stopka {
  margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
}
.test-stopka .btn-primary, .test-stopka .btn-mono { flex: none; }
.test-obietnica {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.02rem;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
  border-left: 3px solid var(--brand); padding-left: 14px; max-width: 46ch; line-height: 1.35;
}
/* sekcja byla dluga jak reka — kroki i rachunek chowaja sie pod jednym
   klikiem, a na wierzchu zostaje sama obietnica i przycisk */
.test-wiecej { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.14); }
.test-wiecej > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 18px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.02rem; letter-spacing: .05em; text-transform: uppercase; color: #fff;
  gap: 18px;
}
.test-wiecej > summary::-webkit-details-marker { display: none; }
.test-wiecej > summary::after {
  content: '+'; flex: none;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--brand); color: var(--brand);
  font-size: 1.3rem; line-height: 1; font-weight: 400;
  transition: background .2s, color .2s;
}
.test-wiecej[open] > summary::after { content: '–'; }
.test-wiecej > summary:hover::after { background: var(--brand); color: #fff; }
.test-wiecej > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.test-wiecej-tresc { animation: testRozwin .28s ease; }
@keyframes testRozwin { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .test-wiecej-tresc { animation: none; } }
@media (max-width: 640px){
  .test-wiecej > summary { font-size: .92rem; letter-spacing: .03em; gap: 10px; }
}

@media (max-width: 1100px){ .test-inner { padding: 54px 32px; } }
@media (max-width: 640px){
  .test-inner { padding: 44px 18px; }
  .test-kroki { margin-top: 28px; }
  .test-stopka { flex-direction: column; align-items: stretch; gap: 16px; }
  .test-stopka .btn-primary, .test-stopka .btn-mono { text-align: center; }
}

/* rachunek: dlaczego drozsze narzedzie wychodzi taniej */
.test-rachunek {
  margin-top: 30px; padding: 26px 28px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-left: 4px solid var(--brand); border-radius: 3px;
}
.test-rachunek h3 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: #fff; line-height: 1.2;
}
.test-rachunek h3 em { font-style: normal; color: var(--brand); }
.test-rachunek-lista {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 28px;
}
.test-rachunek-lista li { font-size: .93rem; color: #c2c2be; line-height: 1.55; }
.test-rachunek-lista li strong {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.02rem; text-transform: uppercase; color: #fff; margin-bottom: 3px;
}
/* strzalka musi stac w jednej linii z naglowkiem punktu, a naglowek jest
   blokiem — wiec znacznik wstawiamy do niego, nie do calego punktu */
.test-rachunek-lista li strong::before {
  content: '↑ '; color: var(--brand);
}
.test-rachunek-lista li.dol strong::before { content: '↓ '; }
.test-wniosek {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.05rem, 2vw, 1.3rem); color: #fff; line-height: 1.25;
}
.test-wniosek em { font-style: normal; color: var(--brand); }
@media (max-width: 640px){ .test-rachunek { padding: 20px 18px; } }

/* =====================================================================
   MENU MOBILNE — porzadek zamiast jednego dlugiego ciagu
   Pozycje podmenu ukladamy w siatke (dwie kolumny), zmniejszamy wysokosc
   wierszy i przyklejamy przycisk kontaktu do dolu panelu, zeby zawsze
   byl pod kciukiem.
   ===================================================================== */
@media (max-width: 980px){
  .nav-links {
    padding: 6px 18px 18px;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* glowne pozycje: nizszy wiersz, wyrazniejszy naglowek grupy */
  .nav-links > li > a {
    padding: 14px 4px; font-size: 1rem; letter-spacing: .1em;
  }
  .nav-links > li > a.nav-group {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 1.06rem; color: #fff;
  }
  .nav-sub-toggle { height: 50px; width: 50px; }

  /* podmenu: zwarta ramka zamiast listy na cala szerokosc */
  .nav-mega {
    margin: 4px 0 12px; padding: 4px 10px 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-left: 2px solid var(--brand); border-radius: 3px;
  }
  .nav-mega .nav-kol { padding: 8px 0 4px; }
  .nav-mega .nav-kol + .nav-kol { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; }
  .nav-mega .nav-kol-tytul {
    padding: 4px 4px 8px; font-size: .68rem; letter-spacing: .2em; color: #7c7c78;
  }
  .nav-mega .nav-kol ul {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .nav-mega .nav-kol a {
    display: flex; align-items: center; min-height: 46px; padding: 8px 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 3px; border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .92rem;
    line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: #e2e2de;
  }
  .nav-mega .nav-kol a.current { border-color: var(--brand); color: #fff; }

  /* kafelki marek maja wlasny wyglad — ogolna regula podmenu wyzej jest od
     nich mocniejsza (0,2,1 wobec 0,1,0), wiec przywracamy je wprost */
  .nav-mega .nav-kol a.nav-marka {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    gap: 8px; min-height: 78px; padding: 12px 13px; text-transform: none;
    letter-spacing: 0; font-family: 'Barlow', sans-serif; font-weight: 400;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--marka) 20%, transparent) 0%,
                              rgba(255,255,255,.03) 62%);
    border: 1px solid color-mix(in srgb, var(--marka) 30%, transparent);
    border-left: 4px solid var(--marka);
  }
  .nav-mega .nav-kol a.nav-marka.current { border-color: var(--marka); }
  .nav-mega .nav-kol .nav-marka-slowo { font-size: 1.06rem; }
  .nav-mega .nav-kol-stopka { margin-top: 8px; padding: 8px 0 0; }
  .nav-mega .nav-kol-stopka a {
    justify-content: center; background: none; border: 1px solid var(--brand);
    min-height: 42px; color: var(--brand); font-size: .84rem; letter-spacing: .12em;
  }

  /* kontakt zawsze widoczny na dole panelu */
  .nav-links > li:last-child {
    position: sticky; bottom: 0; margin-top: 10px;
    background: linear-gradient(180deg, rgba(17,17,17,0) 0%, #111 38%);
    padding-bottom: 4px;
  }
  .nav-links a.nav-cta { margin-top: 8px; padding: 15px 22px; font-size: 1rem; }
}
@media (max-width: 380px){
  .nav-mega .nav-kol ul { grid-template-columns: 1fr; }
}

/* =====================================================================
   MENU — kolumna marek wyrazniej odrozniona od kolumny zastosowan
   ===================================================================== */
.nav-marka-kropka {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 9px; vertical-align: 1px; flex: none;
}
@media (min-width: 981px){
  /* prawa kolumna dostaje wlasne tlo, zeby bylo widac, ze to inny sposob
     wyboru: nie „co chce zrobic”, ale „czyje narzedzie” */
  .nav-mega .nav-kol:last-child { background: rgba(255,255,255,0.03); }
  .nav-mega .nav-kol:last-child a {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  }
  .nav-mega .nav-kol:last-child a small {
    font-family: 'Barlow', sans-serif; font-weight: 400; font-size: .78rem;
    letter-spacing: 0; text-transform: none; color: #8a8a87; margin-left: 17px;
  }
}
@media (max-width: 980px){
  .nav-mega .nav-kol:last-child a { position: relative; padding-left: 26px; }
  .nav-mega .nav-marka-kropka { position: absolute; left: 10px; top: 50%; margin: 0; transform: translateY(-50%); }
}

/* tlo zbudowane z wlasnych materialow marki (kolaz narzedzi, znak firmowy)
   jest juz przygotowane — nie przyciemniamy go drugi raz */
.pod-hero-photo.znak img,
.pod-hero-photo img[src*="tlo-narzedzia"] { filter: none; }
.pod-hero-photo.znak::after {
  background:
    linear-gradient(90deg, #0a0a0a 2%, rgba(10,10,10,0.72) 42%, rgba(10,10,10,0.2) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.7) 0%, transparent 32%, rgba(10,10,10,0.85) 100%);
}

/* karta „skad bierze sie powtarzalnosc” ze zdjeciem detalu zamiast ikony */
.why-item:has(.why-foto) { padding: 0 0 26px; overflow: hidden; }
.why-foto { margin: 0 0 18px; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0d0f; }
.why-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-item:has(.why-foto) .why-title,
.why-item:has(.why-foto) .why-desc { padding-left: 20px; padding-right: 20px; }

/* =====================================================================
   Kalkulator kosztu metra (kalkulator.html)

   Strona robocza, na razie poza serwisem: wlasny, waski uklad zamiast
   pelnego szkieletu strony, zeby dalo sie ja pokazac klientowi bez menu
   i stopki. Style trzymamy tutaj, bo korzystaja z tych samych zmiennych
   i krojow co reszta serwisu.
   ===================================================================== */
.kalk-strona{ background:var(--mono-1); color:#fff; min-height:100vh; padding:48px 0 80px; }
.kalk-kolumna{ max-width:820px; margin:0 auto; padding:0 20px; }

.kalk-znacznik{
  display:inline-block; padding:6px 13px; border-radius:99px;
  border:1px solid var(--brand); background:rgba(47,109,246,.14);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand2);
}
.kalk-naglowek h1{
  margin:18px 0 0; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  text-transform:uppercase; font-size:clamp(1.9rem,5vw,3rem); line-height:1.14;
  /* zapas na ogonki polskich liter — tak samo jak w naglowkach hero */
  padding-bottom:.06em;
}
.kalk-lede{ margin:14px 0 0; color:#c9c9c6; font-size:1.02rem; max-width:64ch; }

/* ---------- formularz ---------- */
.kalk-form{ margin:34px 0 0; }
.kalk-grupa{
  margin:0 0 16px; padding:22px 24px 24px; border-radius:4px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
}
.kalk-grupa legend{
  padding:0 10px; margin-left:-10px;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:.84rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand2);
}
.kalk-grupa-opis{ margin:0 0 18px; color:#8a8a87; font-size:.9rem; max-width:62ch; }
.kalk-grupa-opis + .kalk-pola{ margin-top:0; }
.kalk-pola{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.kalk-pola + .kalk-grupa-opis{ margin-top:22px; }
.kalk-pole{ display:flex; flex-direction:column; gap:7px; }
.kalk-pole > span{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; color:#9a9a97;
}
.kalk-pole input, .kalk-pole select{
  font:inherit; font-size:1.05rem; color:#fff; padding:11px 13px; width:100%;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); border-radius:3px;
}
.kalk-pole select{ appearance:none; cursor:pointer; }
.kalk-pole select:disabled{ opacity:.75; cursor:default; }
.kalk-pole input:focus, .kalk-pole select:focus{ outline:2px solid var(--brand); outline-offset:1px; }
.kalk-pole small{ color:#5f6470; font-size:.82rem; line-height:1.4; }
.kalk-form .btn-mono{ margin-top:8px; }
.kalk-blad{
  margin:0 0 16px; padding:11px 14px; border-radius:3px;
  background:rgba(176,0,32,.16); border:1px solid rgba(255,90,110,.5); color:#ffb3bd;
}

/* ---------- wynik: godzina maszyny ---------- */
.kalk-wynik{ margin:36px 0 0; }
.kalk-godzina{
  padding:24px; margin:0 0 20px; border-radius:4px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.kalk-godzina h2{
  margin:0 0 20px; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.4rem; text-transform:uppercase; color:#c9c9c6; line-height:1.24;
}
.kalk-godzina h2 strong{ color:#fff; }
.kalk-sklad{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.kalk-sklad li{ display:grid; grid-template-columns:1fr 90px auto; align-items:center; gap:14px; }
.kalk-sklad-nazwa{ color:#c9c9c6; font-size:.95rem; }
.kalk-sklad-nazwa small{ display:block; color:#7c7c79; font-size:.8rem; margin-top:2px; }
.kalk-sklad-pasek{ height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.kalk-sklad-pasek i{ display:block; height:100%; background:var(--brand); }
.kalk-sklad-kwota{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.05rem;
  color:#fff; text-align:right; white-space:nowrap;
}
.kalk-podsumowanie-mies{ margin:20px 0 0; color:#9a9a97; font-size:.95rem; }
.kalk-podsumowanie-mies strong{ color:#fff; }

/* ---------- wynik: zestawienie wariantow ---------- */
.kalk-zestawienie{ margin:0 0 20px; }
/* Tabela przewija sie w swojej ramce, a nie razem z cala strona — inaczej
   przy trzech kolumnach telefon dostawalby poziomy pasek na calej stronie. */
.kalk-tabela-ramka{
  overflow-x:auto; border:1px solid rgba(255,255,255,.12); border-radius:4px;
  -webkit-overflow-scrolling:touch;
}
.kalk-tabela{ width:100%; border-collapse:collapse; min-width:520px; }

.kalk-tabela thead th{
  padding:16px 14px; text-align:left; vertical-align:bottom;
  background:rgba(255,255,255,.05); border-bottom:2px solid var(--brand);
}
.kalk-tabela thead th.kalk-th-opis{ background:transparent; border-bottom-color:rgba(255,255,255,.12); }
.kalk-kol-marka{
  display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
}
.kalk-kol-nazwa{
  display:block; margin-top:3px; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.15rem; text-transform:uppercase; color:#fff; line-height:1.18;
}
.kalk-kol-predkosc{
  display:block; margin-top:3px; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.95rem; color:#c9c9c6;
}
.kalk-kol-znacznik{
  display:inline-block; margin-top:8px; padding:3px 9px; border-radius:99px;
  background:var(--brand); color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.kalk-tabela th.kalk-kol-odniesienie{ border-bottom-color:rgba(255,255,255,.28); }

.kalk-tabela tbody th{
  padding:12px 14px; text-align:left; font-weight:400; color:#9a9a97; font-size:.93rem;
  border-top:1px solid rgba(255,255,255,.1); white-space:nowrap;
}
.kalk-tabela tbody th small{ display:block; color:#5f6470; font-size:.78rem; white-space:normal; margin-top:2px; }
.kalk-tabela tbody td{
  padding:12px 14px; border-top:1px solid rgba(255,255,255,.1);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.1rem;
  color:#c9c9c6; white-space:nowrap;
}
.kalk-tabela tbody td.kalk-kol-odniesienie{ color:#9a9a97; }

.kalk-tabela tr.kalk-wiersz-glowny th{ color:#c9c9c6; }
.kalk-tabela tr.kalk-wiersz-glowny td{ font-size:1.6rem; font-weight:800; color:#fff; }
.kalk-tabela tr.kalk-wiersz-drobny th{ padding-top:4px; padding-bottom:4px; color:#5f6470; font-size:.85rem; }
.kalk-tabela tr.kalk-wiersz-drobny th{ border-top:0; }
.kalk-tabela tr.kalk-wiersz-drobny td{
  padding-top:4px; padding-bottom:4px; border-top:0;
  font-size:.92rem; font-weight:400; color:#8a8a87;
}
.kalk-tabela td.kalk-td-najlepszy{ background:rgba(47,109,246,.16); color:#fff; }

.kalk-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.kalk-braki{ margin:14px 0 0; color:#8a8a87; font-size:.9rem; }
.kalk-uwaga{
  margin:12px 0 0; padding-left:12px; border-left:2px solid rgba(255,255,255,.22);
  color:#8a8a87; font-size:.9rem;
}
.kalk-uwaga strong{ color:#c9c9c6; }

.kalk-zyski{
  list-style:none; margin:16px 0 0; padding:0; display:grid; gap:1px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:3px;
}
.kalk-zyski li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding:12px 14px; background:var(--mono-1); color:#9a9a97; font-size:.94rem;
}
.kalk-zyski strong{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.25rem;
  color:#fff; min-width:118px;
}

/* ---------- wybor predkosci i bilans ---------- */
.kalk-wybor, .kalk-bilans{
  padding:24px; margin:20px 0 0; border-radius:4px;
  border:1px solid var(--brand); background:rgba(47,109,246,.1);
}
.kalk-wybor h2, .kalk-bilans h2{
  margin:0 0 14px; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.4rem; text-transform:uppercase; color:#fff; line-height:1.22;
}
.kalk-bilans h2 strong{ color:var(--brand2); }
.kalk-wybor p, .kalk-bilans p{ margin:0; color:#c9c9c6; font-size:.97rem; }
.kalk-bilans p{ margin-top:16px; }
.kalk-wybor p strong, .kalk-bilans p strong{ color:#fff; }
.kalk-wybor-uwaga{ margin-top:14px !important; color:#8a8a87 !important; font-size:.9rem !important; }
.kalk-bilans.kalk-bilans-zero{ border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.kalk-bilans.kalk-bilans-zero p{ margin-top:0; }

/* ---------- zastrzezenie ---------- */
.kalk-zastrzezenie{
  margin:26px 0 0; padding:18px 20px; border-radius:3px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color:#9a9a97; font-size:.91rem; line-height:1.62;
}
.kalk-zastrzezenie p{ margin:0 0 12px; }
.kalk-zastrzezenie p:last-child{ margin-bottom:0; }
.kalk-zastrzezenie strong{ color:#c9c9c6; }

/* ---------- notatka robocza ---------- */
.kalk-notatka{
  margin:44px 0 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  color:#8a8a87; font-size:.93rem;
}
.kalk-notatka h2{
  margin:0 0 12px; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:#7c7c79;
}
.kalk-notatka strong{ color:#c9c9c6; }
.kalk-notatka code{ background:rgba(255,255,255,.08); padding:2px 6px; border-radius:2px; color:#c9c9c6; }
.kalk-notatka pre{
  margin:12px 0; padding:12px 14px; overflow-x:auto;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1); border-radius:3px;
}
.kalk-notatka pre code{ background:none; padding:0; }

@media (max-width:560px){
  .kalk-strona{ padding:30px 0 60px; }
  .kalk-grupa{ padding:18px 16px 20px; }
  .kalk-godzina, .kalk-wybor, .kalk-bilans{ padding:18px 16px; }
  .kalk-zyski strong{ min-width:0; }
  .kalk-tabela thead th{ padding:13px 11px; }
  .kalk-tabela tbody th, .kalk-tabela tbody td{ padding:10px 11px; }
  .kalk-tabela tr.kalk-wiersz-glowny td{ font-size:1.3rem; }
  .kalk-sklad li{ grid-template-columns:1fr auto; }
  .kalk-sklad-pasek{ display:none; }
  .kalk-koszt-metra span{ font-size:2.1rem; }
}
.kalk-prog{
  margin:16px 0 0 !important; padding:14px 16px; border-radius:3px;
  background:rgba(0,0,0,.3); border-left:3px solid var(--brand2);
  color:#c9c9c6 !important; font-size:.96rem !important;
}
.kalk-prog strong{ color:#fff; }

/* =====================================================================
   Nowe marki: Lantania (chemia), Aquafil (obieg wody), Aardwolf (transport)

   Trzy strony bez wlasnych zdjec produktow — dopoki ich nie ma, tresc
   niosa same karty. Uklady sa celowo proste i wspolne dla wszystkich
   trzech, zeby po dolozeniu zdjec dalo sie je wymienic w jednym miejscu.
   ===================================================================== */
.raku-siatka, .aq-siatka, .aw-siatka, .zakres-siatka, .aq-korzysci{
  display:grid; gap:18px; margin-top:38px;
}
.raku-siatka, .aw-siatka{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.aq-siatka{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.zakres-siatka, .aq-korzysci{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }

.raku-karta, .aw-karta, .aq-krok, .aq-korzysc, .zakres-blok{
  padding:24px 22px; border-radius:4px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-top:3px solid var(--brand);
}
.raku-karta h3, .aw-karta h3, .aq-krok h3, .aq-korzysc h3, .zakres-blok h3{
  margin:0 0 10px; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.25rem; text-transform:uppercase; color:#fff; line-height:1.2;
}
.raku-karta p, .aw-karta p, .aq-krok p, .aq-korzysc p{
  margin:0; color:#9a9a97; font-size:.95rem; line-height:1.62;
}
.aq-nr{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.5rem;
  color:var(--brand); line-height:1; margin-bottom:10px;
}

/* wykaz zastosowan chemii — trzy kolumny materialow */
.zakres-blok ul{ list-style:none; margin:0; padding:0; }
.zakres-blok li{
  padding:7px 0 7px 18px; position:relative;
  color:#9a9a97; font-size:.94rem; border-top:1px solid rgba(255,255,255,.07);
}
.zakres-blok li:first-child{ border-top:0; }
.zakres-blok li::before{
  content:''; position:absolute; left:0; top:15px;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}

.raku-uwaga, .zakres-uwaga{
  margin:30px 0 0; padding:16px 18px; border-radius:3px; max-width:78ch;
  background:rgba(255,255,255,.03); border-left:3px solid rgba(255,255,255,.2);
  color:#8a8a87; font-size:.93rem; line-height:1.62;
}
.raku-cta{ margin-top:30px; }

/* jasne tlo sekcji — karty musza sie na nim wybronic */
.home-section[style*="mono-5"] .zakres-blok,
section[style*="mono-5"] .zakres-blok,
section[style*="mono-5"] .aq-korzysc{
  background:#fff; border-color:#e4e2dc;
}
section[style*="mono-5"] .zakres-blok h3,
section[style*="mono-5"] .aq-korzysc h3{ color:var(--mono-1); }
section[style*="mono-5"] .zakres-blok li,
section[style*="mono-5"] .aq-korzysc p{ color:#5c5c58; }
section[style*="mono-5"] .zakres-blok li{ border-top-color:#eceae4; }
section[style*="mono-5"] .zakres-uwaga{
  background:rgba(0,0,0,.03); border-left-color:rgba(0,0,0,.18); color:#6b6b66;
}

/* ---------- katalog Aardwolf: widok kategoriami ---------- */
.aw-katalog{ background:#0c0c0c; }
.aw-grupa{ margin-top:58px; }
.aw-grupa:first-of-type{ margin-top:38px; }
.aw-grupa-head{ border-top:2px solid var(--brand); padding-top:18px; }
.aw-grupa-head h3{
  margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.65rem;
  text-transform:uppercase; color:#fff; line-height:1.18;
}
.aw-grupa-head h3 span{
  font-size:.78rem; letter-spacing:.14em; color:var(--brand); font-weight:700;
}
.aw-grupa-head p{ margin:12px 0 0; max-width:76ch; color:#9a9a97; font-size:.96rem; line-height:1.62; }

/* zdjecia przykladowe — rowne kadry 4:3, zeby rzad byl spokojny */
.aw-fotki{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:20px; }
.aw-fotki figure{
  margin:0; border-radius:4px; overflow:hidden; background:#151515;
  border:1px solid rgba(255,255,255,.1); aspect-ratio:4/3;
}
.aw-fotki img{ width:100%; height:100%; object-fit:cover; display:block; }
.aw-fotki-podpis{ margin:9px 0 0; color:#5f6470; font-size:.84rem; }

/* pelny wykaz pod rozwinieciem */
.aw-lista{ margin-top:18px; }
.aw-lista > summary{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  padding:10px 16px; border-radius:3px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; color:#c9c9c6;
  transition:background .2s, border-color .2s, color .2s;
}
.aw-lista > summary::-webkit-details-marker{ display:none; }
.aw-lista > summary::after{ content:'▾'; font-size:.9rem; color:var(--brand); }
.aw-lista[open] > summary::after{ content:'▴'; }
.aw-lista > summary:hover{ background:rgba(255,255,255,.09); border-color:var(--brand); color:#fff; }

.aw-seria{
  margin:24px 0 12px; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#8a8a87;
}
.aw-produkty{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.aw-produkt{
  display:flex; flex-direction:column; padding:18px 18px 16px; border-radius:4px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  transition:border-color .2s, background .2s;
}
.aw-produkt:hover{ border-color:rgba(226,113,29,.55); background:rgba(255,255,255,.06); }
.aw-produkt h5{
  margin:0 0 12px; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.2rem; letter-spacing:.02em; color:#fff;
}
.aw-produkt dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; }
.aw-produkt dt{ color:#5f6470; font-size:.8rem; white-space:nowrap; }
.aw-produkt dd{ margin:0; color:#c9c9c6; font-size:.86rem; }
.aw-zapytaj{
  margin-top:auto; padding-top:14px; border:0; background:none; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
  text-align:left; transition:color .2s;
}
.aw-zapytaj:hover{ color:#fff; }
.aw-zapytaj::after{ content:' →'; }

@media (max-width:560px){
  .aw-produkty{ grid-template-columns:1fr; }
  .aw-grupa-head h3{ font-size:1.32rem; }
  .aw-fotki{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
}

/* ---------- katalog Lantanii ---------- */
.lan-katalog{ background:#0c0c0c; }
.lan-grupa{ margin-top:52px; }
.lan-grupa:first-of-type{ margin-top:38px; }
.lan-grupa-head{ border-top:2px solid var(--brand); padding-top:18px; }
.lan-grupa-head h3{
  margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.6rem;
  text-transform:uppercase; color:#fff; line-height:1.18;
}
.lan-grupa-head h3 span{ font-size:.78rem; letter-spacing:.14em; color:var(--brand2); font-weight:700; }
.lan-grupa-head p{ margin:12px 0 0; max-width:76ch; color:#9a9a97; font-size:.96rem; line-height:1.62; }
.lan-produkty{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:22px; }
.lan-produkt{
  padding:20px; border-radius:4px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--brand); transition:background .2s;
}
.lan-produkt:hover{ background:rgba(255,255,255,.07); }
.lan-produkt h4{
  margin:0; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.22rem; letter-spacing:.02em; color:#fff; line-height:1.2;
}
.lan-typ{
  margin:6px 0 0; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand2);
}
.lan-opis{ margin:12px 0 0; color:#c9c9c6; font-size:.92rem; line-height:1.6; }
@media (max-width:560px){
  .lan-produkty{ grid-template-columns:1fr; }
  .lan-grupa-head h3{ font-size:1.3rem; }
}

/* ---------- naglowki sekcji na stronach marek ---------- */
/* Klasy uzywane na lantania / aardwolf / aquafil. Domyslnie licza sie
   na ciemne tlo; sekcje na jasnym tle (mono-5) maja wersje ponizej. */
.marka-head{ margin-bottom:6px; max-width:78ch; }
.marka-kicker{
  display:block; margin-bottom:10px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand2);
}
.marka-head h2{
  margin:0; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.16; text-transform:uppercase;
  color:#fff; padding-bottom:.06em;
}
.marka-head h2 em{ font-style:normal; color:var(--brand2); }
.marka-lede{ margin:14px 0 0; color:#c9c9c6; font-size:1rem; line-height:1.66; }

section[style*="mono-5"] .marka-kicker{ color:var(--brand); }
section[style*="mono-5"] .marka-head h2{ color:var(--mono-1); }
section[style*="mono-5"] .marka-head h2 em{ color:var(--brand); }
section[style*="mono-5"] .marka-lede{ color:#4f4f4a; }

/* naglowki wewnatrz sekcji o ciemnym tle, ktore nie maja wlasnej klasy */
.raku-dane-blok h3, .aw-grupa-head h3, .lan-grupa-head h3{ color:#fff; }

/* dane techniczne RAKU — trzy krotkie wykazy pod kartami */
.raku-dane{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:18px; }
.raku-dane-blok{
  padding:20px 22px; border-radius:4px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
}
.raku-dane-blok h3{
  margin:0 0 12px; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand2);
}
.raku-dane-blok ul{ list-style:none; margin:0; padding:0; }
.raku-dane-blok li{
  padding:6px 0 6px 16px; position:relative; color:#c9c9c6; font-size:.93rem; line-height:1.5;
}
.raku-dane-blok li::before{
  content:''; position:absolute; left:0; top:14px; width:5px; height:5px;
  border-radius:50%; background:var(--brand);
}

/* ---------- pozostale poprawki czytelnosci ---------- */
/* Etykiety i drobny tekst na jasnych sekcjach byly za jasne, a kilka
   elementow na ciemnym tle za ciemne. Progi: 4,5:1 dla zwyklego tekstu. */
.section-label{ color:var(--brand); }
section[style*="mono-5"] .section-label,
.home-section[style*="mono-5"] .section-label{ color:#4f4f4a; }
.mono-group-label{ color:#5c5c58 !important; }
.pk-ref, .pk-meta dt{ color:#60605a !important; }
.btn-sklep.wkrotce em{ color:#6b6b62 !important; }
/* na ciemnej karcie ta sama etykieta musi byc jasna, a !important wyzej
   trzeba przebic tym samym srodkiem */
.dark .btn-sklep.wkrotce em, section.dark .btn-sklep.wkrotce em,
.blade-card .btn-sklep.wkrotce em{ color:#a5a59c !important; }
.wa-btn span{ color:#062c17; }
.wa-btn{ background:#25d366; }

/* Kolor marki bywa jasny (StoneByte, Vitium) i na bialym tle drobny tekst
   w takim kolorze schodzi ponizej progu czytelnosci. Przyciemniamy go tylko
   tam, gdzie tlo jest na pewno jasne — karty maszyn i pasek marki. */
.mk-marka, .mk-wiecej,
.brand-banner .name{
  color: color-mix(in srgb, var(--brand) 70%, #14140e);
}
.hist-os dt, .hist-os small, .brand-banner small, .brand-banner dt{ color:#60605a; }

/* Etykieta sekcji: na jasnym tle kolor marki bywa za jasny, wiec go
   przyciemniamy. Sekcje o ciemnym tle maja klase "dark" albo wlasny
   ciemny kontener — tam kolor marki zostaje nietkniety. */
.section-label{ color: color-mix(in srgb, var(--brand) 70%, #14140e); }
.dark .section-label,
.pod-hero .section-label,
.hist.ciemna .section-label,
.xp-line-wrapper .section-label,
.aw-katalog .section-label,
.lan-katalog .section-label,
section[style*="#0c0c0c"] .section-label,
section[style*="#0a0a0a"] .section-label,
section[style*="mono-1"] .section-label{ color: var(--brand); }

/* Wykaz cech: ciemny na bialej karcie, jasny na ciemnej. */
.blade-card .blade-features li{ color:#3f3f3c; }
/* reguła wyzej jest pisana pod karty na bialym tle. Karty na ciemnym tle
   (linia XP, „pozostale tarcze”, karty CNC) musza ja zdjac — inaczej lista
   cech ma #3f3f3c na prawie czarnym, czyli kontrast 1.65 zamiast 4.5 */
.cnc-card .blade-features li, .xp-line-wrapper .blade-features li,
.xp-card .blade-features li, .standard-line-wrapper .blade-features li{ color:#c9c9c6; }

/* ---------- zdjecia na stronie Lantanii ---------- */
/* Szeroki pas pod lede sekcji RAKU: rozlane wino na marmurze. To jest caly
   problem w jednym kadrze, wiec dostaje wiecej miejsca niz zwykla ilustracja. */
.raku-foto{
  margin:30px 0 0; border-radius:4px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.raku-foto img{ width:100%; height:auto; display:block; }
.raku-foto figcaption{
  padding:14px 18px; background:rgba(255,255,255,.04);
  border-top:1px solid rgba(255,255,255,.1);
  color:#c9c9c6; font-size:.93rem; line-height:1.6;
}
.zakres-foto{
  margin:0 0 28px; border-radius:4px; overflow:hidden; max-width:520px;
  border:1px solid rgba(0,0,0,.1); aspect-ratio:4/3;
}
.zakres-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.lan-foto{
  margin:18px 0 0; border-radius:4px; overflow:hidden; max-width:360px;
  border:1px solid rgba(255,255,255,.1);
}
.lan-foto img{ width:100%; height:auto; display:block; }
.lan-foto figcaption{
  padding:9px 13px; background:rgba(255,255,255,.04);
  color:#5f6470; font-size:.83rem;
}
@media (max-width:560px){ .zakres-foto{ max-width:none; } }

/* ---------- Aquafil: zdjecie, schemat obiegu, dobor ---------- */
.aq-foto{
  margin:30px 0 0; border-radius:4px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.aq-foto img{ width:100%; height:auto; display:block; }
.aq-foto figcaption{
  padding:14px 18px; background:rgba(255,255,255,.04);
  border-top:1px solid rgba(255,255,255,.1);
  color:#c9c9c6; font-size:.93rem; line-height:1.6;
}
/* Schemat jest rysunkiem, nie fotografia — dostaje wlasne tlo i oddech,
   zeby czytalo sie go jak instrukcje, a nie jak ilustracje. */
.aq-schemat{
  margin:18px 0 0; padding:22px 20px 16px; border-radius:4px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
}
.aq-schemat img, .aq-schemat .aq-rysunek{ width:100%; height:auto; display:block; }
.aq-schemat figcaption{ margin-top:14px; color:#5f6470; font-size:.88rem; line-height:1.55; }

.aq-dobor{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:34px; }
.aq-pytanie{
  padding:22px 20px; border-radius:4px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-top:3px solid var(--brand);
}
.aq-pytanie-nr{
  display:block; margin-bottom:10px; font-family:'Barlow Condensed',sans-serif;
  font-weight:800; font-size:1.4rem; color:var(--brand2); line-height:1;
}
.aq-pytanie h3{
  margin:0 0 8px; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.15rem; text-transform:uppercase; color:#fff; line-height:1.2;
}
.aq-pytanie p{ margin:0; color:#9a9a97; font-size:.93rem; line-height:1.6; }
.aq-cta{ margin-top:32px; }
@media (max-width:560px){ .aq-schemat{ padding:14px 12px 12px; overflow-x:auto; } }

/* ---------- mega-menu: kolumna marek jako kafelki ---------- */
/* Wczesniej obie kolumny byly listami odnosnikow i zlewaly sie w jedno.
   Marki dostaja teraz wlasna siatke, logo i mocniejsze oddzielenie. */
.nav-mega .nav-kol + .nav-kol{
  background:rgba(255,255,255,.035);
  border-left:1px solid rgba(255,255,255,.12);
}
.nav-marki{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px 16px 14px;
  min-width:330px;
}
/* logotyp jest tu cala trescia kafelka — przy 17px gubil sie w tle.
   Kafelek jest wyzszy, znak wiekszy, a tlo bierze kolor marki, zeby piatka
   producentow czytala sie jak piec osobnych marek, a nie jedna lista */
.nav-marki .nav-marka{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  min-height:96px; padding:15px 16px; border-radius:3px; text-decoration:none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--marka) 18%, transparent) 0%,
                            rgba(255,255,255,.03) 62%);
  border:1px solid color-mix(in srgb, var(--marka) 26%, transparent);
  border-left:4px solid var(--marka);
  transition:border-color .18s, transform .12s;
}
/* poswiata od strony paska marki — pojawia sie dopiero pod kursorem,
   wiec zamkniete menu nie migocze piecioma kolorami */
.nav-marki .nav-marka::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(120% 140% at 0% 50%,
             color-mix(in srgb, var(--marka) 34%, transparent) 0%, transparent 70%);
  transition:opacity .18s;
}
.nav-marki .nav-marka:hover::after, .nav-marka:focus-visible::after{ opacity:1; }
.nav-marki .nav-marka:hover{ border-color:var(--marka); transform:translateX(2px); }
.nav-marki .nav-marka.current{ border-color:var(--marka); }
.nav-marki .nav-marka.current::after{ opacity:.7; }
.nav-marki .nav-marka > *{ position:relative; z-index:1; }
.nav-marki .nav-marka-znak{ display:flex; align-items:center; height:28px; }
/* logo WODIAM to SVG bez wymiarow wlasnych — samo max-height dawalo 0x0
   w kolumnie flex, wiec wysokosc podajemy wprost */
.nav-marki .nav-marka-znak img{ height:28px; max-width:140px; width:auto; object-fit:contain; }
.nav-marki .nav-marka-slowo{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.24rem;
  letter-spacing:.05em; text-transform:uppercase; line-height:1;
}
/* opis dziedziczyl wersaliki i odstepy z ogolnej reguly .nav-sub a,
   przez co lamal sie na trzy wiersze — zdejmujemy je wprost */
.nav-marki .nav-marka-opis{
  color:#b0b0ac; font-size:.82rem; line-height:1.3;
  font-family:'Barlow',sans-serif; font-weight:400;
  text-transform:none; letter-spacing:0;
}
.nav-marki .nav-marka:hover .nav-marka-opis{ color:#e6e6e3; }

@media (max-width:1180px){ .nav-marki{ grid-template-columns:1fr; } }
@media (max-width:980px){
  .nav-mega .nav-kol + .nav-kol{ background:none; border-left:0; }
  .nav-marki{ grid-template-columns:1fr 1fr; padding:4px 0 10px; }
  .nav-marki .nav-marka{ min-height:78px; padding:12px 13px; }
  .nav-marki .nav-marka-znak{ height:24px; }
  .nav-marki .nav-marka-znak img{ height:24px; }
}

/* =====================================================================
   PASEK SEKCJI + WSKAZNIK POSTEPU CZYTANIA
   Strony marek maja po kilkanascie ekranow. Pasek mowi, gdzie jestem,
   ile zostalo i pozwala przeskoczyc dalej bez przewijania wszystkiego.
   Powstaje z JS (js/pasek-sekcji.js) na podstawie atrybutow data-pasek.
   ===================================================================== */
.pasek-sekcji {
  position: sticky; top: var(--nav-h, 70px); z-index: 99;
  /* Spokojny, ciemny pas — ale o ton jasniejszy od nawigacji (#111), zeby
     sie z nia nie zlewal, i z wloskowata kreska marki u gory zamiast
     kolorowego bloku. */
  background: #16161a;
  border-top: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.pasek-linki {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  max-width: 1600px; margin: 0 auto; padding: 0 60px;
  box-sizing: border-box; -webkit-overflow-scrolling: touch;
}
.pasek-linki::-webkit-scrollbar { display: none; }
.pasek-linki a {
  flex: none; position: relative; padding: 13px 16px; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .88rem;
  letter-spacing: .08em; text-transform: uppercase; color: #cfcfc9;
  white-space: nowrap; transition: color .18s, background .18s;
}
.pasek-linki a::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px;
  background: var(--brand, #31A051); transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .2s;
}
.pasek-linki a:hover { color: #fff; }
.pasek-linki a.jest { color: #fff; }
.pasek-linki a.jest::after { transform: scaleX(1); }
.pasek-linki a:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }

/* kotwica ma sie zatrzymac pod nawigacja i paskiem, nie pod sama nawigacja */
[data-pasek] { scroll-margin-top: calc(var(--nav-h, 70px) + var(--pasek-h, 44px) + 8px); }

@media (max-width: 1100px){ .pasek-linki { padding: 0 32px; } }
@media (max-width: 640px){
  .pasek-linki { padding: 0 18px; }
  .pasek-linki a { padding: 11px 13px; font-size: .8rem; letter-spacing: .05em; }
  .pasek-linki a::after { left: 13px; right: 13px; }
}
@media (prefers-reduced-motion: reduce){
  .pasek-postep > i, .pasek-linki a::after { transition: none; }
}

/* =====================================================================
   GALERIA W KARCIE PRODUKTU
   Pasek miniatur pod zdjeciem; buduje go js/galeria-produktu.js na
   podstawie spisu z js/zdjecia-produktow.js. Bez JS zostaje samo zdjecie.
   ===================================================================== */
.blade-card-img.ma-galerie { cursor: zoom-in; }
.blade-card-img.ma-galerie:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
/* delikatna podpowiedz, ze zdjecie da sie powiekszyc */
.blade-card-img.ma-galerie::after {
  content: '⤢'; position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(10,10,10,.6); color: #fff; border-radius: 3px;
  font-size: .95rem; opacity: 0; transition: opacity .18s; pointer-events: none;
}
.blade-card-img.ma-galerie:hover::after,
.blade-card-img.ma-galerie:focus-visible::after { opacity: 1; }

.mini-pasek {
  display: flex; gap: 6px; padding: 8px 10px 0;
  overflow-x: auto; scrollbar-width: none;
}
.mini-pasek::-webkit-scrollbar { display: none; }
.mini {
  flex: none; width: 52px; height: 52px; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid #ddd; border-radius: 2px;
  overflow: hidden; transition: border-color .15s, opacity .15s;
  opacity: .62;
}
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini:hover { opacity: 1; }
.mini.jest { opacity: 1; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mini:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* karty na ciemnym tle (linia XP, „pozostale tarcze”) */
.xp-card .mini, .standard-line-wrapper .mini, .cnc-card .mini { border-color: rgba(255,255,255,.18); }
@media (max-width: 640px){ .mini { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce){ .mini, .blade-card-img.ma-galerie::after { transition: none; } }

/* =====================================================================
   HERO STRONY GLOWNEJ — dwie kolumny
   Prawa polowa byla pustym tlem. Teraz jada w niej dwie tasmy zdjec
   realizacji, w przeciwne strony i z rozna predkoscia. Zdjecia sa te
   same, co w sekcji realizacji — nic nowego do wgrania.
   ===================================================================== */
@media (min-width: 1200px){
  .home-hero-inner {
    display: grid; grid-template-columns: 1.12fr .88fr; gap: 52px; align-items: center;
  }
  /* w dwoch kolumnach naglowek ma wezsze pole — przy dotychczasowym stopniu
     lamal sie na piec wierszy i wypychal lede oraz przyciski pod ekran */
  .home-hero h1 { font-size: clamp(2.6rem, 4.3vw, 4.5rem); }
  .home-hero p.lede { max-width: 54ch; }
  /* zdjecia jada po prawej, wiec przyciemnienie tla moze tam zelzec */
  .home-hero .home-hero-photo::after {
    background:
      linear-gradient(90deg, var(--mono-1) 8%, rgba(10,10,10,.88) 46%, rgba(10,10,10,.72) 100%),
      linear-gradient(180deg, rgba(10,10,10,.85) 0%, transparent 30%, rgba(10,10,10,.9) 100%);
  }
}
.home-hero-tresc { min-width: 0; }

.hero-tasma { display: none; }
@media (min-width: 1200px){
  .hero-tasma {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    height: 74vh; max-height: 680px; overflow: hidden;
    /* gora i dol rozmywaja sie w tlo, zeby tasma nie miala ostrego konca */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    opacity: 0; animation: riseIn 1s ease forwards .8s;
  }
  .tasma-kol { display: flex; flex-direction: column; gap: 14px; will-change: transform; }
  /* lista jest zdublowana, wiec przesuniecie o polowe wysokosci wraca
     dokladnie w punkt wyjscia — petla bez szwu */
  .tasma-kol.w-gore { animation: tasmaGora 52s linear infinite; }
  .tasma-kol.w-dol  { animation: tasmaDol  64s linear infinite; }
  @keyframes tasmaGora { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
  @keyframes tasmaDol  { from { transform: translateY(-50%); } to { transform: translateY(0); } }

  .tasma-kadr {
    position: relative; overflow: hidden; flex: none; background: #101012;
    border: 1px solid rgba(255,255,255,.08);
  }
  .tasma-kadr img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(.25) contrast(1.04) brightness(.86);
  }
  .tasma-kol .tasma-kadr:nth-child(odd)  { aspect-ratio: 4 / 5; }
  .tasma-kol .tasma-kadr:nth-child(even) { aspect-ratio: 1 / 1; }
  .hero-tasma:hover .tasma-kol { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce){
  .tasma-kol { animation: none !important; }
  .hero-tasma { animation: none; opacity: 1; }
}

/* trzy dowody pod przyciskami — to, co klient chce wiedziec od razu */
.hero-dowody {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  opacity: 0; animation: riseIn .8s ease forwards .8s;
}
.hero-dowody li {
  display: flex; flex-direction: column; gap: 3px; font-size: .84rem; color: #9a9a95;
  padding-left: 15px; border-left: 2px solid rgba(255,255,255,.22); line-height: 1.3;
}
.hero-dowody b {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.12rem;
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
@media (max-width: 640px){
  .hero-dowody { margin-top: 30px; gap: 12px 22px; }
  .hero-dowody li { font-size: .78rem; padding-left: 12px; }
  .hero-dowody b { font-size: 1rem; }
}

/* =====================================================================
   KALKULATOR „ILE METROW ZROBISZ” — koszt-metra.html
   Podstrona dziala samodzielnie, a z innych stron otwiera sie w okienku
   (js/popup-kalkulator.js wczytuje ja w ramce z ?okno=1).
   ===================================================================== */
.km-strona {
  max-width: 760px; margin: 0 auto; padding: 56px 24px 72px;
  background: var(--mono-1, #0a0a0a); color: #fff; min-height: 100vh; box-sizing: border-box;
}
body:has(.km-strona) { background: var(--mono-1, #0a0a0a); }

.km-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brand);
}
.km-kicker::before { content: ''; width: 28px; height: 1px; background: var(--brand); }
.km-naglowek h1 {
  margin-top: 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.08; color: #fff;
}
.km-naglowek h1 em { font-style: normal; color: var(--brand); }
.km-lede { margin-top: 14px; font-size: 1rem; color: #b6b6b0; line-height: 1.6; max-width: 62ch; }

.km-form { margin-top: 30px; }
.km-pola { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.km-pola-2 { grid-template-columns: repeat(2, 1fr); margin-top: 12px; }
.km-pole { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.km-pole > span {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: #cfcfc9;
}
.km-pole > span i { font-style: normal; color: #86867e; letter-spacing: .04em; }
.km-pole select, .km-pole input {
  width: 100%; box-sizing: border-box; padding: 12px 13px;
  background: #16161b; border: 1px solid rgba(255,255,255,.16); border-radius: 3px;
  color: #fff; font-family: 'Barlow', sans-serif; font-size: .97rem;
  transition: border-color .18s, background .18s;
}
.km-pole select:focus, .km-pole input:focus {
  outline: none; border-color: var(--brand); background: #1a1a21;
}
.km-pole input::placeholder { color: #6e6e68; }

.km-wiecej { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.km-wiecej > summary {
  list-style: none; cursor: pointer; padding: 14px 0 0; display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .88rem;
  letter-spacing: .06em; text-transform: uppercase; color: #cfcfc9;
}
.km-wiecej > summary::-webkit-details-marker { display: none; }
.km-wiecej > summary::after {
  content: '+'; margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--brand); color: var(--brand); font-size: 1.15rem; line-height: 1;
}
.km-wiecej[open] > summary::after { content: '–'; }
.km-wiecej > summary:hover { color: #fff; }
.km-wiecej > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.km-notka { margin-top: 12px; font-size: .86rem; color: #8f8f89; line-height: 1.55; }

.km-blad {
  margin-top: 16px; padding: 11px 14px; border-left: 3px solid #e8425a;
  background: rgba(232,66,90,.1); color: #ffb9c4; font-size: .92rem;
}
.km-licz { margin-top: 22px; }

/* ---------- wynik ---------- */
.km-wynik { margin-top: 34px; }
.km-glowna {
  padding: 26px 24px; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, transparent), rgba(255,255,255,.02));
}
.km-duza {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; line-height: 1;
  font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--brand2, #8fb4ff);
}
.km-duza.km-gorzej { color: #ffb9c4; }
.km-duza-opis { margin-top: 12px; font-size: .99rem; color: #dcdcd6; line-height: 1.5; }
.km-duza-opis b { color: #fff; }
.km-zl {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .96rem; color: #dcdcd6;
}
.km-zl b { color: #fff; font-size: 1.1rem; }

.km-tabela { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: .92rem; }
.km-tabela th {
  text-align: left; padding: 9px 10px; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: #9a9a93; border-bottom: 1px solid rgba(255,255,255,.16);
}
.km-tabela td { padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,.08); color: #dcdcd6; }
.km-tabela td b { color: #fff; display: block; }
.km-tabela td i { font-style: normal; display: block; margin-top: 3px; font-size: .78rem; color: #8f8f89; }
.km-tabela .km-teraz td { color: #9a9a93; }
.km-tabela .km-najlepszy td { background: color-mix(in srgb, var(--brand) 12%, transparent); }

.km-uwagi { margin: 16px 0 0; padding-left: 18px; color: #9a9a93; font-size: .86rem; line-height: 1.6; }
.km-zastrzezenie { margin-top: 18px; font-size: .84rem; color: #86867e; line-height: 1.6; }
.km-akcje { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 720px){
  .km-strona { padding: 36px 18px 54px; }
  .km-pola { grid-template-columns: 1fr 1fr; }
  .km-akcje > a { flex: 1 1 100%; text-align: center; }
  .km-tabela { font-size: .86rem; }
  .km-tabela th:nth-child(3), .km-tabela td:nth-child(3) { display: none; }
}

/* ---------- ta sama strona wczytana w okienku ---------- */
.km-w-oknie .km-strona { min-height: 0; padding: 30px 26px 34px; }
.km-w-oknie .km-lede { font-size: .94rem; }

/* =====================================================================
   OKIENKO Z KALKULATOREM (js/popup-kalkulator.js)
   ===================================================================== */
.kalk-okno {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(6,6,8,.82); backdrop-filter: blur(6px);
  padding: 28px 20px; overflow-y: auto;
}
.kalk-okno.otwarte { display: flex; align-items: flex-start; justify-content: center; }
body.kalk-okno-on { overflow: hidden; }
.kalk-okno-pudlo {
  position: relative; width: 100%; max-width: 820px; margin: auto;
  background: var(--mono-1, #0a0a0a); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: kalkWjazd .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes kalkWjazd { from { opacity: 0; transform: translateY(14px); } }
.kalk-okno iframe {
  display: block; width: 100%; height: min(82vh, 860px); border: 0; background: var(--mono-1, #0a0a0a);
}
.kalk-okno-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: rgba(10,10,10,.8); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-size: 1.5rem; line-height: 1; transition: background .18s, border-color .18s;
}
.kalk-okno-x:hover { background: var(--brand); border-color: var(--brand); }
.kalk-okno-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 600px){
  .kalk-okno { padding: 0; }
  .kalk-okno-pudlo { max-width: none; min-height: 100%; border: 0; }
  .kalk-okno iframe { height: 100vh; }
}
@media (prefers-reduced-motion: reduce){ .kalk-okno-pudlo { animation: none; } }

/* pas zapraszajacy do kalkulatora (strona glowna) */
.km-pas { background: #0d0d10; color: #fff; position: relative; overflow: hidden; }
.km-pas::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.km-pas-inner {
  position: relative; display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 48px; align-items: center; padding-top: 68px; padding-bottom: 68px;
}
.km-pas h2 {
  margin-top: 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08;
}
.km-pas h2 em { font-style: normal; color: var(--brand); }
.km-pas p { margin-top: 14px; color: #b6b6b0; line-height: 1.65; max-width: 58ch; }
.km-pas-akcje { margin-top: 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.km-pas-nota { font-size: .84rem; color: #86867e; }
.km-pas-liczby { display: grid; gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.km-pas-liczby > div { background: #111116; padding: 18px 20px; }
.km-pas-liczby b {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 1.7rem; line-height: 1; color: var(--brand2, #8fb4ff);
}
.km-pas-liczby span { display: block; margin-top: 6px; font-size: .82rem; color: #9a9a93; line-height: 1.4; }
@media (max-width: 980px){
  .km-pas-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; padding-bottom: 48px; }
}

/* belka powrotna na samodzielnej podstronie kalkulatora */
.km-belka {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 760px; margin: 0 auto; padding: 20px 24px 0; box-sizing: border-box;
}
.km-belka-logo img { height: 26px; width: auto; display: block; }
.km-belka-wroc {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase; color: #9a9a93; text-decoration: none;
  transition: color .18s;
}
.km-belka-wroc:hover { color: #fff; }
.km-belka-wroc:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.km-w-oknie .km-belka { display: none; }
@media (max-width: 720px){ .km-belka { padding: 16px 18px 0; } }

/* ---------- logotyp w odznace dystrybutora ----------
   Wczesniej kazda strona miala wpisana wlasna szerokosc w atrybucie style.
   Przy logotypie szerokim i niskim (Lantania 4,9:1) dawalo to napis o polowe
   mniejszy niz u sasiadow — ABR mial litery 103 px, Lantania 50 px.
   Sterujemy wiec wysokoscia, dobrana tak, zeby same litery mialy okolo
   55 px wszedzie. Udzial napisu w wysokosci pliku: evds 66%, wodiam 40%,
   abr 98%, lantania (wersja pionowa) 37%, aardwolf 88%. */
.hero-badge-dist .dist-znak {
  display: block; margin: 0 auto 14px; width: auto; max-width: 100%;
  height: 62px; object-fit: contain;
}
.hero-badge-dist .dist-znak[src*="logo-evds"]          { height: 83px; }
.hero-badge-dist .dist-znak[src*="logo-wodiam."]       { height: 88px; }
.hero-badge-dist .dist-znak[src*="logo-abr"]           { height: 60px; }
.hero-badge-dist .dist-znak[src*="logo-lantania-pion"] { height: 145px; }
.hero-badge-dist .dist-znak[src*="logo-aardwolf"]      { height: 62px; }
/* picture nie moze rozsypac ukladu odznaki */
.hero-badge-dist picture { display: block; }

/* =====================================================================
   STRONA BLEDU 404
   Bez nawigacji i stopki — tu liczy sie jedno: szybko wrocic na wlasciwa
   strone. Adresy w niej sa bezwzgledne, bo blad moze wyskoczyc pod
   dowolna sciezka.
   ===================================================================== */
.e404 {
  min-height: 100vh; background: var(--mono-1, #0a0a0a); color: #fff;
  display: flex; align-items: center; position: relative; overflow: hidden;
}
.e404::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.e404-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 56px 24px; width: 100%; box-sizing: border-box; }
.e404-logo img { height: 30px; width: auto; display: block; margin-bottom: 34px; }
.e404-kod {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .8rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brand);
}
.e404-kod::before { content: ''; width: 28px; height: 1px; background: var(--brand); }
.e404 h1 {
  margin-top: 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.06;
}
.e404 h1 em { font-style: normal; color: var(--brand); }
.e404-lede { margin-top: 16px; color: #b6b6b0; line-height: 1.65; max-width: 56ch; }

.e404-linki { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.e404-linki a {
  display: block; padding: 20px 22px; background: #101014; text-decoration: none;
  transition: background .18s;
}
.e404-linki a:hover { background: #17171d; }
.e404-linki a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.e404-linki b {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.e404-linki span { display: block; margin-top: 6px; font-size: .86rem; color: #9a9a93; line-height: 1.45; }
.e404-kontakt { margin-top: 30px; font-size: .94rem; color: #9a9a93; line-height: 1.7; }
.e404-kontakt a { color: var(--brand2, #8fb4ff); }
@media (max-width: 600px){
  .e404-linki { grid-template-columns: 1fr; }
  .e404-inner { padding: 40px 18px; }
}

/* koszt metra biezacego — blok w wyniku kalkulatora */
.km-blok { margin-top: 16px; }
.km-blok + .km-blok { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.km-blok-tytul {
  display: block; margin-bottom: 10px; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand2, #8fb4ff);
}
.km-pola-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px){ .km-pola-3 { grid-template-columns: 1fr 1fr; } }

.km-koszt {
  margin-top: 26px; padding: 22px 22px 20px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03);
}
.km-koszt-tytul {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.15rem;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.km-koszt-tytul i { font-style: normal; font-size: .74rem; letter-spacing: .12em; color: #8f8f89; }
.km-tabela-koszt { margin-top: 14px; }
.km-tabela-koszt td:not(:first-child), .km-tabela-koszt th:not(:first-child) { text-align: right; }
.km-koszt-wniosek {
  margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--brand);
  font-size: .99rem; color: #dcdcd6; line-height: 1.55;
}
.km-koszt-wniosek b { color: #fff; }
.km-koszt-wniosek.km-gorzej { border-left-color: #e8425a; }

/* tabela kosztu metra ma kolumne na kazde nasze narzedzie — przy kilku
   pozycjach na waskim ekranie przewija sie w poziomie zamiast rozpychac strone */
.km-tabela-ramka { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; }
.km-tabela-ramka .km-tabela { margin-top: 0; min-width: 100%; }
.km-tabela-koszt th i {
  display: block; margin-top: 3px; font-style: normal; font-weight: 400;
  font-size: .72rem; letter-spacing: .04em; text-transform: none; color: #8f8f89;
}
.km-tabela-koszt .km-suma td { border-top: 1px solid rgba(255,255,255,.2); }
.km-tabela-koszt .km-td-najlepszy { background: color-mix(in srgb, var(--brand) 22%, transparent); }

/* Menu z jedną kolumną (np. bez listy „Według zastosowania") — węższy panel */
@media (min-width: 981px){
  .nav-mega:has(> .nav-kol:only-child){ width: 470px; grid-template-columns: 1fr; }
}


/* Pasek „Strona w budowie” — tylko w wersji publ/ */
.w-budowie{
  position:relative; z-index:98;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:9px 16px; background:#f5c518; color:#111;
  font-size:.86rem; line-height:1.4; text-align:center;
}
.w-budowie a{ color:#111; font-weight:600; text-decoration:underline; white-space:nowrap; }
.w-budowie-kropka{ width:8px; height:8px; flex:none; border-radius:50%; background:#111;
  animation:wBudowie 1.6s ease-in-out infinite; }
@keyframes wBudowie{ 50%{ opacity:.25; } }
.w-budowie + *{ margin-top:0 !important; }

/* =====================================================================
   NOWY UKLAD STRONY MARKI (wzor: evds.html) — prefiks ev-
   Mniej warstw, jeden glowny przycisk na ekran, produkt na pierwszym planie.
   ===================================================================== */
.ev-wrap { max-width: 1600px; margin: 0 auto; padding: 0 60px; }
.ev-kicker {
  display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand);
}
.ev-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 0 30px; background: var(--brand); color: #fff; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.02rem;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 2px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.ev-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--brand); }
.ev-link {
  color: inherit; text-decoration: none; font-weight: 500; opacity: .85;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.ev-link:hover { opacity: 1; }

/* --- hero --- */
.ev-hero {
  position: relative; overflow: hidden; color: #fff; padding: 0;
  background:
    radial-gradient(60% 70% at 78% 50%, color-mix(in srgb, var(--brand) 32%, transparent), transparent 70%),
    #0a0c12;
}
.ev-hero-siatka {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 85%);
}
.ev-hero-inner {
  position: relative; max-width: 1600px; margin: 0 auto; padding: 56px 60px 72px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.ev-hero h1 {
  margin: 18px 0 22px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(2.7rem, 5.2vw, 4.9rem); line-height: .95; text-transform: uppercase; letter-spacing: -.01em;
}
.ev-hero h1 em { font-style: normal; color: var(--brand2); }
.ev-lede { font-size: 1.15rem; line-height: 1.65; color: #c8ccd6; max-width: 46ch; margin: 0; }
.ev-hero-akcje { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 34px; }
.ev-hero-akcje .ev-link { color: #fff; }
.ev-dystrybutor {
  display: flex; align-items: center; gap: 16px; margin-top: 34px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1); color: #9aa0ad; font-size: .92rem; max-width: 520px;
}
.ev-dystrybutor img { height: 34px; width: auto; flex: none; }

.ev-hero-tarcze { position: relative; aspect-ratio: 1 / 1; max-width: 560px; justify-self: center; width: 100%; }
.ev-poswiata {
  position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 68%);
  filter: blur(30px);
}
.ev-t { position: absolute; display: block; border-radius: 50%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.ev-t-tyl1 { width: 52%; top: 2%; right: -2%; opacity: .55; animation: evObrot 70s linear infinite; }
.ev-t-tyl2 { width: 46%; bottom: 0; left: -4%; opacity: .5; animation: evObrot 90s linear infinite reverse; }
.ev-t-przod { width: 74%; top: 13%; left: 13%; animation: evUnos 7s ease-in-out infinite; }
@keyframes evObrot { to { transform: rotate(360deg); } }
@keyframes evUnos { 50% { transform: translateY(-12px); } }
.ev-wynik {
  position: absolute; left: -2%; bottom: 10%; padding: 14px 18px; border-radius: 3px;
  background: rgba(10,12,18,.78); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--brand);
  display: flex; flex-direction: column; gap: 2px;
}
.ev-wynik b { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2rem; line-height: 1; }
.ev-wynik span { font-size: .82rem; color: #b9bfcb; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .ev-t { animation: none !important; } }

/* --- oferta --- */
.ev-oferta { background: #f3f3ef; padding: 72px 0 80px; }
.ev-naglowek { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 30px; }
.ev-naglowek h2, .ev-testy h2, .ev-producent h2, .ev-koniec h2 {
  margin: 10px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; text-transform: uppercase; color: #0d0f14;
}
.ev-naglowek p { max-width: 46ch; margin: 0; color: #555a64; line-height: 1.6; }
.ev-naglowek p a { color: var(--brand); }
.ev-filtr { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.ev-filtr button {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid #d9d9d3; color: #23262d;
  font: 600 .95rem 'Barlow', sans-serif; transition: background .15s, color .15s, border-color .15s;
}
.ev-filtr button:hover { border-color: var(--brand); }
.ev-filtr button.on { background: #0d0f14; border-color: #0d0f14; color: #fff; }
.ev-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ev-karta {
  background: #fff; border: 1px solid #e3e3dd; border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s;
}
.ev-karta[hidden] { display: none; }
.ev-karta:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(13,15,20,.45); }
.ev-karta .ev-karta-zdj { background: #fff; padding-bottom: 78%; }
.ev-karta .ev-karta-zdj img { object-fit: contain; padding: 22px; transition: transform .5s; }
.ev-karta:hover .ev-karta-zdj img { transform: scale(1.04) rotate(-4deg); }
.ev-karta .mini-pasek { padding: 0 18px; }
.ev-karta-tresc { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.ev-znacznik {
  align-self: flex-start; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); padding: 3px 8px; border-radius: 2px; margin-bottom: 12px;
}
.ev-karta h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.9rem; line-height: 1; color: #0d0f14; }
.ev-karta h3 small { font-size: .55em; color: var(--brand); font-weight: 800; margin-left: 4px; }
.ev-do { margin: 8px 0 12px; font-weight: 600; color: #0d0f14; }
.ev-karta-tresc > p:not(.ev-do) { margin: 0; color: #4d525c; line-height: 1.6; font-size: .97rem; }
.ev-parametry { margin: 18px 0 20px; padding: 0; display: grid; gap: 0; border-top: 1px solid #ecece6; }
.ev-parametry div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #ecece6; font-size: .9rem; }
.ev-parametry dt { color: #5f6470; }
.ev-parametry dd { margin: 0; font-weight: 600; color: #0d0f14; text-align: right; }
.ev-karta-link { margin-top: auto; color: var(--brand); font-weight: 700; text-decoration: none; }
.ev-karta-link:hover { text-decoration: underline; }
.ev-brak { margin: 24px 0 0; color: #555a64; }

/* --- bezplatne testy --- */
.ev-testy { background: #0a0c12; color: #fff; padding: 72px 0; }
.ev-testy h2 { color: #fff; max-width: 18ch; }
.ev-testy h2 em { font-style: normal; color: var(--brand2); }
.ev-testy-gora { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 46px; }
.ev-kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: krok; }
.ev-kroki li {
  counter-increment: krok; padding: 26px 30px 6px 0; margin-right: 30px;
  border-top: 2px solid rgba(255,255,255,.12); color: #b9bfcb; line-height: 1.6; position: relative;
}
.ev-kroki li::before {
  content: '0' counter(krok); position: absolute; top: -2px; left: 0; width: 60px; height: 2px; background: var(--brand);
  font: 900 .9rem 'Barlow Condensed', sans-serif; color: var(--brand2); padding-top: 8px; display: none;
}
.ev-kroki b { display: block; margin-bottom: 8px; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; }
.ev-kroki b::before { content: '0' counter(krok) '  '; color: var(--brand2); white-space: pre; }

/* --- producent --- */
.ev-producent { background: #fff; padding: 72px 0; }
.ev-producent-siatka { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 70px; align-items: start; }
.ev-producent p { color: #4d525c; line-height: 1.7; margin: 18px 0 0; max-width: 62ch; }
.ev-fakty { margin: 0; border-top: 2px solid #0d0f14; }
.ev-fakty div { padding: 16px 0; border-bottom: 1px solid #e6e6e0; }
.ev-fakty dt { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #5f6470; font-weight: 600; }
.ev-fakty dd { margin: 4px 0 0; font-weight: 600; color: #0d0f14; font-size: 1.05rem; }

/* --- zakonczenie --- */
.ev-koniec { background: #f3f3ef; padding: 72px 0; text-align: center; }
.ev-koniec p { color: #4d525c; margin: 14px auto 30px; max-width: 52ch; line-height: 1.6; }
.ev-koniec-akcje { display: flex; justify-content: center; align-items: center; gap: 26px; flex-wrap: wrap; }
.ev-koniec .ev-link { color: #0d0f14; }

@media (max-width: 980px) {
  .ev-hero-inner { grid-template-columns: 1fr; padding: 32px 24px 48px; gap: 8px; }
  .ev-hero-tarcze { max-width: 360px; margin-top: 10px; }
  .ev-wrap { padding: 0 24px; }
  .ev-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-kroki { grid-template-columns: 1fr; }
  .ev-kroki li { margin-right: 0; }
  .ev-producent-siatka { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .ev-karty { grid-template-columns: 1fr; }
  .ev-filtr { flex-wrap: nowrap; overflow-x: auto; margin-right: -24px; padding-bottom: 4px; scrollbar-width: none; }
  .ev-filtr button { flex: none; }
  .ev-oferta, .ev-producent, .ev-testy, .ev-koniec, .ev-tempo { padding: 52px 0; }
  .ev-wynik { left: 0; bottom: 4%; }
}
body[data-bez-paska-kontaktu] .ctabar { display: none !important; }

/* --- szybciej czy dluzej (evds) --- */
.ev-tempo { background: #0a0c12; color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.ev-tempo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 85% 50%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%);
}
.ev-tempo .ev-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.ev-tempo h2 { margin: 10px 0 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; text-transform: uppercase; }
.ev-tempo h2 em { font-style: normal; color: var(--brand2); }
.ev-tempo-opis { color: #b9bfcb; line-height: 1.65; margin: 0 0 26px; max-width: 44ch; }
.ev-przelacznik { display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.ev-przelacznik button {
  min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: #c8ccd6; font: 700 1rem 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.ev-przelacznik button.on { background: var(--brand); color: #fff; }
.ev-tempo-zrodlo { margin-top: 18px; font-size: .82rem; color: #7d8391; }
.ev-tempo-panel { display: grid; gap: 26px; }
.ev-miara-gora { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.ev-miara-gora span { color: #9aa0ad; font-size: .92rem; }
.ev-miara-gora b { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ev-miara-tor { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.ev-miara-tor i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand2)); transition: width .7s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 980px) { .ev-tempo .ev-wrap { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 420px) { .ev-przelacznik button { padding: 0 14px; font-size: .92rem; } }
.ev-miara-gora b { white-space: nowrap; }
@media (max-width: 640px) {
  .ev-miara-gora b { font-size: 1.9rem; }
  .ev-karta .ev-karta-zdj { padding-bottom: 62%; }
  .ev-karta .ev-karta-zdj img { padding: 14px; }
}
.ev-miara-inna .ev-miara-gora b { font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: #9aa0ad; }
.ev-miara-inna .ev-miara-tor i { background: rgba(255,255,255,.28); }
.ev-miara-nasza .ev-miara-gora span { color: #fff; font-weight: 700; letter-spacing: .04em; }
.ev-miara-nasza .ev-miara-tor { height: 14px; }
.ev-tempo-zywotnosc { margin: 4px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: #b9bfcb; }
.ev-tempo-zywotnosc b { color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; margin-left: 6px; }

/* --- pasek realizacji (evds) --- */
.ev-realizacje { background: #0a0c12; padding: 0 0 56px; overflow: hidden; }
.ev-realizacje-gora { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 26px; }
.ev-realizacje-gora p { margin: 0; color: #9aa0ad; font-size: .95rem; }
.ev-tasma { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ev-tasma-tor { display: flex; gap: 16px; width: max-content; animation: evTasma 60s linear infinite; }
.ev-tasma:hover .ev-tasma-tor { animation-play-state: paused; }
@keyframes evTasma { to { transform: translateX(calc(-50% - 8px)); } }
.ev-kadr { position: relative; margin: 0; width: 340px; height: 230px; border-radius: 4px; overflow: hidden; flex: none; }
.ev-kadr img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.ev-kadr:hover img { transform: scale(1.06); }
.ev-kadr figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: .9rem; font-weight: 500;
}
@media (max-width: 640px) { .ev-kadr { width: 250px; height: 170px; } .ev-realizacje { padding-bottom: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .ev-tasma-tor { animation: none; }
  .ev-tasma { overflow-x: auto; mask-image: none; }
}

/* --- film z ciecia w sekcji posuwu (evds) --- */
.ev-tempo .ev-wrap { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.ev-film { position: relative; margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: #000;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.ev-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-film figcaption {
  position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 99px; background: rgba(10,12,18,.72); backdrop-filter: blur(8px);
  color: #fff; font-size: .82rem; font-weight: 600;
}
.ev-film-kropka { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: wBudowie 1.4s ease-in-out infinite; }
@media (max-width: 1100px) {
  .ev-tempo .ev-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ev-film { grid-row: span 2; }
}
@media (max-width: 760px) {
  .ev-tempo .ev-wrap { grid-template-columns: 1fr; }
  .ev-film { grid-row: auto; max-width: 420px; order: 2; }
  .ev-tempo-panel { order: 3; }
}
@media (prefers-reduced-motion: reduce) { .ev-film-kropka { animation: none; } }

/* --- technologie (evds) --- */
.ev-tech { background: #fff; padding: 72px 0; }
.ev-tech .ev-naglowek h2 { color: #0d0f14; }
.ev-tech-siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid #0d0f14; }
.ev-tech-el { padding: 26px 26px 6px 0; margin-right: 26px; display: flex; flex-direction: column; }
.ev-tech-el + .ev-tech-el { padding-left: 26px; margin-right: 0; border-left: 1px solid #e6e6e0; }
.ev-tech-el span { font: 900 1rem 'Barlow Condensed', sans-serif; color: var(--brand); }
.ev-tech-el h3 { margin: 8px 0 10px; font: 900 1.45rem/1.05 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.ev-tech-el p { margin: 0 0 14px; color: #4d525c; line-height: 1.6; font-size: .96rem; }
.ev-tech-el small { margin-top: auto; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #5f6470; }
@media (max-width: 980px) {
  .ev-tech-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-tech-el, .ev-tech-el + .ev-tech-el { padding: 22px 18px 18px 0; margin: 0; border-left: 0; border-bottom: 1px solid #e6e6e0; }
}
@media (max-width: 560px) { .ev-tech-siatka { grid-template-columns: 1fr; } .ev-tech { padding: 52px 0; } }

/* wyrownanie kart: znacznik zawsze zajmuje miejsce, opis rosnie,
   tabelka i link trzymaja sie dolu karty */
.ev-znacznik-pusty { visibility: hidden; }
.ev-karta h3 { min-height: 1em; }
.ev-karta h3 small { font-size: .52em; letter-spacing: .06em; }
.ev-do { min-height: 3.2em; }
.ev-karta-tresc > p:not(.ev-do) { flex: 1; }
.ev-parametry dd { max-width: 70%; }
@media (max-width: 640px) { .ev-do { min-height: 0; } .ev-znacznik-pusty { display: none; } }

/* --- THE KING w akcji: trzy filmy (evds) --- */
.ev-akcja { background: #0a0c12; padding: 8px 0 64px; }
.ev-akcja-gora { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 26px; }
.ev-akcja-gora p { margin: 0; color: #9aa0ad; font-size: .95rem; }
.ev-akcja-filmy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* sekcja posuwu znow w dwoch kolumnach, bez filmu */
.ev-tempo .ev-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 1100px) { .ev-tempo .ev-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ev-tempo .ev-wrap { grid-template-columns: 1fr; }
  .ev-akcja-filmy { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -24px; padding-right: 24px; scrollbar-width: none; }
  .ev-akcja-filmy .ev-film { scroll-snap-align: start; max-width: none; }
  .ev-akcja { padding-bottom: 44px; }
}
.ev-akcja-filmy .ev-film { grid-row: auto; order: 0; max-width: none; }

/* --- THE KING w akcji: bento z duzym filmem (evds) --- */
.ev-akcja { background: #0a0c12; padding: 12px 0 72px; }
.ev-akcja-siatka { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 16px; height: 640px; }
.ev-akcja-siatka .ev-film { aspect-ratio: auto; height: 100%; }
.ev-film-duzy { grid-row: span 2; }
.ev-film-duzy::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,7,12,.88) 0%, rgba(5,7,12,.55) 38%, transparent 70%),
              linear-gradient(0deg, rgba(5,7,12,.6), transparent 40%);
}
.ev-film-nakladka { position: absolute; z-index: 2; left: 40px; bottom: 40px; max-width: 430px; color: #fff; }
.ev-film-nakladka h2 { margin: 10px 0 12px; font: 900 clamp(2.4rem, 4.6vw, 4.2rem)/.95 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.ev-film-nakladka h2 em { font-style: normal; color: var(--brand2); }
.ev-film-nakladka p { margin: 0 0 22px; color: #c8ccd6; line-height: 1.6; }
.ev-film-nakladka .ev-btn { gap: 10px; border: 0; cursor: pointer; }
.ev-film-tempo {
  position: absolute; z-index: 2; top: 16px; right: 16px; padding: 6px 12px; border-radius: 99px;
  background: rgba(10,12,18,.7); backdrop-filter: blur(8px); color: #fff; font: 700 .78rem 'Barlow', sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.ev-film video { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.ev-film:hover video { transform: scale(1.04); }
.ev-film-graj {
  position: absolute; z-index: 2; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(10,12,18,.55); backdrop-filter: blur(8px); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s;
}
.ev-film-graj:hover { background: var(--brand); transform: scale(1.08); }
/* pelne nagranie */
.ev-kino {
  position: fixed; inset: 0; z-index: 1000; background: rgba(4,5,8,.94); display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 16px 24px;
}
.ev-kino.otwarte { display: flex; }
.ev-kino video { max-height: calc(100vh - 120px); max-width: 100%; border-radius: 6px; background: #000; }
.ev-kino-tytul { margin: 0; color: #c8ccd6; font-weight: 600; }
.ev-kino-x {
  position: absolute; top: 14px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.1); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.ev-kino-x:hover { background: rgba(255,255,255,.2); }
@media (max-width: 900px) {
  .ev-akcja-siatka { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .ev-film-duzy { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5 !important; height: auto; }
  .ev-akcja-siatka .ev-film:not(.ev-film-duzy) { aspect-ratio: 4 / 5; height: auto; }
  .ev-film-duzy video { object-position: 30% 50%; }
  .ev-film-duzy::after { background: linear-gradient(0deg, rgba(5,7,12,.92) 0%, rgba(5,7,12,.5) 45%, transparent 75%); }
  .ev-film-nakladka { left: 22px; right: 22px; bottom: 22px; }
}
@media (max-width: 760px) {
  .ev-akcja-filmy, .ev-akcja-siatka { overflow: visible; margin-right: 0; padding-right: 0; grid-auto-flow: row; }
}
.ev-film figcaption.ev-film-tempo { left: auto; bottom: auto; top: 16px; right: 16px; }

/* =====================================================================
   WODIAM w ukladzie ev- (zielony kolor marki z --brand)
   ===================================================================== */
.ev-karta .ev-karta-zdj-ciemne { background: #060a07; }
.ev-karta .ev-karta-zdj-ciemne img { object-fit: cover; padding: 0; }
.ev-karta:hover .ev-karta-zdj-ciemne img { transform: scale(1.05); }
.wo-hero-tarcze .ev-t {
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 52%, transparent 66%);
          mask-image: radial-gradient(circle at 50% 46%, #000 52%, transparent 66%);
  filter: none;
}
.wo-hero-tarcze .ev-t-przod { width: 86%; top: 6%; left: 7%; }
.wo-hero-tarcze .ev-t-tyl1 { width: 58%; opacity: .5; }
.wo-hero-tarcze .ev-t-tyl2 { width: 52%; opacity: .45; }
/* dwa filmy: maly obok duzego na cala wysokosc */
.ev-akcja-dwa .ev-film:not(.ev-film-duzy) { grid-row: span 2; }
@media (max-width: 900px) {
  .ev-akcja-dwa { grid-template-columns: 1fr; }
  .ev-akcja-dwa .ev-film:not(.ev-film-duzy) { grid-row: auto; aspect-ratio: 4 / 5; max-width: 420px; }
}
/* narzedzia CNC */
.ev-cnc { background: #0a0c12; color: #fff; padding: 72px 0; }
.ev-cnc .ev-naglowek h2 { color: #fff; }
.ev-cnc .ev-naglowek p { color: #9aa0ad; }
.ev-cnc-siatka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ev-cnc-el { background: #12151d; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; transition: transform .25s, border-color .25s; }
.ev-cnc-el:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.ev-cnc-el img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #fff; }
.ev-cnc-el h3 { margin: 16px 18px 8px; font: 900 1.3rem/1.05 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.ev-cnc-el p { margin: 0 18px 20px; color: #9aa0ad; font-size: .92rem; line-height: 1.55; }
@media (max-width: 1100px) { .ev-cnc-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ev-cnc-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ev-cnc { padding: 52px 0; } .ev-cnc-el h3 { font-size: 1.1rem; } }
@media (max-width: 980px) { .wo-hero-tarcze { margin-top: 40px; } }

/* =====================================================================
   LANTANIA w ukladzie ev-
   ===================================================================== */
.lan-hero-wizual { position: relative; aspect-ratio: 1 / 1; max-width: 540px; width: 100%; justify-self: center; }
.lan-hero-foto { position: absolute; inset: 4% 8% 14% 4%; margin: 0; border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.lan-hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lan-hero-butelka { position: absolute; width: 34%; aspect-ratio: 1 / 1; border-radius: 8px; background: #fff; padding: 10px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); animation: evUnos 7s ease-in-out infinite; }
.lan-hero-butelka img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lan-b1 { right: 0; top: 30%; }
.lan-b2 { right: 22%; bottom: 0; width: 28%; animation-delay: -3s; }
.lan-hero-wizual .ev-wynik { left: -2%; bottom: 6%; }
@media (prefers-reduced-motion: reduce) { .lan-hero-butelka { animation: none; } }
@media (max-width: 980px) { .lan-hero-wizual { max-width: 380px; margin-top: 30px; } }

/* referencje */
.lan-ref { background: #0a0c12; padding: 0 0 44px; overflow: hidden; }
.lan-ref-gora { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; margin-bottom: 16px; }
.lan-ref-tasma { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lan-ref-tor { display: flex; gap: 0; width: max-content; animation: evTasma 55s linear infinite; }
.lan-ref-tor span { padding: 0 34px; border-left: 1px solid rgba(255,255,255,.12); color: #c8ccd6; font: 700 1.25rem 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .lan-ref-tor { animation: none; flex-wrap: wrap; width: auto; } }

/* RAKU */
.lan-raku { background: #0a0c12; color: #fff; padding: 72px 0; }
.lan-raku-siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lan-raku-foto { margin: 0; border-radius: 6px; overflow: hidden; position: relative; }
.lan-raku-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.lan-raku-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 22px 18px; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #e6e8ee; font-size: .92rem; line-height: 1.5; }
.lan-raku h2 { margin: 10px 0 16px; font: 900 clamp(2.2rem, 4vw, 3.4rem)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.lan-raku h2 em { font-style: normal; color: var(--brand2); }
.lan-raku-lede { color: #c8ccd6; line-height: 1.65; margin: 0 0 24px; }
.lan-raku-cechy { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.lan-raku-cechy li { padding: 16px 16px 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #9aa0ad; font-size: .93rem; line-height: 1.5; }
.lan-raku-cechy b { display: block; color: #fff; font: 800 1.15rem 'Barlow Condensed', sans-serif; text-transform: uppercase; margin-bottom: 4px; }
.lan-raku-gdzie { color: #9aa0ad; font-size: .93rem; line-height: 1.6; margin: 0 0 26px; }
.lan-raku-gdzie b { color: #fff; }
@media (max-width: 900px) { .lan-raku-siatka { grid-template-columns: 1fr; gap: 32px; } .lan-raku-foto img { aspect-ratio: 16 / 10; } }
@media (max-width: 520px) { .lan-raku-cechy { grid-template-columns: 1fr; } .lan-raku { padding: 52px 0; } }

/* katalog: jasne karty z butelkami */
.lan-katalog.ev-oferta .lan-grupa { background: none; padding: 0; margin: 0 0 44px; border: 0; }
.lan-katalog.ev-oferta .lan-grupa[hidden] { display: none; }
.lan-katalog.ev-oferta .lan-grupa-head { display: block; margin: 0 0 18px; padding: 0; border: 0; }
.lan-katalog.ev-oferta .lan-grupa-head h3 { margin: 0; color: #0d0f14; font: 900 1.7rem 'Barlow Condensed', sans-serif; text-transform: uppercase; display: flex; align-items: baseline; gap: 12px; }
.lan-katalog.ev-oferta .lan-grupa-head h3 span { font: 600 .85rem 'Barlow', sans-serif; color: #5f6470; text-transform: none; letter-spacing: 0; }
.lan-katalog.ev-oferta .lan-grupa-head p { margin: 6px 0 0; color: #555a64; max-width: 70ch; line-height: 1.55; }
.lan-katalog.ev-oferta .lan-produkty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lan-katalog.ev-oferta .lan-produkt {
  background: #fff; border: 1px solid #e3e3dd; border-radius: 4px; padding: 0 0 18px; color: #0d0f14;
  display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; overflow: hidden;
}
.lan-katalog.ev-oferta .lan-produkt:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(13,15,20,.45); }
.lan-zdj { aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid #efefea; }
.lan-zdj img { width: 100%; height: 100%; object-fit: contain; padding: 14px; display: block; transition: transform .5s; }
.lan-produkt:hover .lan-zdj img { transform: scale(1.05); }
.lan-zdj-brak { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, #fff), #fff); }
.lan-zdj-brak span { font: 900 1.6rem 'Barlow Condensed', sans-serif; color: var(--brand); letter-spacing: .04em; }
.lan-katalog.ev-oferta .lan-produkt h4 { margin: 16px 18px 4px; font: 900 1.35rem 'Barlow Condensed', sans-serif; color: #0d0f14; letter-spacing: .01em; }
.lan-katalog.ev-oferta .lan-typ { margin: 0 18px 8px; color: var(--brand); font-weight: 700; font-size: .82rem; text-transform: none; letter-spacing: 0; }
.lan-katalog.ev-oferta .lan-opis { margin: 0 18px; color: #4d525c; font-size: .9rem; line-height: 1.55; }
@media (max-width: 1100px) { .lan-katalog.ev-oferta .lan-produkty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lan-katalog.ev-oferta .lan-produkty { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lan-katalog.ev-oferta .lan-produkt h4 { font-size: 1.15rem; } }

/* =====================================================================
   ABR w ukladzie ev-
   ===================================================================== */
.abr-skok { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.abr-skok a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px;
  background: #fff; border: 1px solid #d9d9d3; color: #23262d; text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: border-color .15s, background .15s, color .15s;
}
.abr-skok a:hover { background: #0d0f14; border-color: #0d0f14; color: #fff; }
.abr-katalog .grupa-anchor { scroll-margin-top: 140px; }
.abr-katalog .grupa-anchor .section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; color: #0d0f14; }
.abr-katalog .grupa-anchor .section-label { color: var(--brand); }
.abr-tech { margin-top: 48px; background: #0a0c12; color: #fff; border-radius: 6px; overflow: hidden; }
.abr-tech summary {
  list-style: none; cursor: pointer; padding: 26px 30px; display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: center;
}
.abr-tech summary::-webkit-details-marker { display: none; }
.abr-tech summary .ev-kicker { grid-column: 1; }
.abr-tech summary b { grid-column: 1; font: 900 clamp(1.4rem, 2.4vw, 2rem)/1.05 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.abr-tech summary i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-weight: 700; color: var(--brand2); border: 1px solid currentColor; border-radius: 999px; padding: 8px 18px; }
.abr-tech[open] summary i { font-size: 0; }
.abr-tech[open] summary i::after { content: 'Zwiń'; font-size: 1rem; }
.abr-tech-tresc { padding: 0 30px 30px; }
@media (max-width: 640px) { .abr-tech summary, .abr-tech-tresc { padding-left: 18px; padding-right: 18px; } .abr-tech summary i { grid-column: 1; grid-row: auto; justify-self: start; } }

/* szersze ekrany: wiecej miejsca na tresc stron marek */
@media (min-width: 981px) and (max-width: 1100px) { .ev-wrap { padding: 0 32px; } .ev-hero-inner { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1400px) {
  .ev-hero-tarcze, .lan-hero-wizual { max-width: 620px; }
  .lan-katalog.ev-oferta .lan-produkty { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ev-akcja-siatka { height: 720px; }
}
@media (min-width: 1400px) { .ev-karta .ev-karta-zdj { padding-bottom: 64%; } }
.mono-grid.mono-grid-4 { --kol:4; } @media (max-width:1100px){ .mono-grid.mono-grid-4 { --kol:2; } } @media (max-width:600px){ .mono-grid.mono-grid-4 { --kol:1; } }

/* ---------- telefon: strona glowna mniej rozciagnieta ---------- */
@media (max-width: 600px) {
  .stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-cell { padding: 22px 18px; }
  .stat-num { font-size: 2.2rem !important; }
  .stat-label { font-size: .7rem !important; }
  .mono-grid.mono-grid-4, .mono-grid.mono-grid-3 { --kol: 2; }
  .mono-card { min-height: 190px; padding: 22px 16px; }
  .mono-card h3 { font-size: 1.3rem; min-height: 0; padding-top: 14px; }
  .mono-card p { font-size: .76rem; }
  .mono-card .mono-num { font-size: .66rem; letter-spacing: .1em; }
  /* na telefonie bez hovera — pokaz zdjecie marki wyraznie */
  .mono-card .mono-bg { opacity: .9 !important; filter: none !important; }
  .mono-card { color: #fff; background: #111; }
  .mono-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.8)); pointer-events: none; }
  .mono-card > * { position: relative; z-index: 1; }
  .mono-card .mono-bg { position: absolute; z-index: 0; }
  .mono-card p { color: #d0d0cc; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .gal-item.w2 { grid-column: span 2; }
  .gal-cap .t { display: none; }
  .home-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
  .home-hero-btns a { flex: 1 1 auto; text-align: center; }
  .process-row { gap: 0 !important; }
}
@media (max-width:600px){ .home-cta{ padding:56px 0; } .mono-card .mono-bg{ opacity:.55 !important; } }
@media (max-width:600px){ .process-row{ grid-template-columns:1fr 1fr !important; gap:18px !important; } .process-step{ padding-top:12px; } .process-step h3{ font-size:1rem; } .process-step p{ font-size:.8rem; } .home-section{ padding-top:56px !important; padding-bottom:56px !important; } }

/* ---------- telefon: podstrony marek ---------- */
@media (max-width: 640px) {
  .ev-hero h1 { font-size: 2.3rem; }
  .ev-lede { font-size: 1rem; }
  .ev-hero-akcje { margin-top: 24px; gap: 16px; }
  .ev-hero-akcje .ev-btn { width: 100%; }
  .ev-dystrybutor { margin-top: 24px; }
  .ev-hero-tarcze, .lan-hero-wizual { max-width: 300px; margin-top: 20px; }
  /* karty tarcz: zdjecie obok nazwy zamiast wielkiego kwadratu */
  .ev-karta .ev-karta-zdj { padding-bottom: 56% !important; }
  .ev-karta .mini-pasek { display: none; }
  .ev-karta-tresc { padding: 16px 18px 18px; }
  .ev-karta h3 { font-size: 1.6rem; }
  .ev-do { min-height: 0 !important; margin: 6px 0 8px; }
  .ev-karta-tresc > p:not(.ev-do) { font-size: .92rem; }
  .ev-parametry { margin: 12px 0 14px; }
  .ev-karty { gap: 14px; }
  /* katalog Lantanii: krotsze opisy */
  .lan-katalog.ev-oferta .lan-opis { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; }
  .lan-katalog.ev-oferta .lan-produkt h4 { margin: 12px 12px 2px; }
  .lan-katalog.ev-oferta .lan-typ, .lan-katalog.ev-oferta .lan-opis { margin-left: 12px; margin-right: 12px; }
  .lan-zdj img { padding: 8px; }
  .lan-raku-cechy li { padding: 12px 0; }
  .ev-tech-el h3 { font-size: 1.2rem; }
  .ev-akcja-siatka { gap: 10px; }
  .ev-film-nakladka h2 { font-size: 2rem; }
  .ev-film-nakladka p { font-size: .9rem; margin-bottom: 14px; }
}
@media (max-width:640px){ .abr-katalog .szukaj-chipy{ display:none; } .abr-skok{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-24px; } .abr-skok a{ flex:none; } }

/* =====================================================================
   VITIUM w ukladzie ev- (zloty kolor marki)
   ===================================================================== */
.vit-znak { font: 900 1.5rem 'Barlow Condensed', sans-serif; letter-spacing: .2em; color: var(--brand2); flex: none; }
.lan-hero-butelka.vit-karta { padding: 0; overflow: hidden; }
.lan-hero-butelka.vit-karta img { object-fit: cover; }
.vit-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vit-kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vit-kroki .ev-cnc-el img { aspect-ratio: 4 / 3; background: #111; }
.vit-kroki h3 span { color: var(--brand2); margin-right: 6px; }
.vit-galeria { background: #0a0c12; padding: 72px 0; }
.vit-galeria .ev-naglowek h2 { color: #fff; }
@media (max-width: 1100px) { .vit-kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vit-galeria { padding: 52px 0; } .vit-kroki .ev-cnc-el h3 { font-size: 1.1rem; } }
.vit-galeria .gal-cap .k { color: var(--brand2); }
@media (max-width: 640px) { .vit-galeria .gal-cap .k { font-size: .7rem; } .lan-hero-wizual .ev-wynik b { font-size: 1.3rem; } }

/* =====================================================================
   AQUAFIL w ukladzie ev-
   ===================================================================== */
.aq-znak { font-size: 1.25rem; letter-spacing: .14em; }
.ev-karta .aq-zdj { background: #eef3f5; }
.ev-karta .aq-zdj img { object-fit: cover; padding: 0; }
.aq-opcje { margin: 26px 0 0; color: #4d525c; line-height: 1.6; }
.aq-opcje b { color: #0d0f14; }
.aq-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
.ev-producent-siatka:has(.aq-fabryka) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr); gap: 40px; }
.aq-fabryka { margin: 0; border-radius: 6px; overflow: hidden; align-self: stretch; }
.aq-fabryka img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 980px) { .aq-kroki { grid-template-columns: 1fr; } .ev-producent-siatka:has(.aq-fabryka) { grid-template-columns: 1fr; } .aq-fabryka img { aspect-ratio: 16 / 10; } }
.aq-karty{ grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:1100px){ .aq-karty{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:640px){ .aq-karty{ grid-template-columns:1fr; } }

/* CIT Group — katalog zurawi i przyssawek (zdjecia panoramiczne na bialym tle) */
.cit-znak { font-size: 1.35rem; letter-spacing: .16em; }
.cit-katalog .lan-zdj { aspect-ratio: 5 / 3; }
.cit-katalog .lan-zdj img { padding: 10px 12px; }
.cit-katalog .lan-produkt .ev-karta-link { margin-top: auto; padding-top: 14px; font-size: .9rem; }
.cit-katalog .lan-produkt { display: flex; flex-direction: column; }
.cit-katalog .lan-filtr { margin-top: 26px; }

/* Przelacznik jezyka w menu */
.jezyk { position: relative; margin-left: 26px; z-index: 120; }
.jezyk summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 17px;
  color: #ddd; font: 700 .86rem 'Barlow Condensed', sans-serif; letter-spacing: .1em;
  transition: border-color .2s, color .2s;
}
.jezyk summary::-webkit-details-marker { display: none; }
.jezyk summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.jezyk[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.jezyk summary:hover, .jezyk[open] summary { border-color: rgba(255,255,255,.5); color: #fff; }
.jezyk-lista {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 6px;
  background: #151515; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.jezyk-lista a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 5px;
  color: #ccc; text-decoration: none; font-size: .95rem;
}
.jezyk-lista a b { width: 26px; font: 800 .8rem 'Barlow Condensed', sans-serif; letter-spacing: .1em; color: #888; }
.jezyk-lista a:hover { background: rgba(255,255,255,.07); color: #fff; }
.jezyk-lista a[aria-current] { color: #fff; background: rgba(255,255,255,.1); }
.jezyk-lista a[aria-current] b { color: #f5c518; }
@media (max-width: 980px) {
  .nav-logo { margin-right: auto; }
  .jezyk { order: 1; margin: 0 14px 0 0; }
  .nav-toggle { order: 2; }
}

/* Pasek z propozycja wersji jezykowej (js/jezyk.js) */
.jezyk-pasek {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 400;
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
  padding: 12px 14px 12px 18px; background: #151515; color: #ddd; border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.45); font-size: .95rem;
}
.jezyk-pasek a { color: #111; background: #f5c518; padding: 8px 14px; border-radius: 6px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.jezyk-pasek button { background: none; border: 0; color: #999; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px; }
@media (max-width: 600px) {
  .jezyk-pasek { flex-wrap: wrap; width: calc(100% - 32px); bottom: 90px; gap: 10px; }
  .jezyk-pasek span { flex: 1 1 calc(100% - 40px); }
  .jezyk-pasek a { flex: 1; text-align: center; }
}
.cit-katalog .lan-produkt .ev-karta-link { margin: auto 18px 0; padding: 14px 0 18px; }
@media (min-width: 981px) {
  .nav-inner > .nav-links { margin-left: auto; }
}
.cit-logo { height: 46px; width: auto; flex: none; }

/* Jibforce */
.jib-logo { height: 34px; width: auto; flex: none; }
.jib-parametry { display: grid; gap: 6px; }
.jib-akcesoria { margin-top: 56px; border-top: 2px solid var(--brand); padding-top: 18px; }
.jib-akcesoria h3 { font: 800 1.5rem 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0 0 18px; }
.jib-akcesoria-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jib-akcesoria figure { margin: 0; background: #fff; border: 1px solid #e6e6e1; border-radius: 6px; overflow: hidden; }
.jib-akcesoria img { width: 100%; aspect-ratio: 5 / 3; object-fit: contain; padding: 12px; background: #fff; display: block; }
.jib-akcesoria figcaption { padding: 14px 18px 18px; color: #4d525c; font-size: .9rem; line-height: 1.55; }
.jib-akcesoria figcaption b { display: block; color: #111; margin-bottom: 4px; }
@media (max-width: 760px) { .jib-akcesoria-siatka { grid-template-columns: 1fr; } }
.aq-logo { height: 40px; width: auto; flex: none; }

/* Mniejsze odstepy miedzy sekcjami (na zyczenie: za duze przerwy) */
body > section.home-section, body > section.home-cta, body > section#kontakt,
body > section.ev-oferta, body > section.dark, body > section.hist { padding-top: 64px; padding-bottom: 64px; }
body > section#sekcja-jak-kupujesz { padding-top: 0; }
@media (max-width: 980px) {
  body > section:not(.home-hero):not(.ev-hero):not(.pod-hero):not(.ev-akcja):not(.marquee-wrap) { padding-top: 36px !important; padding-bottom: 36px !important; }
  body > section#sekcja-jak-kupujesz { padding-top: 0 !important; }
  body > section.ev-akcja { padding-bottom: 36px; }
  body > .cta-band { padding-top: 44px; padding-bottom: 44px; }
}
@media (min-width: 0px) {
  .tasma-kol.w-gore { animation-duration: 90s; }
  .tasma-kol.w-dol  { animation-duration: 110s; }
}
@media (max-width: 760px) {
  .jib-akcesoria img { aspect-ratio: 2 / 1; padding: 8px; }
  .cit-katalog .lan-zdj img { padding: 4px; }
  .cit-katalog .lan-produkt .ev-karta-link { margin: auto 12px 0; font-size: .84rem; }
}
.footer-social { display: flex; gap: 10px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; color: #ccc; text-decoration: none; font-size: .85rem; transition: border-color .2s, color .2s; }
.footer-social a:hover { color: #fff; border-color: rgba(255,255,255,.55); }

/* Aquafil — szczegolowa strona */
.aq-system { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; margin-top: 40px; padding: 32px; background: #fff; border: 1px solid #e6e6e1; border-radius: 8px; }
.aq-system-odwr .aq-system-foto { order: 2; }
.aq-system-foto { margin: 0; }
.aq-system-foto img { width: 100%; max-height: 420px; object-fit: contain; display: block; }
.aq-system h3 { font: 900 2rem 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 10px 0 4px; }
.aq-system p { color: #4d525c; line-height: 1.65; }
.aq-lista { margin: 14px 0; padding-left: 18px; color: #4d525c; line-height: 1.6; }
.aq-lista li { margin: 4px 0; }
.aq-modele { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aq-modele span { padding: 4px 10px; border: 1px solid var(--brand); border-radius: 14px; font: 700 .85rem 'Barlow Condensed', sans-serif; letter-spacing: .06em; color: var(--brand); }
.aq-karty-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.aq-zdj-foto img { object-fit: cover !important; padding: 0 !important; }
.aq-cytat { margin: 12px 0 0; padding-left: 14px; border-left: 3px solid var(--brand2); color: #4d525c; font-style: italic; line-height: 1.6; }
@media (max-width: 860px) {
  .aq-system { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .aq-system-odwr .aq-system-foto { order: 0; }
  .aq-karty-2 { grid-template-columns: 1fr !important; }
}

/* Stale linki do sociali przy lewej krawedzi */
.social-bok { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; }
.social-bok a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: #111; color: #ddd; border: 1px solid rgba(255,255,255,.12); border-left: 0; transition: background .2s, color .2s, width .2s; }
.social-bok a:first-child { border-radius: 0 8px 0 0; }
.social-bok a:last-child { border-radius: 0 0 8px 0; border-top: 0; }
.social-bok a:hover { width: 50px; color: #fff; background: #222; }
@media (max-width: 980px) {
  .social-bok { top: auto; bottom: 96px; transform: none; }
  .social-bok a { width: 38px; height: 38px; }
}

/* ABR — polecane narzedzia */
.abr-polecane-karty { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.abr-polecane .ev-karta-zdj img { object-fit: contain; padding: 14px; background: #fff; }
@media (max-width: 1300px) { .abr-polecane-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .abr-polecane-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .abr-polecane-karty { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; margin: 0 -16px; padding: 0 16px 12px; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .abr-polecane-karty::-webkit-scrollbar { display: none; }
  .abr-polecane-karty > * { flex: 0 0 84%; scroll-snap-align: start; }
}

/* logotypy marek w kafelkach i w pasku przewijanym */
.mono-card h3 .mono-logo{ height:46px; width:auto; max-width:220px; object-fit:contain; object-position:left bottom; transition:filter .3s; }
.mono-card h3 .mono-logo-biale{ filter:brightness(0); }
.mono-card:hover h3 .mono-logo{ filter:brightness(0) invert(1); }
.marquee-track span.mq-logo{ display:inline-flex; align-items:center; }
.marquee-track .mq-logo img{ height:30px; width:auto; max-width:170px; object-fit:contain; }
.marquee-track .mq-logo img.mono-logo-biale{ filter:brightness(0); }
@media (max-width:600px){ .mono-card h3 .mono-logo{ height:38px; } .marquee-track .mq-logo img{ height:24px; } }
.mono-card h3 .mono-logo[src*="wodiam"]{ height:64px; }
.marquee-track .mq-logo img[src*="wodiam"]{ height:42px; }
/* kafelki marek: po najechaniu zdjecie odzyskuje kolor, a tekst czyta sie na ciemnym gradiencie */
@media (hover:hover) and (min-width:601px){
  .mono-card .mono-bg{ transition:opacity .45s, transform .6s, filter .45s; }
  .mono-card:hover .mono-bg{ opacity:.9; filter:none; transform:scale(1.06); }
  .mono-card::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .45s;
    background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.85) 100%); }
  .mono-card:hover::after{ opacity:1; }
  .mono-card:hover .mono-num{ color:#e8e8e4; }
  .mono-card:hover p{ color:#e2e2de; }
}
@media (hover:hover) and (min-width:601px){
  .mono-card h3 .mono-logo{ box-sizing:content-box; border-radius:4px; transition:filter .3s, background .3s, padding .3s; }
  .mono-card:hover h3 .mono-logo{ filter:none; background:rgba(255,255,255,.94); padding:6px 10px; margin-left:-10px; }
  .mono-card:hover h3 .mono-logo-biale{ filter:none; background:none; padding:6px 0; margin-left:0; }
}
/* telefon: kafelki zawsze ze zdjeciem w kolorze, wiec logo na jasnej plakietce, a biale logo bez filtra */
@media (max-width:600px){
  .mono-card h3 .mono-logo{ box-sizing:border-box; height:38px; max-width:100%; filter:none; background:rgba(255,255,255,.94);
    padding:5px 8px; border-radius:4px; object-position:center; }
  .mono-card h3 .mono-logo-biale{ filter:none; background:none; padding:0; height:40px; }
  .mono-card h3 .mono-logo[src*="wodiam"]{ height:52px; }
}
/* grupy marek na stronie glownej: pojedyncza marka na pelna szerokosc, skroty do typow urzadzen */
.mono-grid.mono-grid-1 { --kol:1; }
.mono-grid.mono-grid-2 { --kol:2; }
@media (max-width:600px){ .mono-grid.mono-grid-2 { --kol:1; } }
.mono-card.mono-card-szeroka { min-height:230px; }
.mono-card.mono-card-szeroka .mono-bg { background-position:center 40%; }
.mono-skroty { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:16px; font-size:.86rem; }
.mono-skroty span { color:var(--mono-3,#6a6a66); margin-right:4px; }
.mono-skroty a { color:var(--mono-1,#111); text-decoration:none; border:1px solid #d9d6cf; border-radius:999px; padding:6px 14px; background:#fff; transition:border-color .2s,color .2s; }
.mono-skroty a:hover { border-color:var(--accent); color:var(--accent); }
.nav-mega .nav-kol-tytul-dalej { margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; }
.nav-mega .nav-kol ul + .nav-marki { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 8px; }
@media (min-width: 981px){ .nav-mega.nav-mega-zaklad { width: 600px; grid-template-columns: 2fr 1fr; } }
@media (min-width: 981px){ .nav-mega-zaklad .nav-kol:last-child .nav-marki { grid-template-columns: 1fr; } }
/* „Dla zakladu”: waskie kolumny — kafelki nie moga miec minimalnej szerokosci, bo wystaja poza ramke */
@media (min-width: 981px){
  .nav-mega.nav-mega-zaklad { width: 640px; }
  .nav-mega-zaklad .nav-marki { min-width: 0; }
  .nav-links > li > a { white-space: nowrap; }
}
/* trzy grupy menu: na wezszych ekranach ciasniej, zeby pozycje nie lamaly sie na dwie linie */
@media (min-width: 981px) and (max-width: 1240px){
  .nav-links li { margin-left: 20px; }
  .nav-logo .brand-sub, .nav-logo .divider { display: none; }
}
@media (min-width: 981px) and (max-width: 1180px){ .nav-mega-zaklad .nav-kol:first-child .nav-marki { grid-template-columns: 1fr 1fr; } .nav-mega.nav-mega-zaklad { width: 600px; } }

/* ===================== DIAMAR ===================== */
.dm-logo { height: 34px; width: auto; }
.dm-hero-foto { background: #fff; }
.dm-hero-foto img { object-fit: contain !important; padding: 8%; }
.dm-grupy { padding: 64px 0; background: #fff; }
.dm-ikony { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 28px; }
.dm-ikona { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px 18px; text-align: center;
  border: 1px solid #e4e2dc; border-radius: 8px; background: #faf9f6; color: var(--mono-1, #111); text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .98rem; letter-spacing: .03em; line-height: 1.2;
  transition: border-color .2s, transform .2s, background .2s; }
.dm-ikona img { width: 72px; height: 72px; transition: transform .3s; }
.dm-ikona:hover { border-color: var(--brand); background: #fff; transform: translateY(-2px); }
.dm-ikona:hover img { transform: scale(1.08); }
.dm-grupa-head { position: relative; padding-left: 74px; }
.dm-grupa-ikona { position: absolute; left: 0; top: 2px; width: 56px; height: 56px; }
.dm-warianty { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin: 2px 0 10px; }
.dm-linie-karty { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
.dm-linia { padding: 20px 18px; border-radius: 6px; border-top: 4px solid #999; background: #fff; box-shadow: 0 1px 0 #e4e2dc; }
.dm-linia b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.dm-linia p { font-size: .9rem; color: var(--mono-3, #6a6a66); line-height: 1.55; margin: 0; }
.dm-l-standard { border-top-color: #c9a227; }
.dm-l-black { border-top-color: #1d1d1b; }
.dm-l-pink { border-top-color: #e75a9a; }
.dm-l-cbn { border-top-color: #2f6df6; }
.dm-l-8812 { border-top-color: #009246; }
.dm-fabryka { background: #fff; }
.dm-fabryka img { object-fit: contain !important; padding: 10%; }
@media (max-width: 1100px) { .dm-linie-karty { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .dm-linie-karty { grid-template-columns: 1fr; }
  .dm-ikony { grid-template-columns: repeat(2, 1fr); }
  .dm-ikona img { width: 56px; height: 56px; }
  .dm-grupa-head { padding-left: 0; }
  .dm-grupa-ikona { position: static; width: 44px; height: 44px; margin-bottom: 8px; }
}
.mono-card .mono-bg.mono-bg-produkt { background-size: 46% auto; background-repeat: no-repeat; background-position: 92% 46%; background-color: #fff; }
.lan-katalog.ev-oferta .dm-grupa-head { position: relative; padding-left: 74px; min-height: 56px; }
@media (max-width: 700px) { .lan-katalog.ev-oferta .dm-grupa-head { padding-left: 0; } }
.dm-linie { padding: 64px 0; background: #f4f3ef; }
.dm-linie h2 em { color: var(--brand); font-style: normal; }
.dm-linia b { color: #0d0f14; }
.dm-ikony { background: none; position: static; }
.lan-katalog.ev-oferta .dm-produkt .lan-zdj { aspect-ratio: 1 / 1; overflow: hidden; }
.lan-katalog.ev-oferta .dm-produkt .lan-zdj img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.lan-katalog.ev-oferta .dm-produkt .dm-warianty { margin: 12px 18px 0; }
.dm-katalog .lan-produkt { display: flex; flex-direction: column; }
.dm-katalog .lan-produkt .ev-karta-link { margin: auto 18px 0; padding: 14px 0 18px; font-size: .9rem; }
.dm-katalog .lan-filtr { margin-top: 26px; }
@media (max-width: 640px) { .dm-katalog .lan-produkt .ev-karta-link { margin: auto 12px 0; font-size: .84rem; } }
@media (max-width: 640px) { .lan-katalog.ev-oferta .dm-produkt .dm-warianty { margin: 10px 12px 0; } }
.dm-ikona img { width: 92px; height: 92px; }
@media (max-width: 700px) { .dm-ikona img { width: 72px; height: 72px; } }
.dm-ikona img { width: 112px; height: 112px; }
.dm-ikona { padding: 18px 10px 16px; }
@media (max-width: 700px) { .dm-ikona img { width: 84px; height: 84px; } }
@media (min-width: 901px) { .dm-ikony { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 701px) and (max-width: 900px) { .dm-ikony { grid-template-columns: repeat(3, 1fr); } }

/* ABR: podgrupy katalogu jako kafelki z ikona liniowa; otwarta podgrupa zajmuje caly wiersz */
.podgrupy { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin-top: 24px; }
.podgrupy > details.podgrupa { margin: 0; }
.podgrupy > details.podgrupa > summary.podgrupa-tytul {
  position: relative; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  height: 100%; margin: 0; padding: 16px 12px 16px; text-align: center; line-height: 1.2;
  font-size: .98rem; letter-spacing: .02em; text-transform: none;
  background-color: #fff; background-repeat: no-repeat; background-position: center 16px; background-size: 96px 96px;
  padding-top: 122px; border: 1px solid #e4e2dc; border-radius: 8px; border-bottom: 1px solid #e4e2dc;
  transition: border-color .2s, transform .2s, box-shadow .2s, background-size .3s;
}
.podgrupy > details.podgrupa > summary.podgrupa-tytul::after { position: absolute; right: 12px; bottom: 12px; margin: 0; }
.podgrupy > details.podgrupa > summary.podgrupa-tytul span {
  position: absolute; top: 10px; right: 10px; min-width: 24px; padding: 3px 7px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: .7rem; letter-spacing: .04em;
}
.podgrupy > details.podgrupa > summary.podgrupa-tytul:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.07); color: inherit; }
.podgrupy > details.podgrupa > summary.podgrupa-tytul:hover { background-size: 104px 104px; }
.podgrupy > details.podgrupa[open] { grid-column: 1 / -1; }
.podgrupy > details.podgrupa[open] > summary.podgrupa-tytul {
  flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 52px 10px 14px; margin-bottom: 16px;
  border-color: var(--brand); border-width: 2px; font-size: 1.12rem; text-transform: uppercase;
}
.podgrupy > details.podgrupa[open] > summary.podgrupa-tytul { background-position: 12px center; background-size: 52px 52px; padding-left: 78px; min-height: 70px; }
.podgrupy > details.podgrupa[open] > summary.podgrupa-tytul span { position: static; margin-left: 4px; }
.podgrupy > details.podgrupa[open] > summary.podgrupa-tytul::after { top: 50%; bottom: auto; right: 18px; transform: translateY(-50%) rotate(-135deg); }
@media (max-width: 600px) {
  .podgrupy { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .podgrupy > details.podgrupa > summary.podgrupa-tytul { background-size: 72px 72px; padding-top: 96px; }
  .podgrupy > details.podgrupa > summary.podgrupa-tytul { font-size: .9rem; padding: 14px 8px; }
}
.podgrupy > details.podgrupa:not([open]) > summary.podgrupa-tytul::after { display: none; }

/* ABR — scena polecanych narzedzi */
.abr-scena { background: #0d0f14; color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.abr-scena::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 140%;
  background: radial-gradient(closest-side, rgba(200,16,46,.22), transparent 70%); pointer-events: none; }
.abr-scena .ev-naglowek h2 { color: #fff; }
.abr-scena .ev-naglowek p { color: #a9acb3; }
.scena { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 34px; }
.scena-lista { display: flex; flex-direction: column; gap: 8px; }
.scena-wybor { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #cfd2d8;
  font: inherit; transition: background .25s, border-color .25s, transform .25s; position: relative; overflow: hidden; }
.scena-wybor img { width: 58px; height: 58px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; flex: none; }
.scena-wybor b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1.12rem; letter-spacing: .02em; color: #fff; }
.scena-wybor small { display: block; font-size: .78rem; color: #8b8f98; margin-top: 2px; }
.scena-wybor:hover { background: rgba(255,255,255,.08); transform: translateX(3px); }
.scena-wybor.on { background: rgba(200,16,46,.16); border-color: var(--brand); }
.scena-wybor.on small { color: #ff8a9b; }
.scena-js .scena-wybor.on::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--brand);
  transform-origin: left; animation: scena-pasek 7s linear forwards; }
@keyframes scena-pasek { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scena-panele { position: relative; min-height: 460px; }
.scena-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin-bottom: 30px; }
.scena-js .scena-panel { display: none; margin: 0; }
.scena-js .scena-panel.on { display: grid; animation: scena-wejscie .55s ease both; }
@keyframes scena-wejscie { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.scena-foto { position: relative; aspect-ratio: 1 / 1; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f1efe9 55%, #d9d6cf 100%); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.scena-foto img { width: 82%; height: 82%; object-fit: contain; animation: scena-unoszenie 6s ease-in-out infinite; filter: drop-shadow(0 18px 18px rgba(0,0,0,.25)); }
@keyframes scena-unoszenie { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.scena-tresc .ev-znacznik { background: var(--brand); color: #fff; border-color: var(--brand); }
.scena-tresc h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; margin: 14px 0 6px; color: #fff; text-transform: uppercase; }
.scena-tresc h3 small { font-size: .5em; color: #ff8a9b; letter-spacing: .04em; margin-left: 6px; }
.scena-tresc .ev-do { color: #fff; font-weight: 600; font-size: 1.05rem; margin: 0 0 12px; }
.scena-tresc > p { color: #b9bcc3; line-height: 1.65; }
.scena-tresc .ev-parametry { margin: 18px 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scena-tresc .ev-parametry > div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 10px 12px; display: block; }
.scena-tresc .ev-parametry dt { color: #8b8f98; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.scena-tresc .ev-parametry dd { color: #fff; font-size: .88rem; margin: 0; line-height: 1.4; }
.scena-btn { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .scena-foto img, .scena-js .scena-panel.on, .scena-js .scena-wybor.on::after { animation: none; } }
@media (max-width: 1100px) { .scena { grid-template-columns: 1fr; } .scena-lista { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .scena-lista::-webkit-scrollbar { display: none; } .scena-wybor { flex: 0 0 auto; width: auto; } .scena-wybor:hover { transform: none; } }
@media (max-width: 760px) {
  .abr-scena { padding: 44px 0; }
  .scena-panel, .scena-js .scena-panel.on { grid-template-columns: 1fr; gap: 20px; }
  .scena-panele { min-height: 0; }
  .scena-foto { max-width: 340px; width: 100%; margin: 0 auto; }
  .scena-tresc .ev-parametry { grid-template-columns: 1fr; }
  .scena-wybor img { width: 44px; height: 44px; }
  .scena-wybor b { font-size: 1rem; }
}
.scena-tresc .ev-parametry { border: 0; padding: 0; }
.scena-tresc .ev-parametry > div { display: block !important; text-align: left; border-top: 1px solid rgba(255,255,255,.08) !important; }
.scena-tresc .ev-parametry dd { text-align: left !important; font-weight: 600; }
.scena-foto img { width: 78%; height: 78%; }
.scena-btn { display: inline-flex !important; align-items: center; min-height: 52px; }
@media (max-width: 600px) {
  .podgrupy > details.podgrupa > summary.podgrupa-tytul { padding: 92px 8px 12px; background-position: center 12px; background-size: 72px 72px; }
  .podgrupy > details.podgrupa[open] > summary.podgrupa-tytul { padding: 10px 44px 10px 70px; background-position: 10px center; background-size: 46px 46px; font-size: .95rem; }
}

/* ABR katalog: kafelki podgrup ze zdjeciami produktow (do 3, ulozone jak ustawka na polce) */
.podgrupy { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.podgrupy > details.podgrupa > summary.podgrupa-tytul {
  padding-top: 168px; background-color: #fff; background-blend-mode: multiply;
  background-repeat: no-repeat; transition: border-color .2s, transform .2s, box-shadow .2s, background-size .35s, background-position .35s;
}
.podgrupy > details.podgrupa[data-zdjec="1"] > summary.podgrupa-tytul { background-size: auto 132px; background-position: center 18px; }
.podgrupy > details.podgrupa[data-zdjec="2"] > summary.podgrupa-tytul { background-size: auto 112px, auto 112px; background-position: 22% 28px, 78% 28px; }
.podgrupy > details.podgrupa[data-zdjec="3"] > summary.podgrupa-tytul { background-size: auto 120px, auto 78px, auto 78px; background-position: center 14px, 6% 66px, 94% 66px; }
.podgrupy > details.podgrupa[data-zdjec="1"] > summary.podgrupa-tytul:hover { background-size: auto 142px; }
.podgrupy > details.podgrupa[data-zdjec="2"] > summary.podgrupa-tytul:hover { background-position: 16% 28px, 84% 28px; }
.podgrupy > details.podgrupa[data-zdjec="3"] > summary.podgrupa-tytul:hover { background-size: auto 130px, auto 82px, auto 82px; background-position: center 10px, 0% 66px, 100% 66px; }
.podgrupy > details.podgrupa > summary.podgrupa-tytul::before { content: ''; position: absolute; left: 14px; right: 14px; top: 150px; height: 1px; background: #ece9e2; }
/* otwarta podgrupa: pasek z jednym zdjeciem */
.podgrupy > details.podgrupa[open] > summary.podgrupa-tytul { padding: 10px 52px 10px 96px; background-position: 12px center, -999px 0, -999px 0 !important; background-size: auto 56px, 0 0, 0 0 !important; min-height: 76px; }
.podgrupy > details.podgrupa[open] > summary.podgrupa-tytul::before { display: none; }
@media (max-width: 600px) {
  .podgrupy { grid-template-columns: repeat(2, 1fr); }
  .podgrupy > details.podgrupa > summary.podgrupa-tytul { padding: 124px 8px 12px; }
  .podgrupy > details.podgrupa > summary.podgrupa-tytul::before { top: 110px; left: 8px; right: 8px; }
  .podgrupy > details.podgrupa[data-zdjec="1"] > summary.podgrupa-tytul { background-size: auto 96px; background-position: center 10px; }
  .podgrupy > details.podgrupa[data-zdjec="2"] > summary.podgrupa-tytul { background-size: auto 78px, auto 78px; background-position: 10% 20px, 90% 20px; }
  .podgrupy > details.podgrupa[data-zdjec="3"] > summary.podgrupa-tytul { background-size: auto 86px, auto 54px, auto 54px; background-position: center 8px, 2% 48px, 98% 48px; }
  .podgrupy > details.podgrupa[open] > summary.podgrupa-tytul { padding: 10px 44px 10px 80px; background-size: auto 46px, 0 0, 0 0 !important; }
}
.podgrupy > details.podgrupa[data-zdjec="0"] > summary.podgrupa-tytul { padding-top: 46px; justify-content: center; }
.podgrupy > details.podgrupa[data-zdjec="0"] > summary.podgrupa-tytul::before { display: none; }
.podgrupy > details.podgrupa[open] > summary.podgrupa-tytul { height: auto; }

/* Lantania — scena polecanych preparatow (wspolny uklad z ABR) */
.lan-scena::before { background: radial-gradient(closest-side, rgba(15,138,126,.25), transparent 70%); }
.lan-scena .scena-wybor.on { background: rgba(15,138,126,.18); }
.lan-scena .scena-wybor.on small, .lan-scena .scena-tresc h3 small { color: #6fe0cf; }
.scena-wybor .scena-brak { width: 58px; height: 58px; flex: none; border-radius: 8px; background: #fff; color: var(--brand);
  display: flex; align-items: center; justify-content: center; font: 900 .9rem 'Barlow Condensed', sans-serif; font-style: normal; }
.scena-foto.scena-foto-zdjecie { overflow: hidden; }
.scena-foto.scena-foto-zdjecie img { width: 100%; height: 100%; object-fit: cover; animation: none; filter: none; border-radius: 18px; }
.scena-foto.scena-foto-pusta { background: radial-gradient(circle at 50% 45%, #1d2a2a 0%, #0f1717 100%); border: 1px solid rgba(255,255,255,.08); }
.scena-foto-nazwa { font: 900 clamp(2.4rem, 5vw, 4rem) 'Barlow Condensed', sans-serif; color: #fff; letter-spacing: .04em;
  text-shadow: 0 0 40px rgba(15,138,126,.6); }
.lan-scena .scena-foto:not(.scena-foto-zdjecie):not(.scena-foto-pusta) img { width: 62%; height: 82%; }
@media (max-width: 760px) { .scena-wybor .scena-brak { width: 44px; height: 44px; } }

/* ===================== RAKU — sekcja wyrozniona ===================== */
.rk { --rk: #4738b0; --rk2: #8f84f0; --rk-ziel: #7ab51d; background: #f4f3ef; }
.rk-baner { position: relative; color: #fff; padding: 84px 0 74px; overflow: hidden;
  background: linear-gradient(100deg, rgba(14,10,40,.94) 0%, rgba(30,22,80,.82) 45%, rgba(30,22,80,.35) 100%),
              url('../images/lantania/raku/raku-protettivo-cucina-in-marmo.webp') center / cover no-repeat; }
.rk-baner::after { content: 'RAKU'; position: absolute; right: -2vw; bottom: -6vw; font: 900 26vw/1 'Barlow Condensed', sans-serif;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); pointer-events: none; letter-spacing: -.02em; }
.rk-baner-siatka { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.rk-baner .ev-kicker { color: #c9c1ff; }
.rk-logo { font: 900 clamp(4rem, 10vw, 8.5rem)/.9 'Barlow Condensed', sans-serif; letter-spacing: .02em; margin: 10px 0 6px;
  background: linear-gradient(90deg, #fff 0%, #d9d3ff 60%, var(--rk-ziel) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk-haslo { font: 800 clamp(1.4rem, 2.6vw, 2.1rem)/1.15 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 18px; }
.rk-haslo em { font-style: normal; color: #ffe066; }
.rk-lede { color: #dcd9ef; font-size: 1.04rem; line-height: 1.7; max-width: 62ch; }
.rk-akcje { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.rk .ev-btn { background: var(--rk-ziel); border-color: var(--rk-ziel); color: #10230a; }
.rk .ev-btn:hover { background: #fff; border-color: #fff; color: var(--rk); }
.rk-baner .ev-link { color: #fff; }
.rk-pudelko { margin: 0; justify-self: center; }
.rk-pudelko img { width: min(300px, 70vw); filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); transform: rotate(-4deg);
  animation: scena-unoszenie 7s ease-in-out infinite; }
.rk-tresc { padding-top: 64px; padding-bottom: 64px; }
.rk h3 { font: 900 clamp(1.7rem, 3vw, 2.4rem)/1.05 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 8px 0 14px; color: #0d0f14; }
.rk h3 em { font-style: normal; color: var(--rk); }
.rk-tresc .ev-kicker { color: var(--rk); }
.rk-tresc p { color: #4d525c; line-height: 1.65; }
.rk-porownanie-siatka { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.rk-wykonczenia { display: grid; gap: 10px; margin-top: 18px; }
.rk-wykonczenia div { background: #fff; border-left: 4px solid var(--rk); padding: 12px 16px; border-radius: 6px; font-size: .92rem; color: #4d525c; }
.rk-wykonczenia b { display: block; color: #0d0f14; margin-bottom: 2px; }
.rk-suwak { position: relative; aspect-ratio: 1600 / 1068; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.25); user-select: none; }
.rk-suwak > img, .rk-suwak-przed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-suwak-przed { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--poz)) 0 0); }
.rk-suwak-zakres { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.rk-uchwyt { position: absolute; top: 0; bottom: 0; left: var(--poz); width: 3px; margin-left: -1.5px; background: #fff; z-index: 2; pointer-events: none; }
.rk-uchwyt::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--rk); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.rk-etykieta { position: absolute; top: 14px; z-index: 2; padding: 5px 10px; border-radius: 4px; font: 700 .75rem 'Barlow Condensed', sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.55); pointer-events: none; }
.rk-etykieta-l { left: 14px; } .rk-etykieta-p { right: 14px; background: var(--rk); }
.rk-cechy { list-style: none; padding: 0; margin: 56px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rk-cechy li { background: #fff; border-radius: 10px; padding: 18px 18px 18px; border-top: 3px solid var(--rk); font-size: .9rem; color: #4d525c; line-height: 1.5; }
.rk-cechy li b { display: block; font: 800 1.12rem 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; margin-bottom: 6px; letter-spacing: .02em; }
.rk-cechy li:nth-child(1) { border-top-color: var(--rk-ziel); background: #fbfdf5; }
.rk-gdzie { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.rk-gdzie-foto img { width: 100%; border-radius: 14px; display: block; box-shadow: 0 24px 50px rgba(0,0,0,.18); }
.rk-ikony { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rk-ikony li { background: #fff; border-radius: 8px; padding: 14px 8px; text-align: center; font-size: .82rem; font-weight: 600; color: #0d0f14; }
.rk-ikony img { display: block; width: 40px; height: 34px; margin: 0 auto 8px; object-fit: contain;
  filter: invert(23%) sepia(56%) saturate(2400%) hue-rotate(238deg) brightness(82%); }
.rk-nota { background: #ece9fb; border-radius: 8px; padding: 12px 16px; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .rk-pudelko img { animation: none; } }
@media (max-width: 980px) {
  .rk-baner-siatka, .rk-porownanie-siatka, .rk-gdzie { grid-template-columns: 1fr; }
  .rk-cechy { grid-template-columns: repeat(2, 1fr); }
  .rk-pudelko img { width: 200px; }
}
@media (max-width: 560px) {
  .rk-baner { padding: 52px 0 46px; }
  .rk-cechy, .rk-ikony { grid-template-columns: repeat(2, 1fr); }
  .rk-tresc { padding-top: 40px; padding-bottom: 40px; }
}
.rk { padding: 0 !important; }
.rk-tresc { padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 560px) { .rk-tresc { padding-top: 40px; padding-bottom: 40px; } }
.scena-wybor .scena-brak { font-size: .62rem; letter-spacing: .02em; text-align: center; line-height: 1; padding: 2px; }
/* strona glowna — pasek RAKU pod Lantania */
.raku-pas { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-top: 14px; padding: 16px 28px 16px 18px;
  border-radius: 10px; text-decoration: none; color: #fff; overflow: hidden; position: relative;
  background: linear-gradient(100deg, #1a1446 0%, #4738b0 70%, #5a4bd0 100%); transition: transform .25s, box-shadow .25s; }
.raku-pas:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(71,56,176,.35); }
.raku-pas img { width: 64px; height: 84px; object-fit: contain; transform: rotate(-6deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.raku-pas-tekst b { display: block; font: 900 2rem/1 'Barlow Condensed', sans-serif; letter-spacing: .04em; }
.raku-pas-tekst span { color: #dcd9ef; font-size: .95rem; }
.raku-pas-cta { font: 700 .95rem 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; background: #7ab51d; color: #10230a;
  padding: 12px 18px; border-radius: 4px; white-space: nowrap; }
@media (max-width: 640px) { .raku-pas { grid-template-columns: auto 1fr; } .raku-pas-cta { grid-column: 1 / -1; text-align: center; } }

/* Poseidon — pelna gama maszyn */
#gama { background: #0c0c0c; padding-bottom: 40px; }
#gama .section-title { color: #fff; }
#gama .section-desc { color: #a8a8a3; }
.pos-logo { display: block; width: 260px; max-width: 70%; height: auto; margin-bottom: 18px; }
.cnc-photo-slot.pos-foto { padding-bottom: 60%; background: radial-gradient(circle at 50% 40%, #2a2a2a, #141414); }
.cnc-photo-slot.pos-foto img { object-fit: cover; }
.pod-hero-photo video.pos-hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); }
@media (prefers-reduced-motion: reduce) { .pod-hero-photo video.pos-hero-film { display: none; } .pod-hero-photo:has(.pos-hero-film) { background: url('../images/poseidon/film/trex.jpg.webp') center/cover; } }

/* Vitium — zastosowania we wnetrzach */
.vit-wnetrza { padding: 90px 0; background: #f4f2ee; }
.vit-wnetrza h2 em { font-style: normal; color: #a8874a; }
.vit-mozaika { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 12px; }
.vit-mozaika figure { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: #ddd; }
.vit-mozaika img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.vit-mozaika figure:hover img { transform: scale(1.05); }
.vit-mozaika figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; font-size: .82rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.vit-m-wysoka { grid-row: span 2; }
.vit-m-szeroka { grid-column: span 2; }
@media (max-width: 900px) {
  .vit-mozaika { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}
@media (max-width: 520px) {
  .vit-mozaika { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .vit-m-wysoka { grid-row: span 2; }
  .vit-m-szeroka { grid-column: auto; }
}

/* Vitium — pakiet partnera */
.vit-pakiet { padding: 90px 0; background: #0f0f10; }
.vit-pakiet h2 { color: #fff; }
.vit-pakiet h2 em { font-style: normal; color: #c79a4b; }
.vit-pakiet .ev-naglowek p { color: #9aa0ad; }
.vit-pakiet-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vit-pakiet-siatka div { padding: 24px 22px; border: 1px solid #262629; border-top: 2px solid #c79a4b; background: #151517; color: #a3a7b0; font-size: .92rem; line-height: 1.6; }
.vit-pakiet-siatka b { display: block; margin-bottom: 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
@media (max-width: 900px) { .vit-pakiet-siatka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vit-pakiet-siatka { grid-template-columns: 1fr; } }

/* Vitium — zestaw probek w zakonczeniu */
.vit-kit { display: block; width: 220px; max-width: 60%; margin: 0 auto 24px; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }

/* Vitium — film z wyspa w roznych wzorach */
.vit-wyspa { padding: 80px 0 0; background: #f4f2ee; }
.ev-film.vit-wyspa-film { aspect-ratio: 16 / 9; grid-row: auto; max-width: none; border-radius: 8px; }
.vit-wyspa-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vit-wyspa-tekst { position: absolute; left: 0; top: 0; bottom: 0; width: min(46%, 520px); padding: 44px 40px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(90deg, rgba(8,8,8,.85), rgba(8,8,8,0)); color: #d6d6d6; }
.vit-wyspa-tekst h2 { margin: 10px 0 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1; text-transform: uppercase; color: #fff; }
.vit-wyspa-tekst h2 em { font-style: normal; color: #c79a4b; }
.vit-wyspa-tekst p { margin: 0; line-height: 1.6; }
@media (max-width: 760px) {
  .vit-wyspa { padding-top: 56px; }
  .ev-film.vit-wyspa-film { aspect-ratio: auto; background: #0f0f10; }
  .vit-wyspa-film video { position: relative; aspect-ratio: 16 / 9; height: auto; }
  .vit-wyspa-tekst { position: static; width: auto; padding: 24px 20px 28px; background: #0f0f10; }
}
.vit-logo { display: block; height: 80px; width: auto; margin-bottom: 18px; }
@media (max-width: 600px) { .vit-logo { height: 60px; } }

/* Pasek: zapowiedz sklepu z przyciskiem zapisu */
.w-budowie-zapis { margin-left: 6px; padding: 4px 12px; border: 0; border-radius: 3px; background: #111; color: #f5c518;
  font: 700 .8rem/1.3 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.w-budowie-zapis:hover { background: #000; color: #fff; }
.w-budowie-zapis.zapisany { background: transparent; color: #111; text-decoration: underline; }
@media (max-width: 600px) { .w-budowie-zapis { margin: 6px 0 0; display: inline-block; } }

/* Komunikat o plikach cookies */
.cookies { position: fixed; left: 16px; bottom: 16px; z-index: 1100; max-width: 360px; padding: 16px 18px; border-radius: 8px;
  background: #151517; border: 1px solid #2a2a2e; color: #b9bcc4; font-size: .85rem; line-height: 1.5;
  box-shadow: 0 14px 40px rgba(0,0,0,.45); animation: cookiesWjazd .35s ease-out; transition: opacity .3s, transform .3s; }
.cookies p { margin: 0 0 12px; }
.cookies-akcje { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookies-wiecej { color: #fff; text-decoration: underline; }
.cookies-ok { padding: 8px 18px; border: 0; border-radius: 4px; background: #f5c518; color: #111; cursor: pointer;
  font: 700 .85rem 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cookies-przyciski { display: flex; gap: 8px; }
.cookies-nie { padding: 8px 12px; border: 1px solid #3a3a40; border-radius: 4px; background: transparent; color: #d6d8de; cursor: pointer;
  font: 700 .85rem 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cookies-nie:hover { border-color: #5f6470; color: #fff; }
.cookies-ustawienia { margin-top: 6px; padding: 10px 18px; border: 0; border-radius: 4px; background: #0d0f14; color: #fff; cursor: pointer;
  font: 700 .9rem 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cookies-znika { opacity: 0; transform: translateY(12px); }
@keyframes cookiesWjazd { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 600px) { .cookies { left: 10px; right: 10px; bottom: 10px; max-width: none; } }
body:has(.cookies) .jezyk-pasek { display: none; }
@media (max-width: 400px) { .cookies-akcje { flex-wrap: wrap; } .cookies-przyciski { width: 100%; } .cookies-przyciski button { flex: 1; } }

/* Polityka prywatnosci */
.polityka { padding: 70px 0 90px; background: #f6f6f4; }
.polityka-wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; color: #3b3e45; line-height: 1.7; }
.polityka h1 { margin: 10px 0 6px; font: 900 clamp(2rem, 4vw, 3rem)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.polityka-data { color: #5f6470; font-size: .9rem; margin: 0 0 30px; }
.polityka h2 { margin: 34px 0 10px; font: 800 1.35rem 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.polityka ul { padding-left: 20px; }
.polityka li { margin-bottom: 6px; }
.polityka a { color: #c41e3a; }
.polityka code { padding: 1px 5px; border-radius: 3px; background: #e9e9e6; font-size: .85em; }
.footer-prawne { margin-top: 10px; font-size: .8rem; }
.footer-prawne a { color: inherit; opacity: .7; }
.sklep-rodo { margin: 4px 0 10px; font-size: .78rem; line-height: 1.5; color: #8d919a; }
.sklep-rodo a, .consent-row a { color: inherit; text-decoration: underline; }

/* Narzedzia wg materialu */
.mat-hero { padding: 70px 0 50px; background: #0d0f14; color: #fff; }
.mat-hero h1 { margin: 10px 0 14px; font: 900 clamp(2.4rem, 5vw, 4rem)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.mat-hero h1 em { font-style: normal; color: #4f8bff; }
.mat-hero .ev-lede { max-width: 66ch; color: #b9bdc7; }
.mat-kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 34px; }
.mat-kafel { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px 18px 16px; border: 1px solid #262a33;
  border-top: 3px solid #2563eb; border-radius: 6px; background: #151821; color: #fff; text-decoration: none; transition: border-color .2s, transform .2s; }
.mat-kafel:nth-child(even) { border-top-color: #31A051; }
.mat-kafel:hover { transform: translateY(-3px); border-color: #3a4150; }
.mat-kafel b { display: block; font: 800 1.25rem/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.mat-kafel small { display: block; margin-top: 6px; color: #9aa0ad; font-size: .85rem; line-height: 1.45; }
.mat-kafel i { font-style: normal; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #7fa6ff; }
.mat-sekcja { padding: 70px 0; background: #f4f4f2; scroll-margin-top: 80px; }
.mat-sekcja:nth-of-type(odd) { background: #fff; }
.mat-glowa { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 30px; align-items: start; }
.mat-glowa h2 { margin: 8px 0 10px; font: 900 clamp(2rem, 4vw, 3rem)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.mat-glowa p { margin: 0; color: #555a64; line-height: 1.6; }
.mat-rady { padding: 18px 20px; border-left: 3px solid #f5c518; background: rgba(245,197,24,.08); }
.mat-rady b { font: 800 1rem 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #0d0f14; }
.mat-rady ul { margin: 8px 0 0; padding-left: 18px; color: #3b3e45; font-size: .92rem; line-height: 1.55; }
.mat-rady li { margin-bottom: 6px; }
.mat-marka { display: inline-flex; align-items: center; margin-bottom: 10px; padding: 4px 8px; border-radius: 4px; background: #111; }
.mat-marka img { height: 18px; width: auto; display: block; }
.mat-wiecej { margin-left: 14px; opacity: .75; }
.mat-zapytaj { margin-top: 26px; }
.mat-cnc { padding: 50px 0; background: #0d0f14; color: #c5c9d2; }
.mat-cnc .ev-wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.mat-cnc h2 { margin: 8px 0 8px; font: 900 2rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #fff; }
.mat-cnc p { margin: 0; max-width: 60ch; }
@media (max-width: 800px) { .mat-glowa { grid-template-columns: 1fr; gap: 20px; } .mat-wiecej { display: block; margin: 8px 0 0; } }
.nav-wg-mat { display: block; margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(79,139,255,.45); border-radius: 6px;
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(49,160,81,.12)); color: #fff; text-decoration: none; }
.nav-wg-mat b { display: block; font: 800 .95rem 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.nav-wg-mat small { display: block; margin-top: 3px; font-size: .78rem; color: #aab1bf; }
.nav-wg-mat:hover, .nav-wg-mat.current { border-color: #4f8bff; }
.mat-link { display: block; margin-top: 8px; font-weight: 600; }
.ev-karta[id] { scroll-margin-top: 140px; }
.mat-karty .mat-marka { align-self: flex-start; width: max-content; }
@media (max-width: 600px) {
  .mat-kafle { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mat-kafel { padding: 12px; gap: 8px; }
  .mat-kafel b { font-size: 1rem; }
  .mat-kafel small { display: none; }
}
.mat-karty .ev-karta-zdj { position: relative; }
.mat-karty .ev-karta-zdj .mat-marka { position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0; padding: 6px 9px;
  border-radius: 4px; background: rgba(17,17,17,.88); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.mat-karty .ev-karta-zdj .mat-marka img { height: 16px; }


/* Frezy CNC WODIAM */
.mat-frezy { margin-top: 40px; padding: 28px; border-radius: 8px; background: #0f1a14; color: #c9d3cc; }
.mat-frezy-glowa h3 { margin: 6px 0 6px; font: 900 1.6rem/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #fff; }
.mat-frezy-glowa p { margin: 0 0 18px; font-size: .88rem; color: #8fa196; }
.mat-frezy .ev-kicker { color: #5fd17f; }
.frezy-grupa h4 { margin: 18px 0 10px; font: 800 .95rem 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5fd17f; }
.frezy { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.frez { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.frez img { width: 54px; height: 80px; object-fit: cover; border-radius: 4px; flex: none; background: #d3ead8; }
.frez b { display: block; color: #fff; font-size: .92rem; }
.frez b i { font-style: normal; font-size: .68rem; padding: 1px 6px; margin-left: 4px; border-radius: 3px; background: #1e7d3c; color: #fff; letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
.frez .frez-v { display: block; margin-top: 3px; font-size: .82rem; color: #b9d8c2; line-height: 1.4; }
.frez small { display: block; margin-top: 3px; font-size: .75rem; color: #8fa196; line-height: 1.35; }
.frezy-tabela { width: 100%; border-collapse: collapse; font-size: .82rem; }
.wd-frezy { padding: 70px 0; background: #0f1a14; color: #c9d3cc; }
.wd-frezy h2 { color: #fff; }
.wd-frezy .ev-naglowek p { color: #8fa196; }
.wd-frezy .frez-mat { display: block; margin-top: 3px; font-size: .78rem; color: #b9d8c2; line-height: 1.45; }
.wd-frezy .frez-mat em { font-style: normal; color: #fff; }
@media (max-width: 600px) { .mat-frezy { padding: 18px 14px; } }
.frezy-opis { margin: -4px 0 12px; font-size: .85rem; color: #8fa196; max-width: 70ch; }
/* kolor marki na kartach strony materialow */
.mat-karty .ev-karta { border-top: 4px solid var(--marka); }
.mat-karty .ev-karta-zdj .mat-marka { background: var(--marka); }
.mat-karty .ev-karta .ev-znacznik { color: var(--marka); border-color: var(--marka); }
.mat-karty .ev-karta h3 small { color: var(--marka); }
.mat-karty .ev-karta .mat-wiecej, .mat-karty .ev-karta .ev-karta-link { color: var(--marka); }
.mat-legenda { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 16px; font-size: .85rem; color: #555a64; }
.mat-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.mat-legenda span::before { content: ''; width: 14px; height: 14px; border-radius: 3px; background: var(--marka); }
.mat-karty .ev-karta-zdj .mat-marka img { position: static !important; width: auto !important; height: 16px !important; max-width: none !important; object-fit: contain !important; transform: none !important; padding: 0 !important; background: none !important; }
/* Narzedzia wg materialu — mocno wyroznione w menu */
.nav-wg-mat { position: relative; padding: 14px 44px 14px 16px; border: 0; background: linear-gradient(135deg, #2563eb, #1f8a4c); box-shadow: 0 6px 18px rgba(37,99,235,.35); }
.nav-wg-mat b { font-size: 1.1rem; letter-spacing: .05em; color: #fff; }
.nav-wg-mat small { color: rgba(255,255,255,.85); }
.nav-wg-mat::after { content: '→'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: #fff; transition: transform .2s; }
.nav-wg-mat:hover { filter: brightness(1.08); }
.nav-wg-mat:hover::after { transform: translate(4px, -50%); }
.nav-wg-mat.current { outline: 2px solid #fff; outline-offset: -2px; }
/* uklad kart na stronie materialow — bez pojedynczej karty w ostatnim rzedzie */
.ev-karty.mat-karty { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.ev-karty.mat-karty > .ev-karta { flex: 0 1 calc((100% - 44px) / 3); min-width: 0; }
.ev-karty.mat-karty.mat-n4 > .ev-karta { flex-basis: calc((100% - 66px) / 4); }
.ev-karty.mat-karty.mat-n2 > .ev-karta, .ev-karty.mat-karty.mat-n1 > .ev-karta { flex-basis: calc((100% - 44px) / 3); }
@media (max-width: 1100px) {
  .ev-karty.mat-karty > .ev-karta, .ev-karty.mat-karty.mat-n4 > .ev-karta { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 640px) {
  .ev-karty.mat-karty > .ev-karta, .ev-karty.mat-karty.mat-n4 > .ev-karta { flex-basis: 100%; }
}
.nav-links .nav-wg-mat, .nav-sub .nav-wg-mat { background: linear-gradient(135deg, #2563eb, #1f8a4c) !important; color: #fff !important; }
@media (max-width: 900px) { .nav-wg-mat small { display: block !important; } }
.nav-links .nav-wg-mat { display: block !important; text-align: left; }
.nav-links .nav-wg-mat b, .nav-links .nav-wg-mat small { display: block !important; width: auto; text-align: left; }
.nav-links .nav-wg-mat small { margin-top: 3px; color: rgba(255,255,255,.85) !important; font-family: inherit; letter-spacing: 0; text-transform: none; font-weight: 400; }
.mat-karty .mat-abr .ev-karta-zdj .mat-marka { background: #fff; }
.mat-karty .mat-abr .ev-karta-zdj > img { object-fit: contain; }
.frez img[src*="zestaw-drs"] { width: 150px; height: 57px; object-fit: cover; background: #0b1410; }
@media (max-width: 420px) { .frez img[src*="zestaw-drs"] { width: 110px; height: 42px; } }
.frez:has(img[src*="zestaw-drs"]) { grid-column: span 2; }
.frez img[src*="zestaw-drs"] { width: 230px; height: 87px; }
@media (max-width: 600px) { .frez:has(img[src*="zestaw-drs"]) { grid-column: auto; flex-direction: column; align-items: flex-start; } .frez img[src*="zestaw-drs"] { width: 100%; height: auto; aspect-ratio: 580 / 220; } }
.drs-profile { margin: 18px 0 0; padding: 18px; border-radius: 8px; background: #fff; color: #222; scroll-margin-top: 140px; }
.drs-profile figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 10px; }
.drs-profile figcaption b { font: 800 1.05rem 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.drs-profile figcaption span { font-size: .85rem; color: #555; }
.drs-profile img { display: block; width: 100%; height: auto; }
.frez-link { display: inline-block; margin-top: 6px; font-size: .8rem; color: #5fd17f; }
.drs-profile { max-width: 860px; }
.drs-profile a { display: block; cursor: zoom-in; }
.mat-komplety { margin-top: 26px; }
.mat-komplety h3 { margin: 0 0 4px; font: 900 1.4rem 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.mat-komplety > p { margin: 0 0 14px; color: #555a64; font-size: .9rem; }
.komplety { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.komplet { margin: 0; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid #e3e3df; }
.komplet img { display: block; width: 100%; aspect-ratio: 2.6 / 1; object-fit: cover; }
.komplet figcaption { padding: 12px 16px 14px; }
.komplet b { display: block; font: 800 1.2rem 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.komplet span { display: block; color: #3b3e45; font-size: .92rem; }
.komplet small { display: block; margin-top: 2px; color: #5f6470; font-size: .82rem; }
@media (max-width: 700px) { .komplety { grid-template-columns: 1fr; } }
.komplet-foto { position: relative; }
.komplet-foto .mat-marka { position: absolute; top: 12px; left: 12px; margin: 0; padding: 6px 9px; border-radius: 4px; background: #31A051; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.komplet-foto .mat-marka img { height: 16px; width: auto; aspect-ratio: auto; display: block; }
.komplet { border-top: 4px solid #31A051; }
.wd-frezy .mat-komplety { margin-top: 30px; }
.wd-frezy .mat-komplety h3 { color: #fff; }
.wd-frezy .mat-komplety > p { color: #8fa196; }
.wd-frezy .komplet { background: #16221b; border-color: rgba(255,255,255,.08); border-top-color: #31A051; }
.wd-frezy .komplet b { color: #fff; }
.wd-frezy .komplet span { color: #c9d3cc; }
/* parametry frezow — wiersze etykieta / wartosc */
.frez .frez-v, .frez .frez-mat { display: block; margin-top: 6px; }
.frez .fd { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px solid rgba(255,255,255,.07); font-size: .8rem; line-height: 1.35; }
.frez .fd:first-child { border-top: 0; }
.frez .fd i { font-style: normal; color: #8fa196; flex: 0 1 auto; }
.frez .fd b { display: inline; font-weight: 600; font-size: inherit; color: #e3efe6; text-align: right; }
.frez .fd:only-child b, .frez .fd b:only-child { text-align: left; }
.wd-frezy .frez-mat { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.1); }
.wd-frezy .frez-mat em { display: block; font-style: normal; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #5fd17f; margin-bottom: 2px; }
.frez { align-items: flex-start; }
.frez > div { flex: 1; min-width: 0; }
.frez .fd i + b { white-space: nowrap; }
/* frezy: zamiast parametrow — sklep i zapytanie */
.frez-akcje { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 10px; }
.frez-akcje .frez-sklep { margin: 0; padding: 6px 10px; border-radius: 4px; border: 1px dashed rgba(255,255,255,.25); background: transparent; color: #c9d3cc;
  font: 600 .74rem 'Barlow', sans-serif; letter-spacing: .02em; cursor: pointer; text-transform: none; width: auto; }
.frez-akcje .frez-sklep:hover { border-color: #5fd17f; color: #fff; background: transparent; }
.frez-akcje .frez-sklep.zapisany { border-style: solid; border-color: #5fd17f; color: #5fd17f; }
.frez-akcje .frez-sklep em { display: none; }
.frez-akcje .frez-zapytaj { font-size: .8rem; font-weight: 600; color: #5fd17f; text-decoration: none; }
.frez-akcje .frez-zapytaj:hover { text-decoration: underline; }
.frez-mats { display: block; margin-top: 4px; font-size: .78rem; color: #8fa196; }
.komplet .frez-akcje .frez-sklep { border-color: #cfd3cc; color: #3b3e45; }
.komplet .frez-akcje .frez-zapytaj { color: #1f8a4c; }
.wd-frezy .komplet .frez-akcje .frez-sklep { border-color: rgba(255,255,255,.25); color: #c9d3cc; }
.wd-frezy .komplet .frez-akcje .frez-zapytaj { color: #5fd17f; }
.frez-akcje .frez-wkrotce { flex-basis: 100%; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #8fa196; }
.frez-akcje .frez-sklep { font-family: inherit; font-size: .78rem; letter-spacing: 0; white-space: nowrap; }
.frez-akcje .frez-zapytaj { white-space: nowrap; }
.komplet .frez-akcje .frez-wkrotce { color: #5f6470; }
.frez-akcje { gap: 6px 10px; } .frez-akcje .frez-sklep { padding: 5px 8px; }

/* Przycisk „Do sklepu” + zapytanie jako druga opcja — przy wszystkich produktach */
.sklep-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
a.do-sklepu, a.do-sklepu.btn-sklep.wkrotce { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; padding: 10px 18px; border: 0; border-radius: 4px;
  background: var(--marka, var(--brand, #c41e3a)); color: #fff; cursor: pointer; text-decoration: none;
  font: 800 .9rem 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: filter .2s, transform .2s; }
a.do-sklepu:hover, a.do-sklepu.btn-sklep.wkrotce:hover { filter: brightness(1.1); background: var(--marka, var(--brand, #c41e3a)); transform: translateY(-1px); }
a.do-sklepu.zapisany { background: #2f7d4a; }
a.do-sklepu em { display: none; }
.sklep-wiersz .zapytaj-drugie { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; opacity: .75;
  font: 600 .85rem inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; width: auto; }
.sklep-wiersz .zapytaj-drugie:hover { opacity: 1; background: none; }
.scena-panel .sklep-wiersz .zapytaj-drugie { color: #fff; }
.frez .sklep-wiersz { margin-top: 10px; gap: 6px 12px; }
.frez a.do-sklepu, .frez a.do-sklepu.btn-sklep.wkrotce { padding: 7px 12px; font-size: .78rem; background: #1e7d3c; }
.frez .sklep-wiersz .zapytaj-drugie, .komplet .sklep-wiersz .zapytaj-drugie { font-size: .8rem; }
.komplet a.do-sklepu, .komplet a.do-sklepu.btn-sklep.wkrotce { background: #1e7d3c; }
.frez-akcje { margin: 0; }

/* Wybor materialu i czynnosci — czytelne, jasne kafle */
.mat-wybor { margin-top: 34px; }
.mat-wybor-tytul { display: block; margin: 0 0 10px; font: 800 .8rem 'Barlow Condensed', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #8b93a3; }
.mat-wybor .mat-kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 22px; }
.mat-wybor .mat-kafel { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; padding: 16px 44px 16px 18px;
  border: 0; border-left: 5px solid #2563eb; border-radius: 6px; background: #fff; color: #0d0f14; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s, box-shadow .2s; }
.mat-wybor .mat-kafel:nth-child(even) { border-left-color: #31A051; }
.mat-wybor .mat-kafle-czynnosci .mat-kafel { border-left-color: #c8102e; }
.mat-wybor .mat-kafel:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.mat-wybor .mat-kafel b { font: 800 1.25rem/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #0d0f14; }
.mat-wybor .mat-kafel i { font-style: normal; font-size: .82rem; font-weight: 600; color: #5b6170; }
.mat-wybor .mat-strzalka { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: #0d0f14; transition: transform .2s; }
.mat-wybor .mat-kafel:hover .mat-strzalka { transform: translate(4px, -50%); }
@media (max-width: 600px) {
  .mat-wybor .mat-kafle { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mat-wybor .mat-kafel { min-height: 70px; padding: 12px 30px 12px 12px; }
  .mat-wybor .mat-kafel b { font-size: 1.02rem; }
  .mat-wybor .mat-strzalka { right: 10px; font-size: 1.1rem; }
}
.mat-wyroznik { display: inline-block; margin-bottom: 10px; padding: 5px 10px; border-radius: 3px; background: var(--marka, #2563eb); color: #fff;
  font: 800 .78rem 'Barlow Condensed', sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* Dobierz narzedzie — wyroznienie w menu i pasek na stronie glownej */
.nav-links .nav-dobor { display: inline-flex; align-items: center; padding: 9px 14px !important; border-radius: 4px; color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #1f8a4c); box-shadow: 0 4px 14px rgba(37,99,235,.35); white-space: nowrap; }
.nav-links .nav-dobor::after { display: none !important; }
.nav-links .nav-dobor:hover, .nav-links .nav-dobor.current { filter: brightness(1.12); }
@media (max-width: 1180px) { .nav-links .nav-dobor { padding: 8px 10px !important; } }
.dobor-pas { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-top: 14px; padding: 16px 28px 16px 18px;
  border-radius: 10px; text-decoration: none; color: #fff; overflow: hidden; position: relative;
  background: linear-gradient(100deg, #0f1f4a 0%, #2563eb 60%, #1f8a4c 100%); transition: transform .25s, box-shadow .25s; }
.dobor-pas:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(37,99,235,.35); }
.dobor-pas img { width: 78px; height: 78px; object-fit: contain; animation: doborObrot 14s linear infinite; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
@keyframes doborObrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dobor-pas img { animation: none; } }
.dobor-pas-tekst b { display: block; font: 900 2rem/1 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.dobor-pas-tekst span { color: #dfe6f5; font-size: .95rem; }
.dobor-pas-cta { font: 700 .95rem 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; background: #fff; color: #0f1f4a;
  padding: 12px 18px; border-radius: 4px; white-space: nowrap; }
@media (max-width: 640px) { .dobor-pas { grid-template-columns: auto 1fr; } .dobor-pas img { width: 56px; height: 56px; } .dobor-pas-tekst b { font-size: 1.5rem; } .dobor-pas-cta { grid-column: 1 / -1; text-align: center; } }
.mat-wyroznik { align-self: flex-start; width: max-content; max-width: 100%; }
/* skrot „Dobierz narzedzie” w pasku sekcji */
.pasek-wnetrze { display: flex; align-items: center; max-width: 1600px; margin: 0 auto; padding: 0 60px; box-sizing: border-box; }
.pasek-wnetrze .pasek-linki { flex: 1; min-width: 0; margin: 0; max-width: none; padding: 0; }
.pasek-dobor { flex: none; margin: 0 0 0 12px; padding: 8px 16px; border-radius: 4px; color: #fff; text-decoration: none; white-space: nowrap;
  font: 800 .85rem 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, #2563eb, #1f8a4c); box-shadow: 0 4px 14px rgba(37,99,235,.35); transition: filter .2s; }
.pasek-dobor:hover { filter: brightness(1.12); }
@media (max-width: 760px) { .pasek-dobor { margin: 0 0 0 6px; padding: 7px 10px; font-size: .75rem; } .pasek-wnetrze { padding: 0 10px; } }
@media (max-width: 1100px) { .pasek-wnetrze { padding: 0 32px; } }
@media (max-width: 760px) { .pasek-wnetrze { padding: 0 10px; } }

/* E-VDS — szybka diagnostyka ciecia */
.ev-diag { padding: 80px 0; background: #f4f5f8; }
.diag-lista { display: grid; gap: 10px; }
.diag { border-radius: 6px; background: #fff; border: 1px solid #e1e4ea; border-left: 4px solid #2563eb; overflow: hidden; }
.diag summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 16px 20px; cursor: pointer; list-style: none; }
.diag summary::-webkit-details-marker { display: none; }
.diag summary b { font: 800 1.2rem 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #0d0f14; }
.diag summary b::before { content: '+'; display: inline-block; width: 22px; color: #2563eb; }
.diag[open] summary b::before { content: '–'; }
.diag-mat { font-size: .85rem; color: #5b6170; }
.diag-tresc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 20px 20px 42px; }
.diag-tresc h4 { margin: 0 0 6px; font: 800 .82rem 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #2563eb; }
.diag-tresc p { margin: 0; color: #3b3e45; line-height: 1.6; font-size: .95rem; }
.diag-inne { margin-top: 30px; padding: 26px 28px; border-radius: 8px; background: #1e2b5c; color: #dfe4f3; }
.diag-inne h3 { margin: 0 0 12px; font: 900 1.5rem 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #fff; }
.diag-inne ul { margin: 0 0 20px; padding-left: 18px; line-height: 1.6; }
.diag-inne li { margin-bottom: 8px; }
.diag-inne b { color: #fff; }
@media (max-width: 760px) { .diag-tresc { grid-template-columns: 1fr; gap: 14px; padding: 0 16px 18px; } .diag summary { padding: 14px 16px; } }

/* poradnik ciecia — baner na stronach marek */
.ev-diag-link { padding: 0; margin: 0; background: linear-gradient(100deg, #f0b323 0%, #e0701a 100%); }
.ev-diag-link .ev-wrap { padding-top: 0; padding-bottom: 0; }
.diag-baner { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ikona kicker strzalka" "ikona tytul strzalka" "ikona opis strzalka"; align-items: center; column-gap: 22px; row-gap: 2px; padding: 26px 0; color: #161616; text-decoration: none; }
.diag-baner::before { content: '?'; grid-area: ikona; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #161616; color: #f0b323; font: 800 1.9rem/1 'Barlow Condensed', sans-serif; }
.diag-baner::after { content: '→'; grid-area: strzalka; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #161616; font-size: 1.4rem; font-weight: 700; transition: transform .2s, background .2s, color .2s; }
.diag-baner:hover::after { transform: translateX(4px); background: #161616; color: #f0b323; }
.diag-baner .ev-kicker { grid-area: kicker; color: rgba(22,22,22,.7) !important; margin: 0; }
.diag-baner b { grid-area: tytul; font: 800 clamp(1.3rem, 2.4vw, 1.8rem)/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.diag-baner > span:last-child { grid-area: opis; font-weight: 600; color: #161616; }
@media (max-width: 600px){ .diag-baner { column-gap: 14px; } .diag-baner::before { width: 44px; height: 44px; font-size: 1.4rem; } .diag-baner::after { display: none; } .diag-baner { grid-template-columns: auto 1fr; } }
.ev-diag-jasna { padding-top: 0; }

/* menu Narzedzia — dwa male skroty nad markami (dobor i poradnik) */
.nav-szybkie { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.nav-links .nav-szybki, .nav-sub .nav-szybki { display: flex !important; align-items: center; gap: 8px; padding: 8px 10px !important; border-radius: 6px; text-decoration: none; color: #fff !important; background: none !important; transition: filter .2s, transform .2s; }
.nav-szybki span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-size: .8rem; background: rgba(255,255,255,.22); }
.nav-szybki b { font: 800 .82rem/1.15 'Barlow Condensed', sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.nav-links .nav-szybki-dobor, .nav-sub .nav-szybki-dobor { background: linear-gradient(135deg, #2563eb, #1f8a4c) !important; }
.nav-links .nav-szybki-faq, .nav-sub .nav-szybki-faq { background: linear-gradient(135deg, #f0b323, #e0701a) !important; color: #161616 !important; }
.nav-szybki-faq span { background: rgba(0,0,0,.18); }
.nav-szybki:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav-szybki.current { outline: 2px solid #fff; outline-offset: -2px; }

/* przyssawki i stozki CNC */
.srd-hero .srd-kafle { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.srd-kafel { display: grid; gap: 2px; padding: 12px 16px; min-width: 150px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.srd-kafel:hover { border-color: #f0b323; background: rgba(240,179,35,.1); }
.srd-kafel b { font: 800 1rem/1.15 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.srd-kafel i { font-style: normal; font-size: .8rem; color: #aab1bf; }
.srd-sekcja { padding: 64px 0 24px; background: #f4f5f8; scroll-margin-top: 120px; }
.srd-sekcja + .srd-sekcja { padding-top: 32px; }
.srd-jasna { padding-bottom: 72px; }
.srd-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 22px; border-bottom: 2px solid #161616; padding-bottom: 10px; }
.srd-naglowek h2 { margin: 0; font: 800 clamp(1.6rem, 3vw, 2.3rem)/1.05 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.srd-naglowek p { margin: 0; max-width: 560px; color: #555b66; }
.srd-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.srd-karta { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e6ec; border-radius: 10px; overflow: hidden; }
.srd-foto { display: flex; align-items: center; justify-content: center; gap: 12px; height: 160px; padding: 14px; background: #fff; border-bottom: 1px solid #eef0f4; }
.srd-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.srd-foto img + img { max-width: 40%; }
.srd-tresc { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.srd-tresc h3 { margin: 0; font: 800 1.15rem/1.15 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #161616; }
.srd-pod { margin: 0; font-size: .86rem; color: #6b7280; }
.srd-uwaga { margin: 0; font-size: .8rem; color: #8a5a00; }
.srd-warianty { border: 1px solid #e3e6ec; border-radius: 6px; font-size: .85rem; }
.srd-warianty summary { cursor: pointer; padding: 7px 10px; font-weight: 600; color: #17335b; list-style: none; display: flex; justify-content: space-between; }
.srd-warianty summary::-webkit-details-marker { display: none; }
.srd-warianty summary::after { content: '+'; font-weight: 800; }
.srd-warianty[open] summary::after { content: '−'; }
.srd-warianty summary span { margin-left: auto; margin-right: 10px; color: #5f6470; font-weight: 400; }
.srd-warianty table, .srd-tabela { width: 100%; border-collapse: collapse; }
.srd-warianty th, .srd-warianty td { padding: 5px 10px; text-align: left; border-top: 1px solid #eef0f4; vertical-align: top; }
.srd-warianty th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5f6470; font-weight: 600; }
.srd-warianty td:first-child { white-space: nowrap; font-weight: 600; }
.srd-czesci summary { color: #555b66; }
.srd-tresc .sklep-wiersz { margin-top: 4px; }
.srd-zapytaj { font-size: .88rem; font-weight: 600; color: #17335b; }
.srd-tabela { max-width: 640px; background: #fff; border: 1px solid #e3e6ec; border-radius: 8px; overflow: hidden; }
.srd-tabela th, .srd-tabela td { padding: 9px 14px; text-align: left; border-top: 1px solid #eef0f4; }
.srd-tabela th { background: #161616; color: #fff; font: 700 .85rem 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 600px){ .srd-siatka { grid-template-columns: 1fr; } .srd-kafel { min-width: 0; flex: 1 1 40%; } }

/* menu Narzedzia — trzy kolumny: wyposazenie CNC | marki | chemia */
.nav-trzy { display: grid; grid-template-columns: 1fr; gap: 0; }
.nav-trzy .nav-trzy-kol + .nav-trzy-kol .nav-kol-tytul { margin-top: 10px; }
@media (min-width: 981px){
  .nav-links .nav-mega:has(.nav-trzy) { width: 560px !important; grid-template-columns: minmax(0,1fr) !important; }
  .nav-trzy .nav-trzy-kol { min-width: 0; }
  .nav-trzy { grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
  .nav-trzy .nav-trzy-kol + .nav-trzy-kol { border-left: 1px solid rgba(255,255,255,.08); padding-left: 14px; }
  .nav-trzy .nav-trzy-kol + .nav-trzy-kol .nav-kol-tytul { margin-top: 0; }
  .nav-trzy .nav-marki { grid-template-columns: 1fr !important; min-width: 0; padding: 6px 0 14px; }
  .nav-trzy .nav-kol-tytul { padding-left: 0; padding-right: 0; }
  .nav-trzy { padding: 0 16px; }
}

/* strona glowna — doradztwo i optymalizacja produkcji */
.doradztwo { background: #fff; }
.doradztwo-lede { max-width: 720px; margin: 14px 0 0; color: #555b66; font-size: 1.05rem; line-height: 1.6; }
.doradztwo-cta { margin-top: 32px; }
.doradztwo-cta .btn-mono { background: #161616; color: #fff; border-color: #161616; }
.doradztwo-cta .btn-mono:hover { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ABR: kafelek podgrupy pokazuje jedno zdjecie (bez nakladania trzech) */
.podgrupy > details.podgrupa[data-zdjec] > summary.podgrupa-tytul,
.podgrupy > details.podgrupa[data-zdjec] > summary.podgrupa-tytul:hover { background-size: auto 118px, 0 0, 0 0; background-position: center 18px, -999px 0, -999px 0; }
.podgrupy > details.podgrupa[data-zdjec] > summary.podgrupa-tytul:hover { background-size: auto 126px, 0 0, 0 0; background-position: center 14px, -999px 0, -999px 0; }
@media (max-width: 600px){
  .podgrupy > details.podgrupa[data-zdjec] > summary.podgrupa-tytul { background-size: auto 92px, 0 0, 0 0; background-position: center 12px, -999px 0, -999px 0; }
}

/* przycisk Do sklepu — bez lamania strzalki; na telefonie przycisk na cala szerokosc */
.do-sklepu { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
@media (max-width: 600px){
  .sklep-wiersz { flex-direction: column; align-items: stretch; gap: 10px; }
  .sklep-wiersz a.do-sklepu { width: 100% !important; white-space: nowrap; }
  .sklep-wiersz .zapytaj-drugie { text-align: center; }
}
a.do-sklepu, a.do-sklepu.btn-sklep.wkrotce { flex-direction: row !important; flex-wrap: nowrap !important; }
a.do-sklepu > span { display: inline !important; margin: 0 !important; width: auto !important; }
@media (max-width: 900px){ .ev-karty.mat-karty.mat-n2 > .ev-karta, .ev-karty.mat-karty.mat-n1 > .ev-karta { flex-basis: auto; } }

/* ===================== Menu: dzial Chemia (Lantania, wyroznione RAKU) ===================== */
@media (min-width: 981px){
  .nav-links .nav-mega.nav-mega-chemia { width: 700px; grid-template-columns: 250px minmax(0,1fr); }
  .nav-mega-chemia .nav-marki { grid-template-columns: 1fr; min-width: 0; }
}
.nav-mega-chemia .nav-kol-raku { padding-bottom: 16px; }
.nav-mega .nav-raku, .nav-mega .nav-kol a.nav-raku {
  --rk: #4738b0; --rk2: #8f84f0; --rk-zolty: #ffe066;
  position: relative; display: flex; flex-direction: column; gap: 6px; margin: 2px 16px 0; padding: 16px 16px 18px;
  border-radius: 8px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate;
  background: linear-gradient(160deg, rgba(14,10,40,.55), rgba(30,22,80,.92) 55%, #1b1450),
              url('../images/lantania/raku/protezione-marmo-raku-lantania.webp') center / cover no-repeat;
  border: 1px solid rgba(143,132,240,.45); box-shadow: 0 10px 30px rgba(71,56,176,.35);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.nav-mega .nav-raku::after {
  content: 'RAKU'; position: absolute; right: -10px; bottom: -22px; z-index: -1; pointer-events: none;
  font: 900 6.5rem/1 'Barlow Condensed', sans-serif; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14);
}
.nav-mega .nav-raku:hover { transform: translateY(-2px); border-color: var(--rk2); box-shadow: 0 16px 38px rgba(71,56,176,.5); background-color: transparent; }
.nav-raku-tag {
  align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--rk-zolty); color: #1b1450;
  font: 800 .68rem/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.nav-mega .nav-raku img { position: absolute; right: 6px; bottom: 12px; width: 66px; height: auto; z-index: -1; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.nav-raku-nazwa { margin-top: 18px; font: 900 2.4rem/.9 'Barlow Condensed', sans-serif; letter-spacing: .02em; }
.nav-raku-opis { max-width: 128px; color: #ddd8ff; font-size: .8rem; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.nav-raku-dalej { margin-top: 6px; color: var(--rk-zolty); font: 700 .78rem 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.nav-mega .nav-chemia-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; padding: 0 8px 8px; }
.nav-mega .nav-chemia-lista a { padding: 7px 12px; font-size: .86rem; white-space: nowrap; }
@media (max-width: 980px){
  .nav-mega .nav-kol a.nav-raku { margin: 4px 14px 6px; align-items: flex-start; text-align: left; justify-content: flex-start; }
  .nav-mega-chemia .nav-marki { grid-template-columns: 1fr; min-width: 0; padding-right: 14px; }
  .nav-mega .nav-kol a.nav-raku .nav-raku-nazwa { margin-top: 14px; }
  .nav-mega .nav-raku img { width: 60px; }
  .nav-raku-opis { max-width: none; padding-right: 70px; }
  .nav-mega .nav-chemia-lista { grid-template-columns: 1fr; }
}

/* ===================== Menu: dzial Narzedzia (wyroznione: dobor i poradnik) ===================== */
@media (min-width: 981px){
  .nav-links .nav-mega.nav-mega-narzedzia:has(.nav-trzy) { width: 820px !important; grid-template-columns: 250px minmax(0,1fr) !important; }
}
.nav-mega-narzedzia .nav-kol-pomoc { padding-bottom: 16px; gap: 10px; }
.nav-mega .nav-pomoc, .nav-mega .nav-kol a.nav-pomoc {
  --p1: #2563eb; --p2: #1f8a4c; --pz: #7fe0a6;
  position: relative; display: flex; flex-direction: column; gap: 6px; margin: 2px 16px 0; padding: 14px 16px 16px;
  border-radius: 8px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate;
  background: linear-gradient(150deg, rgba(37,99,235,.95), rgba(14,60,140,.95) 55%, rgba(18,90,60,.95));
  border: 1px solid rgba(127,224,166,.4); box-shadow: 0 10px 30px rgba(37,99,235,.3);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.nav-mega .nav-pomoc-faq, .nav-mega .nav-kol a.nav-pomoc-faq {
  --pz: #161616;
  background: linear-gradient(150deg, #f0b323, #e0701a); color: #161616;
  border-color: rgba(255,224,102,.6); box-shadow: 0 10px 30px rgba(224,112,26,.3);
}
.nav-mega .nav-pomoc::after {
  content: '◎'; position: absolute; right: -6px; bottom: -34px; z-index: -1; pointer-events: none;
  font: 900 7rem/1 'Barlow Condensed', sans-serif; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.16);
}
.nav-mega .nav-pomoc-faq::after { content: '?'; right: 8px; bottom: -26px; -webkit-text-stroke: 1px rgba(0,0,0,.16); }
.nav-mega .nav-pomoc:hover { transform: translateY(-2px); filter: brightness(1.06); }
.nav-mega .nav-pomoc-dobor:hover { box-shadow: 0 16px 38px rgba(37,99,235,.5); }
.nav-mega .nav-pomoc-faq:hover { box-shadow: 0 16px 38px rgba(224,112,26,.5); }
.nav-pomoc-tag {
  align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0e2a5c;
  font: 800 .68rem/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.nav-pomoc-faq .nav-pomoc-tag { background: #161616; color: #f0b323; }
.nav-mega .nav-pomoc img { position: absolute; right: -18px; top: 26px; width: 92px; height: auto; z-index: -1; opacity: .9; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); transition: transform .6s; }
.nav-mega .nav-pomoc:hover img { transform: rotate(40deg); }
.nav-pomoc-nazwa { margin-top: 8px; font: 900 1.9rem/.92 'Barlow Condensed', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.nav-pomoc-opis { max-width: 150px; color: rgba(255,255,255,.85); font-size: .78rem; line-height: 1.42; text-transform: none; letter-spacing: 0; }
.nav-pomoc-faq .nav-pomoc-opis { max-width: 170px; color: rgba(22,22,22,.85); }
.nav-pomoc-dalej { margin-top: 4px; color: var(--pz); font: 700 .78rem 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 980px){
  .nav-mega .nav-kol a.nav-pomoc { margin: 4px 14px 6px; align-items: flex-start; text-align: left; justify-content: flex-start; }
  .nav-mega .nav-kol a.nav-pomoc .nav-pomoc-nazwa { margin-top: 8px; font-size: 1.6rem; }
  .nav-mega .nav-pomoc img { width: 74px; }
  .nav-pomoc-opis, .nav-pomoc-faq .nav-pomoc-opis { max-width: none; padding-right: 64px; }
}
@media (prefers-reduced-motion: reduce){ .nav-mega .nav-pomoc, .nav-mega .nav-pomoc img { transition: none; } }

/* ===================== Strony-odpowiedzi (pytania.html i pytania klientow) ===================== */
.pyt-hero { padding: 46px 0 56px; }
.pyt-okruszki { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; font-size: .9rem; color: #5f6470; }
.pyt-okruszki a { color: #c8ccd6; text-decoration: none; }
.pyt-okruszki a:hover { color: #fff; text-decoration: underline; }
.pyt-okruszki i { font-style: normal; opacity: .5; }
.pyt-hero h1 { max-width: 22ch; }
.pyt-krotko { position: relative; max-width: 860px; margin-top: 26px; padding: 26px 28px 24px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(49,160,81,.14)); border: 1px solid rgba(255,255,255,.14); border-left: 4px solid #4f8bff; }
.pyt-krotko-tag { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 99px; background: #2f63d6; color: #fff;
  font: 800 .72rem/1 'Barlow Condensed', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.pyt-krotko p { margin: 0; color: #e6e8ee; font-size: 1.12rem; line-height: 1.65; }
.pyt-krotko p + p { margin-top: 12px; }
.pyt-tresc { padding: 64px 0; background: #fff; }
.pyt-siatka { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.pyt-art { max-width: 78ch; }
.pyt-art h2 { margin: 0 0 14px; font: 900 clamp(1.6rem, 2.6vw, 2.2rem)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.pyt-art h2:not(:first-child) { margin-top: 40px; }
.pyt-art p, .pyt-art li { color: #3d424d; font-size: 1.05rem; line-height: 1.7; }
.pyt-art p + p { margin-top: 12px; }
.pyt-art ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pyt-art li { position: relative; padding-left: 22px; }
.pyt-art li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.pyt-art li b { color: #0d0f14; }
.pyt-art a { color: #2563eb; }
.pyt-bok { position: sticky; top: 110px; }
.pyt-cta { padding: 26px; border-radius: 6px; background: #0d0f14; color: #fff; box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.pyt-cta b { display: block; font: 900 1.6rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.pyt-cta p { margin: 12px 0 20px; color: #b9bdc7; line-height: 1.6; }
.pyt-cta .ev-btn { width: 100%; }
.pyt-tel { display: block; margin-top: 14px; text-align: center; color: #fff; font-weight: 600; text-decoration: none; }
.pyt-produkty { padding: 70px 0; background: #f4f5f8; }
.pyt-karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pyt-karta { display: flex; flex-direction: column; background: #fff; border: 1px solid #e1e4ea; border-radius: 6px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.pyt-karta:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.35); }
.pyt-karta-zdj { display: block; height: 220px; background: #fff; border-bottom: 1px solid #eef0f4; }
.pyt-karta-zdj img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; transition: transform .5s; }
.pyt-karta:hover .pyt-karta-zdj img { transform: scale(1.05); }
.pyt-karta-tresc { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.pyt-marka { font: 800 .74rem 'Barlow Condensed', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.pyt-karta h3 { margin: 0; font: 900 1.45rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.pyt-karta h3 a { color: #0d0f14; text-decoration: none; }
.pyt-karta p { margin: 0; color: #555a64; line-height: 1.55; font-size: .97rem; }
.pyt-karta-linki { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; margin-top: auto; padding-top: 8px; }
.pyt-karta-linki a { font: 800 .82rem 'Barlow Condensed', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); text-decoration: none; }
.pyt-karta-linki a.pyt-zew { color: #5f6470; letter-spacing: .04em; text-transform: none; font: 600 .85rem 'Barlow', sans-serif; }
.pyt-karta-linki a:hover { text-decoration: underline; }
.pyt-waski { max-width: 940px; }
.pyt-faq-sek { padding: 70px 0; background: #fff; }
.pyt-faq-sek h2, .pyt-powiazane h2 { margin: 8px 0 22px; font: 900 clamp(1.8rem, 3vw, 2.4rem)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.pyt-faq { border: 1px solid #e1e4ea; border-radius: 6px; background: #fff; }
.pyt-faq + .pyt-faq { margin-top: 10px; }
.pyt-faq summary { position: relative; padding: 18px 54px 18px 20px; cursor: pointer; list-style: none; font: 800 1.18rem/1.25 'Barlow Condensed', sans-serif; letter-spacing: .01em; color: #0d0f14; }
.pyt-faq summary::-webkit-details-marker { display: none; }
.pyt-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 'Barlow', sans-serif; color: var(--brand); transition: transform .25s; }
.pyt-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pyt-faq div { padding: 0 20px 20px; }
.pyt-faq p { margin: 0; color: #3d424d; line-height: 1.7; }
.pyt-powiazane { padding: 60px 0 80px; background: #f4f5f8; }
.pyt-powiazane ul, .pyt-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pyt-powiazane a, .pyt-lista a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 6px; background: #fff; border: 1px solid #e1e4ea;
  color: #0d0f14; text-decoration: none; font: 800 1.12rem/1.2 'Barlow Condensed', sans-serif; transition: border-color .2s, transform .2s; }
.pyt-powiazane a:hover, .pyt-lista a:hover { border-color: var(--brand); transform: translateX(4px); }
.pyt-powiazane a span { color: var(--brand); }
.pyt-lista a { flex-direction: column; align-items: flex-start; gap: 6px; }
.pyt-lista a span { font: 400 .98rem/1.55 'Barlow', sans-serif; color: #555a64; }
.pyt-grupa + .pyt-grupa { margin-top: 40px; }
.pyt-grupa { scroll-margin-top: 110px; }
.nav-mega .nav-kol a.nav-pomoc-wiecej, .nav-mega a.nav-pomoc-wiecej { display: block; margin: 2px 16px 0; padding: 8px 2px !important; background: none !important; color: #c8ccd6 !important;
  font: 700 .8rem 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.nav-mega a.nav-pomoc-wiecej:hover { color: #fff !important; text-decoration: underline; }
@media (max-width: 980px) {
  .pyt-siatka { grid-template-columns: 1fr; gap: 36px; }
  .pyt-bok { position: static; }
  .nav-mega .nav-kol a.nav-pomoc-wiecej { margin: 0 14px 6px; }
}
@media (max-width: 600px) {
  .pyt-hero { padding: 30px 0 40px; }
  .pyt-krotko { padding: 20px 18px; }
  .pyt-krotko p { font-size: 1.02rem; }
  .pyt-tresc, .pyt-produkty, .pyt-faq-sek { padding: 48px 0; }
}
.pyt-art .pyt-lista li { padding-left: 0; }
.pyt-art .pyt-lista li::before { display: none; }

/* Karty produktow: przycisk „Do sklepu” na cala szerokosc, pod nim linki w jednym rzedzie */
.ev-karta .sklep-wiersz { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px; margin-top: auto; padding-top: 16px; }
.ev-karta .sklep-wiersz a.do-sklepu { width: 100%; justify-content: center; padding: 12px 18px; }
.sklep-linki { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.sklep-linki a, .sklep-linki .zapytaj-drugie, .sklep-linki .mat-wiecej { display: inline; margin: 0 !important; padding: 0; font-size: .9rem; line-height: 1.35; }
.ev-karta .ev-parametry { margin-bottom: 0; }
@media (max-width: 800px) { .sklep-linki { justify-content: flex-start; } }
.ev-karta .sklep-linki { flex-direction: column; align-items: flex-start; gap: 7px; }
.ev-karta .sklep-linki a { opacity: .85; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ev-karta .sklep-linki a:hover { opacity: 1; }
.pyt-hero nav.pyt-okruszki { position: static; height: auto; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: auto; }

/* ===================== Menu na telefonie: bez wystawania kart, krotsze kafle ===================== */
@media (max-width: 980px) {
  .nav-mega .nav-marki { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; min-width: 0; padding: 4px 14px 10px !important; box-sizing: border-box; }
  .nav-mega .nav-marki .nav-marka { min-width: 0; }
  .nav-mega .nav-marki .nav-marka-znak img { max-width: 100%; }
  .nav-mega .nav-marki .nav-marka-opis { overflow-wrap: anywhere; }
  /* Pomozemy wybrac: dwa kafle obok siebie */
  .nav-mega-narzedzia .nav-kol-pomoc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 14px 10px; }
  .nav-mega-narzedzia .nav-kol-pomoc .nav-kol-tytul, .nav-mega-narzedzia .nav-kol-pomoc .nav-pomoc-wiecej { grid-column: 1 / -1; }
  .nav-mega-narzedzia .nav-kol-pomoc .nav-kol-tytul { padding: 4px 0 0; }
  .nav-mega .nav-kol a.nav-pomoc { margin: 0; padding: 12px 12px 12px; gap: 4px; min-width: 0; }
  .nav-mega .nav-kol a.nav-pomoc .nav-pomoc-nazwa { margin-top: 4px; font-size: 1.25rem; }
  .nav-mega .nav-pomoc .nav-pomoc-opis, .nav-mega .nav-pomoc img { display: none; }
  .nav-mega .nav-pomoc::after { font-size: 4.5rem; bottom: -22px; }
  .nav-mega .nav-pomoc-tag { font-size: .6rem; padding: 3px 7px; }
  .nav-mega .nav-pomoc-dalej { font-size: .7rem; letter-spacing: .08em; }
  .nav-mega .nav-kol a.nav-pomoc-wiecej { margin: 0; padding: 4px 2px !important; }
  /* RAKU: nizszy kafel */
  .nav-mega .nav-kol a.nav-raku { margin: 4px 14px 6px; padding: 12px 14px 14px; }
  .nav-mega .nav-kol a.nav-raku .nav-raku-nazwa { margin-top: 8px; font-size: 1.9rem; }
  .nav-mega .nav-raku-opis { font-size: .78rem; padding-right: 64px; }
  .nav-mega .nav-raku img { width: 52px; bottom: 10px; }
  .nav-mega-chemia .nav-kol-raku { padding-bottom: 6px; }
  .nav-mega-chemia .nav-kol-raku .nav-pomoc-wiecej { margin: 0 14px; }
  /* Czego potrzebujesz: dwie kolumny */
  .nav-mega .nav-chemia-lista { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; padding: 0 14px 8px; }
  .nav-mega .nav-chemia-lista a { padding: 9px 10px !important; font-size: .8rem !important; white-space: normal; line-height: 1.2; min-height: 0; }
}
@media (max-width: 980px) {
  .nav-mega .nav-kol a.nav-pomoc-wiecej { border: 0 !important; background: none !important; min-height: 0 !important; box-shadow: none !important; color: #c8ccd6 !important; }
}
/* Menu na telefonie: rowne kafle */
@media (max-width: 980px) {
  .nav-mega .nav-marki { grid-auto-rows: 1fr; gap: 8px !important; }
  .nav-mega .nav-kol .nav-marki a.nav-marka { height: 100%; min-height: 96px; margin: 0; padding: 12px 12px 12px 14px !important; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; box-sizing: border-box; }
  .nav-mega .nav-marki .nav-marka-znak { height: 24px; flex: none; }
  .nav-mega .nav-marki .nav-marka-znak img { height: 22px; max-width: 100%; }
  .nav-mega .nav-marki .nav-marka-slowo { font-size: 1.05rem; line-height: 24px; }
  .nav-mega .nav-marki .nav-marka-opis { font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .nav-mega .nav-marki .nav-marka:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nav-mega-narzedzia .nav-kol-pomoc { grid-auto-rows: auto; }
  .nav-mega .nav-kol a.nav-pomoc { min-height: 108px; }
  .nav-mega .nav-chemia-lista { grid-auto-rows: 1fr; }
  .nav-mega .nav-chemia-lista li { display: flex; }
  .nav-mega .nav-chemia-lista a { display: flex !important; align-items: center; width: 100%; min-height: 44px !important; box-sizing: border-box; }
}
/* Menu na telefonie: wszystko w panelu na tej samej linii (14 px od krawedzi kolumny) */
@media (max-width: 980px) {
  .nav-mega .nav-kol, .nav-mega-narzedzia .nav-kol-pomoc { padding: 6px 14px 12px !important; }
  .nav-mega .nav-trzy { padding: 0 !important; }
  .nav-mega .nav-kol .nav-kol-tytul { padding: 10px 0 8px !important; margin: 0; }
  .nav-mega .nav-marki { padding: 0 0 6px !important; }
  .nav-mega .nav-kol a.nav-raku { margin: 0 0 6px !important; }
  .nav-mega .nav-kol a.nav-pomoc-wiecej { margin: 0 !important; padding: 6px 0 !important; }
  .nav-mega .nav-chemia-lista { padding: 0 0 6px !important; }
  .nav-mega .nav-kol-stopka { margin: 8px 0 0 !important; padding: 0 !important; }
  .nav-mega .nav-kol-stopka a { margin: 0 !important; }
  .nav-mega .nav-kol + .nav-kol { margin-top: 4px; }
  .nav-mega .nav-marki .nav-marka-opis { -webkit-line-clamp: 3; }
}
@media (max-width: 980px) { .nav-mega .nav-chemia-lista, .nav-mega-narzedzia .nav-kol-pomoc { gap: 8px !important; } }
@media (max-width: 980px) { .nav-mega .nav-marki .nav-marka-opis { display: block; -webkit-line-clamp: unset; overflow: visible; } }

/* ===================== ITAFIX / KLEIN FIX (itafix.html) ===================== */
.ev-dystrybutor img.kf-logo { height: 40px; }
.kf-karty-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kf-foto-jasne { background: #fff; }
.kf-foto-jasne img { object-fit: contain !important; padding: 16px; }
.kf-kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kf-kroki li { background: #fff; border: 1px solid #e1e4ea; border-radius: 6px; overflow: hidden; color: #4d525c; line-height: 1.6; font-size: .97rem; padding: 0 20px 20px; }
.kf-kroki figure { margin: 0 -20px 16px; aspect-ratio: 1; overflow: hidden; }
.kf-kroki img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kf-kroki b { display: block; margin-bottom: 6px; font: 900 1.5rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.kf-uwagi { margin-top: 26px; padding: 22px 26px; background: #fff; border-left: 4px solid var(--brand); border-radius: 6px; }
.kf-uwagi h3 { margin: 0 0 10px; font: 900 1.4rem 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #0d0f14; }
.kf-uwagi ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: #4d525c; line-height: 1.55; }
.kf-tabela-wrap { overflow-x: auto; margin: 16px 0 18px; border: 1px solid #e1e4ea; border-radius: 6px; }
.kf-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
.kf-tabela th { background: #0d0f14; color: #fff; text-align: left; padding: 10px 12px; font: 700 .78rem 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.kf-tabela td { padding: 9px 12px; border-top: 1px solid #ecece6; color: #2a2e36; }
.kf-tabela tbody tr:nth-child(even) td { background: #f6f7f9; }
.kf-tabela td:first-child { font-weight: 600; }
.kf-tabela td:last-child { font-weight: 700; color: var(--brand); white-space: nowrap; }
.kf-wykres { display: grid; gap: 10px; background: #fff; border: 1px solid #e1e4ea; border-radius: 6px; padding: 24px; }
.kf-wykres div { display: grid; grid-template-columns: 220px minmax(0, 1fr) 80px 110px; align-items: center; gap: 14px; }
.kf-wykres span { font-weight: 600; color: #0d0f14; font-size: .95rem; }
.kf-wykres i { height: 16px; border-radius: 99px; background: #eef0f4; position: relative; overflow: hidden; }
.kf-wykres i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand2)); }
.kf-wykres b { font: 800 1.15rem 'Barlow Condensed', sans-serif; color: #0d0f14; text-align: right; }
.kf-wykres small { color: #5f6470; font-size: .8rem; }
.kf-klein img { object-position: center top; }
@media (max-width: 980px) {
  .kf-karty-3, .kf-kroki { grid-template-columns: 1fr; }
  .kf-wykres { padding: 16px; }
  .kf-wykres div { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .kf-wykres span { grid-column: 1; }
  .kf-wykres b { grid-column: 2; grid-row: 1; }
  .kf-wykres i { grid-column: 1 / -1; }
  .kf-wykres small { grid-column: 1 / -1; }
}
@media (min-width: 981px) and (max-width: 1280px) { .kf-karty-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kf-system { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
.kf-system.aq-system-odwr { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
@media (max-width: 980px) { .kf-system, .kf-system.aq-system-odwr { grid-template-columns: minmax(0, 1fr); } }
.ev-karta-zdj.kf-foto-jasne, .aq-zdj.kf-foto-jasne { background: #fff !important; }
/* „Dla zakladu”: transport po lewej (2 wiersze), po prawej woda i mocowanie jedno pod drugim */
@media (min-width: 981px){
  .nav-mega.nav-mega-zaklad { width: 700px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .nav-mega-zaklad .nav-kol:first-child { grid-row: span 2; align-self: stretch; }
  .nav-mega-zaklad .nav-kol + .nav-kol { border-left: 1px solid rgba(255,255,255,0.08); }
  .nav-mega-zaklad .nav-kol:not(:first-child) .nav-marki { grid-template-columns: minmax(0, 1fr) !important; }
  .nav-mega-zaklad .nav-kol:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.08); }
}
@media (min-width: 981px) and (max-width: 1180px){ .nav-mega.nav-mega-zaklad { width: 640px; } }
@media (min-width: 1241px){
  .nav-mega.nav-mega-zaklad { width: 920px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .nav-mega-zaklad .nav-kol:first-child { grid-row: auto; }
  .nav-mega-zaklad .nav-kol:nth-child(3) { border-top: 0; }
  .nav-mega.nav-mega-zaklad { align-items: stretch; }
}
/* Strony-odpowiedzi: karty produktow na cala szerokosc, FAQ na ciemnym pasie, „Zobacz tez” jako kafelki */
.pyt-karty { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pyt-karty:has(> .pyt-karta:only-child) { grid-template-columns: minmax(0, 340px); }
.pyt-faq-sek { position: relative; background: #0d0f14 linear-gradient(135deg, rgba(47,109,246,.16), transparent 55%); color: #fff; }
.pyt-faq-sek .ev-kicker { color: var(--brand2, #8fb4ff); }
.pyt-faq-sek h2 { color: #fff; }
.pyt-faq-sek .pyt-faq { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--brand); }
.pyt-faq-sek .pyt-faq summary { color: #fff; }
.pyt-faq-sek .pyt-faq summary::after { color: var(--brand2, #8fb4ff); }
.pyt-faq-sek .pyt-faq[open] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); border-left-color: var(--brand2, #8fb4ff); }
.pyt-faq-sek .pyt-faq p { color: rgba(255,255,255,.78); }
.pyt-faq-sek .pyt-faq summary:hover { color: var(--brand2, #8fb4ff); }
.pyt-powiazane ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pyt-powiazane li a { height: 100%; box-sizing: border-box; font: 800 1.1rem/1.3 'Barlow Condensed', sans-serif; color: #0d0f14; }
.pyt-powiazane li:last-child { grid-column: 1 / -1; }
.pyt-powiazane li:last-child a { justify-content: center; background: var(--brand); border-color: var(--brand); color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.pyt-powiazane li:last-child a span { color: #fff; }
.pyt-powiazane li:last-child a:hover { transform: none; filter: brightness(1.08); }
@media (max-width: 640px) { .pyt-powiazane ul { grid-template-columns: minmax(0, 1fr); } }
/* „Pytania i odpowiedzi” w menu glownym — wyroznione zoltym znakiem zapytania, zeby nie ginelo wsrod grup */
.nav-links a.nav-pytania { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.nav-pytania-znak { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ffd23f; color: #0d0f14; font: 800 .9rem/1 'Barlow', sans-serif; flex: none; transition: transform .2s; }
.nav-links a.nav-pytania:hover { color: #ffd23f; }
.nav-links a.nav-pytania:hover .nav-pytania-znak { transform: rotate(-12deg) scale(1.08); }
.nav-links a.nav-pytania.current { color: #fff; border-color: #ffd23f; }
.nav-pytania-krotkie { display: none; }
@media (min-width: 981px) and (max-width: 1360px) {
  /* pelna nazwa zostaje dla czytnikow ekranu, widac skrot */
  .nav-pytania-pelne { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-pytania-krotkie { display: inline; }
}
@media (max-width: 980px) {
  .nav-links a.nav-pytania { display: flex; margin: 10px 0 2px; padding: 13px 16px; border: 1px solid rgba(255,210,63,.45); border-radius: 8px; background: rgba(255,210,63,.08); color: #fff; letter-spacing: .08em; }
  .nav-links a.nav-pytania.current { border-color: #ffd23f; }
  .nav-links a.nav-pytania::after { content: "→"; margin-left: auto; color: #ffd23f; }
}
/* Strona glowna: pas „Pytania i odpowiedzi” (generuje narzedzia/zbuduj-pytania.py) */
.dom-pyt { position: relative; overflow: hidden; background: #0d0f14 linear-gradient(135deg, rgba(255,210,63,.07), transparent 45%); color: #fff; padding: 96px 0; }
.dom-pyt::after { content: "?"; position: absolute; right: -2vw; top: -6vw; font: 800 clamp(16rem, 34vw, 30rem)/1 'Barlow Condensed', sans-serif; color: rgba(255,210,63,.05); pointer-events: none; }
.dom-pyt .section-pad { position: relative; z-index: 1; }
.dom-pyt .home-kicker { opacity: 1; animation: none; color: #ffd23f; }
.dom-pyt .home-kicker::before { display: none; }
.dom-pyt-znak { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffd23f; color: #0d0f14; font: 800 .95rem/1 'Barlow', sans-serif; letter-spacing: 0; }
.dom-pyt-glowa { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.dom-pyt-glowa h2 { margin: 14px 0 0; font: 800 clamp(2.2rem, 4.4vw, 3.6rem)/1.02 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #fff; }
.dom-pyt-glowa p { max-width: 430px; margin: 0; color: rgba(255,255,255,.66); line-height: 1.65; }
.dom-pyt-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dom-pyt-karta { display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 22px; border: 1px solid rgba(255,255,255,.1); border-top: 3px solid #ffd23f; border-radius: 6px; background: rgba(255,255,255,.035); color: #fff; text-decoration: none; transition: background .25s, transform .25s, border-color .25s; }
.dom-pyt-karta:hover { background: rgba(255,255,255,.07); border-color: rgba(255,210,63,.5); border-top-color: #ffd23f; transform: translateY(-3px); }
.dom-pyt-grupa { font: 700 .74rem/1 'Barlow Condensed', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ffd23f; }
.dom-pyt-karta b { font: 800 1.42rem/1.15 'Barlow Condensed', sans-serif; }
.dom-pyt-odp { flex: 1; color: rgba(255,255,255,.66); font-size: .95rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dom-pyt-dalej { font: 700 .86rem/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffd23f; }
.dom-pyt-stopka { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 36px; }
.dom-pyt-stopka .btn-mono { background: #ffd23f; border-color: #ffd23f; color: #0d0f14; }
.dom-pyt-stopka .btn-mono:hover { background: transparent; color: #ffd23f; }
.dom-pyt-stopka span { color: rgba(255,255,255,.6); }
.dom-pyt-stopka span a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .dom-pyt-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dom-pyt { padding: 64px 0; }
  .dom-pyt-glowa { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
  .dom-pyt-siatka { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dom-pyt-karta { padding: 20px; }
  .dom-pyt-stopka .btn-mono { width: 100%; justify-content: center; box-sizing: border-box; }
}
.dom-pyt-siatka { margin: 0; padding: 0; list-style: none; }
.dom-pyt-siatka li { display: flex; }
.dom-pyt-siatka li > a { flex: 1; }
.dom-pyt::before { display: none; }
.dom-pyt { background-image: linear-gradient(135deg, rgba(255,210,63,.07), transparent 45%) !important; }
/* Pytania pisane zwyklymi literami: zwykly (nie waski) Barlow 600 — waski krój 800 przy malym rozmiarze byl sciesniony i slabo czytelny */
.pyt-lista a, .pyt-powiazane li a { font: 600 1.06rem/1.4 'Barlow', sans-serif; letter-spacing: 0; color: #14171f; }
.pyt-lista a b { font-weight: 600; }
.pyt-faq summary { font: 600 1.06rem/1.45 'Barlow', sans-serif; letter-spacing: 0; color: #14171f; }
.pyt-faq-sek .pyt-faq summary { color: #fff; }
.dom-pyt-karta b { font: 600 1.14rem/1.4 'Barlow', sans-serif; letter-spacing: 0; }
.pyt-powiazane li:last-child a { font: 700 .98rem/1.2 'Barlow Condensed', sans-serif; letter-spacing: .08em; }
.dom-pyt-odp { flex: none; } .dom-pyt-dalej { margin-top: auto; padding-top: 4px; }

/* ===== Dostepnosc (WCAG 2.1 AA) — kontrast tekstu =====
   Kolor marki (--brand) jest dobrany pod jasne tlo; na ciemnych sekcjach napisy biora jasniejszy --brand2. */
.ev-testy .ev-kicker, .lan-raku .ev-kicker, .lan-ref .ev-kicker, .ev-cnc .ev-kicker, .wd-frezy .ev-kicker, .mat-hero .ev-kicker,
.mat-cnc .ev-kicker, .vit-pakiet .ev-kicker, .abr-tech summary .ev-kicker, .wd-frezy a[href="narzedzia-wg-materialu.html"] { color: var(--brand2); }
.hist.ciemna small, .wd-frezy small, .dark .section-label { color: #a3a8b2 !important; }
.hist.ciemna .section-label { color: #5fd3c2 !important; }
.dark li { color: #c4c4c4; }
.ctabar-btn.solid, .ctabar-btn.solid .lbl-full { color: #fff; }
.btn-primary { color: #fff; }
.mat-karty .ev-karta .ev-znacznik, .mat-karty .ev-karta .mat-wiecej, .mat-karty .ev-karta .ev-karta-link, .mat-karty .ev-karta small { color: color-mix(in srgb, var(--marka) 68%, #000); }
.mat-karty .ev-karta .ev-znacznik { border-color: color-mix(in srgb, var(--marka) 68%, #000); }
.mat-karty .do-sklepu, .mat-karty .mat-wyroznik, .mat-sekcja .do-sklepu, .wd-frezy .do-sklepu { background: #1e7d3c !important; border-color: #1e7d3c !important; color: #fff !important; }
.mat-wiecej, .sklep-wiersz .zapytaj-drugie { opacity: 1; }
.komplet .frez-akcje .frez-zapytaj { color: #17703d; }
.ev-karta[style*="--marka"] h3 small { color: color-mix(in srgb, var(--marka) 68%, #000); }
#gama .section-desc { color: #a3a8b2 !important; }
.vit-wyspa-tekst .ev-kicker { color: var(--brand2); }

/* A11Y-POCZATEK — ten blok kopiuje tez generator stron marek (zbuduj-strony-marek.py) */
/* ===== Dostepnosc: przycisk i panel (js/dostepnosc.js) ===== */
.a11y-skok { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 12px 18px; background: #ffd23f; color: #0d0f14; font: 700 1rem 'Barlow', sans-serif; text-decoration: none; border-radius: 0 0 6px 6px; }
.a11y-skok:focus { top: 0; outline: 3px solid #0d0f14; }
:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #2563eb !important; outline-offset: 1px; }
[tabindex="-1"]:focus { outline: none; }
.a11y-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; margin-left: 14px; padding: 0 12px 0 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 17px; background: none; color: #ddd; cursor: pointer; font: 700 .86rem 'Barlow Condensed', sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: border-color .2s, color .2s; }
.a11y-btn:hover, .a11y-btn[aria-expanded="true"] { border-color: rgba(255,255,255,.5); color: #fff; }
.a11y-btn + .jezyk { margin-left: 10px; }
.a11y-btn-plywajacy { position: fixed; left: 12px; bottom: 90px; z-index: 450; background: #151515; }
.a11y-panel { position: fixed; z-index: 1001; width: min(340px, calc(100vw - 24px)); padding: 16px; background: #151515; color: #eee; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.5); font-family: 'Barlow', sans-serif; }
.a11y-panel[hidden] { display: none; }
.a11y-panel-tytul { margin: 0 0 10px; font: 800 1.15rem 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.a11y-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.a11y-opcja { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.04); color: #eee; text-align: left; cursor: pointer; font: inherit; }
.a11y-opcja:hover { background: rgba(255,255,255,.09); }
.a11y-opcja b { display: block; font-size: 1rem; font-weight: 600; color: #fff; }
.a11y-opcja small { display: block; margin-top: 2px; font-size: .85rem; color: #b8bcc4; }
.a11y-opcja-znak { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #555a64; transition: background .2s; }
.a11y-opcja-znak::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.a11y-opcja[aria-checked="true"] { border-color: #ffd23f; }
.a11y-opcja[aria-checked="true"] .a11y-opcja-znak { background: #ffd23f; }
.a11y-opcja[aria-checked="true"] .a11y-opcja-znak::after { transform: translateX(16px); background: #0d0f14; }
.a11y-reset { margin-top: 12px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: none; color: #fff; cursor: pointer; font: 600 .92rem 'Barlow', sans-serif; }
.a11y-deklaracja { display: inline-block; margin: 12px 0 0 12px; color: #ffd23f; font-size: .92rem; }
@media (min-width: 981px) and (max-width: 1360px) { .a11y-btn-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .a11y-btn { padding: 0 8px; } }
@media (max-width: 980px) {
  .a11y-btn { order: 1; margin: 0 8px 0 0; padding: 0 8px; }
  .a11y-btn-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .a11y-btn + .jezyk { margin-left: 0; }
}

/* Wiekszy tekst */
html.a11y-tekst { font-size: 125%; }
html.a11y-tekst body { font-size: 1.05rem; }
/* Podkreslone linki */
html.a11y-linki a:not(.btn-mono):not(.nav-cta) { text-decoration: underline !important; text-underline-offset: 3px; }
/* Bez animacji */
html.a11y-ruch *, html.a11y-ruch *::before, html.a11y-ruch *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-ruch .fade-up, html.a11y-ruch .reveal, html.a11y-ruch .r { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .tasma-kol { animation: none !important; }
  .fade-up, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Wysoki kontrast: czarne tlo, bialy tekst, zolte linki i ramki */
html.a11y-kontrast, html.a11y-kontrast body { background: #000 !important; }
html.a11y-kontrast body *:not(img):not(video):not(svg):not(svg *):not(picture):not(canvas):not(#a11y-x) {
  background-color: #000 !important; background-image: none !important; color: #fff !important;
  border-color: #fff !important; text-shadow: none !important; box-shadow: none !important;
}
html.a11y-kontrast *::before, html.a11y-kontrast *::after { background-image: none !important; }
html.a11y-kontrast a:not(#a11y-x), html.a11y-kontrast a *:not(#a11y-x), html.a11y-kontrast summary:not(#a11y-x), html.a11y-kontrast summary *:not(#a11y-x) { color: #ffff00 !important; }
html.a11y-kontrast a { text-decoration: underline !important; }
html.a11y-kontrast button:not(#a11y-x), html.a11y-kontrast [class*="btn"]:not(#a11y-x), html.a11y-kontrast .nav-cta:not(#a11y-x), html.a11y-kontrast input:not(#a11y-x), html.a11y-kontrast select:not(#a11y-x), html.a11y-kontrast textarea:not(#a11y-x) { border: 2px solid #ffff00 !important; }
html.a11y-kontrast ::placeholder { color: #ccc !important; opacity: 1; }
html.a11y-kontrast :focus-visible { outline: 3px solid #00ffff !important; outline-offset: 2px; }
html.a11y-kontrast .mono-bg, html.a11y-kontrast .scena-tlo, html.a11y-kontrast [class*="overlay"] { display: none !important; }
html.a11y-kontrast img { opacity: 1 !important; filter: none !important; }
html.a11y-kontrast .a11y-opcja[aria-checked="true"] .a11y-opcja-znak:not(#a11y-x) { background-color: #ffff00 !important; }
html.a11y-kontrast .a11y-opcja-znak::after { background-color: #fff !important; }
html.a11y-kontrast .a11y-opcja[aria-checked="true"] .a11y-opcja-znak::after { background-color: #000 !important; }
.a11y-panel { max-height: calc(100vh - 90px); overflow-y: auto; }
html.a11y-tekst .nav-logo .brand-sub, html.a11y-tekst .nav-logo .divider { display: none; }
/* A11Y-KONIEC */

/* ===== Gorny pasek — porzadek (2026-10) =====
   Logo (+ ewentualnie logo marki) · grupy · Pytania · Kontakt · ikony: dostepnosc i jezyk. */
.nav-logo .brand-sub, .nav-logo .divider:has(+ .brand-sub) { display: none; }
.nav-links a.nav-pytania { gap: 7px; color: #aaa; }
.nav-links a.nav-pytania:hover { color: #fff; }
.nav-links a.nav-pytania.current { color: #fff; }
.nav-pytania-znak { width: 18px; height: 18px; font-size: .78rem; }
@media (min-width: 981px) {
  .nav-links li { margin-left: 26px; }
  .nav-links li:last-child { margin-left: 30px; }
  .a11y-btn { width: 34px; padding: 0; justify-content: center; margin-left: 22px; }
  .a11y-btn-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .a11y-btn + .jezyk { margin-left: 8px; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .nav-links li { margin-left: 18px; }
  .nav-links li:last-child { margin-left: 22px; }
  .a11y-btn { margin-left: 16px; }
}
@media (max-width: 980px) {
  .nav-links a.nav-pytania { color: #fff; }
}

/* Pasek o sklepie: jedna linia; na telefonie krocej */
.w-budowie-krotkie { display: none; }
@media (max-width: 640px) {
  .w-budowie { padding: 7px 12px; font-size: .82rem; }
  .w-budowie-kropka { display: none; }
  .w-budowie-dlugie { display: none; }
  .w-budowie-krotkie { display: inline; }
  .w-budowie-zapis { padding: 3px 10px; white-space: nowrap; }
}

/* ===== Stopka (js/wspolne.js) ===== */
footer.stopka-sz { padding: 56px 0 0; color: #a3a8b2; }
.stopka-siatka { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.stopka-o p { margin: 16px 0 18px; max-width: 34ch; font-size: .9rem; line-height: 1.6; color: #a3a8b2; }
.stopka-logo img { height: 30px; width: auto; opacity: .9; }
.stopka-tytul { margin: 4px 0 14px; font: 700 .82rem/1 'Barlow Condensed', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.stopka-kol ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.stopka-kol li { font-size: .9rem; line-height: 1.4; }
footer.stopka-sz a { color: #c4c8d0; }
footer.stopka-sz a:hover { color: #fff; text-decoration: underline; }
.stopka-kontakt li:first-child a { font: 700 1.15rem 'Barlow Condensed', sans-serif; letter-spacing: .04em; color: #fff; }
.stopka-dol { margin-top: 44px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.stopka-dol p { margin: 0; font-size: .82rem; color: #8b919c; }
@media (max-width: 1100px) { .stopka-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stopka-o { grid-column: 1 / -1; } }
@media (max-width: 640px) { .stopka-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; } footer.stopka-sz { padding-top: 40px; } }

/* Miejsce na pasek sekcji, zanim zbuduje go js/pasek-sekcji.js (bez skoku tresci) */
.pasek-sekcji-miejsce { height: 50.5px; }
@media (max-width: 640px) { .pasek-sekcji-miejsce { height: 44.5px; } }