/* =========================================================
   Dawid Webdesign — portfolio
   Styl: monochrome (czerń, biel, szarości, ziarno) + pulpit z ikonami realizacji.
   Kroje: Archivo rozciągnięte (nagłówki), Inter (tekst).
   ========================================================= */

:root {
  --bg: #0b0b0b;
  --bg-2: #111;
  --panel: #141414;
  --linia: rgba(255, 255, 255, .1);
  --linia-2: rgba(255, 255, 255, .2);
  --tekst: #f2f2f2;
  --jasny: #c9c9c9;
  --szary: #8e8e8e;
  --ciemny: #5c5c5c;

  --font: Inter, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --szeroki: Archivo, "Arial Black", sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --maks: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--tekst); color: #000; }
:focus-visible { outline: 1.5px solid var(--tekst); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--maks) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ziarno filmu na całej stronie */
.ziarno {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url(img/ziarno.png);
  opacity: .55;
}

/* ---------- typografia ---------- */
.szeroki, .tytul, .podtytul, .pulpit__h1, .mono__slowo, .kontakt__h2, .nav__logo, .projekt h3 {
  font-family: var(--szeroki);
  font-stretch: 125%;
}
.szary { color: var(--ciemny); }
.licznik {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
}
.licznik span { color: var(--ciemny); }
.etykieta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--szary);
}
.tytul {
  font-size: clamp(32px, 5.2vw, 78px);
  line-height: .95;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.podtytul {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 16px;
}
.wstep {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--szary);
  max-width: 34em;
  margin-top: 26px;
}

/* ---------- przyciski i linki ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--tekst);
  color: #000;
  font-size: 15px;
  font-weight: 600;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s;
}
.btn:hover { background: #fff; }
.btn:active { transform: scale(.97); }
.btn--obrys { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1px var(--linia-2); }
.btn--obrys:hover { background: var(--tekst); color: #000; box-shadow: none; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.btn svg .pelna, svg .pelna { fill: currentColor; stroke: none; }

.link-strzalka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tekst);
}
.link-strzalka svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease);
}
.link-strzalka:hover svg { transform: translateX(4px); }
.link-strzalka:hover svg:has(path[d^="M7 17"]) { transform: translate(3px, -3px); }

/* =========================================================
   NAWIGACJA
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 24px var(--gutter);
  transition: padding .5s var(--ease), background .5s var(--ease);
}
.nav--tlo {
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(11, 11, 11, .72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--linia);
}
.nav__logo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  white-space: nowrap;
}
.nav__logo { display: inline-flex; align-items: center; gap: 10px; }
.nav__logo span { color: var(--szary); margin-left: -.35em; }
.logo-znak { width: auto; height: 34px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .18)); }   /* chromowane gotyckie „D” (img/logo-d.png) */
.nav__logo:hover .logo-znak { animation: blysk .9s var(--ease); }
@keyframes blysk { 40% { transform: rotate(-8deg) scale(1.12); filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5)); } }
.nav__menu { display: flex; gap: 26px; margin-left: auto; }
.nav__menu a {
  position: relative;
  font-size: 13px;
  color: var(--jasny);
  transition: color .25s;
}
.nav__menu a:hover, .nav__menu a.aktywny { color: #fff; }
.nav__menu a.aktywny::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}
.nav__prawo { display: flex; align-items: center; gap: 6px; }
.nav__ikona {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  transition: background .25s;
}
.nav__ikona:hover { background: rgba(255, 255, 255, .1); }
.nav__ikona svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav__kropki { display: none; }
@media (max-width: 420px) { .nav__ikona { display: none; } }   /* Instagram i TikTok są w docku i w kontakcie */

@media (max-width: 900px) {
  .nav { justify-content: space-between; }
  .nav__kropki {
    display: grid;
    grid-template-columns: 4px 4px;
    gap: 4px;
    place-content: center;
    width: 40px; height: 40px;
    margin-left: 4px;
  }
  .nav__kropki i { width: 4px; height: 4px; border-radius: 1px; background: #fff; transition: transform .45s var(--ease); }
  .nav--otwarte .nav__kropki i:nth-child(1) { transform: translate(4px, 4px); }
  .nav--otwarte .nav__kropki i:nth-child(2) { transform: translate(-4px, 4px); }
  .nav--otwarte .nav__kropki i:nth-child(3) { transform: translate(4px, -4px); }
  .nav--otwarte .nav__kropki i:nth-child(4) { transform: translate(-4px, -4px); }

  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 90px var(--gutter) 60px;
    background: rgba(11, 11, 11, .97);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility 0s .45s;
  }
  .nav--otwarte .nav__menu { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
  .nav__menu a {
    font-family: var(--szeroki);
    font-stretch: 125%;
    font-weight: 800;
    font-size: clamp(30px, 9vw, 46px);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--tekst);
    transform: translateY(24px);
    opacity: 0;
    transition: transform .6s var(--ease), opacity .6s var(--ease), color .25s;
  }
  .nav--otwarte .nav__menu a { transform: none; opacity: 1; }
  .nav--otwarte .nav__menu a:nth-child(2) { transition-delay: .04s; }
  .nav--otwarte .nav__menu a:nth-child(3) { transition-delay: .08s; }
  .nav--otwarte .nav__menu a:nth-child(4) { transition-delay: .12s; }
  .nav--otwarte .nav__menu a:nth-child(5) { transition-delay: .16s; }
  .nav--otwarte .nav__menu a:nth-child(6) { transition-delay: .2s; }
  .nav__menu a.aktywny { color: var(--szary); }
  .nav__menu a.aktywny::after { display: none; }
  .nav--otwarte { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================
   HERO — PULPIT
   ========================================================= */
.pulpit {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--bg);
}
.pulpit__tlo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(calc(1.08 + var(--s, 0) * .08)) translateY(calc(var(--s, 0) * 6%));
  transition: opacity 1.6s var(--ease);
  will-change: transform;
}
.js .pulpit__tlo { opacity: 0; }
.zaladowane .pulpit__tlo { opacity: 1; }
.pulpit__cien {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(11, 11, 11, .55), transparent 22%, transparent 70%, rgba(11, 11, 11, .75)),
    radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(11, 11, 11, .5));
}

.pulpit__napis {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-54%);
  text-align: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.pulpit__h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  font-size: clamp(52px, 10vw, 190px);
  line-height: .84;
  letter-spacing: -.02em;
}
.pulpit__h1 span:first-child {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 242, 242, .75);
}
.pulpit__h1 span:last-child { color: rgba(242, 242, 242, .94); }
.pulpit__lead {
  position: relative;
  isolation: isolate;
  margin: 26px auto 0;
  max-width: 30em;
  color: #fff;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .7);
}
/* miękka ciemna plama pod podpisem — jasne fragmenty rozmytego zdjęcia nie zjadają tekstu */
.pulpit__lead::before {
  content: "";
  position: absolute;
  inset: -34px -70px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(11, 11, 11, .62), rgba(11, 11, 11, .3) 60%, transparent);
}

/* wejście */
.js .wejscie { opacity: 0; transform: translateY(30px); filter: blur(10px); }
.zaladowane .wejscie {
  opacity: 1; transform: none; filter: none;
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.3s var(--ease);
}
.zaladowane .pulpit__h1 span:last-child { transition-delay: .1s; }
.zaladowane .pulpit__lead { transition-delay: .3s; }
.zaladowane .dock { transition-delay: .9s; }

/* ikony realizacji */
.ikony { position: absolute; inset: 0; }
.ik {
  --dx: 0px; --dy: 0px;
  position: absolute;
  left: var(--x); top: var(--y);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy));
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ik img {
  width: 62px; height: 62px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  pointer-events: none;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ik span {
  font-family: var(--szeroki);
  font-stretch: 125%;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
  padding: 2px 5px;
  border-radius: 4px;
  transition: background .3s;
}
.ik--koncept span { color: var(--jasny); }
.ik:hover img, .ik:focus-visible img { transform: scale(1.1) translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .25); }
.ik:hover span, .ik:focus-visible span { background: rgba(255, 255, 255, .16); }
.ik.ciagnie { z-index: 5; cursor: grabbing; }
.ik.ciagnie img { transform: scale(1.12); }
@media (pointer: fine) { .ik { cursor: grab; touch-action: none; } }

/* pojawianie się i lekkie unoszenie */
.js .ik > * { opacity: 0; scale: .4; }
.zaladowane .ik > * {
  opacity: 1; scale: 1;
  transition: opacity .7s var(--ease) var(--opozn, 0s), scale .9s cubic-bezier(.34, 1.56, .64, 1) var(--opozn, 0s), transform .45s var(--ease), box-shadow .45s var(--ease), background .3s;
}
.ik > * { animation: unos 6s ease-in-out infinite; animation-delay: var(--faza, 0s); }
.ik.ciagnie > *, .ik:hover > * { animation-play-state: paused; }
@keyframes unos { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.pulpit__podpowiedz {
  position: absolute;
  left: 0; right: 0; bottom: 104px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
@media (pointer: coarse) { .pulpit__podpowiedz { display: none; } }

/* dock */
.dock {
  position: absolute;
  left: 50%; bottom: 20px;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 70px;
  padding: 9px 10px;
  border-radius: 22px;
  background: rgba(45, 45, 45, .42);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 50px rgba(0, 0, 0, .45);
  translate: -50% 0;
}
.js .dock.wejscie { transform: translateY(40px); }
.zaladowane .dock.wejscie { transform: none; }
.dock__el {
  --m: 1;
  position: relative;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: 13px;
  background: linear-gradient(160deg, #3a3a3a, #161616);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .35);
  transform-origin: 50% 100%;
  scale: var(--m);
  transition: scale .18s ease-out, margin .18s ease-out;
  margin: 0 calc((var(--m) - 1) * 13px);
}
.dock__el svg {
  width: 30px; height: 30px;
  fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.dock__el::before {
  content: attr(data-nazwa);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  translate: -50% 4px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(30, 30, 30, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 12px;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, translate .2s;
  scale: calc(1 / var(--m));
  transform-origin: 50% 100%;
}
.dock__el:hover::before, .dock__el:focus-visible::before { opacity: 1; translate: -50% 0; }
/* ikonki bez kafelka: same chromowane bryły na szkle docka */
.dock__el--chrom { background: none; box-shadow: none; overflow: visible; }
.dock__el--chrom img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.dock__kreska { width: 1px; height: 46px; margin: 0 3px 3px; background: rgba(255, 255, 255, .2); flex: none; }

@media (max-width: 760px) {
  .ik { left: var(--mx); top: var(--my); width: 72px; gap: 6px; }
  .ik img { width: 48px; height: 48px; border-radius: 5px; }
  .ik span { font-size: 8px; padding: 1px 3px; }
  .pulpit__napis { transform: translateY(-50%); }
  .pulpit__h1 { font-size: 12.4vw; }
  .pulpit__lead { max-width: 22em; }
  .dock { gap: 6px; height: 58px; padding: 7px 8px; border-radius: 18px; bottom: 14px; }
  .dock__el { width: 42px; height: 42px; border-radius: 11px; }
  .dock__el svg { width: 24px; height: 24px; }
  .dock__kreska { height: 36px; }
}
@media (max-width: 380px) {
  .dock__el { width: 38px; height: 38px; }
  .dock { gap: 5px; }
}

/* =========================================================
   O MNIE — MONOCHROME
   ========================================================= */
.mono {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  max-height: 1100px;
  overflow: hidden;
  background: var(--bg);
}
.mono__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(calc(1.06 - var(--z, 0) * .06));
  transform-origin: 50% 100%;
  will-change: transform;
}
.mono__gora { position: absolute; top: 108px; left: var(--gutter); }
.mono__gora .licznik { margin-bottom: 10px; }
.mono__tekst {
  position: absolute;
  left: var(--gutter);
  top: 42%;
  max-width: 290px;
  font-size: 15px;
  line-height: 1.6;
  color: #e4e4e4;
}
.mono__slowo {
  position: absolute;
  left: 0; right: 0;
  bottom: 15%;
  text-align: center;
  font-weight: 900;
  font-size: 12.4vw;
  line-height: .8;
  letter-spacing: -.01em;
  color: rgba(210, 210, 210, .38);
  white-space: nowrap;
  pointer-events: none;
}
.mono__litery { display: inline-block; position: relative; }
.mono__litery .l { display: inline-block; }
.js .mono__litery .l { transform: translateY(60%); opacity: 0; }
.mono.widac .mono__litery .l {
  transform: none; opacity: 1;
  transition: transform 1.2s var(--ease), opacity 1.2s var(--ease);
  transition-delay: calc(var(--i) * .05s);
}
.mono__dol {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 42px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 14px;
}
.mono__nr { font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.mono__nr span { color: var(--szary); }
/* O mnie: kafelek z chromowaną ikoną (jak zajawka rezerwacji) w miejscu dolnego licznika → o-mnie.html */
.mono__wiecej { justify-self: center; display: inline-flex; align-items: center; gap: 14px; padding: 8px 20px 8px 10px; border-radius: 20px; }
.mono__wiecej.chrom-ramka { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 4px rgba(0, 0, 0, .55), inset 0 0 0 5px rgba(255, 255, 255, .07), 0 16px 40px rgba(0, 0, 0, .6); }
.mono__wiecej.chrom-ramka::after { top: -10px; right: 34px; width: 20px; height: 20px; }
.mono__wiecej img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); transition: transform .6s var(--ease); }
.mono__wiecej:hover img { transform: translateY(-2px) rotate(-5deg); }
.mono__wiecej-tekst { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.mono__wiecej-tekst b { font-family: var(--szeroki); font-stretch: 125%; font-weight: 800; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; }
.mono__wiecej-tekst span { font-size: 12.5px; color: var(--szary); }
.mono__wiecej svg { width: 18px; height: 18px; flex: none; margin-left: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .4s var(--ease); }
.mono__wiecej:hover svg { transform: translateX(3px); }
@media (min-width: 761px) { #omnie .mono__slowo { bottom: max(15%, 108px); } }   /* kafelek w pasku jest wyższy niż sam link — napis nie wchodzi pod niego */
.dalej { justify-self: end; display: inline-flex; align-items: center; gap: 14px; }
.dalej b { font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.dalej > span:not(.dalej__kolo) { font-size: 14px; color: var(--jasny); }
.dalej__kolo { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-left: 8px; }
.dalej__pierscien { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dalej__pierscien circle { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.dalej__pierscien .postep { stroke: #fff; stroke-dasharray: 141.4; stroke-dashoffset: calc(141.4 * (1 - var(--pk, 0))); }
.dalej__grot { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.dalej:hover .dalej__grot { transform: translateX(3px); }

@media (max-width: 760px) {
  .mono { height: auto; min-height: 0; max-height: none; aspect-ratio: auto; padding: 100px 0 40px; display: flex; flex-direction: column; }
  .mono__foto { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; object-position: 50% 0%; order: 2; }
  .mono__gora { position: static; padding: 0 var(--gutter); order: 0; }
  .mono__tekst { position: static; max-width: none; padding: 18px var(--gutter) 28px; order: 1; font-size: 16px; }
  .mono__slowo { position: relative; bottom: auto; margin-top: -9vw; font-size: 12.4vw; order: 3; }
  .mono__dol { position: static; order: 4; padding: 28px var(--gutter) 0; grid-template-columns: 1fr auto; }
  .mono__nr { display: none; }
  .mono__projekty { display: none; }       /* na telefonie zostaje „Więcej o mnie” + DALEJ (też do projektów) */
  .mono__wiecej { justify-self: start; }
  .dalej > span:not(.dalej__kolo), .dalej b { display: none; }
}

/* =========================================================
   SEKCJE
   ========================================================= */
.sekcja { padding: clamp(120px, 15vw, 200px) 0 0; }
.naglowek { margin-bottom: clamp(56px, 8vw, 100px); }
.naglowek--rzad { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.naglowek__prawo { max-width: 460px; }
.naglowek--wskaz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: end;
  gap: 20px;
  margin-bottom: clamp(30px, 4vw, 50px);
}
/* „ZAPROJEKTOWAŁEM” to jedno długie słowo (13,6 × wysokość litery) — nagłówek mieści się w swojej kolumnie,
   inaczej koniec słowa chowa się pod czarnym tłem zdjęcia */
.naglowek--wskaz > div { container-type: inline-size; }
.naglowek--wskaz .tytul { font-size: min(clamp(32px, 5.2vw, 78px), 7.2cqi); }
.wskaz {
  width: 100%;
  max-width: 560px;
  justify-self: end;
  margin: 0 -2% -30px 0;
  pointer-events: none;
}
.wskaz { rotate: -16deg; transform-origin: 70% 60%; }   /* ramię celuje poziomo w nagłówek */
.js .wskaz.reveal { transform: translateX(60px); }
.js .wskaz.reveal.widac { transform: none; transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); }
.naglowek__prawo .wstep { margin-top: 0; }
@media (max-width: 860px) {
  .naglowek--rzad { flex-direction: column; align-items: flex-start; }
  .naglowek--wskaz { grid-template-columns: 1fr; gap: 0; }
  .wskaz { max-width: 78%; margin: 10px -4% -20px 0; }
}

/* ---------- realizacje ---------- */
.projekty { display: grid; gap: clamp(90px, 12vw, 170px); }
.projekt {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 84px);
}
.projekt:nth-child(even) .projekt__media { order: 2; }
.projekt__media { position: relative; display: block; }
.okno {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #1a1a1a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 90px rgba(0, 0, 0, .6);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.okno__pasek { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: #1a1a1a; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.okno__pasek i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.okno img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.telefon {
  overflow: hidden;
  border-radius: 13% / 6%;
  background: #000;
  padding: 1.6%;
  box-shadow: 0 0 0 1.5px #3a3a3a, 0 30px 70px rgba(0, 0, 0, .65);
}
.telefon img { border-radius: 11.5% / 5.3%; width: 100%; }
.projekt__telefon { position: absolute; width: 22%; right: -5%; bottom: -12%; }
.projekt:nth-child(even) .projekt__telefon { right: auto; left: -5%; }
.projekt__media:hover .okno { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 50px 100px rgba(0, 0, 0, .75); }

/* czerń-biel, kolor po najechaniu */
@media (hover: hover) {
  .projekt__media img, .koncept__foto img { filter: grayscale(1) contrast(1.06) brightness(.92); transition: filter .9s var(--ease), transform 1s var(--ease); }
  .projekt__media:hover img, .koncept:hover .koncept__foto img { filter: none; }
}

.projekt__nr { font-size: 12px; color: var(--ciemny); font-variant-numeric: tabular-nums; letter-spacing: .04em; margin-bottom: 16px; }
.projekt h3 { font-size: clamp(26px, 2.9vw, 42px); line-height: 1; font-weight: 800; text-transform: uppercase; }
.projekt__branza { margin-top: 12px; color: var(--szary); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.projekt__opis > p:not([class]) { margin-top: 22px; color: var(--jasny); font-size: 16px; line-height: 1.6; max-width: 30em; }
.projekt__opis > .link-strzalka { margin-top: 28px; }

.js .projekt .projekt__media { opacity: 0; transform: translateY(60px) scale(.95); }
.js .projekt .projekt__opis > * { opacity: 0; transform: translateY(26px); }
.js .projekt.widac .projekt__media { opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.js .projekt.widac .projekt__opis > * { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.projekt.widac .projekt__opis > :nth-child(2) { transition-delay: .06s; }
.projekt.widac .projekt__opis > :nth-child(3) { transition-delay: .12s; }
.projekt.widac .projekt__opis > :nth-child(4) { transition-delay: .18s; }
.projekt.widac .projekt__opis > :nth-child(5) { transition-delay: .24s; }
.projekt.widac .projekt__opis > :nth-child(6) { transition-delay: .3s; }
@media (max-width: 860px) {
  .projekt { grid-template-columns: 1fr; gap: 34px; }
  .projekt:nth-child(even) .projekt__media { order: 0; }
  .projekt__telefon { width: 24%; right: 3% !important; left: auto !important; bottom: -10%; }
  .okno__pasek { height: 20px; gap: 5px; padding: 0 9px; }
  .okno__pasek i { width: 7px; height: 7px; }
}

/* ---------- koncepty: taśma ---------- */
.strzalki { display: flex; gap: 10px; margin-top: 26px; }
.strzalka {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--linia-2);
  transition: background .3s, opacity .3s;
}
.strzalka:hover { background: var(--tekst); }
.strzalka:hover svg { stroke: #000; }
.strzalka:disabled { opacity: .3; cursor: default; background: none; }
.strzalka:disabled svg { stroke: var(--tekst); }
.strzalka svg { width: 20px; height: 20px; fill: none; stroke: var(--tekst); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tasma {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maks)) / 2));
  padding: 4px max(var(--gutter), calc((100vw - var(--maks)) / 2)) 30px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.tasma::-webkit-scrollbar { display: none; }
.koncept { flex: 0 0 clamp(290px, 40vw, 560px); scroll-snap-align: start; }
.koncept__foto { display: block; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--linia); background: var(--panel); }
.koncept__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 1s var(--ease); }
.koncept:hover .koncept__foto img { transform: scale(1.04); }
.koncept__opis { display: block; padding: 18px 2px 0; }
.koncept__opis b {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--szeroki); font-stretch: 125%;
  font-size: 19px; font-weight: 800; text-transform: uppercase;
}
.koncept__opis b::after {
  content: "koncept";
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--linia-2);
  font-family: var(--font); font-stretch: 100%;
  color: var(--szary);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.koncept__opis span { display: block; margin-top: 8px; color: var(--szary); font-size: 15px; max-width: 28em; }
@media (max-width: 700px) { .koncept { flex-basis: 82vw; } }

/* ---------- usługi: pas MONOCHROME ---------- */
.sekcja--uslugi { padding-top: clamp(110px, 14vw, 180px); }
.mono--uslugi { margin-bottom: clamp(80px, 10vw, 130px); }
.mono--uslugi .mono__slowo { font-size: 18vw; }   /* 6 liter — większe, żeby wypełniały szerokość jak WEBDESIGN */
/* .mono--chrom (tylko „USŁUGI” na stronie głównej): chromowany napis z OpenArt, wycięty z czarnego tła — bez animacji.
   Rozmiar z szerokości i wysokości pasa (cq), żeby nigdy nie wchodził na opis ani pasek na dole.
   Napis na środku pasa, opis zjeżdża na dół w lewo — nad „Zobacz zakres” (pasek na dole ma stałe ~94 px). */
.mono--chrom { container-type: size; }
.mono--chrom .mono__slowo { top: 44%; bottom: auto; translate: 0 -50%; line-height: 0; }
.mono--chrom .mono__tekst { top: auto; bottom: 120px; }
.mono__chrom { display: inline-block; width: min(84cqw, 84cqh); height: auto; }
.mono__podtytul {
  font-family: var(--szeroki);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--tekst);
  margin-bottom: 12px;
}
.mono--uslugi .mono__tekst p:not(.mono__podtytul) { color: var(--jasny); }
@media (max-width: 760px) {
  .mono--uslugi { display: block; height: 100svh; min-height: 640px; padding: 0; }
  .mono--uslugi .mono__foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 50%; }
  .mono--uslugi .mono__gora { position: absolute; top: 92px; padding: 0; left: var(--gutter); }
  .mono--uslugi .mono__tekst { position: absolute; top: 150px; bottom: auto; left: var(--gutter); right: var(--gutter); padding: 0; max-width: none; font-size: 15px; }
  .mono--uslugi .mono__slowo { position: absolute; top: auto; bottom: 110px; margin: 0; font-size: 17vw; }
  .mono--chrom .mono__slowo { top: calc(50% + 75px); bottom: auto; }   /* środek wolnego miejsca pod opisem */
  .mono__chrom { width: 92cqw; }
  .mono--uslugi .mono__dol { position: absolute; bottom: 24px; left: var(--gutter); right: var(--gutter); padding: 0; }
}

/* ---------- usługi ---------- */
/* chromowana ramka jak ikony: czarny lakier, srebrna wypukła krawędź, połysk i błysk w rogu */
.chrom-ramka {
  --chrom: conic-gradient(from 215deg, #ffffff, #7e7e7e 11%, #1e1e1e 23%, #ececec 36%, #4c4c4c 50%, #ffffff 62%, #262626 76%, #cfcfcf 89%, #ffffff);
  position: relative;
  border-radius: 30px;
  background:
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, .055) 30%, transparent 44%),   /* odbicie na lakierze */
    radial-gradient(120% 70% at 20% 0%, rgba(255, 255, 255, .07), transparent 55%),
    linear-gradient(165deg, #1a1a1c, #08080a 60%, #040405);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),                  /* jasna fazka u góry */
    inset 0 -1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 4px rgba(0, 0, 0, .55),                       /* ciemny rowek pod obręczą */
    inset 0 0 0 5px rgba(255, 255, 255, .07),
    0 40px 90px rgba(0, 0, 0, .65);
}
.chrom-ramka::before {                                      /* chromowana obręcz */
  content: "";
  position: absolute;
  inset: 0;
  padding: 2.5px;
  border-radius: inherit;
  background: var(--chrom);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.chrom-ramka::after {                                       /* błysk w rogu, jak na ikonach */
  content: "";
  position: absolute;
  top: -13px; right: 64px;
  width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0Q21.4 18.6 40 20Q21.4 21.4 20 40Q18.6 21.4 0 20Q18.6 18.6 20 0Z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255, 255, 255, .6));
  pointer-events: none;
}
.uslugi { display: grid; grid-template-columns: repeat(4, 1fr); }
.uslugi--3 { grid-template-columns: repeat(3, 1fr); }
.usluga { position: relative; padding: 44px 30px 42px; }
.usluga__opis { color: var(--szary); font-size: 15px; line-height: 1.55; }
/* chromowane linie między kolumnami (pionowe) i między rzędami (poziome) */
.usluga::before, .usluga::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
.usluga::before {
  left: 0; top: 28px; bottom: 28px; width: 1.5px;
  background: linear-gradient(to bottom, transparent, #ffffff 18%, #5a5a5a 45%, #e6e6e6 70%, transparent);
}
.usluga::after {
  top: 0; left: 28px; right: 28px; height: 1.5px;
  background: linear-gradient(to right, transparent, #ffffff 18%, #5a5a5a 45%, #e6e6e6 70%, transparent);
}
.usluga + .usluga::before { opacity: .55; }
.usluga__ikona {
  display: block;
  width: 108px; height: 108px;
  object-fit: contain;
  margin: -8px 0 14px -14px;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6));
  transition: transform .7s var(--ease);
}
.usluga:hover .usluga__ikona { transform: translateY(-4px) rotate(-4deg); }
.usluga__nr {
  display: block;
  font-size: 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--ciemny);
  margin-bottom: 10px;
}
.usluga h3 { font-family: var(--szeroki); font-stretch: 125%; font-size: 17px; font-weight: 800; text-transform: uppercase; line-height: 1.15; margin-bottom: 18px; }
.usluga li { padding: 12px 0; border-top: 1px solid var(--linia); color: var(--szary); font-size: 14px; line-height: 1.45; }
.usluga li b { display: block; color: var(--tekst); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
@media (max-width: 1000px) {
  .uslugi { grid-template-columns: 1fr 1fr; }
  .usluga:nth-child(3)::before { opacity: 0; }
  .usluga:nth-child(n+3)::after { opacity: .55; }
  /* przy 3 kartach trzecia nie zostaje sama z pustą połową obok */
  .uslugi--3 .usluga:nth-child(3) { grid-column: 1 / -1; }
  .uslugi--3 .usluga:nth-child(3) ul { columns: 2; column-gap: 30px; }
  .uslugi--3 .usluga:nth-child(3) li { break-inside: avoid; }
}
@media (max-width: 600px) {
  .uslugi, .uslugi--3 { grid-template-columns: 1fr; }
  .uslugi--3 .usluga:nth-child(3) ul { columns: auto; }
  .chrom-ramka { border-radius: 24px; }
  .chrom-ramka::after { right: 36px; }
  .usluga { padding: 34px 24px 32px; }
  .usluga + .usluga::before, .usluga:nth-child(3)::before { opacity: 0; }
  .usluga + .usluga::after { opacity: .55; }
}

/* ---------- podstrona rezerwacji ---------- */
.mono--rez { margin-bottom: 0; }
.mono--rez .mono__slowo { font-size: 10.2vw; }        /* 10 liter — mieści się w szerokości */
.link-strzalka--wstecz:hover svg { transform: translateX(-4px); }
.sekcja--jak { padding-top: clamp(100px, 12vw, 160px); }
.rez-cta { padding-bottom: clamp(110px, 14vw, 180px); }
@media (max-width: 760px) { .mono--rez .mono__slowo { font-size: 10.2vw; } }

/* ---------- rezerwacje ---------- */
.rez-zajawka {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: clamp(28px, 4vw, 48px);
  padding: 22px 34px 22px 22px;
}
.rez-zajawka__ikona { width: 84px; height: 84px; flex: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); transition: transform .7s var(--ease); }
.rez-zajawka:hover .rez-zajawka__ikona { transform: translateY(-3px) rotate(-5deg); }
.rez-zajawka__tekst { display: flex; flex-direction: column; gap: 6px; }
.rez-zajawka__tekst b { font-family: var(--szeroki); font-stretch: 125%; font-weight: 800; font-size: 17px; text-transform: uppercase; }
.rez-zajawka__tekst span { color: var(--szary); font-size: 15px; }
.rez-zajawka .link-strzalka { margin-left: auto; white-space: nowrap; }
@media (max-width: 760px) {
  .rez-zajawka { flex-wrap: wrap; gap: 16px 18px; padding: 22px; }
  .rez-zajawka__ikona { width: 64px; height: 64px; }
  .rez-zajawka__tekst { flex: 1 1 200px; }
  .rez-zajawka .link-strzalka { margin-left: 0; }
}
.rezerwacje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(100px, 12vw, 160px);
}
.punkty { margin: 28px 0 32px; display: grid; gap: 0; border-top: 1px solid var(--linia); }
.punkty li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linia); font-size: 15px; }
.punkty li::before { content: "—"; color: var(--ciemny); }
.rezerwacje__kal { padding: clamp(16px, 2vw, 26px); min-height: 420px; }
/* kalendarz (iframe) dorasta po wczytaniu do ok. 1070 px — miejsce zarezerwowane, żeby strona pod nim nie skakała */
#rezerwacje-widget { min-height: 1060px; }
.rezerwacje__nota { margin-top: 14px; text-align: center; font-size: 12px; color: var(--ciemny); }
@media (max-width: 900px) { .rezerwacje { grid-template-columns: 1fr; } }

/* ---------- chrom ---------- */
.chrom {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 1100px;
  margin-top: clamp(110px, 14vw, 180px);
  overflow: hidden;
  background: var(--bg);
}
.chrom__plotno {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  /* metal wyłania się z czerni i w nią znika — bez twardej krawędzi na granicy sekcji */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}
.chrom--gotowe .chrom__plotno { opacity: .6; }   /* metal przygaszony — w tle za dłońmi */

/* dłonie: dwie warstwy, --d = 1 (daleko) … 0 (prawie się stykają) */
.dlonie {
  --d: 1;
  position: absolute;
  left: 50%; top: 50%;
  z-index: 1;
  display: flex;
  width: min(112vw, 175vh);
  aspect-ratio: 2304 / 1296;
  transform: translate(-50%, -60%);
  pointer-events: none;
}
.dlon { height: 100%; width: auto; flex: none; will-change: transform; }
.dlon--lewa { transform: translateX(calc(var(--d) * -24vw)) rotate(calc(var(--d) * 4deg)); transform-origin: 0% 60%; }
.dlon--prawa { transform: translateX(calc(var(--d) * 24vw)) rotate(calc(var(--d) * -4deg)); transform-origin: 100% 20%; }
.dlonie__blysk {
  position: absolute;
  left: 49.2%; top: 44.5%;
  width: 22%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .3) 22%, rgba(190, 205, 255, .1) 50%, transparent 72%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  transition: opacity .5s var(--ease), transform 1s var(--ease);
}
.dlonie__blysk svg { width: 34%; height: 34%; filter: drop-shadow(0 0 8px #fff); transform: rotate(-30deg) scale(.4); transition: transform 1.2s var(--ease); }
.dlonie.dotyk .dlonie__blysk { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dlonie.dotyk .dlonie__blysk svg { transform: none; }
@media (max-width: 760px) { .dlonie { width: 150vw; transform: translate(-50%, -78%); } }
@media (prefers-reduced-motion: reduce) { .dlonie { --d: 0 !important; } }
.chrom::after {   /* przyciemnienie pod napisem */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11, 11, 11, .9), transparent 50%),
    radial-gradient(70% 60% at 0% 100%, rgba(11, 11, 11, .7), transparent);
  pointer-events: none;
}
.chrom__tresc { z-index: 2; }
.chrom--brak { height: auto; min-height: 0; padding: 80px 0; }
.chrom__tresc {
  position: absolute;
  left: var(--gutter); bottom: clamp(40px, 7vh, 80px);
  pointer-events: none;
}
.chrom__tresc a { pointer-events: auto; }
.chrom--brak .chrom__tresc { position: static; padding: 0 var(--gutter); }
.chrom__h2 {
  display: flex;
  flex-direction: column;
  margin: 14px 0 24px;
  font-family: var(--szeroki);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 112px);
  line-height: .88;
  text-transform: uppercase;
}
.chrom__h2 span:first-child { color: transparent; -webkit-text-stroke: 1.5px rgba(242, 242, 242, .8); }

/* ---------- proces: 6 kroków w chromowanej ramce, siatka 3×2 jak Usługi ---------- */
.uslugi--proces { grid-template-columns: repeat(3, 1fr); }
.uslugi--proces .usluga:nth-child(3n+1)::before { opacity: 0; }   /* bez pionowej linii na początku rzędu */
.uslugi--proces .usluga:nth-child(n+4)::after { opacity: .55; }   /* pozioma linia między rzędami */
@media (max-width: 1000px) {
  .uslugi--proces { grid-template-columns: 1fr 1fr; }
  .uslugi--proces .usluga:nth-child(3n+1)::before { opacity: .55; }
  .uslugi--proces .usluga:nth-child(2n+1)::before { opacity: 0; }
  .uslugi--proces .usluga:nth-child(n+3)::after { opacity: .55; }
}
@media (max-width: 600px) {
  .uslugi--proces { grid-template-columns: 1fr; }
  .uslugi--proces .usluga:nth-child(n)::before { opacity: 0; }
}

/* ---------- kontakt: siedzi na numerze ---------- */
.kontakt {
  position: relative;
  margin-top: clamp(110px, 14vw, 180px);
  padding-top: clamp(40px, 6vw, 80px);
  overflow: hidden;
}
.kontakt__tresc { position: relative; z-index: 3; }
.kontakt__h2 {
  font-size: clamp(40px, 7.4vw, 118px);
  line-height: .9;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.015em;
}
.kontakt__tresc .wstep { max-width: 30em; }
.kontakt__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* scena: --h = wysokość postaci; siedzisko leży na 80% wysokości zdjęcia */
.kontakt__scena {
  --h: min(96vw, calc(100svh - 70px));   /* jak największy, ale cała postać mieści się na ekranie */
  --siedzisko: .9vw;
  position: relative;
  display: block;
  margin-top: calc(var(--h) * .3);
  text-align: center;
}
.kontakt__numer {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-family: var(--szeroki);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 9.6vw;
  line-height: .74;
  letter-spacing: -.015em;
  white-space: nowrap;
  color: #ececec;
  padding-bottom: .06em;
  transition: color .4s var(--ease);
}
.kontakt__scena:hover .kontakt__numer { color: #fff; }
/* pasek tła pod cyframi: nogi znikają tuż pod numerem, zanim zacznie się stopka */
.kontakt__scena::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1vw;
  z-index: 1;
  background: var(--bg);
}
.kontakt__siedzi {
  position: absolute;
  z-index: 1;
  right: 2%;
  /* górna krawędź cyfr ≈ górna krawędź pudełka numeru; siedzisko = 0.804 wysokości zdjęcia */
  top: calc(var(--h) * -.804 + var(--siedzisko, 0px));
  height: var(--h);
  width: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6));
  transition: transform .8s var(--ease);
}
.kontakt__scena:hover .kontakt__siedzi { transform: translateY(-4px); }
@media (max-width: 760px) {
  .kontakt__h2 { font-size: 7.3vw; }   /* „POROZMAWIAJMY” mieści się w szerokości telefonu */
  .kontakt__scena { --h: 120vw; margin-top: calc(var(--h) * .7 + 40px); }   /* odstęp od przycisków — głowa ich nie dotyka */
  .kontakt__numer { font-size: 11.6vw; }
  .kontakt__siedzi { right: -24%; }
}

/* ---------- stopka ---------- */
.stopka { border-top: 1px solid var(--linia); padding: 34px 0 40px; font-size: 13px; color: var(--szary); }
.stopka__rzad { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.stopka .nav__logo { color: var(--tekst); }
.stopka__linki { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.stopka__linki a:hover { color: var(--tekst); }
.stopka__dol { margin-top: 26px; color: var(--ciemny); font-size: 12px; }

/* =========================================================
   PODSTRONA O MNIE (o-mnie.html)
   ========================================================= */
/* wstęp: tekst po lewej, czarno-biały profil po prawej, wygaszony w tło */
.omnie-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 150px;
  overflow: hidden;
}
.omnie-hero__foto {
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 100%;
  object-fit: cover;
  object-position: 35% 20%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40%), linear-gradient(to top, transparent 2%, #000 40%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 40%), linear-gradient(to top, transparent 2%, #000 40%);
  mask-composite: intersect;
}
.omnie-hero__tresc { position: relative; z-index: 2; }
.omnie-hero__h1 {
  font-family: var(--szeroki);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(56px, 9vw, 170px);
  line-height: .84;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: 22px;
}
.omnie-hero__lead { max-width: 24em; margin-top: 30px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--jasny); }
.omnie-hero__dol {
  position: absolute; z-index: 2;
  left: var(--gutter); right: var(--gutter); bottom: 42px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px;
}
.omnie-kim { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); }
.omnie-kim__tekst p { color: var(--szary); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; max-width: 36em; }
.omnie-kim__tekst p + p { margin-top: 20px; }
.omnie-kim__tekst p:first-child { color: var(--tekst); font-size: clamp(20px, 2vw, 28px); line-height: 1.4; }
.omnie-kim__tekst .link-strzalka { margin-top: 30px; }
.omnie-zasady .usluga h3 { margin-bottom: 14px; }
.omnie-cta { padding-bottom: clamp(110px, 14vw, 180px); }
@media (max-width: 760px) {
  .omnie-hero { justify-content: flex-end; padding: 0 0 130px; }
  .omnie-hero__foto {
    width: 100%; height: 70%;
    object-position: 40% 15%;
    -webkit-mask-image: linear-gradient(to top, transparent, #000 45%);
    mask-image: linear-gradient(to top, transparent, #000 45%);
  }
  .omnie-hero__dol { bottom: 28px; }
  .omnie-kim { grid-template-columns: 1fr; }
}

/* wstęp O mnie: w tle płynny metal (jak pas USŁUGI), z lewej przygaszony pod tekst */
.omnie-hero__tlo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .4), #000 55%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, .4), #000 55%);
}
@media (max-width: 760px) {
  .omnie-hero__tlo { -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .35), #000 55%); mask-image: linear-gradient(to top, rgba(0, 0, 0, .35), #000 55%); }
}
/* wstęp O mnie: wycięta postać (selfie w lustrze) stoi po prawej, dół rozpływa się w tło */
.omnie-hero__foto--wyciete {
  width: auto; height: 88%;
  top: auto; bottom: 0; right: 8%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 25%);
  mask-image: linear-gradient(to top, transparent, #000 25%);
}
@media (max-width: 760px) {
  .omnie-hero__foto--wyciete { width: auto; height: 58%; top: 70px; bottom: auto; right: 50%; translate: 50% 0; }
}

/* =========================================================
   PODSTRONA NAPISZ (napisz.html) — formularz przez formsubmit.co
   ========================================================= */
.napisz { padding: clamp(130px, 14vw, 190px) 0 clamp(100px, 12vw, 160px); }
.napisz [hidden] { display: none !important; }
.napisz__siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.napisz__inne { margin: 40px 0 36px; max-width: 26em; }
.napisz__inne li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--linia); font-size: 15px; }
.napisz__inne li:last-child { border-bottom: 1px solid var(--linia); }
.napisz__inne span { color: var(--szary); }
.napisz__inne a:hover { color: #fff; }
.napisz__form, .napisz__dzieki { padding: clamp(28px, 4vw, 48px); }
.napisz__form { display: grid; gap: 22px; }
.pole { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pole label, .pole legend { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--jasny); padding: 0; }
.pole legend { float: left; width: 100%; margin-bottom: 10px; }
.pole label i { font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--ciemny); }
.pole input, .pole textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--tekst);
  background: rgba(255, 255, 255, .035);
  border: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--linia-2);
  padding: 15px 16px;
  transition: box-shadow .25s, background .25s;
}
.pole textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.pole input::placeholder, .pole textarea::placeholder { color: var(--ciemny); }
.pole input:focus, .pole textarea:focus { outline: none; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); }
.chipy { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.pole .chip { position: relative; cursor: pointer; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linia-2); font-size: 14px; color: var(--jasny); transition: background .25s, color .25s, box-shadow .25s; }
.chip:hover span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.chip input:checked + span { background: var(--tekst); color: #000; box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.napisz__wyslij { justify-self: start; min-width: 220px; }
.napisz__wyslij:disabled { opacity: .6; cursor: progress; }
.napisz__status { font-size: 14px; line-height: 1.5; color: var(--jasny); }
.napisz__status:empty { display: none; }
.napisz__status a, .napisz__dzieki a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.napisz__nota { font-size: 12px; color: var(--ciemny); }
.napisz__miodek { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.napisz__dzieki { display: grid; gap: 16px; align-content: start; }
.napisz__dzieki h2 { font-family: var(--szeroki); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; text-transform: uppercase; }
.napisz__dzieki p { color: var(--szary); }
.napisz__dzieki .btn { justify-self: start; margin-top: 10px; }
@media (max-width: 900px) { .napisz__siatka { grid-template-columns: 1fr; } }

/* =========================================================
   CHROM — wspólny styl wszystkiego, co klikalne (jak ikony z docku)
   Obręcz: tło lakieru w padding-box + chrom w border-box (działa z zaokrągleniem).
   Główne przyciski: srebrne wypełnienie. Reszta: czarny lakier + chromowana obręcz.
   ========================================================= */
:root {
  --chrom: conic-gradient(from 215deg, #ffffff, #7e7e7e 11%, #1e1e1e 23%, #ececec 36%, #4c4c4c 50%, #ffffff 62%, #262626 76%, #cfcfcf 89%, #ffffff);
  --chrom-cichy: conic-gradient(from 215deg, #a6a6a6, #3c3c3c 12%, #161616 24%, #8e8e8e 37%, #2a2a2a 50%, #a6a6a6 62%, #1c1c1c 76%, #7c7c7c 89%, #a6a6a6);
  --lakier: linear-gradient(165deg, #1e1e20, #0b0b0d 60%, #050506);
  --lakier-jasny: linear-gradient(165deg, #2c2c2f, #121214 60%, #09090a);
  --srebro: linear-gradient(180deg, #fbfbfb 0%, #e4e4e4 36%, #b9b9b9 50%, #d3d3d3 62%, #f6f6f6 100%);
  --chrom-tekst: linear-gradient(180deg, #ffffff 0%, #dadada 34%, #7c7c7c 50%, #c6c6c6 58%, #ffffff 80%, #a5a5a5 100%);
}
.ikona-chrom { flex: none; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)); transition: transform .5s var(--ease); }

/* przyciski */
.btn {
  border: 1.5px solid transparent;
  color: #0b0b0b;
  background: var(--srebro) padding-box, var(--chrom) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -3px 8px rgba(0, 0, 0, .22), 0 12px 28px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.btn:hover { background: var(--srebro) padding-box, var(--chrom) border-box; filter: brightness(1.08); transform: translateY(-2px); }
.btn--obrys, .btn--obrys:hover {
  color: var(--tekst);
  text-shadow: none;
  background: var(--lakier) padding-box, var(--chrom) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 28px rgba(0, 0, 0, .5);
}
.btn--obrys:hover { background: var(--lakier-jasny) padding-box, var(--chrom) border-box; filter: none; }
.btn .ikona-chrom { width: 30px; height: 30px; margin: -8px 0 -8px -12px; }
.btn:hover .ikona-chrom, .link-strzalka:hover .ikona-chrom, .stopka__linki a:hover .ikona-chrom, .nav__ikona:hover .ikona-chrom { transform: rotate(-7deg) scale(1.06); }

/* linki ze strzałką → chromowane pigułki (w kafelku rezerwacji zostają zwykłym tekstem) */
.link-strzalka {
  padding: 10px 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  background: var(--lakier) padding-box, var(--chrom) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform .35s var(--ease);
}
.link-strzalka:hover { transform: translateY(-2px); background: var(--lakier-jasny) padding-box, var(--chrom) border-box; }
.link-strzalka .ikona-chrom { width: 28px; height: 28px; margin: -6px 0 -6px -8px; }
.mono__dol > .link-strzalka { justify-self: start; }   /* w siatce paska nie rozciąga się na całą kolumnę */
.rez-zajawka .link-strzalka { padding: 0; border: 0; background: none; box-shadow: none; font-size: 15px; }
.rez-zajawka .link-strzalka:hover { transform: none; }

/* okrągłe: DALEJ i strzałki konceptów — chromowany pierścień na lakierze */
.dalej__kolo, .strzalka {
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: radial-gradient(circle at 35% 28%, #2c2c2e, #09090a 72%) padding-box, var(--chrom) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px rgba(0, 0, 0, .5);
  transition: transform .35s var(--ease), opacity .3s;
}
.dalej:hover .dalej__kolo, .strzalka:not(:disabled):hover { transform: translateY(-2px); background: radial-gradient(circle at 35% 28%, #3a3a3d, #121214 72%) padding-box, var(--chrom) border-box; }
.dalej__pierscien circle { stroke: transparent; }
.dalej__pierscien .postep { stroke: #fff; stroke-width: 2; }      /* postęp przewijania — biały łuk na chromie */
.strzalka:hover svg { stroke: #fff; }
.strzalka:disabled { background: radial-gradient(circle at 35% 28%, #2c2c2e, #09090a 72%) padding-box, var(--chrom) border-box; }

/* miniatury: ikony na pulpicie, okno projektu, telefon, koncepty — chromowana ramka */
.ik img { border: 2px solid transparent; border-radius: 9px; background: var(--chrom) border-box; }
.ik span { border: 1px solid transparent; border-radius: 999px; padding: 3px 8px; background: var(--lakier) padding-box, var(--chrom-cichy) border-box; text-shadow: none; }
.ik:hover span, .ik:focus-visible span { background: var(--lakier-jasny) padding-box, var(--chrom) border-box; }
.okno { border: 2px solid transparent; background: linear-gradient(#1a1a1a 0 0) padding-box, var(--chrom) border-box; }
.telefon { border: 1.5px solid transparent; background: linear-gradient(#000 0 0) padding-box, var(--chrom) border-box; box-shadow: 0 30px 70px rgba(0, 0, 0, .65); }
.koncept__foto { border: 2px solid transparent; border-radius: 12px; background: linear-gradient(var(--panel) 0 0) padding-box, var(--chrom) border-box; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }

/* wielki numer telefonu — chromowane litery */
.kontakt__numer, .kontakt__scena:hover .kontakt__numer {
  color: transparent;
  background: var(--chrom-tekst);
  -webkit-background-clip: text;
  background-clip: text;
}
.kontakt__scena:hover .kontakt__numer { filter: brightness(1.12); }

/* stopka — małe chromowane pigułki z ikonami */
.stopka__linki { gap: 10px; }
.stopka__linki a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--jasny);
  background: var(--lakier) padding-box, var(--chrom-cichy) border-box;
  transition: color .3s, background .3s;
}
.stopka__linki a:hover { color: #fff; background: var(--lakier-jasny) padding-box, var(--chrom) border-box; }
.stopka__linki .ikona-chrom { width: 22px; height: 22px; }

/* menu u góry: na komputerze kapsuła z chromowaną obręczą, aktywny link srebrny */
@media (min-width: 901px) {
  .nav__menu {
    gap: 2px;
    padding: 4px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: linear-gradient(rgba(12, 12, 13, .96) 0 0) padding-box, var(--chrom) border-box;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .nav__menu a { padding: 7px 14px; border-radius: 999px; transition: color .25s, background .25s; }
  .nav__menu a:hover { background: rgba(255, 255, 255, .08); }
  .nav__menu a.aktywny, .nav__menu a[aria-current="page"] { color: #0b0b0b; background: var(--srebro); box-shadow: inset 0 1px 0 #fff; }
  .nav__menu a.aktywny::after { display: none; }
}
.nav__ikona { width: 40px; height: 40px; }
.nav__ikona:hover { background: none; }
.nav__ikona .ikona-chrom { width: 32px; height: 32px; }
@media (max-width: 900px) {
  .nav__kropki { border-radius: 50%; border: 1.5px solid transparent; background: var(--lakier) padding-box, var(--chrom) border-box; }
  .nav__menu a { color: transparent; background: var(--chrom-tekst); -webkit-background-clip: text; background-clip: text; }
  .nav__menu a.aktywny { color: transparent; opacity: .45; }
}

/* formularz: pola i chipy z cichym chromem, zaznaczony chip srebrny */
.pole input, .pole textarea {
  border: 1.5px solid transparent;
  background: linear-gradient(#0a0a0b 0 0) padding-box, var(--chrom-cichy) border-box;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5);
}
.pole input:focus, .pole textarea:focus { background: linear-gradient(#111113 0 0) padding-box, var(--chrom) border-box; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5); }
.chip span { border: 1px solid transparent; background: var(--lakier) padding-box, var(--chrom-cichy) border-box; box-shadow: none; }
.chip:hover span { box-shadow: none; background: var(--lakier-jasny) padding-box, var(--chrom) border-box; }
.chip input:checked + span { color: #0b0b0b; background: var(--srebro) padding-box, var(--chrom) border-box; box-shadow: inset 0 1px 0 #fff; }
.napisz__inne li > span { display: inline-flex; align-items: center; gap: 10px; }
.napisz__inne .ikona-chrom { width: 28px; height: 28px; }

@media (max-width: 760px) {
  .ik img { border-radius: 7px; }
  .ik span { padding: 2px 5px; }
}

/* telefon: przyciski kontaktu w równych rzędach, stopka jako rząd okrągłych ikon */
@media (max-width: 600px) {
  .kontakt__cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .kontakt .kontakt__cta { grid-template-columns: 1fr 1fr; }          /* Napisz e-mail na całą szerokość, IG i TikTok po połowie */
  .kontakt .kontakt__cta > .btn:first-child { grid-column: 1 / -1; }
  .kontakt__cta .btn { width: 100%; padding: 0 16px; }
  .stopka__rzad { flex-direction: column; align-items: flex-start; gap: 20px; }
  .stopka__linki { gap: 12px; }
  .stopka__linki a { width: 50px; height: 50px; padding: 0; gap: 0; justify-content: center; font-size: 0; }   /* sam znak; tekst zostaje dla czytników (gap 0 — inaczej ikona ucieka 4 px w lewo) */
  .stopka__linki .ikona-chrom { width: 26px; height: 26px; }
}

/* =========================================================
   WEJŚCIA PRZY PRZEWIJANIU
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(30px); }
.js .reveal.widac { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .js .reveal, .js .wejscie, .js .ik > *, .js .mono__litery .l, .js .projekt .projekt__media, .js .projekt .projekt__opis > * { opacity: 1 !important; transform: none !important; filter: none !important; scale: 1 !important; }
  .js .pulpit__tlo { opacity: 1; }
}

/* telefon: „WEBDESIGN” w hero mieści się z marginesem także na wąskich ekranach (Dawid, 28.10) */
@media (max-width: 760px) {
  .pulpit__h1 { font-size: 12vw; }
}

/* telefon: dopisek przy Konceptach, że pełny efekt jest na komputerze (Dawid, 28.10) */
.koncepty__komputer { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  .koncepty__komputer {
    display: block;
    margin-top: 18px;
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
  }
}