/* =========================================================
   Arienai Robotics: wspólny arkusz stylów
   Po zmianie pliku podbij numer wersji (?v=) w <link> w HTML.
   ========================================================= */

/* ---------- Fonty (self-hosted, IBM Plex, licencja OFL) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokeny ---------- */
:root {
  /* Paleta bazowa */
  --c-ink: #0d0e10;
  --c-graphite: #16181c;
  --c-graphite-2: #1d2025;
  --c-graphite-3: #2c3036;
  --c-paper: #ffffff;
  --c-paper-2: #f4f5f6;
  --c-paper-3: #dcdfe3;
  --c-orange: #ff6a13;       /* akcent: sygnałowy pomarańcz */
  --c-orange-deep: #b04500;  /* akcent jako tekst na jasnym tle (AA) */
  --c-orange-soft: #ff8a47;  /* akcent jako tekst na ciemnym tle (AA) */

  --c-napis: #e2e5e9;        /* duży napis ARIENAI w hero strony głównej; ten sam kolor wtapia hero_film.py (NAPIS_KOLOR) */
  --c-studio: #dde1e4;       /* tło renderów studyjnych (mediana tła titan-hero / pulse-hero) */

  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;   /* tylko tekst na ekranie terminala w animacji (.sc-term); etykiety i opisy: --font-sans (właściciel 2026-10-15) */

  --radius: 6px;
  --radius-lg: 14px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 75rem;            /* 1200 px przy 16 px; na dużych ekranach rośnie razem z czcionką (html niżej) */
  --header-h: 4.25rem;       /* 68 px przy 16 px; w rem, żeby pasek rósł razem ze stroną (skalowanie ekranu) */
  --section-y: clamp(56px, 7vw, 100px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Motyw JASNY (domyślny; html[data-theme="light"]) ----------
   Cała strona biała; „ciemne” sekcje (.tone-dark) stają się jasnoszare, a hero ma tło w kolorze
   renderów studyjnych, więc robot „stoi” na stronie bez ramki. */
:root {
  --bg: var(--c-paper);
  --bg-alt: var(--c-paper-2);
  --surface: var(--c-paper);
  --text: var(--c-ink);
  --muted: #464c55;
  --border: var(--c-paper-3);
  --accent: var(--c-orange);
  --accent-ink: var(--c-ink);
  --accent-text: var(--c-orange-deep);
  --ok-text: #17713f;        /* „w standardzie” (zielony, AA na jasnym tle) */
  --header-bg: rgb(255 255 255 / .9);
  --hero-bg: var(--c-paper-2);   /* = TLO w alpha_render.py i wtop_render.py */
  --grid-line: rgb(13 14 16 / .05);
  --glow: rgb(255 106 19 / .10);
  --shadow-media: 0 24px 50px -30px rgb(20 24 30 / .45);
  --chip-bg: rgb(13 14 16 / .78);
  /* animacje SVG (widok hali z góry / z boku) */
  --sc-bg: #eef0f2; --sc-grid: #e0e3e7; --sc-rack: #cfd4da; --sc-rack-ln: #a9b1bb; --sc-aisle: #f7f8f9; --sc-edge: #e7b416;
  --sc-robot: #ffffff; --sc-robot-stroke: #2a2e34; --sc-robot-top: #e2e6ea; --sc-shadow: rgb(20 24 30 / .16);
  --sc-text: #4b525c; --sc-station: #ffffff; --sc-station-stroke: #9aa2ad; --sc-line: #d6dade; --sc-line-ln: #b4bbc4;
  --sc-fork: #f2b33d; --sc-fork-dark: #3a3f46; --sc-tines: #5b6270;
  color-scheme: light;
}
.tone-dark { --bg: var(--bg-alt); --surface: var(--c-paper); background: var(--bg); color: var(--text); }
.hero.tone-dark { --bg: var(--hero-bg); }

/* ---------- Motyw CIEMNY (html[data-theme="dark"]; "system" zamienia na jasny/ciemny theme.js) ---------- */
:root[data-theme="dark"] {
  --bg: var(--c-ink);
  --bg-alt: var(--c-graphite);
  --surface: var(--c-graphite-2);
  --text: #f2f3f5;
  --muted: #a8aeb7;
  --border: var(--c-graphite-3);
  --accent-text: var(--c-orange-soft);
  --ok-text: #5fd08f;
  --header-bg: rgb(13 14 16 / .86);
  --hero-bg: var(--c-ink);
  --grid-line: rgb(255 255 255 / .045);
  --glow: rgb(255 106 19 / .16);
  --shadow-media: 0 30px 60px -30px rgb(0 0 0 / .8);
  --sc-bg: #1b1e22; --sc-grid: #252a30; --sc-rack: #30363e; --sc-rack-ln: #555d68; --sc-aisle: #202429; --sc-edge: #9a7a16;
  --sc-robot: #2a2e34; --sc-robot-stroke: #eceef1; --sc-robot-top: #3a3f46; --sc-shadow: rgb(0 0 0 / .45);
  --sc-text: #a8aeb7; --sc-station: #262a30; --sc-station-stroke: #5d6570; --sc-line: #2c3138; --sc-line-ln: #4a525c;
  --sc-fork: #e0a32e; --sc-fork-dark: #15171a; --sc-tines: #8a919c;
  color-scheme: dark;
}
[data-theme="dark"] .tone-dark { --bg: var(--c-ink); --surface: var(--c-graphite-2); }
[data-theme="dark"] .hero.tone-dark { --border: var(--c-graphite-3); }

/* Płynne przejście kolorów w chwili przełączenia motywu (klasę dodaje main.js na 0,45 s) */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), fill .35s var(--ease), stroke .35s var(--ease) !important;
}

/* Logo: dwie wersje pliku, widoczna ta pasująca do motywu */
.logo-on-dark { display: none; }
[data-theme="dark"] .logo-on-dark { display: block; }
[data-theme="dark"] .logo-on-light { display: none; }

/* ---------- Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Duże ekrany: cała strona rośnie proporcjonalnie do szerokości okna (czcionka bazowa = 1/128 szerokości, czyli
   20 px przy 2560 px – 4K ze skalowaniem 150%), a z nią szerokość treści (--maxw w rem), odstępy w em/rem i obrazy.
   Dzięki temu Full HD (okno 1920 px) i 4K wyglądają tak samo, tylko w innej skali. Poniżej 2048 px czcionka zostaje
   16 px (czytelność), powyżej 3072 px już nie rośnie. Procenty zachowują ustawienie wielkości czcionki w przeglądarce. */
html { font-size: clamp(100%, .78125vw, 150%); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
/* Łamanie wierszy: akapity bez samotnego słowa na końcu (pretty), krótkie teksty łamane równo (balance) */
body { text-wrap: pretty; }
dt, dd, summary, figcaption, td, th, .stat-label, .footer-links li, .zone, .video-steps span, .steps p, .feature p, .badge, .breadcrumbs li { text-wrap: balance; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
a { color: var(--accent-text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Znacznik treści do uzupełnienia: widoczny celowo, żeby nic nie umknęło przed publikacją */
mark.todo {
  background: #fff1a8; color: #3a2c00; font: 600 .82em/1.5 var(--font-sans);
  padding: .05em .35em; border-radius: 3px; outline: 1px dashed #a07800; outline-offset: 1px;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--cta { padding-top: clamp(16px, 3vw, 40px); }
.section--alt + .section--cta { padding-top: var(--section-y); }
.section-head { max-width: 47.5rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head p { color: var(--muted); font-size: 1.125rem; }
.center { text-align: center; margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font: 600 .82rem/1.3 var(--font-sans);
  color: var(--accent-text); margin: 0 0 1.1em;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); }
.lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }

.grid-2 { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 24px; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 20px; grid-template-columns: 1fr; }
.cards-2 { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.form-layout aside h3 { margin-top: 36px; }
.stat-value, .stat-label { overflow-wrap: anywhere; }
@media (min-width: 40rem) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) {
  .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; }
  /* tekst pierwszy w HTML (na telefonie nad obrazem), na szerokim ekranie obraz po lewej */
  .grid-2--media-left > :last-child { order: -1; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem; padding: .75em 1.35em; border-radius: var(--radius);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #ff7d33; }
.btn--ghost { border-color: currentColor; color: var(--text); background: transparent; }
.btn--ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--sm { min-height: 2.5rem; padding: .5em 1em; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Nagłówek i nawigacja ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: 10.5rem; height: auto; }
@media (min-width: 60rem) { .brand img { width: 12.5rem; } }   /* większe logo: „ROBOTICS” czytelne */
@media (max-width: 23.49rem) { .brand img { width: 8.75rem; } }   /* wąski telefon (360 px): logo, przełącznik i „Menu” w jednym wierszu */
/* Logo 3 „Trasa” (próba, LOGO_RUCH w build.py): wyższe od starego napisu, więc wymiar liczony od wysokości. */
.brand picture { display: contents; }
.brand img.logo-trasa { width: auto; height: 3.1rem; }
@media (min-width: 60rem) { .brand img.logo-trasa { height: 3.8rem; } }
@media (max-width: 23.49rem) { .brand img.logo-trasa { height: 2.7rem; } }
.header-tools { display: flex; align-items: center; gap: 10px; }

/* Przełącznik motywu: pigułka ze słońcem i księżycem, gałka pod aktywną ikoną. Bez JS ukryty. */
.theme-switch { display: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; color: var(--text); }
.js .theme-switch { display: inline-flex; }
.ts-track {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 4rem; height: 2.125rem; padding: 0 .5rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border);
}
.ts-track svg { position: relative; z-index: 1; width: 1rem; height: 1rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; transition: stroke .25s, fill .25s; }
.ts-track .ts-moon { stroke: none; fill: var(--muted); }
.ts-knob { position: absolute; top: .1875rem; left: .1875rem; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgb(0 0 0 / .25); transition: transform .25s var(--ease); }
.theme-switch[aria-checked="false"] .ts-sun { stroke: var(--c-orange-deep); }
.theme-switch[aria-checked="true"] .ts-moon { fill: var(--c-orange-soft); }
.theme-switch[aria-checked="true"] .ts-knob { transform: translateX(1.875rem); background: var(--c-graphite-3); }
.theme-switch:hover .ts-track { border-color: var(--accent); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  font-weight: 600; font-size: .95rem;
}
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s var(--ease), opacity .2s;
}
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--border);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 8px var(--gutter) 24px;
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li { border-bottom: 1px solid var(--border); }
.nav-list a, .nav-sub-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 52px; padding: 0 4px; color: var(--text); text-decoration: none; font-weight: 600;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.nav-list a[aria-current="page"] { color: var(--accent-text); }
.nav-sub-toggle .chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.nav-sub-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(-3px); }
.nav-sub { list-style: none; margin: 0 0 8px; padding: 0 0 0 16px; display: none; }
.nav-sub-toggle[aria-expanded="true"] + .nav-sub { display: block; }
.nav-sub a { min-height: 44px; font-weight: 400; }
.nav-sub small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
.nav-sub a { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 6px; }
.nav-cta-item { border-bottom: 0 !important; padding-top: 16px; }
.nav-cta-item .btn { width: 100%; }
.nav-list .btn, .nav-list .btn:is(a) { font-weight: 600; }
.nav-list .btn { justify-content: center; min-height: 2.75rem; padding: .5em 1.1em; border-radius: var(--radius); }
.nav-list .btn--primary, .nav-list .btn--primary[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }
.nav-list .btn--primary:hover { background: #ff7d33; }

@media (min-width: 70rem) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: block; position: static; padding: 0; background: none; border: 0; max-height: none; overflow: visible; margin-left: auto; }
  .nav-list { display: flex; align-items: center; gap: 4px; }
  .nav-list > li { border: 0; position: relative; }
  .nav-list a, .nav-sub-toggle { min-height: 2.75rem; padding: 0 .875rem; width: auto; font-weight: 500; font-size: .98rem; gap: .5rem; border-radius: var(--radius); }
  .nav-list > li:not(.nav-cta-item) > a:hover, .nav-sub-toggle:hover { background: var(--bg-alt); }
  .nav-sub {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; padding: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px -18px rgb(0 0 0 / .35);
  }
  .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub { display: block; }
  .nav-sub a { padding: 10px 12px; border-radius: var(--radius); }
  .nav-sub a:hover { background: var(--bg-alt); }
  .nav-cta-item { padding: 0 0 0 10px; }
  .nav-cta-item .btn { width: auto; padding-inline: 18px; }
}

/* ---------- Okruszki ---------- */
.breadcrumbs { padding-top: 20px; font-size: .9rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 88px); isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; width: 60vw; height: 60vw; right: -20vw; top: -20vw;
  background: radial-gradient(circle, var(--glow), transparent 62%);
}
/* Układ hero: nagłówek, obraz, opis. Telefon: obraz zaraz pod tytułem (widać robota na pierwszym ekranie).
   Komputer: tekst po lewej (tytuł nad opisem), obraz po prawej na całą wysokość. */
.hero-grid { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-areas: "head" "media" "body"; }
.hero-head { grid-area: head; }
.hero-head h1 { margin-bottom: 0; }
.hero-grid > .hero-media { grid-area: media; }
.hero-body { grid-area: body; }
.hero-body .lead { margin-bottom: 0; }
.hero-body .btn-row { margin-top: 24px; }
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "head media" "body media"; column-gap: clamp(32px, 4vw, 64px); row-gap: 24px; align-items: center; }
  .hero-head { align-self: end; }
  .hero-body { align-self: start; }
}
.hero h1 { max-width: 17ch; }
.hero--short h1 { max-width: 24ch; }
.hero .breadcrumbs { padding-top: 0; margin-bottom: 24px; }
.hero-media { position: relative; }
.hero-media img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); }
/* Jasny motyw: rendery w hero to wersje „-wtop” (wtop_render.py), których tło przechodzi dokładnie w kolor
   --c-studio = tło hero. Bez ramki, cienia, kratki i poświaty: krawędzi zdjęcia nie widać, robot stoi na stronie. */
:root:not([data-theme="dark"]) .hero::before, :root:not([data-theme="dark"]) .hero::after { display: none; }
.hero .is-studio img { border: 0; border-radius: 0; }
.hero .hero-media:has(.is-studio) picture.is-studio { box-shadow: none; border-radius: 0; background: transparent; }
/* łagodne wygaszenie samej krawędzi: ukrywa różnicę ±1 poziomu jasności po kompresji WebP/JPG */
:root:not([data-theme="dark"]) .hero picture.is-studio, :root:not([data-theme="dark"]) .cta-media picture.is-studio {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
:root:not([data-theme="dark"]) .hero .hero-media:has(.is-studio)::before { display: none; }
/* Ciemny motyw: ten sam render w zaokrąglonej karcie z cieniem */
[data-theme="dark"] .hero .is-studio img { border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius-lg); }
[data-theme="dark"] .hero .hero-media:has(.is-studio) picture.is-studio { border-radius: var(--radius-lg); box-shadow: var(--shadow-media); background: var(--c-paper-2); }
[data-theme="dark"] .hero .hero-media:has(.is-studio)::before { background: radial-gradient(ellipse, rgb(255 106 19 / .22), transparent 70%); }
.hero-media .tag {
  position: absolute; left: 16px; bottom: 16px;
  font: 600 .75rem/1 var(--font-sans);
  background: rgb(13 14 16 / .78); color: #f2f3f5; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--c-graphite-3);
}
/* Render studyjny na jasnym tle (np. titan-hero): jasny kafel pasujący do tła renderu.
   Kolor tła = mediana tła renderu, więc podczas ładowania i na krawędziach nie widać szwu. */
.is-studio { --studio-bg: #dde0e3; background: radial-gradient(ellipse at 50% 45%, #e6e8ea, var(--studio-bg) 70%); }
.hero-media:has(.is-studio) img { border-color: rgb(255 255 255 / .14); }
.hero-media:has(.is-studio)::before {
  content: ""; position: absolute; inset: 8% 6% -6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgb(255 106 19 / .22), transparent 70%); filter: blur(30px);
}
.hero-media:has(.is-studio) { isolation: isolate; }
.hero-media:has(.is-studio) picture { border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
.card-media .is-studio img, .gallery .is-studio img { background: var(--studio-bg); }
picture.is-alfa { background: none; }   /* render bez tła: bez kafla w kolorze studia */
:is(.ramka-media, .napis-media, .mod-media, .suwak) picture { -webkit-mask-image: none; mask-image: none; box-shadow: none; border-radius: 0; }
.card-media .is-alfa img { background: var(--c-paper-2); }   /* sam robot bez tła: to samo tło co hero */

/* ---------- Każda podstrona ma inny pierwszy ekran (właściciel 2026-10-14: nie ten sam szablon wszędzie) ----------
   Pulse i Titan: jak strona robota UR – duża nazwa modelu, pod nią jedno zdanie z parametrami.
   Pod Twój proces: animacja wymiany nadstawek. O nas: japońska nazwa jako obraz. Pokaz: krótki nagłówek i od razu formularz. */
.hero--produkt h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); letter-spacing: -.035em; margin-bottom: .15em; }
@media (min-width: 60rem) { .hero--produkt .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }   /* szersza kolumna tekstu: oba przyciski w jednym rzędzie */
.hero-mod-box { position: relative; aspect-ratio: 16 / 10; }
.onas-hero { display: grid; gap: clamp(12px, 2.5vw, 32px); padding-block: clamp(8px, 2vw, 24px) clamp(8px, 3vw, 40px); }
.onas-znaki { margin: 0; font: 700 clamp(3.2rem, 1.2rem + 11vw, 11rem)/1 "Yu Gothic", "Hiragino Sans", "Meiryo", "Noto Sans JP", sans-serif; letter-spacing: .02em; color: var(--accent); white-space: nowrap; }
.onas-tekst h1 { max-width: 16ch; margin-bottom: .4em; }
.onas-tekst .lead { max-width: 46ch; margin-bottom: 0; }
@media (min-width: 60rem) { .onas-tekst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .onas-tekst h1 { margin: 0; } .onas-tekst .lead { padding-top: .5rem; } }
.hero--pokaz { padding-bottom: clamp(16px, 3vw, 32px); }
.hero--pokaz .lead { max-width: 60ch; margin-bottom: 0; }
/* zakończenie strony bez obrazu: zdanie po lewej, przycisk po prawej */
@media (min-width: 60rem) { .cta-band--krotki { grid-template-columns: minmax(0, 1fr) auto; } .cta-band--krotki .cta-copy { display: contents; } .cta-band--krotki .btn-row { margin: 0; } }
.cta-band--krotki h2 { margin: 0; max-width: 26ch; }

/* ---------- Hero strony głównej: zdjęcie floty ----------
   Standard z branży: tytuł, opis i przyciski razem na górze (zawsze widoczne na pierwszym ekranie), pod nimi duży
   obraz. Obraz jest liczony od szerokości treści, nie od wysokości okna – przy każdym skalowaniu Windows (100–175%)
   i każdej rozdzielczości ma te same proporcje względem tekstu; na niskim oknie jego dół po prostu schodzi pod ekran.
   Telefon: tytuł, flota, opis z przyciskami, trzy punkty. */
.hero-grid--fleet { grid-template-areas: "head" "media" "body"; }
.hero-grid--fleet .hero-cta { margin-top: 24px; }
.hero-fleet { margin: 0 -9%; container-type: inline-size; }  /* telefon: przezroczyste brzegi obrazu wychodzą poza ekran, flota jest większa */
.hero-fleet-box { min-width: 0; }
.hero-fleet picture { display: block; }
/* Film „flota zjeżdża się” nad zdjęciem floty (build.py: film_floty(), main.js: „Film floty”). Klasa film-ok z theme.js:
   widać film (najpierw pierwsza klatka jako plakat), zdjęcie końcowe jest przezroczyste pod nim, a podpisy pojawiają się
   po zakończeniu. Brzegi filmu lekko wygaszone: tło filmu po kompresji różni się od tła strony o ok. 1 poziom jasności. */
.film-box { position: relative; }
/* Duży napis ARIENAI nad flotą (nadstawki zachodzą na jego dół). Położenie i rozmiar tylko tutaj, w zmiennych na
   .hero-fleet (w cqw = 1/100 szerokości zdjęcia floty): zrzuty/napis_maska.js czyta je ze strony i robi z nich maski,
   które hero_film.py wtapia w film (osobno komputer i telefon), więc po zmianie: maska, hero_film.py, build.py.
   --napis-zapas: miejsce nad zdjęciem (film ma tyle samo pustej podłogi nad kadrem; na komputerze i telefonie musi być
   równe, bo plakat filmu jest jeden), --napis-gora: górny brzeg napisu względem góry zdjęcia, --napis-rozmiar: czcionka,
   --film-dol: pusta podłoga w filmie pod kadrem. Zapas jest większy niż wysunięcie napisu, a pod robotami jest --film-dol,
   bo brzegi filmu są wygaszone (maska niżej) i ani litery, ani cień robotów nie mogą w to wygaszenie wchodzić.
   W filmie napis odsłaniają wjeżdżające Pulse'y, więc przy filmie CSS go nie rysuje; bez filmu stoi za zdjęciem. */
.hero-fleet { --napis-zapas: 14cqw; --napis-gora: -12cqw; --napis-rozmiar: 21cqw; --film-dol: 0cqw; }
@media (min-width: 60rem) { .hero-fleet { --napis-gora: -14cqw; --napis-rozmiar: 35cqw; } }
.film-box { margin-top: var(--napis-zapas); }
.napis-floty { position: absolute; left: 50%; top: var(--napis-gora); z-index: 0; transform: translateX(-50%); margin: 0; pointer-events: none; user-select: none;
  font: 600 var(--napis-rozmiar)/.78 var(--font-sans); letter-spacing: -.065em; color: var(--c-napis); white-space: nowrap; }
/* ciemny motyw (film wyłączony, bo ma wtopione jasne tło): samo zdjęcie floty bez karty i ramki, napis w ciemnym odcieniu */
[data-theme="dark"] .hero-fleet { --c-napis: #1a1d22; }
[data-theme="dark"] .hero .hero-fleet .is-studio img { border: 0; border-radius: 0; }
[data-theme="dark"] .hero .hero-fleet picture.is-studio { box-shadow: none; border-radius: 0; background: none; }
.film-box > picture { position: relative; z-index: 1; }
.film-ok .film-box:has(> .film-floty) > .napis-floty { visibility: hidden; }
.film-floty { display: none; }
/* pas filmu szerszy od zdjęcia (hero_film.py): telefon 140 % (środek pasa), komputer 240 % (cały pas 3840 px);
   .hero ma overflow: hidden, więc pas kończy się na krawędziach ekranu */
.film-ok .film-floty { display: block; position: absolute; z-index: 2; top: calc(-1 * var(--napis-zapas)); left: -20%; width: 140%; max-width: none; height: calc(100% + var(--napis-zapas) + var(--film-dol)); object-fit: cover; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 1.5%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 1.5%, #000 97%, transparent);
  mask-composite: intersect; }
@media (min-width: 60rem) { .film-ok .film-floty { left: -70%; width: 240%; } }
.film-ok .film-box:has(> .film-floty) > picture { opacity: 0; }   /* tylko gdy film jest w HTML (build.py: FILM_FLOTY) */
.hero-fleet .fleet-labels { transition: opacity .6s ease; }
.film-ok:not(.film-gotowy) .hero-fleet:has(.film-floty) .fleet-labels { opacity: 0; }
.hero-fleet img { display: block; }
@media (min-width: 60rem) {
  .hero:has(.hero-grid--fleet) { padding-top: 1rem; }
  .hero-grid--fleet {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "head body" "media media";
    align-items: end; row-gap: .5rem;
  }
  /* opis z przyciskami po prawej zaczyna się na wysokości pierwszej linii tytułu (nie wystaje ponad tytuł):
     napis nad tytułem ma własny wiersz siatki, tytuł i opis stoją w jednym wierszu, wyrównane do góry */
  .hero-grid--fleet > .hero-head { display: contents; }
  .hero-grid--fleet > .hero-head > h1 { grid-area: head; align-self: start; margin-bottom: 0; }
  .hero-grid--fleet > .hero-body { align-self: start; padding-top: .55rem; }
  .hero-grid--fleet .hero-cta { margin-top: 1.5rem; }
  .hero-grid--fleet > .hero-fleet-box { display: grid; justify-items: center; }
  /* flota i podpisy trochę niższe, żeby trzy wyróżniki pod nią mieściły się na pierwszym ekranie typowego monitora */
  .hero-fleet { margin: 0; width: 86%; }
  .hero-grid--fleet .fleet-labels { height: 1.6em; margin-top: 6px; }
}
/* Hero strony głównej (2026-10-16, właściciel: napis i flota jak na podglądzie, teksty rozstawione jak na wzorach
   Controlboard i „One”, nie w kolejności nagłówek-opis-przycisk): na górze tytuł w jednym wierszu (rozmiar liczony od
   szerokości treści: tytuł ma 21,7 em), pod nim ARIENAI i flota, pod robotami jeden rząd: przycisk po lewej (daleko od
   „Zamów pokaz” w nagłówku strony), opis po prawej. Flota: szerokość zależy też od wysokości okna, tak żeby na pierwszym
   ekranie zmieścił się cały nagłówek i było widać początek następnej sekcji (zachęta do przewijania): nagłówek strony,
   tytuł, rząd z przyciskiem, odstępy i ok. 45 px następnej sekcji: 25rem + flota z zapasem = 0,62 × szerokość floty.
   Telefon: tytuł, flota, opis, przycisk. */
.hero--flota { padding-block: clamp(1rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem); }
.hero--flota + .section { padding-top: clamp(2rem, 3vw, 2.5rem); }   /* nagłówek następnej sekcji wystaje na pierwszy ekran */
.hero-flota { display: grid; gap: 1.25rem; }
.hero-flota h1 { margin: 0; max-width: 16ch; }
.hero-flota .hero-dol .lead { margin: 0; }
.hero-flota .hero-cta { margin-top: 1.25rem; }
@media (min-width: 60rem) {
  .hero-flota { gap: 0; }
  .hero-flota h1 { max-width: none; white-space: nowrap; letter-spacing: -.025em; line-height: 1.1;
    font-size: min(3.25rem, min(var(--maxw), 100vw - 2 * var(--gutter)) / 22.5); }
  .hero-flota .hero-fleet { justify-self: center; margin: 1rem 0 0; width: clamp(50%, (100svh - 25rem) * 1.6, 82%); }
  .hero-flota .hero-dol { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.25rem; }
  .hero-flota .hero-dol .lead { order: 2; max-width: 26rem; font-size: 1.05rem; line-height: 1.55; }
  .hero-flota .hero-cta { order: 1; margin: 0; }
}
/* Próba 2026-10-16 (właściciel: „dla testu”): ciepła poświata jak w pasie „Zobacz robota w swojej hali” (--glow), dwie
   plamy wokół floty, powoli dryfują. Film ma nieprzezroczyste tło, więc poświata leży NAD nim w trybie multiply: na tle
   daje ten sam odcień co zwykła poświata w tamtym pasie, na robotach działa jak lekkie ciepłe światło. Bez ruchu przy
   ograniczaniu ruchu; w ciemnym motywie niewidoczna (multiply na ciemnym tle). */
.hero--flota .hero-fleet { position: relative; }
.hero--flota .hero-fleet::after {
  /* elipsy mieszczą się całe w prostokącie (środek ± promień < 100 %), inaczej na jego brzegu widać prostą krawędź */
  content: ""; position: absolute; z-index: 3; inset: -10% -35% -8%; pointer-events: none; mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 24% 30% at 30% 64%, var(--glow-flota), transparent),
    radial-gradient(ellipse 22% 34% at 72% 40%, var(--glow-flota-2), transparent);
}
:root { --glow-flota: rgb(255 106 19 / .16); --glow-flota-2: rgb(255 106 19 / .10); }
/* ciemny motyw: ta sama poświata w trybie screen (rozjaśnia, jak światło na ciemnym tle) */
[data-theme="dark"] .hero--flota .hero-fleet::after { mix-blend-mode: screen; --glow-flota: rgb(255 106 19 / .14); --glow-flota-2: rgb(255 106 19 / .09); }
@media (prefers-reduced-motion: no-preference) {
  .hero--flota .hero-fleet::after { animation: poswiata-floty 14s var(--ease) infinite alternate; }
  @keyframes poswiata-floty {
    from { transform: translate3d(-3%, 2%, 0) scale(1); opacity: .75; }
    to   { transform: translate3d(3%, -2%, 0) scale(1.06); opacity: 1; }
  }
}
/* ---------- Hero A2: flota „dobudowuje się” (raz, po wejściu na stronę) ----------
   Krawędź odsłaniania przesuwa się od dołu do góry (2,6 s). Nad nią: same roboty (bud-base), pod nią: flota z nadstawkami
   (bud-top) – obrazy się zastępują (clip-path), więc cień jest zawsze jeden. Na krawędzi wąski pas sylwetki z poświatą
   (bud-scan, flota-moduly-skan z led_glow.py). Potem paski LED raz
   przechodzą przez kolory: zielony → pomarańczowy → czerwony → zielony (warstwy jak na kartach modeli).
   Wszystkie trzy warstwy krawędzi mają ten sam czas i tę samą krzywą, więc zawsze się stykają.
   Przy prefers-reduced-motion od razu widać gotową flotę. */
.bud { position: relative; }
.bud-base, .bud-scan, .bud-led { position: absolute; inset: 0; pointer-events: none; }
.bud-top { position: relative; }
.bud-scan, .bud-led { width: 100%; height: 100%; }
.bud-base, .bud-scan, .bud-led { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .bud-base, .bud-scan, .bud-led { display: block; }
  .bud-base { animation: bud-nad 2.6s cubic-bezier(.45, .05, .4, 1) .8s both; }
  .bud-top { animation: bud-pod 2.6s cubic-bezier(.45, .05, .4, 1) .8s both; }
  .bud-scan { animation: bud-pas 2.6s cubic-bezier(.45, .05, .4, 1) .8s both; }
  .bud-led { opacity: 0; }
  .bud-led--off { animation: bud-led-off 7s ease 3.3s both; }
  .bud-led--g { animation: bud-led-g 7s ease 3.3s both; }
  .bud-led--o { animation: bud-led-o 7s ease 3.3s both; }
  .bud-led--r { animation: bud-led-r 7s ease 3.3s both; }
}
/* krawędź e: 100% (dół) → 0% (góra) */
@keyframes bud-nad { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }            /* widoczne nad e */
@keyframes bud-pod { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }            /* widoczne pod e */
@keyframes bud-pas { from { clip-path: inset(98.6% 0 -.4% 0); } to { clip-path: inset(-1.4% 0 100.4% 0); } }  /* pas e−1,4% … e+0,4% */
/* paski LED po zbudowaniu (7 s): zgaszony pasek przykrywa zielony z renderu, kolory po kolei, na końcu znowu zielony z renderu */
@keyframes bud-led-off { 0% { opacity: 0; } 4%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bud-led-g { 0% { opacity: 0; } 6%, 22% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes bud-led-o { 0%, 31% { opacity: 0; } 37%, 53% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes bud-led-r { 0%, 62% { opacity: 0; } 68%, 82% { opacity: 1; } 89%, 100% { opacity: 0; } }

/* ---------- Hero B/C: tekst po lewej, dwa roboty po prawej (duo-moduly; C: najpierw duo-gole) ---------- */
.hero-duo { margin: 0; container-type: inline-size; }
.duo-stage { position: relative; }
.hero-duo--sklada .duo-top { position: absolute; inset: 0; }
.hero-grid--duo .hero-body .btn-row { margin-top: 28px; }
.hero-grid--duo .hero-meta { margin-top: 28px; }
@media (min-width: 60rem) {
  .hero-grid--duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-grid--duo h1 { max-width: 20ch; }
}
/* C: nadstawki „dobudowują się” od dołu do góry, raz po wejściu (bez animacji przy prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-duo--sklada .duo-top {
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 55%); mask-image: linear-gradient(to top, #000 45%, transparent 55%);
    -webkit-mask-size: 100% 220%; mask-size: 100% 220%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: dobuduj 1.8s cubic-bezier(.3, .1, .2, 1) .9s both;
  }
}
@keyframes dobuduj {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
}
.dl-1 { left: 42.6%; }
.dl-2 { left: 75.6%; }

/* ---------- Hero D: tekst wyśrodkowany, pod nim same roboty (duo-gole-pas) ---------- */
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-center h1 { max-width: 30ch; margin: 0 auto .35em; }
.hero-center .lead { max-width: 60ch; margin-inline: auto; }
.hero-center .btn-row { justify-content: center; margin-top: 4px; }
.hero-plakat { margin: clamp(16px, 3vw, 32px) calc(-1 * var(--gutter)) 0; width: calc(100% + 2 * var(--gutter)); max-width: 68.75rem; container-type: inline-size; }
/* komputer: roboty tak duże, żeby razem z tekstem zmieściły się na pierwszym ekranie (3.065 = proporcje obrazu 1600×522) */
@media (min-width: 60rem) { .hero-plakat { margin-inline: 0; width: clamp(640px, (100svh - 580px) * 3.065, 1100px); } }
.hero-center .hero-meta { justify-content: center; margin-top: 8px; gap: 10px 32px; }
.pl-1 { left: 36.1%; }
.pl-2 { left: 73.7%; }

/* ---------- Hero E: układ B na ciemnym tle, za robotami miękkie światło (cień robotów zostaje widoczny) ---------- */
.hero.hero--ciemny {
  --bg: var(--c-ink); --text: #f2f3f5; --muted: #a8aeb7; --border: var(--c-graphite-3); --accent-text: var(--c-orange-soft); --surface: var(--c-graphite-2);
  color: var(--text);
  background: radial-gradient(ellipse 48% 62% at 74% 58%, #454b53 0%, #24282d 45%, var(--c-ink) 78%);
}
@media (max-width: 60rem) { .hero.hero--ciemny { background: radial-gradient(ellipse 90% 34% at 50% 44%, #454b53 0%, #24282d 50%, var(--c-ink) 85%); } }
.hero--ciemny .hero-media picture.is-studio { -webkit-mask-image: none; mask-image: none; }

/* ---------- Hero A3: dobudowanie zależne od przewijania (CSS scroll-driven animations) ----------
   Sekcja jest wyższa od ekranu, jej zawartość stoi w miejscu (sticky), a postęp animacji = postęp przewijania sekcji
   (view-timeline). Koniec animacji = koniec przypięcia: strona od razu przewija się dalej. Bez świecenia LED.
   Tylko komputer i przeglądarki ze wsparciem; gdzie indziej działa jak A2 (animacja czasowa). */
@supports (animation-timeline: view()) {
  @media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
    .hero.hero--scroll { height: calc(165svh - var(--header-h)); overflow: clip; padding-block: 0; view-timeline: --budowa block; }
    .hero--scroll > .scroll-pin { position: sticky; top: var(--header-h); padding-block: clamp(24px, 2.5vw, 36px) 24px; }
    .bud--scroll :is(.bud-base, .bud-top, .bud-scan, .bud-led) {
      animation-duration: 1ms; animation-timing-function: linear; animation-delay: 0s; animation-fill-mode: both;
      animation-timeline: --budowa; animation-range: contain 0% contain 100%;
    }
    .bud--scroll .bud-base { animation-name: bud-nad; }
    .bud--scroll .bud-top { animation-name: bud-pod; }
    .bud--scroll .bud-scan { animation-name: bud-pas; }
  }
}

/* ---------- Kafle wyboru modelu (koncepcja) ---------- */
.wybor-grid { display: grid; gap: 16px; margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 48rem) { .wybor-grid { grid-template-columns: 1fr 1fr; } }
.wybor-card {
  display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none; color: var(--text);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.wybor-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--text) 35%, var(--border)); box-shadow: 0 22px 44px -26px rgb(20 24 30 / .35); transform: translateY(-2px); }
.wybor-card:active { transform: translateY(0); }
.wybor-media { position: relative; overflow: hidden; aspect-ratio: 2 / 1; background: var(--c-paper-2); }
.wybor-zoom {
  position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 16 / 10;
  transform: translateY(-50%) scale(var(--z, 1.08)); transition: scale .6s var(--ease);
}
.wybor-zoom picture, .wybor-zoom img { display: block; width: 100%; }
.wybor-card--pulse .wybor-zoom { --z: 1.42; }
.wybor-card:hover .wybor-zoom { scale: 1.03; }
.wybor-body { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; padding: 18px 22px 22px; }
.wybor-name { margin: 0; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); }
.wybor-kg { margin: 0; font: 600 clamp(1.35rem, 1.1rem + .9vw, 1.8rem)/1.1 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wybor-use { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.wybor-link { grid-column: 1 / -1; margin-top: 12px; font-weight: 600; color: var(--accent-text); }
.wybor-link span { display: inline-block; transition: transform .2s var(--ease); }
.wybor-card:hover .wybor-link span { transform: translateX(4px); }
.wybor-specs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.wybor-specs dt { font: 600 .72rem/1.3 var(--font-sans); color: var(--muted); }
.wybor-specs dd { margin: 3px 0 0; font-weight: 600; }

/* ---------- Koncepcja strony głównej (/koncepcja/) ---------- */
.site-header--prosty .nav-kg { margin-left: .3em; font-size: .8em; font-weight: 500; color: var(--muted); }
.k-sec { padding-block: clamp(64px, 9vw, 120px); }
.k-sec--alt { background: var(--bg-alt); }
.k-h2 { max-width: 20ch; margin: 0 0 .35em; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.03em; }
.k-lead { max-width: 54ch; margin: 0 0 clamp(28px, 4vw, 44px); font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); color: var(--muted); }
.k-h2 + .wybor-grid { margin-top: clamp(28px, 4vw, 44px); }
.k-liczby { padding-block: clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--border); }
.k-liczby-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
@media (min-width: 60rem) { .k-liczby-list { grid-template-columns: repeat(4, 1fr); } }
.k-num { display: block; font: 600 clamp(1.8rem, 1.2rem + 2.2vw, 3rem)/1 var(--font-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.k-num small { font-size: .42em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.k-lab { display: block; max-width: 24ch; margin-top: 10px; font-size: .95rem; color: var(--muted); }
/* moduły: film duży po lewej, dwa zdjęcia jedno pod drugim po prawej */
.k-bento { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.k-tile--film { grid-column: 1 / -1; }
.k-tile:not(.k-tile--film) img { aspect-ratio: 4 / 3; object-fit: cover; }   /* ciaśniej: robot większy w kaflu */
@media (min-width: 60rem) {
  .k-bento { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
  .k-tile--film { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  .k-tile--film .yt { flex: 1; aspect-ratio: auto; min-height: 320px; }
}
.k-tile { margin: 0; }
.k-tile picture { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.k-tile img { display: block; width: 100%; }
.k-tile figcaption { margin-top: 10px; color: var(--muted); }
/* ochrona przed wózkami: film szerszy niż kontener */
.k-bleed { max-width: 90rem; margin: 0 auto 24px; padding-inline: var(--gutter); }
.k-bezp .k-lead { margin-bottom: clamp(24px, 3vw, 36px); }
/* pokaz: cztery etapy na jednej linii */
.k-kroki { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 24px; counter-reset: krok; }
@media (min-width: 48rem) { .k-kroki { grid-template-columns: repeat(4, 1fr); } }
.k-kroki li { position: relative; padding-top: 48px; counter-increment: krok; }
.k-kroki li::before {
  content: counter(krok); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--c-ink); font-weight: 600; font-size: .9rem;
}
@media (min-width: 48rem) {
  .k-kroki li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 44px; right: -12px; height: 2px; background: var(--border); }
}
.k-kroki h3 { margin: 0 0 .3em; font-size: 1.2rem; }
.k-kroki p { margin: 0; color: var(--muted); max-width: 26ch; }

/* ---------- Hero H: „ramka” – jeden duży panel w kolorze studia, roboty na środku, tekst na dole ----------
   Komputer: roboty u góry panelu, pod nimi tytuł z opisem (lewo) i przyciski (prawo). Telefon: tytuł, roboty, przyciski. */
.hero.hero--ramka { --bg: var(--c-paper); background: var(--bg); padding: 12px 12px 0; }
.ramka {
  position: relative; max-width: 1480px; margin: 0 auto; border-radius: 24px; overflow: hidden;
  display: grid; grid-template-areas: "copy" "media" "cta"; gap: 8px;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 52px) clamp(24px, 3vw, 40px);
  background: radial-gradient(110% 80% at 50% 92%, #e4e7ea 0%, #eef0f2 42%, #f6f7f8 100%);
}
.ramka-copy { grid-area: copy; }
.ramka-copy h1 { margin: 0 0 .3em; max-width: 27ch; font-size: clamp(2rem, 1.2rem + 2.1vw, 3rem); }
.ramka-copy .lead { margin: 0; max-width: 46ch; }
.ramka .btn-row { grid-area: cta; margin-top: 8px; }
.ramka-media { grid-area: media; margin: 0 auto; width: 100%; container-type: inline-size; }
.ramka-media img { display: block; width: 100%; }
@media (min-width: 60rem) {
  .ramka {
    grid-template-areas: "media media" "copy cta"; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: end; gap: 0 40px;
    min-height: min(calc(100svh - var(--header-h) - 12px), 900px);
  }
  .ramka-media { align-self: center; width: min(100%, 1100px, (100svh - 470px) * 3.065); padding-block: 0 16px; }
  .ramka .btn-row { margin: 0; flex-wrap: nowrap; }
}

/* ---------- Hero I: „duży napis” – ogromne ARIENAI za robotami ---------- */
.hero.hero--napis { --bg: var(--c-paper); background: var(--bg); padding-bottom: 8px; }
.napis-top { display: grid; gap: 16px 56px; align-items: end; }
.napis-top h1 { margin: 0; max-width: 18ch; font-size: clamp(2rem, 1.2rem + 2.3vw, 3.2rem); }
.napis-side .lead { margin: 0; max-width: 42ch; }
.napis-side .btn-row { margin-top: 20px; }
@media (min-width: 60rem) { .napis-top { grid-template-columns: 1.15fr .85fr; } }
.napis-stage { position: relative; display: grid; justify-items: center; margin-top: clamp(12px, 2.5vw, 28px); }
.napis-word {
  grid-area: 1 / 1; align-self: start; margin: 0; white-space: nowrap; user-select: none;
  font: 600 clamp(4.5rem, 21vw, 19.5rem)/.78 var(--font-sans); letter-spacing: -.065em; color: #eceef1;
}
.napis-media { grid-area: 1 / 1; position: relative; width: min(100%, 1100px); margin: 0; padding-top: clamp(28px, 6vw, 84px); container-type: inline-size; }
.napis-media img { display: block; width: 100%; }
[data-theme="dark"] .napis-word { color: #1a1d21; }

/* ---------- Sekcje „nadstawki” (pod hero z samymi robotami; /podglad-moduly/) ---------- */
.mod { padding-block: clamp(64px, 9vw, 120px); }
.mod-media { margin: 0; container-type: inline-size; }
.bud--duo .bud-top picture, .bud--duo img { display: block; width: 100%; }
/* czekanie na wejście sekcji na ekran (main.js zdejmuje bud--czeka) */
.js .bud--czeka :is(.bud-base, .bud-top, .bud-scan) { animation-play-state: paused; }
.mod-media .fleet-labels { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mod-media .fleet-labels { animation: pokaz-podpis .6s ease 3.3s both; }
  .js .mod-media:has(.bud--czeka) .fleet-labels { animation-play-state: paused; }
}
@keyframes pokaz-podpis { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* M1: przewijanie – sekcja stoi, nadstawki dobudowują się w trakcie przewijania */
.mod-split { display: grid; gap: 24px; align-items: center; }
@media (min-width: 60rem) {
  .mod-split { grid-template-columns: .8fr 1.2fr; gap: 56px; }
  .mod-split > .mod-media { width: min(100%, (100svh - 200px) * 1.448); justify-self: center; }   /* 1.448 = proporcje renderu duo */
}
.mod-copy .k-lead { margin-bottom: 20px; }
@supports (animation-timeline: view()) {
  @media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
    .mod.mod--scroll { height: calc(165svh - var(--header-h)); padding-block: 0; overflow: clip; view-timeline: --budowa block; }
    .mod--scroll .mod-pin { position: sticky; top: var(--header-h); min-height: calc(100svh - var(--header-h)); display: grid; align-items: center; }
    .mod--scroll .fleet-labels { animation: pokaz-podpis 1ms linear both; animation-timeline: --budowa; animation-range: contain 82% contain 100%; animation-play-state: running; }
  }
}

/* M2: suwak przed / po */
.suwak-labels { display: flex; justify-content: space-between; margin: 0 0 10px; font-weight: 600; }
.suwak-labels span:last-child { color: var(--accent-text); }
.suwak { --x: 50%; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-paper-2); touch-action: pan-y; }
.suwak picture, .suwak img { display: block; width: 100%; }
.suwak-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.suwak-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; }
.suwak-knob {
  position: absolute; top: 55%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--surface); border: 2px solid var(--text); box-shadow: 0 8px 20px -8px rgb(20 24 30 / .4);
}
.suwak-knob::before, .suwak-knob::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-left: 2px solid var(--text); border-bottom: 2px solid var(--text);
}
.suwak-knob::before { left: 11px; transform: translateY(-50%) rotate(45deg); }
.suwak-knob::after { right: 11px; transform: translateY(-50%) rotate(-135deg); }
.suwak-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.suwak:has(.suwak-input:focus-visible) .suwak-knob { outline: 3px solid var(--accent); outline-offset: 3px; }


/* M4: konfiguracje obok siebie (telefon: przewijane w bok) */
.konf-list {
  list-style: none; margin: 0; padding: 0 0 8px; display: grid; gap: 16px;
  grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory;
}
@media (min-width: 60rem) { .konf-list { grid-auto-flow: row; grid-template-columns: 1.5fr 1fr 1fr; overflow: visible; } }
/* wersja testowa: dwie konfiguracje, równe kolumny; telefon: jedna pod drugą (bez przewijania w bok) */
.mod--konf2 .k-h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.mod--konf2 .konf-list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; }
@media (min-width: 48rem) { .mod--konf2 .konf-list { grid-template-columns: 1fr 1fr; gap: 20px; } }
.mod--konf2 .konf img { height: clamp(240px, 34vw, 460px); }
.konf { display: block; color: var(--text); text-decoration: none; scroll-snap-align: start; }
.konf picture { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-paper-2); }
.konf img { display: block; width: 100%; height: clamp(260px, 30vw, 420px); object-fit: cover; transition: transform .6s var(--ease); }
.konf:hover img { transform: scale(1.03); }
.konf > span { display: block; margin-top: 12px; font-weight: 600; }
.konf > span::after { content: "→"; margin-left: .4em; color: var(--accent-text); display: inline-block; transition: transform .2s var(--ease); }
.konf:hover > span::after { transform: translateX(3px); }

/* ---------- Oprogramowanie floty: Menedżer floty (/oprogramowanie/) ----------
   Zrzuty ekranu w ramce „okna” (fm-shot) albo wycinki na tle w kolorze panelu programu (fm-tile).
   Kolory stanu = kolory z programu (zielony, pomarańczowy, czerwony, szary). Bez animacji. */
:root { --fm-ok: #1e9e50; --fm-warn: #e07b00; --fm-err: #db382c; --fm-off: #9aa0a6; --fm-panel: #f2f2f2; }
/* hero: tło jasnoszare kończy się w połowie dolnej części zrzutu, dalej kolor strony (zrzut „wychodzi” z hero) */
.fm-hero { --pod: var(--c-paper); padding-bottom: 0; background: linear-gradient(to bottom, var(--hero-bg) 0 calc(100% - clamp(60px, 9vw, 140px)), var(--pod) 0); }
[data-theme="dark"] .fm-hero { --pod: var(--c-ink); }
/* tytuł i opis pod nim po lewej, przyciski po prawej na wysokości ostatniego wiersza opisu */
.fm-hero-grid { display: grid; gap: 24px 56px; grid-template-areas: "head" "body"; }
.fm-hero-grid h1 { margin: 0 0 .35em; max-width: 16ch; }
.fm-hero-grid .lead { margin: 0; max-width: 54ch; }
.fm-hero-grid .btn-row { margin-top: 0; }
@media (min-width: 60rem) {
  .fm-hero-grid { grid-template-columns: 1fr auto; grid-template-areas: "head body"; align-items: end; }
  .fm-hero-grid .btn-row { justify-content: flex-end; flex-wrap: nowrap; }
  .fm-hero-grid > .hero-head, .fm-hero-grid > .hero-body { align-self: end; }
}
.fm-shot.fm-shot--hero { margin-top: clamp(32px, 4vw, 56px); }

.fm-shot { margin: 0; position: relative; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border);
  box-shadow: 0 40px 80px -40px rgb(24 32 48 / .35), 0 2px 8px rgb(24 32 48 / .06); }
.fm-shot picture, .fm-shot img { display: block; width: 100%; height: auto; border-radius: inherit; }
.fm-lb { display: block; position: relative; border-radius: inherit; cursor: zoom-in; }
.fm-lb .lb-zoom { position: absolute; right: 12px; bottom: 12px; }

.fm-sec { padding-block: clamp(64px, 9vw, 120px); }
.fm-sec--alt { background: var(--bg-alt); }
.fm-split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 60rem) {
  .fm-split { grid-template-columns: 1fr minmax(0, 460px); gap: 72px; }
  .fm-split--odwr { grid-template-columns: minmax(0, 460px) 1fr; }
  .fm-split--odwr > .fm-copy { order: 2; }
}
@media (max-width: 59.99rem) { .fm-split > .fm-copy { order: -1; } }
.fm-copy .k-lead { margin-bottom: 20px; }
.fm-note { color: var(--muted); margin: 20px 0 0; max-width: 52ch; }

.fm-tile { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.fm-tile picture, .fm-tile img { display: block; width: 100%; height: auto; }
.fm-tile--panel { background: var(--fm-panel); box-shadow: 0 30px 60px -36px rgb(24 32 48 / .35); }
.fm-tile--biala { background: #fff; border: 1px solid var(--border); }

/* stany robotów: kropki = prawdziwy stan z programu */
.fm-stany { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-weight: 500; }
.fm-stany li { display: flex; align-items: center; gap: 12px; }
.fm-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.fm-dot--ok { background: var(--fm-ok); color: var(--fm-ok); }
.fm-dot--warn { background: var(--fm-warn); color: var(--fm-warn); }
.fm-dot--err { background: var(--fm-err); color: var(--fm-err); }
.fm-dot--off { background: var(--fm-off); color: var(--fm-off); }

/* edytor tras: numerowane znaczniki na zrzucie (położenie w % szerokości i wysokości zrzutu) */
.fm-shot.fm-shot--pins { margin-top: clamp(28px, 4vw, 44px); }
.fm-pin {
  position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
  display: grid; place-items: center; border-radius: 50%; background: var(--c-orange); color: var(--c-ink);
  font: 600 .95rem/1 var(--font-sans); border: 3px solid #fff; box-shadow: 0 6px 16px -4px rgb(24 32 48 / .45);
}
.fm-pin--1 { left: 14.2%; top: 28.6%; }
.fm-pin--2 { left: 48.6%; top: 49.2%; }
.fm-pin--3 { left: 68.3%; top: 74.4%; }
@media (max-width: 40rem) { .fm-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: .72rem; border-width: 2px; } }
.fm-legenda { list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 48rem) { .fm-legenda { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .fm-legenda { grid-template-columns: repeat(3, 1fr); } }
.fm-legenda li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
.fm-num {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; align-self: start;
  background: var(--c-orange); color: var(--c-ink); font: 600 .9rem/1 var(--font-sans);
}
.fm-legenda h3 { margin: 4px 0 0; font-size: 1.08rem; }
.fm-legenda p { margin: 0; color: var(--muted); }

/* plan: typy kroków */
/* typy kroków planu: karty jak klocki planu, połączone strzałkami; ostatnia (własne kroki) z przerywaną ramką */
.fm-kroki { list-style: none; margin: 0 0 clamp(24px, 3vw, 36px); padding: 0; display: grid; gap: 12px; }
.fm-kroki li { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-size: .95rem; line-height: 1.4; }
.fm-kroki strong { color: var(--text); font-weight: 600; font-size: 1rem; }
.fm-kroki .fm-krok--wlasne { background: transparent; border: 1px dashed var(--accent); }
@media (min-width: 40rem) { .fm-kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .fm-kroki { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; }
  .fm-kroki li:nth-child(-n+3)::after { content: "→"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); color: var(--accent-text); font-weight: 600; }
}

/* alerty: bento – błąd (wysoki), pasek floty, bateria, lista alertów (cała szerokość) */
.fm-bento { display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.fm-bento > *, .fm-cell > *, .fm-split > * { min-width: 0; }   /* szerokie obrazy przewijane w bok nie rozpychają strony */
.fm-cell { margin: 0; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 16px; }
.fm-cell figcaption, .fm-cell p { margin: 0; color: var(--muted); }
.fm-cell strong { color: var(--text); font-weight: 600; }
.fm-cell .fm-tile--panel { box-shadow: none; }
.fm-cell--pasek .fm-tile { padding: 10px 12px; }
.fm-cell--bateria { justify-content: flex-end; background: var(--c-ink); border-color: var(--c-ink); }
.fm-cell--bateria p { color: #a8aeb7; }
.fm-cell--bateria strong { color: #f2f3f5; }
.fm-big { font: 600 clamp(3.5rem, 2.4rem + 4vw, 6rem)/1 var(--font-sans) !important; letter-spacing: -.04em; color: var(--fm-ok) !important; font-variant-numeric: tabular-nums; }
@media (min-width: 60rem) {
  .fm-bento { grid-template-columns: 1.05fr 1fr; grid-template-areas: "blad pasek" "blad bateria" "alerty alerty"; }
  .fm-cell--blad { grid-area: blad; justify-content: space-between; }
  .fm-cell--pasek { grid-area: pasek; justify-content: space-between; }
  .fm-cell--bateria { grid-area: bateria; }
  .fm-cell--alerty { grid-area: alerty; }
}
/* wąski ekran: lista alertów przewijana w bok zamiast zmniejszania tekstu do nieczytelności */
@media (max-width: 47.99rem) {
  .fm-cell--alerty .fm-tile { overflow-x: auto; overscroll-behavior-x: contain; }
  .fm-cell--alerty .fm-tile img { width: 760px; max-width: none; }
}

/* statystyki */
.fm-kpi { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 47.99rem) {
  .fm-kpi { overflow-x: auto; overscroll-behavior-x: contain; }
  .fm-kpi img { width: 760px; max-width: none; }
}
.fm-split--stat { margin-top: clamp(40px, 6vw, 72px); }
.fm-h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: 0 0 .5em; }
.fm-split--stat .fm-copy > p:not(.fm-note) { color: var(--muted); font-size: 1.1rem; max-width: 52ch; }

/* co jeszcze: trzy kolumny bez kart, kreska nad każdą pozycją */
.fm-wiecej { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 28px 40px; }
@media (min-width: 48rem) { .fm-wiecej { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .fm-wiecej { grid-template-columns: repeat(3, 1fr); } }
.fm-item { padding-top: 18px; border-top: 2px solid var(--text); }
.fm-item h3 { margin: 0 0 .35em; font-size: 1.15rem; }
.fm-item p { margin: 0; color: var(--muted); }
/* animowane ekrany (fm_svg.py): tło + SVG z ruchomymi elementami dokładnie na nim (ten sam układ współrzędnych) */
.fm-scene { position: relative; border-radius: inherit; overflow: hidden; }
.fm-scene-in { position: relative; }
.fm-scene picture, .fm-scene img { display: block; width: 100%; height: auto; }
.fm-anim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* telefon: w hero tylko mapa (ta sama animacja, powiększony fragment ekranu: x 32–952, y 150–995) */
@media (max-width: 47.99rem) {
  .fm-scene--flota { aspect-ratio: 920 / 845; }
  .fm-scene--flota > .fm-scene-in { width: calc(100% * 1440 / 920); margin: calc(-100% * 150 / 920) 0 0 calc(-100% * 32 / 920); }
  .fm-scene--flota .lb-zoom { display: none; }
}
/* plan: nagłówek po lewej, typy kroków po prawej, pod spodem cały ekran */
.fm-head2 { display: grid; gap: 8px 72px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.fm-head2 .k-lead { margin-bottom: 0; }
@media (min-width: 60rem) {
  .fm-head2 { grid-template-columns: 1fr 1fr; }
}
#plany .fm-note { margin-top: 18px; }
/* statystyki: słupki rosną od lewej, gdy wykres pojawi się na ekranie */
.fm-anim--stany .fm-bar { transform-box: fill-box; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal .fm-anim--stany .fm-bar { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .3s; }
  .js .reveal.is-visible .fm-anim--stany .fm-bar { transform: none; }
  .js .reveal .fm-anim--stany .fm-bar:nth-child(2) { transition-delay: .38s; }
  .js .reveal .fm-anim--stany .fm-bar:nth-child(3) { transition-delay: .46s; }
  .js .reveal .fm-anim--stany .fm-bar:nth-child(4) { transition-delay: .54s; }
  .js .reveal .fm-anim--stany .fm-bar:nth-child(5) { transition-delay: .62s; }
  .js .reveal .fm-anim--stany .fm-bar:nth-child(6) { transition-delay: .7s; }
}

/* funkcja dopisana na próbę – widoczna tylko na stronie w budowie (FLOTA_GOTOWA = False) */
.fm-item.potw { border-top: 2px dashed #c28a00; position: relative; }
.fm-item.potw::before {
  content: "do potwierdzenia"; position: absolute; top: -11px; right: 0; padding: 2px 8px; border-radius: 4px;
  font: 600 .7rem/1.4 var(--font-sans); background: #fff3c4; color: #6b4d00; border: 1px dashed #c28a00;
}

/* ---------- Strony robotów: hero na zmianę – robot z zabudową i sam robot (bez strzałek i klikania) ---------- */
.hero-cykl { display: grid; }
.hero-cykl > picture { grid-area: 1 / 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-cykl > picture:first-child { animation: cykl-a 10s ease-in-out infinite; }
  .hero-cykl > picture:last-child { animation: cykl-b 10s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .hero-cykl > picture:last-child { display: none; } }
@keyframes cykl-a { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cykl-b { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Rendery ze strefami bezpieczeństwa (napisy stref są na renderze) ---------- */
.zl-wrap { position: relative; }

/* ---------- Strony robotów: galeria = zdjęcia + zajawki strony Bezpieczeństwo ---------- */
.zajawki { display: grid; gap: 16px; margin-top: clamp(24px, 3vw, 36px); grid-template-columns: 1fr 1fr; }
.zajawki > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 60rem) {
  .zajawki { grid-template-columns: repeat(6, 1fr); }
  .zajawki > * { grid-column: span 2; }
  .zajawki--5 > :nth-child(n+4) { grid-column: span 3; }
  .zajawki > :last-child:nth-child(odd) { grid-column: span 3; }
}
.zaj { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.zaj-media {
  display: block; position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border);
  aspect-ratio: 16 / 10; background: var(--c-paper-2); color: inherit;
}
.zaj-media picture, .zaj-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zaj-media img { transition: transform .6s var(--ease); }
.zaj-media:hover img { transform: scale(1.03); }
.zaj--foto .zaj-media { cursor: zoom-in; }
.zaj .zl-wrap, .zaj .zl-wrap picture { height: 100%; }
.zaj .scene { aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }
.zaj-dg { height: 100%; display: grid; place-items: center; padding: 6% 5%; background: var(--bg-alt); }
.zaj-dg .dg { max-height: 100%; }
.zaj figcaption { font-weight: 600; color: var(--text); }
.zaj--link figcaption a { color: var(--accent-text); text-decoration: none; }
.zaj--link figcaption a::after { content: "→"; margin-left: .4em; display: inline-block; transition: transform .2s var(--ease); }
.zaj--link:hover figcaption a::after { transform: translateX(3px); }
.zaj--link .zaj-media { transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.zaj--link .zaj-media:hover { border-color: var(--accent); box-shadow: 0 16px 36px -24px rgb(24 32 48 / .45); }
.zaj--link .zaj-media::after {   /* plakietka „Bezpieczeństwo” w rogu – zajawka prowadzi na inną stronę */
  content: "Bezpieczeństwo →"; position: absolute; right: 10px; top: 10px; z-index: 2; padding: 5px 9px; border-radius: 4px;
  font: 600 .68rem/1 var(--font-sans); background: rgb(13 14 16 / .8); color: #f2f3f5;
}
.zaj .scene-chip { display: none; }
.zaj-video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.zaj-media:hover .zaj-video { transform: scale(1.03); }

/* strony robotów: sekcja bezpieczeństwa bez obrazu (obrazy są w galerii) – tekst po lewej, normy i przycisk po prawej */
.safety-band { display: grid; gap: 24px 64px; }
.safety-band h2 { max-width: 18ch; }
.safety-band .lead { margin: 0; max-width: 46ch; }
.safety-band-side .norms { margin-bottom: 24px; }
@media (min-width: 60rem) { .safety-band:has(.norms) { grid-template-columns: 1fr 1fr; align-items: end; } }   /* bez norm: przycisk pod tekstem */
/* małe kafle na telefonie: bez napisów na strefach (nie mieszczą się), plakietka tylko ze strzałką */
@media (max-width: 47.99rem) {
  .zaj--link .zaj-media::after { content: "→"; padding: 5px 8px; font-size: .8rem; }
}

/* ---------- O nas: pas z robotami w hero ---------- */
.hero-media--pas { align-self: center; }

/* ---------- „Widły” na rysunku (na filmie strzałki są w samym renderze) ---------- */
.dg .dg-label { fill: #e5484d; font: 700 13px/1 var(--font-sans); letter-spacing: .02em; }

/* ---------- Menedżer floty: podpis „zrzut ekranu z aplikacji” nad zrzutem (jak pasek okna) ---------- */
.fm-podpis { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: .85rem; color: var(--muted); background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.fm-podpis::before { content: ""; width: 34px; height: 8px; flex: none; background: radial-gradient(circle at 4px 4px, #d9dce0 3.5px, transparent 4px) 0 0 / 13px 8px repeat-x; }
.fm-shot--hero .fm-scene, .fm-shot--hero .fm-scene picture, .fm-shot--hero .fm-scene img { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ---------- Przełącznik wersji nagłówka (tylko strona robocza /podglad-hero/) ---------- */
.hero-switch {
  position: fixed; z-index: 100; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 2px; padding: 5px; max-width: calc(100vw - 20px); overflow-x: auto;
  border-radius: 999px; background: rgb(13 14 16 / .9); color: #f2f3f5; box-shadow: 0 12px 30px -12px rgb(0 0 0 / .6);
  font: 500 .78rem/1.2 var(--font-sans);
}
.hero-switch-label { padding: 0 10px 0 12px; color: #9aa0a6; white-space: nowrap; font: 600 .68rem/1 var(--font-sans); }
.hero-switch button { border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; padding: 7px 11px; border-radius: 999px; }
.hero-switch button b { color: var(--c-orange); }
.hero-switch button:hover { background: rgb(255 255 255 / .1); }
.hero-switch button[aria-pressed="true"] { background: #f2f3f5; color: #0d0e10; }
.hero-switch button[aria-pressed="true"] b { color: #c2410c; }
@media (max-width: 90rem) { .hero-switch-label { display: none; } }
@media (max-width: 75rem) { .hero-switch .hs-name { display: none; } .hero-switch button { padding: 9px 13px; } }
@media print { .hero-switch { display: none; } }

/* Podpisy pod robotami: położenie = środek robota w % szerokości obrazu */
.fleet-labels { position: relative; height: 2.6em; margin-top: 10px; font-size: clamp(.8rem, .66rem + .45vw, .95rem); }  /* pod obrazem, z dala od cienia */
.fleet-label {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; text-align: center;
  color: var(--text); text-decoration: none; line-height: 1.3;
}
.fleet-label strong { font-weight: 600; }
.fleet-label span { color: var(--muted); }
.fleet-label::after { content: "→"; margin-left: .35em; color: var(--accent-text); display: inline-block; transition: transform .2s var(--ease); }
.fleet-label:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.fleet-label:hover::after { transform: translateX(3px); }
.fl-1 { left: 23.8%; }
.fl-2 { left: 52.6%; }
.fl-3 { left: 77.5%; }
@container (max-width: 720px) {   /* wąski obraz: nazwa nad udźwigiem, żeby trzy podpisy zmieściły się obok siebie */
  .fleet-label span { display: block; }
  .fleet-label::after { display: none; }
}

a.tag { text-decoration: none; z-index: 2; transition: border-color .2s, color .2s; }
a.tag:hover { border-color: var(--c-orange); color: #fff; }
a.tag::after { content: " →"; color: var(--c-orange-soft); }

.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; padding: 0; list-style: none; font: 600 .85rem/1.4 var(--font-sans); color: var(--muted); }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Pasek dowodów / statystyki ---------- */
.proof { border-block: 1px solid var(--border); background: var(--bg); }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.proof-list li { padding: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 28px); border-left: 1px solid var(--border); }
.proof-list li:nth-child(odd) { border-left: 0; }
.proof-list li:nth-child(n+3) { border-top: 1px solid var(--border); }
@media (min-width: 60rem) {
  .proof-list { grid-template-columns: repeat(4, 1fr); }
  .proof-list li:nth-child(odd) { border-left: 1px solid var(--border); }
  .proof-list li:first-child { border-left: 0; }
  .proof-list li:nth-child(n+3) { border-top: 0; }
}
/* wariant z 3 pozycjami: 3 kolumny na desktopie, na telefonie trzecia pozycja na całą szerokość */
.proof-list--3 li:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 60rem) {
  .proof-list--3 { grid-template-columns: repeat(3, 1fr); }
  .proof-list--3 li:nth-child(3) { grid-column: auto; }
}
.stat-value { display: block; font: 600 clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem)/1.1 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: .5em; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-right: .25em; }
.stat-value--sm { font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem); line-height: 1.25; padding-top: .2em; }
.stat-label { display: block; margin-top: 8px; color: var(--muted); font-size: .95rem; line-height: 1.4; }

/* ---------- Sekcja bezpieczeństwa ---------- */
.hazard { height: 10px; background: repeating-linear-gradient(-45deg, var(--c-orange) 0 14px, var(--c-ink) 14px 28px); }
.safety-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.safety-points li { padding: 22px 22px 22px 60px; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.safety-points li::before {
  content: counter(list-item, decimal-leading-zero); position: absolute; left: 20px; top: 22px;
  font: 600 .85rem/1.6 var(--font-sans); color: var(--accent-text);
}
.safety-points h3 { font-size: 1.15rem; margin-bottom: .3em; }
.safety-points p { margin: 0; color: var(--muted); }

/* ---------- Karty ---------- */
.card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.card-body { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; flex: 1; }
.card-body > :last-child { margin-bottom: 0; }
.card .muted { margin-bottom: 1.2em; }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card .link-arrow { margin-top: auto; }

/* Klikalna karta: link „Poznaj …” rozciągnięty na całą kartę (jeden link dla czytników ekranu) */
.card.is-clickable { position: relative; }
.card-link::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.card.is-clickable .card-media { overflow: hidden; }
.card.is-clickable .card-media img { transition: transform .6s var(--ease); }
.card.is-clickable:hover .card-media img { transform: scale(1.03); }
.card.is-clickable:hover .link-arrow::after { transform: translateX(3px); }

/* Karty modeli: po najechaniu paski LED robota świecą jak sygnalizacja stanu – zielony, pomarańczowy, czerwony
   i znowu zielony, z przygaszeniem między kolorami. Warstwy <render>-led-*.webp z led_glow.py: „off” przykrywa
   zielony pasek z renderu (zgaszony pasek), g / o / r to kolory. Przy prefers-reduced-motion pasek świeci tylko na zielono.
   Telefon (bez myszy): .is-lit z main.js, gdy karta przechodzi przez środek ekranu. */
.led {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}
:is(.card.is-clickable, .wybor-card):is(:hover, :focus-within, .is-lit) .led--off { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  :is(.card.is-clickable, .wybor-card):is(:hover, :focus-within, .is-lit) .led--g { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.card.is-clickable, .wybor-card):is(:hover, :focus-within, .is-lit) :is(.led--g, .led--o, .led--r) { animation: led-kolor 7.5s linear infinite; }
  :is(.card.is-clickable, .wybor-card):is(:hover, :focus-within, .is-lit) .led--o { animation-delay: 2.5s; }
  :is(.card.is-clickable, .wybor-card):is(:hover, :focus-within, .is-lit) .led--r { animation-delay: 5s; }
}
/* jeden kolor = 1/3 cyklu: rozjaśnienie, świecenie, przygaszenie, krótka przerwa */
@keyframes led-kolor {
  0% { opacity: 0; }
  6%, 24% { opacity: 1; }
  31%, 100% { opacity: 0; }
}


.card-media { position: relative; }

.model-card h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 1.5em; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kv div { background: var(--surface); padding: 12px 14px; }
@media (max-width: 30rem) { .kv div:nth-child(n+3) { grid-column: 1 / -1; } }   /* wąski telefon: wymiary (681 × 548 × 341 mm) w całym wierszu */
.kv dt { font: 600 .72rem/1.3 var(--font-sans); color: var(--muted); }
.kv dd { margin: 4px 0 0; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
/* telefon: karta modelu mieści się na jednym ekranie – niższy obraz, parametry w wierszach (nazwa | wartość) */
@media (max-width: 39.99rem) {
  .model-card .card-media img { aspect-ratio: 2 / 1; }
  .model-card .card-body { padding: 16px 18px 18px; }
  .model-card .badge { margin-bottom: 10px; }
  .model-card .muted { margin-bottom: .9em; }
  .model-card .kv { grid-template-columns: 1fr; margin-bottom: 1em; }
  .model-card .kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; }
  .model-card .kv dd { margin: 0; font-size: 1rem; white-space: nowrap; }
}
.badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font: 600 .75rem/1.3 var(--font-sans);
  padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-text); margin-bottom: 16px;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.feature { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.feature--icon .icon { width: 48px; height: 48px; margin-bottom: 18px; fill: none; stroke: var(--accent-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 39.99rem) {  /* telefon: ikona obok tekstu, niższe karty */
  .feature--icon { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 18px; }
  .feature--icon .icon { grid-row: span 2; width: 40px; height: 40px; margin: 2px 0 0; }
  .feature--icon h3 { margin-bottom: .2em; }
}
.feature .num { font: 600 .8rem/1 var(--font-sans); color: var(--accent-text); display: block; margin-bottom: 16px; }
.feature h3 { font-size: 1.15rem; }
.feature p { color: var(--muted); margin: 0; }

/* ---------- Tabele ---------- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.table-wrap + p { margin-top: 16px; }
.spec-table caption, .compare caption { text-align: left; padding: 18px 20px; font-weight: 600; border-bottom: 1px solid var(--border); }
.spec-table th, .spec-table td, .compare th, .compare td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.spec-table tr:last-child > *, .compare tbody tr:last-child > * { border-bottom: 0; }
.spec-table th[scope="row"], .compare th[scope="row"] { font-weight: 500; color: var(--muted); width: 42%; }
.spec-table td { font-weight: 600; }
.spec-table .spec-group th {
  padding: 12px 20px; background: var(--bg-alt); color: var(--accent-text); width: auto;
  font: 600 .75rem/1.3 var(--font-sans);
}
.spec-table tbody + tbody .spec-group th { border-top: 1px solid var(--border); }

.compare thead th { font: 600 .8rem/1.3 var(--font-sans); color: var(--muted); background: var(--bg-alt); }
.compare thead th.model { color: var(--text); font-size: .9rem; }
.compare td { font-weight: 600; }
.compare th[scope="row"] { width: 28%; }

@media (max-width: 40rem) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare th[scope="row"] { grid-column: 1 / -1; width: auto; padding-bottom: 4px; border: 0; font: 600 .75rem/1.3 var(--font-sans); }
  .compare td { border: 0; padding-top: 4px; }
  .compare td + td { border-left: 1px solid var(--border); }
  .compare td::before { content: attr(data-label); display: block; font: 600 .72rem/1.4 var(--font-sans); color: var(--accent-text); }
  /* telefon: etykieta nad wartością, wartość na całą szerokość (krótsza tabela, bez łamania co dwa słowa) */
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; }
  .spec-table caption { display: block; padding: 12px 14px; font-size: .95rem; }
  .spec-table tr { border-bottom: 1px solid var(--border); }
  .spec-table tbody:last-child tr:last-child { border-bottom: 0; }
  .spec-table th[scope="row"] { width: auto; padding: 9px 14px 0; border: 0; font-size: .8rem; line-height: 1.35; }
  .spec-table td { padding: 1px 14px 9px; border: 0; font-size: .95rem; line-height: 1.4; }
  .spec-table .spec-group th { border-bottom: 0; }
}

/* ---------- Kluczowe parametry (kafle) + pełna specyfikacja (rozwijana) ---------- */
.key-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 20px 0 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 48rem) { .key-specs { grid-template-columns: repeat(3, 1fr); } }
.key-specs div { background: var(--surface); padding: 16px 20px; }
.key-specs dt { font: 600 .76rem/1.3 var(--font-sans); color: var(--muted); }
.key-specs dd { margin: 6px 0 0; font-weight: 600; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.3; }
.key-specs dd small { display: block; margin-top: 2px; font-size: .78em; font-weight: 500; color: var(--muted); }
.spec-more { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.spec-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  font-weight: 600; font-size: 1.08rem;
}
.spec-more > summary::-webkit-details-marker { display: none; }
.spec-more > summary span { margin-left: auto; color: var(--muted); font-weight: 400; font-size: .95rem; white-space: nowrap; }
.spec-more > summary::after { content: "+"; font: 400 1.6rem/1 var(--font-sans); color: var(--accent-text); transition: transform .2s var(--ease); }
.spec-more[open] > summary::after { transform: rotate(45deg); }
.spec-more > summary:hover { background: var(--bg-alt); }
.spec-more .table-wrap { border: 0; border-top: 1px solid var(--border); border-radius: 0; }

/* ---------- Wymiary naniesione na rendery ---------- */
.dims { display: grid; gap: 16px; }
@media (min-width: 48rem) { .dims { grid-template-columns: 1fr 1fr; } }
.dims-fig { margin: 0; }
.dims-img { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--c-studio); }
.dims-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dims-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dim line { stroke: var(--c-orange-deep); stroke-width: 3; }
.dim rect { fill: #fff; stroke: var(--c-orange-deep); stroke-width: 2.5; }
.dim text { font: 600 46px var(--font-sans); fill: #0d0e10; text-anchor: middle; }
.dims-fig figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; }

/* ---------- Galeria (kafelki: pierwszy duży) + powiększenie ---------- */
.gallery { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 28px; }
.gallery figure { margin: 0; position: relative; min-width: 0; }
.gallery figure:first-child { grid-column: 1 / -1; }
@media (min-width: 60rem) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery figure:first-child picture, .gallery figure:first-child img { height: 100%; }
  .gallery figure:first-child img { aspect-ratio: auto; }
}
/* Układ zależny od liczby zdjęć: 2 = dwa równe, 3 = duże + dwa obok, 4 = siatka 2×2, 5 = duże + cztery */
.gallery--2 figure:first-child, .gallery--4 figure:first-child { grid-column: auto; }
@media (max-width: 39.99rem) { .gallery--2 { grid-template-columns: 1fr; } }
@media (min-width: 60rem) {
  .gallery--2, .gallery--4 { grid-template-columns: 1fr 1fr; }
  .gallery--2 figure:first-child, .gallery--4 figure:first-child { grid-column: auto; grid-row: auto; }
  .gallery--2 figure:first-child img, .gallery--4 figure:first-child img { aspect-ratio: 16 / 10; height: auto; }
  .gallery--3 { grid-template-columns: 2fr 1fr; }
  .gallery--3 figure:first-child { grid-column: 1; grid-row: span 2; }
}
.gallery a.lb { display: block; position: relative; height: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.gallery a.lb:hover img { transform: scale(1.03); }
/* Podpis widoczny tylko na dużym kafelku (układ „duże + małe”). Na małych ukryty (zostaje dla czytników
   ekranu i w powiększeniu po kliknięciu). */
.gallery figcaption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gallery--3 figure:first-child figcaption, .gallery--5 figure:first-child figcaption {
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal;
  left: 10px; bottom: 10px; max-width: calc(100% - 20px); pointer-events: none;
  font: 600 .74rem/1.3 var(--font-sans);
  background: var(--chip-bg); color: #f2f3f5; padding: 6px 9px; border-radius: 4px;
}
.lb-zoom { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; background: var(--chip-bg); opacity: 0; transition: opacity .2s; }
.lb-zoom::before { content: ""; position: absolute; left: 10px; top: 9px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; }
.lb-zoom::after { content: ""; position: absolute; left: 22px; top: 21px; width: 7px; height: 2px; background: #fff; transform: rotate(45deg); transform-origin: left; }
.gallery a.lb:hover .lb-zoom, .gallery a.lb:focus-visible .lb-zoom { opacity: 1; }
@media not ((hover: hover) and (pointer: fine)) { .lb-zoom { opacity: 1; } }

.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1400px, 94vw); width: 100%; overflow: visible; }
.lightbox::backdrop { background: rgb(8 9 11 / .88); }
.lightbox figure { margin: 0; }
.lightbox img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; border-radius: var(--radius-lg); background: var(--c-studio); }
.lightbox figcaption { color: #f2f3f5; text-align: center; margin-top: 12px; font-size: 1rem; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: rgb(255 255 255 / .14); color: #fff; display: grid; place-items: center; }
.lb-btn:hover { background: var(--c-orange); color: var(--c-ink); }
.lb-close { right: 0; top: -60px; }
/* Okno z filmem YouTube (okładka na stronie zostaje) */
.video-modal { padding: 0; border: 0; background: transparent; width: min(1280px, 94vw); max-width: none; overflow: visible; }
.video-modal::backdrop { background: rgb(8 9 11 / .9); }
.vm-frame { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc(80vh * 16 / 9)); margin-inline: auto; background: #000; border-radius: var(--radius-lg); overflow: hidden; }
.vm-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vm-title { color: #f2f3f5; text-align: center; margin: 12px 0 0; font-size: 1rem; }
.lb-close::before, .lb-close::after { content: ""; position: absolute; width: 18px; height: 2px; background: currentColor; transform: rotate(45deg); }
.lb-close::after { transform: rotate(-45deg); }
.lb-prev, .lb-next { top: calc(50% - 40px); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-prev::before, .lb-next::before { content: ""; width: 11px; height: 11px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.lb-next::before { transform: rotate(-135deg); margin-left: -4px; }

/* ---------- Kroki ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; padding: 28px 24px; border-top: 3px solid var(--accent); background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.steps li::before { content: "Krok " counter(step, decimal-leading-zero); display: block; font: 600 .78rem/1 var(--font-sans); color: var(--accent-text); margin-bottom: 18px; }
/* oś czasu (case study): zamiast „Krok 01” etykieta z data-kiedy, trzy kolumny */
.steps--czas li::before { content: attr(data-kiedy); }
@media (min-width: 70rem) { .steps--czas { grid-template-columns: repeat(3, 1fr); } }
.hero-note { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }

/* Plakietka „Pracuje w produkcji” na obrazie wdrożenia (na_zywo() w build.py): zielona kropka pulsuje jak dioda stanu */
.live-pill {
  position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  font: 600 .8rem/1.2 var(--font-sans); color: var(--text); box-shadow: 0 4px 14px -6px rgb(0 0 0 / .25);
}
.live-pill--inline { position: static; margin-bottom: 18px; box-shadow: none; }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #1f9d55; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1f9d55; animation: live-puls 1.8s ease-out infinite; }
}
@keyframes live-puls { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
.steps h3 { font-size: 1.2rem; }
.steps p { color: var(--muted); margin: 0; }
@media (max-width: 47.99rem) {  /* telefon: zwarte kroki */
  .steps { gap: 10px; }
  .steps li { padding: 16px 18px; }
  .steps li::before { margin-bottom: 8px; }
  .steps h3 { margin-bottom: .25em; }
}

/* ---------- Case study ---------- */
.case-teaser { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
@media (min-width: 60rem) { .case-teaser { grid-template-columns: 1.1fr 1fr; } }
.case-teaser .card-media, .case-teaser picture, .other-model .card-media, .other-model picture { height: 100%; }
.case-teaser img { width: 100%; height: 100%; object-fit: cover; }
.case-teaser .card-body { justify-content: center; }
.case-stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 8px 0 28px; }
.case-stats .stat-value { color: var(--accent-text); }

/* ---------- Normy (sekcja bezpieczeństwa produktu) ---------- */
.norms-title { margin: 8px 0 12px; font: 600 .78rem/1.3 var(--font-sans); color: var(--muted); }
.norms { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.norms li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 14px; align-items: baseline; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.norms strong { font-family: var(--font-sans); font-weight: 500; color: var(--accent-text); white-space: nowrap; }
.norms span { color: var(--muted); font-size: .95rem; line-height: 1.45; }
@media (max-width: 26rem) { .norms li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Nagłówek sekcji w dwóch kolumnach (tytuł | opis + przyciski) ---------- */
.split-head { display: grid; gap: 20px 56px; margin-bottom: clamp(28px, 4vw, 48px); }
.split-head h2, .split-head .lead { margin-bottom: 0; }
.split-head .btn-row { margin-top: 24px; }
@media (min-width: 60rem) { .split-head { grid-template-columns: 1fr 1fr; align-items: last baseline; } }   /* prawa kolumna kończy się na linii tytułu */

/* ---------- Animacja wideo (ochrona przed wózkiem) ---------- */
.video-figure { margin: 0; }
.video-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg);
  background: #e6e9ec; border: 1px solid var(--border); box-shadow: var(--shadow-media);
}
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-chip {
  position: absolute; left: 16px; top: 16px; padding: 8px 12px; border-radius: 4px;
  font: 600 .78rem/1 var(--font-sans);
  background: rgb(13 14 16 / .8); color: #f2f3f5; border: 1px solid var(--c-orange);
  opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none;
}
.video-chip.is-on { opacity: 1; transform: none; }
.video-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: vs; }
@media (min-width: 40rem) { .video-steps { grid-template-columns: repeat(3, 1fr); } }
.video-steps li {
  counter-increment: vs; display: grid; gap: 4px; padding: 14px 16px; align-content: start;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.video-steps li::before { content: counter(vs, decimal-leading-zero); font: 600 .75rem/1 var(--font-sans); color: var(--accent-text); }
.video-steps strong { font-weight: 600; }
.video-steps span { color: var(--muted); font-size: .92rem; line-height: 1.45; }
@media (max-width: 39.99rem) {  /* telefon: zwarte kroki – numer i tytuł w jednej linii */
  .video-steps { gap: 8px; }
  .video-steps li { grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; padding: 10px 14px; align-items: baseline; }
  .video-steps li::before { grid-row: 1; }
  .video-steps span { grid-column: 1 / -1; font-size: .88rem; }
}
.video-steps li.is-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* ---------- Diagram: skaner 2D vs widły (/bezpieczenstwo/) ---------- */
.dg-grid { display: grid; gap: 16px; }
@media (min-width: 48rem) { .dg-grid { grid-template-columns: 1fr 1fr; } }
.dg-card { margin: 0; padding: clamp(16px, 2.5vw, 24px); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dg-card--ok { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.dg { display: block; width: 100%; height: auto; }
.dg .floor { stroke: var(--border); stroke-width: 3; }
.dg .ln { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dg .solid { fill: color-mix(in srgb, var(--muted) 22%, var(--bg-alt)); stroke: var(--muted); stroke-width: 1.8; stroke-linejoin: round; }
.dg .wheel { fill: #2a2d32; stroke: var(--muted); stroke-width: 1.5; }
.dg .robot { fill: color-mix(in srgb, var(--muted) 12%, var(--bg)); stroke: var(--text); stroke-width: 1.6; }
.dg .robot-top { fill: var(--muted); }
.dg .led { fill: #5fd38a; }
.dg .sensor { fill: #17191c; stroke: color-mix(in srgb, var(--muted) 55%, var(--bg)); stroke-width: 1; }
.dg .forks-bad { fill: #e5484d; }
.dg .forks-ok { fill: var(--accent); }
.dg .tower rect { fill: color-mix(in srgb, var(--muted) 45%, var(--bg)); }
.dg .klt { fill: color-mix(in srgb, var(--muted) 30%, var(--bg)); stroke: var(--muted); stroke-width: 2; }
.dg .klt-line { stroke: var(--muted); stroke-width: 1.5; }
.dg .door { fill: #17191c; stroke: color-mix(in srgb, var(--muted) 55%, var(--bg)); stroke-width: 1; }
.dg .bracket { stroke: var(--muted); stroke-width: 3; }
.dg .screen { fill: var(--text); }
.dg .alu { fill: color-mix(in srgb, var(--muted) 40%, var(--bg)); stroke: color-mix(in srgb, var(--muted) 75%, var(--bg)); stroke-width: 1; }
.dg .alu-in { fill: color-mix(in srgb, var(--muted) 22%, var(--bg)); }
.dg .plate { fill: color-mix(in srgb, var(--muted) 55%, var(--bg)); }
.dg .roller { fill: color-mix(in srgb, var(--muted) 70%, var(--bg)); }
.dg .blk { fill: #17191c; stroke: color-mix(in srgb, var(--muted) 55%, var(--bg)); stroke-width: 1; }
.dg .hub { fill: color-mix(in srgb, var(--muted) 35%, var(--bg-alt)); }
.dg .lamp { fill: #f2c94c; }
.dg .ln-thin { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.dg .scan { stroke: #3b82f6; stroke-width: 2.5; stroke-dasharray: 8 6; }
.dg .hit { fill: #3b82f6; }
.dg .ray { stroke: var(--accent); stroke-width: 2.5; opacity: .95; }
.dg .fan { fill: var(--accent); opacity: .25; }
.dg .warn circle { fill: #e5484d; }
.dg .warn rect { fill: #fff; }
.dg-card figcaption { display: grid; gap: 6px; margin-top: 14px; font-size: .95rem; color: var(--muted); }
.dg-card figcaption strong { color: var(--text); font-size: 1.05rem; }
.dg-key { display: flex; align-items: center; gap: 10px; }
.dg-key i { flex: none; width: 22px; height: 0; border-top: 3px solid; }
.dg-key .k-scan { border-top: 3px dashed #3b82f6; }
.dg-key .k-bad { border-color: #e5484d; border-top-width: 6px; border-radius: 2px; }
.dg-key .k-ok { border-color: var(--accent); border-top-width: 6px; border-radius: 2px; }

/* ---------- Strefy bezpieczeństwa (render z legendą) ---------- */
.safety-figure { margin: 0; }
.zone-legend { display: grid; gap: 10px; margin-top: 18px; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.zone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; color: var(--text); font-weight: 500; }
.zone::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px; transform: translateY(2px); }
.zone--outer::before { background: #ecd7a4; box-shadow: inset 0 0 0 1px #c9a24a; }
.zone--inner::before { background: #fc9a8f; box-shadow: inset 0 0 0 1px #d94a3a; }

/* ---------- Animacja: robot jedzie przez halę (SVG inline, np. zajawka wdrożenia) ----------
   Robot stoi na środku, hala przesuwa się w lewo (paralaksa: podłoga > regały > siatka).
   Każda warstwa przesuwa się dokładnie o swój okres (kreska 140, regał 288, oczko siatki 80), więc pętla nie ma szwu. */
.scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--sc-bg); border: 1px solid var(--border); }
.scene > svg { display: block; width: 100%; height: 100%; }
.scene-chip {
  position: absolute; right: 14px; bottom: 14px; pointer-events: none;
  font: 600 .72rem/1 var(--font-sans);
  background: var(--chip-bg); color: #f2f3f5; padding: 7px 9px; border-radius: 4px;
}
.case-teaser .scene { border: 0; border-radius: 0; }
@media (min-width: 60rem) { .case-teaser .scene { aspect-ratio: auto; height: 100%; min-height: 340px; } }
.yt .scene { aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }
.scene::after {  /* pomarańczowe narożniki ramki */
  content: ""; position: absolute; inset: 16px; pointer-events: none;
  --c: linear-gradient(var(--c-orange), var(--c-orange));
  background:
    var(--c) top left / 28px 3px no-repeat, var(--c) top left / 3px 28px no-repeat,
    var(--c) top right / 28px 3px no-repeat, var(--c) top right / 3px 28px no-repeat,
    var(--c) bottom left / 28px 3px no-repeat, var(--c) bottom left / 3px 28px no-repeat,
    var(--c) bottom right / 28px 3px no-repeat, var(--c) bottom right / 3px 28px no-repeat;
}
.amr-anim { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; }
.amr-robot { transform: translateX(800px); }          /* robot zawsze na środku kadru */
.amr-spin { transform-box: view-box; transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .amr-lane  { animation: amr-lane 1.1667s linear infinite; }    /* 120 j./s – podłoga */
  .amr-spin  { animation: amr-wheel .84s linear infinite; }      /* obrót kół zgodny z prędkością podłogi */
  .amr-racks { animation: amr-racks 3.2s linear infinite; }      /*  90 j./s – regały */
  .amr-grid  { animation: amr-grid 1.778s linear infinite; }     /*  45 j./s – siatka w tle */
  .amr-zone  { animation: amr-pulse 1.4s ease-in-out infinite; }
  .amr-anim.is-paused * { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .amr-anim * { animation: none !important; }
}
@keyframes amr-lane  { to { stroke-dashoffset: 140; } }
@keyframes amr-wheel { to { transform: rotate(360deg); } }
@keyframes amr-racks { to { transform: translateX(-288px); } }
@keyframes amr-grid  { to { transform: translateX(-80px); } }
@keyframes amr-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Kolory animacji SVG (oba motywy przez zmienne --sc-*) */
.sc-bg { fill: var(--sc-bg); }
.sc-grid { fill: none; stroke: var(--sc-grid); stroke-width: 2; }
.sc-rack { fill: var(--sc-rack); }
.sc-rack-ln line { stroke: var(--sc-rack-ln); stroke-width: 2; }
.sc-label { font: 600 30px var(--font-sans); fill: var(--sc-text); }
.sc-lane { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 18 16; opacity: .6; }
.sc-lane--2 { stroke: #3b82f6; }
.sc-lane--3 { stroke: #22a06b; }
/* animacja zmiany układu hali (uklad_anim, strona Integracja #hala) */
.sc-maszyna { fill: var(--sc-station); stroke: var(--accent); stroke-width: 3; }
.sc-maszyna-t { font: 600 30px var(--font-sans); fill: var(--sc-text); text-anchor: middle; }
.sc-kursor { fill: #fff; stroke: #0d0e10; stroke-width: 2.5; stroke-linejoin: round; }
.sc-uchwyt { fill: var(--accent); stroke: #fff; stroke-width: 4; }
.hala-grid { align-items: center; }
@media (min-width: 60rem) { .hala-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } }   /* animacja szersza: czytelne podpisy kroków */
.sc-pick { fill: color-mix(in srgb, var(--accent) 16%, var(--sc-bg)); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 6; }
.sc-hi { fill: none; stroke: var(--accent); stroke-width: 6; }
.sc-station { fill: var(--sc-station); stroke: var(--sc-station-stroke); stroke-width: 2; }
.sc-num { font: 600 44px var(--font-sans); fill: var(--sc-text); text-anchor: middle; }
.sc-line { fill: var(--sc-line); }
.sc-line-ln line { stroke: var(--sc-line-ln); stroke-width: 3; }
.sc-field { fill: var(--accent); opacity: .16; }
.sc-field-stop { fill: #e5484d; fill-opacity: .32; }
.sc-shadow { fill: var(--sc-shadow); }
.sc-robot { fill: var(--sc-robot); stroke: var(--sc-robot-stroke); stroke-width: 3; }
.sc-robot-top { fill: var(--sc-robot-top); }
.sc-stripe { fill: var(--accent); }
.sc-led { fill: #3fbf6f; }
.sc-box { fill: #3b82f6; stroke: #1e4fa0; stroke-width: 2; }
.sc-aisle { fill: var(--sc-aisle); }
.sc-edge { fill: none; stroke: var(--sc-edge); stroke-width: 4; stroke-dasharray: 24 14; }
.sc-fork { fill: var(--sc-fork); stroke: #8a5a00; stroke-width: 2; }
.sc-fork-dark { fill: var(--sc-fork-dark); }
.sc-fork-cab { fill: none; stroke: var(--sc-fork-dark); stroke-width: 6; }
.sc-fork-ln { stroke: var(--sc-fork-dark); stroke-width: 4; }
.sc-tines { fill: var(--sc-tines); }
.sc-stop { fill: #e5484d; }
.sc-stop-t { font: 600 26px var(--font-sans); fill: #fff; text-anchor: middle; }
.sc-wall { fill: none; stroke: var(--sc-rack-ln); stroke-width: 4; }
.sc-charge rect { fill: var(--sc-station); stroke: var(--accent); stroke-width: 3; }
.sc-charge path { fill: var(--accent); }
.sc-tag { fill: rgb(13 14 16 / .82); }
.sc-tag-t { font: 600 22px var(--font-sans); fill: #fff; text-anchor: middle; }
.sc-sub { font: 400 34px var(--font-sans); fill: var(--sc-text); }
.sc-label--l { font-size: 38px; letter-spacing: .06em; fill: var(--text); }
.sc-tag-t--l { font-size: 28px; }
.sc-link { fill: none; stroke: var(--sc-station-stroke); stroke-width: 3; stroke-dasharray: 10 10; }
.sc-node { stroke: var(--accent); stroke-width: 3; }
.sc-adapter { fill: color-mix(in srgb, var(--accent) 16%, var(--sc-station)); stroke: var(--accent); stroke-width: 3; }
.sc-adapter-ln { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; }
.sc-wave { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.sc-bat { fill: var(--sc-station); stroke: var(--sc-robot-stroke); stroke-width: 3; }
.sc-bat-fill { fill: #3fbf6f; }
.sc-stop--czeka { fill: #e8a317; }
.sc-tag--jasna { fill: var(--sc-station); stroke: var(--sc-station-stroke); stroke-width: 2; }
.sc-tag-t--ciemna { fill: var(--sc-text); }
.sc-obcy { fill: color-mix(in srgb, #3b82f6 22%, var(--sc-robot)); stroke: #1e4fa0; stroke-width: 3; }
.sc-obcy-top { fill: color-mix(in srgb, #3b82f6 40%, var(--sc-robot)); }
/* widok z boku (ładowanie) */
.sc-podloga { fill: var(--sc-aisle); }
.sc-kolo { fill: var(--sc-fork-dark); }
.sc-led-pas { fill: #3fbf6f; }
.sc-okno { fill: var(--sc-fork-dark); }
.sc-cewka { fill: var(--accent); }
.sc-charge-bolt { fill: var(--accent); }
.sc-wymiar { fill: none; stroke: var(--sc-text); stroke-width: 3; }
/* serwer w zakładzie */
.sc-zaklad { fill: none; stroke: var(--sc-robot-stroke); stroke-width: 6; }
.sc-chmura { fill: none; stroke: var(--sc-station-stroke); stroke-width: 6; stroke-dasharray: 16 12; }
.sc-krzyz { fill: none; stroke: #e5484d; stroke-width: 10; stroke-linecap: round; }
.sc-krzyz--s { stroke-width: 7; }
.sc-chmura-ln { fill: none; stroke: var(--sc-station-stroke); stroke-width: 4; stroke-dasharray: 10 10; }
.sc-lock { fill: var(--sc-station); stroke: var(--sc-robot-stroke); stroke-width: 4; }
.sc-lock-ln { fill: none; stroke: var(--sc-robot-stroke); stroke-width: 5; }
.sc-kabel { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.sc-link-tlo { fill: none; stroke: color-mix(in srgb, var(--accent) 22%, var(--sc-bg)); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sc-tablet { fill: color-mix(in srgb, var(--accent) 10%, var(--sc-station)); stroke: var(--sc-station-stroke); stroke-width: 2; }
.sc-wifi { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
/* łącznik: okno systemu zakładu (terminal) */
.sc-terminal { fill: #16181c; }
.sc-term-head { fill: #2a2e34; }
.sc-term-dot { fill: #4a5059; }
.sc-term-t { font: 500 20px var(--font-mono); fill: #a8aeb7; }
.sc-term { font: 600 28px var(--font-mono); fill: #5fd08f; }
.sc-term--b { fill: #f2f3f5; }
.sc-term--ok { fill: var(--accent); }
.sc-term-hl { fill: rgb(255 106 19 / .28); }
.sc-link-on { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sc-chip { fill: var(--accent); }
.sc-chip-t { font: 600 26px var(--font-sans); fill: #fff; text-anchor: middle; }
.sc-sub--ok { fill: var(--ok-text); font-weight: 600; }
/* sceny 800 × 500 (ładowanie z boku) */
.sc-tag-t--s { font-size: 13px; letter-spacing: .04em; }
.sc-wave--s { stroke-width: 3.5; }
.sc-wymiar--s { stroke-width: 1.8; }
.sc-ladowarka { fill: var(--sc-station); stroke: var(--sc-station-stroke); stroke-width: 1.5; }
.sc-mini { font: 600 11px var(--font-sans); fill: var(--sc-text); }
/* animacja z boku (amr_anim) */
.a-rack { fill: none; stroke: var(--sc-rack-ln); stroke-width: 2; }
.a-floor { stroke: var(--sc-rack-ln); stroke-width: 2; }
.a-lane { stroke: var(--sc-line-ln); stroke-width: 3; stroke-dasharray: 40 30; }
.a-shadow { fill: #000; opacity: .25; }
.a-plate { fill: var(--sc-robot-top); }
.a-body { fill: var(--sc-robot); stroke: var(--sc-robot-stroke); stroke-width: 3; }
.a-wheel { fill: #23262b; stroke: var(--sc-rack-ln); stroke-width: 3; }
.a-wheel-ln { stroke: #eceef1; stroke-width: 2; }

/* ---------- Filmy (okładki YouTube) ---------- */
.films { display: grid; gap: 24px; }
@media (min-width: 60rem) { .films { grid-template-columns: 1fr 1fr; } }
.film { margin: 0; }
.film figcaption { margin-top: 12px; font-size: 1.05rem; color: var(--muted); }
.film figcaption strong { color: var(--text); }
.yt-note { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- Strefy bezpieczeństwa: dwa rendery ---------- */
.zones { display: grid; gap: 16px; }
@media (min-width: 48rem) { .zones { grid-template-columns: 1fr 1fr; } }
.zones figure { margin: 0; position: relative; }
.zones img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.zones picture { border-radius: var(--radius-lg); overflow: hidden; }
.zones figcaption {
  position: absolute; left: 12px; bottom: 12px; font: 600 .75rem/1 var(--font-sans);
  background: var(--chip-bg); color: #f2f3f5; padding: 8px 10px; border-radius: 4px;
}

/* Sekcja bezpieczeństwa na stronach produktów: na telefonie obraz zaraz po opisie, przed normami */
@media (max-width: 59.99rem) {
  .safety-grid .safety-copy { display: contents; }
  .safety-grid .safety-media { order: 1; }
  .safety-grid .safety-copy > .norms-title, .safety-grid .safety-copy > .norms, .safety-grid .safety-copy > .btn { order: 2; }
  .safety-grid .safety-copy > .btn { justify-self: start; }
}

.quote { margin: 0; padding: clamp(24px, 4vw, 48px); border-left: 4px solid var(--accent); background: var(--bg-alt); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.quote p { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.45; }
.quote footer { color: var(--muted); font-size: .95rem; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.prose h3 { margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose li { margin-bottom: .4em; }

/* ---------- Lite YouTube ---------- */
.yt { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; border: 1px solid var(--border); color: #fff; text-decoration: none; }
.yt picture, .yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  background: var(--c-orange); display: grid; place-items: center; box-shadow: 0 10px 30px rgb(0 0 0 / .4); transition: transform .2s var(--ease);
}
.yt-play::before { content: ""; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--c-ink); }
.yt:hover .yt-play, .yt:focus-visible .yt-play { transform: scale(1.06); }
.yt-label { position: absolute; left: 16px; bottom: 14px; font: 600 .8rem/1.3 var(--font-sans); background: rgb(13 14 16 / .8); color: #f2f3f5; padding: 7px 11px; border-radius: 4px; }
.yt-label small { font-size: 1em; color: #a8aeb7; }
.yt { background: var(--c-studio); box-shadow: var(--shadow-media); }
.yt--soon .yt-label { border: 1px dashed #a8aeb7; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- FAQ (nagłówek po lewej, pytania po prawej) ---------- */
.faq-layout { display: grid; gap: 0 64px; }
@media (min-width: 60rem) {
  .faq-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; }
  .faq-layout .section-head { position: sticky; top: calc(var(--header-h) + 24px); }
}
.faq { max-width: 53.75rem; }
.faq details { border-bottom: 1px solid var(--border); }
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font-weight: 600; font-size: 1.1rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--font-sans); color: var(--accent-text); transition: transform .2s var(--ease); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 4px 22px; color: var(--muted); max-width: 70ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- CTA ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 64px); isolation: isolate; display: grid; gap: 24px; align-items: center; }
@media (min-width: 60rem) { .cta-band { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; } }
.cta-band.tone-dark { --bg: var(--hero-bg); }
[data-theme="dark"] .cta-band.tone-dark { --bg: var(--c-ink); --border: var(--c-graphite-3); border: 1px solid var(--border); }
.cta-band::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; left: -160px; bottom: -300px; background: radial-gradient(circle, var(--glow), transparent 65%); }
/* Strona główna: pas z robotami (render bez tła) na całą szerokość pod tekstem, roboty „stoją” przy dolnej krawędzi */
@media (min-width: 60rem) { .cta-band--pas { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.cta-band--pas { padding-bottom: clamp(12px, 2vw, 24px); }
.cta-band--pas .cta-media { max-width: 62.5rem; width: 100%; justify-self: center; }
.cta-band h2 { max-width: 22ch; }
.cta-band p { color: var(--muted); max-width: 56ch; font-size: 1.1rem; }
.cta-media picture { border-radius: var(--radius-lg); overflow: hidden; }
.cta-media img { width: 100%; }
/* jasny motyw: render „-wtop” na karcie w kolorze tła renderu, więc nie widać krawędzi; ciemny: render w ramce */
.cta-media .is-studio { border-radius: 0; background: transparent; }
[data-theme="dark"] .cta-media .is-studio { border-radius: var(--radius-lg); border: 1px solid rgb(255 255 255 / .12); background: var(--c-paper-2); }

.other-model { display: grid; gap: 0; align-items: stretch; }
@media (min-width: 48rem) { .other-model { grid-template-columns: 1fr 1.2fr; } }
.other-model .card-media { background: var(--c-studio); }
.other-model img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Formularz ---------- */
.form-layout { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 62rem) { .form-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.form-card { padding: clamp(20px, 4vw, 40px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.form-grid { display: grid; gap: 18px 20px; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: .95rem; }
.req { color: var(--accent-text); }
.hint { font-size: .85rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--text) 35%, transparent); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: 1rem;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field input[aria-invalid="true"], .field.is-invalid input { border-color: #d92d20; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--text) 35%, transparent); border-radius: 999px; cursor: pointer; font-weight: 500; }
.choice input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .92rem; line-height: 1.5; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-orange); }
.consents { display: grid; gap: 14px; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius); }
.consents legend { padding: 0 6px; font-weight: 600; font-size: .95rem; }
.rodo { font-size: .85rem; color: var(--muted); margin-top: 20px; line-height: 1.55; }
.botcheck { display: none !important; }
.form-status { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); font-weight: 500; }
.form-status:empty { display: none; }
.form-status.is-success { background: #e7f6ec; color: #0f5132; border: 1px solid #9fd3b1; }
.form-status.is-error { background: #fdecea; color: #8a1c13; border: 1px solid #f1a9a2; }
.form-status.is-pending { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); }
button[disabled] { opacity: .65; cursor: progress; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contact-list dt { font: 600 .75rem/1.3 var(--font-sans); color: var(--muted); }
.contact-list dd { margin: 4px 0 0; font-weight: 600; font-size: 1.1rem; }

/* ---------- Stopka ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding-block: clamp(48px, 7vw, 80px) 32px; font-size: .95rem; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 60rem) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-brand img { width: 12.5rem; height: auto; margin-bottom: 16px; }
.footer-brand img.logo-trasa { width: auto; height: 4.5rem; }
.footer-brand p { color: var(--muted); max-width: 42ch; }
.footer-title { font: 600 .75rem/1.3 var(--font-sans); color: var(--muted); margin: 0 0 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links a { color: var(--text); text-decoration: none; display: inline-block; padding: 6px 0; }
.footer-links a:hover { color: var(--accent-text); text-decoration: underline; }
.footer-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: .88rem; display: grid; gap: 8px; }
.footer-legal p { margin: 0; }

/* ---------- Strona główna: „Jaki problem chcesz rozwiązać?” (zaraz pod hero) ----------
   Telefon: ikona po lewej, kafle jeden pod drugim. Komputer: 3 kolumny, link na dole kafla. Cały kafel jest linkiem. */
.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .problems { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 64rem) { .problems { grid-template-columns: repeat(3, 1fr); } }
.problems > li { display: flex; min-width: 0; }
.problem {
  flex: 1; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 14px; align-content: start;
  padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  color: var(--text); text-decoration: none; transition: border-color .25s var(--ease);
}
.problem:hover, .problem:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.problem .icon { grid-row: span 3; width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--accent-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.problem h3 { font-size: 1.1rem; margin: 0 0 .3em; }
.problem p { color: var(--muted); margin: 0 0 .6em; }
.problem .link-arrow { color: var(--accent-text); font-size: .95rem; }
.problem:hover .link-arrow::after { transform: translateX(3px); }
@media (min-width: 64rem) {
  .problem { display: flex; flex-direction: column; padding: 24px; }
  .problem .icon { width: 3rem; height: 3rem; margin-bottom: 16px; }
  .problem .link-arrow { margin-top: auto; }
}
.hero-meta a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: .25em; }
.hero-meta a:hover { color: var(--accent-text); }

/* ---------- Dwa filmy ochrony obok siebie (wózek widłowy + paleciak) ---------- */
.video-pair { display: grid; gap: clamp(32px, 4vw, 40px); }
@media (min-width: 60rem) { .video-pair { grid-template-columns: 1fr 1fr; } }
.video-pair > div { min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.video-pair-title { font-size: 1.15rem; margin: 0 0 12px; }

/* ---------- /dopasowanie/ ---------- */
.dop-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .dop-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .dop-grid { grid-template-columns: repeat(4, 1fr); } }
.dop-grid > * { scroll-margin-top: calc(var(--header-h) + 16px); }
.dop-fotos { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 60rem) { .dop-fotos { grid-template-columns: repeat(4, 1fr); } }
.dop-foto { margin: 0; min-width: 0; }
.dop-foto picture { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.dop-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dop-foto figcaption { margin-top: 10px; color: var(--muted); font-size: .95rem; }
/* funkcje w grupach tematycznych (siatka 1/2/3 kolumny), pod wszystkim przypis o konfiguracji na zamówienie */
.dop-grupy { display: grid; gap: 36px 56px; }
@media (min-width: 48rem) { .dop-grupy { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .dop-grupy { grid-template-columns: repeat(3, 1fr); } }
.dop-grupa h3 { font-size: 1.1rem; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.dop-funkcje { list-style: none; margin: 0; padding: 0; }
.dop-funkcje li { display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); break-inside: avoid; }
.dop-funkcje li::before { content: "✓"; font-weight: 700; color: var(--accent-text); }
.dop-przypis { margin: 32px 0 0; color: var(--muted); font-size: .95rem; }
.dop-hala { display: grid; gap: 16px; }
@media (min-width: 48rem) { .dop-hala { grid-template-columns: 1fr 1fr; } }
.dop-card { display: flex; flex-direction: column; padding: 14px 14px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.dop-card-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); margin-bottom: 16px; background: var(--bg-alt); border: 1px solid var(--border); }
.dop-card-media picture, .dop-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.dop-card-media .scene { height: 100%; border: 0; border-radius: 0; }
.dop-card h3 { font-size: 1.15rem; margin: 0 6px .35em; }
.dop-card p { color: var(--muted); margin: 0 6px; }

/* ---------- Wybór problemu (zakładki z automatem; strona robocza /podglad-start/) ----------
   Wspólne: zakładka = przycisk z ikoną, pełnym pytaniem (.pp-q) i skrótem (.pp-k) – wariant decyduje, co widać.
   Pasek postępu (.pp-bar) animuje main.js (Web Animations API, bez stylów inline). */
.pp-tabs { display: flex; gap: 8px; }
.pp-tab {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; flex: none;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  font: 500 .95rem/1.3 var(--font-sans); color: var(--text); text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.pp-tab:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.pp-tab:active { transform: scale(.98); }
.pp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-tab .icon { flex: none; width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: color .2s var(--ease); }
.pp-tab.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pp-tab.is-on .icon { color: var(--accent-text); }
.pp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.pp-tab:not(.is-on) .pp-bar { visibility: hidden; }
.pp-q, .pp-k { display: none; }
.pp-panel { display: grid; gap: 16px; }
.js .pp-panel:not(.is-on) { display: none; }
.js .pp-panel.is-on { animation: pp-in .5s var(--ease); }
@keyframes pp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pp-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--sc-bg); border: 1px solid var(--border); box-shadow: var(--shadow-media); }
.pp-media > .pp-vid { position: relative; height: 100%; }
.pp-vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-media > .scene { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.pp-media > .fm-scene { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); border-radius: 0; }
.pp-ans { display: grid; gap: 6px; justify-items: start; }
.pp-cap { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 8px 12px; border-radius: 4px; font: 600 .78rem/1 var(--font-sans);
  background: rgb(13 14 16 / .8); color: #f2f3f5; border: 1px solid var(--c-orange); pointer-events: none; }
.pp-odp { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.5; max-width: 42rem; }

/* Wymiana nadstawek (zakładka „Nasz proces jest nietypowy”): ten sam Pulse, linia skanu od dołu podmienia nadstawkę,
   na końcu kontur nowej nadstawki. 8 s w pętli (zmiana ok. 0,5 s); warstwa 4 = kopia warstwy 1, więc pętla jest bez przeskoku.
   Rendery mają przezroczyste tło, więc nadstawka wychodząca znika pod linią skanu (dolny inset), a nowa pojawia się
   pod nią (górny inset) – nigdy nie widać dwóch naraz. */
.mod-anim { position: absolute; inset: 0; overflow: hidden; background: var(--hero-bg); }
.mod-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mod-l--2, .mod-l--3, .mod-l--4 { clip-path: inset(100% 0 0 0); }
.mod-baza { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mod-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mod-kontur { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mod-kontur-ukryty { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 10; opacity: 0; }
.mod-pkt { fill: var(--accent); opacity: 0; }
.mod-pyt { font: 600 150px var(--font-sans); fill: var(--accent); opacity: 0; }
.mod-scan { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform: translateY(100%); opacity: 0; pointer-events: none;
  border-top: 3px solid var(--accent); box-shadow: 0 -10px 24px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .mod-l--1 { animation: mod-1 8s linear infinite; }
  .mod-l--2 { animation: mod-2 8s linear infinite; }
  .mod-l--3 { animation: mod-3 8s linear infinite; }
  .mod-l--4 { animation: mod-4 8s linear infinite; }
  .mod-scan { animation: mod-scan 8s linear infinite; }
  .mod-kontur { animation: mod-kontur 8s var(--ease) infinite; }
  .mod-kontur-ukryty, .mod-pkt { animation: mod-detal 8s linear infinite; }
  .mod-pyt { animation: mod-pyt 8s var(--ease) infinite; }
}
@keyframes mod-1 { 0%, 18% { clip-path: inset(0 0 0 0); } 24%, 100% { clip-path: inset(0 0 100% 0); } }
@keyframes mod-2 { 0%, 18% { clip-path: inset(100% 0 0 0); } 24%, 42% { clip-path: inset(0 0 0 0); } 48%, 100% { clip-path: inset(0 0 100% 0); } }
@keyframes mod-3 { 0%, 42% { clip-path: inset(100% 0 0 0); } 48%, 90% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 0 100% 0); } }
@keyframes mod-4 { 0%, 90% { clip-path: inset(100% 0 0 0); } 96%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mod-scan {
  0%, 17.9% { transform: translateY(100%); opacity: 0; } 18% { transform: translateY(100%); opacity: 1; } 24% { transform: translateY(0); opacity: 1; } 24.1%, 41.9% { opacity: 0; }
  42% { transform: translateY(100%); opacity: 1; } 48% { transform: translateY(0); opacity: 1; } 48.1%, 89.9% { opacity: 0; }
  90% { transform: translateY(100%); opacity: 1; } 96% { transform: translateY(0); opacity: 1; } 96.1%, 100% { opacity: 0; }
}
@keyframes mod-kontur { 0%, 49% { stroke-dashoffset: 1; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes mod-detal { 0%, 56% { opacity: 0; } 62%, 100% { opacity: .9; } }
@keyframes mod-pyt { 0%, 60% { opacity: 0; transform: translateY(20px); } 66%, 100% { opacity: 1; transform: none; } }

/* Podpowiedź pod nagłówkiem: że listę trzeba przeklikać */
.section-head .pp-hint { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 600 .9rem/1.3 var(--font-sans); color: var(--accent-text); }
.pp-hint-ikona { flex: none; width: 1.3rem; height: 1.3rem; fill: color-mix(in srgb, var(--accent) 20%, transparent); stroke: var(--accent-text); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) { .pp-hint-ikona { animation: pp-klik 2.4s var(--ease) infinite; } }
@keyframes pp-klik { 0%, 60%, 100% { transform: none; } 70% { transform: translate(2px, 2px) scale(.9); } 80% { transform: none; } }

/* B: lista po lewej, obraz po prawej. Telefon: przewijany rząd krótkich zakładek nad obrazem. */
.pp--lista { display: grid; gap: 20px; }
.pp--lista .pp-tabs { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-snap-type: x proximity; }
.pp--lista .pp-tabs::-webkit-scrollbar { display: none; }
.pp--lista .pp-tab { scroll-snap-align: start; }
.pp--lista .pp-k { display: inline; }
@media (min-width: 60rem) {
  .pp--lista { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .pp--lista .pp-tabs { flex-direction: column; gap: 0; overflow: visible; margin: 0; padding: 0; border-top: 1px solid var(--border); }
  .pp--lista .pp-tab { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; padding: 20px 16px 20px 12px; gap: 16px; font-size: 1.15rem; font-weight: 600; color: var(--muted);
    transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
  /* strzałka w każdym wierszu: widać, że wiersz jest do kliknięcia; w aktywnym wskazuje obraz po prawej */
  .pp--lista .pp-tab::after { content: "→"; margin-left: auto; padding-left: 12px; color: var(--accent-text); opacity: .3; transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .pp--lista .pp-tab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 4%, transparent); }
  .pp--lista .pp-tab:hover::after { opacity: .8; transform: translateX(3px); }
  .pp--lista .pp-tab.is-on { color: var(--text); background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 4px 0 0 var(--accent); }
  .pp--lista .pp-tab.is-on::after { opacity: 1; transform: translateX(6px); }
  .pp--lista .pp-tab .icon { width: 2.1rem; height: 2.1rem; }
  .pp--lista .pp-k { display: none; }
  .pp--lista .pp-q { display: inline; }
  /* prawa kolumna = wysokość listy: odpowiedź na górze, obraz wypełnia, co zostaje pod nią (każda zakładka tej samej wysokości) */
  .pp--lista { align-items: stretch; }
  .pp--lista .pp-panels { display: grid; }
  .pp--lista .pp-panel { grid-template-rows: auto minmax(0, 1fr); }
  .pp--lista .pp-media { aspect-ratio: auto; min-height: 20rem; }
}
/* ekran aplikacji w panelu zawsze w całości (bez kadrowania „sama mapa” z telefonu) */
.pp-media .fm-scene--flota { aspect-ratio: auto; }
.pp-media .fm-scene--flota > .fm-scene-in { width: auto; margin: 0; }
.pp-media:has(> .fm-scene) { background: #fff; }
.pp-media .scene-chip { top: 14px; bottom: auto; }   /* w panelu: podpisy taktów po lewej u góry, „animacja poglądowa” po prawej u góry */
@media (max-width: 47.99rem) { .pp-media .scene-chip { top: 10px; right: 10px; font-size: .6rem; padding: 5px 6px; } }
@media (max-width: 59.99rem) { .pp-media:has(> .fm-scene) { aspect-ratio: 1440 / 1024; } }   /* telefon: cały ekran aplikacji, bez przycinania */
/* komputer: panel ma wysokość listy, a ekran aplikacji jest wyższy, więc dopasowujemy go do wysokości panelu w całości
   (wcześniej był wyśrodkowany i przycięty u góry i u dołu); po bokach białe tło jak tło aplikacji */
@media (min-width: 60rem) {
  .pp--lista .pp-media:has(> .fm-scene) { container-type: size; }
  .pp--lista .pp-media > .fm-scene { top: 0; bottom: 0; transform: none; display: grid; place-items: center; }
  .pp--lista .pp-media .fm-scene--flota > .fm-scene-in { width: min(100cqw, 100cqh * 2400 / 1707); }   /* całość: mieści się i w szerokości, i w wysokości */
}

/* ---------- 404 ---------- */
.error-code { font: 600 clamp(5rem, 3rem + 10vw, 11rem)/1 var(--font-sans); color: var(--accent-text); margin-bottom: .1em; }

/* ---------- Animacje przy przewijaniu (tylko z JS i bez prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
  .js .reveal-stagger.is-visible > :nth-child(2) { transition-delay: .08s; }
  .js .reveal-stagger.is-visible > :nth-child(3) { transition-delay: .16s; }
  .js .reveal-stagger.is-visible > :nth-child(4) { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .cta-band, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

.zone-note { color: var(--muted); font-size: .92rem; }