/* Czcionki lokalne (Space Grotesk, Manrope; licencja SIL OFL 1.1, patrz fonts/). Podzbiory z Fontsource: latin-ext + latin. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/space-grotesk-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/space-grotesk-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/space-grotesk-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/space-grotesk-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/space-grotesk-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/space-grotesk-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/space-grotesk-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/space-grotesk-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/manrope-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/manrope-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/manrope-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/manrope-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 800; src: url('../fonts/manrope-latin-ext-800.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/manrope-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/manrope-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/manrope-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/manrope-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 800; src: url('../fonts/manrope-latin-800.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* =========================================================
   PMG — wspólne style strony (v1)
   Tokeny: MAKIETA-DESIGN.md §5. Punkty łamania: 640 / 960 / 1240 px.
   ========================================================= */

/* ---------- 1. Tokeny ---------- */
:root {
  --color-pink: #e5185e;
  --color-pink-text: #c8124f;      /* różowy dla małego tekstu (kontrast ≥ 4.5:1) */
  --color-purple: #8b2c9c;
  --color-blue: #1d46e0;
  --color-ink: #141414;
  --color-bg: #F7F6F3;
  --color-hero-bg: #F7F6F3;
  --color-surface: #FFFFFF;
  --color-text: rgba(20, 20, 20, .72);
  --color-text-muted: rgba(20, 20, 20, .66);
  --color-border: rgba(0, 0, 0, .08);
  --color-warn: #7f5c07;
  --color-warn-bg: rgba(184, 134, 11, .12);
  --color-violet-2: #6a2fb8;
  --color-spotify: #1db954;

  --gradient-brand: linear-gradient(110deg, #e5185e, #8b2c9c 45%, #1d46e0);
  --gradient-vertical: linear-gradient(180deg, #e5185e, #8b2c9c, #1d46e0);

  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --fs-display: clamp(44px, 7vw, 78px);
  --fs-h1: clamp(34px, 5.2vw, 46px);
  --fs-h2: clamp(26px, 3.4vw, 34px);
  --fs-h3: clamp(22px, 2.6vw, 26px);
  --fs-lead: clamp(16px, 1.6vw, 18px);
  --fs-body: 17px;
  --fs-nav: 13.5px;
  --fs-small: 13px;
  --fs-eyebrow: 12px;

  --container: 1160px;
  --container-wide: 1240px;
  --measure: 760px;
  --gutter: 56px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-nav: 0 10px 30px rgba(0, 0, 0, .12);
  --shadow-card: 0 24px 46px -24px rgba(0, 0, 0, .28);
  --shadow-feature: 0 30px 60px -32px rgba(20, 20, 40, .4);

  --card-radius: var(--radius-lg);
  --card-radius-sm: var(--radius-md);
  --card-border: 1px solid var(--color-border);
  --card-shadow: 0 1px 2px rgba(20,20,20,.05);
  --card-shadow-hover: var(--shadow-card);
  --card-lift: translateY(-4px);
  --card-press: translateY(-1px) scale(.99);
  --card-pad: 24px;
  --card-pad-sm: 18px;
  --card-t: var(--hover-t);

  --ease: .3s ease;
  --nav-accent: var(--color-pink);
  --page-accent: var(--color-pink);

  --hover-t: .2s ease;
  --press-dur: .12s;
  --press-ease: cubic-bezier(.23, 1, .32, 1);
  --btn-lift: translateY(-2px);
  --btn-press: scale(.97);
}
@media (max-width: 960px) { :root { --gutter: 32px; } }
@media (max-width: 640px) { :root { --gutter: 20px; --fs-body: 16px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --btn-lift: none; --btn-press: none; --card-lift: none; --card-press: none; }
}

/* ---------- 2. Baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
picture { display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--color-ink); margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--color-blue); }
a:hover { color: var(--color-purple); }
button { font: inherit; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* Widoczny focus (WCAG 2.4.7) */
:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; border-radius: 4px; }
.theme-dark :focus-visible, .site-footer :focus-visible, .on-dark :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--color-ink); color: #fff; padding: 12px 20px; border-radius: var(--radius-pill);
  font: 700 14px var(--font-body); text-decoration: none;
}
.skip-link:focus { top: 16px; color: #fff; }

/* ---------- 3. Układ ---------- */
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page > main { flex: 1 0 auto; }
.container { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.measure { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: 50px; padding-bottom: 50px; }
.section--lg { padding-top: 80px; padding-bottom: 80px; }
.bg-surface { background: var(--color-surface); }
.bg-warm { background: var(--color-bg); }
@media (max-width: 640px) {
  .section { padding-top: 40px; padding-bottom: 40px; }
  .section--lg { padding-top: 56px; padding-bottom: 56px; }
}

/* ---------- 4. Typografia ---------- */
.eyebrow {
  font: 600 var(--fs-eyebrow) var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-purple); margin: 0 0 14px;
}
.display { font: 700 var(--fs-display)/.98 var(--font-head); letter-spacing: -.03em; }
.h1 { font: 600 var(--fs-h1)/1.05 var(--font-head); letter-spacing: -.02em; }
.h2 { font: 600 var(--fs-h2)/1.12 var(--font-head); letter-spacing: -.01em; }
.h3 { font: 600 var(--fs-h3)/1.2 var(--font-head); letter-spacing: -.01em; }
.lead { font: 400 var(--fs-lead)/1.65 var(--font-body); color: var(--color-text-muted); }
.prose p { font: 400 var(--fs-body)/1.75 var(--font-body); color: var(--color-text); text-wrap: pretty; }
.prose p + p { margin-top: 16px; }
.muted { color: var(--color-text-muted); }
.text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 5. Przyciski i pigułki ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 14px var(--font-body); text-decoration: none; cursor: pointer;
  padding: 13px 26px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
}
.btn--dark { background: var(--color-ink); color: #fff; }
.btn--dark:hover { color: #fff; }
.btn--outline { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.btn--outline:hover { color: var(--color-ink); }
.btn--gradient { background: var(--gradient-brand); color: #fff; }
.btn--gradient:hover { color: #fff; }
.btn--light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.btn--light:hover { background: rgba(255,255,255,.2); color: #fff; }

.status {
  display: inline-block; font: 700 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 13px; border-radius: var(--radius-pill); white-space: nowrap;
  color: rgba(20,20,20,.7); background: rgba(20,20,20,.06); border: 1px solid rgba(20,20,20,.15);
}
@media (max-width: 375px) { .status { white-space: normal; } }
.status--active { color: #0f6b3a; background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }
.warn-pill {
  display: inline-block; font: 700 11px var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill); color: var(--color-warn); background: var(--color-warn-bg);
}

/* ---------- 6. Nawigacja ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--color-bg);
  transition: box-shadow var(--ease), background-color var(--ease), color var(--ease), transform var(--ease);
}
.site-nav__inner {
  display: flex; align-items: center; gap: 22px;
  padding: 18px var(--gutter);
  transition: padding var(--ease);
}
.site-nav__logo { display: flex; align-items: center; flex: none; border-radius: 8px; }
.site-nav__logo img { height: 70px; width: 70px; object-fit: contain; transition: height var(--ease), width var(--ease), filter var(--ease); }
.site-nav__menu { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.site-nav__link {
  font: 500 var(--fs-nav) var(--font-body); color: rgba(20,20,20,.7); text-decoration: none;
  padding: 6px 0 3px; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--hover-t), border-color var(--hover-t);
}
.site-nav__link:hover { color: var(--color-ink); border-bottom-color: rgba(20,20,20,.2); }
.site-nav__link[aria-current="page"] { font-weight: 700; color: var(--color-ink); border-bottom-color: var(--nav-accent); }
.site-nav__cta {
  display: inline-block; font: 700 13px var(--font-body); color: var(--color-ink); text-decoration: none;
  border: 1.5px solid var(--color-ink); padding: 8px 17px; border-radius: var(--radius-pill);
}
.site-nav__cta:hover, .site-nav__cta:focus-visible { color: var(--color-ink); }
.site-nav__cta[aria-current="page"] { background: var(--color-ink); color: #fff; }
.site-nav__toggle {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent; color: var(--color-ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.site-nav__toggle-bars, .site-nav__toggle-bars::before, .site-nav__toggle-bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
  transition: transform var(--ease), background var(--ease);
}
.site-nav__toggle-bars::before, .site-nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.site-nav__toggle-bars::before { top: -6px; }
.site-nav__toggle-bars::after { top: 6px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav.is-scrolled { box-shadow: var(--shadow-nav); background-color: rgba(247,246,243,1); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.site-nav.is-scrolled .site-nav__inner { padding-top: 10px; padding-bottom: 10px; }
.site-nav.is-scrolled .site-nav__logo img { height: 54px; width: 54px; }

/* Wariant ciemny (Podcast; Dołącz nad hero) */
.site-nav--dark { background-color: #0a0a0c; color: #f5f5f5; }
.site-nav--dark.is-scrolled { background-color: rgba(10,10,12,1); }
.site-nav--dark .site-nav__logo img { filter: brightness(0) invert(1); }
.site-nav--dark .site-nav__link { color: rgba(245,245,245,.72); }
.site-nav--dark .site-nav__link:hover { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.site-nav--dark .site-nav__link[aria-current="page"] { color: #fff; }
.site-nav--dark .site-nav__cta { color: #fff; border-color: #fff; }
.site-nav--dark .site-nav__cta:hover { color: #fff; }
.site-nav--dark .site-nav__cta[aria-current="page"] { background: #fff; color: var(--color-ink); }
.site-nav--dark .site-nav__toggle { color: #fff; }
.site-nav--dark :focus-visible { outline-color: #fff; }
/* chowanie przy scrollu w dół (klasa z main.js initNav); zawsze widoczny przy otwartym menu/podmenu, fokusie w nav i otwartym oknie;
   przy prefers-reduced-motion bez przejścia (globalna reguła transition-duration niżej) */
.site-nav.is-hidden { transform: translateY(calc(-100% - 48px)); } /* 48 px zapasu: cień pigułki nie zostaje przy górnej krawędzi */
.site-nav.is-hidden.is-open,
body.has-dialog .site-nav.is-hidden { transform: none; }
/* :has osobno: przeglądarka bez :has odrzuciłaby całą listę selektorów; fokus tylko z klawiatury (po kliknięciu myszą header się chowa) */
.site-nav.is-hidden:has(.is-open),
.site-nav.is-hidden:has(:focus-visible),
body:has(dialog[open]) .site-nav.is-hidden { transform: none; }

/* Listy rozwijane (PM Session, Case Koła): link + osobny przycisk ze strzałką; stan .is-open ustawia main.js */
.site-nav__item { position: relative; display: flex; align-items: center; gap: 2px; }
.site-nav__item:has(.site-nav__sublink[aria-current="page"]) > .site-nav__link { font-weight: 700; color: var(--color-ink); border-bottom-color: var(--nav-accent); }
.site-nav__subtoggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: rgba(20,20,20,.7); cursor: pointer;
}
.site-nav__subtoggle:hover { color: var(--color-ink); background: rgba(20,20,20,.06); }
.site-nav__subtoggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--hover-t); }
.site-nav__subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__sub {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 10px); left: -14px; z-index: 60;
  width: max-content; background: #fff; border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(20,20,40,.35), 0 0 0 1px rgba(20,20,20,.06);
}
.site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* mostek dla myszy */
.js .site-nav__item:not(.is-open) > .site-nav__sub,
html:not(.js) .site-nav__item:not(:hover):not(:focus-within) > .site-nav__sub { display: none; }
.site-nav__sublink {
  display: block; padding: 10px 12px; border-radius: 8px; white-space: nowrap;
  font: 500 14.5px/1.3 var(--font-body); color: rgba(20,20,20,.78); text-decoration: none;
  transition: background var(--hover-t), color var(--hover-t);
}
.site-nav__sublink:hover { background: rgba(20,20,20,.05); color: var(--color-ink); }
.site-nav__sublink[aria-current="page"] { font-weight: 700; color: var(--color-ink); box-shadow: inset 3px 0 0 var(--nav-accent); }
.site-nav--dark .site-nav__item:has(.site-nav__sublink[aria-current="page"]) > .site-nav__link { color: #fff; }
.site-nav--dark .site-nav__subtoggle { color: rgba(245,245,245,.72); }
.site-nav--dark .site-nav__subtoggle:hover { color: #fff; background: rgba(255,255,255,.1); }
.site-nav--dark .site-nav__sub { background: #1b1b20; box-shadow: 0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); }
.site-nav--dark .site-nav__sublink { color: rgba(245,245,245,.8); }
.site-nav--dark .site-nav__sublink:hover { background: rgba(255,255,255,.08); color: #fff; }
.site-nav--dark .site-nav__sublink[aria-current="page"] { color: #fff; }

/* CTA „Dołącz” w pasku obok przycisku menu: kopia linku z menu tworzona przez main.js (initNav), tylko ≤ 960 px */
.site-nav__bar-cta { display: none; }

/* ---------- 6a. Nawigacja mobilna (≤ 960 px) ----------
   Pasek: logo, „Dołącz”, przycisk menu. Po przewinięciu pasek zwęża się do pływającej pigułki (jak na desktopie, v2.css).
   Menu: panel pełnoekranowy (position: fixed) nad stroną, pasek zostaje na jego wierzchu; animacja tylko opacity/transform.
   Pułapka fokusu, inert na reszcie strony, Esc i blokada przewijania tła: main.js initNav.
   Panel siedzi w nav, więc nav nie może mieć wtedy transform ani backdrop-filter (tworzą containing block dla fixed). */
@media (max-width: 960px) {
  /* stała wysokość nagłówka (pasek 92 px, pigułka mieści się w nim): gdyby malała po przewinięciu, scroll anchoring
     cofałby przewinięcie pod próg is-scrolled i nagłówek migotałby w pętli (ok. 60 zmian klasy/s) */
  .site-nav { min-height: 92px; }
  .site-nav__logo img { display: block; } /* bez odstępu pod linią bazową obrazka inline: pasek ma równe 92 px */
  .site-nav__inner { gap: 12px; transition: padding var(--ease), margin var(--ease), border-radius var(--ease), background-color var(--ease), box-shadow var(--ease); }
  .site-nav__logo img { height: 56px; width: 56px; }
  .site-nav.is-scrolled .site-nav__logo img { height: 46px; width: 46px; }
  .site-nav.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav__toggle { display: inline-flex; flex: none; }
  .site-nav__logo, .site-nav__toggle, .site-nav__bar-cta { position: relative; z-index: 2; }
  .site-nav__bar-cta {
    display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 18px;
    font-size: 14px;
  }
  .site-nav .site-nav__bar-cta { transition: opacity var(--hover-t), visibility 0s linear .2s, transform var(--hover-t), background var(--hover-t), color var(--hover-t); }
  .site-nav__bar-cta + .site-nav__toggle { margin-left: 0; }

  /* pływająca pigułka po przewinięciu (bez backdrop-filter: tło i tak jest nieprzezroczyste) */
  .site-nav.is-scrolled:not(.is-open) { background-color: transparent; box-shadow: none; }
  .site-nav.is-scrolled:not(.is-open) .site-nav__inner {
    margin: 8px 10px 0; padding: 6px 6px 6px 14px; border-radius: var(--radius-pill);
    background-color: rgba(247,246,243,.98); box-shadow: 0 14px 34px -14px rgba(20,20,40,.35), 0 0 0 1px rgba(20,20,20,.06);
  }
  .site-nav--dark.is-scrolled:not(.is-open) .site-nav__inner { background-color: rgba(12,12,16,.96); box-shadow: 0 14px 34px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }

  /* panel menu */
  .site-nav__menu {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    height: 100vh; height: 100dvh; margin: 0;
    padding: calc(96px + env(safe-area-inset-top)) var(--gutter) max(28px, env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background:
      radial-gradient(75% 42% at 100% 100%, rgba(229,24,94,.14), transparent 70%),
      radial-gradient(65% 38% at 0% 92%, rgba(29,70,224,.12), transparent 70%),
      var(--color-bg);
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .26s ease, transform .34s var(--press-ease), visibility 0s linear .34s;
  }
  .site-nav--dark .site-nav__menu {
    background:
      radial-gradient(75% 42% at 100% 100%, rgba(229,24,94,.24), transparent 70%),
      radial-gradient(65% 38% at 0% 92%, rgba(29,70,224,.24), transparent 70%),
      #0a0a0c;
  }
  .site-nav.is-open { background-color: transparent; box-shadow: none; }
  .site-nav.is-open .site-nav__menu { visibility: visible; opacity: 1; transform: none; transition: opacity .26s ease, transform .34s var(--press-ease), visibility 0s; }
  .site-nav.is-open .site-nav__bar-cta { visibility: hidden; opacity: 0; }
  /* linki wjeżdżają kolejno po otwarciu */
  .site-nav__menu > * { opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .4s var(--press-ease); }
  .site-nav.is-open .site-nav__menu > * { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 40ms); }
  .site-nav__menu > :nth-child(2) { --i: 1; }
  .site-nav__menu > :nth-child(3) { --i: 2; }
  .site-nav__menu > :nth-child(4) { --i: 3; }
  .site-nav__menu > :nth-child(5) { --i: 4; }
  .site-nav__menu > :nth-child(6) { --i: 5; }
  .site-nav__menu > :nth-child(n+7) { --i: 6; }

  .site-nav__link {
    position: relative; font: 600 clamp(22px, 6.4vw, 28px)/1.15 var(--font-head); letter-spacing: -.02em;
    color: var(--color-ink); padding: 14px 4px; border-bottom: 1px solid var(--color-border); white-space: normal;
  }
  .site-nav--dark .site-nav__link { color: #f5f5f5; border-bottom-color: rgba(255,255,255,.1); }
  .site-nav__link:hover { border-bottom-color: var(--color-border); }
  .site-nav--dark .site-nav__link:hover { border-bottom-color: rgba(255,255,255,.1); }
  /* aktywna strona: pionowa nić gradientu marki */
  .site-nav__link[aria-current="page"],
  .site-nav__item:has(.site-nav__sublink[aria-current="page"]) > .site-nav__link { border-bottom: 1px solid var(--color-border); padding-left: 18px; }
  .site-nav--dark .site-nav__link[aria-current="page"] { border-bottom-color: rgba(255,255,255,.1); }
  .site-nav__link[aria-current="page"]::before,
  .site-nav__item:has(.site-nav__sublink[aria-current="page"]) > .site-nav__link::before,
  .site-nav__sublink[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--gradient-vertical);
  }
  /* „Dołącz” w panelu: duży gradientowy przycisk na dole (kciuk); start gradientu przyciemniony dla kontrastu bieli ≥ 4.5:1 */
  .site-nav__menu > .site-nav__cta {
    align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 56px; margin-top: auto;
    font: 700 17px var(--font-body); color: #fff; border: 0; background: linear-gradient(110deg, #c8124f, #8b2c9c 55%, #1d46e0);
    transition: opacity .3s ease, transform .4s var(--press-ease);
  }
  .site-nav__menu > :nth-last-child(2) { margin-bottom: 28px; }
  .site-nav__menu > .site-nav__cta:hover, .site-nav__menu > .site-nav__cta:focus-visible,
  .site-nav__menu > .site-nav__cta[aria-current="page"],
  .site-nav--dark .site-nav__menu > .site-nav__cta, .site-nav--dark .site-nav__menu > .site-nav__cta[aria-current="page"] { color: #fff; background: linear-gradient(110deg, #c8124f, #8b2c9c 55%, #1d46e0); }

  /* listy rozwijane jako akordeon w panelu */
  .site-nav__item { flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--color-border); }
  .site-nav--dark .site-nav__item { border-bottom-color: rgba(255,255,255,.1); }
  .site-nav__item > .site-nav__link, .site-nav__item > .site-nav__link[aria-current="page"],
  .site-nav__item:has(.site-nav__sublink[aria-current="page"]) > .site-nav__link { flex: 1; border-bottom: 0; }
  .site-nav__subtoggle { width: 44px; height: 44px; color: var(--color-ink); }
  .site-nav--dark .site-nav__subtoggle { color: #f5f5f5; }
  .site-nav__subtoggle svg { width: 16px; height: 16px; }
  .site-nav__sub { position: static; flex-basis: 100%; width: auto; min-width: 0; padding: 0 0 12px 12px; background: transparent; border-radius: 0; box-shadow: none; }
  .site-nav--dark .site-nav__sub { background: transparent; box-shadow: none; }
  .site-nav__sub::before { display: none; }
  .site-nav__item.is-open > .site-nav__sub { animation: navsub-in .28s var(--press-ease) both; }
  .site-nav__sublink { position: relative; font-size: 17px; padding: 12px 12px 12px 16px; white-space: normal; }
  .site-nav__sublink[aria-current="page"] { box-shadow: none; }
  .site-nav__sublink[aria-current="page"]::before { top: 10px; bottom: 10px; }
}
@keyframes navsub-in { from { opacity: 0; transform: translateY(-6px); } }
/* blokada przewijania tła przy otwartym menu (klasa z main.js). Na body, nie na html: overflow na html zrobiłby z body
   (overflow-x: hidden) osobny kontener przewijania i sticky nagłówek z przyciskiem zamknięcia uciekłby poza ekran */
html.nav-open body { overflow: hidden; }
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .site-nav.is-open .site-nav__menu > * { transition-delay: 0s; }
}
/* bez JS: menu widoczne od razu pod paskiem, bez przycisku (który bez skryptu nic by nie robił) */
@media (max-width: 960px) {
  html:not(.js) .site-nav__inner { flex-wrap: wrap; }
  html:not(.js) .site-nav__toggle { display: none; }
  html:not(.js) .site-nav__menu {
    position: static; flex-basis: 100%; height: auto; padding: 6px 0 8px; background: none;
    visibility: visible; opacity: 1; transform: none; overflow: visible;
  }
  html:not(.js) .site-nav__menu > * { opacity: 1; transform: none; }
}

/* ---------- 6b. Ścieżka nawigacji (breadcrumb) ---------- */
/* Bez własnego odstępu w poziomie: zawsze albo owinięta w .container (odstęp z gutter),
   albo (na ciemnym hero Dołącz) zagnieżdżona wprost w istniejącym .container sekcji. */
.breadcrumb { padding: 20px 0 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; font: 500 13.5px var(--font-body); color: var(--color-text-muted); }
.breadcrumb li + li::before { content: "→"; margin: 0 8px; color: rgba(20,20,20,.4); }
@supports (content: "a" / "b") {
  .breadcrumb li + li::before { content: "→" / ""; }
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-ink); text-decoration: underline; }
.breadcrumb li[aria-current="page"] { font-weight: 700; color: var(--color-ink); }
/* Wariant jasny — ciemne hero (Dołącz, Podcast) */
.breadcrumb--light li { color: rgba(245,245,245,.72); }
.breadcrumb--light li + li::before { color: rgba(245,245,245,.4); }
.breadcrumb--light a:hover, .breadcrumb--light a:focus-visible { color: #fff; }
.breadcrumb--light li[aria-current="page"] { color: #fff; }
.breadcrumb--light :focus-visible { outline-color: #fff; }
/* Dołącz: ścieżka jest zagnieżdżona w hero, które już ma własny padding-top */
.join-page-hero__inner .breadcrumb { padding-top: 0; }

/* ---------- 7. Stopka ---------- */
.site-footer { background: var(--color-ink); color: rgba(255,255,255,.66); margin-top: auto; padding: 44px 0; }
.site-footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.site-footer__brand { display: flex; align-items: center; gap: 20px; max-width: 640px; }
.site-footer__brand img { height: 90px; width: 90px; filter: brightness(0) invert(1); flex: none; }
.site-footer__contact { font: 400 13px/1.6 var(--font-body); font-style: normal; }
.site-footer__contact a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer__contact a:hover { color: #fff; text-decoration: underline; }
.social { display: flex; gap: 9px; align-items: flex-start; }
.social__link {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none;
}
.social__link:hover, .social__link:focus-visible { background: rgba(255,255,255,.22); color: #fff; }
.social__link svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  font: 400 12px/1.6 var(--font-body); color: rgba(255,255,255,.62);
}
.site-footer__credits { text-align: right; }
.site-footer__credits a { color: inherit; text-decoration: none; }
.site-footer__credits a:hover, .site-footer__credits a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__switch { color: rgba(255,255,255,.85); margin-left: 10px; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__switch:hover { color: #fff; }
.site-footer__totop { display: flex; justify-content: center; margin-top: 24px; }
/* Logotypy uczelni: oryginalne kolory, poza .site-footer__brand (bez filtra) */
.site-footer__uni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 28px; }
.site-footer__uni-link { display: inline-flex; }
.site-footer__uni img { height: 56px; width: auto; }
.site-footer__uni-link--pwr img { height: 100px; } /* oficjalna biała wersja pionowa na ciemne tło */
@media (max-width: 640px) {
  .site-footer__brand { flex-direction: column; align-items: flex-start; }
  .site-footer__brand img { height: 70px; width: 70px; }
  .site-footer__uni img { height: 48px; }
  .site-footer__uni-link--pwr img { height: 84px; }
  .site-footer__totop .btn { width: 100%; min-height: 48px; }
}
/* ≤ 960 px: dół stopki w kolumnie, linki prawne i autorzy jako osobne cele dotykowe ≥ 44 px (zamiast linków w jednym zdaniu,
   które na 375 px łamały „Zgłoś / błąd”); autorzy wyrównani do lewej */
@media (max-width: 960px) {
  .site-footer__contact a { display: inline-block; padding: 12px 0; }
  .site-footer__bottom { flex-direction: column; gap: 14px; }
  .site-footer__bottom > p:first-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
  .site-footer__switch { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; }
  .site-footer__credits { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  .site-footer__credits br { display: none; }
  .site-footer__credits a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ≥ 961 px: logo PMG z adresem, sociale i logotypy uczelni w jednym rzędzie, na wysokości logo PMG */
@media (min-width: 961px) {
  .site-footer > .container { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 32px; }
  .site-footer__top { display: contents; }
  .site-footer .social { justify-self: center; align-items: center; }
  .site-footer__uni { margin-top: 0; flex-wrap: nowrap; gap: 24px; }
  .site-footer__uni-link { flex: none; }
  .site-footer__uni img { max-width: none; }
  .site-footer__uni-link--pwr img { height: 90px; }
  .site-footer__bottom, .site-footer__totop { grid-column: 1 / -1; }
}
.theme-dark .site-footer { background: #0a0a0c; }

/* ---------- 8. Animacje ---------- */
@keyframes pmgrise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.rise { animation: pmgrise .8s ease both; }
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 9. Karty i obrazy ---------- */
.media { border-radius: var(--radius-lg); overflow: hidden; background: rgba(20,20,20,.05); }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.card { background: var(--color-surface); }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 10. Case Koła — szablon case'u ---------- */
.case-page { --nav-accent: var(--color-blue); }
.case-banner { padding: 26px 0 40px; }
.case-banner__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.case-hero { padding-bottom: 60px; }
.case-section h2 { font: 600 26px var(--font-head); letter-spacing: -.01em; margin: 0 0 16px; }
.case-section #h-narzedzia { margin-bottom: 18px; }
.case-section__title--gallery { margin-bottom: 24px !important; }
.section--gallery { padding-bottom: 70px; }
.status--progress { color: var(--color-blue); background: rgba(29,70,224,.1); border-color: rgba(29,70,224,.3); }
.case-hero__logo-box { background: var(--color-ink); display: flex; align-items: center; justify-content: center; padding: 6%; }
.case-hero__logo-box picture { max-width: 52%; }
.case-hero__logo-box img { width: 100%; height: auto; object-fit: contain; }
.case-pending { padding: 40px 0; }
.case-pending__text { font: 500 16px/1.6 var(--font-body); color: var(--color-text-muted); text-align: center; }
.result { border-left: 4px solid transparent; border-image: var(--gradient-vertical) 1; padding-left: 24px; }
.result--pending { border-image: none; border-left-color: rgba(20,20,20,.15); }


.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gallery--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
@media (max-width: 640px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
.gallery__item { margin: 0; }
.gallery__button {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9;
}
.gallery__button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__caption { font: 400 13.5px/1.5 var(--font-body); color: var(--color-text-muted); margin-top: 10px; }
/* Mała galeria (Aktualności): 3 kolumny od 961 px, poniżej 2 — także na telefonie (stoi po regule max-width: 640px, więc ją nadpisuje). */
.gallery--small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 961px) { .gallery--small { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-article__gallery .gallery { margin-top: 18px; }

/* ---------- 10b. Case Koła — hub ---------- */
.eyebrow--blue { color: var(--color-blue); letter-spacing: .2em; margin: 0; }
.hub-banner { padding: 66px 0 58px; }
.hub-banner__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hub-banner__brand { display: flex; align-items: center; flex-shrink: 0; }
.hub-banner__logo { width: auto; height: 56px; border-radius: 16px; object-fit: contain; }
.hub-banner__title { font: 600 clamp(36px, 5.6vw, 56px)/1.05 var(--font-head); letter-spacing: -.02em; margin-top: 0; }
@media (max-width: 640px) { .hub-banner__head { flex-direction: column; align-items: flex-start; gap: 16px; } }
@media (max-width: 960px) { .hub-banner__brand { display: none; } } /* logo projektu w banerze tylko na desktopie */
.hub-banner__lead { max-width: 760px; margin-top: 16px; text-wrap: pretty; }
.hub-banner__lead--full { max-width: none; }
.hub-grid { padding: 20px 0 80px; }
.hub-grid__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 640px) { .hub-grid__list { grid-template-columns: minmax(0, 1fr); } .hub-banner { padding: 40px 0 40px; } }
@media (min-width: 961px) { .hub-grid__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-card { display: block; height: 100%; overflow: hidden; color: inherit; text-decoration: none; }
.case-card:hover { color: inherit; }
.case-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.hub-grid .case-card__media { aspect-ratio: 5 / 2; }
.hub-grid .case-card__media { background: #141414; }
/* QUBIT i Debate Lab: logo ma białe tło wbudowane w plik — tło kafla białe, żeby się z nim zlewało (Solvro i PWR Racing Team bez zmian) */
.hub-grid .case-card__media--logo-light { background: #fff; }
/* QUBIT i Debate Lab: kafelek z jasnym tłem mediów dostaje białe body i ciemny tekst jak Solvro i PWR Racing Team */
.hub-grid .case-card__media--linia + .case-card__body { border-top: 1px solid #141414; }
/* kreska przy ciemnym tle mediów (#141414): ciemna linia zlałaby się z mediami, więc szara — kontrast ok. 5:1 do mediów i 3,6:1 do białego opisu */
.hub-grid .case-card__media--linia:not(.case-card__media--logo-light) + .case-card__body { border-top-color: #8A867C; }
.hub-grid .case-card { display: flex; flex-direction: column; }
.hub-grid .case-card__body { flex: 1 0 auto; display: flex; flex-direction: column; } /* link „Dowiedz się więcej” na dole karty */
.case-card__media--logo { display: flex; align-items: center; justify-content: center; padding: 20px; }
.case-card__media--logo img { width: auto; height: auto; max-width: 70%; max-height: 64px; object-fit: contain; margin: 0 auto; }
.case-card__media--logo-tall img { max-height: 112px; }
/* logotypy w kafelkach: stała wysokość zamiast 70% szerokości pliku (reguła .case-card__media img niżej nadpisuje width/height) */
.case-card__media--logo:not(.case-card__media--logo-tall) img { height: 45px; max-width: none; object-fit: contain; }
.hub-grid .case-card__media--logo-tall picture { display: contents; }
.hub-grid .case-card__media--logo-tall img { width: auto; height: 100%; max-width: none; }
.case-card__media__logo-plate { border-radius: 8px; }
.case-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-card__body { padding: 24px; background: var(--color-surface); }
.case-card__title { font: 600 26px var(--font-head); letter-spacing: -.01em; margin-top: 12px; text-align: center; }
.case-card__edition { font: 400 14.5px/1.6 var(--font-body); color: var(--color-text-muted); margin-top: 8px; text-align: center; }
.case-card__more { display: block; margin-top: auto; padding-top: 14px; font: 600 14px var(--font-body); color: var(--color-ink); text-align: center; }
.case-card__more-arrow { display: inline-block; transition: transform var(--hover-t); }
@media (hover: hover) { .case-card:hover .case-card__more-arrow { transform: translateX(3px); } }
.case-card:focus-visible .case-card__more-arrow { transform: translateX(3px); }
.case-card:focus-visible { outline-offset: 4px; }

/* ---------- 10c. Kontakt ---------- */
.container--flush { max-width: none; }
.contact-hero { padding: 64px 0 30px; }
.contact-hero__title { font: 600 clamp(40px, 7vw, 92px)/.98 var(--font-head); letter-spacing: -.03em; max-width: none; }
.contact-hero__title em { font-style: italic; color: var(--color-pink); display: block; }
.contact { padding: 40px 0 90px; }
.contact__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start; }
.contact__info { display: flex; flex-direction: column; gap: 34px; padding-top: 8px; }
.contact__label { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 10px; }
.contact__mail { font: 500 17px var(--font-head); color: var(--color-ink); text-decoration: none; border-bottom: 1px solid rgba(20,20,20,.25); padding-bottom: 2px; }
.contact__mail:hover { color: var(--color-pink-text); border-bottom-color: currentColor; }
.contact__address { font: 400 17px/1.5 var(--font-head); font-style: normal; color: var(--color-ink); margin-bottom: 16px; }
.contact__map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); min-height: 200px; }
.contact__map iframe { width: 100%; height: 200px; border: 0; display: block; filter: grayscale(.15) contrast(1.02); }
.map-consent { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; background: #fff; }
.map-consent__text { font: 400 13.5px/1.55 var(--font-body); color: var(--color-text-muted); margin: 0; }
.map-consent__text a, .map-consent__link { color: var(--color-blue); text-decoration: underline; text-underline-offset: 3px; }
.map-consent__link { font: 500 14px/1.4 var(--font-body); }
.map-consent__btn[hidden] { display: none; }
.map-consent__link--after { display: inline-block; margin-top: 10px; }
.contact__social { display: flex; gap: 10px; }
.contact__social-link { width: 44px; height: 44px; border-radius: 50%; background: var(--color-ink); display: flex; align-items: center; justify-content: center; color: #fff; }
.contact__social-link:hover, .contact__social-link:focus-visible { background: var(--color-pink-text); color: #fff; }
.contact__social-link svg { width: 18px; height: 18px; fill: currentColor; }
.contact-form { display: flex; flex-direction: column; gap: 30px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field__label { font: 600 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.field__input {
  border: 0; border-bottom: 1.5px solid rgba(20,20,20,.35); border-radius: 0; background: transparent;
  font: 400 19px var(--font-head); color: var(--color-ink); padding: 10px 2px; width: 100%; transition: border-color var(--hover-t);
}
.field__input::placeholder { color: rgba(20,20,20,.66); }
.field__input:focus { outline: none; border-bottom-color: var(--color-ink); box-shadow: 0 2px 0 0 var(--color-blue); }
.field__input:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.field__input--area { resize: vertical; line-height: 1.5; }
.field__input[aria-invalid="true"] { border-bottom-color: var(--color-pink-text); }
.contact-form__error { font: 600 14px var(--font-body); color: var(--color-pink-text); margin-top: -10px; }
.contact-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
.contact-form__note { font: 400 13px/1.4 var(--font-body); color: var(--color-text-muted); }
.contact-form__send { font-size: 15px; padding: 15px 34px; white-space: nowrap; }
/* hover tylko przy prawdziwym wskaźniku — na dotyku różowy zostawał „przyklejony” po tapnięciu; tam kolor przy :active */
.contact-form__send:focus-visible, .contact-form__send:active { background: var(--color-pink-text); }
@media (hover: hover) { .contact-form__send:hover { background: var(--color-pink-text); } }
.contact-form__hint { font: 400 12.5px/1.5 var(--font-body); color: var(--color-text-muted); margin-top: -14px; }
/* Wynik wysyłki formularza (main.js): sukces = ciemna karta z paskiem w gradiencie marki, błąd = jasnoróżowa karta */
.form-result { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--radius-md); overflow: hidden; scroll-margin: 120px 0; }
.form-result[hidden] { display: none; }
.form-result:focus { outline: none; }
.form-result:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }
.form-result--ok { background: var(--color-ink); color: #fff; }
.form-result--ok::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--gradient-brand); }
.form-result--error { background: #fdeef3; color: var(--color-ink); border: 1.5px solid var(--color-pink-text); }
.form-result__icon { flex: none; display: flex; }
.form-result__icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-result--ok .form-result__icon { color: #fff; }
.form-result--error .form-result__icon { color: var(--color-pink-text); }
.form-result__title { font: 600 22px/1.2 var(--font-head); margin: 2px 0 6px; color: inherit; }
.form-result__text { font: 400 15px/1.5 var(--font-body); margin: 0; overflow-wrap: anywhere; }
.form-result__mail { margin-top: 14px; font-size: 15px; padding: 13px 24px; }
@media (prefers-reduced-motion: no-preference) { .form-result:not([hidden]) { animation: form-result-in .35s cubic-bezier(.2, .8, .2, 1); } }
@keyframes form-result-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) { .form-result { padding: 18px; gap: 12px; } .form-result__title { font-size: 19px; } .form-result__mail { width: 100%; justify-content: center; } }
@media (max-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contact-hero { padding-top: 40px; }
}
/* Kontakt, zdanie „Masz pomysł na współpracę?”: 641–1361 px — czcionka lekko zmniejszona względem 7vw (maks. ok. 7%,
   przy 961 px, gdzie gutter przeskakuje z 32 na 56px), żeby czarne zdanie zmieściło się w jednej linii; dzielnik 13.6 =
   szerokość zdania przy foncie 1px (ok. 13.58, zmierzone w Chromium) + ok. 1,75% zapasu na różnice renderowania fontu
   między przeglądarkami (stałe w całym przedziale — sprawdzone pomiarem). var(--gutter) sam przełącza się z 32px na
   56px na granicy 960/961px (patrz reguły :root wyżej w pliku), więc jedna formuła obsługuje cały przedział.
   Od ok. 1362 px kontener rośnie szybciej niż wymagana szerokość zdania przy foncie z clamp() — wtedy font bez zmian (92px).
   Poniżej 641 px zdanie nadal łamie się na 2 linie (przy foncie >= 28px 1 linia nie mieści się na wąskich ekranach). */
@media (min-width: 641px) and (max-width: 1361px) {
  .contact-hero__title { font-size: min(7vw, calc((100vw - var(--gutter) * 2) / 13.6)); }
}
@media (max-width: 640px) { .contact-form__row { grid-template-columns: minmax(0, 1fr); } .contact { padding-bottom: 60px; } }
/* Kontakt ≤ 640 px: luźniejsza interlinia tytułu (.92 z v2.css sklejało wiersze, ogonek „ę” dotykał kolejnego wiersza),
   „Wyślij” na pełną szerokość pod kciukiem; ≤ 960 px e-mail z obszarem trafienia 44 px (podkreślenie zostaje przy tekście) */
@media (max-width: 640px) {
  html.v2 .contact-hero__title { line-height: 1.04; }
  .contact-form__send { width: 100%; }
}
@media (max-width: 960px) { .contact__mail { display: inline-block; padding-top: 19px; margin-top: -15px; } }

/* ---------- 10d. Strona główna ---------- */
.btn--lg { font-size: 15px; padding: 15px 30px; }
.home-hero { padding: 78px 0 70px; position: relative; overflow: hidden; background: var(--color-hero-bg); }
.home-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.home-hero__text { flex: 0 1 auto; width: fit-content; max-width: 100%; }
.home-hero__accent {
  font-style: italic; background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-right: .12em; margin-right: -.12em; /* miejsce na pochyloną ostatnią literę (background-clip:text przycina do pola inline) */
}
.home-hero__nowrap { white-space: nowrap; } /* „uczą naprawdę” zawsze w jednej linii */
.home-hero__lead { font: 400 19px/1.6 var(--font-body); color: var(--color-text-muted); max-width: 100%; contain: inline-size; margin-top: 28px; }
.home-hero__actions { display: flex; gap: 26px; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.home-hero__link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 15px var(--font-body); color: var(--color-ink); text-decoration: none;
}
/* podkreślenie tłem na całym linku: ciągłe pod tekstem, odstępem i strzałką */
.home-hero__link:hover, .home-hero__link:focus-visible { color: var(--color-purple); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* logo PMG: słupki wyrastają kolejno z własnego środka, ramka się rysuje, litery P→M→G; potem „oddech” w pętli */
@keyframes pmgdraw { from { stroke-dashoffset: 1044; } }
@keyframes pmgbarrise { from { scale: 1 .15; opacity: 0; } }
@keyframes pmgletter { from { opacity: 0; transform: translateY(5px); } }
/* origin przesunięty przez translateY: dy = (f - .5) * (1 - s); fazy dobrane tak, by słupki nie zrównywały wysokości ani dołów i zachowały kolejność gór */
@keyframes pmgbreathe { 50% { transform: translateY(var(--dy)) scaleY(var(--s)); } }
.hero-logo { width: 300px; height: 300px; position: relative; flex: none; --pmg-out: cubic-bezier(.23, 1, .32, 1); --pmg-sine: cubic-bezier(.37, 0, .63, 1); }
.hero-logo__frame { position: absolute; inset: 0; width: 300px; height: 300px; overflow: visible; }
.hero-logo__frame path { stroke-dasharray: 1044; animation: pmgdraw 4.8s var(--pmg-sine) .2s both; }
/* litery P M G w przerwie prawej krawędzi ramki — pojawiają się, gdy linia ramki dochodzi do przerwy */
.hero-logo__letter { font: 700 24px var(--font-head); fill: #3a2fb0; animation: pmgletter .9s var(--pmg-sine) 4.7s both; }
.hero-logo__letter:nth-of-type(2) { animation-delay: 5.05s; }
.hero-logo__letter:nth-of-type(3) { animation-delay: 5.4s; }
/* geometria jak w materialy/logotypy/Logo PMG.png (% obszaru słupków) */
.hero-logo__bars { position: absolute; left: 62px; top: 47px; width: 174px; height: 190px; }
.hero-logo__bar { position: absolute; width: 12.3%; border-radius: 8.5px; animation: pmgbarrise .56s var(--pmg-out) var(--rise) both, pmgbreathe 5.6s var(--pmg-sine) var(--loop) infinite; }
.hero-logo__bar--1 { left: 0; top: 28.6%; height: 52.9%; border-radius: 11px 0 0 11px; --rise: .1s; --loop: 1.4s; --s: .62; --dy: -8.74%; background: linear-gradient(180deg, #e5185e, #8b2c9c); }
.hero-logo__bar--2 { left: 17.6%; top: 23.7%; height: 62%; --rise: .18s; --loop: 1.57s; --s: .66; --dy: -5.44%; background: linear-gradient(180deg, #e5185e, #8b2c9c); }
.hero-logo__bar--3 { left: 35%; top: 14.5%; height: 79.9%; --rise: .26s; --loop: 1.81s; --s: .67; --dy: -.66%; background: linear-gradient(180deg, #c21a6f, #5a2fb0); }
.hero-logo__bar--4 { left: 52.7%; top: 4.4%; height: 95.6%; --rise: .34s; --loop: 1.76s; --s: .66; --dy: 3.74%; background: linear-gradient(180deg, #1d46e0, #3a2fb0); }
.hero-logo__bar--5 { left: 70.3%; top: 0; height: 90.2%; --rise: .42s; --loop: 1.76s; --s: .66; --dy: 2.04%; background: linear-gradient(180deg, #1d46e0, #3a2fb0); }
.hero-logo__bar--6 { left: 87.7%; top: 11.9%; height: 69.6%; border-radius: 0 11px 11px 0; --rise: .5s; --loop: 1.79s; --s: .66; --dy: -5.44%; background: linear-gradient(180deg, #1d46e0, #5a2fb0); }
@media (max-width: 960px) { .home-hero__inner { justify-content: flex-start; } }
/* ≤ 960 px: logo PMG w hero ukryte (display: none wyłącza też jego animacje); przycisk i „Poznaj nas” w jednym wierszu,
   przycisk z lewej, link z prawej. Napisy się nie łamią; gdy przy powiększonym tekście systemowym nie zmieszczą się obok
   siebie, link przechodzi do drugiego wiersza (dalej po prawej) zamiast łamać „Nasze / projekty” w przycisku */
@media (max-width: 960px) {
  .hero-logo { display: none; }
  .home-hero__actions { justify-content: space-between; gap: 12px; }
  .home-hero__actions > * { white-space: nowrap; }
  .home-hero__link { margin-left: auto; }
}
/* ≤ 374 px: przy 320 px przycisk (padding 30 px) + „Poznaj nas” + odstęp = 297 px, a kontener ma 280 px — węższy padding przycisku */
@media (max-width: 374px) {
  .home-hero__actions .btn { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 640px) {
  .home-hero { padding: 44px 0 50px; }
  /* 320–354 px: „uczą naprawdę” (nowrap) nie mieściło się (ucięte „ę”); od ok. 355 px bez zmian (44 px) */
  html.v2 .display { font-size: clamp(36px, 12.4vw, 44px); }
  .home-hero__text { flex-basis: 100%; }
  .home-hero__lead { font-size: 17px; }
}
/* reduced motion: statyczne logo w kształcie referencyjnym */
@media (prefers-reduced-motion: reduce) {
  .hero-logo__bar, .hero-logo__letter, .hero-logo__frame path { animation: none; }
}

.home-news { padding: 66px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.section-head__link { font: 600 14px var(--font-body); color: var(--color-ink); text-decoration: none; }
.section-head__link:hover { text-decoration: underline; color: var(--color-purple); }
.section-head__link:focus-visible { text-decoration: underline; color: var(--color-purple); }

.home-h2 { font: 600 32px var(--font-head); letter-spacing: -.02em; }
.home-h2--lg { font-size: clamp(28px, 3.6vw, 36px); margin: 8px 0 30px; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: minmax(0, 1fr); } }
/* ≤ 960 px: kafelki Aktualności jako poziomy pas przewijany palcem (scroll-snap, bez JS), od krawędzi do krawędzi ekranu;
   widać kawałek następnej karty, więc wiadomo, że można przesunąć. Lista zostaje listą; linki w kartach są fokusowalne. */
@media (max-width: 960px) {
  .news-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, 340px); gap: 14px;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .news-grid::-webkit-scrollbar { display: none; }
  .news-tile { scroll-snap-align: start; }
}
.news-tile { position: relative; background: var(--color-bg); overflow: hidden; }
.news-tile__img { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font: 600 10px ui-monospace, monospace; }
.news-tile__img--pink { background: repeating-linear-gradient(45deg, rgba(229,24,94,.2) 0 12px, transparent 12px 24px), #f0e6ee; color: #a3005a; }
.news-tile__img--purple { background: repeating-linear-gradient(45deg, rgba(139,44,156,.2) 0 12px, transparent 12px 24px), #efe6f2; color: #7a1f9e; }
.news-tile__img--blue { background: repeating-linear-gradient(45deg, rgba(29,70,224,.2) 0 12px, transparent 12px 24px), #e6ebf5; color: #1d46b0; }
.news-tile__img--violet { background: repeating-linear-gradient(45deg, rgba(90,47,176,.2) 0 12px, transparent 12px 24px), #ece6f5; color: #5a2fa0; }
.news-tile__body { padding: 18px; }
.news-tile__date { font: 500 11px var(--font-body); color: var(--color-purple); }
.news-tile__title { font: 600 17px/1.3 var(--font-head); margin-top: 6px; }
.news-tile__link { color: inherit; text-decoration: none; }
.news-tile__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.news-tile__link:focus-visible { outline: none; }
.news-tile:has(.news-tile__link:focus-visible) { outline: 3px solid var(--color-blue); outline-offset: 3px; }
.news-tile__more {
  font: 400 13px/1.5 var(--font-body); color: var(--color-text-muted); margin-top: 8px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.news-tile__cta { display: block; font: 600 13px/1.4 var(--font-body); color: var(--color-purple); margin-top: 14px; }

.home-projects { padding: 70px 0; scroll-margin-top: 16px; }
.home-projects:focus { outline: none; } /* fokus programowy po kliknięciu kotwicy, bez ramki wokół całej sekcji */
.eyebrow--blue-soft { color: var(--color-blue); letter-spacing: .16em; margin: 0; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 640px) { .project-grid { grid-template-columns: minmax(0, 1fr); } } /* 641–960: 3 kolumny zamiast rozciągniętych kart na ~700 px */
.project-card { display: block; height: 100%; padding: 24px; background: var(--color-surface); text-decoration: none; color: inherit; }
.project-card:hover, .project-card:focus-visible { color: inherit; }
.project-card__title { font: 600 19px var(--font-head); }
.project-card__desc { font: 400 14px/1.55 var(--font-body); color: var(--color-text-muted); margin-top: 8px; }
.project-card__more { display: inline-block; font: 600 13px/1.4 var(--font-body); margin-top: 16px; }
.project-card__more--pink { color: var(--color-pink-text); }
.project-card__more--blue { color: var(--color-blue); }
.project-card__more--purple { color: var(--color-purple); }
.project-card__logo { display: flex; align-items: center; height: 56px; margin-bottom: 16px; }
.project-card__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

.home-join { padding: 66px 0; }
.home-join__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .home-join__grid { grid-template-columns: minmax(0, 1fr); } }
.join-card {
  /* start gradientu przyciemniony (#c8124f), aby biały tekst miał kontrast ≥ 4.5:1 */
  background: linear-gradient(120deg, #c8124f, #8b2c9c 55%, #1d46e0) border-box; border-radius: 24px; padding: 44px; /* border-box: gradient pod obwódką, bez paska z drugiego końca gradientu przy krawędzi */
  display: flex; flex-direction: column; justify-content: center; color: #fff; text-decoration: none;
}
.join-card__title {
  font: 600 clamp(26px, 3.4vw, 34px)/1.05 var(--font-head); color: #fff; letter-spacing: -.02em;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px;
}
.join-card__text { font: 400 15px/1.6 var(--font-body); color: #fff; margin-top: 14px; }
.join-card__arrow { display: inline-block; transition: transform var(--hover-t); }
@media (hover: hover) { .join-card:hover .join-card__arrow { transform: translateX(3px); } }
.join-card:focus-visible .join-card__arrow { transform: translateX(3px); }
@media (max-width: 640px) { .join-card { padding: 30px 24px; } }
@media (min-width: 961px) { .join-card__title { flex-wrap: nowrap; white-space: nowrap; } } /* 640–960 px nowrap wystawał poza kartę */
.home-join__links { display: flex; flex-direction: column; gap: 16px; }
.link-tile {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; background: #fff;
  padding: 24px; text-decoration: none;
}
.link-tile__title { font: 600 20px var(--font-head); color: var(--color-ink); display: flex; align-items: center; gap: 6px; }
.link-tile__desc { font: 400 13px/1.5 var(--font-body); color: var(--color-text-muted); }
.link-tile__arrow { display: inline-block; transition: transform var(--ease); }
@media (hover: hover) { .link-tile:hover .link-tile__arrow { transform: translateX(3px); } }
.link-tile:focus-visible .link-tile__arrow { transform: translateX(3px); }

/* ---------- 10e. Rozwijane karty (wspólne: [data-expand]) ---------- */
.expand-toggle { all: unset; cursor: pointer; }
.expand-toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.expand-toggle:focus-visible { outline: none; }
[data-expand] { position: relative; }
[data-expand]:has(.expand-toggle:focus-visible) { outline: 3px solid var(--color-blue); outline-offset: 3px; }

/* ---------- 10f. PM Session ---------- */
.eyebrow--pink { color: var(--color-pink-text); letter-spacing: .2em; margin: 0; }
.pms-banner { padding: 66px 0 58px; }
.pms-banner__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.pms-banner__title { font: 600 clamp(40px, 6vw, 62px)/1.02 var(--font-head); letter-spacing: -.02em; }
.date-pill {
  font: 700 11px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-warn);
  background: var(--color-warn-bg); border: 1px solid rgba(184,134,11,.3); padding: 6px 14px; border-radius: var(--radius-pill);
}
.pms-banner__theme { font: 600 15px var(--font-head); color: var(--color-purple); margin-top: 14px; }
.pms-banner__lead { max-width: 720px; margin-top: 16px; text-wrap: pretty; }
.pms-banner__lead--full { max-width: none; }
.pms-banner__date { font: 500 15px var(--font-body); color: var(--color-text-muted); margin-top: 8px; }
[data-page="pm-session-xiv"] .pms-banner__head, [data-page="pm-session-xv"] .pms-banner__head { align-items: baseline; }
[data-page="pm-session-xiv"] .pms-banner__theme, [data-page="pm-session-xv"] .pms-banner__theme { font: 400 var(--fs-lead) var(--font-head); }
[data-page="pm-session-xiv"] .pms-banner__theme em, [data-page="pm-session-xv"] .pms-banner__theme em { font-style: italic; font-weight: 700; }
[data-page="pm-session-xiv"] .pms-banner__date, [data-page="pm-session-xv"] .pms-banner__date { font: 500 clamp(24px, 3.9vw, 47px) var(--font-body); white-space: nowrap; margin-top: 0; }
.pms-about { padding: 0 0 58px; }
.pms-about__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 34px; align-items: center; }
@media (max-width: 960px) { .pms-about__grid { grid-template-columns: minmax(0, 1fr); } }
.pms-h2 { font: 600 26px var(--font-head); letter-spacing: -.02em; }
.pms-about__text { margin-top: 14px; }
.prose .pms-about__text { font-size: 17px; line-height: 1.7; }
.pms-about__figure { margin: 0; }
.pms-about__img { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; }
.pms-about__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pms-about__caption { font: 500 11.5px/1.5 var(--font-body); color: var(--color-text-muted); margin-top: 10px; }
.pms-main { padding: 8px 0 60px; }
.pms-block { padding-top: 52px; }
.pms-block--tight { padding-top: 48px; }
.pms-about--pms-gap { padding-bottom: 29px; }
.pms-block--pms-gap { padding-top: 26px; }
/* ostatnia sekcja przed stopką: dolny odstęp jak między sekcjami (29 + 26 px + margines <dl> 1em = 72 px przy 1440, 71 px przy 375) */
.pms-block--pms-gap:last-child { padding-bottom: calc(55px + 1em); }
.speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; align-items: start; margin-top: 22px; }
.pms-block .gallery { margin-top: 22px; }
@media (max-width: 640px) { .speakers { grid-template-columns: minmax(0, 1fr); } }
.speaker { background: var(--color-bg); padding: 14px; }
.speaker__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.speaker__img:not(img) { background: repeating-linear-gradient(45deg, rgba(229,24,94,.2) 0 12px, transparent 12px 24px), #f0e6ee; }
.speaker__name { font: 600 19px var(--font-head); margin-top: 16px; }
.speaker__note { font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-purple); margin-top: 6px; }
.speaker__topic { font: 400 14.5px/1.55 var(--font-body); color: var(--color-text-muted); margin-top: 8px; text-wrap: pretty; }
.speaker__more-inner { border-top: 1px solid rgba(0,0,0,.09); padding-top: 12px; }
.speaker__bio { font: 400 13.5px/1.6 var(--font-body); color: var(--color-text); text-wrap: pretty; }
.speaker__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-link {
  position: relative; z-index: 2; font: 700 12px var(--font-body); color: var(--color-blue); text-decoration: none;
  border: 1.5px solid rgba(29,70,224,.3); border-radius: var(--radius-pill); padding: 6px 12px;
}
.chip-link:hover { background: rgba(29,70,224,.06); }
.js .speaker__more { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .28s ease, opacity .24s ease, margin-top .28s ease; }
.speaker__more { margin-top: 12px; }
.js .speaker__more { margin-top: 0; }
.js .speaker.is-open .speaker__more { max-height: 420px; opacity: 1; margin-top: 12px; }
.speaker.is-open { transform: var(--card-lift); box-shadow: var(--card-shadow-hover); }
.speaker__name::after { content: "▾" / ""; display: inline-block; margin-left: 6px; color: var(--color-text-muted); transition: transform var(--ease); }
.speaker.is-open .speaker__name::after { transform: rotate(180deg); }
[data-page="pm-session-xiv"] .speakers, [data-page="pm-session-xv"] .speakers { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
[data-page="pm-session-xiv"] .speaker, [data-page="pm-session-xv"] .speaker { padding: 16px; }
[data-page="pm-session-xiv"] .speaker__name, [data-page="pm-session-xv"] .speaker__name { display: block; margin-top: 12px; font-size: 18px; }
@media (max-width: 640px) {
  [data-page="pm-session-xiv"] .speakers, [data-page="pm-session-xv"] .speakers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  [data-page="pm-session-xiv"] .speaker, [data-page="pm-session-xv"] .speaker { padding: 10px; }
  [data-page="pm-session-xiv"] .speaker__name, [data-page="pm-session-xv"] .speaker__name { margin-top: 10px; font-size: 16px; }
}
[data-page="pm-session-xiv"] .speaker__name::after, [data-page="pm-session-xv"] .speaker__name::after { content: none; }
/* PM Session XIV: karty równej wysokości w wierszu, niezależnie od długości nazwiska */
[data-page="pm-session-xiv"] .speakers, [data-page="pm-session-xv"] .speakers { align-items: stretch; }
[data-page="pm-session-xiv"] .speaker, [data-page="pm-session-xv"] .speaker { display: flex; flex-direction: column; }
[data-page="pm-session-xiv"] .speaker__card, [data-page="pm-session-xv"] .speaker__card { display: flex; flex-direction: column; flex: 1 1 auto; }
.speaker__card { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.speaker__card:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; border-radius: 12px; }
@media (hover: hover) {
  .js .speaker:hover .speaker__more { max-height: 420px; opacity: 1; margin-top: 12px; }
  .speaker:hover .speaker__name::after { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .speaker__name::after { transition: none; }
}

.schedule { margin-top: 22px; border-bottom: 1px solid rgba(0,0,0,.08); }
.schedule__row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(0,0,0,.08); }
.schedule__row--parallel { align-items: start; }
.schedule__time { font: 600 15px var(--font-head); color: var(--color-pink-text); }
.schedule__tag { display: block; font: 600 10.5px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 5px; }
.schedule__item { font: 500 15.5px/1.5 var(--font-body); color: var(--color-ink); text-wrap: pretty; }
.schedule__sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.schedule__session { background: var(--color-bg); border: 1px solid rgba(0,0,0,.07); border-radius: 14px; padding: 16px; }
.schedule__who { font: 600 14.5px var(--font-head); color: var(--color-ink); }
.schedule__what { font: 400 13px/1.5 var(--font-body); color: var(--color-text-muted); margin-top: 6px; text-wrap: pretty; }
.schedule-table-wrap { margin-top: 22px; overflow-x: auto; border-bottom: 1px solid rgba(0,0,0,.08); }
.schedule-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.schedule-table th, .schedule-table td { text-align: left; padding: 4px 12px 4px 0; border-top: 1px solid rgba(0,0,0,.08); vertical-align: top; font: 400 13px/1.35 var(--font-body); color: var(--color-ink); }
.schedule-table th { font: 600 10px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: 8px; border-top: 0; }
/* tylko godzina: wiersze pod rowspan zaczynają się od punktu programu */
.schedule-table td:first-child:nth-last-child(3) { font: 600 14px var(--font-head); color: var(--color-pink-text); white-space: nowrap; }
.schedule-table__tag { display: block; font: 600 10.5px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 5px; white-space: normal; }
@media (max-width: 640px) {
  .schedule__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .schedule__tag br { display: none; }
  .schedule__tag { display: inline; margin-left: 8px; }
}
/* PM Session XIV ≤ 640 px: harmonogram zostaje tabelą (semantyka i rowspan bez zmian), ale bez min-width 560 px —
   tekst zawija się w trzech wąskich kolumnach zamiast chować kolumnę „Prowadzący” poza ekranem */
@media (max-width: 640px) {
  .schedule-table-wrap { overflow-x: visible; }
  .schedule-table { min-width: 0; table-layout: fixed; }
  .schedule-table th:first-child { width: 64px; }
  .schedule-table th:last-child { width: 32%; }
  .schedule-table th, .schedule-table td { padding: 8px 10px 8px 0; line-height: 1.4; overflow-wrap: anywhere; }
  .schedule-table th:last-child, .schedule-table td:last-child { padding-right: 0; }
  .schedule-table th { font-size: 11px; overflow-wrap: normal; }
  .schedule-table td:last-child { color: var(--color-text-muted); }
}

.pms-stats__sub { font: 400 15px/1.6 var(--font-body); color: var(--color-text-muted); margin-top: 8px; }
.stats {
  margin: 64px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 16px;
}
.stat { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; text-align: center; }
.stat__value {
  margin: 0; font: 500 clamp(40px, 5vw, 64px)/1.1 var(--font-head); letter-spacing: -.03em; color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.stat__label { font: 500 15px var(--font-body); color: var(--color-text-muted); margin-top: 14px; }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .stat__value { font-size: clamp(34px, 11vw, 46px); } }
.pms-social { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pms-social__title { font: 600 20px var(--font-head); color: var(--color-ink); }
.pms-cta { margin-top: 44px; display: flex; justify-content: center; }
.btn--xl { font-size: 16px; padding: 16px 36px; }
.btn--gradient { background: linear-gradient(110deg, #c8124f, #8b2c9c 55%, #1d46e0); }
.pms-next { padding: 66px 0 74px; }
.pms-next__box {
  background: #fff; border: 1px dashed rgba(20,20,20,.3); border-radius: 18px; padding: 52px 32px; margin-top: 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.pms-next__icon { width: 74px; height: 74px; border-radius: 20px; background: repeating-linear-gradient(45deg, rgba(20,20,20,.07) 0 10px, transparent 10px 20px), #efeee9; border: 1px solid rgba(0,0,0,.07); }
.pms-next__icon:has(img) { display: flex; align-items: center; justify-content: center; background: #efeee9; }
.pms-next__icon img { display: block; width: 56px; height: auto; }
.pms-next__text { font: 600 24px/1.3 var(--font-head); color: var(--color-ink); letter-spacing: -.02em; }
/* PM Session „Czym jest PM Session?”: zdanie na pierwszym ekranie (statycznie; odsłanianie reszty zdania przewijaniem w v2.css + v2.js) */
/* „Czym jest PM Session?”: intro z taśmami. Trzy taśmy dużego tekstu w tonach marki (dekoracja, aria-hidden) za i nad zdaniem,
   w przeciwnych kierunkach; ruszają się tylko podczas przewijania (main.js, initPmsTapes), a gdy przewijanie stoi, stoją też one.
   Wejście ok. 2 s (taśmy wjeżdżają z boków, zdanie podjeżdża), potem spokój. Zdanie h1 nieruchome, w --color-ink.
   Sekcja = pierwszy ekran pod nagłówkiem i ścieżką (146 px); taśmy przycięte do sekcji (bez poziomego przewijania). */
.pms-intro {
  position: relative; display: flex; align-items: center;
  min-height: calc(100vh - 146px); min-height: calc(100svh - 146px);
  padding: 72px 0; overflow: hidden; overflow-x: clip;
}
.pms-intro > .container { position: relative; z-index: 1; width: 100%; }
/* warstwa taśm: bez zdarzeń myszy, przy górnej i dolnej krawędzi sekcji zanika (maska) */
.pms-intro__tapes {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
/* taśma: pozycja pionowa + wejście na zewnętrznym elemencie; JS przesuwa wewnętrzny .pms-intro__track */
.pms-intro__tape { position: absolute; left: 0; right: 0; font: 700 clamp(44px, 8.4vw, 128px)/1 var(--font-head); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.pms-intro__track { display: flex; width: max-content; will-change: transform; }
.pms-intro__unit { flex: none; white-space: pre; }
/* górna i dolna taśma w różu i błękicie, środkowa (za zdaniem) konturem fioletowym na lekkim pasie gradientu; niskie krycie, zdanie zostaje czytelne */
.pms-intro__tape--top { top: 10%; color: rgba(229, 24, 94, .15); animation: pms-tape-in-l 1.9s 0s both cubic-bezier(.22, .7, .2, 1); }
.pms-intro__tape--mid {
  top: 50%; margin-top: -.5em; color: transparent; -webkit-text-stroke: 1.5px rgba(139, 44, 156, .4);
  background: linear-gradient(90deg, rgba(229, 24, 94, .07), rgba(139, 44, 156, .05) 50%, rgba(29, 70, 224, .07));
  box-shadow: inset 0 1px 0 rgba(139, 44, 156, .14), inset 0 -1px 0 rgba(139, 44, 156, .14);
  animation: pms-tape-in-r 1.9s .12s both cubic-bezier(.22, .7, .2, 1);
}
.pms-intro__tape--low { bottom: 9%; color: rgba(29, 70, 224, .16); animation: pms-tape-in-l 1.9s .24s both cubic-bezier(.22, .7, .2, 1); }
.pms-intro__title {
  margin: 0 auto; max-width: 15em;
  font: 600 clamp(36px, 6.2vw, 96px)/1.02 var(--font-head); letter-spacing: -.035em; color: var(--color-ink);
  text-align: center; text-wrap: balance;
  animation: pms-title-in 1.1s .5s cubic-bezier(.2, .7, .2, 1) both;
}
.pms-intro + .pms-about { padding-top: 64px; }
@keyframes pms-tape-in-l { from { opacity: 0; transform: translate3d(-14%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes pms-tape-in-r { from { opacity: 0; transform: translate3d(14%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes pms-title-in { from { opacity: 0; transform: translate3d(0, .25em, 0); } to { opacity: 1; transform: none; } }
/* telefon (≤ 640 px): wszystkie trzy taśmy jak na komputerze, mniejsze i bliżej krawędzi; JS zwalnia ruch wszystkich tak samo */
@media (max-width: 640px) {
  .pms-intro { padding: 48px 0; }
  .pms-intro__tape { font-size: clamp(32px, 10vw, 56px); }
  .pms-intro__tape--top { top: 11%; }
  .pms-intro__tape--low { bottom: 11%; }
}
/* ograniczony ruch: bez wejścia, zdanie widoczne od razu, taśmy statyczne (JS ich nie przesuwa) */
@media (prefers-reduced-motion: reduce) {
  .pms-intro__tape, .pms-intro__title { animation: none; }
}
/* PM Session na telefonie (≤ 960 px): mobilny odpowiednik kolorowania słów z v2.js.
   Klasy ustawia js/mobile.js: .mobile-fx na <html>, .m-word na słowach akapitów.
   Tylko color słów akapitów (jak na desktopie), bez nasłuchu scroll. */

@keyframes m-word-ink { to { color: var(--color-ink); } }

@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* akapity „Co to PM Session?”: słowo ciemnieje, gdy przejeżdża przez dolną połowę ekranu (wiersz po wierszu).
       inline-block: dla elementu inline Chromium liczy view() z całego akapitu (wszystkie słowa miałyby ten sam postęp) */
    .mobile-fx .m-word { display: inline-block; color: var(--color-text-muted); animation: m-word-ink linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }
  }
}

/* ---------- 10. Dołącz ---------- */
/* ---------- Dołącz (tymczasowy plik — do scalenia ze style.css) ---------- */

/* Nav nad hero: ten sam odcień co hero (makieta: #141414) */
.join-page-body .site-nav--dark { background-color: var(--color-ink); }
.join-page-body .site-nav--dark.is-scrolled { background-color: rgba(20,20,20,1); }

/* Hero */
.join-page-hero { position: relative; overflow: hidden; background: var(--color-ink); padding: 80px 0 70px; }
.join-page-hero__blob { position: absolute; border-radius: 50%; filter: blur(6px); pointer-events: none; }
.join-page-hero__blob--pink {
  top: 22px; right: 8%; width: min(360px, 70vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(229,24,94,.55), transparent 62%);
}
.join-page-hero__blob--blue {
  top: 12px; left: -72px; width: min(320px, 64vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(29,70,224,.5), transparent 62%);
}
.join-page-hero__inner { position: relative; }
.join-page-hero__title { font: 600 clamp(42px, 7vw, 72px)/.98 var(--font-head); color: #fff; letter-spacing: -.03em; max-width: 16ch; }

/* Treść: proces + karta formularza */
.join-page-main { padding: 60px 0 90px; }
.join-page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.join-page-col { min-width: 0; }
.join-page-h2 { font: 600 clamp(26px, 3.2vw, 32px)/1.15 var(--font-head); letter-spacing: -.02em; margin: 0 0 22px; }


/* Oś procesu: pionowa ze strzałką w dół, narysowana w całości bez JS/z reduced-motion — prosta linia
   przechodzi przez kroki 1 → 2 → 3 → 4 (na ≥ 961 px z JS v2.js zamienia ją na poziomą, rysowaną
   scrollem — patrz v2.css i initJoinPath). Grot (::after niżej, na ostatnim elemencie listy, nie na
   całej liście) stoi przy górnej krawędzi kropki 04, więc jego pozycja liczona jest od GÓRY tego
   elementu (miejsca kropki), a nie od dołu listy — dzięki temu jest dokładna niezależnie od długości
   tekstu w krokach 1–3. Koniec samej linii (bottom niżej) nie ma takiego oparcia (dół listy zależy od
   wysokości własnego tekstu kroku 04), więc jest tylko przybliżony do dwóch długości tego tekstu
   (zawijanie na wąskich ekranach vs szerszych) — stąd dwie wartości bottom. */
.join-page-steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.join-page-steps::before {
  content: ""; position: absolute; left: 14.5px; top: 16px; bottom: 47px; width: 3px;
  background: linear-gradient(180deg, #e5185e, #8b2c9c 50%, #1d46e0);
}
@media (max-width: 440px) {
  .join-page-steps::before { bottom: 68px; }
}
.join-page-steps__item { position: relative; padding-left: 48px; }
/* grot na końcu osi, przy górnej krawędzi kropki 04: pozycja liczona od góry ostatniego elementu
   listy (= góra jego kropki), więc jest dokładna bez względu na wysokość tekstu w krokach 1–3 i 04 */
.join-page-steps__item:last-child::after {
  content: ""; position: absolute; left: 16px; top: -8px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #1d46e0;
  transform: translateX(-50%);
}
/* kropka 32×32 (było 20×20, ~1,6×) — środek (16,16) względem lewego górnego rogu kropki; ::before/::after i padding-left/padding-top (v2.css) przeliczone pod ten środek */
.join-page-steps__dot { display: block; position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #e5185e; border: 3px solid var(--color-bg); }
.join-page-steps__item:nth-child(2) .join-page-steps__dot { background: #b0308a; }
.join-page-steps__title { font: 600 16px/1.3 var(--font-head); letter-spacing: 0; }
.join-page-steps__text { font: 400 13.5px/1.55 var(--font-body); color: var(--color-text-muted); margin-top: 5px; }
/* ≤ 960 px: mobilny odpowiednik desktopowej linii rysowanej scrollem (v2.js initJoinPath) — pionowa oś rysuje się
   przewijaniem (scaleY), grot pojawia się, gdy linia dochodzi do kroku 04, kropki „wskakują”, gdy wjeżdżają w ekran.
   Tylko transform/opacity, bez JS (CSS scroll-driven animations); bez wsparcia albo przy reduced-motion oś jest statyczna. */
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .join-page-steps { view-timeline-name: --join-steps; }
    .join-page-steps::before { transform-origin: 50% 0; animation: join-line-draw linear both; animation-timeline: --join-steps; animation-range: entry 35% cover 62%; }
    .join-page-steps__item:last-child::after { animation: join-arrow-in linear both; animation-timeline: --join-steps; animation-range: cover 56% cover 64%; }
    .join-page-steps__dot { animation: join-dot-in linear both; animation-timeline: view(); animation-range: entry 40% cover 38%; }
  }
}
@keyframes join-line-draw { from { transform: scaleY(0); } }
@keyframes join-arrow-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes join-dot-in { from { opacity: .25; transform: scale(.35); } }

/* Formularz bez karty: szerokość = najszerszy tekst (fit-content), wyśrodkowany. Wewnątrz dwie części
   — .join-page-form__main (tytuł, przycisk) i .join-page-form__side (pomoc, link do sekcji) — jedna pod
   drugą, wyśrodkowane, rozdzielone cienką linią na szerokość formularza. */
.join-page-form {
  display: flex; flex-direction: column; gap: 24px; width: fit-content; max-width: 100%; margin: 34px auto; /* margines zamiast dawnego paddingu karty: ten sam odstęp od sąsiednich sekcji */
}
.join-page-form__main { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.join-page-form__title { font: 600 24px/1.2 var(--font-head); letter-spacing: 0; }
.join-page-form__btn { font-size: 15px; padding: 14px 30px; white-space: nowrap; }
.join-page-form__btn:focus-visible, .join-page-form__btn:active { background: var(--color-pink-text); color: #fff; }
@media (hover: hover) { .join-page-form__btn:hover { background: var(--color-pink-text); color: #fff; } } /* jak „Wyślij” w Kontakcie */
.join-page-form__side { display: flex; flex-direction: column; gap: 14px; text-align: center; padding-top: 24px; border-top: 1px solid var(--color-border); }

@media (max-width: 960px) {
  .join-page-hero { padding: 56px 0 52px; }
}
@media (max-width: 640px) {
  .join-page-main { padding: 40px 0 60px; }
  .join-page-form { margin: 28px auto; }
}

/* ---------- 10. O nas ---------- */
/* ---------- O nas (o-nas.html) — tymczasowo, do scalenia z style.css ---------- */

/* Mini-hero */
.about-hero { padding: 66px 0 58px; background: var(--color-bg); }
.about-hero__eyebrow { letter-spacing: .2em; margin: 0; }
.about-hero__title { font: 600 clamp(34px, 3.8vw, 46px)/1.05 var(--font-head); letter-spacing: -.02em; margin-top: 12px; max-width: 1180px; text-wrap: pretty; }
.about-hero__lead { max-width: 1040px; margin-top: 22px; text-wrap: pretty; }

/* Nagłówki sekcji */
.about-h2 { font: 600 clamp(26px, 3.4vw, 32px)/1.15 var(--font-head); letter-spacing: -.02em; }

/* Struktura koła */
.about-structure { padding: 64px 0; position: relative; isolation: isolate; overflow: hidden; }
.about-structure .about-h2 { margin-bottom: 30px; }
#struktura {
  background: var(--color-bg); /* bez kropkowanego wzoru: w przejściu prześwitywałby i tworzył granicę z .about-units */
}
#struktura::before { display: none; } /* poświata (blur 90px) byłaby widoczna przy górnej krawędzi sekcji; pod zdjęciem i tak niewidoczna */
/* Tło sekcji: warstwice rysowane przez js/tlo-warstwice.js (css/tlo-warstwice.css) */
.about-board { display: flex; flex-direction: column; align-items: center; }
.about-board__list { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 100%; }
.about-board__card {
  min-width: min(280px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 18px;
  /* zarząd: biała karta (jak karty sekcji), ciemny tekst; struktura koła jest monochromatyczna, bez nici gradientu */
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 22px;
  box-shadow: 0 12px 28px -16px rgba(20, 20, 20, .45);
}
.about-board__who { min-width: 0; }
.about-board__role { display: block; font: 600 10px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted); }
.about-board__name { display: block; font: 600 19px var(--font-head); color: var(--color-ink); margin-top: 2px; }
.about-board__line { width: 2px; height: 26px; background: rgba(20, 20, 20, .55); }

/* globalny html { scroll-padding-top: 96px } już liczy odstęp na przyklejony header */
.about-units { padding: 8px 0 72px; }
.about-units .about-h2 { margin-bottom: 30px; }
.about-units__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.about-unit {
  /* poświata w kolorze sekcji w rogu kafelka — ten sam akcent co w schemacie niżej */
  background: radial-gradient(120% 90% at 100% 0%, var(--about-tint), transparent 60%), var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px 22px 26px;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: start; /* ikona i nazwa u góry kafelka */
}
.about-unit__logo {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--about-accent), #3a2fb0);
  box-shadow: 0 6px 16px -8px var(--about-accent);
}
.about-unit__logo svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.about-unit__name { font: 600 19px/1.2 var(--font-head); letter-spacing: 0; }
.about-unit__desc { grid-column: 1 / -1; font: 400 14px/1.55 var(--font-body); color: var(--color-text-muted); margin-top: 16px; }

.about-sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* Kolory --about-accent/--about-label/--about-tint: tylko kafelki "Nasze sekcje" (.about-units__list). Struktura koła (.about-sections) ma stałe neutralne kolory — patrz .about-sec niżej — i nie używa tych zmiennych. */
.about-units__list .about-sec--pink   { --about-accent: #e5185e; --about-label: var(--color-pink-text); --about-tint: rgba(229, 24, 94, .07); }
.about-units__list .about-sec--purple { --about-accent: #8b2c9c; --about-label: #8b2c9c; --about-tint: rgba(139, 44, 156, .07); }
.about-units__list .about-sec--blue   { --about-accent: #1d46e0; --about-label: #1d46e0; --about-tint: rgba(29, 70, 224, .07); }
.about-units__list .about-sec--violet { --about-accent: #6a2fb8; --about-label: #6a2fb8; --about-tint: rgba(106, 47, 184, .07); }
.about-sec {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden;
  background: #fff;
}
.about-sec__head { padding: 18px 18px 4px; }
.about-sec__name { font: 600 17px/1.15 var(--font-head); letter-spacing: 0; color: var(--color-ink); }
.about-sec__count { font: 500 12.5px var(--font-body); color: var(--color-text-muted); margin-top: 6px; }
.about-sec__body { padding: 12px 16px 18px; }
.about-coord { background: rgba(20, 20, 20, .035); border: 1px solid transparent; border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; }
.about-coord__label { font: 600 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.about-coord__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.about-coord__name { font: 600 15px/1.3 var(--font-head); color: var(--color-ink); min-width: 0; }
.about-sec__members { display: flex; flex-direction: column; gap: 7px; }
.about-member {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border: 1px solid rgba(20, 20, 20, .08); border-radius: var(--radius-sm); padding: 9px 11px;
  transition: background var(--hover-t), border-color var(--hover-t);
}
.about-member:hover, .about-member:focus-within { border-color: rgba(20, 20, 20, .25); }
.about-member__name { font: 500 13.5px/1.35 var(--font-body); color: var(--color-ink); min-width: 0; }

/* Ikony e-mail: na desktopie pojawiają się po najechaniu; przy focusie i na dotyku zawsze widoczne */
.about-act { display: flex; gap: 6px; flex: none; opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease; }
.about-person:hover .about-act, .about-person:focus-within .about-act { opacity: 1; transform: none; }
@media (hover: none) { .about-act { opacity: 1; transform: none; } }
.about-ico {
  width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--color-ink); color: #fff; text-decoration: none;
}
.about-member .about-ico { width: 24px; height: 24px; }
.about-ico:hover, .about-ico:focus-visible { color: #fff; }
.about-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about-ico--light { width: 28px; height: 28px; background: rgba(255, 255, 255, .92); color: var(--color-ink); }
.about-ico--light:hover, .about-ico--light:focus-visible { color: var(--color-ink); }
.about-ico--light:focus-visible { outline-color: #fff; }
/* ikony w białych kartach zarządu: jak ikony koordynatorów (ciemne kółko, biała ikona), fokus w ciemnym kolorze */
.about-board__card .about-ico--light { background: var(--color-ink); color: #fff; }
.about-board__card .about-ico--light:hover, .about-board__card .about-ico--light:focus-visible { color: #fff; }
.about-board__card .about-ico--light:focus-visible { outline-color: var(--color-ink); }

@media (max-width: 1240px) { .about-sections, .about-units__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .about-hero { padding: 40px 0 40px; }
  .about-structure { padding: 48px 0; }
  .about-sections, .about-units__list { grid-template-columns: minmax(0, 1fr); }
  .about-units { padding-bottom: 48px; }
  .about-board__list { width: 100%; }
}

/* ---------- O nas: Wizja, Misja, Cel ---------- */
/* Mobile-first: jedna kolumna, między blokami krótka pozioma kreska (::before). Od 961 px trzy kolumny, a kreski
   zamieniają się w dwie pionowe linie na wysokości wiersza z akapitami (nie nagłówków). Czysto dekoracyjne (CSS). */
.about-values { padding: 8px 0 48px; }
.about-values__list { display: grid; grid-template-columns: minmax(0, 1fr); text-align: center; --values-line: rgba(20, 20, 20, .6); }
.about-values__item:not(:first-child)::before { content: ""; display: block; width: 64px; height: 1px; margin: 40px auto; background: var(--values-line); }
.about-values__title { font: 700 clamp(32px, 4vw, 52px)/1.1 var(--font-head); letter-spacing: -.02em; color: var(--color-ink); }
.about-values__text { font: 400 16px/1.7 var(--font-body); color: var(--color-text); max-width: 36ch; margin: 24px auto 0; text-wrap: pretty; }
@media (min-width: 961px) {
  .about-values { padding-bottom: 72px; }
  .about-values__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
  .about-values__item { display: grid; grid-template-rows: auto 1fr; row-gap: clamp(32px, 4.5vw, 64px); }
  .about-values__item:not(:first-child)::before {
    grid-row: 2; grid-column: 1; justify-self: start; align-self: stretch;
    width: 1px; height: auto; margin: 0 0 0 calc(clamp(32px, 5vw, 72px) / -2);
  }
  .about-values__title, .about-values__text { grid-column: 1; }
  .about-values__title { grid-row: 1; }
  .about-values__text { grid-row: 2; margin-top: 0; font-size: clamp(16px, 1.2vw, 17px); }
}

/* ---------- 10. Aktualności ---------- */
/* ---------- Aktualności (lista + artykuł) — plik tymczasowy do scalenia ze style.css ---------- */
@keyframes blogfade { from { opacity: 0; } to { opacity: 1; } }
.js .blog-view, .js .blog-article { animation: blogfade .5s ease both; }

/* Stan przed uruchomieniem skryptu: przy adresie #wpis-… pokaż tylko ten wpis (bez mignięcia listy) */
.js:not(.blog-ready) .blog-article:not(:target) { display: none; }
.js:not(.blog-ready) .blog-list:has(~ .blog-articles .blog-article:target) { display: none; }

.blog-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.blog-date { font: 500 12px var(--font-body); color: var(--color-text-muted); }
.blog-more { font: 600 13px/1.4 var(--font-body); margin-top: 24px; color: var(--color-purple); }

/* Placeholdery zdjęć (tła z makiety) */
.blog-ph { overflow: hidden; display: flex; align-items: center; justify-content: center; font: 600 11px ui-monospace, monospace; color: var(--color-text-muted); }
.blog-ph > img, .news-tile__img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-ph > picture, .news-tile__img > picture { display: contents; }
.blog-ph > picture > img, .news-tile__img > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-ph--pms { background: repeating-linear-gradient(45deg, rgba(229,24,94,.2) 0 12px, transparent 12px 24px), #f0e6ee; }
.blog-ph--podcast { background: repeating-linear-gradient(45deg, rgba(139,44,156,.2) 0 12px, transparent 12px 24px), #efe6f2; }
.blog-ph--case { background: repeating-linear-gradient(45deg, rgba(29,70,224,.2) 0 12px, transparent 12px 24px), #e6ebf5; }
.blog-ph--integracja { background: repeating-linear-gradient(45deg, rgba(90,47,176,.2) 0 12px, transparent 12px 24px), #ece6f5; }
.blog-ph--warsztaty { background: repeating-linear-gradient(45deg, rgba(229,24,94,.18) 0 12px, transparent 12px 24px), #f3e8ee; }
.blog-ph--partnerzy { background: repeating-linear-gradient(45deg, rgba(29,70,224,.18) 0 12px, transparent 12px 24px), #e8ecf5; }

/* Hero listy */
.blog-hero { padding: 64px 0 34px; }
.blog-hero__title { font: 600 clamp(40px, 7vw, 88px)/.98 var(--font-head); letter-spacing: -.03em; margin-top: 10px; max-width: 16ch; }
.blog-hero__title:focus { outline: none; }
.blog-hero__title:focus-visible { outline: 3px solid var(--color-blue); }
.blog-hero__lead { font-size: 19px; line-height: 1.6; max-width: 560px; margin-top: 24px; }

/* Karty: cała karta klikalna (link w nagłówku rozciągnięty na kartę) */
[data-blog-card] { position: relative; }
.blog-link { color: inherit; text-decoration: none; }
.blog-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blog-link:hover { color: inherit; }
.blog-link:focus-visible { outline: none; }
[data-blog-card]:has(.blog-link:focus-visible) { outline: 3px solid var(--color-blue); outline-offset: 3px; }

/* Wpis wyróżniony */
.blog-feat { padding-top: 14px; }
.blog-featured {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden;
  background: var(--color-surface); cursor: pointer;
}
.blog-featured__img { min-height: 340px; }
.blog-featured__body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured__title { font: 600 clamp(26px, 3.4vw, 34px)/1.12 var(--font-head); letter-spacing: -.02em; margin-top: 16px; }
.blog-featured__excerpt { font: 400 15.5px/1.6 var(--font-body); color: var(--color-text-muted); margin-top: 14px; }

/* Siatka wpisów */
.blog-posts { padding: 46px 0 90px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.blog-card { display: flex; flex-direction: column; background: var(--color-surface); overflow: hidden; cursor: pointer; }
.blog-card__img { aspect-ratio: 16 / 9; }
.blog-card__body { flex: 1; padding: 32px 34px; display: flex; flex-direction: column; }
.blog-card__title { font: 600 clamp(22px, 2.6vw, 26px)/1.16 var(--font-head); letter-spacing: -.02em; margin-top: 15px; }
.blog-card__excerpt { font: 400 15px/1.6 var(--font-body); color: var(--color-text-muted); margin-top: 13px; }
.blog-card .blog-more { margin-top: auto; padding-top: 16px; }

/* Artykuł */
.blog-article { max-width: calc(780px + 2 * var(--gutter)); margin: 0 auto; padding: 40px var(--gutter) 80px; }
html:not(.js) .blog-article { border-top: 1px solid rgba(20,20,20,.12); }
.blog-meta--article { gap: 6px 11px; margin-top: 30px; }
.blog-meta--article .blog-date { font-size: 13px; }
.blog-article__title { font: 600 clamp(32px, 5.2vw, 46px)/1.08 var(--font-head); letter-spacing: -.025em; margin-top: 18px; }
.blog-article__title:focus { outline: none; }
.blog-article__title:focus-visible { outline: 3px solid var(--color-blue); }
.blog-article__lead { font: 400 clamp(17px, 1.8vw, 20px)/1.6 var(--font-body); color: var(--color-text-muted); margin-top: 20px; }
.blog-article__img { height: 360px; border-radius: 20px; margin-top: 34px; }
.blog-article__body { margin-top: 36px; }
.blog-article__h2 { font: 600 26px var(--font-head); letter-spacing: -.01em; margin-top: 34px; }
.blog-article__p { font: 400 var(--fs-body)/1.75 var(--font-body); color: var(--color-text); margin-top: 14px; text-wrap: pretty; }
.blog-article__foot {
  margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(20,20,20,.12);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.blog-article__author { font: 500 14px var(--font-body); color: var(--color-text-muted); }
.blog-article__author b { color: var(--color-ink); }

@media (max-width: 960px) {
  .blog-featured { grid-template-columns: minmax(0, 1fr); }
  .blog-featured__img { min-height: 0; aspect-ratio: 16 / 9; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .blog-hero { padding: 44px 0 26px; }
  .blog-hero__lead { font-size: 17px; }
  .blog-featured__body { padding: 28px 24px; }
  .blog-card__body { padding: 26px 24px; }
  .blog-grid { gap: 22px; }
  .blog-posts { padding: 30px 0 60px; }
  .blog-article { padding-top: 28px; padding-bottom: 60px; }
  .blog-article__img { height: auto; aspect-ratio: 16 / 9; }
  .blog-article__h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .blog-view, .js .blog-article { animation: none; }
}

/* Pas trawy z polną myszą przed stopką (dekoracja; SVG buduje main.js → initGrass).
   Stała wysokość, mysz i źdźbła animowane tylko transformem — pas nie przesuwa treści.
   Bez JS: statyczna trawa z tła poniżej. */
.grass-strip {
  position: relative; flex: 0 0 auto; height: 110px; margin-bottom: -1px; overflow: hidden; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'><path fill='%235f9800' d='M-1 102Q4 72 13 47Q13 75 11 102ZM17 102Q23 69 34 43Q31 72 28 102ZM30 102Q29 68 25 41Q34 71 42 102ZM50 102Q49 66 46 36Q54 69 62 102ZM64 102Q62 71 58 45Q66 74 72 102ZM78 102Q79 61 79 28Q84 65 88 102ZM96 102Q102 61 112 28Q108 65 103 102ZM112 102Q110 62 107 29Q116 65 124 102ZM122 102Q125 65 128 34Q133 68 136 102ZM142 102Q148 68 157 40Q157 71 156 102ZM161 102Q160 69 159 43Q166 72 172 102ZM180 102Q180 62 179 30Q185 66 191 102ZM198 102Q196 62 191 29Q199 65 206 102ZM208 102Q211 58 215 22Q218 62 220 102ZM223 102Q223 69 220 42Q229 72 236 102Z'/><path fill='%237cb800' d='M-1 102Q4 73 12 49Q12 76 11 102ZM16 102Q18 77 22 56Q24 79 25 102ZM33 102Q35 74 38 52Q41 77 44 102ZM44 102Q43 76 41 54Q47 78 53 102ZM61 102Q66 76 74 55Q71 79 68 102ZM70 102Q72 82 73 65Q78 83 82 102ZM85 102Q87 84 89 69Q92 85 94 102ZM95 102Q101 73 110 50Q109 76 107 102ZM108 102Q110 82 113 65Q118 84 121 102ZM125 102Q128 78 134 58Q136 80 137 102ZM140 102Q141 83 140 68Q147 85 153 102ZM159 102Q162 84 167 69Q167 85 166 102ZM173 102Q173 84 173 69Q179 86 184 102ZM188 102Q188 78 188 58Q195 80 200 102ZM205 102Q204 82 203 66Q209 84 215 102ZM220 102Q219 74 217 52Q225 77 232 102Z'/><rect y='94' width='240' height='6' fill='%234f8a00'/></svg>") repeat-x left bottom / auto 100%;
}
.grass-strip.is-ready { background: none; }
.grass-strip__svg { display: block; position: absolute; left: 0; bottom: 0; }
.grass-strip__blade {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: grass-sway 3.6s ease-in-out infinite alternate; animation-play-state: paused;
}
.grass-strip.is-live .grass-strip__blade { animation-play-state: running; }
@keyframes grass-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.grass-strip__mouse-in { transform: translateY(64px); }
.grass-strip__ear, .grass-strip__eye { transform-box: fill-box; transform-origin: 50% 90%; }
.grass-strip__eye { transform-origin: 50% 50%; }
.grass-strip__whiskers { transform-box: fill-box; transform-origin: 0 50%; }
@media (max-width: 640px) { .grass-strip { height: 92px; } }
@media (prefers-reduced-motion: reduce) { .grass-strip__blade { animation: none; } }

/* ---------- 10. Podcast ---------- */
/* ---------- Podcast (ciemny motyw) — plik tymczasowy do scalenia ze style.css ---------- */
.theme-dark {
  --nav-accent: var(--color-purple);
  --pod-bg: #0a0a0c;
  --pod-surface: #1a1a20;
  --pod-panel: #141418;
  --pod-text: #f5f5f5;
  --pod-text-2: #b8b8bf;
  --pod-text-3: #8a8a92;
  --pod-text-desc: #c4c4ca;
  --pod-border: rgba(255, 255, 255, .08);
  --pod-pink-text: #ff5c93;                 /* różowy mały tekst na ciemnym tle (≥ 6:1) */
  --pod-gradient-text: linear-gradient(110deg, #ff5c93, #c77dd6 45%, #7f9cff); /* gradient tekstu na ciemnym tle (≥ 4.5:1) */
  background: var(--pod-bg);
  color: var(--pod-text);
}
.theme-dark h1, .theme-dark h2, .theme-dark h3 { color: var(--pod-text); }

/* Tło: szum, plamy, logo — dekoracyjne, poza przepływem */
.pod-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: var(--pod-bg);
}
.pod-bg__noise {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .14; mix-blend-mode: overlay; image-rendering: pixelated;
}
.pod-bg__blob {
  position: absolute; width: 45vw; height: 45vw; max-width: 600px; max-height: 600px;
  border-radius: 50%; filter: blur(90px); opacity: .22; will-change: transform;
}
.pod-bg__blob--red { background: var(--color-pink); top: 8%; left: 6%; transform: translate(-120px, -120px); }
.pod-bg__blob--blue { background: var(--color-blue); bottom: 8%; right: 8%; }
.pod-bg__blob--purple { background: var(--color-purple); top: 38%; left: 46%; transform: translate(120px, 120px); }
.pod-bg__logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(140vw, 1700px); aspect-ratio: 1600 / 1439;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 68%); mask-image: radial-gradient(circle, #000 30%, transparent 68%);
}
.pod-bg__logo picture, .pod-bg__logo img { width: 100%; height: 100%; }
.pod-bg__logo img { object-fit: contain; opacity: .09; filter: saturate(1.3); }

/* Przyciski */
.pod-btn {
  display: inline-flex; align-items: center; gap: 8px; font: 700 13.5px var(--font-body); text-decoration: none;
  padding: 11px 20px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
}
.pod-btn--spotify { color: var(--pod-bg); background: var(--color-spotify); }
.pod-btn--spotify:hover { color: var(--pod-bg); background: #23d160; }
.pod-btn--ghost { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.pod-btn--ghost:hover { color: #fff; background: rgba(255,255,255,.18); }

/* Hero */
.pod-hero { position: relative; padding: 70px 0 32px; }
.pod-eyebrow {
  font: 600 12px var(--font-body); letter-spacing: .2em; text-transform: uppercase; margin: 0;
  background: var(--pod-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
}
.pod-hero__title { font: 600 clamp(34px, 5.4vw, 52px)/1.06 var(--font-head); letter-spacing: -.02em; margin-top: 12px; max-width: 900px; text-wrap: pretty; }
.pod-hero__lead { font: 400 var(--fs-lead)/1.65 var(--font-body); color: var(--pod-text-2); max-width: 600px; margin-top: 18px; text-wrap: pretty; }
.pod-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Edycja 1 */
.pod-edition { position: relative; padding: 28px 0 74px; }
.pod-edition__title { font: 600 clamp(26px, 3.4vw, 30px)/1.2 var(--font-head); letter-spacing: -.02em; }
.pod-edition__year { color: var(--pod-text-3); font-weight: 500; }
.pod-edition__team { font: 400 15px/1.6 var(--font-body); color: var(--pod-text-2); margin: 12px 0 26px; }
.pod-edition__desc { font: 400 15px/1.6 var(--font-body); color: var(--pod-text-2); margin: 12px 0 0; max-width: 680px; text-wrap: pretty; }
.pod-edition__title + .pod-episodes, .pod-edition__desc + .pod-episodes { margin-top: 26px; }

.pod-episodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .pod-episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pod-episodes { grid-template-columns: minmax(0, 1fr); } }

.pod-ep {
  position: relative; display: flex; flex-direction: column;
  background: var(--pod-surface); border: 1px solid var(--pod-border); overflow: hidden;
  transition: transform var(--card-t), box-shadow var(--card-t);
  --card-shadow-hover: 0 24px 46px -24px rgba(0,0,0,.6); /* ciemniejszy cień na ciemnym tle podcastu */
}
.pod-ep:has(.pod-ep__btn:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }
.pod-ep__media { position: relative; }
.pod-ep__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; }
.pod-ep__meta { position: static; font: 600 12px var(--font-body); color: var(--pod-text-3); }
.pod-ep__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pod-ep__title { font: 600 17px/1.25 var(--font-head); letter-spacing: 0; margin-top: 8px; }
.pod-ep__btn { all: unset; cursor: pointer; }
.pod-ep__btn::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pod-ep__btn:focus-visible { outline: none; }
.pod-ep__hosts { font: 400 13px/1.55 var(--font-body); color: var(--pod-text-3); margin-top: 10px; }
.pod-ep__more { font: 600 13px/1.4 var(--font-body); margin-top: auto; padding-top: 16px; align-self: flex-start; color: var(--color-spotify); }

/* Modal odcinka (natywny <dialog>) */
@keyframes pmgmodal { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.pod-modal {
  border: 0; padding: 24px; margin: 0; background: transparent; color: var(--pod-text);
  width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; overflow-y: auto; overscroll-behavior: contain;
}
.pod-modal[open] { display: flex; }
.pod-modal::backdrop { background: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pod-modal__panel {
  position: relative; margin: auto; width: 100%; max-width: 820px;
  background: var(--pod-panel); border: 1px solid var(--pod-border); border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); animation: pmgmodal .35s ease both;
}
.pod-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color: #fff; font: 600 16px/1 var(--font-body); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pod-modal__close:hover { background: rgba(0,0,0,.8); }
.pod-modal__head { position: relative; }
.pod-modal__head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(20,20,24,.88) 72%, var(--pod-panel)); }
.pod-modal__img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.pod-modal__heading { position: absolute; bottom: 16px; left: 28px; right: 28px; z-index: 1; }
.pod-modal__num { font: 600 13px var(--font-body); color: var(--pod-pink-text); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.pod-modal__title { font: 600 clamp(22px, 3.2vw, 28px)/1.2 var(--font-head); color: #fff; margin-top: 6px; letter-spacing: -.01em; text-wrap: pretty; }
.pod-modal__body { padding: 28px 32px 34px; }
.pod-modal__people { display: flex; flex-direction: column; gap: 12px; margin: 0 0 22px; }
.pod-modal__people dt { font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pod-text-3); }
.pod-modal__people dd { font: 500 15px var(--font-body); color: var(--pod-text); margin: 2px 0 0; }
.pod-modal__player { border-radius: 14px; overflow: hidden; margin-bottom: 22px; }
.pod-modal__player:empty { display: none; }
.pod-modal__player iframe { display: block; width: 100%; height: 152px; border: 0; }
.pod-modal__links { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.pod-modal__desc { font: 400 14.5px/1.75 var(--font-body); color: var(--pod-text-desc); text-wrap: pretty; }
.pod-modal__guest {
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid transparent; border-image: linear-gradient(135deg, #e5185e, #8b2c9c, #1d46e0) 1;
}
.pod-modal__guest-label { font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pod-pink-text); }
.pod-modal__guest-bio { font: 400 14px/1.65 var(--font-body); color: var(--pod-text-desc); margin-top: 8px; text-wrap: pretty; }

@media (max-width: 640px) {
  .pod-hero { padding: 48px 0 24px; }
  .pod-edition { padding: 22px 0 56px; }
  .pod-modal { padding: 12px; }
  .pod-modal__head::after { display: none; }
  .pod-modal__img { aspect-ratio: 4 / 3; max-height: none; }
  .pod-modal__heading { position: relative; left: auto; right: auto; bottom: auto; margin-top: 18px; padding: 0 20px; }
  .pod-modal__body { padding: 22px 20px 28px; }
  .pod-modal__links .pod-btn { width: 100%; justify-content: center; }
}

/* Okno prelegenta (PM Session XIV): białe, jeden kolor tekstu, przewijana treść.
   Tylko modyfikator — okno odcinka Podcastu (.pod-modal bez modyfikatora) zostaje bez zmian. */
.pod-modal--speaker { color: var(--color-ink); overflow: hidden; }
.pod-modal--speaker .pod-modal__panel {
  display: flex; flex-direction: column; max-width: min(595px, 90vw); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  background: var(--color-surface); border: 0; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
}
.pod-modal--speaker .pod-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pod-modal--speaker .pod-modal__body:focus-visible { outline-offset: -3px; }
.pod-modal--speaker .pod-modal__close { background: var(--color-surface); color: var(--color-ink); border: 1.5px solid var(--color-ink); }
.pod-modal--speaker .pod-modal__close:hover { background: var(--color-bg); }
.speaker-modal__media { display: block; margin: -28px -32px 26px; }
.speaker-modal__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pod-modal--speaker .pod-modal__title { color: var(--color-ink); margin-top: 0; }
.speaker-modal__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.pod-modal--speaker .speaker-modal__head:first-child { padding-right: 52px; }
.speaker-modal__linkedin { flex: none; }
.pod-modal--speaker .speaker__note { color: var(--color-ink); margin-top: 8px; }
.pod-modal--speaker .pod-modal__num { font: 600 17px/1.4 var(--font-head); color: var(--color-ink); text-shadow: none; margin-top: 14px; text-wrap: pretty; }
.pod-modal--speaker .pod-modal__desc { font-size: 15px; color: var(--color-ink); margin-top: 12px; }
.speaker-modal__label {
  font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink);
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-border);
}
.pod-modal--speaker .chip-link { color: var(--color-ink); border-color: rgba(20,20,20,.4); text-decoration: underline; text-underline-offset: 2px; }
.pod-modal--speaker .chip-link:hover { background: var(--color-bg); }
@media (max-width: 640px) {
  .pod-modal--speaker .pod-modal__panel { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .speaker-modal__media { margin: -22px -20px 22px; }
}

/* ---------- 11. Lightbox i modal (natywny <dialog>) ---------- */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: 100vw; height: 100vh; height: 100dvh;
  margin: 0; color: #fff;
}
.lightbox::backdrop { background: rgba(10,10,10,.92); }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 20px 30px; }
.lightbox__img { max-width: min(90vw, 1400px); max-height: 78vh; object-fit: contain; border-radius: 8px; }
.lightbox__caption { font: 500 14px/1.5 var(--font-body); color: rgba(255,255,255,.88); margin-top: 16px; text-align: center; max-width: 720px; }
.dialog-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  font: 400 26px/1 var(--font-body); display: flex; align-items: center; justify-content: center;
}
.dialog-close:hover { background: rgba(255,255,255,.2); }
body.has-dialog { overflow: hidden; }
.join-page-form__help { font: 400 14px/1.5 var(--font-body); color: var(--color-text-muted); margin: 0; }
.join-page-form__help a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.join-page-form__sections { font: 400 14px/1.5 var(--font-body); color: var(--color-text-muted); margin: 0; }
.join-page-form__sections a {
  color: var(--color-ink); text-decoration: underline; text-underline-offset: 6px;
  transition: color var(--hover-t);
}
.join-page-form__sections a:hover, .join-page-form__sections a:focus-visible {
  color: var(--color-pink-text);
}
.join-page-form__sections span { display: inline-block; transition: transform var(--hover-t); }
@media (hover: hover) {
  .join-page-form__sections a:hover span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .join-page-form__sections a:hover span { transform: none; }
}
/* PM Session: „Co to PM Session?” w pytaniach (v3 zakładki) */
.pms-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.pms-facts__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px 22px; }
.pms-facts__q { font: 600 18px/1.2 var(--font-head); margin-bottom: 8px; }
.pms-facts__a { font: 400 15px/1.55 var(--font-body); color: var(--color-text-muted); margin: 0; }
@media (max-width: 960px) { .pms-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pms-facts { grid-template-columns: minmax(0, 1fr); } }
/* ≤ 640 px: 6 kafelków jako poziomy pas przewijany palcem (jak Aktualności na stronie głównej) zamiast ~1000 px kart
   pod sobą. Przewija się owijka .pms-facts-wrap (nie sama lista <dl>, żeby nie tracić jej semantyki); main.js
   (initScrollers) daje owijce tabindex, rolę region i nazwę, żeby dało się ją przewijać klawiaturą */
@media (max-width: 640px) {
  .pms-facts-wrap {
    margin: 28px calc(-1 * var(--gutter)) 0; padding: 2px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .pms-facts-wrap::-webkit-scrollbar { display: none; }
  .pms-facts-wrap:focus-visible { outline-offset: -3px; }
  .pms-facts {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(calc((100vw - 2 * var(--gutter)) * .86), 320px);
    gap: 12px; width: max-content; margin-top: 0;
  }
  .pms-facts__item { scroll-snap-align: start; }
}

/* ---------- 12. Strony prawne (polityka prywatności, deklaracja dostępności) + 404 ---------- */
.legal-hero__lead { margin-top: 14px; }
.legal { max-width: var(--measure); overflow-wrap: anywhere; }
.legal h2 { font: 600 var(--fs-h3) var(--font-head); letter-spacing: -.01em; margin: 40px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font: 600 17px var(--font-head); margin: 26px 0 10px; }
.legal p { font: 400 var(--fs-body)/1.75 var(--font-body); color: var(--color-text); margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { font: 400 var(--fs-body)/1.7 var(--font-body); color: var(--color-text); margin-bottom: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal__updated { font: 600 13px var(--font-body); color: var(--color-text-muted); margin-bottom: 30px; }
.error-404 { text-align: center; }
.error-404__lead { max-width: 44ch; margin: 16px auto 0; }
.error-404__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ---------- 12b. Wersja mobilna: cele dotykowe ≥ 44 px (≤ 960 px) ----------
   Po definicjach komponentów, żeby wygrać kolejnością; tylko rozmiar obszaru trafienia, wygląd bez zmian. */
@media (max-width: 960px) {
  .skip-link { padding-top: 13px; padding-bottom: 13px; }
  .breadcrumb { padding: 10px 0 4px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .section-head__link { display: inline-flex; align-items: center; min-height: 44px; }
  .home-hero__link { min-height: 44px; }
  .chip-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
  .pod-btn { min-height: 44px; }
  .join-page-form__sections a { display: inline-block; padding: 12px 0; }
  /* ikony e-mail/LinkedIn w O nas: 32 px widoczne + 44 px obszar trafienia (::after), odstęp 12 px, żeby obszary się nie nakładały */
  .about-act { gap: 12px; }
  .about-ico, .about-member .about-ico, .about-ico--light { position: relative; width: 32px; height: 32px; }
  .about-ico::after { content: ""; position: absolute; inset: -6px; }
}

/* ---------- 12c. Wersja mobilna: dotyk zamiast hovera ----------
   Na ekranach dotykowych strzałki kart przesuwają się w chwili dotknięcia (:active), jak na desktopie po najechaniu. */
@media (hover: none), (pointer: coarse) {
  .case-card:active .case-card__more-arrow, .join-card:active .join-card__arrow, .link-tile:active .link-tile__arrow,
  .join-page-form__sections a:active span { transform: translateX(3px); }
}

/* ---------- 9b. Karta serwisu (wspólna baza — celowo na końcu pliku, żeby wygrała kolejnością) ---------- */
.case-card, .project-card, .blog-card, .blog-featured, .link-tile, .pod-ep { border-radius: var(--card-radius); }
.news-tile, .speaker { border-radius: var(--card-radius-sm); }
.case-card, .project-card, .blog-card, .blog-featured, .link-tile, .news-tile, .speaker, .join-card {
  border: var(--card-border); box-shadow: var(--card-shadow);
  transition: transform var(--card-t), box-shadow var(--card-t), border-color var(--card-t);
}
@media (hover: hover) {
  .case-card:hover, .project-card:hover, .blog-card:hover, .blog-featured:hover, .link-tile:hover,
  .news-tile:hover, .join-card:hover, .pod-ep:hover, .speaker:hover { transform: var(--card-lift); box-shadow: var(--card-shadow-hover); }
}
.case-card:focus-visible, .project-card:focus-visible, .link-tile:focus-visible, .join-card:focus-visible { transform: var(--card-lift); box-shadow: var(--card-shadow-hover); }
.blog-card:has(:focus-visible), .blog-featured:has(:focus-visible), .news-tile:has(:focus-visible), .pod-ep:has(:focus-visible),
.speaker:has(:focus-visible) { transform: var(--card-lift); box-shadow: var(--card-shadow-hover); }
.case-card:active, .project-card:active, .blog-card:active, .blog-featured:active, .link-tile:active,
.news-tile:active, .join-card:active, .pod-ep:active, .speaker:active { transform: var(--card-press); transition-duration: var(--press-dur); transition-timing-function: var(--press-ease); }

/* ---------- 9c. Przyciski i ikony — wspólna baza interakcji (na końcu pliku, żeby wygrała kolejnością) ---------- */
.btn, .site-nav__cta, .social__link, .contact__social-link, .pod-btn, .about-ico, .site-nav__toggle, .site-nav__subtoggle, .dialog-close, .pod-modal__close, .chip-link {
  transition: transform var(--hover-t), background var(--hover-t), color var(--hover-t), border-color var(--hover-t), box-shadow var(--hover-t);
}
@media (hover: hover) {
  .btn:hover, .site-nav__cta:hover, .social__link:hover, .contact__social-link:hover, .pod-btn:hover, .about-ico:hover { transform: var(--btn-lift); }
}
.btn:focus-visible, .site-nav__cta:focus-visible, .social__link:focus-visible, .contact__social-link:focus-visible, .pod-btn:focus-visible, .about-ico:focus-visible { transform: var(--btn-lift); }
.btn:active, .site-nav__cta:active, .social__link:active, .contact__social-link:active, .pod-btn:active, .about-ico:active,
.site-nav__toggle:active, .site-nav__subtoggle:active, .dialog-close:active, .pod-modal__close:active, .chip-link:active {
  transform: var(--btn-press); transition-duration: var(--press-dur); transition-timing-function: var(--press-ease);
}

/* ---------- Pasek zgody na mapę Google + przyciski „Ustawienia plików cookie” ---------- */
button.site-footer__switch--btn, button.map-consent__settings {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
button.map-consent__settings { font: 500 13.5px/1.55 var(--font-body); }
button.map-consent__settings[hidden] { display: none; }
/* pływająca pigułka jak header po przewinięciu (to samo tło, cień i zaokrąglenie), wyśrodkowana nad dolną krawędzią */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 12px; z-index: 90; width: min(1120px, calc(100% - 20px)); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; text-align: center;
  padding: 12px 12px 12px 28px; border-radius: var(--radius-pill); color: var(--color-ink);
  background: rgba(247,246,243,.99); box-shadow: 0 14px 34px -14px rgba(20,20,40,.35), 0 0 0 1px rgba(20,20,20,.06);
  opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar.is-in { opacity: 1; transform: none; }
.cookie-bar__text { margin: 0; flex: 1 1 360px; max-width: 760px; font: 400 14px/1.55 var(--font-body); color: var(--color-text); }
.cookie-bar__text a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-bar__btn {
  min-width: 128px; min-height: 44px; padding: 10px 20px; cursor: pointer;
  font: 600 14px/1.2 var(--font-body); color: var(--color-ink);
  background: var(--color-surface); border: 2px solid var(--color-ink); border-radius: 999px;
}
.cookie-bar__btn:hover { background: var(--color-ink); color: #fff; }
.cookie-bar__btn:focus-visible, .cookie-bar a:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; }
@media (max-width: 640px) {
  .cookie-bar { padding: 16px 16px 14px; border-radius: 28px; } /* kilka linii tekstu: pełna pigułka ucięłaby rogi */
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: none; transform: none; }
}