/* ============================================================
   DEMAR – Strona główna (nowa koncepcja 2026)
   Samodzielny arkusz dla index.html / index-a.html / index-b.html / 404.html
    ============================================================ */

:root {
  --red:        #DA1A1A;
  --red-dark:   #B5140F;
  --orange:     #F39200;
  --blue:       #1B9DD8;
  --green:      #6A923C;
  --ink:        #141414;
  --dark:       #121518;
  --dark-2:     #0c0e10;
  --gray-50:    #f6f6f5;
  --gray-100:   #ededeb;
  --gray-200:   #e2e2df;
  --gray-400:   #a8a8a4;
  --gray-500:   #8a8a86;
  --gray-600:   #5f5f5b;
  --text:       #1d1d1b;
  --maxw:       1280px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --font:       'Helvetica Neue Condensed','Helvetica Neue LT Std Cn','HelveticaNeue-CondensedBold','Helvetica Condensed','Arial Narrow',Arial,sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

.container { max-width:var(--maxw); margin:0 auto; padding:0 32px; }

h1,h2,h3 { margin:0; line-height:1.05; }

/* Display font for section / hero headings */
.display { font-family:var(--font); font-weight:700; letter-spacing:.5px; text-transform:uppercase; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font); font-weight:600; text-transform:uppercase;
  letter-spacing:1px; font-size:14px;
  padding:15px 26px; border:none; cursor:pointer;
  transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn svg { width:18px; height:18px; transition:transform .25s var(--ease); }
.btn:hover svg { transform:translateX(5px); }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:var(--red-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(218,26,26,.32); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.35); padding:13px 24px; }
.btn-outline:hover { border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { background:#000; transform:translateY(-2px); }

.text-link {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font); font-weight:600; font-size:12.5px; letter-spacing:1px;
  text-transform:uppercase; color:var(--red);
}
.text-link svg { width:18px; height:14px; stroke:currentColor; stroke-width:2.4; fill:none; transition:transform .25s var(--ease); }
.text-link:hover svg { transform:translateX(5px); }
.text-link-dark { color:var(--ink); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:100; background:#fff;
  border-bottom:1px solid var(--gray-100);
  transition:box-shadow .3s;
}
.site-header.scrolled { box-shadow:0 6px 24px rgba(0,0,0,.07); }
.header-inner {
  max-width:var(--maxw); margin:0 auto; padding:0 32px;
  height:74px; display:flex; align-items:center; gap:40px;
}
.logo-text { font-family:var(--font); font-weight:700; font-size:27px; letter-spacing:.5px; color:var(--ink); text-transform:lowercase; }
.logo-dot { color:var(--red); }

.main-nav { display:flex; gap:30px; margin-left:8px; }
.main-nav a {
  font-size:14px; font-weight:600; color:#2a2a28; letter-spacing:.3px;
  display:flex; align-items:center; gap:6px; padding:6px 0; position:relative; text-transform:uppercase;
}
.main-nav a::after {
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--red); transition:width .25s var(--ease);
}
.main-nav a:hover { color:var(--red); }
.main-nav a:hover::after { width:100%; }
.dropdown-icon { width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6; transition:transform .25s var(--ease); }

/* Menu z rozwijanymi listami (dropdown) */
.nav-item { position:relative; }
.nav-item:hover > a { color:var(--red); }
.nav-item:hover > a::after { width:100%; }
.nav-item:hover .dropdown-icon { transform:rotate(180deg); opacity:1; }
.nav-dropdown {
  position:absolute; top:calc(100% + 20px); left:-14px; min-width:232px;
  background:#fff; border:1px solid var(--gray-100); box-shadow:0 14px 34px rgba(0,0,0,.12);
  padding:8px 0; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:120;
}
.nav-dropdown::before { content:''; position:absolute; top:-20px; left:0; right:0; height:20px; }
.nav-item:hover .nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown a {
  display:block; padding:9px 22px; font-size:13px; font-weight:500; letter-spacing:0;
  text-transform:none; color:#3a3a38; white-space:nowrap;
}
.nav-dropdown a::after { display:none; }
.nav-dropdown a:hover { background:var(--gray-50); color:var(--red); }

.header-actions { margin-left:auto; display:flex; align-items:center; gap:20px; }
.search-btn { background:none; border:none; cursor:pointer; padding:6px; color:var(--ink); }
.search-btn svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.search-btn:hover { color:var(--red); }
.shop-btn {
  background:var(--red); color:#fff; padding:8px 16px; display:flex; flex-direction:column; line-height:1;
  transition:background .25s, transform .25s;
}
.shop-btn:hover { background:var(--red-dark); transform:translateY(-1px); }
.shop-btn-label { font-size:9px; letter-spacing:1.5px; opacity:.85; margin-bottom:3px; }
.shop-btn-brand { font-family:var(--font); font-weight:700; font-size:17px; display:flex; align-items:baseline; gap:3px; text-transform:lowercase; }
.shop-24 { background:#fff; color:var(--red); font-size:12px; padding:1px 5px; border-radius:2px; }

/* ============================================================
   HERO – wersja A (kolaż 4 zdjęć, baked tytuł + hotspoty)
   ============================================================ */
.hero-a { position:relative; background:var(--ink); }
.hero-a-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.hero-a-col { position:relative; display:block; overflow:hidden; line-height:0; aspect-ratio:462/906; }
.hero-a-col img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.hero-a-col:nth-child(1) { --cat:#e4131a; }
.hero-a-col:nth-child(2) { --cat:#f8cd02; }
.hero-a-col:nth-child(3) { --cat:#ea8100; }
.hero-a-col:nth-child(4) { --cat:#85a936; }
.hero-a-col::after { content:''; position:absolute; inset:0; background:var(--cat,var(--red)); opacity:0; mix-blend-mode:multiply; transition:opacity .3s; }
.hero-a-col:hover img { transform:scale(1.05); }
.hero-a-col:hover::after { opacity:.4; }
.hero-a-title {
  position:absolute; top:43%; left:0; right:0; transform:translateY(-50%); margin:0;
  text-align:center; color:#fff; line-height:1.02; padding:0 24px; pointer-events:none;
  font-size:clamp(28px,4.7vw,64px); letter-spacing:1px; text-shadow:0 4px 34px rgba(0,0,0,.7);
} 

/* ============================================================
   HERO – wersja 2 (duży obraz + tekst + kolorowe paski)
   ============================================================ */
.hero-b { position:relative; line-height:0; background:var(--ink); }
.hero-b img { width:100%; height:auto; }
/* Klikalny obszar nad wpisanym w grafikę przyciskiem „Zobacz kolekcję” */
.hero-b-cta { position:absolute; left:2%; top:78%; width:16%; height:13%; border-radius:2px; transition:box-shadow .25s, background .25s; }
.hero-b-cta:hover { background:rgba(255,255,255,.12); box-shadow:0 0 0 2px rgba(255,255,255,.5); }
.hero-b-overlay {
  position:absolute; inset:0; display:flex; align-items:center;
}
.hero-b-overlay .container { width:100%; }
.hero-b-text { max-width:520px; line-height:1.5; }
.hero-b-title {
  font-family:var(--font); font-weight:700; text-transform:uppercase;
  color:#fff; font-size:clamp(34px,4.4vw,62px); line-height:.98; letter-spacing:1px;
  text-shadow:0 3px 30px rgba(0,0,0,.5);
}
.hero-b-divider { width:64px; height:5px; background:var(--red); margin:22px 0; }
.hero-b-desc { color:rgba(255,255,255,.92); font-size:16px; max-width:400px; margin:0 0 28px; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.hero-b-dots { position:absolute; right:48px; bottom:30px; display:flex; gap:9px; }
.hero-b-dots span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); }
.hero-b-dots span.active { background:#fff; width:26px; border-radius:5px; }

/* Kolorowe paski kategorii (wersja 2) */
.cat-bars { display:grid; grid-template-columns:repeat(4,1fr); }
.cat-bar {
  position:relative; overflow:hidden; padding:30px 28px 26px; min-height:148px;
  display:flex; flex-direction:column; justify-content:space-between; color:#fff;
  transition:transform .3s var(--ease);
}
.cat-bar::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .3s; }
.cat-bar:hover { transform:translateY(-4px); }
.cat-bar:hover::before { background:rgba(0,0,0,.12); }
.cat-bar > * { position:relative; z-index:1; }
.cat-bar-red    { background:var(--red); }
.cat-bar-orange { background:var(--orange); }
.cat-bar-blue   { background:var(--blue); }
.cat-bar-green  { background:var(--green); }
.cat-bar-icon { width:42px; height:42px; }
.cat-bar-icon svg { width:100%; height:100%; fill:none; stroke:#fff; stroke-width:1.6; }
.cat-bar-name { font-family:var(--font); font-weight:600; text-transform:uppercase; font-size:18px; line-height:1.15; letter-spacing:.5px; margin-top:12px; }
.cat-bar-link { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; opacity:.92; display:flex; align-items:center; gap:7px; margin-top:10px; }
.cat-bar-link svg { width:15px; height:11px; stroke:#fff; stroke-width:2.4; fill:none; transition:transform .25s var(--ease); }
.cat-bar:hover .cat-bar-link svg { transform:translateX(5px); }

/* Miniaturki nad paskami (wersja 2) */
.hero-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; line-height:0; }
.hero-strip a { position:relative; overflow:hidden; }
.hero-strip img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.hero-strip a:hover img { transform:scale(1.06); }

/* ============================================================
   SECTION GENERICS
   ============================================================ */
.section { padding:84px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:46px; gap:24px; flex-wrap:wrap; }
.section-title { font-family:var(--font); font-weight:700; text-transform:uppercase; font-size:30px; letter-spacing:.5px; color:var(--ink); }
.section-eyebrow { display:inline-block; font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:2.5px; color:var(--red); text-transform:uppercase; margin-bottom:14px; }

.section-nav { display:flex; gap:10px; }
.section-nav-btn {
  width:46px; height:46px; border:1.5px solid var(--gray-200); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.25s;
}
.section-nav-btn svg { width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:2; }
.section-nav-btn:hover { background:var(--ink); border-color:var(--ink); }
.section-nav-btn:hover svg { stroke:#fff; }

/* ---------- Polecane produkty ---------- */
.products-carousel { overflow:hidden; }
.products-grid { display:flex; gap:24px; transition:transform .45s var(--ease); }
.product-card {
  flex:0 0 calc((100% - 72px)/4); min-width:0; background:#fff; border:1px solid var(--gray-100);
  position:relative; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; cursor:pointer;
}
.product-card:hover { box-shadow:0 18px 40px rgba(0,0,0,.10); border-color:transparent; }
.product-badge {
  position:absolute; top:14px; left:14px; z-index:2; background:var(--red); color:#fff;
  font-family:var(--font); font-weight:600; font-size:10px; letter-spacing:1.5px; padding:5px 10px; text-transform:uppercase;
}
.product-img { background:#fff; aspect-ratio:1/.86; display:flex; align-items:center; justify-content:center; padding:18px; overflow:hidden; }
.product-img img { max-height:100%; width:auto; object-fit:contain; transition:transform .4s var(--ease); }
.product-card:hover .product-img img { transform:scale(1.07); }
.product-info { padding:20px 22px 24px; }
.product-name { font-family:var(--font); font-weight:600; text-transform:uppercase; font-size:16px; letter-spacing:.5px; color:var(--ink); }
.product-price { font-size:18px; font-weight:700; color:var(--ink); margin:6px 0 16px; }

/* ---------- Nasze technologie ---------- */
.tech { background:var(--gray-50); }
.tech-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-left:1px solid var(--gray-200); }
.tech-card { padding:34px 24px; text-align:center; border-right:1px solid var(--gray-200); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); transition:background .3s, transform .3s; background:#fff; }
.tech-card:hover { background:var(--ink); transform:translateY(-3px); }
.tech-icon { width:64px; height:64px; margin:0 auto 18px; }
.tech-icon svg { width:100%; height:100%; fill:none; stroke:var(--ink); stroke-width:1.4; transition:stroke .3s; }
.tech-card:hover .tech-icon svg { stroke:var(--red); }
.tech-name { font-family:var(--font); font-weight:600; text-transform:uppercase; font-size:14px; letter-spacing:.5px; color:var(--ink); margin-bottom:10px; transition:color .3s; }
.tech-card:hover .tech-name { color:#fff; }
.tech-desc { font-size:12.5px; color:var(--gray-600); line-height:1.5; transition:color .3s; }
.tech-card:hover .tech-desc { color:rgba(255,255,255,.75); }

/* ---------- Dlaczego DEMAR (dark) ---------- */
.why { background:var(--dark) url('../img/bg_dlaczekg.jpg') center/cover no-repeat; color:#fff; position:relative; overflow:hidden; padding:84px 0; }
.why::before { content:''; position:absolute; inset:0; background:rgba(9,11,13,.66); }
.why > .container { position:relative; z-index:1; }
.why-grid { display:grid; grid-template-columns:0.92fr 1.32fr 0.82fr; gap:40px; align-items:center; }
.why-eyebrow { font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:2.5px; color:var(--red); text-transform:uppercase; margin-bottom:16px; }
.why-title { font-family:var(--font); font-weight:700; text-transform:uppercase; font-size:42px; letter-spacing:1px; margin-bottom:20px; }
.why-text { color:rgba(255,255,255,.66); font-size:15.5px; max-width:440px; margin-bottom:30px; }
.why-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:32px 22px; margin-top:0; }
.stat-num { font-family:var(--font); font-weight:700; font-size:36px; color:#fff; line-height:1; }
.stat-num.sm { font-size:24px; }
.stat-label { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); margin:10px 0 6px; }
.stat-desc { font-size:12px; color:rgba(255,255,255,.5); line-height:1.45; }
.why-media { position:relative; }
.why-media img { width:100%; border-radius:2px; }

/* ---------- DEMAR od 1978 (jakość) ---------- */
.quality-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
.quality-title { font-family:var(--font); font-weight:700; text-transform:uppercase; font-size:38px; letter-spacing:1px; color:var(--ink); margin-bottom:18px; }
.quality-text { color:var(--gray-600); font-size:15px; max-width:430px; margin-bottom:30px; }
.quality-list { display:flex; flex-direction:column; gap:22px; }
.quality-item { display:flex; gap:18px; align-items:flex-start; }
.quality-item-icon { flex:0 0 44px; width:44px; height:44px; border:1.5px solid var(--gray-200); display:flex; align-items:center; justify-content:center; }
.quality-item-icon svg { width:24px; height:24px; fill:none; stroke:var(--ink); stroke-width:1.5; }
.quality-item h4 { font-family:var(--font); font-weight:600; text-transform:uppercase; font-size:14px; letter-spacing:.5px; color:var(--ink); margin:2px 0 5px; }
.quality-item p { font-size:13px; color:var(--gray-600); margin:0; line-height:1.5; }
.quality-media img { width:100%; border-radius:2px; box-shadow:0 30px 60px rgba(0,0,0,.14); }

/* ---------- Newsletter (czerwony pasek) ---------- */
.newsletter { background:var(--red); color:#fff; }
.newsletter-inner { display:flex; align-items:center; gap:40px; padding:30px 0; flex-wrap:wrap; }
.newsletter-head { display:flex; align-items:center; gap:16px; }
.newsletter-head svg { width:38px; height:38px; fill:none; stroke:#fff; stroke-width:1.6; flex-shrink:0; }
.newsletter-title { font-family:var(--font); font-weight:700; text-transform:uppercase; font-size:19px; }
.newsletter-sub { font-size:12.5px; color:rgba(255,255,255,.85); }
.newsletter-form { display:flex; gap:10px; }
.newsletter-form input { border:none; padding:13px 18px; width:230px; font-size:14px; font-family:inherit; }
.newsletter-form input:focus { outline:2px solid rgba(255,255,255,.6); }
.newsletter-form button { background:var(--ink); color:#fff; border:none; padding:13px 22px; font-family:var(--font); font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:13px; cursor:pointer; transition:background .25s; }
.newsletter-form button:hover { background:#000; }
.newsletter-perks { display:flex; gap:26px; margin-left:auto; }
.newsletter-perk { display:flex; align-items:center; gap:11px; font-size:12px; line-height:1.25; }
.newsletter-perk svg { width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.6; flex-shrink:0; }
.newsletter-perk small { display:block; color:rgba(255,255,255,.75); font-size:11px; }
.newsletter-perk strong { font-weight:600; }
.newsletter-sep { width:1px; align-self:stretch; background:rgba(255,255,255,.25); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:#fff; color:var(--gray-600); padding:64px 0 0; border-top:1px solid var(--gray-100); }
.footer-grid { display:grid; grid-template-columns:0.95fr 3.05fr; gap:36px; padding-bottom:48px; }
.footer-logo { font-family:var(--font); font-weight:700; font-size:26px; color:var(--ink); text-transform:lowercase; }
.footer-logo .dot { color:var(--red); }
.footer-desc { font-size:13.5px; color:var(--gray-600); margin:18px 0 22px; max-width:280px; }
.footer-desc strong { color:var(--ink); }
.footer-socials { display:flex; gap:12px; }
.footer-social { width:38px; height:38px; border:1px solid var(--gray-200); display:flex; align-items:center; justify-content:center; transition:.25s; }
.footer-social svg { width:17px; height:17px; fill:var(--gray-600); transition:fill .25s; }
.footer-social:hover { background:var(--red); border-color:var(--red); transform:translateY(-2px); }
.footer-social:hover svg { fill:#fff; }
.footer-cols { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.footer-col-title { font-family:var(--font); font-weight:600; text-transform:uppercase; font-size:13px; letter-spacing:1px; color:var(--ink); margin-bottom:16px; }
.footer-col a { display:block; font-size:13px; color:var(--gray-600); padding:5px 0; transition:color .2s, padding-left .2s; }
.footer-col a:hover { color:var(--red); padding-left:4px; }
.footer-contact { display:flex; gap:10px; font-size:13px; color:var(--gray-600); margin-bottom:12px; }
.footer-contact svg { width:17px; height:17px; fill:none; stroke:var(--red); stroke-width:1.7; flex-shrink:0; margin-top:1px; }
.footer-contact b { color:var(--ink); font-weight:600; display:block; margin-bottom:8px; }
.footer-bottom { border-top:1px solid var(--gray-200); padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--gray-500); flex-wrap:wrap; gap:12px; }
.footer-made { display:flex; align-items:center; gap:10px; letter-spacing:1px; text-transform:uppercase; font-size:11px; }
.footer-flag { width:26px; height:17px; border:1px solid var(--gray-400); overflow:hidden; display:flex; flex-direction:column; }
.footer-flag i { flex:1; display:block; }
.footer-flag .w { background:#fff; }
.footer-flag .r { background:var(--red); }

/* ============================================================
   Reveal animations (współpraca z js/main.js)
   ============================================================ */
.reveal,.reveal-left,.reveal-right { opacity:0; transform:translateY(36px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-left { transform:translateX(-40px); }
.reveal-right { transform:translateX(40px); }
.revealed { opacity:1 !important; transform:none !important; }
.stagger-children > * { transition-delay:calc(var(--i,0) * 80ms); }

/* ============================================================
   Przełącznik wersji (pomoc przy prezentacji klientowi)
   ============================================================ */
.version-switch {
  position:fixed; right:0; bottom:18px; z-index:200;
  background:rgba(20,20,20,.92); backdrop-filter:blur(6px); border-radius:40px 0 0 40px;
  padding:6px; display:flex; align-items:center; gap:4px;
  box-shadow:0 8px 28px rgba(0,0,0,.3);
}
.vs-tab {
  flex:none; width:30px; height:36px; border:none; background:transparent; cursor:pointer;
  color:#fff; font:700 18px/1 var(--font); opacity:.85;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease);
}
.version-switch:hover .vs-tab { transform:rotate(180deg); }
.vs-panel {
  display:flex; gap:4px; align-items:center;
  max-width:0; overflow:hidden; white-space:nowrap;
  transition:max-width .45s var(--ease);
}
.version-switch:hover .vs-panel { max-width:460px; padding-right:4px; }
.version-switch a {
  font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:rgba(255,255,255,.7); padding:8px 16px; border-radius:30px; transition:color .25s, background .25s; white-space:nowrap;
}
.version-switch a.active { background:var(--red); color:#fff; }
.version-switch a:not(.active):hover { color:#fff; }

/* ============================================================
   404
   ============================================================ */
.err {
  min-height:72vh; display:flex; align-items:center;
  background:var(--dark) url('../assets/images/feat_boot_dark.jpg') right center / contain no-repeat;
  position:relative; overflow:hidden;
}
.err::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--dark) 38%,rgba(18,21,24,.55) 70%,rgba(18,21,24,.85)); }
.err-inner { position:relative; z-index:1; padding:80px 0; }
.err-code { font-family:var(--font); font-weight:700; font-size:clamp(90px,16vw,200px); color:#fff; line-height:.85; letter-spacing:2px; }
.err-code span { color:var(--red); }
.err-title { font-family:var(--font); font-weight:700; text-transform:uppercase; font-size:clamp(24px,3vw,38px); color:#fff; margin:14px 0 16px; }
.err-text { color:rgba(255,255,255,.7); font-size:16px; max-width:420px; margin-bottom:30px; }
.err-links { display:flex; gap:14px; flex-wrap:wrap; }

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width:1024px){
  .main-nav { display:none; }
  .why-grid,.quality-grid { grid-template-columns:1fr; }
  .tech-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; gap:36px; }
  .footer-cols { grid-template-columns:repeat(3,1fr); }
  .newsletter-perks { margin-left:0; flex-basis:100%; }
}
@media (max-width:760px){
  .container,.header-inner { padding:0 18px; }
  .cat-bars,.hero-strip { grid-template-columns:repeat(2,1fr); }
  .hero-a-grid { grid-template-columns:repeat(2,1fr); }
  .hero-a-title { top:50%; font-size:clamp(24px,7vw,40px); }
  .product-card { flex-basis:calc((100% - 24px)/2); }
  .why-stats { grid-template-columns:repeat(2,1fr); }
  .footer-cols { grid-template-columns:repeat(2,1fr); }
  .hero-b-overlay { position:relative; background:var(--ink); }
  .hero-b-desc { color:rgba(255,255,255,.9); }
  .newsletter-inner { gap:20px; }
  .newsletter-perks { flex-wrap:wrap; gap:16px; }
}

/* ============================================================
   Podmiana elementów na grafiki (index-a.html)
   ============================================================ */
.logo-img { height:38px; width:auto; }
.footer-logo-img { height:36px; width:auto; }
.shop-link-img { display:inline-flex; align-items:center; transition:transform .25s var(--ease); }
.shop-link-img img { height:46px; width:auto; }
.shop-link-img:hover { transform:translateY(-1px); }

.cat-bar-img { display:block; line-height:0; overflow:hidden; transition:transform .3s var(--ease); }
.cat-bar-img img { width:100%; height:auto; transition:transform .4s var(--ease); }
.cat-bar-img:hover { transform:translateY(-4px); }
.cat-bar-img:hover img { transform:scale(1.04); }

.newsletter-img { display:block; line-height:0; }
.newsletter-img img { width:100%; height:auto; }

/* Technologie z ikonami-grafikami (index-a.html), ikony +20% */
.tech-photo .tech-icon { width:100%; height:72px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.tech-photo .tech-icon img { max-height:100%; max-width:132px; width:auto; height:auto; object-fit:contain; }
.tech-photo .tech-card:hover { background:#fff; transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.08); }
.tech-photo .tech-card:hover .tech-name { color:var(--ink); }
.tech-photo .tech-card:hover .tech-desc { color:var(--gray-600); }

/* Hero v2: miniaturki + kafelki osadzone na ciemnym pasie banera, baner wystaje pod spodem */
.hero-b-stack { position:relative; overflow:hidden; }
.hero-b-stack > img { width:100%; height:auto; display:block; }
.hero-b-rows {
  position:absolute; left:5%; right:5%; top:53.7%; z-index:2; line-height:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.hb-col { display:block; }
.hb-photo, .hb-tile { display:block; overflow:hidden; }
.hb-photo { aspect-ratio:24/15; }                 /* zdjęcie – wyższe */
.hb-tile  { aspect-ratio:193/100; }               /* kolorowy kafelek – równa wysokość */
.hb-photo img, .hb-tile img { width:100%; height:100%; object-fit:cover; }

/* Ikony "O jakości" jako grafiki (index-a.html) */
.quality-item-icon img { width:auto; height:auto; max-width:31px; max-height:31px; object-fit:contain; }

/* ============================================================
   WERSJA 3 – HERO
   ============================================================ */
.hero-v3 {
  position:relative; display:flex; min-height:auto; height:auto; overflow:hidden; background:var(--ink);
  aspect-ratio: 1920 / 697;
  background: url('../img/heder_r3.jpg') no-repeat center/cover;
}

/* Red diagonal panel */
.hero-v3-panel {
  position:absolute; left:0; top:0; bottom:0; width:25%; z-index:4;
  background:transparent;
  clip-path:none;
  display:flex; align-items:center;
}
.hero-v3-panel-inner {
  padding:48px 7% 48px 12%; max-width:340px;
}
.hero-v3-heading {
  color:#fff; font-size:clamp(28px,3.6vw,52px); line-height:.98; letter-spacing:1.5px; margin-bottom:0;
}
.hero-v3-heading span {
  display:block;
  white-space:nowrap;
}
.hero-v3-rule {
  width:56px; height:4px; background:#fff; margin:22px 0; opacity:.7;
}
.hero-v3-desc {
  color:rgba(255,255,255,.88); font-size:14.5px; line-height:1.55; margin:0 0 28px;
}
.hero-v3-btn {
  background:#fff; color:var(--red); font-family:var(--font); font-weight:600;
  text-transform:uppercase; letter-spacing:1px; font-size:13px;
  padding:14px 24px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.hero-v3-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .25s var(--ease); }
.hero-v3-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.3); }
.hero-v3-btn:hover svg { transform:translateX(5px); }

/* Category photo strips */
.hero-v3-cats {
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.hero-v3-cat {
  position:absolute; inset:0; overflow:hidden; display:block; cursor:pointer;
}
.hero-v3-cat img {
  display:none;
}

/* Clip-path diagonal masking for category hover */
.hero-v3-cat[data-cat="mysliwskie"] {
  clip-path: polygon(30.4% 0, 49.3% 0, 42.1% 100%, 22.4% 100%);
}
.hero-v3-cat[data-cat="robocze"] {
  clip-path: polygon(49.3% 0, 67.2% 0, 60.0% 100%, 42.1% 100%);
}
.hero-v3-cat[data-cat="dzieci"] {
  clip-path: polygon(67.2% 0, 85.1% 0, 77.9% 100%, 60.0% 100%);
}
.hero-v3-cat[data-cat="hobby"] {
  clip-path: polygon(85.1% 0, 100% 0, 100% 100%, 77.9% 100%);
}

/* Color overlay on hover - mix-blend-mode: multiply with brand color */
.hero-v3-cat::after {
  content:''; position:absolute; inset:0;
  background:var(--cat, transparent); opacity:0;
  transition:opacity .4s var(--ease); z-index:2;
  mix-blend-mode:multiply;
}
.hero-v3-cat:hover::after { opacity:.35; }

/* Gradient at bottom (hides baked-in labels) - hidden on desktop, as labels are baked in */
.hero-v3-cat::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:55%;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 50%, transparent 100%);
  z-index:2; transition:opacity .4s;
  display:none;
}
.hero-v3-cat:hover::before { opacity:.6; }

/* Category labels and descriptions overlay */
.hero-v3-cat-info {
  position:absolute; bottom:14%; width:260px; z-index:3;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  pointer-events:none;
}

/* Left coordinates for column text positioning starting at horizontal colored lines */
.hero-v3-cat[data-cat="mysliwskie"] .hero-v3-cat-info { left:26.5%; }
.hero-v3-cat[data-cat="robocze"] .hero-v3-cat-info { left:45.5%; }
.hero-v3-cat[data-cat="dzieci"] .hero-v3-cat-info { left:63.5%; }
.hero-v3-cat[data-cat="hobby"] .hero-v3-cat-info { left:81.5%; }

.hero-v3-cat-accent {
  display:none; /* hidden on desktop as it is baked in */
  width:40px; height:3px; background:var(--cat);
  transition:width .4s var(--ease);
}
.hero-v3-cat-name {
  display:block;
  font-family:var(--font); font-weight:600; text-transform:uppercase;
  font-size:clamp(12px, 1.1vw, 16px); letter-spacing:.6px; color:#fff; line-height:1.2;
}
.hero-v3-cat-arrow {
  display:none !important;
}


/* ============================================================
   WERSJA 3 – DLACZEGO DEMAR?
   ============================================================ */
.dlaczego { background:var(--gray-50); }
.dlaczego-head { text-align:center; margin-bottom:50px; }
.dlaczego-rule { width:48px; height:3px; background:var(--red); margin:16px auto 0; }
.dlaczego-grid {
  display:flex; align-items:flex-start; justify-content:center; gap:0;
  max-width:1060px; margin:0 auto;
}
.dlaczego-item {
  flex:1; text-align:center; padding:0 28px;
}
.dlaczego-icon {
  width:72px; height:72px; margin:0 auto 20px;
}
.dlaczego-icon svg { width:100%; height:100%; }
.dlaczego-name {
  font-family:var(--font); font-weight:700; text-transform:uppercase;
  font-size:14px; letter-spacing:.8px; color:var(--ink); line-height:1.3; margin-bottom:10px;
}
.dlaczego-desc {
  font-size:13px; color:var(--gray-600); line-height:1.5;
}
.dlaczego-sep {
  width:1px; align-self:stretch; background:var(--gray-200); flex-shrink:0; min-height:160px;
}

/* ============================================================
   WERSJA 3 – DEMAR OD 1978
   ============================================================ */
.about78 {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 48px 48px;
  background: #f6f6f5;
}
.about78-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.about78-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 38%, rgba(255,255,255,0) 68%);
  z-index: 2;
}
.about78 .container {
  position: relative;
  z-index: 3;
  width: 100%;
}
.about78-content {
  max-width: 520px;
  position: relative;
  z-index: 3;
}
.about78-title {
  font-family:var(--font); font-weight:700; text-transform:uppercase;
  font-size:38px; letter-spacing:1px; color:var(--ink); margin-bottom:18px; line-height:1.05;
}
.about78-title span { color:var(--red); }
.about78-rule {
  width: 48px;
  height: 3px;
  background: var(--red);
  margin: 18px 0 24px;
}
.about78-desc {
  color:var(--gray-600); font-size:15.5px; line-height:1.65; max-width:440px; margin-bottom:32px;
}

/* ============================================================
   WERSJA 3 – TECHNOLOGIE (dark section)
   ============================================================ */
.techv3 {
  background: #000 url('../img/tech.jpg') no-repeat center center; background-size:100% auto;
  color:#fff; padding:44px 0; position:relative; overflow:hidden;
}
.techv3::before { display:none; }
.techv3-grid {
  display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:48px; align-items:center;
  position: relative; z-index: 1;
}
.techv3-title {
  font-size:clamp(26px,3vw,40px); line-height:1.02; letter-spacing:1px; margin-bottom:0;
}
.techv3-rule { width:48px; height:4px; background:var(--red); margin:20px 0; }
.techv3-desc {
  color:rgba(255,255,255,.65); font-size:14.5px; line-height:1.6; margin-bottom:30px;
}
.techv3-center { position:relative; z-index:2; }
.techv3-center img {
  display:block;
  width:100%; height:auto; filter:drop-shadow(0 20px 50px rgba(218,26,26,.18));
}
.techv3-features { display:flex; flex-direction:column; gap:12px; }
.techv3-feat {
  display:flex; gap:16px; align-items:flex-start; padding:11px 18px;
  border:1px solid rgba(255,255,255,.08); border-radius:2px;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.techv3-feat:hover {
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); transform:translateX(-4px);
}
.techv3-feat-icon {
  flex:0 0 28px; width:28px; height:28px; color:var(--red);
}
.techv3-feat-icon svg { width:100%; height:100%; }
.techv3-feat h4 {
  font-family:var(--font); font-weight:600; text-transform:uppercase;
  font-size:12px; letter-spacing:.5px; color:#fff; margin:0 0 3px;
}
.techv3-feat p {
  font-size:11px; color:rgba(255,255,255,.5); line-height:1.4; margin:0;
}

/* ============================================================
   WERSJA 3 – TESTOWANE W TRUDNYCH WARUNKACH
   ============================================================ */
.tested-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tested-card {
  position:relative; overflow:hidden; border-radius:8px; display:block;
  transition:transform .4s var(--ease), box-shadow .4s;
}
.tested-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.2); }
.tested-card img { width:100%; height:auto; display:block; transition:transform .5s var(--ease); }
.tested-card:hover img { transform:scale(1.06); }
.tested-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  transition:transform .3s var(--ease);
}
.tested-play svg { width:52px; height:52px; }
.tested-card:hover .tested-play { transform:translate(-50%,-50%) scale(1.15); }
.tested-info {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:14px 20px; display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
}
.tested-label {
  font-family:var(--font); font-weight:700; text-transform:uppercase;
  font-size:18px; letter-spacing:1px; color:#fff;
}
.tested-time { font-size:13px; color:rgba(255,255,255,.75); }

/* ============================================================
   WERSJA 3 – OPINIE + AKTUALNOŚCI (POŁĄCZONE)
   ============================================================ */
.opinews { background:var(--gray-50); }
/* mniejsze odstępy sekcji v3 */
.dlaczego, .tested, .opinews, .guides-v3 { padding-top:30px; padding-bottom:30px; }
.opinews-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.opinews-left, .opinews-right { display:flex; flex-direction:column; }
.opinews-title {
  font-family:var(--font); font-weight:700; text-transform:uppercase;
  font-size:30px; letter-spacing:.5px; color:var(--ink); margin-bottom:32px;
}
.opinews-reviews { display:flex; flex-direction:column; gap:20px; flex:1; }
.review-v3-card {
  background:#fff; border:1px solid var(--gray-100); padding:24px 28px;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.review-v3-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.08); }
.review-v3-card .review-stars { display:flex; gap:3px; margin-bottom:12px; }
.review-v3-card .review-star { color:var(--red); font-size:18px; line-height:1; }
.review-v3-text {
  font-size:14.5px; color:var(--ink); line-height:1.55; font-style:italic; margin:0 0 16px;
}
.review-v3-author strong {
  display:block; font-family:var(--font); font-weight:600; text-transform:uppercase;
  font-size:13.5px; letter-spacing:.5px; color:var(--ink);
}
.review-v3-author span { font-size:12px; color:var(--gray-500); }

.opinews-right-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; }
.opinews-right-head .opinews-title { margin-bottom:0; }
.opinews-news { display:flex; flex-direction:column; gap:20px; flex:1; }
.opinews-news-card {
  display:flex; flex:1; background:#fff; border:1px solid var(--gray-100); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.opinews-news-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.08); }
.opinews-news-img { flex:0 0 210px; width:210px; overflow:hidden; background:var(--gray-50); }
.opinews-news-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.opinews-news-card:hover .opinews-news-img img { transform:scale(1.06); }
.opinews-news-body { padding:18px 24px; display:flex; flex-direction:column; justify-content:center; }
.news-v3-tag {
  display:inline-block; font-family:var(--font); font-weight:600;
  font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); margin-bottom:8px;
}
.opinews-news-body h3 {
  font-family:var(--font); font-weight:600; text-transform:uppercase;
  font-size:15px; letter-spacing:.4px; color:var(--ink); line-height:1.3; margin:0 0 8px;
}
.opinews-news-body time { font-size:12px; color:var(--gray-500); }

/* ============================================================
   WERSJA 3 – ARTYKUŁY I PORADNIKI
   ============================================================ */
.guides-v3 { background:var(--gray-50); }
.guides-v3-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.guide-v3-card {
  display:block; background:#fff; border:1px solid var(--gray-100); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.guide-v3-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.08); }
.guide-v3-img { overflow:hidden; aspect-ratio:16/10; background:var(--gray-100); }
.guide-v3-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.guide-v3-card:hover .guide-v3-img img { transform:scale(1.06); }
.guide-v3-body { padding:22px 24px 26px; position:relative; }
.guide-v3-body h3 {
  font-family:var(--font); font-weight:600; font-size:16px;
  text-transform:uppercase; letter-spacing:.4px; color:var(--ink); line-height:1.25; margin:0 0 8px;
}
.guide-v3-body p { font-size:13.5px; color:var(--gray-600); margin:0; line-height:1.45; }
.guide-v3-arrow {
  position:absolute; right:20px; bottom:22px;
  font-size:22px; color:var(--red); opacity:0; transform:translateX(-8px);
  transition:opacity .3s, transform .3s var(--ease);
}
.guide-v3-card:hover .guide-v3-arrow { opacity:1; transform:translateX(0); }

/* ============================================================
   WERSJA 3 – CTA RED (Od projektu do gotowego buta)
   ============================================================ */
.cta-red {
  background:var(--red); color:#fff; overflow:hidden;
}
.cta-red-inner {
  display:grid; grid-template-columns:1fr 1fr; min-height:260px;
}
.cta-red-media { overflow:hidden; line-height:0; }
.cta-red-media img { width:100%; height:100%; object-fit:cover; }
.cta-red-text {
  display:flex; flex-direction:column; justify-content:center;
  padding:48px 56px;
}
.cta-red-text h2 { font-size:clamp(26px,3vw,38px); line-height:1.02; letter-spacing:1px; margin-bottom:16px; }
.cta-red-text p { color:rgba(255,255,255,.88); font-size:15px; line-height:1.6; margin:0 0 28px; max-width:400px; }
.cta-red-btn {
  background:#fff; color:var(--red); font-family:var(--font); font-weight:600;
  text-transform:uppercase; letter-spacing:1px; font-size:13px;
  padding:14px 26px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  transition:transform .3s var(--ease), box-shadow .3s; align-self:flex-start;
}
.cta-red-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .25s var(--ease); }
.cta-red-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.cta-red-btn:hover svg { transform:translateX(5px); }

/* ============================================================
   WERSJA 3 – RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width:1024px) {
  .hero-v3 {
    aspect-ratio: auto;
    background: var(--ink);
    min-height:480px;
  }
  .hero-v3-panel {
    position: absolute;
    width:36%;
    clip-path:polygon(0 0,92% 0,68% 100%,0 100%);
    background: var(--red);
  }
  .hero-v3-panel-inner {
    padding:48px 7% 48px 6%;
  }
  .hero-v3-heading { font-size:clamp(22px,4vw,36px); }
  
  .hero-v3-cats {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    height: auto;
  }
  .hero-v3-cat {
    position: relative;
    inset: auto;
    clip-path: none !important;
    aspect-ratio: 384 / 697;
  }
  .hero-v3-cat img {
    display: block;
  }
  .hero-v3-cat-info {
    position: absolute;
    bottom: 0;
    left: 0 !important;
    right: 0;
    width: 100%;
    transform: none !important;
    padding: 0 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  
  .techv3 { padding: 60px 0; }
  .techv3-center img { display: block; }
  .techv3-grid { grid-template-columns:1fr; gap:40px; }
  .techv3-center { max-width:420px; margin:0 auto; }
  .techv3-features { flex-direction:row; flex-wrap:wrap; gap:16px; }
  .techv3-feat { flex:1 1 calc(50% - 8px); }
  .about78 { padding: 60px 0; min-height: auto; }
  .about78-overlay { background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 60%, rgba(255,255,255,0.5) 100%); }
  .cta-red-inner { grid-template-columns:1fr; }
  .cta-red-media { max-height:220px; }
  .dlaczego-grid { flex-wrap:wrap; gap:24px; }
  .dlaczego-sep { display:none; }
  .dlaczego-item { flex:1 1 calc(50% - 12px); min-width:180px; }
  .opinews-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-v3-cat { aspect-ratio: auto; }
  .hero-v3-cat::before { display: block; }
  .hero-v3-cat-name { display: block; font-size: 15px; }
  .hero-v3-cat-accent { display: block; }
}
@media (max-width:760px) {
  .hero-v3 { flex-direction:column; min-height:auto; }
  .hero-v3-panel {
    position:relative; width:100%; clip-path:none;
    padding:48px 24px 40px;
  }
  .hero-v3-panel-inner { max-width:none; padding:0; }
  .hero-v3-cats { grid-template-columns:repeat(2,1fr); min-height:360px; }
  .hero-v3-cat { aspect-ratio: auto; }
  .hero-v3-cat::before { display: block; }
  .hero-v3-cat-name { display: block; font-size:13px; }
  .hero-v3-cat-accent { display: block; }
  .hero-v3-cat-info { padding:0 16px 20px; }
  .about78-overlay { background: rgba(255,255,255,0.95); }
  .guides-v3-grid, .tested-grid { grid-template-columns:1fr; }
  .techv3-feat { flex-basis:100%; }
  .dlaczego-item { flex-basis:100%; }
  .cta-red-text { padding:32px 24px; }
  .opinews-news-card { flex-direction: column; }
  .opinews-news-img { width: 100%; flex: none; aspect-ratio: 16/9; }
}