/* Poppins z własnego serwera zamiast z Google Fonts. Powody: serwery Google nie
   widzą już adresów IP odwiedzających (RODO), strona nie zależy od cudzej
   infrastruktury i krój ładuje się z tego samego połączenia co reszta.
   Pobrane tylko te grubości, których strona faktycznie używa: 400, 600, 700, 800
   i kursywa 800, w podzbiorach latin oraz latin-ext (polskie znaki).
   Licencja Poppins to SIL Open Font License, hosting u siebie jest dozwolony. */

@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('fonty/poppins-800-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('fonty/poppins-800-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonty/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonty/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonty/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonty/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonty/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonty/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonty/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonty/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== TOKENY, przeniesione 1:1 z MODULES/style/betting.css ===== */
:root {
  /* Wartości wpisane tu to paleta Papaja, ta sama, którą JS ustawia na starcie.
     Dzięki temu przy pierwszym malowaniu strony nie mignie stary róż. */
  --card: #fefdfd;
  --muted: #f8f2f0;
  --border: #e9dbd5;
  --radius: 16px;

  --primary: #ff824b;
  --primary-strong: #e25516;
  --secondary: #2bb3a3;

  --background: #fbf7f6;
  --background-2: #f5ece8;
  --foreground: #332824;
  --muted-foreground: #7e6b63;
  --destructive: #ef4444;
  --success: #34c77b;
  --gold: #f6b73c;

  --shadow:    0 6px 22px rgba(20, 30, 50, .10);
  --shadow-lg: 0 16px 40px rgba(20, 30, 50, .18);

  /* kolor akcentu tekstowego, w jasnym motywie mocniejszy odcień wiodącego */
  --accent: #e25516;
  /* tekst na kolorze wiodącym, dobierany do jasności palety */
  --on-primary: #ffffff;

  /* Gradienty ikon: koral, morski, złoto, grafit, zieleń i róż. Nie zmieniają
     się razem z paletą, bo to one dają stronie kolor poza samym akcentem.
     Złoto jest przyciemnione, żeby biała ikona się na nim trzymała.
     Lustro tej listy siedzi w app.js (GRADIENTY_IKON), zmieniać oba naraz. */
  --g1: linear-gradient(135deg,#ff9a3c,#ff6f61);
  --g2: linear-gradient(135deg,#48c7b1,#2bb0a0);
  --g3: linear-gradient(135deg,#e8b33c,#cf8a0a);
  --g4: linear-gradient(135deg,#3d4a53,#5a6b76);
  --g5: linear-gradient(135deg,#3dac78,#34c77b);
  --g6: linear-gradient(135deg,#ff7aa8,#ff4f8b);

  --maxw: 1180px;
  --section-y: 68px;
  --nav-h: 88px;
  /* ile pionu zostaje na sekcję po odjęciu paska nawigacji */
  --ekran: calc(100vh - var(--nav-h));
}

[data-theme="dark"] {
  --card: #322723;
  --muted: #3e312b;
  --border: #4e3e36;

  --primary: #fa8450;
  --primary-strong: #fb9c73;
  --secondary: #52d6c6;

  --background: #1b1410;
  --background-2: #241b16;
  --foreground: #f0ecea;
  --muted-foreground: #b3a49e;
  --destructive: #f87171;
  --success: #36c46f;
  --gold: #f6b73c;

  --shadow:    0 6px 22px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);

  --accent: #fa8450;
  --on-primary: #2b1408;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Przewijanie animuje JS ze stałym czasem (patrz goto() w app.js), natywne
   `scroll-behavior: smooth` gryzłoby się z tym, bo każde scrollTo z animacji
   samo byłoby wygładzane. */
html { scroll-behavior: auto; scroll-padding-top: calc(var(--nav-h) + 8px); }

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--primary); color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--background-2); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; }

img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--background-2); }

/* ===== Typografia ===== */
h1, h2, h3 { line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.28rem; }
.eyebrow {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted-foreground); margin-bottom: 8px;
}
.lead { color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.7; }
.accent { color: var(--accent); }
.italic { font-style: italic; }

/* ===== Owale / pigułki ===== */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 6px 16px;
  background: var(--background-2); border: 1px solid var(--border);
  font-weight: 700; font-size: .8rem;
}
.pill--accent { background: var(--primary); border-color: transparent; color: var(--on-primary); }

/* ===== Przyciski ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; border: 1px solid transparent; border-radius: 14px;
  padding: 12px 18px;
  transition: transform .08s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); }
/* Wszystkie efekty najechania siedzą w `@media (hover: hover)`. Na dotyku
   nie ma kursora: Safari na iPhonie traktuje wtedy pierwsze stuknięcie jako
   „najedź", a dopiero drugie jako kliknięcie, a stan hovera potrafi zostać
   na guziku po puszczeniu palca. `:focus-visible` zostaje poza tym warunkiem,
   bo obsługa klawiaturą musi działać wszędzie. */
@media (hover: hover) { .btn-primary:hover { background: var(--primary-strong); } }
.btn-ghost { background: var(--card); color: var(--foreground); border-color: var(--border); }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--primary); } }
.btn-sm { padding: 8px 14px; font-size: .85rem; border-radius: 10px; }
.btn-round { border-radius: 999px; padding: 12px 22px; }
.btn-block { width: 100%; padding: 16px 18px; font-size: 1.02rem; border-radius: 999px; }
.btn:disabled { opacity: .55; cursor: default; }

/* ===== Przycisk „hover", port MODULES/hover.tsx na czysty CSS =====
   Kółko przy prawej krawędzi rozlewa się na cały guzik, napis odsłania się
   w drugim kolorze przez clip-path, a strzałka wjeżdża na miejsce poprzedniej.
   Oryginał był w Reakcie i Tailwindzie na jednostkach vw, tu stałe piksele
   i tokeny motywu, żeby guzik pasował do reszty strony. */
.hbtn {
  --h: 54px;
  --ico: 40px;
  --ico-right: 6px;
  --pad: 26px;
  --fill-bg: var(--card);
  --fill-text: var(--accent);
  --ease: cubic-bezier(.785, .135, .15, .86);
  --dur: .45s;

  position: relative; display: inline-flex; align-items: center; justify-content: flex-start;
  height: var(--h); padding-left: var(--pad);
  padding-right: calc(var(--ico) + var(--ico-right) + var(--pad) - 10px);
  border: 1px solid var(--primary); border-radius: 999px; overflow: hidden;
  background: var(--primary); color: var(--on-primary);
  font-weight: 700; font-size: 1rem; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease;
}
.hbtn:active { transform: scale(.97); }
.hbtn__label { position: relative; z-index: 1; }

.hbtn__fill {
  position: absolute; z-index: 2; pointer-events: none;
  border-radius: 999px; background: var(--fill-bg);
  inset: calc((100% - var(--ico)) / 2) var(--ico-right)
         calc((100% - var(--ico)) / 2) calc(100% - var(--ico-right) - var(--ico));
  transition: inset var(--dur) var(--ease);
}
.hbtn:focus-visible .hbtn__fill { inset: 0; }
@media (hover: hover) { .hbtn:hover .hbtn__fill { inset: 0; } }

/* ten sam napis w kolorze wypełnienia, przycięty do kółka */
.hbtn__ghost {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center;
  padding-left: var(--pad);
  padding-right: calc(var(--ico) + var(--ico-right) + var(--pad) - 10px);
  color: var(--fill-text);
  clip-path: inset(calc((100% - var(--ico)) / 2) var(--ico-right)
                   calc((100% - var(--ico)) / 2) calc(100% - var(--ico-right) - var(--ico)));
  transition: clip-path var(--dur) var(--ease);
}
.hbtn:focus-visible .hbtn__ghost { clip-path: inset(0 0 0 0); }
@media (hover: hover) { .hbtn:hover .hbtn__ghost { clip-path: inset(0 0 0 0); } }

.hbtn__ico {
  position: absolute; right: var(--ico-right); top: 50%; z-index: 3; pointer-events: none;
  width: var(--ico); height: var(--ico); transform: translateY(-50%);
  border-radius: 999px; background: var(--fill-bg); color: var(--fill-text);
  overflow: hidden;
}
.hbtn__ico svg {
  position: absolute; inset: 0; margin: auto;
  width: calc(var(--ico) * .5); height: calc(var(--ico) * .5);
  transition: transform var(--dur) var(--ease);
}
.hbtn__ico .a1 { transform: translateX(-170%) scale(0); }
.hbtn:focus-visible .hbtn__ico .a1 { transform: none; }
.hbtn:focus-visible .hbtn__ico .a2 { transform: translateX(70%) scale(0); }
@media (hover: hover) {
  .hbtn:hover .hbtn__ico .a1 { transform: none; }
  .hbtn:hover .hbtn__ico .a2 { transform: translateX(70%) scale(0); }
}

.hbtn--sm { --h: 44px; --ico: 32px; --pad: 20px; --ico-right: 5px; font-size: .85rem; }

/* Wariant na całą szerokość, do formularza. */
.hbtn--blok { width: 100%; --h: 56px; --ico: 42px; --pad: 28px; font-size: 1.02rem; }
.hbtn--blok .hbtn__label, .hbtn--blok .hbtn__ghost { justify-content: center; }
.hbtn--blok .hbtn__ghost { display: flex; align-items: center; justify-content: center; }
.hbtn--blok { justify-content: center; }
.hbtn:disabled { opacity: .6; cursor: default; }

/* Samolocik zamiast strzałki: przy najechaniu odlatuje w górę i w prawo,
   z lekkim przechyleniem, a na jego miejsce nadlatuje drugi z dołu. */
.hbtn__ico--samolot .a1 { transform: translate(-90%, 90%) rotate(-25deg) scale(.7); opacity: 0; }
.hbtn:focus-visible .hbtn__ico--samolot .a1 { transform: none; opacity: 1; }
@media (hover: hover) { .hbtn:hover .hbtn__ico--samolot .a1 { transform: none; opacity: 1; } }
.hbtn__ico--samolot .a2 { transform: none; opacity: 1; }
.hbtn:focus-visible .hbtn__ico--samolot .a2 { transform: translate(90%, -90%) rotate(25deg) scale(.7); opacity: 0; }
@media (hover: hover) { .hbtn:hover .hbtn__ico--samolot .a2 { transform: translate(90%, -90%) rotate(25deg) scale(.7); opacity: 0; } }
.hbtn__ico--samolot svg { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hbtn__fill, .hbtn__ghost, .hbtn__ico svg { transition: none; }
}

/* ===== Karty ===== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

/* ===== NAVBAR ===== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  /* Na samej górze pasek jest półprzezroczysty: zasłona 45% koloru tła odcina
     logo i ikony od zdjęcia. Po przewinięciu robi się gęsty. */
  background: color-mix(in srgb, var(--background) 45%, transparent);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 22px;
  height: var(--nav-h); gap: 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
/* logotyp „Mila", 2 przy M to metr kwadratowy, A to dach z kominkiem */
.logo {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--foreground); grid-column: 1; justify-self: start;
}
.logo__napis { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }

/* Znak „M do M": inicjały Mileny Makarewicz, drugie M wyniesione jak wykładnik.
   Czyta się jak potęga, a przez to nawiązuje do metra kwadratowego.
   Podstawa w kolorze wiodącym, wykładnik w kolorze imienia. */
.logo__znak {
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  color: var(--accent); letter-spacing: -.02em;
}
.logo__znak span {
  font-size: .54em; line-height: 0; margin-left: .01em; color: var(--foreground);
  /* `vertical-align: super` podnosi za mało; wykładnik ma stać wyraźnie
     ponad linią wersalików, jak w zapisie potęgi */
  position: relative; top: -1.05em;
}
/* „koncept" rozłożone na całą szerokość logotypu, litery jako osobne elementy
   i space-between, bo justowanie pojedynczego słowa nie działa (nie ma spacji). */
.logo__imie {
  font-size: 1.92rem; font-weight: 800; letter-spacing: -.02em; line-height: 1;
}
/* nazwisko literami rozstawionymi na całą szerokość imienia; justowanie
   pojedynczego słowa nie działa, więc każda litera jest osobnym elementem */
.logo__nazwisko {
  display: flex; justify-content: space-between; width: 100%;
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  color: var(--accent); line-height: 1; margin-top: 3px;
}

.logo__sub {
  display: flex; justify-content: space-between; width: 100%;
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  color: var(--muted-foreground); line-height: 1;
}
.logo svg { height: 57px; width: auto; display: block; overflow: visible; }  /* stary znak */
.logo .mila-word { fill: currentColor; }
/* UWAGA: reguła CSS bije atrybut prezentacyjny fill="none" w SVG.
   Dlatego wypełnienie ustawiamy osobno dla dwójki (tekst) i konturu A (grupa),
   inaczej litera A wychodzi zamalowana w środku. */
.logo text.mila-mark { fill: var(--accent); stroke: none; }
.logo g.mila-mark { fill: none; stroke: var(--accent); }

.nav__links {
  position: relative;
  display: flex; align-items: center; gap: 4px; grid-column: 2; justify-self: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px; box-shadow: var(--shadow);
}
.nav__link {
  position: relative; z-index: 1;
  border-radius: 999px; padding: 9px 20px; font-size: .88rem; font-weight: 600;
  color: var(--muted-foreground); transition: color .28s ease;
}
@media (hover: hover) { .nav__link:hover { color: var(--foreground); } }
.nav__link.is-active { color: var(--on-primary); }

/* Pigułka przejeżdżająca pod aktywną zakładką. Sprężyste wyjście poza cel plus
   krótkie rozciągnięcie w poziomie daje wrażenie kropli przelewającej się
   na sąsiedni guzik. Animowane są tylko transform i szerokość. */
.nav__pigulka {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 999px; background: var(--primary);
  box-shadow: var(--shadow);
  transform-origin: center;
  transition:
    transform .42s cubic-bezier(.34, 1.32, .5, 1),
    width .42s cubic-bezier(.34, 1.32, .5, 1),
    height .2s ease,
    background .2s ease;
}
.nav__pigulka.bez-animacji { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .nav__pigulka { transition: none; }
}

/* kolumna 3 na sztywno, gdy dock znika (display:none), prawa grupa
   nie może wskoczyć do środkowej kolumny */
.nav__right { display: flex; align-items: center; gap: 10px; grid-column: 3; justify-self: end; }
/* gołe ikony w kolorze motywu, bez tła, ramki i cienia.
   Wymiar zostaje, bo to obszar dotyku na telefonie. */
.icon-btn {
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center;
  background: none; border: none; color: var(--foreground);
  transition: transform .08s ease, color .15s ease;
}
.icon-btn:active { transform: scale(.9); }
@media (hover: hover) { .icon-btn:hover { color: var(--accent); } }
.icon-btn svg { width: 24px; height: 24px; }
.nav__burger { display: none; }

.mobile-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 55;
  background: var(--card); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 18px 22px 24px; display: none; flex-direction: column; gap: 6px;
  animation: slideDown .22s ease;
}
.mobile-menu.is-open { display: flex; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mobile-menu button {
  text-align: left; padding: 12px 6px; font-size: 1.05rem; font-weight: 600;
  color: var(--muted-foreground); border-radius: 12px;
}
@media (hover: hover) { .mobile-menu button:hover { color: var(--accent); } }
.mobile-menu .m-cta { color: var(--accent); font-weight: 800; }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 40px) 22px 80px; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg picture, .hero__bg img { display: block; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; opacity: .62; }
[data-theme="dark"] .hero__bg img { opacity: .42; }
/* zasłona tylko tyle, żeby tekst był czytelny, zdjęcie ma być widoczne */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%,
      color-mix(in srgb, var(--background) 80%, transparent) 0%,
      color-mix(in srgb, var(--background) 45%, transparent) 55%,
      transparent 78%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--background) 42%, transparent) 0%,
      color-mix(in srgb, var(--background) 30%, transparent) 45%,
      color-mix(in srgb, var(--background) 82%, transparent) 82%,
      var(--background) 100%);
}
.hero__blob {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--primary), transparent 68%);
  opacity: .22; pointer-events: none;
}
.hero__blob--a { top: -180px; right: -140px; opacity: .14; }
.hero__blob--b { bottom: -260px; left: -200px; background: radial-gradient(circle at 35% 35%, var(--secondary), transparent 68%); opacity: .10; }
.hero__inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; text-align: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  border-radius: 999px; padding: 8px 18px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em;
  color: var(--accent);
}
.hero h1 { margin-bottom: 26px; }
.hero .lead { font-size: clamp(1rem, 2vw, 1.2rem); max-width: 620px; margin: 0 auto 38px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ===== ABOUT ===== */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.about__left { position: sticky; top: calc(var(--nav-h) + 24px); }
.about__left h2 { margin-bottom: 14px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 26px; }
.stat { padding: 18px 20px; }
.stat__num { font-size: 2.3rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 8px; }
.stat__label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); }
.stat--link { cursor: pointer; transition: transform .12s ease, box-shadow .15s ease; }
@media (hover: hover) { .stat--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } }

.about__cards { display: flex; flex-direction: column; gap: 18px; }
.svc { padding: 26px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
@media (hover: hover) { .svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary); } }
.svc__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
/* Bez kolorowego kwadratu pod spodem: sama kreska ikony, w kolorze wiodącym.
   Trzy karty obok siebie w trzech różnych kolorach robiły się jarmarkiem,
   a tu i tak wszystko trzyma jeden akcent. */
.svc__ico {
  width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--primary); flex-shrink: 0;
}
.svc__ico svg { width: 30px; height: 30px; stroke-width: 1.7; }
/* Kolory wzięte wprost z gradientów osi współpracy niżej, żeby obie sekcje
   mówiły tym samym zestawem: jaśniejszy pomarańcz z --g1, zieleń z --g5,
   morski z --g2. Same krańce gradientów, bo kreska ikony potrzebuje jednego
   koloru, nie przejścia. */
.svc__ico--pomarancz { color: #ff9a3c; }
.svc__ico--zielen    { color: #34c77b; }
.svc__ico--morski    { color: #48c7b1; }
.g1 { background: var(--g1); }
.g2 { background: var(--g2); }
.g3 { background: var(--g3); }
.g4 { background: var(--g4); }
.g5 { background: var(--g5); }
.g6 { background: var(--g6); }
.svc p.lead { margin-bottom: 16px; font-size: .95rem; }
.svc__date { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); }

/* ===== PORTFOLIO ===== */
.head-center { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.head-center h2 { margin-bottom: 10px; }
/* Nagłówek widoku projektu nie jest kolumną tekstu, tylko paskiem filtrów nad
   zdjęciami, więc bierze pełną szerokość sekcji. Przy 640 px osiem kategorii
   zawijało się na trzy rzędy, choć obok stało pół ekranu pustego miejsca. */
.head-center:has(.filters) { max-width: none; }

/* ===== Pas projektów =====
   Telefon: kolumna kafli przewijana w pionie, strzałki w górę i w dół pod spodem.
   Komputer (od 861 px): rząd przewijany w bok, strzałki po bokach.
   W obu przypadkach strzałki stoją OBOK kafli, nigdy na nich, a kafle mają
   szerokość wyliczoną tak, żeby mieściła się ich całkowita liczba, więc
   przewijanie nigdy nie zostawia zdjęcia przeciętego w połowie. */
.proj-pas {
  --odstep: 16px;
  --strzalka: 46px;
  /* telefon: trzy kafle na raz, wysokość dobrana tak, żeby razem ze strzałkami
     zmieściły się w kadrze bez przycinania czwartego */
  --kafel: clamp(140px, 21vh, 200px);
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--odstep); row-gap: 14px; align-items: center;
}

.proj-grid {
  grid-row: 1; grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: var(--odstep);
  /* Pas nie łapie kółka ani gestu: `overflow: hidden` zostawia go przewijalnym
     tylko z kodu (scrollBy przy strzałkach), a strona przewija się normalnie,
     także wtedy, gdy kursor stoi nad kaflami. */
  overflow: hidden;
  scroll-snap-type: y mandatory;
  /* dokładnie trzy kafle w oknie, więc czwarty nie jest przycięty */
  height: calc(3 * var(--kafel) + 2 * var(--odstep));
  scrollbar-width: none; -ms-overflow-style: none;
}
.proj-grid::-webkit-scrollbar { display: none; }

.pas-strzalka {
  grid-row: 2;
  display: grid; place-items: center;
  width: var(--strzalka); height: var(--strzalka); border-radius: 999px;
  background: var(--card); border: 1px solid var(--border); color: var(--foreground);
  box-shadow: var(--shadow);
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
/* Na dotyku NIE MA hovera. Safari na iPhonie traktuje pierwsze stuknięcie
   w element z regułą :hover jako „najedź", a dopiero drugie jako kliknięcie:
   stąd strzałka, która za pierwszym razem nic nie robiła. `@media (hover: hover)`
   wpuszcza te reguły wyłącznie tam, gdzie jest prawdziwy kursor. */
@media (hover: hover) {
  .pas-strzalka:hover:not([disabled]) { background: var(--primary); border-color: transparent; color: var(--on-primary); }
}
.pas-strzalka:active:not([disabled]) { transform: scale(.92); }
.pas-strzalka[disabled] { opacity: .3; cursor: default; }
.pas-strzalka[hidden] { display: none; }
/* na telefonie te same guziki obracamy na pionowe */
.pas-strzalka--wstecz { grid-column: 1; justify-self: end; }
.pas-strzalka--dalej { grid-column: 2; justify-self: start; }
.pas-strzalka svg { transform: rotate(90deg); }
.proj {
  position: relative; overflow: hidden; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); background: var(--card);
  /* Wysokość jawna zamiast aspect-ratio: przy proporcji i max-height przeglądarka
     zwęża też szerokość i kafle przestają wypełniać kolumny. Górna granica 420 px
     odpowiada dawnym 4:3, a na niskich ekranach (1080p to ok. 950 px okna) kafle
     schodzą do tego, co zostaje po pasku, paddingu sekcji i nagłówku, zdjęcia mają object-fit: cover, więc kadrują się ciaśniej. */
  height: var(--kafel);
  flex: 0 0 var(--kafel);
  scroll-snap-align: start;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.proj img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
@media (hover: hover) {
  .proj:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
  .proj:hover img { transform: scale(1.05); }
}
.proj__cap {
  position: absolute; inset: auto 0 0 0; padding: 18px;
  background: linear-gradient(to top, rgba(12,16,22,.88), rgba(12,16,22,.45) 55%, transparent);
  color: #fff;
}
/* Kafle są węższe, odkąd mieszczą się cztery, a nazwy w rodzaju
   „Bliźniak w Stanisławowie" niosą twardą spację (zasada sierot), więc nie da
   się ich złamać w dowolnym miejscu. Napis musi być mniejszy, żeby zmieścił się
   w kafelku; `overflow-wrap` to bezpiecznik na nazwy jeszcze dłuższe. */
.proj__cap h3 { font-size: 1.25rem; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.proj__count {
  display: inline-flex; margin-bottom: 10px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); padding: 4px 14px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
}

/* Filtry rozkładają się na tę samą szerokość co zdjęcia pod nimi, a nie na
   wąską kolumnę tekstu: przy ośmiu kategoriach zawijały się na trzy rzędy. */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
/* „Powrót" to inna czynność niż filtrowanie, więc stoi wyraźnie osobno. */
.filters .sep { width: 1px; height: 26px; background: var(--border); margin: 0 10px; }
/* „Wszystkie" zdejmuje filtr, czyli jest wyjściem z każdego innego stanu.
   Nawet nieaktywne ma być widać od razu, stąd mocniejszy tekst i ramka. */
.chip--wszystkie:not(.is-active) {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 10px 18px; font-size: .85rem; font-weight: 700;
  background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
  transition: transform .08s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
  .chip:hover { color: var(--foreground); border-color: var(--primary); }
}
.chip:active { transform: scale(.97); }
.chip.is-active { background: var(--primary); border-color: transparent; color: var(--on-primary); box-shadow: var(--shadow); }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shot {
  position: relative; overflow: hidden; cursor: pointer;
  /* jak przy kaflach projektów: wysokość z okna, nie sztywna proporcja.
     Liczone na dwa rzędy, przy trzech i więcej sekcja musi się przewijać. */
  height: clamp(150px, calc((100vh - var(--nav-h) - 315px) / 2), 380px);
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); background: var(--card);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  animation: pop .22s ease both;
}
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
@media (hover: hover) {
  .shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
  .shot:hover img { transform: scale(1.08); }
}
.shot__cap {
  position: absolute; inset: auto 0 0 0; padding: 20px;
  background: linear-gradient(to top, rgba(12,16,22,.85), transparent);
  color: #fff; font-weight: 700; display: flex; align-items: center; gap: 8px;
  opacity: 0; transition: opacity .2s ease;
}
@media (hover: hover) { .shot:hover .shot__cap { opacity: 1; } }
/* bez kursora nie ma jak „najechać", więc podpis stoi widoczny od razu */
@media (hover: none) { .shot__cap { opacity: 1; } }
/* oznaczenie ujęcia przy pomieszczeniu pokazanym kilka razy: „Salon" + „A" */
.shot__var {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-left: 7px; border-radius: 999px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.34);
  font-size: .68rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; vertical-align: 2px;
}
.empty { text-align: center; color: var(--muted-foreground); padding: 40px 0; }

/* Przycisk rozwijający resztę projektów, tylko na telefonie. Po rozwinięciu sekcja
   rośnie ponad wysokość ekranu i to jest w porządku: użytkownik sam o to poprosił. */
.wiecej { display: flex; justify-content: center; margin-top: clamp(12px, 2.2vh, 20px); }

/* Komputer: pas jedzie w bok, strzałki wracają na boki i przestają być obracane. */
@media (min-width: 861px) {
  /* Portfolio jest szersze niż reszta strony. Kolumna tekstu ma 1180 px, bo tyle
     się dobrze czyta, ale zdjęciom ta granica tylko szkodzi: przy czterech kaflach
     robiły się z nich znaczki. Sekcja bierze więc tyle szerokości, ile daje okno,
     zostawiając margines na strzałki po bokach. */
  #portfolio > .wrap { max-width: min(1800px, 96vw); }

  .proj-pas {
    --odstep: 20px;
    /* Wysokość liczona z tego, co zostaje w oknie po pasku nawigacji i nagłówku
       sekcji: kafle mają zająć pion, a nie stać w nim jak znaczki pocztowe. */
    --kafel: clamp(220px, calc(100vh - var(--nav-h) - 250px), 520px);
    grid-template-columns: var(--strzalka) 1fr var(--strzalka);
    /* odstęp między strzałką a kaflami, żeby strzałki miały swoje miejsce
       i nie wyglądały, jakby były doklejone do zdjęcia */
    column-gap: 24px; row-gap: 0;
  }
  .proj-grid {
    grid-row: 1; grid-column: 2;
    flex-direction: row; height: auto;
    overflow: hidden;
    scroll-snap-type: x mandatory;
  }
  /* cztery całe kafle w oknie pasa: żaden nie jest przecięty przy przewijaniu */
  .proj { flex: 0 0 calc((100% - 3 * var(--odstep)) / 4); }

  .pas-strzalka { grid-row: 1; }
  .pas-strzalka--wstecz { grid-column: 1; justify-self: center; }
  .pas-strzalka--dalej { grid-column: 3; justify-self: center; }
  .pas-strzalka svg { transform: none; }
}

/* Znaczek „można kliknąć i powiększyć" na kaflach.
   Zdjęcia są kadrowane (object-fit: cover), więc bez tego nie widać, że pod
   spodem jest coś więcej. Widoczny od razu, nie tylko na hover, na telefonie
   hovera nie ma, a to właśnie tam podpowiedź jest najbardziej potrzebna. */
.kafel-lupa {
  position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: none;
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
  /* Bez `backdrop-filter`: taki znaczek jest na każdej miniaturce, a każdy
     wymusza osobny zrzut i rozmycie tła w każdej klatce. Gęstsze tło daje
     ten sam efekt czytelności za darmo. */
  background: rgba(16, 20, 26, .52);
  border: 1px solid rgba(255, 255, 255, .30);
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
@media (hover: hover) {
  .proj:hover .kafel-lupa,
  .shot:hover .kafel-lupa {
    background: var(--primary); border-color: transparent; transform: scale(1.08);
  }
}
.shot { cursor: zoom-in; }

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 13, 18, .93); backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; animation: fade .2s ease; }
/* Zdjęcie i podpis jedno pod drugim. Podpis stał wcześniej na warstwie nad
   zdjęciem i przy wyższych kadrach zasłaniał jego dół. */
.lightbox { flex-direction: column; gap: 14px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: 100%;
  /* miejsce na podpis pod spodem i na odstęp między nimi */
  max-height: calc(86vh - 60px);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); object-fit: contain;
}
.lb-btn {
  position: absolute; z-index: 5; width: 52px; height: 52px; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  transition: background .15s ease, transform .08s ease;
}
@media (hover: hover) { .lb-btn:hover { background: rgba(255,255,255,.24); } }
.lb-btn:active { transform: scale(.94); }
.lb-close { top: 22px; right: 22px; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-cap {
  flex: none;
  border-radius: 999px; padding: 8px 20px; font-weight: 700; font-size: .9rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fff;
}

/* ===== OFERTA / oś czasu ===== */
.timeline { position: relative; max-width: 820px; margin: 0 auto; }
/* Łącznik rysowany przy każdym kroku oprócz ostatniego, więc kreska kończy się
   na ostatniej ikonie zamiast lecieć w pustkę pod nią. Pozycja liczona ze
   zmiennej --ikona, żeby trzymała się środka kółka także po jego zmniejszeniu. */
.step { --ikona: 48px; }
.step:not(:last-child)::before {
  content: ""; position: absolute; z-index: 1;
  left: calc(var(--ikona) / 2 - 1px);
  top: calc(var(--ikona) + 4px); bottom: -4px;
  width: 2px; background: var(--border);
}
.section > .wrap > .head-center + .timeline { margin-top: 4px; }

.step { position: relative; display: flex; gap: 24px; align-items: flex-start; padding-bottom: 28px; }
.step:last-child { padding-bottom: 0; }
.step__ico {
  width: var(--ikona); height: var(--ikona); border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; z-index: 2;
  box-shadow: var(--shadow);
}
.step__body { flex: 1; padding-top: 2px; }
.step__body h3 { margin-bottom: 8px; }
.step__body p { color: var(--muted-foreground); line-height: 1.7; font-size: .95rem; }

.note { margin-top: 34px; padding: 26px 30px; text-align: center; }
.note p { color: var(--muted-foreground); line-height: 1.75; }
.note .linkish {
  color: var(--accent); font-weight: 800; text-decoration: underline;
  text-underline-offset: 4px;
}

/* ===== Dodatek premium =====
   Świadomie wyjęty z osi współpracy: to nie kolejny krok procesu, tylko usługa
   do dokupienia. Złoto wchodzi jako akcent obok koloru wiodącego palety.
   „Mienienie się" to jedna animacja background-position na przesuniętym gradiencie, bez cieni w pętli, bez filtrów, więc kosztuje tyle co nic. */
.premium {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: clamp(14px, 3vh, 30px);
  padding: clamp(15px, 2.4vh, 22px) clamp(16px, 1.8vw, 26px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--border));
  box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--gold) 10%, transparent);
}

.premium__ico {
  width: 46px; height: 46px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(115deg, var(--primary) 0%, var(--gold) 42%, var(--primary) 84%);
  background-size: 260% 100%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent), var(--shadow);
}

.premium__body { min-width: 0; }

.premium__badge {
  display: inline-flex; border-radius: 999px; padding: 3px 12px; margin-bottom: 6px;
  background: color-mix(in srgb, var(--gold) 18%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  color: color-mix(in srgb, var(--gold) 70%, var(--foreground));
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
}

.premium__title {
  margin-bottom: 6px;
  background: linear-gradient(100deg, var(--accent) 0%, var(--gold) 40%, var(--accent) 80%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Mienienie się chodzi tylko wtedy, gdy karta jest na ekranie. Animacja
   `background-position` przemalowuje element w każdej klatce, więc puszczona
   w nieskończoność trzymałaby procesor i baterię także wtedy, gdy nikt jej nie widzi. */
.premium.widoczna .premium__ico,
.premium.widoczna .premium__title { animation: mieni 6s linear infinite; }

.premium__body p { color: var(--muted-foreground); line-height: 1.65; font-size: .95rem; }

@keyframes mieni { to { background-position: -260% 0; } }

@media (prefers-reduced-motion: reduce) {
  .premium__ico, .premium__title { animation: none; }
}

/* ===== KONTAKT =====
   Zamiast formularza stoi tu adres e-mail: dopóki nie ma zgody na przetwarzanie
   danych i umowy powierzenia z dostawcą wysyłki, prościej i uczciwiej jest
   poprosić o zwykłą wiadomość. Formularz czeka w formularz-do-powrotu.md. */
.kontakt-mail {
  max-width: 620px; margin: 0 auto; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(24px, 4.4vh, 44px) clamp(20px, 3vw, 40px);
  display: flex; flex-direction: column; align-items: center;
}
.kontakt-mail__ico {
  width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center;
  color: var(--on-primary); background: var(--primary); box-shadow: var(--shadow);
  margin-bottom: clamp(12px, 2vh, 18px);
}
.kontakt-mail__ico svg { width: 28px; height: 28px; }
.kontakt-mail__nad {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted-foreground); margin-bottom: 8px;
}
/* Adres i guzik kopiowania stoją w jednym rzędzie, wyśrodkowanym jako całość,
   żeby ikona nie zwisała z boku karty. */
.kontakt-mail__wiersz {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; max-width: 100%;
}
.kopiuj {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  color: var(--muted-foreground); background: var(--muted);
  border: 1px solid var(--border);
  transition: color .15s ease, border-color .15s ease, transform .08s ease;
}
@media (hover: hover) { .kopiuj:hover { color: var(--accent); border-color: var(--accent); } }
.kopiuj:active { transform: scale(.88); }
/* Obie ikony leżą w tej samej komórce siatki, więc podmiana nie rusza układu. */
.kopiuj svg { grid-area: 1 / 1; width: 15px; height: 15px; }
.kopiuj__ok { opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.kopiuj__kopia { opacity: 1; transition: opacity .15s ease; }
.kopiuj.is-ok { color: var(--primary); border-color: var(--primary); }
.kopiuj.is-ok .kopiuj__kopia { opacity: 0; }
.kopiuj.is-ok .kopiuj__ok { opacity: 1; transform: none; }

.kontakt-mail__adres {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); font-weight: 800; letter-spacing: -.01em;
  color: var(--accent); text-decoration: none; word-break: break-word;
  border-bottom: 2px solid transparent; transition: border-color .15s ease;
}
@media (hover: hover) { .kontakt-mail__adres:hover { border-bottom-color: var(--accent); } }
.kontakt-mail__opis {
  color: var(--muted-foreground); line-height: 1.65; font-size: .93rem;
  margin: clamp(10px, 1.8vh, 16px) 0 clamp(16px, 2.6vh, 24px); max-width: 46ch;
}
.kontakt-mail .hbtn { max-width: 340px; }
a.hbtn, a.btn { text-decoration: none; }

/* ===== KONTAKT, style formularza (zostają na wypadek jego powrotu) ===== */
.form { padding: 34px; display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label {
  display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted-foreground); margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%; background: var(--background-2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 14px 22px; outline: none;
  transition: border-color .15s ease, background .15s ease;
}
/* pole wieloliniowe nie może być pełnym owalem, bierze promień równy
   połowie wysokości jednoliniowego inputa, żeby narożniki zgadzały się z resztą */
.field textarea { border-radius: 26px; padding: 18px 22px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-foreground); opacity: .7; }
.field input:focus, .field textarea:focus { border-color: var(--primary); background: var(--card); }
.field textarea { min-height: 160px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__msg { font-size: .9rem; font-weight: 600; }
.form__msg.err { color: var(--destructive); }
.sent { text-align: center; padding: 34px 10px; }
.sent__ico {
  width: 64px; height: 64px; border-radius: 999px; margin: 0 auto 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg,#3dac78,#34c77b); box-shadow: var(--shadow);
}
.sent h3 { margin-bottom: 8px; }
.sent p { color: var(--muted-foreground); }

/* ===== FOOTER ===== */
.footer { border-top: 1px solid var(--border); padding: 34px 0; background: var(--background); }
/* Trzy kolumny (1fr auto 1fr): logo siada w pierwszej, nota trafia do środkowej
   i jest wyśrodkowana względem całej strony, a nie względem miejsca obok logo. */
.footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.footer p { grid-column: 2; justify-self: center; text-align: center; color: var(--muted-foreground); font-size: .85rem; }

/* ===== Sekcja = jeden ekran =====
   Każda sekcja ma co najmniej wysokość okna pomniejszoną o pasek i wyśrodkowuje
   treść w pionie. Elementy, które da się skalować (kafle, odstępy, paddingi),
   oddychają razem z wysokością okna, więc sekcja wypełnia ekran i z niego nie ucieka.
   Włączone dopiero od 861 px szerokości i 620 px wysokości, na telefonie
   i w niskich oknach treść i tak jest wyższa niż ekran, a wymuszanie
   centrowania robiłoby tylko puste pasy. */
@media (min-width: 861px) and (min-height: 620px) {
  /* Ostatni ekran to formularz razem ze stopką: wspólna wysokość okna,
     formularz bierze resztę miejsca, stopka siada pod nim. */
  .ekran-koncowy { min-height: var(--ekran); display: flex; flex-direction: column; }
  .ekran-koncowy #contact { min-height: 0; flex: 1 1 auto; }

  .section {
    min-height: var(--ekran);
    display: flex; align-items: center;
    padding-top: clamp(22px, 5vh, 68px);
    padding-bottom: clamp(22px, 5vh, 68px);
  }
  .section > .wrap { width: 100%; }

  .head-center { margin-bottom: clamp(14px, 3.2vh, 34px); }
  .head-center h2 { margin-bottom: clamp(6px, 1.2vh, 10px); }

  .about__grid { gap: clamp(24px, 4vh, 48px); }
  .about__cards { gap: clamp(9px, 1.9vh, 18px); }
  .svc { padding: clamp(15px, 2.7vh, 26px); }
  .svc__head { margin-bottom: clamp(7px, 1.5vh, 14px); }
  .svc p.lead { margin-bottom: clamp(8px, 1.7vh, 16px); }
  .stats { margin-top: clamp(12px, 2.7vh, 26px); gap: clamp(10px, 1.9vh, 18px); }
  .stat { padding: clamp(11px, 1.9vh, 18px) 20px; }

  .filters { margin-top: clamp(10px, 2vh, 20px); }

  .step { padding-bottom: clamp(11px, 2.5vh, 28px); }
  .step__body h3 { margin-bottom: clamp(3px, .8vh, 8px); }
  .note { margin-top: clamp(14px, 3.2vh, 34px); padding: clamp(15px, 2.7vh, 26px) 30px; }

  .form { padding: clamp(18px, 3.4vh, 34px); gap: clamp(11px, 1.9vh, 18px); }
  .field textarea { min-height: clamp(84px, 15vh, 160px); }
  .field input, .field textarea { padding-top: clamp(10px, 1.5vh, 14px); padding-bottom: clamp(10px, 1.5vh, 14px); }
}

/* Niskie okna: typografia schodzi o oczko, żeby sekcje nie wystawały poza ekran. */
@media (min-width: 861px) and (max-height: 880px) {
  .section h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  .svc p.lead, .step__body p { font-size: .89rem; line-height: 1.55; }
  .head-center .lead, .note p { font-size: .95rem; line-height: 1.55; }
  .svc__ico { width: 42px; height: 42px; }
  .step { --ikona: 42px; }
  .stat__num { font-size: 1.9rem; margin-bottom: 5px; }
  .about__left .lead { font-size: .95rem; line-height: 1.6; }
}

/* Dodatek premium i notka o wycenie: jeden pod drugim, oba na szerokość osi. */
.oferta__dol { max-width: 820px; margin: 0 auto; }

/* Bardzo niskie okna (poniżej ~720 px): jeszcze oczko ciaśniej. */
@media (min-width: 861px) and (max-height: 720px) {
  .svc p.lead, .step__body p, .premium__body p { font-size: .85rem; line-height: 1.5; }
  .svc { padding: 13px 16px; }
  .svc__ico, .premium__ico { width: 38px; height: 38px; }
  .step { --ikona: 38px; }
  .about__cards { gap: 8px; }
  .note { padding: 13px 20px; }
  .premium { padding: 13px 16px; gap: 13px; }
}

/* Sekcja „Oferta" ma najwięcej treści, na niskich oknach ścieśniamy ją najmocniej. */
@media (min-width: 861px) and (max-height: 810px) {
  #oferta .head-center { margin-bottom: 10px; }
  .step { padding-bottom: 8px; }
  .step__body h3 { font-size: 1.08rem; }
  .oferta__dol { margin-top: 12px; }
  .note { padding: 12px 18px; }
  .note p { font-size: .88rem; line-height: 1.5; }
  .premium { padding: 12px 15px; gap: 12px; }
  .premium__body p { font-size: .84rem; line-height: 1.5; }
  .premium__badge { margin-bottom: 4px; padding: 2px 10px; }
  .premium__title { font-size: 1.08rem; margin-bottom: 4px; }
}
@media (min-width: 861px) and (max-height: 700px) {
  #oferta .head-center h2 { font-size: 1.5rem; }
  #oferta .head-center .eyebrow { margin-bottom: 4px; }
  .step { padding-bottom: 5px; }
  .step { --ikona: 34px; }
  .step__body p { font-size: .82rem; line-height: 1.45; }
}

/* Oś współpracy ma zostać pionowa, a pod nią stoją jeszcze karta premium i notka, to najwyższa sekcja na stronie. Żeby dalej mieściła się w jednym ekranie,
   ścieśniamy właśnie ją: odstępy między krokami, paddingi kart i interlinię. */
@media (min-width: 861px) and (min-height: 620px) {
  #oferta { padding-top: clamp(18px, 3.6vh, 44px); padding-bottom: clamp(18px, 3.6vh, 44px); }
  #oferta .head-center { margin-bottom: clamp(8px, 1.8vh, 18px); }
  #oferta .step { padding-bottom: clamp(7px, 1.5vh, 16px); }
  #oferta .step__body p { line-height: 1.5; }
  #oferta .oferta__dol { margin-top: clamp(9px, 1.7vh, 18px); }
  #oferta .premium { padding: clamp(11px, 1.7vh, 16px) clamp(14px, 1.6vw, 20px); gap: 14px; }
  #oferta .premium__body p { line-height: 1.5; }
  #oferta .note { margin-top: clamp(9px, 1.7vh, 18px); padding: clamp(11px, 1.7vh, 16px) 22px; }
  #oferta .note p { line-height: 1.5; }
}

/* Podwójne stuknięcie w guzik na telefonie potrafi zamiast kliknięcia przybliżyć
   stronę. `touch-action: manipulation` wyłącza samo double-tap-to-zoom na elementach
   klikalnych, a szczypanie do powiększania zostaje (nie blokujemy dostępności). */
button, a, input, textarea, select, summary, [role="button"] {
  touch-action: manipulation;
}
.icon-btn, .nav__link, .chip, .btn, .hbtn, .proj, .shot, .lb-btn, .pal-item {
  -webkit-tap-highlight-color: transparent;
}

/* Zdjęcia z portfolio: bez przeciągania na pulpit i bez menu „Zapisz obraz"
   po długim przytrzymaniu na telefonie. To próg dla przypadkowych osób,
   nie zabezpieczenie: zrzut ekranu i tak przechodzi (patrz chronZdjecia w app.js). */
#portfolioView img, .lightbox img, .hero__bg img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Ciaśniejsza „Oferta" na typowym 1080p, pionowa oś plus karta premium i notka
   nie mieszczą się inaczej w jednym ekranie. */
@media (min-width: 861px) and (max-height: 1000px) {
  #oferta .head-center h2 { font-size: 1.7rem; }
  #oferta .step__body p, #oferta .premium__body p, #oferta .note p { font-size: .85rem; line-height: 1.45; }
  #oferta .step__body h3 { font-size: 1.05rem; }
  #oferta .premium { padding: 12px 16px; }
  #oferta .premium__title { font-size: 1.05rem; }
  #oferta .note { padding: 12px 20px; }
}

/* Ostatni ekran (formularz + stopka) na niskich oknach: chudsza stopka
   i ciaśniejszy nagłówek, żeby całość dalej mieściła się w jednym ekranie. */
@media (min-width: 861px) and (max-height: 810px) {
  .footer { padding: 16px 0; }
  #contact .head-center { margin-bottom: 10px; }
}

/* Okna typowego laptopa (MacBook Air 1440x900 daje ok. 1440x785 widoku)
   to najciaśniejszy realny przypadek dla „Oferty": pionowa oś pięciu kroków
   plus karta premium i notka. Tu ścieśniamy ją najmocniej. */
@media (min-width: 861px) and (max-height: 900px) {
  #oferta { padding-top: clamp(14px, 2.6vh, 34px); padding-bottom: clamp(14px, 2.6vh, 34px); }
  #oferta .head-center { margin-bottom: 6px; }
  #oferta .head-center h2 { font-size: 1.55rem; }
  #oferta .head-center .eyebrow { margin-bottom: 3px; font-size: .66rem; }
  #oferta .step { padding-bottom: clamp(4px, .9vh, 12px); }
  #oferta .step__body h3 { font-size: 1rem; margin-bottom: 2px; }
  #oferta .step__body p { font-size: .84rem; line-height: 1.42; }
  #oferta .oferta__dol { margin-top: 8px; }
  #oferta .premium { padding: 10px 14px; gap: 12px; }
  #oferta .premium__badge { margin-bottom: 3px; }
  #oferta .premium__title { font-size: 1rem; margin-bottom: 3px; }
  #oferta .premium__body p { font-size: .82rem; line-height: 1.42; }
  #oferta .note { margin-top: 8px; padding: 10px 18px; }
  #oferta .note p { font-size: .84rem; line-height: 1.42; }
}

/* Ostatni ekran domyka się na tych samych oknach co wyżej. */
@media (min-width: 861px) and (max-height: 950px) {
  .footer { padding: 14px 0; }
  #contact .head-center { margin-bottom: 8px; }
}

/* Najniższe realne okna: dokładamy ostatni ekran (formularz + stopka). */
@media (min-width: 861px) and (max-height: 800px) {
  #contact .head-center .lead { font-size: .88rem; }
  .form { padding: clamp(14px, 2.6vh, 26px); gap: clamp(9px, 1.5vh, 14px); }
  .field textarea { min-height: clamp(70px, 12vh, 130px); }
  .field label { margin-bottom: 5px; }
  .form__rodo { font-size: .68rem; line-height: 1.45; }
  .footer { padding: 12px 0; }
}
@media (min-width: 861px) and (max-height: 730px) {
  #oferta { padding-top: 10px; padding-bottom: 10px; }
  #oferta .step__body h3 { font-size: .95rem; }
  #oferta .premium__title { font-size: .95rem; }
  #oferta .step { padding-bottom: 2px; }
  #oferta .head-center { margin-bottom: 3px; }
  #oferta .premium { padding: 9px 13px; }
  #oferta .note { padding: 9px 16px; }
  #oferta .step__body p { font-size: .8rem; line-height: 1.38; }
  #oferta .premium__body p, #oferta .note p { font-size: .78rem; line-height: 1.38; }
  #contact .head-center h2 { font-size: 1.5rem; }
  .field textarea { min-height: 62px; }
}

/* ===== POPOVER Z PALETAMI ===== */
/* Przełącznik palet to narzędzie robocze do wybrania kolorystyki, nie element
   dla odwiedzających. Schowany, ale cała mechanika działa dalej: wybrana paleta
   nadal się wczytuje. Żeby wrócić do wybierania, zmień display na inline-flex. */
.pal-wrap { position: relative; display: none; }

.pal-pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 70;
  width: min(340px, calc(100vw - 28px));
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 14px; animation: popIn .16s ease;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.pal-head {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted-foreground); margin: 2px 2px 10px;
}

.pal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.pal-item {
  display: flex; flex-direction: column; gap: 6px; padding: 7px 7px 8px;
  border-radius: 12px; border: 1px solid transparent; background: var(--background-2);
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
@media (hover: hover) { .pal-item:hover { border-color: var(--primary); } }
.pal-item:active { transform: scale(.96); }
.pal-item.is-active { border-color: var(--primary); background: var(--muted); }

.pal-chip {
  height: 22px; border-radius: 999px; border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--a) 0 46%, var(--b) 46% 76%, var(--c) 76% 100%);
}
.pal-name {
  font-size: .66rem; font-weight: 700; letter-spacing: .01em;
  color: var(--muted-foreground); text-align: center; white-space: nowrap;
}
.pal-item.is-active .pal-name { color: var(--foreground); }

.pal-custom {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.pal-color {
  width: 38px; height: 38px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
  background: none; cursor: pointer;
}
.pal-color::-webkit-color-swatch-wrapper { padding: 3px; }
.pal-color::-webkit-color-swatch { border: none; border-radius: 999px; }
.pal-color::-moz-color-swatch { border: none; border-radius: 999px; }
.pal-hex {
  flex: 1; min-width: 0; height: 38px; border-radius: 999px;
  background: var(--background-2); border: 1px solid var(--border);
  padding: 0 14px; font-weight: 700; font-size: .85rem;
  font-variant-numeric: tabular-nums; text-transform: lowercase; outline: none;
}
.pal-hex:focus { border-color: var(--primary); background: var(--card); }
.pal-hex.is-bad { border-color: var(--destructive); }
.pal-apply { height: 38px; flex-shrink: 0; }

/* ===== Zgoda na pamięć przeglądarki =====
   Okno pojawia się tylko przy pierwszej wizycie i ma realne skutki:
   „Tylko niezbędne" wyłącza zapisywanie motywu i palety, a nie tylko chowa pasek. */
.zgoda {
  position: fixed; z-index: 90; left: 22px; bottom: 22px;
  width: min(420px, calc(100vw - 44px));
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 20px 22px;
  animation: zgodaWjazd .32s cubic-bezier(.34, 1.28, .5, 1) both;
}
@keyframes zgodaWjazd {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.zgoda h3 { font-size: 1.02rem; margin-bottom: 8px; padding-right: 28px; }

/* Zamiast pytania o zgodę jest tylko wyjaśnienie, więc wystarczy krzyżyk. */
.zgoda__zamknij {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center; color: var(--muted-foreground);
  transition: color .15s ease, background .15s ease, transform .08s ease;
}
@media (hover: hover) { .zgoda__zamknij:hover { color: var(--foreground); background: var(--background-2); } }
.zgoda__zamknij:active { transform: scale(.9); }
.zgoda__zamknij svg { width: 17px; height: 17px; }
.zgoda p + p { margin-top: 10px; }
.zgoda a { color: var(--accent); font-weight: 700; }
.zgoda p { color: var(--muted-foreground); font-size: .84rem; line-height: 1.6; }

/* Polityka prywatności i cookies stoją razem w prawym rogu stopki: link i guzik
   mają wyglądać identycznie, więc oba style siedzą w jednej regule. */
.footer__linki {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 16px;
}
.footer__linki a, .footer__cookies {
  font-size: .78rem; font-weight: 600; color: var(--muted-foreground);
  text-decoration: none; padding: 6px 0; transition: color .15s ease;
}
@media (hover: hover) { .footer__linki a:hover, .footer__cookies:hover { color: var(--accent); } }

/* Krótka informacja o tym, co dzieje się z danymi z formularza. */
.form__rodo { font-size: .72rem; line-height: 1.55; color: var(--muted-foreground); text-align: center; }
.form__rodo a { color: var(--accent); font-weight: 700; }

@media (max-width: 720px) {
  .zgoda { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px 18px; }
}

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

/* ===== Strona 404 =====
   Bez niej Cloudflare Pages na nieznany adres oddaje stronę główną z kodem 200,
   czyli „miękkie 404": wyszukiwarki widzą duplikat, a użytkownik nie wie, że pomylił adres. */
.pusto { min-height: 100vh; display: grid; place-items: center; padding: 40px 22px; background: var(--background); }
.pusto__tresc { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 520px; }
.pusto h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

/* ===== Strona dokumentu (zachowane na wypadek powrotu polityki prywatności) ===== */
.dokument { padding: calc(var(--nav-h) + 40px) 0 60px; background: var(--background); }
.dokument__tresc { max-width: 760px; }
.dokument h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 6px; }
.dokument h2 { font-size: 1.15rem; margin: 30px 0 8px; }
.dokument p, .dokument li { color: var(--muted-foreground); line-height: 1.75; font-size: .93rem; }
.dokument p + p { margin-top: 10px; }
.dokument ul { margin: 8px 0 0 20px; display: flex; flex-direction: column; gap: 7px; }
.dokument strong { color: var(--foreground); }
.dokument code {
  background: var(--background-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; font-size: .86em;
}
.dokument__data { font-size: .8rem; }
.dokument__powrot { margin-top: 34px; }
.dokument__powrot a, .dokument a { color: var(--accent); font-weight: 700; }

/* miejsca do uzupełnienia danymi firmy, widoczne na pierwszy rzut oka */
.dopisz {
  background: color-mix(in srgb, var(--gold) 26%, transparent);
  border-bottom: 2px dashed color-mix(in srgb, var(--gold) 70%, transparent);
  color: var(--foreground); font-weight: 700; padding: 1px 4px; border-radius: 4px;
}

/* ===== RESPONSIVE ===== */

/* 1) lekko ciaśniej, dock i „Bezpłatna wycena" chudną o ~10%, menu zostaje */
@media (max-width: 1160px) {
  :root { --nav-h: 82px; --section-y: 62px; }
  .logo__imie { font-size: 1.74rem; }
  .logo__znak { font-size: 1.9rem; }
  .nav__inner { gap: 12px; }
  .nav__links { padding: 4px; }
  .nav__link { padding: 8px 17px; font-size: .8rem; }
  .nav__cta { --h: 40px; --ico: 29px; --pad: 17px; font-size: .8rem; }
  .nav__right { gap: 8px; }
  .icon-btn { width: 38px; height: 38px; }
}

/* 2) jeszcze ciaśniej, kolejne ~10%, dock nadal widoczny */
@media (max-width: 1000px) {
  :root { --nav-h: 76px; --section-y: 56px; }
  .logo__imie { font-size: 1.55rem; }
  .logo__znak { font-size: 1.7rem; }
  .nav__link { padding: 7px 13px; font-size: .74rem; }
  .nav__cta { --h: 37px; --ico: 27px; --pad: 14px; font-size: .74rem; }
  .icon-btn { width: 35px; height: 35px; }
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about__left { position: static; }
  .shots { grid-template-columns: repeat(2, 1fr); }
}

/* 3) dopiero tu naprawdę brakuje miejsca, menu chowa się pod hamburgerem */
@media (max-width: 860px) {
  :root { --nav-h: 78px; }
  .logo__imie { font-size: 1.62rem; }
  .logo__znak { font-size: 1.78rem; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: grid; }
  /* 44 px to minimalne sensowne pole dotyku, przy mniejszym łatwo chybić */
  .icon-btn { width: 44px; height: 44px; }
  .mobile-menu button { padding: 14px 6px; }
}

@media (max-width: 720px) {
  :root { --section-y: 52px; }
  .proj-grid { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .form { padding: 22px; }
  .form__row { grid-template-columns: 1fr; }

  /* Napis w kółku nad tytułem zawija się na dwa wiersze, a domek między
     imieniem a „Architekturą wnętrz" gubił się w tym na dobre. Skoro i tak
     stoi sam w środku, może być dwa razy większy. */
  .hero__badge svg { width: 24px; height: 24px; }

  /* Liczby zostają obok siebie, nie jedna pod drugą: dwa pełnej szerokości
     kafle zjadały pół ekranu na dwie liczby. */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
  .stat { padding: 12px 14px; }
  .stat__num { font-size: 1.5rem; margin-bottom: 4px; }
  .stat__label { font-size: .58rem; letter-spacing: .08em; }

  /* Filtry w portfolio o połowę mniejsze: przy ośmiu kategoriach zajmowały
     na telefonie więcej miejsca niż zdjęcia, które filtrują. */
  .filters { gap: 6px; margin-top: 14px; }
  .filters .sep { height: 18px; margin: 0 4px; }
  .chip { padding: 5px 10px; font-size: .68rem; gap: 5px; }
  .chip svg { width: 13px; height: 13px; }
  /* guziki dopasowane do treści i wyśrodkowane, przy pełnej szerokości
     napis uciekał w lewo, a strzałka do prawej krawędzi */
  .hero__cta { gap: 12px; }
  .hero__cta .btn { width: auto; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer p, .footer__linki { grid-column: 1; justify-self: center; }
  .pal-pop { right: -46px; }
}