/* Plus Jakarta Sans (zmienna 400–800), hostowana lokalnie */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/jakarta-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/jakarta-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =========================================================
   Everywhere v2 — motyw WordPress (z makiety 2026-10-28)
   Język wizualny z grafik marki: czerń #171717, konturowe
   zaokrąglone kwadraty + plusy, okno przeglądarki, limonkowa gwiazdka.
   ========================================================= */

:root {
  --night: #171717;
  --night-2: #111111;
  --coal: #1F1F1F;
  --line: #333333;
  --lime: #CBFA3E;
  --lime-deep: #B8F844;
  --chalk: #F4F4F0;
  --paper: #EDEDE7;
  --smoke: #9C9C96;
  --stone: #5C5C57;
  --ink: #171717;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --r-tile: 22px;
  --nav-h: 88px;
  --focus: var(--lime);
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* faktura z grafik: pary zaokrąglonych kwadratów + plusy */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Crect x='28' y='36' width='118' height='118' rx='26'/%3E%3Crect x='82' y='92' width='118' height='118' rx='26'/%3E%3Crect x='262' y='14' width='112' height='112' rx='24'/%3E%3Crect x='252' y='252' width='132' height='132' rx='28'/%3E%3Crect x='300' y='212' width='96' height='96' rx='22'/%3E%3Crect x='56' y='292' width='104' height='104' rx='22'/%3E%3Cpath d='M222 190h18M231 181v18M400 168h18M409 159v18M14 246h18M23 237v18M196 408h18M205 399v18'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--chalk);
  font-family: var(--font);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- elementy wspólne ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.4em;
  border: 2px solid transparent; border-radius: 14px;
  font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, translate .25s var(--ease);
}
.btn--lg { min-height: 58px; padding: 0 1.7em; font-size: 1rem; }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--chalk); }
.btn--line { border-color: #4a4a4a; color: var(--chalk); }
.btn--line:hover { border-color: var(--lime); color: var(--lime); }
.btn--ink { background: var(--ink); color: var(--chalk); }
.btn--ink:hover { background: #000; color: var(--lime); }
.btn:active { translate: 0 1px; }

.h2 { font-size: clamp(2.3rem, 4.8vw, 4.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; max-width: 16ch; }
.lead { font-size: clamp(1.02rem, 1.2vw, 1.2rem); color: var(--smoke); max-width: 52ch; }

.link {
  display: inline-block; font-weight: 700; text-decoration: none;
  background: linear-gradient(var(--lime), var(--lime)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 3px; transition: background-size .3s var(--ease), color .2s;
}
.link:hover { color: var(--lime); }
.link--dark { background-image: linear-gradient(var(--ink), var(--ink)); }
.link--dark:hover { color: var(--ink); background-size: 100% 100%; color: var(--lime); }

.ticks { display: grid; gap: .55em; }
.ticks li { position: relative; padding-left: 1.7em; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: .95em; height: .95em; border-radius: 4px;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.4'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.star { fill: var(--lime); stroke: var(--night); stroke-width: 7; paint-order: stroke; overflow: visible; }

/* faktura tła + limonkowe światło pod kursorem */
.grid-bg { position: relative; isolation: isolate; }
.grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-color: #fff;
  -webkit-mask: var(--pattern) 0 0 / 440px 440px; mask: var(--pattern) 0 0 / 440px 440px;
  opacity: .075;
}
.grid-bg__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--lime);
  -webkit-mask-image: var(--pattern), radial-gradient(circle 240px at var(--mx, -999px) var(--my, -999px), #000 0%, transparent 100%);
  -webkit-mask-size: 440px 440px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image: var(--pattern), radial-gradient(circle 240px at var(--mx, -999px) var(--my, -999px), #000 0%, transparent 100%);
  mask-size: 440px 440px, 100% 100%;
  mask-composite: intersect;
  opacity: .9;
}

/* ---------- okno przeglądarki (z banera) ---------- */
.win {
  position: relative;
  border: 2px solid var(--chalk); border-radius: var(--r-tile);
  background: var(--night);
  overflow: hidden;
}
.win__bar {
  display: flex; align-items: center; gap: 16px;
  height: 52px; padding: 0 18px;
  border-bottom: 2px solid var(--chalk);
}
.win__dots { display: flex; gap: 9px; flex: none; }
.win__dots i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--chalk); }
.win__dots i:first-child { background: var(--lime); border-color: var(--lime); }
.win__url { font-size: .82rem; color: var(--smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__url b { color: var(--chalk); font-weight: 600; }
.win__screen { position: relative; overflow: hidden; }

/* =========================================================
   NAWIGACJA
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: var(--nav-h); padding: 0 var(--gutter);
  background: rgb(23 23 23 / .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-scrolled { border-color: #2a2a2a; }
.nav__logo { flex: none; border-radius: 12px; }
.nav__logo img { width: 66px; height: 66px; transition: rotate .4s var(--ease); }
.nav__logo:hover img { rotate: -6deg; }
.nav__menu { display: flex; gap: clamp(16px, 2.2vw, 34px); margin-left: auto; }
.nav__menu a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 0; background: linear-gradient(var(--lime), var(--lime)) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
.nav__menu a:hover { background-size: 100% 2px; }
.nav__menu-cta { display: none; }
.nav__toggle { display: none; }

@media (max-width: 960px) {
  .nav__cta { display: none; }
  .nav__toggle {
    display: grid; place-content: center; gap: 7px; margin-left: auto;
    width: 48px; height: 48px; border: 2px solid #444; border-radius: 14px; background: none; cursor: pointer;
  }
  .nav__toggle i { display: block; width: 20px; height: 2px; background: var(--chalk); transition: translate .3s, rotate .3s; }
  .nav__toggle[aria-expanded="true"] i:first-of-type { translate: 0 4.5px; rotate: 45deg; }
  .nav__toggle[aria-expanded="true"] i:last-of-type { translate: 0 -4.5px; rotate: -45deg; }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49;
    flex-direction: column; gap: 4px; margin: 0; padding: 24px var(--gutter);
    background: var(--night);
    visibility: hidden; opacity: 0; translate: 0 -12px;
    transition: opacity .3s, translate .3s var(--ease), visibility 0s .3s;
  }
  .nav__menu.is-open { visibility: visible; opacity: 1; translate: 0 0; transition: opacity .3s, translate .3s var(--ease); }
  .nav__menu a { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; padding: 6px 0; }
  .nav__menu-cta { display: block; margin-top: 20px; color: var(--lime); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero { overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(32px, 4vw, 64px);
  max-width: var(--max); margin: 0 auto;
  min-height: clamp(620px, calc(100svh - var(--nav-h)), 940px);
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(64px, 8vw, 110px);
}
.hero__title {
  font-size: clamp(2.8rem, 5.5vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: .98;
  margin-bottom: .32em;
}
.hero__row { display: block; white-space: nowrap; }
.hero__mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin-bottom: -.14em; }
.hero__word {
  display: inline-block; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--chalk);
  transition: color .45s var(--ease);
}
.hero__word:hover { color: #d8d8d2; }
.hero__word.is-on { color: var(--lime); }
.hero__word:focus-visible { border-radius: 14px; }
.hero__lead { font-size: clamp(1.25rem, 2.1vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.hero__sub { color: var(--smoke); max-width: 44ch; margin-top: 14px; }
.hero__bar { display: block; width: 48px; height: 5px; border-radius: 3px; background: var(--lime); margin: 30px 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* wizual: ściana realizacji na prawej połowie ekranu */
.hero__text { position: relative; z-index: 2; }
.hero__visual { position: absolute; top: 0; bottom: 0; right: 0; width: 56vw; z-index: 1; }
.hv-h {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.wall { position: absolute; inset: -30% -12% -30% 4%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; rotate: -9deg; }
.wall__track { display: grid; gap: 22px; padding-bottom: 22px; animation: wallUp 46s linear infinite; }
.wall__col--down .wall__track { animation-name: wallDown; animation-duration: 54s; }
@keyframes wallUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wallDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.wall__win { border-color: #3c3c3c; border-radius: 18px; transition: opacity .6s var(--ease), border-color .6s; }
.wall__win .win__bar { height: 38px; padding: 0 12px; gap: 10px; border-color: inherit; }
.wall__win .win__dots i { width: 10px; height: 10px; }
.wall__win .win__url { font-size: .72rem; }
.wall__win img { width: 100%; aspect-ratio: 1 / .82; object-fit: cover; }
.wall.has-k .wall__win:not(.is-hit) { opacity: .25; }
.wall__win.is-hit { border-color: var(--lime); }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 48px; }
  .hero__visual { position: relative; inset: auto; width: auto; height: 118vw; max-height: 640px; margin: 0 calc(-1 * var(--gutter)); }
  .hv-h { -webkit-mask-image: linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%); }
  .wall { inset: -20%; }
}
@media (max-width: 520px) {
  .hero__title { font-size: clamp(2.4rem, 12vw, 4rem); }
  .filters button { min-height: 42px; padding: 0 13px; font-size: .85rem; }
  .hero__actions .btn { width: 100%; }
  .win__bar { height: 44px; padding: 0 14px; gap: 12px; }
  .win__dots i { width: 11px; height: 11px; }
}
.is-static .wall__track { animation: none; }

/* =========================================================
   OFERTA — konfigurator „złóż swój projekt”
   ========================================================= */
.cfg { background: var(--chalk); color: var(--ink); --focus: var(--ink); padding: clamp(80px, 10vw, 140px) var(--gutter); }
.cfg .lead { color: var(--stone); }
.cfg__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; max-width: var(--max); margin: 0 auto; }
.cfg__side { display: grid; gap: 24px; justify-items: start; }
.cfg__opts { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.cfg__opt:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
.cfg__opt { position: relative; }
.cfg__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; margin: 0; }
.cfg__box {
  position: relative; display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; height: 100%;
  padding: 16px 40px 16px 16px; border-radius: 18px; border: 2px solid #D5D5CE; background: #fff;
  transition: background-color .3s, border-color .3s, color .3s, translate .3s var(--ease);
}
.cfg__box svg { grid-row: 1 / 3; width: 38px; height: 38px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; transition: stroke .3s, fill .3s; }
.cfg__box svg.is-star { fill: var(--ink); stroke: none; padding: 4px; }
.cfg__box b { font-size: 1rem; }
.cfg__box small { font-size: .82rem; color: var(--stone); line-height: 1.3; }
.cfg__box::after { content: ""; position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #C9C9C2; transition: background-color .3s, border-color .3s; }
.cfg__opt:hover .cfg__box { border-color: var(--ink); translate: 0 -2px; }
.cfg__opt input:checked + .cfg__box { background: var(--ink); border-color: var(--ink); color: var(--chalk); }
.cfg__opt input:checked + .cfg__box small { color: var(--smoke); }
.cfg__opt input:checked + .cfg__box svg { stroke: var(--lime); }
.cfg__opt input:checked + .cfg__box svg.is-star { fill: var(--lime); }
.cfg__opt input:checked + .cfg__box::after { border-color: var(--lime); background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.4'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 80% no-repeat; }
.cfg__opt input:focus-visible + .cfg__box { outline: 3px solid var(--ink); outline-offset: 3px; }
.cfg__sum { width: 100%; padding: 20px 22px; border-radius: 18px; border: 2px dashed #CFCFC8; }
.cfg__sumh { font-weight: 700; margin-bottom: 12px; }
.cfg__sum .ticks li { animation: tickIn .4s var(--ease) both; }
/* podsumowanie zakresu: zawsze wszystkie wiersze, więc sekcja nie zmienia wysokości */
.cfg__scope { display: grid; gap: 10px; }
.cfg__scope li {
  position: relative; display: grid; gap: 1px; padding-left: 32px; color: #A3A39C;
  transition: color .35s var(--ease);
}
.cfg__scope li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #CFCFC8;
  transition: background-color .3s, border-color .3s;
}
.cfg__scope b { font-size: .98rem; }
.cfg__scope span { font-size: .86rem; line-height: 1.4; }
.cfg:has([value="strona"]:checked) [data-scope="strona"],
.cfg:has([value="sklep"]:checked) [data-scope="sklep"],
.cfg:has([value="system"]:checked) [data-scope="system"] { color: var(--ink); }
.cfg:has([value="strona"]:checked) [data-scope="strona"] span,
.cfg:has([value="sklep"]:checked) [data-scope="sklep"] span,
.cfg:has([value="system"]:checked) [data-scope="system"] span { color: var(--stone); }
.cfg:has([value="strona"]:checked) [data-scope="strona"]::before,
.cfg:has([value="sklep"]:checked) [data-scope="sklep"]::before,
.cfg:has([value="system"]:checked) [data-scope="system"]::before {
  border-color: var(--ink); background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.4'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 80% no-repeat;
}
@keyframes tickIn { from { opacity: 0; translate: -8px 0; } }
@keyframes bump { 40% { scale: 1.35; } }

/* ---------- scena: okno strony klienta + okno panelu ---------- */
.cfg__stage {
  position: sticky; top: calc(var(--nav-h) + 28px); padding: 0 6% 13% 0;
  /* paleta przykładowej palarni „ziarno” */
  --m-bg: #F7F1E8; --m-ink: #3B2A20; --m-mute: #7A6758; --m-soft: #EFE4D3; --m-card: #FFFFFF; --m-line: #E8DBC8;
  --m-acc: #C9773C; --m-acc-ink: #FFFFFF; --m-star: #C9773C;
  --bag1: #3B2A20; --bag2: #C9773C; --bag3: #86A27A; --bag4: #A4703F; --label: #EFE6D8; --label-ink: #3B2A20; --sun: #E9D6BC;
}
.is-static .cfg, .is-static .cfg * { transition: none !important; animation: none !important; }
.cfg__screen, .cfg__screen * { transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s, fill .6s, stroke .6s; }

.cfg__win { border-color: var(--ink); background: var(--m-bg); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .45); }
.cfg__win .win__bar { background: var(--ink); border-color: var(--ink); }
.cfg__win .win__dots i { border-color: #777; }
.cfg__win .win__dots i:first-child { border-color: var(--lime); }
.m-lock { display: inline-block; width: 9px; height: 10px; margin-right: 7px; border: 1.5px solid currentColor; border-radius: 2px; vertical-align: -1px; }

.cfg__screen {
  position: relative; display: flex; flex-direction: column; height: clamp(480px, 41vw, 590px); overflow: hidden;
  background: var(--m-bg); color: var(--m-ink); font-size: clamp(10px, .9vw, 13px); line-height: 1.35;
}
.m-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.m-page { will-change: transform; }

/* nawigacja strony klienta */
.m-nav { position: relative; z-index: 4; flex: none; display: flex; align-items: center; gap: 2em; padding: 1.2em 1.7em; border-bottom: 1px solid var(--m-line); background: var(--m-bg); }
.m-logo { position: relative; display: flex; align-items: center; gap: .6em; }
.m-logo b { font-size: 1.4em; font-weight: 800; letter-spacing: -.05em; }
.m-mark { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .65em; background: #3B2A20; }
.m-mark svg { width: 70%; fill: none; stroke: #EFE6D8; stroke-width: 9; stroke-linecap: round; }
.m-links { display: flex; gap: 1.7em; margin-left: auto; font-size: .95em; font-weight: 600; color: var(--m-mute); }
.m-cart { position: relative; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .7em; background: var(--m-soft); opacity: 0; scale: .5; transition: opacity .4s, scale .5s var(--ease), background-color .6s; }
.cfg:has([value="sklep"]:checked) .m-cart { opacity: 1; scale: 1; }
.m-cart svg { width: 55%; fill: none; stroke: var(--m-ink); stroke-width: 1.8; stroke-linejoin: round; }
.m-cart em { position: absolute; top: -.45em; right: -.45em; display: grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; border-radius: .55em; background: var(--m-acc); color: var(--m-acc-ink); font-style: normal; font-size: .8em; font-weight: 800; }
.m-cart em.is-bump { animation: bump .45s var(--ease); }
.m-cart em:empty { display: none; }

/* moduły pojawiają się zależnie od wyboru */
.m-mod { position: relative; max-height: 0; opacity: 0; overflow: hidden; padding: 0 1.7em; transition: max-height .8s var(--ease), opacity .5s, padding .8s var(--ease), background-color .6s, color .6s; }
.cfg:has([value="strona"]:checked) .m-hero { max-height: 40em; opacity: 1; padding: 2.9em 1.7em 1.6em; }
.cfg:has([value="strona"]:checked) .m-feats { max-height: 16em; opacity: 1; padding: .2em 1.7em 1.6em; }
.cfg:has([value="sklep"]:checked) .m-shop { max-height: 44em; opacity: 1; padding: 3em 1.7em 1.8em; }

.m-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.6em; align-items: center; }
.m-copy small { display: inline-block; margin-bottom: 1em; padding: .4em .8em; border-radius: 99px; background: var(--m-soft); font-size: .8em; font-weight: 700; }
.m-copy strong { display: block; font-size: 2.45em; font-weight: 800; line-height: 1.02; letter-spacing: -.055em; }
.m-copy p { margin-top: .8em; color: var(--m-mute); }
.m-btns { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.3em; }
.m-btns em { font-style: normal; font-size: .9em; font-weight: 700; padding: .8em 1.25em; border-radius: .75em; }
.m-cta { background: var(--m-acc); color: var(--m-acc-ink); }
.m-ghost { border: 1.5px solid var(--m-line); }
.m-vis { position: relative; height: 17em; }
.m-sun { position: absolute; left: 52%; top: 48%; width: 12.5em; height: 12.5em; translate: -50% -50%; border-radius: 50%; background: var(--sun); }
.bag--hero1 { position: absolute; width: 8.4em; left: 8%; top: 1%; rotate: -8deg; }
.bag--hero2 { position: absolute; width: 7.8em; left: 48%; top: 18%; rotate: 9deg; }
.m-rate { position: absolute; left: 0; bottom: 4%; display: grid; gap: .1em; padding: .7em 1em; border-radius: .9em; background: #FFFFFF; box-shadow: 0 .8em 1.6em -.8em rgb(0 0 0 / .35); }
.m-rate b { font-size: 1.35em; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.m-stars { font-size: .72em; letter-spacing: .12em; color: var(--m-star); }
.m-rate small { font-size: .72em; color: var(--m-mute); }

/* Render opakowania; etykiety w HTML zachowują ostrość i kolory poszczególnych kaw. */
.bag {
  position: relative; aspect-ratio: .75;
  background: url('../img/demo/coffee-pouch.webp') center / contain no-repeat;
  filter: drop-shadow(.3em .6em .4em rgb(59 42 32 / .18));
}
.m-vis .bag { position: absolute; }
.bag i { position: absolute; left: 17%; right: 17%; top: 48%; bottom: 19%; display: grid; place-content: center; gap: .2em; padding-top: .2em; border-top: .45em solid var(--c); text-align: center; color: var(--label-ink); font-style: normal; }
.bag i b { font-size: 1.1em; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.bag i span { font-size: .58em; font-weight: 700; letter-spacing: .04em; }

.m-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.m-feats > div { display: grid; grid-template-columns: 2.5em 1fr; column-gap: .8em; align-items: center; padding: .85em; border-radius: 1em; background: var(--m-soft); }
.m-feats i { grid-row: 1 / 3; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .75em; background: var(--m-bg); }
.m-feats svg { width: 55%; fill: none; stroke: var(--m-ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.m-feats b { font-size: .9em; }
.m-feats span { font-size: .76em; color: var(--m-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m-shop { border-top: 1px solid var(--m-line); }
.m-shead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1em; }
.m-shead b { font-size: 1.35em; font-weight: 800; letter-spacing: -.04em; }
.m-shead span { font-size: .8em; font-weight: 600; color: var(--m-mute); text-decoration: underline; text-underline-offset: .25em; }
.m-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9em; }
.m-prod { display: grid; gap: .15em; padding: .85em; border-radius: 1em; background: var(--m-card); }
.m-prod .bag { width: 78%; margin: .2em auto .9em; }
.m-prod > b { font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-prod > span { font-size: .72em; color: var(--m-mute); }
.m-buy { display: flex; justify-content: space-between; align-items: center; margin-top: .5em; }
.m-buy strong { font-size: .95em; font-weight: 800; }
.m-buy em { display: grid; place-items: center; width: 2em; height: 2em; border-radius: .6em; background: var(--m-acc); color: var(--m-acc-ink); font-style: normal; font-weight: 800; transition: scale .2s var(--ease), background-color .6s; }
.m-buy em.is-press { scale: .78; }
.m-foot { display: flex; flex-wrap: wrap; gap: 1.6em; padding: 1.5em 1.7em; border-top: 1px solid var(--m-line); font-size: .8em; color: var(--m-mute); }
.m-foot b { color: var(--m-ink); }

.m-toast {
  position: absolute; right: 1.3em; top: 5.2em; z-index: 6; display: flex; align-items: center; gap: .8em;
  padding: .8em 1.1em .8em .8em; border-radius: 1em; background: #171717; color: #fff; box-shadow: 0 1.2em 2.4em -1.2em rgb(0 0 0 / .6);
  opacity: 0; translate: 0 -.8em; transition: opacity .3s, translate .45s var(--ease);
}
.m-toast.is-on { opacity: 1; translate: 0 0; }
.m-toast i { width: 2.1em; height: 2.1em; border-radius: .65em; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.2'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 60% no-repeat; }
.m-toast span { display: grid; font-size: .8em; color: #bbb; }
.m-toast b { font-size: 1.15em; color: #fff; }
.m-fly { position: absolute; left: 0; top: 0; z-index: 7; width: 1em; height: 1em; border-radius: 50%; background: var(--m-acc); box-shadow: 0 0 0 .25em rgb(255 255 255 / .8); pointer-events: none; }

/* etykiety: która opcja co dokłada */
.m-tag {
  position: absolute; top: .8em; left: 1.7em; z-index: 3; display: inline-flex; align-items: center; gap: .45em;
  padding: .32em .75em; border-radius: 99px; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 2px var(--ink);
  font-size: .72em; font-weight: 800; font-style: normal; white-space: nowrap;
}
.m-tag::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--ink); }
/* pusty stan: szkic strony + gotowe zestawy */
.cfg__winwrap { position: relative; }
.m-sketch {
  position: absolute; inset: 5.6em 1.7em 1.7em; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1.2fr .7fr 1fr; gap: 1em;
  opacity: 0; pointer-events: none; transition: opacity .5s;
}
.m-sketch i { position: relative; overflow: hidden; border: 2px dashed #CFCFC8; border-radius: 1em; }
.m-sketch i:nth-child(1) { grid-column: 1 / 3; }
.m-sketch i:nth-child(6) { grid-column: 1 / -1; display: none; }
.m-sketch i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(203 250 62 / .28) 50%, transparent 70%); translate: -100% 0; animation: sheen 2.8s var(--ease) infinite; }
.m-sketch i:nth-child(2)::after { animation-delay: .25s; } .m-sketch i:nth-child(3)::after { animation-delay: .5s; }
.m-sketch i:nth-child(4)::after { animation-delay: .75s; } .m-sketch i:nth-child(5)::after { animation-delay: 1s; }
@keyframes sheen { to { translate: 100% 0; } }
.cfg:not(:has([data-cfg]:checked)) .m-sketch { opacity: 1; }
.cfg:not(:has([data-cfg]:checked)) .m-foot { opacity: 0; }

.cfg__blank { position: absolute; inset: 52px 0 0; z-index: 6; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.cfg:not(:has([data-cfg]:checked)) .cfg__blank { opacity: 1; visibility: visible; transition: opacity .5s .15s; }
.cfg__blank-card {
  display: grid; justify-items: center; gap: 12px; max-width: 440px; padding: 30px 28px; text-align: center;
  border-radius: 24px; background: #fff; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .45), 0 0 0 2px var(--ink);
  translate: 0 14px; transition: translate .6s var(--ease);
}
.cfg:not(:has([data-cfg]:checked)) .cfg__blank-card { translate: 0 0; }
.cfg__blank-star { width: 46px; height: 46px; fill: var(--lime); stroke: var(--ink); stroke-width: 6; paint-order: stroke; animation: spin 14s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.cfg__blank-card b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
.cfg__blank-card p { color: var(--stone); font-size: .95rem; }
.cfg__presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.cfg__presets button {
  min-height: 42px; padding: 0 15px; border-radius: 12px; border: 2px solid #D5D5CE; background: #fff; color: var(--ink);
  font-weight: 700; font-size: .88rem; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, translate .2s var(--ease);
}
.cfg__presets button:hover { border-color: var(--ink); translate: 0 -2px; }
.cfg__presets button:last-child { background: var(--lime); border-color: var(--lime); }
.cfg__presets button:last-child:hover { border-color: var(--ink); }
@media (max-width: 560px) {
  .cfg__blank { inset: 36px 0 0; padding: 12px; }
  .cfg__blank-card { padding: 18px 14px; gap: 8px; }
  .cfg__blank-card b { font-size: 1.1rem; }
  .cfg__blank-card p { font-size: .82rem; }
  .cfg__blank-star { width: 32px; height: 32px; }
  .cfg__presets button { min-height: 36px; padding: 0 10px; font-size: .78rem; }
}

/* okno panelu firmy (System) */
.cfg__admin {
  position: absolute; right: -3%; bottom: 0; z-index: 5; width: 46%;
  background: #141414; border-color: var(--chalk); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .75);
  font-size: clamp(9.5px, .85vw, 12.5px); line-height: 1.35; color: var(--chalk);
  opacity: 0; translate: 0 2.5em; scale: .94; transform-origin: 80% 100%; pointer-events: none;
  transition: opacity .5s, translate .75s var(--ease), scale .75s var(--ease);
}
.cfg:has([value="system"]:checked) .cfg__admin { opacity: 1; translate: 0 0; scale: 1; }
.cfg__admin .win__bar { height: 2.9em; padding: 0 1.1em; gap: .8em; }
.cfg__admin .win__dots { gap: .5em; }
.cfg__admin .win__dots i { width: .85em; height: .85em; border-width: 1.5px; }
.cfg__admin .win__url { font-size: .85em; }
.cfg__admin .m-tag { top: .62em; right: .9em; left: auto; }
.a-body { display: grid; gap: .8em; padding: 1.1em; }
.a-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.a-kpis span { display: grid; padding: .7em .9em; border-radius: .8em; background: #222; }
.a-kpis small { font-size: .74em; color: var(--smoke); }
.a-kpis b { font-size: 1.55em; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.a-kpis b.is-bump { animation: bump .45s var(--ease); color: var(--lime); }
.a-chart { width: 100%; height: 4.6em; border-radius: .8em; background: #222; }
.a-area { fill: rgb(203 250 62 / .16); }
.a-line { fill: none; stroke: var(--lime); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.a-list { display: grid; gap: .4em; }
.a-row { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; align-items: center; gap: .6em; padding: .6em .8em; border-radius: .7em; background: #222; font-size: .86em; color: #ddd; }
.a-row b { color: var(--chalk); }
.a-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-row.is-new { animation: rowIn .6s var(--ease) both; box-shadow: inset 0 0 0 1.5px var(--lime); }
@keyframes rowIn { from { opacity: 0; translate: 0 -.7em; } }
.a-st { font-style: normal; font-weight: 700; font-size: .84em; padding: .25em .6em; border-radius: .45em; }
.a-st--new { background: var(--lime); color: var(--ink); }
.a-st--pack { background: #3A3A3A; color: var(--chalk); }
.a-st--sent { box-shadow: inset 0 0 0 1px #555; color: var(--smoke); }

@media (max-width: 960px) {
  .cfg__inner { grid-template-columns: 1fr; }
  .cfg__side { display: contents; }
  .cfg__side > .h2 { order: 1; } .cfg__side > .lead { order: 2; }
  .cfg__stage { order: 3; top: calc(var(--nav-h) + 8px); z-index: 2; padding: 0 4% 14% 0; }
  .cfg__opts { order: 4; } .cfg__sum { order: 5; } .cfg__side > .btn { order: 6; justify-self: start; }
  .cfg__screen { height: min(64vw, 440px); font-size: min(1.85vw, 12px); }
  .cfg__admin { width: 56%; font-size: min(1.7vw, 11px); }
}
@media (max-width: 560px) {
  .m-links { display: none; }
  .cfg__box { grid-template-columns: 1fr; padding: 14px; row-gap: 6px; }
  .cfg__box svg { grid-row: auto; width: 30px; height: 30px; }
  .cfg__box small { display: none; }
  .cfg__win .win__bar { height: 36px; }
}

/* ---------- konfigurator: dodatki (urządzenia, koszyk, podgląd, pokaz) ---------- */
.cfg { position: relative; }
.cfg__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cfg__share { padding: 6px 0; border: 0; background: none; color: var(--ink); font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.cfg__share:hover { text-decoration-thickness: 3px; }

.cfg__ctrl { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 14px; }
.cfg__ctrl button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 12px;
  border: 2px solid #D5D5CE; background: #fff; color: var(--ink); font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.cfg__ctrl button:hover { border-color: var(--ink); }
.cfg__ctrl button.is-on { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.cfg__ctrl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* tryb telefonu: okno zwęża się, strona w środku przechodzi na wersję mobilną */
.cfg__win { max-width: 100%; margin-inline: auto; transition: max-width .8s var(--ease), border-radius .8s var(--ease); }
.cfg__stage.is-phone .cfg__win { max-width: 340px; border-radius: 40px; border-width: 3px; }
.cfg__stage.is-phone .cfg__win .win__bar { justify-content: center; }
.cfg__stage.is-phone .cfg__win .win__dots { display: none; }
.cfg__stage.is-phone .cfg__screen { font-size: 11.5px; }
.cfg__stage.is-phone .cfg__admin { right: -1%; width: 42%; }
.cfg__screen { container: site / inline-size; }
@container site (max-width: 520px) {
  .m-links { display: none; }
  .m-nav { gap: 1em; padding: 1em 1.2em; }
  .m-hero { grid-template-columns: 1fr; gap: .2em; }
  .m-vis { height: 17em; }
  .m-copy strong { font-size: 2.15em; }
  .m-feats { grid-template-columns: 1fr; gap: .5em; }
  .m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-mod { padding-left: 1.2em !important; padding-right: 1.2em !important; }
  .m-mod .m-tag { left: 1.2em; }
  .m-cart { margin-left: auto; }
  .m-sun { width: 10.5em; height: 10.5em; }
  .bag--hero1 { width: 8.2em; left: 18%; top: 1%; }
  .bag--hero2 { width: 7.6em; left: 51%; top: 14%; }
  .m-foot { gap: .6em 1.2em; padding: 1.2em; }
  .m-drawer { width: 100%; }
}

/* klikalny podgląd */
.m-buy em, .m-cart, .m-cta, .m-pay, .m-dclose { cursor: pointer; }
.m-buy em:hover { scale: 1.12; }
.m-cart:hover { background: var(--m-line); }
.m-toast small { font-size: 1em; }

.m-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; width: min(48%, 27em);
  display: flex; flex-direction: column; gap: .9em; padding: 1.4em;
  background: var(--m-bg); border-left: 1px solid var(--m-line); box-shadow: -1.5em 0 3em -1.5em rgb(0 0 0 / .4);
  translate: 106% 0; transition: translate .6s var(--ease), background-color .6s;
}
.m-drawer.is-open { translate: 0 0; }
.m-dhead { display: flex; justify-content: space-between; align-items: center; }
.m-dhead b { font-size: 1.35em; font-weight: 800; letter-spacing: -.04em; }
.m-dclose { font-size: .8em; font-weight: 700; color: var(--m-mute); text-decoration: underline; text-underline-offset: .25em; }
.m-ditems { flex: 1; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: .5em; }
.m-ditem { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: .7em; padding: .5em .7em .5em .5em; border-radius: .8em; background: var(--m-card); font-size: .86em; animation: rowIn .45s var(--ease) both; }
.m-ditem i { position: relative; height: 2.7em; background: url('../img/demo/coffee-pouch.webp') center / contain no-repeat; }
.m-ditem i::after { content: ""; position: absolute; left: 17%; right: 17%; top: 48%; height: .15em; background: var(--c); }
.m-ditem b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-dempty { color: var(--m-mute); font-size: .9em; }
.m-dsum { display: flex; justify-content: space-between; align-items: baseline; padding-top: .9em; border-top: 1px solid var(--m-line); font-weight: 700; }
.m-dsum b { font-size: 1.4em; font-weight: 800; letter-spacing: -.03em; }
.m-pay { font-style: normal; text-align: center; font-weight: 800; padding: .95em; border-radius: .8em; background: var(--m-acc); color: var(--m-acc-ink); transition: filter .2s, background-color .6s; }
.m-pay:hover { filter: brightness(1.15); }

/* podgląd po najechaniu na niezaznaczoną opcję */
@media (hover: hover) {
  .cfg:has(.cfg__opt:hover [value="strona"]:not(:checked)) .m-hero { max-height: 40em; opacity: .5; padding: 2.9em 1.7em 1.6em; }
  .cfg:has(.cfg__opt:hover [value="strona"]:not(:checked)) .m-feats { max-height: 16em; opacity: .5; padding: .2em 1.7em 1.6em; }
  .cfg:has(.cfg__opt:hover [value="sklep"]:not(:checked)) .m-shop { max-height: 44em; opacity: .5; padding: 3em 1.7em 1.8em; }
  .cfg:has(.cfg__opt:hover [value="strona"]:not(:checked)) :is(.m-hero, .m-feats),
  .cfg:has(.cfg__opt:hover [value="sklep"]:not(:checked)) .m-shop { outline: 2px dashed var(--m-mute); outline-offset: -.6em; border-radius: 1.2em; }
  .cfg:has(.cfg__opt:hover [value="sklep"]:not(:checked)) .m-cart { opacity: .5; scale: 1; }
  .cfg:has(.cfg__opt:hover [value="system"]:not(:checked)) .cfg__admin { opacity: .6; translate: 0 0; scale: 1; outline: 2px dashed var(--ink); outline-offset: 5px; }
}

/* kursor pokazu (pierwsze wejście) */
.cfg__cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 34px; height: 34px; pointer-events: none; opacity: 0; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.cfg__cursor svg { width: 100%; height: 100%; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.cfg__cursor::after { content: ""; position: absolute; left: -9px; top: -11px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--lime); opacity: 0; }
.cfg__cursor.is-click::after { animation: ripple .55s ease-out; }
@keyframes ripple { from { opacity: 1; scale: .3; } to { opacity: 0; scale: 1.8; } }

@media (max-width: 960px) {
  .cfg__ctrl { display: none; }
  .cfg__actions { order: 6; }
}
/* =========================================================
   CRM — chaos → jeden system
   ========================================================= */
.crm { background: var(--night); padding: clamp(80px, 10vw, 140px) var(--gutter); overflow: hidden; }
.crm__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; max-width: var(--max); margin: 0 auto; }
.crm__text { display: grid; gap: 26px; justify-items: start; }
.crm__title { font-size: clamp(2.3rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.05em; font-weight: 800; }
.crm__title span { display: block; }
.crm__q { color: var(--lime); }

.crm__stage { position: relative; display: grid; gap: 18px; }
.chaos { position: relative; height: 230px; }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 10px; max-width: 54%;
  padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.3;
  background: #262626; border: 1.5px solid #3a3a3a; color: #ddd;
  box-shadow: 0 14px 30px -18px #000;
  animation: drift 6s ease-in-out infinite alternate;
}
.chip i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-style: normal; font-weight: 800; font-size: 13px; }
.chip--xls i { background: #1D6F42; color: #fff; }
.chip--mail i { background: #3E3E3E; color: var(--lime); }
.chip--wa { background: #144D3E; border-color: #1d6a55; color: #E9F6F1; border-bottom-left-radius: 4px; }
.chip--note { background: #F2E46A; border-color: #F2E46A; color: #2A2610; border-radius: 4px; font-weight: 700; }
.chip:nth-child(1) { left: 0; top: 2%; rotate: -5deg; }
.chip:nth-child(2) { left: 45%; top: 0; rotate: 3.5deg; animation-delay: -1.5s; }
.chip:nth-child(3) { left: 50%; top: 37%; rotate: -2.5deg; animation-delay: -3s; }
.chip:nth-child(4) { left: 3%; top: 41%; rotate: 6deg; animation-delay: -2s; }
.chip:nth-child(5) { left: 8%; top: 77%; rotate: -2deg; animation-delay: -4s; }
.chip:nth-child(6) { left: 49%; top: 75%; rotate: 2.5deg; animation-delay: -.5s; }
@keyframes drift { from { translate: 0 0; } to { translate: 6px -8px; } }
/* po animacji: chaos wraca jako uporządkowane zadania z CRM */
.order { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; pointer-events: none; }
.ord {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border-radius: 14px;
  background: #1d1d1d; border: 1.5px solid #333; opacity: 0; visibility: hidden;
  transition: border-color .4s, box-shadow .4s, background-color .4s;
}
.ord i { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.4'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 62% no-repeat; }
.ord span { min-width: 0; }
.ord b { display: block; font-size: 14px; color: var(--chalk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord small { display: block; font-size: 12px; color: var(--smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord.is-hot { border-color: var(--lime); background: #222; box-shadow: 0 0 0 4px rgb(203 250 62 / .1); }
@media (max-width: 560px) {
  .order { gap: 6px; }
  .ord { padding: 8px; gap: 8px; border-radius: 11px; align-items: flex-start; }
  .ord i { width: 20px; height: 20px; border-radius: 6px; }
  .ord b { font-size: 12px; white-space: normal; line-height: 1.2; } .ord small { font-size: 10.5px; white-space: normal; line-height: 1.25; margin-top: 2px; }
}

.flow { display: grid; gap: 0; }
.flow__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fcard {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px;
  border: 1.5px solid #4a4a4a; border-radius: 16px; background: #1b1b1b;
  transition: border-color .4s, box-shadow .4s;
}
.fcard svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--chalk); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke .4s; }
.fcard div { display: grid; gap: 7px; flex: 1; min-width: 0; }
.fcard b { font-size: 15px; }
.fcard div span { height: 5px; border-radius: 3px; background: #444; }
.fcard div span:last-child { width: 62%; }
.fcard.is-lit { border-color: var(--lime); box-shadow: 0 0 0 4px rgb(203 250 62 / .1); }
.fcard.is-lit svg { stroke: var(--lime); }

.flow__wires { position: relative; height: 64px; }
.flow__wires svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow__wires path { fill: none; stroke: #6a6a6a; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; }
.pkt { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 12px var(--lime); opacity: 0; left: 0; top: 0; }

.flow__crm {
  display: flex; align-items: center; gap: 22px; width: 76%; margin: 0 auto; padding: 22px 26px;
  border: 2.5px solid var(--lime); border-radius: 18px; background: #191919;
  box-shadow: 0 0 0 6px rgb(203 250 62 / .08), 0 30px 60px -30px rgb(203 250 62 / .35);
}
.flow__crm > svg { flex: none; width: 48px; height: 48px; fill: none; stroke: var(--lime); stroke-width: 1.6; }
.flow__crm > b { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.04em; }
.flow__rec { position: relative; flex: 1; display: grid; min-width: 0; }
.flow__rec > * { grid-area: 1 / 1; align-self: center; }
.flow__phs { display: grid; gap: 9px; opacity: 0; }
.flow__ph { height: 7px; border-radius: 4px; background: #555; }
.flow__ph--s { width: 60%; }
.flow__real { display: grid; line-height: 1.3; }
.flow__real b { font-size: 15px; }
.flow__real em { font-style: normal; font-size: 13px; color: var(--lime); }
.flow__claim { text-align: center; font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.3rem); margin-top: 22px; letter-spacing: -.02em; }

@media (max-width: 960px) {
  .crm__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .chaos { height: 310px; }
  .chip { font-size: 12px; padding: 8px 10px; max-width: 64%; gap: 8px; }
  .chip i { width: 22px; height: 22px; }
  .chip:nth-child(1) { left: 0; top: 0; }
  .chip:nth-child(2) { left: 32%; top: 16%; }
  .chip:nth-child(3) { left: 34%; top: 50%; }
  .chip:nth-child(4) { left: 2%; top: 35%; }
  .chip:nth-child(5) { left: 0; top: 69%; }
  .chip:nth-child(6) { left: 34%; top: 85%; }
  .flow__cards { gap: 8px; }
  .fcard { flex-direction: column; gap: 8px; padding: 10px; }
  .fcard svg { width: 26px; height: 26px; }
  .fcard b { font-size: 13px; }
  .flow__crm { width: 100%; gap: 14px; padding: 16px; }
  .flow__crm > svg { width: 36px; height: 36px; }
}

/* =========================================================
   CASE STUDY (jasna sekcja)
   ========================================================= */
.cs { background: var(--chalk); color: var(--ink); --focus: var(--ink); padding: clamp(80px, 10vw, 140px) var(--gutter); }
.cs .lead { color: var(--stone); margin-top: 16px; }
.cs__head, .cs__list, .cs__more { max-width: var(--max); margin-left: auto; margin-right: auto; }
.cs__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button {
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 2px solid #CFCFC8; background: transparent; color: var(--ink);
  font-weight: 700; font-size: .92rem; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.filters button:hover { border-color: var(--ink); }
.filters button.is-on { background: var(--ink); border-color: var(--ink); color: var(--lime); }

.cs__list { display: grid; gap: clamp(56px, 7vw, 110px); }
.case { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.case.is-hidden, .mini.is-hidden { display: none; }
.case--flip .case__media { order: 2; }
.case--flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.case__media { position: relative; padding-bottom: 8%; perspective: 1400px; }
.case__win { border-color: var(--ink); background: var(--ink); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .55); }
.case__win .win__bar { border-color: var(--ink); height: 44px; padding: 0 16px; gap: 12px; }
.case__win .win__dots i { width: 11px; height: 11px; border-color: #777; }
.case__win .win__dots i:first-child { border-color: var(--lime); }
.case__win .win__screen { aspect-ratio: 16 / 10; background: #ddd; }
.case__win img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: scale 1s var(--ease); }
.case__media:hover .case__win--main img { scale: 1.04; }
.case__win--main { will-change: transform; }
.case__win--sub { position: absolute; right: -4%; bottom: 0; width: 46%; rotate: 3deg; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.case__win--sub .win__bar { height: 30px; padding: 0 10px; gap: 8px; }
.case__win--sub .win__dots i { width: 8px; height: 8px; }
.case__win--sub .win__url { font-size: .7rem; }
.case--flip .case__win--sub { right: auto; left: -4%; rotate: -3deg; }

.case__body { display: grid; gap: 16px; align-content: center; }
.case__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.case__tags span { padding: 5px 11px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1.5px #D5D5CE; font-size: .8rem; font-weight: 700; }
.case__tags span:first-child { background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--ink); }
.case__body h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.case__lead { color: var(--stone); font-size: 1.05rem; }
.case__steps { display: grid; border-top: 1.5px solid #DADAD3; }
.case__steps div { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1.5px solid #DADAD3; }
.case__steps dt { font-weight: 800; font-size: .9rem; }
.case__steps dt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--ink); vertical-align: 1px; }
.case__steps div:last-child dt::before { background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); }
.case__steps dd { color: var(--stone); font-size: .95rem; }
.case__facts { display: flex; flex-wrap: wrap; gap: 10px; }
.case__facts li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--chalk); }
.case__facts b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--lime); line-height: 1; }
.case__facts span { font-size: .82rem; color: #ccc; max-width: 20ch; line-height: 1.3; }

.cs__more { margin-top: clamp(64px, 8vw, 120px); padding-top: 32px; border-top: 1.5px solid #DADAD3; }
.cs__mh { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; }
.more { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mini { display: grid; gap: 10px; text-decoration: none; border-radius: 18px; }
.mini img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; border-radius: 16px; border: 2px solid var(--ink); transition: translate .35s var(--ease), box-shadow .35s; }
.mini:hover img { translate: 0 -4px; box-shadow: 0 20px 34px -20px rgb(0 0 0 / .5); }
.mini b { display: block; font-size: 1rem; }
.mini small { color: var(--stone); font-size: .84rem; }

@media (max-width: 960px) {
  .case, .case--flip { grid-template-columns: 1fr; }
  .case--flip .case__media { order: 0; }
  .more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .case__steps div { grid-template-columns: 1fr; gap: 4px; }
  .more { grid-template-columns: 1fr 1fr; }
  .case__win--sub { width: 52%; }
}

/* =========================================================
   O NAS
   ========================================================= */
.about { padding: clamp(90px, 11vw, 160px) var(--gutter); overflow: hidden; }
.about__inner { max-width: var(--max); margin: 0 auto; }
.about__title { font-size: clamp(2.6rem, 6.6vw, 6.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; margin-bottom: clamp(40px, 6vw, 80px); }
.about__title > span:first-child { display: block; }
.pill { display: inline-block; vertical-align: top; background: var(--lime); color: var(--ink); border-radius: .32em; padding: 0 .28em; overflow: hidden; }
.pill__mask { position: relative; display: block; height: 1.14em; line-height: 1.14; overflow: hidden; white-space: nowrap; }
.pill__w { display: block; }
.pill__w:not(.is-on) { position: absolute; left: 0; top: 100%; }
.about__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.about__copy { display: grid; gap: 24px; }
.about__claim { font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; max-width: 22ch; }
.about__copy > p:not(.about__claim) { color: var(--smoke); max-width: 58ch; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; padding-top: 28px; border-top: 1px solid #333; }
.facts dt { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--lime); }
.facts dd { color: var(--smoke); font-size: .92rem; margin-top: 8px; }
.about__toy { position: relative; display: grid; place-items: center; min-height: 360px; }
.toy { width: min(300px, 70vw); cursor: grab; touch-action: none; user-select: none; border-radius: 14%; will-change: transform; filter: drop-shadow(0 40px 50px rgb(0 0 0 / .55)); }
.toy:active { cursor: grabbing; }
.toy img { width: 100%; pointer-events: none; }
.about__hint { position: absolute; bottom: 0; font-size: .85rem; color: var(--smoke); }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__toy { min-height: 300px; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; gap: 16px; }
  .facts div { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 12px; }
  .facts dd { margin: 0; }
  .about__title { font-size: clamp(2.2rem, 11vw, 3.4rem); }
}

/* =========================================================
   FILM — pod telefonem od 2009
   ========================================================= */
.film { background: var(--night); padding: 12px; }
.film__frame {
  position: relative; display: grid; align-items: end; min-height: clamp(560px, 86vh, 820px); overflow: hidden;
  border-radius: clamp(24px, 3vw, 44px); background: #0d0d0d; isolation: isolate; will-change: clip-path;
}
.film__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.film__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 10 10 / .88) 0%, rgb(10 10 10 / .55) 42%, rgb(10 10 10 / 0) 70%), linear-gradient(0deg, rgb(10 10 10 / .7), transparent 45%); }
.film__content { display: grid; gap: 22px; justify-items: start; max-width: 620px; padding: clamp(28px, 5vw, 72px); }
.film__since { padding: 7px 14px; border-radius: 99px; background: var(--lime); color: var(--ink); font-weight: 800; font-size: .9rem; }
.film__title { font-size: clamp(3rem, 7vw, 6.6rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.film__title span { display: block; color: var(--lime); }
.film__content > p { color: #D7D7D1; max-width: 46ch; font-size: clamp(1rem, 1.2vw, 1.15rem); }
.film__stats { display: flex; flex-wrap: wrap; gap: 10px; }
.film__stats span { display: grid; padding: 12px 16px; border-radius: 16px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .82rem; color: #ccc; }
.film__stats b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--chalk); }

/* karta połączenia przychodzącego */
.call {
  position: absolute; right: clamp(20px, 4vw, 64px); bottom: clamp(20px, 4vw, 64px); width: min(340px, calc(100% - 40px));
  display: grid; gap: 16px; padding: 18px; border-radius: 26px;
  background: rgb(23 23 23 / .72); border: 1px solid rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -30px #000;
}
.call__top { display: flex; align-items: center; gap: 12px; }
.call__top img { width: 50px; height: 50px; border-radius: 14px; animation: ring 2.4s ease-in-out infinite; }
@keyframes ring { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: -8deg; } 78% { rotate: 8deg; } 82% { rotate: -6deg; } 86% { rotate: 4deg; } }
.call__top b { display: block; font-size: 1.1rem; }
.call__top small { color: var(--smoke); font-size: .85rem; }
.call__wave { display: flex; align-items: center; gap: 4px; height: 28px; }
.call__wave i { flex: 1; height: 30%; border-radius: 3px; background: var(--lime); opacity: .8; animation: wave 1.1s ease-in-out infinite; }
.call__wave i:nth-child(2) { animation-delay: -.15s; } .call__wave i:nth-child(3) { animation-delay: -.3s; } .call__wave i:nth-child(4) { animation-delay: -.45s; }
.call__wave i:nth-child(5) { animation-delay: -.6s; } .call__wave i:nth-child(6) { animation-delay: -.75s; } .call__wave i:nth-child(7) { animation-delay: -.9s; }
@keyframes wave { 50% { height: 100%; } }
.call__btns { display: flex; gap: 8px; }
.call__btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 16px; text-decoration: none; font-weight: 800; transition: filter .2s, translate .2s var(--ease); }
.call__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.call__btn:hover { translate: 0 -2px; filter: brightness(1.08); }
.call__btn--mail { width: 52px; flex: none; background: rgb(255 255 255 / .12); color: var(--chalk); }
.call__btn--go { flex: 1; background: var(--lime); color: var(--ink); }
.call__btn--go:focus-visible { outline-color: var(--chalk); }

.film__toggle { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .25); background: rgb(23 23 23 / .5); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.film__toggle i { width: 12px; height: 14px; border-left: 4px solid var(--chalk); border-right: 4px solid var(--chalk); }
.film__toggle[aria-pressed="true"] i { width: 0; height: 0; border: 0; border-left: 13px solid var(--chalk); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }

@media (max-width: 860px) {
  .film__frame { align-items: start; min-height: 0; }
  .film__video { position: relative; height: 62vw; z-index: 0; }
  .film__shade { display: none; }
  .film__frame { display: flex; flex-direction: column; background: #151515; }
  .film__content { padding: 26px 22px 6px; }
  .call { position: relative; right: auto; bottom: auto; width: auto; margin: 18px 22px 22px; }
  .call__btn--go { font-size: .92rem; gap: 8px; padding: 0 10px; }
  .film__toggle { top: 12px; right: 12px; }
}
.is-static .call__top img, .is-static .call__wave i { animation: none; }

/* =========================================================
   PROCES — pętla współpracy (jasna)
   ========================================================= */
.pj { padding: clamp(80px, 10vw, 140px) var(--gutter); overflow: hidden; --night: var(--chalk); --focus: var(--ink); background: var(--chalk); color: var(--ink); }
.pj::before { background-color: var(--ink); opacity: .07; }
.pj .grid-bg__glow { background: var(--ink); opacity: .28; }
.pj .lead { color: var(--stone); }
.pj__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: var(--max); margin: 0 auto; }
.pj__text { display: grid; gap: 22px; }
.pj__detail {
  display: grid; gap: 12px; align-content: start; min-height: 250px; margin-top: 14px; padding: 28px 30px;
  border-radius: 26px; background: #fff; border: 1px solid #E4E4DD; box-shadow: 0 30px 60px -36px rgb(0 0 0 / .3);
}
.pj__count { font-size: .95rem; font-weight: 700; color: var(--stone); }
.pj__count b { color: var(--ink); background: var(--lime); padding: 1px 7px; border-radius: 7px; font-size: 1.15rem; }
.pj__detail h3 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.pj__detail p { color: var(--stone); max-width: 42ch; }
.pj__detail em { justify-self: start; margin-top: 4px; padding: 7px 13px; border-radius: 10px; background: var(--ink); color: var(--lime); font-style: normal; font-weight: 700; font-size: .86rem; }

.pj__ring { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin-left: auto; }
.pj__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pj__track { fill: none; stroke: #D9D9D2; stroke-width: 2; }
.pj__ticks { fill: none; stroke: #CFCFC8; stroke-width: 8; stroke-dasharray: 1.6 14.4; }
.pj__arc { fill: none; stroke: url(#pjArcL); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: .999; transform: rotate(-90deg); transform-origin: 260px 260px; }
.pj__head { fill: var(--lime); stroke: var(--ink); stroke-width: 3; filter: drop-shadow(0 0 8px rgb(203 250 62 / .9)); }
.pj__core { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; }
/* środek koła: logo Everywhere z plakietką aktywnego etapu */
.pc__logo { width: 88%; height: auto; border-radius: 16%; filter: drop-shadow(0 30px 34px rgb(0 0 0 / .28)); animation: floaty 4.5s ease-in-out infinite; }
@keyframes floaty { 50% { translate: 0 -8px; rotate: -3deg; } }
.pc__pill {
  position: absolute; left: 50%; bottom: -6%; translate: -50% 0; padding: .45em 1em; border-radius: 99px;
  background: var(--ink); color: var(--lime); font-weight: 700; font-size: clamp(.8rem, 1.1vw, .95rem); white-space: nowrap; box-shadow: 0 10px 20px -10px rgb(0 0 0 / .5);
}
.is-static .pc__logo { animation: none; }

.pj__node { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.pj__node:nth-of-type(1) { top: 11.54%; }
.pj__node:nth-of-type(2) { left: 88.46%; }
.pj__node:nth-of-type(3) { top: 88.46%; }
.pj__node:nth-of-type(4) { left: 11.54%; }
.pj__ico {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 21px; background: #fff; border: 1.5px solid #D5D5CE;
  box-shadow: 0 0 0 10px var(--chalk), 0 14px 26px -16px rgb(0 0 0 / .35); transition: background-color .5s, border-color .5s, scale .5s var(--ease), box-shadow .5s;
}
.pj__ico svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pj__node b { position: absolute; white-space: nowrap; font-size: .98rem; font-weight: 700; color: var(--stone); transition: color .4s; }
.pj__node:nth-of-type(1) b { bottom: calc(100% + 12px); left: 50%; translate: -50% 0; }
.pj__node:nth-of-type(3) b { top: calc(100% + 12px); left: 50%; translate: -50% 0; }
.pj__node:nth-of-type(2) b { left: calc(100% + 16px); top: 50%; translate: 0 -50%; }
.pj__node:nth-of-type(4) b { right: calc(100% + 16px); top: 50%; translate: 0 -50%; }
.pj__node:hover .pj__ico, .pj__node.is-past .pj__ico { border-color: var(--ink); }
.pj__node.is-on .pj__ico { background: var(--lime); border: 2px solid var(--ink); scale: 1.14; box-shadow: 0 0 0 10px var(--chalk), 0 20px 40px -14px rgb(0 0 0 / .35); }
.pj__node.is-on b { color: var(--ink); }

@media (max-width: 960px) {
  .pj__inner { grid-template-columns: 1fr; }
  .pj__ring { margin: 0 auto; width: min(100%, 460px); }
  .pj__detail { min-height: 0; }
}
@media (max-width: 560px) {
  .pj__ico { width: 52px; height: 52px; border-radius: 16px; box-shadow: 0 0 0 7px var(--chalk), 0 10px 20px -12px rgb(0 0 0 / .35); }
  .pj__ico svg { width: 24px; height: 24px; }
  .pj__node b { font-size: .8rem; }
  .pj__node:nth-of-type(2) b, .pj__node:nth-of-type(4) b { top: calc(100% + 8px); left: 50%; right: auto; translate: -50% 0; }
  .pj__detail { padding: 22px; }
}

/* =========================================================
   KONTAKT
   ========================================================= */
.contact { padding: clamp(80px, 10vw, 140px) var(--gutter); }
.contact__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 90px); max-width: var(--max); margin: 0 auto; align-items: start; }
.contact__side { display: grid; gap: 26px; position: sticky; top: calc(var(--nav-h) + 40px); }
.contact__title { font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: -.05em; font-weight: 800; max-width: 11ch; }

/* kto odpowie */
.who { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 20px; background: rgb(255 255 255 / .04); border: 1px solid #2E2E2E; }
.who img { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.who b { display: block; font-size: 1.02rem; }
.who__status { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: .88rem; color: var(--smoke); }
.who__status i { width: 9px; height: 9px; border-radius: 50%; background: #777; flex: none; }
.who__status.is-open i { background: var(--lime); box-shadow: 0 0 0 4px rgb(203 250 62 / .18); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgb(203 250 62 / 0); } }

/* szybki kontakt */
.quick { display: grid; gap: 10px; }
.quick li { position: relative; }
.quick__card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #1E1E1E; border: 1px solid #2E2E2E; text-decoration: none; transition: border-color .25s, background-color .25s, translate .25s var(--ease); }
.quick__card:hover { border-color: var(--lime); background: #222; translate: 4px 0; }
.quick__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--lime); flex: none; }
.quick__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick__card small { display: block; font-size: .8rem; color: var(--smoke); }
.quick__card b { display: block; font-size: clamp(1rem, 1.3vw, 1.18rem); letter-spacing: -.02em; }
.quick__copy { position: absolute; right: 14px; top: 50%; translate: 0 -50%; padding: 7px 11px; border-radius: 10px; border: 1px solid #444; background: #262626; color: var(--chalk); font-size: .78rem; font-weight: 700; cursor: pointer; transition: border-color .2s, color .2s; }
.quick__copy:hover { border-color: var(--lime); color: var(--lime); }
.quick__copy.is-done { border-color: var(--lime); background: var(--lime); color: var(--ink); }

/* co dalej */
.next { padding-top: 6px; }
.next__h { display: block; margin-bottom: 10px; font-size: .95rem; }
.next ol { display: grid; gap: 8px; }
.next li { display: flex; align-items: center; gap: 12px; color: var(--smoke); font-size: .95rem; }
.next li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid #444; color: var(--chalk); font-size: .8rem; font-weight: 800; flex: none; }

/* ---------- karta formularza ---------- */
.form { --focus: var(--ink); position: relative; display: grid; gap: 18px; padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -40px #000; }
.form__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.form__top b { display: block; font-size: 1.25rem; letter-spacing: -.03em; }
.form__top small { color: var(--stone); font-size: .86rem; }
.form__pct { font-weight: 800; font-size: .9rem; padding: 4px 10px; border-radius: 9px; background: #F1F1EC; transition: background-color .3s; }
.form__pct.is-full { background: var(--lime); }
.form__progress { height: 6px; border-radius: 3px; background: #EDEDE7; overflow: hidden; margin-top: -6px; }
.form__progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ink), #3a3a3a); transition: width .5s var(--ease), background .3s; }
.form__progress.is-full i { background: var(--lime); }
.form__body { display: grid; gap: 16px; }
.form legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.form fieldset { border: 0; padding: 0; margin: 0; }

/* czego potrzebujesz — kafelki */
.need { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.need legend { grid-column: 1 / -1; }
.need label { position: relative; }
.need input, .when input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.need span {
  display: grid; justify-items: start; gap: 8px; height: 100%; padding: 12px; border-radius: 14px; border: 2px solid #E0E0DA; background: #F7F7F4;
  font-weight: 700; font-size: .88rem; line-height: 1.2; transition: background-color .2s, border-color .2s, color .2s, translate .2s var(--ease);
}
.need svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; transition: stroke .2s, fill .2s; }
.need svg[viewBox="0 0 100 100"] { fill: var(--ink); stroke: none; }
.need label:hover span { border-color: var(--ink); translate: 0 -2px; }
.need input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--chalk); }
.need input:checked + span svg { stroke: var(--lime); }
.need input:checked + span svg[viewBox="0 0 100 100"] { fill: var(--lime); }
.need input:focus-visible + span, .when input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }

/* pola */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ff { position: relative; display: block; }
.ff input, .ff textarea {
  width: 100%; padding: 26px 44px 10px 16px; border-radius: 14px; border: 2px solid #E0E0DA; background: #F7F7F4;
  font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .2s, background-color .2s;
}
.ff textarea { resize: none; min-height: 128px; padding-right: 16px; display: block; }
.ff input:focus, .ff textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.ff span { position: absolute; left: 18px; top: 18px; color: #6b6b66; pointer-events: none; transition: top .2s var(--ease), font-size .2s var(--ease); }
.ff input:focus + span, .ff input:not(:placeholder-shown) + span,
.ff textarea:focus + span, .ff textarea:not(:placeholder-shown) + span { top: 7px; font-size: .75rem; font-weight: 600; }
.ff__ok { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; border-radius: 7px; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.4'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 75% no-repeat; scale: 0; transition: scale .35s var(--ease); }
.ff.is-ok .ff__ok { scale: 1; }
.ff.is-ok input { border-color: #CFE88A; }
.ff.is-error input { border-color: #C2341B; background: #FFF6F4; }

/* budżet */
.budget { display: grid; gap: 8px; padding: 14px 16px 12px; border-radius: 16px; background: #F7F7F4; border: 2px solid #E0E0DA; }
.budget__top { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; font-weight: 700; }
.budget__top output { font-weight: 800; padding: 2px 9px; border-radius: 8px; background: var(--ink); color: var(--lime); }
.budget input[type="range"] { --p: 16%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 8px 0 2px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--p), #DCDCD5 var(--p)); cursor: pointer; }
.budget input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 9px; background: var(--lime); border: 2.5px solid var(--ink); box-shadow: 0 6px 12px -6px rgb(0 0 0 / .5); transition: scale .2s; }
.budget input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 9px; background: var(--lime); border: 2.5px solid var(--ink); }
.budget input[type="range"]:active::-webkit-slider-thumb { scale: 1.15; }
.budget input[type="range"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.budget__scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--stone); }
.budget__hint { font-size: .84rem; color: var(--stone); min-height: 1.3em; }
.budget__hint b { color: var(--ink); }

/* kiedy start */
.when { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.when legend { grid-column: 1 / -1; }
.when label { position: relative; }
.when span { display: grid; place-items: center; height: 100%; min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 2px solid #E0E0DA; font-size: .84rem; font-weight: 700; text-align: center; line-height: 1.2; transition: background-color .2s, border-color .2s, color .2s; }
.when label:hover span { border-color: var(--ink); }
.when input:checked + span { background: var(--lime); border-color: var(--ink); }

/* opis */
.msg { display: grid; gap: 8px; }
.msg__tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.msg__hints { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.msg__hints small { font-size: .8rem; color: var(--stone); }
.msg__hints button { padding: 5px 10px; border-radius: 99px; border: 1.5px solid #D5D5CE; background: #fff; color: var(--ink); font-size: .78rem; font-weight: 700; cursor: pointer; transition: border-color .2s, background-color .2s; }
.msg__hints button:hover { border-color: var(--ink); background: #F7F7F4; }
.msg__count { font-size: .78rem; color: var(--stone); }

/* podsumowanie + wysyłka */
.form__sum { min-height: 3.1em; padding: 10px 14px; border-radius: 12px; background: #F4F4F0; border-left: 4px solid var(--lime); font-size: .9rem; color: var(--stone); }
.form__sum b { color: var(--ink); }
.form__consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--stone); }
.form__consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.form__consent.is-error span { color: #C2341B; }
.form__submit {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px; border: 0; border-radius: 16px;
  background: var(--ink); color: var(--chalk); font-weight: 800; font-size: 1.05rem; cursor: pointer; overflow: hidden; transition: background-color .25s, color .25s;
}
.form__submit:hover { background: #000; color: var(--lime); }
.form__submit i { width: 22px; height: 22px; border-radius: 7px; background: var(--lime); transition: translate .3s var(--ease); }
.form__submit:hover i { translate: 4px 0; }
.form__submit.is-sending { pointer-events: none; color: var(--smoke); }
.form__submit.is-sending i { animation: spin 1s linear infinite; border-radius: 50%; background: conic-gradient(var(--lime) 0 70%, transparent 0); }
@keyframes spin { to { rotate: 360deg; } }

/* po wysłaniu */
.form__done { display: grid; justify-items: center; align-content: center; gap: 12px; padding: 30px 10px; text-align: center; }
.form__done[hidden] { display: none; }
.form__check { width: 84px; height: 84px; border-radius: 26px; border: 3px solid var(--ink); background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 60% no-repeat; rotate: -6deg; }
.form__done b { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.04em; }
.form__done p { color: var(--stone); max-width: 38ch; }
.form__done small { color: var(--stone); font-size: .8rem; }
.form__again { margin-top: 6px; padding: 10px 16px; border-radius: 12px; border: 2px solid var(--ink); background: none; font-weight: 700; cursor: pointer; }
.form__again:hover { background: var(--ink); color: var(--lime); }

@media (max-width: 960px) {
  .contact__inner { grid-template-columns: 1fr; }
  .contact__side { position: static; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .need { grid-template-columns: 1fr 1fr; }
  .when { grid-template-columns: 1fr 1fr; }
  .quick__copy { display: none; }
}

/* =========================================================
   STOPKA
   ========================================================= */
.foot { background: var(--night-2); padding: clamp(56px, 7vw, 90px) var(--gutter) 28px; border-top: 1px solid #262626; }
.foot__top, .foot__bottom { max-width: var(--max); margin: 0 auto; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-bottom: 48px; }
.foot__logo { border-radius: 16px; }
.foot__logo img { width: 112px; transition: rotate .5s var(--ease); }
.foot__logo:hover img { rotate: 8deg; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(150px, auto)); gap: clamp(28px, 5vw, 80px); }
.foot__h { font-size: .85rem; color: var(--smoke); font-weight: 600; margin-bottom: 10px; }
.foot address { font-style: normal; }
.foot__cols a { text-decoration: none; line-height: 1.9; }
.foot__cols a:hover { color: var(--lime); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid #262626; font-size: .88rem; color: var(--smoke); }
.foot__clock { display: inline-flex; align-items: center; gap: 8px; }
.foot__clock b { color: var(--chalk); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgb(203 250 62 / .15); }
.foot__up { color: var(--chalk); text-decoration: none; font-weight: 700; }
.foot__up:hover { color: var(--lime); }

@media (max-width: 700px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Tryb statyczny (zrzuty) i ograniczony ruch
   ========================================================= */
@media (min-width: 961px) { .is-static .hero__inner { min-height: 860px; } }
.is-static .chip { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- CRM: przyciski ---------- */
.crm__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.crm__how { display: inline-flex; align-items: center; gap: 10px; padding: 8px 4px; border: 0; background: none; color: var(--chalk); font-weight: 700; cursor: pointer; }
.crm__how i { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #555; transition: border-color .2s, background-color .2s; }
.crm__how i::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 10px solid var(--lime); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.crm__how:hover i { border-color: var(--lime); background: rgb(203 250 62 / .1); }
/* O nas: liczby */
.facts dt { display: flex; align-items: baseline; }

/* =========================================================
   PODSTRONY (WordPress) — te same tokeny i elementy co strona główna
   ========================================================= */
.nav__menu a[aria-current="page"] { background-size: 100% 2px; }
.phead__title, .cta__title, .svc__title, .gcase__title, .nf .h2 { text-wrap: balance; }

/* okruszki */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .86rem; color: var(--smoke); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: #555; }
.crumbs a { text-decoration: none; color: var(--chalk); }
.crumbs a:hover { color: var(--lime); }
.crumbs--bar { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 0; }
.crumbs--bar + .contact { padding-top: clamp(40px, 5vw, 72px); }

/* nagłówek podstrony */
.phead { overflow: hidden; }
.phead__inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(64px, 8vw, 120px);
}
.phead--aside .phead__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.phead__text { display: grid; gap: 22px; align-content: center; }
.phead__title { font-size: clamp(2.6rem, 6vw, 5.8rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; max-width: 15ch; margin-top: clamp(16px, 3vw, 40px); }
.phead--aside .phead__title { font-size: clamp(2.4rem, 4.8vw, 4.8rem); }
.phead__title::after { content: ""; display: block; width: 48px; height: 5px; margin-top: .45em; border-radius: 3px; background: var(--lime); }
.phead__lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--smoke); max-width: 56ch; }
.phead__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.phead__aside { perspective: 1600px; }
.phead__win { rotate: y -8deg; box-shadow: 0 50px 90px -50px #000; transition: rotate .8s var(--ease); }
.phead__win:hover { rotate: y 0deg; }
.phead__win img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
@media (max-width: 960px) {
  .phead--aside .phead__inner { grid-template-columns: minmax(0, 1fr); }
  .phead__win { rotate: none; }
}
@media (max-width: 520px) { .phead__actions .btn { width: 100%; } }

/* oferta: nagłówek — tekst i okno z realizacjami, pod spodem wybór ścieżki (kolumny jak wyżej) */
.ofh__inner { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 100px); }
.ofh__top, .ofh__pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
.ofh .phead__title { font-size: clamp(2.4rem, 4.6vw, 4.6rem); max-width: 13ch; }
.ofh__stage { position: relative; aspect-ratio: 16 / 10.9; perspective: 1600px; }
.ofh__set { position: absolute; inset: 0; opacity: 0; visibility: hidden; translate: 30px 0; transition: opacity .6s var(--ease), translate .8s var(--ease), visibility 0s .6s; }
.ofh__set.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.ofh__win { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); box-shadow: 0 50px 90px -50px #000; rotate: y -7deg; transition: rotate .8s var(--ease); }
.ofh__stage:hover .ofh__win { rotate: y 0deg; }
.ofh__win .win__screen { min-height: 0; }
/* kolejne realizacje w oknie przenikają się */
[data-ofh-rot] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transition: opacity .9s var(--ease); }
[data-ofh-rot] img.is-on { opacity: 1; }
.ofh__case {
  position: absolute; left: clamp(-28px, -2vw, -12px); bottom: clamp(18px, 3vw, 40px); display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 18px;
  padding: 14px 18px; border-radius: 16px; background: var(--chalk); color: var(--ink); text-decoration: none; box-shadow: 0 24px 40px -20px rgb(0 0 0 / .6);
}
.ofh__case small { grid-column: 1; color: var(--stone); font-size: .78rem; }
.ofh__case b { grid-column: 1; font-size: 1.1rem; letter-spacing: -.02em; }
.ofh__case svg { grid-column: 2; grid-row: 1 / 3; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; transition: translate .3s var(--ease); }
.ofh__case:hover svg { translate: 4px 0; }
.ofh__pick {
  row-gap: 24px; margin-top: clamp(40px, 5vw, 72px); padding: clamp(20px, 2.4vw, 32px);
  border: 2px solid var(--line); border-radius: var(--r-tile); background: rgb(31 31 31 / .92);
}
.ofh__choose { display: grid; gap: 14px; }
.ofh__q { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 800; letter-spacing: -.03em; }
.ofh__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ofh__opt {
  display: grid; justify-items: start; gap: 10px; padding: 14px 14px 16px; border: 2px solid var(--line); border-radius: 16px;
  background: var(--night); color: var(--chalk); font: inherit; font-weight: 700; font-size: .95rem; text-align: left; cursor: pointer;
  transition: border-color .3s, background-color .3s, color .3s, translate .3s var(--ease);
}
.ofh__opt svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ofh__opt:hover { border-color: #666; translate: 0 -2px; }
.ofh__opt[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.ofh__opt:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.ofh__panel { display: grid; gap: 18px; }
.ofh__panel[hidden] { display: none; }
.ofh__panel .ticks { color: #d8d8d2; }
@media (max-width: 960px) {
  .ofh__top, .ofh__pick { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .ofh__win { rotate: none; }
}
@media (max-width: 520px) {
  .ofh__opts { grid-template-columns: minmax(0, 1fr); }
  .ofh__opt { grid-template-columns: auto 1fr; align-items: center; }
  .ofh__case { left: 12px; }
}

/* oferta: lista usług */
.svc { padding: 0 var(--gutter) clamp(80px, 10vw, 140px); }
.svc__inner { max-width: var(--max); margin: 0 auto; border-top: 1px solid #333; }
.svc__row {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, .9fr) 56px; gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(28px, 3.5vw, 48px) 0; border-bottom: 1px solid #333; transition: background-color .3s;
}
.svc__ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--lime); }
.svc__ico svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.svc__ico svg.is-star { fill: var(--ink); stroke: none; width: 30px; }
.svc__main { display: grid; gap: 10px; }
.svc__main p { color: var(--smoke); max-width: 52ch; }
.svc__title { font-size: clamp(1.8rem, 3.2vw, 3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.svc__title a { text-decoration: none; }
.svc__title a::after { content: ""; position: absolute; inset: 0; }
.svc__row:hover .svc__title a { color: var(--lime); }
.svc__list { font-size: .95rem; color: #d8d8d2; }
.svc__go { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #444; transition: border-color .3s, background-color .3s, translate .3s var(--ease); }
.svc__go svg { width: 22px; height: 22px; fill: none; stroke: var(--chalk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc__row:hover .svc__go { border-color: var(--lime); background: var(--lime); translate: 6px 0; }
.svc__row:hover .svc__go svg { stroke: var(--ink); }
@media (max-width: 960px) {
  .svc__row { grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
  .svc__ico { width: 56px; height: 56px; border-radius: 16px; }
  .svc__list { grid-column: 2; }
  .svc__go { display: none; }
}

/* usługa: co dostajesz (jasna) */
.gets { background: var(--chalk); color: var(--ink); --focus: var(--ink); padding: clamp(80px, 10vw, 140px) var(--gutter); }
.gets__inner { max-width: var(--max); margin: 0 auto; }
.gets .h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.gets__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.gets__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.gets__points div { padding: 22px 0; border-top: 1.5px solid #DADAD3; }
.gets__points dt { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.gets__points dt::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); vertical-align: 1px; }
.gets__points dd { margin-top: 8px; color: var(--stone); }
.gets__scope { position: sticky; top: calc(var(--nav-h) + 24px); padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: var(--ink); color: var(--chalk); }
.gets__scope h3 { font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 16px; }
.gets__scope .ticks { font-size: .95rem; }
@media (max-width: 960px) {
  .gets__grid { grid-template-columns: minmax(0, 1fr); }
  .gets__scope { position: static; }
}
@media (max-width: 600px) { .gets__points { grid-template-columns: minmax(0, 1fr); } }

/* treść z edytora */
.prose-sec { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.prose-sec--light { background: var(--chalk); color: var(--ink); --focus: var(--ink); }
.prose { max-width: 72ch; margin: 0 auto; color: #d8d8d2; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { color: var(--chalk); letter-spacing: -.035em; line-height: 1.15; margin-top: 1.8em; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.prose h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { color: var(--lime); text-underline-offset: 3px; }
.prose ul { display: grid; gap: .5em; }
.prose ul li { position: relative; padding-left: 1.4em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.prose ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: .5em; }
.prose strong { color: var(--chalk); }
.prose img { border-radius: 18px; }
.prose--light { color: #3d3d39; }
.prose--light h2, .prose--light h3, .prose--light h4, .prose--light strong { color: var(--ink); }
.prose--light a { color: var(--ink); text-decoration-color: var(--lime); text-decoration-thickness: 3px; }
.prose--light ul li::before { box-shadow: 0 0 0 1.5px var(--ink); }
.postlist { display: grid; gap: 28px; }
.postlist li::before { display: none; }

/* pytania */
.faq { padding: clamp(80px, 10vw, 140px) var(--gutter); }
.faq__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); max-width: var(--max); margin: 0 auto; align-items: start; }
.faq__list { border-top: 1px solid #333; }
.faq__item { border-bottom: 1px solid #333; }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 700; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--lime); }
.faq__item summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 11px; border: 1.5px solid #555; transition: background-color .25s, border-color .25s, rotate .3s var(--ease); }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; translate: -50% -50%; background: var(--chalk); }
.faq__item summary i::after { rotate: 90deg; }
.faq__item[open] summary i { rotate: 45deg; background: var(--lime); border-color: var(--lime); }
.faq__item[open] summary i::before, .faq__item[open] summary i::after { background: var(--ink); }
.faq__a { padding: 0 60px 26px 0; color: var(--smoke); }
@media (max-width: 900px) { .faq__inner { grid-template-columns: minmax(0, 1fr); } .faq__a { padding-right: 0; } }

/* limonkowy pas z zaproszeniem */
.cta { padding: clamp(24px, 3vw, 40px) var(--gutter); }
.cta__inner {
  position: relative; overflow: hidden; max-width: var(--max); margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); border-radius: 32px; background: var(--lime); color: var(--ink); --focus: var(--ink);
}
.cta__star { position: absolute; right: -6%; top: -30%; width: clamp(220px, 34vw, 460px); fill: var(--ink); opacity: .08; rotate: 12deg; }
.cta__title { position: relative; font-size: clamp(2.4rem, 5.4vw, 5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; max-width: 14ch; }
.cta__row { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-top: clamp(24px, 3vw, 40px); padding-top: 24px; border-top: 2px solid var(--ink); }
.cta__row p { max-width: 52ch; font-size: 1.05rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__tel { border-color: var(--ink); color: var(--ink); }
.cta__tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cta__tel:hover { background: var(--ink); color: var(--lime); }
@media (max-width: 520px) { .cta__actions, .cta__actions .btn { width: 100%; } }

/* case study: wspólne dodatki */
.cs__all { margin-top: 36px; }
.cs--compact { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
.cs__more--flat { margin-top: 0; padding-top: 0; border-top: 0; }
.more--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini:focus-visible { outline-offset: 6px; }
.filters button small { margin-left: 4px; font-size: .78rem; opacity: .6; }
.cs__count { font-weight: 700; color: var(--stone); }
.cs__count b { color: var(--ink); font-size: 1.3rem; }
@media (max-width: 960px) { .more--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* lista realizacji: okna z projektami */
.cs--archive { padding-top: clamp(48px, 6vw, 80px); }
.cs--archive .cs__head { align-items: center; margin-bottom: 36px; }
.grid-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px) clamp(16px, 2vw, 28px); max-width: var(--max); margin: 0 auto; }
.gcase.is-hidden { display: none; }
.gcase__link { display: grid; gap: 16px; text-decoration: none; border-radius: var(--r-tile); }
.gcase__win { border-color: var(--ink); background: var(--ink); transition: translate .4s var(--ease), box-shadow .4s; }
.gcase__win .win__bar { border-color: var(--ink); height: 40px; padding: 0 14px; gap: 10px; }
.gcase__win .win__dots i { width: 10px; height: 10px; border-color: #777; }
.gcase__win .win__dots i:first-child { border-color: var(--lime); }
.gcase__win img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; transition: scale .8s var(--ease); }
.gcase__link:hover .gcase__win { translate: 0 -6px; box-shadow: 0 34px 50px -30px rgb(0 0 0 / .55); }
.gcase__link:hover img { scale: 1.04; }
.gcase__body { display: grid; gap: 8px; }
.gcase__title { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.gcase__link:hover .gcase__title { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; text-underline-offset: 4px; }
.gcase__lead { color: var(--stone); font-size: .95rem; }
@media (max-width: 1100px) { .grid-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-cases { grid-template-columns: minmax(0, 1fr); } }

/* pojedyncze case study: trzy kroki jako karty, opis + „W skrócie”, galeria na pełną szerokość */
.cstudy { background: var(--chalk); color: var(--ink); --focus: var(--ink); padding: clamp(72px, 9vw, 130px) var(--gutter); }
.cstudy__inner { display: grid; gap: clamp(28px, 3.5vw, 48px); max-width: var(--max); margin: 0 auto; }
.cstudy__h { font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.cstudy__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.cstudy__step { display: grid; align-content: start; gap: 14px; padding: clamp(22px, 2.4vw, 34px); border-radius: var(--r-tile); background: #fff; box-shadow: inset 0 0 0 2px #E2E2DB; }
.cstudy__step--fx { background: var(--ink); color: var(--chalk); box-shadow: none; }
.cstudy__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--paper); font-size: .85rem; font-weight: 800; }
.cstudy__step--fx .cstudy__n { background: var(--lime); color: var(--ink); }
.cstudy__step h3 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin-top: 6px; }
.cstudy__step p { color: var(--stone); font-size: 1.02rem; line-height: 1.55; }
.cstudy__step--fx p { color: #cfcfc8; }
.cstudy__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(32px, 5vw, 88px); align-items: start; margin-top: clamp(12px, 2vw, 28px); }
.prose--case { max-width: 70ch; margin: 0; font-size: 1.05rem; }
.prose--case h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
/* listy funkcji jako kafelki */
.prose--case ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prose--case ul li { padding: 14px 16px 14px 46px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #E2E2DB; line-height: 1.45; font-size: .97rem; }
.prose--case ul li::before { left: 16px; top: 15px; width: 18px; height: 18px; border-radius: 6px; box-shadow: none; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.4'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 75% no-repeat; }
.brief { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 18px; padding: 26px; border-radius: var(--r-tile); background: #fff; box-shadow: inset 0 0 0 2px #E2E2DB; }
.brief__h { font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; }
.brief__dl { display: grid; }
.brief__dl div { display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 12px 0; border-top: 1.5px solid #ECECE6; }
.brief__dl dt { color: var(--stone); font-size: .88rem; }
.brief__dl dd { font-weight: 700; font-size: .95rem; }
.brief__dl a { color: var(--ink); text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.brief__facts { display: grid; gap: 8px; }
.brief__facts li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--chalk); }
.brief__facts b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--lime); line-height: 1; }
.brief__facts span { font-size: .82rem; color: #ccc; line-height: 1.3; }
.brief__cta { width: 100%; justify-content: center; }
.cstudy__body--summary { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.cstudy__body--summary .brief { position: static; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
.cstudy__body--summary .brief__h { grid-column: 1 / -1; }
.cstudy__body--summary .brief__dl { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.cstudy__body--summary .brief__dl div { display: block; border: 0; padding: 0; }
.cstudy__body--summary .brief__dl dt { margin-bottom: 4px; }
.cstudy__body--summary .brief__cta { width: auto; }
.show { display: grid; gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 5vw, 72px); }
.show__item { display: block; border-radius: var(--r-tile); cursor: zoom-in; }
.show__figure { display: grid; gap: 18px; }
.show__caption { display: grid; gap: 6px; max-width: 76ch; }
.show__caption b { font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -.025em; line-height: 1.25; }
.show__caption p { color: var(--stone); line-height: 1.6; }
.phead__shot, .show__item { position: relative; }
.phead__shot { display: block; cursor: zoom-in; }
.shot__hint { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #555; border-radius: 10px; background: rgb(23 23 23 / .94); color: var(--chalk); font-size: .78rem; font-weight: 700; line-height: 1.4; pointer-events: none; }
.shot__hint::before { content: "+"; color: var(--lime); font-size: 1.2rem; line-height: 1; }
.show__item > img { width: 100%; height: auto; border-radius: var(--r-tile); }
.show__win { border-color: var(--ink); background: var(--ink); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .45); }
.show__win .win__bar { border-color: var(--ink); }
.show__win .win__dots i { border-color: #777; }
.show__win .win__dots i:first-child { border-color: var(--lime); }
.show__win img { width: 100%; height: auto; }
@media (max-width: 960px) {
  .cstudy__steps, .cstudy__body { grid-template-columns: minmax(0, 1fr); }
  .brief { position: static; }
}
@media (max-width: 600px) { .prose--case ul { grid-template-columns: minmax(0, 1fr); } }

/* systemy: przewodnik po ekranach — lista widoków + duże okno */
.tour { padding: clamp(72px, 9vw, 130px) var(--gutter); }
.tour__inner { max-width: var(--max); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 52px); }
.tour__head { display: grid; gap: 14px; }
.tour__head .h2 { max-width: none; }
.tour__lead { color: var(--smoke); max-width: 60ch; }
.tour__body { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: start; }
.tour__preview { min-width: 0; display: grid; gap: 16px; }
.tour__controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tour__paging { display: flex; align-items: center; gap: 12px; }
.tour__paging button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #555; border-radius: 50%; background: transparent; color: var(--chalk); font-size: 1.25rem; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.tour__paging button:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.tour__paging button:disabled { opacity: .3; cursor: default; }
.tour__paging span { min-width: 44px; text-align: center; font-size: .85rem; color: var(--smoke); font-variant-numeric: tabular-nums; }
.tour__play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #c4c4be; font-size: .8rem; font-weight: 600; cursor: pointer; }
.tour__play:hover { color: var(--lime); background: #222; }
.tour__play i { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.tour__play[aria-pressed="true"] i { width: 9px; height: 11px; border: 0; border-inline: 3px solid currentColor; }
.tour__controls button:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.tour--project .tour__body { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.tour--project .tour__tab { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 86px; padding: 12px; border: 1px solid transparent; }
.tour--project .tour__tab.is-on { border-color: #4c4c46; box-shadow: none; }
.tour__thumb { display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 8px; border: 2px solid transparent; background: #e9ebee; }
.tour__thumb img { width: 100%; height: 100%; object-fit: contain; }
.tour__tab.is-on .tour__thumb { border-color: var(--lime); }
.tour--project .tour__t { padding: 0; }
.tour--project .tour__t b { font-size: .9rem; line-height: 1.35; }
.tour--project .tour__t small, .tour--project .tour__tab.is-on .tour__t small { display: none; }
.tour--project .tour__bar { left: 102px; right: 12px; bottom: 8px; }
.tour__fallback { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tour__fallback a { display: grid; gap: 12px; text-decoration: none; font-size: .9rem; }
.tour__fallback img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 14px; background: #eef0f3; }
html:not(.js) .tour__list, html:not(.js) .tour__controls { display: none; }
.tour__caption { display: grid; gap: 5px; }
.tour__caption b { font-size: 1.1rem; line-height: 1.35; }
.tour__caption p { color: var(--smoke); font-size: .92rem; }
.tour__caption p:empty { display: none; }
.tour__list { display: grid; gap: 6px; }
.tour__tab {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; width: 100%; padding: 14px 16px 16px; overflow: hidden;
  border: 0; border-radius: 16px; background: transparent; color: var(--smoke); font: inherit; text-align: left; cursor: pointer; transition: background-color .3s, color .3s;
}
.tour__tab:hover { background: #1f1f1f; color: var(--chalk); }
.tour__tab.is-on { background: var(--coal); color: var(--chalk); box-shadow: inset 0 0 0 1.5px #333; }
.tour__tab:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.tour__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid #3a3a3a; font-size: .75rem; font-weight: 800; }
.tour__tab.is-on .tour__n { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.tour__t { display: grid; gap: 4px; padding-top: 4px; }
.tour__t b { font-size: 1rem; line-height: 1.2; }
.tour__t small { display: none; color: var(--smoke); font-size: .86rem; line-height: 1.4; }
.tour__tab.is-on .tour__t small { display: block; }
/* pasek postępu: po jego końcu włącza się kolejny widok */
.tour__bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; overflow: hidden; }
.tour__bar i { display: block; height: 100%; width: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }
.tour.is-playing:not(.is-touched) .tour__tab.is-on .tour__bar i { animation: tourbar 6.5s linear forwards; }
@keyframes tourbar { to { transform: scaleX(1); } }
.tour__win { border-color: #3a3a3a; box-shadow: 0 50px 90px -50px #000; }
.tour__win .win__bar { border-color: #3a3a3a; }
.tour__win .win__dots i { border-color: #777; }
.tour__win .win__dots i:first-child { border-color: var(--lime); }
.tour__screen { aspect-ratio: 16 / 10; background: #EEF0F3; }
.tour__shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; cursor: zoom-in; transition: opacity .6s var(--ease), visibility 0s .6s; }
.tour__shot.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
/* cały ekran w oknie — szersze, węższe i pionowe zrzuty bez ucinania */
.tour__shot img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 960px) {
  .tour__body, .tour--project .tour__body { grid-template-columns: minmax(0, 1fr); }
  .tour__list { order: 2; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .tour__tab { flex: 0 0 min(260px, 78vw); scroll-snap-align: start; }
  .tour__tab.is-on .tour__t small { display: none; }
  .tour--project .tour__tab { flex-basis: min(260px, 78vw); }
  .tour__list { scrollbar-color: #666 transparent; scrollbar-width: thin; }
  .cstudy__body--summary .brief { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cstudy__body--summary .brief__cta { width: 100%; }
  .tour__fallback { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nextcase { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 100px) var(--gutter); text-decoration: none; border-bottom: 1px solid #262626; }
.nextcase__label { grid-column: 1 / -1; color: var(--smoke); font-weight: 600; }
.nextcase__title { font-size: clamp(2.6rem, 7vw, 6.6rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; transition: color .3s; }
.nextcase__go { display: grid; place-items: center; width: clamp(56px, 7vw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--lime); transition: translate .4s var(--ease), rotate .4s var(--ease); }
.nextcase__go svg { width: 40%; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nextcase:hover .nextcase__title { color: var(--lime); }
.nextcase:hover .nextcase__go { translate: 8px 0; rotate: -12deg; }

.is-viewing-shot { overflow: hidden; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #111; color: var(--chalk); }
.lightbox::backdrop { background: rgb(10 10 10 / .92); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox__toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--night); }
.lightbox__pages, .lightbox__zoom { display: flex; align-items: center; gap: 6px; }
.lightbox__toolbar button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #555; border-radius: 10px; background: #262626; color: var(--chalk); font-size: .85rem; font-weight: 700; cursor: pointer; }
.lightbox__toolbar button:hover { border-color: var(--lime); }
.lightbox__toolbar button:disabled { opacity: .35; cursor: default; }
.lightbox__toolbar output { min-width: 54px; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.lightbox__pages span { min-width: 38px; text-align: center; white-space: nowrap; font-size: .85rem; }
.lightbox__toolbar .lightbox__close { justify-self: end; border-color: var(--lime); background: var(--lime); color: var(--ink); }
.lightbox__viewport { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: #777 #222; touch-action: pan-x pan-y pinch-zoom; }
.lightbox__viewport.is-zoomed { cursor: grab; }
.lightbox__viewport.is-dragging { cursor: grabbing; }
.lightbox__canvas { display: grid; place-items: center; min-width: 100%; min-height: 100%; padding: 16px; }
.lightbox__canvas, .lightbox img { transition: none !important; }
.lightbox img { display: block; max-width: none; max-height: none; border-radius: 6px; user-select: none; }
.lightbox__footer { display: grid; gap: 5px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--night); }
.lightbox__footer p { max-width: 100ch; font-size: .9rem; font-weight: 600; line-height: 1.45; }
.lightbox__footer > span { color: var(--smoke); font-size: .78rem; }
@media (max-width: 700px) {
  .lightbox__toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 12px; }
  .lightbox__zoom { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .lightbox__close { grid-column: 2; grid-row: 1; }
  .lightbox__footer { padding-inline: 12px; }
  .shot__hint { right: 10px; bottom: 10px; padding: 7px 9px; font-size: .72rem; }
}

/* 404 */
.nf__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 120px) var(--gutter); }
.nf__win { box-shadow: 0 40px 80px -40px #000; }
.nf__code { padding: clamp(24px, 4vw, 56px); font-size: clamp(6rem, 18vw, 15rem); font-weight: 800; letter-spacing: -.07em; line-height: .9; color: var(--lime); text-align: center; }
.nf__text { display: grid; gap: 20px; }
@media (max-width: 900px) { .nf__inner { grid-template-columns: minmax(0, 1fr); } }

/* formularz w WordPressie */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__err { padding: 12px 14px; border-radius: 12px; background: #FFF1EE; border-left: 4px solid #C2341B; color: #8A2414; font-size: .92rem; font-weight: 600; }
.form__consent a { color: var(--ink); }

/* stopka */
.foot__social a { margin-right: 12px; }
.foot__link { color: var(--smoke); text-decoration: none; }
.foot__link:hover { color: var(--lime); }

/* kreator rozmowy „Porozmawiajmy”: pływający przycisk + okno z pytaniami jak w czacie */
.chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px;
  border: 0; border-radius: 99px; background: var(--ink); color: var(--chalk); font: inherit; cursor: pointer;
  box-shadow: 0 18px 40px -14px rgb(0 0 0 / .65), inset 0 0 0 1.5px #3a3a3a; transition: translate .6s var(--ease), opacity .4s, box-shadow .3s;
}
.chat-fab:not(.is-shown) { translate: 0 150%; opacity: 0; pointer-events: none; }
.chat-fab:hover { box-shadow: 0 18px 40px -14px rgb(0 0 0 / .65), inset 0 0 0 1.5px var(--lime); }
.chat-fab:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.chat-fab__logo { position: relative; flex: none; width: 46px; height: 46px; }
.chat-fab__logo img { width: 100%; height: 100%; border-radius: 14px; }
.chat-fab__logo::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--ink); }
.chat-fab__t { display: grid; text-align: left; line-height: 1.2; }
.chat-fab__t b { font-size: 1rem; }
.chat-fab__t small { color: var(--smoke); font-size: .78rem; }

.chat {
  position: fixed; inset: auto 20px 20px auto; width: min(430px, calc(100vw - 32px)); height: min(700px, calc(100dvh - 40px)); max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 26px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 40px 90px -30px rgb(0 0 0 / .75);
}
.chat[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; animation: chatIn .45s var(--ease); }
.chat::backdrop { background: rgb(10 10 10 / .4); }
@keyframes chatIn { from { opacity: 0; translate: 0 28px; scale: .97; } }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--ink); color: var(--chalk); }
.chat__logo { flex: none; width: 44px; height: 44px; }
.chat__logo img { width: 100%; height: 100%; border-radius: 13px; }
.chat__who { flex: 1; display: grid; gap: 3px; min-width: 0; }
.chat__who b { font-size: 1.02rem; letter-spacing: -.02em; }
.chat__status { display: flex; align-items: center; gap: 7px; color: var(--smoke); font-size: .78rem; }
.chat__status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #777; }
.chat__status.is-open i { background: var(--lime); box-shadow: 0 0 0 3px rgb(203 250 62 / .18); }
.chat__x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #262626; color: var(--chalk); cursor: pointer; }
.chat__x:hover { background: #333; color: var(--lime); }
.chat__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat__progress { height: 3px; background: #262626; }
.chat__progress i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .6s var(--ease); }

.chat__log { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 14px; overflow-y: auto; overscroll-behavior: contain; background: #F4F4F0; }
.chat__turn { display: flex; flex-direction: column; gap: 8px; }
.bub { max-width: 86%; padding: 11px 15px; font-size: .95rem; line-height: 1.45; animation: bubIn .35s var(--ease) both; }
@keyframes bubIn { from { opacity: 0; translate: 0 8px; } }
.bub--bot { align-self: flex-start; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #E4E4DD; }
.bub--me { align-self: flex-end; display: flex; align-items: baseline; gap: 12px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--chalk); }
.bub__edit { flex: none; padding: 0; border: 0; background: none; color: var(--lime); font: inherit; font-size: .78rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.chat.is-sent .bub__edit { display: none; }
.bub--typing { display: flex; gap: 4px; padding: 15px 16px; }
.bub--typing i { width: 7px; height: 7px; border-radius: 50%; background: #A3A39C; animation: typing 1s infinite; }
.bub--typing i:nth-child(2) { animation-delay: .15s; } .bub--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 30% { translate: 0 -4px; background: var(--ink); } }
.bub--sum { display: grid; gap: 8px; min-width: 70%; }
.bub--sum dl { display: grid; gap: 6px; }
.bub--sum div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; font-size: .88rem; }
.bub--sum dt { color: var(--stone); }
.bub--sum dd { font-weight: 700; }
.bub--err { background: #FFF1EE; box-shadow: inset 0 0 0 1.5px #F2C4B9; color: #8A2414; font-weight: 600; }

.chat__foot { padding: 12px 14px 14px; border-top: 1px solid #ECECE6; background: #fff; }
.chat__ctrl { display: grid; gap: 10px; }
.chat__ctrl:empty { display: none; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; border: 1.5px solid #D5D5CE; border-radius: 99px;
  background: #fff; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.chat__chip:hover { border-color: var(--ink); }
.chat__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--chalk); }
.chat__chip[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.chat__chip:focus-visible, .chat__in:focus-visible, .chat__go:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.chat__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat__row small { color: var(--stone); font-size: .8rem; line-height: 1.3; }
.chat__go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin-left: auto; padding: 0 20px; border: 0; border-radius: 99px;
  background: var(--lime); color: var(--ink); font: inherit; font-weight: 800; font-size: .95rem; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s, opacity .2s;
}
.chat__go:hover { background: var(--ink); color: var(--lime); }
.chat__go:disabled { opacity: .4; cursor: not-allowed; background: var(--lime); color: var(--ink); }
.chat__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat__go--ghost { margin-left: 0; background: transparent; box-shadow: inset 0 0 0 1.5px #D5D5CE; }
.chat__go--ghost:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.chat__in { width: 100%; min-height: 46px; padding: 11px 14px; border: 1.5px solid #D5D5CE; border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: .95rem; }
.chat__in:focus { border-color: var(--ink); outline: none; }
.chat__in[aria-invalid="true"] { border-color: #C2341B; }
textarea.chat__in { min-height: 92px; resize: none; line-height: 1.45; }
.chat__two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chat__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; line-height: 1.4; color: var(--stone); }
.chat__consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ink); }
.chat__consent a { color: var(--ink); }
.chat__hint { color: #8A2414; font-size: .8rem; font-weight: 600; }
.chat__hint:empty { display: none; }
@media (max-width: 520px) {
  .chat { inset: 0; width: 100%; height: 100dvh; border-radius: 0; }
  .chat-fab { right: 12px; bottom: 12px; }
  .chat__two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .chat[open], .bub { animation: none; }
}

/* „Zaufali nam”: pas logotypów klientów */
.cs + .clients { margin-top: calc(-1 * clamp(36px, 5vw, 72px)); }
.clients { background: var(--chalk); color: var(--ink); padding: 0 0 clamp(72px, 9vw, 120px); overflow: hidden; }
.clients__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; max-width: var(--max); margin: 0 auto clamp(24px, 3vw, 40px); padding: clamp(32px, 4vw, 48px) var(--gutter) 0; border-top: 1.5px solid #DADAD3; }
.clients__h { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -.045em; }
.clients__lead { color: var(--stone); }
.clients__belt { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients__track { display: flex; gap: clamp(28px, 4vw, 64px); width: max-content; animation: clients-run 70s linear infinite; }
.clients__track li { flex: none; width: clamp(112px, 10vw, 156px); }
.clients__track img { width: 100%; height: auto; filter: grayscale(1) contrast(1.15); opacity: .8; transition: filter .3s, opacity .3s; }
.clients__track li:hover img { filter: none; opacity: 1; }
@keyframes clients-run { to { translate: -50% 0; } }
/* bez ruchu: statyczna siatka bez kopii */
.is-static .clients__track { animation: none; }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .clients__belt { -webkit-mask-image: none; mask-image: none; }
  .clients__track { width: auto; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); flex-wrap: wrap; justify-content: center; }
  .clients__track li[aria-hidden] { display: none; }
}

/* cena „od” przy usłudze (pole „Cena od”; puste = brak) */
.phead__note, .svc__price { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-weight: 700; }
.phead__note { padding: 8px 16px; border-radius: 99px; background: #262626; color: var(--chalk); }
.phead__note::before, .svc__price::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.svc__price { margin-top: 10px; color: var(--chalk); }

/* pionowy zrzut (telefon) w galerii strony: wyśrodkowany na jasnym polu */
.show__item--tall { display: grid; place-items: center; padding: clamp(28px, 4vw, 64px); background: #E7E7E0; }
.show__item--tall > img { width: auto; max-width: 100%; max-height: min(78vh, 760px); border-radius: 28px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5); }

/* okienko zgód na cookies (tylko z Google Tag Manager) */
.consent {
  position: fixed; left: 20px; bottom: 20px; z-index: 85; display: grid; gap: 12px; width: min(400px, calc(100vw - 40px)); padding: 22px;
  border-radius: var(--r-tile); background: var(--ink); color: var(--chalk); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6), inset 0 0 0 1.5px #333;
  animation: consentIn .5s var(--ease) both;
}
.consent[hidden] { display: none; }
@keyframes consentIn { from { opacity: 0; translate: 0 20px; } }
.consent__h { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; }
.consent__t { color: #cfcfc8; font-size: .9rem; line-height: 1.5; }
.consent__t a { color: var(--lime); }
.consent__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.consent__btns .btn { flex: 1 1 auto; min-height: 46px; justify-content: center; font: inherit; font-weight: 700; cursor: pointer; }
.consent__btns .btn--line { background: transparent; }
.foot__btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
@media (max-width: 520px) {
  .consent { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 22px 22px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  body:has(.consent:not([hidden])) .chat-fab { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
.is-static .consent { animation: none; }