/* ===========================================================================
   STRONA Z KLASĄ — system wizualny
   ---------------------------------------------------------------------------
   Wszystkie kolory, odstępy i krzywe animacji siedzą w :root poniżej.
   Zmieniasz je w jednym miejscu i zmienia się cała strona.

   Motyw przewodni: SZYBA. Ten sam szklany panel, który widzisz w filmiku
   na górze strony, wraca jako karta, kafelek usługi i ramka realizacji.
   Jasna krawędź u góry to światło padające na szkło, a rozmyty cień
   pod spodem to jego odbicie w podłodze.
   =========================================================================== */

/* --- Tokeny --------------------------------------------------------------- */
:root{
  /* Tła: od najgłębszego do najjaśniejszego. Nigdy czysta czerń. */
  --void:      #050506;
  --canvas:    #0A0A0B;
  --canvas-2:  #101011;
  --pane:      #151517;
  --pane-2:    #1C1C1F;

  /* Linie */
  --line:      #26262A;
  --line-2:    #34343A;
  --line-int:  #5E5E68;   /* krawędzie elementów klikalnych, kontrast 3,5:1 */

  /* Tekst */
  --text:      #FFFFFF;
  --text-2:    #B2B2B8;
  --text-3:    #8C8C94;

  /* Akcent: czerwień. Na przyciskach, etykietach, ikonach i strzałkach.
     #DC2038 daje 4,9:1 z białym tekstem na przycisku, więc mieści się
     w wymogu 4,5:1 dla zwykłego tekstu. */
  --gold:      #DC2038;
  --gold-2:    #F0324A;
  --gold-dim:  rgba(220,32,56,.18);
  --gold-ink:  #FFFFFF;
  /* Ta sama czerwień do MAŁEGO tekstu (etykiety, strzałki, "Klasą" w logo):
     jaśniejsza, bo #DC2038 na czerni ma tylko 4,17:1, a #F0324A ma 4,96:1. */
  --accent-text: #F0324A;

  /* Zimny błysk krawędzi szkła */
  --glass:     #C6C6CE;
  --glass-dim: rgba(255,255,255,.12);

  /* Odbicie pod szybą (.pane::after). Osobny token, bo na jasnej sekcji
     musi się odwrócić z białej poświaty na ciemny cień. */
  --pane-glow: rgba(255,255,255,.08);

  /* Typografia.
     Chcesz zmienić krój nagłówków? Podmień --display tutaj i adres czcionek
     w <head> każdej podstrony. Sprawdzone alternatywy: 'Onest', 'Schibsted Grotesk'. */
  --display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --body:    'Onest', 'Segoe UI', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Ruch */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       .55s;
  --dur-fast:  .28s;

  /* Wymiary */
  --wrap:      1240px;
  --wrap-thin: 860px;
  --pad:       clamp(20px, 5vw, 48px);
  --nav-h:     72px;

  /* Cień pod literami robi robotę lokalnie, tuż przy glifach, zamiast
     przyciemniać pół kadru. Cztery warstwy: ostra krawędź, bliska poświata,
     średnia i szeroka. */
  --tshadow: 0 1px 2px rgba(4,4,5,.98), 0 2px 7px rgba(4,4,5,.92),
             0 5px 20px rgba(4,4,5,.86), 0 12px 52px rgba(4,4,5,.7);
}


/* ---------------------------------------------------------------------------
   WERSJA ZŁOTA (poprzednia). Chcesz wrócić? Podmień wartości w :root wyżej
   na te i zmień pięć etykiet z var(--text-3) z powrotem na var(--gold):
   .kicker, .service__no, .value__k, .step::before, .work-card__kick

   --void:#07080B  --canvas:#0B0D11  --canvas-2:#101319
   --pane:#141821  --pane-2:#1A1F2A
   --line:#232936  --line-2:#303748  --line-int:#5C6980
   --text:#F3F5F8  --text-2:#AAB3C0  --text-3:#8A93A2
   --gold:#E4BE72  --gold-2:#F3D699  --gold-dim:rgba(228,190,114,.16)
   --gold-ink:#0B0D11
   --glass:#A9C7EE  --glass-dim:rgba(169,199,238,.14)
   --------------------------------------------------------------------------- */

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ overflow-x:hidden; overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  overflow-x:hidden; overflow-x:clip;
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font:400 clamp(15px,1.05vw,17px)/1.65 var(--body);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,textarea,select{ font:inherit; color:inherit }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600;
             letter-spacing:-.028em; line-height:1.06 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
dl,dd,dt{ margin:0 }

::selection{ background:var(--gold); color:var(--gold-ink) }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--gold-ink);
  padding:12px 20px; font-weight:600;
}
.skip-link:focus{ left:0 }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- Jedno tło pod całą stroną -------------------------------------------
   Wolno dryfująca poświata, żeby przewijanie było wędrówką przez miejsce,
   a nie przeskakiwaniem między sekcjami.                                     */
.bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70rem 46rem at 78% -6%,  rgba(255,255,255,.045), transparent 62%),
    radial-gradient(58rem 40rem at 8%  32%,  rgba(255,255,255,.035), transparent 60%),
    radial-gradient(64rem 52rem at 60% 108%, rgba(255,255,255,.028), transparent 62%),
    var(--canvas);
}
.bg::after{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(42rem 30rem at 50% 50%, rgba(255,255,255,.04), transparent 65%);
  animation:drift 78s var(--ease) -18s infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(-7%,-4%,0) scale(1) }
  to  { transform:translate3d(7%,5%,0)   scale(1.14) }
}

/* --- Układ ---------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
.wrap--thin{ max-width:var(--wrap-thin) }

.section{ padding-block:clamp(72px,9vw,132px); position:relative }
.section--alt{ background:var(--canvas-2); border-block:1px solid var(--line) }
.section--tight{ padding-block:clamp(52px,6vw,84px) }

/* Sekcja na jasnym tle. Podmienia lokalnie te same tokeny, których używa
   reszta strony, więc karty, przyciski i linki automatycznie przechodzą
   na jasny wariant bez osobnych reguł. Czerwień na jasnym tle jest o ton
   ciemniejsza (#C41C32), żeby czerwony tekst na białym trzymał 5:1.
   Nigdy czysty biel/czerń, ten sam ton co w reszcie systemu. */
.section--light{
  --void:       #FFFFFF;   /* pola formularza (.field) i .work-meta czytają ten token wprost */
  --canvas:     #F6F6F4;
  --canvas-2:   #EEEEEA;
  --pane:       #FFFFFF;
  --pane-2:     #FFFFFF;
  --line:       #E1E1DC;
  --line-2:     #CFCFC8;
  --line-int:   #807F77;   /* 3,72:1 na jasnym tle, ponad wymóg 3:1 dla obwódek klikalnych */
  --text:       #101012;
  --text-2:     #47474A;
  --text-3:     #6C6C6E;
  --gold:       #C41C32;
  --gold-2:     #A8172A;
  --gold-ink:   #FFFFFF;
  --gold-dim:   rgba(196,28,50,.10);
  --accent-text:#A8172A;   /* 6,9:1 na jasnym tle */
  --glass:      #3A3A3C;
  --glass-dim:  rgba(16,16,18,.08);
  --pane-glow:  rgba(16,16,18,.07);
  background:var(--canvas); color:var(--text);
  border-block:1px solid var(--line);
}

.rule{ height:1px; background:var(--line); border:0; margin:0 }

/* --- Typografia ----------------------------------------------------------- */
.kicker{
  font:500 clamp(11px,.78vw,12.5px)/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:20px;
}
.kicker--quiet{ color:var(--text-3) }

.h1{ font-size:clamp(34px,5.6vw,72px) }
.h2{ font-size:clamp(28px,3.9vw,52px) }
.h3{ font-size:clamp(20px,1.9vw,26px); letter-spacing:-.02em }

.lead{
  color:var(--text-2);
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.62;
  max-width:62ch;
}
.body-text{ color:var(--text-2); max-width:68ch }
.body-text + .body-text{ margin-top:16px }
.cols > .body-text + .body-text{ margin-top:0 }   /* obok siebie w kolumnach, nie pod sobą */

.cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,3vw,48px);
}

/* Wizualny wstęp: trzy prawdziwe realizacje jako luźny stosik kart obok
   tekstu "Kim jesteśmy", żeby sekcja nie startowała samym akapitem. */
.intro-grid{
  display:grid; grid-template-columns:minmax(230px,320px) 1fr;
  gap:clamp(36px,5.5vw,72px); align-items:center;
  margin-bottom:clamp(40px,5vw,64px);
}
.intro-art{ position:relative; aspect-ratio:4/3.3 }
.intro-art__card{
  position:absolute; width:76%; aspect-ratio:16/10.5;
  border-radius:7px; object-fit:cover; object-position:top center;
  border:1px solid var(--line-2); box-shadow:0 22px 44px rgba(0,0,0,.45);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
  background:var(--pane);
}
.intro-art__card--1{ top:1%;  left:0;   transform:rotate(-7deg); z-index:1 }
.intro-art__card--2{ top:17%; left:17%; transform:rotate(3deg);  z-index:2 }
.intro-art__card--3{ top:32%; left:23%; transform:rotate(-2deg); z-index:3 }
.intro-art:hover .intro-art__card--1{ transform:translate(-8px,-5px) rotate(-9deg) }
.intro-art:hover .intro-art__card--2{ transform:translate(5px,3px) rotate(4deg) }
.intro-art:hover .intro-art__card--3{ transform:translate(9px,11px) rotate(0deg); box-shadow:0 26px 52px rgba(0,0,0,.5) }

@media (max-width:780px){
  .intro-grid{ grid-template-columns:1fr; gap:56px }
  .intro-art{ max-width:340px; margin-inline:auto; width:100% }
}

/* Mocny akapit wprowadzający. Zostaje nagłówkiem <h2> dla wyszukiwarki,
   ale nie krzyczy rozmiarem jak tytuł sekcji. */
.statement{
  font-family:var(--display); font-weight:500;
  font-size:clamp(19px,2.1vw,29px); line-height:1.34; letter-spacing:-.02em;
  max-width:36ch;
}

.sec-head{ max-width:760px; margin-bottom:clamp(40px,5vw,68px) }
.sec-head .lead{ margin-top:20px }

/* --- Przyciski ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:2px; border:1px solid transparent;
  font:600 15px/1 var(--body); letter-spacing:.01em;
  cursor:pointer; position:relative; isolation:isolate;
  appearance:none; -webkit-appearance:none; background:none;
  transition:color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:active{ transform:translateY(1px) }

.btn--gold{ background:var(--gold); color:var(--gold-ink) }
.btn--gold:hover{ background:var(--gold-2) }

.btn--ghost{ border-color:var(--line-int); color:var(--text) }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold) }

.btn--lg{ padding:17px 34px; font-size:16px }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; color:var(--accent-text);
  transition:gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link-arrow::after{
  content:""; width:18px; height:1px; background:currentColor;
  transition:width var(--dur-fast) var(--ease);
}
.link-arrow:hover{ gap:14px; color:var(--gold-2) }
.link-arrow:hover::after{ width:24px }

@media (pointer:coarse){
  .btn{ min-height:44px }
  .link-arrow{ min-height:44px }
}

/* --- Nawigacja ------------------------------------------------------------ */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  height:var(--nav-h);
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             backdrop-filter var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav__inner{
  height:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; gap:28px;
}

.logo{ display:inline-flex; align-items:center; gap:11px; margin-right:auto }
.logo__mark{ width:26px; height:26px; flex:none }
.logo__text{
  font:700 17px/1 var(--display); letter-spacing:-.02em; white-space:nowrap;
}
.logo__text b{ font-weight:700; color:var(--text) }
.logo__text i{ font-style:normal; color:var(--accent-text) }

.nav__menu{ display:flex; align-items:center; gap:4px }
.nav__menu > li{ position:relative }
.nav__link{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:2px;
  font-size:14.5px; font-weight:500; color:var(--text-2);
  transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{ color:var(--text); background:rgba(255,255,255,.045) }
.nav__link[aria-current="page"]{ color:var(--gold) }
.nav__link .chev{ width:9px; height:9px; opacity:.6; transition:transform var(--dur-fast) var(--ease) }
.nav__link[aria-expanded="true"] .chev{ transform:rotate(180deg) }

.nav__drop{
  position:absolute; top:calc(100% + 8px); left:0; min-width:288px;
  background:var(--pane); border:1px solid var(--line-2); border-radius:4px;
  padding:8px; box-shadow:0 24px 60px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
             visibility var(--dur-fast) var(--ease);
}
.nav__item.is-open .nav__drop{ opacity:1; visibility:visible; transform:translateY(0) }
.nav__drop a{
  display:block; padding:10px 13px; border-radius:3px;
  font-size:14.5px; color:var(--text-2);
  transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav__drop a:hover{ color:var(--text); background:rgba(255,255,255,.05) }
.nav__drop a span{ display:block; font:500 11px/1.5 var(--mono); color:var(--text-3); margin-top:3px }

.nav__cta{ display:flex; align-items:center; gap:12px }
.nav__tel{
  display:inline-flex; align-items:center; gap:8px;
  font:500 14px/1 var(--mono); color:var(--text-2); white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.nav__tel:hover{ color:var(--gold) }
.nav__cta .btn{ padding:11px 20px; font-size:14px }

.burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer; padding:0;
  position:relative;
}
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--text);
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger span:nth-child(1){ top:18px }
.burger span:nth-child(2){ top:25px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }

.drawer{
  position:fixed; inset:var(--nav-h) 0 0; z-index:99;
  background:var(--canvas); border-top:1px solid var(--line);
  padding:24px var(--pad) 40px; overflow-y:auto;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
             visibility var(--dur) var(--ease);
}
.drawer.is-open{ opacity:1; visibility:visible; transform:translateY(0) }
.drawer a{ display:block; padding:14px 0; border-bottom:1px solid var(--line);
           font:700 20px/1.2 var(--display); letter-spacing:-.02em; text-align:center }
.drawer .sub a{ font:500 15px/1.2 var(--body); color:var(--text-2) }
.drawer__foot{ margin-top:28px; display:grid; gap:12px }
.drawer__foot .btn{ justify-content:center }

@media (max-width:1080px){
  .nav__menu,.nav__cta{ display:none }
  .burger{ display:block; margin-left:auto }
}

/* ===========================================================================
   HERO STEROWANY PRZEWIJANIEM (tylko strona główna)
   =========================================================================== */
/* Wysokość hero to droga przewijania, nie sekundy filmu.
   400vh daje każdemu z dwóch pasów tekstu ok. 150vh spokojnego czytania. */
.hero{ position:relative; height:400vh; background:var(--void) }
.stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--void);
}
.stage__poster{
  position:absolute; inset:0;
  background:var(--void) center/cover no-repeat;
  transition:opacity .7s var(--ease);
}
.stage__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transform:translateZ(0); will-change:transform;
  transition:opacity .7s var(--ease);
}
.stage.video-ready .stage__video{ opacity:1 }
.stage.video-ready .stage__poster{ opacity:0 }

/* Bazowa przyciemniająca warstwa: żadna klatka nie jest pod tekstem surowa */
.stage__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 122% 92% at 62% 46%,
             rgba(5,5,6,0) 32%, rgba(5,5,6,.66) 100%);
}
/* Pas czytelności po lewej. Jasny panel z filmu przejeżdża dokładnie tędy,
   więc przyciemnienie musi być mocne. Zmierzone: bez tego kontrast spada
   do 1,4:1, z tym trzyma się powyżej 3,5:1 w najgorszej klatce. */
.stage__vig{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(96deg,
             rgba(5,5,6,.95)  0%,
             rgba(5,5,6,.91) 12%,
             rgba(5,5,6,.85) 22%,
             rgba(5,5,6,.81) 31%,
             rgba(5,5,6,.71) 39%,
             rgba(5,5,6,.57) 47%,
             rgba(5,5,6,.41) 55%,
             rgba(5,5,6,.27) 64%,
             rgba(5,5,6,.12) 73%,
             rgba(5,5,6,.06) 82%,
             rgba(5,5,6,.02) 91%,
             rgba(5,5,6,0)  100%);
}

/* Pierścień ładowania */
.ring{
  position:absolute; left:var(--pad); bottom:38px; width:34px; height:34px;
  color:var(--gold); transform:rotate(-90deg); pointer-events:none;
}
.ring circle{ transition:stroke-dashoffset .12s linear }

.scroll-cue{
  position:absolute; left:var(--pad); bottom:36px;
  display:flex; align-items:center; gap:12px;
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-3); pointer-events:none;
}
.scroll-cue i{ display:block; width:44px; height:1px; background:currentColor; position:relative; overflow:hidden }
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  animation:cue 2.6s var(--ease) -.6s infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* Pasy tekstu nad filmem */
.bands{ position:absolute; inset:0; pointer-events:none }
.band{
  position:absolute; left:var(--pad); width:min(560px, 44vw);
  opacity:0; text-shadow:var(--tshadow);
}
.band--mid{ top:50%; transform:translateY(-50%) }
/* Pas tekstu nie ma juz wlasnego przyciemnienia. Kazdy ksztalt nalozony
   na film predzej czy pozniej pokazuje swoja krawedz, gdy pod spodem
   przejedzie jasniejszy kadr. Cala robote przejmuje plynne przejscie
   ponizej plus czterowarstwowy cien pod literami. */
.band::before{ content:none }
.band .btn{ text-shadow:none; pointer-events:auto }
/* Nagłówek hero jest znacznikiem <p>, a nie <h1>, bo jedyny <h1> na stronie
   siedzi osobno dla czytników ekranu. Dlatego krój i wagę trzeba mu nadać
   wprost, inaczej dziedziczy cienką czcionkę tekstową. */
.band__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(30px,3.7vw,52px); line-height:1.06; letter-spacing:-.03em;
}
.band__sub{
  margin-top:20px; color:var(--text-2);
  font-size:clamp(15px,1.15vw,18px); line-height:1.6; max-width:44ch;
}
.band__cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; align-items:center }

/* Rozbicie tytułu na słowa.
   Każde słowo siedzi we własnej masce i startuje tuż pod jej dolną
   krawędzią. Po włączeniu klasy "widoczny" wyjeżdża na miejsce w 0,9 s,
   z opóźnieniem rosnącym słowo po słowie. Animacja jest sterowana czasem,
   a nie przewijaniem, więc zawsze płynie w swoim tempie i nie szarpie,
   gdy ktoś kręci kółkiem szybciej albo wolniej.
   Zapas w pionie jest po to, żeby maska nie obcięła ogonków liter g, j, y. */
.split{ display:block }
.s{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.18em; margin-bottom:-.18em;
}
.s i{
  display:inline-block; font-style:normal;
  transform:translateY(108%);
  transition:transform .9s var(--ease-out);
  transition-delay:var(--op, 0ms);
  will-change:transform;
}
.band.widoczny .s i{ transform:none }

/* podtytuł i przyciski wchodzą po tytule, jedno po drugim */
.band__sub{
  opacity:0; transform:translateY(14px);
  transition:opacity .85s var(--ease-out) .30s, transform .85s var(--ease-out) .30s;
}
.band.widoczny .band__sub{ opacity:1; transform:none }

.band__cta{
  opacity:0; transform:translateY(16px);
  transition:opacity .85s var(--ease-out) .52s, transform .85s var(--ease-out) .52s;
}
.band.widoczny .band__cta{ opacity:1; transform:none }

/* Statyczny hero: telefony, tablety w pionie, ograniczony ruch.
   To zaprojektowany układ, nie awaryjne zastępstwo: pas z klatką końcową
   filmu, a pod nim treść. Telefon pobiera jeden lekki obrazek (38 KB)
   i nie dotyka ani filmu, ani dużego plakatu. */
.static-hero{ display:none }
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{ height:auto }
  .stage{ position:relative; height:auto; display:block; overflow:visible }
  .stage__video,.bands,.ring,.scroll-cue,.stage__scrim{ display:none }

  .stage__poster{
    position:relative; inset:auto; opacity:1;
    margin-top:0; /* obraz wchodzi pod przezroczystą belkę nawigacji */
    aspect-ratio:100/89;
    background-image:url('/assets/hero-mobile.jpg?v=20261009d');
  }
  /* filmik w pętli, jeśli włączony w config.js — leży na obrazku */
  .stage__loop{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block; border:0; background:transparent;
    opacity:0; transition:opacity .4s ease; pointer-events:none;
  }
  /* widoczny dopiero, gdy naprawdę się odtwarza — do tego czasu widać zdjęcie */
  .stage__loop.is-on{ opacity:1; }
  .stage__loop::-webkit-media-controls,
  .stage__loop::-webkit-media-controls-start-playback-button,
  .stage__loop::-webkit-media-controls-overlay-play-button{ display:none !important; -webkit-appearance:none; }
  .stage__vig{
    inset:auto 0 -1px 0; height:34%; top:auto;
    background:linear-gradient(180deg, rgba(10,10,11,0), rgba(10,10,11,.72) 62%, var(--canvas));
  }

  .static-hero{
    display:block; position:relative; z-index:2;
    padding:clamp(26px,6vw,40px) var(--pad) clamp(44px,8vw,64px);
  }
  .static-hero .band__title{ font-size:clamp(30px,7.6vw,44px) }
  .static-hero .band__sub{ max-width:38ch; margin-top:16px }
  .static-hero .band__cta{ margin-top:26px }
  /* poza .band nie ma animacji odsłaniania, więc podtytuł i przyciski muszą być widoczne od razu */
  .static-hero .band__sub,.static-hero .band__cta{ opacity:1; transform:none; transition:none }
/* Wariant pełnoekranowy (klasa hero--full na <section class="hero">): grafika wypełnia     cały pierwszy ekran, tekst i przycisk siedzą na dole na gradiencie.     Cofnięcie = usunąć klasę hero--full z index.html. */  .hero--full .stage{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden }  .hero--full .stage__poster{    position:absolute; inset:0; margin:0; aspect-ratio:auto;    background-image:url('/assets/hero-mobile-full.jpg?v=20261009d');    background-size:cover; background-position:top center;  }  .hero--full .stage__vig{    height:62%;    background:linear-gradient(180deg, rgba(10,10,11,0), rgba(10,10,11,.82) 48%, var(--canvas));  }  .hero--full .static-hero{ padding-top:0; padding-bottom:clamp(40px,8vw,64px) }
}
@media (max-height:560px){ .scroll-cue,.ring{ display:none } }

/* --- Nagłówek podstrony --------------------------------------------------- */
.pagehead{
  padding:calc(var(--nav-h) + clamp(56px,8vw,104px)) 0 clamp(44px,6vw,76px);
  position:relative; border-bottom:1px solid var(--line);
}
.pagehead .h1{ max-width:18ch }
.pagehead .lead{ margin-top:24px }
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font:500 12px/1 var(--mono); color:var(--text-3); margin-bottom:22px;
}
.crumbs a{ transition:color var(--dur-fast) var(--ease) }
.crumbs a:hover{ color:var(--gold) }
.crumbs span{ opacity:.5 }

/* ===========================================================================
   SZYBA — element sygnaturowy
   =========================================================================== */
.pane{
  position:relative; border-radius:5px;
  background:linear-gradient(178deg, var(--pane-2), var(--pane) 62%);
  border:1px solid var(--line-2);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* jasna krawędź: światło padające na górę szyby */
.pane::before{
  content:""; position:absolute; left:12%; right:12%; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--glass), transparent);
  opacity:.5; transition:opacity var(--dur) var(--ease), left var(--dur) var(--ease),
                        right var(--dur) var(--ease);
}
/* odbicie pod szybą */
.pane::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-22px; height:22px;
  background:linear-gradient(180deg, var(--pane-glow), transparent 72%);
  filter:blur(7px); opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.pane:hover,a:hover > .pane,a:focus-visible > .pane{ border-color:var(--line-int) }
.pane:hover::before,a:hover > .pane::before{ opacity:1; left:4%; right:4% }
.pane:hover::after,a:hover > .pane::after{ opacity:1 }

/* ===========================================================================
   USŁUGI
   =========================================================================== */
.services{ display:grid; gap:18px }
.service{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start;
  gap:clamp(20px,3vw,44px); padding:clamp(24px,3vw,38px);
}
.service__lead{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:26px }
.service__no{
  font:500 12px/1 var(--mono); letter-spacing:.16em; color:var(--accent-text);
}

/* Odznaka z ikoną — usługi, wartości, kroki procesu. Jeden wygląd,
   trzy rozmiary, żeby karty przestały być samym tekstem. */
.icon-badge{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:50%;
  border:1px solid transparent; color:var(--gold);
  background:var(--gold-dim);
}
.icon-badge svg{ width:21px; height:21px }
.svc-card .icon-badge,.value .icon-badge{ margin-bottom:16px }
.step__icon{ margin-bottom:14px }
.step__icon.icon-badge{ width:40px; height:40px }
.step__icon.icon-badge svg{ width:18px; height:18px }
.service__title{ font-size:clamp(21px,2.1vw,29px) }
.service__text{ color:var(--text-2); margin-top:14px; max-width:60ch }
.service__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.service__tags li{
  font:500 11.5px/1 var(--mono); letter-spacing:.06em;
  color:var(--text-3); border:1px solid var(--line-2);
  padding:7px 11px; border-radius:100px;
}
.service__go{ align-self:center; flex:none }

@media (max-width:820px){
  .service{ grid-template-columns:auto 1fr; }
  .service__go{ grid-column:2; justify-self:start; margin-top:6px }
}

/* Kafelki usług (na podstronach i w stopce oferty) */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px }
.svc-card{ padding:clamp(22px,2.4vw,30px); height:100% }
.svc-card .service__no{ padding-top:0; margin-bottom:16px; color:var(--accent-text) }
.svc-card h3{ font-size:20px }
.svc-card p{ color:var(--text-2); margin-top:12px; font-size:15px }
.svc-card .link-arrow{ margin-top:20px; font-size:14.5px }
.svc-card .svc-card__price{
  margin-top:16px; font:600 15px/1 var(--display); letter-spacing:-.01em; color:var(--text);
}

/* ===========================================================================
   CENNIK — karty "od" na /oferta/
   =========================================================================== */
.price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px }
.price-card{ padding:clamp(22px,2.4vw,30px); height:100% }
.price-card h3{ font-size:17px; color:var(--text-2); font-weight:500 }
.price-card__from{
  font:700 clamp(30px,3vw,40px)/1 var(--display); letter-spacing:-.04em;
  color:var(--gold); margin-top:10px;
}
.price-card__from small{ font:500 13px/1 var(--mono); letter-spacing:.08em; color:var(--text-3); margin-right:6px }
.price-card ul{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line) }
.price-card li{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  font-size:14.5px; color:var(--text-2); padding:7px 0;
}
.price-card li + li{ border-top:1px solid var(--line) }
.price-card li b{ font-weight:600; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums }
.price-note{
  margin-top:clamp(24px,3vw,36px); color:var(--text-3); font-size:14px; max-width:70ch;
}
/* Wariant na podstronie usługi: sama lista, bez dużej liczby "od" */
.price-card--solo{ max-width:600px }
.price-card--solo ul{ margin-top:0; padding-top:0; border-top:0 }
.price-card--solo li{ font-size:15.5px; padding:11px 0 }

/* ===========================================================================
   PORTFOLIO — makieta laptop + telefon
   =========================================================================== */
.work-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(28px,3.4vw,52px);
}
.work-card{ display:block }
.work-card__figure{ margin:0; position:relative }

.mock{
  position:relative; aspect-ratio:16/11;
  display:flex; align-items:center; justify-content:center;
}
/* laptop */
.mock__lap{
  position:relative; width:84%; margin-inline-start:-6%;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(178deg,#2A303B,#171B23);
  padding:8px 8px 9px;
  box-shadow:0 26px 54px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.11);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.mock__screen{
  border-radius:3px; overflow:hidden; background:var(--pane);
  aspect-ratio:16/10; position:relative;
}
.mock__screen img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.mock__screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.11) 0%,
             rgba(255,255,255,0) 34%, rgba(255,255,255,0) 100%);
}
.mock__foot{
  height:8px; margin:9px -7% -1px; border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#242A34,#12151C);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
/* telefon */
.mock__phone{
  position:absolute; right:2%; bottom:4%; width:20.5%;
  border-radius:14px; padding:5px;
  background:linear-gradient(178deg,#2A303B,#171B23);
  box-shadow:0 20px 40px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.13);
  transition:transform var(--dur) var(--ease-out);
}
.mock__phone-screen{
  border-radius:10px; overflow:hidden; aspect-ratio:9/19; background:var(--pane);
}
.mock__phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center }

.work-card:hover .mock__lap{ transform:translateY(-7px) }
.work-card:hover .mock__phone{ transform:translateY(-11px) }

.work-card__body{ margin-top:26px }
.work-card__kick{
  font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-text);
}
.work-card__title{
  font-size:clamp(20px,1.9vw,25px); margin-top:12px;
  transition:color var(--dur-fast) var(--ease);
}
.work-card:hover .work-card__title{ color:var(--gold) }
.work-card__sub{ color:var(--text-3); font-size:14.5px; margin-top:8px }

/* pierwsza realizacja na całą szerokość */
.work-grid--feature{ grid-template-columns:1fr }
@media (min-width:900px){
  .work-grid--mixed{ grid-template-columns:repeat(2,1fr) }
  .work-grid--mixed > :first-child{ grid-column:1 / -1 }
  .work-grid--mixed > :first-child .mock{ aspect-ratio:16/8 }
  .work-grid--mixed > :first-child .mock__lap{ width:62% }
  .work-grid--mixed > :first-child .mock__phone{ right:16%; width:15% }
}

/* ===========================================================================
   PODSTRONA REALIZACJI
   =========================================================================== */
.work-hero{
  background:var(--void); border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + 40px) 0 0;
}
.work-hero__mock{ padding:clamp(20px,2.6vw,38px) 0 clamp(30px,4vw,56px) }
.work-hero__mock .mock{ aspect-ratio:16/9.6; max-width:1140px; margin-inline:auto }
.work-hero__mock .mock__lap{ width:80%; margin-inline-start:-8% }
.work-hero__mock .mock__phone{ right:3%; bottom:2%; width:18% }

.work-body{
  display:grid; grid-template-columns:1fr; gap:clamp(32px,4vw,56px);
  align-items:start;
}
@media (min-width:940px){
  .work-body{ grid-template-columns:minmax(0,1fr) 340px }
}

.work-meta{
  background:var(--void); border:1px solid var(--line-2); border-radius:5px;
  padding:clamp(24px,2.6vw,34px); position:relative;
}
.work-meta::before{
  content:""; position:absolute; left:14%; right:14%; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--glass),transparent); opacity:.45;
}
.work-meta div + div{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line) }
.work-meta dt{ font:500 11.5px/1 var(--mono); letter-spacing:.14em; color:var(--text-3);
               text-transform:uppercase }
.work-meta dd{ margin-top:9px; font:700 17px/1.3 var(--display); letter-spacing:-.02em }
.work-meta dd a{ color:var(--gold) }
.work-meta dd a:hover{ text-decoration:underline; text-underline-offset:4px }
@media (min-width:940px){ .work-meta{ position:sticky; top:calc(var(--nav-h) + 24px) } }

.share{ display:flex; align-items:center; gap:12px; margin-top:34px; flex-wrap:wrap }
.share__label{ font:500 11.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
               color:var(--text-3) }
.share a{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--text-2);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease);
}
.share a:hover{ border-color:var(--gold); color:var(--gold-ink); background:var(--gold) }
.share svg{ width:15px; height:15px }

.work-points{ display:grid; gap:26px; margin-top:clamp(36px,4vw,54px) }
.work-point{ padding:clamp(22px,2.4vw,30px) }
.work-point h3{ font-size:19px }
.work-point p{ color:var(--text-2); margin-top:12px; font-size:15.5px }

.work-scope{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px }
.work-scope li{
  font:500 11.5px/1 var(--mono); letter-spacing:.06em; color:var(--text-2);
  border:1px solid var(--line-2); padding:8px 12px; border-radius:100px;
}

/* ===========================================================================
   PROCES, LICZBY, WARTOŚCI, OPINIE, FAQ
   =========================================================================== */
.steps{ counter-reset:s; display:grid; gap:0 }
.step{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr;
  gap:clamp(18px,3vw,40px); align-items:baseline;
  padding:clamp(22px,2.6vw,32px) 0; border-top:1px solid var(--line);
  position:relative;
}
.step:last-child{ border-bottom:1px solid var(--line) }
.step::before{
  content:"0" counter(s);
  font:500 12px/1 var(--mono); letter-spacing:.14em; color:var(--accent-text);
  min-width:30px;
}
.step__in h3{ font-size:clamp(19px,1.7vw,23px) }
.step__in p{ color:var(--text-2); margin-top:10px; max-width:56ch; font-size:15.5px }
.step__bar{
  position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--gold); transition:width 1.1s var(--ease-out);
}
.step.in .step__bar{ width:100% }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px;
        background:var(--line) }
.stat{ background:var(--canvas-2); padding:clamp(26px,3vw,40px) }
.stat__v{ font:700 clamp(34px,4.4vw,58px)/1 var(--display); letter-spacing:-.045em;
          color:var(--gold) }
.stat__v sup{ font-size:.42em; letter-spacing:0; vertical-align:super; color:var(--text-3) }
.stat__v small{ font:500 .3em/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
                color:var(--text-3); margin-right:.3em; vertical-align:middle }
.stat__l{ color:var(--text-2); margin-top:14px; font-size:14.5px; max-width:26ch }

.values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px }
.value{ padding:clamp(22px,2.4vw,30px); height:100% }
.value .value__k{ font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
                  color:var(--accent-text); margin-bottom:18px }
.value h3{ font-size:18.5px; line-height:1.25 }
.value p{ color:var(--text-2); margin-top:12px; font-size:14.5px }

.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px }
.quote{ padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column; height:100% }
.quote__stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:18px }
.quote__stars svg{ width:14px; height:14px }
.quote p{ font-size:16px; line-height:1.6 }
.quote footer{ margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:12px }
.quote__av{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--gold-dim); color:var(--gold);
  font:700 14px/1 var(--display);
}
.quote__who b{ display:block; font:600 14.5px/1.3 var(--body) }
.quote__who span{ display:block; font-size:13px; color:var(--text-3); margin-top:2px }

.faq{ border-top:1px solid var(--line) }
.faq__item{ border-bottom:1px solid var(--line) }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; padding:clamp(20px,2.2vw,26px) 0; background:none; border:0;
  text-align:left; cursor:pointer;
  font:700 clamp(16.5px,1.5vw,20px)/1.35 var(--display); letter-spacing:-.02em;
  transition:color var(--dur-fast) var(--ease);
}
.faq__q:hover{ color:var(--gold) }
.faq__ico{ flex:none; width:20px; height:20px; margin-top:3px; position:relative }
.faq__ico::before,.faq__ico::after{
  content:""; position:absolute; inset:50% 0 auto; height:1.5px; background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.faq__ico::after{ transform:rotate(90deg) }
.faq__q[aria-expanded="true"] .faq__ico::after{ transform:rotate(0) }
.faq__a{ overflow:hidden; height:0; transition:height var(--dur) var(--ease) }
.faq__a > div{ padding-bottom:clamp(20px,2.2vw,28px) }
.faq__a p{ color:var(--text-2); max-width:70ch }
.faq__a p + p{ margin-top:12px }

/* ===========================================================================
   FORMULARZ
   =========================================================================== */
.form{ display:grid; gap:18px }
.form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px }
.field{ display:grid; gap:9px }
.field > label{ font:500 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
                color:var(--text-3) }
.field input,.field textarea,.field select{
  width:100%; padding:14px 16px; border-radius:3px;
  background:var(--void); border:1px solid var(--line-int); color:var(--text);
  font-size:15.5px;
  transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.6 }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-3); opacity:.75 }
.field input:hover,.field textarea:hover,.field select:hover{ border-color:var(--text-3) }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold); background:var(--canvas);
}
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 51%, calc(100% - 14px) 51%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}

.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip{ position:relative }
.chip input{ position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0 }
.chip span{
  display:block; padding:11px 16px; border-radius:100px;
  border:1px solid var(--line-int); color:var(--text-2);
  font-size:14px; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease);
}
.chip input:hover + span{ border-color:var(--text-3) }
.chip input:checked + span{ border-color:var(--gold); color:var(--gold-ink); background:var(--gold) }
.chip input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:3px }

.consent{ display:flex; gap:12px; align-items:flex-start }
.consent input{ margin-top:4px; width:17px; height:17px; accent-color:var(--gold); flex:none }
.consent label{ font-size:13.5px; color:var(--text-3); line-height:1.55 }

.form__note{ font-size:13.5px; color:var(--text-3) }
.form__status{ font-size:15px; padding:15px 18px; border-radius:3px; display:none }
.form__status.is-on{ display:block }
.form__status.is-ok{ background:rgba(37,211,102,.12); border:1px solid #2FBF71; color:#7EE2A8 }   /* zielone = wysłano */
.form__status.is-bad{ background:rgba(255,120,120,.1); border:1px solid #FF9B9B; color:#FFC2C2 }

/* ===========================================================================
   CTA, KONTAKT, STOPKA
   =========================================================================== */
.cta{
  position:relative; overflow:hidden;
  padding-block:clamp(72px,9vw,124px);
  background:var(--void); border-block:1px solid var(--line);
}
.cta__img{ position:absolute; inset:0; opacity:.55 }
.cta__img img{ width:100%; height:100%; object-fit:cover; object-position:right center; transform:translateX(12%) scale(1.15); transform-origin:right center }   /* laptop po prawej, tekst po lewej */
.cta__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.7) 40%, rgba(5,5,6,.25) 100%);
}
.cta .wrap{ position:relative }
.cta__title{ font-size:clamp(30px,4.4vw,58px); max-width:17ch }
.cta__row{ margin-top:36px; display:flex; flex-wrap:wrap; gap:16px; align-items:center }

.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,56px) }
@media (min-width:940px){ .contact-grid{ grid-template-columns:1fr 400px } }
.contact-card{ padding:clamp(24px,2.8vw,36px) }
.contact-row{ display:flex; gap:15px; align-items:flex-start; padding-block:17px }
.contact-row + .contact-row{ border-top:1px solid var(--line) }
.contact-row svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-top:3px }
.contact-row dt{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
                 color:var(--text-3) }
.contact-row dd{ margin-top:7px; font-size:16px }
.contact-row dd a:hover{ color:var(--gold) }

.site-foot{ background:var(--void); border-top:1px solid var(--line);
            padding-block:clamp(48px,5vw,72px) }
.foot-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(28px,3.4vw,48px);
}
.foot-grid > div:first-child{ grid-column:1/-1 }
@media (min-width:900px){ .foot-grid > div:first-child{ grid-column:auto; max-width:300px } }
.foot h3{ font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
          color:var(--text-3); margin-bottom:20px }
.foot li + li{ margin-top:11px }
.foot a{ color:var(--text-2); font-size:14.5px; transition:color var(--dur-fast) var(--ease) }
.foot a:hover{ color:var(--gold) }
.foot p{ color:var(--text-3); font-size:14.5px; margin-top:16px; max-width:34ch }
.foot-bar{
  margin-top:clamp(36px,4vw,56px); padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between;
  align-items:center; font-size:13.5px; color:var(--text-3);
}

/* ===========================================================================
   RUCH: wejścia sekcji
   =========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
[data-reveal].in{ opacity:1; transform:none }
[data-reveal].in{ transition-delay:calc(var(--i,0) * 85ms) }
/* po wejściu zdejmujemy opóźnienia, żeby hover nie zwlekał */
[data-reveal].in.done,[data-reveal].in.done{ transition-delay:0s!important }

.glow{ position:relative }
.glow::after{
  content:""; position:absolute; inset:-30%; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, var(--gold-dim), transparent 72%);
  opacity:.55; animation:breathe 7.5s var(--ease) -2.4s infinite alternate;
}
@keyframes breathe{ from{opacity:.3} to{opacity:.75} }

.draw{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
       transition:stroke-dashoffset 1.6s var(--ease-out) }
.in .draw,.draw.in{ stroke-dashoffset:0 }

/* pauza animacji poza ekranem i na ukrytej karcie */
body.paused *,body.paused *::before,body.paused *::after{ animation-play-state:paused!important }

/* ===========================================================================
   OGRANICZONY RUCH
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; transition-delay:0ms!important;
  }
  [data-reveal]{ opacity:1!important; transform:none!important }
  .s i{ transform:none !important }
  .band__sub,.band__cta{ opacity:1!important; transform:none!important }
  .step__bar{ width:100%!important }
  .draw{ stroke-dashoffset:0!important }
  .bg::after{ animation:none }
}

/* ===========================================================================
   LINKI PRAWNE W STOPCE
   =========================================================================== */
.foot-bar__firm{ flex-basis:100%; order:3; font-size:12.5px }   /* dane rejestrowe w osobnym wierszu */
.foot-bar__links{ display:flex; align-items:center; gap:9px }
.foot-bar__links a,.foot-bar__links button{
  font:inherit; font-size:13.5px; color:var(--text-3); background:none; border:0; padding:0;
  cursor:pointer; transition:color var(--dur-fast) var(--ease);
}
.foot-bar__links a:hover,.foot-bar__links button:hover{ color:var(--gold) }
.foot-bar__links span{ color:var(--line-2) }

/* ===========================================================================
   PASEK ZGODY NA COOKIE
   Wjeżdża od dołu ekranu przy pierwszej wizycie. Znika po wyborze i zostaje
   zapamiętany w localStorage. Link "Ustawienia cookie" w stopce (każda
   podstrona) przywołuje go z powrotem przez window.SZK_cookiePrefs().
   =========================================================================== */
.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--pane); border-top:1px solid var(--line);
  padding:18px var(--pad);
  display:flex; flex-wrap:wrap; gap:14px 28px;
  align-items:center; justify-content:space-between;
  transform:translateY(100%); transition:transform var(--dur) var(--ease);
  box-shadow:0 -16px 44px rgba(0,0,0,.4);
}
.cookiebar.is-shown{ transform:translateY(0) }
.cookiebar__text{ color:var(--text-2); font-size:14px; line-height:1.6; max-width:640px; flex:1 1 320px }
.cookiebar__text a{ color:var(--text); text-decoration:underline; text-underline-offset:3px }
.cookiebar__row{ display:flex; gap:10px; flex-wrap:wrap; flex:none }
.cookiebar .btn{ padding:11px 20px; font-size:14px }

@media (max-width:640px){
  .cookiebar{ padding:12px var(--pad) 14px; gap:10px }
  .cookiebar__text{ font-size:12.5px; line-height:1.45 }
  .cookiebar__row{ width:100% }
  .cookiebar .btn{ flex:1; padding:10px 12px; font-size:13px }
}

/* ===========================================================================
   DRUK
   =========================================================================== */
@media print{
  .nav,.drawer,.hero,.cta__img,.bg,.cookiebar{ display:none }
  body{ background:#fff; color:#000 }
}

/* --- Pływające przyciski: Instagram + WhatsApp ---------------------------- */
.fabs{
  position:fixed; right:18px; bottom:18px; z-index:140;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  transition:opacity var(--dur) var(--ease);
}
.fab{
  display:inline-flex; align-items:center; gap:0;
  height:50px; padding:0 13px; border-radius:999px;   /* kółko; podpis wysuwa się po najechaniu */
  color:#fff; font:600 14px/1 var(--display);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.fab svg{ width:24px; height:24px; flex:none }
.fab span{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap; margin-left:0;
  transition:max-width .35s var(--ease), opacity .25s var(--ease), margin-left .35s var(--ease) }
.fab:hover span,.fab:focus-visible span{ max-width:120px; opacity:1; margin-left:9px }
.fab:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.4); color:#fff }
.fab:focus-visible{ outline:2px solid #fff; outline-offset:3px }
.fab--wa{ background:#25D366; color:#0B1A10 }
.fab--wa:hover{ color:#0B1A10 }
.fab--ig{ background:linear-gradient(135deg,#F58529 0%,#DD2A7B 45%,#8134AF 75%,#515BD4 100%) }
body.cookiebar-open .fabs{ opacity:0; pointer-events:none }   /* nie nachodzą na baner cookie */
@media (max-width:640px){
  .fabs{ right:14px; bottom:14px }
  .fab{ height:52px; width:52px; padding:0; justify-content:center }
  .fab span{ display:none }   /* na telefonie zawsze same kółka */
}
@media print{ .fabs{ display:none } }

/* --- Lista atutów z czerwonym „ptaszkiem" (O nas) ------------------------- */
.check-list{ list-style:none; margin:28px 0 0; padding:0; max-width:68ch }
.check-list li{
  position:relative; padding-left:38px; color:var(--text-2);
  font-size:clamp(15.5px,1.15vw,17px); line-height:1.6;
}
.check-list li + li{ margin-top:14px }
.check-list li strong{ color:var(--text); font-weight:600 }
.check-list li::before{
  content:""; position:absolute; left:0; top:.2em; width:24px; height:24px; border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.lead strong,.body-text strong{ color:var(--text); font-weight:600 }


/* --- Przed i po: suwak porównania -------------------------------------- */
.cmp{
  position:relative; margin-top:clamp(28px,3.5vw,48px); aspect-ratio:16/10; overflow:hidden;
  border-radius:12px; border:1px solid var(--line); background:#000;
  user-select:none; -webkit-user-select:none; touch-action:pan-y; cursor:ew-resize;
}
.cmp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block }
.cmp__before{ position:absolute; inset:0 auto 0 0; overflow:hidden }
.cmp__before img{ width:auto; height:100%; max-width:none }   /* obraz nie skaluje się z szerokością paska */
.cmp__handle{
  position:absolute; top:0; bottom:0; width:2px; background:#fff; transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none;
}
.cmp__handle span{
  position:absolute; top:50%; left:50%; width:48px; height:48px; border-radius:50%;
  background:var(--gold); transform:translate(-50%,-50%); box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.cmp__handle span::before,.cmp__handle span::after{
  content:""; position:absolute; top:50%; width:8px; height:8px; border:solid #fff; border-width:2px 0 0 2px;
}
.cmp__handle span::before{ left:14px; transform:translateY(-50%) rotate(-45deg) }
.cmp__handle span::after{ right:14px; transform:translateY(-50%) rotate(135deg) }
.cmp__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none;
  -webkit-appearance:none; appearance:none;
}
.cmp__range::-webkit-slider-thumb{ -webkit-appearance:none; width:60px; height:100%; }
.cmp__range::-moz-range-thumb{ width:60px; height:100%; border:0; background:transparent }
.cmp__tag{
  position:absolute; top:14px; padding:7px 12px; border-radius:999px; pointer-events:none;
  font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  background:rgba(10,10,11,.7); color:#fff; backdrop-filter:blur(6px);
}
.cmp__tag--l{ left:14px }
.cmp__tag--r{ right:14px; background:var(--gold) }
.cmp__note{ margin-top:14px; font-size:13px; color:var(--text-3) }
@media (max-width:640px){ .cmp{ aspect-ratio:4/3.4 } .cmp__handle span{ width:42px; height:42px } }