/* ==========================================================================
   PINTURA — Design tokens
   ========================================================================== */
:root{
  /* Brand palette */
  --yellow: #D5C54D;
  --yellow-deep: #BFA93A;
  --olive: #756C1E;
  --olive-tint: #EFECC2;
  --ink: #1A1A1A;
  --charcoal: #1C1B14;      /* warm near-black, olive-tinted — the site's dark ground */
  --charcoal-2: #26251A;
  --body-gray: #5C5C5C;
  --slate: #88888C;
  --gray-light: #F4F4F4;
  --white: #FFFFFF;

  /* Semantic */
  --bg: var(--white);
  --bg-soft: var(--gray-light);
  --text: var(--ink);
  --text-muted: var(--body-gray);
  --line: rgba(26,26,26,0.10);
  --line-dark: rgba(245,243,235,0.14);

  /* Type */
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }
h1,h2,h3,h4,p,figure{ margin:0; }
svg{ display:block; }

::selection{ background: var(--yellow); color: var(--ink); }

:focus-visible{
  outline: 2.5px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link{
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  background: var(--ink);
  color: #F5F3EB;
  padding: 0.85rem 1.4rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: top .25s var(--ease-out);
}
.skip-link:focus{
  top: 1rem;
}

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

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-weight: 500;
  position: relative;
}
.eyebrow::before{
  content:'';
  width: 53px; height: 2px;
  flex: none;
  display:inline-block;
  vertical-align: middle;
  border-radius: 2px;
  background-color: rgba(117,108,30,0.28);
  background-image: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 53px 100%;
  background-position: -53px 0;
  animation: eyebrowSweep 2.6s var(--ease-in-out) infinite;
}
.on-dark .eyebrow::before{ background-color: rgba(213,197,77,0.28); }
@keyframes eyebrowSweep{
  0%{ background-position: -53px 0; }
  100%{ background-position: 53px 0; }
}
.on-dark .eyebrow{ color: var(--yellow); }

h1, .h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 3.2vw + 1.4rem, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
h2, .h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.6vw + 1.4rem, 3.05rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h3, .h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.6vw + 1.05rem, 1.55rem);
  line-height: 1.25;
}
.lede{
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 46em;
}
.on-dark .lede{ color: rgba(245,243,235,0.72); }
.on-dark{ color: #F5F3EB; }
.on-dark h1, .on-dark h2, .on-dark h3{ color: #F5F3EB; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{ padding-block: clamp(4.5rem, 8vw, 8rem); position: relative; }
.section-dark{ background: var(--charcoal); color: #F5F3EB; }
.section-soft{ background: var(--bg-soft); }
.section-head{
  display:flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 46em;
}
.section-head.wide{ max-width: 60em; }
.reveal-row{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Reveal-on-scroll */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s, color .3s, border-color .3s;
  position: relative;
}
.btn-primary{
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(26,26,26,0.08) inset;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(213,197,77,0.55); }
.btn-ghost{
  border: 1.5px solid var(--line);
  color: var(--text);
}
.on-dark .btn-ghost{ border-color: var(--line-dark); color: #F5F3EB; }
.btn-ghost:hover{ border-color: var(--yellow); background: rgba(213,197,77,0.08); }
.hero .btn-ghost{ border-color: var(--yellow); color: var(--yellow); }
.hero .btn-ghost:hover{ border-color: #FFFFFF; color: #FFFFFF; background: rgba(255,255,255,0.08); }
.btn svg{ width: 1em; height:1em; transition: transform .35s var(--ease-out); }
.btn:hover svg{ transform: translateX(3px); }

.badge{
  display:inline-flex;
  align-items:center;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--olive-tint);
  color: var(--olive);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 250;
  padding: 1.35rem 0;
  transition: background-color .5s var(--ease-out), padding .5s var(--ease-out), box-shadow .5s var(--ease-out), backdrop-filter .5s;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: 0.85rem 0;
  box-shadow: 0 1px 0 rgba(26,26,26,0.06);
}
.brand{ display:flex; align-items:center; gap: 0.65rem; }
.brand img{ height: 46px; width:auto; transition: height .5s var(--ease-out); }
.site-header.is-scrolled .brand img{ height: 40px; }
.brand .logo-dark{ display:block; }
.brand .logo-light{ display:none; }
.site-header:not(.is-scrolled) .brand .logo-dark{ display:none; }
.site-header:not(.is-scrolled) .brand .logo-light{ display:block; }

.main-nav{ display:flex; align-items:center; gap: clamp(1.1rem, 2vw, 1.9rem); }
.main-nav a, .main-nav .nav-trigger{
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 500;
  color: rgba(245,243,235,0.85);
  position: relative;
  padding: 0.3rem 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s;
}
.site-header.is-scrolled .main-nav a,
.site-header.is-scrolled .main-nav .nav-trigger{ color: var(--text); }
.main-nav a::after, .main-nav .nav-trigger::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: var(--yellow);
  transition: width .35s var(--ease-out);
}
.main-nav a:hover::after, .nav-item:hover .nav-trigger::after{ width:100%; }

.nav-item{ position:relative; }
.nav-chevron{
  width:13px; height:13px;
  margin-left: 0.35em;
  vertical-align: -1px;
  transition: transform .3s var(--ease-out);
  display:inline-block;
}
.nav-item:hover .nav-chevron, .nav-item:focus-within .nav-chevron{ transform: rotate(180deg); }
.nav-dropdown{
  position:absolute;
  top: 100%;
  left: 50%;
  padding-top: 1rem;
  transform: translateX(-50%);
  min-width: 320px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease-out), visibility .3s;
}
.nav-dropdown-panel{
  display:flex;
  flex-direction:column;
  gap: 0.05rem;
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: 0 24px 48px -20px rgba(26,26,26,0.28);
  padding: 0.5rem;
  transform: translateY(6px);
  transition: transform .3s var(--ease-out);
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-item:hover .nav-dropdown-panel,
.nav-item:focus-within .nav-dropdown-panel{
  transform: translateY(0);
}
/* Forced shut right after a dropdown link is picked, until the pointer
   actually leaves — see the click handler in main.js for why. */
.nav-item.force-hide .nav-dropdown{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.nav-item.force-hide .nav-dropdown-panel{ transform: translateY(6px) !important; }
.nav-dropdown a{
  color: var(--text) !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  white-space: normal;
  transition: background-color .25s, color .25s;
}
.nav-dropdown a::after{ display:none; }
.nav-dropdown a:hover{ background: var(--olive-tint); color: var(--olive) !important; }
.nav-dropdown-heading,
.nav-dropdown a.nav-dropdown-pillar{
  display:block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink) !important;
}
.nav-dropdown-heading{ padding: 0.5rem 0.9rem 0.15rem; cursor: default; }
.nav-dropdown a.nav-dropdown-sub{
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem 0.35rem 1.7rem;
  color: var(--olive) !important;
}
.nav-dropdown-divider{ height:1px; background: var(--line); margin: 0.25rem 0.5rem; }

.header-actions{ display:flex; align-items:center; gap: 1.2rem; }

/* Hamburger toggle — hidden on desktop, shown once .main-nav hides */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 5px;
  width: 40px; height:40px;
  flex: none;
  border-radius: 50%;
  transition: background-color .3s;
}
.nav-toggle span{
  width: 20px; height:2px;
  border-radius: 2px;
  background: rgba(245,243,235,0.9);
  transition: transform .35s var(--ease-out), opacity .25s, background-color .3s;
}
.site-header.is-scrolled .nav-toggle span{ background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Mobile navigation panel
   ========================================================================== */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--charcoal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
  overflow-y: auto;
}
.mobile-nav.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-nav nav{
  display:flex;
  flex-direction: column;
  padding: clamp(6.5rem, 20vh, 8.5rem) clamp(1.5rem, 6vw, 3rem) 3rem;
  gap: 0.15rem;
  max-width: 520px;
  margin-inline: auto;
}
.mobile-nav-heading{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-weight: 600;
  color: #F5F3EB;
  padding-block: 0.55rem;
  border-bottom: 1px solid rgba(245,243,235,0.1);
  margin: 0;
}
.mobile-nav-divider{ height:1px; background: rgba(245,243,235,0.14); margin-block: 0.9rem; }
.mobile-nav a{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-weight: 600;
  color: #F5F3EB;
  padding-block: 0.55rem;
  border-bottom: 1px solid rgba(245,243,235,0.1);
}
.mobile-nav a.sub{ font-size: clamp(1.02rem, 3vw, 1.15rem); font-weight: 500; color: var(--yellow); padding-block: 0.42rem; }
.mobile-nav-heading.is-pillar,
.mobile-nav a.mobile-nav-pillar{ text-transform: uppercase; letter-spacing: 0.02em; }
.mobile-nav-close{
  margin-top: 2rem;
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  width:100%;
  border:none; background:none; cursor:pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,243,235,0.55);
  padding-block: 1rem;
  transition: color .2s var(--ease-out);
}
.mobile-nav-close svg{ width:16px; height:16px; }
.mobile-nav-close:hover{ color: var(--yellow); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:flex-end;
  overflow: clip;
  background: var(--charcoal);
  padding-top: 6rem;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.12) translate3d(var(--px,0), var(--py,0), 0);
  transition: transform .2s linear;
  filter: saturate(1.02);
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,19,14,0.55) 0%, rgba(20,19,14,0.35) 30%, rgba(20,19,14,0.65) 72%, rgba(20,19,14,0.94) 100%),
    linear-gradient(90deg, rgba(20,19,14,0.55) 0%, rgba(20,19,14,0.05) 46%, rgba(20,19,14,0.15) 100%);
}
.comet-wrap{
  position:absolute; inset:0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.hero:hover .comet-wrap{ opacity: 1; }
.comet-particle{
  position:absolute; top:0; left:0;
  width: 22px; height:22px;
  color: var(--yellow);
  filter: drop-shadow(0 0 5px rgba(213,197,77,0.45));
  will-change: transform, opacity;
}
.comet-particle svg{ width:100%; height:100%; fill: currentColor; }

.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
.hero-slogan{
  font-family: var(--font-mono);
  color: var(--yellow);
  letter-spacing: 0.22em;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  display:flex; align-items:center; gap:0.8rem;
}
.hero-slogan .dot{ width:6px; height:6px; border-radius:50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(213,197,77,0.25); }
.hero h1{
  color: #F7F5EE;
  max-width: 16.5em;
}
.hero h1 em{
  font-style: normal;
  color: var(--yellow);
}
.hero-sub{
  margin-top: 1.75rem;
  max-width: 40em;
  color: rgba(245,243,235,0.78);
  font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.18rem);
}
.hero-ctas{
  margin-top: 2.6rem;
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.scroll-cue{
  position:absolute;
  right: var(--gutter);
  bottom: clamp(1.5rem,3vw,2.5rem);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
  color: rgba(245,243,235,0.6);
}
.scroll-cue span{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scroll-cue .line{ width:2px; height:53px; background: rgba(245,243,235,0.35); overflow:hidden; position:relative; border-radius:2px; }
.scroll-cue .line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(213,197,77,0.8);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

.pin-progress{ overflow:hidden; }

/* ==========================================================================
   Dlaczego Pintura
   ========================================================================== */
.why-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items:center;
}
.why-grid > *{ min-width: 0; }
.why-media{
  position:relative;
  border-radius: var(--radius-l);
  overflow:hidden;
  aspect-ratio: 4/5;
}
@media (min-width: 981px){
  .why-grid--reverse{ grid-template-columns: 0.95fr 1.05fr; }
  .why-grid--reverse .why-media{ order:2; }
}
.why-media img{
  width:100%; height:100%; object-fit:cover;
}
.diff-list{ display:flex; flex-direction:column; gap:0; margin-top: 2.2rem; }
.diff-item{
  display:grid;
  grid-template-columns: clamp(4.5rem, 9vw, 6.5rem) 1fr;
  gap: 1.1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.diff-item > *{ min-width: 0; }
.diff-item:last-child{ border-bottom: 1px solid var(--line); }
.diff-item .tag{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--olive);
  padding-top: 0.2rem;
  line-height: 1.4;
}
.diff-item h3{ margin-bottom: 0.4rem; }
.diff-item p{ color: var(--text-muted); }

/* Synergia section — animated accordion (scoped, does not affect other .diff-list instances) */
.diff-list--accordion .diff-item{
  display: block;
  padding-block: 0;
}
.accordion-trigger{
  display:flex;
  align-items:center;
  gap: 1.3rem;
  width:100%;
  padding-block: 1.7rem;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.accordion-index{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(26,26,26,0.28);
  flex: none;
  transition: color .4s var(--ease-out);
}
.accordion-item.is-open .accordion-index,
.accordion-trigger:hover .accordion-index{ color: var(--olive); }
.diff-list--accordion .accordion-trigger .tag{
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  padding-top: 0;
  line-height: 1.4;
  flex: 1;
  transition: color .35s var(--ease-out);
}
.accordion-trigger:hover .tag{ color: var(--olive); }
.accordion-icon{
  position: relative;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out), transform .5s var(--ease-out);
}
.accordion-icon::before,
.accordion-icon::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  background: var(--ink);
  transition: transform .4s var(--ease-out);
}
.accordion-icon::before{ width:13px; height:1.5px; transform:translate(-50%,-50%); }
.accordion-icon::after{ width:1.5px; height:13px; transform:translate(-50%,-50%); }
.accordion-trigger:hover .accordion-icon{ border-color: var(--yellow); background: rgba(213,197,77,0.12); }
.accordion-item.is-open .accordion-icon{ border-color: var(--yellow); background: var(--yellow); transform: rotate(135deg); }
.accordion-panel{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.accordion-panel-inner{ overflow:hidden; }
.accordion-item.is-open .accordion-panel{ grid-template-rows: 1fr; }
.accordion-panel p{
  color: var(--text-muted);
  padding: 0 2.6rem 1.8rem calc(36px + 1.3rem);
  max-width: 38em;
}
@media (max-width: 640px){
  .accordion-trigger{ gap: 0.9rem; padding-block: 1.4rem; }
  .diff-list--accordion .accordion-trigger .tag{ font-size: 1rem; }
  .accordion-icon{ width:32px; height:32px; }
  .accordion-panel p{ padding: 0 0 1.5rem calc(32px + 0.9rem); }
}
.brands-band{
  background: #3A3B42;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.brands-band .eyebrow{ color: var(--yellow); margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.brands-band .eyebrow::before{ background-color: rgba(213,197,77,0.3); }
.brand-marquee{
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brand-track{
  display:flex;
  align-items:center;
  width: max-content;
  gap: clamp(2.5rem, 5vw, 5rem);
  will-change: transform;
}
.brand-set{
  display:flex;
  align-items:center;
  gap: clamp(2.5rem, 5vw, 5rem);
  flex: none;
}
.brand-chip{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--yellow);
  white-space: nowrap;
  display:flex; align-items:center; gap: clamp(1.2rem, 2.5vw, 2.2rem);
  transition: text-shadow .3s ease;
}
.brand-chip::after{ content:''; width:7px; height:7px; border-radius:50%; background: var(--yellow); opacity: 0.55; }

/* ==========================================================================
   Expertise section
   ========================================================================== */
.expert{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items:center;
}
.expert > *{ min-width: 0; }
.expert-media{
  position:relative;
  border-radius: var(--radius-l);
  overflow:hidden;
  aspect-ratio: 3/4;
}
.expert-media img{ width:100%; height:100%; object-fit:cover; }
.stat-card{
  position:absolute; left:1.3rem; bottom:1.3rem; right:1.3rem;
  background: rgba(28,27,20,0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245,243,235,0.16);
  border-radius: var(--radius-m);
  padding: 1.1rem 1.3rem;
  color:#F5F3EB;
  display:flex; align-items:flex-start; gap:0.6rem;
}
.stat-card b{ font-family: var(--font-display); font-size:3.4rem; line-height:1; color: var(--yellow); }
.stat-card span{ font-size:0.85rem; color: rgba(245,243,235,0.75); }
.inline-link{
  color: var(--olive);
  border-bottom: 1.5px solid var(--yellow);
  font-weight: 600;
  transition: color .25s, border-color .25s;
}
.inline-link:hover{ color: var(--ink); border-color: var(--olive); }

/* ==========================================================================
   Horizontal scroll-pin sections (Asortyment / Branże)
   ========================================================================== */
.pin-section{ position: relative; }
.pin-sticky{
  position: sticky;
  top: 0;
  height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top: clamp(5.5rem, 11vh, 8rem);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  overflow: hidden;
}
.pin-sticky--center{ justify-content:center; padding-top: 2rem; }
#eksploatacja .deputat-band{ margin-top: 0; }
#specjalistyczne .deputat-band{ margin-top: 0; }
.pin-heading{ padding-block: 0; position:relative; z-index:1; }
.pin-bg{
  position:absolute; inset: -6% -6%;
  z-index:0;
  overflow:hidden;
}
.pin-bg img{
  width:100%; height:100%; object-fit:cover;
  will-change: transform;
}
.pin-bg::after{
  content:'';
  position:absolute; inset:0;
  background: rgba(244,244,244,0.86);
}
.pin-sticky > .container{ position:relative; z-index:1; }
.pin-track{
  position:relative; z-index:1;
  display:flex;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  will-change: transform;
  padding-right: 8vw;
}
.pin-progress{
  position:relative; z-index:1;
  height:2px; background: var(--line-dark);
  border-radius:2px;
}
.section-dark .pin-progress, .pin-progress{ background: rgba(26,26,26,0.12); }
.pin-progress i{
  display:block; height:100%; width:0%;
  background: var(--yellow); border-radius:2px;
  transform-origin:left;
}

.cat-card{
  position:relative;
  flex: 0 0 clamp(400px, 44vw, 620px);
  height: clamp(560px, 52vw, 640px);
  border-radius: var(--radius-l);
  overflow:hidden;
  background: var(--charcoal-2);
}
.cat-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s var(--ease-out);
}
.cat-card:hover img{ transform: scale(1.06); }
.cat-card::before{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  background: rgba(18,17,12,0.4);
  opacity:0;
  transition: opacity .35s var(--ease-out);
}
.cat-card:hover::before{ opacity:1; }
.cat-card::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(195deg, rgba(18,17,12,0.92) 0%, rgba(18,17,12,0.6) 34%, rgba(18,17,12,0.08) 58%, rgba(18,17,12,0.32) 100%);
}
.cat-card-body{
  position:relative; z-index:1;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding: 2.1rem;
  color:#F5F3EB;
}
.cat-card .tag{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(18,17,12,0.55);
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.cat-card h3{ color:#F5F3EB; margin-bottom:0.8rem; max-width: 16em; }
.cat-card p{
  font-size:0.96rem; line-height:1.6; color: rgba(245,243,235,0.85); max-width: 26em;
}

.industry-card{
  position:relative;
  overflow:hidden;
  flex: 0 0 clamp(400px, 44vw, 620px);
  height: clamp(572px, 53vw, 670px);
  border-radius: var(--radius-l);
  padding: 2.4rem;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -36px rgba(26,26,26,0.18);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
}
.industry-card:hover{ transform: translateY(-8px); box-shadow: 0 30px 50px -30px rgba(26,26,26,0.25); border-color: transparent; }

.industry-card--split{ padding:0; align-items:stretch; }
.industry-card-top{ padding: 2rem 2.2rem 1.4rem; flex: 0 0 50%; overflow:hidden; }
.industry-card.industry-card--split .industry-card-top h3{ color: var(--yellow); margin-top:0; }
.industry-card-photo{
  position:relative;
  flex: 1 1 auto;
  min-height: 110px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.industry-card-photo img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.industry-card-photo .icon-wrap{ position:relative; z-index:1; }
.icon-wrap{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; flex:none; color: var(--olive); }
.industry-card .icon-wrap{ color: var(--olive); }
.industry-card .icon{ width: 56px; height:56px; flex: none; display:block; color: var(--olive); }
.industry-card.industry-card--split .icon-wrap,
.industry-card.industry-card--split .icon{ color: #fff; }
.industry-card-photo .icon-wrap{ width:112px; height:112px; }
.industry-card-photo .icon{ width:84px; height:84px; stroke-width:2; }
.industry-card h3{ font-size: clamp(1.4rem, 1.6vw, 1.8rem); margin-top: clamp(2rem, 4vw, 3.2rem); }
.industry-card p{ color: var(--text-muted); font-size:1.02rem; margin-top:0.8rem; line-height:1.6; max-width: 30em; }

/* ==========================================================================
   Flat variant of the split industry card (wide/short, e.g. consumables)
   ========================================================================== */
.industry-card--flat{ height: clamp(300px, 28vw, 380px); }
.industry-card--flat .industry-card-top{ padding: 1.6rem 1.8rem 1.2rem; }
.industry-card--flat .industry-card-top h3{ font-size: 1.15rem; }
.industry-card--flat .industry-card-top p{ font-size: 0.9rem; margin-top: 0.5rem; }
.industry-card--flat .industry-card-photo .icon-wrap{ width:90px; height:90px; }
.industry-card--flat .industry-card-photo .icon{ width:63px; height:63px; }

.deputat-band{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: calc(-1 * clamp(4.5rem, 8vw, 8rem));
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.2rem, 7vw, 5.5rem);
  background: var(--yellow);
  color: var(--ink);
}
.deputat-inner{
  display:flex; flex-direction:column; align-items:flex-start; gap:2.5rem;
}
.deputat-inner > div{ min-width:0; }
.deputat-inner h3{ color: var(--ink); }
.deputat-inner .lede{ color: rgba(26,26,26,0.72); max-width:34em; }
.deputat-band .eyebrow{ color:#fff; }
.deputat-band .eyebrow::before{ background-color: rgba(255,255,255,0.35); }
.deputat-cta{
  display:inline-flex;
  margin-top: 2.5rem;
  border-color: #fff;
  color: #fff;
}
.deputat-cta:hover{ border-color:#fff; background: rgba(255,255,255,0.18); }

/* ==========================================================================
   Logistics / coverage map
   ========================================================================== */
.coverage{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem,5vw,4rem);
  align-items:center;
}
.coverage > *{ min-width: 0; }
.city-list{ display:flex; flex-wrap:wrap; gap:0.6rem 0.9rem; margin-top:2rem; }
.city-list li{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(245,243,235,0.82);
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  display:flex; align-items:center; gap:0.5rem;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.city-list li:hover{
  border-color: var(--yellow);
  color: var(--white);
}
.city-list li::before{ content:''; width:5px; height:5px; border-radius:50%; background: var(--yellow); }
.map-wrap{ position:relative; aspect-ratio: 1/1; }
.map-wrap svg{ width:100%; height:100%; }
.map-node{ transform-box: fill-box; transform-origin:center; }
.map-node circle.pulse{ animation: pulse 2.6s var(--ease-in-out) infinite; transform-origin:center; }
.map-node.hq circle.pulse{ animation-delay:0s; }
@keyframes pulse{
  0%{ transform: scale(1); opacity:.6; }
  70%{ transform: scale(2.6); opacity:0; }
  100%{ opacity:0; }
}
.map-route{ stroke-dasharray: 6 8; animation: dash 26s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset: -400; } }

/* ==========================================================================
   Testimonials marquee
   ========================================================================== */
.testi-viewport{ overflow:hidden; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.testi-track{
  display:flex;
  gap: 1.5rem;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.testi-viewport:hover .testi-track{ animation-play-state: paused; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.testi-card{
  flex: 0 0 min(420px, 82vw);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 2.1rem;
  display:flex; flex-direction:column; gap:1.4rem;
}
.testi-quote{ font-size:1.05rem; line-height:1.65; color: var(--text); }
.testi-who{ display:flex; align-items:center; gap:0.9rem; margin-top:auto; }
.avatar{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--olive);
  color: var(--olive-tint);
  font-family: var(--font-display);
  font-weight:600;
  font-size:0.95rem;
  flex-shrink:0;
}
.testi-who .name{ font-weight:600; }
.testi-who .role{ font-size:0.85rem; color: var(--text-muted); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items:stretch;
}
.contact-grid > *{ min-width: 0; }
.contact-left{ display:flex; flex-direction:column; gap:1.6rem; }
.person-card{
  display:flex; gap:1.2rem;
  padding: 1.6rem;
  border-radius: var(--radius-m);
  background: rgba(245,243,235,0.04);
  border: 1px solid var(--line-dark);
  transition: border-color .35s, background .35s;
}
.person-card:hover{ border-color: rgba(213,197,77,0.5); background: rgba(213,197,77,0.06); }
.person-card .avatar{ width:58px; height:58px; font-size:1.15rem; background: var(--yellow); color: var(--ink); }
.person-card .role{ font-size:0.88rem; color: rgba(245,243,235,0.68); margin-top:0.25rem; }
.person-card .reach{ margin-top:0.8rem; display:flex; flex-direction:column; gap:0.3rem; font-family: var(--font-mono); font-size:0.86rem; }
.person-card .reach a{ transition: color .25s; }
.person-card .reach a:hover{ color: var(--yellow); }
.company-card{
  padding: 1.6rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line-dark);
  font-size: 0.9rem;
  color: rgba(245,243,235,0.75);
  line-height:1.9;
}
.company-card strong{ color:#F5F3EB; display:block; margin-bottom:0.5rem; font-family: var(--font-display); font-size:1.05rem; }
.map-embed{
  border-radius: var(--radius-l);
  overflow:hidden;
  border: 1px solid var(--line-dark);
  min-height: 420px;
  height:100%;
  filter: grayscale(0.25) contrast(1.05);
}
.map-embed iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: #3A3939;
  color: rgba(245,243,235,0.6);
  padding-block: 3rem 2rem;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-cols{ display:flex; gap: clamp(2.5rem,6vw,6rem); flex-wrap:wrap; }
.footer-cols--tight{ gap: clamp(1.75rem, 4vw, 4rem); }
.footer-col h4{
  font-family: var(--font-mono);
  font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--yellow); margin-bottom:1rem;
}
.footer-col a, .footer-col span{ display:block; font-size:0.92rem; color: rgba(245,243,235,0.68); padding-block:0.3rem; }
.footer-col a:hover{ color: var(--yellow); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem;
  font-size:0.82rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 980px){
  .why-grid, .expert, .coverage, .contact-grid{ grid-template-columns: 1fr; }
  .expert-media, .why-media{ order:-1; }
}
@media (max-width: 640px){
  .hero{ align-items:flex-end; padding-top: 5rem; }
  h1, .h1{ overflow-wrap: break-word; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }
  .scroll-cue{ display:none; }
  .cat-card{ flex-basis: 78vw; }
  .industry-card{ flex-basis: 74vw; }
  .brand img{ height: 34px; }
  .header-actions{ gap: 0.6rem; }
  .header-actions .btn-primary{ padding: 0.7rem 1.1rem; font-size: 0.82rem; }
}
@media (max-width: 400px){
  .header-actions .btn-primary{ padding: 0.6rem 0.9rem; font-size: 0.76rem; }
}

/* Reduced-motion / fallback: turn pinned horizontal scrollers into normal scroll rows */
.no-scrolljack .pin-section{ height: auto !important; }
.no-scrolljack .pin-sticky{ position: static; height:auto; padding-top: 0; padding-block: 1rem; }
.no-scrolljack .pin-track{ overflow-x:auto; transform:none !important; scroll-snap-type:x proximity; padding-bottom:1rem; }
.no-scrolljack .cat-card, .no-scrolljack .industry-card{ scroll-snap-align:start; }
.no-scrolljack .pin-progress{ display:none; }