/* ==========================================================================
   SmartHomePoznan.pl — system wizualny
   Bez frameworka. Mobile-first. Jeden akcent, dużo powietrza, twarda siatka.
   ========================================================================== */

:root {
  /* --- kolory --- */
  --ink:            #101418;   /* najgłębszy grafit: sekcje ciemne, nagłówki */
  --ink-2:          #171d23;
  --ink-3:          #1f262e;
  --linia-ciemna:   #2b333c;
  --tekst:          #414c58;   /* akapity na jasnym tle */
  --szary:          #6d7883;
  --szary-jasny:    #9aa4ae;
  --linia:          #e7e4dd;
  --linia-mocna:    #d6d2c9;
  --tlo:            #ffffff;
  --tlo-alt:        #f7f5f1;   /* ciepła biel */
  --tlo-cieply:     #fdf3e9;
  --akcent:         #d4762a;
  --akcent-ciemny:  #b05e18;
  --akcent-jasny:   #ef9a55;
  --na-ciemnym:     #eef1f4;
  --na-ciemnym-mu:  #9fabb7;

  /* --- kształt --- */
  --r-duzy:  20px;
  --r:       14px;
  --r-maly:  10px;

  --cien-1: 0 1px 2px rgba(16, 20, 24, .04), 0 4px 12px rgba(16, 20, 24, .04);
  --cien-2: 0 2px 4px rgba(16, 20, 24, .05), 0 12px 32px rgba(16, 20, 24, .08);
  --cien-3: 0 4px 8px rgba(16, 20, 24, .06), 0 28px 64px rgba(16, 20, 24, .14);

  /* --- typografia --- */
  --font-tytul: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-tekst: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- siatka --- */
  --wrap: 1200px;
  --nav-h: 68px;
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.68;
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--nav-h);
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-tytul);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.6vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.5rem); }
h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.015em; }
p  { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }
a  { color: var(--akcent-ciemny); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong { color: var(--ink); font-weight: 600; }
button { font: inherit; }

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

.ico { width: 1.15em; height: 1.15em; flex: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff;
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-maly) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.link-tekstowy {
  background: none; border: 0; padding: 0;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.link-tekstowy:hover { color: #fff; }

/* --- pojawianie się sekcji ------------------------------------------------ */
/* Ukrywamy do animacji WYŁĄCZNIE gdy JavaScript działa — inaczej wyłączony JS
   albo błąd skryptu zostawiłby całą stronę pustą. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .8, .3, 1), transform .7s cubic-bezier(.22, .8, .3, 1);
}
.js [data-reveal].widoczny { opacity: 1; transform: none; }
.siatka [data-reveal]:nth-child(2) { transition-delay: .09s; }
.siatka [data-reveal]:nth-child(3) { transition-delay: .18s; }
.kroki [data-reveal]:nth-child(2) { transition-delay: .07s; }
.kroki [data-reveal]:nth-child(3) { transition-delay: .14s; }
.kroki [data-reveal]:nth-child(4) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap--waski { max-width: 820px; }

.sekcja { padding: 72px 0; position: relative; }
.sekcja--alt { background: var(--tlo-alt); }
.sekcja--ciemna { background: var(--ink); color: var(--na-ciemnym-mu); }
.sekcja--ciemna h2, .sekcja--ciemna h3, .sekcja--ciemna strong { color: #fff; }
.sekcja--ciemna a { color: var(--akcent-jasny); }

.sekcja__glowa { max-width: 720px; margin-bottom: 40px; }
.sekcja__glowa--srodek { margin-inline: auto; text-align: center; }
.sekcja__glowa h2 { margin-bottom: 0; }
.sekcja__lead {
  margin-top: 18px;
  font-size: 1.06rem;
  color: var(--szary);
  max-width: 58ch;
}
.sekcja__glowa--srodek .sekcja__lead { margin-inline: auto; }

/* --- etykiety sekcji ------------------------------------------------------ */
.etykieta {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-tytul);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--szary);
  margin: 0 0 .9rem;
}
.etykieta::before {
  content: ""; width: 22px; height: 2px; background: var(--akcent); border-radius: 2px;
}
.etykieta--akcent { color: var(--akcent-jasny); }
.etykieta--jasna {
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: .42rem .95rem .42rem .8rem;
  letter-spacing: .1em;
  backdrop-filter: blur(6px);
}
.etykieta--jasna::before { display: none; }
.etykieta__kropka {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--akcent-jasny);
  box-shadow: 0 0 0 4px rgba(239, 154, 85, .22);
}

/* --- przyciski ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.4rem;
  font-family: var(--font-tytul);
  font-size: .98rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -.005em;
  border: 1px solid transparent; border-radius: var(--r-maly);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn .ico { transition: transform .2s ease; }
.btn:hover .ico:last-child { transform: translateX(3px); }

.btn--primary {
  background: var(--akcent); color: #fff;
  box-shadow: 0 1px 2px rgba(176, 94, 24, .3), 0 8px 20px -8px rgba(176, 94, 24, .55);
}
.btn--primary:hover { background: var(--akcent-ciemny); box-shadow: 0 2px 4px rgba(176,94,24,.3), 0 14px 28px -10px rgba(176,94,24,.6); }

.btn--kontur { background: transparent; color: var(--ink); border-color: var(--linia-mocna); }
.btn--kontur:hover { border-color: var(--ink); background: rgba(16, 20, 24, .04); }

.btn--szklo {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}
.btn--szklo:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255,255,255,.4); }

.sekcja--ciemna .btn--kontur { color: #fff; border-color: rgba(255,255,255,.25); }
.sekcja--ciemna .btn--kontur:hover { background: rgba(255,255,255,.08); border-color: #fff; }

.btn--duzy { padding: 1.02rem 1.75rem; font-size: 1.04rem; }
.btn--maly { padding: .55rem 1rem; font-size: .9rem; }
.btn--blok { display: flex; width: 100%; }

/* --- nawigacja ------------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 200;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--linia);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav__inner { display: flex; align-items: center; gap: 1.2rem; height: 100%; }

.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-tytul); font-weight: 700; letter-spacing: -.03em;
  margin-right: auto;
  transition: color .3s ease;
}
.logo__znak { color: var(--akcent); flex: none; }
.logo__tekst { font-size: 1.06rem; }
.logo__tekst span { font-weight: 800; }

.nav__linki { display: none; gap: 1.7rem; }
.nav__linki a {
  position: relative;
  color: var(--tekst); text-decoration: none;
  font-size: .95rem; font-weight: 500;
  transition: color .2s ease;
}
.nav__linki a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 2px; background: var(--akcent); border-radius: 2px;
  transition: right .25s ease;
}
.nav__linki a:hover { color: var(--ink); }
.nav__linki a:hover::after, .nav__linki a.aktywny::after { right: 0; }
.nav__linki a.aktywny { color: var(--ink); }

.nav__telefon span { font-variant-numeric: tabular-nums; }

/* Nad zdjęciem hero pasek jest przezroczysty — po przewinięciu staje się biały.
   Bez JS zostaje wersja biała, czyli zawsze czytelna. */
.nav--na-gorze {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}
.nav--na-gorze .logo { color: #fff; }
.nav--na-gorze .nav__linki a { color: rgba(255, 255, 255, .82); }
.nav--na-gorze .nav__linki a:hover, .nav--na-gorze .nav__linki a.aktywny { color: #fff; }

@media (min-width: 940px) { .nav__linki { display: flex; } }
@media (max-width: 400px) { .nav__telefon span { display: none; } }

/* --- hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + 68px) 0 76px;
  overflow: hidden;
  color: var(--na-ciemnym-mu);
  background-color: var(--ink);
  background-image: url("assets/hero-1920.jpg?v=7936246f");
  background-image: image-set(
    url("assets/hero-1100.webp?v=978b7d9e") type("image/webp"),
    url("assets/hero-1920.jpg?v=7936246f") type("image/jpeg")
  );
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(16, 20, 24, .95) 0%,
      rgba(16, 20, 24, .88) 42%,
      rgba(16, 20, 24, .45) 100%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__inner > * { max-width: 680px; }

.hero__tytul {
  color: #fff;
  margin: 1.5rem 0 1.3rem;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.hero__tytul-akcent {
  display: block;
  background: linear-gradient(100deg, #ffffff 20%, var(--akcent-jasny) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  font-size: clamp(1.04rem, 2.2vw, 1.2rem);
  color: #c3ccd5;
  max-width: 56ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2.2rem 0 1.4rem; }
.hero__cta .btn--szklo { font-variant-numeric: tabular-nums; }
.hero__stopka { font-size: .9rem; color: var(--szary-jasny); }

/* --- pasek zaufania ------------------------------------------------------- */
.zaufanie {
  background: var(--ink-2);
  border-top: 1px solid var(--linia-ciemna);
  color: var(--na-ciemnym-mu);
}
.zaufanie__inner {
  display: grid; gap: .85rem;
  padding-block: 22px;
  font-size: .92rem;
}
.zaufanie__pozycja { display: flex; align-items: center; gap: .65rem; }
.zaufanie__pozycja .ico { color: var(--akcent); width: 1.25rem; height: 1.25rem; }

@media (min-width: 700px) {
  .zaufanie__inner { grid-template-columns: repeat(2, 1fr); gap: 1rem 2.4rem; }
}
@media (min-width: 1080px) {
  .zaufanie__inner { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; padding-block: 26px; }
  .zaufanie__pozycja { align-items: flex-start; }
}

/* --- siatki i karty -------------------------------------------------------- */
.siatka { display: grid; gap: 20px; }
@media (min-width: 720px)  { .siatka--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .siatka--3 { grid-template-columns: repeat(3, 1fr); } }

.karta {
  position: relative;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--r-duzy);
  padding: 30px 28px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sekcja--alt .karta { background: #fff; }
.karta:hover {
  border-color: var(--linia-mocna);
  transform: translateY(-3px);
  box-shadow: var(--cien-2);
}
.karta h3 { margin-bottom: .5em; }
.karta p { font-size: .97rem; }

.karta__numer {
  display: block;
  font-family: var(--font-tytul);
  font-size: .8rem; font-weight: 800; letter-spacing: .1em;
  color: var(--akcent);
  margin-bottom: 1rem;
}

/* --- audyt (pierwszy krok w sekcji o kosztach) ---------------------------- */
.audyt {
  display: grid; gap: 26px;
  background: var(--ink);
  color: var(--na-ciemnym-mu);
  border-radius: var(--r-duzy);
  padding: 32px 28px;
  box-shadow: var(--cien-3);
  position: relative;
  overflow: hidden;
}
.audyt::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(560px 300px at 88% 6%, rgba(212, 118, 42, .26), transparent 66%);
  pointer-events: none;
}
.audyt > * { position: relative; }
.audyt h3 { color: #fff; font-size: 1.6rem; font-family: var(--font-tytul); font-weight: 800; letter-spacing: -.02em; }
.audyt p { font-size: 1rem; }
.audyt__bonus {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linia-ciemna);
  color: #fff; font-weight: 500; font-size: .97rem;
}
.audyt__bonus .ico { color: var(--akcent-jasny); margin-top: .25rem; }

.audyt__cennik {
  display: grid; gap: 14px;
  align-content: start;
}
.audyt__wariant {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: 16px 20px;
}
.audyt__kwota {
  font-family: var(--font-tytul);
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em;
  color: #fff; margin: 0;
  font-variant-numeric: tabular-nums;
}
.audyt__opis { margin: .15rem 0 0; font-size: .88rem; color: var(--na-ciemnym-mu); }

@media (min-width: 860px) {
  .audyt { grid-template-columns: 1fr 250px; gap: 44px; padding: 42px 44px; align-items: center; }
  .audyt__cennik { grid-template-columns: 1fr; }
}

/* --- widełki --------------------------------------------------------------- */
.widelki__wstep {
  margin: 46px 0 22px;
  text-align: center;
  font-family: var(--font-tytul);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
}
.karta--widelki { display: flex; flex-direction: column; }
.karta--widelki h3 { font-size: 1.3rem; margin-bottom: .3em; }
.karta__ref {
  font-size: .8rem; color: var(--szary); margin-bottom: 1.1rem;
}
.karta__ref span {
  font-family: var(--font-tytul); font-weight: 700; color: var(--ink);
  background: var(--tlo-alt); border: 1px solid var(--linia);
  border-radius: 5px; padding: .1rem .4rem;
}
.sekcja--alt .karta__ref span { background: var(--tlo-cieply); border-color: #f0dcc6; }
.kwota {
  font-family: var(--font-tytul);
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 1.3rem;
  font-variant-numeric: tabular-nums;
}
.ptaszki { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.ptaszki li { position: relative; padding-left: 1.7rem; font-size: .96rem; }
.ptaszki li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 10px; height: 5px;
  border-left: 2px solid var(--akcent); border-bottom: 2px solid var(--akcent);
  transform: rotate(-45deg);
}
.karta__dla {
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1px solid var(--linia);
  font-size: .9rem; color: var(--szary);
}

.koszt__zamkniecie {
  margin: 26px auto 0;
  max-width: 66ch; text-align: center;
  font-size: .96rem; color: var(--szary);
}

/* --- jedno wspólne CTA pod cenami ----------------------------------------- */
.koszt__cta {
  margin-top: 42px;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--r-duzy);
  padding: 30px 28px;
  display: grid; gap: 22px;
  box-shadow: var(--cien-1);
}
.koszt__cta-naglowek {
  font-family: var(--font-tytul);
  font-size: 1.2rem; font-weight: 700; line-height: 1.35;
  color: var(--ink); letter-spacing: -.015em;
  margin-bottom: .4rem;
}
.koszt__cta-opis { color: var(--szary); font-size: .96rem; margin: 0; }
.koszt__cta-przyciski { display: flex; flex-wrap: wrap; gap: .7rem; }
.koszt__cta-przyciski .btn { flex: 1 1 auto; }

@media (min-width: 900px) {
  .koszt__cta {
    grid-template-columns: 1fr auto;
    align-items: center; gap: 40px;
    padding: 34px 38px;
  }
  .koszt__cta-przyciski .btn { flex: 0 0 auto; }
}

.koszt__knx {
  margin-top: 22px; text-align: center;
  font-size: .9rem; color: var(--szary);
  max-width: 70ch; margin-inline: auto;
}

/* --- kroki ---------------------------------------------------------------- */
.kroki { display: grid; gap: 0; }
.krok {
  position: relative;
  display: grid; grid-template-columns: 52px 1fr; gap: 20px;
  padding-bottom: 34px;
}
.krok:last-child { padding-bottom: 0; }
.krok::before {
  content: "";
  position: absolute; left: 25px; top: 52px; bottom: 6px;
  width: 2px; background: linear-gradient(to bottom, var(--linia-mocna), var(--linia));
}
.krok:last-child::before { display: none; }
.krok__znacznik {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-family: var(--font-tytul); font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 0 0 6px var(--tlo);
}
.krok__tresc { padding-top: 10px; }
.krok__tresc h3 { margin-bottom: .35em; }
.krok__tresc p { font-size: .97rem; }

@media (min-width: 1040px) {
  .kroki { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .krok { grid-template-columns: 1fr; gap: 16px; padding-bottom: 0; }
  .krok::before { left: 52px; right: -28px; top: 25px; bottom: auto; width: auto; height: 2px; }
  .krok:last-child::before { display: none; }
  .krok__tresc { padding-top: 0; }
}

/* --- technologie ---------------------------------------------------------- */
.tech { display: grid; gap: 36px; }
.tech__tekst p { font-size: 1.02rem; }
.tech__nota {
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linia-ciemna);
  font-size: .95rem;
}
.zetony { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.zeton {
  border: 1px solid var(--linia-ciemna);
  background: rgba(255, 255, 255, .045);
  border-radius: 999px;
  padding: .55rem 1.05rem;
  font-family: var(--font-tytul);
  font-size: .92rem; font-weight: 600; color: var(--na-ciemnym);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.zeton:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.09); transform: translateY(-2px); }
.zeton--mocny {
  background: var(--akcent); border-color: var(--akcent); color: #fff;
}
.zeton--mocny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
.zeton--slaby { color: var(--na-ciemnym-mu); }
.zeton--slaby span { font-size: .76rem; font-weight: 500; opacity: .8; margin-left: .3rem; }

@media (min-width: 980px) {
  .tech { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
}

/* --- realizacje ----------------------------------------------------------- */
.portfolio {
  border: 1px solid var(--linia);
  border-left: 3px solid var(--akcent);
  border-radius: var(--r);
  background: var(--tlo-alt);
  padding: 30px 30px 32px;
  max-width: 74ch;
}
.portfolio .btn { margin-top: 1.4rem; }
.realizacja__foto { margin: 0 0 1rem; border-radius: var(--r); overflow: hidden; background: var(--tlo-alt); }

/* --- o mnie --------------------------------------------------------------- */
.o-mnie { display: grid; gap: 34px; }

.wizytowka {
  background: var(--ink);
  color: var(--na-ciemnym-mu);
  border-radius: var(--r-duzy);
  padding: 32px 30px;
  box-shadow: var(--cien-2);
  position: relative; overflow: hidden;
  align-self: start;
}
.wizytowka::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 260px at 84% 0%, rgba(212, 118, 42, .3), transparent 68%);
  pointer-events: none;
}
.wizytowka > * { position: relative; }
.wizytowka__znak { width: 46px; height: 46px; color: var(--akcent-jasny); margin-bottom: 1.4rem; }
.wizytowka__imie {
  font-family: var(--font-tytul); font-size: 1.4rem; font-weight: 800;
  color: #fff; letter-spacing: -.025em; margin: 0 0 .25rem;
}
.wizytowka__rola { font-size: .92rem; margin: 0; color: var(--na-ciemnym-mu); }
.wizytowka__linia { border: 0; border-top: 1px solid var(--linia-ciemna); margin: 1.5rem 0; }
.wizytowka__dane { display: grid; gap: .95rem; }
.wizytowka__dane dt {
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--szary-jasny); margin-bottom: .15rem;
}
.wizytowka__dane dd {
  font-family: var(--font-tytul); font-weight: 700; color: #fff; font-size: 1rem;
}
.wizytowka__dane a { color: #fff; text-decoration: none; }
.wizytowka__dane a:hover { color: var(--akcent-jasny); }

.portret { margin: 0; border-radius: var(--r-duzy); overflow: hidden; box-shadow: var(--cien-2); }
.portret img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.o-mnie__tekst p { font-size: 1.02rem; }
.cytat {
  margin: 1.8rem 0;
  padding: 1.1rem 0 1.1rem 1.6rem;
  border-left: 3px solid var(--akcent);
  font-family: var(--font-tytul);
  font-size: 1.24rem; font-weight: 700; line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--ink);
}
.o-mnie__gminy { font-size: .92rem; color: var(--szary); }

@media (min-width: 900px) {
  .o-mnie { grid-template-columns: 320px 1fr; gap: 60px; }
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--linia); }
.faq__pozycja { border-bottom: 1px solid var(--linia); }
.faq__pozycja summary {
  list-style: none; cursor: pointer;
  padding: 1.25rem 3rem 1.25rem 0;
  position: relative;
  font-family: var(--font-tytul);
  font-weight: 700; font-size: 1.08rem; letter-spacing: -.015em;
  color: var(--ink);
  transition: color .2s ease;
}
.faq__pozycja summary::-webkit-details-marker { display: none; }
.faq__pozycja summary::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px;
  border: 1px solid var(--linia-mocna); border-radius: 50%;
  background:
    linear-gradient(var(--akcent), var(--akcent)) center/11px 2px no-repeat,
    linear-gradient(var(--akcent), var(--akcent)) center/2px 11px no-repeat;
  transition: transform .25s ease, border-color .2s ease, background-size .25s ease;
}
.faq__pozycja[open] summary::after {
  transform: rotate(90deg);
  background-size: 11px 2px, 0 11px;
  border-color: var(--akcent);
}
.faq__pozycja summary:hover { color: var(--akcent-ciemny); }
.faq__odpowiedz { padding: 0 2.5rem 1.5rem 0; font-size: .99rem; }
.faq__odpowiedz p { color: var(--tekst); }

/* --- kontakt -------------------------------------------------------------- */
.kontakt { display: grid; gap: 40px; }
.kontakt__wstep { font-size: 1.03rem; margin-bottom: 2rem; }

.kontakt__telefon {
  display: flex; align-items: center; gap: 1rem;
  padding: 20px 22px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--linia-ciemna);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.kontakt__telefon:hover {
  border-color: var(--akcent); background: rgba(212, 118, 42, .12); transform: translateY(-2px);
}
.kontakt__telefon .ico { width: 1.7rem; height: 1.7rem; color: var(--akcent-jasny); }
.kontakt__telefon-tekst { display: grid; }
.kontakt__telefon-nr {
  font-family: var(--font-tytul); font-size: 1.5rem; font-weight: 800;
  color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kontakt__telefon-opis { font-size: .87rem; color: var(--na-ciemnym-mu); }

.kontakt__dane { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
.kontakt__dane dt {
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--szary-jasny); margin-bottom: .2rem;
}
.kontakt__dane dd { font-size: 1rem; color: var(--na-ciemnym); }
.kontakt__dane a { color: var(--na-ciemnym); text-decoration: none; }
.kontakt__dane a:hover { color: var(--akcent-jasny); text-decoration: underline; }

@media (min-width: 980px) {
  .kontakt { grid-template-columns: 1fr 1.02fr; gap: 70px; align-items: start; }
}

/* --- formularz ------------------------------------------------------------ */
.formularz {
  background: #fff;
  border-radius: var(--r-duzy);
  padding: 28px 24px 26px;
  box-shadow: var(--cien-3);
}
/* Formularz to biała karta wewnątrz ciemnej sekcji — musi odwrócić
   kolory odziedziczone po .sekcja--ciemna, inaczej tytuł jest biały na białym. */
.formularz h3, .formularz strong { color: var(--ink); }
.formularz a { color: var(--akcent-ciemny); }
.formularz__tytul {
  font-size: 1.3rem; margin-bottom: 1.4rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--linia);
}
.pole { margin-bottom: 1.05rem; }
.pole label {
  display: block;
  font-family: var(--font-tytul);
  font-size: .89rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem;
}
.pole label span[aria-hidden] { color: var(--akcent); }
.pole__opc { font-weight: 400; color: var(--szary); }
.pole input[type="text"], .pole input[type="tel"], .pole input[type="email"],
.pole select, .pole textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--tlo);
  padding: .74rem .85rem;
  border: 1px solid var(--linia-mocna); border-radius: var(--r-maly);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pole select {
  appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236d7883' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center;
}
.pole textarea { resize: vertical; min-height: 92px; }
.pole :is(input, select, textarea):hover { border-color: var(--szary); }
.pole :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--akcent);
  box-shadow: 0 0 0 3px rgba(212, 118, 42, .16);
}
.pole :is(input, select, textarea)[aria-invalid="true"] { border-color: #c0392b; background: #fff8f7; }
.pole__blad { margin: .4rem 0 0; font-size: .86rem; color: #c0392b; }

.pole--para { display: grid; gap: 1.05rem; }
@media (min-width: 520px) { .pole--para { grid-template-columns: 1fr 1fr; gap: 14px; } }

.pole--zgoda {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; align-items: start;
  margin: 1.4rem 0 1.3rem;
  padding: 14px 16px;
  background: var(--tlo-alt); border-radius: var(--r-maly);
}
.pole--zgoda input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--akcent); }
.pole--zgoda label {
  font-family: var(--font-tekst);
  font-size: .87rem; font-weight: 400; color: var(--tekst); line-height: 1.55; margin: 0;
}
.pole--zgoda .pole__blad { grid-column: 2; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formularz__status { margin: 1.1rem 0 0; font-size: .95rem; font-weight: 500; }
.formularz__status[data-state="ok"]  { color: #1a7a48; }
.formularz__status[data-state="err"] { color: #c0392b; }
.formularz__nota { margin-top: .9rem; font-size: .83rem; color: var(--szary); }

@media (min-width: 560px) { .formularz { padding: 36px 34px 32px; } }

/* --- stopka --------------------------------------------------------------- */
.stopka { background: var(--ink-2); color: var(--na-ciemnym-mu); padding: 52px 0 26px; font-size: .94rem; }
.stopka__inner { display: grid; gap: 34px; }
.stopka .logo { color: #fff; margin-bottom: 1rem; }
.stopka__opis { max-width: 44ch; font-size: .92rem; }
.stopka__prawne { font-size: .86rem; color: var(--szary-jasny); margin-top: .6rem; }
.stopka__naglowek {
  font-family: var(--font-tytul);
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--szary-jasny); margin-bottom: .9rem;
}
.stopka__nawigacja { display: grid; gap: .55rem; align-content: start; }
.stopka__nawigacja a { color: var(--na-ciemnym-mu); text-decoration: none; }
.stopka__nawigacja a:hover { color: #fff; text-decoration: underline; }
.stopka__kontakt { display: grid; gap: .45rem; align-content: start; }
.stopka__kontakt a { color: var(--na-ciemnym-mu); text-decoration: none; }
.stopka__kontakt a:hover { color: #fff; }
.stopka__kontakt p { margin: 0; }
.stopka__tel {
  font-family: var(--font-tytul); font-size: 1.28rem; font-weight: 800;
  color: #fff !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stopka__dol {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--linia-ciemna);
  display: grid; gap: .4rem;
  font-size: .84rem; color: var(--szary-jasny);
}
.stopka__dol p { margin: 0; }

@media (min-width: 840px) {
  .stopka__inner { grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
  .stopka__dol { grid-template-columns: 1fr auto; align-items: center; }
}

/* --- pasek mobilny -------------------------------------------------------- */
.pasek-mobilny {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  display: flex; gap: 10px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: rgba(16, 20, 24, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linia-ciemna);
}
.pasek-mobilny .btn { flex: 1; }
@media (min-width: 760px) { .pasek-mobilny { display: none !important; } }
body:has(.pasek-mobilny:not([hidden])) { padding-bottom: 74px; }

/* --- baner cookies -------------------------------------------------------- */
.cookies {
  position: fixed; z-index: 210;
  left: 12px; right: 12px; bottom: 12px;
  background: #fff;
  border: 1px solid var(--linia);
  border-radius: var(--r);
  box-shadow: var(--cien-3);
  padding: 20px 22px;
  animation: cookies-wjazd .45s cubic-bezier(.22,.8,.3,1);
}
@keyframes cookies-wjazd { from { opacity: 0; transform: translateY(14px); } }
.cookies__tresc { display: grid; gap: 16px; max-width: var(--wrap); margin-inline: auto; }
.cookies p { font-size: .89rem; color: var(--tekst); margin: 0; }
.cookies__przyciski { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookies__przyciski .btn { flex: 1 1 auto; }

@media (min-width: 820px) {
  .cookies { left: 24px; right: 24px; bottom: 24px; padding: 22px 26px; }
  .cookies__tresc { grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
  .cookies__przyciski .btn { flex: 0 0 auto; }
}
body:has(.pasek-mobilny:not([hidden])) .cookies { bottom: 86px; }

/* --- większe ekrany ------------------------------------------------------- */
@media (min-width: 760px) {
  .sekcja { padding: 104px 0; }
  .sekcja__glowa { margin-bottom: 52px; }
  .hero {
    padding: calc(var(--nav-h) + 108px) 0 116px;
    background-image: url("assets/hero-1920.jpg?v=7936246f");
    background-image: image-set(
      url("assets/hero-1920.webp?v=c6c6ffbd") type("image/webp"),
      url("assets/hero-1920.jpg?v=7936246f") type("image/jpeg")
    );
    background-position: right center;
  }
  .hero::before {
    background:
      linear-gradient(100deg,
        rgba(16, 20, 24, .97) 0%,
        rgba(16, 20, 24, .93) 32%,
        rgba(16, 20, 24, .58) 62%,
        rgba(16, 20, 24, .10) 100%);
  }
}

/* --- strony tekstowe (polityka prywatności) ------------------------------- */
.tresc-prawna h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: .25em; }
.tresc-prawna h2 { font-size: 1.28rem; margin-top: 2.4rem; }
.tresc-prawna__data { color: var(--szary); font-size: .92rem; margin-bottom: 2.2rem; }
.tresc-prawna ul { list-style: disc; padding-left: 1.35rem; margin: 0 0 1.05rem; }
.tresc-prawna li { margin-bottom: .45rem; }
.tresc-prawna__linia { border: 0; border-top: 1px solid var(--linia); margin: 2.6rem 0 1.8rem; }
.tresc-prawna__nota {
  background: var(--tlo-cieply); border: 1px solid #f0dcc6; border-radius: var(--r);
  padding: 18px 20px; font-size: .92rem;
}
.tresc-prawna__powrot { display: inline-flex; align-items: center; gap: .4rem; margin-top: 2rem; }

/* --- strona 404 ----------------------------------------------------------- */
.pusto { min-height: 66vh; display: grid; place-content: center; text-align: center; gap: 1.3rem; }
.pusto__kod {
  font-family: var(--font-tytul); font-size: clamp(4rem, 15vw, 8rem); font-weight: 800;
  color: var(--akcent); line-height: 1; letter-spacing: -.05em; margin: 0;
}
.pusto__cta { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

/* --- druk ----------------------------------------------------------------- */
@media print {
  .nav, .pasek-mobilny, .cookies, .hero::before { display: none !important; }
  body { font-size: 12pt; color: #000; padding-top: 0; }
  .sekcja--ciemna, .hero, .audyt, .wizytowka { background: #fff !important; color: #000 !important; }
  .sekcja--ciemna h2, .audyt h3, .hero__tytul { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}