:root{
  --ink:#131417;
  --accent:#ef7e1a; /* nadpisywane inline w header.php wartością z ACF Options */
  --accent-dim:#c9631a;
  --steel:#9099a6;
  --paper:#f3efe8;

  /* Tło/tekst zwykłych podstron (index.php / page.php) — zależne od trybu ciemny/jasny.
     Menu górne/dolne (kolor #2a2929, ustawiany bezpośrednio w header.php/footer.php)
     NIGDY nie korzysta z tych zmiennych. */
  --content-bg-dark:#131417;
  --content-text-dark:#f3efe8;
  --content-muted-dark:#9099a6;
  --content-bg-light:#f5f3ee;
  --content-text-light:#1c1c1c;
  --content-muted-light:#55575c;
}
html{height:100%;overscroll-behavior:none;}
body{
  min-height:100%;
  background:var(--ink);
  font-family:'Inter',sans-serif;
  color:var(--paper);
}
/* Strona ze sliderem nie przewija się — reszta stron (Kontakt, O nas, zwykłe podstrony) przewija się normalnie. */
body.fm-noscroll{
  height:100%;
  overflow:hidden;
}
.font-display{font-family:'Oswald',sans-serif;}
.text-paper{color:var(--paper);}
.bg-paper{background-color:var(--paper);}
.text-steel{color:var(--steel);}

/* Tryb ciemny/jasny — dotyczy WYŁĄCZNIE tła i tekstu zwykłych podstron. */
.fm-content-bg{ background:var(--content-bg-dark); }
.fm-content-text{ color:var(--content-text-dark); }
.fm-content-muted{ color:var(--content-muted-dark); }
body.fm-mode-light .fm-content-bg{ background:var(--content-bg-light); }
body.fm-mode-light .fm-content-text{ color:var(--content-text-light); }
body.fm-mode-light .fm-content-muted{ color:var(--content-muted-light); }

/* ---- slider track ---- */
#track{
  display:flex;
  height:100%;
  width:100%;
  transition:transform 900ms cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.slide{
  position:relative;
  flex:0 0 100%;
  height:100%;
  overflow:hidden;
}
.slide-scroll{
  position:relative;
  z-index:10;
  height:100%;
  overflow-y:auto;
  -ms-overflow-style:none;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) transparent;
}
.slide-scroll::-webkit-scrollbar{width:6px;}
.slide-scroll::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:4px;}
.slide-mobile-image{display:none;}

@media (max-width:767px){
  .slide-mobile-image{
    display:block;
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    width:100%;
    height:60%;
    overflow:hidden;
  }
  .slide-mobile-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:right center;
  }
  .slide-mobile-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, var(--ink), rgba(19,20,23,.10) 45%, transparent 85%);
  }
  .slide-scroll.slide-content-scroll{
    align-items:flex-start;
    padding-top:1rem;
    padding-bottom:20vh;
  }
}

/* metaliczna tekstura tła, bez zewnętrznych plików graficznych */
.bg-rollers{
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 2px, transparent 2px, transparent 26px),
    radial-gradient(circle at 18% 30%, rgba(239,126,26,.20), transparent 42%),
    radial-gradient(circle at 82% 75%, rgba(239,126,26,.12), transparent 45%),
    linear-gradient(160deg,#0d0e10 0%, #1a1c20 45%, #24272c 100%);
}
.bg-rollers-2{
  background-image:
    repeating-linear-gradient(-115deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 2px, transparent 2px, transparent 30px),
    radial-gradient(circle at 78% 25%, rgba(239,126,26,.18), transparent 40%),
    radial-gradient(circle at 15% 80%, rgba(239,126,26,.10), transparent 45%),
    linear-gradient(200deg,#101113 0%, #1d1f24 50%, #26292f 100%);
}
.bg-rollers-3{
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 2px, transparent 2px, transparent 24px),
    radial-gradient(circle at 50% 15%, rgba(239,126,26,.16), transparent 42%),
    radial-gradient(circle at 20% 85%, rgba(239,126,26,.10), transparent 40%),
    linear-gradient(180deg,#0f1012 0%, #1b1d22 50%, #23262b 100%);
}
.grain::after{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
  pointer-events:none;
}

.dropdown{
  max-height:0;
  overflow:hidden;
  transition:max-height 300ms ease;
}
.dropdown.open{ max-height:24rem; }

.dot{
  width:8px;height:8px;border-radius:9999px;
  background:rgba(255,255,255,.35);
  transition:all 250ms ease;
  border:0;
  padding:0;
  cursor:pointer;
}
.dot.active{ width:26px; background:var(--accent); }

/* strzałki slidera — na telefonie stoją w dolnym rogu (nie nachodzą na tekst),
   od tabletu wzwyż przesuwają się na środek boków. */
.slider-arrow{
  position:absolute;
  z-index:25;
  top:auto;
  bottom:14px;
  transform:none;
  width:40px;height:40px;
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,30,35,.65);
  border:1px solid rgba(255,255,255,.15);
  color:var(--paper);
  cursor:pointer;
  transition:background 200ms ease, border-color 200ms ease;
}
.slider-arrow:hover{
  background:rgba(28,30,35,.9);
  border-color:var(--accent);
  color:var(--accent);
}
.slider-arrow-left{ left:10px; }
.slider-arrow-right{ right:10px; }
@media (min-width:768px){
  .slider-arrow{
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    width:52px; height:52px;
  }
  .slider-arrow-left{ left:24px; }
  .slider-arrow-right{ right:24px; }
}

.navlink{ position:relative; }
.navlink::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:0; height:2px; background:var(--accent);
  transition:width 200ms ease;
}
.navlink:hover::after{ width:100%; }

.glass-panel{
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* ===== Animowane logo (czysty CSS) — slajd startowy typu "Logo" ===== */
.logo-anim-wrap{
  display:inline-flex;
  align-items:baseline;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:clamp(3.25rem, 11vw, 6rem);
  line-height:1;
  color:var(--paper);
}
.logo-anim-mark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  padding:0 .12em;
}
.logo-anim-ring{
  position:absolute;
  inset:-0.22em;
  width:calc(100% + .44em);
  height:calc(100% + .44em);
  transform:rotate(-90deg);
  overflow:visible;
}
.logo-anim-ring circle{
  fill:none;
  stroke:var(--accent);
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:289;
  stroke-dashoffset:289;
  animation:fm-ring-draw 1s ease-out forwards;
}
@keyframes fm-ring-draw{ to{ stroke-dashoffset:0; } }

.logo-anim-first{
  position:relative;
  display:inline-block;
  opacity:0;
  transform:scale(.6);
  animation:fm-first-in .5s ease-out forwards;
  animation-delay:.6s;
}
@keyframes fm-first-in{ to{ opacity:1; transform:scale(1); } }

.logo-anim-rest{ color:var(--paper); }
.logo-anim-rest span{
  display:inline-block;
  opacity:0;
  transform:translateY(.3em);
  animation:fm-letter-in .45s ease-out forwards;
}
@keyframes fm-letter-in{ to{ opacity:1; transform:translateY(0); } }

.logo-anim-tagline{
  opacity:0;
  transform:translateY(.4em);
  animation:fm-letter-in .5s ease-out forwards;
  font-family:'Oswald',sans-serif;
  font-style:italic;
  font-size:clamp(1.15rem, 3.5vw, 1.85rem);
  color:var(--accent);
  margin-top:1.1rem;
  text-align:center;
  letter-spacing:.02em;
}