/* ═══════════════════════════════════════════════════════════
   LABTIME — panel przyrządu
   Baza: ciepła kość słoniowa. Antracyt = kontrapunkt pod wideo.
   Kąty: 0° / 90° / 45°. Promienie tylko na narożnikach zewn.
   ═══════════════════════════════════════════════════════════ */

/* Fonty z własnej domeny (bez zapytań do Google — RODO, szybkość).
   Pliki: src/assets/fonts/, wersje zmienne (jeden plik = cały zakres grubości),
   pobrane z Google Fonts; licencja SIL OFL 1.1 obok plików.
   latin-ext = polskie znaki; przeglądarka pobiera go tylko, gdy są na stronie. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/assets/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/assets/fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --paper:      #EAEAD2;
  --anthracite: #1E1E1E;
  --ink:        #141414;
  --signal:     #C1273A;
  --tech:       #606066;
  --tech-hi:    #8F8F96;  /* szarość techniczna na antracycie — kontrast AA */

  /* spektrum HUD — WYŁĄCZNIE wewnątrz grafik przyrządowych */
  --hud-amber:   #E0A43C;
  --hud-lime:    #A8C33F;
  --hud-cyan:    #3FB8C3;
  --hud-magenta: #C33F9E;

  --font-din:  "Archivo", "Barlow", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;

  --wrap: 1560px;
  --pad: clamp(20px, 4vw, 72px);
  --r-out: 22px;            /* duży promień — tylko narożniki zewnętrzne */
  --ch: 14px;               /* chamfer 45° */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-din);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ max-width:100%; display:block; }
h1,h2,h3,p,ul,ol,figure,fieldset{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.mono{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  font-weight:500;
}

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:10px 18px;
  font-family:var(--font-mono); font-size:.8rem; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* Treść wyłącznie dla czytników ekranu i ekstraktorów tekstu
   (np. tabela specyfikacji dostarczenia w sekcji 06). */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

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

/* ── siatka milimetrowa na papierze ─────────────────────── */
.sec--paper{
  background:
    linear-gradient(to right, rgba(96,96,102,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(96,96,102,.07) 1px, transparent 1px);
  background-size:56px 56px;
  background-color:var(--paper);
  color:var(--ink);
}
.sec--dark{ background:var(--anthracite); color:var(--paper); }
.sec{ padding-block:clamp(72px, 9vw, 150px); border-top:1px solid var(--ink); }
.sec--dark.sec{ border-top-color:var(--ink); }

/* ── nagłówek sekcji: numeracja ujęć ────────────────────── */
.sec-head{
  display:flex; align-items:center; gap:18px;
  margin-bottom:clamp(36px, 5vw, 72px);
}
.sec-head__no{ white-space:nowrap; color:var(--ink); }
.sec-head__no--dark{ color:var(--paper); }
.sec-head__rule{ flex:1; height:1px; background:var(--ink); position:relative; }
.sec-head__rule--dark{ background:var(--tech); }
.sec-head__rule::after{           /* tick końcowy 45° */
  content:""; position:absolute; right:0; top:-4px;
  width:9px; height:9px; border-right:1px solid currentColor; border-top:1px solid currentColor;
  transform:rotate(45deg);
}

/* ── typografia ─────────────────────────────────────────── */
.h2{
  font-size:clamp(2rem, 4.6vw, 4.4rem);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:none;
  max-width:18ch;
}
.h2--wide{ max-width:24ch; }
.h2--onDark{ color:var(--paper); }
.h2--block{ margin-bottom:clamp(36px, 5vw, 72px); }   /* H2 nad siatką/formularzem (08, 10) */
.lead{ margin-top:1.4em; font-size:clamp(1rem, 1.4vw, 1.25rem); max-width:56ch; color:var(--ink); }
.lead--narrow{ max-width:64ch; }
.lead--onDark{ color:var(--paper); opacity:.92; }

/* ── przyciski: chamfer + jeden duży promień ────────────── */
.btn{
  display:inline-block;
  background:var(--ink); color:var(--paper);
  font-weight:700; text-decoration:none; text-transform:uppercase;
  letter-spacing:.06em; font-size:.9rem;
  padding:16px 34px;
  border-radius:0 var(--r-out) 0 0;                 /* promień tylko zewn. */
  clip-path:polygon(0 0, 100% 0, 100% 100%, var(--ch) 100%, 0 calc(100% - var(--ch)));
  transition:transform .18s cubic-bezier(.3,1.6,.4,1), background-color .15s;
}
.btn--signal{ background:var(--signal); color:var(--paper); }
.btn:hover{ transform:translateY(-2px); }
.btn--sm{ padding:9px 20px; font-size:.72rem; border-radius:0 12px 0 0; --ch:8px; }
.btn--lg{ padding:18px 46px; }

/* ── diody ──────────────────────────────────────────────── */
.led{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--tech); vertical-align:middle;
}
.led--signal{ background:var(--signal); animation:led-blink 2.4s steps(1) infinite; }
@keyframes led-blink{ 0%,92%{opacity:1} 93%,100%{opacity:.25} }

/* ── placeholdery (wideo / grafiki — do podmiany) ───────── */
.ph{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(96,96,102,.14) 22px 23px),
    var(--anthracite);
  border:1px solid var(--tech);
  color:var(--paper);
  min-height:200px;
  overflow:hidden;
}
.ph__tag{ --tech: var(--tech-hi);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  color:var(--tech); text-align:center; line-height:1.9; padding:16px;
  background:var(--anthracite); border:1px solid var(--tech);
  position:relative; z-index:1;
}
.ph__tag--inline{
  display:inline-block; background:transparent; border:0;
  color:#606066; padding:0; margin-bottom:14px;   /* na papierze — ciemna szarość */
}
.ph--fill{ position:absolute; inset:0; border:0; min-height:0; }
.ph__cross{ position:absolute; inset:0; pointer-events:none; }
.ph__cross::before,.ph__cross::after{
  content:""; position:absolute; background:rgba(96,96,102,.4);
}
.ph__cross::before{ left:50%; top:0; bottom:0; width:1px; }
.ph__cross::after{ top:50%; left:0; right:0; height:1px; }

/* ═══ HEADER ═════════════════════════════════════════════ */
.site-head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px var(--pad);
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
/* logo: dozwolone zmiany wyłącznie kolor (fill="currentColor" ← color) + rozmiar */
.brand__mark{ width:auto; height:30px; color:var(--ink); }
.brand__word{ width:auto; height:13px; color:var(--ink); }
.site-nav{ display:none; gap:30px; }
.site-nav a{
  text-decoration:none; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
}
.site-nav a:hover{ color:var(--signal); }
.site-nav__no{ font-family:var(--font-mono); font-size:.62rem; color:var(--tech); vertical-align:super; }
.site-head__right{ display:flex; align-items:center; gap:18px; }
.lang{ font-family:var(--font-mono); font-size:.72rem; }
.lang__btn{ padding:4px 4px; letter-spacing:.08em; color:var(--tech); }
.lang__btn.is-active{ color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.lang__sep{ color:var(--tech); }
@media (min-width:768px){ .site-nav{ display:flex; } }

/* menu na telefonie: przycisk rozwija listę sekcji pod nagłówkiem (twarde przejście, bez fade) */
.nav-toggle{
  padding:8px 0 8px 4px; color:var(--ink); font-weight:700;
}
.nav-toggle[aria-expanded="true"]{ color:var(--signal); }
@media (max-width:767px){
  .site-nav.is-open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--ink);
    padding:8px var(--pad) 16px;
  }
  .site-nav.is-open a{ padding:14px 0; font-size:1rem; border-bottom:1px solid rgba(96,96,102,.25); }
  .site-nav.is-open a:last-child{ border-bottom:0; }
  .site-head__right{ gap:14px; }
}
@media (min-width:768px){ .nav-toggle{ display:none; } }

/* ═══ 01 HERO ════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
/* showreel: plakat od razu, odtwarzacz Vimeo (tryb tła) nad nim po starcie filmu */
.hero__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__player{ position:absolute; inset:0; overflow:hidden; container-type:size; }
.hero__player iframe{
  position:absolute; top:50%; left:50%; border:0; pointer-events:none;
  width:max(100cqw, 177.78cqh); height:max(100cqh, 56.25cqw);   /* „cover” dla 16:9 */
  transform:translate(-50%, -50%);
  opacity:0; transition:opacity .35s linear;
}
.hero.is-playing .hero__player iframe{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,20,.25) 0%, rgba(20,20,20,.78) 100%);
}
.hero__hud{
  position:absolute; top:18px; right:var(--pad); z-index:2;
  display:flex; align-items:center; gap:22px; color:var(--paper); opacity:.85;
}
.hero__rec .led{ margin-right:6px; }
.hero__inner{
  position:relative; z-index:2;
  padding:0 var(--pad) clamp(90px, 12vh, 150px);
  max-width:var(--wrap); width:100%; margin-inline:auto;
}
/* H1 = nadtytuł + slogan; wygląd jak dwa osobne elementy */
.hero__title{ font:inherit; }
.hero__kicker{ display:block; color:var(--paper); opacity:.75; margin-bottom:22px; }
.hero__h1{
  display:block;
  font-size:clamp(2.5rem, 7.2vw, 8rem);
  line-height:.98; letter-spacing:-.025em; font-weight:900;
  color:var(--paper); max-width:14ch;
}
.hero__h1 .ch{ display:inline-block; will-change:transform; }
.hero__sub{ margin-top:26px; font-size:clamp(1rem, 1.5vw, 1.3rem); color:var(--paper); opacity:.9; max-width:52ch; }
.hero__cta{ margin-top:34px; }
.hero__scroll{
  position:absolute; bottom:20px; right:var(--pad); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--paper); opacity:.7;
}
.hero__scroll-line{ width:1px; height:44px; background:var(--paper); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:var(--signal); animation:scroll-drip 2.2s ease-in-out infinite;
}
@keyframes scroll-drip{ to{ top:110%; } }

/* ═══ 02 KLIENCI ═════════════════════════════════════════ */
.clients{ padding-block:clamp(48px, 6vw, 90px); }
.clients__stats{
  display:flex; flex-wrap:wrap; gap:clamp(30px, 6vw, 110px);
  margin-bottom:clamp(44px, 5vw, 70px);
}
.stat{ display:flex; flex-direction:column; gap:8px; }
.stat__num{
  font-size:clamp(3.4rem, 6.5vw, 6rem); font-weight:700; line-height:1;
  letter-spacing:-.01em; color:var(--ink);
}
.stat__plus{ color:var(--signal); }
.stat__label{ color:var(--tech); }
/* karuzela logotypów: okno z twardymi krawędziami (bez gradientów), przesuw tylko transform */
.clients__marquee{
  position:relative; overflow:hidden;
  border-block:1px solid rgba(96,96,102,.35);
  padding-block:24px;
}
.clients__track{
  display:flex; width:max-content;
  animation:marquee 48s linear infinite;
}
.clients__row{
  display:flex; align-items:center; flex-wrap:nowrap; margin:0;
  gap:clamp(44px, 5vw, 88px);
  padding-right:clamp(44px, 5vw, 88px);   /* = gap → szew między kopiami niewidoczny */
}
.client{ flex:none; display:flex; align-items:center; height:40px; }
.client img{ display:block; width:auto; height:calc(30px * var(--s, 1)); }
.client__name{
  font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(.95rem, 1.5vw, 1.35rem);
  color:var(--ink); white-space:nowrap;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }
.clients__marquee:hover .clients__track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .clients__track{ width:auto; }
  .clients__row{ flex-wrap:wrap; row-gap:20px; padding-right:0; }
  .clients__row[aria-hidden]{ display:none; }
}

/* ── przełącznik ruchu (hero, karuzela) ─────────────────── */
.motion-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; font-size:.64rem; letter-spacing:.14em;
  color:var(--tech); border:1px solid rgba(96,96,102,.55);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  transition:color .15s, border-color .15s;
}
.motion-toggle[hidden]{ display:none; }
.motion-toggle:hover{ color:var(--ink); border-color:var(--ink); }
.motion-toggle svg{ display:block; fill:currentColor; }
.motion-toggle .mt-ico--play, .motion-toggle .mt-txt--play,
.motion-toggle.is-paused .mt-ico--pause, .motion-toggle.is-paused .mt-txt--pause{ display:none; }
.motion-toggle.is-paused .mt-ico--play{ display:block; }
.motion-toggle.is-paused .mt-txt--play{ display:inline; }
.motion-toggle--dark{ color:var(--paper); border-color:rgba(234,234,210,.45); }
.motion-toggle--dark:hover{ color:var(--paper); border-color:var(--paper); }

/* ═══ 03 SPECJALIZACJA ═══════════════════════════════════ */
.s03__grid{ display:grid; gap:clamp(36px, 4vw, 64px); }
@media (min-width:1024px){ .s03__grid{ grid-template-columns:5fr 6fr; align-items:start; } }
.panel--dark{
  background:var(--anthracite); border:1px solid var(--ink);
  border-radius:0 var(--r-out) 0 0;
  position:relative; padding:14px;
}
.s03__instrument .ph--panel{ min-height:clamp(280px, 34vw, 460px); border:0; width:100%; }
.s03__img{
  display:block; width:100%; height:auto;
  border-radius:0 calc(var(--r-out) - 8px) 0 0;   /* echo promienia panelu, tylko narożnik zewn. */
}
.panel__meta{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 4px 0;
  color:var(--tech-hi);
}
.s03__modules{
  margin-top:clamp(48px, 6vw, 84px);
  display:grid; gap:1px; background:var(--ink);
  border:1px solid var(--ink);
}
@media (min-width:768px){ .s03__modules{ grid-template-columns:1fr 1fr; } }
@media (min-width:1280px){ .s03__modules{ grid-template-columns:repeat(4,1fr); } }
.mod{ background:var(--paper); padding:26px 24px 30px; position:relative; }
.mod__no{ color:var(--signal); display:block; margin-bottom:36px; }
.mod__no::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:10px;
  border-top:1px solid var(--tech); border-right:1px solid var(--tech);
  transform:rotate(45deg) translateY(-2px);
}
.mod__name{ font-size:1.12rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px; }
.mod__desc{ font-size:.92rem; color:#3a3a3c; }

/* ═══ 04+06 KLEPSYDRA — jeden obiekt, dwie sekcje ════════ */
/* Górna bańka (04): scrub na sticky. Oś środkowa SVG (x=500)
   = oś, na której w sekcji 06 stoi MASTER. */
.hg-scrub{ position:relative; margin-block:clamp(28px, 4vw, 56px); }
.hg-stage{ display:flex; justify-content:center; }
.hg-stage svg{ display:block; width:100%; height:auto; max-width:900px; }
@media (min-width:768px){
  .hg-scrub{ height:300vh; }
  .hg-stage{ position:sticky; top:0; height:100vh; align-items:center; }
  .hg-stage svg{ height:min(94vh, 1000px); width:auto; max-width:100%; }
}
.hg-chaos line{ stroke:var(--tech); stroke-width:1; opacity:.55; }
/* idle: węzły dryfują bardzo powoli; scrub (.is-flowing) wyłącza dryf */
.hg-drift{ animation:hg-drift 7s ease-in-out infinite alternate; }
.is-flowing .hg-drift{ animation:none; }
@keyframes hg-drift{
  0%{ transform:translate(0,0); }
  35%{ transform:translate(3px,-2px); }
  70%{ transform:translate(-2px,3px); }
  100%{ transform:translate(2px,2px); }
}
.hg-routes path{ stroke:var(--anthracite); stroke-width:1.5; fill:none; }
.cons-outline{ color:var(--ink); }   /* kontur znaku w 06 — currentColor jak w pliku */
.hg-node polygon{ fill:var(--ink); }
.hg-label{ transform-box:fill-box; transform-origin:center; }
.hg-label text{
  font-family:var(--font-din); font-weight:700; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase;
}
.hg-label .is-dark{ fill:var(--anthracite); }
.hg-label .is-gray{ fill:var(--tech); opacity:0; }
.hg-pinch circle{ fill:var(--ink); }
.hg-logoWrap{ color:var(--ink); }
.hg-caption{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.26em;
  fill:var(--tech); text-anchor:middle;
}

/* Dolna bańka (06): statyczna konsola. Idle tylko w CSS. */
.hg-console{ margin-top:clamp(36px, 4vw, 64px); }
.hg-console svg{ display:block; width:100%; height:auto; }
.hg-console--d svg{ max-width:1200px; margin-inline:auto; }
.hg-console--m{ display:none; max-width:420px; }
@media (max-width:767px){
  .hg-console--d{ display:none; }
  .hg-console--m{ display:block; }
}
.cons-line{ fill:none; stroke:var(--anthracite); stroke-width:1.5; }
.cons-node{ fill:var(--ink); }
.cons-master{ fill:var(--ink); }
.cons-master-txt{
  font-family:var(--font-din); font-weight:700; font-size:15px;
  letter-spacing:.22em; fill:var(--paper);
}
.cons-ch{
  font-family:var(--font-din); font-weight:800; font-size:15px;
  letter-spacing:.2em; fill:var(--anthracite); text-transform:uppercase;
}
.cons-spec{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; fill:var(--tech); }
.cons-led{ fill:var(--signal); animation:cons-flicker 5s steps(1) infinite; }
@keyframes cons-flicker{ 0%,86%{opacity:1} 87%,92%{opacity:.2} 93%,100%{opacity:1} }
/* impuls: jasny segment pełznący po linii (dasharray/dashoffset, bez filtrów);
   grubszy od przewodu, miękkie wygaszanie przez opacity + round cap */
.cons-pulse{
  fill:none; stroke:var(--signal); stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:14 186; stroke-dashoffset:14; opacity:0;
  animation:cons-pulse 9s linear infinite;
}
@keyframes cons-pulse{
  0%{ stroke-dashoffset:14; opacity:0; }
  3%{ opacity:1; }
  28%{ opacity:1; }
  33%{ stroke-dashoffset:-186; opacity:0; }
  100%{ stroke-dashoffset:-186; opacity:0; }
}

.pillars{ display:grid; gap:1px; background:var(--ink); border:1px solid var(--ink); }
@media (min-width:768px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
.pillar{ background:var(--paper); padding:28px 26px 34px; }
.pillar__no{ color:var(--tech); display:block; margin-bottom:30px; }
.pillar__name{ font-size:1.3rem; font-weight:800; text-transform:uppercase; margin-bottom:12px; letter-spacing:.02em; }
.pillar p{ font-size:.95rem; color:#3a3a3c; }

/* ═══ 05 RACK — scroll poziomy ═══════════════════════════ */
.rack-sec{
  position:relative; padding-block:0;
  /* siatka techniczna 56 — jak na papierze, w wersji na antracyt */
  background-image:
    linear-gradient(to right, rgba(96,96,102,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(96,96,102,.10) 1px, transparent 1px);
  background-size:56px 56px;
  background-color:var(--anthracite);
}
.rack-pin{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:34px; padding-block:clamp(56px,7vw,96px); }

/* ── tło backplane: dekoracja pod modułami ──────────────── */
.rack-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.rack-sec .sec-head, .rack-sec .wrap, .rack-track{ position:relative; z-index:1; }
/* .wrap w kolumnie flex: bez width:100% auto-marginesy ściskają go do treści i centrują */
.rack-pin > .wrap{ width:100%; }
/* H2 racka niższy niż standard — przypięta sekcja musi się zmieścić w 100vh (laptop 768 px) */
.h2--rack{ font-size:clamp(1.8rem, 3.4vw, 3.4rem); max-width:none; }
.rack-bg__ruler{ position:absolute; top:0; left:0; display:block; }
.rack-bg__ruler text{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.08em;
  fill:var(--tech); opacity:.8;
}
/* perforacja montażowa: kwadratowe otwory 5×5 co 28 */
.rack-bg__holes{
  position:absolute; left:0; right:0; bottom:14px; height:5px;
  background:repeating-linear-gradient(90deg, rgba(96,96,102,.45) 0 5px, transparent 5px 28px);
}
/* znaczniki pasowania w narożnikach (krzyż 18×18, 1px) */
.rack-bg__reg{ position:absolute; width:18px; height:18px; }
.rack-bg__reg::before, .rack-bg__reg::after{
  content:""; position:absolute; background:rgba(96,96,102,.6);
}
.rack-bg__reg::before{ left:50%; top:0; bottom:0; width:1px; }
.rack-bg__reg::after{ top:50%; left:0; right:0; height:1px; }
.rack-bg__reg--tl{ top:38px; left:14px; }
.rack-bg__reg--tr{ top:38px; right:14px; }
.rack-bg__reg--bl{ bottom:32px; left:14px; }
.rack-bg__reg--br{ bottom:32px; right:14px; }
/* adnotacje mono nad perforacją */
.rack-bg__note{ position:absolute; bottom:28px; color:var(--tech); opacity:.75; font-size:.62rem; }
.rack-bg__note--l{ left:44px; }
.rack-bg__note--r{ right:44px; }
@media (max-width:639px){ .rack-bg__note--r{ display:none; } }
.rack-hint{ margin-left:auto; color:var(--tech-hi); }
.rack-track{
  display:flex; gap:18px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:4px var(--pad) 26px;
}
.rack-track::-webkit-scrollbar{ height:4px; }
.rack-track::-webkit-scrollbar-thumb{ background:var(--tech); }
.rack-mod{
  flex:0 0 min(78vw, 380px);
  scroll-snap-align:start;
  background:#242426; border:1px solid #38383c;
  border-radius:0 var(--r-out) 0 0;
  padding:24px 24px 28px;
  display:flex; flex-direction:column; gap:14px;
  min-height:300px;
  transition:border-color .2s, transform .25s cubic-bezier(.3,1.6,.4,1);
}
.rack-mod:hover{ border-color:var(--paper); transform:translateY(-4px); }
.rack-mod__no{ color:var(--signal); }
/* IKONY MODUŁÓW (05) — rysunek techniczny: kreska ciągła (ico-l),
   linia pomocnicza (ico-t), krawędź ukryta (ico-d), plama (ico-f).
   Na hover dokładnie jeden element modułu przechodzi w czerwień sygnałową
   (ico-hi = kreska, ico-hif = plama) + jeden ruch na sprężynie. */
.rack-mod__ico{ width:56px; overflow:visible; }
.rack-mod__ico [stroke],
.rack-mod__ico .ico-l,
.rack-mod__ico .ico-t,
.rack-mod__ico .ico-d{ stroke-linecap:square; }
.ico-l{ fill:none; stroke:var(--paper); stroke-width:1.5; }
.ico-t{ fill:none; stroke:var(--tech); stroke-width:1; }
.ico-d{ fill:none; stroke:var(--tech); stroke-width:1; stroke-dasharray:3 3; }
.ico-f{ fill:var(--paper); stroke:none; }
.ico-hi,.ico-hif,.ico-rot,.ico-slide,.ico-grow{
  transition:stroke .25s, fill .25s, transform .5s cubic-bezier(.3,1.8,.4,1);
}
.ico-rot,.ico-grow{ transform-box:fill-box; }
.ico-rot{ transform-origin:center; }
.ico-grow{ transform-origin:left center; }

.rack-mod:hover .ico-hi{ stroke:var(--signal); }
.rack-mod:hover .ico-hif{ fill:var(--signal); }
.rack-mod:hover .ico-rot{ transform:rotate(45deg); }
.rack-mod:hover .ico-slide{ transform:translateX(14px); }
.rack-mod:hover .ico-grow{ transform:scaleX(1.55); }
.rack-mod__name{ font-size:1.35rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; line-height:1.1; }
.rack-mod__desc{ font-size:.92rem; opacity:.82; flex:1; }
.rack-mod__spec{ color:var(--tech-hi); border-top:1px solid #38383c; padding-top:12px; }

@media (min-width:768px){
  /* pinowanie realizowane w JS: sekcja dostaje wysokość, .rack-pin sticky */
  .rack-sec.is-pinned .rack-pin{ position:sticky; top:0; min-height:100vh; overflow:hidden; }
  .rack-sec.is-pinned .rack-track{ overflow:visible; will-change:transform; }
}

/* ═══ 07 WORK ════════════════════════════════════════════ */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 40px; }
.filter{
  padding:9px 18px; border:1px solid var(--ink); color:var(--ink);
  letter-spacing:.1em;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition:background-color .15s, color .15s;
}
.filter:hover{ background:rgba(20,20,20,.08); }
.filter.is-active{ background:var(--ink); color:var(--paper); }
/* 2 kolumny: duże kadry 16:9 — materiał ważniejszy niż liczba kafli */
.work-grid{ display:grid; gap:clamp(26px, 3vw, 44px); }
@media (min-width:768px){ .work-grid{ grid-template-columns:1fr 1fr; } }
.work.is-hidden{ display:none; }
.work__link{ text-decoration:none; display:block; color:inherit; }
.work__media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/9; background:var(--anthracite);
  border-radius:0 var(--r-out) 0 0;
  transition:transform .3s cubic-bezier(.3,1.6,.4,1);
}
.work__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.work__media .ph__tag{ position:absolute; inset:auto auto 50% 50%; transform:translate(-50%, 50%); }
.work__link:hover .work__media, .work__link:focus-visible .work__media{ transform:translateY(-4px); }
/* znacznik odtwarzania: płytka ze ścięciem 45°, trójkąt o bokach 45° */
.work__play{
  position:absolute; left:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 12px;
  background:var(--ink); color:var(--paper);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.work__play svg{ fill:var(--paper); transition:fill .15s; }
.work__link:hover .work__play svg, .work__link:focus-visible .work__play svg{ fill:var(--signal); }
.work__meta{ display:flex; flex-direction:column; gap:4px; padding-top:12px; }
.work__title{ font-weight:700; font-size:1.02rem; }
.work__tags{ color:var(--tech); }
/* opis: 2 linie na ekranie, pełny tekst w HTML (wyszukiwarki, czytniki ekranu) */
.work__desc{
  font-size:.9rem; color:#3a3a3c; max-width:62ch; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── odtwarzacz (dialog) ────────────────────────────────── */
.player{
  width:min(1200px, calc(100vw - 32px)); max-width:none; padding:0;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:0 var(--r-out) 0 0;
}
.player::backdrop{ background:rgba(20,20,20,.86); }
.player__frame{ aspect-ratio:16/9; background:#0e0e0e; }
.player__frame iframe{ display:block; width:100%; height:100%; border:0; }
.player__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border-top:1px solid #303034;
}
.player__title{ color:var(--tech-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player__close{
  padding:8px 14px; color:var(--paper); border:1px solid var(--tech);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition:border-color .15s, color .15s;
}
.player__close:hover{ border-color:var(--paper); color:var(--signal); }

/* ═══ 08 PROCESS ═════════════════════════════════════════ */
.steps{
  display:grid; gap:1px; background:var(--ink); border:1px solid var(--ink);
  counter-reset:step;
}
@media (min-width:768px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1280px){ .steps{ grid-template-columns:3fr 3fr 3fr 4fr; } }
.step{ background:var(--paper); padding:26px 24px 34px; position:relative; }
.step__no{
  font-size:2rem; font-weight:700; color:var(--tech); display:block; margin-bottom:26px;
}
.step__no::after{ content:" →"; color:var(--signal); font-size:1rem; vertical-align:middle; }
.step--final .step__no{ color:var(--signal); }
.step__name{ font-size:1.2rem; font-weight:800; text-transform:uppercase; margin-bottom:10px; }
.step p{ font-size:.93rem; color:#3a3a3c; }
.step--final{
  background:var(--anthracite); color:var(--paper);
  border-radius:0 var(--r-out) 0 0;
}
.step--final p{ color:var(--paper); opacity:.88; }
.step__badge{
  display:inline-block; margin-top:18px; padding:6px 12px;
  border:1px solid var(--signal); color:var(--signal);
}
.s08__security{ margin-top:34px; color:var(--tech); max-width:72ch; line-height:1.9; }

/* ═══ 09 KOLEKTYW ════════════════════════════════════════ */
.s09__grid{ display:grid; gap:clamp(40px,5vw,80px); align-items:center; }
@media (min-width:1024px){ .s09__grid{ grid-template-columns:6fr 5fr; } }
.netviz{ width:100%; max-width:520px; }
.netviz__links path{ stroke:var(--tech); stroke-width:1; }
/* impuls rdzeń→najbliższy węzeł (generowany w js/netviz.js) */
.nv-imp{ fill:none; stroke:var(--signal); stroke-width:2.5; stroke-linecap:round; opacity:0; }
/* węzły: spektrum FIG. 09-A — kolor akcentu na pierścień I wypełnienie kulki.
   Transform steruje per-klatka rAF (magnetyczne pole) — bez CSS transition,
   żeby nie walczyć z pętlą; transform-origin na środku kulki dla skalowania. */
.nv-sat circle{
  fill:var(--accent, var(--paper)); fill-opacity:.22;
  stroke:var(--accent, var(--paper)); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
}
.nv-sat text{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; fill:var(--tech-hi); }
.netviz__coreRing{
  fill:none; stroke:var(--signal); stroke-width:1.5; stroke-dasharray:10 6;
  transform-origin:210px 170px; animation:core-spin 26s linear infinite;
}
.netviz__coreDot{ fill:var(--signal); }
@keyframes core-spin{ to{ transform:rotate(360deg); } }
/* idle: pierścień-puls z rdzenia, dyskretny */
.netviz__pulseRing{
  fill:none; stroke:var(--tech); stroke-width:1;
  transform-box:fill-box; transform-origin:center;
  opacity:0; animation:nv-pulse 5.5s ease-out infinite;
}
@keyframes nv-pulse{
  0%{ transform:scale(.4); opacity:0; }
  8%{ opacity:.4; }
  55%,100%{ transform:scale(3.2); opacity:0; }
}
.netviz__coreLabel{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; fill:var(--paper); }
.netviz__cap{ margin-top:16px; color:var(--tech-hi); }

/* ═══ 10 KONTAKT ═════════════════════════════════════════ */
.s10__mail{
  display:inline-block;
  font-size:clamp(1.55rem, 4.6vw, 4.6rem);
  font-weight:800; letter-spacing:-.02em; text-decoration:none;
  border-bottom:3px solid var(--signal);
  margin-bottom:clamp(44px, 5vw, 80px);
  word-break:break-all;
}
.s10__mail:hover{ color:var(--signal); }
.brief-form{ max-width:880px; display:flex; flex-direction:column; gap:30px; }
.brief-form__row{ display:grid; gap:30px; }
@media (min-width:768px){ .brief-form__row{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
.field{ display:flex; flex-direction:column; gap:8px; border:0; }
.field__label{ color:var(--tech); }
.field input, .field select, .field textarea{
  font:inherit; color:var(--ink);
  background:transparent;
  border:1px solid var(--ink); border-radius:0 10px 0 0;
  padding:13px 14px;
}
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--signal); outline-offset:0;
}
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  position:relative; cursor:pointer;
  border:1px solid var(--ink); padding:9px 18px;
  font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition:background-color .15s, color .15s;
}
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip:has(input:checked){ background:var(--ink); color:var(--paper); }
.chip:has(input:focus-visible){ outline:2px solid var(--signal); outline-offset:2px; }
.brief-form__note{ color:var(--tech); }
.brief-form__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.brief-form__status{ border-left:3px solid var(--signal); padding-left:14px; font-weight:600; }
.brief-form__status a{ color:var(--signal); }
.brief-form button[disabled]{ opacity:.6; cursor:wait; }

/* ═══ FOOTER ═════════════════════════════════════════════ */
.site-foot{ background:var(--ink); color:var(--paper); padding-block:34px; }
.site-foot__grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.brand--foot .brand__mark, .brand--foot .brand__word{ color:var(--paper); }
.site-foot__meta{ color:var(--tech-hi); }

/* ═══ RUCH / DOSTĘPNOŚĆ ══════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}