/* ============================================================
   DEVISION STUDIO :: Monochrome Modern Startup
   ============================================================ */

:root {
  --bg: #FBFBF9;
  --bg-soft: #FEFEFC;
  /* --paper :: lekko zdesaturowany off-white zamiast pure white #FFFFFF.
     Pure white przy bg #FBFBF9 (off-white) dawał za mocny kontrast — kafelki
     i karty wyglądały "zbyt białe / harsh". #FDFDFB jest 2 jednostki jaśniejszy
     od bg i 2 ciemniejszy od pure white — dalej wyraźnie odróżnia się od tła,
     ale jest miększy dla oka. */
  --paper: #FDFDFB;
  --ink: #0F0F0F;
  --ink-soft: #2B2B2B;
  --ink-mute: #6B6B6B;
  --ink-mute-2: #8E8E8E;
  --line: rgba(15, 15, 15, 0.12);
  --line-soft: rgba(15, 15, 15, 0.06);
  --line-strong: rgba(15, 15, 15, 0.22);
  --green: #2EAE5C;

  --shadow-card: 0 24px 48px -28px rgba(15, 15, 15, 0.18), 0 4px 12px -4px rgba(15, 15, 15, 0.08);
  --shadow-soft: 0 12px 28px -16px rgba(15, 15, 15, 0.12);

  --font: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --container: 1280px;

  /* Photo + banner unified font sizes (matched to old strona scale,
     blended with new design tokens for consistency). */
  --fs-photo-title: clamp(32px, 3.4vw, 44px);
  --fs-photo-meta:  clamp(13px, 1vw, 14px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Always-visible scrollbar + reserved gutter :: every page in the site
     renders with the same usable width, so navigating between subpages
     never reflows because the scrollbar suddenly appears or disappears. */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
body.nav-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* em is just bold text, no italic, no decorative font. */
em { font-style: normal; font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background .25s ease, transform .25s ease;
}
.btn__arrow svg { width: 14px; height: 14px; }
.btn:hover .btn__arrow { transform: translateX(2px); }

.btn--dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(15, 15, 15, 0.4);
}
.btn--dark:hover { background: #1f1f1f; }

.btn--invert {
  background: #fff;
  color: var(--ink);
}
.btn--invert .btn__arrow { background: rgba(15,15,15,0.1); color: var(--ink); }
.btn--invert:hover { background: #f0f0f0; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.btn--outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  padding: 18px 0;
  transition: padding .25s ease, background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.nav--scrolled {
  padding: 10px 0;
  background: rgba(251, 251, 249, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--line-soft);
}
/* USUNIĘTE :: body.nav-open .nav { background: transparent; backdrop-filter: none; box-shadow: none; }
   Powód: ta reguła kasowała frosted background paska nawigacji w momencie
   otwarcia menu. Jednocześnie overlay menu rozjeżdżał swój własny blur,
   więc widz widział krzyżujące się dwie warstwy blura w tym samym miejscu
   (skok z rozmytego na ostre i z powrotem). Bez tej reguły pasek zostaje
   w stanie sprzed kliknięcia (frosted jeśli był scrollowany, transparent
   jeśli na samej górze), a overlay (z:100) wjeżdża cicho pod pasek (z:110). */
.nav__inner { display: flex; align-items: center; gap: 24px; }
.nav__logo {
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 14px;
  color: var(--ink);
  position: relative;
  z-index: 110;
  transition: color .25s ease;
}
/* Overlay menu ma teraz JASNE tło (rgba ~251,251,249) — biały logo byłby
   na nim niewidoczny. Trzymamy logo ciemne, spójnie z hamburgerem. */
body.nav-open .nav__logo { color: var(--ink); }

.nav__center {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: auto;
  /* Pasek pasujący do --paper (#FDFDFB) zamiast pure white. */
  background: rgba(253, 253, 251, 0.7);
  padding: 5px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  position: relative;
  /* anchor dla magnetic pill */
}
/* Magnetic pill :: czarne tło pod aktywnym/hover linkiem.
   JS ustawia --pill-x / --pill-w względem .nav__center. Smooth transition
   na left + width daje efekt ślizgania się tła między linkami.

   UWAGA: transition na left/width definiujemy DOPIERO w .is-pill-ready —
   inaczej pierwsze ustawienie --pill-x/--pill-w (z 0px na pozycję aktywnego
   linku) animowałoby pill od lewej krawędzi do bieżącego linku przy każdym
   wejściu na podstronę. JS dodaje .is-pill-ready dopiero PO ustawieniu
   pozycji (requestAnimationFrame), więc pierwszy snap jest natychmiastowy. */
.nav__center::before {
  content: '';
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: var(--pill-x, 0px);
  width: var(--pill-w, 0px);
  background: var(--ink);
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.nav__center.is-pill-ready::before {
  opacity: 1;
  transition:
    left .45s cubic-bezier(0.65, 0, 0.35, 1),
    width .45s cubic-bezier(0.65, 0, 0.35, 1),
    opacity .25s ease;
}
.nav__center-link {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  transition: color .35s ease;
}
/* Białe litery na linku pod którym aktualnie jest pill :: JS dodaje
   class .is-pill-target. */
.nav__center-link.is-pill-target {
  color: #fff;
}
.nav__cta { font-size: 14px; padding: 12px 18px 12px 22px; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 110;
  transition: background .25s ease;
}
/* Toggle w stanie open :: na light overlay solid białe tło nie ma kontrastu,
   zamieniam na transparent z subtelną ramką. */
body.nav-open .nav__toggle {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(15, 15, 15, 0.12);
}
/* Target only the inner bar spans :: the outer `.nav__toggle-bars` span is
   ALSO a descendant `span` of `.nav__toggle`, so the previous selector
   `body.nav-open .nav__toggle span` was painting that 18x14 container
   black, hiding the rotated bars behind a solid rectangle. Restricting
   the rule to spans nested inside `.nav__toggle-bars` excludes the
   container itself and lets the X show through. */
body.nav-open .nav__toggle-bars span { background: var(--ink); }

/* Bars stack centered :: open state morphs them into an X using transform.
   We anchor every bar at top:0 and use translateY for vertical placement
   so only `transform` and `opacity` need to animate (no two-property
   handoffs that produce the "black rectangle" intermediate state). */
.nav__toggle-bars {
  position: relative;
  width: 18px;
  height: 14px;
  display: block;
}
.nav__toggle-bars span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition: transform .4s cubic-bezier(0.65, 0, 0.35, 1),
              opacity .2s ease,
              background .25s ease;
}
.nav__toggle-bars span:nth-child(1) { transform: translateY(0); }
.nav__toggle-bars span:nth-child(2) { transform: translateY(6px); }
.nav__toggle-bars span:nth-child(3) { transform: translateY(12px); }

body.nav-open .nav__toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.nav-open .nav__toggle-bars span:nth-child(2) {
  opacity: 0;
  transform: translateY(6px) scaleX(0);
}
body.nav-open .nav__toggle-bars span:nth-child(3) {
  transform: translateY(6px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .nav__center, .nav__cta { display: none; }
  /* Hamburger sits on the right edge in mobile view. */
  .nav__toggle { display: inline-flex; margin-left: auto; }
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* Light frosted glass :: subtelnie próżne białe tło z mocnym blur'em. */
  background: rgba(251, 251, 249, 0.92);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 92px clamp(32px, 8vw, 64px) 48px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .4s ease;
}
.nav-overlay__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.nav-overlay__item {
  /* delikatny entrance stagger gdy overlay się otwiera */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-overlay.is-open .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}
.nav-overlay.is-open .nav-overlay__item:nth-child(1) { transition-delay: .12s; }
.nav-overlay.is-open .nav-overlay__item:nth-child(2) { transition-delay: .18s; }
.nav-overlay.is-open .nav-overlay__item:nth-child(3) { transition-delay: .24s; }
.nav-overlay.is-open .nav-overlay__item:nth-child(4) { transition-delay: .30s; }

.nav-overlay__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-mute-2);
  text-decoration: none;
  transition: color .35s ease;
}
.nav-overlay__link:active,
.nav-overlay__link[aria-current="page"] {
  color: var(--ink);
}
.nav-overlay__link[aria-current="page"] {
  pointer-events: none;
}
/* Aktualna podstrona jest oznaczona tylko KOLOREM tekstu (pełny --ink vs
   muted --ink-mute-2). Żadnej kropki, żadnego pseudo-elementu — dzięki
   temu wszystkie linki w mobile/tablet menu mają tekst wyrównany do tej
   samej pionowej linii, niezależnie od tego, czy aktualnie jesteśmy na
   danej podstronie czy nie. */

/* (nav-overlay__footer :: usunięte, nie ma odpowiednika w HTML) */

/* ============ HERO ============ */
.hero {
  padding: 130px 0 40px;
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  /* Phones column gets more weight so the cluster + orbit feels prominent. */
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-bottom: clamp(40px, 6vw, 80px);
}
.hero__sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  margin-bottom: 28px;
  box-shadow: var(--shadow-soft);
}
.hero__sub-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(46, 174, 92, 0.18);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(46, 174, 92, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(46, 174, 92, 0.04); }
}
.hero__title {
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin-bottom: 26px;
}
.hero__desc {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink-mute);
  max-width: 480px;
  margin-bottom: 32px;
  text-wrap: pretty;
  line-height: 1.55;
}
.hero__cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero__cta-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-mute);
}
.hero__cta-meta svg { width: 16px; height: 16px; }

/* ===== Phones cluster :: 3 phones in a grid + elliptical orbit ring =====
   Side phones tilt inward via CSS custom properties so the JS hover-parallax
   can read them and stack rotateX/Y on top without losing the resting tilt.
   The orbit pills travel along an ellipse using CSS Motion Path. */
.hero__phones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.3rem, 1vw, 0.9rem);
  align-items: center;
  /* Lets phones spill slightly beyond the column for a fuller cluster. */
  margin: 0 -2%;
}
.hero__phones .phone-mock:nth-child(1) {
  --base-rotate: -8deg;
  --base-tx: 16%;
  --base-ty: 8%;
  transform: translate(var(--base-tx), var(--base-ty)) rotate(var(--base-rotate));
}
.hero__phones .phone-mock:nth-child(3) {
  --base-rotate: 8deg;
  --base-tx: -16%;
  --base-ty: 8%;
  transform: translate(var(--base-tx), var(--base-ty)) rotate(var(--base-rotate));
}
.hero__phones .phone-mock:nth-child(2) {
  z-index: 4;
}

/* Phone shadow row :: sibling layer pod telefonami (z:1), cieniuje przez
   box-shadow na rounded-rectach aproksymujących kształt iPhone'a. Pillsy
   orbity (z:2) są NAD tą warstwą, więc nigdy ich nie tyka — wcześniej
   `filter: drop-shadow` na .phone-mock pakował cień do tej samej warstwy
   compositingowej co telefon (z:3), a halo cienia (blur 30px) wyciekało
   też wgórę w obrys telefonu — pill przelatując BEHIND fazą (z:2 < z:3)
   widział cień na sobie i wyglądał jakby zmieniał kolor.

   Białe obwódki w narożnikach (które były powodem przejścia na drop-shadow
   w V2) eliminujemy przez `width: 96%; margin: 0 2%` — cieniowy rect jest
   minimalnie WĘŻSZY od PNG, więc jego krawędzie nigdy nie wystają poza
   alfę iPhone'a. Sam cień (box-shadow) wystaje na zewnątrz rect'a — tak
   jak powinien. */
.phone-shadow-row {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.3rem, 1vw, 0.9rem);
  align-items: center;
  z-index: 1;
  pointer-events: none;
}
.phone-shadow-row > span {
  display: block;
  width: 96%;
  margin: 0 auto;
  aspect-ratio: 1018 / 2098;
  /* Approximate the iPhone outline. 12% / 5.8% ≈ iPhone 15 Pro corner radius. */
  border-radius: 12% / 5.8%;
  background: transparent;
  box-shadow: 0 22px 30px rgba(0, 0, 0, 0.14),
              0 8px 14px rgba(0, 0, 0, 0.10);
}
/* Side spans muszą podążać za transformami bocznych telefonów (translate +
   rotate) — wartości spójne z .hero__phones .phone-mock:nth-child(1)/(3). */
.phone-shadow-row > span:nth-child(1) {
  transform: translate(16%, 8%) rotate(-8deg);
}
.phone-shadow-row > span:nth-child(3) {
  transform: translate(-16%, 8%) rotate(8deg);
}

.phone-mock {
  position: relative;
  width: 100%;
  aspect-ratio: 1018 / 2098;
  transform-style: preserve-3d;
  will-change: transform;
  /* Cień :: NIE używamy `filter: drop-shadow` tu, bo robił compositing layer
     który darkenował pillsy przelatujące za telefonem (vide komentarz na
     .phone-shadow-row powyżej). Cień jest na siostrze przy z:1, pillsy przy
     z:2, telefony przy z:3 — czysty stacking, brak zalewu kolorem. */
  z-index: 3;
}
.phone-mock__screen {
  position: absolute;
  left:   4.126%;
  top:    1.859%;
  width:  91.749%;
  height: 96.282%;
  border-radius: 4% / 1.85%;
  overflow: hidden;
  background: #000;
  z-index: 1;
}
.phone-mock__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.phone-mock__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  user-select: none;
  -webkit-user-drag: none;
}

/* Orbit ring (the elliptical aureoli wrapped around the phones).
   Both arc halves AND the animated pills share this coordinate system.
   Slightly tighter than the wider variant — feels balanced rather than huge. */
.hero__orbit-track {
  position: absolute;
  left: -6%;
  right: -6%;
  top: 42%;
  bottom: 8%;
  pointer-events: none;
}
.hero__orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero__orbit--back  { z-index: 2; }
.hero__orbit--front { z-index: 5; }

/* Orbit pills :: keep the new visual style (white pill, dark icon disc),
   apply the old strona's motion-path animation. */
.orbit-pill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-anchor: center;
  offset-rotate: 0deg;
  /* Pills swap between front (z-index 6, above phones) and back
     (z-index 2, behind phones but ABOVE the shadow layer at z-index 1).
     The shadow can never reach the pills because it lives below them.

     Trzecia animacja `hero-fade-in` daje płynne pojawienie się pillsów
     razem z orbitą — pillsy mają już własny SC (position + z-index w
     animacji orbit-stack), więc animowanie opacity tu jest bezpieczne. */
  animation:
    orbit-position 20s linear infinite,
    orbit-stack    20s step-end infinite,
    hero-fade-in   0.8s ease-out 1.20s both;
  will-change: offset-distance, z-index;
}
.orbit-pill__icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.orbit-pill__icon svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pills evenly spaced around the ellipse. Trzy wartości delay — kolejno
   dla orbit-position, orbit-stack, hero-fade-in. Pierwsze dwa to ujemne
   przesunięcia żeby pillsy startowały w różnych punktach orbity; trzeci
   to dodatni delay (1.20s) na fade-in. Bez trzeciej wartości CSS cyklowałby
   listę i nadpisałby delay fade-in wartością ujemną → pillsy byłyby
   widoczne natychmiast bez płynnego pojawienia. */
.orbit-pill--1 { animation-delay: -1.667s, -1.667s, 1.20s; }
.orbit-pill--2 { animation-delay: -8.333s, -8.333s, 1.20s; }
.orbit-pill--3 { animation-delay: -15s,    -15s,    1.20s; }

@keyframes orbit-position {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
@keyframes orbit-stack {
  0%   { z-index: 6; }
  50%  { z-index: 2; }
  100% { z-index: 2; }
}

@media (max-width: 1024px) {
  .hero { padding: 110px 0 32px; }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vw, 56px);
    text-align: center;
  }
  .hero__text { max-width: 640px; margin: 0 auto; }
  .hero__desc { margin-left: auto; margin-right: auto; max-width: 540px; }
  .hero__cta-row { justify-content: center; }
  .hero__phones {
    max-width: 640px;
    margin: 0 auto;
  }
}

/* Fan layout :: stosujemy na MOBILE (≤640px) ORAZ na TABLECIE
   (641–1024px, dowolna orientacja). Identyczny układ jak w "Stara strona":
   3 telefony w wachlarzu (boczne pochylone ±8°, środkowy pionowy),
   wycentrowane na stronie. BEZ orbity, BEZ pillsów, BEZ karuzeli.
   Telefony są absolutnie pozycjonowane wewnątrz bloku z fixed aspect-ratio,
   więc układ zawsze ma stabilną wysokość i nie zapada się.
   Desktop (>1024px) używa 3-kolumnowego gridu z orbitą + entry animation. */
@media (max-width: 1024px) {
  .phone-shadow-row { display: none; }

  .hero__phones {
    display: block;
    position: relative;
    width: 100%;
    max-width: min(540px, 95vw);
    margin: 0 auto;
    aspect-ratio: 1 / 1.1;
    perspective: none;
  }
  .hero__phones .phone-mock {
    position: absolute;
    top: 50%;
    z-index: auto;
  }
  /* !important :: chroni przed nadpisaniem przez desktopową regułę
     `transform: translate(var(--base-tx), ...)` która ma taką samą
     specyficzność i wcześniejszy source order. */
  .hero__phones .phone-mock:nth-child(1) {
    left: -2%;
    width: 44%;
    z-index: 1;
    transform: translateY(-50%) rotate(-8deg) !important;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.14));
  }
  .hero__phones .phone-mock:nth-child(3) {
    right: -2%;
    width: 44%;
    z-index: 1;
    transform: translateY(-50%) rotate(8deg) !important;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.14));
  }
  .hero__phones .phone-mock:nth-child(2) {
    left: 50%;
    width: 50%;
    z-index: 2;
    transform: translate(-50%, -50%) !important;
  }
  .hero__orbit-track { display: none; }
}

/* Phone-only typography/padding tweaks (do not extend to tablet portrait). */
@media (max-width: 640px) {
  .hero { padding: 90px 0 28px; }
  .hero__title { font-size: clamp(34px, 9vw, 48px); }
  .hero__sub { margin-bottom: 20px; }
  .hero__cta-row { gap: 14px; }
}

/* ============ TRUST ============ */
.trust {
  padding: clamp(32px, 5vw, 56px) 0 0;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.trust__title {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-bottom: 36px;
  text-transform: uppercase;
  font-weight: 500;
}
.trust__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.trust__logo img {
  width: 100%;
  max-width: 250px;
  height: 100px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
  opacity: 0.6;
  transition: opacity .25s ease;
}
.trust__logo:hover img { opacity: 1; }
@media (max-width: 768px) {
  .trust__row { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .trust__logo img { max-width: 225px; height: 88px; }
  /* If the logo count is odd, the last logo lands alone on the final row.
     Span both columns so it sits centered under the rest. */
  .trust__logo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ============ SECTIONS ============ */
.section { padding: clamp(80px, 12vw, 130px) 0; }
.section--tight { padding: clamp(40px, 6vw, 70px) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

.section__title {
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
  margin-top: 16px;
  max-width: 880px;
}
.section__sub {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink-mute);
  max-width: 540px;
  text-wrap: pretty;
  line-height: 1.55;
  margin-top: 20px;
}
.section__head { margin-bottom: clamp(48px, 7vw, 80px); }

/* ============ BENEFITS ============ */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Hover cards :: identical animation to .timeline__card so the entire site
   uses one consistent feel — short transform + box-shadow transition with
   the default `ease` curve. */
.benefit {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1px solid var(--line-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex;
  flex-direction: column;
}
.benefit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--line);
}
.benefit__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  transition: background .3s ease, color .3s ease;
}
.benefit__icon svg { width: 28px; height: 28px; }
.benefit:hover .benefit__icon { background: var(--ink); color: #fff; }
.benefit__title {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 14px;
}
.benefit__desc {
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr; } }

/* ============ SERVICES (icon tiles) ============ */
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.services--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) { .services--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services--4 { grid-template-columns: 1fr; } }

.service {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--line-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex;
  flex-direction: column;
}
.service:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--line);
}
.service__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: background .3s ease, color .3s ease;
}
.service__icon svg { width: 26px; height: 26px; }
.service:hover .service__icon { background: var(--ink); color: #fff; }
.service__title {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin-bottom: 12px;
}
.service__desc {
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.55;
}
@media (max-width: 800px) { .services { grid-template-columns: 1fr; } }

/* ============ BANNERS + PLAYER (same height, 12:5 cinematic) ============ */
.banner-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.banner, .player {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* True black so the Vidzflow player's letterbox bars (set via the bc
     URL param to #000000) blend into the surrounding container — no
     visible "black bar" stripe on narrow viewports. */
  background: #000000;
  box-shadow: var(--shadow-card);
  /* Same ratio as photo strips so videos and photos always have the same
     height at every breakpoint. */
  aspect-ratio: 16 / 6;
}
.banner__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.banner__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.42);
}
.banner__text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  padding: 1.5rem;
  gap: 0.2rem;
}
/* Banner texts :: same scale as photo-card title/meta so the four labels
   share two consistent typographic tiers. JS pixel-syncs to WIĘCEJ width. */
.banner__title,
.banner__sub {
  display: inline-block;
  color: #fff;
}
.banner__title {
  font-size: var(--fs-photo-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 6px;
}
.banner__sub {
  font-size: var(--fs-photo-meta);
  letter-spacing: 0.1em;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
}
.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000000;
}
/* Aspect-ratio stays 16/6 across breakpoints by intent — photos and videos
   keep matching heights at every screen size. */

/* ============ TESTIMONIALS :: 3 columns ============ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.testimonial {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--line);
}
.testimonial__quote-mark {
  position: absolute;
  top: -20px; left: 20px;
  font-size: 140px;
  color: var(--ink);
  opacity: 0.06;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.testimonial__quote {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin-bottom: 28px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.testimonial__author { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testimonial__name { font-weight: 600; font-size: 14.5px; }
.testimonial__role { font-size: 13px; color: var(--ink-mute); }

@media (max-width: 1024px) { .testimonials { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* ============ PHOTOS :: flat strips, captions anchored bottom-left/right ============ */
.photos {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.photo-strip {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 6;
  box-shadow: var(--shadow-card);
  background: var(--ink);
}
.photo-strip img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.photo-strip__caption {
  position: absolute;
  left: clamp(1.2rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  color: #fff;
  z-index: 2;
}
.photo-strip__caption--right {
  right: clamp(1.2rem, 2.5vw, 2rem);
  left: auto;
  text-align: right;
}
.photo-strip__caption--center {
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  text-align: center;
  right: auto;
}
.photo-strip__meta {
  font-size: var(--fs-photo-meta);
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
  line-height: 1.1;
}
.photo-strip__title {
  font-size: var(--fs-photo-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.photo-strip--more .photo-strip__meta {
  margin-bottom: 0.15rem;
}

/* Default captions (NOT the KLIKNIJ PO WIĘCEJ tile) :: text 50% opacity,
   blur layer behind shaped to letter forms via SVG mask set on --blur-mask. */
.photo-strip:not(.photo-strip--more) .photo-strip__meta,
.photo-strip:not(.photo-strip--more) .photo-strip__title {
  --blur-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
  position: relative;
  color: rgba(255, 255, 255, 0.5);
}
.photo-strip:not(.photo-strip--more) .photo-strip__meta::before,
.photo-strip:not(.photo-strip--more) .photo-strip__title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: var(--blur-mask);
          mask-image: var(--blur-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  pointer-events: none;
}

/* "KLIKNIJ PO WIĘCEJ" :: meta + title share a column. JS sizes WIĘCEJ
   so its rendered width equals KLIKNIJ PO. */
.photo-strip--more .photo-strip__caption {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  min-width: max-content;
}
.photo-strip--more .photo-strip__meta,
.photo-strip--more .photo-strip__title {
  width: 100%;
  display: block;
}

/* "KLIKNIJ PO WIĘCEJ" hover :: synchronized white veil + text color flip. */
.photo-strip__veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity .55s ease;
  z-index: 1;
  pointer-events: none;
}
.photo-strip--more .photo-strip__meta,
.photo-strip--more .photo-strip__title {
  color: #fff;
  transition: color .55s ease;
}
.photo-strip--more:hover .photo-strip__veil { opacity: 1; }
.photo-strip--more:hover .photo-strip__meta,
.photo-strip--more:hover .photo-strip__title {
  color: var(--ink);
}

/* Aspect-ratio stays 16/6 across breakpoints to keep photo + video
   containers visually aligned (same shape, same height). */

/* ============ TIMELINE (PROCES) ============ */
.timeline {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 0;
}
.timeline__line {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--line) 8%, var(--line) 92%, transparent 100%);
  transform: translateX(-50%);
}
.timeline__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
}
.timeline__row:last-child { margin-bottom: 0; }
.timeline__row--left .timeline__card { grid-column: 1; margin-right: 56px; text-align: right; }
.timeline__row--left .timeline__dot  { left: 50%; }
.timeline__row--right .timeline__card { grid-column: 2; margin-left: 56px; }
.timeline__row--right .timeline__dot  { left: 50%; }

.timeline__card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  border: 1px solid var(--line-soft);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.timeline__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

.timeline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.timeline__row--left .timeline__num { margin-left: auto; display: flex; }
.timeline__title {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 10px;
}
.timeline__desc {
  font-size: 14.5px;
  color: var(--ink-mute);
  line-height: 1.55;
}

/* Step dot :: vertically centered on its corresponding card. */
.timeline__dot {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--bg);
  transform: translate(-50%, -50%);
  z-index: 1;
}

@media (max-width: 768px) {
  .timeline__line { left: 24px; }
  .timeline__row { grid-template-columns: 1fr; }
  .timeline__row--left .timeline__card,
  .timeline__row--right .timeline__card {
    grid-column: 1;
    margin: 0 0 0 56px;
    text-align: left;
  }
  .timeline__row--left .timeline__num,
  .timeline__row--right .timeline__num { margin-left: 0; }
  .timeline__row--left .timeline__dot,
  .timeline__row--right .timeline__dot { left: 24px; }
}

/* ============ PRICING ============ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.pricing {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  border: 1px solid var(--line-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pricing:not(.pricing--featured):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--line);
}
.pricing__top { flex: 1; }
.pricing--featured {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: scale(1.02);
  box-shadow: var(--shadow-card);
}
.pricing--featured:hover {
  transform: scale(1.02) translateY(-2px);
  box-shadow: 0 32px 60px -28px rgba(15, 15, 15, 0.45),
              0 8px 20px -6px rgba(15, 15, 15, 0.2);
}
.pricing__badge {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.pricing__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.pricing--featured .pricing__name { color: rgba(255,255,255,0.6); }
.pricing__desc {
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 28px;
  min-height: 40px;
}
.pricing--featured .pricing__desc { color: rgba(255,255,255,0.6); }
.pricing__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 28px;
}
.pricing--featured .pricing__price-row { border-bottom-color: rgba(255,255,255,0.12); }
.pricing__price {
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pricing__period { font-size: 14px; color: var(--ink-mute); }
.pricing--featured .pricing__period { color: rgba(255,255,255,0.6); }
.pricing__feat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.pricing--featured .pricing__feat-label { color: rgba(255,255,255,0.5); }
.pricing__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.pricing__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.45;
}
.pricing__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}
.pricing__check::before {
  content: '';
  width: 8px; height: 4px;
  border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.pricing--featured .pricing__check { background: #fff; }
.pricing--featured .pricing__check::before {
  border-left-color: var(--ink);
  border-bottom-color: var(--ink);
}
.pricing__cta { width: 100%; justify-content: center; }
.pricing__foot { display: flex; flex-direction: column; }
.pricing__save {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 14px;
  min-height: 18px;
}
.pricing--featured .pricing__save { color: rgba(255,255,255,0.5); }
@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pricing--featured { transform: none; }
}

/* ============ FAQ ============ */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq__item.is-open {
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  text-align: left;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.faq__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: transform .3s ease, background .25s ease;
}
.faq__icon::before {
  top: 50%; left: 8px; right: 8px;
  height: 1.5px;
  transform: translateY(-50%);
}
.faq__icon::after {
  left: 50%; top: 8px; bottom: 8px;
  width: 1.5px;
  transform: translateX(-50%);
}
.faq__item.is-open .faq__icon { background: var(--ink); border-color: var(--ink); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: #fff; }
.faq__item.is-open .faq__icon::after { transform: translateX(-50%) rotate(90deg); }
.faq__panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq__panel-inner {
  padding: 0 28px 24px;
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.6;
  max-width: 680px;
}

/* ============ FINAL CTA ============ */
.final-cta {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 8vw, 100px);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: -300px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 65%);
  pointer-events: none;
}
.final-cta__inner { position: relative; z-index: 1; max-width: 760px; }
.final-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}
.final-cta__eyebrow .eyebrow__dot { background: #fff; }
.final-cta__title {
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 22px;
}
.final-cta__sub {
  font-size: clamp(15px, 1.15vw, 17px);
  color: rgba(255,255,255,0.7);
  margin-bottom: 36px;
  max-width: 560px;
}
.final-cta__row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.final-cta__contact {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  align-items: center;
}
.final-cta__contact a {
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
  transition: border-color .25s ease;
}
.final-cta__contact a:hover { border-color: #fff; }

/* ============ FOOTER ============ */
.footer {
  padding: 40px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-mute);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__nav { display: flex; gap: 28px; }
.footer__nav a:hover { color: var(--ink); }

/* ============ SUBPAGE :: shared inner-page hero ============ */
.subpage-hero {
  padding-top: 130px;
  /* Mniejszy padding-bottom + brak min-height → mniejszy dystans między
     opisem (.subpage-hero__sub) a treścią następnej sekcji, IDENTYCZNY na
     wszystkich trzech podstronach (O nas / Galeria / Kontakt). Wcześniej
     min-height: clamp(440-560px) nadmuchiwał sekcję powyżej naturalnej
     wysokości treści — przy flex-start zostawiała pustą przestrzeń u dołu
     różnej wysokości per podstrona (O nas wypełniał więcej, Kontakt mniej),
     przez co dystans od opisu do następnej sekcji był inny na każdej.
     Bez min-height treść wypełnia całą sekcję, a stały padding-bottom +
     margin-top grid'ów daje jednolity odstęp. */
  padding-bottom: clamp(20px, 3vw, 36px);
  text-align: center;
  /* flex-start (NIE center!) → eyebrow zawsze ląduje na padding-top: 130px
     niezależnie od długości tytułu. Tytuły też zaczynają się w tej samej Y
     (zaraz pod eyebrow'em o stałej wysokości). */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.subpage-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.subpage-hero__title {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 18px;
}
.subpage-hero__sub {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink-mute);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .subpage-hero {
    padding-top: 100px;
    min-height: 380px;
  }
}

/* ============ ABOUT ============ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.about-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.about-figure:hover {
  transform: translateY(-2px);
  box-shadow: 0 32px 60px -28px rgba(15, 15, 15, 0.32),
              0 8px 18px -6px rgba(15, 15, 15, 0.16);
}
.about-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-prose__header { margin-bottom: 24px; }
.about-prose__meta {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 10px;
}
.about-prose p {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink-mute);
  line-height: 1.7;
}
.about-prose p + p { margin-top: 16px; }
.about-prose strong { color: var(--ink); font-weight: 600; }

/* Defined AFTER `.about-prose p` and with a higher-specificity selector
   so it wins the cascade :: the founder name matches the page heading
   exactly so the two type pieces feel like one tier. Values mirror
   .subpage-hero__title. */
.about-prose .about-prose__name {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .about-prose__header { text-align: center; }
}

/* ============ CONTACT ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.contact-form {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
}
.contact-form__input,
.contact-form__textarea {
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  outline: none;
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 15, 15, 0.06);
}
.contact-form__textarea {
  min-height: 140px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.55;
}
.contact-form__submit { align-self: flex-start; margin-top: 8px; }

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-info {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  border: 1px solid var(--line-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contact-info:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--line);
}
.contact-info__heading {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.contact-info__line {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 4px;
}
.contact-info__line a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color .25s ease;
}
.contact-info__line a:hover { border-color: var(--ink); }

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============ GALLERY ============ */
.gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.gallery-project {
  display: grid;
  grid-template-columns: 0.85fr 2.15fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.gallery-project__info {
  position: sticky;
  top: 100px;
  padding: 8px 0;
}
.gallery-project__meta {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 10px;
}
.gallery-project__title {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.gallery-project__role {
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.55;
}
.gallery-project__images {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 20px);
}
.gallery-project__images--double { grid-template-columns: 1fr 1fr; }
.gallery-project__images img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 1024px) {
  .gallery-project { grid-template-columns: 1fr; }
  .gallery-project__info { position: static; }
}
@media (max-width: 640px) {
  .gallery-project__images--double { grid-template-columns: 1fr; }
}

/* ============ REVEAL ============ */
/* Reveal uses CSS `animation`, NOT `transition`, on purpose :: cards like
   .benefit / .service / .testimonial / .pricing carry both their own class
   AND .reveal, and `transition` is a single shorthand property — the later
   declaration wins the cascade. If .reveal also set `transition: opacity`,
   it would silently wipe out the card's `transition: transform, box-shadow,
   border-color`, which is why hover effects looked instant ("skokowe").
   Using `animation` keeps the two systems independent: each card keeps
   its full transition list, and the fade-in still plays once. */
.reveal { opacity: 0; }
.reveal.is-visible {
  animation: reveal-fade-in .7s ease forwards;
}
.reveal--delay.is-visible { animation-delay: .15s; }
@keyframes reveal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .orbit-pill {
    animation: none !important;
    z-index: 6;
  }
  .orbit-pill--1 { offset-distance: 41.67%; }
  .orbit-pill--2 { offset-distance: 25%; }
  .orbit-pill--3 { offset-distance: 8.33%; }
}

/* ============================================================
   V2 :: subtelne ulepszenia
   ============================================================ */

/* ---------- #1 Hero entrance :: czyste CSS @keyframes ----------
   Bez zależności od JS class-toggling. animation-fill-mode: both — element
   jest w from-state PRZED animacją (podczas delay), w to-state PO. Żadnego
   ryzyka że hero zostanie ukryty na zawsze. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-phone-emerge {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero__sub      { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
.hero__title    { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }
.hero__desc     { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both; }
.hero__cta-row  { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both; }

@keyframes hero-phone-emerge {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__sub      { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
.hero__title    { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }
.hero__desc     { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both; }
.hero__cta-row  { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both; }

/* Phones :: cały cluster (.hero__phones) wjeżdża razem od dołu + fade.
   Animuję parent container zamiast pojedynczych phones — to chroni
   transformy z :nth-child rules (fan-rotate na desktopie, absolute fan
   na mobile/tablet portrait) przed nadpisaniem przez entrance animation. */
.hero__phones {
  animation: hero-phone-emerge 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
/* Fade-in orbity :: animację opacity dajemy NA DZIECI orbit-tracka, nie na
   sam orbit-track. Powód: opacity animation tworzy stacking context, który
   w Chromium zostaje także po zakończeniu animacji (compositing layer).
   Jeśli orbit-track stanie się SC, jego dzieci (back arc z:2, front arc z:5,
   pillsy z:6) zostają zamknięte w jego SC — a sam orbit-track ma z-index:auto
   (=0) w SC .hero__phones, więc wszystko leci POD telefony (z:3/4) i orbita
   wygląda jakby była cała schowana za telefonami. Arcs i pillsy mają już
   swoje SC (z-index + position), więc animacja na nich nie tworzy nowego
   poziomu izolacji — z-indexy dalej rezolwują się w .hero__phones. */
.hero__orbit {
  animation: hero-fade-in 0.8s ease-out 1.20s both;
}

/* ---------- #2 Trust logos :: marquee (BEZ pauzy na hover) ---------- */
.trust__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust__track {
  display: flex;
  width: max-content;
  animation: trust-marquee 38s linear infinite;
}
.trust__marquee .trust__row {
  display: flex;
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
  padding: 0 clamp(24px, 4vw, 48px);
  grid-template-columns: none;
}
.trust__marquee .trust__logo {
  flex: 0 0 auto;
  width: clamp(140px, 16vw, 200px);
}
.trust__marquee .trust__logo img {
  width: 100%;
  height: 80px;
  max-width: 100%;
}
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .trust__marquee .trust__logo { width: 130px; }
  .trust__marquee .trust__logo img { height: 64px; }
  .trust__track { animation-duration: 28s; }
  .trust__marquee .trust__logo:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- #6 Timeline :: linia + scroll-tied wsuwanie kart ----------
   Głowa linii zawsze na vh/2 (środek viewportu). Karty płynnie wjeżdżają
   względem swojej odległości od głowy linii (CSS variable --card-progress
   ustawiana per frame przez JS, 0=daleko, 1=dotarła). */
.timeline__line {
  overflow: visible;
}
.timeline__line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: var(--progress, 0%);
  background: linear-gradient(180deg, transparent 0%, var(--ink) 12%, var(--ink) 100%);
  transform: translateX(-50%);
  transition: height .15s linear;
  pointer-events: none;
}
@media (max-width: 768px) {
  .timeline__line::after { left: 24px; }
}
.timeline__dot {
  transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .45s ease;
}
.timeline__dot.is-reached {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 0 6px rgba(15, 15, 15, 0.06);
}
/* Karty :: --p sterowane przez JS w trakcie scrolla.
   --dir: -1 dla left rows (slide z lewej), +1 dla right rows (slide z prawej). */
.timeline__card {
  --p: 0;
  --dir: -1;
  opacity: calc(0.32 + 0.68 * var(--p));
  transform: translateX(calc(var(--dir) * 36px * (1 - var(--p))));
  /* Krótki transition wygładza per-frame jitter ze scroll RAF, ale jest na
     tyle szybki że karta praktycznie podąża za scrollem 1:1. */
  transition:
    transform .18s linear,
    opacity .18s linear,
    box-shadow .3s ease;
}
.timeline__row--right .timeline__card { --dir: 1; }
.timeline__card:hover {
  /* Hover stack na slide-in: zachowuje translateX wynikające z progresu
     + dokłada lekki lift -2px. Gdy karta dotarła (p=1), translateX = 0. */
  transform: translateX(calc(var(--dir) * 36px * (1 - var(--p)))) translateY(-2px);
}
@media (max-width: 768px) {
  .timeline__card { --dir: 1; }  /* na mobile karta wsuwa się z prawej zawsze */
  .timeline__row--left .timeline__card { --dir: 1; }
}

/* ---------- #7 Photo strips :: parallax (-25% względem poprzedniego) ---------- */
.photo-strip img {
  will-change: transform;
  transition: transform .15s linear;
  /* powiększenie 1.10 wystarcza dla parallaxa ±21px */
  transform: scale(1.10) translateY(0);
}

/* ---------- #8 FAQ :: mocne wyciszanie nieaktywnych ---------- */
.faq.has-open .faq__item:not(.is-open) {
  opacity: 0.3;
  transition: opacity .35s ease;
}
.faq.has-open .faq__item:not(.is-open):hover {
  opacity: 0.6;
}
.faq .faq__item { transition: opacity .35s ease, border-color .3s ease, box-shadow .3s ease; }

/* ---------- prefers-reduced-motion :: zatrzymujemy nową motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none !important; }
  .hero__sub,
  .hero__title,
  .hero__desc,
  .hero__cta-row,
  .hero__phones,
  .hero__orbit {
    animation: none !important;
  }
  .photo-strip img { transform: scale(1) !important; }
  .timeline__card { opacity: 1 !important; transform: none !important; --p: 1 !important; }
}

/* ---------- #10 Noise :: mikroskopijny, drobne ziarno ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.13;
  mix-blend-mode: multiply;
  /* Drobny SVG noise :: tile 100px + baseFrequency 1.8 daje mikro-ziarno
     typu "papier". Matrix ustawia czystą czarną alfa noise (alpha=1.0). */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
}
/* Sekcje muszą być nad noisem. UWAGA: .nav ma position:fixed + z-index:110,
   więc nie wpisujemy go tutaj — reguly position:relative zepsują sticky.
   .nav-overlay również ma position:fixed + z-index:100, też pomijamy. */
main, section, footer { position: relative; z-index: 2; }