/* ============================================================
   BRIL — Brothers Innovation Labs
   Design system: "Pryzmat"
   Zasady: brak elevacji cieniem. Głębia budowana światłem
   (radialne poświaty), hairline'ami w color-mix i ziarnem.
   ============================================================ */

/* ---------- 1. Tokeny ---------- */
:root{
  /* baza — chłodny grafit, nie czerń */
  --bg:        oklch(11% 0.012 265);
  --bg-2:      oklch(14% 0.016 268);
  --bg-3:      oklch(17% 0.020 270);
  --ink:       oklch(97% 0.006 265);
  --ink-2:     oklch(80% 0.012 265);
  --ink-3:     oklch(62% 0.014 265);
  --ink-4:     oklch(48% 0.014 265);

  /* widmo */
  --s1:#FF5F6D; --s2:#FFA23A; --s3:#FFD84D; --s4:#5CE07E;
  --s5:#34E0D3; --s6:#4FA8FF; --s7:#8C7BFF; --s8:#C86BFF;
  --accent: var(--s5);

  /* hairline'y — zawsze color-mix, nigdy sztywne rgba */
  --line-1: color-mix(in oklab, var(--ink) 7%, transparent);
  --line-2: color-mix(in oklab, var(--ink) 12%, transparent);
  --line-3: color-mix(in oklab, var(--ink) 20%, transparent);

  /* typografia */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* rytm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --wrap: 76rem;
  --chapter-y: clamp(7rem, 16vh, 13rem);

  /* ruch */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* Motyw jasny: pełna podmiana tokenów. Domyślnie idziemy za systemem,
   przycisk w rogu nadpisuje wybór przez [data-theme] na <html>. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
  /* baza — papier, nie biel */
  --bg:        oklch(97.5% 0.004 265);
  --bg-2:      oklch(94% 0.006 265);
  --bg-3:      oklch(90% 0.008 265);
  --ink:       oklch(19% 0.014 265);
  --ink-2:     oklch(36% 0.014 265);
  --ink-3:     oklch(50% 0.014 265);
  --ink-4:     oklch(62% 0.012 265);

  /* widmo przyciemnione — na papierze żółć i cyjan muszą mieć kontrast */
  --s1:#D8324A; --s2:#B45C08; --s3:#8F6B00; --s4:#0E7A42;
  --s5:#0B7F78; --s6:#1160BE; --s7:#5A3FC4; --s8:#8F32B4;

  --line-1: color-mix(in oklab, var(--ink) 9%, transparent);
  --line-2: color-mix(in oklab, var(--ink) 15%, transparent);
  --line-3: color-mix(in oklab, var(--ink) 26%, transparent);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  /* baza — papier, nie biel */
  --bg:        oklch(97.5% 0.004 265);
  --bg-2:      oklch(94% 0.006 265);
  --bg-3:      oklch(90% 0.008 265);
  --ink:       oklch(19% 0.014 265);
  --ink-2:     oklch(36% 0.014 265);
  --ink-3:     oklch(50% 0.014 265);
  --ink-4:     oklch(62% 0.012 265);

  /* widmo przyciemnione — na papierze żółć i cyjan muszą mieć kontrast */
  --s1:#D8324A; --s2:#B45C08; --s3:#8F6B00; --s4:#0E7A42;
  --s5:#0B7F78; --s6:#1160BE; --s7:#5A3FC4; --s8:#8F32B4;

  --line-1: color-mix(in oklab, var(--ink) 9%, transparent);
  --line-2: color-mix(in oklab, var(--ink) 15%, transparent);
  --line-3: color-mix(in oklab, var(--ink) 26%, transparent);
  color-scheme:light;
}
:root[data-theme="dark"]{ color-scheme:dark }

/* Sekcje z animacją zostają ciemne w obu motywach — addytywne mieszanie
   światła nie istnieje na białym tle. To scena, nie pomyłka. */
.hero, .finale{
  --bg:        oklch(11% 0.012 265);
  --ink:       oklch(97% 0.006 265);
  --ink-2:     oklch(80% 0.012 265);
  --ink-3:     oklch(62% 0.014 265);
  --ink-4:     oklch(48% 0.014 265);
  --s1:#FF5F6D; --s2:#FFA23A; --s3:#FFD84D; --s4:#5CE07E;
  --s5:#34E0D3; --s6:#4FA8FF; --s7:#8C7BFF; --s8:#C86BFF;
  --line-1: color-mix(in oklab, var(--ink) 7%, transparent);
  --line-2: color-mix(in oklab, var(--ink) 12%, transparent);
  --line-3: color-mix(in oklab, var(--ink) 20%, transparent);
  background:var(--bg);
  color:var(--ink);
  color-scheme:dark;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:4rem;
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.65;
  font-weight:300;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ol,ul{ list-style:none }
::selection{ background:color-mix(in oklab, var(--s5) 35%, transparent); color:#fff }
:focus-visible{ outline:2px solid var(--s5); outline-offset:4px; border-radius:2px }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:100;
  transform:translateY(-200%);
  background:var(--bg-3); color:var(--ink);
  padding:.6rem 1rem; border:1px solid var(--line-2); border-radius:.5rem;
  font-size:.85rem;
}
.skip:focus{ transform:none }

.dot{
  display:inline-block; width:3px; height:3px; border-radius:50%;
  background:currentColor; opacity:.45; vertical-align:middle;
  margin-inline:.7em;
}

/* ---------- 2b. Kurtyna startowa ---------- */
.boot{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  background:oklch(11% 0.012 265);
  animation:boot 1s var(--ease) .15s forwards;
}
@keyframes boot{ to{ opacity:0; visibility:hidden } }

/* ---------- 2c. Narzędzia w rogu: język + motyw ---------- */
/* Jeden kontener, żeby na komórce oba elementy trzymały tę samą linię
   i razem przełączały się na wariant „nad ciemną sceną”. */
.tools{
  position:fixed; z-index:70;
  top:clamp(.9rem,2vw,1.4rem); right:clamp(.9rem,2vw,1.4rem);
  display:flex; align-items:center; gap:.5rem;
  /* iOS: nie wchodzić pod wycięcie / dynamic island */
  padding-right:env(safe-area-inset-right, 0px);
}
.lang{
  height:2.5rem;
  display:flex; align-items:center; gap:.1rem;
  padding-inline:.25rem;
  border:1px solid var(--line-2); border-radius:999px;
  background:color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.lang a{
  display:grid; place-items:center;
  height:1.9rem; min-width:2.35rem; padding-inline:.55rem;
  border-radius:999px;
  font-size:.64rem; font-weight:500; letter-spacing:.18em;
  color:var(--ink-4);
  transition:color .35s var(--ease), background .35s var(--ease);
}
.lang a[aria-current]{
  color:var(--ink);
  background:color-mix(in oklab, var(--ink) 9%, transparent);
}
.lang a:not([aria-current]):hover{ color:var(--ink) }

/* komórka: tylko drugi język jako kółko (mniej zasłania), a przy scrollu w dół
   narzędzia zjeżdżają za górną krawędź i wracają przy scrollu w górę */
@media (max-width:760px){
  .tools{ transition:transform .45s var(--ease), opacity .45s var(--ease) }
  .tools.is-hidden{ transform:translateY(-160%); opacity:0; pointer-events:none }
  .lang{ width:2.5rem; padding:0; justify-content:center; border-radius:50% }
  .lang a[aria-current]{ display:none }
  .lang a{ height:2.4rem; min-width:2.4rem; padding:0; color:var(--ink-2) }
}

.theme{
  position:relative;
  width:2.5rem; height:2.5rem;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
  background:color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--ink-3); cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.theme:hover{ color:var(--ink); border-color:var(--line-3) }
.theme svg{ width:1.05rem; height:1.05rem; grid-area:1/1; transition:opacity .35s var(--ease), transform .5s var(--ease) }
.theme .i-sun{ opacity:0; transform:rotate(-70deg) scale(.6) }
.theme .i-moon{ opacity:1; transform:none }
:root[data-theme="light"] .theme .i-sun{ opacity:1; transform:none }
:root[data-theme="light"] .theme .i-moon{ opacity:0; transform:rotate(70deg) scale(.6) }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme .i-sun{ opacity:1; transform:none }
  :root:not([data-theme="dark"]) .theme .i-moon{ opacity:0; transform:rotate(70deg) scale(.6) }
}
/* nad ciemną sceną (hero/finał) narzędzia muszą być jasne niezależnie od motywu strony */
.tools.on-stage .theme,
.tools.on-stage .lang{ border-color:rgba(255,255,255,.16); background:rgba(10,12,16,.45) }
.tools.on-stage .theme{ color:oklch(72% .014 265) }
.tools.on-stage .theme:hover{ color:#fff }
.tools.on-stage .lang a{ color:oklch(60% .014 265) }
.tools.on-stage .lang a[aria-current]{ color:#fff; background:rgba(255,255,255,.12) }
.tools.on-stage .lang a:not([aria-current]):hover{ color:#fff }

/* ---------- 3. Ziarno i atmosfera ---------- */
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  mix-blend-mode:overlay;
}
:root[data-theme="light"] .grain{ opacity:.026; mix-blend-mode:multiply }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .grain{ opacity:.026; mix-blend-mode:multiply }
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

/* pasek postępu — widmo, nie jednolity kolor */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:60;
  background:var(--line-1);
}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6),var(--s7),var(--s8));
  transform-origin:left;
  transition:width .12s linear;
}

/* ---------- 4. Szyna rozdziałów ---------- */
.rail{
  position:fixed; left:clamp(.9rem,2.2vw,2rem); top:50%; z-index:50;
  transform:translateY(-50%);
  mix-blend-mode:difference;
}
/* difference na papierze daje brudny fiolet — w jasnym motywie zwykły kolor */
:root[data-theme="light"] .rail{ mix-blend-mode:normal }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .rail{ mix-blend-mode:normal }
}
.rail ol{ display:flex; flex-direction:column; gap:.9rem }
.rail a{
  display:flex; align-items:center; gap:.7rem;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4);
  transition:color .4s var(--ease);
}
.rail b{
  font-weight:500; font-variant-numeric:tabular-nums;
  width:1.6rem; text-align:right;
  font-feature-settings:"tnum";
}
/* Nazwa rozdziału jest przezroczysta, ale nadal zajmuje szerokość — bez ustalonej
   kolejności kreska aktywnego rozdziału lądowała za nią, oderwana od szyny. */
.rail b{ order:0 }
.rail a::after{ order:1 }
.rail span{
  order:2;
  opacity:0; transform:translateX(-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.rail a:hover span{ opacity:1; transform:none }
.rail a.is-active{ color:var(--ink) }
.rail a::after{
  content:""; width:0; height:1px; background:var(--accent);
  transition:width .5s var(--ease);
}
.rail a.is-active::after{ width:1.4rem }
@media (max-width:900px){ .rail{ display:none } }

/* ---------- 5. Reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  filter:blur(6px);
  transition:
    opacity .9s var(--ease) var(--d,0s),
    transform 1s var(--ease) var(--d,0s),
    filter .9s var(--ease) var(--d,0s);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; filter:none }

/* wiersze nagłówków wyjeżdżają zza własnej krawędzi */
[data-lines]{ opacity:1 !important; transform:none !important; filter:none !important }
.ln{
  display:block; overflow:hidden;
  padding-bottom:.16em; margin-bottom:-.16em;
}
.ln i{
  display:block; font-style:inherit;
  transform:translate3d(0,110%,0);
  opacity:0;
  transition:
    transform 1.15s var(--ease) calc(var(--d,0s) + var(--ld,0s)),
    opacity .7s var(--ease) calc(var(--d,0s) + var(--ld,0s));
}
[data-lines].is-in .ln i{ transform:none; opacity:1 }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  isolation:isolate;
  overflow:hidden;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2;
}
/* atmosfera: mgła nad wiązkami pod kolumną tekstu + winieta. Zero box-shadow. */
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 34% at 52% 48%, color-mix(in oklab,var(--bg) 82%, transparent) 0 36%, transparent 74%),
    radial-gradient(125% 85% at 50% 46%, transparent 0 44%, var(--bg) 80%),
    linear-gradient(180deg, color-mix(in oklab,var(--bg) 72%, transparent) 0 10%, transparent 26% 70%, var(--bg) 100%);
}
.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding:clamp(3rem,7vh,5rem) var(--gut) clamp(6rem,12vh,8rem);
  text-align:center;
}

/* na wąskich ekranach światło wchodzi od dołu — kolumna tekstu zostaje czysta;
   górny odstęp robi miejsce na narzędzia w rogu, żeby eyebrow nie wchodził pod nie */
@media (max-width:760px){
  .hero__inner{ padding-top:5.4rem }
  .hero__veil{
    background:
      linear-gradient(180deg, var(--bg) 0 44%, color-mix(in oklab,var(--bg) 62%, transparent) 60%, transparent 84%),
      radial-gradient(140% 70% at 50% 30%, transparent 0 40%, color-mix(in oklab,var(--bg) 45%, transparent) 100%);
  }
}

.eyebrow{
  font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400;
}

.wordmark{
  display:flex; justify-content:center;
  margin:clamp(1.2rem,3vw,2rem) 0 clamp(.6rem,1.5vw,1rem);
  font-family:var(--sans);
  font-weight:800;
  font-size:clamp(5rem, min(24vw, 21vh), 13.5rem);
  line-height:.86;
  letter-spacing:-.055em;
}
.wordmark span{
  display:block;
  background:linear-gradient(168deg,
    color-mix(in oklab, var(--ink) 96%, transparent) 8%,
    color-mix(in oklab, var(--ink) 62%, transparent) 52%,
    color-mix(in oklab, var(--ink) 88%, transparent) 96%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  opacity:0;
  transform:translate3d(0,.34em,0) scale(1.06);
  filter:blur(14px);
  animation:letter 1.5s var(--ease) forwards;
  /* litery wyłaniają się z wybuchu (zderzenie wiązek w canvasie ≈ 1,0 s) */
  animation-delay:calc(.95s + var(--i) * .085s);
}
@keyframes letter{
  to{ opacity:1; transform:none; filter:none }
}
/* refrakcja: dwie widmowe kopie litery rozjeżdżają się za kursorem.
   Nie cień — rozszczepienie. */
.wordmark span{ position:relative; isolation:isolate }
.wordmark span::before,
.wordmark span::after{
  content:attr(data-l);
  position:absolute; inset:0;
  -webkit-background-clip:border-box; background:none;
  mix-blend-mode:screen;
  pointer-events:none;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.wordmark span::before{
  color:#FF3B6B; opacity:.28;
  transform:translate3d(calc(var(--ax,0px) * -1), calc(var(--ay,0px) * -1), 0);
}
.wordmark span::after{
  color:#34E0D3; opacity:.24;
  transform:translate3d(var(--ax,0px), var(--ay,0px), 0);
}

.expand{
  font-size:clamp(.66rem,1.5vw,.82rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-4); font-weight:400;
  word-spacing:.5em;
}
.expand em{
  font-style:normal;
  color:var(--ink);
  font-weight:600;
}

.hero__lead{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:300;
  font-size:clamp(1.6rem,4.1vw,3.05rem);
  line-height:1.14;
  letter-spacing:-.026em;
  margin-top:clamp(2rem,5vw,3.2rem);
  text-wrap:balance;
}
.hero__sub{
  max-width:44ch; margin:1.4rem auto 0;
  color:var(--ink-3);
  font-size:clamp(.95rem,1.6vw,1.06rem);
  line-height:1.7;
  text-wrap:pretty;
}

.cue{
  position:absolute; left:0; right:0; bottom:clamp(1.6rem,4.5vh,3rem);
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  white-space:nowrap;
  color:var(--ink-4);
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  transition:color .4s var(--ease);
}
.cue:hover{ color:var(--ink) }
.cue__dot{ animation:cuedot 2.4s var(--ease-io) infinite }
@keyframes cuedot{
  0%,100%{ transform:translateY(0); opacity:1 }
  50%{ transform:translateY(14px); opacity:.25 }
}

/* ---------- 7. Rozdziały ---------- */
/* Kolor rozdziału. Widmo rozłożone po stronie: każda sekcja bierze inną barwę,
   a wszystko w środku (poświata, numer, światło pod kursorem, liczby, znaczniki)
   liczy się od --accent. Jeden przypis zamiast dwudziestu kolorowych wyjątków. */
#r1{ --accent:var(--s2) }
#r2{ --accent:var(--s3) }
#r3{ --accent:var(--s5) }
#r4{ --accent:var(--s6) }
#r5{ --accent:var(--s7) }
#r6{ --accent:var(--s8) }

.chapter{
  position:relative;
  padding-block:var(--chapter-y);
  border-top:1px solid var(--line-1);
}
/* poświata sekcji zamiast ramek/cieni */
.chapter::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(60% 40% at 50% 0%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 70%);
  opacity:.7;
}

.marker{
  display:flex; align-items:center; gap:.85rem;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-4);
  margin-bottom:clamp(1.6rem,4vw,2.6rem);
}
.marker b{
  font-weight:500;
  color:var(--accent);
  padding:.28rem .6rem;
  border:1px solid color-mix(in oklab, var(--accent) 34%, var(--line-2));
  background:color-mix(in oklab, var(--accent) 7%, transparent);
  border-radius:.35rem;
  letter-spacing:.12em;
  font-size:.66rem;
}

.head{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.1rem,6.2vw,4.6rem);
  line-height:1.04;
  letter-spacing:-.032em;
  text-wrap:balance;
  max-width:20ch;
}
.lede{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  max-width:62ch;
  color:var(--ink-2);
  font-size:clamp(1.02rem,1.8vw,1.22rem);
  line-height:1.72;
  text-wrap:pretty;
}

/* proza rozdziału I */
.prose{
  margin-top:clamp(2.2rem,5vw,3.4rem);
  max-width:58ch;
  display:grid; gap:1.5rem;
  color:var(--ink-2);
  font-size:clamp(1.02rem,1.7vw,1.16rem);
  line-height:1.78;
}
.prose strong{ color:var(--ink); font-weight:500 }
.drop{
  float:left;
  font-family:var(--serif); font-weight:300;
  font-size:3.6em; line-height:.78;
  margin:.06em .12em 0 0;
  background:linear-gradient(150deg,var(--s5),var(--s6));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.pull{
  margin-top:clamp(3.5rem,8vw,6rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-2);
  max-width:24ch; margin-left:auto;
  text-align:right;
}
.pull p{
  font-family:var(--serif);
  font-weight:300; font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.6rem);
  line-height:1.18; letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--ink) 20%, color-mix(in oklab,var(--s5) 80%, var(--ink)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 7b. Schemat pryzmatu ---------- */
.diagram{ display:none }
@media (min-width:60rem){
  .diagram{
    display:block;
    margin-top:clamp(3rem,6vw,4.5rem);
  }
  .diagram svg{ width:100%; height:auto; overflow:visible }

  .dg-cap{
    font-family:var(--sans);
    font-size:13px; letter-spacing:.16em; text-transform:uppercase;
    fill:var(--ink-2); font-weight:400;
  }
  .dg-dim{ fill:var(--ink-4); letter-spacing:.1em; font-size:12px }
  .dg-mid{ text-anchor:middle; fill:var(--ink-3); font-size:12px }

  .dg-in, .dg-prism path, .dg-out{
    fill:none; stroke-linecap:round;
    stroke-dasharray:1; stroke-dashoffset:1;
    transition:stroke-dashoffset 1.6s var(--ease) .2s;
  }
  .dg-in{ stroke:color-mix(in oklab,var(--ink) 55%, transparent); stroke-width:1.4 }
  .dg-prism path{ stroke:var(--line-3); stroke-width:1.2 }
  .dg-out{ stroke:var(--c); stroke-width:1.4; opacity:.9 }
  .dg-out:nth-of-type(2){ transition-delay:.75s }
  .dg-out:nth-of-type(3){ transition-delay:.9s }
  .dg-out:nth-of-type(4){ transition-delay:1.05s }
  .dg-out:nth-of-type(5){ transition-delay:1.2s }
  .dg-labels{ opacity:0; transition:opacity 1s var(--ease) 1.1s }

  .diagram.is-in .dg-in,
  .diagram.is-in .dg-prism path,
  .diagram.is-in .dg-out{ stroke-dashoffset:0 }
  .diagram.is-in .dg-labels{ opacity:1 }
}

/* ---------- 7b2. Oferta ---------- */
/* Dziewięć kafli, każdy w innym kolorze widma — to jest ta „reklama”:
   jedno zdanie na kafel, reszta to kolor i światło. */
.offer{
  margin-top:clamp(2.6rem,6vw,4rem);
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-1);
  border-block:1px solid var(--line-1);
}
@media (min-width:40rem){ .offer{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:68rem){ .offer{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.offer article{
  --c:var(--accent);
  position:relative; overflow:hidden;
  background:var(--bg);
  padding:clamp(1.5rem,2.8vw,2.1rem) clamp(1.3rem,2.2vw,1.7rem) clamp(1.7rem,3vw,2.2rem);
  display:grid; gap:.55rem; align-content:start;
}
/* kolorowy szew u góry kafla zamiast ramki */
.offer article::after{
  content:""; position:absolute; inset-inline:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--c), transparent 72%);
  opacity:.6;
}
.offer h3{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(1.02rem,1.8vw,1.16rem); letter-spacing:-.022em;
}
.offer p{
  color:var(--ink-3);
  font-size:.92rem; line-height:1.62; text-wrap:pretty;
}
.offer__n{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c);
  font-variant-numeric:tabular-nums;
}
.offer__n::before{
  content:""; width:5px; height:5px; border-radius:50%; background:currentColor;
}

/* ---------- 7b3. Etykiety ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.4rem }
/* etykieta bierze kolor z otoczenia (--c banera lub realizacji), inaczej z rozdziału */
.chip{
  display:inline-flex; align-items:center; gap:.42rem;
  padding:.26rem .62rem .3rem;
  border:1px solid color-mix(in oklab, var(--c, var(--accent)) 30%, var(--line-1));
  border-radius:999px;
  background:color-mix(in oklab, var(--c, var(--accent)) 8%, transparent);
  font-size:.7rem; letter-spacing:.015em; color:var(--ink-3);
  white-space:nowrap;
}
.chip::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--c, var(--accent)); flex:none;
}
.chips--case{ margin-top:clamp(1.2rem,2.6vw,1.7rem) }
.case__note{
  margin-top:clamp(1.4rem,3vw,2rem);
  color:var(--ink-4); font-size:.82rem; letter-spacing:.01em;
}

/* ---------- 7c. Fazy realizacji ---------- */
.phases{
  margin-top:clamp(2.6rem,6vw,4rem);
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-1);
  border-block:1px solid var(--line-1);
}
@media (min-width:40rem){ .phases{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:68rem){ .phases{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.phases > li{
  background:var(--bg);
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1.3rem,2.2vw,1.8rem) clamp(1.9rem,3.4vw,2.4rem);
  display:grid; gap:1rem; align-content:start;
}
.ph__n{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.ph__n::before{
  content:""; width:5px; height:5px; border-radius:50%; background:currentColor;
}
.phases > li{ position:relative; overflow:hidden }
.phases > li::after{
  content:""; position:absolute; inset-inline:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent 72%);
  opacity:.5;
}
.phases h3{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(1.02rem,1.8vw,1.15rem); letter-spacing:-.02em;
}
.phases ul{ display:grid; gap:.55rem }
.phases ul li{
  position:relative; padding-left:1.05rem;
  color:var(--ink-3); font-size:.88rem; line-height:1.55;
  text-wrap:pretty;
}
.phases ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--line-3);
}

/* ---------- 8. Filary (metoda) ---------- */
.pillars{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  background:var(--line-1);
  border-block:1px solid var(--line-1);
}
.pillar{
  position:relative;
  background:var(--bg);
  padding:clamp(1.75rem,3.4vw,2.6rem) clamp(1.5rem,2.6vw,2.2rem) clamp(2.2rem,4vw,3rem);
  overflow:hidden;
  transition:background .6s var(--ease);
}
/* światło pod kursorem — zamiast hover-cienia */
.lightbox::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,0%),
    color-mix(in oklab, var(--c, var(--accent)) 15%, transparent), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.lightbox:hover::before{ opacity:1 }
.pillar__n{
  display:block;
  font-size:.68rem; letter-spacing:.2em;
  color:var(--ink-4);
  font-variant-numeric:tabular-nums;
  margin-bottom:1.6rem;
}
.pillar h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.7rem);
  letter-spacing:-.02em;
  margin-bottom:.9rem;
}
.pillar p{
  color:var(--ink-3);
  font-size:.98rem; line-height:1.72;
  text-wrap:pretty;
}

/* ---------- 9. Realizacje: banery ---------- */
/* Baner = pełnej szerokości pas z autorską sceną SVG po jednej stronie
   i treścią po drugiej. Głębia ze światła w kolorze projektu (--c),
   hairline'y zamiast ramek, zero cieni. */
.works{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid; gap:1px;
  background:var(--line-1);
  border-block:1px solid var(--line-1);
}
.work{
  --c:var(--accent);
  position:relative; isolation:isolate;
  background:var(--bg);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
/* poświata w kolorze projektu — mocniejsza pod kursorem */
.work::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 130% at var(--gx,18%) 46%, color-mix(in oklab, var(--c) 17%, transparent), transparent 70%),
    linear-gradient(90deg, color-mix(in oklab, var(--c) 4%, transparent), transparent 46%);
  opacity:.5; transition:opacity .6s var(--ease);
}
.work:hover::before{ opacity:1 }
.work__beam{
  position:absolute; inset-inline:0; top:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--c), transparent);
  opacity:.5;
  transform:scaleX(.28); transform-origin:left;
  transition:transform 1.2s var(--ease) .12s, opacity .6s var(--ease);
}
.work.is-in .work__beam{ transform:none }
.work:hover .work__beam{ opacity:1 }

.work__art{
  position:relative;
  min-height:13rem;
  padding:clamp(1.7rem,3.4vw,2.6rem) clamp(1.4rem,2.8vw,2.4rem);
  display:grid; place-items:center;
  border-bottom:1px solid var(--line-1);
}
.work__body{
  padding:clamp(1.9rem,3.6vw,3rem) clamp(1.4rem,3vw,2.6rem) clamp(2.2rem,4vw,3.2rem);
  display:grid; gap:clamp(.9rem,1.8vw,1.15rem);
  align-content:center;
}
/* scena i tekst zamieniają się stronami co drugi baner — pas nie robi się rytmiczny */
@media (min-width:62rem){
  .work{ grid-template-columns:minmax(0,28rem) minmax(0,1fr) }
  .work__art{
    border-bottom:0; border-inline-end:1px solid var(--line-1);
    padding-block:clamp(2.2rem,3.6vw,3.2rem);
  }
  .work:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,28rem); --gx:82% }
  .work:nth-child(even) .work__art{
    order:2; border-inline-end:0; border-inline-start:1px solid var(--line-1);
  }
}

.work__top{
  display:flex; align-items:center; flex-wrap:wrap; gap:.85rem;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-4);
}
.work__n{ font-variant-numeric:tabular-nums; color:var(--ink-3) }
.work__status{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--c);
}
.work__status::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor;
  animation:pulse 2.6s var(--ease-io) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.35; transform:scale(.7) }
}
.work__name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,4vw,2.5rem);
  line-height:1.08; letter-spacing:-.03em;
  text-wrap:balance;
  background:linear-gradient(102deg, var(--ink) 42%, color-mix(in oklab, var(--c) 82%, var(--ink)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.work__name a{ color:inherit }
.work__url{
  font-size:.78rem; letter-spacing:.02em;
  color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.work__desc{
  color:var(--ink-3);
  font-size:clamp(.96rem,1.5vw,1.03rem); line-height:1.7;
  max-width:46ch; text-wrap:pretty;
}
.work__facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line-1);
  border-block:1px solid var(--line-1);
  margin-top:.35rem;
}
.work__facts div{ background:var(--bg); padding:.85rem .2rem .9rem }
.work__facts b{
  background:linear-gradient(150deg, var(--ink) 30%, color-mix(in oklab, var(--c) 85%, var(--ink)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,2.4vw,1.5rem); letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.work__facts span{
  display:block; margin-top:.25rem;
  font-size:.68rem; line-height:1.45; color:var(--ink-4);
  text-wrap:pretty;
}
.work__go{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.62rem 1.05rem;
  border:1px solid var(--line-2); border-radius:.4rem;
  font-size:.82rem; letter-spacing:.01em; color:var(--ink-2);
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.btn svg{ width:.85rem; height:.85rem; flex:none }
.btn:hover{
  color:var(--ink);
  border-color:color-mix(in oklab, var(--c,var(--accent)) 55%, var(--line-3));
  background:color-mix(in oklab, var(--c,var(--accent)) 8%, transparent);
}
.btn--lead{
  color:var(--ink);
  border-color:color-mix(in oklab, var(--c,var(--accent)) 38%, var(--line-2));
}

/* ---------- 9a. Sceny SVG w banerach ---------- */
/* Wszystko liczone kolorem projektu; słupki i linie wjeżdżają dopiero,
   gdy baner wejdzie w kadr (klasa .is-in z tego samego IntersectionObservera). */
.art{ width:100%; height:auto; overflow:visible }
.art .g-grid{ stroke:var(--line-1); stroke-width:1 }
.art .g-axis{ stroke:var(--line-2); stroke-width:1 }
.art .g-cap{
  font-family:var(--sans); font-size:9px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  fill:var(--ink-4);
}
.art .g-num{
  font-family:var(--sans); font-size:11px; font-weight:500;
  fill:var(--ink-3); font-variant-numeric:tabular-nums;
}
.art .b{
  fill:var(--c);
  transform-box:fill-box; transform-origin:bottom;
  transform:scaleY(.02);
  transition:transform .95s var(--ease) calc(var(--i,0) * .055s + .18s);
}
.art .b--h{ transform-origin:left; transform:scaleX(.02) }
.work.is-in .art .b{ transform:none }
.art .d{
  fill:var(--c);
  transform-box:fill-box; transform-origin:center;
  transform:scale(0);
  transition:transform .7s var(--ease) calc(var(--i,0) * .04s + .25s);
}
.work.is-in .art .d{ transform:none }
.art .p{
  fill:none; stroke:var(--c); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--ease) calc(var(--i,0) * .12s + .3s);
}
.work.is-in .art .p{ stroke-dashoffset:0 }
.art .p--thin{ stroke-width:1; opacity:.5 }
.art .p--dash{ stroke-dasharray:4 4; stroke-dashoffset:0; opacity:.45; transition:none }
.art .frame{ fill:none; stroke:var(--line-2); stroke-width:1 }
.art .glow{ fill:var(--c); opacity:.14; filter:blur(14px) }

/* ---------- 9b. Usługi ---------- */
.services{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-1);
  border-block:1px solid var(--line-1);
}
@media (min-width:42rem){ .services{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:72rem){ .services{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.svc{
  position:relative; overflow:hidden;
  background:var(--bg);
  padding:clamp(1.7rem,3.2vw,2.4rem) clamp(1.4rem,2.4vw,2rem) clamp(1.9rem,3.4vw,2.6rem);
  display:grid; gap:.85rem;
  grid-template-rows:auto 1fr auto;   /* linia techniczna równa we wszystkich kartach */
}
.svc h3{
  font-family:var(--sans);
  font-weight:500; font-size:clamp(1.05rem,1.9vw,1.22rem);
  letter-spacing:-.022em;
}
.svc p{
  color:var(--ink-3);
  font-size:.95rem; line-height:1.7;
  text-wrap:pretty;
}
.svc__tech{
  margin-top:.3rem;
  font-size:.7rem !important; letter-spacing:.1em; text-transform:lowercase;
  color:var(--ink-4) !important;
  border-top:1px solid var(--line-1);
  padding-top:.85rem;
}

/* kroki współpracy */
.steps{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  background:var(--line-1);
  border:1px solid var(--line-1);
  border-radius:.75rem; overflow:hidden;
}
.steps li{
  background:var(--bg);
  padding:clamp(1.4rem,2.6vw,1.9rem) clamp(1.2rem,2vw,1.6rem);
  display:grid; gap:.5rem; align-content:start;
}
.steps b{
  color:var(--accent);
  font-weight:400; font-size:.66rem; letter-spacing:.2em;
  color:var(--ink-4); font-variant-numeric:tabular-nums;
}
.steps span{
  font-size:1rem; font-weight:500; letter-spacing:-.02em;
  color:var(--ink);
}
.steps p{ color:var(--ink-4); font-size:.85rem; line-height:1.6; text-wrap:pretty }

/* ---------- 9c. Modele współpracy ---------- */
.subhead{
  margin-top:clamp(3rem,6vw,4.5rem);
  font-family:var(--sans); font-weight:400;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-4);
}
.models{
  margin-top:1.5rem;
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-1);
  border:1px solid var(--line-1);
  border-radius:.75rem; overflow:hidden;
}
@media (min-width:56rem){ .models{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.model{
  position:relative; overflow:hidden;
  background:var(--bg);
  padding:clamp(1.5rem,2.8vw,2.1rem) clamp(1.3rem,2.2vw,1.8rem);
  display:grid; gap:.7rem; align-content:start;
}
.model h3, .model h4{
  font-family:var(--sans); font-weight:500;
  font-size:1.02rem; letter-spacing:-.02em;
}
.model h3::before{
  content:""; display:block;
  width:1.6rem; height:2px; margin-bottom:.75rem;
  background:linear-gradient(90deg, var(--accent), transparent);
}
.model p{ color:var(--ink-3); font-size:.92rem; line-height:1.68; text-wrap:pretty }

.deliver{
  margin-top:1.5rem;
  display:grid; gap:0;
  max-width:56rem;
}
.deliver li{
  position:relative;
  padding:.95rem 0 .95rem 2.1rem;
  border-top:1px solid var(--line-1);
  color:var(--ink-2); font-size:.98rem; line-height:1.6;
  text-wrap:pretty;
}
.deliver li:last-child{ border-bottom:1px solid var(--line-1) }
.deliver li strong{ color:var(--ink); font-weight:500 }
.deliver li::before{
  content:""; position:absolute; left:.35rem; top:1.35em;
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--accent);
}

/* ---------- 10. Liczby ---------- */
.stats{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid; gap:1px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--line-1);
  border:1px solid var(--line-1);
  border-radius:.75rem;
  overflow:hidden;
}
@media (min-width:60rem){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.stat{
  background:var(--bg);
  padding:clamp(1.8rem,3.6vw,2.8rem) clamp(1.4rem,2.4vw,2rem);
  display:grid; gap:.7rem; align-content:start;
}
.stat__v{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3rem,7vw,5rem);
  line-height:.94;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums lining-nums;
  background:linear-gradient(150deg, var(--ink) 26%, color-mix(in oklab, var(--accent) 88%, var(--ink)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat--punch .stat__v{
  background:linear-gradient(150deg,var(--s5),var(--s6) 55%,var(--s7));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__l{
  color:var(--ink-4);
  font-size:.86rem; line-height:1.55;
  text-wrap:pretty;
  max-width:24ch;
}

/* ---------- 11. Zasady ---------- */
.rules{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid; gap:0;
  max-width:64rem;
}
.rules li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.2rem,4vw,3rem);
  align-items:start;
  padding-block:clamp(1.4rem,3vw,2.1rem);
  border-top:1px solid var(--line-1);
}
.rules li:last-child{ border-bottom:1px solid var(--line-1) }
.rules b{
  font-weight:400; font-size:.7rem; letter-spacing:.18em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  padding-top:.55rem;
}
.rules p{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.15rem,2.6vw,1.75rem);
  line-height:1.36; letter-spacing:-.02em;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* ---------- 12. Finał ---------- */
.finale{
  position:relative;
  min-height:92svh;
  display:grid; place-items:center;
  text-align:center;
  isolation:isolate;
  overflow:hidden;
  border-top:1px solid var(--line-1);
}
.finale__canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:-1;
  mask-image:radial-gradient(70% 60% at 50% 50%, #000 40%, transparent 78%);
}
.finale__head{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,8vw,6rem);
  line-height:1.02; letter-spacing:-.035em;
  text-wrap:balance;
}
.finale__sub{
  margin-top:clamp(1.6rem,3.4vw,2.4rem);
  color:var(--ink-3);
  font-size:clamp(.95rem,1.6vw,1.06rem);
  line-height:1.8;
}

/* ---------- 13. Stopka ---------- */
.foot{
  border-top:1px solid var(--line-1);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.foot__in{
  display:flex; flex-wrap:wrap; gap:1.2rem;
  align-items:center; justify-content:space-between;
}
.foot__mark{
  font-weight:800; font-size:1.05rem;
  letter-spacing:-.03em;
  color:var(--ink-3);
  background:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6),var(--s7),var(--s8));
  background-size:0% 100%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  transition:background-size 1.4s var(--ease) .2s, color 1.4s var(--ease) .2s;
}
.foot__mark.is-in{ background-size:100% 100%; color:transparent }
.foot__meta{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4);
}

.foot__legal{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  padding-top:clamp(1.2rem,2.5vw,1.8rem);
  border-top:1px solid var(--line-1);
  font-size:.82rem; line-height:1.55;
  color:var(--ink-3);
}
.foot__legal dl{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:.55rem 2rem; margin:0;
}
.foot__legal dl > div{ display:grid; grid-template-columns:8.5rem 1fr; gap:.4rem }
.foot__legal dt{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4) }
.foot__legal dd{ margin:0 }
.foot__legal a{ color:inherit; text-decoration:underline; text-underline-offset:.15em }
.foot__copy{ margin:1.4rem 0 0; font-size:.72rem; color:var(--ink-4) }
@media (max-width:560px){ .foot__legal dl > div{ grid-template-columns:1fr; gap:.1rem } }

/* ---------- 13b. Strony realizacji ---------- */
/* Podstrony /realizacje/* korzystają z tego samego systemu co landing:
   te same hairline'y, ta sama typografia. Nowe jest tylko: pasek powrotu,
   okruszki, nagłówek realizacji, tabela metryki i wyjście na żywy serwis. */
.topbar{
  position:relative; z-index:60;
  border-bottom:1px solid var(--line-1);
  background:var(--bg);
}
.topbar__in{
  display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .9rem;
  min-height:3.6rem;
  padding-right:7.5rem;              /* miejsce na narzędzia w rogu */
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4);
}
.topbar__mark{
  font-family:var(--sans); font-weight:800;
  font-size:.9rem; letter-spacing:.24em;
  color:var(--ink);
  transition:color .35s var(--ease);
}
.topbar__mark:hover{ color:var(--accent) }
.topbar a:not(.topbar__mark){ color:var(--ink-4); transition:color .35s var(--ease) }
.topbar a:not(.topbar__mark):hover{ color:var(--ink-2) }
.topbar__sep{ opacity:.35 }
/* na wąskim ekranie okruszki idą do drugiego wiersza zamiast wjeżdżać pod narzędzia */
@media (max-width:560px){
  .topbar__in{
    font-size:.62rem; letter-spacing:.1em; gap:.25rem .6rem;
    padding-right:6.5rem; padding-block:.9rem; min-height:0;
  }
}

/* pierwsza sekcja pod paskiem powrotu nie potrzebuje pełnego marginesu rozdziału */
.topbar + main > .chapter:first-child,
.topbar + main > .case:first-child{ padding-top:clamp(2.6rem,7vh,4.5rem) }

.case{
  --c:var(--accent);
  position:relative;
  padding-block:clamp(3.5rem,9vh,6rem) clamp(3rem,7vw,5rem);
  border-bottom:1px solid var(--line-1);
  overflow:hidden;
}
.case::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 55% at 18% 0%, color-mix(in oklab, var(--c) 15%, transparent), transparent 72%);
}
.case__beam{
  position:absolute; inset-inline:0; top:0; height:1px;
  background:linear-gradient(90deg, var(--c), transparent 62%);
  opacity:.75;
}
.case__eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:.85rem;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-4);
  margin-bottom:clamp(1.4rem,3.4vw,2.2rem);
}
.case__eyebrow .work__status{ color:var(--c) }
.case h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.3rem,6.4vw,4.4rem);
  line-height:1.04; letter-spacing:-.034em;
  text-wrap:balance; max-width:18ch;
  background:linear-gradient(102deg, var(--ink) 46%, color-mix(in oklab, var(--c) 80%, var(--ink)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.case__lead{
  margin-top:clamp(1.4rem,3vw,2.1rem);
  max-width:60ch;
  color:var(--ink-2);
  font-size:clamp(1.04rem,1.9vw,1.26rem); line-height:1.7;
  text-wrap:pretty;
}
.case__go{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:clamp(1.6rem,3.4vw,2.4rem) }
.case__art{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-1);
  max-width:44rem;
}
.case.is-in .art .b,
.case.is-in .art .d{ transform:none }
.case.is-in .art .p{ stroke-dashoffset:0 }

.case__meta{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-1);
  border-block:1px solid var(--line-1);
}
@media (min-width:38rem){ .case__meta{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:64rem){ .case__meta{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.case__meta > div{ background:var(--bg); padding:1rem .1rem 1.15rem }
.case__meta dt{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:.4rem;
}
.case__meta dd{ margin:0; font-size:.95rem; color:var(--ink-2); line-height:1.5; text-wrap:pretty }

/* wyjście na żywy serwis — jedyny element strony z kolorowym tłem */
.visit{
  --c:var(--accent);
  position:relative; overflow:hidden;
  margin-top:clamp(3rem,7vw,4.5rem);
  padding:clamp(2rem,4.5vw,3.2rem) clamp(1.5rem,3.4vw,2.8rem);
  border:1px solid var(--line-2); border-radius:.6rem;
  display:grid; gap:1rem;
  background:
    radial-gradient(90% 160% at 92% 50%, color-mix(in oklab, var(--c) 16%, transparent), transparent 70%);
}
.visit h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  line-height:1.14; letter-spacing:-.026em; text-wrap:balance;
}
.visit p{ color:var(--ink-3); font-size:.98rem; line-height:1.7; max-width:54ch; text-wrap:pretty }
.visit .btn{ justify-self:start; margin-top:.4rem }

/* pozostałe realizacje na dole strony */
.more{
  padding-block:clamp(3rem,7vw,4.5rem);
  border-top:1px solid var(--line-1);
}
.more__head{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:1.6rem;
}
.more ul{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-1);
  border-block:1px solid var(--line-1);
}
/* 4 karty (5 realizacji minus bieżąca) — 2×2 albo jeden rząd, bez dziury w siatce */
@media (min-width:40rem){ .more ul{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:72rem){ .more ul{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.more a{
  --c:var(--accent);
  position:relative; display:grid; gap:.4rem;
  background:var(--bg);
  padding:1.4rem 1.2rem 1.6rem;
  transition:background .5s var(--ease);
}
.more a::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in oklab, var(--c) 12%, transparent), transparent 60%);
  opacity:0; transition:opacity .5s var(--ease);
}
.more a:hover::before{ opacity:1 }
.more b{
  font-family:var(--sans); font-weight:500; font-size:1rem;
  letter-spacing:-.02em; color:var(--ink);
  transition:color .4s var(--ease);
}
.more a:hover b{ color:var(--c) }
.more span{ font-size:.8rem; color:var(--ink-4); line-height:1.5; text-wrap:pretty }

/* ---------- 14. Dostępność ruchu ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; filter:none }
  .ln i{ opacity:1; transform:none }
  .boot{ display:none }
  .wordmark span{ opacity:1; transform:none; filter:none }
  .grain{ animation:none }
  .art .b, .art .d{ transform:none }
  .art .p{ stroke-dashoffset:0 }
  .work__beam{ transform:none }
  .work__status::before, .soon__status::before{ animation:none }
}