/* ============================================================
   Dawid Worach — landing page
   Paleta: ciepła czerń / kość słoniowa / stonowany mosiądz
   ============================================================ */

/* ---------- 1. Font (self-hosted, RODO-safe) ---------- */

@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/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(../fonts/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:500;font-display:swap;
  src:url(../fonts/poppins-500-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:500;font-display:swap;
  src:url(../fonts/poppins-500-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(../fonts/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(../fonts/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(../fonts/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(../fonts/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}


/* ---------- 2. Tokeny ---------- */

:root{
  --bg:        #0C0C0B;
  --fg:        #F1EDE5;
  --fg-2:      #A8A399;
  --fg-3:      #837D74;
  --accent:    #C7A575;
  --accent-hi: #DCC29B;

  --line:   rgba(241,237,229,.09);
  --line-2: rgba(241,237,229,.17);

  --wrap: 1120px;
  --pad:  clamp(22px, 5vw, 48px);

  --ease: cubic-bezier(.16,1,.3,1);
  --t:    .3s var(--ease);
}


/* ---------- 3. Reset / baza ---------- */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  color-scheme:dark;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* treść maluje się nad warstwą światła (.ambient ma z-index:0) */
main,.footer{ position:relative; z-index:1 }

a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol{ list-style:none }
em{ font-style:normal; color:var(--fg) }

::selection{ background:var(--accent); color:var(--bg) }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-100px; left:var(--pad); z-index:200;
  background:var(--fg); color:var(--bg);
  padding:.7rem 1.2rem; border-radius:999px; font-size:.875rem; font-weight:500;
  transition:top var(--t);
}
.skip-link:focus{ top:16px }

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


/* ---------- 4. Tło: ziarno + wędrujące światło ---------- */

.grain{
  position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Trzy bardzo miękkie plamy światła, każda na własnym długim cyklu.
   Cykle są względem siebie pierwsze (54/73/89 s), więc układ nigdy
   nie wraca do tej samej pozycji — ruch nie daje się złapać na pętli.
   Animujemy wyłącznie transform: całość idzie na kompozytor,
   zero przeliczania układu przy przewijaniu. */

.ambient{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}

.ambient__blob{
  position:absolute; display:block;
  border-radius:50%;
  will-change:transform, opacity;
}

.ambient__blob--1{
  top:-42vh; left:50%; margin-left:-65vw;
  width:130vw; height:115vh;
  background:radial-gradient(closest-side, rgba(199,165,117,.13), transparent 72%);
  animation:drift-1 38s ease-in-out infinite alternate;
}
.ambient__blob--2{
  bottom:-34vh; left:-18vw;
  width:85vw; height:85vh;
  background:radial-gradient(closest-side, rgba(199,165,117,.075), transparent 70%);
  animation:drift-2 47s ease-in-out infinite alternate;
}
.ambient__blob--3{
  top:26vh; right:-24vw;
  width:72vw; height:72vh;
  background:radial-gradient(closest-side, rgba(241,237,229,.035), transparent 70%);
  animation:drift-3 61s ease-in-out infinite alternate;
}

/* Oprócz dryfu każda plama delikatnie oddycha jasnością — przy tak miękkim
   gradiencie zmiana krycia czyta się wyraźniej niż samo przesunięcie,
   a wciąż zostaje w granicach „tła", nie „efektu". Szczyt krycia to 1,
   więc maksymalna jasność jest taka sama jak przy wersji statycznej. */

@keyframes drift-1{
  from{ transform:translate3d(-5%,-3%,0)  scale(1);    opacity:.75 }
  to  { transform:translate3d(5%,3.5%,0)  scale(1.12); opacity:1   }
}
@keyframes drift-2{
  from{ transform:translate3d(-2%,5%,0)   scale(1.08); opacity:.6  }
  to  { transform:translate3d(9%,-5%,0)   scale(.92);  opacity:1   }
}
@keyframes drift-3{
  from{ transform:translate3d(4%,-4%,0)   scale(.95);  opacity:.5  }
  to  { transform:translate3d(-7%,5%,0)   scale(1.1);  opacity:.95 }
}


/* ---------- 5. Typografia współdzielona ---------- */

.eyebrow{
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:clamp(20px,2.6vw,30px);
}

.sep{ color:var(--fg-3); margin-inline:.45em }
.accent{ color:var(--accent) }

.lead{
  max-width:52ch;
  font-size:clamp(1rem,1.15vw + .78rem,1.1875rem);
  line-height:1.72;
  color:var(--fg-2);
  text-wrap:pretty;
}
.lead--tight{ max-width:46ch }


/* ---------- 6. Navbar ---------- */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(12,12,11,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}

.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  height:76px;
}

.wordmark{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8125rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  white-space:nowrap;
  transition:opacity var(--t);
}
.wordmark:hover{ opacity:.72 }
.wordmark__dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--accent); flex:none;
}
.wordmark--static{ display:block }

.nav__links{ display:flex; gap:clamp(20px,3vw,36px); margin-left:auto }
.nav__links a{
  position:relative;
  font-size:.875rem; color:var(--fg-2);
  transition:color var(--t);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--fg) }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }


/* ---------- 6b. Pasek postępu przewijania ---------- */

/* Siedzi na dolnej krawędzi navbara (bottom:-1px zakrywa jego włoskowatą linię,
   żeby nie było dwóch kresek jedna nad drugą). Tor jest widoczny od początku —
   na starcie pusty, na dole strony pełny. */
.progress{
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background:rgba(241,237,229,.06);
}

/* skalowanie zamiast zmiany szerokości — idzie na kompozytor */
.progress__fill{
  display:block;
  height:100%;
  transform:scaleX(var(--p,0));
  transform-origin:left center;
  background:linear-gradient(90deg,
    rgba(199,165,117,.4),
    var(--accent) 55%,
    var(--accent-hi));
}

/* Poświata na czole paska. Osobny element, bo box-shadow na skalowanym
   wypełnieniu zostałby ściśnięty razem z nim i rozjeżdżał się przy małym postępie.
   Krycie ×8 wchodzi płynnie przez pierwsze ~12% przewinięcia — inaczej na samej
   górze strony świeciłaby kropka przy pustym pasku. */
.progress::after{
  content:"";
  position:absolute; top:50%;
  left:calc(var(--p,0) * 100%);
  width:64px; height:16px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(199,165,117,.55), transparent 72%);
  opacity:calc(var(--p,0) * 8);
  pointer-events:none;
}


/* ---------- 7. Przyciski ---------- */

/* Trzy rzeczy decydują tu o rejestrze:

   1. Prostokąt zamiast pigułki. Pigułka czyta się jak przycisk w aplikacji,
      prostokąt z ledwo zaokrągloną krawędzią — jak metka. 3 px, nie 0,
      bo idealnie ostry róg wygląda na niedokończony, a nie na decyzję.
   2. Bardzo drobne wersaliki z rozstrzeleniem 0,2 em. Im mniejszy i szerzej
      rozstawiony napis, tym spokojniej się czyta.
   3. Zamiast podskoku — powolne zalanie tłem od dołu. Marka premium
      nie podskakuje pod kursorem; zmienia się, ale się nie rusza. */

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:1em;
  border-radius:12px;
  padding:1.25rem 2.7rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* Hover = poświata, nie ruch i nie zalewanie. Przycisk zostaje w miejscu
   i po prostu zaczyna świecić mosiądzem — ten sam język, co pasek postępu. */
.btn--primary{ background:var(--fg); color:var(--bg) }
.btn--primary:hover{
  background:#fff;
  box-shadow:0 0 0 1px rgba(199,165,117,.4),
             0 0 28px -4px rgba(199,165,117,.6),
             0 0 60px -12px rgba(199,165,117,.45);
}

.btn--ghost{ color:var(--fg-2); border:1px solid var(--line-2) }
.btn--ghost:hover{
  color:var(--fg);
  border-color:rgba(199,165,117,.55);
  background:rgba(199,165,117,.06);
  box-shadow:0 0 24px -6px rgba(199,165,117,.35);
}

.btn__arrow{ font-size:.9em; transition:transform .5s var(--ease) }
.btn--ghost:hover .btn__arrow{ transform:translateY(3px) }

.btn--sm{ padding:.8rem 1.6rem; font-size:.625rem; letter-spacing:.18em }


/* ---------- 8. Hero ---------- */

.hero{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  min-height:min(100svh,960px);
  padding-top:clamp(132px,17vh,190px);
  overflow:hidden;
}

.hero__inner{
  position:relative;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(240px,25vw,320px);
  gap:clamp(36px,5vw,72px);
  align-items:center;
  padding-bottom:clamp(48px,7vh,86px);
}

.hero__title{
  /* dolna granica 2,25rem, nie 2,6 — przy 2,6 „Ponad 150 flipów."
     łamało się na telefonach ≤390 px, zostawiając samotne „flipów." w linii */
  font-size:clamp(2.25rem,6.2vw,4.5rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.045em;
  text-wrap:balance;
  margin-bottom:clamp(24px,3vw,34px);
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(32px,4vw,44px);
}


/* ---------- 8b. Portret ---------- */

/* Zdjęcie ma nie mieć krawędzi, tylko wtapiać się w stronę. Składają się na to
   trzy warstwy, bo sama maska nie wystarcza — fotografia jest plenerowa,
   z jasnym piaskowym tłem, które bez ściemnienia zostałoby świecącą plamą
   pośrodku czarnej strony:

     1. filter  — ściąga jasność i nasycenie do poziomu strony,
     2. ::after — winieta w kolorze tła, gasi zdjęcie od środka ku brzegom,
     3. mask    — dopiero na końcu rozpuszcza krawędzie do przezroczystości.

   Maska jest eliptyczna, przesunięta do góry (42%), żeby głowa została w pełni
   kryjąca, a rozpływały się boki i dół. */

.portrait{
  position:relative;
  aspect-ratio:3/4;                       /* proporcje oryginału, bez kadrowania */
  border:0;
  border-radius:0;
  background:none;

  /* Dwie maski liniowe przecięte ze sobą zamiast jednej eliptycznej. Elipsa
     kusi organicznym kształtem, ale jej promień trzeba by dobrać tak, żeby zero
     krycia wypadło dokładnie na krawędzi kadru — przy 80% promienia punkt zera
     lądował poza obrazem i brzegi zostawały twarde. Liniowe dochodzą do zera
     na 100% z definicji, niezależnie od proporcji. */
  --fade-x:linear-gradient(to right,  transparent 0%, #000 17%, #000 83%, transparent 100%);
  --fade-y:linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);

  -webkit-mask-image:var(--fade-x), var(--fade-y);
  -webkit-mask-composite:source-in;
          mask-image:var(--fade-x), var(--fade-y);
          mask-composite:intersect;
}

.portrait img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.84) contrast(1.06) saturate(.82);
}

.portrait::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 66% 72% at 50% 42%,
    transparent 22%,
    rgba(12,12,11,.55) 60%,
    rgba(12,12,11,1) 92%);
}


/* ---------- 9. Pasek liczb ---------- */

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,4vw,48px);
  padding:clamp(26px,3vw,34px) 0 clamp(30px,4vw,42px);
  border-top:1px solid var(--line);
}
.stat{ display:flex; flex-direction:column; gap:.35rem }
.stat__num{
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__label{
  font-size:.8125rem;
  color:var(--fg-3);
  letter-spacing:.01em;
}


/* ---------- 10. Sekcje ---------- */

.section{ padding-block:clamp(92px,13vw,160px) }

.section__head{ max-width:44rem }

.section__title{
  font-size:clamp(2rem,4.6vw,3.4rem);
  font-weight:600;
  line-height:1.07;
  letter-spacing:-.038em;
  text-wrap:balance;
  margin-bottom:clamp(20px,2.4vw,28px);
}


/* ---------- 11. Lista „co w środku" ---------- */

.items{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(40px,6vw,96px);
  margin-top:clamp(56px,7vw,92px);
  border-top:1px solid var(--line);
}

.item{
  padding-block:clamp(28px,3.4vw,40px);
  border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease);
}
.item:hover{ border-bottom-color:var(--line-2) }

.item__num{
  display:block;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  margin-bottom:.9rem;
  transition:color var(--t);
}
.item:hover .item__num{ color:var(--accent-hi) }

.item__title{
  font-size:1.0625rem; font-weight:500;
  letter-spacing:-.018em;
  line-height:1.35;
  margin-bottom:.5rem;
}
.item__desc{
  font-size:.9375rem;
  line-height:1.68;
  color:var(--fg-2);
  max-width:38ch;
}


/* ---------- 12. Cytat ---------- */

.quote{
  margin-top:clamp(72px,9vw,120px);
  padding-top:clamp(44px,5.5vw,68px);
  border-top:1px solid var(--line);
  text-align:center;
}
.quote blockquote{
  font-size:clamp(1.2rem,2.4vw,1.75rem);
  font-weight:400;
  line-height:1.42;
  letter-spacing:-.026em;
  text-wrap:balance;
  max-width:44ch;
  margin-inline:auto;
}
.quote figcaption{
  margin-top:clamp(24px,3vw,34px);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}


/* ---------- 13. Notka „co dalej" ---------- */

/* bez górnego oddechu — sekcja wyżej ma już swój padding-bottom */
.section--note{ padding-top:0; padding-bottom:clamp(72px,9vw,120px) }

/* Sekcja poprzedzająca notkę oddycha mniej: jej pełne 160 px plus wewnętrzny
   padding panelu dawały ponad 200 px wyrwy pod cytatem. Notka jest domknięciem
   sekcji „co w środku", więc ma siedzieć bliżej niż osobny rozdział. */
.section:has(+ .section--note){ padding-bottom:clamp(48px,5.5vw,78px) }

.note{
  max-width:720px;
  margin-inline:auto;
  padding:clamp(30px,4vw,52px);
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(241,237,229,.03),rgba(241,237,229,.007));
}

.note .eyebrow{ margin-bottom:clamp(14px,1.8vw,18px) }

.note__title{
  font-size:clamp(1.55rem,3.2vw,2.25rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.032em;
  text-wrap:balance;
  margin-bottom:clamp(18px,2.2vw,24px);
}

.note__text{
  font-size:clamp(.9375rem,.85vw + .73rem,1.0625rem);
  line-height:1.72;
  color:var(--fg-2);
  text-wrap:pretty;
}
.note__text + .note__text{ margin-top:1rem }

.note__sign{
  margin-top:clamp(20px,2.4vw,26px);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}

.note__cta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:16px 24px;
  margin-top:clamp(26px,3.2vw,34px);
  padding-top:clamp(24px,3vw,30px);
  border-top:1px solid var(--line);
}
.note__micro{
  flex:1 1 16rem;
  font-size:.8125rem;
  line-height:1.55;
  color:var(--fg-3);
}


/* ---------- 14. Zapisy ---------- */

/* tło półprzezroczyste, a nie kryjące — inaczej zasłoniłoby warstwę światła */
.section--signup{
  position:relative;
  background:rgba(241,237,229,.022);
  border-top:1px solid var(--line);
  overflow:hidden;
}

/* Dół pasma węższy niż góra. Nad sekcją stoi nagłówek, pod nią kończy ją drobna,
   przygaszona linijka „Bez spamu…" — przy równym paddingu dół wygląda na pusty.
   Do tego dochodzi jeszcze górny padding stopki, więc przerwa się dublowała. */
.section--signup{ padding-bottom:clamp(56px,6.8vw,88px) }

.signup{ position:relative; max-width:700px; text-align:center }
.signup .form{ max-width:640px; margin-inline:auto }
.signup .lead{ margin-inline:auto }
.signup .section__title{ margin-bottom:clamp(18px,2.2vw,26px) }

.form{ margin-top:clamp(34px,4.4vw,46px) }

/* Imię i e-mail w jednym rzędzie, przycisk pełną szerokością pod spodem.
   Wciśnięcie trzech elementów w jedną pigułkę robi z formularza pasek
   wyszukiwania — dwa osobne pola czytają się jak formularz, o który ktoś zadbał. */
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.field{
  display:flex;
  padding:.35rem;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:rgba(241,237,229,.02);
  transition:border-color var(--t), background var(--t);
}
.field:focus-within{ border-color:var(--accent); background:rgba(199,165,117,.05) }

.field__input{
  flex:1 1 auto; min-width:0;
  background:none; border:0; outline:none;
  color:var(--fg);
  font:inherit; font-size:.9375rem;
  padding:.85rem 1.2rem;
  text-align:center;
}
.field__input::placeholder{
  color:var(--fg-3);
  font-size:.8125rem;
  letter-spacing:.06em;
}

.form__submit{ width:100%; margin-top:10px }

.consent{
  display:flex; align-items:flex-start; gap:.7rem;
  margin-top:1.4rem;
  text-align:left;
  font-size:.8125rem; line-height:1.6;
  color:var(--fg-3);
  cursor:pointer;
}
.consent input{
  flex:none; width:16px; height:16px; margin-top:.18rem;
  accent-color:var(--accent); cursor:pointer;
}
.consent a{ color:var(--fg-2); text-decoration:underline; text-underline-offset:2px }
.consent a:hover{ color:var(--fg) }

.form__msg{
  margin-top:1rem;
  font-size:.8125rem;
  min-height:1.2em;
  color:#E0876B;
}
.form__msg:empty{ margin-top:0 }

/* Stan po wysłaniu: formularz znika, wchodzi panel z rysowanym znacznikiem.
   Okrąg ma promień 24, czyli obwód 2πr ≈ 150,8 — stąd dasharray 151.
   Znacznik to dwa odcinki o łącznej długości ok. 32,6, więc dasharray 34.
   Opóźnienia układają się w sekwencję: okrąg → znacznik → tekst. */

/* Przejście z wpisywania w potwierdzenie idzie dwuetapowo:
   najpierw etap wpisywania gaśnie i rozmywa się w miejscu (opacity + transform,
   wysokość jeszcze się nie rusza), dopiero potem znika z układu, a formularz
   dojeżdża do nowej wysokości. Wysokość animuje JS, bo z „auto" nie da się
   przejść płynnie — musi być konkretna wartość w px. */

/* Przejścia wysokości NIE ma tutaj celowo. Formularz nosi klasę .reveal,
   a reguła `.js .reveal` ustawia własne `transition` i ma wyższą specyficzność
   (0,2,0 vs 0,1,0) — nadpisałaby je w całości. Wysokość animuje więc JS
   stylem inline, który wygrywa z każdym selektorem. */

/* przycinamy tylko na czas animacji — na stałe obcięłoby poświatę przycisku */
.form.is-animating{ overflow:hidden }

.form__stage{
  transition:opacity .34s var(--ease),
             transform .34s var(--ease),
             filter .34s var(--ease);
}
.form.is-leaving .form__stage{
  opacity:0;
  transform:translateY(-10px) scale(.985);
  filter:blur(3px);
  pointer-events:none;
}
.form.is-done .form__stage{ display:none }

.done{
  display:flex; flex-direction:column; align-items:center;
  gap:1.25rem;
  padding:2.2rem 1.6rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(199,165,117,.035);
  animation:done-panel .6s var(--ease) both;
}
.done[hidden]{ display:none }

.done__mark{ width:54px; height:54px; overflow:visible }

.done__circle{
  fill:none;
  stroke:rgba(199,165,117,.4);
  stroke-width:1.5;
  stroke-dasharray:151;
  stroke-dashoffset:151;
  transform:rotate(-90deg);          /* start rysowania od góry */
  transform-origin:center;
  animation:draw .8s var(--ease) .15s forwards;
}
.done__check{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34;
  stroke-dashoffset:34;
  animation:draw .45s var(--ease) .6s forwards;
}

.done__text{
  font-size:.9375rem;
  line-height:1.6;
  color:var(--fg);
  text-wrap:pretty;
  animation:done-text .7s var(--ease) .85s both;
}

@keyframes draw      { to{ stroke-dashoffset:0 } }
@keyframes done-panel{ from{ opacity:0; transform:scale(.97) } to{ opacity:1; transform:none } }
@keyframes done-text { from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.signup__note{
  margin-top:1.6rem;
  font-size:.75rem;
  color:var(--fg-3);
  letter-spacing:.01em;
}


/* ---------- 15. Stopka ---------- */

.footer{
  border-top:1px solid var(--line);
  padding-block:clamp(34px,3.6vw,46px) clamp(14px,1.6vw,20px);
}
.footer__inner{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:20px 32px;
}
/* wersaliki jak w nadlinii hero — ta sama etykieta, ta sama forma */
.footer__tag{
  margin-top:.5rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3);
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden }

.socials{ display:flex; gap:12px; margin-top:1.25rem }
.socials a{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--fg-2);
  transition:color var(--t), border-color var(--t), background var(--t), transform var(--t);
}
.socials a:hover{
  color:var(--accent);
  border-color:var(--line-2);
  background:rgba(241,237,229,.03);
  transform:translateY(-2px);
}
.socials .icon{ width:16px; height:16px; fill:currentColor }

.footer__links{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.6vw,34px) }
.footer__links a{
  font-size:.875rem; color:var(--fg-2);
  transition:color var(--t);
}
.footer__links a:hover{ color:var(--accent) }

.footer__bottom{
  margin-top:clamp(22px,2.4vw,30px);
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.75rem;
  color:var(--fg-3);
}


/* ---------- 15b. Podstrony prawne ---------- */

.legal{ padding-block:clamp(116px,15vh,168px) clamp(72px,9vw,112px) }

.legal__head{
  max-width:68ch;
  padding-bottom:clamp(28px,3.4vw,40px);
  margin-bottom:clamp(36px,4.5vw,56px);
  border-bottom:1px solid var(--line);
}
.legal__title{
  font-size:clamp(1.9rem,4.2vw,3rem);
  font-weight:600; line-height:1.1; letter-spacing:-.035em;
  text-wrap:balance;
  margin-bottom:clamp(14px,1.8vw,18px);
}
.legal__meta{ font-size:.8125rem; color:var(--fg-3) }

.prose{ max-width:68ch }
.prose h2{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.35;
  margin:clamp(38px,4.4vw,54px) 0 .85rem;
}
.prose h2:first-child{ margin-top:0 }
.prose h3{
  font-size:.9375rem; font-weight:500;
  margin:1.6rem 0 .5rem;
}
.prose p,.prose li{
  font-size:.9375rem; line-height:1.78;
  color:var(--fg-2); text-wrap:pretty;
}
.prose p + p{ margin-top:.9rem }
.prose ul,.prose ol{ margin:.85rem 0 0; padding-left:1.35rem }
.prose ul{ list-style:disc }
.prose ol{ list-style:decimal }
.prose li{ margin-bottom:.5rem; padding-left:.2rem }
.prose li::marker{ color:var(--fg-3) }
.prose strong{ color:var(--fg); font-weight:500 }
.prose a{
  color:var(--fg);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-2);
  transition:text-decoration-color var(--t), color var(--t);
}
.prose a:hover{ color:var(--accent); text-decoration-color:currentColor }

/* Luka do uzupełnienia — celowo krzyczy, żeby nie dało się jej wypuścić
   na produkcję przez nieuwagę. Po wpisaniu danych usuń <span class="ph">. */
.ph{
  color:var(--accent);
  font-weight:500;
  background:rgba(199,165,117,.09);
  border-bottom:1px dashed rgba(199,165,117,.55);
  padding:.05em .3em;
  border-radius:3px;
}

.legal__back{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:clamp(44px,5.5vw,68px);
  padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--line);
  font-size:.875rem; color:var(--fg-2);
  transition:color var(--t);
}
.legal__back:hover{ color:var(--accent) }


/* ---------- 16. Animacja wejścia ---------- */

.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none }


/* ---------- 17. Responsywność ---------- */

@media (max-width:900px){
  .items{ column-gap:clamp(28px,4vw,48px) }

  /* portret schodzi pod treść; hero przestaje trzymać pełną wysokość ekranu,
     bo przy dwóch blokach jeden pod drugim i tak by ją przekroczyło */
  .hero{ min-height:auto }
  .hero__inner{ grid-template-columns:1fr; gap:clamp(34px,5vw,46px) }
  .portrait{ width:min(300px,68vw); margin-inline:auto }
}

@media (max-width:760px){
  .nav__links{ display:none }
  .items{ grid-template-columns:1fr }
  .item__desc{ max-width:52ch }
}

/* trzyczłonowa etykieta w rozstrzelonych wersalikach nie mieści się
   w jednej linii na wąskich telefonach — ścieśniamy ją zamiast łamać */
@media (max-width:430px){
  .eyebrow,.footer__tag{ letter-spacing:.11em }
  .sep{ margin-inline:.3em }
}

@media (max-width:600px){
  html{ scroll-padding-top:86px }
  .nav__inner{ height:68px }
  .hero{ min-height:auto; padding-top:120px }
  .hero__inner{ padding-bottom:56px }

  .stats{ grid-template-columns:1fr; gap:0 }
  .stat{
    flex-direction:row; align-items:baseline; gap:.85rem;
    padding-block:16px; border-bottom:1px solid var(--line);
  }
  .stat:last-child{ border-bottom:0 }
  .stat__num{ min-width:4.2rem }

  .form__row{ grid-template-columns:1fr }
  .field__input{ padding:.9rem 1rem }

  .footer__inner{ flex-direction:column; align-items:flex-start; gap:18px }
}


/* ---------- 18. Ograniczony ruch ---------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;  /* bez tego animacje „infinite" migotałyby */
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none }
}