:root{--blue:#0d6bff;--green:#18d11d;--bg:#050505;--bg2:#0a0a0b;--line:rgba(255,255,255,.12);--muted:#a1a1aa;--text:#f5f5f7;--card:rgba(8,8,10,.82)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-feature-settings:"ss01" 1,"cv01" 1;text-rendering:optimizeLegibility}
.site-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(900px 520px at 8% -8%,rgba(13,107,255,.22),transparent 65%),radial-gradient(760px 480px at 96% 4%,rgba(24,209,29,.15),transparent 68%),radial-gradient(900px 520px at 74% 76%,rgba(13,107,255,.10),transparent 72%),linear-gradient(180deg,#050505,#0a0a0b 46%,#050505)}
.site-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,transparent,black 8%,black 86%,transparent);opacity:.34}
.blue{color:var(--blue)}.green{color:var(--green)}
.glass,.panel{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.026));border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 34px 110px rgba(0,0,0,.28)}
.eyebrow{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:#9ca3af}
.btn-primary,.btn-dark{display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.btn-primary{background:linear-gradient(180deg,#fff,#e6edff);color:#050505;border:1px solid rgba(255,255,255,.45);box-shadow:0 16px 60px rgba(13,107,255,.18)}
.btn-dark{background:rgba(255,255,255,.045);border:1px solid var(--line);color:white}
.btn-primary:hover,.btn-dark:hover{transform:translateY(-1px);filter:brightness(1.06)}
.nav-link{color:#a1a1aa;transition:color .2s ease}
.nav-link:hover,.nav-link.active{color:#fff}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s ease}
.reveal.is-visible{opacity:1;transform:none}
.section-step{min-height:calc(100vh - 5rem);scroll-margin-top:5rem;display:grid;align-items:center}

/* SYNK FLOW - NOWY SCHEMAT 1000x850 */
.synk-flow{position:relative;width:100%;height:100%;min-height:750px;border:1px solid rgba(255,255,255,.13);border-radius:34px;background:radial-gradient(680px 360px at 50% 18%,rgba(13,107,255,.10),transparent 62%),radial-gradient(620px 420px at 50% 76%,rgba(24,209,29,.07),transparent 68%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 36px 130px rgba(0,0,0,.45);overflow:hidden;}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* animacje ścieżek */
.flow-path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.flow-bg{stroke:rgba(255,255,255,.15);}
.flow-anim,.flow-anim-reverse{stroke-dasharray: 6 12;stroke-width:3;}
.flow-blue.flow-anim{stroke:var(--blue);animation:flowForward 1.5s linear infinite}
.flow-green.flow-anim{stroke:var(--green);animation:flowForward 1.5s linear infinite}
.flow-green.flow-anim-reverse{stroke:var(--green);animation:flowReverse 1.5s linear infinite}
@keyframes flowForward { to { stroke-dashoffset: -36; } }
@keyframes flowReverse { to { stroke-dashoffset: 36; } }

.flow-node{position:absolute;z-index:3;display:block;text-decoration:none;color:white;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(12,12,14,.96),rgba(8,8,10,.88));backdrop-filter:blur(14px);border-radius:20px;padding:18px 22px;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 20px 60px rgba(0,0,0,.3);transition:.3s cubic-bezier(0.2,0.8,0.2,1)}
.flow-node:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 32px 90px rgba(0,0,0,.4)}
.flow-node strong{display:block;font-size:1.1rem;font-weight:700}
.flow-node small{display:block;margin-top:.4rem;color:#a1a1aa;line-height:1.4;font-size:.85rem}
.flow-node .tag{display:inline-flex;margin-bottom:.8rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.2rem .5rem;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.06)}
.tag.blue{border-color:var(--blue);color:#dbeafe;box-shadow:0 0 10px rgba(13,107,255,.2)}
.tag.green{border-color:var(--green);color:#d9fddc;box-shadow:0 0 10px rgba(24,209,29,.2)}

/* Pozycje Node'ów bazujące na % siatki 1000x850 */
.flow-manager{left:14%;top:10%;width:260px;transform:translateX(-50%);border-color:rgba(13,107,255,.35)}
.flow-operator{left:86%;top:10%;width:260px;transform:translateX(-50%);border-color:rgba(24,209,29,.35)}
.flow-core{left:50%;top:45%;width:380px;transform:translate(-50%,-50%);border-color:rgba(13,107,255,.6);background:radial-gradient(circle at top,rgba(13,107,255,.15),transparent 70%),#0a0a0b}
.flow-core ul{margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.flow-core li{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);border-radius:8px;padding:.4rem .7rem;font-size:.75rem;color:#e4e4e7}
.flow-plc{left:27%;top:75%;width:240px;transform:translate(-50%,-50%);border-color:rgba(13,107,255,.4)}
.flow-master{left:73%;top:75%;width:260px;transform:translate(-50%,-50%);border-color:rgba(24,209,29,.5)}

.flow-slaves{position:absolute;z-index:3;left:73%;top:89%;transform:translate(-50%,-50%);display:flex;gap:15px;width:500px;justify-content:center}
.flow-slave{border:1px solid rgba(24,209,29,.3);background:linear-gradient(180deg,rgba(15,15,18,.95),rgba(10,10,12,.9));border-radius:16px;padding:1rem;color:#fff;text-decoration:none;transition:.2s;min-width:130px;text-align:center}
.flow-slave:hover{border-color:rgba(24,209,29,.6);transform:translateY(-2px)}
.flow-slave strong{display:block;font-size:.8rem}
.flow-slave small{display:block;margin-top:.3rem;color:#a1a1aa;font-size:.7rem}

.flow-label{position:absolute;z-index:4;padding:.6rem 1rem;font-size:.75rem;line-height:1.4;border-radius:12px;background:rgba(5,5,5,.85);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lbl-config{left:33%;top:28%;transform:translate(-50%,-50%);color:#dbeafe;border-color:rgba(13,107,255,.3)}
.lbl-bidir{left:66%;top:28%;transform:translate(-50%,-50%);color:#d9fddc;border-color:rgba(24,209,29,.3)}
.lbl-plc{left:33%;top:63%;transform:translate(-50%,-50%);color:#dbeafe;border-color:rgba(13,107,255,.3)}
.lbl-master{left:67%;top:63%;transform:translate(-50%,-50%);color:#d9fddc;border-color:rgba(24,209,29,.3)}
.lbl-magistrala{left:73%;top:83.5%;transform:translate(-50%,-50%);color:#d9fddc;border-color:rgba(24,209,29,.2);font-size:.65rem;padding:.4rem .8rem}

.flow-legend{position:absolute;left:20px;bottom:20px;display:flex;gap:10px}
.flow-legend span{border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.6);border-radius:999px;padding:.4rem .8rem;font-size:.7rem;color:#a1a1aa;display:flex;align-items:center}
.flow-legend i{width:8px;height:8px;border-radius:50%;margin-right:6px}
.flow-legend .b{background:var(--blue)}
.flow-legend .g{background:var(--green)}

/* SYSTEM FOCUS / ZOOM dla podstron i minimapy */
.synk-flow[data-focus] .flow-node, .synk-flow[data-focus] .flow-label, .synk-flow[data-focus] .flow-slaves, .synk-flow[data-focus] path { transition: opacity 0.4s ease, filter 0.4s ease; }
.synk-flow[data-focus="manager"] :not(.flow-manager):not(.lbl-config):not(.path-manager) { opacity: 0.15; filter: grayscale(100%); }
.synk-flow[data-focus="manager"] .flow-manager { border-color:var(--blue); box-shadow: 0 0 50px rgba(13,107,255,.2); transform: translateX(-50%) scale(1.05); }

.synk-flow[data-focus="operator"] :not(.flow-operator):not(.lbl-bidir):not(.path-operator) { opacity: 0.15; filter: grayscale(100%); }
.synk-flow[data-focus="operator"] .flow-operator { border-color:var(--green); box-shadow: 0 0 50px rgba(24,209,29,.2); transform: translateX(-50%) scale(1.05); }

.synk-flow[data-focus="core"] :not(.flow-core):not(.lbl-config):not(.lbl-bidir):not(.lbl-plc):not(.lbl-master):not(.flow-path) { opacity: 0.15; filter: grayscale(100%); }
.synk-flow[data-focus="core"] .flow-core { border-color:var(--blue); transform: translate(-50%,-50%) scale(1.05); }

.synk-flow[data-focus="plc"] :not(.flow-plc):not(.lbl-plc):not(.path-plc) { opacity: 0.15; filter: grayscale(100%); }
.synk-flow[data-focus="plc"] .flow-plc { border-color:var(--blue); transform: translate(-50%,-50%) scale(1.05); }

.synk-flow[data-focus="master"] :not(.flow-master):not(.flow-slaves):not(.lbl-master):not(.lbl-magistrala):not(.path-master):not(.path-slave) { opacity: 0.15; filter: grayscale(100%); }
.synk-flow[data-focus="master"] .flow-master { border-color:var(--green); transform: translate(-50%,-50%) scale(1.05); }

/* Wersja MINI-MAP dla przewijanych sekcji */
.mini-map-wrap { width:100%; height:100%; min-height:550px; display:flex; align-items:center; justify-content:flex-end; }
.mini-map{ position:relative; width:100%; height:550px; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.03), #000); border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.synk-flow-zoomed { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.65); width:1000px; height:850px; pointer-events:none; }
/* Usunięcie grubej ramki i tła w minimapie by ładnie się wtapiała */
.synk-flow-zoomed .synk-flow { border:none; background:transparent; box-shadow:none; min-height:100%; }

.architecture-wrap{max-width:1400px;margin-inline:auto;}
.architecture-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:4rem;align-items:start;}
.architecture-menu-wrap{position:sticky;top:7rem;}
.architecture-menu{border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:28px;padding:1.5rem;}
.menu-kicker{padding:0 0 1rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#a1a1aa}
.architecture-menu .step-link{display:flex;gap:1rem;align-items:center;margin:.5rem 0;padding:.75rem 1rem;border-radius:18px;color:#a1a1aa;text-decoration:none;transition:.2s}
.architecture-menu .step-link strong{display:block;color:#d4d4d8;font-size:.95rem}
.architecture-menu .step-link small{display:block;margin-top:.2rem;font-size:.75rem}
.architecture-menu .step-link .step-no{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#09090b;font-size:.75rem;font-weight:700}
.architecture-menu .step-link.active{background:rgba(255,255,255,.06);color:#fff;transform:translateX(5px)}
.architecture-menu .step-link.active .step-no{border-color:var(--blue);background:linear-gradient(135deg,rgba(13,107,255,.4),rgba(24,209,29,.2));color:#fff;box-shadow:0 0 20px rgba(13,107,255,.3)}

@media(max-width:1023px){
  .architecture-grid{display:block;}
  .desktop-only{display:none!important}
  .synk-flow{min-height:auto; display:flex; flex-direction:column; gap:1.5rem; padding:2rem; overflow:auto}
  .flow-lines, .flow-label, .flow-legend { display:none!important; }
  .flow-node, .flow-slaves { position:relative!important; transform:none!important; left:0!important; top:0!important; width:100%!important; }
  .flow-slaves { flex-direction:column; gap:10px; }
  .mini-map-wrap { min-height:400px; margin-top:2rem; }
  .mini-map { height:400px; }
  .synk-flow-zoomed { transform:translate(-50%, -50%) scale(0.45); }
}