/* pawlun.dev - wspolny arkusz strony glownej i artykulow.
   Kierunek w DESIGN.md: grafitowy plan techniczny z filmu, limonkowa nic jako sygnatura. */

/* Kroje marki z filmu, u siebie zamiast Google Fonts (szybciej i bez wysylania IP do Google). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  src:url('/assets/fonts/martian-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  src:url('/assets/fonts/martian-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Tokeny. Ciemny motyw domyslnie, grafit jak w filmie. Limonka to jedyny mocny akcent:
   znak, nic, impulsy na planie, zakreslacz i pas kontaktu. */
:root{
  color-scheme:dark;

  --bg:oklch(.195 .012 262);
  --bg-2:oklch(.235 .014 262);
  --bg-3:oklch(.285 .016 262);

  --ink:oklch(.97 .003 265);
  --ink-2:oklch(.80 .010 265);
  --ink-3:oklch(.66 .012 265);

  --rule:oklch(.97 .003 265 / .17);
  --rule-2:oklch(.97 .003 265 / .32);

  --brand:oklch(.885 .205 121);
  --on-brand:oklch(.16 .02 121);
  --brand-on-ink:oklch(.52 .15 121);

  /* plan techniczny i nic */
  --plan-kropka:oklch(.97 .003 265 / .11);
  --plan-linia:oklch(.97 .003 265 / .045);
  --plan-sciezka:oklch(.97 .003 265 / .075);
  --plan-impuls:#c6ec24;
  --nic:#c6ec24;
  --nic-blask:#f4ffd0;

  --shadow:0 1px 0 var(--rule-2), 0 14px 34px oklch(0 0 0 / .45);
  --lift-shadow:0 0 0 1px var(--rule-2), 0 34px 70px oklch(0 0 0 / .62);

  /* warstwy */
  --z-nic:1; --z-lift:10; --z-sticky:20; --z-nav:40; --z-overlay:60; --z-top:80;

  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Martian Mono',ui-monospace,monospace;

  --e-quart:cubic-bezier(.25,1,.5,1);
  --e-expo:cubic-bezier(.16,1,.3,1);

  /* zaokraglenia: chipy i ikony 8, przyciski 12, panele i kafle 18 */
  --r-s:8px; --r-m:12px; --r-l:18px;
  --akcent:var(--brand);

  --gut:20px;
  --maxw:1180px;
  --nav-h:56px;
}
@media (min-width:900px){:root{--gut:40px;--nav-h:60px}}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:oklch(.985 .001 265);
  --bg-2:oklch(.955 .003 265);
  --bg-3:oklch(.915 .005 265);
  --ink:oklch(.185 .015 265);
  --ink-2:oklch(.42 .012 265);
  --ink-3:oklch(.515 .010 265);
  --rule:oklch(.185 .015 265 / .16);
  --rule-2:oklch(.185 .015 265 / .32);
  --brand-on-ink:oklch(.885 .205 121);
  --plan-kropka:oklch(.185 .015 265 / .16);
  --plan-linia:oklch(.185 .015 265 / .06);
  --plan-sciezka:oklch(.185 .015 265 / .10);
  /* limonka na bieli znika - plan i nic w ciemniejszej zieleni */
  --plan-impuls:oklch(.58 .17 128);
  --nic:oklch(.58 .17 128);
  --nic-blask:oklch(.80 .19 124);
  --akcent:oklch(.50 .15 128);
  --shadow:0 1px 0 var(--rule-2), 0 14px 34px oklch(.185 .015 265 / .10);
  --lift-shadow:0 0 0 1px var(--rule-2), 0 30px 60px oklch(.185 .015 265 / .26);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px);background:var(--bg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--sans);color:var(--ink);
  font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
fieldset{border:0}
::selection{background:var(--brand);color:var(--on-brand)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:2px}
[data-theme="light"] :focus-visible{outline-color:var(--ink)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:-9999px;top:0;z-index:var(--z-top);background:var(--brand);color:var(--on-brand);padding:12px 20px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* ------------------------------------------------------------------ plan techniczny (tlo) */

/* Jak w filmie: kropki co 48 px, linie co 240 px (sam CSS) i sciezki pod katem prostym,
   po ktorych plyna impulsy (canvas, assets/strona.js). Warstwa stoi za trescia i przesuwa
   sie wolniej niz strona. Srodek kolumny jest przygaszony maska - ruch zyje na marginesach. */
.plan{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.plan-siatka{position:absolute;left:0;right:0;top:-240px;height:calc(100% + 480px);
  background-image:
    radial-gradient(circle at 1px 1px,var(--plan-kropka) 1.25px,transparent 1.7px),
    linear-gradient(var(--plan-linia) 1px,transparent 1px),
    linear-gradient(90deg,var(--plan-linia) 1px,transparent 1px);
  background-size:48px 48px,240px 240px,240px 240px;
  transform:translate3d(0,var(--plan-y,0px),0);will-change:transform}
.plan canvas{position:absolute;inset:0;width:100%;height:100%}
/* maska liczona od krawedzi kolumny tresci (--maxw), nie od procentow ekranu */
@media (min-width:1100px){
  .plan canvas{--m:linear-gradient(90deg,#000 0,#000 calc(50% - var(--maxw) / 2 - 24px),rgb(0 0 0 / .22) calc(50% - var(--maxw) / 2 + 40px),rgb(0 0 0 / .22) calc(50% + var(--maxw) / 2 - 40px),#000 calc(50% + var(--maxw) / 2 + 24px),#000 100%);
    -webkit-mask-image:var(--m);mask-image:var(--m)}
}
@media (max-width:1099px){.plan canvas{opacity:.45}}

/* ------------------------------------------------------------------ nic (sygnatura) */

/* Limonkowa nic z filmu: biegnie od filmu w hero przez wezly sekcji do pasa kontaktu.
   Rysuje sie razem z przewijaniem, glowica jest na wysokosci czytania. */
main{position:relative}
.nic{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:var(--z-nic);overflow:visible}
.nic path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.nic .nic-poswiata{stroke:var(--nic);stroke-width:14;opacity:.09}
.nic .nic-otoczka{stroke:var(--nic);stroke-width:6;opacity:.22}
.nic .nic-rdzen{stroke:var(--nic);stroke-width:2.5}
.nic .nic-wezel{fill:var(--bg);stroke:var(--rule-2);stroke-width:1.5;transition:fill .35s var(--e-quart),stroke .35s var(--e-quart)}
.nic .nic-wezel.on{fill:var(--nic);stroke:var(--nic)}
.nic .nic-glowa{transition:opacity .2s linear}
@media (max-width:899px){.nic .nic-poswiata{stroke-width:9}.nic .nic-otoczka{stroke-width:4}.nic .nic-rdzen{stroke-width:2}}

/* zakreslacz jest namalowany od razu, nie animuje sie wejsciem,
     wiec tekst czyta sie tak samo bez JS */
mark{
  background:linear-gradient(var(--brand),var(--brand)) no-repeat;
  background-size:100% 100%;background-position:0 50%;
  color:var(--on-brand);padding:.06em .16em;margin-inline:-.04em;
  border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
[data-band] mark{background-image:linear-gradient(var(--on-brand),var(--on-brand));color:var(--brand)}

/* Naglowki sekcji jak plansze w filmie: zwykla pisownia, jedno slowo w limonce. */
.dh{display:grid;gap:16px;margin-bottom:clamp(32px,4.6vw,56px);max-width:52rem}
h2{font-weight:800;font-stretch:108%;font-size:clamp(2rem,5.4vw,3.875rem);line-height:1.02;
   letter-spacing:-.04em;text-wrap:balance}
.akcent{color:var(--akcent)}
.dh-lede{font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.5;color:var(--ink-2);font-weight:500;max-width:58ch;text-wrap:pretty}
.link{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font-weight:700;color:var(--ink);
  min-height:44px;box-shadow:inset 0 -2px 0 var(--brand);transition:gap .3s var(--e-quart)}
.link:hover{gap:10px}
.link svg{flex:none}

.statement{
  font-weight:700;font-stretch:104%;letter-spacing:-.022em;line-height:1.3;
  font-size:clamp(1.25rem,2.5vw,1.75rem);color:var(--ink);max-width:26ch;text-wrap:balance;
}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.5;letter-spacing:-.012em;
  color:var(--ink);max-width:56ch;text-wrap:pretty;font-weight:500}
.prose{color:var(--ink-2);line-height:1.66;letter-spacing:-.008em;font-weight:450;
  max-width:62ch;text-wrap:pretty}
.prose+.prose{margin-top:14px}
.prose strong{color:var(--ink);font-weight:700}
.sec{padding-block:clamp(64px,9vw,120px)}

/* ------------------------------------------------------------------ nawigacja (wyspa) */

/* Pasek nie zajmuje calej szerokosci: wisi nad planem jak panel z filmu.
   Podswietlenie sekcji jedzie za kursorem i za przewijaniem (clip-path, bez przeliczania ukladu). */
.nav{position:fixed;top:12px;left:0;right:0;z-index:var(--z-nav);display:flex;justify-content:center;
  pointer-events:none;transition:transform .45s var(--e-expo)}
.nav.hidden{transform:translateY(calc(-100% - 16px))}
.nav-wyspa{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(1120px,calc(100% - 24px));height:var(--nav-h);padding:6px 6px 6px 16px;
  border:1px solid var(--rule);border-radius:var(--r-l);
  background:color-mix(in oklch,var(--bg) 74%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 18px 40px -22px oklch(0 0 0 / .7)}
@media (prefers-reduced-transparency:reduce){.nav-wyspa{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* telefon: rozmycie nad animowanym planem liczyloby sie co klatke - pelne tlo */
@media (max-width:899px){.nav{top:8px}.nav-wyspa{width:calc(100% - 16px);background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.brand{display:flex;align-items:center;min-height:44px;font-weight:800;font-stretch:112%;
  letter-spacing:-.03em;font-size:1.0625rem;text-transform:uppercase}
.brand mark{padding:1px 5px;margin:0}

.nav-links{position:relative;display:none;gap:2px}
@media (min-width:1020px){.nav-links{display:flex}}
.nav-links a{position:relative;z-index:1;display:flex;align-items:center;min-height:44px;padding:0 15px;
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);transition:color .2s linear}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--ink)}
.nav-wskaznik{position:absolute;inset:4px 0;border-radius:var(--r-m);background:color-mix(in oklch,var(--ink) 9%,transparent);
  clip-path:inset(0 100% 0 0 round var(--r-m));opacity:0;
  transition:clip-path .5s var(--e-expo),opacity .25s linear}

.nav-actions{display:flex;align-items:center;gap:6px}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule);
  border-radius:var(--r-m);transition:background .18s linear,color .18s linear,border-color .18s linear,transform .12s var(--e-quart)}
.icon-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:17px;height:17px}
.icon-btn .sun{display:none}
[data-theme="light"] .icon-btn .sun{display:block}
[data-theme="light"] .icon-btn .moon{display:none}
.burger{display:grid}
@media (min-width:1020px){.burger{display:none}}
@media (max-width:560px){.nav-actions .btn{display:none}}
.burger i{display:block;width:16px;height:2px;background:currentColor;transition:transform .3s var(--e-quart)}
.burger i+i{margin-top:4px}
body.menu-open .burger i:first-child{transform:translateY(3px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-3px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--brand);color:var(--on-brand);
  display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 24px) var(--gut) 32px;
  opacity:0;visibility:hidden;transition:opacity .25s linear,visibility .25s}
body.menu-open .menu{opacity:1;visibility:visible}
body.menu-open .nav{z-index:calc(var(--z-overlay) + 1)}
.menu a{font-weight:800;font-stretch:112%;letter-spacing:-.035em;
  font-size:clamp(1.75rem,8vw,2.75rem);line-height:1.14;padding:9px 0;border-bottom:2px solid var(--on-brand)}
.menu-foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:.75rem}
.menu-foot a{font-size:.75rem;font-weight:400;border:0;padding:6px 0;letter-spacing:0;
  font-stretch:100%;box-shadow:inset 0 -2px 0 var(--on-brand)}

/* ------------------------------------------------------------------ przyciski */

/* glowny przycisk w limonce jak przycisk odtwarzania w filmie; najechanie odwraca na kredowy */
.btn{--bg-c:var(--brand);--fg-c:var(--on-brand);--bd-c:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;
  background:var(--bg-c);color:var(--fg-c);border:1.5px solid var(--bd-c);border-radius:var(--r-m);
  font-weight:700;font-size:.9375rem;letter-spacing:-.01em;text-align:center;white-space:nowrap;
  transition:background .2s linear,color .2s linear,border-color .2s linear,translate .5s var(--e-expo),scale .12s var(--e-quart)}
.btn:hover{--bg-c:var(--ink);--fg-c:var(--bg);--bd-c:var(--ink)}
.btn:active{scale:.975}
.btn svg{width:16px;height:16px;flex:none;transition:transform .4s var(--e-quart)}
.btn:hover svg{transform:translateX(4px)}
.btn-out{--bg-c:transparent;--fg-c:var(--ink);--bd-c:var(--rule-2)}
.btn-sm{min-height:42px;padding:0 16px;font-size:.875rem}

/* pasy w kolorze (kontakt) trzymaja swoj kolor w obu motywach */
[data-band]{
  --bg:var(--brand);--bg-2:var(--brand);--bg-3:var(--brand);
  --ink:var(--on-brand);--ink-2:var(--on-brand);
  --ink-3:color-mix(in oklch,var(--on-brand) 76%,var(--brand));
  --rule:color-mix(in oklch,var(--on-brand) 32%,transparent);
  --rule-2:var(--on-brand);--akcent:var(--on-brand);
  background:var(--brand);color:var(--on-brand);
}

/* ------------------------------------------------------------------ hero */

.hero{padding-top:calc(var(--nav-h) + 12px + clamp(32px,5vw,60px));padding-bottom:clamp(56px,8vw,96px)}
.hero-top{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-2);padding-bottom:13px;border-bottom:1px solid var(--rule-2)}
.hero-top .stamp{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);color:var(--brand);
  border-radius:999px;padding:4px 11px;font-weight:600}
.hero-top .stamp i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
[data-theme="light"] .hero-top .stamp{border-color:var(--ink);color:var(--ink)}
[data-theme="light"] .hero-top .stamp i{background:var(--ink)}
@media (prefers-reduced-motion:no-preference){.hero-top .stamp i{animation:blink 2.6s steps(1,end) infinite}}
@keyframes blink{0%,62%{opacity:1}63%,100%{opacity:.2}}
.hero-top .sp{margin-left:auto}

h1{margin:clamp(18px,3vw,30px) 0 0;font-weight:800;font-stretch:118%;text-transform:uppercase;
  font-size:clamp(2.2rem,7.6vw,5.25rem);line-height:1.04;letter-spacing:-.04em}
h1 .w{display:inline-block}
h1 .ch{display:inline-block;will-change:font-variation-settings}
h1 .out .ch{-webkit-text-stroke:2px var(--brand);color:transparent}
[data-theme="light"] h1 .out .ch{-webkit-text-stroke-color:var(--ink)}
@media (max-width:620px){h1 .out .ch{-webkit-text-stroke-width:1.5px}}
@media (forced-colors:active){h1 .out .ch{-webkit-text-stroke:0;color:CanvasText}}

.hero-grid{display:grid;gap:30px;margin-top:clamp(24px,3.4vw,40px)}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;align-items:start}}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:26px;max-width:460px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden}
.hero-facts div{background:color-mix(in oklch,var(--bg-2) 92%,transparent);padding:12px 14px}
.hero-facts dt{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.hero-facts dd{font-weight:800;font-stretch:112%;font-size:1.375rem;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ karta filmu */

/* Na stronie tylko okladka: dzwiek i dane ida po kliknieciu, w odtwarzaczu z napisami. */
.film{display:grid;gap:12px}
.film-okno{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--rule-2);border-radius:var(--r-l);background:var(--bg-2);box-shadow:var(--shadow);cursor:pointer;
  transition:box-shadow .4s var(--e-expo),translate .4s var(--e-expo),border-color .3s linear}
.film-okno img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--e-expo)}
.film-okno::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,oklch(.12 .01 262 / .78))}
.film-graj{position:absolute;left:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:12px;
  min-height:48px;padding:0 18px 0 6px;border-radius:var(--r-m);background:var(--brand);color:var(--on-brand);
  font-weight:700;font-size:.9375rem;letter-spacing:-.01em;transition:gap .35s var(--e-expo)}
.film-graj b{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-s);background:var(--on-brand);color:var(--brand)}
.film-graj b svg{width:13px;height:13px;margin-left:2px}
.film-czas{position:absolute;right:14px;bottom:20px;z-index:1;font-family:var(--mono);font-size:.75rem;color:oklch(.97 .003 265)}
@media (hover:hover) and (pointer:fine){
  .film-okno:hover{translate:0 -3px;box-shadow:var(--lift-shadow),0 0 0 1px color-mix(in oklch,var(--brand) 55%,transparent);border-color:transparent}
  .film-okno:hover img{scale:1.035}
  .film-okno:hover .film-graj{gap:16px}
}
.film-okno:active{translate:0 1px}
.film figcaption{font-size:.875rem;color:var(--ink-2);line-height:1.45;max-width:52ch}
.film figcaption strong{color:var(--ink);font-weight:700}

/* ------------------------------------------------------------------ kino (odtwarzacz) */

.kino{margin:auto;padding:0;border:0;background:transparent;color:var(--ink);
  width:min(1180px,calc(100vw - 2 * var(--gut)));max-width:none;max-height:none;overflow:visible}
.kino[data-pion]{width:min(440px,calc(100vw - 24px))}
.kino::backdrop{background:oklch(.11 .01 262 / .88)}
.kino-ramka{position:relative}
.kino video{width:100%;max-height:calc(100dvh - 120px);border-radius:var(--r-m);border:1px solid var(--rule-2);background:#0b0d11;object-fit:contain}
.kino[data-pion] video{max-height:calc(100dvh - 90px)}
.kino-pasek{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:oklch(.97 .003 265)}
.kino-tytul{font-family:var(--mono);font-size:.75rem}
.kino-zamknij{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-m);border:1px solid oklch(.97 .003 265 / .5);color:oklch(.97 .003 265);
  transition:background .18s linear,color .18s linear}
.kino-zamknij:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.kino-zamknij svg{width:16px;height:16px}
.kino video::cue{font-family:var(--sans);font-weight:600;font-size:1.05em;background:rgb(15 18 23 / .82);color:#f4f5f7}
@media (prefers-reduced-motion:no-preference){
  .kino[open]{animation:kino-wejscie .32s var(--e-expo)}
  .kino[open]::backdrop{animation:kino-tlo .25s linear}
}
@keyframes kino-wejscie{from{opacity:0;scale:.965}}
@keyframes kino-tlo{from{opacity:0}}
body.kino-otwarte{overflow:hidden}

/* ------------------------------------------------------------------ uslugi: kafle */

/* Cztery kafle o roznej wadze, w rytmie 7/5 i 5/7. Kazdy ma prawdziwy zrzut albo ruchomy
   schemat jak w filmie: wezly polaczone kablem, po ktorym plynie impuls. */
.bento{display:grid;gap:14px}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(12,minmax(0,1fr))}
  .kafel-aplikacja{grid-column:1/-1}
  .kafel-zamowienia{grid-column:span 7}
  .kafel-strony{grid-column:span 5}
  .kafel-kasa{grid-column:span 5}
  .kafel-film{grid-column:span 7}
}
.kafel{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r-l);
  background:color-mix(in oklch,var(--bg-2) 90%,transparent);
  transition:border-color .3s linear,box-shadow .45s var(--e-expo),translate .45s var(--e-expo)}
@media (hover:hover) and (pointer:fine){
  .kafel:hover{border-color:color-mix(in oklch,var(--brand) 50%,transparent);translate:0 -4px;
    box-shadow:0 30px 60px -30px oklch(0 0 0 / .7),0 0 0 1px color-mix(in oklch,var(--brand) 25%,transparent)}
  .kafel:hover .kafel-wizual img,.kafel:hover .kafel-wizual video{scale:1.03}
}
.kafel-wizual{position:relative;height:clamp(200px,22vw,270px);margin:10px 10px 0;border-radius:var(--r-m);overflow:hidden;
  background:color-mix(in oklch,var(--bg) 70%,transparent);border:1px solid var(--rule)}
.kafel-wizual img,.kafel-wizual video{transition:scale .8s var(--e-expo)}
.kafel-tekst{display:grid;gap:8px;padding:20px 22px 22px}
.kafel h3{font-weight:800;font-stretch:108%;font-size:clamp(1.375rem,2.2vw,1.75rem);letter-spacing:-.035em;line-height:1.08}
.kafel-lede{font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--ink);max-width:40ch;text-wrap:pretty}
.kafel-opis{font-size:.9375rem;line-height:1.55;color:var(--ink-2);max-width:48ch;text-wrap:pretty}
.tagi{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin-top:6px}
.tagi li{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);border:1px solid var(--rule);
  border-radius:999px;padding:5px 11px;background:color-mix(in oklch,var(--bg) 60%,transparent)}

/* zrzut strony w okienku przegladarki */
.zrzut-okno{display:flex;flex-direction:column}
.okno-pasek{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--rule)}
.okno-pasek i{width:8px;height:8px;border-radius:50%;background:var(--rule-2)}
.okno-pasek em{margin-left:8px;font-style:normal;font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.zrzut-okno img,.zrzut-okno video{width:100%;height:auto;flex:1;min-height:0;object-fit:cover;object-position:top center}
.zrzut-panel img,.zrzut-panel video{width:100%;height:100%;object-fit:cover;object-position:top left}

/* schemat jak w filmie: wezly i kable z plynacym impulsem */
.schemat{display:grid;align-items:center;padding:18px;gap:0;
  grid-template-columns:minmax(0,1.3fr) minmax(18px,48px) auto minmax(18px,48px) minmax(0,1.3fr);
  grid-template-rows:auto 34px auto;
  background-image:radial-gradient(circle at 1px 1px,var(--plan-kropka) 1.2px,transparent 1.6px);background-size:24px 24px}
.sch-wezel{display:grid;gap:6px;justify-items:center;text-align:center;padding:8px;border-radius:var(--r-m);
  border:1px solid var(--rule-2);background:var(--bg-2);box-shadow:0 14px 30px -18px oklch(0 0 0 / .8)}
.sch-wezel img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:var(--r-s);border:1px solid var(--rule)}
.sch-wezel span{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);line-height:1.3}
.sch-wezel b{font-weight:800;font-stretch:108%;font-size:.9375rem;letter-spacing:-.02em}
.sch-serwer{padding:12px 14px;border-color:color-mix(in oklch,var(--brand) 45%,transparent)}
.sch-tablet{grid-column:1;grid-row:1}
.sch-kabel{grid-row:1;height:2px;background:var(--rule-2);position:relative;overflow:hidden;border-radius:2px}
.schemat > .sch-kabel:nth-of-type(1){grid-column:2}
.sch-serwer{grid-column:3;grid-row:1}
.sch-kabel-2{grid-column:4}
.sch-odbiornik{grid-column:5;grid-row:1}
.sch-pion{grid-column:5;grid-row:2;width:2px;height:100%;justify-self:center}
.sch-raport{grid-column:5;grid-row:3;padding:10px 12px}
.sch-kabel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--nic) 45%,var(--nic-blask) 50%,var(--nic) 55%,transparent) no-repeat;
  background-size:60% 100%;background-position:-200% 0;box-shadow:0 0 10px var(--nic)}
.sch-pion::after{background:linear-gradient(180deg,transparent,var(--nic) 45%,var(--nic-blask) 50%,var(--nic) 55%,transparent) no-repeat;
  background-size:100% 60%;background-position:0 -200%}
@media (prefers-reduced-motion:no-preference){
  .sch-kabel::after{animation:kabel-poziom 2.4s linear infinite}
  .sch-kabel-2::after{animation-delay:.8s}
  .sch-kabel-3::after{animation-delay:1.6s}
  .sch-pion::after{animation:kabel-pion 2.4s linear infinite 1.4s}
}
@keyframes kabel-poziom{from{background-position:-200% 0}to{background-position:300% 0}}
@keyframes kabel-pion{from{background-position:0 -200%}to{background-position:0 300%}}

/* aplikacja do zamawiania: najwazniejszy kafel na cala szerokosc. Tablet i telefon z prawdziwymi
   nagraniami karty na planie z kropek; na szerokim ekranie tekst z lewej, urzadzenia z prawej. */
.kafel-wizual-app{height:auto;aspect-ratio:16/10;
  background-image:radial-gradient(circle at 1px 1px,var(--plan-kropka) 1.2px,transparent 1.6px);background-size:24px 24px}
.app-tablet,.app-telefon{position:absolute;background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:1px solid var(--rule-2)}
.app-tablet{left:4%;top:7%;width:79%;aspect-ratio:1440/860;padding:7px;border-radius:16px}
.app-telefon{right:4%;bottom:5%;width:23%;padding:14px 5px 5px;border-radius:22px;
  box-shadow:0 24px 48px -24px oklch(0 0 0 / .8)}
[data-theme="light"] .app-telefon{box-shadow:0 22px 44px -26px oklch(.185 .015 265 / .35)}
.app-telefon::before{content:'';position:absolute;top:6px;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:999px;background:var(--rule-2)}
.app-tablet video,.app-telefon video{width:100%;height:100%;object-fit:cover;object-position:top center}
.app-tablet video{border-radius:10px}
.app-telefon video{aspect-ratio:540/1168;height:auto;border-radius:17px}
.kafel-aplikacja .kicker{margin-bottom:2px}
.kafel-aplikacja h3{font-size:clamp(1.75rem,3.2vw,2.5rem)}
@media (min-width:900px){
  .kafel-aplikacja{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
  .kafel-aplikacja .kafel-wizual{order:2;margin:10px 10px 10px 0}
  .kafel-aplikacja .kafel-tekst{padding:28px 30px 30px}
  .kafel-aplikacja .kafel-lede{max-width:44ch}
}

/* kafel filmu: okladka z przyciskiem jak w hero, bez drugiej ramki */
.kafel-wizual-film{height:auto;aspect-ratio:16/9;border:0;background:none}
.kafel-wizual-film .film-okno{height:100%;border-radius:var(--r-m)}

/* kasa: cztery wezly w jednym rzedzie */
.schemat-sklep{grid-template-columns:minmax(0,1fr) minmax(10px,28px) minmax(0,1fr) minmax(10px,28px) minmax(0,1fr) minmax(10px,28px) minmax(0,1fr);
  grid-template-rows:auto;align-content:center}
.schemat-sklep .sch-wezel{grid-row:1;grid-column:auto;padding:16px 4px}
.schemat-sklep .sch-wezel b{font-size:.8125rem;font-stretch:100%;letter-spacing:-.01em}
.schemat-sklep .sch-kabel{grid-column:auto}
.schemat-sklep .sch-cel{border-color:var(--brand);background:color-mix(in oklch,var(--brand) 14%,var(--bg-2))}
@media (max-width:420px){.schemat-sklep .sch-wezel b{font-size:.75rem}}

.offer-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}
.offer-cta p{font-size:.9375rem;color:var(--ink-2);max-width:40ch}

/* ------------------------------------------------------------------ realizacje: przewodnik */

/* Z lewej funkcje systemu, z prawej przyklejony ekran pokazuje te, ktora czytasz.
   Na telefonie kazdy krok ma swoj obraz pod tekstem. */
.tour{display:grid;gap:40px}
@media (min-width:900px){.tour{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px}}
.tour-kroki{list-style:none;display:grid}
.krok{padding-block:clamp(28px,8vh,72px);border-top:1px solid var(--rule)}
.krok:first-child{border-top:0;padding-top:8px}
@media (min-width:900px){.krok{min-height:62vh;display:flex;flex-direction:column;justify-content:center}}
.krok h3{font-weight:800;font-stretch:108%;font-size:clamp(1.5rem,2.6vw,2.125rem);letter-spacing:-.035em;line-height:1.06;
  text-wrap:balance;transition:color .4s linear}
.krok p{margin-top:12px;font-size:1.0625rem;line-height:1.6;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.krok .tagi{margin-top:16px}
@media (min-width:900px){
  .krok h3{color:var(--ink-3)}
  .krok[data-aktywny] h3{color:var(--ink)}
  .krok-kadr{display:none}
}
.krok-kadr{margin-top:20px}
.krok-kadr img,.krok-kadr video{width:100%;height:auto;border-radius:var(--r-m);border:1px solid var(--rule-2);box-shadow:var(--shadow)}
.krok-kadr-telefon img,.krok-kadr-telefon video{max-width:260px;border-radius:26px}

/* Scena ma wysokosc telefonu: tablet stoi w jej srodku, telefon wypelnia ja cala, wiec zamiana
   ramek (krok z telefonem) idzie sama przezroczystoscia i skala - bez przesuwania ukladu. */
.tour-ekran{display:none;--tel-w:clamp(210px,17vw,262px);--scena-h:calc((var(--tel-w) - 22px) * 1168 / 540 + 35px)}
@media (min-width:900px){
  .tour-ekran{display:block;position:sticky;top:max(calc(var(--nav-h) + 28px),calc(50vh - var(--scena-h) / 2 - 18px));align-self:start;height:max-content}
}
.tour-scena{position:relative;display:grid;align-items:center;min-height:var(--scena-h)}
.tour-urzadzenie{position:relative;aspect-ratio:16/10;border-radius:calc(var(--r-l) + 6px);padding:10px;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:1px solid var(--rule-2);
  box-shadow:0 40px 80px -40px oklch(0 0 0 / .85),0 0 0 1px oklch(0 0 0 / .3) inset;
  transition:opacity .45s var(--e-quart),scale .65s var(--e-expo)}
.tour-telefon{position:absolute;top:50%;left:50%;width:var(--tel-w);height:var(--scena-h);translate:-50% -50%;
  padding:11px;border-radius:42px;background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:1px solid var(--rule-2);
  box-shadow:0 40px 80px -36px oklch(0 0 0 / .9),0 0 0 1px oklch(0 0 0 / .3) inset;
  opacity:0;scale:.86;pointer-events:none;transition:opacity .45s var(--e-quart),scale .65s var(--e-expo)}
/* glosnik w ramce nad ekranem - nie zaslania paska aplikacji */
.tour-telefon{padding-top:24px}
.tour-telefon::before{content:'';position:absolute;top:10px;left:50%;width:46px;height:5px;margin-left:-23px;
  border-radius:999px;background:var(--rule-2)}
.tour-telefon .kadr{inset:24px 11px 11px;border-radius:28px}
.tour-ekran[data-telefon] .tour-urzadzenie{opacity:0;scale:.9}
.tour-ekran[data-telefon] .tour-telefon{opacity:1;scale:1}
.kadr{position:absolute;inset:10px;margin:0;border-radius:var(--r-m);overflow:hidden;background:#0b0d11;
  opacity:0;translate:0 14px;scale:.985;transition:opacity .6s var(--e-expo),translate .7s var(--e-expo),scale .7s var(--e-expo)}
.kadr[data-aktywny]{opacity:1;translate:0;scale:1}
.kadr img,.kadr video{width:100%;height:100%;object-fit:cover;object-position:top center}
.tour-podpis{margin-top:12px;font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}

/* liczby: odliczaja sie przy wjezdzie na ekran */
.liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1px;margin-top:clamp(48px,7vw,80px);
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden}
.liczby div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:clamp(18px,2.4vw,28px);
  background:color-mix(in oklch,var(--bg-2) 92%,transparent)}
.liczby dd{font-weight:800;font-stretch:115%;font-size:clamp(2.5rem,5vw,4rem);line-height:1;letter-spacing:-.04em;color:var(--akcent);font-variant-numeric:tabular-nums}
.liczby dt{font-size:.9375rem;line-height:1.35;color:var(--ink-2);max-width:22ch}


/* ------------------------------------------------------------------ zasady */

.terms li{list-style:none;display:grid;gap:8px 28px;padding-block:22px;border-bottom:1px solid var(--rule)}
@media (min-width:820px){.terms li{grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:baseline}}
.terms li:first-child{border-top:1px solid var(--rule)}
.terms h3{font-weight:800;font-stretch:108%;letter-spacing:-.025em;font-size:1.25rem}

/* ------------------------------------------------------------------ faq */

.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;position:relative;
  font-weight:700;font-stretch:106%;letter-spacing:-.022em;line-height:1.3;
  font-size:clamp(1.0625rem,1.5vw,1.1875rem);transition:color .18s linear}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ink-2)}
.faq summary::after{content:'';position:absolute;right:6px;top:26px;width:13px;height:13px;
  background:linear-gradient(currentColor,currentColor) center/13px 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 13px no-repeat;
  transition:transform .3s var(--e-quart)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 0 20px}

/* ------------------------------------------------------------------ kontakt */

.contact{padding-block:clamp(64px,9vw,120px)}
.contact-grid{display:grid;gap:28px}
@media (min-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}}
.contact-list{display:grid;border-top:2px solid var(--on-brand)}
.contact-list a,.contact-list .row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:56px;padding:10px 8px 10px 0;border-bottom:2px solid var(--on-brand);
  transition:background .16s linear}
.contact-list dt{font-family:var(--mono);font-size:.75rem;opacity:.75;transition:translate .3s var(--e-quart)}
.contact-list a:hover{background:var(--on-brand);color:var(--brand)}
.contact-list a:hover dt{translate:12px 0}
.contact-list dd{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:9px}
.contact-list dd svg{width:14px;height:14px;opacity:.55;transition:transform .3s var(--e-quart)}
.contact-list a:hover dd svg{transform:translate(3px,-3px);opacity:1}

footer{padding-block:26px;border-top:1px solid var(--rule);background:var(--bg)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
footer nav{display:flex;gap:4px;flex-wrap:wrap}
footer nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;
  transition:color .16s linear,background .16s linear;border-radius:var(--r-s)}
footer nav a:hover{color:var(--on-brand);background:var(--brand)}

/* powrot na gore: pierscien pokazuje postep strony */
.to-top{position:fixed;right:16px;bottom:16px;z-index:var(--z-sticky);width:56px;height:56px;
  display:grid;place-items:center;border-radius:50%;background:var(--bg);color:var(--ink);
  border:1px solid var(--rule-2);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;translate:0 14px;scale:.85;
  transition:opacity .3s linear,translate .45s var(--e-expo),scale .45s var(--e-expo),
             visibility .3s,background .18s linear,color .18s linear}
.to-top.on{opacity:1;visibility:visible;translate:0;scale:1}
.to-top:hover{background:var(--brand);color:var(--on-brand)}
.to-top:active{scale:.93}
.to-top .ring{position:absolute;inset:-1px;width:56px;height:56px;transform:rotate(-90deg);overflow:visible}
.to-top .ring circle{fill:none;stroke-width:2.5}
.to-top .ring .bg{stroke:transparent}
.to-top .ring .fg{stroke:var(--brand);stroke-linecap:round;
  stroke-dasharray:163.4;stroke-dashoffset:163.4;transition:stroke-dashoffset .12s linear}
.to-top .arw{width:18px;height:18px;position:relative;transition:translate .3s var(--e-quart)}
.to-top:hover .arw{translate:0 -2px}
@media (min-width:900px){.to-top{right:28px;bottom:28px}}

/* ------------------------------------------------------------------ artykul */

.art-head{padding-top:calc(var(--nav-h) + 12px + clamp(32px,5vw,60px));padding-bottom:clamp(28px,4vw,44px)}
.art-sciezka{display:flex;flex-wrap:wrap;gap:6px 10px;font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  padding-bottom:13px;border-bottom:1px solid var(--rule-2)}
.art-sciezka a{min-height:44px;display:inline-flex;align-items:center;box-shadow:inset 0 -2px 0 var(--brand);margin-block:-14px}
.art-head h1{font-size:clamp(1.875rem,4.6vw,3.375rem);max-width:22ch}
.art-head .lede{margin-top:22px;max-width:60ch}
.art-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1px;margin-top:30px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden}
.art-meta div{background:color-mix(in oklch,var(--bg-2) 92%,transparent);padding:14px 16px}
.art-meta dt{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.art-meta dd{font-weight:700;font-size:.9375rem;line-height:1.35;margin-top:4px}

.art{padding-bottom:clamp(56px,8vw,104px)}
.art-film{margin-bottom:clamp(40px,6vw,72px)}
.art-tresc{max-width:46rem}
/* spis tresci przy prawej krawedzi, tylko na szerokim ekranie - dlugi tekst bez gubienia sie */
.art-uklad{display:grid;gap:48px}
@media (min-width:1100px){.art-uklad{grid-template-columns:minmax(0,46rem) minmax(0,15rem);justify-content:space-between}}
.art-spis{display:none}
@media (min-width:1100px){
  .art-spis{display:block;position:sticky;top:calc(var(--nav-h) + 44px);align-self:start;padding-top:clamp(36px,5vw,56px)}
}
.art-spis p{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);padding-bottom:10px;border-bottom:1px solid var(--rule-2)}
.art-spis ol{list-style:none;display:grid;margin-top:6px}
.art-spis a{position:relative;display:flex;align-items:center;min-height:40px;padding:6px 0 6px 16px;font-size:.875rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink-3);transition:color .18s linear}
.art-spis a::before{content:'';position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border:1.5px solid var(--rule-2);border-radius:2px;transition:background .25s var(--e-quart),border-color .25s var(--e-quart)}
.art-spis a:hover,.art-spis a[aria-current="true"]{color:var(--ink)}
.art-spis a[aria-current="true"]::before{background:var(--nic);border-color:var(--nic)}
.art-tresc section{padding-top:clamp(36px,5vw,56px)}
.art-tresc h2{font-size:clamp(1.625rem,3.6vw,2.375rem);padding-bottom:14px;border-bottom:1px solid var(--rule-2);margin-bottom:22px}
.art-tresc h3{font-weight:800;font-stretch:108%;letter-spacing:-.02em;font-size:1.1875rem;margin:28px 0 8px}
.art-tresc p{font-size:1.125rem;line-height:1.7;color:var(--ink-2);letter-spacing:-.008em;text-wrap:pretty;max-width:66ch}
.art-tresc p+p{margin-top:16px}
.art-tresc p strong{color:var(--ink);font-weight:700}
.art-tresc ul{margin-top:14px;display:grid;gap:10px;list-style:none;max-width:66ch}
.art-tresc ul li{position:relative;padding-left:22px;font-size:1.0625rem;line-height:1.6;color:var(--ink-2)}
.art-tresc ul li::before{content:'';position:absolute;left:2px;top:.7em;width:8px;height:8px;border:1.5px solid var(--brand);border-radius:2px}
.art-tresc ul li strong{color:var(--ink)}

/* zrzuty ekranu: ramka jak urzadzenie, podpis pod spodem */
.zrzut{margin-top:26px}
.zrzut img,.zrzut video{width:100%;height:auto;border:1px solid var(--rule-2);border-radius:var(--r-m);background:var(--bg-2)}
.zrzut figcaption{margin-top:10px;font-size:.875rem;color:var(--ink-3);line-height:1.45;max-width:60ch}
.zrzuty-para{display:grid;gap:16px;margin-top:26px;align-items:start}
@media (min-width:700px){.zrzuty-para{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zrzuty-para .zrzut{margin-top:0}
.zrzut-telefon img,.zrzut-telefon video{border-radius:26px;max-width:320px}

.art-liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:1px;margin-top:22px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden}
.art-liczby div{background:color-mix(in oklch,var(--bg-2) 92%,transparent);padding:14px 16px;display:flex;flex-direction:column-reverse;justify-content:flex-end}
.art-liczby dd{font-weight:800;font-stretch:112%;font-size:1.75rem;letter-spacing:-.03em;color:var(--akcent);font-variant-numeric:tabular-nums}
.art-liczby dt{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-top:4px}

/* ------------------------------------------------------------------ system zamowien */

/* Tresc prezentacji dla restauracji: problem, obieg, wyniki z Wyszaka, funkcje i wdrozenie.
   Etykieta nad tytulem jak w prezentacji - kwadracik i mono. */
.kicker{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.75rem;line-height:1.4;
  letter-spacing:.06em;text-transform:uppercase;color:var(--akcent)}
.kicker::before{content:'';width:8px;height:8px;background:currentColor;flex:none}
.kafel .link{margin-left:0;justify-self:start;margin-top:4px}

.blok{margin-top:clamp(56px,8vw,104px)}
.blok-glowa{display:grid;gap:14px;margin-bottom:clamp(24px,3.4vw,40px)}
.blok-tytul{font-weight:800;font-stretch:108%;font-size:clamp(1.75rem,4vw,2.875rem);line-height:1.04;letter-spacing:-.04em;
  text-wrap:balance;max-width:24ch}

/* karty: cztery problemy i szesc korzysci lokalu */
.karty{list-style:none;display:grid;gap:14px}
@media (min-width:640px){.karty{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.karty-problem{grid-template-columns:repeat(4,minmax(0,1fr))}.karty-lokal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.karta{display:grid;align-content:start;gap:10px;padding:22px;border:1px solid var(--rule);border-radius:var(--r-l);
  background:color-mix(in oklch,var(--bg-2) 90%,transparent)}
.karta-nr{font-family:var(--mono);font-size:.75rem;color:var(--akcent)}
.karta h4{font-weight:800;font-stretch:108%;font-size:1.1875rem;letter-spacing:-.025em;line-height:1.3}
.karta p{font-size:1rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.karty-problem .karta p{font-size:1.0625rem;font-weight:500;color:var(--ink)}

/* etapy polaczone kablem z impulsem, jak schemat w kaflu uslug: na telefonie w pionie, od 900 px w poziomie */
.etapy{list-style:none;display:grid;gap:30px}
.etap{position:relative;display:grid;align-content:start;gap:8px;padding-left:64px;min-height:44px}
.etap-nr{position:absolute;left:0;top:0;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-m);
  border:1px solid var(--akcent);background:var(--bg-2);color:var(--akcent);
  font-weight:800;font-stretch:112%;font-size:1.125rem;font-variant-numeric:tabular-nums}
.etap h3,.etap h4{font-weight:800;font-stretch:108%;font-size:1.25rem;letter-spacing:-.025em;line-height:1.3;padding-top:8px}
.etap p{font-size:1rem;line-height:1.55;color:var(--ink-2);max-width:40ch;text-wrap:pretty}
.etap:not(:last-child)::after{content:'';position:absolute;left:21px;top:52px;bottom:-22px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--nic) 45%,var(--nic-blask) 50%,var(--nic) 55%,transparent) no-repeat var(--rule-2);
  background-size:100% 60%;background-position:0 -200%}
@media (min-width:900px){
  .etapy-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
  .etapy-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
  .etap{padding-left:0;padding-top:62px}
  .etap h3,.etap h4{padding-top:0}
  .etap:not(:last-child)::after{left:54px;right:-14px;top:21px;bottom:auto;width:auto;height:2px;
    background-image:linear-gradient(90deg,transparent,var(--nic) 45%,var(--nic-blask) 50%,var(--nic) 55%,transparent);
    background-size:60% 100%;background-position:-200% 0}
  .etapy-5 .etap:not(:last-child)::after{right:-10px}
}
@media (prefers-reduced-motion:no-preference){
  .etap:not(:last-child)::after{animation:kabel-pion 2.4s linear infinite}
  .etap:nth-child(2)::after{animation-delay:.8s}
  .etap:nth-child(3)::after{animation-delay:1.6s}
  .etap:nth-child(4)::after{animation-delay:2.4s}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  .etap:not(:last-child)::after{animation-name:kabel-poziom}
}

/* wyniki: panel jak okladka zestawienia dla wlascicieli - wielka liczba, mapa stolow, cztery liczby, opinia */
.wynik{position:relative;display:grid;gap:clamp(28px,4vw,48px);padding:clamp(22px,4.6vw,60px);overflow:hidden;
  border:1px solid var(--rule-2);border-radius:calc(var(--r-l) + 6px);
  background:radial-gradient(circle at 1px 1px,var(--plan-kropka) 1.2px,transparent 1.6px) 0 0/24px 24px,color-mix(in oklch,var(--bg-2) 94%,transparent)}
@media (min-width:1000px){
  .wynik{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:56px}
  .wynik-glowa{grid-column:1}
  .mapa{grid-column:2;align-self:center}
  .wynik-liczby,.opinia,.wynik .przypis{grid-column:1/-1}
}
.wynik-glowa{display:grid;gap:16px;align-content:start}
.wynik-tytul{font-size:clamp(2rem,4.4vw,3.375rem);line-height:1.02}
.wynik-az{display:block;margin:.06em 0 .04em -.05em;font-stretch:118%;font-size:clamp(5.25rem,14vw,10.5rem);line-height:.84;
  letter-spacing:-.055em;color:var(--akcent);white-space:nowrap}
.wynik-az b{font-weight:800}
.wynik .lede{max-width:46ch}

.mapa{display:grid;gap:20px}
.sala-tytul{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sala-tytul span{color:var(--ink);letter-spacing:0}
.wynik .sala-tytul,.wynik .przypis,.obieg-wezel.obieg-srodek small{color:var(--ink-2)}
.kolka{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.kolko{display:grid;place-items:center;width:56px;height:56px;padding:0 3px;border-radius:50%;border:1.5px solid var(--rule-2);
  color:var(--ink-2);font-family:var(--mono);font-size:.5625rem;line-height:1.3;text-align:center;
  transition:background .5s var(--e-quart),border-color .5s var(--e-quart),color .5s var(--e-quart),box-shadow .5s var(--e-quart);
  transition-delay:calc(var(--i,0) * 55ms + 300ms)}
.kolko-app{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700;
  box-shadow:0 0 0 5px color-mix(in oklch,var(--brand) 15%,transparent)}
[data-theme="light"] .kolko-app{border-color:var(--akcent)}
/* stoly zapalaja sie po kolei, gdy mapa wjedzie na ekran; bez JS i przy reduced motion swieca od razu */
@media (prefers-reduced-motion:no-preference){
  .js .mapa:not(.in) .kolko-app{background:transparent;border-color:var(--rule-2);color:var(--ink-2);box-shadow:none}
}
.mapa-legenda{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.875rem;color:var(--ink-2)}
.mapa-legenda span{display:inline-flex;align-items:center;gap:8px}
.znak{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--rule-2);flex:none}
.znak-app{background:var(--brand);border-color:var(--brand)}
@media (max-width:520px){.kolka{gap:6px}.kolko{width:44px;height:44px;font-size:.5rem;padding:0 2px}}

.wynik-liczby{margin-top:0}
@media (max-width:639px){
  .wynik-liczby{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wynik-liczby div{padding:16px 14px}
  .wynik-liczby dd{font-size:2.375rem}
  .wynik-liczby dt{font-size:.875rem}
}
.wynik-liczby div{background:color-mix(in oklch,var(--bg) 88%,transparent)}

.opinia{display:grid;gap:14px;margin:0;padding:clamp(20px,3vw,34px);border:1px solid var(--rule);border-radius:var(--r-l);
  background:color-mix(in oklch,var(--bg) 88%,transparent)}
.opinia-gwiazdki{display:flex;gap:4px}
.opinia-gwiazdki svg{width:20px;height:20px;fill:var(--akcent)}
.opinia-gwiazdki svg.pusta{fill:none;stroke:var(--rule-2);stroke-width:1.5}
.opinia blockquote p{font-weight:800;font-stretch:106%;font-size:clamp(1.375rem,2.8vw,2.125rem);line-height:1.16;
  letter-spacing:-.03em;text-wrap:balance;max-width:34ch}
.opinia figcaption{font-size:.875rem;line-height:1.55;color:var(--ink-3);max-width:72ch}
.przypis{font-family:var(--mono);font-size:.75rem;line-height:1.65;color:var(--ink-3);max-width:72ch}

/* funkcje: tekst i zrzut na przemian, telefon w smuklej ramce, odbiornik w ramce tabletu */
.funkcja{display:grid;gap:32px;align-items:center;padding-block:clamp(44px,6vw,80px);border-top:1px solid var(--rule)}
.dh + .funkcja{border-top:0;padding-top:0}
@media (min-width:900px){
  .funkcja{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}
  .funkcja-odwrot{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .funkcja-odwrot > .funkcja-tekst{order:2}
  .funkcja-szeroka{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px}
  .funkcja-szeroka.funkcja-odwrot{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
}
.funkcja-tekst{display:grid;gap:14px;align-content:start}
.funkcja h3,.kasa h3{font-weight:800;font-stretch:108%;font-size:clamp(1.75rem,3.4vw,2.625rem);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.funkcja-lede{font-size:1.0625rem;line-height:1.6;color:var(--ink-2);max-width:54ch;text-wrap:pretty}
.funkcja-lede strong{color:var(--ink);font-weight:700}
.punkty{list-style:none;display:grid;gap:12px;margin-top:4px;max-width:56ch}
.punkty li{position:relative;padding-left:24px;font-size:1.0625rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.punkty li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;border:1.5px solid var(--akcent);border-radius:2px}
.punkty strong{color:var(--ink);font-weight:700}
.fakt{display:flex;align-items:center;gap:16px;margin-top:6px;padding-top:18px;border-top:1px solid var(--rule);max-width:52ch}
.fakt b{font-weight:800;font-stretch:115%;font-size:clamp(2.25rem,4vw,3rem);line-height:1;letter-spacing:-.04em;color:var(--akcent);flex:none}
.fakt span{font-size:1rem;line-height:1.45;color:var(--ink-2)}
.funkcja .art-liczby{margin-top:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.funkcja .art-liczby div:last-child{grid-column:1/-1}
@media (min-width:560px){.funkcja .art-liczby{grid-template-columns:repeat(3,minmax(0,1fr))}.funkcja .art-liczby div:last-child{grid-column:auto}}
.funkcja .art-liczby dt{line-height:1.4}

.funkcja-obraz{display:grid;justify-items:center;margin:0}
.telefon{position:relative;width:min(300px,76vw);padding:24px 9px 9px;border-radius:40px;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:1px solid var(--rule-2)}
.telefon::before{content:'';position:absolute;top:10px;left:50%;width:46px;height:5px;margin-left:-23px;border-radius:999px;background:var(--rule-2)}
.telefon img{width:100%;height:auto;border-radius:31px}
.funkcja-ekrany{display:grid;gap:12px;margin:0}
.ekran{padding:8px;border-radius:calc(var(--r-l) + 2px);background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:1px solid var(--rule-2)}
.ekran img{width:100%;height:auto;border-radius:var(--r-m)}
.ekran-maly{position:relative;width:64%;justify-self:end;margin-top:-16%;margin-right:-2%}
.ekran-maly{box-shadow:0 26px 50px -26px oklch(0 0 0 / .85)}
[data-theme="light"] .ekran-maly{box-shadow:0 22px 44px -26px oklch(.185 .015 265 / .35)}
.funkcja-ekrany figcaption{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}

/* integracja z kasa: trzy wezly polaczone kablem, jak schemat w kaflu uslug */
.kasa{display:grid;gap:28px;padding-block:clamp(44px,6vw,80px);border-top:1px solid var(--rule)}
.kasa-tekst{display:grid;gap:14px}
@media (min-width:900px){.kasa-tekst{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:end}}
.obieg{display:grid;grid-template-columns:minmax(0,1fr)}
.obieg-wezel{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--rule-2);border-radius:var(--r-l);background:var(--bg-2)}
.obieg-wezel small{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.obieg-wezel b{font-weight:800;font-stretch:108%;font-size:1.25rem;letter-spacing:-.025em;line-height:1.3}
.obieg-wezel span{font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.obieg-srodek{border-color:var(--akcent);background:color-mix(in oklch,var(--brand) 10%,var(--bg-2))}
.obieg-kabel{justify-self:center;width:2px;height:34px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--nic) 45%,var(--nic-blask) 50%,var(--nic) 55%,transparent) no-repeat var(--rule-2);
  background-size:100% 60%;background-position:0 -200%}
@media (min-width:900px){
  .obieg{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr);align-items:center}
  .obieg-kabel{justify-self:stretch;width:auto;height:2px;
    background-image:linear-gradient(90deg,transparent,var(--nic) 45%,var(--nic-blask) 50%,var(--nic) 55%,transparent);
    background-size:60% 100%;background-position:-200% 0}
}
@media (prefers-reduced-motion:no-preference){
  .obieg-kabel{animation:kabel-pion 2.4s linear infinite}
  .obieg-kabel + .obieg-wezel + .obieg-kabel{animation-delay:1.2s}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){.obieg-kabel{animation-name:kabel-poziom}}

/* odstepy miedzy blokami funkcji: kazdy zaczyna sie kreska, jak kolejne funkcje */
.kasa + .blok{margin-top:0;padding-top:clamp(44px,6vw,80px);border-top:1px solid var(--rule)}
.blok + .funkcja{margin-top:clamp(44px,6vw,80px)}

/* pas w limonce pod kartami lokalu */
.pas{margin-top:14px;padding:clamp(20px,3vw,32px);border-radius:var(--r-l);font-weight:700;font-stretch:104%;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.3;letter-spacing:-.022em;text-wrap:balance}

/* realizacje: jak to jest zbudowane i czego celowo nie ma */
.budowa{display:grid;gap:32px;margin-top:clamp(48px,7vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--rule)}
@media (min-width:900px){.budowa{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}}
.budowa h3{font-weight:800;font-stretch:108%;font-size:clamp(1.375rem,2.2vw,1.75rem);letter-spacing:-.035em;line-height:1.1;margin-bottom:14px}

/* ------------------------------------------------------------------ stany wcisniecia (dotyk) */

@media (hover:none),(pointer:coarse){
  .faq summary:active{color:var(--brand)}
  .faq summary:active::after{transform:scale(1.15)}
  .faq details[open] summary:active::after{transform:rotate(45deg) scale(1.15)}
  .contact-list a:active{background:var(--on-brand);color:var(--brand)}
  .contact-list a:active dt{translate:12px 0}
  footer nav a:active{color:var(--on-brand);background:var(--brand)}
  .menu a:active{background:var(--on-brand);color:var(--brand)}
  .film-okno:active .film-graj{gap:16px}
  .kafel:active{border-color:color-mix(in oklch,var(--brand) 50%,transparent)}
}

/* ------------------------------------------------------------------ ruch */

/* Odslanianie to dodatek do tresci, ktora i tak jest widoczna:
   ukrywamy ja tylko, gdy dziala JS (klasa js na html), wiec bez skryptu nic nie znika. */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;translate:0 18px;
        transition:opacity .6s var(--e-quart),translate .7s var(--e-expo);
        transition-delay:calc(var(--i,0)*80ms)}
  .rise.in{opacity:1;translate:0}
  .js .hero h1 .w{opacity:0;translate:0 .14em;
        transition:opacity .5s var(--e-expo),translate .6s var(--e-expo);
        transition-delay:calc(var(--wi,0)*65ms)}
  .hero.go h1 .w{opacity:1;translate:0}
  .js .hero-film{opacity:0;translate:0 18px;transition:opacity .7s var(--e-expo) .45s,translate .8s var(--e-expo) .45s}
  .hero.go .hero-film{opacity:1;translate:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* waski ekran: schemat zamowien bez podpisu serwera i z ciasniejszymi odstepami - inaczej rozpycha rzad */
@media (max-width:600px){
  .schemat{padding:12px;grid-template-columns:minmax(0,1fr) 14px auto 14px minmax(0,1fr);grid-template-rows:auto 22px auto}
  .sch-serwer{padding:10px 8px}
  .sch-serwer span{display:none}
  .sch-wezel{padding:6px}
  .sch-raport{padding:8px}
  .kafel-zamowienia .kafel-wizual{height:auto}
  .schemat-sklep{grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr)}
}

/* najwezsze telefony (powiekszony tekst systemu): etykiety 12 px musza zmiescic sie w trzech kolumnach */
.hero-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:400px){.hero-facts div{padding:10px 8px}.hero-facts dd{font-size:1.25rem}}