/* ==========================================================================
   MOBILSISTEMI — layout.css
   The persistent shell: floating pill nav, full-screen menu, scroll progress,
   mobile call bar, footer.
   ========================================================================== */

/* ==========================================================================
   FLOATING PILL NAV
   Permanently visible — a B2B buyer needs "Zatraži ponudu" in reach at all
   times, so this follows Belgrade Arbor's pill rather than a hidden menu.
   ========================================================================== */

.site-nav{
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: var(--z-nav);
  transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), 68rem);
  transition: transform var(--dur-md) var(--ease-out),
              opacity var(--dur-md) var(--ease-out);
  will-change: transform;
}
.site-nav.is-hidden{
  transform: translateX(-50%) translateY(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
}

.site-nav__pill{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: 10px 10px 10px 18px;
  border-radius: var(--r-pill);
  background: rgb(var(--ink-rgb) / .88);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: var(--paper);
  transition: background-color var(--dur-lg) linear, color var(--dur-lg) linear;
}

/* Over dark sections the pill flips to paper so it never vanishes. */
body.on-dark .site-nav__pill{
  background: rgb(var(--paper-rgb) / .9);
  color: var(--ink);
}

.site-nav__menu{
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 4px;
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-label);
  text-transform: uppercase;
  justify-self: start;
  min-height: 44px;
  color: inherit;
}
.site-nav__burger{
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 18px;
}
.site-nav__burger span{
  display: block; height: 1.5px; background: currentColor;
  transition: transform var(--dur-sm) var(--ease-out), width var(--dur-sm) var(--ease-out);
}
.site-nav__burger span:nth-child(2){ width: 72%; }
@media (hover: hover){
  .site-nav__menu:hover .site-nav__burger span:nth-child(2){ width: 100%; }
}

.site-nav__brand{
  display: block;
  width: 148px;
  justify-self: center;
  padding-block: 4px;
}
/* Pill is dark by default, so the wordmark is paper; it flips with the pill. */
.site-nav__brand .logo{ --logo-word: currentColor; }

.site-nav__cta{ justify-self: end; }

/* The pill CTA stays orange in both pill states — it is the primary action on
   every page and orange is the action colour. The second selector outranks
   `body.on-dark .btn--primary`, which would otherwise turn it paper-on-paper
   the moment the nav crossed a dark section. */
.site-nav__cta .btn,
body.on-dark .site-nav__cta .btn--primary{
  min-height: 44px;
  padding-inline: var(--s-5);
  --btn-bg: var(--orange);
  --btn-fg: var(--ink);
}
@media (hover: hover){
  .site-nav__cta .btn-group:hover .btn--primary{
    --btn-bg: var(--paper);
    --btn-fg: var(--ink);
  }
  body.on-dark .site-nav__cta .btn-group:hover .btn--primary{
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
  }
}

/* Mobile: the pill collapses to logo + a single orange +. */
.site-nav__compact{ display: none; }

@media (max-width: 860px){
  .site-nav{ top: 12px; }
  .site-nav__pill{
    grid-template-columns: auto 1fr auto;
    padding: 8px 8px 8px 14px;
  }
  .site-nav__menu span:not(.site-nav__burger):not(.site-nav__burger span){ display: none; }
  .site-nav__label{ display: none; }
  .site-nav__brand{ width: 120px; justify-self: center; }
  .site-nav__cta .site-nav__cta-label{ display: none; }
  .site-nav__cta .btn--primary{ display: none; }
  .site-nav__cta .btn--icon{ min-width: 44px; }
}

/* ==========================================================================
   FULL-SCREEN MENU OVERLAY
   ========================================================================== */

.menu{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--dark);
  color: var(--on-dark);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s-5) var(--gutter) var(--s-6);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-md) var(--ease-out), visibility 0s linear var(--dur-md);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open{
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-md) var(--ease-out), visibility 0s;
}

.menu__top{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
}
.menu__brand{ width: 160px; }
.menu__brand .logo{ --logo-word: var(--on-dark); }

.menu__close{
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding-inline: var(--s-3);
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-label); text-transform: uppercase;
}
.menu__close-x{ font-size: 1.25rem; line-height: 1; }
@media (hover: hover){ .menu__close:hover{ color: var(--orange); } }

.menu__nav{
  display: flex; flex-direction: column;
  justify-content: center;
  gap: clamp(.25rem, 1vw, .75rem);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line-dark);
}

.menu__link{
  display: flex; align-items: baseline; gap: var(--s-5);
  padding-block: clamp(.35rem, 1vw, .6rem);
  font: 800 clamp(2rem, 6vw, 4.25rem)/0.98 var(--font-display);
  letter-spacing: var(--track-display-l);
  text-transform: uppercase;
  color: var(--on-dark);
  transition: color var(--dur-sm) var(--ease-soft),
              transform var(--dur-sm) var(--ease-soft);
  /* Resting state for the staggered rise; JS clears it. */
  opacity: 0;
  transform: translateY(38px);
}
.menu.is-ready .menu__link{
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-lg) var(--ease-out) var(--d, 0ms),
              transform var(--dur-lg) var(--ease-out) var(--d, 0ms),
              color var(--dur-sm) var(--ease-soft);
}
.menu__link-num{
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-label);
  color: var(--on-dark-2);
  transform: translateY(-.4em);
}
@media (hover: hover){
  .menu__link:hover{ color: var(--orange); transform: translateX(10px); }
}
.menu__link[aria-current="page"]{ color: var(--orange); }
.menu__link[aria-current="page"] .menu__link-num{ color: var(--red); }

.menu__foot{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
}
.menu__foot a{ color: var(--on-dark); }
.menu__foot a:hover{ color: var(--orange); }

.lang{
  display: inline-flex; gap: 2px; align-items: center;
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-ui);
}
.lang__opt{
  padding: 10px 12px;
  min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
}
.lang__opt[aria-current="true"]{ background: var(--orange); color: var(--ink); }
.lang__opt[aria-disabled="true"]{ opacity: .4; cursor: not-allowed; }

/* Everything behind the overlay is inert while it is open. */
body.menu-open{ overflow: hidden; }

/* ==========================================================================
   SCROLL PROGRESS — bottom left, a red line plus the section number
   ========================================================================== */

/* Stacked directly above the assistant launcher, in the same left column.
   (The alternative — rotating it 90° against the left edge — was rejected
   because the hero's own prev arrow is vertically centred against that same
   edge, and the two would have collided on the one page that matters most.)

   The offset is the launcher's height plus one gap, so the two read as one
   column rather than two things that happen to be near each other. */
.scroll-progress{
  position: fixed;
  left: var(--fixed-gap);
  bottom: calc(var(--fixed-bottom) + 44px + var(--fixed-gap));
  z-index: var(--fixed-z-widget);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  pointer-events: none;
  /* Not mix-blend-mode: difference — that inverts --red to cyan over paper,
     which is the one thing this indicator must not do. It flips with the
     section instead. */
  color: var(--fg-3);
  opacity: 0;
  transition: color var(--dur-lg) linear, opacity var(--dur-md) var(--ease-out);
}
/* Held back until the reader is past the fold. It is a *section* indicator,
   so on the hero it says nothing — and bottom-left is where the hero's own
   paragraph runs, which it was landing on top of. */
body.is-past-fold .scroll-progress:not(.is-parked){ opacity: 1; }
/* Steps aside for the footer rather than sitting on the legal line. */
.scroll-progress.is-parked{ opacity: 0; }
.scroll-progress__track{
  position: relative;
  width: 88px; height: 2px;
  background: rgb(var(--ink-rgb) / .2);
  overflow: hidden;
  transition: background-color var(--dur-lg) linear;
}
body.on-dark .scroll-progress__track{ background: rgb(255 255 255 / .24); }
.scroll-progress__bar{
  position: absolute; inset: 0;
  background: var(--red);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
.scroll-progress__num{
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-label);
  font-variant-numeric: tabular-nums;
}
/* On small screens the bottom-left corner belongs to the call bar, the
   assistant launcher and the hero's scroll cue. A fourth indicator competing
   for it is noise, and the native scrollbar already answers "how far along am
   I". */
@media (max-width: 860px){
  .scroll-progress{ display: none; }
}

/* An open overlay owns the screen. Both of these would otherwise sit on top
   of the menu, or behind the assistant panel where they read as a bug. */
body.menu-open .scroll-progress,
body.assistant-open .scroll-progress{
  opacity: 0;
  visibility: hidden;
}

/* ==========================================================================
   MOBILE CALL BAR — direct lines, always reachable
   ========================================================================== */

.mobile-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  background: rgb(var(--ink-rgb) / .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 3px solid var(--red);
}
.mobile-bar__inner{ display: grid; grid-template-columns: repeat(3, 1fr); }
.mobile-bar a{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: var(--s-2);
  color: var(--paper);
  font: 500 0.625rem/1.2 var(--font-mono);
  letter-spacing: var(--track-mono-ui);
  text-transform: uppercase;
}
.mobile-bar a + a{ border-left: 1px solid var(--line-dark); }
.mobile-bar a:active{ background: var(--orange); color: var(--ink); }
.mobile-bar__icon{ font-size: 1rem; line-height: 1; }

@media (max-width: 860px){
  .mobile-bar{ display: block; }
  body{ padding-bottom: 56px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{
  background: var(--dark);
  color: var(--on-dark);
  border-top: 5px solid var(--red);   /* the rule, one more time */
  padding-block: clamp(3.5rem, 7vw, 6rem) var(--s-6);
}
.site-footer a{ color: var(--on-dark); }
@media (hover: hover){ .site-footer a:hover{ color: var(--orange); } }

.site-footer__top{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap) var(--s-6);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 900px){
  .site-footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .site-footer__top{ grid-template-columns: 1fr; }
}

.site-footer__brand{ width: 190px; margin-bottom: var(--s-5); }
.site-footer__brand .logo{ --logo-word: var(--on-dark); }

.footer-col__title{
  font: 500 0.6875rem/1.5 var(--font-mono);
  letter-spacing: var(--track-mono-label); text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: var(--s-4);
}
.footer-col ul{
  display: flex; flex-direction: column; gap: var(--s-3);
  /* The base reset only clears markers from ul[class]; this one has none. */
  list-style: none; margin: 0; padding: 0;
}
.footer-col a{
  font-size: .9375rem;
  display: inline-block;
  min-height: 24px;
}

.site-footer__legal{
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  justify-content: space-between; align-items: center;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  font: 400 0.6875rem/1.6 var(--font-mono);
  letter-spacing: var(--track-mono-ui);
  color: var(--on-dark-2);
  text-transform: uppercase;
}

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */

html.has-custom-cursor,
html.has-custom-cursor *{ cursor: none; }
/* Text entry keeps its native caret cursor — losing the I-beam in a form
   field is a real usability cost, not a stylistic one. */
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor [contenteditable]{ cursor: auto; }

.cursor{
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity var(--dur-sm) var(--ease-out);
}
.cursor__dot{
  position: absolute;
  top: -5px; left: -5px;
  width: 10px; height: 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: width var(--dur-sm) var(--ease-out), height var(--dur-sm) var(--ease-out),
              top var(--dur-sm) var(--ease-out), left var(--dur-sm) var(--ease-out),
              background-color var(--dur-sm) var(--ease-out);
}
body.on-dark .cursor__dot{ background: var(--paper); }

.cursor__label{
  position: absolute;
  top: -50%; left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  white-space: nowrap;
  font: 500 0.625rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-label);
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out);
}

.cursor.is-active .cursor__dot{
  width: 74px; height: 74px;
  top: -37px; left: -37px;
  background: var(--orange);
}
.cursor.is-active .cursor__label{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  top: 0;
}

/* The trailing image in the factory section.
   The outer element is positioned by JS on every frame; the inner one owns
   the scale-and-fade, so the two transforms never overwrite each other. */
.cursor-media{
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--z-cursor) - 1);
  width: clamp(200px, 22vw, 330px);
  aspect-ratio: 1 / 1;      /* the source is a 1:1 crop — see img_assign.py */
  pointer-events: none;
}
.cursor-media__inner{
  display: block;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
}
.cursor-media.is-visible .cursor-media__inner{ opacity: 1; transform: scale(1); }
.cursor-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

@media (hover: none), (pointer: coarse){
  .cursor, .cursor-media{ display: none !important; }
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */

.preloader{
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--paper);
  display: grid;
  place-content: center;
  padding: var(--gutter);
}
.preloader__logo{ width: min(58vw, 30rem); }
.preloader__logo .logo-svg__glyph,
.preloader__logo .logo-svg__figure{
  fill: transparent;
  stroke: var(--ink);
  stroke-width: .7;
  stroke-linejoin: round;
}
.preloader__logo .logo-svg__figure{ stroke: var(--orange); }
.preloader__logo .logo-svg__rule{
  fill: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-md) var(--ease-out);
}

.preloader__count{
  position: absolute;
  left: var(--gutter);
  bottom: var(--s-6);
  font: 500 clamp(.75rem, 1.4vw, .9rem)/1 var(--font-mono);
  letter-spacing: var(--track-mono-label);
  color: var(--muted-ink);
  font-variant-numeric: tabular-nums;
}
.preloader__meta{
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  font: 500 .6875rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-label);
  text-transform: uppercase;
  color: var(--muted-ink);
}

/* The curtain that wipes upward when loading finishes. */
.preloader.is-done{
  transform: translateY(-100%);
  transition: transform var(--dur-xl) var(--ease-in-out);
}

body.is-loading{ overflow: hidden; }

/* ==========================================================================
   FIXED UI — back to top
   ========================================================================== */

/* One viewport tall, at the very top of the document. The button appears
   exactly when this stops intersecting, which is what "past one screen"
   means — and it costs one observer callback rather than a scroll listener. */
.to-top__sentinel{
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100vh;
  pointer-events: none;
}

.to-top{
  position: fixed;
  right: var(--fixed-gap);
  bottom: var(--fixed-bottom);
  z-index: var(--fixed-z-widget);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--orange);
  cursor: pointer;
  border-radius: var(--r-md);      /* fallback before notch.js */
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out),
              background-color var(--dur-sm) linear, color var(--dur-sm) linear,
              visibility 0s linear var(--dur-sm);
}
.to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.to-top:hover{ background: var(--orange); color: var(--ink); }
.to-top.is-instant{ transition: none; }

/* Both children share one grid cell so the ring sits under the arrow. */
.to-top__ring,
.to-top__arrow{ grid-area: 1 / 1; }

.to-top__ring{
  width: 100%; height: 100%;
  transform: rotate(-90deg);       /* start the sweep at twelve o'clock */
  fill: none;
}
.to-top__track{ stroke: rgb(var(--paper-rgb) / .18); stroke-width: 2; }
.to-top__fill{ stroke: var(--red); stroke-width: 2; stroke-linecap: butt; }

.to-top__arrow{ width: 18px; height: 18px; }

/* Below 400px both widgets collapse to a 44px square so they fit one line
   with room between them. */
@media (max-width: 400px){
  .to-top{ width: 44px; height: 44px; }
  .to-top__arrow{ width: 16px; height: 16px; }
}

/* An overlay owns the screen while it is open; a floating button on top of it
   is noise, and on the mobile sheet it would sit over the panel itself. */
body.menu-open .to-top,
body.assistant-open .to-top{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .to-top{ transition: opacity var(--dur-sm) linear, visibility 0s linear var(--dur-sm); transform: none; }
  .to-top.is-visible{ transform: none; }
}


/* ==========================================================================
   NARROW PHONES (320px)
   The overlay's display links are sized for a 390px screen; at 320 the
   longest word plus its index runs past the gutter. Nothing else on the site
   needed changing at this width.
   ========================================================================== */
@media (max-width: 400px){
  .menu__link{
    font-size: clamp(1.55rem, 7.5vw, 2rem);
    gap: var(--s-3);
  }
  .menu__foot{ grid-template-columns: 1fr; }
}