/* Pasek dolny — krok 1.
   Tokeny kanoniczne Unbranded, bez przybliżeń. */

@font-face { font-family: Anton; src: url(../assets/fonts/anton-400-latin-ext.woff2) format("woff2"); font-display: swap; unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Anton; src: url(../assets/fonts/anton-400-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Archivo; src: url(../assets/fonts/archivo-600-latin-ext.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Archivo; src: url(../assets/fonts/archivo-600-latin.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Archivo; src: url(../assets/fonts/archivo-400-latin-ext.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Archivo; src: url(../assets/fonts/archivo-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --papier: #F3F0EA;
  --tusz: #111E26;
  --limonka: #DAFF01;
  --pomarancz: #F74304;
  --papier-karta: #FBF9F5;
  --tekst-2: #4A5661;
  --ease: cubic-bezier(.22,.61,.36,1);
  --czas: 420ms;

  /* Siatka i odstępy — skala 4 px. Wszystkie odstępy w serwisie biorą się
     stąd, żeby nie było wartości „na oko". */
  --s1:  4px;  --s2:  8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px; --s9: 96px;

  /* Wysokość elementów sterujących. Jedna liczba dla kółek, pigułek,
     pola e-mail i przycisku pobrania — wszystko siada w jednej linii. */
  --kontrolka: 52px;
  --promien: 999px;
  --kolumna: 640px;      /* szerokość kolumny treści */
}
/* Systemowe „mniej ruchu" świadomie pomijamy w całym serwisie — decyzja
   właściciela z 2026-09-05. Nie przywracać bez rozmowy. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100svh; background: var(--papier); color: var(--tusz);
  font: 400 1rem/1.5 Archivo, system-ui, sans-serif; overflow-x: hidden;
}
:focus-visible { outline: 3px solid var(--tusz); outline-offset: 3px; }

/* ------------------------------------------------------ własny kursor
   Rodzimą strzałkę chowamy dopiero po klasie `.ma-kursor`, którą wstawia
   skrypt. Bez skryptu zostaje zwykły kursor, a nie brak kursora. */
/* `difference` zamiast stałego koloru: kursor odwraca to, co pod nim leży,
   więc jest czytelny i na papierze, i na ciemnym pasku — bez przełączania klas. */
.kursor {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  opacity: 0; transition: opacity 180ms var(--ease);
  mix-blend-mode: difference;
}
.kursor[data-widoczny="tak"] { opacity: 1; }

.kursor__punkt, .kursor__pierscien {
  position: absolute; top: 0; left: 0; border-radius: 50%; will-change: translate;
}
.kursor__punkt { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff; }

.kursor__pierscien {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  transition: width 220ms var(--ease), height 220ms var(--ease),
              margin 220ms var(--ease), border-width 220ms var(--ease),
              border-color 220ms var(--ease);
}
/* nad klikalnym: pierścień rośnie i gęstnieje */
.kursor[data-aktywny="tak"] .kursor__pierscien {
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-width: 2.5px; border-color: #fff;
}
.kursor[data-wcisniety="tak"] .kursor__pierscien {
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
}
.ma-kursor, .ma-kursor * { cursor: none !important; }

/* ---------------------------------------------------- tło z paralaksą */
.tlo { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.warstwa {
  position: absolute; inset: -8%;
  will-change: transform;
  transform: translate3d(
    calc(var(--px, 0) * var(--glebia, 1) * 1px),
    calc(var(--py, 0) * var(--glebia, 1) * 1px), 0);
}
/* Tło ma trzymać papier, nie malować tęczy. Jeden miękki poblask limonki
   za treścią i jeden cień tuszem w rogu — reszta to czysty papier z ziarnem.
   Pomarańcz zszedł z tła: na papierze robił różową plamę. */
.warstwa--papier   { inset: 0; background: var(--papier); }
.warstwa--limonka  { --glebia: .9;
  background: radial-gradient(58% 42% at 50% 26%, rgba(218,255,1,.16), transparent 72%); }
.warstwa--pomarancz{ --glebia: .55;
  background: radial-gradient(56% 46% at 84% 92%, rgba(17,30,38,.07), transparent 72%); }
.warstwa--ziarno   { --glebia: .25; opacity: .38;
  background-image: radial-gradient(circle at 1px 1px, rgba(17,30,38,.16) 1px, transparent 0);
  background-size: 4px 4px; }


/* --------------------------------------------------------- podpowiedź */
.podpowiedz {
  position: fixed; z-index: 3; left: 50%; bottom: 100px; translate: -50% 0; margin: 0;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(17, 30, 38, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: rgba(243, 240, 234, .82);
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 999px;
  transition: opacity 220ms var(--ease);
}
/* Tor kropki — mały kształt kółka myszy. Kropka startuje u góry, zjeżdża
   w dół i gaśnie; kierunek jest teraz czytelny sam z siebie. */
.tor {
  position: relative; flex: none;
  width: 14px; height: 22px; border-radius: 999px;
  border: 1.5px solid rgba(243, 240, 234, .28);
}
.kropka {
  position: absolute; left: 50%; top: 4px; margin-left: -2px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--limonka);
  animation: jedzie 1.9s var(--ease) infinite;
}
@keyframes jedzie {
  0%        { transform: translateY(0);    opacity: 0; }
  18%       { opacity: 1; }
  70%, 100% { transform: translateY(10px); opacity: 0; }
}

/* -------------------------------------------------------------- pasek
   Ciemne szkło zamiast kremu, hairline zamiast konturu. Twarde czarne
   obrysy i kremowe wypełnienia czytały się jak naklejka, nie jak interfejs. */
.pasek {
  position: fixed; z-index: 4; left: 50%; bottom: 24px; translate: -50% 0;
  display: flex; align-items: center; gap: 6px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border-radius: 999px;
  background: rgba(17, 30, 38, .92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 20px 50px rgba(17, 30, 38, .34), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.kolo {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: rgba(243, 240, 234, .92);
  border: 1px solid rgba(255, 255, 255, .14);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.kolo:hover, .kolo:focus-visible { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.kolo[aria-pressed="true"], .kolo[aria-expanded="true"] {
  background: var(--limonka); color: var(--tusz); border-color: transparent;
}

/* środek zmienia szerokość między stanami — to jest cały chwyt */
.srodek {
  position: relative; height: 50px; border: 0; border-radius: 999px;
  background: var(--limonka);
  width: 262px; overflow: hidden;
  transition: width var(--czas) var(--ease), background var(--czas) var(--ease);
}
.pasek[data-stan="rozwiniety"] .srodek {
  width: min(520px, calc(100vw - 152px));
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.glowny {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--tusz); font: 600 .8125rem Archivo, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  transition: opacity 180ms var(--ease), color 340ms var(--ease);
  /* Tusz na tuszu zlałby przycisk z paskiem, więc przy najechaniu wchodzi
     limonkowa obwódka i trzyma jego kształt. */
  --wypelnienie-tlo: var(--tusz);
  --wypelnienie-tekst: var(--limonka);
}
.glowny:hover, .glowny:focus-visible { box-shadow: inset 0 0 0 1.5px var(--limonka); }
.pasek[data-stan="rozwiniety"] .glowny { opacity: 0; pointer-events: none; }

.formularz {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 6px;
  padding: 5px 5px 5px 20px; opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease) 120ms;
}
.pasek[data-stan="rozwiniety"] .formularz { opacity: 1; pointer-events: auto; }
.formularz input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none;
  font: 400 .9375rem Archivo, sans-serif; color: var(--papier);
}
.formularz input::placeholder { color: rgba(243, 240, 234, .45); }
/* Pułapka na boty. Wyprowadzona poza kadr, nie `display:none` — część botów
   pomija pola ukryte tą metodą, a to zniweczyłoby cały pomysł. */
.pulapka {
  position: absolute !important; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.formularz input:focus { outline: none; }
.wyslij {
  flex: none; height: 100%; padding: 0 1.15rem; border: 0; border-radius: 999px;
  background: var(--limonka); color: var(--tusz);
  font: 600 .8125rem Archivo, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: transform 160ms var(--ease), filter 160ms var(--ease);
}
.wyslij:hover, .wyslij:focus-visible { transform: translateY(-1px); filter: brightness(1.06); }

.stan {
  position: fixed; z-index: 4; left: 50%; bottom: 86px; translate: -50% 0; margin: 0;
  font-size: .8125rem; color: rgba(243, 240, 234, .92);
  background: rgba(17, 30, 38, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px; padding: .4rem 1rem;
  opacity: 0; transition: opacity 200ms var(--ease);
}
.stan[data-widoczny="tak"] { opacity: 1; }

/* ------------------------------------------- wypełnienie przy najechaniu
   Wspólny mechanizm dla przycisków głównych: koło rozlewa się z punktu,
   w którym kursor wszedł na przycisk (`--hx/--hy` ustawia skrypt), a napis
   przechodzi na kolor kontrastowy. Kolory ustawia każde miejsce u siebie,
   bo tło pod przyciskiem raz jest papierem, raz ciemnym paskiem. */
.wypelnienie {
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 340ms var(--ease), box-shadow 340ms var(--ease);
}
.wypelnienie::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--hx, 50%); top: var(--hy, 50%);
  width: 0; height: 0; border-radius: 50%;
  background: var(--wypelnienie-tlo, var(--tusz));
  translate: -50% -50%;
  /* Własna krzywa, nie --ease: to drugie startuje bardzo szybko i całe
     wypełnienie robiło się w pierwszej ćwiartce czasu. Tu ruch narasta. */
  transition: width 900ms cubic-bezier(.62, .05, .30, 1),
              height 900ms cubic-bezier(.62, .05, .30, 1);
}
.wypelnienie:hover, .wypelnienie:focus-visible { color: var(--wypelnienie-tekst, var(--limonka)); }
.wypelnienie:hover::before, .wypelnienie:focus-visible::before {
  /* średnica ≥ dwie długości przycisku — koło musi go przykryć niezależnie
     od tego, przy której krawędzi wszedł kursor */
  width: 900px; height: 900px;
}

/* Strzałka podmienia się na kolejną wjeżdżającą z góry — ruch mówi „pobieranie". */
.strzalki { position: relative; display: block; overflow: hidden;
            width: 1em; height: 1.2em; line-height: 1.2; }
.strzalki span { display: block; text-align: center; transition: translate 460ms var(--ease); }
.strzalki span:last-child { position: absolute; inset: 0; translate: 0 -1.2em; }
.wypelnienie:hover .strzalki span,
.wypelnienie:focus-visible .strzalki span { translate: 0 1.2em; }
.wypelnienie:hover .strzalki span:last-child,
.wypelnienie:focus-visible .strzalki span:last-child { translate: 0 0; }

/* -------------------------------------------------------- obietnica
   Widoczna dopiero wtedy, gdy pole e-mail jest otwarte. Wcześniej byłaby
   odpowiedzią na pytanie, którego nikt jeszcze nie zadał. */
.obietnica {
  position: fixed; z-index: 4; left: 50%; bottom: 92px; translate: -50% 0;
  width: min(420px, calc(100vw - 24px));
  background: rgba(17, 30, 38, .92);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(17, 30, 38, .34), inset 0 1px 0 rgba(255, 255, 255, .10);
  color: rgba(243, 240, 234, .78);
  padding: 16px 18px; font-size: .8125rem; line-height: 1.55;
  opacity: 0; translate: -50% 10px; pointer-events: none;
  transition: opacity var(--czas) var(--ease), translate var(--czas) var(--ease);
}
.obietnica p { margin: 0; }
.obietnica b { color: rgba(243, 240, 234, .96); font-weight: 600; }
.obietnica ul { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.obietnica li { position: relative; padding-left: 16px; }
.obietnica li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--limonka);
}
.obietnica__podpis {
  margin-top: .7rem !important; padding-top: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: rgba(243, 240, 234, .58);
}
body:has(.pasek[data-stan="rozwiniety"]) .obietnica { opacity: 1; translate: -50% 0; pointer-events: auto; }
.obietnica .zgoda { display: flex; gap: .55rem; align-items: flex-start; margin-top: .6rem; cursor: pointer; }
.obietnica .zgoda input { accent-color: var(--limonka); width: 16px; height: 16px; margin: .2em 0 0; flex: none; }
.obietnica a { color: var(--limonka); }
/* podpowiedź „przewijaj" ustępuje miejsca, komunikat stanu idzie ponad obietnicę */
body:has(.pasek[data-stan="rozwiniety"]) .podpowiedz { opacity: 0; }
body:has(.pasek[data-stan="rozwiniety"]) .stan { bottom: 268px; }

/* ------------------------------------------------------------- menu */
.menu {
  position: fixed; z-index: 4; left: 50%; bottom: 92px; translate: -50% 0;
  width: min(420px, calc(100vw - 24px));
  display: grid; gap: 2px; padding: 14px 10px 18px;
  border-radius: 26px;
  background: rgba(17, 30, 38, .92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 20px 50px rgba(17, 30, 38, .34), inset 0 1px 0 rgba(255, 255, 255, .10);
  transform-origin: 50% 100%;
  transition: opacity 240ms var(--ease), transform 300ms var(--ease);
}
.menu[hidden] { display: none; }
.menu[data-stan="zamkniete"] { opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; }
.menu[data-stan="otwarte"]   { opacity: 1; transform: none; }

.menu a {
  display: block; text-align: center; text-decoration: none;
  color: rgba(243, 240, 234, .92);
  font-family: Anton, sans-serif; text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.34;
  padding: .45rem .75rem .6rem; border-radius: 16px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.menu a:hover, .menu a:focus-visible { background: var(--limonka); color: var(--tusz); }

/* --------------------------------------------- ikona menu ⇄ zamknij
   Kreski obracają się wokół własnego środka i schodzą do siebie. Cały
   znak robi przy tym pół obrotu, więc ruch czyta się jako jeden gest. */
.ikona-morf { transition: rotate var(--czas) var(--ease); }
.kreska {
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--czas) var(--ease);
}
.kolo--menu[aria-expanded="true"] .ikona-morf { rotate: 180deg; }
.kolo--menu[aria-expanded="true"] .kreska--gora { transform: translateY(3px)  rotate(45deg); }
.kolo--menu[aria-expanded="true"] .kreska--dol  { transform: translateY(-3px) rotate(-45deg); }
/* wysokość tylko po to, żeby na telefonie było co przewijać przy próbie */
.wysokosc { height: 220svh; }

@media (max-width: 560px) {
  .obietnica { width: calc(100vw - 20px); bottom: 84px; padding: 14px 16px; font-size: .78125rem; }
  body:has(.pasek[data-stan="rozwiniety"]) .stan { bottom: 252px; }
  .menu { width: calc(100vw - 20px); bottom: 96px; padding: 14px 10px 18px; }
  .menu a { font-size: 1.5rem; }
  .pasek { bottom: 16px; padding: 7px; gap: 7px; }
  .kolo { width: 48px; height: 48px; }
  .srodek { height: 48px; }
  .podpowiedz { bottom: 92px; }
}