/* ═══════════════════════════════════════════════════════════
   LOLO STUDIO — style.css
   System: design-system/MASTER.md  (Editorial Poster × Neon Night)
   ═══════════════════════════════════════════════════════════ */

/* ───────────────  TOKENY  ─────────────── */
:root{
  /* płótno — noc */
  --ink-900:#121212;
  --ink-800:#1a1a1a;
  --ink-700:#242424;
  --hairline:rgba(255,255,255,.14);
  --hairline-soft:rgba(255,255,255,.07);

  /* płótno — papier */
  --paper-50:#f4f3f1;
  --paper-100:#eae8e4;
  --hairline-dark:rgba(18,18,18,.16);

  /* tekst */
  --on-dark:#fff;
  --on-dark-muted:#b9b9b9;
  --on-paper:#121212;
  --on-paper-muted:#4e4e4e;

  /* ── AKCENT: paleta z paska gradientowego ──
     teal → szałwia → złoto → pomarańcz.
     Kontrasty liczone względem --ink-900 (#121212) i bieli. */
  --grad:linear-gradient(90deg, #2f6f86 0%, #5e9086 34%, #c9a15c 70%, #d2762a 100%);

  --accent-teal:#3f7f91;   /* 5.0:1 na czerni */
  --accent-sage:#6f9c8c;   /* 7.2:1 na czerni */
  --accent-gold:#c9a15c;   /* 8.0:1 na czerni */

  --accent-100:#ecd9b8;    /* piaskowy — wypełnienie hoveru */
  --accent-300:#dda863;    /* teksty pomocnicze na czerni */
  --accent-500:#d2762a;    /* primary — 6.4:1 na czerni */
  --accent-600:#8a4a12;    /* jedyny akcent zdatny na tekst na papierze — 6.5:1 na bieli */

  /* Pomarańcz jest zbyt jasny na biały tekst (3.0:1).
     Wypełnione przyciski mają CIEMNY tekst. */
  --on-accent:#121212;

  --glow-accent:0 0 40px rgba(210,118,42,.32), 0 0 120px rgba(210,118,42,.16);

  /* forma */
  --r-media:28px;
  --r-card:24px;
  --r-pill:999px;

  /* przestrzeń */
  --space-1:8px;  --space-2:16px; --space-3:24px; --space-4:40px;
  --space-5:64px; --space-6:96px; --space-7:144px;
  --gutter:clamp(20px, 5vw, 80px);
  --wrap:1440px;

  /* typografia */
  --font-ui:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Para krojów: Bricolage niesie nagłówki, Outfit tekst i UI.
     Bez tego nagłówki były Outfit 900 — czyli „pogrubiony font tekstowy”. */
  --font-headline:"Bricolage Grotesque", var(--font-ui);
  --font-display:"Modak", var(--font-ui);   /* tylko liczby i etykiety pionowe */
  --font-script:"Caveat", cursive;          /* jeden akcent: podpis w hero */

  --step--1:clamp(.6875rem, .66rem + .12vw, .75rem);
  --step-0: clamp(.9375rem, .91rem + .14vw, 1rem);
  --step-1: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.3rem + .9vw, 2.25rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
  /* najdłuższa linia hero to „reklamę, kurs, wydarzenie," (26 znaków) —
     powyżej ~4.25rem wychodzi poza kolumnę tekstu */
  /* nagłówek hero pomniejszony o 25% względem poprzednich wartości
     (było: 1.6875rem / .7rem + 4.2vw / 4.25rem) */
  --step-hero:clamp(1.2656rem, .525rem + 3.15vw, 3.1875rem);

  /* ruch */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);   /* mocne wyhamowanie — ruch „dojeżdża”, nie zatrzymuje się */
  --dur:600ms;

  /* warstwy */
  --z-grain:9000;
  --z-nav:100;
  --z-modal:1000;
}

/* ───────────────  RESET  ─────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  min-height:100dvh;
  background:var(--ink-900);
  color:var(--on-dark);
  font-family:var(--font-ui);
  font-size:var(--step-0);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul{list-style:none; padding:0}
/* H1/H2 = krój display. H3 zostaje na Outfit — inaczej Bricolage zjadłby drobne tytuły kart. */
:where(h1,h2){
  font-family:var(--font-headline);
  font-weight:800; line-height:1.02; letter-spacing:-.025em;
}
:where(h3){font-weight:700; line-height:1.15; letter-spacing:-.01em}

/* focus — widoczny na obu płótnach */
:focus-visible{
  outline:2px solid var(--accent-500);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:calc(var(--z-nav) + 1);
  padding:12px 20px; border-radius:var(--r-pill);
  background:var(--on-dark); color:var(--ink-900); font-weight:500;
  transition:top 180ms var(--ease-out);
}
.skip-link:focus{top:16px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}

/* ziarno — sygnatura S12 */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.038; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────────  ATOMY  ─────────────── */

/* eyebrow: — LABEL */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent-500);
}
.eyebrow__rule{width:28px; height:1px; background:currentColor; flex:none}

.btn{
  --btn-bg:transparent;
  --btn-fg:var(--on-dark);
  --btn-bd:var(--hairline);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 28px;
  border:1px solid var(--btn-bd); border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;
  transition:color 220ms var(--ease-out), border-color 220ms var(--ease-out);
  touch-action:manipulation;
}
.btn::after{ /* wypełnienie od dołu */
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; background:var(--on-dark);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 260ms var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--ink-900); border-color:transparent}
.btn:active{transform:scale(.98)}

/* ciemny tekst na pomarańczu — biel dawałaby 3.0:1 */
.btn--primary{
  --btn-bg:var(--accent-500); --btn-bd:var(--accent-500); --btn-fg:var(--on-accent);
  box-shadow:var(--glow-accent);
}
.btn--primary::after{background:var(--accent-100)}
.btn--ghost{--btn-bd:rgba(255,255,255,.35)}
.btn--sm{min-height:40px; padding:0 20px; font-size:.6875rem}

/* ───────────────  NAV  ─────────────── */
/* Uwaga: backdrop-filter NIE może siedzieć na .nav — tworzy blok zawierający
   dla position:fixed, przez co drawer mobilny przykleiłby się do paska.
   Rozmycie żyje więc na ::before. */
.nav{
  position:fixed; inset:0 0 auto; z-index:var(--z-nav);
  padding-block:var(--space-2);
  transition:padding 300ms var(--ease-out);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(18,18,18,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline-soft);
  opacity:0; transition:opacity 300ms var(--ease-out);
}
.nav.is-stuck{padding-block:10px}
.nav.is-stuck::before{opacity:1}
/* Nawigacja dzieli siatkę z hero i sekcjami — jedna lewa krawędź na całej stronie */
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:var(--space-3);
}
.nav__logo{display:flex; align-items:center; gap:10px; flex:none}
.nav__logo img{
  height:36px; width:36px; object-fit:contain;
  transition:height 300ms var(--ease-out), width 300ms var(--ease-out);
}
.nav.is-stuck .nav__logo img{height:30px; width:30px}
.nav__wordmark{
  font-family:var(--font-headline);   /* logotyp dzieli krój z nagłówkami */
  font-size:1.0625rem; font-weight:800; letter-spacing:-.01em; line-height:1;
}
.nav__wordmark span{font-weight:300; color:var(--on-dark-muted)}
@media (max-width:340px){ .nav__wordmark{display:none} }

/* Pasek swatchy (S8) — między logo a nawigacją.
   Selektory scalone z .nav__inner, bo ogólna reguła .swatches (stopka) stoi
   niżej w pliku i przy równej specyficzności nadpisywałaby te ustawienia. */
.nav__inner .swatches--nav{
  display:flex; gap:4px; flex:none;
  margin:0 0 0 var(--space-3);
}
.nav__inner .swatches--nav i{width:26px; height:16px; background:var(--c); border-radius:3px}
/* poniżej 1200px nawigacja potrzebuje całej dostępnej szerokości */
@media (max-width:1200px){ .nav__inner .swatches--nav{display:none} }
.nav__links{
  margin-inline:auto;
  display:flex; align-items:center; gap:clamp(14px, 1.8vw, 30px);
}
.nav__links a:not(.btn){
  position:relative; padding:8px 2px;
  font-size:.875rem; font-weight:400; color:var(--on-dark-muted);
  transition:color 200ms var(--ease-out);
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--accent-500); transform:scaleX(0); transform-origin:right;
  transition:transform 260ms var(--ease-out);
}
.nav__links a:not(.btn):hover,.nav__links a:not(.btn):focus-visible{color:var(--on-dark)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1); transform-origin:left}
.nav__links a.btn:hover{color:var(--ink-900)}

.nav__cta-mobile{display:none}
.nav__burger{display:none; width:44px; height:44px; place-items:center; flex:none}
.nav__burger span{display:block; width:22px; height:2px; background:var(--on-dark); border-radius:2px}
.nav__burger span + span{margin-top:5px}

@media (max-width:1024px){
  .nav__cta{display:none}
  .nav__burger{display:grid}
  .nav__links{
    position:fixed; inset:0; margin:0;
    flex-direction:column; justify-content:center; gap:var(--space-3);
    background:var(--ink-900);
    transform:translateY(-100%); transition:transform 400ms var(--ease-out);
  }
  .nav__links a:not(.btn){font-size:1.5rem; font-weight:500; color:var(--on-dark)}
  .nav__cta-mobile{
    display:inline-flex; margin-top:var(--space-2);
    font-size:var(--step--1); font-weight:700;
  }
  .nav.is-open .nav__links{transform:translateY(0)}
  .nav.is-open .nav__burger{position:fixed; right:var(--gutter); top:18px; z-index:1}
}

/* ───────────────  01 · HERO  ─────────────── */
.hero{
  position:relative;
  /* wysokość przycięta do 2× natywnej wysokości wideo — powyżej tej wartości
     (np. na 4K) hero nie rośnie, więc wideo wypełnia je w pionie bez pustych pól */
  min-height:min(100dvh, calc(var(--hero-vh, 550) * 2px));
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--space-6) + 30px) 0 var(--space-6);
  overflow:hidden;
}
/* Zapas -8% u góry i dołu: parallax przesuwa tło, a bez zapasu odsłoniłby krawędź. */
.hero__media{
  position:absolute; inset:-8% 0; z-index:-2;
  display:flex; align-items:center; justify-content:center;   /* centruje wideo w overscanowanym boksie */
  /* fallback zanim wideo się wczyta / gdy go brak; widoczny na bokach przy 4K */
  background:radial-gradient(120% 90% at 70% 40%, #2a2226 0%, #16151a 55%, #0e0e10 100%);
  will-change:transform;
}
/* Wideo nie powiększa się ponad 2× swojej natywnej rozdzielczości (chroni ostrość).
   Wysokość hero jest przycięta do tego samego limitu (patrz .hero), więc w pionie
   wideo wypełnia hero bez pustych pól. Na 4K puste zostają tylko boki. */
.hero__media video{
  width:100%; height:100%; object-fit:cover;
  max-width:calc(var(--hero-vw, 1280) * 2px);
  max-height:calc(var(--hero-vh, 550) * 2px);
}
.hero__scrim{
  position:absolute; inset:0;
  opacity:.6;   /* krycie nakładki obniżone o 30% — wideo jest jaśniejsze/lepiej widoczne */
  background:
    linear-gradient(90deg, rgba(18,18,18,.94) 0%, rgba(18,18,18,.8) 34%, rgba(18,18,18,.35) 62%, rgba(18,18,18,.55) 100%),
    linear-gradient(180deg, rgba(18,18,18,.9) 0%, transparent 22%, transparent 62%, rgba(18,18,18,.95) 100%);
}

/* Hero trzyma tę samą wyśrodkowaną siatkę co sekcje poniżej */
.hero__content{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gutter);
}

.hero__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap;
}

.hero__title{
  margin-top:var(--space-4);
  font-size:var(--step-hero);
  letter-spacing:-.035em;
}
.hero__title em{font-style:normal; color:var(--accent-500)}

/* jedyne miejsce w hero, gdzie widać pełną paletę */
.hero__rule{
  margin:var(--space-4) 0 var(--space-3);
  border:0; height:2px; max-width:900px; border-radius:var(--r-pill);
  background:linear-gradient(90deg, #2f6f86 0%, #5e9086 22%, #c9a15c 46%, #d2762a 64%, transparent 100%);
  opacity:.9;
}

.hero__row{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-5); align-items:end;
}
.hero__lede{
  max-width:67ch;          /* +20% względem 56ch */
  color:var(--on-dark-muted);
  line-height:1.75;
}
.hero__lede b{font-weight:500; color:var(--on-dark)}

/* ręczny podpis (S10) — jedyny akcent script na stronie */
.hero__sign{
  margin-top:var(--space-2);
  font-family:var(--font-script);
  font-size:2rem; line-height:1; color:var(--accent-500);
}

.proof{
  margin-top:var(--space-5);
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 18px 8px 14px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(4px);
}
/* 4,7 / 5 → nakładka odsłania 94% szerokości pasa gwiazdek */
.proof__stars{position:relative; display:inline-flex; line-height:0}
.proof__track,.proof__fill{display:inline-flex; gap:1px}
.proof__fill{
  position:absolute; inset:0; overflow:hidden;
  width:var(--rating);
}
.proof__stars svg{width:13px; height:13px; flex:none}
.proof__track svg{fill:rgba(255,255,255,.22)}
.proof__fill svg{fill:var(--accent-500)}
.proof__text{font-size:.8125rem; color:var(--on-dark-muted)}
.proof__text b{font-weight:500; color:var(--on-dark); font-variant-numeric:tabular-nums}

.hero__scroll{
  position:absolute; bottom:var(--space-4); left:var(--gutter);
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--on-dark-muted);
  transition:color 200ms var(--ease-out);
}
.hero__scroll svg{animation:bob 2.4s var(--ease-out) infinite}
.hero__scroll:hover{color:var(--on-dark)}

@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}

@media (max-width:900px){
  .hero{padding-block:calc(var(--space-6) + 24px) calc(var(--space-6) + 32px)}
  .hero__rule{margin:var(--space-4) 0 var(--space-3)}
  .proof{margin-top:var(--space-4)}
  .section{padding-block:calc(var(--space-6) * .65)}   /* jw. na węższych ekranach (96px → 62,4px) */
  .hero__row{grid-template-columns:1fr; gap:var(--space-4); align-items:start}
  .hero__scrim{background:linear-gradient(180deg, rgba(18,18,18,.92) 0%, rgba(18,18,18,.7) 40%, rgba(18,18,18,.92) 100%)}
  .hero__scroll{display:none}
}

/* ───────────────  SEKCJE  ─────────────── */
.section{padding-block:calc(var(--space-7) * .65)}   /* odstęp pionowy między sekcjami mniejszy o ~35% (144px → 93,6px) */
.section--dark{background:var(--ink-900); color:var(--on-dark)}
.section--paper{background:var(--paper-50); color:var(--on-paper)}

.section__title{
  margin-top:var(--space-3);
  font-size:var(--step-3);
  letter-spacing:-.035em;
  text-wrap:balance;
}
.section__lede{
  margin-top:var(--space-3); max-width:62ch;
  color:var(--on-dark-muted); line-height:1.75;
}

/* ───────────────  02 · KARTY „DLA KOGO”  ─────────────── */
.cards{
  margin-top:var(--space-6);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(228px, 1fr));
  gap:var(--space-2);
}
.card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; gap:12px;
  min-height:230px; padding:var(--space-3);
  border:1px solid var(--hairline-soft); border-radius:var(--r-card);
  background:var(--ink-800);
  transition:border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.card::before{ /* poświata pojawia się przy hoverze, pod treścią */
  content:""; position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit;
  background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent-500) 16%, transparent), transparent 62%);
  opacity:0; transition:opacity 320ms var(--ease-out);
}
.card:hover{border-color:color-mix(in srgb, var(--accent-500) 45%, transparent); transform:translateY(-4px)}
.card:hover::before{opacity:1}

.card__title{
  font-size:var(--step-1); font-weight:700; letter-spacing:-.01em;
  line-height:1.15; text-wrap:balance;
}
.card__text{font-size:.875rem; color:var(--on-dark-muted); line-height:1.65}

/* 19 formatów — gęstsza siatka, niższe kafelki, tytuł u góry */
.cards--formats{
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  align-items:start;   /* kafle nie rozciągają się do wysokości rzędu — sąsiedzi zostają niscy przy hoverze jednego */
}
.cards--formats .card{
  min-height:92px;                        /* stała wysokość zwiniętego kafla — mieści też tytuł w 2 liniach, wszystkie równe */
  justify-content:center;                 /* tytuł wyśrodkowany w pionie → 1- i 2-liniowe wyglądają identycznie (przy hoverze dryf ~3px) */
  gap:0;
  padding:var(--space-3);
  border-radius:calc(var(--r-card) / 2);  /* rogi o połowę mniej zaokrąglone: 24px → 12px */
  transition:border-color 300ms var(--ease-out), transform 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
.cards--formats .card__title{font-size:1.0625rem; color:var(--on-dark)}

/* Nieaktywny kafel: biały tytuł na ciemnym tle.
   Po najechaniu kafel podświetla się złotym akcentem (jak „Film korporacyjny”),
   a tytuł i opis pozostają białe. Biały na #7d6224 ma kontrast 5,76:1 (AA ✓). */
.cards--formats .card{--cf:#7d6224}
.cards--formats .card:hover,
.cards--formats .card:focus-within,
.cards--formats .card.is-open,
.cards--formats .card.is-glow{background:var(--cf); border-color:var(--cf)}   /* .is-glow = ambientowy puls (JS), .is-open = dotknięcie na mobile */
.cards--formats .card:hover .card__text,
.cards--formats .card:focus-within .card__text,
.cards--formats .card.is-open .card__text{color:rgba(255,255,255,.92)}

/* Jednolite, kolorowe wypełnienie nie potrzebuje pomarańczowej poświaty ::before z bazowego .card */
.cards--formats .card::before{display:none}

/* Domyślnie widać tylko tytuł; opis rozwija się po najechaniu (lub focusie). */
.cards--formats .card__text{
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height 340ms var(--ease-out), opacity 240ms var(--ease-out), margin-top 340ms var(--ease-out);
}
.cards--formats .card:hover .card__text,
.cards--formats .card:focus-within .card__text,
.cards--formats .card.is-open .card__text{
  max-height:14rem; opacity:1; margin-top:10px;
}
/* Na dotyku nie ma hovera — opis odsłania dotknięcie (klasa .is-open z JS).
   Gdyby JS nie zadziałał (.cards--formats bez .is-tap), pokazujemy opisy na stałe. */
@media (hover:none){
  .cards--formats:not(.is-tap) .card__text{max-height:none; opacity:1; margin-top:10px}
  .cards--formats.is-tap .card{cursor:pointer}
}

@media (max-width:560px){
  .cards{grid-template-columns:1fr; gap:var(--space-2)}
  .card{min-height:0}
}

/* ═══════════  PŁÓTNO PAPIEROWE  ═══════════
   Sekcja na papierze przestawia wszystkie semantyczne tokeny.
   Dzięki temu .card, .tag, .eyebrow działają bez wariantów. */
.section--paper{
  --on-dark:var(--on-paper);
  --on-dark-muted:var(--on-paper-muted);
  --ink-800:var(--paper-100);
  --ink-700:#e0ddd8;
  --hairline:var(--hairline-dark);
  --hairline-soft:rgba(18,18,18,.10);
  --accent-500:var(--accent-600);   /* akcent na papierze musi mieć 4.5:1 */
  --on-accent:#fff;                 /* accent-600 jest ciemny → tekst na nim biały */
  --glow-accent:none;
  position:relative;
  background:var(--paper-50); color:var(--on-paper);
}
/* zagniecenia papieru — sygnatura S12 */
.section--paper::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(104deg, transparent 28%, rgba(0,0,0,.05) 29.4%, rgba(255,255,255,.75) 30.2%, transparent 31.6%),
    linear-gradient(-78deg, transparent 61%, rgba(0,0,0,.045) 62.2%, rgba(255,255,255,.7) 63%, transparent 64.4%),
    linear-gradient(188deg, transparent 74%, rgba(0,0,0,.035) 75%, rgba(255,255,255,.6) 75.8%, transparent 77%);
  mix-blend-mode:multiply; opacity:.55;
}
.section--paper > *{position:relative; z-index:1}
.section--paper .card{background:var(--paper-100); border-color:rgba(18,18,18,.10)}
/* hover dziedziczy kolor z przestawionego --accent-500, tylko poświata słabnie */
.section--paper .card::before{background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent-500) 10%, transparent), transparent 62%)}
.section--paper .btn--primary{box-shadow:none}
.section--paper .btn--ghost{--btn-bd:rgba(18,18,18,.28)}
.section--paper .btn:hover,.section--paper .btn:focus-visible{color:var(--ink-900)}
.section--paper :focus-visible{outline-color:var(--ink-900)}
.section--paper .nav__logo img{filter:invert(1)}

/* ── Formularz na papierze ──
   .form i pola miały zaszyte --ink-800/--ink-900, więc na jasnym tle
   zostałyby czarnymi dziurami. Stany błędu też muszą pociemnieć: #EF7053
   na bieli daje 2.9:1, czyli poniżej progu dla tekstu. */
.section--paper .form{background:var(--paper-100); border-color:var(--hairline)}
.section--paper .field :is(input,select,textarea){
  background:#fff;
  border-color:rgba(18,18,18,.22);
  color:var(--on-paper);
}
.section--paper .field :is(input,select,textarea):focus{border-color:var(--accent-600)}
.section--paper .field.is-invalid :is(input,textarea){border-color:#b23a1c}
.section--paper .field__error{color:#a8331a}          /* 5.6:1 na papierze */
.section--paper .field__error::before{background:#a8331a; color:#fff}
.section--paper .form__status.is-ok{color:#2c6b4c}    /* 5.3:1 */
.section--paper .form__status.is-err{color:#a8331a}
.section--paper .contact__list a:hover{color:var(--accent-600)}

/* ───────────────  WSPÓLNE  ─────────────── */
.section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap;
}

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 2px; min-height:44px;
  color:var(--accent-500); font-size:var(--step--1);
  font-weight:700; text-transform:uppercase; letter-spacing:.1em;
}
.link-arrow svg{transition:transform 240ms var(--ease-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* pigułka-etykieta */
.tag{
  align-self:flex-start;
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb, var(--accent-500) 55%, transparent);
  background:color-mix(in srgb, var(--accent-500) 12%, transparent);
  color:var(--accent-300);
  font-size:.625rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; white-space:nowrap;
}
.section--paper .tag{color:var(--accent-600)}
/* warianty biorą kolory z tego samego paska gradientowego */
.tag--warm{--accent-500:var(--accent-gold); color:#e2c48f}
.tag--cool{--accent-500:var(--accent-sage); color:#9dc0b2}
.section--paper .tag--warm{color:#6b5116}
.section--paper .tag--cool{color:#2f5a4b}
.tag--mute{color:var(--on-dark-muted); border-color:var(--hairline); background:transparent}

/* pionowa etykieta sekcji — S5 */
.vlabel{
  position:absolute; left:calc(var(--gutter) - 46px); top:var(--space-7);
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-display);
  font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-muted); opacity:.32;
  pointer-events:none;
}
.section{position:relative}
@media (max-width:1180px){ .vlabel{display:none} }

/* pasek metadanych — S1 */
.meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:var(--space-3);
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--hairline);
  margin-bottom:var(--space-5);
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em;
  color:var(--on-dark-muted);
}
.meta span{display:flex; flex-direction:column; gap:6px}
.meta b{font-weight:500; color:var(--on-dark)}

/* wariant w hero: górny hairline, bez dolnego, pod dowodem społecznym */
.meta--hero{
  margin-top:var(--space-5); margin-bottom:0;
  padding-top:var(--space-4); padding-bottom:0;
  border-top:1px solid var(--hairline); border-bottom:0;
}

/* ───────────────  03 · ROLKI  ─────────────── */
.reels{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-2);
}
.reel{
  border:1px solid var(--hairline-soft); border-radius:var(--r-media);
  background:var(--ink-800); overflow:hidden;
  transition:border-color 300ms var(--ease-out);
}
.reel:hover{border-color:color-mix(in srgb, var(--accent-500) 40%, transparent)}
.reel__media{
  position:relative;
  aspect-ratio:9/16; overflow:hidden;
  background:linear-gradient(150deg, #2b2430, #17161a 60%, #101013);
}
.reel__media video{width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease-out)}
.reel:hover .reel__media video{transform:scale(1.04)}

/* Rolki są klikalne — klik włącza dźwięk, dblclik wyłącza */
.reel__media{cursor:pointer}
.reel__sound{
  position:absolute; top:10px; right:10px; z-index:2;
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(18,18,18,.55); backdrop-filter:blur(6px);
  color:var(--on-dark); opacity:.85;
  transition:opacity 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  pointer-events:none;   /* klik obsługuje cały kafel */
}
.reel:hover .reel__sound{opacity:1}
.reel__sound svg{width:18px; height:18px; display:block}
.reel__sound .reel__sound-on{display:none}   /* domyślnie ukryta ikona „gra” (specyficzność > .reel__sound svg) */
/* stan „gra z dźwiękiem” */
.reel.has-sound .reel__sound{color:var(--accent-300); border-color:var(--accent-500); opacity:1}
.reel.has-sound .reel__sound-off{display:none}
.reel.has-sound .reel__sound-on{display:block}

/* Wspólny komponent: kadr wideo. Wszystko gra bez dźwięku — brak przełącznika. */
.media{position:relative}

/* ── Stan wczytywania ──
   Pokazuje się od chwili, gdy kadr wjedzie w ekran i zacznie ściągać plik,
   znika przy pierwszej klatce (loadeddata/playing) albo gdy plik padnie.
   Działa dla rolek, portfolio i lightboxa — wszystkie mają klasę .media. */
.media.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; z-index:2; pointer-events:none;
  width:26px; height:26px;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:var(--accent-500);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.media.is-loading::before{
  content:"Wczytywanie";
  position:absolute; inset:auto 0 calc(50% - 36px) 0; z-index:2; pointer-events:none;
  text-align:center;
  font-size:.625rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--on-dark-muted);
}
@keyframes spin{ to{ transform:rotate(360deg) } }
/* została sama pigułka z kategorią — tytuły usunięte */
.reel__foot{display:flex; padding:var(--space-2) var(--space-2) var(--space-3)}

/* Na węższych ekranach zostaje SIATKA (jak na desktopie), tylko z mniejszą
   liczbą kolumn — rzędy układają się jeden pod drugim i widać wszystkie 12 rolek.
   Wcześniej była tu pozioma karuzela: kompaktowa, ale chowała 10 z 12 rolek
   za gestem, którego nikt nie wykona. */
@media (max-width:900px){
  .reels{ grid-template-columns:repeat(3, 1fr); gap:12px; }
  .reel__foot{ padding:10px 10px var(--space-2); }
}
@media (max-width:600px){
  .reels{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* liczby — S9 */
.stats{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--space-4);
  justify-items:center; text-align:center;
}
.stats--facts{justify-items:start; text-align:left}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  line-height:1; letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.stat__num--accent{color:var(--accent-500)}
.stat__num--word{font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing:.02em}
.stat__label{
  margin-top:12px;
  font-size:.8125rem; line-height:1.5; color:var(--on-dark-muted);
}
.stats__source{
  margin-top:var(--space-4);
  font-size:.75rem; color:var(--on-dark-muted);
}
.stats__source a{color:var(--accent-500); white-space:nowrap}
.stats__source a:hover{text-decoration:underline}

/* ───────────────  MARQUEE — S4  ─────────────── */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--hairline-soft);
  background:var(--ink-900);
  padding-block:18px;
}
.marquee__track{
  display:flex; gap:var(--space-3); width:max-content;
  animation:slide 44s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--on-dark-muted); white-space:nowrap;
}
.marquee__track svg{width:12px; height:12px; fill:var(--accent-500); flex:none}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* ───────────────  04 · DLACZEGO MY  ─────────────── */
/* 6 kafelków → 2 kolumny × 3 wiersze */
.cards--why{grid-template-columns:repeat(2, 1fr); gap:var(--space-3)}
.cards--why .card{min-height:0; padding:var(--space-4)}
@media (max-width:760px){ .cards--why{grid-template-columns:1fr; gap:var(--space-2)} }
.card__icon{
  display:grid; place-items:center;
  width:40px; height:40px; margin-bottom:4px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  color:var(--accent-500);
}
.card__icon svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ───────────────  06 · OFERTA  ─────────────── */
.offer{
  margin-top:var(--space-5);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--space-2);
}
.offer__item{min-height:210px}
.offer__item .card__title{font-size:1.0625rem; margin-top:auto}
.offer__cta{
  display:flex; border-radius:var(--r-card);
  background:var(--accent-500); color:var(--on-accent);
  box-shadow:var(--glow-accent);
  transition:transform 300ms var(--ease-out);
}
.offer__cta:hover{transform:translateY(-4px)}
.offer__cta a{display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:var(--space-3); width:100%}
.offer__cta h3{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; line-height:1.2;
}
.offer__cta svg{transition:transform 240ms var(--ease-out)}
.offer__cta:hover svg{transform:translateX(5px)}
.offer__cta p{font-size:.8125rem; line-height:1.5; color:rgba(18,18,18,.78)}

/* Kafelek WhatsApp — jedyny kolor spoza palety, świadomie: rozpoznawalność marki.
   Tekst CIEMNY, bo biel na #25D366 daje 2.0:1; ciemny daje 9.1:1. */
.offer__cta--wa{
  background:#25d366;
  box-shadow:0 0 40px rgba(37,211,102,.30), 0 0 120px rgba(37,211,102,.14);
}
/* to logo, nie strzałka — nie odjeżdża w bok, tylko lekko rośnie */
.offer__cta--wa:hover svg{transform:scale(1.12)}

/* ───────────────  07 · JAK DZIAŁAMY  ─────────────── */
.steps{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--space-2);
}
.step{min-height:200px}
.step__num{
  font-family:var(--font-display);
  font-size:2.25rem; line-height:1; color:var(--accent-500);
  font-variant-numeric:tabular-nums;
}
.step .card__title{margin-top:auto}

/* ───────────────  REALIZACJE — trzy karuzele  ─────────────── */
/* Widoczne 3 kafle w rzędzie (--per), do 10 w karuzeli. Odtwarza się tylko to,
   co widać — kafle poza torem są przycięte overflow, więc IntersectionObserver
   (współdzielony z rolkami) sam je pauzuje. */
.workrows{
  --per:3;
  --tile-gap:var(--space-3);   /* JEDNO źródło prawdy: odstęp między kaflami.
                                  Używa go i `gap` toru, i wyliczenie szerokości
                                  kafla — inaczej „ile widać" przestaje się zgadzać. */
  margin-top:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-4);
}
/* Rząd jest szerszy niż kolumna treści, ale nie bez końca:
   obszar kafli = 110% szerokości treści (.wrap minus guttery), wyśrodkowany.
   Cap siedzi na .workrow (nie na torze), bo strzałki pozycjonują się względem rzędu
   — inaczej odjechałyby od kafli na szerokich ekranach. */
.workrow{
  position:relative;
  /* width:100% jest konieczne — .workrows to flex column, a margin-inline:auto
     na elemencie flex wyłącza stretch i rząd skurczyłby się do zawartości */
  width:100%;
  max-width:calc(1.1 * (var(--wrap) - 2 * var(--gutter)) + 2 * var(--gutter));
  margin-inline:auto;
}
.workrow__track{
  display:flex; gap:var(--tile-gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  /* padding-block daje miejsce na scale(1.04) — overflow-x:auto czyni też
     overflow-y:auto, więc bez tego powiększony kafel byłby ucięty u góry i dołu */
  padding-inline:var(--gutter); padding-block:12px;
  scrollbar-width:none;
}
.workrow__track::-webkit-scrollbar{display:none}
.workrow__track:focus-visible{outline-offset:-4px}

/* Kafel = czysty kadr 16:9; podpis leży NA kadrze, żeby 3 rzędy zmieściły się naraz */
.work__item{
  position:relative;
  flex:0 0 calc((100% - (var(--per) - 1) * var(--tile-gap)) / var(--per));
  aspect-ratio:16/9;
  scroll-snap-align:start;
  border:1px solid var(--hairline-soft); border-radius:var(--r-media);
  background:linear-gradient(150deg, #2b2430, #17161a 60%, #101013);
  overflow:hidden;
  transition:transform 400ms var(--ease-out), border-color 300ms var(--ease-out);
}
/* cały kafel lekko rośnie na hover — padding-block toru mieści powiększenie */
.work__item:hover{
  transform:scale(1.04); z-index:2;
  border-color:color-mix(in srgb, var(--accent-500) 45%, transparent);
}
.work__media{position:absolute; inset:0}
.work__media video{width:100%; height:100%; object-fit:cover}

/* Kafel to czyste wideo — zero podpisów. Scrim usunięty razem z nimi:
   istniał tylko po to, żeby tekst był czytelny na kadrze. Nazwa realizacji
   żyje dalej w data-* i aria-label przycisku (czytniki ekranu). */

/* Strzałki karuzeli — zawsze NAD kaflami.
   z-index musi przebić powiększony kafel (:hover → z-index 2). Przy remisie
   wygrywałby kafel, bo w DOM stoi po lewej strzałce — i lewa znikała pod wideo. */
.workrow__nav{
  position:absolute; top:0; z-index:5;
  display:grid; place-items:center; width:170px; height:calc(100% - 4px);
  border:0; color:var(--on-dark);
  background:linear-gradient(90deg, var(--ink-900) 40%, transparent);
  opacity:0; pointer-events:none;   /* DOMYŚLNIE ukryte — JS pokazuje przycisk dopiero gdy w tę stronę faktycznie da się przewinąć */
  transition:opacity 220ms var(--ease-out);
}
/* „Dalej” (next): widoczny zawsze, gdy da się przewinąć w prawo — oglądający widzi, że jest ciąg dalszy. */
.workrow__nav--next.is-actionable{opacity:1; pointer-events:auto}
/* „Wstecz” (prev): pojawia się DOPIERO po najechaniu na karuzelę (i tylko gdy jest dokąd się cofnąć). */
.workrow:hover .workrow__nav--prev.is-actionable,
.workrow__nav--prev.is-actionable:focus-visible{opacity:1; pointer-events:auto}
.workrow__nav__label{
  padding:12px 24px;                       /* +50% względem 8/16px */
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(18,18,18,.7); backdrop-filter:blur(6px);
  font-size:1.219rem;                      /* +50% względem .8125rem */
  font-weight:600; letter-spacing:.04em; white-space:nowrap;
  transition:border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.workrow__nav--prev{left:0; justify-items:start; padding-left:var(--gutter)}
.workrow__nav--next{right:0; justify-items:end; padding-right:var(--gutter);
  background:linear-gradient(270deg, var(--ink-900) 40%, transparent)}
.workrow__nav:hover .workrow__nav__label,
.workrow__nav:focus-visible .workrow__nav__label{border-color:var(--accent-500); color:var(--accent-300)}
.workrow__nav[disabled]{opacity:0; pointer-events:none}   /* disabled zawsze ukrywa (dubluje brak .is-actionable, dla pewności) */

@media (max-width:1024px){ .workrows{--per:2} }
@media (max-width:600px){
  /* 2 kafle + wąska zajawka trzeciego. Zajawka zostaje celowo (strzałki są
     schowane, więc to jedyny sygnał, że rząd da się przewinąć), ale tylko
     musnięta — 2.05 zamiast 2.1 daje większe kafle i o połowę węższą zajawkę. */
  .workrows{--per:2.12; --tile-gap:8px}
  .workrow__nav{display:none}          /* na mobile zostaje sam swipe */
  /* --r-media (28px) na kaflu wysokim na ~90px zjada jedną trzecią wysokości
     i robi z kadru jajko. Promień musi skalować się z kaflem, nie odwrotnie. */
  .work__item{border-radius:12px}
}
/* palec zamiast strzałek gdy nie ma hovera (tablet/touch) */
@media (hover:none){ .workrow__nav{display:none} }

/* ───────────────  FOTO — galeria masonry  ─────────────── */
/* Zielony akcent zamiast pomarańczu (koniec teal/szałwia naszej palety).
   #2C6152 na papierze = 6.4:1, zdatny na tekst. */
#foto{ --accent-500:#2c6152; }

/* siedzi w .wrap → trzyma szerokość strony (jak oferta), nie rozjeżdża się
   w nieskończoność na szerokich monitorach. Padding daje .wrap. */
.gallery{
  margin-top:var(--space-6);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:8px;          /* jednostka wiersza — masonry liczy span w JS */
  gap:var(--space-2);
}
.gallery__item{
  position:relative;
  grid-row-end:span var(--span, 40);
  border-radius:var(--r-media); overflow:hidden;
  background:linear-gradient(150deg, #d9e2dc, #c3d3ca 55%, #b1c4ba);  /* zielonkawy placeholder */
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity 450ms var(--ease-out), transform 600ms var(--ease-out);
}
.gallery__item.is-swapping img{opacity:0}
.gallery__item.is-empty img{visibility:hidden}
/* zielona ramka narastająca na hover */
.gallery__item::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--accent-500);
  transition:box-shadow 300ms var(--ease-out);
}
.gallery__item:hover::after{box-shadow:inset 0 0 0 3px var(--accent-500)}
.gallery__item:hover img{transform:scale(1.04)}

/* Na telefonie zostają 2 kolumny, nie 1. Jedna kolumna przy 15 kaflach dawała
   ~5400px — siedem ekranów przewijania przez zdjęcia. Dwie kolumny to połowa
   i naturalny układ galerii (jak siatka w Instagramie). */
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2, 1fr); gap:10px}
  /* --r-media (28px) na kafelku szerokim na ~160px zjada róg i robi z kadru jajko.
     Promień musi skalować się z kafelkiem — tak jak w portfolio. */
  .gallery__item{border-radius:12px}
}

/* ───────────────  STRONY DOKUMENTOWE (polityka prywatności)  ─────────────── */
/* Długi tekst prawny — priorytetem jest czytelność, nie efekt.
   Świadomie BEZ data-reveal: dokument musi być widoczny nawet gdy JS padnie. */
.legal-section{padding-top:calc(var(--space-7) + 40px)}

.legal{
  max-width:68ch;            /* miara wiersza dla długiej lektury */
  margin-top:var(--space-5);
  font-size:1rem; line-height:1.75;
}
/* podwójna klasa — inaczej ogólna reguła `.legal p` wygrywa specyficznością
   i wprowadzenie traci wyróżnienie */
.legal .legal__lead{
  font-size:1.125rem; line-height:1.7;
  color:var(--on-dark);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--hairline);
}
.legal__meta{
  margin-top:var(--space-2);
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em;
  color:var(--on-dark-muted);
}
.legal h2{
  margin-top:var(--space-5); margin-bottom:var(--space-2);
  font-family:var(--font-headline);
  font-size:1.5rem; font-weight:800; letter-spacing:-.015em; line-height:1.2;
}
.legal h3{
  margin-top:var(--space-3); margin-bottom:10px;
  font-size:1.0625rem; font-weight:700; letter-spacing:-.01em;
}
.legal p{margin-bottom:var(--space-2); color:var(--on-dark-muted)}
.legal strong{font-weight:500; color:var(--on-dark)}
.legal ul{
  margin:0 0 var(--space-2); padding-left:0;
  display:flex; flex-direction:column; gap:10px;
}
.legal li{
  position:relative; padding-left:22px;
  color:var(--on-dark-muted);
}
.legal li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent-500);
}
.legal a{color:var(--accent-500); text-decoration:underline; text-underline-offset:3px}
.legal a:hover{color:var(--on-dark)}

/* wyróżniona uwaga — ramka z akcentem po lewej */
.legal__note{
  margin:var(--space-3) 0;
  padding:var(--space-2) var(--space-3);
  border-left:3px solid var(--accent-500);
  background:color-mix(in srgb, var(--accent-500) 7%, transparent);
  border-radius:0 12px 12px 0;
}
.legal__back{
  margin-top:var(--space-5); padding-top:var(--space-3);
  border-top:1px solid var(--hairline);
  font-weight:500;
}
.legal__back a{text-decoration:none}

@media (max-width:600px){
  .legal-section{padding-top:calc(var(--space-6) + 40px)}
  .legal h2{font-size:1.3125rem}
}

/* ───────────────  09 · KONTAKT  ─────────────── */
.contact{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--space-6) var(--space-7); align-items:start;
}
.contact__list{margin-top:var(--space-5); display:grid; gap:var(--space-2)}
.contact__list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2);
  padding-bottom:12px; border-bottom:1px solid var(--hairline-soft);
}
.contact__list span{
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em;
  color:var(--on-dark-muted);
}
.contact__list a,.contact__val{font-size:1.0625rem; font-weight:500}
.contact__list a:hover{color:var(--accent-300)}
.footer__area{font-size:.875rem; color:var(--on-dark-muted)}

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--hairline); border-radius:var(--r-media);
  background:var(--ink-800);
}
/* Pułapka na boty. Świadomie NIE display:none — proste boty pomijają pola
   ukryte w ten sposób. Wypychamy je poza ekran, dla człowieka nieosiągalne. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.field{display:flex; flex-direction:column; gap:8px}
.field--wide,.form__foot{grid-column:1 / -1}
.field label{
  font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.12em;
}
.field abbr{color:var(--accent-500); text-decoration:none}
.field input,.field select,.field textarea{
  min-height:48px; padding:12px 14px;
  font:inherit; font-size:1rem; color:var(--on-dark);
  background:var(--ink-900);
  border:1px solid var(--hairline); border-radius:12px;
  transition:border-color 200ms var(--ease-out);
}
.field textarea{resize:vertical; min-height:120px}
.field select{appearance:none; cursor:pointer}
.field :is(input,select,textarea):focus{border-color:var(--accent-500); outline:none}
.field :is(input,select,textarea):focus-visible{outline:2px solid var(--accent-500); outline-offset:2px}
.field__hint{font-size:.75rem; color:var(--on-dark-muted)}
.field__error{font-size:.75rem; color:#ef7053; display:none; align-items:center; gap:6px}
.field__error::before{content:"!"; display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:#ef7053; color:var(--ink-900); font-size:10px; font-weight:700}
.field.is-invalid .field__error{display:flex}
.field.is-invalid :is(input,textarea){border-color:#ef7053}

.form__foot{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
.form__status{font-size:.8125rem; color:var(--on-dark-muted)}
.form__status.is-ok{color:#93c6ab}
.form__status.is-err{color:#ef7053}

@media (max-width:1024px){
  .contact{grid-template-columns:1fr; gap:var(--space-5)}
}
@media (max-width:560px){
  .form{grid-template-columns:1fr; padding:var(--space-3)}
}

/* ───────────────  STOPKA  ─────────────── */
.footer{
  background:var(--ink-900);
  border-top:1px solid var(--hairline-soft);
  padding-block:var(--space-6) var(--space-3);
}
.footer .meta{padding-bottom:var(--space-4); margin-bottom:var(--space-5)}
.footer__grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-5);
  padding-bottom:var(--space-5);
}
.footer__claim{margin-top:var(--space-2); color:var(--on-dark-muted); line-height:1.6}
.footer__grid h2{
  font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.12em; color:var(--on-dark-muted);
  margin-bottom:var(--space-2);
}
.footer__nav,.footer__contact{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.footer__nav a,.footer__contact a{
  min-height:32px; display:inline-flex; align-items:center;
  color:var(--on-dark-muted); transition:color 200ms var(--ease-out);
}
.footer__nav a:hover,.footer__contact a:hover{color:var(--on-dark)}

/* pasek swatchy — S8 */
.swatches{display:flex; gap:4px; margin-top:var(--space-3)}
.swatches i{width:28px; height:20px; background:var(--c)}

.footer__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap;
  padding-top:var(--space-3); border-top:1px solid var(--hairline-soft);
  font-size:.75rem; color:var(--on-dark-muted);
}
.footer__top{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  text-transform:uppercase; letter-spacing:.12em; font-weight:500;
}
.footer__top:hover{color:var(--on-dark)}

/* barcode — S7 */
.barcode{
  width:120px; height:26px; opacity:.5;
  background:repeating-linear-gradient(90deg,
    var(--on-dark-muted) 0 2px, transparent 2px 4px,
    var(--on-dark-muted) 4px 5px, transparent 5px 9px,
    var(--on-dark-muted) 9px 12px, transparent 12px 14px);
}

@media (max-width:820px){
  .footer__grid{grid-template-columns:1fr; gap:var(--space-4)}
  .footer__bar{justify-content:flex-start}
  .barcode{order:3}
}

/* ───────────────  LIGHTBOX REALIZACJI  ─────────────── */
/* przycisk-nakładka na kaflu: klikalny cały kadr, dostępny z klawiatury */
.work__open{
  position:absolute; inset:0; z-index:3;
  border:0; background:none; cursor:zoom-in;
}
.work__open:focus-visible{outline:2px solid var(--accent-500); outline-offset:-4px; border-radius:var(--r-media)}

.lightbox{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:grid; place-items:center; padding:var(--gutter);
}
.lightbox[hidden]{display:none}
.lightbox__scrim{
  position:absolute; inset:0;
  background:rgba(10,10,10,.72); backdrop-filter:blur(8px);
  cursor:zoom-out;
}
.lightbox__figure{
  position:relative; z-index:1;
  border-radius:var(--r-media); overflow:hidden;
  background:#000; border:1px solid var(--hairline);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  transform-origin:top left;   /* FLIP liczy od lewego górnego rogu */
  will-change:transform;
}
.lightbox__figure video{width:100%; height:100%; object-fit:cover; display:block}

.lightbox__close{
  position:absolute; top:12px; right:12px; z-index:2;
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(18,18,18,.6); backdrop-filter:blur(6px);
  color:var(--on-dark);
  transition:border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.lightbox__close:hover{border-color:var(--accent-500); color:var(--accent-300)}

/* Podgląd zdjęć — obraz skalowany do naturalnych proporcji, ale nie większy niż 1280px (ani niż ekran) */
.photobox__figure{
  position:relative; z-index:1; line-height:0;
  border-radius:var(--r-media); overflow:hidden;
  border:1px solid var(--hairline); box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.photobox__figure img{
  display:block;
  max-width:min(1280px, 92vw);   /* twardy limit 1280px */
  max-height:88vh;               /* portrety mieszczą się w ekranie */
  width:auto; height:auto;
}

.gallery__item{cursor:zoom-in}   /* sygnał, że kafel można powiększyć */

/* Nawigacja w powiększeniu — poprzednie / następne zdjęcie */
.photobox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  display:grid; place-items:center; width:52px; height:52px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(18,18,18,.6); backdrop-filter:blur(6px);
  color:var(--on-dark);
  transition:border-color 200ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.photobox__nav:hover,.photobox__nav:focus-visible{border-color:var(--accent-500); color:var(--accent-300)}
.photobox__nav--prev{left:clamp(12px, 3vw, 40px)}
.photobox__nav--next{right:clamp(12px, 3vw, 40px)}
@media (max-width:600px){
  .photobox__nav{width:44px; height:44px}
}

@media (max-width:600px){
  .lightbox{padding:var(--space-2)}
}

/* ═══════════════  RUCH  ═══════════════
   Cztery zachowania zamiast jednego „fade-up”. Wszystkie na transform/opacity/clip-path,
   więc nie ruszają layoutu (zero CLS). Wygaszane przez prefers-reduced-motion. */

/* 1 · Maskowane odsłanianie nagłówków — linia wysuwa się zza krawędzi.
      To jest sygnaturowy ruch strony. */
.line{
  display:block; overflow:hidden;
  padding-bottom:.12em; margin-bottom:-.12em;   /* miejsce na wydłużenia liter (g, j, y) */
}
.line__i{
  display:block;
  transform:translateY(110%);
  transition:transform 950ms var(--ease-expo);
  transition-delay:var(--d, 0ms);
  will-change:transform;
}
[data-lines].is-in .line__i{transform:none}

/* 2 · Reveal treści — subtelny, 12px zamiast 24px, wykładnicze wyhamowanie */
[data-reveal],[data-stagger] > *{
  opacity:0; transform:translateY(12px);
  transition:opacity 800ms var(--ease-expo), transform 800ms var(--ease-expo);
  transition-delay:var(--delay, 0ms);
}
[data-reveal].is-in,[data-stagger].is-in > *{opacity:1; transform:none}

/* 3 · Wipe — kadr odsłania się od dołu do góry, bez ruchu i bez fade */
[data-stagger="wipe"] > *{
  opacity:1; transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1000ms var(--ease-expo);
  transition-delay:var(--delay, 0ms);
}
[data-stagger="wipe"].is-in > *{clip-path:inset(0 0 0 0)}

/* 4 · Linia rozciąga się od lewej — kreska w nadpisie i pasek pod hero */
.eyebrow__rule,[data-grow]{
  transform:scaleX(0); transform-origin:left;
  transition:transform 1100ms var(--ease-expo);
  transition-delay:var(--delay, 0ms);
}
[data-reveal].is-in .eyebrow__rule,[data-grow].is-in{transform:none}

/* ───────────────  REDUCED MOTION  ─────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* wszystko widoczne od razu — żaden ruch nie warunkuje dostępu do treści */
  [data-reveal],[data-stagger] > *{opacity:1; transform:none}
  [data-stagger="wipe"] > *{clip-path:none}
  .line__i{transform:none}
  .eyebrow__rule,[data-grow]{transform:none}
  .hero__media{transform:none !important}
  .hero__media video{display:none}
}