/* =============================================================
   Klikon Media | main.css | Klikon Media 2026
   Brand: #cc00a6 | #7338ea | #000408
   Fonts: Space Grotesk (heading) | Inter (body)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:ital@0;1&family=Inter:wght@400;500;600&display=swap');

/* Tekst dostepny dla botow/czytnikow ekranu, zero wplywu na uklad wizualny -
   standardowa technika a11y (WCAG), nie "hidden text" spamowe. Uzywana m.in.
   w H1 hero strony glownej: napis "Wystrzel swoj biznes w kosmos" zostaje
   wizualnie, ale H1 dostaje dodatkowo prawdziwe, opisowe zdanie z fraza SEO -
   niewidoczne na ekranie, czytelne dla Google i screen readerow. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --color-primary:      #cc00a6;
  --color-primary-dark: #ad008d;
  --color-primary-light: rgba(204, 0, 166, .16);
  --color-dark:         #ffffff;
  --color-text:         #ffffff;
  --color-muted:        #a3a3ad;
  --color-border:       rgba(255, 255, 255, .12);
  --color-bg:           #000408;
  --color-bg-alt:       #131318;

  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --size-xs:  0.75rem;
  --size-sm:  0.875rem;
  --size-base:1rem;
  --size-lg:  1.125rem;
  --size-xl:  1.375rem;
  --size-2xl: 1.75rem;
  --size-3xl: 2.25rem;
  --size-4xl: 3rem;
  --size-5xl: 3.75rem;

  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10:2.5rem;   --space-12:3rem;
  --space-16:4rem;     --space-20:5rem;     --space-24:6rem;

  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 16px;  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

  --container-max: 1440px;
  --container-px:  1rem;
  --transition: 0.22s ease;
  --nav-height: 72px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter: stable rezerwuje miejsce na pasek przewijania na stale, zeby
   hero-scroll-video.js (lockScroll/unlockScroll podczas preloadu klatek) nie robil
   mikro-przesuniecia calej strony gdy pasek znika/wraca.
   scroll-behavior:smooth CELOWO USUNIETE - to byla prawdziwa przyczyna "przeskakiwania"
   na trackpadzie. To ustawienie kaze przegladarce wygladzac/animowac KAZDY scroll,
   wlacznie ze zwyklym scrollem kolkiem/gladzikiem (mialo dzialac tylko dla klikanych
   linkow-kotwic). Trackpad generuje mnostwo mikro-eventow wheel na sekunde - kazdy z
   nich odpalal wlasna animacje smooth-scroll przegladarki, ktore nakladaly sie i
   przerywaly nawzajem, dajac wrazenie szarpanego/nieprzewidywalnego scrolla. Jesli
   trzeba plynnego scrolla do kotwicy, uzyj JS: el.scrollIntoView({behavior:'smooth'})
   na konkretnym kliknieciu, nie globalnego CSS na html. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  /* clip, NIE hidden.
     "overflow-x: hidden" na body zmusza przegladarke do doliczenia
     "overflow-y: auto" - i wtedy przewija sie BODY, a nie okno. Zmierzone
     przed zmiana na kazdej podstronie: body_overflow "hidden / auto".
     Ta kombinacja plus kilkanascie elementow position:sticky na pelny ekran
     to znane zrodlo zacinajacego sie przewijania na iOS i Androidzie -
     zachowuje sie roznie zaleznie od silnika, wiec u jednego dziala,
     a u drugiego nie.
     "clip" przycina tak samo, ale NIE tworzy kontenera przewijania.
     Pierwsza linia zostaje jako zapas dla Safari starszego niz 16. */
  overflow-x: hidden;
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-dark);
}
h1 { font-size: clamp(2rem, 5vw, var(--size-5xl)); }
h2 { font-size: clamp(1.6rem, 4vw, var(--size-4xl)); }
h3 { font-size: clamp(1.15rem, 2.5vw, var(--size-2xl)); }
p  { max-width: 68ch; }

.section-tag {
  display: inline-block;
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4vw, var(--size-4xl));
  color: var(--color-dark);
  margin-bottom: var(--space-10);
}

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}
.main { padding-top: var(--nav-height); }
/* Home ma pelnoekranowe hero pod przezroczystym headerem - bez rezerwy na nav-height,
   inaczej hero (i jego sticky pin) startuje z martwa strefa/przesunieciem na starcie. */
.main--home { padding-top: 0; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: .02em;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn--ghost:hover { background: var(--color-primary); color: #fff; transform: translateY(-1px); }
.btn-white {
  display: inline-flex; align-items: center;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: var(--size-sm); font-weight: 600;
  background: #fff; color: var(--color-primary);
  border: 2px solid #fff;
  transition: background var(--transition), transform var(--transition);
}
.btn-white:hover { background: var(--color-primary-light); transform: translateY(-1px); }
.btn-white-outline {
  display: inline-flex; align-items: center;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: var(--size-sm); font-weight: 600;
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.6);
  transition: border-color var(--transition), transform var(--transition);
}
.btn-white-outline:hover { border-color: #fff; transform: translateY(-1px); }

/* ── btn-cyber - GLOWNY przycisk marki ────────────────────────
   Jeden jezyk przyciskow na calej stronie: sciete rogi, monospace
   wersalikami, gradient marki, neonowa poswiata i 4px "podstawka",
   ktora chowa sie przy kliknieciu. Wzorzec z CTA portfolio; tutaj,
   w main.css (ladowany zawsze), zeby kazda sekcja i stopka braly
   dokladnie ten sam przycisk zamiast wlasnej wariacji. */
@keyframes btn-cyber-glow {
  0%, 100% {
    box-shadow:
      0 4px 0 0 rgba(0, 0, 0, .4),
      0 0 0 1px rgba(204, 0, 166, .6),
      0 0 24px rgba(204, 0, 166, .4),
      0 0 48px rgba(115, 56, 234, .3);
  }
  50% {
    box-shadow:
      0 4px 0 0 rgba(0, 0, 0, .4),
      0 0 0 1px rgba(204, 0, 166, .6),
      0 0 32px rgba(204, 0, 166, .55),
      0 0 56px rgba(115, 56, 234, .4);
  }
}

.btn-cyber {
  --btn-cut: 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 2.5rem;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(204, 0, 166, .6);
  background: linear-gradient(135deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
  clip-path: polygon(
    var(--btn-cut) 0,
    calc(100% - var(--btn-cut)) 0,
    100% var(--btn-cut),
    100% calc(100% - var(--btn-cut)),
    calc(100% - var(--btn-cut)) 100%,
    var(--btn-cut) 100%,
    0 calc(100% - var(--btn-cut)),
    0 var(--btn-cut)
  );
  box-shadow:
    0 4px 0 0 rgba(0, 0, 0, .4),
    0 0 0 1px rgba(204, 0, 166, .6),
    0 0 24px rgba(204, 0, 166, .4),
    0 0 48px rgba(115, 56, 234, .3);
  transition: transform .08s ease-out, background .2s ease, box-shadow .2s ease;
  overflow: hidden;
  animation: btn-cyber-glow 3s ease-in-out infinite;
}

/* Delikatny scanline - ta sama tekstura co na CTA portfolio. */
.btn-cyber::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, .12) 2px,
    rgba(0, 0, 0, .12) 4px
  );
  pointer-events: none;
  clip-path: inherit;
}

.btn-cyber > * { position: relative; z-index: 1; }

.btn-cyber:hover {
  background: linear-gradient(135deg, #e01ac0 0%, #b01890 35%, #8a4ff5 70%, #5a25b8 100%);
  color: #fff;
  box-shadow:
    0 4px 0 0 rgba(0, 0, 0, .4),
    0 0 0 1px rgba(204, 0, 166, .6),
    0 0 36px rgba(204, 0, 166, .5),
    0 0 64px rgba(115, 56, 234, .5);
}

.btn-cyber:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 0 rgba(0, 0, 0, .4),
    0 0 0 1px rgba(204, 0, 166, .6),
    0 0 20px rgba(204, 0, 166, .4);
}

.btn-cyber:disabled { opacity: .55; cursor: not-allowed; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-cyber { animation: none; }
}

/* ── Header / Nav ───────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: none;
  transition: background var(--transition), box-shadow var(--transition);
}
/* WYCOFANE: probowalem solidne tlo + blur zeby header nie "przebijal sie" przez
   duzy tekst manifesto - user wyraznie nie chce zadnego czarnego paska w headerze,
   nawet po scrollu. Header zostaje w 100% przezroczysty zawsze. */
.site-header.is-scrolled { background: none; }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
/* Belka na FULL szerokosc (user: logo maksymalnie z lewej, burger maksymalnie
   z prawej) - wylaczamy max-width kontenera, zostaje tylko maly oddech od
   krawedzi ekranu. */
.site-header__inner.container { max-width: none; width: 100%; padding-inline: clamp(14px, 1.4vw, 28px); }

/* Tylko na stronach ze scroll-scrub hero (data-hero-scroll): logo/menu/przycisk
   ukryte na starcie, wjezdzaja dopiero gdy pojawi sie slowo WYSTRZEL (hero-scroll-video.js).
   Na pozostalych stronach (bez hero) header jest widoczny od razu, bez zmian. */
body:has(.hero-scroll) .site-header__inner {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1), transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}
body:has(.hero-scroll) .site-header.is-revealed .site-header__inner {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 900ms;
}
.site-header__logo { flex-shrink: 0; position: relative; display: block; }
.site-header__logo-text { font-family: var(--font-heading); font-size: var(--size-xl); color: #fff; }
/* 40px (bylo 28px) - logo w belce ma byc wyrazniejsze. Wariant ciemny lezy
   na jasnym w absolutnym pozycjonowaniu, wiec wysokosc ustawiamy na obu. */
.site-header__logo img { height: 40px; width: auto; display: block; }

/* Jasne tlo pod belka nawigacji - klasa .on-light nadawana w main.js
   (probkowanie koloru sekcji pod logo przy scrollu). Crossfade DWOCH
   wersji SVG zamiast filtra brightness(0) - filtr czernil tez fioletowe
   "ON", a ono ma zostac nietkniete (wariant dark ma czarny "KLIK" i ten
   sam gradient "ON"). Kreski burgera dalej czernieja. */
/* Wariant ciemny lezy DOKLADNIE na jasnym. inset:0 (poprzednia wersja)
   rozciagalo go do prostokata jasnego logo - a oba pliki maja inne proporcje
   (PNG z Ustawien 3,5:1 vs SVG motywu 5:1), wiec ciemne logo bylo sciesnione.
   left/top + wysokosc 100% i szerokosc auto zachowuje jego wlasne proporcje. */
.site-header__logo-img--dark {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  opacity: 0;
  transition: opacity .25s ease;
}
.site-header__logo-img--light { transition: opacity .25s ease; }
.site-header.on-light .site-header__logo-img--light { opacity: 0; }
.site-header.on-light .site-header__logo-img--dark { opacity: 1; }
.site-header.on-light .site-header__burger span { background: #0a0a0a; }

/* Burger - zawsze widoczny (nie tylko mobile), duzy */
/* ── Skrot do portfolio w belce ────────────────────────────────
   Obok hamburgera, po jego lewej. Na szerokim ekranie ikona plus napis,
   na telefonie sama ikona - tam kazdy piksel belki jest zajety przez logo
   i hamburger. Wjezdza razem z reszta belki (.site-header__inner). */
/* WYGLAD BIERZE Z .kbtn (assets/css/kbtn.css) - sciete rogi, paski,
   gradient marki. Tutaj zostaje wylacznie UKLAD: dosuniecie do hamburgera
   i rozmiar ikony. Wczesniej ten skrot mial wlasna pigulke z obwodka
   i przez to jako jedyny element marki wygladal inaczej niz przyciski
   na landingu. */
.site-header__portfolio {
  gap: 9px;
  /* margin-left:auto dosuwa skrot do hamburgera. Belka to flex ze
     space-between, a .site-nav jest position:fixed, wiec nie liczy sie jako
     element ukladu - zostawaly trzy dzieci (logo, skrot, hamburger) i skrot
     ladowal na SRODKU belki zamiast obok hamburgera. */
  margin-left: auto;
  margin-right: clamp(10px, 1.6vw, 22px);
}

.site-header__portfolio svg { width: 19px; height: 19px; flex: none; }

/* Jestesmy w portfolio - pelny gradient marki, jak aktywny filtr w archiwum. */
.site-header__portfolio.is-current {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
  box-shadow: 0 0 18px rgba(204, 0, 166, .3);
}

/* Na jasnych sekcjach belka przelacza sie na ciemna typografie (klasa
   on-light z main.js) - skrot musi isc razem z nia. */
.site-header.on-light .site-header__portfolio:not(.is-current) {
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, .2);
  background: rgba(10, 10, 10, .05);
}

.site-header__burger {
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  padding: var(--space-2);
  flex-shrink: 0;
  z-index: 210;
  position: relative;
}
/* Powiekszony (bylo 34x3, gap 7) - prosba usera o wiekszy burger. */
.site-header__burger { gap: 9px; }
.site-header__burger span { display: block; width: 46px; height: 4px; background: #fff; border-radius: 4px; transition: transform var(--transition), opacity var(--transition), width var(--transition), background var(--transition); }
.site-header__burger span:nth-child(2) { width: 32px; }
.site-header__burger:hover span:nth-child(2) { width: 46px; }
.site-header__burger[aria-expanded="true"] span:nth-child(1) { width: 46px; transform: translateY(13px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { width: 46px; transform: translateY(-13px) rotate(-45deg); }

/* Menu - pelnoekranowy overlay wysrodkowany, otwierany burgerem */
/* MENU PELNOEKRANOWE.
   Bylo: cztery biale slowa wysrodkowane na plaskiej czerni (user: "nudne,
   proste"). Teraz menu mowi tym samym jezykiem co reszta strony: nadpis
   w stylu kontroli lotow (jak HUD w hero), numeracja pozycji jak w kole
   uslug (01-09), gradient marki na akcentach i kontakt na dole, zeby menu
   bylo skrotem do telefonu/maila zamiast wysylac ludzi na sam dol strony. */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* Poswiaty marki zamiast plaskiej czerni - te same radiale co w tle
     sekcji realizacji, wiec menu nie wypada z klimatu strony. */
  background:
    radial-gradient(ellipse 60% 40% at 15% 12%, rgba(204, 0, 166, .13), transparent 70%),
    radial-gradient(ellipse 55% 45% at 88% 82%, rgba(115, 56, 234, .15), transparent 70%),
    rgba(6, 6, 10, .985);
  /* Rozmycie tla TYLKO gdy menu jest otwarte.
     Pelnoekranowa warstwa z backdrop-filter jest skladana przez przegladarke
     w kazdej klatce, nawet przy opacity: 0 - a menu jest zamkniete przez
     99 procent czasu. To byl jeden z dwoch glownych powodow przyciec scrolla
     na stronie glownej. */
  backdrop-filter: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav.is-open {
  opacity: 1;
  pointer-events: all;
  transform: none;
  visibility: visible;
  backdrop-filter: blur(6px);
}

/* Widocznosc zmienia sie skokowo dopiero po wygaszeniu, zeby menu nie
   znikalo w polowie animacji zamykania. */
.site-nav { transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 400ms; }
.site-nav.is-open { transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }

.site-nav__inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 4vh, 44px);
  padding: calc(var(--nav-height, 64px) + 18px) var(--container-px) clamp(24px, 5vh, 48px);
}

/* Nadpis - mono z mrugajaca dioda, jak status startowy w hero. */
.site-nav__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.site-nav__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35f0a0;
  box-shadow: 0 0 9px 2px rgba(53, 240, 160, .6);
  animation: hero-hint-blink 1.6s ease-in-out infinite;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
  /* Zrodlo numeracji 01, 02... - licznik CSS zamiast wlasnego walkera
     WordPressa, wiec menu w panelu edytuje sie normalnie. */
  counter-reset: site-nav;
}

.site-nav__list > li {
  counter-increment: site-nav;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.site-nav__list > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }

.site-nav__list li a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 4vw, 26px);
  font-family: var(--font-heading);
  font-size: clamp(30px, 8.5vw, 56px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: rgba(255,255,255,.88);
  transition: color var(--transition), transform var(--transition);
  padding-block: clamp(14px, 2.4vh, 22px);
}

/* Numer pozycji - mono, przygaszony, stala szerokosc zeby tytuly staly
   w jednej kolumnie niezaleznie od dlugosci numeru. */
.site-nav__list > li > a::before {
  content: counter(site-nav, decimal-leading-zero);
  flex: none;
  width: 2.4em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .3);
  transition: color var(--transition);
}

/* Gradientowa kreska wjezdzajaca od lewej - ten sam gradient co na
   przyciskach i w naglowkach sekcji. */
.site-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, #cc00a6 0%, #7338ea 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav__list li a:hover,
.site-nav__list .current-menu-item > a { color: #fff; }
.site-nav__list li a:hover::before,
.site-nav__list .current-menu-item > a::before { color: #e879f9; }
.site-nav__list li a:hover::after,
.site-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* Wejscie po kolei - pozycje wpadaja jedna po drugiej, gdy menu sie
   otwiera. Bez tego caly blok pojawial sie plasko, na raz. */
.site-nav .site-nav__eyebrow,
.site-nav .site-nav__list > li,
.site-nav .site-nav__foot {
  opacity: 0;
  transform: translateY(14px);
}
.site-nav.is-open .site-nav__eyebrow,
.site-nav.is-open .site-nav__list > li,
.site-nav.is-open .site-nav__foot {
  animation: site-nav-in 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.site-nav.is-open .site-nav__eyebrow { animation-delay: 60ms; }
.site-nav.is-open .site-nav__list > li:nth-child(1) { animation-delay: 130ms; }
.site-nav.is-open .site-nav__list > li:nth-child(2) { animation-delay: 190ms; }
.site-nav.is-open .site-nav__list > li:nth-child(3) { animation-delay: 250ms; }
.site-nav.is-open .site-nav__list > li:nth-child(4) { animation-delay: 310ms; }
.site-nav.is-open .site-nav__list > li:nth-child(5) { animation-delay: 370ms; }
.site-nav.is-open .site-nav__list > li:nth-child(6) { animation-delay: 430ms; }
.site-nav.is-open .site-nav__foot { animation-delay: 490ms; }

@keyframes site-nav-in {
  to { opacity: 1; transform: none; }
}

/* Stopka menu: telefon, mail, social.
   Na telefonie zostaje pod pozycjami menu, jako kolumna. */
.site-nav__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: clamp(16px, 3vh, 26px);
}

.site-nav__contact {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.site-nav__contact:hover {
  border-color: rgba(204, 0, 166, .5);
  background: rgba(204, 0, 166, .08);
  transform: translateY(-2px);
}

.site-nav__contact-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #f0d6ff;
  background:
    linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)) padding-box,
    linear-gradient(135deg, rgba(204, 0, 166, .85), rgba(115, 56, 234, .85)) border-box;
  border: 1px solid transparent;
}

.site-nav__icon { width: 17px; height: 17px; display: block; }

/* ---- Kontakt obok menu (desktop) / pasek na dole (telefon) ----
 *
 * Kontakt byl wczesniej przyklejony do prawego dolnego rogu overlayu na
 * position:absolute. Kazda nowa pozycja menu zblizala liste do tych kafli,
 * az przy szesciu pozycjach telefon wszedl na napis "Blog".
 *
 * Teraz overlay ma dwie kolumny: lista po lewej, kontakt po prawej. Kolumna
 * nie zalezy od dlugosci menu, a prawa polowa ekranu, ktora i tak byla
 * pusta, zaczyna cokolwiek robic.
 */

.site-nav__side-label {
  margin: 0 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

@media (min-width: 900px) {
  .site-nav__inner {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 320px);
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
  }

  .site-nav__main {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 4vh, 44px);
    min-width: 0;
  }

  /* Pionowa kreska oddziela kontakt od listy - ta sama rola co linia pod
     pozycjami menu, tylko obrocona. */
  .site-nav__side {
    position: static;
    align-items: stretch;
    gap: 2px;
    padding: 4px 0 4px clamp(24px, 3vw, 40px);
    border-left: 1px solid rgba(255, 255, 255, .1);
    text-align: left;
  }

  /* Bez kafli: w kolumnie liczy sie sam napis i to, ze reaguje na kursor. */
  .site-nav__side .site-nav__contact {
    gap: 12px;
    padding: 10px 0;
    border: 0;
    background: none;
    border-radius: 0;
  }

  .site-nav__side .site-nav__contact:hover {
    background: none;
    transform: none;
  }

  .site-nav__side .site-nav__contact-value {
    font-size: clamp(16px, 1.25vw, 19px);
    letter-spacing: -.01em;
    background-image: linear-gradient(90deg, #cc00a6, #7338ea);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size .32s cubic-bezier(.22, 1, .36, 1), color .2s ease;
    padding-bottom: 2px;
  }

  /* Kreska w kolorach marki wyjezdza spod napisu, od lewej do prawej. */
  .site-nav__side .site-nav__contact:hover .site-nav__contact-value {
    background-size: 100% 2px;
  }

  .site-nav__side .site-nav__contact-badge {
    width: 32px;
    height: 32px;
    opacity: .6;
    transition: opacity .22s ease, transform .22s ease;
  }

  .site-nav__side .site-nav__contact:hover .site-nav__contact-badge {
    opacity: 1;
    transform: translateY(-1px);
  }

  .site-nav__side .site-nav__social {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
}

/* ---- Telefon: pasek dwoch przyciskow przyklejony do dolu overlayu ----
 *
 * Kontakt w kciuku, nie na koncu dlugiej listy. Dwie rowne polowki, bo
 * telefon i mail sa tu tak samo wazne, a nazwa nad wartoscia utrzymuje je
 * czytelne przy 390px.
 */
@media (max-width: 899px) {
  .site-nav__inner {
    justify-content: flex-start;
    padding-bottom: calc(clamp(20px, 4vh, 40px) + env(safe-area-inset-bottom));
  }

  .site-nav__main {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 4vh, 44px);
  }

  /* margin-top auto spycha pasek na dol, niezaleznie od dlugosci menu. */
  .site-nav__side {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: clamp(18px, 3vh, 28px);
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .site-nav__side-label {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .site-nav__side .site-nav__contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 13px 14px;
    min-height: 88px;
  }

  .site-nav__side .site-nav__contact-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  /* Adres maila nie ma gdzie sie zlamac przy 390px - lamiemy go recznie,
     zamiast pozwolic mu wyjechac poza kafel. */
  .site-nav__side .site-nav__contact-value {
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .site-nav__side .site-nav__contact-badge {
    width: 32px;
    height: 32px;
  }

  .site-nav__side .site-nav__social {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 2px;
  }
}

.site-nav__contact-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.site-nav__contact-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

.site-nav__contact-value {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav__social { display: flex; gap: 10px; margin-top: 2px; }
.site-nav__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  opacity: .72;
  transition: opacity var(--transition), border-color var(--transition), transform var(--transition);
}
.site-nav__social a:hover { opacity: 1; border-color: rgba(204, 0, 166, .6); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .site-nav .site-nav__eyebrow,
  .site-nav .site-nav__list > li,
  .site-nav .site-nav__foot { opacity: 1; transform: none; animation: none; }
  .site-nav__eyebrow-dot { animation: none; }
}
.site-nav__list .menu-item-has-children { position: relative; }
.site-nav__list .sub-menu {
  position: static;
  min-width: 0; background: none; border: none; box-shadow: none; backdrop-filter: none;
  opacity: 1; pointer-events: all; transform: none;
  padding: 0; margin-top: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.site-nav__list .sub-menu a { font-size: clamp(16px, 2vw, 22px); font-weight: 500; text-transform: none; color: rgba(255,255,255,.6); padding: var(--space-1) 0; }
.site-nav__list .sub-menu a:hover { color: #cc00a6; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero--home {
  min-height: 560px;
  display: flex; align-items: center;
  background: linear-gradient(135deg, var(--color-bg-alt) 60%, #f8e0f4 100%);
  padding-block: var(--space-20);
  overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.hero__content { display: flex; flex-direction: column; gap: var(--space-5); }
.hero__headline { font-family: var(--font-heading); font-size: clamp(2.2rem, 5.5vw, var(--size-5xl)); color: var(--color-dark); line-height: 1.1; }
.hero__headline em { font-style: italic; color: var(--color-primary); }
.hero__subline { font-size: var(--size-lg); color: var(--color-muted); max-width: 50ch; line-height: 1.65; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.hero__image { width: 100%; height: 100%; object-fit: cover; }

/* ── Services grid ───────────────────────────────────────────── */
.services--home { padding-block: var(--space-20); background: var(--color-bg); }
.services__intro { max-width: 60ch; color: var(--color-muted); margin-bottom: var(--space-12); }
.services__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
.services__item {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-8);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.services__item:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); transform: translateY(-3px); }
.services__icon { width: 48px; height: 48px; }
.services__icon img { width: 48px; height: 48px; object-fit: contain; }
.services__title { font-size: var(--size-lg); font-weight: 400; font-family: var(--font-heading); }
.services__title a { color: var(--color-dark); transition: color var(--transition); }
.services__title a:hover { color: var(--color-primary); }
.services__excerpt { font-size: var(--size-sm); color: var(--color-muted); flex: 1; }
.services__link { font-size: var(--size-sm); font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); transition: gap var(--transition); }
.services__link::after { content: '→'; }
.services__link:hover { gap: var(--space-3); }

/* ── Why Us ──────────────────────────────────────────────────── */
.why-us { padding-block: var(--space-20); background: var(--color-bg-alt); }
.why-us__headline { margin-bottom: var(--space-12); }
.why-us__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-8); }
.why-us__item { display: flex; flex-direction: column; gap: var(--space-4); }
.why-us__icon { width: 56px; height: 56px; display: grid; place-items: center; background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-md); }
.why-us__icon img { width: 36px; height: 36px; object-fit: contain; }
.why-us__title { font-family: var(--font-heading); font-size: var(--size-xl); }
.why-us__description { font-size: var(--size-sm); color: var(--color-muted); }

/* ── Stats ────────────────────────────────────────────────────── */
.stats { background: var(--color-primary); padding-block: var(--space-12); color: #fff; }
.stats__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12) var(--space-16); }
.stats__item { text-align: center; }
.stats__number { display: block; font-family: var(--font-heading); font-size: var(--size-4xl); line-height: 1; margin-bottom: var(--space-2); }
.stats__label { font-size: var(--size-sm); opacity: .85; max-width: 20ch; line-height: 1.4; }

/* ── About snippet ───────────────────────────────────────────── */
.about-snippet { padding-block: var(--space-20); background: var(--color-bg); }
.about-snippet__inner { display: grid; grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
.about-snippet__content { display: flex; flex-direction: column; gap: var(--space-5); }
.about-snippet__headline { font-size: clamp(1.8rem, 4vw, var(--size-4xl)); }
.about-snippet__text { color: var(--color-muted); }
.about-snippet__text p { margin-bottom: var(--space-4); }
.about-snippet__link { align-self: flex-start; margin-top: var(--space-2); }

/* ── Realizations ────────────────────────────────────────────── */
.realizations--home { padding-block: var(--space-20); background: var(--color-bg-alt); }
.realizations__headline { margin-bottom: var(--space-10); }
.realizations__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.realizations__item { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); transition: box-shadow var(--transition), transform var(--transition); }
.realizations__item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.realizations__media { aspect-ratio: 3/2; overflow: hidden; }
.realizations__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.realizations__item:hover .realizations__media img { transform: scale(1.03); }
.realizations__title { padding: var(--space-4) var(--space-5) var(--space-2); font-family: var(--font-heading); font-size: var(--size-lg); }
.realizations__link { display: inline-block; padding: var(--space-2) var(--space-5) var(--space-5); font-size: var(--size-sm); font-weight: 600; color: var(--color-primary); }

/* ── Testimonials ────────────────────────────────────────────── */
.testimonials { padding-block: var(--space-20); background: var(--color-bg); }
.testimonials__headline { margin-bottom: var(--space-10); }
.testimonials__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.testimonials__item { padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-4); }
.testimonials__rating { color: #f59e0b; font-size: var(--size-lg); letter-spacing: .05em; }
.testimonials__quote { font-family: var(--font-heading); font-style: italic; font-size: var(--size-lg); color: var(--color-dark); line-height: 1.5; flex: 1; }
.testimonials__author { font-size: var(--size-sm); font-weight: 600; color: var(--color-muted); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq--home { padding-block: var(--space-20); background: var(--color-bg-alt); }
.faq__headline { margin-bottom: var(--space-10); }
.faq__list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 800px; }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); transition: border-color var(--transition); }
.faq__item[open] { border-color: var(--color-primary); }
.faq__question { padding: var(--space-5) var(--space-6); font-weight: 600; color: var(--color-dark); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); transition: color var(--transition); }
.faq__question::after { content: '+'; font-size: var(--size-xl); font-weight: 400; color: var(--color-primary); flex-shrink: 0; transition: transform var(--transition); }
.faq__item[open] .faq__question::after { transform: rotate(45deg); }
.faq__item[open] .faq__question { color: var(--color-primary); }
.faq__answer { padding: 0 var(--space-6) var(--space-5); font-size: var(--size-sm); color: var(--color-muted); line-height: 1.7; }
.faq__answer p { margin-bottom: var(--space-3); }

/* ── Contact CTA ─────────────────────────────────────────────── */
.contact-cta { padding-block: var(--space-20); background: var(--color-bg-alt); color: #fff; }
.contact-cta__inner { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; }
.contact-cta__headline { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, var(--size-4xl)); color: #fff; max-width: 20ch; }
.contact-cta__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.cta { padding-block: var(--space-20); background: var(--color-primary); color: #fff; text-align: center; }
.cta__title { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, var(--size-4xl)); color: #fff; margin-bottom: var(--space-4); }
.cta__desc { font-size: var(--size-lg); opacity: .85; margin-bottom: var(--space-8); }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer { background: var(--color-bg-alt); color: rgba(255,255,255,.75); }
.site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-12); padding-block: var(--space-16); }
.site-footer__logo img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.site-footer__logo-text { font-family: var(--font-heading); font-size: var(--size-xl); color: #fff; }
.site-footer__tagline { font-size: var(--size-sm); margin-top: var(--space-3); opacity: .65; }
.site-footer__social { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-size: var(--size-sm); color: rgba(255,255,255,.7); transition: color var(--transition); }
.site-footer__social:hover { color: #fff; }
.site-footer__heading { font-family: var(--font-body); font-size: var(--size-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: var(--space-5); }
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__list li,
.site-footer__list li a { font-size: var(--size-sm); color: rgba(255,255,255,.7); transition: color var(--transition); }
.site-footer__list li a:hover { color: #fff; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--space-6); }
.site-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.site-footer__bottom p { font-size: var(--size-xs); opacity: .5; margin: 0; }
.site-footer__legal-list { display: flex; gap: var(--space-5); }
.site-footer__legal-list a { font-size: var(--size-xs); opacity: .5; transition: opacity var(--transition); }
.site-footer__legal-list a:hover { opacity: 1; }
.site-footer__credit { display: flex; justify-content: center; padding-block: var(--space-4); border-top: 1px solid rgba(255,255,255,.06); }
.site-footer__credit-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-xs); opacity: .35; color: inherit; text-decoration: none; transition: opacity var(--transition); }
.site-footer__credit-link:hover { opacity: .7; }
.site-footer__credit-link img { display: block; height: 16px; width: auto; filter: brightness(0) invert(1); }

/* ── Motion animations ───────────────────────────────────────── */
[data-motion="fade-up"] { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
[data-motion="fade-up"].is-visible { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
[data-delay="3"] { transition-delay: .3s; }
[data-delay="4"] { transition-delay: .4s; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  /* Mniejsze logo na telefonie - 40px z desktopu nachodzilo na tresc sekcji
     (manifesto, stopka). Wariant ciemny skaluje sie razem (height 100%). */
  .site-header__logo img { height: 30px; }
  /* Burger: cel dotykowy min 44px (WCAG/Apple HIG). */
  .site-header__burger { padding: 12px; margin: -4px; }

  /* Sama ikona - napis nie miesci sie obok logo i hamburgera.
     Kolo 44 px, zeby cel dotykowy zostal zgodny z wytycznymi. */
  .site-header__portfolio {
    gap: 0;
    padding: 0;
    width: 44px;
    min-height: 44px;
    margin-right: 8px;
  }
  .site-header__portfolio-label { display: none; }
  .site-header__portfolio svg { width: 21px; height: 21px; }

  /* ── TEST: lekki, polprzezroczysty pasek pod belka ────────────
     Do oceny przez usera. Zamiast pelnego tla: czern z alfa .42 plus
     rozmycie tego, co pod spodem (backdrop-filter), wiec belka odcina
     sie od tresci, ale nie robi z siebie plyty. Dolna kreska 1 px
     domyka krawedz.

     Pasek siedzi na ::before, a nie na tle samego .site-header, bo musi
     WCHODZIC RAZEM z logo i hamburgerem (prosba usera - nie moze byc
     widoczny od pierwszej klatki hero). Opacity da sie animowac,
     backdrop-filter praktycznie nie, wiec gasimy caly pseudoelement.
     Czasy 550 ms + opoznienie 900 ms to jeden do jednego to, czym jedzie
     .site-header__inner nizej - oba ruszaja w tej samej klatce.

     Zeby zdjac ten test - skasuj ten blok regul z ::before. */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 1;
    background: rgba(2, 4, 10, .42);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1), background 300ms ease;
  }

  /* Po starcie przewijania lekko gestnieje. */
  .site-header.is-scrolled::before {
    background: rgba(2, 4, 10, .52);
  }

  /* Strony ze scroll-scrub hero: pasek schowany, dopoki belka nie wjedzie. */
  body:has(.hero-scroll) .site-header::before {
    opacity: 0;
  }
  body:has(.hero-scroll) .site-header.is-revealed::before {
    opacity: 1;
    transition-delay: 900ms;
  }

  /* NA MOBILE LOGO NIE PRZELACZA SIE NA CIEMNE.
     Belka ma tutaj wlasne, przyciemnione tlo (::before wyzej), wiec jasne
     logo i burger sa czytelne rowniez nad bialymi sekcjami. Przelaczanie
     na czarny wariant bylo potrzebne tylko tam, gdzie belka jest calkiem
     przezroczysta, czyli na desktopie - i tam zostaje bez zmian.
     main.js dalej liczy luminancje i nadaje .on-light (korzysta z niej
     m.in. wskaznik postepu), zmieniamy wylacznie wyglad samej belki. */
  .site-header.on-light .site-header__logo-img--light { opacity: 1; }
  .site-header.on-light .site-header__logo-img--dark  { opacity: 0; }
  .site-header.on-light .site-header__burger span { background: #fff; }

  .site-header.on-light .site-header__portfolio:not(.is-current) {
    color: #fff;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
  }

  :root { --nav-height: 64px; }
  .site-nav { overflow-y: auto; padding: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { display: none; }
  .hero--home { min-height: auto; padding-block: var(--space-16); }
  .services__grid { grid-template-columns: 1fr; }
  .why-us__grid { grid-template-columns: 1fr; }
  .stats__list { gap: var(--space-8); }
  .about-snippet__inner { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .realizations__grid { grid-template-columns: 1fr; }
  .contact-cta__inner { align-items: stretch; }
  .contact-cta__ctas { flex-direction: column; }
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .site-footer__brand { grid-column: auto; }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
@media (max-width: 480px) {
  .hero__ctas { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }
  .cta__btns { flex-direction: column; align-items: center; }
}

/* ── Skip link ────────────────────────────────────────────────── */
.skip-link { position: absolute; top: -100px; left: var(--space-4); z-index: 9999; background: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-size: var(--size-sm); font-weight: 600; transition: top .2s; }
.skip-link:focus { top: var(--space-4); }

/* ── Poziomy pasek postepu na telefonie ─────────────────────────
   Pionowa szyna z rakieta znika ponizej 900 px, a strona glowna ma 28 tys.
   px wysokosci - bez zadnego wskaznika nie wiadomo, ile zostalo. */
.postep-mobile {
  display: none;
}

@media (max-width: 900px) {
  .postep-mobile {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 150;          /* nad belka nawigacji (100), pod menu (200) */
    pointer-events: none;
    background: rgba(255, 255, 255, .07);
    opacity: 0;
    transition: opacity .5s ease;
  }

  /* Pojawia sie razem z logo i hamburgerem, nie od pierwszej klatki -
     klase 'ma-postep' na <html> nadaje scroll-progress.js. */
  html.ma-postep .postep-mobile { opacity: 1; }

  .postep-mobile__wypelnienie {
    display: block;
    height: 100%;
    width: 100%;
    /* transform zamiast width: skalowanie idzie po stronie kompozytora,
       wiec pasek nie wymusza przeliczania ukladu przy kazdej klatce. */
    transform: scaleX(var(--postep-strony, 0));
    transform-origin: left center;
    background: linear-gradient(90deg, #cc00a6 0%, #a01580 30%, #7338ea 70%, #4c1d9e 100%);
    box-shadow: 0 0 10px rgba(204, 0, 166, .55);
  }
}

/* ── Menu pelnoekranowe: desktop ────────────────────────────────
   "STRONA GŁÓWNA" lamalo sie na dwie linie: kontener mial max-width 560px,
   a napis przy 56px potrzebuje ok. 470px plus kolumna z numerem i odstep.
   Poszerzamy kadr i zabraniamy zawijania - na telefonie zostaje jak bylo,
   bo tam czcionka schodzi do 30px i miesci sie bez problemu. */
@media (min-width: 769px) {
  .site-nav__inner {
    max-width: min(780px, 88vw);
  }

  .site-nav__list li a {
    white-space: nowrap;
  }
}

/* Tlo menu: warstwa z siatka i dwiema poswiatami, ktore powoli plyna.
   Wczesniej byly tylko dwa statyczne radiale - czytalo sie plasko.
   Wszystko na jednym pseudoelemencie i wylacznie transform + opacity,
   wiec nie kosztuje przeliczania ukladu. */
.site-nav::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background:
    /* delikatna siatka - daje glebie i "pokladowy" charakter */
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 100%,
    /* dwie mglawice marki */
    radial-gradient(ellipse 42% 34% at 22% 24%, rgba(204, 0, 166, .3), transparent 68%),
    radial-gradient(ellipse 38% 32% at 80% 74%, rgba(115, 56, 234, .32), transparent 68%);
  animation: site-nav-tlo 26s ease-in-out infinite alternate;
}

/* Gwiazdy - te same co w tle portfolio, zeby menu bylo z tego samego swiata. */
.site-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 14% 20%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.3px 1.3px at 32% 11%, rgba(255, 255, 255, .34), transparent 60%),
    radial-gradient(1.7px 1.7px at 68% 28%, rgba(255, 255, 255, .42), transparent 60%),
    radial-gradient(1.2px 1.2px at 84% 16%, rgba(255, 255, 255, .3), transparent 60%),
    radial-gradient(1.5px 1.5px at 10% 74%, rgba(255, 255, 255, .28), transparent 60%),
    radial-gradient(1.3px 1.3px at 60% 86%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(1.4px 1.4px at 90% 62%, rgba(255, 255, 255, .26), transparent 60%);
}

@keyframes site-nav-tlo {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

/* Tresc menu musi stac NAD tlem. */
.site-nav__inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-nav::before { animation: none; }
}