/* =========================================================================
   FABC · menu (dodatek)
   Przyciski wjeżdżają z prawej, małe okienko z podglądem z lewej.
   Najechanie na przycisk zmienia obrazek w okienku (z glitchem RGB).
   Działa tylko gdy .menu-ov ma klasę .mv (dodaje ją menu-split.js).
   ========================================================================= */

.menu-ov.mv { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4vw;
  padding: 120px var(--gutter) 60px; overflow: hidden; }
.menu-ov.mv[hidden] { display: none !important; }

/* ---------- przyciski: z prawej ---------- */
.mv-links { display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: 6px; counter-reset: mv; }
/* mniejsze przyciski + numer 01–04, który wysuwa się przy najechaniu (jak w starym menu) */
.menu-ov.mv .big { position: relative; font-size: clamp(30px, 3.9vw, 82px); padding: .12em .5em .16em; }
.menu-ov.mv .big::before { counter-increment: mv; content: "0" counter(mv); position: absolute; right: calc(100% + 14px); top: 50%;
  font-size: max(12px, .75vw); font-weight: 600; letter-spacing: .14em; color: #0A0A0A; opacity: 0;
  transform: translate(8px, -20%); transition: opacity .25s, transform .35s cubic-bezier(.16,1,.3,1); }
.menu-ov.mv .big.is-cur::before, .menu-ov.mv .big:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
.menu-ov.mv .big small { font-size: .32em; }
.menu-ov.mv .big { transform: translateX(110vw) rotate(6deg); opacity: 0;
  transition: transform .3s cubic-bezier(.7,0,.84,0), opacity .25s, filter .3s; }
body.menu-open .menu-ov.mv .big { transform: none; opacity: 1; transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .35s, filter .3s; }
body.menu-open .menu-ov.mv .big:nth-child(1) { transition-delay: .04s; }
body.menu-open .menu-ov.mv .big:nth-child(2) { transition-delay: .10s; }
body.menu-open .menu-ov.mv .big:nth-child(3) { transition-delay: .16s; }
body.menu-open .menu-ov.mv .big:nth-child(4) { transition-delay: .22s; }
body.menu-open .menu-ov.mv .big:hover,
body.menu-open .menu-ov.mv .big:focus-visible { transform: translateX(-1vw) rotate(-3deg) scale(1.03); transition-delay: 0s; }
.mv-links.has-cur .big:not(.is-cur) { opacity: .38; filter: saturate(.4); transition-delay: 0s !important; }

/* ---------- lewa strona: okienko + kontakt, wjeżdża z lewej ---------- */
.mv-side { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; align-self: center; }
.mv-side > * { transform: translateX(-60vw); opacity: 0; transition: transform .3s cubic-bezier(.7,0,.84,0), opacity .25s; }
body.menu-open .mv-side > * { transform: none; opacity: 1; transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .4s; }
body.menu-open .mv-side > :nth-child(2) { transition-delay: .08s; }
.menu-ov.mv .menu-contact { position: static; transform: none; max-width: 100%; gap: 10px; }
body.menu-open .menu-ov.mv .menu-contact { transform: none; }
.menu-ov.mv .menu-contact > a { font-size: max(16px, 1.25vw); }

.mv-card { position: relative; width: clamp(220px, 20vw, 380px); aspect-ratio: 4 / 3; border-radius: clamp(16px, 1.3vw, 26px); overflow: hidden;
  background: #0A0A0A; color: #F2F2F2; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
body.menu-open .mv-side > .mv-card { transform: rotate(-2deg); }

/* ---------- podgląd ---------- */
.mv-pv { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.mv-pv.is-on { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; z-index: 1; }
.mv-pv .mv-img, .mv-pv .mv-ch { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.mv-pv .mv-img { transform: scale(1.08); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.mv-pv.is-on .mv-img { transform: scale(1); }
.mv-pv .mv-ch { opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.mv-pv .mv-ch.r { background-color: #ff2a55; background-blend-mode: multiply; }
.mv-pv .mv-ch.b { background-color: #00e5ff; background-blend-mode: multiply; }
.mv-pv::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,10,10,.8), rgba(10,10,10,0)); }

.mv-cap { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.mv-ttl { font-size: clamp(18px, 1.5vw, 30px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.mv-txt { font-size: max(12px, .72vw); color: rgba(242,242,242,.72); line-height: 1.3; }
.mv-pv.is-on .mv-cap > * { animation: mvCapIn .5s cubic-bezier(.16,1,.3,1) both; }
.mv-pv.is-on .mv-txt { animation-delay: .06s; }
@keyframes mvCapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mv-meta { position: absolute; z-index: 4; top: 14px; left: 18px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #F2F2F2; padding: 5px 9px; border-radius: 999px; background: rgba(10,10,10,.55); }
.mv-meta b { color: var(--lime); font-weight: 600; }

/* ---------- glitch przy zmianie obrazka ---------- */
.mv-card.gl .mv-pv.is-on .mv-img { animation: mvSlice .38s steps(1) 1; }
.mv-card.gl .mv-pv.is-on .mv-ch { animation: mvChan .38s steps(1) 1; }
.mv-card.gl .mv-pv.is-on .mv-ch.b { animation-name: mvChanB; }
.mv-card.gl .mv-pv.is-on .mv-ttl { animation: btnGlitch .38s steps(1) 1, mvCapIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes mvSlice {
  0%   { clip-path: inset(0 0 62% 0); transform: translateX(-10px); }
  16%  { clip-path: inset(48% 0 18% 0); transform: translateX(8px); }
  33%  { clip-path: inset(22% 0 50% 0); transform: translateX(-5px); }
  50%  { clip-path: inset(70% 0 4% 0);  transform: translateX(6px); }
  66%  { clip-path: inset(6% 0 78% 0);  transform: translateX(-3px); }
  83%  { clip-path: inset(0 0 0 0);     transform: translateX(2px); }
  100% { clip-path: inset(0 0 0 0);     transform: none; }
}
@keyframes mvChan  { 0% { opacity: .5; transform: translateX(7px); } 33% { opacity: .4; transform: translateX(-5px); } 66% { opacity: .45; transform: translateX(4px); } 100% { opacity: 0; transform: none; } }
@keyframes mvChanB { 0% { opacity: .5; transform: translateX(-7px); } 33% { opacity: .4; transform: translateX(5px); } 66% { opacity: .45; transform: translateX(-4px); } 100% { opacity: 0; transform: none; } }

/* ---------- telefon: przyciski na górze, bez okienka ---------- */
@media (max-width: 760px) {
  .menu-ov.mv { grid-template-columns: 1fr; align-content: start; gap: 32px; padding: 100px 5vw 30px; overflow-y: auto; }
  .mv-links { order: -1; align-items: flex-start; justify-self: stretch; }
  .menu-ov.mv .big { font-size: clamp(30px, 8.6vw, 46px); }
  .menu-ov.mv .big::before { display: none; }
  .mv-card { display: none; }
  .mv-links.has-cur .big:not(.is-cur) { opacity: 1; filter: none; }
}
@media (max-height: 540px) and (max-width: 950px) { .mv-card { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .menu-ov.mv .big, .mv-side > * { transform: none !important; }
  .mv-card.gl * { animation: none !important; }
}

/* =========================================================================
   Kontakt: dane z lewej (większe), CTA „Let's create…” z prawej, zakreślone
   ========================================================================= */
.contact .cmid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; gap: 4vw; flex: 1; }
.contact .cw-cta { margin-left: calc(-1 * clamp(34px, 3.4vw, 70px)); }
.cinfo { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; justify-self: end; text-align: right; }
.contact .cmail { font-size: max(22px, 2.1vw); font-weight: 400; letter-spacing: -.02em; border-bottom-width: 1.5px; }
.contact .cmail:hover { color: var(--pink); }
.contact .cphone { font-size: max(18px, 1.5vw); font-weight: 300; margin-top: -2px; color: rgba(255,255,255,.75); }
.contact .cphone:hover { color: var(--pink); }

.cw-cta { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-right: 1vw;
  padding: clamp(28px, 2.6vw, 52px) clamp(34px, 3.4vw, 70px); color: #F2F2F2; isolation: isolate; }
.cw-cta-lbl { font-size: max(11px, .7vw); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.cw-cta-t { font-size: max(30px, 3.3vw); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.cw-cta-t em { font-style: normal; color: var(--lime); }
.cw-cta-ring { position: absolute; inset: -6% -8% -10% -8%; width: 116%; height: 116%; z-index: -1; overflow: visible; pointer-events: none; }
.cw-cta-ring path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke .25s; }
/* zakreślenie: rysuje się i znika (po wejściu w Contact i przy każdym najechaniu) */
.cw-cta.ring .cw-cta-ring path { animation: ctaRing 1.7s cubic-bezier(.65,0,.35,1) both; }
.cw-cta-go { display: inline-flex; align-items: center; gap: 12px; height: max(48px, 3vw); padding: 0 6px 0 max(20px, 1.3vw); border-radius: 999px;
  background: var(--lime); color: #0A0A0A; font-size: max(15px, 1vw); font-weight: 700; transition: background .25s, color .25s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.cw-cta-go b { width: max(36px, 2.3vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #0A0A0A; color: var(--lime); font-weight: 600; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.cw-cta:hover .cw-cta-ring path { stroke: var(--pink); }
.cw-cta:hover .cw-cta-t { animation: btnGlitch .38s steps(1) 1; }
.cw-cta:hover .cw-cta-go { background: var(--pink); color: #fff; transform: rotate(-3deg); }
.cw-cta:hover .cw-cta-go b { transform: rotate(45deg); }
.cw-cta:focus-visible { outline: 3px solid var(--pink); outline-offset: 6px; border-radius: 30px; }
@keyframes ctaRing { 0% { stroke-dashoffset: 1; opacity: 1; } 48%, 58% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: -1; opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }

@media (max-width: 760px) {
  #contact.contact { padding-top: 120px; }
  .contact .cmid { display: flex; flex-direction: column; justify-content: center; gap: 40px; }
  .contact .cw-cta { margin-left: 0; }
  .cinfo { align-items: flex-start; justify-self: start; text-align: left; }
  .contact .cmail { font-size: 24px; }
  .contact .cphone { font-size: 19px; }
  .contact .cw-cta { margin: 0; padding: 26px 14px; }
  .cw-cta-t { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .cw-cta-ring path { stroke-dashoffset: 1; transition: none; } .cw-cta:hover * { animation: none !important; } }

/* =========================================================================
   Logo „Fabc” (zakreślone) zostaje widoczne także na filmie
   ========================================================================= */
body.on-film .top .n-name, body.on-film .top .marker { opacity: 1 !important; }
body.on-film .top .n-name { pointer-events: auto !important; }
/* klik w „Fabian Cieniuch” / „Fabc” = powrót na samą górę */
.top .n-name { cursor: pointer; }
/* glitch na „Fabian Cieniuch” przy najechaniu (zamiana w „Fabc”) */
.top .n-name.n-gl { animation: nameGl .32s steps(1) 1; }
@keyframes nameGl { 0% { text-shadow: 1.5px 0 #ff0040, -1.5px 0 #00e5ff; } 50% { text-shadow: -1px 0 #ff0040, 1px 0 #00e5ff; } 100% { text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .top .n-name.n-gl { animation: none; } }

/* „Contact” w nawigacji: zakreślony przez cały czas, gdy jesteśmy w sekcji Contact.
   Zakreślenie rysuje się chwilę po tym, jak link wjedzie z powrotem. */
.top .n-contact { position: relative; }
.n-ring { position: absolute; left: -22%; top: -38%; width: 144%; height: 176%; overflow: visible; pointer-events: none; }
.n-ring path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0;
  transition: stroke-dashoffset .25s ease, opacity .25s; }
body.on-dark:not(.menu-open) .n-ring path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .55s, opacity .1s .55s; }
@media (max-width: 760px) { .n-ring { display: none; } }
@media (prefers-reduced-motion: reduce) { .n-ring path { transition: none !important; } }

/* nowe pozycje menu */
.big.c5 { background: var(--lime); color: var(--ink); }
.big.c6 { background: var(--blue); color: var(--ink); }
body.menu-open .menu-ov.mv .big:nth-child(5) { transition-delay: .28s; }
body.menu-open .menu-ov.mv .big:nth-child(6) { transition-delay: .34s; }
body.menu-open .menu-ov.mv .big:nth-child(7) { transition-delay: .4s; }

/* =========================================================================
   Paleta z „Newsletter · topics”: ciemne pigułki #0B0612 + neonowy tekst z poświatą.
   Używana w menu i we wszystkich zakreśleniach.
   ========================================================================= */
:root { --n-purple: #c98bff; --n-pink: #ff6ee0; --n-cyan: #66d9ff; --n-green: #4dff88; --n-lav: #ecd2ff; --n-violet: #a678ff; --n-bg: #0B0612; }
.menu-ov.mv .big { background: var(--n-bg) !important; color: var(--gc) !important; border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--gc) 45%, transparent); box-shadow: 0 0 24px -8px color-mix(in srgb, var(--gc) 55%, transparent); }
.menu-ov.mv .big.c1 { --gc: var(--n-purple); }
.menu-ov.mv .big.c2 { --gc: var(--n-pink); border-radius: 4px; }
.menu-ov.mv .big.c3 { --gc: var(--n-cyan); }
.menu-ov.mv .big.c5 { --gc: var(--n-green); border-radius: 14px; }
.menu-ov.mv .big.c6 { --gc: var(--n-violet); border-radius: 4px; }
.menu-ov.mv .big.c7 { --gc: var(--n-lav); border-radius: 999px; }
.menu-ov.mv .big.c4 { --gc: #ffffff; }
.menu-ov.mv .big small { color: var(--gc); opacity: .65; }
.mv-meta b { color: var(--n-green); }

/* zakreślenia w kolorach palety */
.cw-cta-ring path { stroke: var(--n-pink); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--n-pink) 60%, transparent)); }
.cw-cta:hover .cw-cta-ring path { stroke: var(--n-cyan); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--n-cyan) 60%, transparent)); }
.cw-cta-t em { color: var(--n-green); text-shadow: 0 0 18px color-mix(in srgb, var(--n-green) 40%, transparent); }
.cw-cta-go { background: var(--n-bg); color: var(--n-green); border: 1px solid color-mix(in srgb, var(--n-green) 45%, transparent); text-shadow: 0 0 10px color-mix(in srgb, var(--n-green) 45%, transparent); }
.cw-cta-go b { background: var(--n-green); color: var(--n-bg); }
.cw-cta:hover .cw-cta-go { background: var(--n-bg); color: var(--n-pink); border-color: color-mix(in srgb, var(--n-pink) 55%, transparent); }
.cw-cta:hover .cw-cta-go b { background: var(--n-pink); }
.n-ring path { stroke: #F2F2F2; filter: drop-shadow(0 0 4px rgba(255,255,255,.45)); }
.contact .cmail:hover, .contact .cphone:hover { color: var(--n-pink); }

/* schody Curated work: blat w kolorze #0B0612 z palety, lekka neonowa poświata napisu */
.step .f, .step .l { background: #0B0612; }
.step .f { text-shadow: 0 0 calc(var(--h) * .12) rgba(236,210,255,.35); }

/* schody: kłódka przed nazwą (otwarta przy „& More”) */
.step .f { display: flex; align-items: center; gap: calc(var(--h) * .12); }
.step .f .pl { display: inline-flex; flex: none; width: calc(var(--h) * .55); height: calc(var(--h) * .55); color: #F4F4F4; opacity: .9; }
.step .f .pl svg { width: 100%; height: 100%; }
.step .f .arr { margin-left: auto; }
.step:hover .f .pl { color: #4dff88; }
.step.o .f .pl { color: #4dff88; }
/* okienko logowania */
#lgModal .dialog { border-radius: 28px; }
#lgModal .lg-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #0B0612; color: #ff6ee0; box-shadow: 0 0 18px rgba(255,110,224,.35); }
#lgModal .lg-ico svg { width: 20px; height: 20px; }
#lgModal .pill svg { width: 18px; height: 18px; }
#lgModal.ok .pill { background: #1f9d55; }

/* start: tylko „a story made visible.” (bez „design goes places.” od spodu) */
.headline .hlB { display: none !important; }
.headline.swap .hlA .w > span { transform: none !important; }
/* film bez wideo: zamiast kolorowych plansz to samo tło co na całej stronie */
.screen { background: radial-gradient(120% 90% at 35% 25%, #ECECEC 0%, var(--stair-bg, #DADADA) 55%, #BDBDBD 100%); }
.track .chap { background: transparent !important; color: #0A0A0A !important; }
/* .swap (przyciski Contact) nie może zmieniać układu nagłówka */
.headline.swap { display: block; overflow: visible; }
.headline.swap > .hl { text-align: left; transform: none !important; }
/* „a story made visible.” — zawsze czarny, wejście premium w 2 liniach (maska + rozmycie) */
.headline, .headline * { color: #0A0A0A !important; }
.headline .ln { display: block; overflow: hidden; padding: .04em .12em .18em; margin: -.04em -.12em -.18em; }
.headline .ln-in { display: block; animation: lnUp 1.25s cubic-bezier(.22,1,.36,1) both; }
.headline .ln:nth-child(2) .ln-in { animation-delay: .14s; }
@keyframes lnUp { from { transform: translateY(105%); opacity: 0; filter: blur(12px); } to { transform: none; opacity: 1; filter: none; } }
.headline .w { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .headline .ln-in { animation: none; } }
/* desktop: „a story made” w jednej linii, „visible.” w drugiej */
@media (min-width: 761px) {
  .headline .hlA .ln:nth-child(1), .headline .hlA .ln-mid { display: inline-block; }
  .headline .hlA .ln:nth-child(1) { margin-right: .22em; }
  .headline .ln-mid .ln-in { animation-delay: .05s; }
  .headline .ln:nth-child(3) .ln-in { animation-delay: .16s; }
}
/* ===================== MOBILE ===================== */
@media (max-width: 760px) {
  /* nagłówek startowy: większy, 3 linie, nad paskiem rysowania */
  .headline { font-size: clamp(64px, 19vw, 108px) !important; bottom: 27svh !important; max-width: none; line-height: .94; }
  .headline .ln:nth-child(2) .ln-in { animation-delay: .1s; } .headline .ln:nth-child(3) .ln-in { animation-delay: .2s; }
  /* górny pasek */
  .top .n-name { font-size: 26px !important; }
  .menu-btn { font-size: 24px !important; }
  .menu-btn .bars { width: 30px !important; }
  /* nagłówki sekcji */
  .sec-head h2, .st-head h2, .bio-head h2, .cl-head h2 { font-size: clamp(42px, 11.5vw, 60px) !important; line-height: .95; }
  .lbl { font-size: 13px !important; }
  /* klienci: kafelki 2x (4x powierzchni) */
  .wt { font-size: 28px !important; }
  /* about: mniejsze zdjęcie, większy tekst */
  #about .portrait { width: 64%; margin: 0 auto 6px; }
  .bio { font-size: 19px; }
  .about-grid p.lead { font-size: 27px; }
  /* contact: logo na środku, teksty równo, trochę większe */
  .contact .cmail { font-size: 28px; }
  .contact .cphone { font-size: 22px; }
  .contact .cbottom { align-items: center; }
  .contact .biglogo { position: static !important; width: 78% !important; height: auto !important; aspect-ratio: 976 / 478; margin: 10px auto 0; display: block; }
  .contact .foot { width: 100%; }
}
@media (max-width: 760px) {
  .contact .cmid, .contact .cinfo { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; align-items: flex-start !important; }
  .contact .cinfo { width: 100%; }
  .contact .cw-cta { padding: 26px 0 !important; margin: 0 !important; }
  .contact .cw-cta-t { font-size: 40px !important; }
  .contact .cw-cta-lbl { font-size: 12px; }
}
/* Contact (desktop): CTA jak inne nagłówki; e-mail/telefon do lewej, w linii z „About” w nawigacji */
@media (min-width: 761px) {
  .contact .cw-cta-t { font-size: clamp(40px, 4.4vw, 84px); line-height: .92; letter-spacing: -.045em; }
  .contact .cinfo { justify-self: start; align-items: flex-start; text-align: left; }
}
/* Contact: CTA jak headline na starcie, 3 linie; dopisek cieńszy i fioletowy */
.contact .cw-cta-t { font-size: clamp(56px, 8.2vw, 170px) !important; line-height: .96 !important; letter-spacing: -.035em; }
.contact .cw-cta-lbl { font-weight: 400; color: var(--n-purple, #c98bff); letter-spacing: .18em; text-shadow: 0 0 12px rgba(201,139,255,.35); }
@media (max-width: 760px) { .contact .cw-cta-t { font-size: clamp(60px, 17vw, 96px) !important; } }
/* mobile: imię/„Fabc” i Menu duże, ten sam rozmiar */
@media (max-width: 760px) {
  .top .nav, .top .n-name { font-size: 29px !important; }
  .menu-btn, #menuTxt { font-size: 29px !important; }
  .menu-btn .bars { width: 32px !important; height: 14px; }
  .nav { padding-right: 0 !important; padding-left: 10px; }
}
@media (max-width: 760px) {
  #menuTxt { transition: opacity .25s, max-width .35s ease; max-width: 4em; overflow: hidden; display: inline-block; }
  body.at-top:not(.menu-open) #menuTxt { opacity: 0; max-width: 0; }
  body.at-top:not(.menu-open) .menu-btn { gap: 0 !important; }
}

/* ===== rysowanie: spray CMYK, brokat, 💩, timer ===== */
.inkbar .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--sc, #ff6ee0); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(10,10,10,.2); }
.inkbar .lbl-s { font-weight: 600; }
.inkbar .ink-timer { font: 600 14px var(--font); font-variant-numeric: tabular-nums; padding: 0 12px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: rgba(10,10,10,.06); min-width: 58px; }
.inkbar .ink-timer.low { color: #fff; background: #ff6ee0; animation: btnGlitch .38s steps(1) infinite; }
.ink-cmyk { position: fixed; left: 50%; bottom: calc(2.4vh + 120px); z-index: 33; display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-radius: 20px; background: rgba(255,255,255,.78); border: 1px solid rgba(10,10,10,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(0,0,0,.1);
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.ink-cmyk.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.inkbar.away ~ .ink-cmyk, body:not(:has(.inkbar.show)) .ink-cmyk { opacity: 0 !important; pointer-events: none !important; }
.ink-pal { gap: 8px; padding: 8px 10px; border-radius: 999px; }
.ink-pal button { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgba(10,10,10,.18), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.ink-pal button:hover { transform: scale(1.15); }
.ink-pal button.on { transform: scale(1.18); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0A0A0A, 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.ink-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 31; pointer-events: none; }
.ink-pop { position: absolute; z-index: 26; font-size: clamp(64px, 7vw, 120px); line-height: 1; cursor: grab; user-select: none; touch-action: none; transform: rotate(var(--rot)); animation: popDrop .9s cubic-bezier(.34,1.56,.64,1) both; filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); }
.ink-pop.drag { cursor: grabbing; transform: rotate(var(--rot)) scale(1.12); }
@keyframes popDrop { 0% { transform: translateY(-110vh) rotate(var(--rot)); } 70% { transform: translateY(12px) rotate(var(--rot)) scale(1.08, .92); } 100% { transform: rotate(var(--rot)); } }
/* pop-up „account managera”: cały ekran, nachalny */
.ink-toast { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(11,6,18,.72); backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); opacity: 0; transition: opacity .25s; }
.ink-toast.on { opacity: 1; }
.ink-toast .it-card { width: min(720px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(28px, 4vw, 54px); border-radius: 30px; background: #0B0612; color: #F2F2F2; border: 2px solid #ff6ee0;
  box-shadow: 0 0 0 6px rgba(255,110,224,.18), 0 0 80px rgba(255,110,224,.45), 0 40px 90px rgba(0,0,0,.5); transform: scale(.6) rotate(-6deg); transition: transform .5s cubic-bezier(.34,1.8,.64,1); }
.ink-toast.on .it-card { transform: rotate(-2deg); }
.ink-toast.shake .it-card { animation: itShake .5s cubic-bezier(.36,.07,.19,.97) 2; }
@keyframes itShake { 10%,90% { transform: translateX(-3px) rotate(-2deg); } 20%,80% { transform: translateX(7px) rotate(-1deg); } 30%,50%,70% { transform: translateX(-14px) rotate(-3deg); } 40%,60% { transform: translateX(14px) rotate(-1deg); } }
.ink-toast .it-ico { font-size: 54px; line-height: 1; animation: itRing .9s ease-in-out infinite; }
@keyframes itRing { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(16deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); } }
.ink-toast .it-tag { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #ff6ee0; }
.ink-toast b { font-size: clamp(38px, 5.4vw, 84px); font-weight: 800; letter-spacing: -.045em; line-height: .95; animation: btnGlitch .38s steps(1) .5s 2; }
.ink-toast .it-b { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ink-toast button { height: 54px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(77,255,136,.6); background: transparent; color: #4dff88; font: 700 17px var(--font); cursor: pointer; text-shadow: 0 0 10px rgba(77,255,136,.4); }
.ink-toast button small { opacity: .65; font-weight: 500; margin-left: 4px; }
.ink-toast button:hover { background: #4dff88; color: #0B0612; text-shadow: none; }
.ink-toast .send { background: #ff6ee0; border-color: #ff6ee0; color: #0B0612; text-shadow: none; }
.ink-toast .send:hover { background: #fff; border-color: #fff; }
@media (max-width: 760px) { .inkbar .lbl-s { display: none; } .ink-cmyk input { width: 52px; } }
.ink-toast[hidden] { display: none !important; }
.ink-pop { width: auto; font-size: 0; }
/* licznik jak zegar bomby, prawy górny róg */
.ink-bomb { position: fixed; right: var(--gutter); top: calc(var(--nav, 56px) + 70px); z-index: 34; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 14px 20px 16px; border-radius: 22px; background: #0B0612; color: #4dff88;
  border: 1px solid rgba(77,255,136,.4); box-shadow: 0 0 40px rgba(77,255,136,.25), 0 24px 50px rgba(0,0,0,.25); opacity: 0; transform: translateY(-14px) scale(.9); pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.ink-bomb.on { opacity: 1; transform: none; }
body:has(.inkbar.away) .ink-bomb { opacity: 0; }
.ink-bomb .ib-top { display: flex; align-items: center; gap: 8px; font: 600 11px var(--font); letter-spacing: .16em; text-transform: uppercase; color: rgba(242,242,242,.6); }
.ink-bomb .ib-led { width: 9px; height: 9px; border-radius: 50%; background: #ff6ee0; box-shadow: 0 0 10px #ff6ee0; }
.ink-bomb.tk .ib-led { animation: ibBlink 1s steps(1) 1; }
@keyframes ibBlink { 0% { opacity: 1; } 50% { opacity: .15; } }
.ink-bomb .ink-timer { font: 800 clamp(64px, 7vw, 132px)/.9 'Clash Display Variable', ui-monospace, monospace; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #4dff88; text-shadow: 0 0 22px rgba(77,255,136,.6); background: none; padding: 0; height: auto; min-width: 0; }
.ink-bomb .ib-wires { display: flex; gap: 6px; } .ink-bomb .ib-wires i { width: 26px; height: 4px; border-radius: 2px; background: #ff6ee0; } .ink-bomb .ib-wires i:nth-child(2) { background: #66d9ff; } .ink-bomb .ib-wires i:nth-child(3) { background: #c98bff; }
.ink-bomb.low { border-color: #ff6ee0; box-shadow: 0 0 60px rgba(255,110,224,.55); animation: itShake .4s infinite; }
.ink-bomb.low .ink-timer { color: #ff6ee0; text-shadow: 0 0 26px rgba(255,110,224,.8); }
@media (max-width: 760px) { .ink-bomb { display: none; } }
/* ramka poprzedniego pola rysowania (po zmianie rozmiaru okna) — pod nawigacją i UI */
.ink-frame { position: absolute; left: 0; top: 0; z-index: 24; pointer-events: none; border: 1px dashed rgba(10,10,10,.55); opacity: 0; transition: opacity .3s; }
.ink-frame.on { opacity: 1; }
.ink-frame .cm { position: absolute; width: 22px; height: 22px; }
.ink-frame .cm::before, .ink-frame .cm::after { content: ""; position: absolute; background: #0A0A0A; }
.ink-frame .cm::before { width: 18px; height: 1px; } .ink-frame .cm::after { width: 1px; height: 18px; }
.ink-frame .tl { left: -26px; top: -26px; } .ink-frame .tl::before { right: 4px; bottom: 4px; left: auto; top: auto; } .ink-frame .tl::after { right: 4px; bottom: 4px; }
.ink-frame .tl::before { right: 0; bottom: 4px; } .ink-frame .tl::after { right: 4px; bottom: 0; }
.ink-frame .tr { right: -26px; top: -26px; } .ink-frame .tr::before { left: 0; bottom: 4px; } .ink-frame .tr::after { left: 4px; bottom: 0; }
.ink-frame .bl { left: -26px; bottom: -26px; } .ink-frame .bl::before { right: 0; top: 4px; } .ink-frame .bl::after { right: 4px; top: 0; }
.ink-frame .br { right: -26px; bottom: -26px; } .ink-frame .br::before { left: 0; top: 4px; } .ink-frame .br::after { left: 4px; top: 0; }
.ink-frame .fl { position: absolute; right: 8px; bottom: 8px; font: 600 10px var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(10,10,10,.6); background: rgba(255,255,255,.5); padding: 3px 8px; border-radius: 999px; }
.ink-frame .fl b { font-weight: 700; color: #0A0A0A; font-variant-numeric: tabular-nums; }
html.drawing, html.drawing * { -webkit-user-select: none !important; user-select: none !important; }
html.drawing .top a { pointer-events: none; }
/* licznik: czyste cyfry 7-segmentowe, bez tła i bez podpisu */
.ink-bomb { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; pointer-events: none; }
.ink-bomb .ib-top, .ink-bomb .ib-wires { display: none !important; }
.ink-bomb .ink-timer { display: flex !important; align-items: flex-end; gap: clamp(6px, .6vw, 12px); height: clamp(70px, 8vw, 140px) !important; text-shadow: none !important; }
.ink-bomb .sg { height: 100%; width: auto; overflow: visible; }
.ink-bomb .sg polygon.off { fill: rgba(10,10,10,.07); }
.ink-bomb .sg polygon.on, .ink-bomb .sg.col rect { fill: #0A0A0A; }
.ink-bomb .sg.col { animation: segBlink 1s steps(1) infinite; }
@keyframes segBlink { 50% { opacity: .12; } }
.ink-bomb.low { animation: itShake .4s infinite; }
.ink-bomb.low .sg polygon.on, .ink-bomb.low .sg.col rect { fill: #ff6ee0; filter: drop-shadow(0 0 8px rgba(255,110,224,.7)); }
.ink-bomb.low .sg polygon.off { fill: rgba(255,110,224,.1); }
/* licznik w prawym dolnym rogu, bez pop-upów */
.ink-bomb { top: auto !important; bottom: clamp(18px, 3vh, 34px) !important; right: var(--gutter) !important; }
.ink-bomb .ink-timer { height: clamp(48px, 5.4vw, 92px) !important; }
.ink-bomb.neg .sg polygon.on, .ink-bomb.neg .sg.col rect { fill: #ff6ee0; filter: drop-shadow(0 0 8px rgba(255,110,224,.7)); }
.ink-bomb.neg { animation: none; }
.ink-toast { display: none !important; }
/* karteczka: odręczny podpis */
#fabNote .fn-card { max-width: 560px; }
#fabNote .fn-prev { display: block; width: 100%; max-height: 38vh; object-fit: contain; background: #fff; border-radius: 14px; margin: 6px 0 16px; }
#fabNote .fn-line { display: flex; align-items: flex-end; gap: 12px; margin: 4px 0 10px; }
#fabNote .fn-line span { flex: none; min-width: 132px; font-weight: 600; font-size: 17px; padding-bottom: 12px; }
#fabNote .fn-pad { flex: 1; min-width: 0; height: 60px; border-bottom: 1.5px dashed rgba(10,10,10,.35); cursor: crosshair; touch-action: none; background: rgba(10,10,10,.025); border-radius: 8px 8px 0 0; }
#fabNote .fn-foot { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 16px; }
#fabNote .fn-time { display: flex; align-items: baseline; gap: 10px; }
#fabNote .fn-time small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
#fabNote .fn-time b { font: 700 26px "Clash Display Variable", Arial, sans-serif; font-variant-numeric: tabular-nums; }
#fabNote .fn-time b.neg { color: #ff6ee0; }
#fabNote .fn-redo { background: none; border: 0; font: inherit; font-size: 13px; text-decoration: underline; opacity: .6; cursor: pointer; }
/* licznik: zawsze biały, bez zmiany koloru, mniejszy, w samym rogu */
.ink-bomb { bottom: 14px !important; right: 16px !important; animation: none !important; }
.ink-bomb .ink-timer { height: clamp(34px, 3.6vw, 60px) !important; gap: clamp(4px, .4vw, 8px) !important; }
.ink-bomb .sg polygon.on, .ink-bomb .sg.col rect,
.ink-bomb.low .sg polygon.on, .ink-bomb.low .sg.col rect,
.ink-bomb.neg .sg polygon.on, .ink-bomb.neg .sg.col rect { fill: #fff !important; filter: drop-shadow(0 1px 2px rgba(10,10,10,.18)) !important; }
.ink-bomb .sg polygon.off, .ink-bomb.low .sg polygon.off, .ink-bomb.neg .sg polygon.off { fill: rgba(255,255,255,.22) !important; }
/* odręczny panel narzędzi (prawy górny róg) + „It's done!” */
@media (min-width: 761px) {
  .inkbar, .ink-cmyk { display: none !important; }
  .ink-hd { position: fixed; right: var(--gutter); top: calc(var(--nav, 56px) + 56px); z-index: 34; width: clamp(150px, 15vw, 210px); display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.2vh, 14px);
    opacity: 0; transform: translateY(-10px) rotate(-2deg); pointer-events: none; transition: opacity .35s, transform .5s cubic-bezier(.16,1,.3,1); }
  .ink-hd.show { opacity: 1; transform: none; pointer-events: auto; }
  .ink-hd.away { opacity: 0; pointer-events: none; }
  .ink-hd button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: #0A0A0A; }
  .ink-hd img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
  .ink-hd button:focus-visible { outline: 2px dashed #0A0A0A; outline-offset: 4px; border-radius: 8px; }
  .ink-hd .hd-pop { width: 100%; transition: transform .25s; }
  .ink-hd .hd-pop:hover { transform: scale(1.06) rotate(-4deg); }
  .ink-hd .hd-pick { width: 78%; margin-bottom: -4px; }
  .ink-hd .hd-sw { display: flex; align-items: center; gap: 6%; width: 86%; }
  .ink-hd .hd-sw button { flex: 1; transition: transform .2s; }
  .ink-hd .hd-sw button:nth-child(4) { flex: 1.35; }
  .ink-hd .hd-sw button:hover { transform: translateY(-3px) rotate(-6deg); }
  .ink-hd .hd-sw button.on { transform: translateY(-6px) scale(1.18) rotate(-4deg); }
  .ink-hd .hd-tools { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; }
  .ink-hd .hd-spray { width: 34%; transition: transform .25s; transform-origin: 50% 100%; }
  .ink-hd .hd-popper { width: 54%; transition: transform .25s; transform-origin: 50% 100%; }
  .ink-hd .hd-spray:hover, .ink-hd .hd-popper:hover { transform: rotate(-7deg); }
  .ink-hd .hd-spray.on { transform: rotate(-12deg) scale(1.08); }
  .ink-hd .hd-spray.on::after { content: ""; position: absolute; }
  .ink-hd .hd-small { display: flex; gap: 18px; font-weight: 600; font-size: 14px; }
  .ink-hd .hd-small button { opacity: .55; text-decoration: underline wavy rgba(10,10,10,.35); text-underline-offset: 4px; }
  .ink-hd .hd-small button:hover, .ink-hd .hd-small button.on { opacity: 1; }
  .ink-hd .hd-done { position: relative; width: 100%; height: clamp(46px, 6vh, 60px); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -.02em; transform: rotate(-2deg); transition: transform .2s; }
  .ink-hd .hd-done svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ink-hd .hd-done path { fill: #0A0A0A; stroke: #0A0A0A; stroke-width: 3; stroke-linejoin: round; }
  .ink-hd .hd-done span { position: relative; }
  .ink-hd .hd-done:hover:not(:disabled) { transform: rotate(1deg) scale(1.05); }
  .ink-hd .hd-done:disabled { opacity: .35; cursor: default; }
  .ink-hd .bump { animation: hdBump .35s cubic-bezier(.3,1.6,.5,1); }
  @keyframes hdBump { 0% { scale: 1; } 40% { scale: .88; } 100% { scale: 1; } }
}
@media (max-width: 760px) { .ink-hd { display: none; } }
/* tryb podpisu: tablica zamienia się w karteczkę (bez pop-upu) */
.ink-sign { position: absolute; left: var(--gutter); bottom: 15vh; z-index: 23; width: min(680px, 52vw); pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .6s cubic-bezier(.16,1,.3,1); color: #0A0A0A; }
html.signing .ink-sign { opacity: 1; transform: none; }
.ink-sign .is-stamp { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: #4dff88; margin-bottom: 18px; transform: rotate(-2deg); }
.ink-sign .is-row { display: flex; align-items: flex-end; gap: 16px; margin: 0 0 clamp(28px, 6vh, 56px); }
.ink-sign .is-l { flex: none; font-weight: 700; font-size: clamp(22px, 2.3vw, 36px); letter-spacing: -.02em; line-height: 1; }
.ink-sign .is-line { flex: 1; height: 1px; border-bottom: 2px dashed rgba(10,10,10,.4); margin-bottom: 4px; }
.ink-sign.nudge { animation: itShake .4s 2; }
html.signing #headline, html.signing #headline * { opacity: .05 !important; transition: opacity .45s !important; }
html.signing .hero::after { content: ""; position: absolute; inset: 14px; border: 1.5px dashed rgba(10,10,10,.35); border-radius: 18px; pointer-events: none; z-index: 22; }
.ink-hd .hd-signbox { display: none; width: 100%; flex-direction: column; align-items: center; gap: 10px; }
.ink-hd.signing .hd-signbox { display: flex; }
.ink-hd.signing .hd-pop, .ink-hd.signing .hd-tools, .ink-hd.signing .hd-small, .ink-hd.signing > .hd-done { display: none; }
.ink-hd .hd-back { font-size: 14px; font-weight: 600; opacity: .6; text-decoration: underline wavy rgba(10,10,10,.35); text-underline-offset: 4px; }
.ink-hd .hd-back:hover { opacity: 1; }
.ink-hd .hd-msg { font-size: 13px; font-weight: 600; text-align: center; min-height: 1em; }
/* tryb podpisu: grubsza ramka nad wszystkim, bez szarej apli pod nawigacją */
html.signing .hero::after { content: none; }
html.signing body::after { content: ""; position: fixed; inset: 12px; border: 3px dashed rgba(10,10,10,.55); border-radius: 20px; pointer-events: none; z-index: 2147482990; }
html.signing #topfade, html.signing .topfade { opacity: 0 !important; visibility: hidden !important; }
/* licznik: wyżej, szary, w środku ramki */
.ink-bomb { bottom: clamp(40px, 6vh, 64px) !important; right: clamp(34px, 3vw, 56px) !important; }
.ink-bomb .sg polygon.on, .ink-bomb .sg.col rect,
.ink-bomb.low .sg polygon.on, .ink-bomb.low .sg.col rect,
.ink-bomb.neg .sg polygon.on, .ink-bomb.neg .sg.col rect { fill: rgba(10,10,10,.42) !important; filter: none !important; }
.ink-bomb .sg polygon.off, .ink-bomb.low .sg polygon.off, .ink-bomb.neg .sg polygon.off { fill: rgba(10,10,10,.06) !important; }
/* dużo miejsca na podpis między liniami */
.ink-sign .is-row { margin-bottom: clamp(80px, 15vh, 160px) !important; }
.ink-sign .is-row:last-child { margin-bottom: 0 !important; }
.ink-sign { bottom: 12vh; }
/* ramka podpisu: rozpływa się zamiast znikać nagle */
html.signing body::after { content: none; }
body::after { content: ""; position: fixed; inset: 12px; border: 3px dashed rgba(10,10,10,.55); border-radius: 20px; pointer-events: none; z-index: 2147482990; opacity: 0; filter: blur(6px); transform: scale(1.015); transition: opacity .6s ease, filter .6s ease, transform .6s ease; }
html.signing body::after { content: ""; opacity: 1; filter: none; transform: none; }
html:not(.signing) .ink-sign { filter: blur(6px); transition: opacity .6s, transform .6s, filter .6s; }
html.signing .ink-sign { filter: none; }
/* po powrocie na górę: tylko „Is your art ready?” */
.ink-hd .hd-ready { display: none; }
.ink-hd.parked > *:not(.hd-ready) { display: none !important; }
.ink-hd.parked .hd-ready { display: grid; }
.ink-hd.parked { top: auto !important; bottom: clamp(120px, 18vh, 180px); }
body:has(.ink-hd.parked) .ink-bomb { opacity: 0 !important; }
/* różowy prostokąt przy logo/imieniu: obwódka fokusu pokazuje się tylko przy nawigacji klawiszem Tab */
.top :focus-visible, .top .n-name:focus { outline: none !important; }
html.kbd .top :focus-visible { outline: 2px solid currentColor !important; outline-offset: 6px; border-radius: 6px; }
/* ===== panel v2 (szkic: make it pop more · brand colours only · marker/ołówek · ruin it · make it shine · less is more · clear · it's done) ===== */
@media (min-width: 761px) {
  .ink-hd { width: min(300px, 23vw, 40vh); display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: center; justify-items: center; }
  .ink-hd .hd2 { width: 100% !important; position: relative; transition: transform .2s cubic-bezier(.3,1.5,.5,1), filter .2s; }
  .ink-hd .hd-pop { grid-column: 1; grid-row: 1; }
  .ink-hd .hd-brand { grid-column: 2; grid-row: 1 / span 2; }
  .ink-hd .hd-pens { grid-column: 1; grid-row: 2; display: flex; justify-content: center; align-items: flex-end; gap: 14%; }
  .ink-hd .hd-pens button { width: 34%; transition: transform .2s cubic-bezier(.3,1.5,.5,1), filter .2s; transform-origin: 50% 90%; }
  .ink-hd .hd-pens .hd-pencil { width: 28%; }
  .ink-hd .hd-spray { grid-column: 1; grid-row: 3; transform: none; }
  .ink-hd .hd-popper { grid-column: 2; grid-row: 3; }
  .ink-hd .hd-less { grid-column: 1; grid-row: 4; width: 92% !important; }
  .ink-hd .hd-end { grid-column: 2; grid-row: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .ink-hd .hd-end .hd-clear { width: 74%; transition: transform .2s; }
  .ink-hd .hd-end .hd-donebtn { width: 100%; transition: transform .2s; }
  .ink-hd .hd-donebtn:disabled { opacity: .3; cursor: default; }
  /* najechanie i wybór: lekki przechył + przesunięty „nadruk” w kolorze (jak źle spasowany druk) */
  .ink-hd .hd2:not(.hd-brand):not(.hd-pens):hover, .ink-hd .hd-pens button:hover, .ink-hd .hd-end button:hover:not(:disabled) { transform: rotate(-4deg) scale(1.05); }
  .ink-hd .on:not([data-c]) { transform: rotate(-6deg) scale(1.08); filter: drop-shadow(4px 3px 0 #4dff88); }
  .ink-hd .hd-pens .on { transform: rotate(-10deg) scale(1.12) translateY(-4px); filter: drop-shadow(3px 3px 0 #ff6ee0); }
  .ink-hd .hd-spray.on { filter: drop-shadow(4px 3px 0 #ff6ee0); }
  .ink-hd .hd-less.on { filter: drop-shadow(4px 3px 0 #a678ff); }
  /* kolory wewnątrz kwadratów „brand colours only” */
  .ink-hd .hd-brand img { display: block; width: 100%; }
  .ink-hd .hd-brand [data-c] { position: absolute; padding: 0; border: 0; background: var(--c); border-radius: 3px; mix-blend-mode: multiply; opacity: .85; cursor: pointer; transform: scale(.82); transition: transform .2s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
  .ink-hd .hd-brand [data-c]:hover { transform: scale(.9) rotate(-3deg); opacity: 1; }
  .ink-hd .hd-brand [data-c].on { transform: scale(1.05) rotate(-4deg); opacity: 1; box-shadow: 0 0 0 3px #0A0A0A; mix-blend-mode: normal; }
  /* stare elementy panelu v1 — nieużywane */
  .ink-hd .hd-pick, .ink-hd .hd-sw, .ink-hd .hd-tools, .ink-hd .hd-small { display: none !important; }
  /* tryb podpisu: zostają kolory + Send to Fab */
  .ink-hd.signing > .hd2:not(.hd-brand) { display: none !important; }
  .ink-hd.signing .hd-brand { grid-column: 1 / span 2; grid-row: 1; width: 55% !important; }
  .ink-hd.signing .hd-signbox { grid-column: 1 / span 2; grid-row: 2; }
  /* po powrocie: sam „Is your art ready?” */
  .ink-hd .hd-ready { display: none; width: 70%; grid-column: 1 / span 2; background: none; border: 0; padding: 0; cursor: pointer; transition: transform .2s; }
  .ink-hd.parked .hd-ready { display: block !important; }
  .ink-hd .hd-ready:hover { transform: rotate(-5deg) scale(1.06); }
}
/* kursor narzędzia (odręczne ikonki) — zmienia się razem z wyborem: marker / ołówek / spray / gumka */
html.cur-marker, html.cur-marker body, html.cur-marker * { cursor: crosshair !important; }
html.cur-pencil, html.cur-pencil body, html.cur-pencil * { cursor: crosshair !important; }
html.cur-spray, html.cur-spray body, html.cur-spray * { cursor: crosshair !important; }
html.cur-erase, html.cur-erase body, html.cur-erase * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Ccircle cx='19' cy='19' r='16' fill='rgba(255,255,255,.35)' stroke='%23fff' stroke-width='4'/%3E%3Ccircle cx='19' cy='19' r='16' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-dasharray='4 3'/%3E%3C/svg%3E") 19 19, cell !important; }
/* pływający „Is your art ready?” poza pierwszym ekranem: jasne tło pod kółkiem, żeby było widać na czarnym Contact */
@media (min-width: 761px) {
  .ink-hd.parked { position: fixed !important; top: auto !important; bottom: clamp(24px, 4vh, 40px) !important; right: clamp(20px, 2.5vw, 40px) !important; width: clamp(130px, 11vw, 170px) !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; display: block !important; z-index: 2147482500; }
  .ink-hd.parked .hd-ready { width: 100% !important; border-radius: 50%; background: #ecd2ff; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 4px !important; animation: readyIn .5s cubic-bezier(.3,1.5,.5,1); }
  .ink-hd:not(.parked) .hd-ready { display: none !important; }
  @keyframes readyIn { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
}
/* ===== kupki: zaznaczenie różową ramką z uchwytami, skalowanie, gumka ===== */
.ink-popw { position: absolute; z-index: 26; transform: rotate(var(--rot)); touch-action: none; cursor: grab; animation: popDrop .9s cubic-bezier(.34,1.56,.64,1) both; }
.ink-popw > canvas.ink-pop { position: absolute; inset: 0; width: 100% !important; height: 100% !important; transform: none !important; animation: none !important; filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); pointer-events: none; }
.ink-popw.drag { cursor: grabbing; }
.ink-popw .pw-box, .ink-popw .pw-h { display: none; position: absolute; pointer-events: none; }
.ink-popw.sel .pw-box { display: block; inset: -6px; border: 1px solid #ff6ee0; }
.ink-popw.sel .pw-h { display: block; width: 9px; height: 9px; background: #fff; border: 1px solid #ff6ee0; pointer-events: auto; }
.ink-popw .pw-h[data-k="tl"] { left: -11px; top: -11px; cursor: nwse-resize; } .ink-popw .pw-h[data-k="br"] { right: -11px; bottom: -11px; cursor: nwse-resize; }
.ink-popw .pw-h[data-k="tr"] { right: -11px; top: -11px; cursor: nesw-resize; } .ink-popw .pw-h[data-k="bl"] { left: -11px; bottom: -11px; cursor: nesw-resize; }
html.erasing .ink-popw { cursor: cell; }
.ink-popw.gone { animation: popGone .26s ease-in forwards; pointer-events: none; }
@keyframes popGone { to { transform: rotate(var(--rot)) scale(.2); opacity: 0; filter: blur(4px); } }
/* ===== panel: prawy dolny róg, tuż nad zegarem; kropka do przeniesienia ===== */
@media (min-width: 761px) {
  .ink-hd { top: auto !important; right: clamp(34px, 3vw, 56px) !important; bottom: calc(clamp(40px, 6vh, 64px) + clamp(34px, 3.6vw, 60px) + 16px) !important; translate: var(--hdx, 0) var(--hdy, 0); width: min(280px, 22vw, 36vh); }
  .ink-hd.moving { transition: none !important; }
  .ink-hd .hd-grip { position: absolute; left: -22px; top: -18px; width: 14px; height: 14px; border-radius: 50%; background: #0A0A0A; box-shadow: 0 0 0 3px rgba(255,255,255,.7); cursor: grab; touch-action: none; transition: transform .2s; z-index: 2; }
  .ink-hd .hd-grip:hover { transform: scale(1.3); }
  .ink-hd.moving .hd-grip { cursor: grabbing; transform: scale(1.4); }
  .ink-hd.parked .hd-grip, .ink-hd.signing .hd-grip { display: none; }
  /* pióra większe; spray i pióra zamieniają się miejscami — wybrane narzędzie ląduje wyżej, obok kupki */
  .ink-hd .hd-pens button { width: 44% !important; }
  .ink-hd .hd-pens .hd-pencil { width: 40% !important; }
  .ink-hd.spray-on .hd-spray { grid-row: 2; }
  .ink-hd.spray-on .hd-pens { grid-row: 3; }
  /* pływający „Is your art ready?” tylko poza pierwszym ekranem */
  .ink-hd.parked { position: fixed !important; bottom: clamp(24px, 4vh, 40px) !important; right: clamp(20px, 2.5vw, 40px) !important; translate: none; width: clamp(130px, 11vw, 170px) !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; display: block !important; z-index: 2147482500; }
  .ink-hd.parked .hd-ready { display: block !important; width: 100% !important; border-radius: 50%; background: #ecd2ff; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 4px !important; animation: readyIn .5s cubic-bezier(.3,1.5,.5,1); }
  .ink-hd:not(.parked) .hd-ready { display: none !important; }
  @keyframes readyIn { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
}
/* panel nie może się „zaznaczać” jak tekst (niebieskie podświetlenie) */
.ink-hd, .ink-hd *, .ink-popw, .ink-popw *, .ink-sign, .ink-bomb { -webkit-user-select: none !important; user-select: none !important; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
.ink-hd img { pointer-events: none; }
.ink-hd ::selection, .ink-hd::selection { background: transparent; }
/* tryb „Send to Fab”: bez palety, sam przycisk wysyłki */
@media (min-width: 761px) { .ink-hd.signing .hd-brand { display: none !important; } }
/* „FUCK YEAH!!!!” po serii kliknięć w kupkę */
.ink-yeah { position: fixed; left: 50%; top: 46%; width: min(640px, 86vw); height: auto; z-index: 2147482800; pointer-events: none; transform: translate(-50%, -50%); animation: yeahIn .55s cubic-bezier(.2,1.8,.4,1) both, yeahShake .12s .55s 6 linear; }
.ink-yeah.out { animation: yeahOut .4s ease-in forwards; }
@keyframes yeahIn { from { transform: translate(-50%, -50%) scale(.1) rotate(-25deg); opacity: 0; } }
@keyframes yeahShake { 50% { transform: translate(calc(-50% + 4px), calc(-50% - 3px)) rotate(1.5deg); } }
@keyframes yeahOut { to { transform: translate(-50%, -50%) scale(1.4) rotate(6deg); opacity: 0; filter: blur(6px); } }
/* wyraźniej widać, które narzędzie jest wybrane */
@media (min-width: 761px) {
  .ink-hd .hd-less.on, .ink-hd .hd-spray.on, .ink-hd .hd-pens .on { background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)); border-radius: 50%; }
}
/* tylko ołówek (marker usunięty) */
@media (min-width: 761px) { .ink-hd .hd-pens .hd-pencil { width: 46% !important; } }
/* ===== panel v3: kolaż wg szkicu Faba (prawa krawędź, nad zegarem) ===== */
@media (min-width: 761px) {
  .ink-hd { --W: min(24vw, 300px, calc((100vh - 190px) / 2.15)); width: var(--W) !important; height: calc(var(--W) * 2.124); display: block !important; gap: 0 !important; }
  .ink-hd .hd-end { display: contents !important; }
  .ink-hd .hd2, .ink-hd .hd-end > button { position: absolute !important; left: var(--l); top: var(--t); width: var(--w) !important; margin: 0; grid-area: auto !important; transform: rotate(var(--r, 0deg)); transition: transform .2s cubic-bezier(.3,1.5,.5,1), filter .2s, left .45s cubic-bezier(.3,1.2,.5,1), top .45s cubic-bezier(.3,1.2,.5,1); }
  .ink-hd .hd-brand   { --l: 43.3%; --t: 0%;    --w: 47.4%; --r: 3deg; }
  .ink-hd .hd-pens    { --l: 42.3%; --t: 31.6%; --w: 19.6%; display: block; }
  .ink-hd .hd-pens .hd-pencil { width: 100% !important; }
  .ink-hd .hd-less    { --l: 67%;   --t: 34%;   --w: 27.8%; --r: -5deg; }
  .ink-hd .hd-popper  { --l: 3.1%;  --t: 49.5%; --w: 49.5%; --r: -4deg; }
  .ink-hd .hd-pop     { --l: 56.7%; --t: 50.5%; --w: 43.3%; --r: 2deg; }
  .ink-hd .hd-spray   { --l: 39.2%; --t: 67.5%; --w: 38.1%; --r: -6deg; }
  .ink-hd .hd-end > .hd-clear   { --l: 66%; --t: 81%;   --w: 26.8%; }
  .ink-hd .hd-end > .hd-donebtn { --l: 32%; --t: 91.3%; --w: 61.9%; }
  /* spray ↔ ołówek zamieniają się miejscami (wybrane narzędzie idzie wyżej) */
  .ink-hd.spray-on .hd-spray { --l: 34%; --t: 30.5%; }
  .ink-hd.spray-on .hd-pens  { --l: 50%; --t: 65.5%; }
  .ink-hd .hd-grip { left: 36%; top: 1%; }
  /* najechanie: przerywana ramka jak w szkicu + lekki przechył */
  .ink-hd .hd2:not(.hd-brand):not(.hd-pens):hover, .ink-hd .hd-end > button:hover:not(:disabled), .ink-hd .hd-pens button:hover { transform: rotate(calc(var(--r, 0deg) - 3deg)) scale(1.05); outline: 2px dashed rgba(10,10,10,.55); outline-offset: 4px; border-radius: 10px; }
  .ink-hd .on:not([data-c]) { transform: rotate(calc(var(--r, 0deg) - 5deg)) scale(1.08); }
  .ink-hd .hd-pens .on { transform: rotate(-8deg) scale(1.08); }
  /* tryb podpisu i „ready” bez stałej wysokości */
  .ink-hd.signing, .ink-hd.parked { height: auto; }
  .ink-hd.signing .hd-signbox { position: relative; }
}
/* bez zegara; panel duży jak na szkicu — od nawigacji prawie do dołu ekranu */
.ink-bomb { display: none !important; }
@media (min-width: 761px) {
  .ink-hd { --W: min(30vw, calc((100vh - 170px) / 2.124)); bottom: clamp(24px, 4vh, 44px) !important; right: clamp(18px, 2.4vw, 44px) !important; }
}
/* bez kropki do przenoszenia; panel przy samej prawej krawędzi */
@media (min-width: 761px) {
  .ink-hd .hd-grip { display: none !important; }
  .ink-hd { translate: none !important; right: 8px !important; }
}
/* podpowiedź na starcie */
.ink-hint { position: fixed; left: 0; top: 0; z-index: 2147482600; pointer-events: none; padding: 7px 14px 8px; border-radius: 999px; background: #0A0A0A; color: #fff; font: 600 13px/1 var(--font); letter-spacing: .01em; white-space: nowrap; opacity: 0; transition: opacity .25s; box-shadow: 3px 3px 0 #4dff88; }
.ink-hint b { color: #4dff88; font-weight: 800; }
.ink-hint.on { opacity: 1; }
@media (pointer: coarse) { .ink-hint { display: none; } }
/* bez pływającego „Is your art ready?” po zjechaniu w dół */
.ink-hd.parked { display: none !important; }
/* karteczka: wpisywanie z klawiatury */
.ink-sign { pointer-events: none; }
html.signing .ink-sign { pointer-events: auto; }
.ink-sign .is-row { cursor: text; }
.ink-sign input.is-line { flex: 1; min-width: 0; height: auto; border: 0; border-bottom: 2px dashed rgba(10,10,10,.45); background: transparent; outline: none; padding: 0 6px 4px; margin: 0; font: 700 clamp(22px, 2.3vw, 36px)/1.1 var(--font); color: #0A0A0A; letter-spacing: -.01em; -webkit-user-select: text !important; user-select: text !important; }
.ink-sign input.is-line:focus { border-bottom-color: #0A0A0A; border-bottom-style: solid; }
.ink-sign input.is-line::placeholder { color: rgba(10,10,10,.25); }
.ink-sign .is-row { margin-bottom: clamp(28px, 6vh, 60px) !important; }
/* większe przyciski w trybie podpisu */
@media (min-width: 761px) {
  .ink-hd.signing .hd-signbox { gap: 16px; }
  .ink-hd .hd-send { height: clamp(68px, 8vh, 92px) !important; font-size: clamp(22px, 2vw, 30px) !important; }
  .ink-hd .hd-back { font-size: 18px !important; }
  .ink-hd .hd-msg { font-size: 16px !important; }
}
/* jedno miejsce na narzędzie: pokazuje ołówek albo spray (klik = przełącz) */
@media (min-width: 761px) {
  .ink-hd .hd-pens .t-spr { display: none; }
  .ink-hd.spray-on .hd-pens .t-pen { display: none; }
  .ink-hd.spray-on .hd-pens .t-spr { display: block; }
  .ink-hd.spray-on .hd-spray { --l: 39.2%; --t: 67.5%; }
  .ink-hd.spray-on .hd-pens  { --l: 42.3%; --t: 31.6%; }
  .ink-hd .hd2, .ink-hd .hd-end > button { transition: transform .2s cubic-bezier(.3,1.5,.5,1), filter .2s !important; }
  /* less is more: większe i obrócone w lewo */
  .ink-hd .hd-less { --l: 62%; --t: 32.5%; --w: 34%; --r: -16deg; z-index: 2; }
  /* clear niżej i większy */
  .ink-hd .hd-end > .hd-clear { --l: 4%; --t: 85%; --w: 33%; --r: -4deg; z-index: 2; }
}
/* podpowiedź: większa, wjeżdża po 3 s „magicznym” wybuchem */
.ink-hint { padding: 0 !important; background: none !important; box-shadow: none !important; opacity: 1 !important; transition: none !important; }
.ink-hint .ih-pill { display: block; padding: 11px 20px 12px; border-radius: 999px; background: #0A0A0A; color: #fff; font: 600 17px/1 var(--font); white-space: nowrap; box-shadow: 4px 4px 0 #4dff88; transform: scale(0) rotate(-14deg); opacity: 0; transition: transform .25s ease-in, opacity .2s; }
.ink-hint b { color: #4dff88; font-weight: 800; }
.ink-hint.on .ih-pill { transform: none; opacity: 1; transition: transform .6s cubic-bezier(.2,1.9,.4,1), opacity .2s; animation: ihWig 2.6s 1s ease-in-out infinite; }
.ink-hint i { position: absolute; left: 30px; top: 20px; width: 7px; height: 7px; border-radius: 2px; background: var(--c); opacity: 0; pointer-events: none; }
.ink-hint.burst i { animation: ihSpark .75s cubic-bezier(.15,.9,.3,1) forwards; }
.ink-hint i:nth-child(odd) { border-radius: 50%; }
@keyframes ihSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.2); } }
@keyframes ihWig { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg) translateY(-2px); } }
/* Work: wir kafelków ze zdjęciami w tle za wieżą */
.st-tornado { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.st-tornado .tt { position: absolute; left: 0; top: 0; border-radius: 14px; overflow: hidden; background: #0B0612; box-shadow: 0 18px 40px rgba(0,0,0,.18); will-change: transform, opacity, filter; opacity: 0; }
.st-tornado .tt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-stage > .st-scene { z-index: 1; }
/* bez przerywanych obwódek przy ikonkach panelu */
.ink-hd *, .ink-hd *:hover, .ink-hd *:focus, .ink-hd *:focus-visible { outline: none !important; }
/* jedno miejsce: ołówek ⇄ pełna ikonka „ruin it!!!”; osobny przycisk ruin it usunięty */
@media (min-width: 761px) {
  .ink-hd .hd-spray { display: none !important; }
  .ink-hd.spray-on .hd-pens { --l: 27%; --t: 30.5%; --w: 40%; }
  .ink-hd .hd-pens .on, .ink-hd .hd-pens button:hover { outline: none !important; background: none !important; }
}
/* ===== karteczka v2: napisy wielkości nagłówka, płynne przejście z „a story made visible” ===== */
html.signing #headline { opacity: 1 !important; }
html.signing #headline .ln-in { animation: lnOut .55s cubic-bezier(.6,0,.4,1) both !important; }
html.signing #headline .ln:nth-child(2) .ln-in { animation-delay: .06s !important; } html.signing #headline .ln:nth-child(3) .ln-in { animation-delay: .12s !important; }
@keyframes lnOut { to { transform: translateY(-110%); opacity: 0; filter: blur(8px); } }
.ink-sign { left: var(--gutter) !important; bottom: 9vh !important; width: min(64vw, 1200px) !important; transform: none !important; filter: none !important; transition: opacity .2s !important; }
.ink-sign .is-row { display: block !important; margin: 0 0 .1em !important; font-weight: 800; font-size: clamp(40px, 6.6vw, 140px); line-height: .98; letter-spacing: -.035em; }
.ink-sign .ln { display: block; overflow: hidden; padding: .04em .12em .18em; margin: -.04em -.12em -.18em; }
.ink-sign .ln-in { display: block; }
html.signing .ink-sign .ln-in { animation: lnUp 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay: .35s; }
html.signing .ink-sign .is-row:first-child .ln:nth-child(2) .ln-in { animation-delay: .45s; }
html.signing .ink-sign .is-row:nth-child(2) .ln:nth-child(1) .ln-in { animation-delay: .55s; }
html.signing .ink-sign .is-row:nth-child(2) .ln:nth-child(2) .ln-in { animation-delay: .65s; }
.ink-sign .is-l { font: inherit !important; }
.ink-sign input.is-line { display: block; width: 100%; font: inherit !important; letter-spacing: inherit !important; padding: 0 0 .04em !important; color: #0A0A0A; caret-color: #ff6ee0; border: 0 !important; border-bottom: .06em solid rgba(10,10,10,.18) !important; background: transparent; }
.ink-sign input.is-line:focus { border-bottom-color: #0A0A0A !important; }
.ink-sign input.is-line::placeholder { color: transparent; }
.ink-sign .is-row:nth-child(2) .ln:first-child .ln-in { opacity: .55; }
/* ===== panel wysyłki: rysowany styl, zgody ===== */
@media (min-width: 761px) {
  .ink-hd.signing { width: min(30vw, 420px) !important; }
  .ink-hd .hd-signbox { gap: 18px !important; align-items: stretch !important; }
  .ink-hd .hd-chk { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 700; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.15; color: #0A0A0A; filter: url(#hdRough); }
  .ink-hd .hd-chk input { position: absolute; opacity: 0; pointer-events: none; }
  .ink-hd .hd-chk svg { flex: none; width: 38px; height: 38px; overflow: visible; }
  .ink-hd .hd-chk .bx { fill: none; stroke: #0A0A0A; stroke-width: 3.2; stroke-linejoin: round; }
  .ink-hd .hd-chk .ck { fill: none; stroke: #ff6ee0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 46; stroke-dashoffset: 46; transition: stroke-dashoffset .35s cubic-bezier(.6,0,.3,1); }
  .ink-hd .hd-chk input:checked + svg .ck { stroke-dashoffset: 0; }
  .ink-hd .hd-chk input:focus-visible + svg .bx { stroke: #ff6ee0; }
  .ink-hd .hd-send { position: relative; height: clamp(84px, 9vh, 110px) !important; background: none !important; border: 0; cursor: pointer; color: #0A0A0A; filter: url(#hdRough); transform: rotate(-2deg); transition: transform .2s cubic-bezier(.3,1.6,.5,1), opacity .2s; margin-top: 6px; }
  .ink-hd .hd-send svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ink-hd .hd-send path { fill: none; stroke: #0A0A0A; stroke-width: 4.5; stroke-linecap: round; }
  .ink-hd .hd-send path.b2 { stroke-width: 2; opacity: .6; }
  .ink-hd .hd-send span { position: relative; font-weight: 800; font-size: clamp(26px, 2.4vw, 40px); letter-spacing: .02em; }
  .ink-hd .hd-send span i { font-style: normal; display: inline-block; transition: transform .25s; }
  .ink-hd .hd-send:hover:not(:disabled) { transform: rotate(1deg) scale(1.04); }
  .ink-hd .hd-send:hover:not(:disabled) span i { transform: translateX(8px); }
  .ink-hd .hd-send:not(:disabled) { background: none !important; }
  .ink-hd .hd-send path.fl { stroke: none; fill: transparent; transition: fill .3s; }
  .ink-hd .hd-send:not(:disabled) path.fl { fill: #4dff88; }
  .ink-hd .hd-send:disabled { opacity: .3; cursor: not-allowed; }
  .ink-hd .hd-back { align-self: center; font-weight: 800 !important; font-size: clamp(22px, 1.9vw, 30px) !important; opacity: .75 !important; filter: url(#hdRough); text-decoration: underline wavy rgba(10,10,10,.5); text-underline-offset: 7px; text-decoration-thickness: 2px; background: none; border: 0; cursor: pointer; }
  .ink-hd .hd-back:hover { opacity: 1 !important; transform: rotate(-2deg); }
  .ink-hd .hd-msg { font-size: 16px !important; min-height: 1.2em; text-align: left !important; }
}
/* ===== ściana rysunków ===== */
html.iw-open, html.iw-open body { overflow: hidden !important; }
.iw { position: fixed; inset: 0; z-index: 2147483100; }
.iw-bg { position: absolute; inset: 0; background: #DADADA; opacity: 0; transition: opacity .5s .5s; }
.iw.on .iw-bg { opacity: 1; }
.iw.out { opacity: 0; transition: opacity .4s; }
.iw-scroll { position: absolute; inset: 0; overflow: auto; padding: clamp(90px, 12vh, 140px) var(--gutter, 5vw) 80px; opacity: 0; transition: opacity .5s .6s; }
.iw.on .iw-scroll { opacity: 1; }
.iw-h { margin-bottom: 36px; }
.iw-k { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: #4dff88; transform: rotate(-2deg); }
.iw-h h2 { margin: 12px 0 0; font-weight: 800; font-size: clamp(44px, 6vw, 110px); letter-spacing: -.035em; line-height: .95; }
.iw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 18vw, 280px), 1fr)); gap: clamp(18px, 2.4vw, 36px); align-items: start; }
.iw-t { margin: 0; transform: rotate(var(--r)); animation: iwIn .6s cubic-bezier(.3,1.5,.5,1) both; }
.iw-t.mine { animation: none; }
.iw-img { aspect-ratio: 16 / 10; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.iw-t.mine .iw-img { background: rgba(255,255,255,.35); outline: 2px dashed rgba(10,10,10,.25); outline-offset: 4px; box-shadow: none; }
.iw-t.mine.landed .iw-img { background: #fff; outline: 0; box-shadow: 0 0 0 4px #ff6ee0, 0 14px 30px rgba(0,0,0,.14); animation: iwLand .5s cubic-bezier(.3,1.8,.5,1); }
.iw-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-t figcaption { margin-top: 10px; font-size: 14px; line-height: 1.3; }
.iw-t figcaption b { display: block; font-weight: 800; }
.iw-t figcaption span { opacity: .65; }
.iw-x { position: absolute; top: 22px; right: var(--gutter, 5vw); z-index: 3; background: #0A0A0A; color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font: 700 16px var(--font); cursor: pointer; opacity: 0; transition: opacity .4s 1.6s; }
.iw.on .iw-x { opacity: 1; }
.iw-x i { font-style: normal; margin-left: 6px; }
.iw-paper { position: fixed; left: 0; top: 0; z-index: 5; transform-origin: 50% 50%; transform: translate(-50%,-50%) translate(50vw,50vh); will-change: transform, clip-path; box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.iw-paper img { width: 100%; height: 100%; display: block; }
@keyframes iwIn { from { opacity: 0; transform: translateY(30px) rotate(var(--r)) scale(.9); } }
@keyframes iwLand { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } }
/* układ: shine w prawo, pop more na dół; slot pokazuje DRUGIE narzędzie (do przełączenia) */
@media (min-width: 761px) {
  .ink-hd .hd-popper { --l: 52%; --t: 49%; --w: 47%; --r: 4deg; }
  .ink-hd .hd-pop    { --l: 30%; --t: 66.5%; --w: 44%; --r: -3deg; }
  .ink-hd .hd-pens .t-pen { display: none !important; }
  .ink-hd .hd-pens .t-spr { display: block !important; }
  .ink-hd.spray-on .hd-pens .t-spr { display: none !important; }
  .ink-hd.spray-on .hd-pens .t-pen { display: block !important; }
  .ink-hd .hd-pens { --l: 22%; --t: 30%; --w: 40%; }
  .ink-hd.spray-on .hd-pens { --l: 42.3%; --t: 31.6%; --w: 19.6%; }
  .ink-hd .hd-pens .on, .ink-hd .hd-pens button { transform: none !important; filter: none !important; }
  .ink-hd .hd-less { --r: 20deg !important; }
}
/* karteczka: wpisywany tekst cienki i w kolorze */
.ink-sign input.is-line { font-weight: 300 !important; color: #a678ff !important; -webkit-text-fill-color: #a678ff; letter-spacing: -.02em !important; }
.ink-sign input.is-line::selection { background: #ff6ee0; color: #fff; -webkit-text-fill-color: #fff; }
html.signing, html.signing * { cursor: auto; }
html.signing .ink-sign input { cursor: text; }
/* panel wysyłki dalej od prawej krawędzi */
@media (min-width: 761px) { .ink-hd.signing { right: clamp(48px, 5vw, 110px) !important; } }
/* ===== ściana v2 ===== */
.iw { perspective: 1400px; }
.iw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; }
.iw.flash .iw-flash { animation: iwFlash .55s ease-out; }
@keyframes iwFlash { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }
.iw-bg { transition: opacity .45s !important; }
.iw-scroll { transition: opacity .4s !important; }
.iw-card { position: fixed; left: 0; top: 0; z-index: 7; background: #fff; box-sizing: border-box; transform-origin: 50% 50%; will-change: transform; border-radius: 4px; transform-style: preserve-3d; }
.iw-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-grid .iw-t:not(.mine) { opacity: 0; animation: none; }
.iw.on .iw-grid .iw-t:not(.mine) { animation: iwRise .7s cubic-bezier(.2,1.4,.4,1) both; }
.iw.on .iw-grid .iw-t:nth-child(2) { animation-delay: .02s; } .iw.on .iw-grid .iw-t:nth-child(3) { animation-delay: .06s; } .iw.on .iw-grid .iw-t:nth-child(4) { animation-delay: .1s; }
.iw.on .iw-grid .iw-t:nth-child(5) { animation-delay: .04s; } .iw.on .iw-grid .iw-t:nth-child(6) { animation-delay: .08s; } .iw.on .iw-grid .iw-t:nth-child(7) { animation-delay: .12s; } .iw.on .iw-grid .iw-t:nth-child(n+8) { animation-delay: .16s; }
@keyframes iwRise { from { opacity: 0; transform: translateY(60px) rotate(calc(var(--r) * 4)) scale(.85); } to { opacity: 1; } }
.iw-t.mine .iw-img { position: relative; }
.iw-h h2 span { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(8deg) scale(.6); }
.iw.land .iw-h h2 span { animation: iwChar .7s cubic-bezier(.2,1.8,.4,1) both; animation-delay: calc(var(--i) * 32ms + 80ms); }
.iw.land .iw-h h2 span:nth-child(n+6):nth-child(-n+8) { color: #ff6ee0; }
@keyframes iwChar { to { opacity: 1; transform: none; } }
.iw-k { opacity: 0; } .iw.land .iw-k { animation: iwChar .5s cubic-bezier(.2,1.8,.4,1) both; }
.iw-t.mine.landed .iw-img { animation: iwSlam .6s cubic-bezier(.2,1.8,.4,1) !important; }
@keyframes iwSlam { 0% { transform: scale(1.12) rotate(-3deg); } 40% { transform: scale(.94); } 100% { transform: none; } }
.iw-ring { position: absolute; z-index: 8; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 6px solid #ff6ee0; box-shadow: 0 0 0 4px #4dff88, 0 0 40px #ff6ee0; pointer-events: none; animation: iwRing 1s cubic-bezier(.1,.8,.2,1) forwards; }
@keyframes iwRing { to { transform: scale(40); opacity: 0; border-width: .5px; box-shadow: 0 0 0 .2px #4dff88; } }
.iw-fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.iw-stamp { position: absolute; right: -14px; top: -18px; z-index: 3; padding: 8px 14px 9px; background: #4dff88; color: #0A0A0A; font: 900 15px/1 var(--font); letter-spacing: .12em; border: 3px solid #0A0A0A; border-radius: 6px; transform: rotate(12deg); box-shadow: 4px 4px 0 #0A0A0A; animation: iwStamp .55s .25s cubic-bezier(.2,2,.4,1) both; }
.iw-t.mine { position: relative; z-index: 2; }
@keyframes iwStamp { from { transform: rotate(-25deg) scale(3); opacity: 0; } to { transform: rotate(12deg) scale(1); opacity: 1; } }
.iw-x { transition-delay: .9s !important; }
/* ściana: same rysunki, klik = podgląd z podpisem */
.iw-t { cursor: zoom-in; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.iw-t:hover { transform: rotate(0deg) scale(1.04) !important; z-index: 3; }
.iw-t:focus-visible { outline: 3px solid #ff6ee0; outline-offset: 6px; }
.iw-view { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(10,10,10,.82); opacity: 0; transition: opacity .3s; cursor: zoom-out; padding: 5vh 5vw; }
.iw-view.on { opacity: 1; }
.iw-view figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 100%; cursor: default; }
.iw-view img { display: block; max-width: 86vw; max-height: 72vh; background: #fff; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.iw-view figcaption { color: #fff; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.25; }
.iw-view figcaption b { display: block; font-weight: 800; font-size: 1.3em; color: #4dff88; }
.iw-view figcaption span { font-weight: 300; color: #ecd2ff; }
.iw-vx { position: absolute; top: 22px; right: 28px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: #0A0A0A; font: 400 30px/1 var(--font); cursor: pointer; }
.iw-view img { width: min(86vw, calc(72vh * 1.6)); height: auto; object-fit: contain; }
/* rysunek przycięty → w kafelkach mieści się cały */
.iw-img img, .iw-card img { object-fit: contain !important; background: #fff; }
.iw-card { left: 0; top: 0; }
/* więcej szału po uderzeniu */
.iw.party .iw-bg { animation: iwBgPulse 1.4s ease-out; }
@keyframes iwBgPulse { 0% { background: #ff6ee0; } 18% { background: #4dff88; } 36% { background: #a678ff; } 100% { background: #DADADA; } }
.iw.party .iw-h h2 { animation: iwShake .5s .1s; }
@keyframes iwShake { 20% { transform: translate(-4px,2px) rotate(-1deg); } 40% { transform: translate(4px,-2px) rotate(1deg); } 60% { transform: translate(-2px,1px); } }
.st-tornado { transition: opacity .35s; height: 100vh; min-height: 640px; }
.tt-shard { position: absolute; border-radius: 6px; background-size: cover; background-position: center; pointer-events: none; z-index: 120; will-change: transform, opacity; box-shadow: 0 8px 18px rgba(0,0,0,.15); }
.tt-spark { position: absolute; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; z-index: 121; }
.st-stage { cursor: crosshair; }
/* podpowiedź = kursor zamienia się w ołówek (wjeżdża z iskrami) */
.ink-hint .ih-pill { display: none !important; }
.ink-hint .ih-pen { position: absolute; left: 0; top: 0; width: 46px; height: auto; transform-origin: 36% 96%; translate: -36% -96%; transform: scale(0) rotate(-40deg); opacity: 0; transition: transform .2s ease-in, opacity .15s; filter: drop-shadow(2px 3px 0 rgba(255,255,255,.8)); }
.ink-hint.on .ih-pen { transform: rotate(-8deg); opacity: 1; transition: transform .55s cubic-bezier(.2,1.9,.4,1), opacity .15s; animation: penWig 1.6s .6s ease-in-out infinite; }
@keyframes penWig { 0%, 100% { transform: rotate(-8deg); } 30% { transform: rotate(-14deg) translate(-2px,-1px); } 60% { transform: rotate(-3deg) translate(2px,0); } }
.ink-hint i { left: 0 !important; top: 0 !important; }
html.pen-cur .hero, html.pen-cur .hero * { cursor: none !important; }
html.pen-cur .hero a, html.pen-cur .hero button { cursor: pointer !important; }
/* magiczne pojawienie się ołówka: iskry zbiegają się spiralą, błysk, pierścienie, ołówek materializuje się z poświaty */
.ink-hint.burst i { animation: ihConverge .7s cubic-bezier(.5,0,.2,1) forwards !important; }
@keyframes ihConverge { 0% { opacity: 0; transform: rotate(calc(var(--a) - 120deg)) translateX(calc(var(--d) * 1.8)) scale(.6); } 25% { opacity: 1; } 75% { opacity: 1; transform: rotate(var(--a)) translateX(4px) scale(1.2); } 100% { opacity: 0; transform: rotate(calc(var(--a) + 40deg)) translateX(0) scale(.2); } }
.ink-hint .ih-ring { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #ff6ee0; opacity: 0; pointer-events: none; }
.ink-hint .ih-ring.r2 { border-color: #4dff88; }
.ink-hint.burst .ih-ring { animation: ihRing .7s .55s cubic-bezier(.1,.8,.3,1) forwards; }
.ink-hint.burst .ih-ring.r2 { animation-delay: .68s; }
@keyframes ihRing { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(6); border-width: .5px; } }
.ink-hint .ih-swirl { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; overflow: visible; pointer-events: none; }
.ink-hint .ih-swirl path { fill: none; stroke: #a678ff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; opacity: 0; }
.ink-hint.burst .ih-swirl path { animation: ihSwirl .9s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes ihSwirl { 0% { opacity: 1; stroke-dashoffset: -260; } 60% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 260; } }
.ink-hint.on .ih-pen { transition: none !important; animation: ihMaterial .8s .5s cubic-bezier(.2,1.6,.4,1) both, penWig 1.6s 1.4s ease-in-out infinite !important; }
@keyframes ihMaterial { 0% { opacity: 0; transform: scale(.2) rotate(-160deg); filter: blur(10px) brightness(3) drop-shadow(0 0 12px #ff6ee0); } 55% { opacity: 1; filter: blur(0) brightness(1.6) drop-shadow(0 0 14px #4dff88); } 100% { opacity: 1; transform: rotate(-8deg); filter: drop-shadow(2px 3px 0 rgba(255,255,255,.8)); } }
.iw-card.iw-crump { padding: 0 !important; box-shadow: 0 18px 30px rgba(0,0,0,.25); }
@media (min-width: 761px) { .ink-hd .hd-end > .hd-clear { --l: 54%; --t: 84.2%; --w: 22%; --r: -5deg; z-index: 3; } }

/* resztki „a story made visible” chowamy całkiem (był widoczny kawałek litery) */
html.signing #headline .ln-in { animation: lnOut .55s cubic-bezier(.6,0,.4,1) forwards !important; }
@keyframes lnOut { to { transform: translateY(-120%); opacity: 0; filter: blur(8px); visibility: hidden; } }
html.signing #headline .hlB { visibility: hidden !important; }
/* wpisywanie odręcznym fontem */
.ink-sign input.is-line { font-family: 'Clash Display Variable', 'Comic Sans MS', cursive !important; font-weight: 700 !important; font-size: 1.12em !important; letter-spacing: 0 !important; line-height: .9 !important; }
/* fancy wejście w tryb podpisu: pasy w kolorach marki przelatują po ekranie */
.sign-wipe { position: fixed; inset: 0; z-index: 2147482950; pointer-events: none; overflow: hidden; }
.sign-wipe i { position: absolute; top: -20%; bottom: -20%; width: 46%; left: -60%; transform: skewX(-14deg); }
.sign-wipe i:nth-child(1) { background: #ff6ee0; animation: swipe .9s cubic-bezier(.7,0,.2,1) forwards; }
.sign-wipe i:nth-child(2) { background: #4dff88; animation: swipe .9s .08s cubic-bezier(.7,0,.2,1) forwards; }
.sign-wipe i:nth-child(3) { background: #a678ff; animation: swipe .9s .16s cubic-bezier(.7,0,.2,1) forwards; }
.sign-wipe i:nth-child(4) { background: #0A0A0A; width: 60%; animation: swipe .9s .24s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes swipe { 0% { left: -70%; } 100% { left: 130%; } }
/* przy gumce w okienku pokazuje się ołówek (klik = powrót do ołówka) */
@media (min-width: 761px) {
  .ink-hd.erase-on .hd-pens .t-spr { display: none !important; }
  .ink-hd.erase-on .hd-pens .t-pen { display: block !important; }
  .ink-hd.erase-on .hd-pens { --l: 42.3%; --t: 31.6%; --w: 19.6%; }
}
.contact .cw-cta-go { margin-top: clamp(10px, 1.6vh, 22px); }
/* linie prędkości przy przyspieszonym filmie */
.spd-lines { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.55) 46px 47px, transparent 47px 120px, rgba(255,255,255,.35) 120px 121px, transparent 121px 190px, rgba(255,255,255,.3) 190px 191px, transparent 191px 260px);
  -webkit-mask: linear-gradient(90deg, #000 0 18%, transparent 38% 62%, #000 82%); mask: linear-gradient(90deg, #000 0 18%, transparent 38% 62%, #000 82%);
  background-size: 260px 100%; animation: spdRun .35s linear infinite; }
.spd-lines.up { animation-direction: reverse; }
@keyframes spdRun { from { background-position: 0 0; } to { background-position: 0 -400px; } }
.screen video { transform-origin: 50% 50%; }
/* zanim film się wczyta: zamiast starych kolorowych plansz (żółto-pomarańczowe brzegi) — szare tło jak cała strona */
.film .track { display: none !important; }
.film .screen { background: #DADADA !important; }
/* tryb podpisu: bez przewijania strony; opis rośnie w górę */
html.signing, html.signing body { overflow: hidden !important; overscroll-behavior: none; }
html.signing .cue, html.signing #cue { opacity: 0 !important; pointer-events: none; }
.ink-sign textarea.is-line { display: block; width: 100%; resize: none; overflow: hidden; min-height: 1.15em; max-height: 46vh; background: transparent; border: 0; border-bottom: .06em solid rgba(10,10,10,.18); outline: none; padding: 0 0 .04em; margin: 0; font-family: 'Clash Display Variable', 'Comic Sans MS', cursive; font-weight: 700; line-height: 1; color: #a678ff; -webkit-text-fill-color: #a678ff; caret-color: #ff6ee0; transition: font-size .25s ease; -webkit-user-select: text !important; user-select: text !important; }
.ink-sign textarea.is-line:focus { border-bottom-color: #0A0A0A; }
.ink-sign .is-row .ln { overflow: visible; }
/* „back to my site” w rozmiarze i miejscu linków nawigacji */
.iw-x { top: calc(env(safe-area-inset-top, 0px) + 34px) !important; right: var(--gutter, 5vw) !important; background: none !important; color: #0A0A0A !important; padding: 0 0 .16em !important; border-radius: 0 !important; font: 400 clamp(18px, 2.75vw, 56px)/1 var(--font) !important; letter-spacing: .01em; }
.iw-x:hover { opacity: .5; animation: btnGlitch .38s steps(1) 1; }
.iw-x i { font-size: .8em; }
/* ściana: pasek jak nawigacja strony — „Art Wall” w miejscu imienia, „back to my site ×” w miejscu Contact */
.iw-nav { position: absolute; z-index: 12; top: calc(env(safe-area-inset-top, 0px) + 27px); left: var(--gutter, 5vw); right: var(--gutter, 5vw); display: flex; justify-content: space-between; align-items: center; font: 400 clamp(18px, 2.75vw, 56px)/1 var(--font); letter-spacing: .01em; color: #0A0A0A; pointer-events: none; }
.iw-nav > * { pointer-events: auto; }
.iw-nav .iw-x { position: static !important; top: auto !important; right: auto !important; background: none !important; color: inherit !important; padding: 0 0 .16em !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: auto !important; font: inherit !important; letter-spacing: inherit; cursor: pointer; opacity: 0; transition: opacity .4s .9s; }
.iw.on .iw-nav .iw-x { opacity: 1; }
.iw-nav .iw-x:hover { opacity: .5 !important; transition: opacity .2s; }
.iw-nav .iw-x i { font-style: normal; font-size: .8em; margin-left: .2em; }
.iw-brand { padding-bottom: .16em; }
.iw-h { margin-top: clamp(40px, 6vh, 80px); }
.iw-h { margin-top: 0; min-height: clamp(70px, 10vh, 130px); }
/* widok podpisu: z nawigacji zostaje tylko „Fabian Cieniuch” */
html.signing .nav .n-link { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.iw-nav { top: calc(env(safe-area-inset-top, 0px) + 34 * var(--ui, 1px)); font-size: max(18px, 2.75vw); }
.iw-nav .iw-brand, .iw-nav .iw-x { padding: 0 !important; line-height: 1 !important; }
/* panel podpisu: teksty dokładnie jak „Fabian Cieniuch” w nawigacji — Clash Display Variable 400, czarny, bez efektów */
.ink-hd .hd-chk, .ink-hd .hd-send span, .ink-hd .hd-back, .ink-hd .hd-back span { font-family: var(--font, 'Clash Display Variable', 'Helvetica Neue', Arial, sans-serif) !important; font-weight: 400 !important; font-size: max(18px, 2.75vw) !important; letter-spacing: .01em !important; line-height: 1 !important; color: #0A0A0A !important; opacity: 1 !important; filter: none !important; text-decoration: none !important; text-transform: none; }
.ink-hd .hd-chk { gap: .35em !important; }
.ink-hd .hd-chk svg { width: .8em !important; height: .8em !important; }
.ink-hd .hd-back:hover { opacity: .5 !important; transform: none !important; }
.ink-hd .hd-send { height: auto !important; padding: .35em .6em !important; filter: none !important; }
.ink-hd .hd-send path.b2 { display: none; }   /* bez dodatkowej linii u góry przycisku */
.ink-hd .hd-send:disabled { opacity: .35 !important; }
.ink-hd.signing { width: max-content !important; max-width: calc(100vw - 2 * var(--gutter, 5vw)); }
.ink-hd .hd-chk span, .ink-hd .hd-send span, .ink-hd .hd-back span { white-space: nowrap; }
.ink-hd .hd-send { width: 100%; }
.ink-hd .hd-send { padding: .45em .75em .5em !important; margin-top: .35em !important; }
.ink-hd.signing .hd-signbox { gap: .45em !important; }
/* ===== About: nowe wejście (zdjęcie zoom-out + teksty wysuwane zza maski) ===== */
#about.reveal-ready:not(.revealed) .portrait img, #about.reveal-ready:not(.revealed) .bio { transform: none !important; opacity: 1 !important; }
#about.rv .portrait.rv-p { overflow: hidden; box-shadow: 0 30px 60px -20px rgba(10,10,10,.28); }
#about.rv .portrait.rv-p img { transform: scale(1.15) translateY(20px); opacity: 0; transition: transform 1.4s cubic-bezier(.16,1,.3,1), opacity 1.2s cubic-bezier(.16,1,.3,1) !important; will-change: transform, opacity; }
#about.rv .portrait.rv-p.rv-on img { transform: scale(1) translateY(0); opacity: 1; }
#about.rv .rv-t { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
#about.rv .rv-t > .rv-in { display: block; transform: translateY(110%); opacity: 0; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s cubic-bezier(.16,1,.3,1); }
#about.rv .rv-t.rv-on > .rv-in { transform: translateY(0); opacity: 1; }
#about.rv .bio > p, #about.rv .bio .lbl { transform: none !important; filter: none !important; opacity: 1 !important; }
/* widok podpisu, lewa strona: dokładnie jak panel po prawej — Clash Display Variable 400, rozmiar nawigacji, czarny, bez efektów */
html .ink-sign .is-l, html .ink-sign .is-line, html .ink-sign input.is-line, html .ink-sign textarea.is-line {
  font-family: var(--font, 'Clash Display Variable', 'Helvetica Neue', Arial, sans-serif) !important; font-weight: 400 !important; font-style: normal !important;
  font-size: max(18px, 2.75vw) !important; line-height: 1.15 !important; letter-spacing: .01em !important;
  color: #0A0A0A !important; -webkit-text-fill-color: #0A0A0A !important; filter: none !important; text-shadow: none !important; transform: none !important; caret-color: #0A0A0A; }
html .ink-sign input.is-line, html .ink-sign textarea.is-line { border: 0 !important; border-bottom: 1px solid rgba(10,10,10,.35) !important; padding: .1em 0 .2em !important; background: transparent !important; }
html .ink-sign input.is-line:focus, html .ink-sign textarea.is-line:focus { border-bottom-color: #0A0A0A !important; }
html .ink-sign .is-row { margin-bottom: clamp(28px, 5vh, 64px) !important; }
html .ink-sign .is-row:last-child { margin-bottom: 0 !important; }
/* przy ponownym wejściu animacja ma się odegrać od nowa — chowanie natychmiastowe */
#about.rv .portrait.rv-p:not(.rv-on) img, #about.rv .rv-t:not(.rv-on) > .rv-in { transition-duration: 0s !important; }
/* ===== menu na wierzchu: nic z rysowania (ramka, panel, paski) nie wychodzi nad menu ===== */
.menu-ov { z-index: 45 !important; }
body.menu-open::after, html.signing body.menu-open::after { display: none !important; }
body.menu-open .ink-frame, body.menu-open .ink-hd, body.menu-open .inkbar, body.menu-open .ink-cmyk, body.menu-open .ink-bomb, body.menu-open .ink-hint, body.menu-open .ink-sign { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* ===== menu na telefonie: duże przyciski na środku, Contact na końcu listy, dane kontaktowe na samej górze z prawej ===== */
@media (max-width: 760px) {
  .menu-ov.mv { display: flex !important; flex-direction: column; justify-content: center; align-items: center; padding: 150px 5vw 40px !important; overflow-y: auto; }
  .menu-ov.mv .mv-links { order: 0; align-items: center !important; justify-self: center; gap: 12px !important; }
  .menu-ov.mv .big { font-size: clamp(40px, 12.5vw, 64px) !important; padding: .1em .55em .16em !important; text-align: center; }
  .menu-ov.mv .mv-side { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 78px); right: 5vw; align-items: flex-end; gap: 0; }
  .menu-ov.mv .menu-contact { align-items: flex-end; text-align: right; gap: 4px !important; }
  .menu-ov.mv .menu-contact .lbl { display: none; }
  .menu-ov.mv .menu-contact > a { font-size: 15px !important; }
  #menuTxt { display: none !important; }   /* na telefonie samo „×” — nie wchodzi na imię */
}
/* ===== rysowanie na telefonie: te same odręczne ikonki co na desktopie, w pasku na dole — nie zasłania nagłówka ===== */
@media (max-width: 760px) {
  .inkbar, .ink-cmyk { display: none !important; }
  .ink-hd { display: flex !important; position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); z-index: 34;
    flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 10px; padding: 0 3vw;
    opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .5s cubic-bezier(.16,1,.3,1); }
  .ink-hd.show { opacity: 1; transform: none; pointer-events: auto; }
  .ink-hd.away { opacity: 0 !important; pointer-events: none !important; }
  .ink-hd button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: #0A0A0A; -webkit-tap-highlight-color: transparent; }
  .ink-hd img { display: block; height: 100%; width: auto; pointer-events: none; }
  .ink-hd > .hd2 { position: relative; height: 58px; flex: none; transition: transform .2s; }
  .ink-hd > .hd2:active { transform: scale(.92) rotate(-4deg); }
  .ink-hd .hd-spray, .ink-hd .hd-grip, .ink-hd .hd-ready { display: none !important; }
  .ink-hd .hd-pens .hd-pencil { height: 100%; display: block; }
  .ink-hd .hd-pens .t-spr { display: none; }
  .ink-hd.spray-on .hd-pens .t-pen { display: none; }
  .ink-hd.spray-on .hd-pens .t-spr { display: block; }
  .ink-hd .hd-less.on, .ink-hd .hd-pencil.on { filter: drop-shadow(0 0 0 #0A0A0A); }
  .ink-hd .hd-less.on { transform: rotate(-8deg) scale(1.08); }
  .ink-hd .hd-brand [data-c] { position: absolute; padding: 0; border: 0; background: var(--c); border-radius: 3px; mix-blend-mode: multiply; opacity: .85; transform: scale(.82); transition: transform .2s; }
  .ink-hd .hd-brand [data-c].on { transform: scale(1.05) rotate(-4deg); opacity: 1; box-shadow: 0 0 0 2px #0A0A0A; mix-blend-mode: normal; }
  .ink-hd > .hd-end { flex-basis: 100%; height: 40px; display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 2px; }
  .ink-hd .hd-end button { height: 100%; }
  .ink-hd .hd-end .hd-donebtn:disabled { opacity: .35; }
  .ink-hd.parked { bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); }
  .ink-hd.parked .hd-ready { display: block !important; height: 84px; width: auto; }
  /* tryb podpisu na telefonie: zostaje tylko pole z checkboxami i przyciskiem */
  .ink-hd.signing > .hd2 { display: none !important; }
  .ink-hd.signing { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
  .ink-hd .hd-signbox { gap: 10px !important; }
  .ink-hd .hd-chk, .ink-hd .hd-send span, .ink-hd .hd-back, .ink-hd .hd-back span { font-size: 20px !important; }
}
/* tryb podpisu na telefonie: linie u góry, checkboxy + przycisk na dole, bez nachodzenia */
@media (max-width: 760px) {
  html.signing .ink-sign { position: fixed !important; left: 6vw !important; right: 6vw !important; top: calc(env(safe-area-inset-top, 0px) + 120px) !important; bottom: auto !important; width: auto !important; }
  html .ink-sign .is-l, html .ink-sign .is-line, html .ink-sign input.is-line, html .ink-sign textarea.is-line { font-size: 26px !important; }
  html .ink-sign .is-row { display: block !important; margin-bottom: 26px !important; }
  html .ink-sign .is-row .ln { display: block; }
  html .ink-sign .is-line { width: 100% !important; }
  .ink-hd.signing { left: 6vw; right: 6vw; padding: 0; }
  .ink-hd.signing .hd-signbox { align-items: stretch; width: 100%; }
  .ink-hd .hd-chk { display: flex; align-items: center; gap: .4em; cursor: pointer; color: #0A0A0A; }
  .ink-hd .hd-chk input { position: absolute; opacity: 0; pointer-events: none; }
  .ink-hd .hd-chk svg { flex: none; width: .9em; height: .9em; overflow: visible; }
  .ink-hd .hd-chk .bx { fill: none; stroke: #0A0A0A; stroke-width: 3.2; stroke-linejoin: round; }
  .ink-hd .hd-chk .ck { fill: none; stroke: #ff6ee0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 46; stroke-dashoffset: 46; transition: stroke-dashoffset .35s; }
  .ink-hd .hd-chk input:checked + svg .ck { stroke-dashoffset: 0; }
  .ink-hd .hd-send { position: relative; width: 100%; height: auto !important; padding: .5em .7em !important; background: none !important; border: 0; color: #0A0A0A; transform: rotate(-1.5deg); margin-top: 4px; }
  .ink-hd .hd-send svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ink-hd .hd-send path { fill: none; stroke: #0A0A0A; stroke-width: 4.5; stroke-linecap: round; }
  .ink-hd .hd-send path.b2 { display: none; }
  .ink-hd .hd-send path.fl { stroke: none; fill: transparent; transition: fill .3s; }
  .ink-hd .hd-send:not(:disabled) path.fl { fill: #4dff88; }
  .ink-hd .hd-send:disabled { opacity: .35; }
  .ink-hd .hd-send span { position: relative; }
  .ink-hd .hd-back { align-self: center; }
  .ink-hd .hd-msg { font-size: 13px; text-align: center; }
}
/* panel narzędzi nie blokuje rysowania: klikalne są tylko same ikonki, puste pole wokół nich to wciąż płótno */
.ink-hd, .ink-hd.show { pointer-events: none !important; }
.ink-hd.show > *, .ink-hd.show .hd-signbox * { pointer-events: auto; }
.ink-hd.away > * { pointer-events: none !important; }
/* ===== widok podpisu (desktop): „Hi, my name is ____” w jednej linii; przycisk → podpowiedź → małe checkboxy ===== */
@media (min-width: 761px) {
  html .ink-sign { width: min(1100px, 62vw) !important; }
  html .ink-sign .is-row { display: flex !important; align-items: flex-end !important; gap: .4em !important; }
  html .ink-sign .is-row > .ln:first-child { flex: none; }
  html .ink-sign .is-row > .ln:last-child { flex: 1; min-width: 0; display: block; }
  html .ink-sign .is-row > .ln:last-child .ln-in { display: block; }
  html .ink-sign .is-line { width: 100% !important; display: block; }
  .ink-hd.signing .hd-signbox { align-items: center !important; gap: 14px !important; }
  .ink-hd.signing .hd-send { order: 1; width: auto !important; padding: .4em 1.1em .45em !important; margin-top: 0 !important; }
  .ink-hd.signing .hd-msg { order: 2; font: 400 15px/1.2 var(--font) !important; color: rgba(10,10,10,.6) !important; min-height: 1.2em; margin: -2px 0 2px; }
  .ink-hd.signing .hd-chk { order: 3; font-size: max(15px, 1.15vw) !important; align-self: flex-start; }
  .ink-hd.signing .hd-chk + .hd-chk { order: 4; margin-top: -6px; }
  .ink-hd.signing .hd-back { order: 5; margin-top: 10px; }
}
/* przejście do podpisu: pełne pasy wjeżdżają równo z lewej (nic nie wystaje wcześniej), czarny zakrywa ekran, widok się zmienia, pasy zjeżdżają w prawo */
.sign-wipe i { top: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; transform: translate3d(-101%,0,0); will-change: transform; animation: swp2 1.1s cubic-bezier(.76,0,.24,1) both !important; }
.sign-wipe i:nth-child(1) { animation-delay: 0s !important; }
.sign-wipe i:nth-child(2) { animation-delay: .06s !important; }
.sign-wipe i:nth-child(3) { animation-delay: .12s !important; }
.sign-wipe i:nth-child(4) { animation-delay: .18s !important; }
@keyframes swp2 { 0% { transform: translate3d(-101%,0,0); } 42%, 56% { transform: translate3d(0,0,0); } 100% { transform: translate3d(101%,0,0); } }
/* =========================================================================
   MENU (desktop) — dwie połówki w różnych kolorach marki wjeżdżają z lewej i z prawej.
   Lewa: na środku duży kafelek ze zmieniającym się obrazkiem. Prawa: przyciski na środku, wyrównane do lewej.
   Bez danych kontaktowych.
   ========================================================================= */
@media (min-width: 761px) {
  .menu-ov.mv { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: center !important; gap: 0 !important; padding: 0 !important;
    background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; overflow: hidden; }
  .menu-ov.mv::before, .menu-ov.mv::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 0; will-change: transform;
    transition: transform .75s cubic-bezier(.76,0,.24,1); }
  .menu-ov.mv::before { left: 0; background: #c98bff; transform: translate3d(-101%,0,0); }
  .menu-ov.mv::after { right: 0; background: #ecd2ff; transform: translate3d(101%,0,0); }
  body.menu-open .menu-ov.mv::before, body.menu-open .menu-ov.mv::after { transform: none; transition-duration: .85s; }
  .menu-ov.mv .mv-side { position: relative; z-index: 1; grid-column: 1; grid-row: 1; justify-self: center; align-self: center; width: auto; }
  .menu-ov.mv .mv-side > * { transform: translate3d(-40vw,0,0) !important; opacity: 0; transition: transform .7s cubic-bezier(.76,0,.24,1), opacity .3s; }
  body.menu-open .menu-ov.mv .mv-side > * { transform: none !important; opacity: 1; transition: transform 1s cubic-bezier(.16,1,.3,1) .12s, opacity .5s .12s; }
  .menu-ov.mv .mv-card { width: min(36vw, 74vh, 760px) !important; aspect-ratio: 4 / 3; border-radius: clamp(18px, 1.6vw, 32px); box-shadow: 0 40px 80px -30px rgba(10,10,10,.5); }
  .menu-ov.mv .mv-ttl { font-size: clamp(28px, 2.6vw, 54px) !important; }
  .menu-ov.mv .mv-txt { font-size: max(14px, 1vw) !important; }
  .menu-ov.mv .mv-cap { left: 28px; right: 28px; bottom: 26px; }
  .menu-ov.mv .mv-meta { top: 20px; left: 24px; }
  .menu-ov.mv .mv-links { position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: center !important; align-self: center; align-items: flex-start !important; gap: 10px !important; }
  .menu-ov.mv .big { transform: translate3d(50vw,0,0) !important; opacity: 0; text-align: left; }
  body.menu-open .menu-ov.mv .big { transform: none !important; opacity: 1; }
  body.menu-open .menu-ov.mv .big:hover, body.menu-open .menu-ov.mv .big:focus-visible { transform: translateX(.6vw) rotate(-2deg) scale(1.03) !important; }
  .menu-ov.mv .big::before { display: none !important; }
  .menu-ov.mv .menu-contact { display: none !important; }
}
/* ===== podpis: „and this is” wędruje w górę razem z tekstem, dolna linia zostaje; keep drawing mniejsze, różowe ===== */
@media (min-width: 761px) {
  html .ink-sign .is-row:last-child { align-items: flex-start !important; }
  html .ink-sign .is-row:last-child > .ln:first-child { padding-top: .1em; }
}
.ink-hd.signing .hd-back, .ink-hd.signing .hd-back span { color: #ff6ee0 !important; font-size: max(15px, 1.3vw) !important; }
.ink-hd.signing .hd-back:hover { opacity: .7 !important; }
.ink-hd .hd-terms { display: none; }
.ink-hd.signing .hd-terms { display: block; order: 6; font: 400 12px/1.3 var(--font); color: rgba(10,10,10,.5); text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; text-align: center; }
/* ===== menu (desktop): lewa połowa czarna, prawa szara jak tło strony; przyciski bliżej lewej krawędzi prawej połowy ===== */
@media (min-width: 761px) {
  .menu-ov.mv::before { background: #0A0A0A !important; }
  .menu-ov.mv::after { background: #DADADA !important; }
  .menu-ov.mv .mv-links { justify-self: start !important; margin-left: clamp(40px, 6vw, 140px); }
  body.menu-open .top .logo, body.menu-open .top .home, body.menu-open .top .n-name, body.menu-open .top .n-name * { color: #F2F2F2 !important; }
  body.menu-open .menu-btn { color: #0A0A0A !important; }
}
/* ===== footer; bottom-edge return button is in back-top-dock.css ===== */
.contact .foot { position: relative; align-items: center; margin-top: auto; padding-bottom: 0; gap: 18px 28px; }
.contact .cbottom { padding-bottom: 18px !important; }
.contact .foot .ft-c, .contact .foot .ft-l a { font-size: 13px; color: rgba(255,255,255,.5); }
.contact .foot .ft-l { display: flex; gap: 18px; margin-right: auto; }
.contact .foot .ft-l a:hover { color: #fff; }
.contact { padding-bottom: 14px !important; }
/* ===== podpis (desktop): pola rosną w prawo; panel: keep drawing u góry → duży Send to Fab → podpowiedź → checkboxy → regulamin ===== */
@media (min-width: 761px) {
  html .ink-sign { width: auto !important; right: auto !important; }
  html .ink-sign .is-row > .ln:last-child { flex: none !important; }
  html .ink-sign .is-line { width: 6em; max-width: none; transition: none !important; }
  html .ink-sign textarea.is-line { resize: none; overflow: hidden; }
  .ink-hd.signing .hd-signbox { align-items: flex-start !important; gap: 10px !important; }
  .ink-hd.signing .hd-back { order: 0 !important; margin: 0 0 4px !important; align-self: flex-start; }
  .ink-hd.signing .hd-send { order: 1 !important; padding: 0 !important; transform: none !important; align-self: flex-start; }
  .ink-hd.signing .hd-send svg { display: none !important; }
  .ink-hd.signing .hd-send span { font-weight: 800 !important; font-style: italic !important; font-size: max(30px, 3.1vw) !important; letter-spacing: -.035em !important; line-height: .95 !important; white-space: normal !important; text-align: left; display: block; max-width: 6.5em; }
  .ink-hd.signing .hd-send:not(:disabled) span { background: linear-gradient(transparent 58%, #4dff88 58% 92%, transparent 92%); }
  .ink-hd.signing .hd-send:hover:not(:disabled) span i { transform: translateX(10px); }
  .ink-hd.signing .hd-msg { order: 2 !important; margin: 0 0 4px !important; text-align: left; }
  .ink-hd.signing .hd-chk { order: 3 !important; align-self: flex-start; }
  .ink-hd.signing .hd-chk + .hd-chk { order: 4 !important; margin-top: -4px; }
  .ink-hd.signing .hd-terms { order: 6 !important; text-align: left; }
}
/* ===== menu: bez przeskoku tła — pasek przewijania nie znika, panele zasłaniają ekran zanim pojawi się zawartość ===== */
html { scrollbar-gutter: stable; }
@media (min-width: 761px) {
  .menu-ov.mv::before, .menu-ov.mv::after { transition: transform .5s cubic-bezier(.76,0,.24,1) !important; }
  body.menu-open .menu-ov.mv::before, body.menu-open .menu-ov.mv::after { transition-duration: .55s !important; }
  body.menu-open .menu-ov.mv .mv-side > * { transition: transform .9s cubic-bezier(.16,1,.3,1) .35s, opacity .4s .35s !important; }
  body.menu-open .menu-ov.mv .big { transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .35s, filter .3s !important; }
  body.menu-open .menu-ov.mv .big:nth-child(1) { transition-delay: .32s !important; } body.menu-open .menu-ov.mv .big:nth-child(2) { transition-delay: .37s !important; }
  body.menu-open .menu-ov.mv .big:nth-child(3) { transition-delay: .42s !important; } body.menu-open .menu-ov.mv .big:nth-child(4) { transition-delay: .47s !important; }
  body.menu-open .menu-ov.mv .big:nth-child(5) { transition-delay: .52s !important; } body.menu-open .menu-ov.mv .big:nth-child(6) { transition-delay: .57s !important; }
  body.menu-open .menu-ov.mv .big:hover { transition-delay: 0s !important; }
  /* logo w menu: całe czarne (napis + zakreślenie) i cały czas mocny glitch */
  body.menu-open .top .logo, body.menu-open .top .home, body.menu-open .top .n-name, body.menu-open .top .n-name *, body.menu-open .top .marker { color: #0A0A0A !important; }
  body.menu-open .top .n-name { animation: menuGl 1.1s steps(1) infinite !important; }
  body.menu-open .top .marker { animation: menuGlM 1.1s steps(1) infinite; }
}
@keyframes menuGl {
  0%   { text-shadow: 4px 0 #ff6ee0, -4px 0 #4dff88; clip-path: none; transform: none; }
  12%  { text-shadow: -6px 0 #ff6ee0, 5px 0 #a678ff; clip-path: inset(0 0 55% 0); transform: translateX(6px); }
  18%  { text-shadow: 3px 0 #4dff88, -3px 0 #ff6ee0; clip-path: inset(45% 0 0 0); transform: translateX(-5px); }
  26%  { text-shadow: 2px 0 #ff6ee0, -2px 0 #4dff88; clip-path: none; transform: none; }
  48%  { text-shadow: -5px 0 #a678ff, 5px 0 #4dff88; clip-path: inset(20% 0 40% 0); transform: translateX(-8px) skewX(-8deg); }
  54%  { text-shadow: 6px 0 #ff6ee0, -6px 0 #4dff88; clip-path: none; transform: translateX(3px); }
  62%  { text-shadow: 3px 0 #ff6ee0, -3px 0 #4dff88; clip-path: none; transform: none; }
  80%  { text-shadow: -4px 0 #4dff88, 4px 0 #ff6ee0; clip-path: inset(60% 0 5% 0); transform: translateX(7px); }
  86%  { text-shadow: 4px 0 #ff6ee0, -4px 0 #4dff88; clip-path: none; transform: none; }
}
@keyframes menuGlM {
  0%, 26%, 62%, 86% { filter: drop-shadow(3px 0 0 #ff6ee0) drop-shadow(-3px 0 0 #4dff88); transform: none; }
  12%, 48% { filter: drop-shadow(-5px 0 0 #ff6ee0) drop-shadow(5px 0 0 #a678ff); transform: translateX(5px); }
  18%, 80% { filter: drop-shadow(4px 0 0 #4dff88) drop-shadow(-4px 0 0 #ff6ee0); transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) { body.menu-open .top .n-name, body.menu-open .top .marker { animation: none !important; } }
@media (min-width: 761px) {
  .ink-hd.signing .hd-send { font-size: max(30px, 3.1vw) !important; max-width: 4.9em; text-align: left; }
  .ink-hd.signing .hd-send span { display: inline !important; max-width: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; }
  .ink-hd.signing .hd-send span i { font-style: normal; }
}
/* ===== AREA OF EXPERTISE: talia kart (assets/x-cards.js, grafiki assets/xcard-*) ===== */
#expertise.xdeck { height: 200vh; padding-top: 0 !important; padding-bottom: 0 !important; }
#expertise.xdeck .xd-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 56px); padding: clamp(90px, 11vh, 140px) 0 clamp(30px, 5vh, 60px); box-sizing: border-box; }
#expertise.xdeck .sec-head { margin: 0 !important; }
#expertise.xdeck .xlist { --cw: min(calc((100% - 3 * var(--xg)) / 4), calc(60vh * .5927)); --xg: clamp(14px, 1.4vw, 28px);
  border: 0 !important; display: grid; grid-template-columns: repeat(4, var(--cw)); justify-content: start; gap: var(--xg); perspective: 1800px; }
#expertise.xdeck .xrow { display: block !important; position: relative; padding: 0 !important; border: 0 !important; container-type: inline-size; outline: none;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--rot, 0deg)); will-change: transform; cursor: default; -webkit-tap-highlight-color: transparent; }
#expertise.xdeck .xrow.xd-on { cursor: pointer; }
#expertise.xdeck .xd-in { position: relative; z-index: 1; width: 100%; aspect-ratio: 655.77 / 1106.42; transform-style: preserve-3d; transform: rotateY(calc((1 - var(--flip, 0)) * 180deg)); }
#expertise.xdeck .xrow.xd-on .xd-in { transition: transform .7s cubic-bezier(.22,1,.36,1); }
#expertise.xdeck .xd-front, #expertise.xdeck .xd-back { position: absolute; inset: 0; border-radius: 8.5cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  box-shadow: 0 calc(10px + var(--deal, 1) * 20px) calc(30px + var(--deal, 1) * 30px) -20px rgba(10,10,10,.45); }
#expertise.xdeck .xd-back { transform: rotateY(180deg); background: var(--gc) center / cover no-repeat; }
#expertise.xdeck .xd-front { background: #0B0612; color: var(--gc); }
/* grafika w dwóch połówkach. Otwarcie przesuwa je właściwością `translate`, a pionek w Strategy używa `transform` — nie gryzą się, więc nic nie skacze */
#expertise.xdeck .xd-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; translate: 0 0;
  transition: translate .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
#expertise.xdeck .xd-art-t { clip-path: inset(0 0 50% 0); }
#expertise.xdeck .xd-art-b { clip-path: inset(50% 0 0 0); }
#expertise.xdeck .xn { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#expertise.xdeck .xd-front h3 { position: absolute; left: 0; right: 0; top: 50%; margin: 0 !important; transform: translateY(-50%) !important; text-align: center; color: var(--gc);
  font-size: 13.5cqw !important; line-height: 1 !important; letter-spacing: -.035em; text-transform: uppercase; text-shadow: 0 0 22px color-mix(in srgb, var(--gc) 35%, transparent);
  transition: opacity .35s .3s, scale .5s .3s cubic-bezier(.22,1,.36,1); }
#expertise.xdeck .xd-ltr { position: absolute; top: 5.5cqw; left: 7cqw; font: 800 17cqw/1 var(--font); color: #0B0612; -webkit-text-stroke: .9cqw var(--gc); paint-order: stroke fill; }
#expertise.xdeck .xd-ltr-b { top: auto; left: auto; bottom: 5.5cqw; right: 7cqw; transform: rotate(180deg); }
/* usługi jako „chipsy” jak w reszcie strony — wyskakują po otwarciu karty */
#expertise.xdeck .xd-front .xc { position: absolute; left: 7cqw; right: 7cqw; top: 50%; transform: translateY(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2.4cqw 2cqw; pointer-events: none; }
#expertise.xdeck .xd-front .xc span { display: inline-flex !important; align-items: center; height: auto !important; line-height: 1.15 !important; padding: 2.6cqw 4.4cqw 2.8cqw !important;
  font: 600 5.7cqw/1.15 var(--font) !important; letter-spacing: -.01em; white-space: normal !important; text-align: center;
  color: var(--gc) !important; background: color-mix(in srgb, var(--gc) 10%, #0B0612) !important; border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent) !important; box-shadow: none !important;
  opacity: 0; scale: .4; rotate: calc((var(--i) - 2) * 7deg); translate: 0 6cqw;
  transition: opacity .18s, scale .25s cubic-bezier(.5,0,.75,0), rotate .25s, translate .25s, background-color .2s, color .2s; }
#expertise.xdeck .xd-front .xc span:nth-child(3n+1) { border-radius: 999px !important; }
#expertise.xdeck .xd-front .xc span:nth-child(3n+2) { border-radius: 1.4cqw !important; }
#expertise.xdeck .xd-front .xc span:nth-child(3n) { border-radius: 3.6cqw !important; }
/* OTWARTA karta: wszystko w jednym tempie (.75 s), chipsy wskakują po kolei ze sprężystym „pop” */
#expertise.xdeck .xrow.xd-open .xd-art-t { translate: 0 -17%; }
#expertise.xdeck .xrow.xd-open .xd-art-b { translate: 0 17%; }
#expertise.xdeck .xrow.xd-open h3 { opacity: 0; scale: .85; transition: opacity .2s, scale .3s; }
#expertise.xdeck .xrow.xd-open .xc { pointer-events: auto; }
#expertise.xdeck .xrow.xd-open .xc span { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0;
  transition: opacity .2s calc(.22s + var(--i) * 60ms), scale .62s calc(.22s + var(--i) * 60ms) cubic-bezier(.34,1.7,.5,1), rotate .7s calc(.22s + var(--i) * 60ms) cubic-bezier(.34,1.5,.5,1),
    translate .62s calc(.22s + var(--i) * 60ms) cubic-bezier(.34,1.5,.5,1), background-color .2s, color .2s; }
#expertise.xdeck .xrow.xd-open .xc span:hover { background: var(--gc) !important; color: #0B0612 !important; }
#expertise.xdeck .xrow:focus-visible .xd-front { outline: 3px solid var(--gc); outline-offset: 4px; }
/* STRATEGY: pionek jednym ruchem uderza w napis i wybija A, które przewraca się i zostaje (bez odbicia) */
#expertise.xdeck .xd-a { display: inline-block; transform-origin: 30% 95%; transition: transform .45s cubic-bezier(.4,0,.2,1); }
#expertise.xdeck .xrow[data-card="strategy"].xd-on:hover .xd-art-t { transform: translate(-1%, 3.4%) rotate(-1.2deg); transition: translate .75s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.4,0,.2,1), scale .6s cubic-bezier(.22,1,.36,1); }
#expertise.xdeck .xrow[data-card="strategy"].xd-on:hover .xd-a { transform: translate(.06em, .2em) rotate(17deg); transition: transform .5s .28s cubic-bezier(.4,0,.2,1); }
/* HOVER: karta delikatnie unosi się i przechyla, grafika lekko „oddycha” (jak wcześniej) */
#expertise.xdeck .xrow.xd-on:hover .xd-in { transform: translateY(-1.8cqw) rotate(-1.5deg); transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
#expertise.xdeck .xrow.xd-on:hover .xd-art { scale: 1.035; }
#expertise.xdeck .xrow.xd-on:hover .xd-ltr { translate: 0 -.6cqw; }
#expertise.xdeck .xrow.xd-on:hover .xd-ltr-b { translate: 0 .6cqw; }
#expertise.xdeck .xd-art { transition: translate .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1), scale .6s cubic-bezier(.22,1,.36,1); }
#expertise.xdeck .xd-ltr { transition: translate .5s cubic-bezier(.3,1.5,.5,1); }
/* KLIK: delikatne „wciśnięcie” karty i krótkie, subtelne rozszczepienie kolorów — bez trzęsienia */
#expertise.xdeck .xrow.xd-glitch .xd-front { animation: xd-press .38s cubic-bezier(.3,1.4,.5,1); }
#expertise.xdeck .xrow.xd-glitch .xd-front > * { animation: xd-gl-rgb .3s steps(3, end); }
@keyframes xd-press { 0% { scale: 1; } 30% { scale: .965; } 100% { scale: 1; } }
@keyframes xd-gl-rgb { 0% { filter: drop-shadow(-.7cqw 0 0 #ff2bd6) drop-shadow(.7cqw 0 0 #00e5ff); } 50% { filter: drop-shadow(.5cqw 0 0 #ff2bd6) drop-shadow(-.5cqw 0 0 #00e5ff); } 100% { filter: none; } }
@media (max-width: 760px) {
  #expertise.xdeck { height: auto; }
  #expertise.xdeck .xd-stage { position: relative; height: auto; padding: 90px 0 60px; }
  #expertise.xdeck .xlist { grid-template-columns: minmax(0, 1fr); justify-items: center; justify-content: stretch; gap: 28px; }
  #expertise.xdeck .xrow { transform: none; width: min(100%, 340px); margin-inline: auto; }
  #expertise.xdeck .xd-in { transition: transform .9s cubic-bezier(.65,0,.35,1); }
}
@media (prefers-reduced-motion: reduce) { #expertise.xdeck .xd-art, #expertise.xdeck .xc span, #expertise.xdeck h3, #expertise.xdeck .xd-in, #expertise.xdeck .xd-a { transition-duration: .01s !important; transition-delay: 0s !important; }
  #expertise.xdeck .xd-front, #expertise.xdeck .xd-front > * { animation: none !important; } }
/* ===== „Send to Fab” jak odręczny czarny przycisk „It's done →” ===== */
.ink-hd.signing .hd-send { position: relative; display: flex !important; align-items: center; width: clamp(250px, 20vw, 400px) !important; max-width: none !important; aspect-ratio: 320 / 101; height: auto !important;
  padding: 0 0 0 7% !important; background: url("ink2-sendbox.webp") center / 100% 100% no-repeat !important; transform: rotate(-1.5deg) !important; filter: none !important; transition: transform .25s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.ink-hd.signing .hd-send svg { display: none !important; }
.ink-hd.signing .hd-send span { display: block !important; background: none !important; padding: 0 !important; font-family: "Clash Display Variable", "Clash Display Variable", "Comic Sans MS", cursive !important; font-style: normal !important; font-weight: 400 !important;
  font-size: clamp(20px, 1.75vw, 34px) !important; letter-spacing: .02em !important; line-height: 1 !important; color: #F2F2F2 !important; text-transform: uppercase; white-space: nowrap !important; max-width: 70%; transform: rotate(-1deg); }
.ink-hd.signing .hd-send span i { display: none; }
.ink-hd.signing .hd-send:hover:not(:disabled) { transform: rotate(1deg) scale(1.05) !important; }
.ink-hd.signing .hd-send:disabled { opacity: .3 !important; cursor: not-allowed; }
/* ===== telefon: większe nazwy klientów, lepszy kadr zdjęcia, większe ikonki rysowania, rozwijane „brand colours” ===== */
@media (max-width: 760px) {
  .wt { font-size: 34px !important; padding: .34em .7em .38em !important; }
  #about .portrait { width: 100% !important; margin: 0 0 10px !important; aspect-ratio: 4 / 4.4; }
  #about .portrait img { object-position: 46% 24%; }
  .ink-hd { gap: 6px 8px !important; padding: 0 2vw !important; }
  .ink-hd > .hd2 { height: 70px !important; }
  .ink-hd > .hd-end { height: 50px !important; margin-top: 4px !important; }
  /* zwinięte: sam napis; po dotknięciu paleta robi się duża, po wyborze koloru wraca */
  .ink-hd .hd-brand { width: 60px; display: grid; place-items: center; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); z-index: 3; }
  .ink-hd .hd-brand > img, .ink-hd .hd-brand [data-c] { opacity: 0 !important; pointer-events: none; transition: opacity .2s; }
  .ink-hd .hd-brand > img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; translate: -50% 0; }
  .ink-hd .hd-brand .hd-blbl { pointer-events: none; font-family: "Clash Display Variable", "Clash Display Variable", cursive; font-size: 15px; line-height: .98; text-align: center; color: #0A0A0A; text-transform: uppercase; transform: rotate(-4deg);
    padding-bottom: 7px; background: linear-gradient(var(--sc, #0A0A0A), var(--sc, #0A0A0A)) 50% 100% / 70% 5px no-repeat; transition: opacity .2s; }
  .ink-hd .hd-brand.open { transform: translateY(-4px) scale(2.5); }
  .ink-hd .hd-brand.open > img { opacity: 1 !important; }
  .ink-hd .hd-brand.open [data-c] { opacity: .85 !important; pointer-events: auto; }
  .ink-hd .hd-brand.open [data-c].on { opacity: 1 !important; }
  .ink-hd .hd-brand.open .hd-blbl { opacity: 0; }
  .ink-hd .hd-brand.open::before { content: ""; position: absolute; inset: -14% -18% -10%; background: rgba(255,255,255,.92); border-radius: 12px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); z-index: -1; }
}
@media (min-width: 761px) { .ink-hd .hd-blbl { display: none; } }