@charset "utf-8";
/* C4PL - strona "Dlaczego C4PL". Generowane z tools/site-variants/why_assets.py.
   Linia sygnalu biegnie osia w lewej czesci tresci. Wezel powodu ma te sama
   srednice co kropka sciezki procesu (40 px) i ten sam odstep do tresci (24 px). */
.why{
  --node-d:40px;
  --rail-gap:24px;
  --rail:calc(var(--node-d) + var(--rail-gap));
  --port:16px;
  --why-ease:cubic-bezier(.2,.7,.1,1);
  position:relative;isolation:isolate;
}
@media (max-width:767.98px){
  .why{--node-d:34px;--rail-gap:14px}
}

/* ---------- warstwa sygnalu ---------- */
.why .sig{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;z-index:1}
html:not(.why-js) .why .sig{display:none}
.why .sig path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.why .sig__base{stroke:var(--accent);stroke-opacity:.22;stroke-width:1.5}
.why .sig__glow{stroke:url(#sig-grad);stroke-width:9;opacity:.12}
.why .sig__lit{stroke:url(#sig-grad);stroke-width:2.25}
.why .sig__tail{stroke:var(--accent-2);stroke-width:4;opacity:.35}
.why .sig__tail2{stroke:var(--accent);stroke-width:2.75}
.why .sig__dot{fill:var(--panel);stroke:var(--accent);stroke-width:2.2}
.why .sig__head{opacity:0;transition:opacity .35s}
.why .sig.is-run .sig__head{opacity:1}

/* ---------- os i wezly powodow ---------- */
.why .rail-host{position:relative;padding-left:var(--rail)}
.why .rail-host .vc-kicker,.why .rail-host>.eyebrow{line-height:20px}
.why .rail-host>.eyebrow{display:flex;width:fit-content}
.why .rail-host>.wnode{top:calc(10px - var(--node-d) / 2)}
.why .sec__head.rail-host{max-width:min(calc(640px + var(--rail)),100%)}
.why .lane{padding-left:var(--rail)}

.why .wnode{
  position:absolute;left:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:var(--node-d);height:var(--node-d);border-radius:50%;
  background-color:var(--panel);color:var(--muted);
  box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.32),0 0 0 6px rgba(231,239,255,0);
  font-size:.8rem;font-weight:700;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  transition:background-color .45s ease,color .45s ease,box-shadow .45s ease;
}
.why .wnode::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px var(--accent-2);opacity:0;
}
.why .wnode.is-lit,html:not(.why-js) .why .wnode{
  background-color:var(--accent);color:var(--on-accent,#fff);
  box-shadow:inset 0 0 0 1.5px rgba(37,99,235,0),0 0 0 6px var(--accent-soft);
}
.why .wnode.is-ping::after{animation:why-ping .9s var(--why-ease) 1}
@keyframes why-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}

/* Poczatek linii: port pod szklanym panelem, na srodku jego dolnej krawedzi. */
.why .sport{
  position:relative;z-index:3;display:block;
  width:var(--port);height:var(--port);margin:calc(var(--port) / -2) auto 0;border-radius:50%;
  background:var(--panel);
  box-shadow:inset 0 0 0 2.5px var(--accent),0 0 0 5px rgba(255,255,255,.75);
}
.why .sport::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--accent-2)}
.why .sport::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 2px var(--accent-2);opacity:0}
.why-live .why .sport::after{animation:why-port 2.4s var(--why-ease) infinite}
@keyframes why-port{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.8);opacity:0}}

/* ---------- hero: szklany panel z grafika ---------- */
/* Dolny padding zero: magistrala z grafiki dochodzi do samej krawedzi panelu,
   a tam stoi port, z ktorego wychodzi linia strony. */
.why .sigcard{padding:12px 12px 0}
.why .sigcard .sigart-img{display:block;width:100%;height:auto}
.why .sigcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 46%,transparent 58%);
  background-size:240% 100%;background-position:var(--sheen,62%) 0;opacity:.6;
}
/* Pochylenie od 1024 px. Panel spoczywa PLASKO (0 st.), przechyla sie tylko za
   mysza. Os obrotu w srodku dolnej krawedzi: magistrala zawsze trafia w port. */
@media (min-width:1024px){
  .why .sigcard{
    --rx:0deg;--ry:0deg;
    transform:rotateX(var(--rx)) rotateY(var(--ry));transform-origin:50% 100%;
    transition:box-shadow .3s ease;
  }
}

/* KONTRAST W HERO (z labu, swiadome odstepstwo od ramy produkcji tylko na tej
   stronie): na plamach aurory nadtytul #2563eb mial 2,98:1, punkty 3,22:1,
   lead 4,19:1. Tu --ink. Rama hero, gradient H1 i plamy bez zmian. */
.why .hero .eyebrow{color:var(--ink)}
.why .hero--aurora .hero__lead,.why .hero__proof li{color:var(--ink)}

/* Na tablecie linia schodzi z portu srodkiem strony, tam gdzie stalby
   napis "Zobacz wiecej". Ponizej 560 px produkcja i tak go chowa. */
@media (min-width:560px) and (max-width:919.98px){
  .why .hero__scroll{display:none}
}

/* ---------- pasy powodow ---------- */
.why [data-story="c"] .vc-band--soft .vc-kicker{color:var(--accent-ink)}
@media (max-width:879.98px){
  .why [data-story="c"] .vc-band .vc-media{margin-left:var(--rail)}
}

/* Pas technologii: logotypy pod tekstem powodu 03 */
.why .why-tech{margin-top:clamp(34px,5vw,56px)}
.why .why-tech__lead{margin:0 0 18px;color:var(--muted);font-size:.95rem;font-weight:600}

/* Certyfikaty: trzy obszary potwierdzone przez usera (Linux, Windows, Cisco). */
.why .why-certs{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.why .why-certs__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;
  padding:18px 10px 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-align:center}
.why .why-certs__item img{display:block;width:auto;max-width:100%;height:28px;object-fit:contain}
.why .why-certs__item span{font-weight:700;font-size:.98rem;line-height:1.2;color:var(--ink)}
@media (max-width:400px){
  .why .why-certs{gap:8px}
  .why .why-certs__item{padding:14px 6px 12px}
  .why .why-certs__item img{height:22px}
}

/* ---------- realizacje: cztery karty w ukladzie 2 x 2 ---------- */
@media (min-width:1000px){
  .why .lnews--quad{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- poswiata za kursorem (tylko mysz, patrz why.js) ---------- */
.why .why-glow{position:relative;isolation:isolate}
.why .why-glow::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(6,182,212,.12),transparent 62%);
  opacity:0;transition:opacity .35s ease;
}
.why .why-glow::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--accent-2),rgba(37,99,235,.45) 42%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;
}
@media (hover:hover) and (pointer:fine){
  .why .why-glow:hover::before,.why .why-glow:hover::after{opacity:1}
}

/* ---------- sciezka procesu na osi linii ---------- */
.why .why-path{margin-inline:0}
.why .why-path .path__step{grid-template-columns:var(--node-d) minmax(0,1fr);column-gap:var(--rail-gap)}
.why .why-path .path__step::before{left:calc(var(--node-d) / 2 - 1px)}
.why .why-path .path__node{
  z-index:2;width:var(--node-d);height:var(--node-d);
  transition:background-color .45s ease,color .45s ease,box-shadow .45s ease;
}
/* Z JS kreske miedzy kropkami rysuje linia sygnalu; bez JS zostaje produkcyjna. */
.why-js .why .why-path .path__step::before{display:none}
.why-js .why .why-path .path__step:not(.is-lit) .path__node{
  background-color:var(--panel);color:var(--muted);
  box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.32),0 0 0 6px rgba(231,239,255,0);
}

/* ---------- pas kontaktowy: tu linia sie konczy ---------- */
.why .band__p--lang{margin-top:.35em}
.why .sig-end.is-live{animation:why-end 1.3s var(--why-ease) 1}
@keyframes why-end{
  0%{box-shadow:0 0 0 0 rgba(6,182,212,.75),0 12px 30px -12px rgba(37,99,235,.6)}
  100%{box-shadow:0 0 0 18px rgba(6,182,212,0),0 12px 30px -12px rgba(37,99,235,.6)}
}

/* ---------- wejscie z rozmycia: raz, krotko ----------
   Ukrywanie wlacza dopiero klasa .why-js na <html> (dodaje ja why.js).
   Przesuniecie przez `translate`, nie `transform`, zeby nie zabierac kartom
   ich produkcyjnego hover. */
.why-js .why [data-rise]{
  opacity:0;filter:blur(6px);translate:0 14px;
  transition:opacity .55s var(--why-ease) var(--rd,0ms),filter .55s var(--why-ease) var(--rd,0ms),translate .7s var(--why-ease) var(--rd,0ms);
}
.why-js .why [data-rise="fig"]{
  translate:0 22px;transform:perspective(1400px) rotateX(8deg);transform-origin:50% 100%;
  transition:opacity .6s var(--why-ease) var(--rd,0ms),filter .6s var(--why-ease) var(--rd,0ms),translate .8s var(--why-ease) var(--rd,0ms),transform .8s var(--why-ease) var(--rd,0ms);
}
.why-js .why .lnews__card[data-rise]{
  transition:opacity .55s var(--why-ease) var(--rd,0ms),filter .55s var(--why-ease) var(--rd,0ms),translate .7s var(--why-ease) var(--rd,0ms),
    transform .28s ease,border-color .3s ease,box-shadow .3s ease;
}
.why-js .why .path__card[data-rise]{
  transition:opacity .55s var(--why-ease) var(--rd,0ms),filter .55s var(--why-ease) var(--rd,0ms),translate .7s var(--why-ease) var(--rd,0ms),
    transform .25s ease,border-color .25s ease;
}
.why-js .why [data-rise].is-in{opacity:1;filter:none;translate:none}
.why-js .why [data-rise="fig"].is-in{transform:none}

/* ---------- ograniczony ruch: wszystko od razu widoczne i ostre ---------- */
@media (prefers-reduced-motion:reduce){
  .why-js .why [data-rise],.why-js .why [data-rise="fig"]{opacity:1;filter:none;translate:none;transform:none;transition:none}
  .why .sig__head{display:none}
  .why .wnode,.why .why-path .path__node,.why .why-glow::before,.why .why-glow::after{transition:none}
  .why .wnode::after{display:none}
  .why-live .why .sport::after,.why .sig-end.is-live{animation:none}
}