/* Lab new2-scroll, S1 „Sygnał”: strona główna PROOP jako jedna linia sygnału (wzór: lab Sygnał z C4PL).
   Style strony (site.css z new/dist) bez zmian: nagłówek, hero z centralą i stopka są te same co na new.proop.pl.
   Tu: linia sygnału i węzły, pasy z oknami (tekst i grafika naprzemiennie), kroki, zakres, rozmowa.
   Sekcje jasne i ciemne na przemian (zasada 12). Barwy wyłącznie w tokenach w :root. */
:root {
  /* linia sygnału: osobno na ciemnym i na jasnym tle (gradienty liczy s1.js z tych tokenów) */
  --sg-base-d: rgba(150, 180, 245, .26);
  --sg-base-l: rgba(10, 31, 68, .16);
  --sg-lit-d: #37cce3;
  --sg-lit-l: #2a6c8e;
  --sg-tail-d: #e9fbff;
  --sg-tail-l: #fd820a;
  --sg-halo-d: rgba(55, 204, 227, .55);
  --sg-halo-l: rgba(253, 130, 10, .45);
  --sg-halo-0: rgba(55, 204, 227, 0);
  --sg-dot-d: #f5f9ff;
  --sg-dot-l: #fd820a;
  /* węzły */
  --sg-node-bg-d: #071733;
  --sg-node-bg-l: #ffffff;
  --sg-node-ring-d: rgba(150, 180, 245, .5);
  --sg-node-ring-l: rgba(10, 31, 68, .28);
  --sg-node-in-d: rgba(150, 180, 245, .4);
  --sg-node-in-l: rgba(10, 31, 68, .25);
  --sg-node-on-d: #37cce3;
  --sg-node-on-l: #2a6c8e;
  --sg-node-hi-d: #9ff0fb;
  --sg-node-glow-d: rgba(55, 204, 227, .85);
  --sg-node-glow-l: rgba(42, 108, 142, .55);
  --sg-node-halo-d: rgba(55, 204, 227, .12);
  --sg-node-halo-l: rgba(42, 108, 142, .12);
  /* sekcje */
  --sg-dark: #061530;
  --sg-dark-2: #0a1f44;
  --sg-dark-glow: rgba(42, 108, 142, .32);
  --sg-dark-glow-2: rgba(55, 204, 227, .1);
  --sg-dark-warm: rgba(253, 130, 10, .1);
  --sg-light: #f5f9ff;
  --sg-light-2: #ffffff;
  --sg-dot-grid: rgba(150, 178, 255, .1);
  --sg-dot-grid-l: rgba(10, 31, 68, .07);
  --sg-ink-d: #f5f9ff;
  --sg-ink-d2: #c9d5ea;
  --sg-ink-l: #0a1f44;
  --sg-ink-l2: #4d5d7e;
  --sg-line-d: rgba(150, 180, 245, .16);
  --sg-line-l: #dbe6f7;
  /* okna */
  --sg-win-a: #12305f;
  --sg-win-b: #061530;
  --sg-win-glass-a: rgba(38, 60, 118, .5);
  --sg-win-glass-b: rgba(8, 18, 42, .88);
  --sg-win-line: rgba(160, 190, 255, .2);
  --sg-win-hi: rgba(255, 255, 255, .08);
  --sg-win-shadow: rgba(3, 10, 26, .6);
  --sg-win-shadow-l: rgba(10, 31, 68, .35);
  --sg-win-dot: rgba(160, 190, 255, .34);
  --sg-win-dot-on: #37cce3;
  --sg-win-ink: #f5f9ff;
  --sg-win-ink-2: #b9c6dc;
  --sg-win-card: rgba(255, 255, 255, .06);
  --sg-win-card-line: rgba(255, 255, 255, .16);
  --sg-win-faint: rgba(185, 198, 220, .35);
  --sg-x: #ffb35c;
  --sg-x-bg: rgba(253, 130, 10, .14);
  --sg-ok: #37cce3;
  --sg-ok-bg: rgba(55, 204, 227, .14);
  --sg-proop-bg: #ffffff;
  --sg-proop-ink: #0a1f44;
  --sg-proop-tag: #e6f3fa;
  --sg-proop-tag-ink: #1d5675;
  --sg-tel: #fd820a;
  --sg-cell: rgba(255, 255, 255, .06);
  --sg-cell-line: rgba(255, 255, 255, .1);
  --sg-cell-on-a: #fd820a;
  --sg-cell-on-b: #ffc534;
  --sg-cell-on-ink: #061530;
  --sg-cell-glow: rgba(253, 130, 10, .45);
  --sg-years-track: rgba(255, 255, 255, .12);
  /* zakres */
  --sg-mod-bg: #ffffff;
  --sg-mod-line: #dbe6f7;
  --sg-mod-hover: #2a6c8e;
  --sg-mod-ico-bg: #e6f3fa;
  --sg-mod-shadow: rgba(10, 31, 68, .14);
  --sg-mod-glow: rgba(55, 204, 227, .14);
  /* przycisk na końcu linii, pasek labu */
  --sg-end-line: rgba(253, 130, 10, .7);
  --sg-end-bg: rgba(253, 130, 10, .08);
  --sg-end-ring: rgba(253, 130, 10, .55);
  --sg-end-ring-0: rgba(253, 130, 10, 0);
  --sg-lab-bg: rgba(6, 21, 48, .9);
  --sg-lab-line: rgba(55, 204, 227, .5);
  --sg-lab-ink: #c7f3fb;
  --sg-lab-hover: rgba(55, 204, 227, .16);
  --sg-focus: #fd820a;
  --sg-mask: #000000;

  --sg-rail: 30px;
  --sg-node: 12px;
  --sg-ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 960px) { :root { --sg-rail: 64px; --sg-node: 14px; } }

/* ---------- warstwa sygnału ---------- */
.sg-main { position: relative; isolation: isolate; }
.sg-sig { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.sg-sig path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sg-sig__base { stroke: url(#sg-g-base); stroke-width: 1.25; }
.sg-sig__glow { stroke: url(#sg-g-lit); stroke-width: 7; opacity: .14; }
.sg-sig__lit { stroke: url(#sg-g-lit); stroke-width: 1.9; }
.sg-sig__tail { stroke: url(#sg-g-tail); stroke-width: 2.2; opacity: .5; }
.sg-sig__tail2 { stroke: url(#sg-g-tail); stroke-width: 2.6; }
.sg-sig__head { opacity: 0; transition: opacity .3s; }
.sg-sig.is-run .sg-sig__head { opacity: 1; }
.sg-sig__halo { fill: url(#sg-halo-d); }
.sg-sig__dot { fill: var(--sg-dot-d); }
.sg-sig.is-l .sg-sig__halo { fill: url(#sg-halo-l); }
.sg-sig.is-l .sg-sig__dot { fill: var(--sg-dot-l); }

/* węzeł: pierścień z punktem; zapala się, gdy dotrze do niego sygnał */
.sg-node { position: absolute; left: 0; top: 0; z-index: 3; width: var(--sg-node); height: var(--sg-node); border-radius: 50%;
  background: var(--sg-node-bg-d); border: 1.5px solid var(--sg-node-ring-d); transition: border-color .35s, box-shadow .35s; }
.sg-node::before { content: ""; position: absolute; inset: calc(var(--sg-node) * .22); border-radius: 50%; background: var(--sg-node-in-d);
  transition: background-color .35s, box-shadow .35s; }
.sg-node::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--sg-node-on-d); opacity: 0; pointer-events: none; }
.sg-node.is-lit, html:not(.js) .sg-node { border-color: var(--sg-node-on-d); box-shadow: 0 0 0 4px var(--sg-node-halo-d); }
.sg-node.is-lit::before, html:not(.js) .sg-node::before { background: var(--sg-node-hi-d); box-shadow: 0 0 10px 1px var(--sg-node-glow-d); }
.sg-node.is-ping::after { animation: sg-ping .9s var(--sg-ease) 1; }
@keyframes sg-ping { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.6); opacity: 0; } }
.sg-sec--l .sg-node { background: var(--sg-node-bg-l); border-color: var(--sg-node-ring-l); }
.sg-sec--l .sg-node::before { background: var(--sg-node-in-l); }
.sg-sec--l .sg-node::after { border-color: var(--sg-node-on-l); }
.sg-sec--l .sg-node.is-lit, html:not(.js) .sg-sec--l .sg-node { border-color: var(--sg-node-on-l); box-shadow: 0 0 0 4px var(--sg-node-halo-l); }
.sg-sec--l .sg-node.is-lit::before, html:not(.js) .sg-sec--l .sg-node::before { background: var(--sg-node-on-l); box-shadow: 0 0 8px 1px var(--sg-node-glow-l); }

/* początek linii: krawędź koła PROOP (od 761 px) albo port pod centralą (telefon) */
.sg-port { position: absolute; width: 2px; height: 2px; pointer-events: none; }
.sg-port--hub { left: 50%; top: calc(50% + var(--disc) / 2); margin: -1px 0 0 -1px; }
.sg-port--m { display: none; }
@media (max-width: 760px) {
  .sg-port--hub { display: none; }
  .sg-port--m { display: block; position: relative; grid-column: 1 / -1; justify-self: center; margin-top: 8px; }
}

/* szyna: oś A niesie linię i węzły, oś B (A + --sg-rail) niesie treść */
.sg-rail { position: relative; padding-left: var(--sg-rail); }
.sg-rail > .sg-node { top: calc(12.5px * 1.5 / 2 - var(--sg-node) / 2); }
html:not(.js) .sg-rail::before, html:not(.js) .sg-step::before {
  content: ""; position: absolute; left: calc(var(--sg-node) / 2 - .75px); top: var(--sg-node); bottom: -24px; width: 1.5px;
  background: linear-gradient(180deg, var(--sg-node-on-d), transparent); }
html:not(.js) .sg-sec--l .sg-rail::before { background: linear-gradient(180deg, var(--sg-node-on-l), transparent); }

/* ---------- sekcje ---------- */
.sg-sec { position: relative; padding: clamp(84px, 10vw, 148px) 0; }
.sg-sec--d { background: var(--sg-dark); color: var(--sg-ink-d2); }
.sg-sec--d::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 88% 18%, var(--sg-dark-glow), transparent 70%),
    radial-gradient(40% 45% at 6% 92%, var(--sg-dark-warm), transparent 70%),
    radial-gradient(circle, var(--sg-dot-grid) 1px, transparent 1.5px) 0 0 / 28px 28px; }
.sg-sec--l { background: var(--sg-light); color: var(--sg-ink-l2); }
.sg-sec--l::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, var(--sg-dot-grid-l) 1px, transparent 1.5px) 0 0 / 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--sg-mask) 30%, var(--sg-mask) 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, var(--sg-mask) 30%, var(--sg-mask) 70%, transparent); }
.sg-sec > .wrap { position: relative; }

.sg-tag { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 12.5px/1.5 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sg-ink-d2); }
.sg-tag__n { display: inline-flex; align-items: center; gap: 12px; color: var(--sg-lit-d); }
.sg-tag__n::after { content: ""; width: 18px; height: 1px; background: var(--sg-line-d); }
.sg-sec--l .sg-tag { color: var(--sg-ink-l2); }
.sg-sec--l .sg-tag__n { color: var(--sg-lit-l); }
.sg-sec--l .sg-tag__n::after { background: var(--sg-line-l); }

.sg-h2 { margin: 18px 0 0; font: 700 clamp(30px, 1rem + 2.5vw, 48px)/1.08 var(--display); letter-spacing: -.028em; color: var(--sg-ink-d);
  text-wrap: balance; }
.sg-sec--l .sg-h2 { color: var(--sg-ink-l); }
.sg-h2--xl { margin: 0; font-size: clamp(32px, 1.1rem + 4vw, 68px); line-height: 1.02; letter-spacing: -.035em; }
.sg-p { margin: 20px 0 0; max-width: 34em; font-size: clamp(17px, 16px + .25vw, 19px); line-height: 1.68; text-wrap: pretty; }
.sg-p + .sg-p { margin-top: 14px; }
.sg-p--strong { color: var(--sg-ink-d); font-weight: 600; }
.sg-sec--l .sg-p--strong { color: var(--sg-ink-l); }
.sg-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 22px; font-weight: 600; color: var(--sg-lit-d);
  text-decoration: none; border-bottom: 1px solid transparent; }
.sg-more::after { content: "→"; content: "→" / ""; transition: transform .25s var(--sg-ease); }
.sg-more:hover::after { transform: translateX(4px); }
.sg-sec--l .sg-more { color: var(--sg-lit-l); }
.sg-more:focus-visible, .sg-mod:focus-visible { outline: 2px solid var(--sg-focus); outline-offset: 3px; border-radius: 8px; }

/* pasy: tekst i okno naprzemiennie */
.sg-band__grid { display: grid; gap: clamp(36px, 6vw, 88px); align-items: center; }
.sg-band__text { max-width: 600px; }
.sg-fig { margin: 0 0 0 var(--sg-rail); min-width: 0; }
@media (min-width: 960px) {
  .sg-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sg-band--b .sg-fig { order: -1; }
  .sg-fig { margin-left: 0; }
}

/* okno: belka bez napisów i żywa grafika */
.sg-win { position: relative; overflow: hidden; border-radius: 20px; color: var(--sg-win-ink);
  background: linear-gradient(160deg, var(--sg-win-a), var(--sg-win-b) 62%); border: 1px solid var(--sg-win-line);
  box-shadow: inset 0 1px 0 var(--sg-win-hi), 0 40px 80px -40px var(--sg-win-shadow-l); }
.sg-sec--d .sg-win { background: linear-gradient(158deg, var(--sg-win-glass-a), var(--sg-win-glass-b) 60%);
  box-shadow: inset 0 1px 0 var(--sg-win-hi), 0 40px 80px -40px var(--sg-win-shadow); }
.sg-win__bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--sg-win-line); }
.sg-dots { display: flex; gap: 6px; flex: none; }
.sg-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--sg-win-dot); }
.sg-dots i:first-child { background: var(--sg-win-dot-on); border-color: transparent; }
.sg-addr { flex: 0 1 34%; height: 16px; margin: 0 auto; border-radius: 6px; border: 1px solid var(--sg-win-line); }
.sg-win__bar::after { content: ""; flex: none; width: 39px; }

/* --- okno 1: trzy firmy łączą się w jeden zespół --- */
.sg-merge { position: relative; height: clamp(270px, 30vw, 340px); container-type: size; }
.sg-v, .sg-vp { position: absolute; left: 0; top: 0; }
.sg-v { --x: 30cqw; --y: 28cqh; --r: -3deg; display: grid; gap: 8px; min-width: 150px; padding: 12px 14px; border-radius: 14px;
  background: var(--sg-win-card); border: 1px solid var(--sg-win-card-line);
  transform: translate(calc(var(--x) + (50cqw - var(--x)) * var(--mp, 0) - 50%), calc(var(--y) + (50cqh + var(--oy, 0px) - var(--y)) * var(--mp, 0) - 50%))
    rotate(calc(var(--r) * (1 - var(--mp, 0)))) scale(calc(1 - .14 * var(--mp, 0)));
  transition: transform .14s linear, opacity .3s var(--sg-ease); }
/* na końcu drogi karty stają w równy stos (przesunięcie --oy), potem zamieniają się w kartę PROOP */
.sg-v--1 { --x: 30cqw; --y: 24cqh; --r: -3deg; --oy: -26px; }
.sg-v--2 { --x: 70cqw; --y: 46cqh; --r: 2.5deg; --oy: 0px; }
.sg-v--3 { --x: 34cqw; --y: 76cqh; --r: -1.5deg; --oy: 26px; }
.sg-v__name { display: flex; align-items: center; gap: 9px; font: 600 15px/1.25 var(--text); color: var(--sg-win-ink); }
.sg-v__name svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--sg-ok); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sg-v__tel { display: flex; align-items: center; gap: 6px; }
.sg-v__tel svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--sg-win-ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-v__tel i { width: 26px; height: 6px; border-radius: 3px; background: var(--sg-win-faint); }
.sg-vp { display: grid; justify-items: center; gap: 10px; width: min(78cqw, 290px); padding: 18px 18px 16px; border-radius: 18px;
  background: var(--sg-proop-bg); color: var(--sg-proop-ink); box-shadow: 0 30px 60px -24px var(--sg-win-shadow);
  transform: translate(calc(50cqw - 50%), calc(50cqh - 50%)) scale(.9); opacity: 0;
  transition: transform .45s var(--sg-ease) .1s, opacity .3s var(--sg-ease) .1s; }
.sg-vp__logo { display: flex; align-items: center; gap: 10px; font: 800 20px/1 var(--display); letter-spacing: .1em; }
.sg-vp__logo img { width: 34px; height: 34px; }
.sg-vp__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sg-vp__tags i { padding: 4px 10px; border-radius: 999px; background: var(--sg-proop-tag); color: var(--sg-proop-tag-ink); font: 600 12.5px/1.2 var(--text); font-style: normal; }
.sg-vp__tel { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--mono); }
.sg-vp__tel svg { width: 16px; height: 16px; fill: none; stroke: var(--sg-tel); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sg-win.is-on .sg-v, html:not(.js) .sg-v { opacity: 0; }
html:not(.js) .sg-v { transform: translate(calc(50cqw - 50%), calc(50cqh - 50%)) scale(.7); }
.sg-win.is-on .sg-vp, html:not(.js) .sg-vp { transform: translate(calc(50cqw - 50%), calc(50cqh - 50%)); opacity: 1; }

/* --- okno 2: dziś w firmie → po Transformacji IT, wiersz po wierszu --- */
.sg-years { --sg-k: 0; display: flex; align-items: center; gap: 10px; margin: 0 auto; font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--sg-win-ink-2); }
.sg-years__bar { position: relative; width: clamp(60px, 14vw, 120px); height: 4px; border-radius: 2px; background: var(--sg-years-track); overflow: hidden; }
.sg-years__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sg-cell-on-a), var(--sg-ok));
  transform-origin: 0 50%; transform: scaleX(var(--sg-k)); transition: transform .35s var(--sg-ease); }
.sg-years b:last-child { color: var(--sg-win-ink-2); transition: color .3s; }
.sg-win.is-all .sg-years b:last-child { color: var(--sg-ok); }
.sg-rows__head { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 18px 4px; font: 600 12px/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--sg-win-ink-2); }
.sg-rows__head b { color: var(--sg-ok); font-weight: 600; }
.sg-rows { list-style: none; margin: 0; padding: 6px 12px 14px; display: grid; gap: 6px; }
.sg-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px;
  border-radius: 12px; background: var(--sg-win-card); border: 1px solid transparent; transition: border-color .35s, background-color .35s; }
.sg-row__st { position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--sg-x-bg); transition: background-color .35s; }
.sg-row__st svg { position: absolute; inset: 8px; width: 18px; height: 18px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .3s, transform .35s var(--sg-ease); }
.sg-row__st .sg-x { stroke: var(--sg-x); }
.sg-row__st .sg-ok { stroke: var(--sg-ok); opacity: 0; transform: scale(.6); }
.sg-row__txt { display: grid; overflow: hidden; }
.sg-row__a, .sg-row__b { grid-area: 1 / 1; align-self: center; font: 500 15.5px/1.35 var(--text); transition: transform .4s var(--sg-ease), opacity .3s; }
.sg-row__a { color: var(--sg-win-ink-2); }
.sg-row__b { color: var(--sg-win-ink); font-weight: 600; transform: translateY(70%); opacity: 0; }
.sg-row.is-done { background: var(--sg-ok-bg); border-color: var(--sg-win-line); }
.sg-row.is-done .sg-row__st { background: var(--sg-ok-bg); }
.sg-row.is-done .sg-x { opacity: 0; transform: scale(.6); }
.sg-row.is-done .sg-ok { opacity: 1; transform: none; }
.sg-row.is-done .sg-row__a { transform: translateY(-70%); opacity: 0; }
.sg-row.is-done .sg-row__b { transform: none; opacity: 1; }
/* bez JS: oba stany pod sobą, jak na stronie */
html:not(.js) .sg-row__txt { gap: 4px; }
html:not(.js) .sg-row__a, html:not(.js) .sg-row__b { grid-area: auto; transform: none; opacity: 1; }
html:not(.js) .sg-row__a { text-decoration: line-through; }

/* --- okno 3: kalendarz telefonów --- */
.sg-cal { display: grid; gap: 20px; padding: 18px 18px 20px; }
.sg-cal__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0 0 10px;
  font: 600 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sg-win-ink-2); }
.sg-cal__h b { font: 700 15px/1.2 var(--text); letter-spacing: 0; text-transform: none; color: var(--sg-win-ink); }
.sg-cal__row--b .sg-cal__h b { color: var(--sg-cell-on-b); }
.sg-cal__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.sg-cal__grid i { position: relative; aspect-ratio: 1; border-radius: 7px; background: var(--sg-cell); border: 1px solid var(--sg-cell-line);
  transition: background-color .25s, border-color .25s, box-shadow .25s, transform .3s var(--sg-ease); }
.sg-cal__grid i svg { position: absolute; inset: 22%; width: 56%; height: 56%; fill: none; stroke: var(--sg-cell-on-ink); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.sg-cal__grid i.is-tel { background: linear-gradient(135deg, var(--sg-cell-on-a), var(--sg-cell-on-b)); border-color: transparent;
  box-shadow: 0 6px 16px -8px var(--sg-cell-glow); }
.sg-cal__grid i.is-tel svg { opacity: 1; }
html:not(.js) .sg-cal__row--b .sg-cal__grid i { background: linear-gradient(135deg, var(--sg-cell-on-a), var(--sg-cell-on-b)); border-color: transparent; }
html:not(.js) .sg-cal__row--b .sg-cal__grid i svg { opacity: 1; }
.sg-cal__leg { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 13px/1.4 var(--text); color: var(--sg-win-ink-2); }
.sg-cal__leg i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--sg-cell-on-a), var(--sg-cell-on-b)); }
.sg-cal__leg i svg { position: absolute; inset: 22%; width: 56%; height: 56%; fill: none; stroke: var(--sg-cell-on-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* wynik i źródło przy pasie Akwadratu */
.sg-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--sg-line-d); }
.sg-stat b { font: 700 clamp(28px, 1rem + 2vw, 40px)/1 var(--display); letter-spacing: -.02em; color: var(--sg-ink-d); }
.sg-stat span { font-size: 16px; color: var(--sg-ink-d2); }
.sg-src { margin: 12px 0 0; font: 500 13px/1.5 var(--mono); color: var(--sg-ink-d2); }

/* ---------- kroki współpracy: odcinek tej samej linii ---------- */
.sg-steps { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; gap: 30px; }
.sg-step { position: relative; padding-left: var(--sg-rail); }
.sg-step > .sg-node { top: calc(12.5px * 1.5 / 2 - var(--sg-node) / 2); }
.sg-step__in { max-width: 30em; }
.sg-step__n { display: block; font: 600 12.5px/1.5 var(--mono); letter-spacing: .14em; color: var(--sg-ink-d2); transition: color .35s; }
.sg-step__t { margin: 8px 0 0; font: 700 21px/1.2 var(--display); letter-spacing: -.015em; color: var(--sg-ink-d2); transition: color .35s; }
.sg-step__d { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--sg-ink-d2); }
.sg-step__d strong { color: var(--sg-ink-d); font-weight: 600; }
.sg-step.is-lit .sg-step__n, html:not(.js) .sg-step__n { color: var(--sg-lit-d); }
.sg-step.is-lit .sg-step__t, html:not(.js) .sg-step__t { color: var(--sg-ink-d); }
@media (min-width: 1160px) {
  /* schody: linia wychodzi z węzła w prawo i opada do następnego */
  .sg-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; margin-left: var(--sg-rail); }
  .sg-step { padding: 30px 6px 0 26px; }
  .sg-step > .sg-node { top: 0; }
  .sg-step:nth-child(2) { margin-top: 84px; }
  .sg-step:nth-child(3) { margin-top: 168px; }
  .sg-step:nth-child(4) { margin-top: 252px; }
  .sg-step:nth-child(5) { margin-top: 336px; }
}

/* ---------- zakres: sześć obszarów ---------- */
.sg-mods { list-style: none; margin: clamp(40px, 5vw, 60px) 0 0 var(--sg-rail); padding: 0; display: grid; gap: 14px; }
.sg-mod { position: relative; isolation: isolate; display: grid; gap: 10px; height: 100%; padding: 24px 24px 26px; border-radius: 18px;
  background: var(--sg-mod-bg); border: 1px solid var(--sg-mod-line); color: var(--sg-ink-l2); text-decoration: none;
  transition: border-color .25s, box-shadow .3s var(--sg-ease), transform .25s var(--sg-ease); }
.sg-mod::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--sg-mod-glow), transparent 65%); }
.sg-mod__top { display: flex; align-items: center; justify-content: space-between; }
.sg-mod__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sg-mod-ico-bg); }
.sg-mod__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--sg-lit-l); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sg-mod__n { font: 600 12px/1 var(--mono); letter-spacing: .12em; color: var(--sg-ink-l2); }
.sg-mod__t { margin: 8px 0 0; font: 700 19px/1.25 var(--display); letter-spacing: -.015em; color: var(--sg-ink-l); }
.sg-mod__cap { margin: 0; font: 600 12.5px/1.45 var(--mono); color: var(--sg-lit-l); }
.sg-mod__d { margin: 0; font-size: 15.5px; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .sg-mod:hover { border-color: var(--sg-mod-hover); box-shadow: 0 24px 48px -30px var(--sg-mod-shadow); transform: translateY(-2px); }
  .sg-mod:hover::before { opacity: 1; }
}
@media (min-width: 640px) { .sg-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sg-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* ---------- rozmowa: tu linia się kończy ---------- */
.sg-call { padding-bottom: clamp(96px, 12vw, 160px); }
.sg-call__box { margin-left: var(--sg-rail); max-width: 900px; }
.sg-call .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 4vw, 44px); }
.js .sg-end:not(.is-live) { background: var(--sg-end-bg); color: var(--sg-ink-d); border-color: var(--sg-end-line); box-shadow: none; }
.sg-end.is-live { animation: sg-endon 1.2s var(--sg-ease) 1; }
@keyframes sg-endon { 0% { box-shadow: 0 0 0 0 var(--sg-end-ring); } 100% { box-shadow: 0 0 0 16px var(--sg-end-ring-0); } }

/* pasek labu */
.sg-lab { position: fixed; right: 12px; bottom: 12px; z-index: 30; display: flex; gap: 6px; padding: 4px; border-radius: 999px;
  background: var(--sg-lab-bg); border: 1px solid var(--sg-lab-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sg-lab a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--sg-lab-ink);
  font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.sg-lab a:hover { background: var(--sg-lab-hover); }
.sg-lab a:focus-visible { outline: 2px solid var(--sg-focus); outline-offset: 2px; }

/* ---------- wejście treści: krótko, raz ---------- */
.js [data-rise] { opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity .45s var(--sg-ease) var(--rd, 0ms), transform .55s var(--sg-ease) var(--rd, 0ms); }
.js [data-rise="fig"] { transform: perspective(1400px) translate3d(0, 20px, 0) rotateX(6deg); transform-origin: 50% 100%; }
.js [data-rise].is-in { opacity: 1; transform: none; }

/* ---------- ograniczony ruch: wszystko od razu widoczne i ostre ---------- */
@media (prefers-reduced-motion: reduce) {
  .sg-main *, .sg-main *::before, .sg-main *::after { animation: none !important; transition: none !important; }
  .js [data-rise] { opacity: 1; transform: none; }
  .sg-sig__head { display: none; }
}

/* aureola głowicy sygnału: zatrzymania gradientów z tokenów */
.sg-h-d0 { stop-color: var(--sg-halo-d); }
.sg-h-l0 { stop-color: var(--sg-halo-l); }
.sg-h-1 { stop-color: var(--sg-halo-0); }