:root{
  /* paleta z szablonu ofert OKNOPRO */
  --ink:#1d1d1f;
  --sub:#6e6e73;
  --faint:#a1a1a6;
  --line:#e8e6e1;
  --stone:#f6f5f2;
  --white:#ffffff;
  --copper:#9c5b34;
  --copper-soft:#f4ece5;
  --sage:#5b7a63;
  --sage-soft:#eef4ef;
  --danger:#b3423a;
  --danger-soft:#faeae8;

  /* typografia */
  --font:'Inter',sans-serif;
  --fs-xs:12.5px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-md:17.5px;
  --fs-lg:22px;
  --fs-xl:32px;
  --fs-2xl:44px;

  /* odstępy */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:28px;
  --sp-7:40px;
  --sp-8:64px;
  --sp-9:96px;

  /* promienie / cienie */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-sm:0 2px 10px rgba(29,29,31,.06);
  --shadow-md:0 8px 28px rgba(29,29,31,.10);

  /* uklad */
  --container:1180px;
  --container-narrow:820px;
  --container-wide:1760px;
  --header-h:70px;
}

/* Subtelne, szybkie przejście między stronami (natywne API przeglądarki —
   bez JS; przeglądarki bez wsparcia po prostu nawigują jak dotychczas). */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .16s;
  animation-timing-function: ease-out;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  font-size:var(--fs-base);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--sp-5)}

.section{padding:var(--sp-8) 0}
.section--tight{padding:var(--sp-7) 0}
.section--stone{background:var(--stone)}

/* Sekcja treści zaraz po nagłówku strony (breadcrumb/tytuł/lead) — mniejszy odstęp od
   góry niż zwykle, bo nagłówek ma już własny padding-bottom (patrz .hero, .page-hero,
   .section--tight użyte jako nagłówek w app/Views/site/*.php). */
.hero + .section, .section--tight + .section, .page-hero + .section{padding-top:var(--sp-6)}

.eyebrow{
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);font-weight:700;margin-bottom:var(--sp-3);display:block;
}

/* Telefon: mniejsze nagłówki i podstawowy tekst niż na tablecie/desktopie — na wąskim
   ekranie i tak nie ma miejsca na więcej. */
@media (max-width:820px){
  :root{--fs-2xl:28px;--fs-xl:22px;--fs-base:15px;--fs-sm:13px}
}
/* Próg 680px ma spory zapas nad realną szerokością CSS jakiegokolwiek telefonu w
   pionie (różne telefony zgłaszają różne szerokości zależnie od gęstości/skalowania
   ekranu, więc margines jest tu celowy). Proporcje ekranu (aspect-ratio) świadomie
   pominięte — na telefonie zmieniają się w locie wraz z pokazywaniem/chowaniem paska
   adresu przeglądarki, więc są zawodne. W tym zakresie fonty/odstępy płynnie rosną
   (clamp) aż do wartości desktopowych. */
@media (min-width:680px) and (max-width:1240px){
  :root{
    --fs-2xl:clamp(28px, 8.6px + 2.86vw, 44px);
    --fs-xl:clamp(22px, 9.9px + 1.79vw, 32px);
    --fs-base:clamp(15px, 11.4px + 0.54vw, 18px);
    --fs-sm:clamp(13px, 9.4px + 0.54vw, 16px);
    --sp-8:clamp(44px, 35.2px + 2.33vw, 64px);
    --sp-9:clamp(56px, 38.3px + 4.65vw, 96px);
  }
}