/* Poziom Wyżej — Mobile-first, natywne przewijanie, bez scroll hijackingu. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--float-offset, 0px) + var(--space-5)); }
body {
  margin: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  font: 400 var(--text-body) / 1.6 var(--font-body);
  font-kerning: normal;
  --focus: var(--color-brand);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--space-4); }
p, li { text-wrap: pretty; }
:where(ul[role='list'], ol[role='list']) { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[tabindex='-1']:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: var(--space-3); z-index: 20; padding: var(--space-3) var(--space-4); background: var(--color-brand); color: var(--color-ink); font-weight: 600; border-radius: var(--radius-pill); transform: translateY(-160%); }
.skip-link:focus { transform: none; --focus: var(--color-paper); }

.container { width: min(100% - 2 * var(--page-margin), var(--container)); margin-inline: auto; }

/* --- Typografia ------------------------------------------------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font: 600 var(--text-eyebrow) / 1.4 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow::before { content: ''; width: 1.75rem; height: 1px; background: var(--color-brand); flex: none; }
.scene--paper .eyebrow { color: var(--color-text-muted-paper); }
.scene--paper .eyebrow::before { background: var(--color-ink); }
.h2 { font-size: var(--text-h2); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: var(--space-5); max-width: 18ch; }
.h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.02em; }
.lead { font-size: var(--text-lead); line-height: 1.55; max-width: 34em; }
.muted { color: var(--color-text-muted); }
.scene--paper .muted { color: var(--color-text-muted-paper); }
.prose { max-width: 36em; }

/* --- Przyciski i linki ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--target); padding: 0.75rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 600 var(--text-ui) / 1.25 var(--font-body); text-align: center; text-decoration: none;
  transition: transform var(--dur-press) var(--ease), background-color var(--dur-press), border-color var(--dur-press), color var(--dur-press);
}
.btn:active { transform: translateY(1px); }
.btn__icon { font-size: 1.15em; line-height: 1; }
.btn--primary { background: var(--color-brand); color: var(--color-ink); border-color: var(--color-brand); }
.btn--primary:hover { background: #FFDB57; border-color: #FFDB57; transform: translateY(-1px); }
.btn--secondary { border-color: currentColor; background: transparent; }
.btn--secondary:hover { background: rgb(244 241 233 / 0.08); }
.btn--ink { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.btn--ink:hover { background: #3A3B3F; transform: translateY(-1px); }
.btn--quiet { min-height: 44px; padding: 0.5rem 1.1rem; border-color: var(--color-line-dark); background: transparent; font-weight: 500; }
.btn--quiet:hover { border-color: var(--color-paper); }
.btn--text {
  min-height: 44px; padding: 0.5rem 0.25rem; border: 0; background: none; border-radius: 4px;
  font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.btn--text:hover { text-decoration-thickness: 2px; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }

/* --- Nagłówek i nawigacja --------------------------------------------------------------- */
.site-header { position: relative; z-index: 5; }
/* Poniżej 64em nawigacja (otwarte menu albo wersja bez JS) zawsze zajmuje pełny wiersz pod logo. */
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); min-height: 112px; border-bottom: 1px solid var(--color-line-dark); }
.site-nav { flex-basis: 100%; order: 3; }
.brand { display: inline-flex; align-items: center; flex: none; min-width: 44px; min-height: var(--target); text-decoration: none; }
.brand img { width: auto; height: 88px; object-fit: contain; mix-blend-mode: lighten; }
@media (max-width: 22.4em) { .header-actions .header-contact { display: none; } }
/* 360–392 px: „Kontakt” i menu pozostają obok pionowego logo. */
@media (max-width: 24.5em) {
  .header-actions .btn { padding-inline: 0.85rem; }
  .header-actions { gap: var(--space-3); }
}
.header-actions { display: flex; align-items: center; gap: var(--space-4); } /* wyraźniejsza przerwa między „Kontakt” a menu */
.header-actions .btn { min-height: 44px; padding-inline: 1rem; }
.menu-toggle { display: none; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--color-line-dark); border-radius: var(--radius-pill); background: transparent; font-weight: 500; }
.menu-toggle__bars { position: relative; width: 16px; height: 10px; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--dur-reveal) var(--ease); }
.menu-toggle__bars::before { top: 1px; }
.menu-toggle__bars::after { bottom: 1px; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::after { transform: translateY(-3.5px) rotate(-45deg); }
.js .menu-toggle { display: inline-flex; }
@media (max-width: 27em) { .menu-toggle { width: 44px; justify-content: center; padding: 0; } .menu-toggle [data-menu-label] { display: none; } }

.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: var(--space-3) 0 var(--space-4); list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 500; }
.site-nav a:hover { text-decoration: underline; }
.site-nav .nav-cta { display: none; }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; border-bottom: 1px solid var(--color-line-dark); }
.js .site-nav.is-open ul { flex-direction: column; gap: 0; padding: var(--space-2) 0 var(--space-5); }
.js .site-nav.is-open a { min-height: 52px; font: 500 1.25rem / 1.3 var(--font-heading); width: 100%; border-bottom: 1px solid var(--color-line-dark); }
.js .site-nav.is-open .nav-cta { display: block; margin-top: var(--space-5); }
.js .site-nav.is-open .nav-cta a { width: auto; border: 0; font: 600 var(--text-ui) / 1.25 var(--font-body); }

@media (min-width: 64em) {
  .site-header__inner { min-height: 128px; }
  .brand img { height: 104px; }
  .header-actions { display: none; }
  .site-nav, .js .site-nav { display: block; }
  .site-header__inner { display: grid; grid-template-columns: auto 1fr; }
  .site-nav { flex-basis: auto; order: 0; }
  /* Przy 1440 px jeden rząd; przy powiększonym tekście menu może się zawinąć zamiast wystawać poza ekran. */
  .site-nav ul, .js .site-nav ul { justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-6); padding: var(--space-2) 0; }
  .site-nav .nav-cta { display: block; margin-left: var(--space-2); }
  .site-nav .nav-cta a { padding-inline: 1.4rem; }
  .site-nav .nav-cta a:hover { text-decoration: none; }
}

/* --- Pasek pływający (przewijanie w górę) ----------------------------------------------- */
.float-bar { position: fixed; inset: 0 0 auto; z-index: 10; background: rgb(37 38 41 / 0.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line-dark); transform: translateY(-105%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s linear 220ms; }
.float-bar.is-shown { transform: none; visibility: visible; transition: transform 220ms var(--ease); }
.float-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 80px; }
.brand--compact { min-height: 44px; }
.brand--compact img { height: 64px; }
.float-bar ul { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 0 var(--space-4); margin: 0; padding: 0; list-style: none; }
.float-bar a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; }
.float-bar .btn { min-height: 40px; padding-inline: 1rem; }
.float-bar__wide { display: none; }
@media (max-width: 22.5em) { .float-bar__narrow { display: none; } }
@media (min-width: 64em) { .float-bar__wide { display: list-item; } .float-bar__narrow { display: none; } }

/* --- Sceny -------------------------------------------------------------------------------- */
.scene { padding-block: var(--scene-pad); position: relative; }
.scene--paper { background: var(--color-paper); color: var(--color-ink); --focus: var(--color-ink); }
.scene--dark { background: var(--color-ink); }
.scene--brand { background: var(--color-brand); color: var(--color-ink); --focus: var(--color-ink); }
.scene--paper .btn--secondary:hover { background: rgb(37 38 41 / 0.06); }

/* --- Hero + opowieść z przypiętym obiektem ---------------------------------------------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero { padding-block: clamp(1.5rem, 0.6rem + 4vw, 4.5rem) var(--space-6); }
.hero h1 { font-size: var(--text-h1); line-height: 1.05; letter-spacing: -0.04em; font-weight: 500; margin-bottom: var(--space-5); }
.hero h1 em { font-style: normal; color: var(--color-brand); display: block; }
.hero__intro { font-size: var(--text-lead); line-height: 1.6; color: #DEDDD6; max-width: 27em; margin-bottom: var(--space-6); }
.hero .actions { gap: var(--space-3); } /* „Poznaj ofertę” i „Zobacz przykład” w jednym rzędzie */
.hero .actions .btn { white-space: nowrap; }
@media (max-width: 22.5em) { .hero .actions { gap: var(--space-2); } .hero .actions .btn { padding-inline: 0.7rem; gap: 0.35rem; font-size: 0.875rem; } }
.person { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line-dark); max-width: 30rem; }
@media (min-width: 64em) { .person { margin-top: var(--space-6); padding-top: var(--space-5); } }
.person__photo { flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--color-surface-dark); box-shadow: inset 0 0 0 1px var(--color-amber); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.35) translateY(10%); }
.person { align-items: flex-end; }
/* Przedstawienie jako trzy dymki czatu: pojawiają się po „pisze…” w nieregularnym rytmie, potem co jakiś czas
   któryś drgnie (js: initPersonChat). Bez JS i przy ograniczonym ruchu stoją od razu. */
.person__chat { position: relative; display: grid; justify-items: start; gap: 0.4rem; min-width: 0; }
.person__bubble { max-width: calc(100% - 24px); margin: 0; padding: 0.45rem 0.85rem; border-radius: 16px 16px 16px 4px; background: rgb(244 241 233 / 0.08); border: 1px solid var(--color-line-dark); font-size: var(--text-ui); line-height: 1.4; transform: translateX(var(--dx, 0px)) rotate(var(--tilt, 0deg)); transform-origin: 0 100%; }
.person__bubble:first-child { background: rgb(255 208 40 / 0.12); border-color: rgb(255 208 40 / 0.35); }
.person__bubble strong { font: 600 1.0625rem / 1.3 var(--font-heading); }
.person__bubble--links a { font-size: var(--text-caption); }
.person__chat.is-live .person__bubble { opacity: 0; transform: translate(calc(var(--dx, 0px) - 14px), 12px) scale(0.8) rotate(calc(var(--tilt, 0deg) - 4deg)); }
.person__chat.is-live .person__bubble:is(.is-in, :focus-within) { opacity: 1; transform: translateX(var(--dx, 0px)) rotate(var(--tilt, 0deg)); transition: opacity 260ms, transform 620ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.person__bubble.is-nudge { animation: bubble-nudge 760ms cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes bubble-nudge { 30% { translate: 0 -5px; scale: 1.05; } 60% { translate: 0 1px; scale: 0.99; } }
.person__typing { position: absolute; left: 0; top: 0; display: inline-flex; gap: 5px; padding: 0.7rem 0.85rem; border-radius: 16px 16px 16px 4px; background: rgb(244 241 233 / 0.08); opacity: 0; transform: scale(0.8); transform-origin: 0 100%; transition: opacity 200ms, transform 300ms var(--ease); pointer-events: none; }
.person__typing.is-on { opacity: 1; transform: none; }
.person__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-paper); opacity: 0.5; animation: typing-dot 900ms ease-in-out infinite; }
.person__typing i:nth-child(2) { animation-delay: 150ms; }
.person__typing i:nth-child(3) { animation-delay: 300ms; }
.nowrap { white-space: nowrap; }

/* Telefon: tekst → Karolina → obiekt (ok. 260 px), który przy etapach opowieści zostaje u góry ekranu. */
.story__stage { position: sticky; top: var(--float-offset, 0px); transition: top 200ms ease; z-index: 2; margin-inline: calc(-1 * var(--page-margin)); padding: var(--space-2) var(--page-margin) var(--space-4); background: linear-gradient(var(--color-ink) 82%, rgb(37 38 41 / 0)); }
.object-stage { position: relative; width: 100%; height: 400px; margin-inline: auto; --object-zoom: 1.28; }
.object-stage > img, .object-live, .object-live svg, .object-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.object-stage > img.object-fallback { object-fit: contain; }
.has-live-object > img.object-fallback { display: none; }
.object-render { display: none; }
.object-stage[data-variant='render'] > img.object-fallback { display: none; }
.object-stage[data-variant='render'] .object-render { display: block; object-fit: cover; object-position: 62% 50%; -webkit-mask-image: radial-gradient(closest-side at 56% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side at 56% 52%, #000 62%, transparent 100%); }
.story__progress { display: none; } /* kreski postępu usunięte (decyzja użytkownika) */
.story__progress span { width: 28px; height: 3px; border-radius: 2px; background: var(--color-line-dark); transition: background-color var(--dur-reveal); }
.story__progress span.is-done { background: var(--color-brand); }
.no-js .story__progress { display: none; }
.stage-controls { position: absolute; right: 0; top: var(--space-3); z-index: 3; display: flex; gap: var(--space-2); transition: opacity var(--dur-reveal); }
.stage-controls .chip { min-height: 36px; background: rgb(28 29 31 / 0.7); backdrop-filter: blur(6px); }
.stage-controls .chip[aria-pressed='true'] { background: var(--color-paper); color: var(--color-ink); }
.stage-controls .chip:disabled { opacity: 0.5; cursor: default; }
.story:not(.is-in-hero) .stage-controls { opacity: 0; pointer-events: none; visibility: hidden; }
@media (min-width: 64em) { .stage-controls { top: auto; bottom: var(--space-6); } }

.chapter { padding-block: var(--space-6) var(--scene-pad); }
.chapter__title { font: 500 clamp(1.875rem, 1.2rem + 2.1vw, 3rem) / 1.15 var(--font-heading); letter-spacing: -0.03em; color: var(--color-paper); max-width: 17ch; margin-bottom: 0; padding-top: 12vh; }
.chapter__hl { color: var(--color-brand); }
/* Pytanie odsłania się słowo po słowie w rytmie przewijania (--p: 0→1 z js/site.js). */
.story.is-live .chapter__title .sw { display: inline-block; --k: clamp(0, calc(var(--p, 1) * (var(--n) + 1) - var(--i)), 1); opacity: calc(0.1 + var(--k) * 0.9); transform: translateY(calc((1 - var(--k)) * 0.45em)); filter: blur(calc((1 - var(--k)) * 7px)); }
/* Etapy: numer z linią, tytuł wysuwa się słowami spod maski, opis wyostrza się z rozmycia, potem przycisk. */
.story.is-live .beat .beat__title .sw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0 0.2em; margin: -0.08em 0 -0.2em; }
.story.is-live .beat .beat__title .sw__in { display: inline-block; transform: translateY(115%) rotate(4deg); transform-origin: 0 100%; transition: transform 950ms var(--ease); transition-delay: calc(200ms + var(--i) * 60ms); }
.story.is-live .beat .beat__num { opacity: 0; transform: translateX(-12px); transition: opacity 500ms, transform 700ms var(--ease); }
.beat__num::after { content: ''; display: inline-block; vertical-align: middle; width: 2.5rem; height: 1px; margin-left: 0.75rem; background: var(--color-brand); transform-origin: left; }
.story.is-live .beat .beat__num::after { transform: scaleX(0); transition: transform 900ms var(--ease) 250ms; }
.story.is-live .beat p:not(.beat__num) { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 800ms, transform 900ms var(--ease), filter 900ms; transition-delay: 650ms; }
.story.is-live .beat .btn { opacity: 0; transform: translateY(10px) scale(0.94); transition: opacity 500ms, transform 700ms cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: 1050ms; }
.story.is-live .beat:is(.is-shown, :focus-within) .beat__title .sw__in { transform: none; }
.story.is-live .beat:is(.is-shown, :focus-within) .beat__num { opacity: 1; transform: none; }
.story.is-live .beat:is(.is-shown, :focus-within) .beat__num::after { transform: none; }
.story.is-live .beat:is(.is-shown, :focus-within) p:not(.beat__num) { opacity: 1; transform: none; filter: none; }
.story.is-live .beat:is(.is-shown, :focus-within) .btn { opacity: 1; transform: none; }
/* Błysk na wysokości pierścieni (js: updateGlow): fala jasności przez słowa i poświata całego tytułu. */
.story.is-live :is(.chapter__title, .beat__title).is-glow { animation: title-flash 1700ms var(--ease) both; }
.story.is-live :is(.chapter__title, .beat__title).is-glow .sw__in { animation: word-flash 1300ms var(--ease) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes title-flash {
  0% { filter: drop-shadow(0 0 0 rgb(255 208 40 / 0)); }
  28% { filter: drop-shadow(0 0 10px rgb(255 236 170 / 0.95)) drop-shadow(0 0 34px rgb(255 208 40 / 0.75)); }
  100% { filter: drop-shadow(0 0 14px rgb(255 208 40 / 0.32)); }
}
@keyframes word-flash { 0%, 100% { } 30% { color: #FFF6D6; } }
.reduce-motion .story :is(.chapter__title, .beat__title).is-glow, .reduce-motion .story .is-glow .sw__in { animation: none !important; }
.reduce-motion .story .chapter__title .sw, .reduce-motion .story .beat :is(.sw__in, .beat__num, p, .btn) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.reduce-motion .story .beat .beat__num::after { transform: none !important; transition: none !important; }
.beats { display: grid; }
/* Telefon: tekst etapu ląduje poniżej przypiętego obiektu, gdy etap jest aktywny. */
.beat { min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding-block: 14vh var(--space-6); }
.story.is-live .beat { opacity: 0.6; transition: opacity 320ms ease; }
.story.is-live .beat.is-active { opacity: 1; }
/* Telefon: gdy fokus jest w etapie opowieści, przypięty obiekt odpina się i nie zasłania fokusu (WCAG 2.4.11). */
@media (max-width: 63.99em) { .story:has(.chapter :focus-visible) .story__stage { position: relative; top: auto; } }
.beat__num { font: 600 var(--text-caption) / 1 var(--font-heading); letter-spacing: 0.08em; color: var(--color-brand); margin-bottom: var(--space-4); }
.beat__title { font: 500 clamp(2rem, 1.4rem + 1.6vw, 2.75rem) / 1.12 var(--font-heading); letter-spacing: -0.025em; margin-bottom: var(--space-5); max-width: 16ch; }
.beat p:not(.beat__num) { font-size: var(--text-lead); line-height: 1.6; color: #DEDDD6; max-width: 26em; }
.beat .btn { margin-top: var(--space-4); }

@media (min-width: 48em) {
  .object-stage { height: 480px; --object-zoom: 1.22; }
}
@media (min-width: 64em) {
  .story { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .hero { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 3; min-height: min(720px, calc(100vh - 140px)); display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-7); }
  .chapter { grid-column: 1 / span 5; grid-row: 2; padding-top: 0; }
  .chapter__title { padding-top: 20vh; padding-bottom: 4vh; }
  .story__stage { grid-column: 8 / span 5; grid-row: 1 / span 2; position: relative; top: auto; margin: 0; padding: 0; background: none; z-index: 1; }
  .story__stage .object-stage { position: sticky; top: max(1.5rem, calc(50vh - 350px)); height: min(700px, calc(100vh - 3rem)); --object-zoom: 1.16; }
  .beat { min-height: 66vh; justify-content: center; padding-block: var(--space-7); }
  /* Ostatni etap ma wysokość sceny i kończy opowieść: obiekt odpina się dokładnie wtedy, gdy stoi na równi
     z blokiem tekstu, i dalej przewija się razem z nim. */
  .chapter { padding-bottom: 0; }
  .beat:last-child { min-height: min(700px, calc(100vh - 3rem)); }
}
/* Szerokie ekrany: dłuższy H1 mieści się w 7 kolumnach, obiekt w 6 (zakładka 1 kolumny bez kolizji z tekstem). */
@media (min-width: 72em) {
  .hero { grid-column: 1 / span 7; }
  .story__stage { grid-column: 7 / span 6; }
  .story__progress { bottom: var(--space-5); }
}

/* --- Obiekt SVG --------------------------------------------------------------------------- */
.pw-object { overflow: visible; isolation: isolate; transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 700ms var(--ease); }
.pw-object .layer {
  transform-box: view-box; transform-origin: 0 0;
  transform: translate(var(--x), var(--y)) scale(var(--s));
  opacity: var(--a);
  mix-blend-mode: screen;
  transition: transform var(--dur-arrange) var(--ease) calc(var(--i) * 45ms), opacity var(--dur-reveal) ease;
}
.pw-object .plate, .pw-object .ring {
  fill: none; stroke-dasharray: 80 20;
  stroke-dashoffset: calc(var(--o) * 1px);
  transition: stroke-dashoffset var(--dur-arrange) var(--ease) calc(var(--i) * 45ms), stroke-opacity var(--dur-reveal) ease;
}
.pw-object .plate { stroke: var(--color-amber); stroke-opacity: 0.16; stroke-width: 46; }
.pw-object .ring { vector-effect: non-scaling-stroke; }
.pw-object .edge-top { stroke: #FFE7A6; stroke-opacity: 0.95; stroke-width: 1.5; }
.pw-object .edge-mid { stroke: var(--color-amber); stroke-opacity: 0.35; stroke-width: 1; }
.pw-object .edge-bottom { stroke: var(--color-brand); stroke-opacity: 0.55; stroke-width: 1; }
.pw-object .edge-inner { stroke: var(--color-brand); stroke-opacity: 0.5; stroke-width: 1; }
.pw-object.has-lit .layer { opacity: calc(var(--a) * 0.4); }
.pw-object.has-lit .layer.is-lit { opacity: 1; }
.pw-object .layer.is-lit .plate { stroke-opacity: 0.3; }
.pw-object .layer.is-lit .edge-top { stroke: #FFF4D2; stroke-width: 2; }
.pw-object .sun { fill: var(--color-brand); opacity: 0; transition: opacity 400ms ease 300ms; }
.pw-object[data-pose='whole'] .sun { opacity: 1; }
.pw-object.is-scrub .layer, .pw-object.is-scrub .ring, .pw-object.is-scrub .plate { transition-duration: 140ms; transition-delay: 0s; transition-timing-function: linear; }
.pw-object .glow { transition: opacity var(--dur-arrange) ease; }
.pw-object[data-pose='drift'] .glow, .pw-object[data-pose='uniform'] .glow { opacity: 0.45; }

/* --- Odsłony scen (jednorazowe, krótkie) ------------------------------------------------- */
.reveal-ready [data-reveal] { transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.reveal-ready:not(.reduce-motion) [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(8px); }
.reveal-ready [data-reveal] .photo img { transition: clip-path 700ms var(--ease) 80ms; }
/* Subtelne wejście „soft”: uniesienie, wyostrzenie i kaskada (--rd) — oferta i inne listy. */
.reveal-ready [data-reveal='soft'] { transition: opacity 800ms var(--ease), transform 900ms var(--ease), filter 800ms var(--ease); transition-delay: calc(var(--rd, 0) * 110ms); }
.reveal-ready:not(.reduce-motion) [data-reveal='soft']:not(.is-revealed) { opacity: 0; transform: translateY(22px); filter: blur(6px); }
/* Portret: powolne wyłonienie z dołu z wyostrzeniem i ciepłą poświatą. */
.reveal-ready [data-reveal='portrait'] { transition: opacity 1100ms var(--ease), transform 1300ms var(--ease), filter 1100ms var(--ease); }
.reveal-ready:not(.reduce-motion) [data-reveal='portrait']:not(.is-revealed) { opacity: 0; transform: translateY(48px) scale(0.97); filter: blur(10px) saturate(0.6); }
.about__portrait::before { content: ''; position: absolute; inset: 18% -10% -4%; z-index: 0; background: radial-gradient(ellipse 60% 55% at 50% 60%, rgb(255 181 42 / 0.16), transparent 70%); transition: opacity 1600ms var(--ease) 400ms; }
.reveal-ready:not(.reduce-motion) .about__portrait:not(.is-revealed)::before { opacity: 0; }
.reveal-ready:not(.reduce-motion) [data-reveal]:not(.is-revealed) .photo img { clip-path: inset(7% 4% 7% 4% round 6px); }

/* --- Scena 2: seria slajdów „Zaczynamy od ludzi” ---------------------------------------- */
/* Telefon i niskie okna: zwykła sekwencja. Desktop z wystarczającą wysokością: karty przyklejają się
   i nasuwają na siebie przy natywnym przewijaniu (JS dodaje .slides--stack tylko, gdy treść się mieści). */
.slides { background: #E9E5DA; color: var(--color-ink); --focus: var(--color-ink); padding-block: var(--scene-pad); }
.slides .eyebrow { color: var(--color-text-muted-paper); }
.slides .eyebrow::before { background: var(--color-ink); }
.slides__title { margin-bottom: var(--space-6); }
.slides__list { display: grid; gap: var(--space-7); }
.slide { --slide-bg: var(--color-paper); background: var(--slide-bg); border-radius: var(--radius-module); padding: var(--space-4) var(--space-4) var(--space-6); scroll-margin-top: var(--space-6); }
.slide--dark { --slide-bg: var(--color-ink); color: var(--color-paper); --focus: var(--color-brand); }
.slide__inner { display: grid; gap: var(--space-5); }
.slide__media { margin: 0; min-width: 0; }
.slide__frame { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; background: #DCD7CB; }
.slide__frame img { width: 100%; height: 100%; object-fit: cover; }
.slide__media--portrait .slide__frame { background: radial-gradient(ellipse 70% 60% at 50% 70%, rgb(255 181 42 / 0.14), transparent 70%), var(--color-surface-dark); }
.slide__media--portrait img { object-fit: contain; object-position: 50% 100%; position: relative; z-index: 1; }
.slide__ring { position: absolute; left: 6%; right: 6%; bottom: 6%; width: 88%; height: auto; }
.slide__media--words .slide__frame, .slide__media--object .slide__frame { background: radial-gradient(ellipse 70% 60% at 50% 72%, rgb(255 181 42 / 0.12), transparent 70%), var(--color-surface-dark); }
.slide__media--object img { object-fit: contain; padding: 6%; }
.slide__words { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.1em; margin: 0; padding-bottom: 10%;
  font: 500 clamp(2rem, 1.2rem + 2.6vw, 3.5rem) / 1.05 var(--font-heading); letter-spacing: -0.03em; }
.slide__words span:nth-child(1) { color: #FFE7A6; }
.slide__words span:nth-child(2) { color: var(--color-brand); }
.slide__words span:nth-child(3) { color: var(--color-amber); }
.slide .steps-list { margin-top: var(--space-4); }
.slide:not(.slide--dark) .steps-list li { border-color: var(--color-line-paper); }
.slide:not(.slide--dark) .steps-list li::before { color: var(--color-ink); }
.slide:not(.slide--dark) .steps-list span { color: var(--color-text-muted-paper); }
.slide__media--render .slide__frame { background: var(--color-ink); }
.slide__text { padding-inline: var(--space-2); }
.slide__num { font: 600 var(--text-caption) / 1 var(--font-heading); letter-spacing: 0.08em; margin-bottom: var(--space-4); }
.slide__num span { color: var(--color-text-muted-paper); }
.slide--dark .slide__num { color: var(--color-brand); }
.slide--dark .slide__num span { color: var(--color-text-muted); }
.slide__title { font: 500 clamp(2rem, 1.4rem + 1.6vw, 2.75rem) / 1.1 var(--font-heading); letter-spacing: -0.025em; margin-bottom: var(--space-5); max-width: 16ch; }
.slide .lead { max-width: 30em; }
.slide__body { max-width: 32em; color: var(--color-text-muted-paper); }
.slide--dark .slide__body { color: var(--color-text-muted); }
.slide__cta { margin-top: var(--space-4); }

@media (min-width: 64em) {
  .slides__list { gap: var(--space-8); }
  .slide { padding: var(--space-6); }
  .slide__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .slide__media { grid-column: 1 / span 6; grid-row: 1; }
  .slide__text { grid-column: 8 / span 5; grid-row: 1; padding: 0; }
  /* Naprzemiennie: co druga karta ma zdjęcie po prawej. */
  .slide:nth-child(even) .slide__media { grid-column: 7 / span 6; }
  .slide:nth-child(even) .slide__text { grid-column: 1 / span 5; padding-left: var(--space-5); }
  .slide__frame { aspect-ratio: 5 / 4; }
  .slide__media--portrait .slide__frame { aspect-ratio: 5 / 4; }

  .slides--stack .slides__list { gap: 8vh; padding-bottom: 4vh; }
  .slides--stack .slide {
    position: sticky; top: calc(var(--space-5) + var(--i) * 12px);
    min-height: calc(100vh - var(--space-7)); display: flex; align-items: center;
    box-shadow: 0 -18px 40px -32px rgb(37 38 41 / 0.4);
  }
  .slides--stack .slide__inner { width: 100%; }
  .slides--stack .slide__frame { aspect-ratio: auto; height: min(64vh, 620px); }
}

/* Zdjęcie odsłania się w rytmie przewijania (scroll-driven animations). Tekst nie zależy od przewijania — zawsze pełny kontrast. */
@supports (animation-timeline: view()) {
  .slide__frame img { animation: slide-photo linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes slide-photo { from { transform: scale(1.12); filter: saturate(0.5) brightness(0.92); } to { transform: none; filter: none; } }
}

/* --- Gra ---------------------------------------------------------------------------------- */
.experiment__intro { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.experiment__intro .h2 { margin-bottom: 0; }
@media (min-width: 64em) {
  .experiment__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .experiment__intro > div:first-child { grid-column: 1 / span 7; }
  .experiment__intro > div:last-child { grid-column: 8 / span 5; }
}
.meta-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-caption); color: var(--color-text-muted); }

.game { background: var(--color-surface-dark); border: 1px solid var(--color-line-dark); border-radius: var(--radius-module); overflow: hidden; }
.game__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-line-dark); font-size: var(--text-caption); color: var(--color-text-muted); }
.game__bar p { margin: 0; display: flex; align-items: center; gap: var(--space-4); }
.game__bar a { color: var(--color-paper); display: inline-flex; align-items: center; min-height: 44px; }
.game__progress { display: inline-flex; gap: 4px; }
.game__progress span { width: 20px; height: 3px; border-radius: 2px; background: var(--color-line-dark); transition: background-color var(--dur-reveal); }
.game__progress span.is-done { background: var(--color-brand); }
.game__body { display: grid; }
.game__stage { order: -1; position: relative; min-height: 340px; border-bottom: 1px solid var(--color-line-dark); background: radial-gradient(ellipse 80% 70% at 50% 60%, rgb(255 181 42 / 0.07), transparent 70%); }
.game__stage .object-stage { position: absolute; inset: var(--space-3); width: auto; height: auto; }
.game__content { padding: var(--space-6) var(--space-5) var(--space-7); min-width: 0; }
@media (min-width: 64em) {
  .game__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 640px; }
  .game__stage { order: 0; border-bottom: 0; border-left: 1px solid var(--color-line-dark); }
  .game__stage .object-stage { inset: var(--space-6); }
  .game__content { padding: var(--space-7) var(--space-7) var(--space-7) var(--space-7); }
}

.game__label { font: 600 var(--text-eyebrow) / 1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.game__message { margin: 0 0 var(--space-6); padding: 0; }
.game__message p { font: 500 clamp(1.5rem, 1.2rem + 1.1vw, 2rem) / 1.3 var(--font-heading); letter-spacing: -0.02em; margin: 0; max-width: 24ch; }
.game__message--chosen { display: flex; gap: var(--space-4); align-items: flex-start; padding: calc(var(--space-5) + 0.9em) var(--space-5) var(--space-5); border: 1px solid var(--color-line-dark); border-radius: var(--radius-control); }
.game__message--chosen p { font: 400 var(--text-body) / 1.55 var(--font-body); letter-spacing: 0; max-width: none; }
.game__title { font: 500 var(--text-h3) / 1.2 var(--font-heading); letter-spacing: -0.02em; margin: 0 0 var(--space-5); max-width: 24ch; }
.game__title:focus-visible { outline-offset: 6px; }
.game__text, .game__feedback { font-size: var(--text-lead); line-height: 1.6; max-width: 34em; }
.game__feedback { padding-left: var(--space-5); border-left: 2px solid var(--color-brand); }
.game__hint { font-size: var(--text-caption); color: var(--color-text-muted); max-width: 36em; }
.game__reminder { color: var(--color-text-muted); font-size: var(--text-ui); }
.game__reminder strong { color: var(--color-paper); font-weight: 500; }
.game__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.game__takeaway { font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem) / 1.25 var(--font-heading); letter-spacing: -0.02em; color: var(--color-brand); margin-bottom: var(--space-6); max-width: 22ch; }
.game__restart { margin-top: var(--space-4); }
.game__idle-actions { margin-top: var(--space-6); }
.game__scope { margin-top: var(--space-6); font-size: var(--text-caption); color: var(--color-text-muted); max-width: 36em; }
.no-js .game [data-action='START'], .no-js [data-js-only] { display: none; }

.choices { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-3); min-width: 0; }
.choices__legend { padding: 0; margin-bottom: var(--space-2); }
.choices__legend .game__title { margin-bottom: var(--space-3); }
.choice { display: flex; align-items: flex-start; gap: var(--space-4); min-height: 56px; padding: var(--space-4) var(--space-5); border: 1px solid rgb(244 241 233 / 0.24); border-radius: var(--radius-control); cursor: pointer; transition: border-color var(--dur-press), background-color var(--dur-press); }
.choice:hover { border-color: rgb(244 241 233 / 0.55); }
.choice:has(input:checked) { border-color: var(--color-brand); background: rgb(255 208 40 / 0.08); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.choice input { flex: none; width: 20px; height: 20px; margin: 0.2em 0 0; accent-color: var(--color-brand); }
.choice input:focus-visible { outline: none; }
.choice__badge { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-amber); color: var(--color-brand); font: 600 0.875rem / 1 var(--font-heading); }
.choice__text { line-height: 1.5; }
.choices.is-invalid .choice { border-color: rgb(255 180 180 / 0.6); }
.field-error { display: flex; gap: var(--space-2); align-items: baseline; margin: var(--space-3) 0 0; color: var(--color-error-dark); font-size: var(--text-ui); font-weight: 500; }
.field-error > span[aria-hidden] { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--color-error-dark); color: var(--color-ink); font-size: 0.8em; font-weight: 700; }

.contexts { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.context { border: 1px solid rgb(244 241 233 / 0.24); border-radius: var(--radius-control); transition: border-color var(--dur-reveal); }
.context.is-open { border-color: var(--color-amber); }
.context__toggle { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 56px; padding: var(--space-3) var(--space-5); border: 0; background: none; border-radius: var(--radius-control); text-align: left; font-weight: 500; }
.context__initial { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-amber); color: var(--color-brand); }
.context__initial svg { width: 18px; height: 18px; }
.context__tag { display: inline-block; white-space: nowrap; margin-left: var(--space-3); padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: rgb(255 208 40 / 0.14); color: var(--color-brand); font-size: var(--text-caption); font-weight: 500; vertical-align: 0.1em; }
.context__text { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.context__teaser { font-size: var(--text-caption); font-weight: 400; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: blur(3.5px); transition: filter 400ms var(--ease), opacity 400ms; user-select: none; }
.context__toggle:hover .context__teaser { filter: blur(2px); }
.context.is-open .context__teaser { display: none; }
/* Znacznik nowej wiadomości: najpierw „pisze…”, potem pulsująca jedynka; znika po przeczytaniu. */
.context__unread { position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 24px; }
.context__unread .typing { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 0.45rem 0.55rem; gap: 4px; }
.context__unread .typing i { width: 6px; height: 6px; }
.context__unread b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-brand); color: var(--color-ink); font: 700 0.75rem / 1 var(--font-body); box-shadow: 0 0 0 0 rgb(255 208 40 / 0.6); }
.context.is-seen .context__unread { display: none; }
@media (max-width: 47.99em) {
  .context__toggle { gap: var(--space-3); padding-inline: var(--space-4); }
  .context__unread { width: 30px; }
  .context__panel { padding-left: var(--space-4); }
}
.context__icon { position: relative; flex: none; width: 14px; height: 14px; }
.context__icon::before, .context__icon::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--color-brand); transition: transform var(--dur-reveal) var(--ease); }
.context__icon::after { transform: rotate(90deg); }
.context.is-open .context__icon::after { transform: rotate(0deg); }
.context__panel { padding: 0 var(--space-5) var(--space-4) calc(var(--space-5) + 32px + var(--space-4)); }
.context__panel p { margin: 0; font-size: var(--text-body); line-height: 1.6; color: #E6E4DD; }
.summary { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-control); background: rgb(37 38 41 / 0.6); }
.summary ul { display: grid; gap: var(--space-2); font-size: var(--text-caption); line-height: 1.5; color: #D9D7D0; }
.summary__name { font-weight: 600; color: var(--color-paper); margin-right: var(--space-1); }

.guide { display: flex; gap: var(--space-4); align-items: center; margin: 0; padding: var(--space-4) 0; border-block: 1px solid var(--color-line-dark); }
.guide img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-brand); }
.guide figcaption p { margin: 0; }
.guide__name { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1) !important; }


.static-example { margin-top: var(--space-7); padding: var(--space-6) var(--space-5); border: 1px solid var(--color-line-dark); border-radius: var(--radius-module); background: var(--color-ink-deep); }
.static-example > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.static-example h3 { font: 500 var(--text-h3) / 1.2 var(--font-heading); }
.static-example ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--space-6); max-width: 46em; }
.static-example ol.steps > li { counter-increment: step; padding-left: 3rem; position: relative; }
.static-example ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0.1em; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-amber); color: var(--color-brand); font: 600 0.9rem / 1 var(--font-heading); }
.static-example h4 { font: 600 1.125rem / 1.35 var(--font-heading); margin-bottom: var(--space-3); }
.static-example ul, .static-example dl { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.static-example dt { font-weight: 600; margin-top: var(--space-3); }
.static-example dd { margin: 0 0 var(--space-2); color: #DCDAD3; }
.static-example dl { padding-left: 0; }
@media (min-width: 64em) { .static-example { padding: var(--space-7); } }

/* --- Oferta ------------------------------------------------------------------------------- */
#oferta { overflow-wrap: anywhere; }
.hub { min-width: 0; }
.hub .hub__process a { white-space: normal; }
.hub .link-arrow, .tool .link-arrow, .rmp .link-arrow { max-width: 100%; }
.offer__intro { min-height: min(78vh, 760px); display: grid; align-content: center; justify-items: center; text-align: center; padding-block: var(--space-7); }
.offer__intro .eyebrow { justify-content: center; }
.offer__intro .h2 { max-width: 15ch; margin-inline: auto; font-size: clamp(2.125rem, 1.2rem + 3.8vw, 4.75rem); }
.offer__intro .lead { margin: var(--space-2) auto 0; }
/* Linie podziału „rysują się” przy wejściu oferty. */
.offer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); margin-top: var(--space-6); padding-top: var(--space-6); }
.offer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-line-paper); transform-origin: left; transition: transform 1400ms var(--ease); }
.reveal-ready:not(.reduce-motion) .offer:not(.is-revealed)::before { transform: scaleX(0); }
.hub h3 { font: 500 clamp(2rem, 1.6rem + 1.3vw, 2.5rem) / 1.1 var(--font-heading); letter-spacing: -0.03em; margin-bottom: var(--space-3); }
.hub > p { color: var(--color-text-muted-paper); max-width: 30em; }
.service { padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--color-line-paper); scroll-margin-top: var(--space-6); }
.service h4 { font: 600 1.3125rem / 1.3 var(--font-heading); letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.service p { max-width: 32em; }
.service:target { outline: 2px solid var(--color-ink); outline-offset: 12px; border-radius: 2px; }
.hub__process { margin: var(--space-5) 0 0; font-size: var(--text-ui); }
.hub__process a { font-weight: 500; }
.service--rmp .eyebrow { margin-bottom: var(--space-3); color: var(--color-text-muted-paper); }
.service__intro, .service__takeaway { font-weight: 500; }
.tools { margin-top: var(--space-9); scroll-margin-top: var(--space-7); }
.tools__heading { margin-bottom: var(--space-6); }
.tools__grid { display: grid; gap: var(--space-5); }
.tool { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--color-line-paper); border-radius: var(--radius-module); }
.tool .tool__name { font: 600 1.75rem / 1.2 var(--font-heading); margin-bottom: var(--space-6); }
.tool__name::after { content: ''; display: block; width: 2rem; height: 3px; margin-top: var(--space-3); background: var(--color-amber); }
.tool h4 { font: 600 var(--text-lead) / 1.4 var(--font-heading); margin-bottom: var(--space-3); }
.tool > p { max-width: 32em; }
.tool .tool__note { margin-top: auto; padding-top: var(--space-4); font-size: var(--text-caption); color: var(--color-text-muted-paper); }
.tool .link-arrow { margin-top: 0; }
/* RMP is the third card in Jak pracuję. Keep all copy within the shared slide layout. */
.rmp__intro { min-width: 0; }
.rmp .slide__title { max-width: 22ch; }
.rmp__intro .eyebrow { font-size: 0.6875rem; line-height: 1.6; margin-bottom: var(--space-4); }
.rmp__intro > .lead { font-size: 1.125rem; }
.rmp__intro > p:not(.lead):not(.eyebrow):not(.slide__num) { font-size: 1rem; }
.rmp__intro > p { max-width: 33em; }
.rmp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-content: start; min-width: 0; }
.rmp__photo { min-width: 0; margin: 0; }
.rmp__photo img { display: block; width: 100%; object-fit: cover; border-radius: var(--radius-photo); }
.rmp__photo--workshop { grid-column: 1 / -1; }
.rmp__photo--workshop img { aspect-ratio: 4 / 3; object-position: 50% 76%; }
.rmp__photo--detail { grid-column: 2; margin-top: calc(-1 * var(--space-9)); border: 6px solid var(--color-paper); border-radius: 10px; background: var(--color-paper); }
.rmp__photo--detail img { aspect-ratio: 4 / 5; object-position: 50% 65%; }
@media (min-width: 48em) {
  .tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .offer { grid-template-columns: 1fr 1fr; gap: 0; }
  .hub { padding-right: var(--space-8); }
  .hub + .hub { position: relative; padding-left: var(--space-8); padding-right: 0; }
  .hub + .hub::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--color-line-paper); transform-origin: top; transition: transform 1400ms var(--ease) 300ms; }
  .reveal-ready:not(.reduce-motion) .offer:not(.is-revealed) .hub + .hub::before { transform: scaleY(0); }
  .rmp .slide__text { grid-column: 7 / span 6; }
  .rmp .slide__media { grid-column: 1 / span 5; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .rmp__gallery { max-width: 40rem; }
}

/* --- Karolina ----------------------------------------------------------------------------- */
#karolina { overflow-x: clip; } /* poświata portretu nie może poszerzać strony na telefonie */
.about { display: grid; gap: var(--space-7); align-items: end; }
.about__portrait { position: relative; margin: 0 auto; width: min(100%, 360px); }
.about__portrait img { position: relative; width: 100%; }
.about__text .h2 { max-width: 14ch; }
.steps-list { margin: var(--space-6) 0 var(--space-5); padding: 0; list-style: none; counter-reset: s; display: grid; gap: 0; max-width: 34em; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-line-dark); }
.steps-list li:last-child { border-bottom: 1px solid var(--color-line-dark); }
.steps-list li::before { content: '0' counter(s); font: 600 var(--text-caption) / 1.9 var(--font-heading); color: var(--color-brand); letter-spacing: 0.06em; }
.steps-list strong { display: block; font: 600 1.0625rem / 1.4 var(--font-heading); }
.steps-list span { color: var(--color-text-muted); font-size: var(--text-ui); }
@media (min-width: 64em) {
  .about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .about__portrait { grid-column: 1 / span 5; width: min(100%, 400px); }
  .about__text { grid-column: 7 / span 6; }
}

/* --- Wiedza ------------------------------------------------------------------------------- */
/* Para „tytuł → odpowiedź”: cały wiersz jest celem linku. Po najechaniu tytuł dostaje podkreślenie-marker
   i strzałkę, po linii wiersza biegnie iskra do opisu, a opis po prawej powoli pulsuje, dopóki kursor jest na linku.
   Pozostałe wiersze przygasają.  */
@property --pulse { syntax: '<number>'; inherits: true; initial-value: 0; }
.articles { margin-top: var(--space-6); border-top: 1px solid var(--color-line-paper); }
.article { position: relative; isolation: isolate; display: grid; gap: var(--space-2); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line-paper); transition: opacity 420ms var(--ease); }
.article::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--space-4)); z-index: -1; border-radius: var(--radius-control); background: linear-gradient(90deg, rgb(255 208 40 / 0) 0%, rgb(255 208 40 / 0.1) 45%, rgb(255 208 40 / 0.22) 100%); opacity: 0; transition: opacity 520ms var(--ease); }
.article::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.95), transparent) -40% 0 / 22% 100% no-repeat, linear-gradient(90deg, var(--color-ink), var(--color-brand));
  transform: scaleX(0); transform-origin: left; transition: transform 760ms var(--ease);
}
.article__topic { margin: 0; font: 600 var(--text-eyebrow) / 1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted-paper); transition: letter-spacing 520ms var(--ease), color 320ms; }
.article :is(h2, h3) { font: 500 clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem) / 1.25 var(--font-heading); letter-spacing: -0.02em; }
.article :is(h2, h3) a { display: inline-flex; align-items: baseline; gap: 0.45em; text-decoration: none; }
.article :is(h2, h3) a::before { content: ''; position: absolute; inset: 0; z-index: 1; } /* rozciągnięty link: cały wiersz */
.article__title {
  padding-bottom: 0.06em;
  background: linear-gradient(var(--color-brand), var(--color-brand)) 0 92% / 0% 0.34em no-repeat, linear-gradient(rgb(37 38 41 / 0.35), rgb(37 38 41 / 0.35)) 0 100% / 100% 1px no-repeat;
  transition: background-size 620ms var(--ease), transform 520ms var(--ease);
}
.article__go { display: inline-block; opacity: 0; transform: translateX(-0.6em); transition: opacity 320ms, transform 520ms var(--ease); }
.article__lead { position: relative; margin: 0; color: var(--color-text-muted-paper); max-width: 40em; transition: transform 620ms var(--ease), color 420ms; }
.article__answer {
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0.1em 0.2em; margin: 0 -0.2em; border-radius: 4px;
  background: linear-gradient(rgb(255 208 40 / calc(0.18 + var(--pulse) * 0.62)), rgb(255 208 40 / calc(0.18 + var(--pulse) * 0.62))) 0 0 / 0% 100% no-repeat;
  box-shadow: 0 0 calc(var(--pulse) * 22px) rgb(255 208 40 / calc(var(--pulse) * 0.5));
  transition: background-size 760ms var(--ease) 140ms;
}
.article__num { position: relative; margin: 0; font: 600 var(--text-caption) / 2 var(--font-heading); color: var(--color-text-muted-paper); transition: color 320ms; }
.article__num::before, .article__num::after { position: absolute; inset: 0; z-index: -1; border-radius: 50%; }
.article__num::before { background: var(--color-brand); transform: scale(0); transition: transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.article__num::after { border: 2px solid var(--color-brand); opacity: 0; }
.ext { font-size: 0.75em; white-space: nowrap; }
@media (min-width: 64em) {
  .article { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 4fr); column-gap: var(--gutter); align-items: start; padding: var(--space-6) 0; }
  .article__num { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 2.4em; height: 2.4em; display: grid; place-items: center; line-height: 1; transform: translateX(-0.7em); }
  .article__num::before, .article__num::after { content: ''; }
  .article__topic { grid-column: 2; grid-row: 1; }
  .article :is(h2, h3) { grid-column: 2; grid-row: 2; }
  .article__lead { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .article__lead::before { content: ''; position: absolute; left: -1.4em; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--color-brand); transform: scale(0); transition: transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 420ms; }
}

/* Stan aktywny pary: najechanie kursorem albo fokus z klawiatury. */
.articles:has(.article:hover, a:focus-visible) .article:not(:hover, :has(a:focus-visible)) { opacity: 0.42; }
.article:is(:hover, :has(a:focus-visible))::before { opacity: 1; }
.article:is(:hover, :has(a:focus-visible))::after { transform: scaleX(1); animation: spark-run 2600ms linear 700ms infinite; }
.article:is(:hover, :has(a:focus-visible)) .article__topic { letter-spacing: 0.22em; color: var(--color-ink); }
.article:is(:hover, :has(a:focus-visible)) .article__title { transform: translateX(0.3em); background-size: 100% 0.34em, 100% 1px; }
.article:is(:hover, :has(a:focus-visible)) .article__go { opacity: 1; transform: translateX(0.3em); animation: go-nudge 2600ms var(--ease) 600ms infinite; }
.article:is(:hover, :has(a:focus-visible)) .article__num { color: var(--color-ink); }
.article:is(:hover, :has(a:focus-visible)) .article__num::before { transform: scale(1); }
.article:is(:hover, :has(a:focus-visible)) .article__num::after { animation: num-ring 2600ms ease-out 400ms infinite; }
.article:is(:hover, :has(a:focus-visible)) .article__lead { color: var(--color-ink); }
@media (min-width: 64em) { .article:is(:hover, :has(a:focus-visible)) .article__lead { transform: translateX(-0.5em); } }
.article:is(:hover, :has(a:focus-visible)) .article__lead::before { transform: scale(1); animation: num-ring-dot 2600ms ease-in-out 900ms infinite; }
.article:is(:hover, :has(a:focus-visible)) .article__answer { background-size: 100% 100%; animation: answer-pulse 2600ms ease-in-out 900ms infinite; }
@keyframes answer-pulse { 0%, 100% { --pulse: 0; } 50% { --pulse: 1; } }
@keyframes spark-run { from { background-position: -40% 0, 0 0; } 60%, to { background-position: 140% 0, 0 0; } }
@keyframes go-nudge { 0%, 100% { transform: translateX(0.3em); } 30% { transform: translateX(0.75em); } 55% { transform: translateX(0.3em); } }
@keyframes num-ring { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes num-ring-dot { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 208 40 / 0.7); } 50% { box-shadow: 0 0 0 8px rgb(255 208 40 / 0); } }
.reduce-motion .article::after, .reduce-motion .article__go, .reduce-motion .article__num::after, .reduce-motion .article__lead::before, .reduce-motion .article__answer { animation: none !important; }
.articles__more { margin-top: var(--space-6); }
.dummy-note {
  position: fixed; left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); z-index: 30; margin: 0;
  width: max-content; max-width: min(calc(100vw - 2rem), 30rem); display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.85rem 1.15rem; border-radius: 18px; border: 1px solid rgb(255 208 40 / 0.35); background: var(--color-ink); color: var(--color-paper);
  font-size: var(--text-caption); line-height: 1.45; box-shadow: 0 14px 36px rgb(0 0 0 / 0.3);
  opacity: 0; transform: translate(-50%, 1rem); pointer-events: none; transition: opacity 260ms, transform 420ms var(--ease);
}
.dummy-note.is-shown { opacity: 1; transform: translate(-50%, 0); }
.dummy-note:empty { visibility: hidden; }
.dummy-note::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 0.4em; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 4px rgb(255 208 40 / 0.18); }

/* --- Rozmowa i kontakt -------------------------------------------------------------------- */
.cta-band { display: grid; gap: var(--space-6); align-items: end; }
.cta-band .h2 { margin: 0; max-width: 16ch; }
.cta-band .actions { flex-direction: column; align-items: flex-start; }
@media (min-width: 64em) { .cta-band { grid-template-columns: 1fr auto; } .cta-band .actions { align-items: flex-end; } }

.contact { display: grid; gap: var(--space-7); }
.contact__channels { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; }
.contact__channels dt { font-size: var(--text-caption); color: var(--color-text-muted); }
.contact__channels dd { margin: 0; }
.contact__channels a { font: 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.3 var(--font-heading); display: inline-flex; min-height: 44px; align-items: center; }
.form { padding: var(--space-6) var(--space-5); border-radius: var(--radius-module); background: var(--color-surface-dark); border: 1px solid var(--color-line-dark); }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-5); min-width: 0; }
.form fieldset:disabled { opacity: 0.55; }
.form__note { display: flex; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: rgb(255 208 40 / 0.1); font-size: var(--text-caption); line-height: 1.5; }
.form__note strong { color: var(--color-brand); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 500; }
.field .req, .field .opt { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-caption); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 0.75rem 1rem; border: 1px solid rgb(244 241 233 / 0.5); border-radius: 10px; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-ui); }
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-paper) 50%), linear-gradient(135deg, var(--color-paper) 50%, transparent 50%); background-position: right 1.2rem center, right 0.85rem center; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 1px; border-color: var(--color-brand); }
.field [aria-invalid='true'] { border-color: var(--color-error-dark); }
.field-hint { margin: 0; font-size: var(--text-caption); color: var(--color-text-muted); }
.error-summary, .form-status { padding: var(--space-4) var(--space-5); border-radius: var(--radius-control); margin-bottom: var(--space-5); }
.error-summary { border: 2px solid var(--color-error-dark); background: rgb(255 180 180 / 0.08); }
.error-summary h3, .form-status h3 { font: 600 1.0625rem / 1.4 var(--font-heading); margin-bottom: var(--space-2); }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary a { color: var(--color-error-dark); }
.form-status { border: 2px solid var(--color-brand); background: rgb(255 208 40 / 0.08); }
.form-status p:last-child { margin: 0; }
@media (min-width: 64em) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .contact__intro { grid-column: 1 / span 5; }
  .form { grid-column: 7 / span 6; padding: var(--space-7); }
}

/* --- Stopka ------------------------------------------------------------------------------- */
/* --- Papierowy samolocik w kontakcie (dekoracja, js/paper-plane.js) ------------------------ */
#kontakt { overflow: clip; }
.plane-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.plane-trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.plane { position: absolute; left: 0; top: 0; width: 64px; height: 40px; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; perspective: 240px; will-change: transform; }
.plane::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; } /* większy cel do złapania */
.plane.is-held { cursor: grabbing; }
.plane__body { width: 100%; height: 100%; }
.plane__body svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 9px rgb(0 0 0 / 0.38)); transition: filter 240ms; }
.plane:hover .plane__body svg { filter: drop-shadow(0 16px 12px rgb(0 0 0 / 0.4)) drop-shadow(0 0 10px rgb(255 208 40 / 0.35)); }
.plane.is-held .plane__body svg { filter: drop-shadow(0 26px 18px rgb(0 0 0 / 0.42)); }
.plane-hint { position: absolute; left: 0; top: 0; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-ink); font: 600 0.75rem / 1.6 var(--font-body); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 200ms; }
.plane-hint.is-shown { opacity: 1; }
@media print { .plane-layer { display: none; } }

/* Stopka odchudzona: jeden wiersz (znak · linki · kontakt) i nota praw autorskich. */
.site-footer { background: var(--color-ink); padding-block: var(--space-6) var(--space-4); font-size: var(--text-ui); }
.footer-grid { display: grid; gap: var(--space-2) var(--space-6); align-items: center; }
.footer-grid > * { min-width: 0; }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
.footer-grid a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-navs { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
.brand--footer img { height: 120px; }
.footer-grid .ext { margin-left: 0.2em; }
.footer-contact { margin: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-5); color: var(--color-text-muted); }
.footer-contact a { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.footer-note { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-line-dark); font-size: var(--text-caption); color: var(--color-text-muted); }
@media (min-width: 64em) {
  .footer-grid { grid-template-columns: auto minmax(0, 1fr) auto; }
  .footer-navs { justify-content: center; }
}

.review-only { display: none; }
/* --- Wiadomość w grze: wejście, niedopowiedzenia, odpowiedzi ------------------------------ */
.game__label { display: flex; align-items: center; gap: var(--space-2); }
.game__label-time { font-weight: 500; letter-spacing: 0.08em; opacity: 0.7; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 0 rgb(255 208 40 / 0.6); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 10px rgb(255 208 40 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 208 40 / 0); } }
.game__message--hero { position: relative; margin-block: var(--space-4) var(--space-7); }
.game__message--hero p { font: 500 clamp(2.1rem, 1.3rem + 2.4vw, 3.25rem) / 2 var(--font-heading); letter-spacing: -0.03em; max-width: 16ch; }
.game__message--rich .w { display: inline-block; }
/* Słowa wchodzą kaskadą po krótkim „pisaniu”. Stan bazowy = końcowy (bez JS i przy ograniczonym ruchu). */
.game__message.is-intro .w { animation: word-in 520ms var(--ease) both; animation-delay: calc(820ms + var(--w) * 75ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(0.4em) rotate(2deg); filter: blur(8px); } }
.typing { position: absolute; left: 0; top: 0.9em; display: none; gap: 6px; padding: 0.7rem 0.9rem; border-radius: 18px 18px 18px 4px; background: rgb(244 241 233 / 0.08); }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-paper); opacity: 0.5; animation: typing-dot 900ms ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 150ms; }
.typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes typing-dot { 50% { transform: translateY(-4px); opacity: 1; } }
.game__message.is-intro .typing { display: inline-flex; animation: typing-life 820ms linear both; }
@keyframes typing-life { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
/* Niedopowiedzenia: podkreślenie „rysuje się”, nad słowem wyskakuje pytanie, potem delikatnie pulsuje. */
.amb, .hit { position: relative; white-space: nowrap; background-image: linear-gradient(var(--color-brand), var(--color-brand)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 0.09em; color: var(--color-brand); }
.amb__tag, .hit__tag { position: absolute; left: var(--tl, 50%); bottom: calc(100% + 0.08em); transform: translateX(var(--tx, -50%)); padding: 0.32rem 0.65rem; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-ink); font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px -6px rgb(255 208 40 / 0.6); }
.amb__tag::after, .hit__tag::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--color-brand); }
.game__message.is-intro .amb { animation: amb-line 600ms var(--ease) both; animation-delay: calc(1900ms + var(--a) * 520ms); }
@keyframes amb-line { from { background-size: 0% 0.09em; color: inherit; } }
.game__message.is-intro .amb__tag, .game__message.is-settled .amb__tag { animation: tag-in 460ms cubic-bezier(0.3, 1.6, 0.5, 1) both, tag-pulse 4.5s ease-in-out infinite; animation-delay: calc(2150ms + var(--a) * 520ms), calc(4200ms + var(--a) * 1500ms); }
.game__message.is-settled .amb__tag { animation-delay: calc(var(--a) * 160ms), calc(2000ms + var(--a) * 1500ms); }
@keyframes tag-in { from { opacity: 0; transform: translate(var(--tx, -50%), 10px) scale(0.5); } }
@keyframes tag-pulse { 0%, 30%, 100% { transform: translateX(var(--tx, -50%)) scale(1); } 15% { transform: translateX(var(--tx, -50%)) scale(1.12); box-shadow: 0 8px 26px -4px rgb(255 208 40 / 0.9); } }
/* Krok 1: chmurki z pytaniami mieszczą się między wierszami i nie dotykają tekstu wiersza wyżej. */
.game__message--rich:not(.game__message--hero) { padding-top: 0.7em; }
.game__message--rich:not(.game__message--hero) p { line-height: 2.7; }
/* Dwie chmurki w jednym wierszu: późniejsza schodzi pod słowo (js: declutterTags). */
.amb__tag.is-below, .hit__tag.is-below { bottom: auto; top: calc(100% + 0.12em); }
.amb__tag.is-below::after, .hit__tag.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--color-brand); }
/* Odpowiedź B: fragmenty, które odpowiadają na niedopowiedzenia, podświetlają się po kolei. */
.game__message--chosen p { line-height: 2.4; }
.hit { color: inherit; background-image: linear-gradient(rgb(255 208 40 / 0.22), rgb(255 208 40 / 0.22)); background-size: 100% 100%; background-position: 0 0; border-radius: 4px; white-space: normal; padding: 0.04em 0.08em; margin: 0 -0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hit__tag { font-size: 0.6875rem; padding: 0.2rem 0.5rem; bottom: calc(100% + 0.1em); left: 0; transform: none; }
.hit__tag::after { left: 12px; }
.is-enter .hit { animation: hit-mark 700ms var(--ease) both; animation-delay: calc(350ms + var(--a) * 420ms); }
.is-enter .hit__tag { animation: hit-tag 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(550ms + var(--a) * 420ms); }
@keyframes hit-mark { from { background-size: 0% 100%; } }
@keyframes hit-tag { from { opacity: 0; transform: translate(var(--tx, -50%), 8px) scale(0.6); } }
/* Odpowiedzi A i C: pytania, które wciąż zostają otwarte. */
.open-q { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.open-q__label { font-size: var(--text-caption); color: var(--color-text-muted); margin-right: var(--space-1); }
.open-q__item { padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); border: 1px dashed rgb(255 208 40 / 0.7); color: var(--color-brand); font-size: var(--text-caption); font-weight: 600; }
.is-enter .open-q__item { animation: tag-in-row 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both, wobble 2.8s ease-in-out infinite; animation-delay: calc(350ms + var(--a) * 160ms), calc(1200ms + var(--a) * 300ms); }
@keyframes tag-in-row { from { opacity: 0; transform: translateY(8px) scale(0.6); } }
@keyframes wobble { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } 95% { transform: rotate(-2deg); } }
/* Każdy krok wchodzi kaskadą. */
.game__content.is-enter > * { animation: step-in 520ms var(--ease) both; }
.game__content.is-enter > :nth-child(2) { animation-delay: 70ms; }
.game__content.is-enter > :nth-child(3) { animation-delay: 140ms; }
.game__content.is-enter > :nth-child(4) { animation-delay: 210ms; }
.game__content.is-enter > :nth-child(5) { animation-delay: 280ms; }
.game__content.is-enter > :nth-child(n + 6) { animation-delay: 350ms; }
.game__content.is-enter .choice, .game__content.is-enter .context { animation: step-in 480ms var(--ease) both; }
.game__content.is-enter .choice:nth-of-type(2), .game__content.is-enter .context:nth-child(2) { animation-delay: 120ms; }
.game__content.is-enter .choice:nth-of-type(3), .game__content.is-enter .context:nth-child(3) { animation-delay: 220ms; }
@keyframes step-in { from { opacity: 0; transform: translateY(16px); } }

/* Kaskada słów w każdym kroku gry (jak wejście wiadomości). Stan bazowy = końcowy. */
.game__content [data-cascade] .w { display: inline-block; }
.game__content.is-enter [data-cascade] .w { animation: word-in 640ms var(--ease) both; animation-delay: calc(var(--d, 0ms) + var(--w) * 46ms); }


/* --- Rozmowa w grze: dymki z pisaniem i kaskadą słów ----------------------------------- */
.chat { display: grid; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5); }
.bubble { position: relative; justify-self: start; max-width: min(34em, 94%); padding: 0.8rem 1.05rem 0.9rem; border-radius: 18px 18px 18px 4px; border: 1px solid var(--color-line-dark); background: rgb(244 241 233 / 0.06); }
.bubble--sent { justify-self: end; border-radius: 18px 18px 4px 18px; border-color: rgb(255 208 40 / 0.35); background: rgb(255 208 40 / 0.09); }
.bubble__who { display: block; margin-bottom: 0.4rem; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.bubble__text { margin: 0; line-height: 1.65; }
.bubble--sent .bubble__text, .context__panel .bubble__text { line-height: 2.5; }
.bubble .w { display: inline-block; }
.bubble .typing { left: 1.05rem; top: auto; bottom: 0.75rem; padding: 0.4rem 0.65rem; }
:is(.game__content.is-enter, .context.is-open) .bubble { animation: bubble-in 520ms var(--ease) both; animation-delay: var(--t0); }
:is(.game__content.is-enter, .context.is-open) .bubble .typing { display: inline-flex; animation: typing-life var(--type) linear both; animation-delay: var(--t0); }
:is(.game__content.is-enter, .context.is-open) .bubble .w { animation: word-in 620ms var(--ease) both; animation-delay: calc(var(--t0) + var(--type) + var(--w) * 48ms); }
:is(.game__content.is-enter, .context.is-open) .bubble .hit { animation: hit-mark 800ms var(--ease) both; animation-delay: calc(var(--t0) + var(--type) + 650ms + var(--a) * 420ms); }
:is(.game__content.is-enter, .context.is-open) .bubble .hit__tag { animation: hit-tag 460ms cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(var(--t0) + var(--type) + 850ms + var(--a) * 420ms); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
.context__panel { padding-top: var(--space-1); }
.context__panel .bubble { max-width: 100%; }
/* Krok 1: wybór pytania podświetla odpowiadające mu niedopowiedzenie w wiadomości. */
.game__message--rich .amb { transition: opacity var(--dur-reveal), text-shadow var(--dur-reveal); }
.game__message--rich:has(.amb.is-focus) .amb:not(.is-focus) { opacity: 0.45; }
.amb.is-focus { text-shadow: 0 0 26px rgb(255 208 40 / 0.65); }
.game__message .amb.is-focus .amb__tag { animation: tag-bounce 700ms cubic-bezier(0.3, 1.6, 0.5, 1) both; box-shadow: 0 10px 30px -6px rgb(255 208 40 / 0.95); }
@keyframes tag-bounce { 0% { transform: translateX(var(--tx, -50%)) scale(1); } 45% { transform: translateX(var(--tx, -50%)) scale(1.28); } 100% { transform: translateX(var(--tx, -50%)) scale(1.12); } }
/* Krok 3: trzy wiadomości „piszą się” po kolei jak szkice. */
.game__content.is-enter .choice.choice--draft { animation: step-in 520ms var(--ease) both; animation-delay: var(--t0); }
.choice--draft .w { display: inline-block; }
.game__content.is-enter .choice--draft .w { animation: word-in 520ms var(--ease) both; animation-delay: calc(var(--t0) + 120ms + var(--w) * 26ms); }
/* Krok 4: pytania „wciąż otwarte” po odpowiedziach zespołu. */
.game__content.is-enter .open-q { animation: step-in 520ms var(--ease) both; animation-delay: var(--t0); }
.game__content.is-enter .open-q__item { animation-delay: calc(var(--t0) + 150ms + var(--a) * 160ms), calc(var(--t0) + 1200ms + var(--a) * 300ms); }
/* Krok 5: pytanie do zabrania „pisze się”, a nad „gotowe” wyskakuje etykieta. */
.game__takeaway { position: relative; line-height: 2.15; padding-top: 0.6em; }
.game__takeaway .w { display: inline-block; }
.game__takeaway .amb { color: var(--color-paper); }
.game__content.is-enter .game__takeaway .typing { display: inline-flex; top: 0.4em; animation: typing-life 700ms linear both; animation-delay: var(--t0); }
.game__content.is-enter .game__takeaway .w { animation: word-in 640ms var(--ease) both; animation-delay: calc(var(--t0) + 700ms + var(--w) * 70ms); }
.game__content.is-enter .game__takeaway .amb { animation: amb-line 700ms var(--ease) both; animation-delay: calc(var(--t0) + 1500ms); }
.game__content.is-enter .game__takeaway .amb__tag { animation: tag-in 480ms cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(var(--t0) + 1800ms); }

/* Stopka panelu gry: link do przykładu bez interakcji (jak „Pomiń…” w pasku u góry). */
.game__foot { display: flex; justify-content: flex-end; padding: var(--space-2) var(--space-5); border-top: 1px solid var(--color-line-dark); font-size: var(--text-caption); }
.game__foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-paper); }

/* --- Scena gry: mapa interpretacji (CSS 3D) ------------------------------------------- */
/* Krok 2: trzy osoby „przychodzą” jak wiadomości — karta wjeżdża z rozmyciem, po przycisku przechodzi błysk,
   awatar wyskakuje z pulsującym pierścieniem, kropki „pisze…” zamieniają się w znacznik nowej wiadomości. */
.game__content.is-enter .contexts > .context { animation: ctx-arrive 760ms var(--ease) both; animation-delay: calc(420ms + var(--c) * 650ms); }
@keyframes ctx-arrive { from { opacity: 0; transform: translateX(-32px) scale(0.97); filter: blur(6px); } 55% { opacity: 1; filter: blur(0); } }
.context__toggle { background-image: linear-gradient(100deg, transparent 35%, rgb(255 208 40 / 0.2) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; }
.game__content.is-enter .context__toggle { animation: ctx-sweep 1100ms var(--ease) both; animation-delay: calc(700ms + var(--c) * 650ms); }
@keyframes ctx-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.game__content.is-enter .context__initial { animation: avatar-pop 520ms cubic-bezier(0.3, 1.7, 0.5, 1) both; animation-delay: calc(560ms + var(--c) * 650ms); }
.game__content.is-enter .context:not(.is-seen) .context__initial { animation: avatar-pop 520ms cubic-bezier(0.3, 1.7, 0.5, 1) both, avatar-ping 2.6s ease-out infinite; animation-delay: calc(560ms + var(--c) * 650ms), calc(1900ms + var(--c) * 650ms); }
@keyframes avatar-pop { from { transform: scale(0); } }
@keyframes avatar-ping { 0% { box-shadow: 0 0 0 0 rgb(255 208 40 / 0.55); } 70%, 100% { box-shadow: 0 0 0 12px rgb(255 208 40 / 0); } }
.game__content.is-enter .context__teaser { animation: teaser-in 900ms var(--ease) both; animation-delay: calc(900ms + var(--c) * 650ms); }
@keyframes teaser-in { from { opacity: 0; filter: blur(10px); letter-spacing: 0.08em; } }
.game__content.is-enter .context__unread .typing { display: inline-flex; animation: typing-life 1000ms linear both; animation-delay: calc(800ms + var(--c) * 650ms); }
.game__content.is-enter .context__unread b { animation: unread-in 460ms cubic-bezier(0.3, 1.7, 0.5, 1) both, unread-pulse 2.4s ease-in-out infinite; animation-delay: calc(1800ms + var(--c) * 650ms), calc(2400ms + var(--c) * 650ms); }
@keyframes unread-in { from { transform: scale(0); } }
@keyframes unread-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 208 40 / 0.6); transform: scale(1); } 40% { box-shadow: 0 0 0 7px rgb(255 208 40 / 0); transform: scale(1.12); } }
.reduce-motion .context, .reduce-motion .context__toggle, .reduce-motion .context__initial, .reduce-motion .context__teaser, .reduce-motion .context__unread b { animation: none !important; }
.reduce-motion .context__unread .typing { display: none !important; }
/* Scena obok: słowo każdej osoby rozbłyska, gdy przychodzi jej karta. */
.interp__node.is-ping .interp__word { animation: interp-ping 1200ms var(--ease) both; }
.interp__node.is-ping .interp__name { animation: interp-name 1200ms var(--ease) both; }
@keyframes interp-ping { 0% { text-shadow: 0 0 22px rgb(255 181 42 / 0.45); scale: 1; } 30% { text-shadow: 0 0 44px rgb(255 208 40 / 1), 0 0 90px rgb(255 208 40 / 0.5); scale: 1.14; color: #FFF3C4; } 100% { text-shadow: 0 0 22px rgb(255 181 42 / 0.45); scale: 1; } }
@keyframes interp-name { 30% { color: var(--color-brand); opacity: 1; } }
.interp { position: absolute; inset: 0; overflow: hidden; perspective: 900px; perspective-origin: 50% 42%; container-type: size; }
.interp__world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.interp__node { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform, opacity; }
.interp__node > * { position: absolute; left: 0; top: 0; white-space: nowrap; }
.interp__word { translate: -50% -50%; font: 600 clamp(1.25rem, 7.2cqmin, 3rem) / 1 var(--font-heading); letter-spacing: -0.02em; color: var(--color-brand); text-shadow: 0 0 22px rgb(255 181 42 / 0.45); transition: color var(--dur-reveal); }
.interp__node--center .interp__word { font-size: clamp(1.5rem, 9.5cqmin, 3.8rem); color: var(--color-paper); text-shadow: 0 0 30px rgb(255 208 40 / 0.55); }
.interp__node.is-lit .interp__word { text-shadow: 0 0 32px rgb(255 208 40 / 0.9); }
.interp__name { translate: -50% calc(-100% - clamp(1rem, 6cqmin, 2.4rem)); font: 600 clamp(0.75rem, 2.6cqmin, 0.875rem) / 1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); opacity: var(--names, 0); transition: opacity var(--dur-arrange); }
.interp__node.is-lit .interp__name { color: var(--color-brand); }
.interp__guess { translate: -50% -50%; padding: 0.38em 0.8em; border-radius: var(--radius-pill); border: 1px solid rgb(255 181 42 / 0.5); background: rgb(37 38 41 / 0.82); color: #F4E7C2; font: 600 clamp(0.75rem, 2.9cqmin, 0.9375rem) / 1 var(--font-body); }
.interp__answer { translate: -50% clamp(0.9rem, 4.4cqmin, 1.9rem); padding: 0.42em 0.9em; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-ink); font: 600 clamp(0.75rem, 3.1cqmin, 1rem) / 1 var(--font-body); box-shadow: 0 8px 26px -8px rgb(255 208 40 / 0.85); opacity: var(--answers, 0); scale: 0.4; transition: opacity var(--dur-reveal); }
.interp__node.is-resolved .interp__answer { animation: answer-lock 620ms cubic-bezier(0.3, 1.7, 0.5, 1) both; animation-delay: calc(var(--d, 0) * 1ms); }
.interp__node[data-i='0'].is-resolved .interp__answer { --d: 120; }
.interp__node[data-i='1'].is-resolved .interp__answer { --d: 360; }
.interp__node[data-i='2'].is-resolved .interp__answer { --d: 600; }
@keyframes answer-lock { from { scale: 0.3; opacity: 0; } 60% { scale: 1.12; opacity: 1; } to { scale: 1; opacity: 1; } }
.interp__node.is-resolved .interp__word { animation: word-lock 520ms var(--ease) both; }
@keyframes word-lock { 40% { scale: 1.1; } }
.interp__open { position: absolute; left: 0; top: 0; translate: -50% -50%; padding: 0.38em 0.8em; border-radius: var(--radius-pill); border: 1px dashed var(--color-brand); color: var(--color-brand); font: 600 clamp(0.75rem, 2.9cqmin, 0.9375rem) / 1 var(--font-body); white-space: nowrap; }
.reduce-motion .interp__answer, .reduce-motion .interp__node.is-resolved .interp__answer { scale: 1; }

/* --- View Transitions: zmiana kroku gry tylko w obrębie panelu ------------------------- */
:root { view-transition-name: none; }
.game__content { view-transition-name: game-step; }
::view-transition-old(game-step) { animation: vt-out 150ms var(--ease) both; }
::view-transition-new(game-step) { animation: vt-in 260ms var(--ease) 40ms both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* --- Ruch: preferencja systemowa od pierwszego renderu + przełącznik strony --------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}
.reduce-motion { scroll-behavior: auto; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
.reduce-motion .pw-object { transform: none; }

@media (forced-colors: active) {
  .btn, .choice, .context, .chip { border: 1px solid CanvasText; }
  .pw-object { display: none; }
}

/* --- Poprawki z audytu responsywności (AI, 25.10.2026) ------------------------------------- */
p, li, .lead { text-wrap: pretty; } /* bez pojedynczych słów w ostatnim wierszu */
/* Chmurki przy krawędzi panelu gry: przyklejone do krawędzi zamiast wystawać (js: declutterTags). */
.amb__tag.is-edge-l, .hit__tag.is-edge-l { --tl: -0.2em; --tx: 0%; }
.amb__tag.is-edge-l::after, .hit__tag.is-edge-l::after { left: 1.2em; }
.amb__tag.is-edge-r, .hit__tag.is-edge-r { --tl: calc(100% + 0.2em); --tx: -100%; }
.amb__tag.is-edge-r::after, .hit__tag.is-edge-r::after { left: auto; right: 1.2em; margin-left: 0; margin-right: -5px; }
/* Cele dotyku (WCAG 2.5.8): linki w dymku, w procesie i chip dźwięku. */
.person__bubble--links a, .hub__process a { display: inline-flex; align-items: center; min-height: 32px; white-space: nowrap; }
.stage-controls .chip { min-height: 44px; }
.plane::before { inset: -6px; }
/* Telefon: start gry bliżej (niższa scena w zaproszeniu), krótsza oferta i karty, niższy obiekt na niskich ekranach. */
@media (max-width: 63.99em) {
  .game[data-state='idle'] .game__stage { min-height: 210px; }
  .contact { row-gap: 11rem; } /* pas lotu samolocika między informacją o dofinansowaniu a formularzem */
}
@media (max-width: 47.99em) {
  /* Intro oferty zostaje samo na ekranie także na telefonie (decyzja użytkownika ważniejsza niż długość strony). */
  .offer__intro { min-height: 72svh; padding-block: var(--space-7) var(--space-5); }
  .slides__list { gap: var(--space-5); }
  .slide__frame { aspect-ratio: 3 / 2; }
  .hero .eyebrow { letter-spacing: 0.08em; }
  .person { margin-top: var(--space-4); padding-top: var(--space-3); }
  .person__chat { gap: 0.3rem; }
  .person__bubble { padding: 0.38rem 0.8rem; }
}
@media (max-width: 47.99em) and (max-height: 720px) { .story__stage .object-stage { height: 300px; --object-zoom: 1.2; } }
@media (max-width: 30em) { .btn { padding-inline: 1.1rem; } }
@media (max-width: 24em) { .game__content { padding-inline: var(--space-4); } }
/* Tablet 768–1023: dwie kolumny w kartach „Jak pracuję” i w ofercie, wyższa scena gry. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .slide__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-6); align-items: center; }
  .slide:nth-child(even) .slide__media { order: 2; }
  .offer { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
  .game__stage { min-height: 440px; }
  .game[data-state='idle'] .game__stage { min-height: 300px; }
}

/* Telefon i tablet: stos kart „Jak pracuję” (js: initSlides → slides--stack-m). */
@media (max-width: 63.99em) {
  .slides--stack-m .slides__list { gap: var(--space-6); padding-bottom: var(--space-4); }
  .slides--stack-m .slide { position: sticky; top: var(--stick, calc(var(--space-3) + var(--i) * 10px)); box-shadow: 0 -16px 36px -26px rgb(37 38 41 / 0.45); }
}

/* Oferta na telefonie i tablecie: linia między hubami rysuje się, gdy drugi hub wchodzi na ekran. */
@media (max-width: 63.99em) {
  .hub + .hub { position: relative; padding-top: var(--space-7); }
  .hub + .hub::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-line-paper); transform-origin: left; transition: transform 1400ms var(--ease) 150ms; }
  .reveal-ready:not(.reduce-motion) .hub + .hub:not(:has(> h3.is-revealed))::before { transform: scaleX(0); }
}
/* Telefon i tablet: mniejsze przyciski w nagłówku i w pasku („Kontakt”, „Porozmawiajmy”). */
@media (max-width: 63.99em) {
  .header-actions .btn, .float-bar .btn { min-height: 34px; padding: 0.3rem 0.8rem; font-size: 0.8125rem; }
}
/* Powrót na górę (js: initToTop): półprzezroczysty krąg z pierścieniem postępu. */
.to-top { position: fixed; right: max(var(--space-4), env(safe-area-inset-right, 0px)); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 9; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(28 29 31 / 0.62); backdrop-filter: blur(8px); color: var(--color-paper); box-shadow: 0 8px 24px -10px rgb(0 0 0 / 0.5); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 260ms, transform 360ms var(--ease), background-color 200ms; }
.to-top.is-shown { opacity: 0.82; transform: none; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { opacity: 1; background: rgb(28 29 31 / 0.85); }
.to-top:hover svg path { transform: translateY(-2px); }
.to-top svg { width: 46px; height: 46px; overflow: visible; }
.to-top svg path { transition: transform 260ms var(--ease); }
.to-top__track, .to-top__ring { fill: none; stroke-width: 1.5; }
.to-top__track { stroke: rgb(244 241 233 / 0.16); }
.to-top__ring { stroke: var(--color-brand); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transform: rotate(-90deg); transform-origin: 22px 22px; stroke-linecap: round; }
@media print { .to-top { display: none; } }

/* Editable text markers do not add a layout box on the published website. */
span[data-cms] { display: contents; }

[data-page-sections], .page-section { display: contents; }
.custom-section { padding-block: clamp(64px, 8vw, 120px); }
.custom-section--compact { padding-block: 48px; }
.custom-section--large { padding-block: clamp(96px, 12vw, 180px); }
.custom-section__inner { display:grid; gap:clamp(32px,5vw,80px); align-items:center; }
.custom-section__copy { max-width: 48rem; }
.custom-section__copy p { margin-block:1.5em; line-height:1.7; white-space:normal; }
.custom-section__copy .btn { margin-top:1rem; }
.custom-section__image { margin:0; }
.custom-section__image img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--photo-radius, 0); }
.custom-section--center .custom-section__copy { text-align:center; margin-inline:auto; }
.custom-section--split .custom-section__inner { grid-template-columns:1fr 1fr; }
.custom-section--split.custom-section--image-left .custom-section__image { grid-column:1;grid-row:1; }
.custom-section--split.custom-section--image-left .custom-section__copy { grid-column:2;grid-row:1; }
@media(max-width:700px){.custom-section--split .custom-section__inner{grid-template-columns:1fr}.custom-section--split.custom-section--image-left .custom-section__copy,.custom-section--split.custom-section--image-left .custom-section__image{grid-column:auto;grid-row:auto}}

/* Zmiany z dokumentu 11.11: akapity z panelu (puste linie), zdanie pod eksperymentem, dofinansowanie BUR. */
.about__text .prose [data-cms], .contact__intro [data-cms="kontakt.wstep"], .contact__intro [data-cms="kontakt.zaproszenie"] { white-space: pre-line; }
.experiment__sub { margin: var(--space-3) 0 0; color: var(--color-text-muted); max-width: 34em; }
.experiment__after { margin: var(--space-7) auto 0; max-width: 44rem; text-align: center; font: 500 clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem) / 1.5 var(--font-heading); color: #DEDDD6; text-wrap: balance; }
.bur-band { display: grid; gap: var(--space-4); align-items: center; margin-top: var(--space-8); padding: var(--space-5); border: 1px solid rgb(255 208 40 / 0.55); border-radius: var(--radius-module); background: rgb(255 208 40 / 0.09); }
.bur-band__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: rgb(255 208 40 / 0.28); color: var(--color-ink); }
.bur-band h3 { font: 500 clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem) / 1.3 var(--font-heading); margin: 0 0 var(--space-2); }
.bur-band p { margin: 0; font-size: var(--text-ui); line-height: 1.6; color: var(--color-text-muted-paper); max-width: 46em; }
.bur-band__link { white-space: nowrap; }
@media (min-width: 48em) { .bur-band { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-5); padding: var(--space-5) var(--space-6); } }
.bur-note { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line-dark); max-width: 32rem; }
.bur-note h3 { font: 500 1.125rem / 1.3 var(--font-heading); margin: 0 0 var(--space-2); }
.bur-note p { margin: 0 0 var(--space-3); font-size: var(--text-ui); line-height: 1.6; color: var(--color-text-muted); }
/* Karta RMP z jednym zdjęciem. */
.rmp__gallery { grid-template-columns: 1fr; }

/* Go-live 11.11: ikony mediów w stopce, podpowiedź formularza. */
.footer-social { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line-dark); color: var(--color-paper); transition: background-color 200ms, color 200ms, border-color 200ms; }
.footer-social a:hover, .footer-social a:focus-visible { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-ink); }
.form__hint { margin: var(--space-3) 0 0; font-size: var(--text-caption); color: var(--color-text-muted); }
@media (min-width: 64em) { .footer-grid { grid-template-columns: auto minmax(0, 1fr) auto auto; } }
/* Go-live: pierwszy ekran telefonu mieści tytuł, opis, przyciski i przedstawienie Karoliny. */
@media (max-width: 47.99em) {
  .hero { padding-top: var(--space-2); }
  .hero h1 { margin-bottom: var(--space-4); }
  .hero__intro { font-size: 1rem; line-height: 1.5; margin-bottom: var(--space-5); }
  .bur-band__link, .bur-note .link-arrow { white-space: normal; }
}
@media (max-width: 47.99em) { .footer-note { padding-right: 3.75rem; } } /* miejsce na przycisk powrotu na górę */

/* Formularz: pułapka na boty (niewidoczna), miejsce na test człowieka, treść stron prawnych. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__human { min-height: 65px; }
.form__hint a { color: inherit; }
.footer-legal { margin: var(--space-2) 0 0; font-size: var(--text-caption); color: var(--color-text-muted); }
.footer-legal a { color: inherit; }
.legal { max-width: 46rem; }
.legal h1 { font: 500 clamp(2rem, 1.4rem + 2.4vw, 3.25rem) / 1.1 var(--font-heading); letter-spacing: -0.03em; margin-bottom: var(--space-5); }
.legal h2 { font: 500 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem) / 1.25 var(--font-heading); margin: var(--space-7) 0 var(--space-3); }
.legal p, .legal li { line-height: 1.7; color: #2E2F33; }
.legal ul { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.legal li + li { margin-top: 0.35em; }
.legal a { color: var(--color-ink); }

/* Baner zgody na statystyki: dwa równorzędne przyciski, bez zasłaniania treści na całej szerokości. */
.cookie-banner { position: fixed; z-index: 30; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: 46rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-4) var(--space-5); background: var(--color-ink-deep); color: var(--color-paper); border: 1px solid var(--color-line-dark); border-top: 3px solid var(--color-brand); border-radius: 14px; box-shadow: 0 18px 50px rgb(0 0 0 / 0.45); --focus: var(--color-brand); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { flex: 1 1 20rem; }
.cookie-banner h2 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.cookie-banner p { margin: 0; font-size: var(--text-ui); line-height: 1.5; color: var(--color-text-muted); }
.cookie-banner p a { color: var(--color-paper); white-space: nowrap; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cookie-banner__btn { min-height: 44px; padding: 0.5rem 1.2rem; background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); font-weight: 600; flex: 1 1 auto; }
.cookie-banner__btn:hover { background: var(--color-brand); border-color: var(--color-brand); }
.footer-legal__link { min-height: 44px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; cursor: pointer; }
.footer-legal__link:hover { text-decoration-thickness: 2px; }
@media (max-width: 30em) { .cookie-banner { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); padding: var(--space-4); } }

/* Dotyk: przycisk „Kontakt” w nagłówku i pasku skrótów zachowuje wygląd, ale pole dotyku ma ok. 46 px wysokości. */
.header-actions .btn, .float-bar .btn { position: relative; }
.header-actions .btn::after, .float-bar .btn::after { content: ''; position: absolute; inset: -6px 0; } /* wygląd bez zmian, większe pole dotyku */
.legal .footer-legal__link { min-height: 0; display: inline; }