/* Softineo: strona główna. Tylko to, czego nie ma w softineo.css:
   rozwiązania jako warstwy planu, dwa szczegóły (symulacja, konfigurator), branże, o nas, kontakt, nagłówek porównania. */

.mini .veh rect { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; }
.mini .veh .veh-cab { fill: var(--ink-2); }
.sol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); align-items: start; }
.sol h2 { margin-bottom: 22px; }
/* wskazówka nad listą rozwiązań: zwykła podpowiedź (nie nagłówek), ze znakiem warstwy jak w wierszach poniżej */
.sol-pick { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font: 15px/1.3 var(--tech); letter-spacing: .02em; color: var(--ink-2); }
.sol-pick::before { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%2362778b'/%3E%3C/svg%3E"); }
.layers { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.layer { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; padding: 20px 16px 22px 14px; border-bottom: 1px solid var(--line); cursor: default; transition: background-color .3s var(--ease-out); }
.layer .lay-sw { width: 22px; height: 22px; margin-top: 3px; border: 1.5px solid var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%2362778b'/%3E%3C/svg%3E"); transition: background .3s; }
.layer h3 { font-size: clamp(22px, 1.7vw, 28px); margin-bottom: 8px; }
.layer p { color: var(--ink-2); margin-bottom: 10px; max-width: 58ch; }
/* jedyne pełne żółte pole na stronie: wybrana warstwa (i jej urządzenia na planie) */
.layer.is-active { background: var(--y); }
.layer.is-active .lay-sw { background: var(--ink); }
.layer.is-active p, .layer.is-active .code { color: #2a2206; }
.layer.is-active .link-arrow { text-decoration-color: var(--ink); }
.sol-plan { margin: 0; position: sticky; top: calc(var(--head-h) + 24px); border: 1.5px solid var(--ink); background: rgba(237, 241, 244, .7); padding: 10px; }
.mini { width: 100%; height: auto; display: block; }
.mini .site { fill: none; }
.mini .road { stroke-width: 34; }
.mini .road-in { stroke-width: 31.5; }
.mini .route-m { fill: none; stroke: var(--y); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.mini .walk { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.mini .led { fill: var(--ink); stroke: var(--ink); }
.mini .post-l { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.mini .term, .mini .disp, .mini .box, .mini .turn { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.5; }
.mini .turn-a { stroke: var(--ink); stroke-width: 1.4; }
.mini .tele { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.mini .tele-d { fill: var(--ink); }
.mini .box-app { stroke-width: 2; }
.mini .layer-name { font-size: 16px; fill: var(--ink); }
.mini .dev { transition: opacity .35s var(--ease-out); }
.mini .dev :is(rect, circle, path.turn-a) { transition: fill .35s var(--ease-out); }
.mini[data-iso] .dev { opacity: .16; }
.mini[data-iso="ruch"] .dev[data-sol~="ruch"],
.mini[data-iso="waz"] .dev[data-sol~="waz"],
.mini[data-iso="tank"] .dev[data-sol~="tank"],
.mini[data-iso="rcp"] .dev[data-sol~="rcp"] { opacity: 1; }
.mini[data-iso="ruch"] .dev[data-sol~="ruch"] :is(.term, .disp, .box, .turn, .post, .scale-r, .cam rect, .cam path),
.mini[data-iso="waz"] .dev[data-sol~="waz"] :is(.term, .disp, .box, .turn, .post, .scale-r, .cam rect, .cam path),
.mini[data-iso="tank"] .dev[data-sol~="tank"] :is(.term, .disp, .box, .turn, .post, .scale-r, .cam rect, .cam path),
.mini[data-iso="rcp"] .dev[data-sol~="rcp"] :is(.term, .disp, .box, .turn, .post, .scale-r, .cam rect, .cam path) { fill: var(--y); }
.mini[data-iso] .dev.walk { stroke: var(--ink); }
.mini[data-iso] .cable { opacity: .3; }
.see {
  margin: clamp(56px, 7vw, 110px) var(--g) 0;
  padding: clamp(40px, 5vw, 80px) clamp(20px, 3vw, 56px);
  background: rgba(237, 241, 244, .6);
  border: 1.5px solid var(--ink);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 56px);
}
.see .sec-p { color: var(--ink-2); }
.see h2 { margin-bottom: 20px; }
.detail { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border: 1.5px solid var(--ink); background: var(--paper-hi); padding: 18px 20px 22px; transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.detail:hover { background: #fff; }
.detail-art { width: 100%; height: auto; margin-bottom: 18px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.detail-art .lbl { fill: var(--ink-2); font-size: 15px; }
.d-mark { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.d-mark-t { font-size: 20px; text-anchor: middle; fill: var(--ink); }
.d-road { fill: none; stroke: var(--ink); stroke-width: 26; }
.d-road-in { fill: none; stroke: #d5dce3; stroke-width: 23; }
.d-route { fill: none; stroke: var(--y); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.d-pile { fill: url(#h-gravel); stroke: var(--ink); stroke-width: 1.3; }
.d-pile ~ * .hc, .detail-art .hc { stroke: var(--ink); }
.d-sit circle { fill: var(--ink); }
.d-sit text { font-size: 13px; fill: var(--y); text-anchor: middle; }
.d-dev circle { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; }
.d-dev line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.d-scale { fill: url(#h-diag); stroke: var(--ink); stroke-width: 1.5; }
.d-ghost { fill: none; stroke-dasharray: 5 4; }
.d-plus circle { fill: var(--ink); }
.d-plus path { stroke: var(--y); stroke-width: 2; }
.d-dim { fill: none; stroke: var(--ink); stroke-width: 1; }
.detail h3 { font-size: clamp(24px, 2vw, 32px); margin-bottom: 10px; }
.detail p { color: var(--ink-2); max-width: 48ch; }
.detail .link-arrow { margin-top: auto; }
.prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.ind-prints { margin-top: clamp(40px, 5vw, 72px); }
/* szczegóły obiektów: rysunki w stylu planu (plan albo elewacja), kreskowanie jak w legendzie */
.ind-art { display: block; width: 100%; height: auto; aspect-ratio: 320 / 220; outline: 1px solid var(--line); background: rgba(227, 232, 237, .6); }
.ind-art text { font-family: var(--tech); }
.ia-l { font-size: 11.5px; fill: var(--ink-2); letter-spacing: .02em; }
.ia-site { fill: rgba(237, 241, 244, .85); }
.ia-fence { fill: none; stroke: var(--ink-2); stroke-width: 1.1; stroke-dasharray: 9 3 2 3; }
.ia-road { fill: none; stroke: var(--ink-2); stroke-width: 24; }
.ia-road-in { fill: none; stroke: #d5dce3; stroke-width: 21.5; }
.ia-route { fill: none; stroke: var(--y); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.ia-ground { fill: none; stroke: var(--ink); stroke-width: 2; }
.ia-b, .ia-b rect, .ia-silo rect, .ia-silo path:not(:last-child) { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.3; }
.ia-silo rect { fill: url(#h-concrete); }
.ia-silo path:last-child, .ia-thin { fill: none; stroke: var(--ink); stroke-width: 1; }
.ia-belt { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ia-fill-g { fill: url(#h-gravel); }
.ia-asph { fill: url(#h-asphalt); stroke: var(--ink); stroke-width: 1.3; }
.ia-conc { fill: url(#h-concrete); stroke: var(--ink); stroke-width: 1; }
.ia-pit { fill: url(#h-earth); stroke: var(--ink-2); stroke-width: 1.3; }
.ia-con { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 5 3; }
.ia-pile { fill: url(#h-gravel); stroke: var(--ink-2); stroke-width: 1.3; }
.ia-scale { fill: url(#h-diag); stroke: var(--ink); stroke-width: 1.4; }
.ia-loader rect { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.2; }
.ia-loader .ia-cab, .ia-cab { fill: var(--y); stroke: var(--ink); stroke-width: 1.1; }
/* pojazdy z boku w barwach ciężarówki z silnika (rama grafitowa, kabina żółta, ładunek) */
.v-body { fill: #262b30; stroke: #59626a; stroke-width: 1; }
.v-cab { fill: #ffb600; stroke: var(--ink); stroke-width: 1; }
.v-glass { fill: #2d3a42; }
.v-cargo { fill: #b98a62; }
.v-wheel { fill: #15181b; }
.v-hub { fill: #59626a; }
.v-line { fill: none; stroke: #59626a; stroke-width: 1.4; }
.v-chute { fill: none; stroke: #262b30; stroke-width: 3; stroke-linecap: round; }
.v-drum { fill: #3a4046; stroke: #1b2127; stroke-width: 1.2; }
.v-band { fill: none; stroke: #8a959f; stroke-width: 1.6; stroke-linecap: round; }
.v-tank { fill: #59626a; stroke: #1b2127; stroke-width: .8; }
.v-guard { fill: none; stroke: #262b30; stroke-width: 2; }
/* nazwy obiektów: wyraźny podpis pod rysunkiem */
.ind-prints figcaption { font: 700 clamp(18px, 1.3vw, 22px)/1.2 var(--display); letter-spacing: -.01em; padding: 12px 14px 13px; gap: 12px; }
.ind-prints figcaption .swatch { width: 42px; height: 26px; }
.ia-hall { fill: url(#h-cross); stroke: var(--ink); stroke-width: 1.5; }
.ia-room { fill: var(--paper-hi); stroke: var(--ink-2); stroke-width: 1; }
.ia-bay rect { fill: url(#h-cross); stroke: var(--ink); stroke-width: 1.3; }
.ia-wh { fill: url(#h-diag-wide); stroke: var(--ink); stroke-width: 1.5; }
.ia-dock { stroke: var(--ink); stroke-width: 4; }
.ia-bar circle { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.3; }
.ia-bar path { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.ia-crane rect { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; }
.ia-boom { fill: none; stroke: var(--ink); stroke-width: 3; }
.ia-crane .ia-cw { fill: var(--ink); }

.detail-art .hl { stroke: var(--ink); }
.contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 80px); align-items: start; padding-bottom: clamp(72px, 8vw, 130px); }
.contact h2 { margin-bottom: 22px; }
.contact address { margin: 26px 0 14px; font-size: 18px; }
.mail a { font-size: clamp(22px, 2vw, 30px); font-weight: 700; text-decoration-color: var(--y-deep); text-decoration-thickness: 3px; }
.mail a:hover { background: var(--y); }
.support { color: var(--ink-2); }
@media (max-width: 1000px) {
  .sol, .contact { grid-template-columns: 1fr; }
  .sol-text { display: contents; }
  .sol-plan { position: sticky; top: calc(var(--head-h) + 6px); z-index: 5; order: 3; padding: 6px; background: var(--paper-hi); }
  .sol h2 { order: 1; margin-bottom: 0; }
  .sol .sec-p { order: 2; margin: 0; }
  .sol .sol-pick { order: 2; margin: 0; }
  .layers { order: 4; margin-top: 0; }
  .sol { gap: 24px; }
  .see { grid-template-columns: 1fr 1fr; }
  .see-text { grid-column: 1 / -1; }
  .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .see { grid-template-columns: 1fr; padding: 32px 16px; }
  .prints { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .kp.is-live .kp-rec-dot { animation: none; opacity: 1; }
  .detail:hover, .btn-ink:hover { transform: none; }
}
.tb-lines { max-width: 40ch; }
.tb-lines b { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--ink); }
/* ocynkownia, zakład przemysłowy, huta */
.ia-hall-o { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.ia-rail { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 10 3 2 3; }
.ia-liq { fill: url(#h-diag); }
.ia-zinc { fill: url(#h-dots); stroke: var(--ink); stroke-width: 2.2; }
.ia-crane-o rect:first-child { fill: rgba(27, 33, 39, .1); stroke: var(--ink); stroke-width: 1.3; }
.ia-trav { fill: var(--y); stroke: var(--ink); stroke-width: 1.1; }
.ia-field rect { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 2; }
.ia-prod { fill: url(#h-diag); stroke: var(--ink); stroke-width: 1.5; }
.ia-win rect { fill: var(--paper); stroke: var(--ink); stroke-width: .8; }
.ia-dock-s { fill: var(--paper-lo); stroke: var(--ink); stroke-width: 1.2; }
.v-box { fill: #3a4046; stroke: #1b2127; stroke-width: 1; }
.ia-grain path { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; }
.ia-brick { fill: url(#h-brick); stroke: var(--ink); stroke-width: 1.5; }
.ia-stove path { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; }
.ia-track { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.ia-ladle path:first-child { fill: #3a4046; stroke: var(--ink); stroke-width: 1.2; }
.ia-ladle .ia-melt { fill: var(--y); stroke: none; }
.ia-ladle circle { fill: #15181b; }

/* kadry z kamer na planie (index): wydruk z przodem pojazdu i ładunkiem, pasek kamery, rejestr wizyty */
.kp-empty { fill: var(--paper-lo); }
.kp-strip { fill: rgba(27, 33, 39, .78); }
.plan .kp-t { font-size: 10.5px; fill: #fff; letter-spacing: .04em; }
.kp-flash { fill: #fff; }
/* nakładka kamery: zdjęcie lekko schłodzone i podbite, linie skanowania, winieta, narożniki kadru, kropka nagrywania */
.kp-img { filter: saturate(.78) contrast(1.08) brightness(1.02); }
.kp-scan { fill: url(#kp-scan-p); pointer-events: none; }
.kp-vig { fill: url(#kp-vig-g); pointer-events: none; }
.kp-corners { fill: none; stroke: #fff; stroke-width: 1.4; opacity: .85; }
.kp-rec-dot { fill: #e53935; opacity: 0; }
.kp.is-live .kp-rec-dot { animation: kp-rec 1.6s steps(1) infinite; }
@keyframes kp-rec { 0% { opacity: 1; } 50% { opacity: .15; } }
.kp-lpr rect { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
.kp-lpr .kp-eu { fill: #2d4fa3; stroke: none; }
.plan .kp-lpr text { font-size: 15px; fill: var(--ink); text-anchor: middle; letter-spacing: .08em; }
.kp-rec rect { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1; transition: fill .3s var(--ease-out); }
.plan .kp-rec text { font-size: 9.5px; fill: var(--ink-2); text-anchor: middle; }
.kp-rec .is-on rect { fill: var(--ink); }
.plan .kp-rec .is-on text { fill: var(--y); }