/* =============================================
   SELEKCIAKI 2026 — DESIGN SYSTEM v3
   Cinematic hero + 3D Coverflow Carousel
   Fonty: Cabinet Grotesk + Satoshi (Fontshare, self-hosted)
   ============================================= */

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/CabinetGrotesk-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/CabinetGrotesk-Extrabold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/CabinetGrotesk-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --c-primary:   #3e6034;
  --c-dark:      #2c5437;
  --c-sage:      #b6d5aa;
  --c-sage-lt:   #e8f5e2;
  --c-text:      #1a1f1a;
  --c-muted:     #5a6b5a;
  --c-bg:        #f8fcf6;
  --c-hero:      #08120a;
  --c-cinema:    #0d1a0f;

  --font-title:  'Cabinet Grotesk', 'Signika', sans-serif;
  --font-sub:    'Satoshi', 'Merriweather Sans', sans-serif;
  --font-body:   'Satoshi', 'Imprima', sans-serif;
  --font:        'Satoshi', 'Imprima', sans-serif;
  --r-card:      22px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  font-family: var(--font-body);
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* ---- Typy fontów ---- */
h2, .section-title, .nav-brand-text, .bin-detail__header {
  font-family: var(--font-title);
}
h3, .card-3d__face h3,
.hero-tagline__main, .hero-tagline__sub,
.section-chip, .nav-link, .nav-link--cta,
.logo-label__text, .logo-label__arrow,
.hero-arc__text, .hero-scroll__label,
.film-tag, .card-face-tag, .card-face-cta,
.know-num, .know-link,
.teacher-badge, .bin-detail__label, .bin-detail__back,
.bin-hint, .bdot {
  font-family: var(--font-sub);
}
body  { background: var(--c-hero); color: var(--c-text); }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }

/* Intro logo — elementy hero ukryte do startu animacji
   (klasę js-intro nadaje inline skrypt w <head>, zdejmuje JS po intro) */
.js-intro .logo-img,
.js-intro .hero-arc,
.js-intro .hero-tagline,
.js-intro .hero-scroll { opacity: 0; }

/* =============================================
   SECTIONS
   ============================================= */
.section {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.section--hero   { background: var(--c-hero); }
.section--light  { background: var(--c-bg); }
.section--dark   { background: var(--c-dark); }
.section--cinema { background: var(--c-cinema); }
.section--sage   { background: var(--c-sage-lt); }

.section-inner {
  max-width: 1200px;
  width: 100%;
  padding: 90px 48px 64px;
}

.section-header {
  margin-bottom: 36px;
}

.section-chip {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid rgba(62,96,52,0.3);
  border-radius: 20px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 16px;
}
.section-chip--sage { border-color: rgba(182,213,170,0.4); color: var(--c-sage); }
.section-chip--dark { border-color: rgba(44,84,55,0.4);   color: var(--c-dark); }

.section-title {
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--c-text);
}
.section-title--light { color: #fff; }
.section-title--dark  { color: var(--c-dark); }

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  /* Ukryty na hero — pojawia się po zjechaniu na kolejne sekcje */
  opacity: 0;
  pointer-events: none;
  transition: background 0.35s, backdrop-filter 0.35s, opacity 0.45s;
}
.navbar.scrolled {
  opacity: 1;
  pointer-events: auto;
  background: rgba(8,18,10,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(182,213,170,0.1);
}
.nav-brand-text {
  font-size: 17px; font-weight: 900;
  letter-spacing: 4px; color: var(--c-sage);
}
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link {
  padding: 6px 14px;
  font-size: 13px; font-weight: 700;
  color: rgba(182,213,170,0.65);
  border-radius: 20px;
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover { color: var(--c-sage); background: rgba(182,213,170,0.1); }
.nav-link--cta  {
  color: var(--c-sage);
  border: 1px solid rgba(182,213,170,0.35);
  margin-left: 8px;
}
.nav-link--cta:hover { background: rgba(182,213,170,0.12); }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--c-sage); border-radius: 2px;
}

/* =============================================
   SCROLL DOTS
   ============================================= */
.scroll-nav {
  position: fixed; right: 28px; top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex; flex-direction: column; gap: 12px;
}
.scroll-dot {
  display: block; width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(182,213,170,0.22);
  transition: background 0.3s, transform 0.3s;
}
.scroll-dot:hover        { background: rgba(182,213,170,0.7); transform: scale(1.4); }
.scroll-dot--active      { background: var(--c-sage); transform: scale(1.5); }

/* =============================================
   HERO — centered, logo dominuje ekran
   ============================================= */
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: 16px; /* navbar ukryty na hero — minimalny padding */
}

/* Logo wrap */
.logo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.logo-glow {
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(62,96,52,0.28) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* Logo container — 4/5 × 9/8 = 9/10 pierwotnej wielkości */
.logo-nav {
  position: relative;
  height: min(75vh, 756px);
  aspect-ratio: 681.2 / 654.36;
  z-index: 1;
  touch-action: none; /* pełna kontrola JS nad gestem — bez przechwytywania przez scroll */
}

/* Individual elements — % of 681.2 × 654.36 */
.logo-el {
  position: absolute;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: none;
}
.logo-el picture {
  display: block; width: 100%; height: 100%;
}
.logo-el img {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none; display: block;
}

#leaf-1 { left:  0.1%; top:  0.4%; width: 99.4%; height: 99.5%; z-index: 1; }
#arm-1  { left: 34.8%; top: 17.4%; width: 46.0%; height: 65%; z-index: 5; }
#arm-2  { left: 55.9%; top: 55.3%; width: 37.4%; height: 40%; z-index: 5; }
#arm-3  { left: 10.3%; top: 47.2%; width: 32.5%; height: 48%; z-index: 5; }
#leaf-2 { left: 56.1%; top:  0%;   width: 29.2%; height: 35%; z-index: 5; }
#leaf-3 { left: 40.2%; top: 73.6%; width: 59.8%; height: 26%; z-index: 5; }

/* Elementy logo — 6 osobnych plików stackowanych transparentnie */
.logo-img {
  position: absolute;
  left: 0.1%; top: 0.4%; width: 99.4%; height: 99.5%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  z-index: 1;
}

/* transform-origin: centrum widocznego elementu w przestrzeni pełnokadrowego pliku */
#leaf-1-img { transform-origin: 50.0% 50.0%; }
#arm-1-img  { transform-origin: 57.8% 49.9%; z-index: 3; }  /* górna gałąź — przód */
#arm-2-img  { transform-origin: 74.6% 75.3%; z-index: 3; }  /* dolna prawa gałąź — przód */
#arm-3-img  { transform-origin: 26.6% 71.2%; z-index: 3; }  /* dolna lewa gałąź — przód */
#leaf-2-img { transform-origin: 70.7% 17.5%; }  /* górna prawa gałązka */
#leaf-3-img { transform-origin: 70.1% 86.6%; }  /* dolna gałązka */

/* Hover label */
.logo-label {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px;
  opacity: 0; pointer-events: none;
  transform: translateY(5px);
  transition: opacity 0.22s, transform 0.22s;
}
.logo-label.visible { opacity: 1; transform: translateY(0); }
.logo-label__text {
  font-size: 20px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--c-sage);
}
.logo-label__arrow { color: rgba(182,213,170,0.5); font-size: 22px; }

/* Hero tagline — 1.5× większy */
.hero-tagline { text-align: center; }
.hero-tagline__main {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.3px;
}
.hero-tagline__sub {
  font-size: 16px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(182,213,170,0.3);
  margin-top: 9px;
}

/* =============================================
   HERO — ŁUKOWY NAPIS "Świat SELEKT"
   ============================================= */
.hero-arc {
  display: block;
  width: 80%;
  max-width: 700px;
  align-self: center;
  margin-bottom: -35px;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: screen;
  animation: float-text 3.8s ease-in-out infinite;
}

/* =============================================
   HERO — TŁO EKOLOGICZNE (głębia)
   ============================================= */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Wielowarstwowa głębia CSS — bez ciężkiego obrazu */
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(40,90,44,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 30%, rgba(30,60,34,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 80% 70%, rgba(28,55,32,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 25% 20% at 15% 75%, rgba(20,45,24,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 20% 15% at 85% 20%, rgba(25,55,29,0.07) 0%, transparent 50%);
}

/* =============================================
   HERO — hero-center na wierzchu tła
   ============================================= */
.hero-center { position: relative; z-index: 2; }

/* Scroll indicator */
.hero-scroll {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
}
.hero-scroll__arrow {
  font-size: 17px; color: rgba(182,213,170,0.35);
  animation: bounce 2s ease-in-out infinite;
}
.hero-scroll__label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(182,213,170,0.2);
}
@keyframes float-text {
  0%, 100% { transform: translateY(0px); }
  45%       { transform: translateY(-7px); }
  55%       { transform: translateY(-7px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* =============================================
   3D COVERFLOW CAROUSEL
   ============================================= */

/* Outer wrapper (controls + stage stack) */
.c3d-wrap {
  position: relative;
  width: 100%;
}

/* Stage: perspective container + overflow clip */
.c3d-stage {
  position: relative;
  height: 490px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y; /* pozwól JS obsłużyć poziomy swipe, pion zostaw scrollowi strony */
}

/* Individual 3D card */
.card-3d {
  position: absolute;
  width: 300px;
  height: 440px;
  transform-style: preserve-3d;
  cursor: pointer;
  will-change: transform, opacity;
  touch-action: pan-y;
}
.card-3d img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Card face (inner content) */
.card-3d__face {
  width: 100%; height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  transition: box-shadow 0.3s;
  position: relative;
}

/* Tekst w kartach edukacji — ponad postacią */
.card-face-tag,
.card-3d__face h3,
.card-3d__face p,
.card-face-cta {
  position: relative;
  z-index: 1;
}

/* Postacie w buttonach edukacji — rezerwuj dolną strefę karty */
#c3d-edukacja .card-3d__face--sage  { padding-bottom: 185px; }
#c3d-edukacja .card-3d__face--glass { padding-bottom: 160px; }

.card-face-char {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* EkoDetektyw — po prawej stronie, nie nakłada się na tekst po lewej */
.card-face-char--45 {
  right: 0;
  height: 48%;
  width: auto;
}
/* Nastolatki klas 6-7 — wycentrowane */
.card-face-char--67 {
  left: 50%;
  transform: translateX(-50%);
  height: 44%;
  width: auto;
  max-width: 100%;
}
/* Selekciaki — wycentrowane, mniejsze */
.card-face-char--sel {
  left: 50%;
  transform: translateX(-50%);
  height: 38%;
  width: auto;
  max-width: 100%;
}

/* Active card glow */
.card-3d[data-active="true"] .card-3d__face {
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

/* Link cards */
.card-3d__face--link { text-decoration: none; }

/* ---- Card face themes ---- */
.card-3d__face--green {
  background: var(--c-primary); color: #fff;
  padding: 32px 28px;
}
.card-3d__face--sage {
  background: var(--c-sage); color: var(--c-dark);
  padding: 32px 28px;
}
.card-3d__face--white {
  background: #fff; color: var(--c-text);
  padding: 32px 28px;
  border: 1px solid rgba(62,96,52,0.09);
}
.card-3d__face--primary {
  background: var(--c-primary); color: #fff;
  padding: 28px 26px;
  gap: 10px;
}
.card-3d__face--glass {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  padding: 28px 26px; gap: 10px;
}
.card-3d__face--outline {
  border: 1px solid rgba(182,213,170,0.25);
  color: rgba(255,255,255,0.75);
  padding: 28px 26px; gap: 10px;
}

/* Karta z gotową grafiką (tekst wypalony w obrazie) — wypełnia cały kadr */
.card-3d__face--image {
  padding: 0;
}
.card-3d__face--image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Bin card */
.card-3d__face--bin {
  background: #fff; color: var(--c-text);
  padding: 0 0 20px;
}
.bin-header {
  background: var(--bin, #555);
  color: #fff;
  font-size: 48px; font-weight: 900;
  text-align: center; padding: 20px 0;
  letter-spacing: -2px;
}
.card-3d__face--bin h3 {
  font-size: 17px; font-weight: 800;
  color: var(--c-text);
  padding: 14px 20px 6px;
}
.bin-items {
  padding: 0 20px;
  flex: 1;
}
.bin-items li {
  font-size: 13px; color: var(--c-muted);
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.bin-items li:last-child { border: none; }
.bin-warn {
  font-size: 11px; font-weight: 700;
  color: #c62828;
  padding: 8px 20px 0;
  margin-top: auto;
}

/* Film card */
.card-3d__face--film {
  background: #111d14;
  color: #fff;
  padding: 0;
}

/* TV frame wrapper — YouTube thumbnail w ekranie telewizora */
.film-thumb-wrap {
  position: relative;
  aspect-ratio: 2210 / 1352;
  width: 100%;
  overflow: visible;
  flex-shrink: 0;
}
/* YouTube thumbnail — pozycja ekranu w nowym TV (wyliczona z pogladowo.png) */
.film-thumb-wrap > img:first-child {
  position: absolute;
  top: 12%;
  left: 12%;
  width: 64%;
  height: 65%;
  object-fit: cover;
  border-radius: 4px;
  z-index: 1;
}
/* TV frame na wierzchu — transparent screen area przepuszcza thumbnail */
.film-tv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 3;
}
.film-play-btn {
  position: absolute;
  top: 44%; left: 44%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  font-size: 30px; color: #fff;
  border: none; cursor: pointer;
  transition: background 0.2s;
  z-index: 4;
}
.film-play-btn:hover { background: rgba(0,0,0,0.6); }
.film-info { flex: none; padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 5px; }
.film-tag {
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(182,213,170,0.6);
}
.film-info h3 { font-size: 17px; font-weight: 800; color: #fff; }
.film-info p  { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.55; }

/* Kino section — pełna szerokość + telewizory zdecydowanie większe.
   Carousel3D sam skaluje odstępy (s = cardW/300), więc wystarczy rozmiar. */
#kino .section-inner { max-width: none; padding-left: clamp(20px, 4.5vw, 80px); padding-right: clamp(20px, 4.5vw, 80px); }
#kino .card-3d { width: clamp(540px, 46vw, 760px); height: auto; aspect-ratio: 540 / 430; }
#kino .c3d-stage { height: clamp(480px, 44vh, 620px); }
/* Strzałki zbędne (hover/swipe + kropki wystarczą) — miejsce na telewizory */
#kino .c3d-btn { display: none; }

/* ============================================================
   STREFA EDUKACJI — wielki tytuł, karty na maksa, żywe tło
   ============================================================ */

/* Animowany gradient tła: dwie warstwy dryfujących poświat
   (szałwia + bursztyn + jaśniejsza zieleń) na ciemnej zieleni */
.edu-aurora {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
}
.edu-aurora::before,
.edu-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  will-change: transform;
}
.edu-aurora::before {
  background:
    radial-gradient(42% 55% at 22% 28%, rgba(182, 213, 170, 0.20), transparent 70%),
    radial-gradient(36% 48% at 80% 22%, rgba(242, 177, 39, 0.13), transparent 70%);
  animation: eduAuroraA 26s ease-in-out infinite alternate;
}
.edu-aurora::after {
  background:
    radial-gradient(48% 62% at 74% 80%, rgba(96, 148, 88, 0.30), transparent 72%),
    radial-gradient(34% 46% at 16% 84%, rgba(182, 213, 170, 0.14), transparent 70%);
  animation: eduAuroraB 34s ease-in-out infinite alternate;
}
@keyframes eduAuroraA {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.18); }
}
@keyframes eduAuroraB {
  from { transform: translate3d(4%, 3%, 0) scale(1.12); }
  to   { transform: translate3d(-5%, -4%, 0) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .edu-aurora::before, .edu-aurora::after { animation: none; }
}

/* Kontener na pełną szerokość — tytuł i karty dostają całą stronę */
#edukacja .section-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding: 84px clamp(20px, 4.5vw, 80px) 26px;
}
#edukacja .section-header { margin-bottom: clamp(12px, 2vh, 24px); }
#edukacja .section-title { line-height: 1.05; }

/* Karty możliwie największe — wysokość wiedzie, szerokość z proporcji */
#edukacja .c3d-stage { height: clamp(500px, 62vh, 700px); }
#edukacja .card-3d {
  height: min(58vh, 660px);
  width: auto;
  aspect-ratio: 300 / 440;
}

/* Strzałki zbędne (drag myszką / palcem, zostają kropki) —
   odzyskana przestrzeń idzie na karty */
#edukacja .c3d-btn { display: none; }
#edukacja .c3d-controls { margin-top: 4px; }

@media (max-width: 900px) {
  #edukacja .section-inner { padding-top: 96px; }
  #edukacja .c3d-stage { height: min(60vh, 520px); }
  #edukacja .card-3d { height: min(52vh, 470px); }
}

/* ============================================================
   O PROJEKCIE — dwukolumnowy layout: tekst | mapa gmin
   ============================================================ */

/* Sekcja scrollytelling — wysoka, wolny scroll wewnątrz (snap area > viewport),
   mapa gmin jako finał zachowuje swój dotychczasowy layout 100vh */
#o-projekcie.op-scrolly {
  display: block;
  height: auto;
  max-height: none;
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  /* scroll anchoring łapał się ruszających się elementów (morph/flood/mapa)
     i sam dowijał scroll — wyłączamy kotwiczenie w całej sekcji */
  overflow-anchor: none;
  background: transparent; /* tło przejmuje .op-aurora */
}

/* ── Animowany gradient tła (scroll + kursor/palec) ── */
.op-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55vw 40vh at calc(22% + var(--op-mx, 0) * 6%) calc(28% + var(--op-my, 0) * 6%),
      rgba(182, 213, 170, 0.55), transparent 62%),
    radial-gradient(60vw 45vh at calc(80% - var(--op-p, 0) * 40%) calc(15% + var(--op-p, 0) * 65%),
      rgba(242, 177, 39, 0.30), transparent 65%),
    linear-gradient(calc(150deg + var(--op-p, 0) * 90deg), #f8fcf6 0%, #eaf6e4 45%, #fdf3dc 100%);
}

/* ── Organiczne kształty gradientowe (parallax scrollem) ── */
.op-blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  filter: blur(1px);
}
.op-blob--1 {
  width: min(520px, 55vw);
  top: 6%; right: -12%;
  transform: translateY(calc(var(--op-p, 0) * -180px)) rotate(calc(var(--op-p, 0) * 40deg));
}
.op-blob--2 {
  width: min(420px, 45vw);
  top: 46%; left: -14%;
  transform: translateY(calc(var(--op-p, 0) * -260px)) rotate(calc(var(--op-p, 0) * -30deg));
}

/* ── Przepływ 3D: fala obiektów przez cały ekran (dół → prawy górny róg),
     sterowana postępem scrolla (--fl ustawia JS na .op-flood) ── */
.op-flood {
  position: relative;
  z-index: 3;
  height: 165vh;
  margin: -8vh 0;
  pointer-events: none;
}
.op-flood__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Canvas Ziemi — ekran 100vw×100vh dociągany do viewportu przez JS
   (fake-sticky: translateY liczony w tej samej pętli rAF co scroll) */
.op-flood__canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  will-change: transform;
}

/* ── Bloki narracji — pełna szerokość ekranu ── */
.op-story {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 15vh clamp(20px, 5.2vw, 90px) 11vh;
  --vis: 1;   /* widoczność/ostrość (morph) — JS nadpisuje przy scrollu */
  --exit: 0;  /* wyjście w górę (morph) */
}
.op-story:first-of-type { padding-top: 20vh; }

.op-big { display: flex; flex-direction: column; }

/* Wielka typografia — scrubbed MORPH sterowany scrollem (--vis / --exit) */
.op-line {
  display: block;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(40px, 12vw, 190px); /* fallback; .op-fit skaluje do szerokości w JS */
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--c-text);
  opacity: calc(0.12 + 0.88 * var(--vis));
  transform: translateY(calc(var(--exit) * -7vh)) scale(calc(1 + var(--exit) * 0.09));
  filter: blur(calc((1 - var(--vis)) * 5px));
  transform-origin: left center;
  will-change: transform, opacity, filter;
}
.op-line--accent { color: var(--c-primary); }

/* .op-fit — linia rozciągana na pełną szerokość (font-size ustawia JS) */
.op-fit { white-space: nowrap; width: 100%; }

.op-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.9vw, 21px);
  line-height: 1.65;
  color: var(--c-text);
  max-width: 640px;
  margin-top: 28px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}
.op-sub--big { font-size: clamp(18px, 2.2vw, 30px); line-height: 1.5; max-width: 760px; }
.op-story.in .op-sub { opacity: 1; transform: translateY(0); }

/* ── Lead (ekran 1): wielki tekst odsłaniany słowo po słowie scrollem ── */
.op-lead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-text);
  max-width: none;
  margin-top: clamp(30px, 5vh, 60px);
}
.op-lead .w { opacity: 0.13; transition: opacity 0.3s ease; }
.op-lead .w.on { opacity: 1; }

/* ── Karty statystyk (osobne bloki z ikoną — czytelne liczby) ── */
.op-stats {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 5vh, 60px);
}
.op-stats--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.op-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }

/* Kafle na pełnej szerokości — większe fonty (czytelność z daleka) */
.op-stats--two .op-stat__icon,
.op-stats--three .op-stat__icon--lg {
  width: clamp(68px, 7vw, 112px);
  height: clamp(68px, 7vw, 112px);
}
.op-stats--two .op-stat__num,
.op-stats--three .op-stat__num { font-size: clamp(48px, 6.2vw, 108px); }
.op-stats--two .op-stat__unit,
.op-stats--three .op-stat__unit { font-size: clamp(16px, 1.7vw, 26px); }
.op-stats--two .op-stat__label,
.op-stats--three .op-stat__label {
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--c-text);
  opacity: 0.85;
  max-width: none;
}

.op-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.op-story.in .op-stat { opacity: 1; transform: translateY(0); }
.op-story.in .op-stat:nth-child(2) { transition-delay: 0.12s; }
.op-story.in .op-stat:nth-child(3) { transition-delay: 0.24s; }

/* Wariant kafelka — ikona nad liczbą, wyraźne tło (nie zlewa się) */
.op-stat--card {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(62, 96, 52, 0.14);
  border-radius: 18px;
  padding: clamp(18px, 2vw, 26px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 12px 34px rgba(44, 84, 55, 0.08);
}
.op-stat--row { flex-direction: row; align-items: center; }

/* Wariant z gradientowym wyróżnieniem (ekran „ekologiczny kredyt") */
.op-stat--glow {
  background: linear-gradient(135deg,
    rgba(182, 213, 170, 0.55),
    rgba(255, 255, 255, 0.75) 48%,
    rgba(242, 177, 39, 0.32));
  border: 1px solid rgba(62, 96, 52, 0.2);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(44, 84, 55, 0.12);
  padding: clamp(24px, 2.8vw, 44px);
}

.op-stat__icon { width: 54px; height: 54px; flex-shrink: 0; }
.op-stat__icon--lg { width: 68px; height: 68px; }
.op-stat__icon svg { width: 100%; height: 100%; display: block; }

.op-stat__body { display: flex; flex-direction: column; min-width: 0; }

.op-stat__num {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-primary);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.op-stat__unit {
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: 0;
}
.op-stat__label {
  font-family: var(--font-sub);
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-muted);
  margin-top: 10px;
  max-width: 320px;
}

/* ── Układ 2-kolumnowy: tekst + winieta SVG (Historia 2) ── */
.op-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.op-split__text { min-width: 0; }
.op-art { margin: 0; }
.op-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(44, 84, 55, 0.14)); }
.op-art--credit {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}
.op-story.in .op-art--credit { opacity: 1; transform: translateY(0) scale(1); }

/* ── Motyw emisji: kominy + strzałka spadku (Historia 3) —
     pasmo na pełnej szerokości z gradientowym tłem ── */
.op-emit {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
  margin-top: clamp(30px, 5vh, 56px);
  max-width: none;
  background: linear-gradient(120deg,
    rgba(182, 213, 170, 0.42),
    rgba(255, 255, 255, 0.6) 55%,
    rgba(242, 177, 39, 0.24));
  border: 1px solid rgba(62, 96, 52, 0.16);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 46px);
}
.op-emit__art { margin: 0; }
.op-emit__art svg { width: 100%; height: auto; display: block; }
.op-emit__text {
  margin-top: 0;
  font-size: clamp(17px, 2vw, 30px);
  line-height: 1.5;
  max-width: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}
.op-story.in .op-emit__text { opacity: 1; transform: translateY(0); }

/* ── GOZ (Historia 4): linijki tekstu odsłaniane góra→dół + karty statystyk ── */
.op-goz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  margin-top: clamp(28px, 4vh, 48px);
}
.op-goz__lead {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(8px, 1.4vh, 18px);
}
.op-gline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 38px);
  line-height: 1.32;
  color: var(--c-text);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.op-gline strong { color: var(--c-primary); }
.op-story.in .op-gline { opacity: 1; transform: translateY(0); }
.op-story.in .op-gline:nth-child(1) { transition-delay: 0.05s; }
.op-story.in .op-gline:nth-child(2) { transition-delay: 0.17s; }
.op-story.in .op-gline:nth-child(3) { transition-delay: 0.29s; }
.op-story.in .op-gline:nth-child(4) { transition-delay: 0.41s; }
.op-story.in .op-gline:nth-child(5) { transition-delay: 0.53s; }
.op-story.in .op-gline:nth-child(6) { transition-delay: 0.65s; }
.op-story.in .op-gline:nth-child(7) { transition-delay: 0.77s; }
.op-story.in .op-gline:nth-child(8) { transition-delay: 0.89s; }
.op-goz__stats { display: grid; gap: 16px; align-content: start; }

/* Mapa gmin — finał: blok o wysokości ekranu (dawna sekcja żyła w 100vh,
   teraz wysokość musi być jawna, bo rodzic jest auto) */
#o-projekcie.op-scrolly .section-inner.op-layout {
  position: relative;
  z-index: 2;
  height: 100vh;
  max-height: none;
}
@media (max-width: 900px) {
  #o-projekcie.op-scrolly .section-inner.op-layout { height: auto; min-height: 100vh; }
}

/* Redukcja ruchu: wszystko widoczne i ostre, tło statyczne */
@media (prefers-reduced-motion: reduce) {
  .op-line, .op-sub, .op-stat, .op-art--credit, .op-emit__text, .op-gline, .op-lead .w {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .op-blob--1, .op-blob--2 { transform: none !important; }
  .op-flood { display: none; }
  .op-map--assembling .gmina-img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

#o-projekcie .section-inner.op-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 56px);
  padding-top: 100px;
  padding-bottom: 36px;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

/* Lewa kolumna — 1/3 szerokości */
.op-content {
  flex: 0 0 30%;
  max-width: 30%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  overflow: hidden;
}

.op-header { flex-shrink: 0; }
.op-header .section-chip { margin-bottom: 12px; }

/* Dodatkowe obniżenie kolumny tekstowej — mapa zostaje na swojej wysokości */
.op-content { padding-top: 180px; }

.op-text {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.78;
  color: var(--c-text);
  overflow-y: auto;
  flex: 1;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(62,96,52,0.25) transparent;
}

.op-text p + p { margin-top: 14px; }

/* Mobile — panel gminy zajmuje miejsce opisu "Czym jest świat SELEKT",
   bez usuwania/odtwarzania oryginalnych akapitów (i ich animacji GSAP) */
.op-text-gmina {
  display: none;
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
  gap: 14px;
}
.op-content.op-content--gmina-active .op-text       { display: none; }
.op-content.op-content--gmina-active .op-text-gmina { display: flex; animation: opTextGminaIn 0.25s ease; }
.op-text-gmina__name {
  font-family: var(--font-title);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.3;
}
@keyframes opTextGminaIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Prawa kolumna — 2/3 szerokości */
.op-map-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

/* Kontener mapy — aspect ratio PNG-ów (4169×3321) */
.op-map {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  isolation: isolate;
  /* pan-y: pionowy gest scrolluje stronę (tablet NIE jest uwięziony na mapie,
     która wypełnia mu cały ekran), poziomy gest obsługuje JS (drag-hover) */
  touch-action: pan-y;
}
@media (max-width: 640px) {
  /* Telefon: mapa zajmuje ~połowę ekranu, reszta strony scrollowalna —
     tu pełna kontrola gestu daje najlepszy drag-hover */
  .op-map { touch-action: none; }
}

.op-map__img {
  /* Ukryty — definiuje aspect ratio kontenera przez swój natural size */
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
}

/* ── Warstwy gmin — CSS-only alignment, bez JS ──────────── */
.gmina-img {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  opacity: 1;
  transform-origin: center center;
  transition: opacity 0.20s ease,
              filter 0.20s ease,
              transform 0.28s cubic-bezier(.34,1.56,.64,1);
  will-change: opacity, transform, filter;
}

.gmina-img.gmina-dimmed {
  opacity: 0.72;
  filter: brightness(0.82) saturate(0.8);
}

.gmina-img.gmina-hovered {
  opacity: 1;
  filter: brightness(1.60) saturate(1.40)
          drop-shadow(0 16px 26px rgba(0,0,0,0.52))
          drop-shadow(0 5px 10px rgba(0,0,0,0.28));
  transform: translateY(-5px) scale(1.14);
  z-index: 5;
}

/* ── SKŁADANIE MAPY scrollem: gminy wlatują z rozmyciem zza krawędzi
     ekranu i łączą się w całość. --asm: 1 = rozsypka, 0 = złożona.
     Klasę .op-map--assembling zdejmuje JS po złożeniu → hover/touch
     działają dokładnie jak dotychczas. ── */

/* wektory rozrzutu per gmina (nth-of-type wśród <img>: 1 = mapa bazowa) */
.op-map img:nth-of-type(2)  { --gx: -70vw; --gy: -25vh; --gr: -9deg; }
.op-map img:nth-of-type(3)  { --gx: -20vw; --gy: -75vh; --gr:  7deg; }
.op-map img:nth-of-type(4)  { --gx:  25vw; --gy: -70vh; --gr: -6deg; }
.op-map img:nth-of-type(5)  { --gx:  70vw; --gy: -30vh; --gr: 10deg; }
.op-map img:nth-of-type(6)  { --gx:  75vw; --gy:   5vh; --gr: -8deg; }
.op-map img:nth-of-type(7)  { --gx:  65vw; --gy:  40vh; --gr:  6deg; }
.op-map img:nth-of-type(8)  { --gx:  25vw; --gy:  75vh; --gr: -10deg; }
.op-map img:nth-of-type(9)  { --gx: -20vw; --gy:  70vh; --gr:  8deg; }
.op-map img:nth-of-type(10) { --gx: -75vw; --gy:  35vh; --gr: -7deg; }
.op-map img:nth-of-type(11) { --gx: -80vw; --gy:  -5vh; --gr:  9deg; }
.op-map img:nth-of-type(12) { --gx: -45vw; --gy: -60vh; --gr: -11deg; }
.op-map img:nth-of-type(13) { --gx:  10vw; --gy: -80vh; --gr:  8deg; }
.op-map img:nth-of-type(14) { --gx:  55vw; --gy: -55vh; --gr: -7deg; }
.op-map img:nth-of-type(15) { --gx:  85vw; --gy: -15vh; --gr: 11deg; }
.op-map img:nth-of-type(16) { --gx:  60vw; --gy:  55vh; --gr: -9deg; }
.op-map img:nth-of-type(17) { --gx:   5vw; --gy:  85vh; --gr:  7deg; }
.op-map img:nth-of-type(18) { --gx: -50vw; --gy:  60vh; --gr: -8deg; }
.op-map img:nth-of-type(19) { --gx: -85vw; --gy:  15vh; --gr: 10deg; }
.op-map img:nth-of-type(20) { --gx:  30vw; --gy:  65vh; --gr: -12deg; }

.op-map--assembling .gmina-img {
  transition: none; /* scrub bez lagu; po zdjęciu klasy wraca bazowa transition */
  opacity: calc(1 - var(--asmf, 0));
  filter: blur(calc(var(--asm, 0) * 6px));
  transform: translate(calc(var(--asm, 0) * var(--gx, 0vw)),
                       calc(var(--asm, 0) * var(--gy, 0vh)))
             rotate(calc(var(--asm, 0) * var(--gr, 0deg)));
}
/* Urządzenia dotykowe (telefony I tablety): blur 6px × 19 warstw × każda
   klatka scrolla zabijał GPU tabletów (zawieszanie sekcji) — tniemy do 2px */
@media (pointer: coarse) {
  .op-map--assembling .gmina-img { filter: blur(calc(var(--asm, 0) * 2px)); }
}

/* ── Tooltip gminy — karta z PSZOK i Olejomat ───────────── */
.gmina-tooltip {
  position: absolute;
  background: rgba(18, 42, 22, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(100, 180, 80, 0.22);
  border-radius: 10px;
  padding: 13px 16px 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.18s ease;
  z-index: 20;
  white-space: normal;
  width: 240px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.38);
}
.gmina-tooltip.visible { opacity: 1; }

.gtt-name {
  display: block;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #a8dbb0;
  margin-bottom: 10px;
}
.gtt-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.gtt-row:last-child { margin-bottom: 0; }
.gtt-label {
  font-family: var(--font-sub);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(168, 219, 176, 0.55);
}
.gtt-value {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

/* ── Panel PSZOK / Olejomat ─────────────────────────────── */
.op-gmina-info {
  width: 100%;
  background: rgba(20, 55, 25, 0.08);
  border: 1px solid rgba(60, 140, 50, 0.18);
  border-radius: 10px;
  padding: 12px 18px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  flex-shrink: 0;
}

.op-gmina-info.visible {
  opacity: 1;
  transform: translateY(0);
}

.op-info-block { display: flex; flex-direction: column; gap: 3px; }

.op-info-label {
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-accent, #3e6034);
  opacity: 0.7;
  font-weight: 700;
}

.op-info-value {
  font-family: var(--font-body);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55;
  color: var(--c-text);
}

.op-info-nearest {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.5;
  color: var(--c-text);
  opacity: 0.75;
}

.op-info-nearest li {
  list-style: none;
  padding-left: 12px;
  position: relative;
}

.op-info-nearest li::before {
  content: '→';
  position: absolute;
  left: 0;
  opacity: 0.5;
}

/* ── Podpis pod mapą ─────────────────────────────────────── */
.op-map__hint {
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c-text);
  opacity: 0.3;
  text-align: center;
  flex-shrink: 0;
  margin: 0;
}

/* ── Finał: mapa wyśrodkowana, pełna szerokość ─────────────── */
#o-projekcie.op-scrolly .section-inner.op-layout--map {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: none;      /* finał na całą szerokość — mapa dostaje przestrzeń */
  margin: 0 auto;
  height: auto;
  min-height: 100vh;
  max-height: none;
  overflow: visible;
  padding: 12vh clamp(20px, 4vw, 60px) 7vh;
  gap: clamp(18px, 3vh, 38px);
}
.op-content--center {
  flex: none;
  width: 100%;
  max-width: 820px;
  height: auto;
  padding-top: 0;
  overflow: visible;
  align-items: center;
  text-align: center;
}
.op-header--center { text-align: center; }
.op-header--center .section-title { margin-top: 6px; }
.op-content--center .op-text {
  flex: none;
  overflow: visible;
  max-width: 680px;
  margin: 12px auto 0;
  font-size: clamp(14px, 1.15vw, 16px);
  text-align: center;
}
.op-content--center .op-text-gmina {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.op-map-col--wide {
  flex: none;
  width: 100%;
  height: auto;
  justify-content: flex-start;
}
.op-map-col--wide .op-map {
  flex: none;
  height: min(80vh, 900px);
  width: auto;
  aspect-ratio: 4169 / 3321;
  max-width: 96vw;
  min-height: 0;
  margin: 0 auto;
}

/* ── Responsywność ───────────────────────────────────────── */
@media (max-width: 900px) {
  #o-projekcie.op-scrolly .section-inner.op-layout--map {
    padding-top: 96px;
  }
  .op-content--center { max-width: 100%; }
  .op-content--center .op-text { max-height: none; }
  .op-map-col--wide .op-map {
    height: auto;
    width: 100%;
    max-width: 560px;
  }
}

/* ============================================================
   BAZA WIEDZY — KnowCarousel
   ============================================================ */

/* Sekcja zajmuje dokładnie 100vh — bez przelewania się na stronę */
#baza-wiedzy { align-items: stretch; height: 100vh; max-height: 100vh; }
#baza-wiedzy .section-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#baza-wiedzy .know-wrap {
  flex: 1;
  min-height: 0;
}

.know-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  overflow: visible;
}

/* Obszar karuzeli — shrinks when detail is open */
.know-carousel-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 16px);
}

/* Stage — perspektywa 3D */
.know-stage {
  position: relative;
  height: clamp(220px, 56vh, 710px);
  width: 100%;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  touch-action: pan-y;
}

/* Pojedyncza karta — gołe PNG bez tła, jak kosze w segregacji */
.know-card {
  position: absolute;
  width: 520px;
  height: clamp(160px, 44vh, 570px);
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  cursor: pointer;
  will-change: transform, opacity;
  overflow: hidden;
  touch-action: pan-y;
}
.know-card img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 16px 32px rgba(62,96,52,0.18));
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.know-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-primary);
  text-align: center;
  margin-top: 8px;
  flex-shrink: 0;
  background: none;
}

/* Indywidualne rozmiary kart */
.know-card[data-know="olejomaty"] { width: 280px;  height: clamp(160px, 44vh, 570px); }
.know-card[data-know="pszok"]     { width: 700px;  height: clamp(120px, 28vh, 390px); }
.know-card[data-know="goz"]       { width: 520px;  height: clamp(140px, 34vh, 470px); }
.know-card[data-know="klimat"]    { width: 520px;  height: clamp(150px, 35vh, 480px); }

/* Karta aktywna (centrum) — 40px większa */
.know-card[data-active="true"]                       { height: calc(clamp(160px, 44vh, 570px) + 40px); }
.know-card[data-know="olejomaty"][data-active="true"] { height: calc(clamp(160px, 44vh, 570px) + 40px); }
.know-card[data-know="pszok"][data-active="true"]     { height: calc(clamp(120px, 28vh, 390px) + 40px); }
.know-card[data-know="goz"][data-active="true"]       { height: calc(clamp(140px, 34vh, 470px) + 40px); }
.know-card[data-know="klimat"][data-active="true"]    { height: calc(clamp(150px, 35vh, 480px) + 40px); }

/* Chip 65px poniżej navbara (58px) = padding-top ~123px */
#baza-wiedzy .section-inner { padding-top: clamp(122px, 13.4vh, 170px); padding-bottom: 12px; }
/* Usuń dolny margines nagłówka — odstęp kontroluje know-hint */
#baza-wiedzy .section-header { margin-bottom: 0; }

/* Baza wiedzy — spójnie z resztą: pełna szerokość dla wielkiego tytułu,
   bez strzałek (nawigacja hover/swipe + kropki) */
#baza-wiedzy .section-inner { max-width: none; padding-left: clamp(20px, 4.5vw, 80px); padding-right: clamp(20px, 4.5vw, 80px); }
#baza-wiedzy .c3d-btn { display: none; }

/* Hint pod tytułem — 30px poniżej section-header */
.know-hint {
  font-size: 13px;
  color: var(--c-muted);
  text-align: center;
  margin-top: 30px;
  flex-shrink: 0;
}

/* Kontrolki karuzeli */
.know-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.know-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Panel detalu — absolute, nie wpływa na layout carousel */
.know-detail {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  padding: 80px 0 0 32px;
  opacity: 0;
  pointer-events: none;
}
.know-detail:not([aria-hidden="true"]) {
  pointer-events: auto;
}
/* Per-karta pionowe wyrównanie tekstu z grafiką */
.know-detail--olejomaty { padding-top: 38px; }
.know-detail--pszok     { padding-top: 138px; }
.know-detail--goz       { padding-top: 82px; }
.know-detail--klimat    { padding-top: 76px; }
.know-detail__back {
  align-self: flex-start;
  font-size: 13px; font-weight: 800;
  color: var(--c-primary);
  background: none; border: none;
  cursor: pointer; padding: 6px 0;
  letter-spacing: 0.5px;
  transition: opacity 0.2s;
}
.know-detail__back:hover { opacity: 0.7; }
.know-detail__title {
  font-size: 26px; font-weight: 800;
  color: var(--c-primary);
  line-height: 1.25;
}
.know-detail__body {
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.7;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 14px;
}
.know-detail__body p + p { margin-top: 14px; }
.know-detail__hook {
  font-weight: 700;
  color: var(--c-primary);
}
.know-detail__placeholder {
  color: var(--c-muted);
  font-style: italic;
}
.know-detail__more {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 800;
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.know-detail__more:hover { opacity: 0.7; }
/* Kursor "kliknij ponownie aby wrócić" w trybie detalu */
.know-card.is-detail-active { cursor: pointer; }

/* Legacy know-card styles (old c3d variant — zachowane dla zgodności) */
.card-3d__face--know {
  background: #fff; color: var(--c-text);
  padding: 28px 24px;
  border: 1px solid rgba(62,96,52,0.08);
  gap: 8px;
}
.know-num {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(182,213,170,0.8);
}
.know-icon { font-size: 36px; margin: 6px 0; }
.card-3d__face--know h3 { font-size: 18px; font-weight: 800; color: var(--c-primary); }
.card-3d__face--know p  { font-size: 14px; color: var(--c-muted); line-height: 1.6; flex: 1; }
.know-link {
  font-size: 12px; font-weight: 800;
  color: var(--c-primary); margin-top: auto;
  opacity: 0.7; transition: opacity 0.2s;
}
.card-3d__face--know:hover .know-link { opacity: 1; }

/* Teacher card */
.card-3d__face--teacher {
  background: #fff; color: var(--c-dark);
  padding: 32px 28px;
  border: 1px solid rgba(44,84,55,0.1);
  gap: 12px; align-items: flex-start;
}
.teacher-icon { font-size: 40px; }
.card-3d__face--teacher h3 {
  font-size: 18px; font-weight: 800;
  color: var(--c-dark);
}
.card-3d__face--teacher p {
  font-size: 14px; color: var(--c-muted);
  line-height: 1.6; flex: 1;
}
.teacher-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--c-sage-lt);
  color: var(--c-dark);
  font-size: 11px; font-weight: 800;
  letter-spacing: 1px;
  margin-top: auto;
}

/* Generic edu card content */
.card-face-icon  { font-size: 40px; margin-bottom: 12px; }
.card-face-tag {
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  opacity: 0.65;
}
.card-3d__face h3 {
  font-size: 19px; font-weight: 900;
  line-height: 1.15; margin-top: 4px;
}
.card-3d__face p  { font-size: 13px; line-height: 1.65; opacity: 0.85; flex: 1; }
.card-face-cta {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.55; margin-top: auto;
  transition: opacity 0.2s;
}
.card-3d:hover .card-face-cta { opacity: 1; }

/* ---- Carousel controls ---- */
.c3d-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.c3d-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(62,96,52,0.15);
  border: 1px solid rgba(62,96,52,0.2);
  color: var(--c-primary);
  font-size: 22px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
  line-height: 1;
}
.c3d-btn:hover { background: rgba(62,96,52,0.25); transform: scale(1.1); }
.c3d-btn:disabled { opacity: 0.3; cursor: default; transform: none; }

/* Light variant (on dark backgrounds) */
.c3d-controls--light .c3d-btn {
  background: rgba(182,213,170,0.12);
  border-color: rgba(182,213,170,0.25);
  color: var(--c-sage);
}
.c3d-controls--light .c3d-btn:hover { background: rgba(182,213,170,0.22); }
.c3d-controls--dark .c3d-btn {
  background: rgba(44,84,55,0.12);
  border-color: rgba(44,84,55,0.2);
  color: var(--c-dark);
}

/* Dots */
.c3d-dots { display: flex; gap: 8px; align-items: center; }
.cdot {
  display: block; width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(62,96,52,0.2);
  transition: background 0.25s, transform 0.25s;
  cursor: pointer;
}
.cdot--active    { background: var(--c-primary); transform: scale(1.4); }
.cdot--light     { background: rgba(182,213,170,0.25); }
.cdot--light.cdot--active { background: var(--c-sage); }
.cdot--dark      { background: rgba(44,84,55,0.2); }
.cdot--dark.cdot--active  { background: var(--c-dark); }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex; align-items: center;
  padding: 13px 26px;
  border-radius: 30px;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
  border: none; margin-top: 24px;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary     { background: var(--c-primary); color: #fff; }
.btn--primary:hover { box-shadow: 0 8px 24px rgba(62,96,52,0.4); }
.btn--outline-sage {
  color: var(--c-sage);
  border: 1px solid rgba(182,213,170,0.45);
  background: transparent;
}
.btn--outline-sage:hover { background: rgba(182,213,170,0.1); }

/* =============================================
   VIDEO MODAL
   ============================================= */
.video-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.video-modal[hidden] { display: none; }
.video-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  cursor: pointer;
}
.video-modal__box {
  position: relative; z-index: 1;
  width: min(90%, 900px);
  aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
}
.video-modal__close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none;
  color: rgba(255,255,255,0.7);
  font-size: 22px; cursor: pointer; padding: 8px 12px;
  transition: color 0.2s;
}
.video-modal__close:hover { color: #fff; }
.video-modal__frame,
.video-modal__frame iframe { width: 100%; height: 100%; border: none; display: block; }

/* =============================================
   SEKCJA SEGREGACJA — KOSZE 3D
   ============================================= */
.section--seg {
  background: #0d1a0f;
  transition: background 0.7s ease;
  overflow: hidden;
}

.section-header--center { text-align: center; }


/* Sekcja segregacji — pełna szerokość dla wielkiego tytułu (fitText) */
#segregacja .section-inner { max-width: none; padding-left: clamp(20px, 4.5vw, 80px); padding-right: clamp(20px, 4.5vw, 80px); }

/* Nagłówek sekcji segregacji zawsze nad koszami; dwa tytuły (zielony/niebieski)
   nałożone w jednej komórce gridu → oba mierzalne przez fitText, swap opacity */
.section--seg #seg-header {
  position: relative;
  z-index: 20;
  margin-bottom: clamp(24px, 4vh, 56px);
  display: grid;
  justify-items: center;
}

.section-title--seg {
  grid-area: 1 / 1;
  width: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.9), 0 0 48px rgba(0,0,0,0.7);
  transition: opacity 0.4s ease;
}

/* Niebieski wariant — nałożony, domyślnie ukryty (opacity, nie display,
   żeby fitText mógł go zmierzyć na starcie) */
.seg-title-img { opacity: 0; pointer-events: none; }
.seg-title-img.visible { opacity: 1; }
.seg-title-blue-text {
  color: #4da6ff;
  text-shadow: 0 2px 24px rgba(0,20,80,0.9), 0 0 48px rgba(0,40,120,0.6);
}

.section-chip--seg {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  transition: color 0.5s;
}

/* Stage koszy */
.bin-stage-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bin-stage {
  position: relative;
  height: clamp(560px, 66vh, 760px);
  perspective: 1600px;
  perspective-origin: 50% 65%;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  touch-action: pan-y;
}

.bin-card {
  position: absolute;
  width: clamp(320px, 30vw, 440px);
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  bottom: 0;
  outline: none;
}
.bin-card img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.55));
  transition: filter 0.3s;
}
.bin-card[data-active="true"] img {
  filter: drop-shadow(0 32px 80px rgba(0,0,0,0.7)) brightness(1.1);
}

/* ── Przycisk głosu — pod panelem tekstowym, 200px od prawej krawędzi ── */
.bin-voice-btn {
  align-self: flex-end;
  margin-right: 200px;
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 24px;
  padding: 7px 16px 7px 10px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.88);
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.bin-voice-btn:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.35);
}
.bvb-icon { display: flex; align-items: center; }
.bvb-icon svg { width: 20px; height: 20px; flex-shrink: 0; }
.bvb-label {
  font-family: var(--font-sub);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* Podpis */
.bin-hint {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  min-height: 22px;
}
.bin-hint strong { color: rgba(255,255,255,0.9); }

/* Kontrolki karuzeli koszy — ukryte (nawigacja: hover/swipe).
   Element zostaje w DOM (JS animuje jego opacity w trybie detalu). */
.bin-controls {
  display: none;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.bin-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.bin-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.45);
  transform: scale(1.08);
}
.bin-btn:disabled { opacity: 0.2; cursor: default; transform: none; }

.bin-dots { display: flex; gap: 9px; align-items: center; }
.bdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.bdot.active { background: #fff; transform: scale(1.4); }

/* =============================================
   PANEL SZCZEGÓŁÓW POJEMNIKA
   ============================================= */
.bin-detail {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 20;
  pointer-events: none;
  /* wyśrodkowanie pionowe treści po prawej stronie */
  align-items: center;
}
.bin-detail.is-visible {
  display: flex;
  pointer-events: none; /* transparentny — kliknięcie kosza po lewej przechodzi do karty */
}

/* Wrapper treści — prawa strona sekcji */
.bin-detail__content {
  position: absolute;
  right: 4%;
  width: 52%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto; /* treść i przycisk głosu są klikalne */
}

.bin-detail__header {
  font-family: var(--font);
  font-weight: 900;
  font-size: clamp(34px, 3.6vw, 60px);
  color: #fff;
  letter-spacing: -0.5px;
}

.bin-detail__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
}

.bin-detail__label {
  font-family: var(--font);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}
.bin-detail__label--no { color: rgba(255,110,110,0.6); }

.bin-detail__ok,
.bin-detail__no {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bin-detail__ok li {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 21px);
  color: rgba(255,255,255,0.92);
  padding: 2px 0;
  line-height: 1.4;
}
.bin-detail__no li {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 21px);
  color: rgb(255, 105, 105);
  padding: 2px 0;
  line-height: 1.4;
}

.bin-detail__ok li::before { content: '✓  '; font-weight: 900; }
.bin-detail__no li::before { content: '✗  '; font-weight: 900; }

.bin-detail__back {
  font-family: var(--font);
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.5px;
  cursor: pointer;
  margin-top: 4px;
}

/* Kursor wskazujący na środkowy kosz */
.bin-card[data-active="true"] { cursor: zoom-in; }
.section--seg.is-detail .bin-card[data-active="true"] { cursor: zoom-out; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .logo-nav { height: min(70vh, 540px); }
  .section-inner { padding: 80px 28px 56px; }
  .c3d-stage { height: 420px; }
  .card-3d { width: 260px; height: 380px; }
  .bin-stage { height: 480px; }
  .bin-card  { width: 280px; }
  .bin-detail__content { width: 56%; right: 2%; }
  .bin-detail__ok li,
  .bin-detail__no li  { font-size: 15px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 60px; left: 0; right: 0;
    background: rgba(8,18,10,0.97);
    padding: 24px; gap: 12px;
    border-bottom: 1px solid rgba(182,213,170,0.1);
  }
  .scroll-nav { display: none; }
  .logo-nav { height: min(52vh, 370px); max-width: 96%; }
  .c3d-stage { height: 360px; }
  .card-3d { width: 230px; height: 340px; }
  .section-inner { padding: 70px 20px 48px; }
  .bin-stage { height: 380px; }
  .bin-card  { width: 220px; }
  .bin-btn   { width: 38px; height: 38px; font-size: 18px; }
  /* Na mobile: kosz u góry (GSAP), tekst na dole */
  .bin-detail__content {
    position: absolute;
    left: 4%; right: 4%; width: auto;
    top: 43%; bottom: 2%;
    transform: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }
  .bin-detail__body { grid-template-columns: 1fr; gap: 12px 0; }
  .bin-detail__ok li,
  .bin-detail__no li  { font-size: 14px; }
  .bin-voice-btn { margin-right: 0; }

  /* Segregacja — przesuń kosze niżej o ~80px */
  .section--seg .bin-stage-wrap { padding-top: 80px; }

  /* O projekcie — 50px luzu pod paskiem menu */
  #o-projekcie .section-inner.op-layout { padding-top: 110px; }
  .op-content { padding-top: 0; }

  /* O projekcie — scrollytelling na mobile */
  .op-story { padding: 9vh 18px 7vh; }
  .op-story:first-of-type { padding-top: 13vh; }
  .op-stats--two, .op-stats--three { grid-template-columns: 1fr; gap: 14px; }
  .op-split { grid-template-columns: 1fr; gap: 22px; }
  .op-art--credit { max-width: 300px; margin: 4px auto 0; }
  .op-emit { grid-template-columns: 1fr; gap: 16px; }
  .op-emit__art { max-width: 220px; }
  .op-goz { grid-template-columns: 1fr; gap: 24px; }
  .op-goz__lead { justify-content: flex-start; }
  .op-stat__label { max-width: none; }
  .op-blob--1 { width: 65vw; right: -30%; }
  .op-blob--2 { width: 55vw; left: -28%; }
  .op-lead { font-size: clamp(21px, 5.6vw, 32px); line-height: 1.38; }
  .op-gline { font-size: clamp(18px, 4.8vw, 26px); }
  .op-stats--two .op-stat__num, .op-stats--three .op-stat__num { font-size: clamp(44px, 13vw, 64px); }
  .op-stats--two .op-stat__label, .op-stats--three .op-stat__label { font-size: 15px; }
  /* Przepływ 3D — krótszy odcinek scrolla na mobile */
  .op-flood { height: 135vh; margin: -4vh 0; }

  /* Kino — pomniejsz karty TV żeby mieściły się na ekranie */
  #kino .card-3d   { width: 300px; height: 240px; }
  #kino .c3d-stage { height: 270px; }

  /* Baza wiedzy — dostosuj grafiki do mobile (bez dodatkowego skalowania on-click) */
  .know-card { width: 270px; height: clamp(130px, 30vh, 320px); }
  .know-card[data-know="olejomaty"] { width: 200px; height: clamp(140px, 32vh, 340px); }
  .know-card[data-know="pszok"]     { width: 310px; height: clamp(100px, 24vh, 260px); }
  .know-card[data-know="goz"]       { width: 270px; }
  .know-card[data-know="klimat"]    { width: 270px; }

  /* Baza wiedzy — detail mode: grafika u góry, tekst na dole */
  .know-detail {
    left: 4%; right: 4%; width: auto;
    top: 43%; bottom: 0;
    padding: 12px 0 12px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Panel na mobile już scrolluje jako całość — body nie potrzebuje własnego scrolla */
  .know-detail__body {
    flex: initial;
    overflow-y: visible;
    padding-right: 0;
  }
}

/* =============================================
   ARTYKUŁ — PODSTRONY BAZY WIEDZY (np. Olejomaty)
   ============================================= */
.artpage-body { background: var(--c-bg); }

.artpage-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  background: rgba(248,252,246,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(62,96,52,0.1);
}
.artpage-back {
  font-size: 13px; font-weight: 800;
  color: var(--c-primary);
  letter-spacing: 0.3px;
  transition: opacity 0.2s;
}
.artpage-back:hover { opacity: 0.7; }
.artpage-brand {
  font-family: var(--font-title);
  font-size: 15px; font-weight: 900;
  letter-spacing: 4px; color: var(--c-primary);
}

.artpage-main { padding: 56px 24px 100px; }
.artpage-container { max-width: 760px; margin: 0 auto; }

.artpage-title {
  font-family: var(--font-title);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
  color: var(--c-dark);
  margin: 14px 0 32px;
}

.artpage-lead-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.artpage-lead-text { flex: 1; min-width: 0; }
.artpage-hook {
  font-family: var(--font-sub);
  font-size: 19px; font-weight: 700;
  color: var(--c-primary);
  line-height: 1.45;
  margin-bottom: 16px;
}
.artpage-lead {
  font-size: 16px; line-height: 1.75;
  color: var(--c-text);
}

/* Miejsca na grafiki — placeholdery do podmiany na docelowe obrazy */
.artpage-img {
  flex-shrink: 0;
  border-radius: var(--r-card);
  background: var(--c-sage-lt);
  border: 1.5px dashed rgba(62,96,52,0.35);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--c-muted);
  font-family: var(--font-sub);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.artpage-img--vertical {
  width: 220px; height: 320px;
}
.artpage-img--horizontal {
  width: 100%;
  aspect-ratio: 5 / 3;
  height: auto;
  margin: 40px 0;
}
/* Gdy placeholder zawiera już docelowe zdjęcie — usuń ramkę i wypełnij kadr */
.artpage-img:has(img) {
  background: none;
  border: none;
}
.artpage-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-card);
  display: block;
}

.artpage-article h2 {
  font-family: var(--font-title);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 800;
  color: var(--c-dark);
  margin: 40px 0 16px;
}
.artpage-article p {
  font-size: 16px; line-height: 1.8;
  color: var(--c-text);
  margin-bottom: 16px;
}

.artpage-callout {
  background: var(--c-sage-lt);
  border-left: 4px solid var(--c-primary);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 24px 28px;
  margin: 28px 0;
}
.artpage-callout__tag {
  font-family: var(--font-sub);
  font-size: 13px; font-weight: 800;
  color: var(--c-primary);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.artpage-callout__title {
  font-size: 18px; font-weight: 800;
  color: var(--c-dark);
  margin-bottom: 8px;
}
.artpage-callout p:last-child { margin-bottom: 0; }

.artpage-steps {
  list-style: none;
  counter-reset: step;
  margin: 20px 0 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.artpage-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
  font-size: 16px; line-height: 1.75;
  color: var(--c-text);
}
.artpage-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font-sub);
  font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.artpage-steps strong { color: var(--c-dark); }

.artpage-cta-back { margin-top: 48px; display: inline-block; }

/* Zapowiedź e-lekcji — pełnoekranowy baner zamiast gotowej podstrony */
.lesson-soon {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 40px;
}
.lesson-soon img {
  max-width: 1100px;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  display: block;
}

/* Plansza "w budowie" — dla podstron bez gotowej grafiki zapowiedzi */
.lesson-soon__card {
  max-width: 640px;
  width: 100%;
  text-align: center;
  background: var(--c-sage-lt);
  border: 1.5px dashed rgba(62,96,52,0.35);
  border-radius: var(--r-card);
  padding: 64px 40px;
}
.lesson-soon__icon { font-size: 56px; margin-bottom: 20px; }
.lesson-soon__title {
  font-family: var(--font-title);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  color: var(--c-dark);
  margin-bottom: 14px;
}
.lesson-soon__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-muted);
}

@media (max-width: 640px) {
  .artpage-nav { padding: 14px 20px; }
  .artpage-main { padding: 32px 18px 64px; }
  .artpage-lead-row { flex-direction: column; }
  .artpage-img--vertical { width: 100%; height: 220px; }
  .lesson-soon { padding: 84px 16px 32px; }
  .lesson-soon__card { padding: 48px 24px; }
}