/* =====================================================================
   PZJ layer — hero (liquid glass over the assembly film) and the system
   journey (cinematic dark stage, live-site reference, WebGL machine).
   Owned by novamira-sandbox/011-pzj-hero-journey.php.
   ===================================================================== */

/* ---------------- hero: white technical studio + liquid glass card */
.pzj-hero{position:relative;display:flex;min-height:clamp(660px,94vh,960px);overflow:hidden;background:var(--poz-page,#fff)}
.pzj-hero__media{position:absolute;inset:0 0 0 36%}
.pzj-hero__media video{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:clamp(24px,4vh,56px) 2vw 110px 0}
.pzj-hero__media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--poz-page,#fff),rgba(255,255,255,0) 26%);pointer-events:none}
.pzj-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(12,13,16,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,13,16,.05) 1px,transparent 1px);background-size:96px 96px;mask-image:linear-gradient(180deg,transparent 4%,#000 30%,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 30%,#000 82%,transparent);pointer-events:none}
.pzj-hero__inner{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding-top:96px;padding-bottom:clamp(22px,3.5vh,40px)}
.pzj-crumb{position:absolute;top:30px;left:0;display:flex;gap:12px;font:var(--poz-label,400 9px/1.6 monospace);letter-spacing:var(--poz-track-mono,.2em);text-transform:uppercase;color:var(--poz-text-2)}
.pzj-crumb a{color:inherit;text-decoration:none}
.pzj-crumb a:hover{color:var(--poz-accent-ink)}
.pzj-hero__copy{max-width:none;padding-bottom:0}
.pzj-hero__glass{position:relative;width:min(720px,54vw);min-width:0;padding:42px 46px 40px;overflow:hidden;border:1px solid rgba(255,255,255,.94);border-radius:28px;background:linear-gradient(128deg,rgba(255,255,255,.9),rgba(224,234,240,.67));box-shadow:0 30px 88px rgba(29,49,64,.14),inset 0 1px #fff;backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%)}
.pzj-hero__core{position:absolute;left:0;top:38px;bottom:38px;width:3px;background:linear-gradient(var(--acc-lifting,#dc2626),#7c0c12);box-shadow:0 0 20px rgba(220,38,38,.34)}
.pzj-hero__brand{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.pzj-hero__brand img{width:96px;height:28px;object-fit:contain}
.pzj-hero__brand span{font:var(--poz-label);letter-spacing:var(--poz-track-mono);text-transform:uppercase;color:var(--poz-text-2)}
.pzj-hero__glass h1{margin:0 0 18px;font:400 var(--poz-h1)/1.04 var(--poz-font-display);letter-spacing:var(--poz-track-title,.02em);color:var(--poz-text)}
.pzj-hero__lead{margin:0;max-width:56ch;font:400 clamp(15px,1.2vw,17px)/1.65 var(--poz-font-body);color:var(--poz-text-2)}
.pzj-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pzj-hero__strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(720px,54vw);margin:12px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.92);border-radius:16px;background:rgba(244,249,251,.76);box-shadow:0 16px 45px rgba(28,49,63,.09);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.pzj-hero__strip div{min-width:0;padding:16px 18px}
.pzj-hero__strip div+div{border-left:1px solid var(--poz-line)}
.pzj-hero__strip dt{font:var(--poz-label);letter-spacing:var(--poz-track-mono);text-transform:uppercase;color:var(--poz-text-2)}
.pzj-hero__strip dd{margin:9px 0 0;font:400 13px/1.4 var(--poz-font-display);letter-spacing:.02em;color:var(--poz-text)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pzj-hero__glass{background:rgba(242,247,249,.97)}.pzj-hero__strip{background:rgba(244,249,251,.96)}}

/* ---------------- journey: the dark stage --------------------------- */
.pzj{position:relative;background:#0A0B0E;color:var(--poz-text-on-dark,#fff);overflow:clip}
.pzj:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(64% 42% at 12% 96%,rgba(220,38,38,.2),transparent 62%),radial-gradient(46% 34% at 92% 6%,rgba(220,38,38,.1),transparent 60%),radial-gradient(70% 34% at 55% 100%,rgba(220,38,38,.12),transparent 66%)}

/* the stage is the section's full-width backdrop: one sticky viewport of
   canvas, so the red engineering grid runs edge to edge under everything */
.pzj__grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.pzj__stagecol{position:absolute;inset:0;z-index:0;pointer-events:none}
.pzj__stage{position:sticky;top:0;height:100svh;width:100%;overflow:hidden}
.pzj__stage canvas.pzj-gl{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.pzj__fallback{position:absolute;left:70%;top:50%;transform:translate(-50%,-50%);width:min(46%,420px);height:auto;border:1px solid var(--poz-line-dark,#24272D);background:#fff}
.pzj__stage.is-gl .pzj__fallback{display:none}

/* big chapter typography, anchored by the machine */
.pzj__chapter{position:absolute;right:clamp(22px,4.5vw,70px);bottom:clamp(22px,5vh,54px);display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);margin:0}
.pzj__chapter b{font:400 clamp(64px,7.5vw,124px)/0.85 var(--poz-font-display);letter-spacing:-.02em;color:transparent;background:linear-gradient(180deg,rgba(234,123,123,.5),rgba(220,38,38,.12));-webkit-background-clip:text;background-clip:text}
.pzj__chapter span{font:400 clamp(13px,1.5vw,22px)/1.2 var(--poz-font-display);letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.7)}
.pzj__cap{position:absolute;left:clamp(22px,4.5vw,70px);bottom:clamp(24px,5vh,56px);display:flex;justify-content:flex-start;gap:22px;margin:0;font:var(--poz-label);letter-spacing:var(--poz-track-mono);text-transform:uppercase;color:var(--poz-text-3)}
.pzj__rail-track{position:absolute;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);width:2px;height:190px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.pzj__rail-track b{position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px;background:linear-gradient(180deg,var(--acc-lifting-tint,#ea7b7b),var(--acc-lifting,#dc2626));box-shadow:0 0 14px rgba(220,38,38,.6)}

/* steps ride above the backdrop on the left */
.pzj__steps{position:relative;z-index:2;grid-column:1;padding-left:clamp(20px,3.4vw,56px)}
.pzj__step{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100svh;max-width:460px;padding:84px 24px 64px 0;opacity:.45;transform:translateY(16px);transition:opacity .55s ease,transform .75s var(--poz-ease,cubic-bezier(.2,.8,.2,1))}
.pzj__step.is-active{opacity:1;transform:none}
.pzj__kick{margin:0 0 16px;font:var(--poz-label);letter-spacing:var(--poz-track-mono);text-transform:uppercase;color:var(--acc-lifting-tint,#ea7b7b)}
.pzj__step h2{margin:0 0 16px;font:400 clamp(22px,2.5vw,36px)/1.12 var(--poz-font-display);letter-spacing:var(--poz-track-title,.02em);color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.75)}
.pzj__step>p:not(.pzj__kick){margin:0;max-width:46ch;font:400 15px/1.7 var(--poz-font-body);color:var(--poz-text-on-dark-2,#B3BAC5);text-shadow:0 1px 18px rgba(0,0,0,.7)}
.pzj__badges{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.pzj__badges li{padding:9px 14px;border:1px solid rgba(234,123,123,.32);border-radius:var(--poz-radius-pill,999px);background:rgba(179,23,33,.12);font:400 11px/1.4 var(--poz-font-mono);letter-spacing:.05em;color:#fff;white-space:nowrap}
.pzj__safe{display:grid;gap:0;margin:26px 0 0}
.pzj__safe div{display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid rgba(234,123,123,.14)}
.pzj__safe dt{font:400 9px/1.5 var(--poz-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-lifting-tint,#ea7b7b)}
.pzj__safe dd{margin:0;font:400 13px/1.55 var(--poz-font-body);color:var(--poz-text-on-dark-2)}
.pzj__readout{display:flex;gap:44px;margin:28px 0 0}
.pzj__readout div{min-width:0}
.pzj__readout dt{font:var(--poz-label);letter-spacing:var(--poz-track-mono);text-transform:uppercase;color:var(--poz-text-3)}
.pzj__readout dd{margin:10px 0 0;font:400 clamp(24px,2.2vw,32px)/1 var(--poz-font-display);color:#fff;font-variant-numeric:tabular-nums}
.pzj__readout dd span{color:var(--acc-lifting-tint,#ea7b7b)}
.pzj__list{margin:26px 0 0;padding:0;list-style:none}
.pzj__list li{position:relative;padding:12px 0 12px 26px;border-top:1px solid rgba(234,123,123,.14);font:400 14px/1.5 var(--poz-font-body);color:var(--poz-text-on-dark-2)}
.pzj__list li:before{content:"";position:absolute;left:2px;top:18px;width:10px;height:10px;background:linear-gradient(135deg,var(--acc-lifting,#dc2626),#7c0c12);box-shadow:0 0 12px rgba(220,38,38,.45)}
.pzj__fams{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:26px 0 0}
.pzj__fams h3{margin:0 0 10px;font:400 9px/1.5 var(--poz-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-lifting-tint,#ea7b7b)}
.pzj__fams p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:9px 0;border-top:1px solid rgba(234,123,123,.16)}
.pzj__fams b{font:400 10.5px/1.4 var(--poz-font-display);letter-spacing:.02em;color:#fff}
.pzj__fams span{font:400 11px/1.4 var(--poz-font-mono);color:var(--poz-text-3);white-space:nowrap}
.pzj__next{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:16px 0 14px;border-bottom:1px solid rgba(234,123,123,.3);color:#fff;text-decoration:none;font:400 9px/1 var(--poz-font-display);letter-spacing:var(--poz-track-btn,.13em);text-transform:uppercase;transition:border-color var(--poz-dur-hover,.32s) var(--poz-ease)}
.pzj__next:hover{border-color:var(--acc-lifting-tint,#ea7b7b)}
.pzj__step .pzj__next{pointer-events:auto}

@media(max-width:900px){
  .pzj-hero{min-height:0;padding-top:46svh}
  .pzj-hero__media{inset:0 0 auto 0;height:52svh}
  .pzj-hero__media video{object-position:center;padding:70px 16px 12px}
  .pzj-hero__media:after{background:linear-gradient(180deg,rgba(255,255,255,0) 60%,var(--poz-page,#fff))}
  .pzj-hero__copy{padding-top:10px}
  .pzj-hero__glass,.pzj-hero__strip{width:100%}
  .pzj-hero__glass{padding:30px 26px 28px 32px}
  .pzj-hero__strip{grid-template-columns:1fr 1fr}
  .pzj-hero__strip div+div{border-left:0}
  .pzj-hero__strip div:nth-child(even){border-left:1px solid var(--poz-line)}
  .pzj__grid{display:flex;flex-direction:column}
  /* mobile: the dark backdrop collapses into the sticky band, so the SECTION
     carries the dark ground. The step text rides OVER the band as dark glass
     cards — always readable, with the machine visible in the gaps between
     cards — instead of scrolling behind the opaque animation. */
  .pzj{background:#0A0B0E}
  .pzj__steps{position:relative;z-index:3}
  .pzj__stagecol{position:sticky;inset:auto;order:-1;top:calc(var(--poz-header-height,70px) + 54px);z-index:2;background:#0A0B0E;pointer-events:none}
  .pzj__stage{height:46svh}
  .pzj__chapter{right:16px;bottom:14px}
  .pzj__chapter b{font-size:52px}
  .pzj__chapter span{font-size:12px}
  .pzj__cap{left:16px;bottom:16px}
  .pzj__rail-track{height:110px;right:10px}
  .pzj__fallback{left:50%;width:min(70%,380px)}
  .pzj__steps{padding:0 14px}
  .pzj__step{min-height:0;max-width:none;margin:0 0 36svh;padding:22px 18px 24px;opacity:.6;background:rgba(11,13,17,.88);border:1px solid rgba(234,123,123,.16);border-radius:18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
  .pzj__step:first-child{margin-top:18px}
  .pzj__step:last-child{margin-bottom:14svh}
}
@media(max-width:620px){
  .pzj-hero__glass{padding:26px 20px 24px 26px;border-radius:22px}
  .pzj__fams{grid-template-columns:1fr}
  .pzj__safe div{grid-template-columns:88px minmax(0,1fr)}
  .pzj__readout{gap:30px}
}
@media(prefers-reduced-motion:reduce){
  .pzj__grid{display:block}
  .pzj__stagecol{position:relative;inset:auto}
  .pzj__stage{position:relative;top:auto;height:auto;min-height:420px;padding:26px 0}
  .pzj__rail-track,.pzj__chapter{display:none}
  .pzj__cap{position:relative;left:auto;bottom:auto;margin:10px 18px}
  .pzj__step,.pzj__step.is-active{min-height:0;opacity:1;transform:none;padding:44px 18px;margin:0 0 24px}
  .pzj__step:first-child{margin-top:18px}
  .pzj__step:last-child{margin-bottom:24px}
}


/* ——— "Kontrola svakog segmenta" (#sigurnost): compact band ——————————
   The stock design spends a ~1200px section on four short points. This
   tightens it to a slim card: smaller visual column, denser step grid. */
.pzlt-safety{padding:clamp(52px,4.6vw,84px) 0}
.pzlt-safety .pzlt-heading{margin-bottom:clamp(26px,2.6vw,40px)}
.pzlt-safety__visual{min-height:0}
.pzlt-safety__visual img{width:82%;height:86%;padding:16px}
.pzlt-safety__datum{right:14px;bottom:14px;gap:4px;padding:10px 13px}
.pzlt-safety__steps article{padding:22px 24px}
.pzlt-safety__steps h3{margin:8px 0 6px;font-size:clamp(.95rem,1vw,1.12rem)}
.pzlt-safety__steps p{font-size:.85rem;line-height:1.5}
@media (min-width:1001px){
  .pzlt-safety__stage{grid-template-columns:minmax(250px,.52fr) minmax(0,1.48fr);min-height:0}
  .pzlt-safety__visual{min-height:340px}
}