/* ==========================================================================
   CAASUAL — style strony
   Breakpointy (jak w projekcie Figma):
     desktop  ≥ 1381px  (domyślne style)
     tablet   698–1380px  → @media (max-width: 1380px)
     mobile   ≤ 697px     → @media (max-width: 697px)
   ========================================================================== */

/* ---------- Fonty (Roboto / Roboto Condensed, pliki z Figma Sites) ---------- */
@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:75% 100%;src:url(/assets/fonts/Roboto_wdth_wght__3-english.woff2) format("woff2");unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:75% 100%;src:url(/assets/fonts/Roboto_wdth_wght__3-rest-latin.woff2) format("woff2");unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:75% 100%;src:url(/assets/fonts/Roboto_wdth_wght__3-latin-extended-a.woff2) format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:75% 100%;src:url(/assets/fonts/Roboto_wdth_wght__3-latin-extended-b.woff2) format("woff2");unicode-range:U+0180-024F}
@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:75% 100%;src:url(/assets/fonts/Roboto_wdth_wght__3-latin-extended-additional.woff2) format("woff2");unicode-range:U+1E00-1EFF}
@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:75% 100%;src:url(/assets/fonts/Roboto_wdth_wght__3-rest.woff2) format("woff2");unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/RobotoCondensed_wght__1-english.woff2) format("woff2");unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/RobotoCondensed_wght__1-rest-latin.woff2) format("woff2");unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/RobotoCondensed_wght__1-latin-extended-a.woff2) format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/RobotoCondensed_wght__1-latin-extended-b.woff2) format("woff2");unicode-range:U+0180-024F}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/RobotoCondensed_wght__1-latin-extended-additional.woff2) format("woff2");unicode-range:U+1E00-1EFF}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/RobotoCondensed_wght__1-rest.woff2) format("woff2");unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}

/* ---------- Tokeny ---------- */
:root {
  --bg: #f9f7f3;
  --ink: #1d1d1d;
  --black: #000;
  --pill-text: #faf9f7;
  --cream: #f3efe6;
  /* gradient CAASUAL (karty AI, ikony, identyfikatory) odtworzony w CSS z tekstury z projektu Figma.
     To gradient stożkowy: kolor zależy tylko od kąta, więc liczą się środek i obrót, a nie skala. */
  --caas-conic: #153e2c 0deg, #223a28 13deg, #266248 25deg, #249471 43deg, #249f79 52deg, #24967b 59.5deg,
    #248377 68.5deg, #265550 91.5deg, #2d6248 96deg, #4f763d 103deg, #afb38b 123.5deg, #e4d395 134.5deg,
    #f5dd9a 138.5deg, #f4e193 142deg, #f2e28b 146deg, #e9b95f 171.5deg, #f3b35b 175deg, #e58c3b 200deg,
    #d7c05e 218deg, #d6ca56 221.5deg, #f6dd5e 228.5deg, #f4cc5f 234.5deg, #ea9620 253.5deg, #e26720 270deg,
    #993b23 285.5deg, #244e40 310.5deg, #234333 346.5deg, #11422f 351deg, #153e2c 360deg;
  --font-body: Roboto, sans-serif;
  --font-display: "Roboto Condensed", sans-serif;
  --gutter: 32px;
  /* szerokość stron kontenerowych (UE, polityka, O nas, Usługi, landing AI) od 1025 px wzwyż */
  --container: 880px;
  --header-h: 94px;
  --vh: 100vh;
  --ease-out: cubic-bezier(0, 0, .58, 1);
  --ease-soft: cubic-bezier(.2, .8, .2, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.7, 0, .15, 1);
  --ease-spring: linear(0, .034, .108, .199, .295, .386, .471, .546, .613, .671, .721, .763, .8, .831, .857, .879, .898, .914, .927, .938, .948, .956, .963, .968, .973, .977, .981, .984, .986, .988, .99, .992, .993, .994, .995, .996, .997, .997, .998, .998, 1);
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }

/* ---------- Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-synthesis: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; }
[hidden] { display: none !important; }
h1, h2, p { font: inherit; }
.page { position: relative; min-height: var(--vh); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* zaznaczenie tekstu i fokus w zieleni z gradientu CAASUAL */
::selection { background: #14432c; color: #f3efe6; }
:focus-visible { outline: 2px solid #249471; outline-offset: 3px; }
/* nagłówki łamią się równo, akapity bez pojedynczych słów w ostatniej linii; sierotki (a, i, o, u, w, z) mają w HTML   */
:is(.page-title, .section-title, .ai-hero__title, .about__statement, .lp__statement, .acc__title, .about__card-title, .model h3, .steps h3) { text-wrap: balance; }
:is(p, li) { text-wrap: pretty; }
:is(.project-desc p, .prose p) { hanging-punctuation: first; }

/* przejścia między podstronami: nowa strona miękko się pojawia, nagłówek zostaje na miejscu
   (Safari 18.2+, Chrome 126+; pozostałe przeglądarki przeładowują stronę jak dotąd) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: 260ms cubic-bezier(.2, .8, .2, 1) 20ms both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

.icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }

/* Link tekstowy: małe wersaliki 12/24 + ikona strzałki */
.text-link {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; line-height: 2; text-transform: uppercase; white-space: nowrap;
}

/* ==========================================================================
   Nagłówek
   ========================================================================== */
.site-header {
  position: fixed; z-index: 10; top: 0; left: 50%; width: 100%; translate: -50% 0;
  height: var(--header-h);
  background: var(--bg);
  /* chowa się przy przewijaniu w dół, wraca przy przewijaniu w górę (klasa z main.js); zmiana w pigułkę jest płynna */
  transition: transform 380ms var(--ease-out), top 450ms var(--ease-soft), width 450ms var(--ease-soft), height 450ms var(--ease-soft),
    padding 450ms var(--ease-soft), border-radius 450ms var(--ease-soft), background-color 450ms var(--ease-soft), box-shadow 450ms var(--ease-soft);
  /* przy przejściu między podstronami nagłówek nie miga razem z treścią */
  view-transition-name: site-header;
  /* logo do lewej, menu na środku, języki + pigułka do prawej (jak kolumny w stopce) */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px;
  padding: 0 28px 0 32px;
}
/* logo, menu i języki mieszają się z tłem (difference), więc zawsze kontrastują z tym, co jest pod nimi */
.site-header__logo { justify-self: start; width: 149px; height: 46px; color: #fff; mix-blend-mode: difference; transition: width 450ms var(--ease-soft), height 450ms var(--ease-soft); }
.site-header__logo svg { width: 100%; height: 100%; fill: currentColor; }
.site-header__nav { display: flex; gap: 24px; color: #fff; mix-blend-mode: difference; }
.site-header__end { justify-self: end; display: flex; align-items: center; gap: 24px; }

/* Przełącznik języka PL / EN */
.lang-switch { display: flex; gap: 8px; color: #fff; mix-blend-mode: difference; }
.lang-switch a { opacity: .5; transition: opacity 200ms var(--ease-out); }
.lang-switch a[aria-current], .lang-switch a:hover { opacity: 1; }

/* gdzie menu się nie mieści (tablet pionowo, telefon): zostają logo, języki i pigułka */
@media (max-width: 1024px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header__nav { display: none; }
}

.site-header--hidden { transform: translateY(-100%); }

/* po zjechaniu ze szczytu nagłówek wraca jako zwarta pigułka w kolorze tła, na szerokość kontenera treści (main.js: is-pill).
   Logo stoi tak samo blisko lewego brzegu jak pigułka z e-mailem prawego, więc nawias logo idzie za zaokrągleniem paska */
.site-header.is-pill {
  top: 12px; width: min(var(--container-w, 880px), calc(100% - 2 * var(--gutter))); height: 56px; padding: 0 8px; border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(29, 29, 29, .07), 0 12px 32px -14px rgba(0, 0, 0, .28);
}
.site-header.is-pill.site-header--hidden { transform: translateY(calc(-100% - 24px)); }
.site-header.is-pill::before { display: none; }
.is-pill :is(.site-header__logo, .site-header__nav, .lang-switch) { mix-blend-mode: normal; color: var(--ink); }
.is-pill .site-header__logo { width: 112px; height: 34px; }
/* cienka linia pod nagłówkiem, gdy pod nim przewija się treść */
.site-header.is-scrolled:not(.is-pill)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(29, 29, 29, .08); }

/* ---------- Menu na telefonie i tablecie ---------- */
/* poniżej 1025 px menu nagłówka się nie mieści: przycisk otwiera czarny panel z zakładkami, językami, e-mailem i social mediami
   (main.js składa go z linków, które już są na stronie; bez JS zostaje jak dotąd: języki i pigułka z e-mailem) */
.menu-button, .menu { display: none; }
@media (max-width: 1024px) {
  .js .site-header__end .lang-switch { display: none; }
  .js .menu-button {
    position: relative; display: block; flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--black); color: var(--pill-text); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: scale 600ms var(--ease-spring);
  }
  .js .menu-button:active { scale: .92; transition: scale 90ms var(--ease-out); }
  /* dwie kreski, które po otwarciu składają się w × */
  .menu-button i { position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: currentColor; transition: translate 450ms var(--ease-expo), rotate 450ms var(--ease-expo); }
  .menu-button i:first-child { translate: 0 -3.5px; }
  .menu-button i:last-child { translate: 0 3.5px; }
  .menu-open .menu-button i:first-child { translate: none; rotate: 45deg; }
  .menu-open .menu-button i:last-child { translate: none; rotate: -45deg; }

  .js .menu {
    position: fixed; z-index: 9; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
    overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--header-h) + 40px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background: var(--black); color: var(--cream);
    /* kurtyna z góry; zamknięty panel jest niewidoczny także dla czytników ekranu i klawiatury */
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 420ms var(--ease-inout), visibility 0s 420ms;
  }
  .menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path 650ms var(--ease-expo), visibility 0s; }
  .menu-open { overflow: hidden; }
  .menu__nav { display: flex; flex-direction: column; gap: 6px; }
  .menu__nav a { display: block; overflow: hidden; overflow: clip; padding: .12em 0 .04em; font: 800 clamp(44px, 12vw, 88px)/.9 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
  /* zakładki wysuwają się spod krawędzi jak nagłówki, kaskadą */
  .menu__nav a span { display: inline-block; translate: 0 115%; transition: translate 300ms var(--ease-out); }
  .menu-open .menu__nav a span { translate: none; transition: translate 800ms var(--ease-expo) calc(140ms + var(--i, 0) * 60ms); }
  .menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; opacity: 0; transition: opacity 200ms var(--ease-out); }
  .menu-open .menu__foot { opacity: 1; transition: opacity 600ms var(--ease-out) 380ms; }
  .menu__lang { display: flex; gap: 8px; }
  .menu__lang a { padding: 10px 18px; border: 1px solid rgba(243, 239, 230, .3); border-radius: 48px; font: 700 12px/1 var(--font-display); letter-spacing: .04em; }
  .menu__lang a[aria-current] { background: var(--cream); border-color: var(--cream); color: var(--black); }
  .menu__mail { font: 500 clamp(18px, 5vw, 26px)/1.2 var(--font-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .menu__social { display: flex; gap: 24px; }
  .menu__social a { display: inline-flex; align-items: center; gap: 2px; }
  .menu__meta { font-size: 12px; line-height: 1.5; color: rgba(243, 239, 230, .6); }
  /* nagłówek nad otwartym panelem: przezroczysty, jasne logo, zamiast e-maila tylko × */
  .menu-open .site-header { background: transparent; box-shadow: none; transform: none; }
  .menu-open .site-header::before, .menu-open .site-header::after { display: none; }
  .menu-open .site-header__logo { mix-blend-mode: normal; color: var(--cream); }
  .menu-open .mail-pill { opacity: 0; pointer-events: none; }
  .menu-open .menu-button { background: transparent; }
}

/* nagłówek na stronie głównej: przezroczysty nad wideo; po przewinięciu (is-scrolled) dostaje jasne tło
   i wraca do mieszania z tłem, jak na pozostałych stronach */
.site-header--overlay:not(.is-scrolled) { background: none; }
/* nad wideo logo, menu i języki są po prostu białe (mieszanie bywało nieczytelne na jasnych klatkach) — na każdej szerokości */
.site-header--overlay:not(.is-scrolled) .site-header__logo, .site-header--overlay:not(.is-scrolled) .site-header__nav, .site-header--overlay:not(.is-scrolled) .lang-switch { mix-blend-mode: normal; color: #fff; }
/* przyciemnienie nad wideo: wyższe niż nagłówek, żeby zanikało płynnie.
   z-index: -1 — pod logo, menu i językami (nie są pozycjonowane, więc inaczej gradient przykrywałby je i szarzały) */
.site-header--overlay.is-scrolled::before { display: none; }
.site-header--overlay::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 200px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .4) 20%, rgba(0, 0, 0, .26) 40%, rgba(0, 0, 0, .13) 60%, rgba(0, 0, 0, .04) 80%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- Pigułka z adresem e-mail ---------- */
.mail-pill {
  position: relative; flex-shrink: 0;
  display: block; width: 186px; height: 40px;
  border-radius: 48px; background: var(--black); color: var(--pill-text);
  -webkit-tap-highlight-color: transparent; transition: scale 600ms var(--ease-spring);
}
/* sprężyste naciśnięcie (jak przyciski-pigułki) */
.mail-pill:active { scale: .95; transition: scale 90ms var(--ease-out); }
.mail-pill__avatars {
  position: absolute; left: 9px; top: 7.85px;
  display: flex; gap: 2.8px;
  transition: opacity 625ms var(--ease-spring);
}
.mail-pill__avatars img { width: 24.2px; height: 24.2px; border-radius: 50%; object-fit: cover; }
.mail-pill__text {
  position: absolute; left: 71px; top: 0; height: 40px;
  display: flex; align-items: center;
  font: 700 11px/normal var(--font-display); text-transform: uppercase; white-space: nowrap;
  transition: left 625ms var(--ease-spring);
}
.mail-pill__arrow {
  position: absolute; right: 15.6px; top: 12.6px; width: 14.85px; height: 14.85px;
  fill: #fff; opacity: 0;
  transition: opacity 625ms var(--ease-spring);
}
@media (hover: hover) {
  .mail-pill:hover .mail-pill__avatars { opacity: 0; }
  .mail-pill:hover .mail-pill__text { left: 17px; }
  .mail-pill:hover .mail-pill__arrow { opacity: 1; }
}

@media (max-width: 697px) {
  :root { --header-h: 62px; }
  .site-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
  /* logo nigdy się nie ściska: stałe proporcje i pełna szerokość od 320 px */
  .site-header__logo { flex-shrink: 0; width: 126px; height: auto; aspect-ratio: 1652.887 / 501.598; }
  .site-header__end { gap: 16px; }
  .mail-pill { width: 134px; min-width: 116px; }
  .mail-pill__avatars, .mail-pill__arrow { display: none; }
  .mail-pill__text { left: 0; right: 0; justify-content: center; }
  .js .site-header__end { gap: 8px; }
  .site-header.is-pill, .site-header--overlay.is-pill { top: 8px; width: calc(100% - 16px); height: 52px; padding: 6px; }
  .is-pill .site-header__logo { width: 104px; height: auto; }
}
/* bardzo wąskie ekrany (< 320 px): logo zmniejsza się proporcjonalnie, zamiast się ściskać */
@media (max-width: 319px) {
  .site-header__logo { flex-shrink: 1; min-width: 0; }
}

/* ==========================================================================
   Stopka
   ========================================================================== */
/* trzy grupy linków (strona · informacje · social), pod nimi logo na całą szerokość i wyśrodkowany copyright.
   Komputer: grupy w jednym rzędzie; tablet: trzy kolumny; telefon: dwie kolumny + social pod spodem.
   Stopka jest czarna na każdej stronie i wchodzi na treść zaokrąglonym brzegiem (jak karta z treścią na wideo na stronie głównej). */
.site-footer {
  position: relative; display: flex; flex-direction: column; gap: 40px;
  margin-top: -20px; padding: 44px var(--gutter) 24px; border-radius: 20px 20px 0 0;
  background: var(--black); color: var(--cream);
}
.site-footer__nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 48px; }
.site-footer__group { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer__group a { display: inline-flex; align-items: center; gap: 2px; }
.site-footer__copy { text-align: center; font-size: 10px; font-weight: 500; line-height: 1.5; }
/* Lublin i lokalna godzina (main.js) */
.clock { white-space: nowrap; }
/* logo na całą szerokość w gradiencie CAASUAL. Maska ma przezroczysty margines, a clip-path ucina 2 px przy krawędzi:
   bez tego przy animowanym gradiencie pod maską przeglądarka rysowała na krawędzi cienką kreskę */
.site-footer__mark { overflow: hidden; overflow: clip; margin-top: -8px; }
.site-footer__logo {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1684.887 / 533.598; margin: 0 -.95%; clip-path: inset(2px);
  -webkit-mask: url(/assets/img/logo-mask.svg) 0 0 / 100% 100% no-repeat; mask: url(/assets/img/logo-mask.svg) 0 0 / 100% 100% no-repeat;
}
.site-footer__logo::before { content: ""; position: absolute; z-index: -1; inset: -40% -12%; background: conic-gradient(from var(--spin-a, 0deg) at 50% 50%, var(--caas-conic)); }
/* wynurza się od dołu przy pierwszym pojawieniu (main.js: rise, is-in) */
.site-footer__mark.rise .site-footer__logo { translate: 0 102%; }
.site-footer__mark.rise.is-in .site-footer__logo { translate: none; transition: translate 1600ms var(--ease-expo); }

@media (max-width: 1380px) {
  .site-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__group { flex-direction: column; align-items: flex-start; }
  /* social media dosunięte do prawej krawędzi */
  .site-footer__social { justify-self: end; align-items: flex-end; }
  /* środkowa kolumna (UE, polityka, cookies) wyśrodkowana */
  .site-footer__group:nth-child(2) { justify-self: center; align-items: center; text-align: center; }
}

@media (max-width: 697px) {
  .site-footer { padding-top: 48px; }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  /* długie pozycje (np. „Polityka prywatności”) mogą przejść do drugiej linii zamiast wystawać */
  .site-footer__group { white-space: normal; }
  .site-footer__social { grid-column: 1 / -1; justify-self: start; flex-direction: row; }
  .site-footer__group:nth-child(2) { justify-self: start; align-items: flex-start; text-align: left; }
}

/* ==========================================================================
   Strona główna
   ========================================================================== */
/* pierwszy ekran strony głównej to samo wideo na całą wysokość (na każdej szerokości, nagłówek leży na nim);
   karta z hasłem i stopka wjeżdżają po przewinięciu — u dołu ekranu widać tylko zaokrąglony brzeg karty.
   svh: wysokość przy widocznych paskach Safari, więc wideo nie zmienia rozmiaru, gdy paski chowają się przy przewijaniu */
.home { display: flex; flex-direction: column; }
.home__hero { position: relative; z-index: -1; display: block; height: 100vh; height: 100svh; overflow: hidden; }
.home__hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* iOS (np. w trybie niskiego zużycia energii) pokazuje przycisk play, gdy blokuje autostart — chowamy go */
.home__hero video::-webkit-media-controls, .home__hero video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* karta z hasłem po przewinięciu: duże hasło na całą szerokość, pod nim rysowana linia i dwie kolumny —
   odznaka DesignRush po lewej, lead z przyciskiem po prawej. Dużo powietrza, bo nie musi się już mieścić w pierwszym ekranie. */
.home__intro {
  position: relative; margin-top: -20px; padding: 128px var(--gutter) 164px; border-radius: 20px 20px 0 0; background: var(--bg);
  /* hasło zawsze w 2 liniach (podział za kropką): czcionka rośnie z szerokością ekranu, ~12,8em to najdłuższe zdanie */
  --title-size: min(140px, calc((100vw - 2 * var(--gutter)) / 12.8));
}
.home__title { font: 800 var(--title-size)/.87 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.home__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "badge about"; column-gap: 32px;
  margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(29, 29, 29, .16);
}
.home__about { grid-area: about; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.home__lead { max-width: 34em; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.4; }
.home__badge { grid-area: badge; position: relative; align-self: start; width: 104px; aspect-ratio: 159 / 168; }
.home__badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1024px) {
  .home__intro { padding-top: 96px; padding-bottom: 128px; }
  .home__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); margin-top: 48px; }
  .home__badge { width: 88px; }
}

@media (max-width: 697px) {
  /* telefon: hasło większe, w czterech liniach; pod linią najpierw lead z przyciskiem, odznaka na końcu */
  .home__intro { padding: 72px var(--gutter) 100px; }
  /* najdłuższe słowo („DOPRACOWUJEMY”) ma ok. 7,4 em — rozmiar liczony tak, żeby zawsze mieściło się w marginesach */
  .home__title { font-size: min(60px, calc((100vw - 2 * var(--gutter)) / 7.6)); line-height: .9; white-space: normal; text-wrap: balance; }
  .home__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "about" "badge"; row-gap: 40px; margin-top: 40px; padding-top: 24px; }
  .home__about { gap: 24px; }
  .home__lead { font-size: 17px; }
  .home__badge { width: 64px; }
}

/* ==========================================================================
   Nagłówek treści (portfolio, projekty, strony tekstowe)
   ========================================================================== */
.page-head { display: flex; flex-direction: column; gap: 32px; padding: 139px var(--gutter) 24px; }
.page-title {
  font: 700 48px/.87 var(--font-display); letter-spacing: -.01em; text-transform: uppercase;
  overflow-wrap: break-word;
}
.back-link { align-self: flex-start; color: var(--black); }
.back-link .icon { width: 22.63px; height: 22.63px; }

/* ==========================================================================
   Portfolio — lista projektów
   ========================================================================== */
.portfolio-head { padding: 139px var(--gutter) 24px; }
.portfolio-list { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--gutter); }
.card { position: relative; display: block; height: 742px; }
.card__media { position: absolute; inset: 0 0 110px; overflow: hidden; transition: opacity 300ms var(--ease-out), background-color 300ms var(--ease-out) 450ms; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* pojawienie i wywołanie z rozmycia (odsłona dokłada transform w .card-rv.is-in) */
  transition: opacity 600ms var(--ease-out), filter 1300ms var(--ease-soft);
}
/* zdjęcie jeszcze się wczytuje (klasa z main.js): spokojny kolor zamiast pustego pola, potem zdjęcie pojawia się miękko.
   Kolor znika dopiero po pojawieniu się zdjęcia, bo część zdjęć ma przezroczyste tło. Bez „transition: none” — wyłączało
   ono odsłonę kart, które wjeżdżały w kadr w trakcie wczytywania (jedne karty płynęły, inne przeskakiwały). */
.card__media.is-loading { background-color: #edebe5; }
.card__media.is-loading img { opacity: 0; }
.card__text { position: absolute; left: 0; bottom: 55px; display: flex; flex-direction: column; gap: 4px; }
.card__title { font: 700 20px/.87 var(--font-display); letter-spacing: -.03em; text-transform: uppercase; color: var(--black); }
.card__sub { font-size: 14px; line-height: 1.25; color: rgba(0, 0, 0, .64); white-space: nowrap; }

@media (min-width: 1981px) { .portfolio-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } }

@media (max-width: 1380px) {
  .portfolio-head .page-title { font: 700 56px/1 var(--font-body); font-stretch: 75%; letter-spacing: 0; }
  .card--short { height: 687px; }
}

@media (max-width: 697px) {
  .portfolio-head { padding: 152px var(--gutter) 24px; }
  .portfolio-head .page-title { font-size: 40px; }
  /* od dołu zapas na stopkę, która nachodzi na treść o 20 px (inaczej zasłaniała opis ostatniej karty) */
  .portfolio-list { gap: 40px; padding: 8px 8px 72px; }
  .card, .card--short { height: auto; display: flex; flex-direction: column; gap: 16px; }
  .card__media { position: relative; inset: auto; height: 500px; }
  .card__text { position: static; padding: 0 8px; }
  .card__sub { white-space: normal; }
}

/* ==========================================================================
   Strona projektu
   ========================================================================== */
.project-desc { display: flex; gap: 32px; }
.project-desc > div { flex: 1 1 0; min-width: 0; }
.project-desc p { font-size: 16px; line-height: 1.5; opacity: .7; }
.project-desc p + p { margin-top: 24px; }
/* etykiety sekcji opisu (Wyzwanie / Co zrobiliśmy / Efekt) — wygląd jak „Usługi w tym projekcie” */
.project-desc__label { margin-bottom: 8px; }
.project-desc p + .project-desc__label { margin-top: 32px; }
.project-desc a { text-decoration: underline; text-underline-offset: 3px; }

.gallery { display: flex; flex-direction: column; gap: 8px; padding: 64px 8px; }
.gallery > * { order: var(--o, 0); }
/* proporcje: --ar (desktop), --ar-t (tablet), --ar-m (telefon); "auto" = wysokość z zawartości */
.gallery__media, .gallery__pair, .gallery__split { aspect-ratio: var(--ar); }
.gallery__media { width: 100%; height: auto; object-fit: cover; transition: background-color 300ms var(--ease-out); }
img.gallery__media { transition: background-color 300ms var(--ease-out), filter 1300ms var(--ease-soft); }
img.gallery__media.rvc.is-in { transition: background-color 300ms var(--ease-out), opacity 500ms linear var(--rd, 0ms), clip-path 1400ms var(--ease-expo) var(--rd, 0ms), filter 1300ms var(--ease-soft); }
/* zdjęcie galerii jeszcze się wczytuje (main.js): spokojny kolor w jego miejscu */
.gallery__media.is-loading { background-color: #edebe5; }
.gallery__pair { display: flex; align-items: center; gap: 8px; }
.gallery__pair > * { flex: 1 1 0; min-width: 0; order: var(--o, 0); }
/* zmienne proporcji kontenera nie mogą przechodzić na zdjęcia w środku */
.gallery__pair > *, .gallery__split > * { --ar-t: initial; --ar-m: initial; }
.gallery__split { position: relative; overflow: hidden; }
.gallery__split > * { position: absolute; top: 0; width: 50%; height: 100%; object-fit: cover; }
.gallery__split > :last-child { left: 50%; }

@media (max-width: 1380px) {
  .project-desc { flex-direction: column; gap: 24px; }
  .gallery__media, .gallery__pair, .gallery__split { aspect-ratio: var(--ar-t, var(--ar)); }
  .gallery__pair > * { order: var(--o-t, var(--o, 0)); }
}

@media (max-width: 697px) {
  .gallery > * { order: var(--o-m, var(--o, 0)); }
  .gallery__media, .gallery__pair, .gallery__split { aspect-ratio: var(--ar-m, var(--ar-t, var(--ar))); }
  .gallery__pair { flex-direction: column; align-items: stretch; aspect-ratio: auto; }
  .gallery__pair > * { flex: none; }
}

/* ==========================================================================
   Strony tekstowe (Fundusze Europejskie, polityka prywatności)
   ========================================================================== */
.text-page { display: flex; flex-direction: column; align-items: center; padding: 139px var(--gutter) 120px; }
.text-page__inner { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: var(--container); }
/* długie teksty: najwyżej ok. 68 znaków w linii (nagłówki, akordeony i karty zajmują cały kontener;
   teksty na stronach UE i polityki prywatności wypełniają cały kontener) */
.lead, .acc__body p, .about__text, .lp__final-text, .ai-body__text { max-width: 68ch; }
.text-page .page-title { text-align: left; }
.prose { font-size: 16px; line-height: 1.25; opacity: .7; }
.prose p + p, .prose p + h2, .prose h2 + p, .prose h2 + h2 { margin-top: 1.25em; }
/* dodatkowe puste linie przed akapitem */
.prose .gap-2 { margin-top: 2.5em; }
.prose .gap-3 { margin-top: 3.75em; }
.prose h2 { font-weight: 700; text-transform: uppercase; }
.prose strong { font-weight: 700; }
.text-page__section { display: flex; flex-direction: column; gap: 32px; }
.text-page__section + .text-page__section { margin-top: 64px; }
.text-page__logos { width: 614px; height: 85px; object-fit: cover; }

@media (max-width: 1380px) {
  .text-page { padding-bottom: 24px; }
  /* strona kończy się tekstem (UE, polityka, blog): odstęp przed stopką, która nachodzi na treść o 20 px */
  main.text-page { padding-bottom: 96px; }
}

@media (max-width: 697px) {
  /* od 375 px w górę bez zmian (48 px); na węższych telefonach (do 40 px przy 320) mieszczą się długie słowa
     w tytułach projektów i stron tekstowych, np. MERYTORYCZNIE, SMARTFOODIES, DATENSCHUTZ- */
  :is(.page-head, .text-page) .page-title { font-size: clamp(36px, calc(14.55vw - 6.55px), 48px); }
  .text-page__logos { width: 100%; height: auto; aspect-ratio: 1080 / 150; }
  main.text-page { padding-bottom: 72px; }
}

/* ==========================================================================
   Strony O nas i Usługi
   ========================================================================== */
.lead { font-size: 20px; line-height: 1.35; }
.section-title { font: 700 32px/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }

/* lista tagów (zakres usługi, typy klientów) */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 6px 12px; border: 1px solid rgba(29, 29, 29, .2); border-radius: 48px;
  font-size: 12px; line-height: 1.4; text-transform: uppercase;
}

/* przycisk-pigułka (CTA, 404) */
/* jak pigułka z e-mailem w nagłówku: po najechaniu tekst przesuwa się w lewo i pojawia się strzałka
   (suma paddingów stała, więc przycisk nie zmienia szerokości) */
.pill-button {
  position: relative; display: inline-flex; align-items: center; align-self: flex-start;
  height: 40px; padding: 0 20px; border-radius: 48px;
  background: var(--black); color: var(--pill-text); text-decoration: none;
  font: 700 12px/1 var(--font-display); text-transform: uppercase; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: padding 625ms var(--ease-spring), scale 600ms var(--ease-spring);
}
/* sprężyste naciśnięcie: ugina się pod palcem / kursorem i wraca sprężyście
   (iOS stosuje :active dzięki nasłuchowi touchstart w main.js) */
.pill-button:active { scale: .95; transition: padding 625ms var(--ease-spring), scale 90ms var(--ease-out); }
.pill-button svg {
  position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; fill: currentColor;
  opacity: 0; transition: opacity 625ms var(--ease-spring);
}
@media (hover: hover) {
  .pill-button:hover { padding: 0 32px 0 8px; }
  .pill-button:hover svg { opacity: 1; }
}
/* na dotyku nie ma najechania: strzałka widoczna od razu */
@media (hover: none) {
  .pill-button { padding: 0 32px 0 16px; }
  .pill-button svg { opacity: 1; }
}

/* ---------- Akordeony (usługi, FAQ) ---------- */
.accordion { display: flex; flex-direction: column; }
.acc { border-top: 1px solid rgba(29, 29, 29, .15); scroll-margin-top: calc(var(--header-h) + 16px); }
.accordion > .acc:last-child { border-bottom: 1px solid rgba(29, 29, 29, .15); }
/* lista usług kończy się bez kreski (przechodzi w czarną sekcję); FAQ ją zachowuje */
.accordion:not(.accordion--faq) > .acc:last-child { border-bottom: 0; }
/* treść każdego akordeonu (usługi i FAQ) wcięta jak w wyróżnionym (AI), żeby tytuły i kółka były w jednej linii */
.accordion > .acc { padding: 0 24px; }
.acc__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; row-gap: 6px;
  padding: 24px 0; cursor: pointer; list-style: none;
}
.acc__head::-webkit-details-marker { display: none; }
.acc__title { font: 700 28px/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.acc__sub { grid-column: 1; font-size: 14px; line-height: 1.35; color: rgba(29, 29, 29, .64); }
/* plus, który po rozwinięciu obraca się w x */
.acc__icon { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid currentColor; transition: transform 300ms var(--ease-out), scale 500ms var(--ease-spring); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] > .acc__head .acc__icon { transform: rotate(45deg); }
/* płynne zwijanie (main.js): treść jeszcze się chowa, a plus już wraca */
.acc.is-closing > .acc__head .acc__icon { transform: none; }
/* sprężyste naciśnięcie: plus „wciska się” pod palcem */
.acc__head { -webkit-tap-highlight-color: transparent; }
.acc__head:active .acc__icon { scale: .85; transition: transform 300ms var(--ease-out), scale 90ms var(--ease-out); }
.acc__body { display: flex; flex-direction: column; gap: 16px; padding: 0 56px 32px 0; }
.acc__body p { font-size: 16px; line-height: 1.5; color: rgba(29, 29, 29, .75); }
.acc__more { font-size: 14px; }
.acc__body a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .acc__head:hover .acc__title { opacity: .7; } }

/* FAQ: mniejsze tytuły */
.accordion--faq .acc__title { font: 600 18px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; }

/* ---------- Gradient CAASUAL: warstwa i ruch ---------- */
/* Warstwa z gradientem (::before kart AI i ikon, ::after identyfikatorów) jest większa od rodzica o zapas na ruch
   (--fx-ox w poziomie, --fx-oy w pionie). Środek gradientu podaje się jako ułamek rozmiaru rodzica (--fx-cx/--fx-cy),
   tu jest przeliczany na współrzędne warstwy. Obrót zawsze wokół środka: promienie się przesuwają, punkt zbiegu stoi. */
.acc--featured::before, .ai-hero::before, .model__icon::before, .badge__top::after {
  --fx-px: calc(var(--fx-cx) * 100% + var(--fx-ox) * (1 - 2 * var(--fx-cx)));
  --fx-py: calc(var(--fx-cy) * 100% + var(--fx-oy) * (1 - 2 * var(--fx-cy)));
  content: ""; position: absolute; z-index: -1; inset: 0; margin: calc(-1 * var(--fx-oy)) calc(-1 * var(--fx-ox));
  background: conic-gradient(from calc(var(--fx-from, 0deg) + var(--spin-a, 0deg)) at var(--fx-px) var(--fx-py), var(--caas-conic));
  transform-origin: var(--fx-px) var(--fx-py); pointer-events: none;
}
/* karty AI (wyróżniona usługa, hero landing page): gradient obrócony o 90° — ciemna zieleń z lewej (pod tekstem),
   jasne kolory z prawej. Warstwa się nie przesuwa (odblask obraca tylko kąt stożka), więc nie potrzebuje zapasu. */
.acc--featured, .ai-hero { --fx-ox: 0px; --fx-oy: 0px; --fx-cy: .5; --fx-from: -90deg; }

/* Odblask: przy pojawieniu się gradient zakręca się i coraz wolniej dojeżdża do swojego położenia — jak światło na metalu —
   a potem stoi (main.js: spin-wait → spin-go; z myszą najechanie daje krótszy odblask). Obraca się kąt stożka (--spin-a),
   a nie warstwa, więc rogi kart nigdy się nie odsłaniają. Bez @property (iOS < 16.4) gradient po prostu stoi. */
@property --spin-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.spin-wait:not(.badge__top)::before, .badge__top.spin-wait::after { --spin-a: -120deg; }
.model__icon.spin-wait::before { --spin-a: -220deg; }
/* karty z białym tekstem kręcą się tak, żeby pod tekstem przechodziły tylko ciemne tony (rdza → zielenie) */
:is(.ai-hero, .acc--featured).spin-wait::before { --spin-a: 70deg; }
.spin-go:not(.badge__top)::before, .badge__top.spin-go::after { animation: spin-lg 3600ms var(--ease-expo) var(--spin-d, 0ms) both; }
.model__icon.spin-go::before { animation-name: spin-sm; animation-duration: 3000ms; }
:is(.ai-hero, .acc--featured).spin-go::before { animation-name: spin-tx; }
.spin-hover::before { animation: spin-hv 2200ms var(--ease-expo) both; }
.acc--featured.spin-hover::before { animation-name: spin-hvtx; }
@keyframes spin-lg { from { --spin-a: -120deg; } to { --spin-a: 0deg; } }
@keyframes spin-sm { from { --spin-a: -220deg; } to { --spin-a: 0deg; } }
@keyframes spin-tx { from { --spin-a: 70deg; } to { --spin-a: 0deg; } }
@keyframes spin-hv { from { --spin-a: -70deg; } to { --spin-a: 0deg; } }
@keyframes spin-hvtx { from { --spin-a: 40deg; } to { --spin-a: 0deg; } }
@media (max-width: 697px) {
  /* telefon: środek gradientu jest na dole karty, więc ciemne tony zostają pod tekstem przy obrocie w drugą stronę */
  :is(.ai-hero, .acc--featured).spin-wait::before { --spin-a: -60deg; }
  @keyframes spin-tx { from { --spin-a: -60deg; } to { --spin-a: 0deg; } }
}
@keyframes caas-pop { from { scale: .4; opacity: 0; } 40% { opacity: 1; } to { scale: 1; opacity: 1; } }
@keyframes caas-ring { from { scale: 1; opacity: .9; } to { scale: 2.6; opacity: 0; } }

/* wyróżniona usługa (AI workflows): gradient CAASUAL */
.acc--featured {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  margin-bottom: 16px; padding: 0 24px; border: 0; border-radius: 16px;
  background: #14432c; color: #fff; --fx-cx: .78;
}
.acc--featured + .acc { border-top: 0; }
.acc--featured .acc__sub { color: rgba(255, 255, 255, .85); }
.acc--featured .acc__body p { color: rgba(255, 255, 255, .92); }
.acc--featured .acc__body { padding-right: 30%; }
/* pierwsze zdanie AI workflows: ten sam rozmiar, tylko mocniejsze */
.acc--featured .acc__body p:first-child { font-weight: 500; color: #fff; }
.acc--featured .tags li { border-color: rgba(255, 255, 255, .55); }
.acc--featured .acc__icon { border-color: #fff; background: transparent; color: #fff; }

/* sposoby rozliczenia */
/* trzy opcje do wyboru: karty z ikoną w gradiencie CAASUAL */
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.model {
  display: flex; flex-direction: column; gap: 8px; padding: 24px 20px; border-radius: 16px; background: #fff;
  -webkit-tap-highlight-color: transparent; transition: transform 300ms var(--ease-out), scale 600ms var(--ease-spring);
}
@media (hover: hover) { .model:hover { transform: translateY(-4px); } }
/* sprężyste naciśnięcie z małym opóźnieniem, żeby karta nie „mrugała” przy rozpoczęciu przewijania palcem */
.model:active { scale: .98; transition: transform 300ms var(--ease-out), scale 120ms var(--ease-out) 60ms; }
/* ikona: wycinek gradientu CAASUAL w kółku (środek gradientu poza kółkiem lub przy jego brzegu).
   Przy pojawieniu ikony łapią odblask kaskadą, a najechanie / dotknięcie karty przechyla gradient jak szkło. */
.model__icon {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%;
  background: #14432c; color: #fff;
  --fx-ox: 48px; --fx-oy: 48px; --fx-cx: 1.172; --fx-cy: .468;
}
.model__icon::before { transform: rotate(var(--fx-r, 0deg)); transition: transform 900ms var(--ease-spring); }
.model:nth-child(2) .model__icon { --fx-cx: .1; --fx-cy: .901; }
.model:nth-child(3) .model__icon { --fx-cx: .66; --fx-cy: 1.109; }
.model:active .model__icon { --fx-r: 20deg; }
.model:active .model__icon::before { transition-delay: 60ms; }
@media (hover: hover) { .model:hover .model__icon { --fx-r: 20deg; } }
.model__icon svg { width: 22px; height: 22px; }
.model h3 { font: 700 18px/1.1 var(--font-display); text-transform: uppercase; }
.model p { font-size: 14px; line-height: 1.45; color: rgba(29, 29, 29, .75); }

/* ---------- Identyfikatory założycieli ---------- */
/* obie karty mają równą wysokość (rozciągnięte w rzędzie); drugą obniża top, nie margines, bo margines
   rozciągał tylko pierwszą, a druga ucinała treść (logo w rogu) */
.founders { display: flex; justify-content: center; padding: 24px 0 32px; }
.badge {
  /* clip (w przeciwieństwie do hidden) nie blokuje wzrostu karty, gdy treść nie mieści się w proporcjach */
  position: relative; display: flex; flex-direction: column; overflow: hidden; overflow: clip;
  width: min(280px, 46vw); aspect-ratio: 280 / 384; border-radius: 18px;
  background: var(--ink); color: var(--cream); text-align: left;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  transform: rotate(-4deg);
}
.badge + .badge { top: 16px; margin-left: -12px; transform: rotate(3deg); }
/* górna część w gradiencie: 58% wysokości karty w proporcjach 280 × 384 */
.badge__top {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 auto; aspect-ratio: 280 / 222.72;
  display: grid; place-items: center;
  --fx-ox: 56px; --fx-oy: 56px; --fx-cx: .74; --fx-cy: .356;
}
.badge + .badge .badge__top { --fx-cx: .962; --fx-cy: .829; }
/* smycz (main.js): gdy identyfikator się kołysze, gradient prawie stoi — jak odbicie światła na folii */
.badge__top::after { transform: translate(var(--fx-x, 0px), 0) rotate(var(--fx-r, 0deg)); }
/* otwór na smycz */
.badge__top::before { content: ""; position: absolute; top: 12px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg); }
.badge__photo { width: 54%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #d6d4d0; }
.badge__body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.badge__name { font: 800 28px/.95 var(--font-display); text-transform: uppercase; }
.badge__text { max-width: 80%; font-size: 13px; line-height: 1.35; }
.badge__mark { position: absolute; right: 18px; bottom: 18px; width: 20px; height: 26px; fill: var(--cream); }

@media (max-width: 697px) {
  .lead { font-size: 18px; }
  .section-title { font-size: 26px; }
  .acc__title { font-size: 22px; }
  .acc__body { padding-right: 0; }
  .accordion > .acc { padding: 0 16px; }
  .acc--featured .acc__body { padding-right: 0; }
  /* na telefonie bez obrotu: ciemna zieleń u góry, środek gradientu na dole karty */
  .acc--featured { --fx-cx: .5; --fx-cy: 1; --fx-from: 0deg; }
  .models { grid-template-columns: minmax(0, 1fr); }
  .badge__name { font-size: 20px; }
  .badge__text { max-width: 86%; font-size: 11px; }
  .badge + .badge { margin-left: -6px; }
  .badge__body { padding: 12px 12px 36px; }
  .badge__mark { right: 12px; bottom: 10px; width: 15px; height: 20px; }
}

/* ==========================================================================
   Strona 404
   ========================================================================== */
.not-found { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; min-height: calc(var(--vh) - 80px); padding: calc(var(--header-h) + 48px) var(--gutter) 48px; text-align: center; }
.not-found__code { display: flex; align-items: center; font: 600 clamp(120px, 20vw, 260px)/1 var(--font-body); letter-spacing: -.02em; color: var(--ink); }
/* zero w nawiasach jak w logo (CAAS)UAL */
.not-found__zero { position: relative; display: grid; place-items: center; width: .82em; height: 1.08em; margin: 0 .04em; }
.not-found__zero svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; }
.not-found__text { font-size: 20px; line-height: 1.35; }
.not-found .pill-button { align-self: center; }

/* ---------- O nas: wycentrowany układ wokół identyfikatorów ---------- */
.about { display: flex; flex-direction: column; align-items: center; gap: 120px; padding: 139px var(--gutter) 120px; text-align: center; }
.about > * { width: 100%; max-width: var(--container); }
.about__hero, .about__section { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.about__lead { max-width: 760px; font-size: 22px; line-height: 1.35; }
.about__kicker { font-size: 12px; font-weight: 600; line-height: 2; letter-spacing: .04em; text-transform: uppercase; color: rgba(29, 29, 29, .6); }
.about__hero .about__kicker { margin-top: 40px; }
.about .founders { padding-top: 8px; }
.about__statement { max-width: 820px; font: 700 40px/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.about__statement.about__statement--small { max-width: 760px; font: 400 20px/1.4 var(--font-body); text-transform: none; letter-spacing: 0; }
.about__text { max-width: 720px; font-size: 16px; line-height: 1.5; color: rgba(29, 29, 29, .75); }
.about__text a, .about__note a { text-decoration: underline; text-underline-offset: 3px; }
.about__note { max-width: 620px; margin-top: 48px; font-size: 13px; line-height: 1.5; color: rgba(29, 29, 29, .6); }
.about__card { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 760px; padding: 32px; border-radius: 16px; background: #fff; text-align: left; }
.about__card-title { font: 700 32px/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.about__card > p:not(.about__kicker) { font-size: 16px; line-height: 1.5; color: rgba(29, 29, 29, .75); }
.about__card .tags { margin-top: auto; padding-top: 8px; }
.about .models { width: 100%; text-align: left; }
.tags--center { justify-content: center; max-width: 820px; }
.tags a { display: block; margin: -6px -12px; padding: 6px 12px; border-radius: 48px; transition: background 200ms var(--ease-out), color 200ms var(--ease-out); }
@media (hover: hover) { .tags a:hover { background: var(--ink); color: var(--pill-text); } }

@media (max-width: 1380px) {
  .about { gap: 96px; }
  .about__statement { font-size: 34px; }
}
@media (max-width: 697px) {
  .about { gap: 72px; padding-top: 112px; padding-bottom: 72px; }
  .about__lead { font-size: 18px; }
  .about__hero .about__kicker { margin-top: 24px; }
  .about__statement { font-size: 26px; }
  .about__statement.about__statement--small { font-size: 17px; }
  .about__card { padding: 24px 20px; }
  .about__card-title { font-size: 26px; }
}

/* ---------- Usługi: rozliczenia i FAQ na czarnym tle aż do dołu strony ---------- */
.dark-band { padding-top: 96px; background: var(--black); color: var(--cream); }
.dark-band .model { background: rgba(255, 255, 255, .07); }
.dark-band .model p, .dark-band .acc__body p { color: rgba(243, 239, 230, .75); }
.dark-band .acc, .dark-band .accordion > .acc:last-child { border-color: rgba(243, 239, 230, .2); }
@media (max-width: 1380px) { .dark-band { padding-top: 72px; padding-bottom: 72px; } }
@media (max-width: 697px) { .dark-band { padding-top: 56px; } }

/* ==========================================================================
   Baner cookies (CookieConsent v3) w stylu strony
   ========================================================================== */
#cc-main {
  --cc-font-family: var(--font-body);
  --cc-bg: var(--bg);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: rgba(29, 29, 29, .72);
  --cc-link-color: var(--ink);
  --cc-modal-border-radius: 16px;
  --cc-btn-border-radius: 48px;
  --cc-btn-primary-bg: var(--black);
  --cc-btn-primary-color: var(--pill-text);
  --cc-btn-primary-border-color: var(--black);
  --cc-btn-primary-hover-bg: #333;
  --cc-btn-primary-hover-color: var(--pill-text);
  --cc-btn-primary-hover-border-color: #333;
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: rgba(29, 29, 29, .3);
  --cc-btn-secondary-hover-bg: rgba(29, 29, 29, .06);
  --cc-btn-secondary-hover-color: var(--ink);
  --cc-btn-secondary-hover-border-color: var(--ink);
  --cc-separator-border-color: rgba(29, 29, 29, .12);
  --cc-toggle-on-bg: var(--black);
  --cc-toggle-off-bg: rgba(29, 29, 29, .35);
  --cc-toggle-readonly-bg: rgba(29, 29, 29, .2);
  --cc-cookie-category-block-bg: #fff;
  --cc-cookie-category-block-border: rgba(29, 29, 29, .08);
  --cc-cookie-category-block-hover-bg: #fff;
  --cc-cookie-category-block-hover-border: rgba(29, 29, 29, .2);
  --cc-cookie-category-expanded-block-bg: #fff;
  --cc-footer-bg: var(--bg);
  --cc-footer-border-color: rgba(29, 29, 29, .12);
  --cc-overlay-bg: rgba(0, 0, 0, .55);
}
#cc-main .cm__title, #cc-main .pm__title { font: 700 22px/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
#cc-main .pm__section-title { font-weight: 600; }
#cc-main .cm__btn, #cc-main .pm__btn { font: 700 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
#cc-main a, #cc-main .cc__link { text-decoration: underline; text-underline-offset: 3px; background: none; }

/* projekt → usługi (linki otwierają właściwy akordeon na stronie Usług) */
.project-services { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
:is(.project-services__label, .project-desc__label) { font-size: 12px; font-weight: 600; line-height: 2; letter-spacing: .04em; text-transform: uppercase; color: rgba(29, 29, 29, .6); }

/* ==========================================================================
   Landing page AI design workflows
   ========================================================================== */
.pill-button--light { background: #fff; color: var(--black); }
.acc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc__actions .tags { display: contents; }
.acc--featured .acc__actions .pill-button { height: 34px; }

/* hero: gradient CAASUAL obrócony jak w karcie AI na stronie Usług (warstwa i ruch: „Gradient CAASUAL” wyżej) */
.ai-hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 24px;
  min-height: min(640px, 72vh); margin: 0 var(--gutter); padding: 64px 48px;
  border-radius: 16px; background: #14432c; color: #fff; --fx-cx: .92;
}
.ai-hero__kicker { font-size: 12px; line-height: 2; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.ai-hero__title { max-width: 820px; font: 700 56px/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.ai-hero__lead { max-width: 640px; font-size: 20px; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.ai-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ai-hero__note { font-size: 13px; color: rgba(255, 255, 255, .8); }
/* odstęp pod nagłówkiem jako padding (margines hero scalałby się z .page i przesuwał nagłówek) */
.lp { display: block; padding-top: calc(var(--header-h) + 16px); }
.lp__body { padding-top: 96px; }
/* kotwice (linki z bloga do sekcji i filarów): cel nie chowa się pod nagłówkiem */
.lp [id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.lp__body .text-page__section + .text-page__section { margin-top: 96px; }
.lp__body .pill-button { margin-top: 8px; }

/* ból: lista z przekreślonymi kółkami */
.pains { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pains li { position: relative; padding: 20px 20px 20px 56px; border-radius: 16px; background: #fff; font-size: 16px; line-height: 1.45; }
.pains li::before { content: "×"; position: absolute; left: 18px; top: 18px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; line-height: 1; }

/* rezultaty: ta sama siatka co „ból”, ale ze znacznikiem w zieleni z gradientu */
.gains { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gains li { position: relative; padding: 20px 20px 20px 56px; border-radius: 16px; background: #fff; font-size: 16px; line-height: 1.45; }
.gains li::before { content: "✓"; position: absolute; left: 18px; top: 18px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #14432c; color: #fff; font-size: 13px; line-height: 1; }

/* przykłady z rynku: liczba, krótki opis i link do wpisu na blogu */
.lp__text { max-width: 68ch; font-size: 18px; line-height: 1.5; color: rgba(29, 29, 29, .75); }
.facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fact { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: 16px; background: #fff; }
.fact__num { font: 700 28px/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.fact p { font-size: 15px; line-height: 1.45; color: rgba(29, 29, 29, .75); }
.fact__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 12px; line-height: 2; letter-spacing: .04em; text-transform: uppercase; }
.fact__link svg { width: 12px; height: 12px; fill: currentColor; transition: translate 300ms var(--ease-out); }
@media (hover: hover) { .fact__link:hover svg { translate: 3px 0; } }

.models--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.models--4 .model:nth-child(4) .model__icon { --fx-cx: -.14; --fx-cy: .18; }

.lp__why .section-title { font: 400 12px/2 var(--font-body); letter-spacing: .04em; color: rgba(29, 29, 29, .6); }
.lp__statement { max-width: 860px; font: 700 34px/1.05 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }

/* proces: numerowane kroki */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.steps li { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(29, 29, 29, .2); }
.steps li::before { counter-increment: step; content: "0" counter(step); font: 700 32px/1 var(--font-display); margin-bottom: 8px; }
.steps h3 { font: 700 18px/1.1 var(--font-display); text-transform: uppercase; }
.steps p { font-size: 14px; line-height: 1.45; color: rgba(29, 29, 29, .75); }

.lp__proof-title { font-size: 12px; font-weight: 600; line-height: 2; letter-spacing: .04em; text-transform: uppercase; color: rgba(29, 29, 29, .6); }
.lp__proof-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lp__badge { width: 76px; height: auto; flex-shrink: 0; }

/* akcja końcowa: rozmowa (kalendarz) albo krótki formularz */
.lp__final-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.lp__final-main { display: flex; flex-direction: column; gap: 24px; }
.lp__final-text { font-size: 18px; line-height: 1.45; color: rgba(243, 239, 230, .8); }
.lp-form { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.lp-form__title { font: 700 18px/1.1 var(--font-display); text-transform: uppercase; }
.lp-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(243, 239, 230, .8); }
.lp-form__field input, .lp-form__field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(243, 239, 230, .25); border-radius: 12px;
  background: transparent; color: var(--cream); font: 16px/1.4 var(--font-body); resize: vertical;
}
.lp-form__field input:focus, .lp-form__field textarea:focus { outline: none; border-color: var(--cream); }
.lp-form__field ::placeholder { color: rgba(243, 239, 230, .4); }
.lp-form button { cursor: pointer; border: 0; }
.lp-form__note, .lp-form__status { font-size: 12px; line-height: 1.5; color: rgba(243, 239, 230, .6); }
.lp-form__note a { text-decoration: underline; }
.lp-form__status:empty { display: none; }
.lp-form__status { font-size: 14px; color: var(--cream); }
.lp-form__hp { position: absolute; left: -9999px; }
.lp-form--sent > :not(.lp-form__success) { display: none; }
.lp-form__success { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 0; }
/* rozkwit: ikona wskakuje sprężyście, a od niej raz rozchodzą się dwa pierścienie gradientu */
.lp-form__success .model__icon { margin-bottom: 4px; animation: caas-pop 900ms var(--ease-spring) both; }
.lp-form__success::before, .lp-form__success::after {
  content: ""; position: absolute; left: 0; top: 12px; width: 48px; height: 48px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(at 117.2% 46.8%, var(--caas-conic));
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%, #000 98%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 78%, #000 80%, #000 98%, transparent 100%);
  opacity: 0; animation: caas-ring 1400ms cubic-bezier(.16, 1, .3, 1) 120ms both;
}
.lp-form__success::after { animation-delay: 320ms; }
.lp-form__success-title { font: 700 26px/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.lp-form__success p { font-size: 16px; line-height: 1.5; color: rgba(243, 239, 230, .8); }
.lp-form__success strong { color: var(--cream); font-weight: 600; }

@media (max-width: 1380px) {
  .ai-hero__title { font-size: 46px; }
  .models--4, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp__final-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 697px) {
  .lp { padding-top: calc(var(--header-h) + 8px); }
  .ai-hero { min-height: 0; margin: 0 8px; padding: 40px 20px; }
  /* telefon: bez obrotu, środek gradientu na dole karty */
  .ai-hero { --fx-cx: .5; --fx-cy: 1; --fx-from: 0deg; }
  .ai-hero__title { font-size: 32px; }
  .ai-hero__lead { font-size: 17px; }
  .lp__body { padding-top: 56px; }
  .lp__body .text-page__section + .text-page__section { margin-top: 64px; }
  .pains, .gains, .facts, .models--4, .steps { grid-template-columns: minmax(0, 1fr); }
  .fact__num { font-size: 24px; }
  .lp__text { font-size: 17px; }
  .lp__statement { font-size: 26px; }
  .lp__proof-row { flex-direction: column; align-items: flex-start; }
  .lp-form { padding: 20px; }
}

/* ==========================================================================
   Blog (lista wpisów, wpis; lista wpisów także na landing page AI)
   ========================================================================== */
.post-meta { font-size: 12px; line-height: 2; letter-spacing: .04em; text-transform: uppercase; color: rgba(29, 29, 29, .6); }
.post-meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* lista wpisów: wiersze jak akordeony (kreska, tytuł, kółko ze strzałką) */
.post-list { list-style: none; display: flex; flex-direction: column; }
.post-list > li { border-top: 1px solid rgba(29, 29, 29, .15); }
.post-list > li:last-child { border-bottom: 1px solid rgba(29, 29, 29, .15); }
.post-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; row-gap: 8px;
  padding: 24px; -webkit-tap-highlight-color: transparent;
}
.post-link > :not(.post-link__icon) { grid-column: 1; }
.post-link__title { font: 700 28px/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.post-link__excerpt { max-width: 68ch; font-size: 16px; line-height: 1.5; color: rgba(29, 29, 29, .75); }
.post-link__icon {
  grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid currentColor; border-radius: 50%; transition: background 200ms var(--ease-out), color 200ms var(--ease-out), scale 500ms var(--ease-spring);
}
.post-link__icon svg { width: 13px; height: 13px; fill: currentColor; }
.post-link:active .post-link__icon { scale: .85; transition: scale 90ms var(--ease-out); }
@media (hover: hover) {
  .post-link:hover .post-link__title { opacity: .7; }
  .post-link:hover .post-link__icon { background: var(--ink); color: #fff; }
}

/* wpis: tytuł mniejszy niż na stronach z jednym słowem w nagłówku, treść ok. 68 znaków w linii */
.post .page-title { font-size: clamp(40px, 4.4vw, 72px); line-height: .92; }
.post__summary { padding: 24px 28px; border-radius: 16px; background: #fff; }
.post__label { font-size: 12px; line-height: 2; letter-spacing: .04em; text-transform: uppercase; color: rgba(29, 29, 29, .6); }
.post__summary ul { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-left: 1.1em; font-size: 16px; line-height: 1.5; }
.post__body { max-width: 68ch; font-size: 18px; line-height: 1.6; }
.post__body > * + * { margin-top: 1em; }
.post__body > .section-title { margin-top: 2.2em; }
.post__body > .section-title + * { margin-top: .9em; }
.post__body a, .post__sources a { text-decoration: underline; text-underline-offset: 3px; }
.post__body strong { font-weight: 600; }
.post__body :is(ul, ol) { display: flex; flex-direction: column; gap: .5em; padding-left: 1.25em; }
.post__body li::marker { color: rgba(29, 29, 29, .5); }
/* punkty listy: pauza zamiast kropki */
.post__body ul { padding-left: 1.6em; list-style-type: "—  "; }
/* cytat ze źródła: oryginał dużym krojem, pod nim tłumaczenie i podpis z linkiem */
.post__quote { margin-block: 1.6em; padding: 28px; border-radius: 16px; background: #fff; }
.post__quote blockquote p { font: 700 30px/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.post__quote-tr { margin-top: 12px; font-size: 16px; line-height: 1.5; color: rgba(29, 29, 29, .75); }
.post__quote figcaption { margin-top: 16px; font-size: 14px; line-height: 1.5; color: rgba(29, 29, 29, .6); }
/* akcja we wpisie: karta w gradiencie CAASUAL jak hero landing page AI, tylko niższa */
.ai-hero.post-cta { min-height: 0; margin: 16px 0; padding: 48px; gap: 20px; }
.post-cta .ai-hero__title { max-width: 680px; font-size: clamp(32px, 3vw, 44px); }
.post-cta .ai-hero__lead { font-size: 18px; }
.post-cta .ai-hero__note { text-decoration: underline; text-underline-offset: 3px; }
.post__sources ol { display: flex; flex-direction: column; gap: 10px; padding-left: 1.25em; font-size: 14px; line-height: 1.5; color: rgba(29, 29, 29, .75); }
.post__note { max-width: 68ch; font-size: 13px; line-height: 1.5; color: rgba(29, 29, 29, .6); }

/* pasek „Z bloga” pod formularzem na landing page AI: karty przewijane w poziomie, żeby nie odsuwały formularza od FAQ.
   Pasek wychodzi na margines strony, a prawa krawędź gaśnie, sygnalizując, że jest więcej kart */
.blog-strip { display: flex; flex-direction: column; gap: 16px; margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(243, 239, 230, .2); }
.blog-strip__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.blog-strip .lp__proof-title, .blog-strip .post-meta { color: rgba(243, 239, 230, .6); }
.blog-strip__all { display: inline-flex; align-items: center; gap: 6px; }
.blog-strip__all svg { width: 12px; height: 12px; fill: currentColor; }
.blog-strip__list {
  list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding: 0 var(--gutter);
  -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent);
}
.blog-strip__list::-webkit-scrollbar { display: none; }
.blog-strip__list li { flex: 0 0 272px; scroll-snap-align: start; }
.blog-strip__list a {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px 18px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .07); transition: background 200ms var(--ease-out), transform 300ms var(--ease-out);
}
@media (hover: hover) { .blog-strip__list a:hover { background: rgba(255, 255, 255, .12); transform: translateY(-3px); } }
.blog-strip__title {
  font: 700 17px/1.05 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--cream);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ten sam pasek na pozostałych podstronach: czarny pas nad stopką, który wchodzi na treść zaokrąglonym brzegiem
   (jak dotąd stopka), a stopka przechodzi w niego bez szwu */
.blog-band {
  position: relative; margin-top: -20px; padding: 56px var(--gutter) 40px; border-radius: 20px 20px 0 0;
  background: var(--black); color: var(--cream);
}
.blog-band .blog-strip { max-width: var(--container); margin: 0 auto; padding: 0; border: 0; }

@media (max-width: 697px) {
  .blog-band { padding-top: 44px; }
  .blog-strip__list li { flex-basis: 78%; }
  .post-link { padding: 20px 16px; }
  .post-link__title { font-size: 22px; }
  .post .page-title { font-size: 36px; }
  .post__summary { padding: 20px; }
  .post__body { font-size: 17px; }
  .post__quote { padding: 20px; }
  .post__quote blockquote p { font-size: 24px; }
  .ai-hero.post-cta { margin: 0; padding: 32px 20px; }
  .post-cta .ai-hero__title { font-size: 28px; }
  .post-cta .ai-hero__lead { font-size: 16px; }
}

/* linki w treści akordeonów są podkreślone, przyciski nie */
.acc__body a.pill-button { text-decoration: none; }
/* kategorie w ustawieniach cookies: małe zaokrąglenie (przyciski zostają pigułkami) */
#cc-main .pm__section, #cc-main .pm__section--toggle { --cc-btn-border-radius: 12px; }

/* tablet pionowo i telefon: strony kontenerowe na pełną szerokość (minus margines) */
@media (max-width: 1024px) {
  :root { --container: none; }
  .text-page { align-items: flex-start; }
}

/* ==========================================================================
   Ruch, skala i detale
   Ruch jednorazowo, przy pierwszym pojawieniu (main.js), na transform / opacity / clip-path. Klasę anim ustawia
   skrypt w <head> tylko wtedy, gdy nie jest włączone „Ogranicz ruch”; bez JS wszystko jest od razu na miejscu.
   ========================================================================== */
/* ---------- Duże nagłówki: ciaśniejsze światło, na dużych ekranach rosną płynnie ---------- */
:is(.home__title, .page-title, .ai-hero__title, .about__statement:not(.about__statement--small)) { letter-spacing: -.02em; }
@media (min-width: 1381px) {
  .page-title { font-size: clamp(48px, 5.4vw, 104px); }
  .section-title { font-size: clamp(32px, 2.6vw, 48px); }
  .about__statement:not(.about__statement--small) { max-width: none; font-size: clamp(40px, 3.4vw, 60px); }
  .ai-hero__title { max-width: 1100px; font-size: clamp(56px, 4.6vw, 84px); }
}
@media (min-width: 698px) and (max-width: 1380px) {
  .page-title:not(.portfolio-head .page-title) { font-size: clamp(48px, 6.2vw, 76px); }
}

/* lead: pierwsze zdanie pełnym kolorem, reszta przygaszona */
:is(.home__lead, .text-page__inner > .lead, .about__lead) { color: rgba(29, 29, 29, .56); }
.lead__first { color: var(--ink); }

/* ---------- Nagłówki: słowa wysuwają się spod krawędzi linia po linii (main.js dzieli je na słowa) ---------- */
.split__w, .split__i { display: inline-block; }
/* okno przycięcia z zapasem na polskie znaki nad wersalikami (Ś, Ó, Ł) */
.split__w { vertical-align: top; overflow: hidden; overflow: clip; padding: .18em .08em .12em; margin: -.18em -.08em -.12em; }
.split .split__i { translate: 0 1.35em; transition: translate 1100ms var(--ease-expo) var(--d, 0ms); }
.split.is-in .split__i { translate: none; }
/* zanim skrypt podzieli nagłówki, są niewidoczne. Skrypt animuje je dokładnie raz albo — gdy font z polskimi znakami
   się spóźnia — pokazuje od razu bez animacji (split-skip); bezpiecznik po 3 s działa tylko wtedy, gdy skrypt w ogóle nie ruszył */
.anim :is(.home__title, .page-title, .section-title, .ai-hero__title, .about__statement:not(.about__statement--small), .lp__statement, .about__card-title):not(.split):not(.split-skip) {
  opacity: 0; animation: failsafe 1ms 3s forwards;
}
@keyframes failsafe { to { opacity: 1; } }

/* ---------- Wejście treści: bloki unoszą się kaskadą, zdjęcia i wideo rozkładają z zaokrąglonego kadru (main.js: rv, rvc) ---------- */
/* Przejście jest zdefiniowane tylko w stanie is-in: schowanie przed wejściem jest natychmiastowe. Gdy przejście było na samej
   klasie rv, Safari (który przelicza style, zanim skrypt nada klasę) najpierw płynnie gasił treść, a potem ją pokazywał. */
.rv { opacity: 0; translate: 0 32px; }
.rv.is-in { opacity: 1; translate: none; transition: opacity 900ms var(--ease-soft) var(--rd, 0ms), translate 1200ms var(--ease-expo) var(--rd, 0ms); }
.rvc { opacity: 0; clip-path: inset(8% 6% round 28px); }
.rvc.is-in { opacity: 1; clip-path: inset(0 round 0); transition: opacity 500ms linear var(--rd, 0ms), clip-path 1400ms var(--ease-expo) var(--rd, 0ms); }
/* karta portfolio wchodzi jako całość (main.js: card-rv, gdy zdjęcie jest już wczytane): kadr się rozkłada, zdjęcie w tym samym
   tempie dochodzi do skali 1, a podpis unosi się chwilę później */
.card-rv .card__media { opacity: 0; clip-path: inset(6% 4% round 24px); transition: background-color 300ms var(--ease-out); }
.card-rv.is-in .card__media { opacity: 1; clip-path: inset(0 round 0); transition: opacity 400ms linear var(--rd, 0ms), clip-path 1200ms var(--ease-expo) var(--rd, 0ms), background-color 300ms var(--ease-out); }
.card-rv .card__media img { transform: scale(1.08); }
.card-rv.is-in .card__media img { transform: none; transition: opacity 600ms var(--ease-out), filter 1300ms var(--ease-soft), transform 1200ms var(--ease-expo) var(--rd, 0ms); }
.card-rv .card__text { opacity: 0; translate: 0 24px; }
.card-rv.is-in .card__text { opacity: 1; translate: none; transition: opacity 700ms var(--ease-soft) calc(var(--rd, 0ms) + 180ms), translate 1000ms var(--ease-expo) calc(var(--rd, 0ms) + 180ms); }
.ai-hero.rvc { clip-path: inset(4% 3% round 40px); }
.ai-hero.rvc.is-in { clip-path: inset(0 round 16px); }
/* zdjęcie, które spóźnia się ponad 0,9 s, wywołuje się z rozmycia jak odbitka już w odsłoniętym kadrze (main.js: dev, dev-wait) */
img.dev-wait { filter: blur(22px) saturate(.4) brightness(1.06); }

/* ---------- Linie akordeonów i kroków rysują się od lewej (main.js: draw) ---------- */
/* !important, bo ciemna sekcja Usług ustawia kolor obramowań mocniejszym selektorem */
.draw { position: relative; border-top-color: transparent !important; }
.draw::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: currentColor; opacity: .16;
  transform-origin: 0 50%; scale: 0 1; transition: scale 1500ms var(--ease-expo) var(--rd, 0ms);
}
.draw.is-in::after { scale: 1 1; }

/* ---------- Mikrointerakcje (tylko mysz): tekst linków „przewija się” w górę (main.js owija tekst w .roll) ---------- */
@media (hover: hover) {
  .roll { display: inline-block; overflow: hidden; overflow: clip; vertical-align: top; }
  .roll > span { display: inline-block; text-shadow: 0 2em currentColor; transition: translate 520ms var(--ease-expo); }
  a:hover > .roll > span { translate: 0 -2em; }
}

/* ---------- Sekwencja otwierająca (strona główna, raz na sesję) ---------- */
/* klasę intro-run ustawia skrypt w <head>, zanim strona się narysuje. Nawiasy z logo (CAAS) — obrazy w HTML, widoczne od pierwszej
   klatki — rozsuwają się jak przesłona; w poziomej kresce między nimi od pierwszej klatki leci film, a kreska rozkłada się na cały
   ekran — intro przechodzi płynnie we właściwe wideo. Całość ok. 1,5 s; potem main.js zdejmuje intro-run. */
.intro-run { --ap-h: 104px; --ap-w: min(44vw, 560px); --ap-sh: calc(var(--ap-h) * .6); --ap-dx: calc(var(--ap-w) / 2 - var(--ap-h) * .0463); }
@media (max-width: 697px) { .intro-run { --ap-h: 76px; --ap-w: 62vw; } }
.intro-run .home__hero { animation: intro-hero 1500ms both; }
.intro-run .home__hero video { animation: intro-video 1500ms both; }
.intro-run .site-header { animation: in-down 800ms var(--ease-soft) 1050ms both; }
@keyframes intro-hero {
  0%, 22% { clip-path: inset(calc(50% - var(--ap-sh) / 2) 50% round 999px); animation-timing-function: var(--ease-inout); }
  56% { clip-path: inset(calc(50% - var(--ap-sh) / 2) calc(50% - var(--ap-w) / 2 + var(--ap-h) * .1) round 999px); animation-timing-function: cubic-bezier(.75, 0, .1, 1); }
  100% { clip-path: inset(0 round 0); }
}
/* film w kresce jest lekko przybliżony i rozmyty (pierwsza sekunda filmu to symbol (C), którego wycinek w kresce wyglądał jak
   kwadratowa usterka), a gdy kadr rozkłada się na cały ekran, dochodzi do skali 1 i odzyskuje ostrość */
@keyframes intro-video {
  0%, 56% { scale: 1.25; filter: blur(16px) saturate(1.5); animation-timing-function: cubic-bezier(.75, 0, .1, 1); }
  100% { scale: 1; filter: blur(0px) saturate(1); }
}
.home { position: relative; }
.intro-ap { display: none; }
.intro-run .intro-ap { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.intro-ap img { width: calc(var(--ap-h) * .3808); height: var(--ap-h); }
.intro-ap__l { animation: intro-l 1500ms both; }
.intro-ap__r { animation: intro-r 1500ms both; }
@keyframes intro-l {
  0% { scale: .9; animation-timing-function: var(--ease-soft); }
  16% { scale: 1; }
  22% { translate: 0 0; animation-timing-function: var(--ease-inout); }
  56% { translate: calc(-1 * var(--ap-dx)) 0; opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  100% { translate: calc(-1 * var(--ap-dx) - 22vw) 0; opacity: 0; }
}
@keyframes intro-r {
  0% { scale: .9; animation-timing-function: var(--ease-soft); }
  16% { scale: 1; }
  22% { translate: 0 0; animation-timing-function: var(--ease-inout); }
  56% { translate: var(--ap-dx) 0; opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  100% { translate: calc(var(--ap-dx) + 22vw) 0; opacity: 0; }
}
@keyframes in-down { from { opacity: 0; translate: -50% -14px; } }