/* ============================================================
   Polpharma Biologics — home prototype (TYLKO custom strony)
   Warstwa globalna: ../_shared/styleguide.css + ../_shared/nav/nav.css
   (typografia is-*, kolory, .section/.container, fonty, nav, maska nav,
   Get in touch, FOUC guard, .rv-*) — NICZEGO stamtąd nie redefiniować.
   ============================================================ */

/* ============================================================
   LOADER (site-level overlay)
   ============================================================ */
.loader_component {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--lab-white);
}

.loader_caption {
  position: absolute;
  z-index: 1;
  white-space: nowrap;
  font-weight: 500;   /* Medium — do czasu wgrania Season Sans Bold 700 */
}
.loader_caption.is-left  { left: 1.875rem; top: 1.5rem; }
.loader_caption.is-right { right: 1.875rem; bottom: 1.5rem; text-align: right; }

.loader_marks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.loader_mark {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  will-change: transform;
}
.loader_mark svg { display: block; width: 100%; height: 100%; }
.loader_mark.is-square { transform: translateX(-1.0625rem); }
.loader_mark.is-circle { transform: translateX(1.0625rem); z-index: 2; }

/* (NAV + NAV MASK + GET IN TOUCH → ../_shared/nav/nav.css) */

/* ============================================================
   HERO
   ============================================================ */
.section.is-home-hero {
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: flex-start;   /* tekst w górnej części ekranu (jak w Figmie), nie na środku */
  overflow: clip;
}

.home-hero_background {
  position: absolute;
  inset: -15% 0; /* zapas na parallax, żeby nie odsłonić krawędzi */
  z-index: -1;
  background: linear-gradient(180deg, #013b3a 0%, #0c5e5c 35%, #7fb5b3 75%, #cfe3e2 100%);
  overflow: hidden;
  will-change: transform;
}
/* Unicorn Studio embed — nad gradientem/kształtami (fallback zostaje pod spodem) */
.home-hero_unicorn {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.home-hero_unicorn canvas { width: 100%; height: 100%; display: block; }

/* overlay na Unicorn — narasta na scrollu (GSAP steruje opacity) */
.home-hero_overlay {
  position: absolute;
  inset: 0;
  z-index: 3;                 /* nad Unicornem (2), pod treścią hero */
  background: #000;           /* PRZEBUDOWA paczka 3: overlay CZARNY (było deep-green) */
  opacity: 0;
  pointer-events: none;
}

.home-hero_bg-shape {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  z-index: 1;
}
.home-hero_bg-shape.is-top {
  width: 70vw; height: 70vw;
  top: 8%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 30%, rgba(198, 236, 235, 0.25), rgba(1, 59, 58, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.home-hero_bg-shape.is-bottom {
  width: 80vw; height: 80vw;
  top: 55%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.75), rgba(198, 236, 235, 0.35));
  filter: blur(2px);
}

.home-hero_component {
  text-align: center;
  padding-top: 21vh;      /* Figma: y=126/800 = 15.75vh; +~5vh niżej (decyzja Tomka 2026-07-19) */
  position: relative;     /* kontekst pozycjonowania dla canvasu hero (i containing-block przy parallax transform) */
}
/* WATER REVEAL: canvas nagłówka — pełny viewport, wyśrodkowany; leży W .home-hero_component,
   więc parallax (translateY) i fade z GSAP niosą go tak samo jak dawny tekst DOM. */
.home-hero_heading-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}
.home-hero_heading {
  max-width: 50rem;       /* Figma: 800px */
  margin-left: auto;
  margin-right: auto;
}
.home-hero_subtitle {
  margin-top: 1.5rem;
  color: rgba(230, 239, 239, 0.9);   /* Figma: Mist #E6EFEF, opacity 90% */
}

.home-hero_arrow {
  position: absolute;
  left: 50%;
  bottom: 2rem;           /* Figma: 32px */
  transform: translateX(-50%);
  width: 3.75rem; height: 3.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-hero_arrow svg { width: 1rem; height: 1rem; }

/* ============================================================
   PINNED FLOW: How it works → Section-1 → Section-End
   ============================================================ */
.section.is-home-how-it-works {
  padding: 0;
  background: var(--deep-green);
  z-index: 1;
}
.home-how-it-works_pin {
  position: relative;
  height: 100vh;
  overflow: clip;
}

/* header — tekst wejściowy */
.home-how-it-works_header {
  position: relative;
  z-index: 1;
  padding-top: 12.5rem;   /* Figma: headline top y=200 / 800 */
  text-align: center;
}
.home-how-it-works_subtitle {
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, 0.55);
}

/* nawias [ po lewej stronie bloku tekstu (Figma: x=32, y=200, 20×245, otwarty w prawo) */
.home-how-it-works_bracket {
  position: absolute;
  left: -1rem;              /* container-left (48px) − 16px = 32px od krawędzi ekranu */
  top: 12.5rem;             /* równo z headline (y=200) */
  width: 1.25rem;           /* 20px "feet" */
  height: 15.3125rem;       /* 245px = wysokość bloku headline+subtitle */
  border: 1px solid var(--light-stroke);
  border-right: none;       /* [ otwarty z prawej */
  border-top-left-radius: 0.625rem;    /* 10px — zaokrąglone zgięcia (Figma 4473:5415) */
  border-bottom-left-radius: 0.625rem;
  transform-origin: 50% 50%; /* grow na reveal = scaleY z środka */
  pointer-events: none;
}

/* maska z wideo */
.home-how-it-works_media-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.home-how-it-works_media {
  position: absolute;
  inset: 0;
  /* MASKA = zaokrąglony kwadrat obrócony 45° (diament); rotacja ZAPIECZONA w SVG → statyczna.
     Rozmiar (mask-size) i pozycja (peek z dołu) animowane przez GSAP.
     Wideo pod spodem zostaje pełnoekranowe — maska tylko odsłania jego fragment. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='22' y='22' width='56' height='56' rx='15' transform='rotate(45 50 50)' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='22' y='22' width='56' height='56' rx='15' transform='rotate(45 50 50)' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  will-change: -webkit-mask-size, mask-size, -webkit-mask-position, mask-position;
}
.home-how-it-works_video {
  /* wideo = zwykły fullscreen (object-fit cover); maska nad nim wycina diament.
     Na końcu maska > viewport → pełny, czysty cover = 1:1 z SHAPE_DIMS (handoff shape'a). */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* stats overlays (Section-1 / Section-End) */
.home-how-it-works_stats {
  position: absolute;
  right: 2rem;      /* Figma: 32px od prawej */
  top: 33vh;        /* Figma: y=265 / 800 */
  z-index: 3;
  width: 18.75rem;  /* 300px */
}
.home-how-it-works_stat {
  padding: 0 0 1.5rem;
}
.home-how-it-works_stat-line {
  height: 1px;
  background: var(--light-stroke);
  transform-origin: left center;
  margin-bottom: 1rem;
}
.home-how-it-works_stat-label {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}

/* ciemny overlay podczas najazdu następnej sekcji */
.home-how-it-works_dark-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #001a1a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* WHAT WE DO — dół-lewo */
.home-how-it-works_what-we-do {
  position: absolute;
  left: 2rem;
  bottom: 2rem;     /* Figma: 32px */
  z-index: 3;
  text-align: left;
}
.home-how-it-works_label {
  /* NIE flex — kropka musi być inline w linii, żeby SplitText złapał ją do maski
     line-reveal (wjazd od dołu razem z tekstem, jak reszta). */
  margin-bottom: 1.25rem;
  font-weight: 700;
  line-height: 1.5;   /* zapas w masce, żeby 8px kropka nie była przycięta (is-caption ma lh 1.0) */
}
.home-how-it-works_label-dot {
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  margin-right: 0.5rem;          /* dawny gap flexa */
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;        /* wyśrodkowanie na linii (dawne align-items: center) */
}

/* ============================================================
   STUB — dalsza część strony
   ============================================================ */
/* ============================================================
   WE KNOW (The problem)
   ============================================================ */
/* REFAKTOR (paczka 2): sekcja WYSOKA (wysokość ustawia JS = (1+pinViewports)×100vh),
   sticky stage z tłami zamiast GSAP-pinu, teksty w naturalnym flow ze sticky. */
.section.is-home-we-know {
  padding: 0;
  background: var(--lab-white);
  /* sticky handoff: nachodzi na przypiętą sekcję wideo pod koniec pinu.
     WARTOŚĆ = CONFIG.howItWorks.overlapViewports × 100vh (sync ze script.js!)
     -100vh = wideo pod spodem STOI aż biel zakryje cały ekran */
  position: relative;
  z-index: 10;
  margin-top: -100vh;
  /* UWAGA: żadnego overflow na sekcji — ubiłby sticky w dzieciach */
}

/* stage — tła (apla + shape'y); sticky = odpowiednik dawnego pinu */
.home-we-know_stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
  z-index: 0;
}

/* apla (mist) — wjeżdża z dołu; pozycję startową (yPercent 100) ustawia GSAP.
   overflow:hidden = naturalne odkrywanie ostrej kopii shape'a w środku */
.home-we-know_bg {
  position: absolute;
  inset: 0;
  background: var(--mist);
  overflow: hidden;
}

/* kopie shape'a żyjące w stage'u (bazowa blur + ostra w apli)
   centrowanie przez GSAP (xPercent/yPercent -50) */
.home-we-know_shape {
  position: absolute;
  left: 50%;
  top: 50%;
  /* wymiary + transform ustawia GSAP (applyShapeDims) — 1:1 z ostatnią klatką wideo */
  will-change: transform;
}

/* ---------- wp1 — ZAWSZE w miejscu docelowym (absolute w stage'u) ----------
   Ruch = wyłącznie TRANSFER POZYCJI na scrubie (GSAP, y z dołu → 0, z kisielem).
   top/height ustawia JS z CONFIG.weKnow.layout. */
.home-we-know_wp1 {
  position: absolute;
  right: 3rem;        /* prawa kolumna jak w Figmie */
  width: 27.5rem;
  z-index: 1;
  will-change: transform;
}

/* w1 — relative, flex column space-between: para → diament → notka (ZERO absolute) */
.home-we-know_w1 {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.home-we-know_paragraph {
  width: 100%;
  color: var(--deep-green);
}
.home-we-know_paragraph-muted {
  color: rgba(0, 84, 83, 0.18);
}
.home-we-know_note {
  width: 100%;
  color: var(--deep-green);
}

/* diament — element flow: margin auto góra/dół = idealnie MIĘDZY para a notką
   (space-between + auto margins → koniec problemu z pozycją) */
.home-we-know_diamond {
  width: 3.75rem;
  height: 3.75rem;
  margin: auto 0;
}
.home-we-know_diamond img { display: block; width: 100%; height: 100%; }

/* w2 — absolute, TE SAME wymiary co w1 (inset 0), ta sama siatka space-between:
   teksty Our goal wskakują dokładnie w miejsca para/notki; diament zostaje z w1 */
.home-we-know_w2 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.home-we-know_goal-paragraph {
  width: 100%;           /* zawsze 100% parenta (decyzja Tomka 2026-07-19) */
  color: var(--deep-green);
}
.home-we-know_goal-note {
  width: 100%;
  color: var(--deep-green);
}

/* ---------- tytuły — JEDEN wrapper, w STAGE'U (nie scrollują), podmiana w miejscu ---------- */
/* absolute w sticky stage'u, CENTROWANY na linii titleTop (translateY -50%);
   top ustawia JS; linia 2 paragrafu siada na środku tytułu */
.home-we-know_title-wrap {
  position: absolute;
  /* left liczone w JS = środek PRZERWY między shapem a tekstem (równe odstępy, responsywnie).
     translate(-50%,-50%) → środek wrapa siada na (left, top). */
  transform: translate(-50%, -50%);
  width: fit-content;
  text-align: center; /* oba tytuły (We know / Our goal) centrują się na midX, nie tylko wrap */
  z-index: 1;         /* nad aplą (w obrębie stage'a) */
}
.home-we-know_title {
  font-family: var(--heading-family);
  font-weight: 400;
  font-size: 2.5rem;  /* Heading Small — bez shrinku, tytuł się POJAWIA (reveal) */
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-feature-settings: "ss01" 1;
  color: var(--deep-green);
  white-space: nowrap;
}
.home-we-know_goal-title {
  position: absolute;
  top: 0;
  left: 0;            /* dokładnie w miejscu "We know" */
  font-family: var(--heading-family);
  font-weight: 400;
  font-size: 2.5rem;  /* Figma: Heading Small 40px */
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-feature-settings: "ss01" 1;
  color: var(--deep-green);
  white-space: nowrap;
}

/* ============================================================
   FEATURE SHAPE — site-level overlay (shape.svg + butelka)
   ============================================================ */
.feature-shape_component {
  position: fixed;
  left: 50%;
  top: 50%;
  /* transform + wymiary ustawia GSAP (applyShapeDims) — 1:1 z ostatnią klatką wideo */
  z-index: 20;      /* nad sekcjami (10), pod nav (50) */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}
.feature-shape_svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1; /* kolor kształtu = Mist #E6EFEF (fill w shape.svg) */
}
/* butelka (bottle.png, 519×437, transparent) — centrowana przez GSAP
   (xPercent/yPercent -50; CSS transform usunięty, żeby rotate z GSAP nie nadpisywał);
   blur = wersja bazowa, ukryta do sekwencji wejścia */
/* wrapper grupy butelek (weShape) — fill shape'a; opacity fade lecił TU (grupowo, nie per-butelka) */
.feature-shape_bottles { position: absolute; inset: 0; }
.feature-shape_bottle {
  position: absolute;
  left: 48.5%;   /* dostrojone przez Tomka w inspect (butelka końca wideo) */
  top: 49.5%;
  width: 70%; /* PNG ma przezroczyste marginesy — kalibrowane do designu; GSAP nadpisuje width */
  height: auto;
  filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}
/* wersja ostra (w apli) — widoczna od razu, odkrywa ją krawędź apli */
.feature-shape_bottle.is-sharp {
  filter: none;
  opacity: 1;
  visibility: visible;
}

/* (FOUC guard [data-reveal] + .rv-line/.rv-line-in + reduced-motion
   → ../_shared/styleguide.css) */

/* ============================================================
   ████ KEY PILLARS (merge z _code/key-pillars/) ████
   3 sekcje doklejone na dole strony: intro + key-pillars + concept.
   Warstwa globalna → ../_shared/styleguide.css. Tu TYLKO custom sekcji.
   ⚠️ POMINIĘTE przy mergu (świadomie): override .section{padding:5rem 2rem}
      i .container{max-width:86rem} — ODSTĘPSTWA prototypu; home-full używa
      KANONU (48px padding / 1344 container z styleguide.css). Także .proto-spacer
      / .proto-label (elementy prototypu) NIE przeniesione.
   ============================================================ */

:root {
  --line-stroke: #D9D9D9;   /* linie detail (Figma #d9d9d9) — lokalny token sekcji */
}

/* ============================================================
   1) INTRO — „Swiss engineered, supplied globally" (node 4473:5304)
   ============================================================ */
.section.is-home-key-pillars-intro {
  /* ---- NACHODZENIE (2026-07-24): cały blok key-pillars wjeżdża NA We know ----
     mechanizm 1:1 z how-it-works → we-know: sekcja pod spodem (We know, z:10) zostaje,
     a intro (z:20, pełny ekran, wciągnięte -100vh) nasuwa się na nią. W tym czasie na
     We know rośnie SOLIDNY overlay (.home-we-know_overlay — key-pillars.js initEntryOverlap). */
  margin-top: -100vh;        /* overlap = 1 ekran (jak overlapViewports how-it-works) */
  z-index: 20;               /* nad We know (z:10) — intro zakrywa ją wjeżdżając */
  min-height: 100vh;         /* pełny ekran białego → czyste zakrycie We know pod spodem */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* content wyśrodkowany pionowo na pełnym ekranie */
  padding-top: 10rem;        /* 160 — odstęp z Figmy */
  padding-bottom: 0;         /* usunięty (decyzja Tomka) — nadpisuje kanon .section (5rem) */
  background: var(--lab-white);
}
/* w kolumnowym flexie container musi trzymać pełną szerokość (nawiasy = width:100%);
   max-width: none (2026-07-24) — jak key-pillars: nawiasy rozchodzą się na maxa (heading
   copy zostaje 57rem, wyśrodkowany). Padding poziomy = kanon .section (48px). */
.section.is-home-key-pillars-intro .container { width: 100%; max-width: none; }

/* SOLIDNY overlay handoffu na We know — leży W jej sticky stage'u (pełny viewport),
   nad całą treścią We know, pod wjeżdżającym intro (z:20). Rośnie autoAlpha 0→max
   na scrubie (key-pillars.js initEntryOverlap), gdy intro nasuwa się na We know. */
.home-we-know_overlay {
  position: absolute;
  inset: 0;
  z-index: 3;                /* nad shape/apla/wp1/tytułami (z:0–1) We know */
  background: #001a1a;       /* solid ciemny (knob koloru — do podmiany, „zobaczymy") */
  opacity: 0;
  visibility: hidden;        /* FOUC guard — autoAlpha z GSAP steruje */
  pointer-events: none;
}
.home-key-pillars-intro_component {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;                 /* 80 */
}
.home-key-pillars-intro_line { display: flex; width: 100%; }
.home-key-pillars-intro_line-seg {
  height: 1.25rem;           /* 20 */
  border: 1px solid var(--line-stroke);
  border-bottom: none;
  border-top-left-radius: 0.625rem;   /* 10 */
  border-top-right-radius: 0.625rem;
  /* INTERAKCJA (key-pillars.js initIntro): segmenty rosną poziomo od BRZEGÓW do środka
     (is-a origin left, is-b origin right). scaleX(0) tu = FOUC guard. */
  transform: scaleX(0);
  will-change: transform;
}
/* MERGE: w kanonie (container 1344) fixed 689/688px (razem 1377) jest za szerokie →
   flex:1 (po połowie), origin is-a left / is-b right (oba rosną do środka). */
.home-key-pillars-intro_line-seg.is-a { flex: 1; transform-origin: left center; }
.home-key-pillars-intro_line-seg.is-b { flex: 1; transform-origin: right center; }
.home-key-pillars-intro_line.is-bottom .home-key-pillars-intro_line-seg {
  border-top: none;
  border-bottom: 1px solid var(--line-stroke);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}
.home-key-pillars-intro_copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;               /* 24 */
  width: 57rem;              /* 912 */
  text-align: center;
}
.home-key-pillars-intro_heading { width: 100%; }
.home-key-pillars-intro_subheading {
  width: 100%;
  /* wyciszenie w alfie koloru (NIE opacity) — inaczej autoAlpha:1 z line-reveala
     rozjaśnia do 100%. Konwencja jak w kanonie `home`. Black #161517 @ 50% */
  color: rgba(22, 21, 23, 0.5);
}

/* ============================================================
   2) KEY PILLARS — sticky (pin) + scroll (node 4473:5315)
   ============================================================ */
.section.is-home-key-pillars { padding: 0; background: var(--lab-white); }

.home-key-pillars_pin {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 2rem;           /* 32 */
  overflow: clip;
}
.home-key-pillars_pin .container { width: 100%; }
/* PEŁNA SZEROKOŚĆ komponentu key-pillars (2026-07-24): zdejmujemy max-width containera,
   żeby lewa kolumna i prawa grupa rozeszły się na maxa. Padding poziomy = pin 0 2rem (32px)
   = tożsamy z .nav_component (padding 1.5rem 2rem) → krawędzie treści zgrane z navbarem. */
.section.is-home-key-pillars .container { max-width: none; }

.home-key-pillars_component {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38.375rem;         /* 614 */
}

/* ---------- LEWA KOLUMNA (332) ---------- */
.home-key-pillars_left {
  width: 20.75rem;           /* 332 */
  display: flex;
  flex-direction: column;
  gap: 10.375rem;            /* 166 — Figma 4473:5316 (fixed gap; kolumna centrowana w 614 przez _component) */
}
.home-key-pillars_top { display: flex; flex-direction: column; gap: 1.5rem; }   /* 24 */
.home-key-pillars_intro { display: flex; flex-direction: column; gap: 1.25rem; } /* 20 */

.home-key-pillars_label { display: flex; align-items: center; gap: 0.75rem; }   /* 12 */
.home-key-pillars_label-dot {
  width: 0.5625rem; height: 0.5625rem;   /* 9 */
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  opacity: 0;                /* WEJŚCIE: fade-in w playEntry (FOUC guard) */
}
.home-key-pillars_label-text { text-transform: uppercase; }

.home-key-pillars_copy {
  position: relative;
  width: 22.5rem;            /* 360 */
  height: 12.5rem;           /* 200 (Figma copy 198 + slack) */
}
/* SWAP-IN-PLACE (system #3): slot stackuje 4 stany w tej samej pozycji.
   Wjazd/wyjazd steruje swap.js (revealText/hideText) — TU tylko stackowanie.
   Zero CSS-fade/transition (kłóciłby się z GSAP). */
.home-key-pillars_copy-item {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;                 /* 16 */
  pointer-events: none;
}
/* FOUC guard dla stanów swapa (nie mają data-reveal): heading+paragraf startowo
   ukryte; swap.js odsłania aktywny przez autoAlpha:1. */
.home-key-pillars_copy-item .home-key-pillars_heading,
.home-key-pillars_copy-item .home-key-pillars_paragraph {
  visibility: hidden;
}
.home-key-pillars_paragraph {
  width: 21.25rem;           /* 340 — Figma 4473:5325 */
  /* wyciszenie w alfie koloru (NIE opacity) — patrz uwaga przy intro_subheading. Black @ 50% */
  color: rgba(22, 21, 23, 0.5);
}

.home-key-pillars_cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem 1.375rem;   /* 11 / 22 */
  border-radius: 50px;
  background: var(--red);
  transition: transform 0.25s ease, background 0.25s ease;
  opacity: 0;                /* WEJŚCIE: fade-in w playEntry (FOUC guard) */
}
.home-key-pillars_cta:hover { transform: translateY(-1px); background: #ef4d4d; }

/* ---------- 4 KROKI ---------- */
.home-key-pillars_steps { display: flex; flex-direction: column; gap: 1.5rem; width: 20.75rem; } /* 24 / 332 */
.home-key-pillars_step {
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;               /* 8 */
  /* reset <button> (z prototypu, przeniesiony z globalnego `button {}` do scope kroku) */
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}
.home-key-pillars_step-line {
  height: 1px; width: 100%;
  background: var(--deep-green);
  opacity: 0.15;
  transition: opacity 0.4s ease;
  /* WEJŚCIE (initKeyPillars playEntry): linia rośnie scaleX 0→1 od lewej (jak
     home-how-it-works_stat-line). scaleX(0) = FOUC guard. opacity = osobna oś (stan aktywny). */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.home-key-pillars_step.is-active .home-key-pillars_step-line { opacity: 0.9; }
.home-key-pillars_step-row { display: flex; align-items: center; gap: 0; }
.home-key-pillars_step-arrow {
  display: inline-flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  color: var(--deep-green);
  opacity: 0;
  transition: width 0.4s ease, margin-right 0.4s ease, opacity 0.4s ease;
}
.home-key-pillars_step-arrow svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
.home-key-pillars_step.is-active .home-key-pillars_step-arrow {
  width: 0.75rem;
  margin-right: 0.4375rem;   /* 7 */
  opacity: 1;
}
.home-key-pillars_step-label {
  text-transform: uppercase;
  /* wyciszenie w alfie koloru (NIE opacity) — inaczej autoAlpha:1 z line-reveala
     rozjaśnia do 100% (były czarne zamiast 30%). Figma 4473:5333: Black #161517 @ 30% */
  color: rgba(22, 21, 23, 0.3);
  transition: color 0.4s ease;
}
.home-key-pillars_step.is-active .home-key-pillars_step-label { color: var(--deep-green); }  /* Deep Green, opacity 1 */

/* ---------- PRAWA GRUPA (ring + pager, gap 32) ---------- */
.home-key-pillars_right { display: flex; align-items: center; gap: 2rem; height: 100%; }

.home-key-pillars_stage {
  /* WYŚRODKOWANY w sekcji (2026-07-24): po zdjęciu max-width space-between dopychał
     ring do prawej. absolute + left/top 50% + ujemne marginesy (POŁOWA 614px) centrują
     go w komponencie BEZ transform → GSAP rotate/scale z wejścia dalej działa (osobny kanał).
     Pager zostaje w flow (prawa krawędź). */
  position: absolute;
  left: 50%; top: 50%;
  margin-left: -19.1875rem;  /* -614/2 */
  margin-top: -19.1875rem;   /* -614/2 */
  width: 38.375rem; height: 38.375rem;   /* 614 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;                /* WEJŚCIE: reveal (rotate/scale/opacity) w playEntry (FOUC guard) */
  will-change: transform;
}
.home-key-pillars_ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.home-key-pillars_ring-track {
  fill: none; stroke: var(--deep-green); stroke-opacity: 0.15; stroke-width: 1.5;
}
.home-key-pillars_ring-progress {
  fill: none; stroke: var(--vibrant-green); stroke-width: 2; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 307px 307px;
}
.home-key-pillars_shape {
  position: relative;
  width: 26.213rem; height: 26.213rem;   /* 419.402 */
  border-radius: 3.268rem;               /* 52.28 */
  overflow: hidden;
  background: var(--mist);
  transform: rotate(45deg);
  will-change: transform;
}
.home-key-pillars_video {
  width: 160%; height: 160%;
  margin: -30% 0 0 -30%;
  object-fit: cover;
  transform: rotate(-45deg);
  will-change: transform;
}

.home-key-pillars_pager {
  position: relative;
  width: 21.75rem; height: 21.75rem;     /* 348 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;                /* WEJŚCIE: reveal (rotate/scale/opacity) w playEntry, odrobinę później (FOUC guard) */
  will-change: transform;
}
.home-key-pillars_diamond {
  position: absolute;
  width: 16.5625rem; height: 16.5625rem; /* 265 */
  border: 1.5px solid var(--deep-green);
  opacity: 0.1;
  border-radius: 2.5rem;
  transform: rotate(45deg);
}
.home-key-pillars_dots { position: relative; display: flex; align-items: center; gap: 1.25rem; } /* 20 */
.home-key-pillars_dot {
  width: 0.5rem; height: 0.5rem;         /* 8 */
  border-radius: 50%;
  background: var(--deep-green);
  opacity: 0.2;
  transition: opacity 0.4s ease, width 0.4s ease, height 0.4s ease;
}
.home-key-pillars_dot.is-active {
  width: 0.5625rem; height: 0.5625rem;   /* 9 */
  opacity: 1;
}

/* reveal guard [data-reveal] → ../_shared/styleguide.css */

/* ============================================================
   3) CONCEPT — „From concept to commercial supply" (node 4473:4517)
   Gradient, dwa kształty zbiegające się na scroll (glass pominięty). BEZ sticky.
   ============================================================ */
.section.is-home-concept {
  position: relative;
  padding: 0;                /* pełny bleed — gradient na full screen, bez obrysu (bazowy .section ma padding!) */
  height: 100vh;             /* BEZ sticky — sekcja = jeden ekran, kształty zbiegają się na scrollu */
  background: #033030;       /* fallback (najciemniejszy stop) — bg-div i tak pokrywa viewport */
}
.home-concept_pin {
  position: relative;        /* BEZ sticky (decyzja 2026-07-22) — treść scrolluje z sekcją */
  height: 100vh;
  overflow: clip;
}
/* tło gradientu — 120vh, osadzone w pinie; GSAP jedzie yPercent 0 → −16.667 (=−20vh) */
.home-concept_bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 120vh;
  z-index: 0;
  background: linear-gradient(180deg, #033030 0%, #005453 30%, #548b94 100%);
  will-change: transform;
}
.home-concept_shapes { position: absolute; inset: 0; z-index: 1; }
.home-concept_circle,
.home-concept_square {
  position: absolute;
  top: 50%; left: 50%;
  will-change: transform;
}
.home-concept_circle {
  width: 29.875rem; height: 29.875rem;   /* 478 */
  margin: -14.9375rem 0 0 -14.9375rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transform: translateX(-271px);         /* start: Figma center 449 */
}
.home-concept_square {
  width: 31.25rem; height: 31.25rem;     /* 500 */
  margin: -15.625rem 0 0 -15.625rem;
  overflow: visible;
  transform: translateX(260px);          /* start: Figma center 980 */
}
.home-concept_square-fill { fill: rgba(255, 255, 255, 0.05); }
.home-concept_square-stroke { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }

.home-concept_copy {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 50rem;              /* 800 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;               /* 24 */
  text-align: center;
}
.home-concept_heading { width: 100%; }
/* wyciszenie w alfie (NIE opacity) — line-reveal ustawia autoAlpha:1. Mist #E6EFEF @90% (1:1 z home) */
.home-concept_subheading { width: 100%; color: rgba(230, 239, 239, 0.9); }

/* ============================================================
   4) CTA — „The right partner changes everything" (Figma 4473:4736)
   Ciemny gradient + 2 okręgi tła (1:1), headline centrowany, biały pill button.
   Butelka + navbar z Figmy POMINIĘTE. Pixel-perfect @1440×800 (rem/px z Figmy).
   ⚠️ Gradient tła + krycie obrysu okręgów = „na oko" z renderu (pobranie assetów Figma
      w sandboxie zablokowane) — knoby do dostrojenia. Reszta z tokenów 1:1.
   ============================================================ */
.section.is-home-cta {
  position: relative;
  padding: 0;                /* pełny bleed — gradient + okręgi na full screen */
  min-height: 100vh;         /* Figma frame 800px ≈ 1 ekran */
  overflow: clip;            /* okręgi wychodzą poza sekcję → przycięte do niej (jak Figma frame) */
  background: #033030;       /* fallback (najciemniejszy stop) */
}
/* gradient tła — Figma „Gradients/Dark" 1:1: #033030 0% → #005453 30% → #548B94 100% (ten sam co concept) */
.home-cta_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #033030 0%, #005453 30%, #548b94 100%);
}
/* DWA okręgi (Ellipse 657/658): 1059px, wyśrodkowane w poziomie (Figma center x≈720/1440),
   pozycje pionowe 1:1 z Figmy (top -388 / 495). Obrys cienki, jasny (eyeballed). */
.home-cta_circle {
  position: absolute;
  left: 50%;
  margin-left: -33.09375rem;   /* -1059/2 px → środek na 50% (Figma center x=720.5) */
  width: 66.1875rem;           /* 1059 */
  height: 66.1875rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);  /* knob: krycie obrysu */
  z-index: 1;
  will-change: transform;
  pointer-events: none;
}
.home-cta_circle.is-top    { top: -24.25rem; }   /* -388 */
.home-cta_circle.is-bottom { top: 30.9375rem; }  /* 495 */

/* content nad okręgami; container = kanon (max-width 1344), headline 800 centrowany */
.section.is-home-cta .container { position: relative; z-index: 2; }
.home-cta_component {
  padding-top: 7.875rem;     /* 126 — Figma headline top (navbar+gap pominięte, ale nav fixed zajmuje górę) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;              /* 28 — headline → button */
  text-align: center;
}
.home-cta_copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;               /* 24 — heading → subtitle */
}
.home-cta_heading { max-width: 50rem; }   /* 800 — łamie na 2 linie jak Figma */
.home-cta_subtitle {
  max-width: 26.75rem;       /* 428 */
  /* wyciszenie w alfie (NIE opacity) — line-reveal ustawia autoAlpha:1. Mist #E6EFEF @90% */
  color: rgba(230, 239, 239, 0.9);
}
.home-cta_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem 1.375rem;   /* 11 / 22 (Figma) */
  border-radius: 3.125rem;       /* 50px */
  background: var(--lab-white);
  transition: transform 0.25s ease, background 0.25s ease;
  opacity: 0;                    /* FOUC guard — initCta odsłania (autoAlpha) */
}
.home-cta_cta:hover { transform: translateY(-1px); background: #f2f2f2; }


/* ============================================================
   FOOTER BOTTLE REVEAL — sekwencja butelki (PNG) + taśma (wideo), OSTATNIA sekcja
   (z _code/footer-bottle-reveal/). Butelka absolutem NAD sekcją wyżej (CTA); dół = górna
   krawędź wideo. Scrub = key-pillars.js initFooterBottleReveal. Namespace footer-bottle-reveal_*.
   ⚠️ Sekcja wyżej (is-home-cta) ma overflow:clip, ale butelka jest dzieckiem TEJ sekcji
      (sibling), więc nie jest przez nią przycinana — maluje się nad nią (z-index).
   ============================================================ */
.section.is-footer-bottle-reveal { padding: 0; }
.footer-bottle-reveal_video-wrap { position: relative; width: 100%; line-height: 0; }
.footer-bottle-reveal_video { width: 100%; height: auto; display: block; }
.footer-bottle-reveal_bottle {
  position: absolute;
  bottom: 100%;                 /* dół butelki = górna krawędź wideo; góra nachodzi nad sekcję wyżej */
  left: 50%;
  width: 14%;                   /* do dostrojenia do fiolek w wideo i sekcji wyżej */
  height: auto;
  transform: translateX(-50%);
  z-index: 3;                   /* nad sekcją wyżej */
  pointer-events: none;
  will-change: transform;
}