/* 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 {
  --card: #ffffff;
  --muted: #eef0f2;
  --border: #e2e5e9;
  --radius: 16px;

  --primary: #ff7aa8;
  --primary-strong: #ff4f8b;
  --secondary: #5cc6f0;

  --background: #f4f6f8;
  --background-2: #eaeef2;
  --foreground: #2b2f33;
  --muted-foreground: #6e7478;
  --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: #ff4f8b;
  /* tekst na kolorze wiodącym, dobierany do jasności palety */
  --on-primary: #ffffff;

  /* gradienty ikon; podmieniane przez wybraną paletę */
  --g1: linear-gradient(135deg,#ff9a3c,#ff6f61);
  --g2: linear-gradient(135deg,#48c7b1,#2bb0a0);
  --g3: linear-gradient(135deg,#7b6cf6,#9b59b6);
  --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: #242a30;
  --muted: #2f363d;
  --border: #38404a;

  --primary: #ff7aa8;
  --primary-strong: #ff5e98;
  --secondary: #36c46f;

  --background: #15181d;
  --background-2: #1b1f25;
  --foreground: #e7e9ec;
  --muted-foreground: #9aa1a8;
  --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: #ff7aa8;
  --on-primary: #ffffff;
}

*, *::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); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-ghost { background: var(--card); color: var(--foreground); border-color: var(--border); }
.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:hover .hbtn__fill,
.hbtn:focus-visible .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:hover .hbtn__ghost,
.hbtn:focus-visible .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:hover .hbtn__ico .a1,
.hbtn:focus-visible .hbtn__ico .a1 { transform: none; }
.hbtn:hover .hbtn__ico .a2,
.hbtn:focus-visible .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:hover .hbtn__ico--samolot .a1,
.hbtn:focus-visible .hbtn__ico--samolot .a1 { transform: none; opacity: 1; }
.hbtn__ico--samolot .a2 { transform: none; opacity: 1; }
.hbtn:hover .hbtn__ico--samolot .a2,
.hbtn:focus-visible .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;
}
.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); }
.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;
}
.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; }
.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; }
.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; }
.svc__ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; flex-shrink: 0; box-shadow: var(--shadow);
}
.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; }

/* ===== 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: dwa kafle na raz, wysokość dobrana tak, żeby razem ze strzałkami
     zmieściły się w kadrze bez przycinania trzeciego */
  --kafel: clamp(170px, 26vh, 230px);
  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 dwa kafle w oknie, więc trzeci nie jest przycięty */
  height: calc(2 * var(--kafel) + 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;
}
.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:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.proj img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.proj:hover img { transform: scale(1.05); }
.proj__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px;
  background: linear-gradient(to top, rgba(12,16,22,.88), rgba(12,16,22,.45) 55%, transparent);
  color: #fff;
}
.proj__cap h3 { font-size: 1.7rem; color: #fff; }
.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;
}

.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.filters .sep { width: 1px; height: 24px; background: var(--border); }
.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;
}
.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:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.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;
}
.shot:hover .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) {
  .proj-pas {
    --odstep: 20px;
    /* komputer: kafle na całą wysokość, jaka zostaje w sekcji */
    --kafel: clamp(240px, calc(100vh - var(--nav-h) - 250px), 520px);
    grid-template-columns: var(--strzalka) 1fr var(--strzalka);
    column-gap: 14px; row-gap: 0;
  }
  .proj-grid {
    grid-row: 1; grid-column: 2;
    flex-direction: row; height: auto;
    overflow: hidden;
    scroll-snap-type: x mandatory;
  }
  /* trzy całe kafle w oknie pasa: żaden nie jest przecięty przy przewijaniu */
  .proj { flex: 0 0 calc((100% - 2 * var(--odstep)) / 3); }

  .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;
}
.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; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: 100%; max-height: 86vh; 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;
}
.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 {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  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 ===== */
.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;
}

/* 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;
}
.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; }
.zgoda p { color: var(--muted-foreground); font-size: .84rem; line-height: 1.6; }
.zgoda__akcje { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.zgoda__akcje .btn { flex: 0 0 auto; }

.footer__cookies {
  grid-column: 3; justify-self: end;
  font-size: .78rem; font-weight: 600; color: var(--muted-foreground);
  padding: 6px 0; transition: color .15s ease;
}
.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; }
  .zgoda__akcje { justify-content: stretch; }
  .zgoda__akcje .btn { flex: 1 1 0; }
}

@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; }
  .stats { grid-template-columns: 1fr; }
  /* 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__cookies { grid-column: 1; justify-self: center; }
  .pal-pop { right: -46px; }
}