/* ==========================================================================
   NS-STEEL 1989 — Mašinski centar, Veternik / Novi Sad
   Vizuelni sistem: "Tehnički crtež" — hairline mreža, kotne linije,
   monospace oznake, plava iz logotipa (#1968B3) na mašinski tamnoj podlozi.
   ========================================================================== */

/* ---------- 1. TOKENI ---------- */
:root{
  /* boje iz logotipa */
  --blue:        #1968B3;
  --blue-hi:     #3D9BE6;
  --blue-lo:     #0E3F6E;
  --blue-glow:   rgba(61,155,230,.35);

  --ink:         #090C11;
  --ink-2:       #0D111A;
  --surface:     #121824;
  --surface-2:   #18202E;

  --line:        rgba(150,185,225,.13);
  --line-2:      rgba(150,185,225,.26);
  --grid:        rgba(150,185,225,.055);

  --spark:       #E9F1F9;
  --mist:        #93A3B7;
  --mist-2:      #64748B;

  --heat:        #FF7A29;      /* koristi se samo u sekciji sečenja */

  /* tipografija */
  --f-display: 'Archivo', 'Arial Narrow', sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --t-hero:  clamp(2.3rem, 8.2vw, 6.4rem);
  --t-h1:    clamp(2.2rem, 6.4vw, 4.6rem);
  --t-h2:    clamp(1.7rem, 4.4vw, 3.1rem);
  --t-h3:    clamp(1.15rem, 2.3vw, 1.55rem);
  --t-body:  clamp(.95rem, 1.05vw, 1.06rem);
  --t-small: .8rem;
  --t-mono:  .715rem;

  /* prostor — jedinstvena skala */
  --gut: clamp(1.15rem, 4vw, 3.25rem);
  --sec: clamp(4.5rem, 11vw, 9.5rem);
  --max: 1360px;

  /* koraci razmaka: sve margine u sistemu koriste ove vrednosti */
  --sp-1: .35rem;
  --sp-2: clamp(.5rem, 1vw, .7rem);
  --sp-3: clamp(.85rem, 1.6vw, 1.1rem);
  --sp-4: clamp(1.15rem, 2.2vw, 1.5rem);
  --sp-5: clamp(1.5rem, 2.8vw, 2rem);
  --sp-6: clamp(1.9rem, 3.4vw, 2.5rem);
  --sp-7: clamp(2.2rem, 4vw, 3rem);
  --sp-8: clamp(2.8rem, 5.4vw, 4rem);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --hdr: 74px;
  /* visina zone koju zauzima donji dok — sadržaj heroja ne sme da uđe pod nju */
  --dock-btn: clamp(50px, 12vw, 58px);
  --dock-h: calc(var(--dock-btn) + clamp(.9rem, 3vw, 1.5rem));
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);overflow-x:clip}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--spark);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px;border-radius:2px}

/* ---------- 3. TIPOGRAFIJA ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.022em;
  text-wrap:balance;
}
h2{font-size:var(--t-h2)}
/* na malim širinama h2 pada na ~1.7rem, gde je vođica od .96 pretesna */
@media (max-width:639px){h2{line-height:1.06;letter-spacing:-.015em}}
h3{font-size:var(--t-h3);line-height:1.15;letter-spacing:-.012em}
p{text-wrap:pretty}
strong{font-weight:600;color:#fff}

.mono{
  font-family:var(--f-mono);
  font-size:var(--t-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-hi);
  font-weight:500;
}
.lead{
  font-size:clamp(1.02rem,1.6vw,1.24rem);
  line-height:1.6;
  color:var(--mist);
  max-width:62ch;
}
.muted{color:var(--mist)}

/* ---------- 4. LEJAUT ---------- */
.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec)*.6)}
.section + .section{border-top:1px solid var(--line)}

/* Naslov sekcije sa kotnom linijom */
.sec-head{margin-bottom:clamp(2.2rem,5vw,4rem);max-width:70ch}
.sec-head--tight{margin-bottom:var(--sp-4)}
.sec-head .mono{display:block;margin-bottom:.9rem}
.sec-head h2{margin-bottom:1.1rem}

.dimline{
  position:relative;height:1px;background:var(--line-2);
  margin:1.6rem 0 0;transform-origin:left center;
  transform:scaleX(0);transition:transform 1.1s var(--ease) .1s;
}
.is-in .dimline{transform:scaleX(1)}
.dimline::before,.dimline::after{
  content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--blue-hi);
}
.dimline::before{left:0}
.dimline::after{right:0}

/* ---------- 5. AMBIJENT: mreža + zrno ---------- */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:clamp(46px,7vw,84px) clamp(46px,7vw,84px);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 12%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 12%, #000 20%, transparent 78%);
}
.bg-grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{background-position:0 0} 16%{background-position:-14px -22px}
  33%{background-position:-28px 14px} 50%{background-position:16px -30px}
  66%{background-position:-8px 24px} 83%{background-position:24px 8px}
}
.page{position:relative;z-index:2}

/* traka napretka */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi));
  transform:scaleX(0);transform-origin:left;
}

/* ---------- 6. PRELOADER ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;gap:1.4rem;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.done{opacity:0;visibility:hidden}
.loader__in{display:grid;justify-items:center;gap:1.35rem}
.loader svg{width:56px;height:56px;animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__bar{width:min(200px,44vw);height:1px;background:var(--line-2);position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--blue-hi);transform:scaleX(0);transform-origin:left}
.loader .mono{color:var(--mist-2)}

/* ---------- 7. NIŠAN (kursor) ---------- */
.reticle{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;
  width:38px;height:38px;margin:-19px 0 0 -19px;opacity:0;
  transition:opacity .3s, transform .18s var(--ease);
}
.reticle::before,.reticle::after{
  content:"";position:absolute;background:var(--blue-hi);opacity:.85;
}
.reticle::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.reticle::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.reticle i{
  position:absolute;inset:11px;border:1px solid var(--blue-hi);border-radius:50%;
  transition:inset .2s var(--ease);
}
.reticle b{
  position:absolute;left:26px;top:20px;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.1em;color:var(--blue-hi);white-space:nowrap;font-weight:400;opacity:.75;
}
.reticle.on{opacity:1}
.reticle.hot i{inset:4px;background:rgba(61,155,230,.14)}
@media (hover:none),(pointer:coarse){.reticle{display:none}}

/* ---------- 8. HEADER ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:110;
  height:var(--hdr);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:height .35s var(--ease),background .35s,border-color .35s,backdrop-filter .35s;
}
.hdr.stuck{
  height:60px;background:rgba(9,12,17,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);
}
.hdr.hide{transform:translateY(-100%);transition:transform .4s var(--ease)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand img{height:34px;width:auto;transition:height .35s var(--ease)}
.hdr.stuck .brand img{height:28px}
/* Preko fotografije u vrhu strane logotip ide u belo; čim se traka zalepi
   pri skrolovanju, vraća se originalna plava sa prozirne podloge. */
.hdr .brand img{filter:brightness(0) invert(1);transition:height .35s var(--ease),filter .35s var(--ease)}
.hdr.stuck .brand img{filter:none}

.nav{display:none}
@media (min-width:1080px){
  .nav{display:flex;align-items:center;gap:.15rem}
  .nav a{
    position:relative;padding:.55rem .78rem;font-size:.78rem;font-weight:500;
    letter-spacing:.07em;text-transform:uppercase;color:var(--mist);
    transition:color .25s;
  }
  .nav a::after{
    content:"";position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:1px;
    background:var(--blue-hi);transform:scaleX(0);transform-origin:right;
    transition:transform .38s var(--ease);
  }
  .nav a:hover,.nav a[aria-current="page"]{color:var(--spark)}
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
}
.hdr .hdr__cta{display:none}
@media (min-width:1080px){.hdr .hdr__cta{display:inline-flex}}

/* burger */
.burger{
  width:44px;height:44px;display:grid;place-content:center;gap:5px;
  border:1px solid var(--line-2);flex:none;
}
@media (min-width:1080px){.burger{display:none}}
.burger span{display:block;width:19px;height:1.5px;background:var(--spark);transition:transform .35s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobilni meni */
.mnav{
  position:fixed;inset:0;z-index:105;background:var(--ink-2);
  padding:calc(var(--hdr) + 2rem) var(--gut) 2rem;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
  overflow-y:auto;
}
.mnav.open{clip-path:inset(0 0 0 0)}
.mnav ol{display:grid;gap:.1rem}
.mnav li{overflow:hidden}
.mnav a{
  display:flex;align-items:baseline;gap:1rem;padding:.5rem 0;
  font-family:var(--f-display);font-size:clamp(1.6rem,7.5vw,2.5rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.12;
  transform:translateY(110%);transition:transform .55s var(--ease),color .25s;
}
.mnav.open a{transform:translateY(0)}
.mnav li:nth-child(1) a{transition-delay:.08s}
.mnav li:nth-child(2) a{transition-delay:.13s}
.mnav li:nth-child(3) a{transition-delay:.18s}
.mnav li:nth-child(4) a{transition-delay:.23s}
.mnav li:nth-child(5) a{transition-delay:.28s}
.mnav li:nth-child(6) a{transition-delay:.33s}
.mnav li:nth-child(7) a{transition-delay:.38s}
.mnav a small{font-family:var(--f-mono);font-size:.62rem;color:var(--blue-hi);letter-spacing:.14em;font-weight:400}
.mnav a:hover,.mnav a[aria-current="page"]{color:var(--blue-hi)}
.mnav__foot{display:grid;gap:.35rem;padding-top:2rem;border-top:1px solid var(--line);margin-top:2rem}
.mnav__foot a{font-size:.95rem;color:var(--mist)}
.mnav__foot a:hover{color:var(--spark)}

/* ---------- 9. DUGMAD ---------- */
.btn{
  --bg:transparent;--fg:var(--spark);--bd:var(--line-2);
  position:relative;display:inline-flex;align-items:center;gap:.65rem;
  padding:.92rem 1.5rem;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--ease);
}
.btn:hover{color:#fff;border-color:var(--blue)}
.btn:hover::before{transform:scaleY(1);transform-origin:top}
.btn svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{--bg:var(--blue);--bd:var(--blue);--fg:#fff}
.btn--solid::before{background:var(--blue-hi)}
.btn--ghost{--bd:var(--line)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- 10. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-top:calc(var(--hdr) + clamp(1.5rem,5vw,3rem));
  /* dno heroja mora da očisti dugme asistenta, inače meta traka ide pod njega */
  padding-bottom:max(clamp(1.5rem,5vw,4.5rem), calc(var(--dock-h) + .9rem));
  overflow:hidden;
  /* uspravno skrolovanje ostaje pregledaču, vodoravno prevlačenje pripada slajderu */
  touch-action:pan-y;
}
/* --- sloj 1: fotografije --- */
.hero__media{
  position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;
  background:var(--ink);
}
.hero__slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,50% 50%);
  opacity:0;transform:scale(1);
  /* svaka fotografija ima svoju svetlinu — druga je snimljena u beloj hali */
  filter:saturate(var(--sat,.5)) contrast(1.05) brightness(var(--bri,.7));
  transition:opacity 1.2s var(--ease-in-out);
  will-change:opacity,transform;
}
.hero__slide.is-on{opacity:1}
/* ista podešavanja po fotografiji kao kod .fig — redosled slajdova je fiksan */
.hero__slide:nth-child(1){--pos:42% 52%;--bri:.72;--sat:.5}
.hero__slide:nth-child(2){--pos:38% 45%;--bri:.46;--sat:.42}
.hero__slide:nth-child(3){--pos:56% 44%;--bri:.8;--sat:.6}
.hero__slide.kb{animation:kenburns 7200ms linear forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}

/* --- sloj 2: kolorna obrada — plavi ton + gradijent za čitljivost --- */
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--blue);mix-blend-mode:color;opacity:.55;
}
.hero__tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(9,12,17,.92) 16%, rgba(9,12,17,.62) 42%, rgba(9,12,17,.34) 68%, rgba(9,12,17,.42) 100%),
    linear-gradient(100deg, rgba(14,63,110,.55) 0%, rgba(9,12,17,.18) 55%, rgba(25,104,179,.20) 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, var(--ink) 1%, rgba(9,12,17,.42) 26%, transparent 60%);
}

/* --- sloj 3: potpisni zupčanici, spušteni preko fotografije --- */
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:.34;
  mask-image:radial-gradient(circle at 72% 40%, #000 5%, transparent 68%);
  -webkit-mask-image:radial-gradient(circle at 72% 40%, #000 5%, transparent 68%);
}
@media (min-width:900px){.hero__canvas{opacity:.3}}

/* --- sloj 4: sadržaj --- */
.hero__in{position:relative;z-index:3;width:100%}
.hero__eyebrow{display:flex;align-items:center;gap:.75rem;margin-bottom:1.35rem}
.hero__eyebrow::before{content:"";width:clamp(24px,5vw,58px);height:1px;background:var(--blue-hi)}

.hero h1{
  font-size:var(--t-hero);max-width:16ch;
  font-weight:800;
  line-height:.88;
  letter-spacing:-.035em;
  margin-bottom:1.5rem;
}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;transform:translateY(102%);animation:rise .95s var(--ease) forwards}
.hero h1 .ln:nth-child(1) > span{animation-delay:.15s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.26s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.37s}
@keyframes rise{to{transform:translateY(0)}}
.hero h1 em{
  font-style:normal;color:var(--blue-hi);
  font-variation-settings:'wdth' 78;
}
.hero__lead{max-width:52ch;margin-bottom:clamp(1.4rem,3.4vw,2.1rem)}
.hero .btn-row{margin-bottom:clamp(1.6rem,5vw,3rem)}

/* ---------- 10b. TRAKA SLAJDERA: natpis + kontrole ---------- */
.hero__bar{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4);
}

/* natpisi se preklapaju u istoj ćeliji da nema pomeranja rasporeda */
.hero__caps{display:grid;flex:1 1 15rem;min-width:0}
.hero__capt{
  grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity 1.2s var(--ease-in-out),visibility 1.2s;
}
.hero__capt.is-on{opacity:1;visibility:visible}
.hero__capt b{
  display:block;font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hi);
  margin-bottom:.3rem;
}
.hero__capt span{
  display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mist-2);line-height:1.5;
}

/* kontrole: tri tanke crte sa monospace oznakama, aktivna se puni sleva */
.hero__ctrl{display:flex;gap:.9rem;flex:none}
.hero__pip{
  display:grid;gap:.45rem;width:clamp(44px,10vw,66px);padding:.35rem 0 0;
  text-align:left;
}
.hero__pip-no{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  color:var(--mist-2);transition:color .3s;
}
.hero__pip-bar{
  display:block;height:2px;background:var(--line-2);position:relative;overflow:hidden;
}
.hero__pip-bar i{
  position:absolute;inset:0;background:var(--blue-hi);
  transform:scaleX(0);transform-origin:left;
}
.hero__pip:hover .hero__pip-no,
.hero__pip:focus-visible .hero__pip-no{color:var(--spark)}
.hero__pip:hover .hero__pip-bar{background:rgba(150,185,225,.4)}
.hero__pip[aria-current="true"] .hero__pip-no{color:var(--spark)}
.hero__pip:focus-visible{outline-offset:5px}

/* od 1080px se prikazuje vertikalni „Skrolujte" uz desnu ivicu — kontrole mu se sklanjaju */
@media (min-width:1080px){.hero__ctrl{margin-right:2.6rem}}

/* Na uskim ekranima heroj mora da stane u 100svh, inače meta traka ide pod dok.
   Natpis i kontrole ostaju u istom redu sve do 340px. */
@media (max-width:759px){
  .hero__bar{gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-3)}
  .hero__caps{flex:1 1 9rem}
  .hero__capt b{font-size:.66rem;letter-spacing:.16em;margin-bottom:.15rem}
  .hero__capt span{font-size:.58rem;letter-spacing:.1em;line-height:1.4}
  .hero__ctrl{gap:.55rem}
  .hero__pip{width:clamp(38px,9vw,48px);gap:.35rem}
  .hero__lead{line-height:1.52;margin-bottom:var(--sp-4)}
  .hero h1{margin-bottom:var(--sp-4)}
  .hero .btn-row{margin-bottom:var(--sp-4);gap:.55rem}
  .hero .btn-row .btn{padding:.82rem 1.05rem;letter-spacing:.12em}
  .hero__meta div{padding:.62rem .7rem .58rem}
  .hero__meta b{margin-bottom:.2rem}
  .hero__meta div > span{font-size:.57rem;letter-spacing:.1em;line-height:1.4}
}
@media (max-width:339px){
  .hero__caps{flex:1 1 100%}
}

/* Niski ekrani (laptop 1440×900, 1024×768) — ograničenje je visina, ne širina.
   Bez ovoga sadržaj heroja prelazi pregib i meta traka završi pod plutajućim dokom.
   min() sa vh čuva mobilne veličine netaknutim: tamo je --t-hero ionako manji. */
@media (max-height:940px){
  .hero{padding-top:calc(var(--hdr) + clamp(.9rem,2.2vh,1.6rem))}
  .hero__eyebrow{margin-bottom:var(--sp-3)}
  .hero h1{font-size:min(var(--t-hero), 9.6vh);margin-bottom:var(--sp-4)}
  .hero__lead{margin-bottom:var(--sp-4)}
  .hero .btn-row{margin-bottom:var(--sp-4)}
  .hero__bar{margin-bottom:var(--sp-3)}
  .hero__meta div{padding-block:.62rem .55rem}
}

/* Vrlo niski telefoni (npr. 360×640) — najsabijenija varijanta meta trake */
@media (max-height:700px) and (max-width:759px){
  .hero__eyebrow{margin-bottom:var(--sp-2)}
  .hero h1{margin-bottom:var(--sp-3)}
  .hero__lead{margin-bottom:var(--sp-3);line-height:1.45}
  .hero .btn-row{margin-bottom:var(--sp-3)}
  .hero__bar{margin-bottom:var(--sp-2)}
  .hero__meta div{padding:.45rem .6rem .42rem}
  .hero__meta div:first-child{padding-left:0}
  .hero__meta b{font-size:1.15rem;margin-bottom:.1rem}
  .hero__meta div > span{font-size:.53rem;line-height:1.3}
}

/* meta traka u dnu heroja */
.hero__meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (min-width:760px){.hero__meta{grid-template-columns:repeat(4,1fr)}}
.hero__meta div{background:var(--ink);padding:clamp(.8rem,2.4vw,1.05rem) 1rem clamp(.7rem,2.2vw,.95rem)}
.hero__meta div:first-child{padding-left:0}
.hero__meta b{
  display:block;font-family:var(--f-display);font-size:clamp(1.35rem,3vw,2rem);
  font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:.4rem;
}
.hero__meta div > span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mist-2)}

.scrollcue{
  position:absolute;right:var(--gut);bottom:clamp(1.5rem,5vw,4.5rem);z-index:3;
  display:none;writing-mode:vertical-rl;font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mist-2);
  align-items:center;gap:.8rem;
}
@media (min-width:1080px){.scrollcue{display:flex}}
.scrollcue::after{content:"";width:1px;height:52px;background:linear-gradient(var(--blue-hi),transparent);animation:cue 2.1s var(--ease-in-out) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- 11. TIKER ---------- */
.ticker{
  border-block:1px solid var(--line);padding-block:1.05rem;overflow:hidden;
  background:var(--ink-2);position:relative;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:12vw;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-2),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--ink-2),transparent)}
.ticker__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker__track span{
  display:flex;align-items:center;gap:1.5rem;padding-inline:1.5rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mist);white-space:nowrap;
}
.ticker__track span::after{content:"";width:5px;height:5px;background:var(--blue);transform:rotate(45deg);flex:none}

/* ---------- 12. OTKRIVANJE NA SKROL ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}
/* klip ide na dete: clip-path na samom cilju obara presek IntersectionObserver-a */
.rv--clip{opacity:1;transform:none}
.rv--clip > *{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--ease)}
.rv--clip.is-in > *{clip-path:inset(0 0 0 0)}

/* ---------- 13. KARTICE MOGUĆNOSTI ---------- */
.caps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.caps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.caps{grid-template-columns:repeat(3,1fr)}}
.cap{
  position:relative;background:var(--ink);padding:clamp(1.5rem,3vw,2.3rem);
  display:flex;flex-direction:column;gap:1rem;min-height:270px;
  transition:background .4s var(--ease);isolation:isolate;overflow:hidden;
}
.cap::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(25,104,179,.16), transparent 62%);
  opacity:0;transition:opacity .45s;
}
.cap:hover{background:var(--surface)}
.cap:hover::before{opacity:1}
.cap__no{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--mist-2)}
.cap__ico{width:44px;height:44px;color:var(--blue-hi);transition:transform .5s var(--ease)}
.cap:hover .cap__ico{transform:translateY(-3px) rotate(-6deg)}
.cap h3{margin-bottom:.1rem}
.cap p{font-size:.92rem;color:var(--mist);line-height:1.6;flex:1}
.cap__go{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-hi);
}
.cap__go svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.cap:hover .cap__go svg{transform:translateX(5px)}
.cap::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.cap:hover::after{transform:scaleX(1)}

/* ---------- 14. PROCES ---------- */
.proc{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:700px){.proc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.proc{grid-template-columns:repeat(4,1fr)}}
.proc__step{background:var(--ink);padding:clamp(1.4rem,3vw,2.1rem);position:relative}
.proc__step .mono{display:block;margin-bottom:1.5rem}
.proc__step h3{margin-bottom:.7rem}
.proc__step p{font-size:.9rem;color:var(--mist);line-height:1.6}
.proc__rule{
  position:relative;height:1px;background:var(--line-2);margin:1.4rem 0 1.1rem;
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease);
}
.is-in .proc__rule{transform:scaleX(1)}
.proc__step:nth-child(2) .proc__rule{transition-delay:.12s}
.proc__step:nth-child(3) .proc__rule{transition-delay:.24s}
.proc__step:nth-child(4) .proc__rule{transition-delay:.36s}
.proc__rule::after{content:"";position:absolute;right:0;top:-3px;border-left:6px solid var(--blue-hi);border-block:3.5px solid transparent}

/* ---------- 15. MAŠINSKI PARK ---------- */
.machines{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:860px){.machines{grid-template-columns:repeat(2,1fr)}}
.machine{
  background:var(--ink);padding:clamp(1.5rem,3.2vw,2.4rem);display:grid;gap:1.3rem;align-content:start;
  transition:background .4s var(--ease);
}
/* isti odziv kao kod .cap — sve interaktivne površine deluju kao jedna porodica */
.machine:hover{background:var(--surface)}
.machine:hover .machine__tag{border-color:var(--blue);background:rgba(25,104,179,.14)}
.machine__tag{transition:border-color .3s,background .3s}
.machine__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.machine h3{max-width:22ch}
.machine__tag{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-2);padding:.32rem .55rem;color:var(--blue-hi);white-space:nowrap;flex:none;
}
.specs{display:grid;gap:.05rem}
.spec{display:grid;grid-template-columns:1fr auto;gap:.7rem;align-items:baseline;padding:.62rem 0;border-bottom:1px solid var(--line)}
.spec:last-child{border-bottom:0}
.spec dt{font-size:.83rem;color:var(--mist)}
.spec dd{font-family:var(--f-mono);font-size:.79rem;color:var(--spark);text-align:right;letter-spacing:.02em}

/* ---------- 16. ZUPČANICI ---------- */
.gears{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:960px){.gears{grid-template-columns:1fr 1fr}}
.gears__vis{position:relative;aspect-ratio:1;display:grid;place-items:center}
.gears__vis svg{width:100%;height:auto;color:var(--blue)}
.gears__vis::before{
  content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle, rgba(25,104,179,.20), transparent 66%);
  filter:blur(28px);
}
.spin-a{animation:spin 26s linear infinite;transform-origin:center}
.spin-b{animation:spin 26s linear infinite reverse;transform-origin:center}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chip{
  font-family:var(--f-mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);padding:.5rem .78rem;color:var(--mist);
  transition:color .3s,border-color .3s,background .3s;
}
.chip:hover{color:#fff;border-color:var(--blue);background:rgba(25,104,179,.14)}

/* lista sa kvačicom */
.ticks{display:grid;gap:.62rem;margin-top:1.5rem}
.ticks li{display:flex;gap:.85rem;font-size:.94rem;color:var(--mist);line-height:1.55}
.ticks li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:.55rem;
  border-right:1.5px solid var(--blue-hi);border-bottom:1.5px solid var(--blue-hi);
  transform:rotate(45deg);
}
.ticks--2{--c:1}
@media (min-width:680px){.ticks--2{grid-template-columns:1fr 1fr;column-gap:2rem}}

/* ---------- 17. BROJEVI ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--ink-2);padding:clamp(1.6rem,4vw,2.8rem) clamp(1rem,2.5vw,1.8rem);text-align:left}
.stat b{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(2rem,5.2vw,3.5rem);letter-spacing:-.03em;line-height:1;
  color:var(--spark);margin-bottom:.55rem;
  /* drugi i poslednji namerni potez sa Archivo osom širine — brojevi kao na instrumentu */
  font-variation-settings:'wdth' 92;
}
.stat b i{font-style:normal;color:var(--blue-hi);font-size:.5em;vertical-align:.35em;margin-left:.12em}
.stat > span{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mist-2);display:block;line-height:1.5}

/* ---------- 18. SPLIT BLOK ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (min-width:960px){.split{grid-template-columns:.95fr 1.05fr}}
.split--rev .split__vis{order:-1}
@media (min-width:960px){.split--rev .split__vis{order:0}}
.panel{border:1px solid var(--line);background:var(--ink-2);padding:clamp(1.4rem,3vw,2.2rem)}
/* negativna margina spaja dva susedna okvira u jednu liniju od 1px umesto 3px */
.panel + .panel{margin-top:-1px}
.split--mid{align-items:center}

/* tabela */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl caption{
  text-align:left;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-hi);padding-bottom:.9rem;
}
.tbl th,.tbl td{padding:.72rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mist-2);font-weight:500;
}
.tbl td{color:var(--mist)}
.tbl td:first-child{color:var(--spark);font-weight:500}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .25s}
.tbl tbody tr:hover{background:rgba(25,104,179,.07)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 19. AKORDEON ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.35rem 0;text-align:left;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1rem,2.1vw,1.28rem);letter-spacing:-.01em;line-height:1.3;
  transition:color .28s;
}
.acc__btn:hover,.acc__item.open .acc__btn{color:var(--blue-hi)}
.acc__btn i{
  flex:none;width:22px;height:22px;position:relative;
}
.acc__btn i::before,.acc__btn i::after{
  content:"";position:absolute;background:currentColor;transition:transform .38s var(--ease),opacity .3s;
}
.acc__btn i::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%)}
.acc__btn i::after{top:0;left:50%;height:100%;width:1.5px;transform:translateX(-50%)}
.acc__item.open .acc__btn i::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.acc__body{overflow:hidden;height:0;transition:height .45s var(--ease)}
.acc__body p,.acc__body ul{padding-bottom:1.5rem;color:var(--mist);font-size:.93rem;line-height:1.68;max-width:75ch}

/* ---------- 20. CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink-2)}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(760px circle at 78% 8%, rgba(25,104,179,.20), transparent 62%);
}
.cta__in{position:relative;display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:960px){.cta__in{grid-template-columns:1fr 1fr;align-items:start}}
.cta h2{margin-bottom:1.1rem}

/* ---------- 21. FORMA ---------- */
.form{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.field{background:var(--ink);position:relative}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;padding:1.5rem 1.1rem .68rem;
  font-size:.95rem;outline:none;
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field label{
  position:absolute;left:1.1rem;top:1.1rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mist-2);pointer-events:none;
  transition:transform .3s var(--ease),color .3s;transform-origin:left top;
}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-.55rem) scale(.86);color:var(--blue-hi);
}
.field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue-hi);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.field:focus-within::after{transform:scaleX(1)}
/* `outline:none` iznad ima veću specifičnost od globalnog :focus-visible pravila,
   pa polja forme moraju izričito da vrate prsten — isti kao na ostalim kontrolama.
   Uvučen je za 2px da legne unutar ćelije, jer okvir daje mreža forme. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,
.ai__form input:focus-visible{outline:2px solid var(--blue-hi);outline-offset:-2px}
.form__foot{background:var(--ink);padding:1.1rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.form__note{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;color:var(--mist-2);max-width:36ch;line-height:1.6}
.form__msg{font-size:.85rem;padding:.9rem 1.1rem;background:var(--ink);border-top:1px solid var(--line);display:none}
.form__msg.show{display:block}
.form__msg.ok{color:#57C98A}
.form__msg.err{color:#E8674F}

/* kontakt kartice */
.ccards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.ccards{grid-template-columns:1fr 1fr}}
.ccard{background:var(--ink);padding:clamp(1.35rem,3vw,2rem);display:grid;gap:.55rem;align-content:start}
.ccard .mono{margin-bottom:.35rem}
.ccard h3{font-size:1.02rem;margin-bottom:.25rem}
.ccard a,.ccard p{font-size:.92rem;color:var(--mist);transition:color .25s}
.ccard a:hover{color:var(--blue-hi)}

/* ---------- 22. FOOTER ---------- */
.ftr{border-top:1px solid var(--line);background:var(--ink-2);padding-top:clamp(3rem,7vw,5rem)}
.ftr__grid{display:grid;gap:2.4rem}
@media (min-width:800px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
.ftr img{height:32px;width:auto;margin-bottom:1.1rem}
.ftr p{font-size:.88rem;color:var(--mist);max-width:38ch;line-height:1.65}
.ftr h4{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-hi);font-weight:500;margin-bottom:1.05rem}
.ftr ul{display:grid;gap:.55rem}
.ftr li a,.ftr address{font-size:.88rem;color:var(--mist);font-style:normal;line-height:1.7;transition:color .25s}
.ftr li a:hover{color:var(--spark)}
.ftr__soc{display:flex;gap:.5rem;margin-top:1.1rem}
.ftr__soc a{width:38px;height:38px;border:1px solid var(--line-2);display:grid;place-items:center;transition:border-color .3s,background .3s,color .3s}
.ftr__soc a:hover{border-color:var(--blue);background:rgba(25,104,179,.16);color:var(--blue-hi)}
.ftr__soc svg{width:16px;height:16px}
.ftr__bot{
  margin-top:clamp(2.4rem,5vw,3.5rem);border-top:1px solid var(--line);padding-block:1.35rem;
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;
}
.ftr__bot p,.ftr__bot a{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mist-2)}
.ftr__bot a:hover{color:var(--blue-hi)}

/* ---------- 23. STRANIČNI HERO ---------- */
.phero{
  position:relative;padding-top:calc(var(--hdr) + clamp(3.5rem,9vw,6.5rem));
  padding-bottom:clamp(2.6rem,6vw,4.5rem);border-bottom:1px solid var(--line);overflow:hidden;
}
.phero::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;
  background:radial-gradient(circle, rgba(25,104,179,.14), transparent 66%);pointer-events:none;
}
.phero__in{position:relative;z-index:2;width:100%}

/* ---------- 23a. BANER SA FOTOGRAFIJOM U VRHU PODSTRANE ----------
   Isti raspored slojeva kao u heroju na početnoj: fotografija, kolorna obrada,
   pa sadržaj. Naslov mora da ostane čitljiv, pa je podloga tamnija nego kod .fig. */
.phero--banner{
  display:flex;align-items:flex-end;
  min-height:clamp(300px,44vh,500px);
  padding-top:calc(var(--hdr) + clamp(2.6rem,6vw,4.5rem));
  padding-bottom:clamp(2.4rem,5.5vw,4rem);
}
/* radijalni sjaj je suvišan kad iza stoji fotografija */
.phero--banner::before{display:none}

.phero__media{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;background:var(--ink)}
.phero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--blue);mix-blend-mode:color;opacity:.55;
}
.phero__bg{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  filter:saturate(var(--sat,.4)) contrast(1.05) brightness(var(--bri,.6));
}
.phero__tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(9,12,17,.9) 20%, rgba(9,12,17,.62) 52%, rgba(9,12,17,.5) 100%),
    linear-gradient(100deg, rgba(14,63,110,.5) 0%, rgba(9,12,17,.15) 58%, rgba(25,104,179,.2) 100%);
}
/* podešavanje po fotografiji — tamnije nego u .fig jer preko ide naslov */
.phero__bg.p-gear{--pos:42% 52%;--bri:.6;--sat:.4}
.phero__bg.p-panel{--pos:38% 45%;--bri:.4;--sat:.3}   /* snimak u beloj hali */
.phero__bg.p-jet{--pos:56% 44%;--bri:.68;--sat:.55}

.crumbs{display:flex;gap:.55rem;align-items:center;margin-bottom:1.4rem;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mist-2);flex-wrap:wrap}
.crumbs a{color:var(--mist-2);transition:color .25s}
.crumbs a:hover{color:var(--blue-hi)}
.phero h1{font-size:var(--t-h1);margin-bottom:1.3rem}

/* ==========================================================================
   23b. FOTOGRAFIJE IZ POGONA
   Svaka slika: fiksni odnos stranica + overflow:hidden (bez skoka pri učitavanju),
   hairline okvir bez zaobljenja i senke, plavi ton u mirovanju, boja se vraća na hover.
   ========================================================================== */
.fig{display:block;margin:0}
.fig__frame{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:var(--ar,16/9);
  border:1px solid var(--line);background:var(--ink-2);
}
.fig img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  filter:saturate(var(--sat,.45)) contrast(1.05) brightness(var(--bri,.82));
  transform:scale(1);
  transition:transform .7s var(--ease),filter .7s var(--ease);
}
/* plavi ton u mirovanju — slika pripada paleti, ne deluje kao stok fotografija */
.fig__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--blue);mix-blend-mode:color;opacity:var(--tint,.5);
  transition:opacity .7s var(--ease);
}
.fig:hover img,.fig:focus-within img{filter:saturate(1) contrast(1) brightness(.94);transform:scale(1.04)}
.fig:hover .fig__frame::after,.fig:focus-within .fig__frame::after{opacity:.14}

.fig figcaption{
  display:flex;align-items:baseline;gap:.6rem;
  margin-top:var(--sp-2);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mist-2);line-height:1.6;
}
.fig figcaption::before{
  content:"";flex:none;width:14px;height:1px;background:var(--blue-hi);
  transform:translateY(-.3em);
}

/* odnosi stranica */
/* široka traka iznad kartica sa specifikacijama */
.fig--band{margin-bottom:var(--sp-6)}
.fig--wide{--ar:21/9}
.fig--4x3{--ar:4/3}
.fig--tall{--ar:3/4}
.fig--sq{--ar:1/1}
/* vodeća slika stranice — najizraženiji tretman */
.fig--lead{--ar:2/1;--bri:.9;--tint:.4}
@media (max-width:759px){
  .fig--wide{--ar:16/9}
  .fig--lead{--ar:4/3}
  .fig--tall{--ar:4/3}
}

/* Podešavanje po fotografiji — stoji posle odnosa stranica da nadjača njihove vrednosti.
   Tri snimka su različite ekspozicije, pa im jedna zajednička obrada ne odgovara. */
.fig--gear{--pos:42% 52%;--bri:.8;--sat:.46}    /* zupčanici — srednje tamna */
.fig--panel{--pos:38% 45%;--bri:.5;--sat:.34}   /* komandna tabla — snimljena u beloj hali, mora niže */
.fig--jet{--pos:56% 44%;--bri:.88;--sat:.62}    /* vodeni mlaz — već tamna i plava */

/* Na stranici sečenja ton je topao. Fotografija vodenog mlaza je i sama izrazito
   plava, pa topli ton ide vrlo nisko — jače bi dalo mutan plavo-narandžast rezultat. */
.heat .fig{--tint:.2}
.heat .fig--lead{--tint:.14}
.heat .fig__frame::after{background:var(--heat)}
.heat .fig figcaption::before{background:var(--heat)}
.heat .fig:hover .fig__frame::after,.heat .fig:focus-within .fig__frame::after{opacity:.05}

/* fotografija kao podloga tehničkom crtežu zupčanika */
.gears__vis > *{grid-area:1/1}
.gears__photo{
  align-self:stretch;justify-self:stretch;
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  border:1px solid var(--line);
  opacity:.26;filter:saturate(.25) brightness(.62) contrast(1.1);
}
.gears__vis svg{position:relative}
.gears__note{
  display:flex;align-items:baseline;gap:.6rem;margin-top:var(--sp-3);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mist-2);line-height:1.6;
}
.gears__note::before{content:"";flex:none;width:14px;height:1px;background:var(--blue-hi);transform:translateY(-.3em)}

/* ==========================================================================
   24. DONJI DOK — AI asistent (levo) + Nazad na vrh (desno), u istoj liniji
   ========================================================================== */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:130;pointer-events:none;
  padding:0 clamp(.9rem,3vw,1.6rem) calc(env(safe-area-inset-bottom,0px) + clamp(.9rem,3vw,1.5rem));
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
/* Samo stvarne kontrole hvataju dodir. Zatvoreni panel asistenta i dalje zauzima
   prostor u rasporedu (skriven je preko visibility), pa bi .dock-ai kao kontejner
   presretao dodir preko donje dve trećine ekrana na telefonu. */
.dock > *{pointer-events:none}
.dock .dock-btn,.dock .ai{pointer-events:auto}
/* dok se sklanja dok je otvoren mobilni meni ili preloader */
body.is-locked .dock{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}

.dock-btn{
  --size:clamp(50px,12vw,58px);
  width:var(--size);height:var(--size);flex:none;
  display:grid;place-items:center;position:relative;
  background:var(--surface);border:1px solid var(--line-2);color:var(--spark);
  transition:background .35s var(--ease),border-color .35s,transform .35s var(--ease),opacity .35s,visibility .35s;
}
.dock-btn:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-3px)}
.dock-btn svg{width:21px;height:21px}

/* pulsni prsten na AI dugmetu */
.dock-btn--ai::after{
  content:"";position:absolute;inset:-1px;border:1px solid var(--blue-hi);
  opacity:0;animation:ping 3.4s var(--ease-in-out) infinite;
}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.32);opacity:0}}
.dock-btn--ai .dot{
  position:absolute;top:-4px;right:-4px;width:9px;height:9px;background:var(--blue-hi);
  border:2px solid var(--ink);border-radius:50%;
}
.dock-ai.open .dock-btn--ai{background:var(--blue);border-color:var(--blue)}
.dock-ai.open .dock-btn--ai::after{display:none}

/* nazad na vrh — skriveno dok se ne skroluje */
.dock-btn--top{opacity:0;visibility:hidden;transform:translateY(10px)}
.dock-btn--top.show{opacity:1;visibility:visible;transform:none}
.dock-btn--top .ring{position:absolute;inset:0;pointer-events:none}
.dock-btn--top .ring circle{
  fill:none;stroke:var(--blue-hi);stroke-width:1.5;
  stroke-dasharray:var(--len,999);stroke-dashoffset:var(--off,999);
  transform:rotate(-90deg);transform-origin:center;
}

/* ---------- panel asistenta ---------- */
.dock-ai{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.ai{
  width:min(370px, calc(100vw - 1.8rem));
  height:min(500px, calc(100svh - 8.5rem));
  display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line-2);
  transform-origin:bottom left;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7);
}
.dock-ai.open .ai{opacity:1;visibility:visible;transform:none}

.ai__hd{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--line);background:var(--surface);flex:none;
}
.ai__av{width:32px;height:32px;flex:none;display:grid;place-items:center;background:rgba(25,104,179,.18);border:1px solid var(--blue-lo);color:var(--blue-hi)}
.ai__av svg{width:17px;height:17px;animation:spin 9s linear infinite}
.ai__hd b{display:block;font-size:.83rem;font-weight:600;line-height:1.25}
.ai__hd small{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#57C98A;display:flex;align-items:center;gap:.35rem}
.ai__hd small::before{content:"";width:5px;height:5px;border-radius:50%;background:#57C98A}
.ai__x{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;color:var(--mist);transition:color .25s,transform .25s}
.ai__x:hover{color:var(--spark);transform:rotate(90deg)}
.ai__x svg{width:15px;height:15px}

.ai__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.85rem;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.ai__log::-webkit-scrollbar{width:5px}
.ai__log::-webkit-scrollbar-thumb{background:var(--line-2)}

.msg{max-width:88%;font-size:.86rem;line-height:1.6;animation:pop .4s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.msg--bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--blue);padding:.72rem .85rem;color:var(--spark)}
.msg--me{align-self:flex-end;background:var(--blue);color:#fff;padding:.62rem .85rem}
.msg strong{color:#fff}
.msg a{color:var(--blue-hi);text-decoration:underline;text-underline-offset:2px}
.msg--me a{color:#fff}
.msg ul{margin-top:.45rem;display:grid;gap:.28rem}
.msg li{padding-left:.85rem;position:relative;font-size:.83rem;color:var(--mist)}
.msg li::before{content:"";position:absolute;left:0;top:.55rem;width:4px;height:4px;background:var(--blue-hi)}
.msg--bot p + p{margin-top:.5rem}

.typing{align-self:flex-start;display:flex;gap:4px;padding:.8rem .85rem;background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--blue)}
.typing i{width:5px;height:5px;background:var(--blue-hi);border-radius:50%;animation:blip 1.25s var(--ease-in-out) infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes blip{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.ai__chips{display:flex;gap:.4rem;padding:.7rem 1rem;overflow-x:auto;border-top:1px solid var(--line);flex:none;scrollbar-width:none}
.ai__chips::-webkit-scrollbar{display:none}
.ai__chips button{
  white-space:nowrap;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;border:1px solid var(--line-2);padding:.45rem .68rem;color:var(--mist);
  transition:color .25s,border-color .25s,background .25s;
}
.ai__chips button:hover{color:#fff;background:var(--blue);border-color:var(--blue)}

.ai__form{display:flex;border-top:1px solid var(--line);flex:none;background:var(--surface)}
.ai__form input{flex:1;background:transparent;border:0;padding:.9rem 1rem;font-size:.86rem;outline:none}
.ai__form input::placeholder{color:var(--mist-2)}
.ai__form button{width:48px;display:grid;place-items:center;color:var(--blue-hi);transition:background .25s,color .25s}
.ai__form button:hover{background:var(--blue);color:#fff}
.ai__form svg{width:17px;height:17px}

/* ---------- 25. POMOĆNE ---------- */
.hl{color:var(--blue-hi)}
.center{text-align:center}
/* razmaci se oslanjaju na skalu iz tokena — bez pojedinačnih vrednosti po stranici */
.mt-1{margin-top:var(--sp-3)}
.mt-2{margin-top:var(--sp-5)}
.mt-3{margin-top:var(--sp-7)}
/* prateći tekst uz karticu ili sekciju — dve veličine umesto devet pojedinačnih */
.note{font-size:.87rem;color:var(--mist);line-height:1.62;max-width:72ch}
.note--lg{font-size:.93rem;line-height:1.66}
.grid-2{display:grid;gap:clamp(1.5rem,3.5vw,3rem)}
@media (min-width:820px){.grid-2{grid-template-columns:1fr 1fr}}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--blue);color:#fff;padding:.75rem 1.1rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* mapa */
.map{border:1px solid var(--line);filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(178deg);width:100%;height:clamp(280px,44vw,440px)}

/* akcenat toplote — samo sekcija sečenja */
.heat .mono{color:var(--heat)}
.heat .dimline::before,.heat .dimline::after{background:var(--heat)}
.heat .cap__ico{color:var(--heat)}
.heat .ticks li::before{border-color:var(--heat)}
.heat .machine__tag{color:var(--heat)}

@media print{
  .hdr,.dock,.bg-grid,.bg-grain,.loader,.reticle,.progress,.ticker{display:none!important}
  body{background:#fff;color:#000}
}