/* =========================================================
   Botix.pl — arkusz stylów
   Motyw: „zeszyt inżyniera” — papier w kratkę, niebieski tusz
   z logo, bursztynowy akcent i zielony ekran LCD kostki robota.
   ========================================================= */

:root {
  --blue: #0A5FE6;          /* kolor logo */
  --blue-deep: #0742A8;
  --blue-ink: #06204F;
  --ink: #0E1A33;
  --ink-soft: #3B4766;      /* 8.9:1 na --paper */
  --paper: #F5F7FB;
  --paper-2: #EAF0FB;
  --card: #FFFFFF;
  --amber: #FFB21E;
  --amber-deep: #8A5300;    /* tekst na jasnym tle, 6:1 */
  --lcd: #B6C79A;
  --lcd-ink: #1E2914;
  --grid: rgba(10, 95, 230, .075);
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 1px 0 rgba(14,26,51,.06), 0 10px 30px -12px rgba(10,60,150,.25);

  --f-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Verdana", sans-serif;
  --f-pixel: "Silkscreen", "Courier New", monospace;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  /* papier w kratkę (drobna + gruba siatka) */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(rgba(10,95,230,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,95,230,.05) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--blue-deep); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--blue); }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 { font-family: var(--f-display); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 32px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: .6em 1em; border-radius: var(--radius-sm);
  transition: top .2s;
}
.skip:focus { top: 12px; color: #fff; }

.pix { font-family: var(--f-pixel); letter-spacing: .02em; }

/* Elementy do uzupełnienia przed publikacją — usuń klasę .todo, gdy wpiszesz treść */
.todo {
  background: repeating-linear-gradient(-45deg, rgba(255,178,30,.28) 0 6px, rgba(255,178,30,.14) 6px 12px);
  outline: 1.5px dashed var(--amber-deep);
  outline-offset: 1px;
  border-radius: 4px;
  padding: 0 .25em;
}

/* ---------- Przyciski ---------- */
.btn {
  --b: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  padding: .85em 1.35em;
  border-radius: 999px;
  background: var(--b); color: #fff; text-decoration: none;
  border: 2px solid var(--b);
  box-shadow: 0 4px 0 var(--blue-ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
  cursor: pointer;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 0 var(--blue-ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-ink); }
.btn-ghost { background: transparent; color: var(--blue-deep); box-shadow: 0 4px 0 rgba(6,32,79,.2); }
.btn-ghost:hover { background: #fff; color: var(--blue-deep); box-shadow: 0 6px 0 rgba(6,32,79,.2); }
.btn-small { font-size: .95rem; padding: .55em 1.05em; box-shadow: 0 3px 0 var(--blue-ink); }
.btn-amber { background: var(--amber); border-color: var(--amber); color: var(--ink); box-shadow: 0 4px 0 #9A6200; }
.btn-amber:hover { color: var(--ink); box-shadow: 0 6px 0 #9A6200; }

/* ---------- Nagłówek ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,247,251,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(10,95,230,.12);
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blue); }
.brand img { width: 52px; height: auto; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.brand:hover img { transform: rotate(-6deg) scale(1.06); }
.brand-name { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; color: var(--blue); }
.brand-tld { color: var(--ink-soft); font-weight: 600; font-size: .7em; margin-left: 1px; }

.nav { display: flex; align-items: center; gap: 22px; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav ul a {
  display: block; padding: .45em .75em; border-radius: 999px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .98rem;
}
.nav ul a:hover { background: var(--paper-2); color: var(--blue-deep); }
/* sekcja, którą właśnie czytasz (script.js) */
.nav ul a.is-active { background: var(--paper-2); color: var(--blue-deep); box-shadow: inset 0 0 0 1.5px rgba(10,95,230,.28); }

.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 12px;
  background: #fff; border: 2px solid var(--paper-2); cursor: pointer; position: relative;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  position: absolute; left: 50%; width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px;
  transform: translateX(-50%); transition: transform .25s, top .25s, opacity .2s;
}
.nav-toggle-bars { top: 50%; margin-top: -1px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; left: 0; transform: none; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); position: relative; overflow: hidden; }
.hero::before {
  /* duża „plama” światła za kostką */
  content: ""; position: absolute; right: -10%; top: -20%; width: 70vw; max-width: 900px; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(10,95,230,.16), rgba(10,95,230,0) 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; }

.eyebrow {
  display: inline-block; font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  color: var(--blue-deep); background: #fff; border: 1.5px solid rgba(10,95,230,.25);
  padding: .35em .9em; border-radius: 999px; margin-bottom: 1.3em;
}
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 800; letter-spacing: -.045em; line-height: .98; color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.hl {
  color: var(--blue);
  background: linear-gradient(transparent 68%, rgba(255,178,30,.55) 68% 92%, transparent 92%);
  padding: 0 .06em;
}
.lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 36em; margin: 1.1em 0 1.6em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.facts { list-style: none; padding: 0; margin: 2.2em 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.facts li { display: flex; align-items: baseline; gap: .55em; font-weight: 600; }
.facts-k { font-family: var(--f-pixel); font-size: .78rem; color: var(--blue-deep); text-transform: uppercase; }

/* Kostka robota z ekranem LCD */
.brick { margin: 0; position: relative; justify-self: center; width: min(420px, 100%); }
.brick-body {
  background: linear-gradient(160deg, #F9FBFF, #DCE5F5);
  border: 3px solid var(--blue);
  border-radius: 34px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 60px -28px rgba(7,66,168,.55), inset 0 -6px 0 rgba(10,95,230,.12);
  transform: rotate(-2.5deg);
  animation: bob 6s ease-in-out infinite;
}
.lcd {
  background: var(--lcd);
  background-image:
    linear-gradient(rgba(30,41,20,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,41,20,.06) 1px, transparent 1px),
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.35), transparent 60%);
  background-size: 6px 6px, 6px 6px, 100% 100%;
  border-radius: 12px;
  border: 6px solid #47536B;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.25);
  color: var(--lcd-ink);
  padding: 12px 14px 10px;
  font-family: var(--f-pixel);
}
.lcd-top, .lcd-bottom { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; letter-spacing: .04em; }
.lcd-bottom { justify-content: flex-start; gap: .5em; margin-top: 4px; }
.batt { width: 22px; height: 10px; border: 2px solid var(--lcd-ink); position: relative; }
.batt::before { content: ""; position: absolute; inset: 1px 6px 1px 1px; background: var(--lcd-ink); }
.batt::after { content: ""; position: absolute; right: -5px; top: 2px; width: 3px; height: 4px; background: var(--lcd-ink); }
.lcd-face { width: 100%; height: auto; margin: 6px 0; }
.lcd-face .px rect { fill: var(--lcd-ink); }
.eye-wink { opacity: 0; animation: wink 4.2s steps(1) infinite 1.4s; }
.eye-open { animation: open 4.2s steps(1) infinite 1.4s; }
.blink { animation: blink 1s steps(1) infinite; }

.brick-keys { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 18px 0 14px; }
.key { display: block; background: #6B7894; }
.key-l, .key-r { width: 38px; height: 26px; }
.key-l { clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.key-r { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.key-ok { width: 40px; height: 40px; border-radius: 10px; background: var(--amber); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.ports { display: flex; justify-content: center; gap: 10px; }
.ports span {
  font-family: var(--f-pixel); font-size: .75rem; color: #fff; background: var(--blue-ink);
  width: 34px; height: 22px; display: grid; place-items: center; border-radius: 4px 4px 2px 2px;
}

/* Program z bloczków NXT Studio przyklejony do kostki (rysuje go nxt-studio.js) */
.hero-code {
  /* górna krawędź tuż pod ekranem LCD (od dołu kostki do LCD jest ok. 115 px) */
  position: absolute; left: -56px; top: calc(100% - 100px); width: min(290px, 74%);
  filter: drop-shadow(0 16px 18px rgba(7,66,168,.30)) drop-shadow(0 2px 2px rgba(14,26,51,.18));
  pointer-events: none;
}
.hero-code .nb-svg { width: 100%; height: auto; overflow: visible; }

/* Bloczki NXT Studio (wspólne dla strony głównej, podglądu okna i strony 404) */
.nb-svg { max-width: none; }
.nb-t { fill: #fff; font: 600 12px "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.nb-v { fill: #1f2633; font: 600 12px "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.nb-i { color: #fff; }
.nb-snap .nb {
  transform-box: fill-box; transform-origin: 0 50%;
  animation: snap .5s cubic-bezier(.3,1.5,.5,1) both;
  animation-delay: calc(1s + var(--i, 0) * .18s);
}

/* ---------- Sekcje ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section-tint { background: rgba(234,240,251,.75); }
.section-blue {
  background-color: var(--blue-deep);
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #fff;
}
.section-blue a { color: #fff; }
.section-blue .kicker { color: #CFE0FF; }
.section-blue .kicker .pix { background: var(--amber); color: var(--ink); }
.section-blue .sec-lead { color: #DCE7FF; }

.sec-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.kicker {
  display: flex; align-items: center; gap: .7em;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem;
  color: var(--blue-deep); margin-bottom: 1em;
}
.kicker .pix { background: var(--blue); color: #fff; padding: .2em .5em; border-radius: 4px; font-size: .8rem; letter-spacing: .05em; }
.sec-lead { font-size: 1.15rem; color: var(--ink-soft); }

/* Porty 1–4: przebieg zajęć */
.ports-flow {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative;
}
.ports-flow::before {
  /* „kabel” łączący porty */
  content: ""; position: absolute; left: 6%; right: 6%; top: 15px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 20px);
  opacity: .8;
}
.ports-flow li {
  position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 48px 22px 22px; box-shadow: 6px 6px 0 var(--blue);
  transition: transform .2s, box-shadow .2s;
}
.ports-flow li:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--blue); }
.ports-flow li:nth-child(2) { box-shadow: 6px 6px 0 var(--amber); }
.ports-flow li:nth-child(2):hover { box-shadow: 9px 9px 0 var(--amber); }
.ports-flow li:nth-child(3) { box-shadow: 6px 6px 0 #7FA35A; }
.ports-flow li:nth-child(3):hover { box-shadow: 9px 9px 0 #7FA35A; }
.ports-flow p { color: var(--ink-soft); margin: 0; font-size: 1rem; }
.port-tag {
  position: absolute; top: 0; left: 20px; transform: translateY(-50%);
  font-family: var(--f-pixel); font-size: .78rem; background: var(--ink); color: #fff;
  padding: .45em .7em; border-radius: 6px;
}

/* NXT Studio */
.studio {
  margin-top: clamp(40px, 6vw, 64px);
  background: var(--ink); color: #E6ECFA; border-radius: 24px; padding: clamp(22px, 4vw, 40px);
  box-shadow: 10px 10px 0 var(--amber);
}
.studio h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: #fff; font-weight: 800; }
.studio p { margin: 0; color: #C9D3EA; }
.studio strong { color: #fff; }
.studio .kicker { color: var(--amber); margin-bottom: .7em; }
.studio-copy { max-width: 72ch; }
.studio-copy p + p { margin-top: .8em; }
.studio .studio-note { color: var(--amber); font-weight: 600; font-size: .95rem; }
.studio:has(.nxs-wrap[data-mode="compact"]) .studio-note { display: none; }
.studio-preview { margin: 28px 0 0; }

/* Okno NXT Studio. Wymiary i kolory jak w programie (app/Theme.cpp, MainWindow, ProgramView).
   Okno ma stałą „ekranową” szerokość, a nxt-studio.js zmniejsza je, żeby zmieściło się na stronie. */
.nxs-wrap { position: relative; }
.nxs {
  --nxs-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  container: nxs / inline-size;
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  font: 13px/1.25 var(--nxs-font); letter-spacing: 0; color: #e6edf6; text-align: left;
  background: #0b0f15; border: 1px solid #2b3647; border-radius: 10px; overflow: hidden;
  box-shadow: 0 34px 70px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.35);
  -webkit-user-select: none; user-select: none;
}
.nxs svg { max-width: none; }
.nxs-ic { display: block; flex: none; color: #c9d4e3; }

.nxs-title { height: 32px; display: flex; align-items: center; gap: 8px; padding-left: 10px; background: #0e131b; color: #9aa7b8; font-size: 12px; }
.nxs-title-ic svg { width: 16px; height: 16px; display: block; }
.nxs-caption { margin-left: auto; display: flex; height: 100%; }
.nxs-caption i { position: relative; width: 46px; height: 100%; }
.nxs-caption i::before, .nxs-caption i::after { content: ""; position: absolute; left: 50%; top: 50%; background: #c9d4e3; }
.nxs-min::before { width: 10px; height: 1px; margin-left: -5px; }
.nxs-max::before { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: none !important; border: 1px solid #c9d4e3; border-radius: 2px; box-sizing: border-box; }
.nxs-close::before, .nxs-close::after { width: 13px; height: 1px; margin-left: -6.5px; transform: rotate(45deg); }
.nxs-close::after { transform: rotate(-45deg); }

.nxs-header { position: relative; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; background: #0e131b; border-bottom: 1px solid #1d2633; }
.nxs-logo svg { width: 24px; height: 24px; display: block; }
.nxs-brand { font: 700 15px "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; margin-right: auto; white-space: nowrap; }
.nxs-tabs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 2px; padding: 3px; background: #141b26; border: 1px solid #222c3a; border-radius: 11px; }
.nxs-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; border-radius: 8px; color: #a7b4c6; font-weight: 600; white-space: nowrap; }
.nxs-tab.is-on { background: linear-gradient(#2a3a52, #223047); color: #fff; }
.nxs-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; background: #141b26; border: 1px solid #222c3a; border-radius: 13px; color: #a7b4c6; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nxs-chip.is-ok { color: #e6edf6; border-color: #275c45; }
.nxs-gear { padding: 5px; border-radius: 8px; }

.nxs-toolbar { height: 54px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #0f141c; border-bottom: 1px solid #1d2633; }
.nxs-name { flex: none; width: 240px; padding: 4px 8px; border: 1px solid transparent; font: 700 15px var(--nxs-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxs-count { color: #6f7f95; font-size: 12px; white-space: nowrap; }
.nxs-spacer { flex: 1; }
.nxs-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid transparent; border-radius: 9px; color: #a7b4c6; font-weight: 600; white-space: nowrap; }
.nxs-btn.nxs-only { padding: 7px 12px; }
.nxs-div { flex: none; width: 1px; height: 30px; background: #2b3647; margin: 0 4px; }
.nxs-run { background: linear-gradient(#4a96ff, #2f78ea); color: #fff; }
.nxs-run .nxs-ic { color: #fff; }

.nxs-body { display: flex; height: var(--nxs-body); }
.nxs-cats { flex: none; width: 96px; padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; background: #131a24; border-right: 1px solid #1d2633; overflow: hidden; }
.nxs-cat {
  flex: none; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 4px 0; border: 0; border-radius: 10px; background: transparent; color: #a7b4c6;
  font: 600 11px var(--nxs-font); cursor: pointer;
}
.nxs-cat:hover { background: #1a2331; color: #e6edf6; }
.nxs-cat.is-on { background: #212c3d; color: #fff; }
.nxs-dot { width: 15px; height: 15px; margin: 2.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--r); }
.nxs-pal {
  flex: none; width: var(--nxs-pal); overflow: hidden auto; background: #18212e; border-right: 1px solid #1d2633;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2b3647 transparent;
}
.nxs-pal::-webkit-scrollbar { width: 10px; }
.nxs-pal::-webkit-scrollbar-thumb { background: #2b3647; border: 2px solid #18212e; border-radius: 5px; }
.nxs-pal-svg, .nxs-cv-svg { display: block; }
.nxs-pal-h { fill: #c9d4e3; font: 700 14px "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.nxs-pal-btn { fill: #e6edf6; font: 600 13px "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; }
.nxs-canvas {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  background: #0f141c radial-gradient(circle, #243246 1.2px, transparent 1.5px) -11.4px -11.4px / 26.6px 26.6px;
}
.nxs-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 2px; padding: 4px; background: #1a2331; border: 1px solid #2b3647; border-radius: 10px; }
.nxs-zoom i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: #c9d4e3; font: 700 16px var(--nxs-font); font-style: normal; }
/* numerowane adnotacje Botix na płótnie (opisane w legendzie pod oknem) */
.nxs-note circle { fill: var(--amber); stroke: var(--ink); stroke-width: 2; }
.nxs-note text { fill: var(--ink); font: 700 12px var(--f-body); }

/* wąskie okno: zostaje samo płótno, które można przesuwać w bok */
.nxs[data-mode="compact"] .nxs-cats, .nxs[data-mode="compact"] .nxs-pal, .nxs[data-mode="compact"] .nxs-zoom { display: none; }
.nxs[data-mode="compact"] .nxs-canvas { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2b3647 transparent; }
@container nxs (max-width: 1000px) { .nxs-file { display: none; } }
@container nxs (max-width: 860px) { .nxs-chip:not(.is-ok) { display: none; } }
@container nxs (max-width: 700px) { .nxs-hist, .nxs-upload, .nxs-gear { display: none; } .nxs-name { width: auto; flex: 0 1 auto; } }
@container nxs (max-width: 560px) { .nxs-brand, .nxs-chip, .nxs-count { display: none; } .nxs-tab { padding: 6px 12px; } }

.nxs-legend { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px 22px; counter-reset: note; }
.nxs-legend li { position: relative; padding-left: 36px; color: #C9D3EA; font-size: .95rem; line-height: 1.5; }
.nxs-legend li::before {
  counter-increment: note; content: counter(note);
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--amber); color: var(--ink); font: 700 .8rem/24px var(--f-body); text-align: center;
}
.nxs-legend strong { display: block; color: #fff; font-family: var(--f-display); font-size: 1.02rem; margin-bottom: .15em; }
@media (max-width: 1100px) { .nxs-legend { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }

/* Program: trasa od pierwszego obrotu do własnego robota */
.journey { --n: 6; --pos: 0; position: relative; }
.road { position: relative; height: 96px; margin: 0 0 8px; }
.road-track {
  position: absolute; left: calc(100% / 12); right: calc(100% / 12); bottom: 14px; height: 12px; border-radius: 99px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 14px, transparent 14px 24px), rgba(255,255,255,.12);
}
.road-fill {
  height: 100%; border-radius: inherit; background: var(--amber);
  width: calc(var(--pos) / (var(--n) - 1) * 100%);
  transition: width 1.1s cubic-bezier(.5,0,.3,1);
  box-shadow: 0 0 18px rgba(255,178,30,.6);
}
.rover {
  position: absolute; bottom: 38px; width: 64px; height: 42px;
  left: calc((var(--pos) + .5) * 100% / var(--n) - 32px);
  transition: left 1.1s cubic-bezier(.5,0,.3,1);
}
.rover svg { width: 100%; height: 100%; overflow: visible; }
.rv-head { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.rv-ear { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.rv-eye { fill: var(--blue); }
.rv-line { fill: none; stroke: var(--blue); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.rover svg { animation: hover 2.2s ease-in-out infinite; transition: transform .3s; }
.rover::after {
  /* cień pod unoszącą się głową */
  content: ""; position: absolute; left: 50%; bottom: -14px; width: 34px; height: 6px; margin-left: -17px;
  border-radius: 50%; background: rgba(0,0,0,.28); animation: shadow 2.2s ease-in-out infinite;
}
.journey.moving .rover { transform: rotate(6deg); }
.rover { transition: left 1.1s cubic-bezier(.5,0,.3,1), transform .3s; transform-origin: 50% 100%; }
.road-flag {
  position: absolute; top: 0; font-size: .72rem; padding: .3em .55em; border-radius: 4px;
  background: rgba(255,255,255,.14); color: #DCE7FF;
}
.road-start { left: 0; }
.road-end { right: 0; background: var(--amber); color: var(--ink); }

.stops { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.stop {
  position: relative; text-align: center; padding: 22px 14px 20px; border-radius: var(--radius);
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.16);
  transition: background .4s, border-color .4s, transform .4s cubic-bezier(.3,1.5,.5,1);
}
.stop::before {
  /* znacznik na drodze */
  content: ""; position: absolute; left: 50%; top: -36px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: var(--blue-deep); border: 3px solid rgba(255,255,255,.5);
  transition: background .4s, border-color .4s;
}
.stop-icon {
  width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); transition: background .4s, transform .4s cubic-bezier(.3,1.6,.5,1);
}
.stop-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.stop-n { display: block; font-size: .78rem; color: #A9C2F5; margin-bottom: .4em; }
.stop h3 { font-size: 1.08rem; margin-bottom: .4em; }
.stop p { font-size: .92rem; color: #DCE7FF; margin: 0; line-height: 1.45; }

.stop.lit { background: rgba(255,255,255,.14); border-color: rgba(255,178,30,.7); }
.stop.lit::before { background: var(--amber); border-color: #fff; }
.stop.lit .stop-icon { background: var(--lcd); }
.stop.lit .stop-icon svg { stroke: var(--lcd-ink); }
.stop.current { transform: translateY(-6px); }
.stop.current .stop-icon { transform: scale(1.08) rotate(-4deg); }
.stop-final.lit { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.stop-final.lit p, .stop-final.lit .stop-n { color: var(--ink); }
.stop-final.lit::before { background: #fff; border-color: var(--amber); }

@keyframes hover { 50% { transform: translateY(-5px); } }
@keyframes shadow { 50% { transform: scaleX(.75); opacity: .6; } }

/* Projekty uczniów */
.projects { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.project {
  background: var(--card); border-radius: var(--radius); padding: 14px 14px 22px;
  border: 1.5px solid rgba(14,26,51,.1); box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.3,1.4,.5,1);
}
.project:hover { transform: translateY(-5px) rotate(-.6deg); }
.project h3, .project p, .project .tag, .project .chips, .project .link-arrow, .project .by { margin-inline: 8px; }
.project p { color: var(--ink-soft); font-size: .98rem; }
.project img { border-radius: 12px; aspect-ratio: 12 / 7; object-fit: cover; width: 100%; margin-bottom: 16px; }
.thumb {
  aspect-ratio: 12 / 7; border-radius: 12px; margin-bottom: 16px;
  background: var(--lcd);
  background-image: linear-gradient(rgba(30,41,20,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(30,41,20,.07) 1px, transparent 1px);
  background-size: 8px 8px;
  border: 5px solid #47536B; display: grid; place-items: center; overflow: hidden;
}
.thumb svg { width: 86%; height: auto; overflow: visible; }
.thumb .line { fill: none; stroke: var(--lcd-ink); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 6 5; }
.thumb .bot { fill: var(--blue); stroke: var(--lcd-ink); stroke-width: 2.5; }
.thumb .bot-2 { fill: var(--amber); }
.thumb .motion-live { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .thumb .motion-live { display: inline; }
  .thumb .motion-still { display: none; }
  .line-follower { animation: follow-fade 3.6s linear infinite; }
  .sumo-left { --charge: 8px; --recoil: -4px; animation: sumo-impact 2.8s infinite; }
  .sumo-right { --charge: -8px; --recoil: 4px; animation: sumo-impact 2.8s infinite; }
  .thumb .tilt { animation: balance 2.4s ease-in-out infinite; }
}
@keyframes follow-fade { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }
@keyframes sumo-impact {
  0%, 12%, 82%, 100% { transform: translateX(0); }
  40% { transform: translateX(var(--charge)); }
  52% { transform: translateX(var(--recoil)); }
  63% { transform: translateX(var(--charge)); }
  72% { transform: translateX(var(--recoil)); }
}
.sorter-bin { fill: none; stroke: var(--lcd-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sorter-ball { stroke: var(--lcd-ink); stroke-width: 1.5; }
.sorter-blue { fill: var(--blue); --entry-x: 30px; }
.sorter-amber { fill: var(--amber); --entry-x: -30px; }
@media (prefers-reduced-motion: no-preference) {
  .sorter-ball { animation: sort-ball 3.6s linear infinite; }
  .sorter-amber { animation-delay: -1.8s; }
}
@keyframes sort-ball {
  0% { transform: translate(var(--entry-x), -50px); opacity: 0; }
  7% { opacity: 1; }
  15% { transform: translate(var(--entry-x), -28px); }
  19% { transform: translate(var(--entry-x), -28px); }
  32% { transform: translate(0, -16px); }
  40%, 77% { transform: translate(0, 0); opacity: 1; }
  88%, 100% { transform: translate(0, 0); opacity: 0; }
}
.thumb .wall { fill: var(--lcd-ink); }
.shooter .ground { stroke: var(--lcd-ink); stroke-width: 2.5; stroke-linecap: round; opacity: .5; }
.shooter .solid { fill: none; stroke: var(--lcd-ink); stroke-width: 3; stroke-linecap: round; }
.shooter .track { fill: var(--lcd-ink); }
.shooter .wheel { fill: var(--lcd); }
.shooter .barrel { fill: var(--lcd-ink); }
.shooter .barrel-tip { fill: var(--blue-ink); }
.shooter .target { fill: #fff; stroke: var(--lcd-ink); stroke-width: 2.5; }
.shooter .target-ring { fill: none; stroke: #D64545; stroke-width: 3; }
.shooter .target-mid { fill: #D64545; }
.shooter .ball { fill: var(--amber); stroke: var(--lcd-ink); stroke-width: 1.5; }
.thumb .tilt { transform-box: view-box; transform-origin: 60px 52px; }
.balancer-axle { stroke: var(--lcd-ink); stroke-width: 4; }
.balancer-wheel { fill: var(--lcd-ink); }
.balancer-hub { fill: var(--lcd); }
@keyframes balance { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.avatar .pix { font-size: 1.5rem; }
.project:hover .thumb .obstacle-bot { animation: wiggle .6s ease-in-out; transform-box: fill-box; transform-origin: center; }
.thumb-cta { background: var(--paper-2); border-color: var(--blue); border-style: dashed; }
.thumb-cta .pix { font-size: 3.4rem; color: var(--blue); animation: blink 1.6s steps(1) infinite; }

.tag {
  align-self: flex-start; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--blue-deep); background: var(--paper-2); padding: .3em .7em; border-radius: 999px; margin-bottom: .9em;
}
.tag-amber { background: #FFE9BF; color: var(--amber-deep); }
.tag-real { background: var(--blue); color: #fff; }
.by { font-weight: 700; color: var(--blue-deep) !important; margin-top: -.3em; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; margin-bottom: 0; }
.chips li { font-size: .8rem; font-weight: 600; border: 1.5px solid rgba(14,26,51,.18); padding: .15em .65em; border-radius: 999px; color: var(--ink-soft); }
.link-arrow { margin-top: auto; font-weight: 700; font-family: var(--f-display); }
.link-arrow::after { content: " →"; display: inline-block; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }
.project-cta { background: linear-gradient(170deg, #fff, #FFF6E3); border: 2px dashed var(--amber-deep); }

.note {
  margin: 36px 0 0; padding: 18px 22px; border-left: 5px solid var(--amber);
  background: #fff; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; max-width: 820px; color: var(--ink-soft);
}
.note strong { color: var(--ink); }

/* Strona: Projekty uczniów */
.nav ul a[aria-current="page"] { background: var(--blue); color: #fff; }
.gal-title { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; letter-spacing: -.04em; }
.gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.shot figure { margin: 0; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); height: 100%; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.shot:nth-child(odd) figure { transform: rotate(-.6deg); }
.shot:nth-child(even) figure { transform: rotate(.6deg); }
.shot figure:hover { transform: rotate(0) translateY(-4px); }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot figcaption { padding: 18px 20px 22px; }
.shot h2 { font-size: 1.25rem; margin-bottom: .3em; }
.shot p { margin: 0 0 .4em; color: var(--ink-soft); }
.gallery-empty {
  grid-column: 1 / -1; text-align: center; padding: clamp(36px, 6vw, 64px) 24px;
  border: 3px dashed rgba(10,95,230,.35); border-radius: 24px; background: rgba(255,255,255,.7);
}
.gallery-empty h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.gallery-empty p { color: var(--ink-soft); margin: 0; }
.cam {
  width: 120px; height: 90px; margin: 0 auto 20px; border-radius: 16px; display: grid; place-items: center;
  background: var(--lcd); border: 5px solid #47536B; transform: rotate(-4deg);
}
.cam svg { width: 64px; fill: none; stroke: var(--lcd-ink); stroke-width: 3.5; stroke-linejoin: round; }

/* O nas */
.team { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.person { display: flex; gap: 20px; background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); align-items: flex-start; }
.person h3 { display: inline-block; }
.person p { color: var(--ink-soft); margin: 0; }
.role { font-weight: 700; color: var(--blue-deep) !important; margin-bottom: .5em !important; font-size: .95rem; }
.avatar {
  flex: none; width: 84px; height: 84px; border-radius: 22px; background: var(--blue);
  display: grid; place-items: center; color: #fff; font-size: 1.8rem; transform: rotate(-4deg);
  box-shadow: 4px 4px 0 var(--ink);
}
.avatar-2 { background: var(--amber); color: var(--ink); transform: rotate(4deg); }
/* Zdjęcie zamiast inicjałów: kolorowa ramka zostaje widoczna wokół zdjęcia */
.avatar-photo { padding: 4px; overflow: hidden; }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }

/* Terminy */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin: 0; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: #fff; }
.spec > div { padding: 20px 22px; border-right: 2px dashed rgba(14,26,51,.18); }
.spec > div:last-child { border-right: 0; }
.spec dt { font-family: var(--f-pixel); font-size: .78rem; color: var(--blue-deep); margin-bottom: .5em; }
.spec dd { margin: 0; font-weight: 700; font-family: var(--f-display); font-size: 1.1rem; display: inline-block; }
.fineprint { margin-top: 18px; color: var(--ink-soft); font-size: .98rem; }

/* Cennik */
.squad { margin: 0 0 clamp(36px, 5vw, 56px); background: #fff; border: 2px solid var(--ink); border-radius: 24px; padding: clamp(20px, 3vw, 32px); box-shadow: 8px 8px 0 var(--blue); }
.squad-teams { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 2vw, 22px); }
.squad-teams li {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 6px; justify-items: center; align-items: end;
  padding: 14px 10px 12px; border-radius: 16px; background: var(--paper-2);
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.squad-teams li:nth-child(2) { animation-delay: .08s; } .squad-teams li:nth-child(3) { animation-delay: .16s; }
.squad-teams li:nth-child(4) { animation-delay: .24s; } .squad-teams li:nth-child(5) { animation-delay: .32s; }
.kid { position: relative; width: 22px; height: 30px; }
.kid::before { content: ""; position: absolute; left: 50%; top: 0; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--blue); }
.kid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 11px 11px 4px 4px; background: var(--blue); }
.kid:nth-child(2)::before, .kid:nth-child(2)::after { background: var(--amber); }
.kid:nth-child(3)::before, .kid:nth-child(3)::after { background: #6E8F4C; }
.kit { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 4px; }
.mini-brick { flex: none; width: 44px; height: 34px; border-radius: 8px; background: var(--lcd); border: 4px solid #47536B; }
/* szkolny laptop: ekran + podstawa */
.mini-pc {
  position: relative; flex: none; width: 38px; height: 26px; margin-bottom: 6px;
  border: 3px solid #47536B; border-radius: 4px 4px 0 0; background: linear-gradient(160deg, #F3F7FF, #CFE0FF);
}
.mini-pc::after { content: ""; position: absolute; left: -10px; right: -10px; top: calc(100% + 3px); height: 5px; border-radius: 0 0 5px 5px; background: #47536B; }
.squad-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; font-weight: 700; font-size: 1.05rem; }
.squad-cap b { font-size: 1.5rem; color: var(--blue); font-weight: 400; margin-right: .2em; }
.squad-x { font-family: var(--f-pixel); color: var(--ink-soft); font-size: 1.3rem; }

.plans { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@property --plan-trace {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.plan {
  --plan-outline: var(--blue);
  position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 22px;
  padding: 28px 24px 24px; border: 2px solid rgba(14,26,51,.12); box-shadow: var(--shadow);
  transition: scale .28s ease, translate .28s ease;
}
.plan-featured {
  --plan-outline: var(--amber);
  border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--amber); transform: translateY(-8px);
}
.plan::before {
  content: "";
  position: absolute;
  inset: -3px;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(var(--plan-outline) 0deg var(--plan-trace), transparent var(--plan-trace) 360deg);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: --plan-trace .48s ease;
}
.plan:has(:focus-visible) { z-index: 1; }
.plan:has(:focus-visible)::before { --plan-trace: 360deg; }
@media (hover: hover) {
  .plan:hover { z-index: 1; }
  .plan:hover::before { --plan-trace: 360deg; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan:hover { scale: 1.035; translate: 0 -4px; }
}
.plan-badge {
  position: absolute; top: 0; left: 24px; z-index: 1; transform: translateY(-50%);
  background: var(--ink); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .35em .8em; border-radius: 999px;
}
.plan-name { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; margin-bottom: .4em; }
.plan-price { font-family: var(--f-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -.03em; color: var(--blue); line-height: 1.1; margin-bottom: .5em; }
.plan-price small { font-size: .95rem; color: var(--ink-soft); font-weight: 600; letter-spacing: 0; }
.plan-price-text { font-size: 1.6rem; }
.plan-desc { color: var(--ink-soft); font-size: .98rem; }
.plan-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; font-size: .97rem; }
.plan-list li { padding-left: 26px; position: relative; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 4px; background: var(--lcd); box-shadow: inset 0 0 0 2px #47536B; }
.plan .btn { margin-top: auto; }

.included { margin-top: 32px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
.included > div { background: #fff; border-radius: 18px; padding: 22px 24px; border: 2px dashed rgba(14,26,51,.18); }
.included h3 { font-size: 1.1rem; }
.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tick-list li { padding-left: 28px; position: relative; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700; }
.tick-list-plain li::before { content: "→"; color: var(--amber-deep); }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: var(--radius-sm); border: 2px solid transparent; box-shadow: var(--shadow); transition: border-color .2s; }
.faq details[open] { border-color: var(--blue); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative;
  font-family: var(--f-display); font-weight: 700; font-size: 1.12rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-pixel); font-size: 1.3rem; color: var(--blue); width: 28px; height: 28px;
  display: grid; place-items: center; background: var(--paper-2); border-radius: 8px; transition: transform .25s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 20px; margin: 0; color: var(--ink-soft); }
.faq-body { padding: 0 22px 20px; color: var(--ink-soft); }
.faq-body p { padding: 0 !important; margin: 0 0 .8em !important; }
.faq-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: .6em; }
.faq-body strong { color: var(--ink); }
.faq details p.todo { margin: 0 22px 20px; padding: 4px 8px; }

/* Zapisy */
.zapisy-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.zapisy-grid .sec-head { margin-bottom: 0; }
.mail { font-weight: 700; }
.steps-h { font-size: 1.2rem; margin: 1.7em 0 .9em; color: #fff; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.steps li { position: relative; min-height: 32px; padding: 3px 0 0 48px; color: #DCE7FF; line-height: 1.5; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; background: var(--amber); color: var(--ink); font-family: var(--f-pixel); font-size: .85rem;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 36px; bottom: -12px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 4px, transparent 4px 8px);
}
.steps strong { color: #fff; }
.form {
  background: #fff; color: var(--ink); border-radius: 24px; padding: clamp(22px, 3vw, 36px);
  box-shadow: 10px 10px 0 var(--blue-ink); border: 2px solid var(--ink);
}
.form a { color: var(--blue-deep); }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--ink-soft); }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: .7em .9em; border-radius: 12px; border: 2px solid #8C97AE; background: var(--paper);
  transition: border-color .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); background: #fff; outline: 3px solid rgba(10,95,230,.25); outline-offset: 0; }
[aria-invalid="true"] { border-color: #B3261E !important; }
textarea { resize: vertical; }
.hint { font-size: .9rem; color: var(--ink-soft); margin: 6px 0 0; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 18px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--blue); cursor: pointer; }
.check label { font-size: .97rem; }
.form-error { color: #B3261E; font-weight: 700; margin: 0 0 14px; }
.form .btn { width: 100%; }

/* Stopka */
.site-footer { background: var(--ink); color: #C9D3EA; padding: 56px 0 28px; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.brand-foot .brand-name { color: #fff; }
.brand-foot .brand-tld { color: #9FB0D3; }
.brand-foot img { filter: brightness(0) invert(1); }
.foot-small { margin-top: .6em; }
.foot-h { font-family: var(--f-pixel); font-size: .8rem; font-weight: 400; letter-spacing: .05em; color: var(--amber); margin-bottom: 1em; }
address { font-style: normal; line-height: 1.8; }
.site-footer .todo { color: var(--ink); background: #FFD98A; outline-color: var(--amber); }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .4em; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 22px; font-size: .88rem; color: #A9B6D3; }
.foot-legal p { margin-bottom: .5em; }

/* ---------- Strony dokumentów ---------- */
.doc { padding: clamp(40px, 6vw, 80px) 0 96px; }
.doc-card { background: #fff; border-radius: 24px; padding: clamp(24px, 5vw, 64px); box-shadow: var(--shadow); border: 1.5px solid rgba(14,26,51,.08); }
.doc h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; }
.doc h2 { font-size: 1.45rem; margin-top: 2em; }
.doc h3 { font-size: 1.1rem; margin-top: 1.4em; }
.doc li { margin-bottom: .4em; }
.doc .meta { color: var(--ink-soft); }
.doc .warn {
  background: #FFF4DC; border: 2px dashed var(--amber-deep); border-radius: 14px; padding: 16px 20px; margin: 1.4em 0 2em; color: #4D3300;
}
.doc table { border-collapse: collapse; width: 100%; font-size: .98rem; margin: 1em 0; display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; border: 1px solid #D5DCEA; padding: .6em .8em; vertical-align: top; }
.doc th { background: var(--paper-2); }
.doc .form-wzor { background: var(--paper); border: 1.5px solid #D5DCEA; border-radius: 12px; padding: 18px 22px; }
.doc ol ul, .doc li ul { margin-top: .4em; }
.toc { background: var(--paper); border: 1.5px solid #D5DCEA; border-radius: 14px; padding: 18px 22px; margin: 0 0 1.5em; }
.toc-h { font-family: var(--f-pixel); font-size: .8rem; color: var(--blue-deep); margin-bottom: .6em; }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: .3em; break-inside: avoid; }
@media (max-width: 620px) { .toc ol { columns: 1; } }
.doc h2[id] { scroll-margin-top: 90px; }
.back { display: inline-flex; gap: .4em; font-weight: 700; margin-bottom: 1.4em; }

/* ---------- Strona 404 ---------- */
.lost { min-height: calc(100vh - 150px); min-height: calc(100svh - 150px); display: grid; align-items: center; }
.lost-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lost-copy .sec-lead { max-width: 34em; }
.lost-art { width: min(380px, 100%); margin-bottom: 120px; }
.lost-art .hero-code { width: min(300px, 80%); }
.lost-links { list-style: none; padding: 0; margin: 1.8em 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }
.lost-links a::before { content: "→ "; color: var(--blue); }

/* ---------- Animacje ---------- */
.reveal { opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d, 0) * .12s + .1s); }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes snap { from { opacity: 0; transform: translateX(-24px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-8px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes wink { 0%, 72% { opacity: 0; } 73%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes open { 0%, 72% { opacity: 1; } 73%, 95% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes wiggle { 25% { transform: translateX(4px) rotate(4deg); } 75% { transform: translateX(-4px) rotate(-4deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .nb-snap .nb { animation: none; }
  .eye-wink { opacity: 1; } .eye-open { opacity: 0; }
}

/* ---------- Responsywność ---------- */
@media (max-width: 980px) {
  .hero-grid, .lost-grid { grid-template-columns: 1fr; }
  .brick { width: min(380px, 88%); margin-top: 12px; margin-bottom: 136px; }
  .ports-flow { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .ports-flow::before { display: none; }
  /* trasa pionowa */
  .road { display: none; }
  .stops { grid-template-columns: 1fr; gap: 14px; padding-left: 34px; position: relative; }
  .stops::before {
    content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 6px; border-radius: 6px;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.4) 0 12px, transparent 12px 20px);
  }
  .stop { text-align: left; display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; padding: 16px; align-items: start; }
  .stop::before { left: -33px; top: 50%; margin: -8px 0 0; }
  .stop-icon { grid-row: span 3; width: 64px; height: 64px; margin: 0; }
  .stop-icon svg { width: 38px; height: 38px; }
  .stop.current { transform: translateX(4px); }
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .plan-featured { transform: none; }
  .included { grid-template-columns: 1fr; }
  .zapisy-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 12px;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    padding: 12px 16px 20px; display: none;
  }
  .nav.open { display: flex; }
  .nav ul { flex-direction: column; }
  .nav ul a { padding: .7em .8em; font-size: 1.05rem; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .ports-flow, .team, .footer-grid { grid-template-columns: 1fr; }
  .hero-code { left: -10px; width: min(250px, 74%); }
  .brick { margin-bottom: 112px; }
  .studio { padding: 22px 14px 24px; box-shadow: 6px 6px 0 var(--amber); }
  .studio-copy { padding-inline: 6px; }
  .nxs-legend { grid-template-columns: 1fr; padding-inline: 6px; }
  .kit { gap: 6px; }
  .mini-brick { width: 32px; height: 26px; border-width: 3px; border-radius: 6px; }
  .mini-pc { width: 28px; height: 20px; border-width: 2.5px; margin-bottom: 5px; }
  .mini-pc::after { left: -6px; right: -6px; height: 4px; top: calc(100% + 2.5px); }
  .person { flex-direction: column; }
  .spec > div { border-right: 0; border-bottom: 2px dashed rgba(14,26,51,.18); }
  .spec > div:last-child { border-bottom: 0; }
  .hero-cta .btn { width: 100%; }
  .squad-teams { display: flex; flex-wrap: wrap; justify-content: center; }
  .squad-teams li { width: calc((100% - 2 * 10px) / 3); }
  .squad-cap { font-size: .95rem; flex-direction: column; gap: 2px; }
  .squad-x { display: none; }
}