/* ==========================================================================
   SR ČELIK — "Tehnički list" design system
   Apis Development · 2026
   Koncept: sajt se ponaša kao inženjerski crtež (kotne linije, sastavnica,
   šrafura, koordinatni ram). Fotografije pogona stoje ISPOD tog crteža —
   crtež je i dalje nosilac, slika je podloga.
   Paleta je izvedena iz logotipa: #BEE101 (limun) na #44302D (topla braon).
   ========================================================================== */

/* 1. TOKENI
   ------------------------------------------------------------------------ */
:root{
  /* Boje — izvedene iz logotipa: limun-zelena na toploj tamnoj braon.
     Neutralci su topli (braon podton), ne hladni sivo-plavi. */
  --void:        #150F0E;   /* skoro crna braon — pozadina stranice */
  --graphite:    #1E1614;
  --graphite-2:  #261B19;
  --steel-800:   #33231F;
  --steel-700:   #44302D;   /* tačna braon iz logotipa */
  --steel-500:   #6E5A55;
  --steel-400:   #9E8A84;   /* podignut da drži 4,5:1 i na --steel-800 */
  --steel-300:   #B0A09B;
  --zinc:        #E2DAD7;
  --paper:       #F5F3F2;
  --paper-2:     #EAE5E3;

  --brand:      #BEE101;   /* jedini akcenat — limun-zelena iz logotipa */
  --brand-soft: rgba(190,225,1,.14);
  --brand-ink:  #4F5D00;   /* ista boja, spuštena da se čita na svetloj podlozi */
  --arc:         #93A64B;   /* prigušena maslinasta — kote i mikro-detalji */

  --line:        rgba(176,160,155,.16);
  --line-2:      rgba(176,160,155,.30);
  --line-dark:   rgba(21,15,14,.14);
  --line-dark-2: rgba(21,15,14,.28);

  /* Tipografija */
  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.7rem, 8.6vw, 6.6rem);
  --fs-h2:      clamp(1.85rem, 4.6vw, 3.5rem);
  --fs-h3:      clamp(1.12rem, 2.1vw, 1.5rem);
  --fs-lede:    clamp(1.02rem, 1.5vw, 1.22rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-label:   .705rem;

  /* Ritam */
  --gut:      clamp(20px, 5vw, 64px);
  --maxw:     1320px;
  --sec-y:    clamp(72px, 11vw, 160px);
  --dock:     56px;
  --dock-in:  clamp(16px, 3.4vw, 32px);

  --r-sm: 2px;
  --r-md: 4px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast: .22s;
  --t-med:  .45s;
  --t-slow: .85s;

  --nav-h: 72px;
}

/* 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(--nav-h) + 24px);
}
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.62;
  color:var(--zinc);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:1px}
::selection{background:var(--brand);color:#150F0E}

/* 3. TIPOGRAFSKI PRIMITIVI
   ------------------------------------------------------------------------ */
.display{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 116,"wght" 800;
  font-size:var(--fs-display);
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--paper);
}
.h2{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 112,"wght" 750;
  font-size:var(--fs-h2);
  line-height:1.0;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--paper);
}
.h3{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 106,"wght" 700;
  font-size:var(--fs-h3);
  line-height:1.15;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
.lede{font-size:var(--fs-lede);line-height:1.6;color:var(--steel-300);max-width:62ch}
.small{font-size:var(--fs-small);color:var(--steel-400)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.label{
  font-family:var(--f-mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--steel-400);
}
.label--brand{color:var(--brand)}

/* Eyebrow sa oznakom lista — kodira redosled sekcija, kao na crtežu */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow__no{
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.16em;
  color:var(--brand);border:1px solid var(--brand);padding:3px 8px 2px;
}
.eyebrow__txt{
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.24em;
  text-transform:uppercase;color:var(--steel-400);
}
.eyebrow__rule{flex:1;height:1px;background:var(--line);min-width:20px}

/* 4. LAYOUT
   ------------------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(52px,7vw,96px)}
.section__head{margin-bottom:clamp(34px,5vw,64px);max-width:78ch}
.section__head .lede{margin-top:18px}

.sheet{background:var(--paper);color:var(--void)}
.sheet .h2,.sheet .display{color:var(--void)}
.sheet .lede{color:var(--steel-500)}
.sheet .eyebrow__txt{color:var(--steel-500)}
.sheet .eyebrow__rule{background:var(--line-dark)}
.sheet .label{color:var(--steel-500)}
.sheet .small{color:var(--steel-500)}

.hr{height:1px;background:var(--line);border:0}
.sheet .hr{background:var(--line-dark)}

.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr 1fr}
@media (min-width:720px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1020px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}
.split{display:grid;gap:clamp(30px,5vw,72px);align-items:start}
@media (min-width:960px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.split--sticky > :first-child{position:sticky;top:calc(var(--nav-h) + 40px)}
@media (max-width:959px){.split--sticky > :first-child{position:static}}

/* 5. KOORDINATNI RAM (ram crtaćeg lista)
   ------------------------------------------------------------------------ */
.frame{position:fixed;inset:0;pointer-events:none;z-index:60;display:none}
@media (min-width:1100px){.frame{display:block}}
.frame__edge{position:absolute;background:var(--line)}
.frame__edge--t{top:14px;left:14px;right:14px;height:1px}
.frame__edge--b{bottom:14px;left:14px;right:14px;height:1px}
.frame__edge--l{left:14px;top:14px;bottom:14px;width:1px}
.frame__edge--r{right:14px;top:14px;bottom:14px;width:1px}
.frame__tick{position:absolute;width:9px;height:9px;border:1px solid var(--line-2)}
.frame__tick--tl{top:14px;left:14px;border-right:0;border-bottom:0}
.frame__tick--tr{top:14px;right:14px;border-left:0;border-bottom:0}
.frame__tick--bl{bottom:14px;left:14px;border-right:0;border-top:0}
.frame__tick--br{bottom:14px;right:14px;border-left:0;border-top:0}
.frame__coord{
  position:absolute;font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;
  color:var(--steel-500);opacity:.75;   /* .5 je davalo 2,8:1 — vidi sekciju 34 */
}
.frame__coord--l{left:20px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.frame__coord--r{right:4px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center}

/* Konstrukcione linije mreže (jedva vidljive) */
.guides{position:fixed;inset:0;pointer-events:none;z-index:0;display:none}
@media (min-width:1100px){.guides{display:block}}
.guides__inner{
  width:100%;max-width:var(--maxw);height:100%;margin-inline:auto;
  padding-inline:var(--gut);display:grid;grid-template-columns:repeat(12,1fr);
}
.guides__col{border-left:1px solid rgba(176,160,155,.045)}
.guides__col:last-child{border-right:1px solid rgba(176,160,155,.045)}

/* 6. NIŠAN (custom kursor)
   ------------------------------------------------------------------------ */
.xhair{position:fixed;left:0;top:0;z-index:70;pointer-events:none;display:none;
  mix-blend-mode:difference;will-change:transform}
@media (hover:hover) and (pointer:fine) and (min-width:1100px){
  .xhair{display:block}
}
.xhair__h,.xhair__v{position:absolute;background:rgba(190,225,1,.75)}
.xhair__h{width:26px;height:1px;left:-13px;top:0}
.xhair__v{width:1px;height:26px;left:0;top:-13px}
.xhair__ring{
  position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(190,225,1,.45);transition:transform var(--t-fast) var(--ease),opacity var(--t-fast)
}
.xhair__read{
  position:absolute;left:22px;top:16px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.1em;color:rgba(190,225,1,.85);white-space:nowrap
}
.xhair.is-hot .xhair__ring{transform:scale(1.55);border-color:rgba(190,225,1,.9)}

/* 7. UČITAVANJE
   ------------------------------------------------------------------------ */
.loader{
  position:fixed;inset:0;z-index:120;background:var(--void);
  display:grid;place-items:center;transition:opacity .5s var(--ease),visibility .5s
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__box{width:min(320px,72vw);text-align:left}
.loader__id{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.28em;color:var(--steel-500)}
.loader__logo{
  width:min(300px,62vw);height:auto;margin:14px 0 20px;
  opacity:0;transform:scale(.96);
  animation:loaderLogo .5s var(--ease-out) forwards
}
@keyframes loaderLogo{to{opacity:1;transform:scale(1)}}
.loader__bar{height:2px;background:var(--steel-800);position:relative;overflow:hidden}
.loader__fill{position:absolute;inset:0;width:0;background:var(--brand)}
.loader__pct{
  display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.16em;color:var(--steel-500)
}

/* 8. NAVIGACIJA
   ------------------------------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:transform var(--t-med) var(--ease),background var(--t-med),border-color var(--t-med)
}
.nav__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--nav-h);border-bottom:1px solid transparent;transition:height var(--t-med) var(--ease)
}
.nav.is-stuck{background:rgba(21,15,14,.86);backdrop-filter:blur(14px) saturate(140%)}
.nav.is-stuck .nav__bar{border-bottom-color:var(--line);height:62px}
.nav.is-hidden{transform:translateY(-100%)}

/* Logotip klijenta. Na tamnom ide SVETLA varijanta — u originalu je „ČELIK"
   braon #44302D, što je na --void svega 1,54:1, tj. nevidljivo.
   Vidi README, „Logotip — koja varijanta gde". */
/* Logotip nosi i ime i godinu i sedište, pa mu ne treba nikakav dodatni
   natpis pored — stoji sam i zato može krupnije. */
.brand{display:flex;align-items:center;flex-shrink:0;min-width:0}
.brand__logo{height:44px;width:auto;flex-shrink:0;transition:height var(--t-med) var(--ease)}
.nav.is-stuck .brand__logo{height:36px}   /* prati stanjenu traku */
@media (max-width:1100px){.brand__logo{height:38px}}
@media (max-width:600px){
  .brand__logo,.nav.is-stuck .brand__logo{height:30px}
}

/* Prekidač jezika. Engleska verzija još ne postoji — dugme je namerno
   neaktivno (aria-disabled) umesto da vodi na 404. Kad se EN uradi,
   dovoljno je skinuti aria-disabled i dodati href/handler po data-lang. */
.lang{display:flex;align-items:center;gap:1px;flex-shrink:0}
.lang__b{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  padding:6px 9px 5px;color:var(--steel-300);
  border:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)
}
.lang__b:hover{color:var(--paper);border-color:var(--line-2)}
.lang__b.is-on{background:var(--brand);border-color:var(--brand);font-weight:600}
.lang__b.is-on:hover{border-color:var(--brand)}
.lang__b[aria-disabled="true"]{color:var(--steel-400);cursor:not-allowed}
.lang__b[aria-disabled="true"]:hover{color:var(--steel-400);border-color:transparent}

.nav__links{display:none;align-items:center;gap:clamp(14px,2vw,30px)}
@media (min-width:1020px){.nav__links{display:flex}}
.nav__link{
  position:relative;font-family:var(--f-mono);font-size:.755rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel-300);padding:6px 0;transition:color var(--t-fast)
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brand);
  transition:width var(--t-med) var(--ease)
}
.nav__link:hover{color:var(--paper)}
.nav__link:hover::after,.nav__link.is-active::after{width:100%}
.nav__link.is-active{color:var(--paper)}

.nav__side{display:flex;align-items:center;gap:12px}
.nav__tel{
  display:none;font-family:var(--f-mono);font-size:.755rem;letter-spacing:.08em;color:var(--steel-300)
}
@media (min-width:1200px){.nav__tel{display:inline-flex;align-items:center;gap:8px}}
.nav__tel:hover{color:var(--brand)}

.burger{
  width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);
  transition:border-color var(--t-fast),background var(--t-fast)
}
@media (min-width:1020px){.burger{display:none}}
.burger:hover{border-color:var(--brand)}
.burger__i{display:block;width:18px;height:9px;position:relative}
.burger__i span{position:absolute;left:0;height:1.5px;width:100%;background:var(--paper);transition:transform var(--t-med) var(--ease),opacity var(--t-fast)}
.burger__i span:nth-child(1){top:0}
.burger__i span:nth-child(2){bottom:0}
.burger.is-open .burger__i span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger.is-open .burger__i span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* Mobilni meni */
.menu{
  position:fixed;inset:0;z-index:75;background:var(--void);
  transform:translateY(-101%);transition:transform .62s var(--ease-out);
  display:flex;flex-direction:column;padding-top:var(--nav-h);overflow-y:auto
}
.menu.is-open{transform:translateY(0)}
.menu__list{padding:clamp(24px,7vw,56px) var(--gut) 0;flex:1}
.menu__item{border-bottom:1px solid var(--line);overflow:hidden}
.menu__a{
  display:flex;align-items:baseline;gap:16px;padding:clamp(15px,3.4vw,22px) 0;
  font-family:var(--f-display);font-variation-settings:"wdth" 112,"wght" 750;
  font-size:clamp(1.6rem,7.4vw,2.4rem);text-transform:uppercase;color:var(--paper);
  line-height:1;transform:translateY(105%);transition:color var(--t-fast)
}
.menu.is-open .menu__a{transform:translateY(0);transition:transform .7s var(--ease-out)}
.menu__a:hover{color:var(--brand)}
.menu__no{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;color:var(--brand)}
.menu__foot{padding:clamp(24px,6vw,48px) var(--gut);border-top:1px solid var(--line)}
.menu__foot a{display:block;font-family:var(--f-mono);font-size:.86rem;letter-spacing:.06em;color:var(--steel-300);padding:5px 0}
.menu__foot a:hover{color:var(--brand)}

/* Traka napretka čitanja */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--brand);z-index:90}

/* 9. DUGMAD
   ------------------------------------------------------------------------ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 26px;font-family:var(--f-mono);font-size:.755rem;letter-spacing:.18em;
  text-transform:uppercase;border:1px solid var(--line-2);color:var(--paper);
  overflow:hidden;isolation:isolate;transition:color var(--t-med) var(--ease),border-color var(--t-med)
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--paper);z-index:-1;
  transform:translateY(101%);transition:transform var(--t-med) var(--ease-out)
}
.btn:hover{color:var(--void);border-color:var(--paper)}
.btn:hover::before{transform:translateY(0)}
.btn__arw{transition:transform var(--t-med) var(--ease)}
.btn:hover .btn__arw{transform:translateX(4px)}

.btn--brand{background:var(--brand);border-color:var(--brand);color:var(--void);font-weight:600}
.btn--brand::before{background:var(--paper)}
.btn--brand:hover{color:var(--void);border-color:var(--paper)}
.btn--dark{border-color:var(--line-dark-2);color:var(--void)}
.btn--dark::before{background:var(--void)}
.btn--dark:hover{color:var(--paper);border-color:var(--void)}
.btn--sm{padding:11px 18px;font-size:.7rem}
.btn--block{display:flex;width:100%}

.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Tekstualni link sa kotnom crticom */
.tlink{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);
  font-size:.755rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
  padding-bottom:4px;border-bottom:1px solid rgba(190,225,1,.3);transition:border-color var(--t-fast),gap var(--t-fast)
}
.tlink:hover{border-color:var(--brand);gap:15px}

/* 10. HERO
   Slojevi, odozdo naviše:
     0  .hero__slide    fotografija (kliza, Ken Burns)
     1  .hero__scrim    braon veo — zbog njega se beli naslov čita
     1  #heroCanvas     tehnički crtež preseka, mix-blend-mode:screen
     2  .hero__inner    tekst, dugmad, meta
   ------------------------------------------------------------------------ */
.hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  padding-bottom:clamp(28px,6vw,60px);
  background:var(--void);
  height:100vh;
  height:100svh;   /* drugi red namerno — mobilni Chrome ne sme da seče */
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;
  opacity:.3;mix-blend-mode:screen;pointer-events:none;
  /* Crtež je prigušen tamo gde stoji tekst, a pun preko fotografije.
     Bez ovoga linija preseka preko slova pojede pola koraka kontrasta. */
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.16) 34%,#000 70%);
  mask-image:linear-gradient(100deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.16) 34%,#000 70%)
}
@media (max-width:900px){
  .hero__canvas{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.14) 100%);
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.14) 100%)
  }
}
/* Veo je u DVA sloja, da fotografija ostane fotografija:
     1. blagi opšti ton — ujednačava tri kadra i drži sekciju mirnom,
     2. usmereni gradijent vezan za tekstualnu kolonu — jak uz levu ivicu,
        potpuno providan do ~66%, pa desna trećina ostaje čist snimak.
   Vrednosti su merene na kompozitovanim pikselima, ne procenjene —
   vidi README, „Hero slajder". */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(21,15,14,.93) 0%,
      rgba(21,15,14,.90) 30%,
      rgba(21,15,14,.62) 50%,
      rgba(21,15,14,0)   66%),
    linear-gradient(rgba(21,15,14,.30), rgba(21,15,14,.30))
}
/* Ispod 900px tekst ide celom širinom, pa usmereni gradijent nema šta da
   štiti — tamo ide ravnomeran veo, nešto svetliji nego ranije (.88 -> ~.78),
   uz text-shadow kao rezervu. */
@media (max-width:900px){
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(21,15,14,.58) 0%,
      rgba(21,15,14,.77) 38%,
      rgba(21,15,14,.85) 100%)
  }
}
.hero__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 78% at 78% 8%, rgba(190,225,1,.10), transparent 58%),
    linear-gradient(to top, var(--void) 2%, rgba(21,15,14,.55) 34%, rgba(21,15,14,.12) 100%)
}
/* Hero je tačno jedan ekran, pa vertikalni ritam mora da prati VISINU
   prozora, ne samo širinu. Jedan token nosi sve razmake, a naslov je
   ograničen i sa vh — inače na laptopu (1280×720) sadržaj ne stane. */
.hero{--hgap:clamp(10px,2.2vh,34px)}
.hero__inner{position:relative;z-index:4;width:100%;padding-top:calc(var(--nav-h) + var(--hgap))}
.hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:var(--hgap);flex-wrap:wrap}
.hero__pill{
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  background:var(--brand);border:1px solid var(--brand);padding:5px 11px 4px;font-weight:600
}
/* Rezerva preko fotografije: kao efekat se ne vidi, ali vredi otprilike
   pola koraka kontrasta. Merenja ispod ga NE računaju — konzervativno. */
.hero__title,.hero__lede{text-shadow:0 1px 20px rgba(0,0,0,.55)}
.hero__title{font-size:clamp(2.05rem,min(8.6vw,9.5vh),6.6rem);margin-bottom:var(--hgap)}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln > span{display:block;transform:translateY(102%)}
.hero__title .thin{
  font-variation-settings:"wdth" 92,"wght" 300;color:var(--steel-400);
}
.hero__lede{max-width:52ch;margin-bottom:calc(var(--hgap) * 1.2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:calc(var(--hgap) * 1.4)}
.hero__meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line)
}
@media (min-width:820px){.hero__meta{grid-template-columns:repeat(4,1fr)}}
.hero__cell{background:var(--void);padding:18px 16px 16px}
.hero__cell dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-500);margin-bottom:8px}
.hero__cell dd{font-family:var(--f-display);font-variation-settings:"wdth" 104,"wght" 700;font-size:1.02rem;color:var(--paper);text-transform:uppercase;letter-spacing:.01em}
.hero__scroll{
  position:absolute;right:var(--gut);bottom:clamp(28px,6vw,60px);z-index:4;
  display:none;flex-direction:column;align-items:center;gap:12px
}
@media (min-width:1100px){.hero__scroll{display:flex}}
.hero__scroll span{font-family:var(--f-mono);font-size:9px;letter-spacing:.3em;writing-mode:vertical-rl;color:var(--steel-500)}
.hero__scroll i{display:block;width:1px;height:56px;background:linear-gradient(to bottom,var(--brand),transparent);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Uzak ekran — naslov ne sme da padne ispod čitljivog, a dugmad idu
   preko cele širine jer se u 320 px ne slažu jedno pored drugog. */
@media (max-width:640px){
  .hero__lede{font-size:.98rem}
  .hero__actions{gap:10px}
  .hero__actions .btn{padding:13px 20px;width:100%}
  .hero__cell{padding:13px 13px 12px}
  .hero{padding-bottom:clamp(20px,4vw,40px)}
}
/* Mali telefon: i posle skupljanja nema mesta za meta red — sklanja se.
   Na visokom telefonu (npr. 390×844) ostaje. */
@media (max-width:640px) and (max-height:780px){
  .hero__meta{display:none}
}

/* Kratak viewport (nizak prozor, telefon položen, stari iPhone SE 320×568)
   — meta red se sklanja, ritam i naslov se stežu do kraja da hero ostane
   tačno jedan ekran bez prelivanja. */
@media (max-height:620px){
  .hero{--hgap:clamp(8px,1.8vh,20px);padding-bottom:16px}
  .hero__meta{display:none}
  .hero__title{font-size:clamp(1.5rem,min(7.4vw,7.4vh),2.4rem)}
  .hero__lede{font-size:.92rem}
  .hero__actions{gap:8px}
  .hero__actions .btn{padding:11px 16px}
}

/* Telefon u ležećem položaju (visina ≤480 px). Dugmad se vraćaju u red —
   u ležećem ima širine — a natpis lokacije pored pilule se sklanja. */
@media (max-height:480px){
  .hero{--hgap:clamp(6px,1.4vh,14px);padding-bottom:12px}
  .hero__title{font-size:clamp(1.35rem,min(6.2vw,6.6vh),2rem)}
  .hero__lede{font-size:.88rem;max-width:46ch}
  .hero__eyebrow .label{display:none}
  .hero__actions{flex-wrap:nowrap}
  .hero__actions .btn{width:auto;padding:10px 15px;font-size:.7rem}
}
/* Krajnji slučaj (npr. 568×320) — ostaje samo ono što nosi poruku:
   naslov, lede, dugmad i pokazivač slajdova. */
@media (max-height:400px){
  .hero__eyebrow{display:none}
  .hero__lede{font-size:.84rem}
}

/* 11. KOTNA LINIJA — potpisni element
   ------------------------------------------------------------------------ */
.dim{display:block;width:100%;height:26px;overflow:visible;color:var(--arc)}
.dim line,.dim path{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.dim .dim__run{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.1s var(--ease-out) .12s}
.dim.is-in .dim__run{stroke-dashoffset:0}
.dim .dim__ext{opacity:0;transition:opacity .4s var(--ease) .5s}
.dim.is-in .dim__ext{opacity:.55}
.dim text{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;fill:currentColor;
  opacity:0;transition:opacity .4s var(--ease) .72s;text-transform:uppercase
}
.dim.is-in text{opacity:.95}
.sheet .dim{color:var(--steel-500)}

/* 12. BROJEVI / STATISTIKA
   ------------------------------------------------------------------------ */
.stats{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--void);padding:clamp(24px,3.6vw,40px) clamp(18px,2.4vw,28px);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brand);transition:width .9s var(--ease-out)}
.stat.is-in::after{width:100%}
.stat__n{
  font-family:var(--f-display);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:clamp(2.3rem,5.4vw,3.5rem);line-height:1;color:var(--paper);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:3px
}
.stat__suf{font-size:.42em;color:var(--brand);font-variation-settings:"wdth" 100,"wght" 700}
.stat__t{margin-top:14px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-300)}
.stat__d{margin-top:7px;font-size:.83rem;color:var(--steel-500);line-height:1.5}

/* 13. KARTICE PROGRAMA
   ------------------------------------------------------------------------ */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper-2);border:1px solid var(--line-dark);
  transition:border-color var(--t-med) var(--ease),transform var(--t-med) var(--ease-out),box-shadow var(--t-med);
  overflow:hidden
}
.card:hover{border-color:var(--void);transform:translateY(-5px);box-shadow:0 18px 40px -26px rgba(21,15,14,.55)}
.card__top{
  position:relative;aspect-ratio:16/11;background:
    linear-gradient(135deg,#fff 0%, #EAE5E3 100%);
  display:grid;place-items:center;padding:22px;border-bottom:1px solid var(--line-dark);overflow:hidden
}
.card__top::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:22px 22px
}
.card__fig{position:relative;width:100%;height:100%;color:var(--void);transition:transform .7s var(--ease-out)}
.card:hover .card__fig{transform:scale(1.06) rotate(-1.2deg)}
.card__no{
  position:absolute;top:12px;left:14px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.2em;color:var(--steel-500);z-index:2
}
.card__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1;gap:12px}
.card__t{color:var(--void)}
.card__d{font-size:.9rem;color:var(--steel-500);line-height:1.55;flex:1}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tag{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 8px 3px;border:1px solid var(--line-dark-2);color:var(--steel-500)
}
.card__go{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;
  padding-top:14px;border-top:1px solid var(--line-dark);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--void)
}
.card__go i{transition:transform var(--t-med) var(--ease)}
.card:hover .card__go i{transform:translateX(5px)}

/* 14. MOGUĆNOSTI (lista sa reflektorom)
   ------------------------------------------------------------------------ */
.caps{border-top:1px solid var(--line)}
.cap{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px 20px;align-items:start;
  padding:clamp(22px,3.2vw,32px) 0;border-bottom:1px solid var(--line);
  transition:padding-inline var(--t-med) var(--ease)
}
@media (min-width:900px){
  .cap{grid-template-columns:74px minmax(0,1fr) minmax(0,1.15fr) auto;align-items:center;gap:28px}
  .cap:hover{padding-inline:18px}
}
.cap::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(190,225,1,.09),transparent 62%);
  opacity:0;transition:opacity var(--t-med) var(--ease);pointer-events:none
}
.cap:hover::before{opacity:1}
.cap__no{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;color:var(--steel-500);padding-top:4px}
.cap:hover .cap__no{color:var(--brand)}
.cap__t{color:var(--paper);transition:transform var(--t-med) var(--ease)}
.cap__d{font-size:.92rem;color:var(--steel-400);line-height:1.55;grid-column:1/-1}
@media (min-width:900px){.cap__d{grid-column:auto}}
.cap__spec{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;color:var(--steel-500);white-space:nowrap}
.cap:hover .cap__spec{color:var(--arc)}

/* 15. PROCES
   ------------------------------------------------------------------------ */
.steps{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media (min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{background:var(--paper);padding:clamp(22px,2.8vw,30px);position:relative;transition:background var(--t-med) var(--ease)}
.step:hover{background:#fff}
.step__no{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;color:var(--brand);
  display:flex;align-items:center;gap:10px;margin-bottom:20px
}
.step__no::after{content:"";flex:1;height:1px;background:var(--line-dark)}
.step__t{color:var(--void);margin-bottom:10px}
.step__d{font-size:.88rem;color:var(--steel-500);line-height:1.55}
.step__bar{position:absolute;left:0;top:0;width:0;height:2px;background:var(--brand);transition:width .8s var(--ease-out)}
.step.is-in .step__bar{width:100%}

/* 16. TRAKA MATERIJALA
   ------------------------------------------------------------------------ */
.ticker{
  position:relative;overflow:hidden;border-block:1px solid var(--line);
  padding-block:clamp(16px,2.2vw,22px);background:var(--graphite);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.ticker__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;flex-shrink:0}
.ticker__i{
  display:inline-flex;align-items:center;gap:12px;padding-inline:clamp(20px,3vw,40px);
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-400);
  white-space:nowrap
}
.ticker__i b{color:var(--paper);font-weight:500}
.ticker__i::after{content:"";width:4px;height:4px;background:var(--brand);flex-shrink:0}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 17. REFERENCE
   ------------------------------------------------------------------------ */
.refs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){.refs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.refs{grid-template-columns:repeat(3,1fr)}}
.ref{
  position:relative;background:var(--graphite);padding:clamp(24px,3vw,34px);
  min-height:230px;display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  overflow:hidden;transition:background var(--t-med) var(--ease)
}
.ref:hover{background:var(--graphite-2)}
.ref__fig{position:absolute;right:-16px;bottom:-16px;width:150px;height:150px;color:var(--steel-700);
  transition:transform .8s var(--ease-out),color var(--t-med)}
.ref:hover .ref__fig{transform:scale(1.08) translate(-6px,-6px);color:rgba(190,225,1,.4)}
.ref__head{position:relative;z-index:1;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.ref__cat{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.ref__yr{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:var(--steel-500)}
.ref__body{position:relative;z-index:1}
.ref__t{color:var(--paper);margin-bottom:9px}
.ref__d{font-size:.88rem;color:var(--steel-400);line-height:1.5;max-width:38ch}

/* 18. CTA TRAKA
   ------------------------------------------------------------------------ */
.cta{position:relative;overflow:hidden;background:var(--graphite);border-block:1px solid var(--line)}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 12% 100%, rgba(190,225,1,.16), transparent 60%)
}
.cta__inner{position:relative;display:grid;gap:clamp(26px,4vw,50px);align-items:center}
@media (min-width:900px){.cta__inner{grid-template-columns:1.35fr auto}}
.cta__t{margin-bottom:16px}

/* 19. PODNOŽJE + SASTAVNICA
   ------------------------------------------------------------------------ */
.footer{background:var(--void);border-top:1px solid var(--line);padding-top:clamp(52px,7vw,88px)}
.footer__brand{margin-bottom:clamp(24px,3.4vw,34px)}
.footer__logo{height:44px;width:auto;display:block}
@media (max-width:600px){.footer__logo{height:34px}}
.footer__logo--print{display:none}   /* na papir ide original — vidi sekciju 32 */
.footer__grid{display:grid;gap:clamp(30px,4vw,48px);margin-bottom:clamp(40px,6vw,64px)}
@media (min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1100px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.footer__h{
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel-500);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line)
}
.footer__li{margin-bottom:11px}
.footer__li a,.footer__li span{font-size:.9rem;color:var(--steel-300);transition:color var(--t-fast)}
.footer__li a:hover{color:var(--brand)}
.footer__note{font-size:.88rem;color:var(--steel-400);line-height:1.6;max-width:42ch;margin-top:18px}

/* Sastavnica — kao zaglavlje tehničkog crteža */
.titleblock{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:26px
}
@media (min-width:700px){.titleblock{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1020px){.titleblock{grid-template-columns:repeat(6,1fr)}}
.tb{background:var(--void);padding:13px 15px 14px}
.tb__k{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-500);margin-bottom:6px}
.tb__v{font-family:var(--f-mono);font-size:.79rem;letter-spacing:.05em;color:var(--zinc);text-transform:uppercase}
.tb__v--brand{color:var(--brand)}

.footer__bar{
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;
  padding-block:22px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--steel-500)
}
.footer__bar a:hover{color:var(--brand)}

/* 20. DOK (AI asistent + na vrh) — u istoj liniji
   ------------------------------------------------------------------------ */
.dock{
  position:fixed;bottom:var(--dock-in);left:0;right:0;z-index:95;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding-inline:var(--dock-in)
}
.dock > *{pointer-events:auto}

.fab{
  position:relative;width:var(--dock);height:var(--dock);display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(30,22,20,.92);backdrop-filter:blur(10px);
  color:var(--paper);transition:border-color var(--t-med),background var(--t-med),transform var(--t-med) var(--ease-out),opacity var(--t-med)
}
.fab:hover{border-color:var(--brand);background:var(--brand);color:var(--void);transform:translateY(-3px)}
.fab svg{width:21px;height:21px}

.fab--ai::after{
  content:"";position:absolute;top:-1px;right:-1px;width:8px;height:8px;background:var(--brand);
  box-shadow:0 0 0 0 rgba(190,225,1,.55);animation:ping 2.6s var(--ease) infinite
}
.fab--ai.is-open::after{display:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(190,225,1,.5)}70%{box-shadow:0 0 0 11px rgba(190,225,1,0)}100%{box-shadow:0 0 0 0 rgba(190,225,1,0)}}

.fab--top{opacity:0;visibility:hidden;transform:translateY(10px)}
.fab--top.is-vis{opacity:1;visibility:visible;transform:translateY(0)}
.fab--top .fab__ring{position:absolute;inset:-1px;transform:rotate(-90deg)}
.fab--top circle{fill:none;stroke-width:1.5}
.fab--top .r-bg{stroke:transparent}
.fab--top .r-fg{stroke:var(--brand);stroke-dasharray:var(--c);stroke-dashoffset:var(--c)}

.fab__tip{
  position:absolute;bottom:calc(100% + 12px);white-space:nowrap;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--paper);color:var(--void);padding:6px 10px 5px;
  opacity:0;transform:translateY(6px);transition:opacity var(--t-fast),transform var(--t-fast);pointer-events:none
}
.fab--ai .fab__tip{left:0}
.fab--top .fab__tip{right:0}
.fab:hover .fab__tip{opacity:1;transform:translateY(0)}

/* 21. AI ASISTENT
   ------------------------------------------------------------------------ */
.ai{
  position:fixed;z-index:96;left:var(--dock-in);right:var(--dock-in);
  bottom:calc(var(--dock-in) + var(--dock) + 12px);
  max-height:min(76svh,660px);display:flex;flex-direction:column;
  background:var(--graphite);border:1px solid var(--line-2);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transform-origin:bottom left;
  transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease-out),visibility var(--t-med);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85)
}
@media (min-width:560px){.ai{right:auto;width:392px}}
.ai.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.ai__head{
  display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);
  background:var(--graphite-2)
}
.ai__avatar{
  width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid rgba(190,225,1,.4);background:rgba(190,225,1,.09);color:var(--brand)
}
.ai__avatar svg{width:17px;height:17px}
.ai__ttl{flex:1;min-width:0}
.ai__name{font-family:var(--f-display);font-variation-settings:"wdth" 108,"wght" 700;font-size:.9rem;text-transform:uppercase;color:var(--paper);letter-spacing:.01em;line-height:1.1}
.ai__stat{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-500);margin-top:3px}
.ai__dot{width:5px;height:5px;border-radius:50%;background:#48C07A;flex-shrink:0}
.ai__x{width:30px;height:30px;display:grid;place-items:center;color:var(--steel-400);border:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.ai__x:hover{color:var(--paper);border-color:var(--line-2)}

.ai__log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:var(--steel-700) transparent}
.ai__log::-webkit-scrollbar{width:5px}
.ai__log::-webkit-scrollbar-thumb{background:var(--steel-700)}

.msg{max-width:88%;font-size:.885rem;line-height:1.58;animation:msgIn .42s var(--ease-out) both}
@keyframes msgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.msg--bot{align-self:flex-start;background:var(--steel-800);border:1px solid var(--line);color:var(--zinc);padding:12px 14px}
.msg--me{align-self:flex-end;background:var(--brand);color:var(--void);padding:11px 14px;font-weight:500}
.msg b{color:var(--paper);font-weight:600}
.msg--me b{color:var(--void)}
.msg a{color:var(--brand);border-bottom:1px solid rgba(190,225,1,.4)}
.msg--bot ul{margin:9px 0 2px;padding-left:2px}
.msg--bot li{position:relative;padding-left:16px;margin-bottom:5px;font-size:.855rem}
.msg--bot li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--brand)}

.ai__typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:var(--steel-800);border:1px solid var(--line)}
.ai__typing i{width:5px;height:5px;border-radius:50%;background:var(--steel-400);animation:blip 1.3s var(--ease) infinite}
.ai__typing i:nth-child(2){animation-delay:.16s}
.ai__typing i:nth-child(3){animation-delay:.32s}
@keyframes blip{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ai__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.chip{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 10px 6px;border:1px solid var(--line-2);color:var(--steel-300);
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)
}
.chip:hover{color:var(--brand);border-color:var(--brand);background:rgba(190,225,1,.07)}

.ai__form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:var(--graphite-2)}
.ai__in{
  flex:1;min-width:0;background:var(--void);border:1px solid var(--line);padding:11px 12px;
  font-size:.875rem;color:var(--paper);transition:border-color var(--t-fast)
}
.ai__in::placeholder{color:var(--steel-500)}
.ai__in:focus{outline:none;border-color:var(--brand)}
.ai__send{
  width:42px;flex-shrink:0;display:grid;place-items:center;background:var(--brand);color:var(--void);
  transition:opacity var(--t-fast)
}
.ai__send:hover{opacity:.85}
.ai__send svg{width:17px;height:17px}
.ai__foot{padding:0 16px 11px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.13em;color:var(--steel-500);text-transform:uppercase;background:var(--graphite-2)}

/* 22. FILTERI + KATALOG
   ------------------------------------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3.5vw,40px)}
.filter{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  padding:10px 15px 9px;border:1px solid var(--line-dark);color:var(--steel-500);
  transition:all var(--t-fast)
}
.filter:hover{border-color:var(--void);color:var(--void)}
.filter.is-on{background:var(--brand);border-color:var(--brand);color:var(--void);font-weight:600}
.card.is-hidden{display:none}
.card.is-fading{opacity:0;transform:translateY(10px) scale(.98)}

/* 23. FIOKA (brzi pregled)
   ------------------------------------------------------------------------ */
.scrim{position:fixed;inset:0;z-index:98;background:rgba(21,15,14,.7);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med)}
.scrim.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:99;width:min(560px,100%);
  background:var(--paper);color:var(--void);transform:translateX(101%);
  transition:transform .55s var(--ease-out);display:flex;flex-direction:column;overflow-y:auto
}
.drawer.is-open{transform:translateX(0)}
.drawer__head{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--gut);border-bottom:1px solid var(--line-dark);background:var(--paper)
}
.drawer__x{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-dark);transition:all var(--t-fast)}
.drawer__x:hover{background:var(--void);color:var(--paper);border-color:var(--void)}
.drawer__body{padding:clamp(24px,4vw,40px) var(--gut) 40px}
.drawer__fig{aspect-ratio:16/10;background:#fff;border:1px solid var(--line-dark);display:grid;place-items:center;padding:26px;margin-bottom:26px;position:relative;overflow:hidden}
.drawer__fig::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:24px 24px}
.drawer__fig svg{position:relative;width:100%;height:100%;color:var(--void)}
.spectable{width:100%;border-collapse:collapse;margin-block:22px;font-size:.875rem}
.spectable th,.spectable td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line-dark)}
.spectable th{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-500);width:44%;font-weight:500}
.spectable td{color:var(--void)}

/* 24. AKORDEON
   ------------------------------------------------------------------------ */
.acc{border-top:1px solid var(--line)}
.sheet .acc{border-color:var(--line-dark)}
.acc__i{border-bottom:1px solid var(--line)}
.sheet .acc__i{border-color:var(--line-dark)}
.acc__b{
  width:100%;display:flex;align-items:center;gap:18px;text-align:left;
  padding:clamp(18px,2.6vw,26px) 0;transition:color var(--t-fast)
}
.acc__no{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--brand);flex-shrink:0}
.acc__t{flex:1}
.acc__pm{position:relative;width:14px;height:14px;flex-shrink:0}
.acc__pm::before,.acc__pm::after{content:"";position:absolute;background:currentColor;transition:transform var(--t-med) var(--ease)}
.acc__pm::before{left:0;top:6.5px;width:14px;height:1px}
.acc__pm::after{left:6.5px;top:0;width:1px;height:14px}
.acc__i.is-open .acc__pm::after{transform:scaleY(0)}
.acc__p{overflow:hidden;height:0;transition:height var(--t-med) var(--ease)}
.acc__inner{padding-bottom:clamp(20px,2.6vw,28px);padding-left:clamp(0px,4vw,42px);max-width:72ch}
.acc__inner p{color:var(--steel-400);font-size:.94rem}
.sheet .acc__inner p{color:var(--steel-500)}
.acc__inner ul{margin-top:14px;display:grid;gap:8px}
.acc__inner li{position:relative;padding-left:20px;font-size:.9rem;color:var(--steel-400)}
.sheet .acc__inner li{color:var(--steel-500)}
.acc__inner li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;background:var(--brand)}

/* 25. VREMENSKA OSA
   ------------------------------------------------------------------------ */
.tl{position:relative;padding-left:26px}
@media (min-width:760px){.tl{padding-left:0}}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
@media (min-width:760px){.tl::before{left:126px}}
.tl__i{position:relative;padding-bottom:clamp(28px,4vw,44px)}
@media (min-width:760px){.tl__i{display:grid;grid-template-columns:126px 1fr;gap:44px}}
.tl__i::before{
  content:"";position:absolute;left:-26px;top:7px;width:11px;height:11px;
  border:1px solid var(--brand);background:var(--void);transition:background var(--t-med)
}
@media (min-width:760px){.tl__i::before{left:100px}}
.tl__i:hover::before{background:var(--brand)}
.tl__y{font-family:var(--f-display);font-variation-settings:"wdth" 110,"wght" 800;font-size:1.5rem;color:var(--brand);line-height:1;margin-bottom:10px}
@media (min-width:760px){.tl__y{margin-bottom:0;text-align:right;padding-right:0}}
.tl__t{color:var(--paper);margin-bottom:8px}
.tl__d{font-size:.92rem;color:var(--steel-400);max-width:60ch}

/* 26. FORMA
   ------------------------------------------------------------------------ */
.form{display:grid;gap:18px}
.frow{display:grid;gap:18px}
@media (min-width:640px){.frow--2{grid-template-columns:repeat(2,1fr)}}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-400)}
.sheet .field label{color:var(--steel-500)}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:1px solid var(--line-2);padding:14px 15px;
  font-size:.95rem;color:var(--paper);transition:border-color var(--t-fast),background var(--t-fast)
}
.sheet .field input,.sheet .field textarea,.sheet .field select{border-color:var(--line-dark-2);color:var(--void)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);background:rgba(190,225,1,.04)}
.field textarea{resize:vertical;min-height:132px}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(1.25em + 2px),calc(100% - 14px) calc(1.25em + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--void);color:var(--paper)}
.sheet .field select option{background:#fff;color:var(--void)}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{border-color:#E05252}
.field__err{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:#E05252;display:none}
.field.is-bad .field__err{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.84rem;color:var(--steel-400);line-height:1.5}
.sheet .consent{color:var(--steel-500)}
.consent input{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--brand)}
.form__msg{padding:15px;border:1px solid var(--line-2);font-size:.9rem;display:none}
.form__msg.is-ok{display:block;border-color:#48C07A;color:#8FE0AF;background:rgba(72,192,122,.07)}
.form__msg.is-err{display:block;border-color:#E05252;color:#F09B9B;background:rgba(224,82,82,.07)}

/* 27. INFO PLOČICE
   ------------------------------------------------------------------------ */
.info{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.info{grid-template-columns:repeat(2,1fr)}}
.info__i{background:var(--void);padding:clamp(22px,3vw,30px);display:flex;gap:16px;align-items:flex-start}
.info__ic{width:32px;height:32px;flex-shrink:0;color:var(--brand)}
.info__k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-500);margin-bottom:8px}
.info__v{font-size:.98rem;color:var(--paper);line-height:1.5}
.info__v a:hover{color:var(--brand)}

.map{border:1px solid var(--line);aspect-ratio:16/10;width:100%;filter:grayscale(1) invert(.92) contrast(.86);background:var(--graphite)}
@media (max-width:640px){.map{aspect-ratio:4/3}}

/* 28. FOTO SLOT (mesto za fotografije klijenta)
   ------------------------------------------------------------------------ */
.slot{
  position:relative;display:grid;place-items:center;border:1px solid var(--line);
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(176,160,155,.05) 9px,rgba(176,160,155,.05) 10px);
  aspect-ratio:4/3;overflow:hidden
}
.sheet .slot{border-color:var(--line-dark);
  background:repeating-linear-gradient(45deg,#fff,#fff 9px,rgba(21,15,14,.045) 9px,rgba(21,15,14,.045) 10px)}
.slot__tag{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel-500);
  border:1px solid var(--line-2);padding:6px 10px 5px;background:var(--void)
}
.sheet .slot__tag{background:#fff;border-color:var(--line-dark)}
.slot--tall{aspect-ratio:3/4}
.slot--wide{aspect-ratio:16/9}

/* 29. OTKRIVANJE PRI SKROLU
   ------------------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.rv--l{transform:translateX(-26px)}
.rv--r{transform:translateX(26px)}
.rv--s{transform:scale(.965)}
[data-rv-d="1"]{transition-delay:.08s}
[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}
[data-rv-d="4"]{transition-delay:.32s}
[data-rv-d="5"]{transition-delay:.40s}
[data-rv-d="6"]{transition-delay:.48s}

.wsplit .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.wsplit .w > span{display:inline-block;transform:translateY(102%);transition:transform .82s var(--ease-out)}
.wsplit.is-in .w > span{transform:translateY(0)}

/* 30. POMOĆNO
   ------------------------------------------------------------------------ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:12px;top:-60px;z-index:200;background:var(--brand);color:var(--void);
  padding:11px 16px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  transition:top var(--t-fast)
}
.skip:focus{top:12px}
.nobr{white-space:nowrap}
.stack{display:grid;gap:16px}
.stack--lg{gap:26px}
body.is-locked{overflow:hidden}

/* Podnaslov stranice (inner hero) */
.phead{position:relative;padding-top:calc(var(--nav-h) + clamp(56px,9vw,120px));padding-bottom:clamp(44px,6vw,84px);overflow:hidden;border-bottom:1px solid var(--line)}
.phead::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 100% at 50% 0%,#000,transparent 72%);
  mask-image:radial-gradient(80% 100% at 50% 0%,#000,transparent 72%)
}
.phead__inner{position:relative}
.crumbs{display:flex;gap:10px;align-items:center;margin-bottom:20px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-500)}
.crumbs a:hover{color:var(--brand)}

/* 31. REDUKOVANO KRETANJE
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important
  }
  .rv,.wsplit .w > span,.hero__title .ln > span{opacity:1 !important;transform:none !important}
  .ticker__track{animation:none}
  .xhair{display:none}
}

/* 32. ŠTAMPA
   ------------------------------------------------------------------------ */
@media print{
  .nav,.dock,.ai,.frame,.guides,.xhair,.loader,.hero__canvas,.progress,
  .hero__slides,.hero__scrim,.hero__veil,.hero__ind,.hero__scroll,
  .phead__bg{display:none !important}
  body{background:#fff;color:#000}
  .rv{opacity:1;transform:none}
  /* Papir je beo — svetla varijanta logotipa bi nestala. Ide original. */
  .footer__brand picture{display:none}
  .footer__logo--print{display:block !important}
  /* Hero na papiru ne sme da zauzme ceo list */
  .hero{height:auto !important;min-height:0 !important;padding-top:24px}
  .hero__title,.display,.h2{color:#000 !important}
  .slot .shot img{filter:none}
}

/* 33. DOPUNE
   ------------------------------------------------------------------------ */
.nav__cta{display:none}
@media (min-width:600px){.nav__cta{display:inline-flex}}

/* Kartice bez slike (npr. „za koga radimo") dobijaju gornju liniju umesto figure */
.card__body:first-child{border-top:2px solid var(--void);padding-top:24px}

/* Tabela materijala u tamnoj sekciji */
.section:not(.sheet) .spectable th,
.section:not(.sheet) .spectable td{border-bottom-color:var(--line)}

/* Kotna linija u tamnoj sekciji je toplija */
.section:not(.sheet) .dim{color:rgba(147,166,75,.85)}

/* Bezbednost: dugi linkovi u podnožju ne razbijaju mrežu */
.footer__li a,.footer__li span{overflow-wrap:anywhere}

/* 34. KONTRAST — sekundarni tekst mora da se čita
   Izmereno prema WCAG AA: 4.5:1 za tekst, 3:1 za krupan tekst i UI ivice.

   Pravilo palete, u jednoj rečenici:
     --brand (#BEE101) je vrlo svetla boja. Na tamnom je odlična za tekst
     (8—12,6:1). Na svetlom pada na ~1,3:1 i tamo se NE SME koristiti za
     tekst — tu ide --brand-ink (#4F5D00, 6,55:1 na --paper).
     Na zelenoj ispuni tekst je uvek --void (12,62:1); belo bi bilo 1,50:1.
   ------------------------------------------------------------------------ */
:root{
  --ink-500: #61504A;  /* sekundarni tekst na svetloj podlozi — 6,89:1 na --paper */
}

/* Komponente koje uvek stoje na svetloj podlozi */
.card__d,.card__no,.tag,.step__d,.filter,.spectable th{color:var(--ink-500)}
.section:not(.sheet) .spectable th{color:var(--steel-300)}

/* .step je uvek --paper, bez obzira na roditelja — zato ide --brand-ink
   u osnovnom pravilu, a ne kroz .sheet */
.step__no{color:var(--brand-ink)}
.step__bar{background:var(--brand-ink)}

/* Svetle sekcije */
.sheet .lede,.sheet .small,.sheet .eyebrow__txt,.sheet .label,
.sheet .field label,.sheet .consent,
.sheet .acc__inner p,.sheet .acc__inner li,
.sheet .slot__tag{color:var(--ink-500)}
.sheet .eyebrow__no{color:var(--brand-ink);border-color:var(--brand-ink)}
.sheet .step__no,.sheet .acc__no{color:var(--brand-ink)}
.sheet .acc__inner li::before{background:var(--brand-ink)}
.sheet .tlink{color:var(--brand-ink);border-bottom-color:rgba(79,93,0,.34)}
.sheet .tlink:hover{border-bottom-color:var(--brand-ink)}
.drawer .lede{color:var(--ink-500)}

/* Fokus i ivice polja na svetloj podlozi — zelena ivica na papiru je
   ~1,3:1, pa se i tu spušta na --brand-ink (5,8:1, iznad 3:1 za UI) */
.sheet :focus-visible,.drawer :focus-visible,.card :focus-visible,
.step :focus-visible{outline-color:var(--brand-ink)}
.sheet .field input:focus,.sheet .field textarea:focus,.sheet .field select:focus,
.drawer .field input:focus{border-color:var(--brand-ink);background:rgba(79,93,0,.05)}
.consent input{accent-color:var(--brand-ink)}

/* Zelena ispuna → tekst je --void, nikad beo */
.btn--brand,.hero__pill,.filter.is-on,.msg--me,.ai__send,.skip,
.lang__b.is-on,.fab:hover{color:var(--void)}

/* Fioka nije .sheet, a podloga joj je --paper — pa mora posebno */
.drawer .label,.drawer .small{color:var(--ink-500)}

/* Tamne sekcije */
.stat__d,.cap__no,.cap__spec,.loader__id,.loader__pct,
.tb__k,.footer__bar,.ai__foot,.ai__stat,.crumbs,.ref__yr,
.slot__tag,.hero__cell dt{color:var(--steel-400)}
/* Ovi stoje na --void ili --graphite i sa --steel-500 padaju na 2,9:1 */
.footer__h,.info__k,.frame__coord{color:var(--steel-300)}
.footer__bar a{color:var(--steel-300)}

/* Traka za skrolovanje u toploj paleti */
html{scrollbar-color:var(--steel-700) var(--void);scrollbar-width:thin}

/* 35. HERO SLAJDER — tri fotografije iza tehničkog crteža
   Ritam: 6 s po slajdu, prelaz 1,2 s, Ken Burns traje punih 7,2 s.
   Slojevi su opisani u sekciji 10.
   ------------------------------------------------------------------------ */
.hero__slides{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--void)}
.hero__slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.2s var(--ease);
  will-change:opacity,transform;
  /* vraća definiciju koju veo pojede */
  filter:contrast(1.05) saturate(.95)
}
/* Kadriranje po slici — centrirani rez seče ono što je zanimljivo.
   Slajd 2 (skladište) ima teret u donjoj polovini, slajd 3 (laserski sto)
   je najsvetliji pa se pomera ka tamnijem delu iza teksta. */
.hero__slides picture:nth-of-type(2) .hero__slide{object-position:center 62%}
.hero__slides picture:nth-of-type(3) .hero__slide{object-position:60% center}
.hero__slide.is-on{opacity:1;animation:kbA 7.2s var(--ease-out) forwards}
/* Smer pomeranja se menja po slajdu — inače deluje mehanički.
   Broji se <picture>, jer je svaki <img> jedini svoje vrste u svom omotaču. */
.hero__slides picture:nth-of-type(2) .hero__slide.is-on{animation-name:kbB}
.hero__slides picture:nth-of-type(3) .hero__slide.is-on{animation-name:kbC}
@keyframes kbA{from{transform:scale(1.06) translate(-1.1%,.6%)} to{transform:scale(1) translate(0,0)}}
@keyframes kbB{from{transform:scale(1.06) translate(1.2%,-.5%)} to{transform:scale(1) translate(0,0)}}
@keyframes kbC{from{transform:scale(1.06) translate(.2%,1.2%)}  to{transform:scale(1) translate(0,0)}}

/* Pokazivač — tri monospace crtice, u jeziku tehničkog lista */
.hero__ind{
  position:relative;z-index:4;display:flex;gap:10px;justify-content:flex-end;
  margin-bottom:clamp(16px,2.2vw,24px)
}
.hero__tick{
  display:grid;gap:7px;width:54px;padding:0;text-align:left;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--steel-400);transition:color var(--t-fast)
}
.hero__tick:hover{color:var(--paper)}
.hero__tick.is-on{color:var(--brand)}
.hero__tick i{display:block;height:2px;background:rgba(176,160,155,.32);position:relative;overflow:hidden}
.hero__tick i::after{content:"";position:absolute;top:0;bottom:0;left:0;right:100%;background:var(--brand)}
.hero__tick.is-on i::after{animation:tickFill 6s linear forwards}
@keyframes tickFill{from{right:100%} to{right:0}}

/* Kartica ne trči dok je tab u pozadini */
.hero.is-paused .hero__slide.is-on,
.hero.is-paused .hero__tick.is-on i::after{animation-play-state:paused}

/* Redukovano kretanje — samo prvi kadar, bez auto-smene i bez Ken Burnsa.
   Crtice ostaju klikabilne. */
@media (prefers-reduced-motion:reduce){
  .hero__slide{transform:none;transition:none}
  .hero__slide.is-on{animation:none}
  .hero__tick.is-on i::after{animation:none;right:0}
}

/* 36. FOTOGRAFIJE NA OSTATKU SAJTA
   Svaka slika stoji u kontejneru sa overflow:hidden i fiksnim odnosom
   strana, pa se ništa ne pomera dok se učitava.
   ------------------------------------------------------------------------ */
.shot{position:relative;display:block;overflow:hidden;background:var(--graphite)}
/* Slika se pozicionira apsolutno, a ne sa height:100% — <picture> je inline
   omotač bez visine, pa bi se procenat razrešio u auto. */
.shot img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  transition:transform .7s var(--ease-out),filter .7s var(--ease)
}

/* .slot zadržava tehnički ram i uglovne crtice — slika ide unutra */
.slot{padding:0}
.slot .shot{position:absolute;inset:0}
.slot .shot img{filter:saturate(.82) contrast(1.04) brightness(.9)}
.slot:hover .shot img{transform:scale(1.045) translateY(-4px);filter:saturate(.95) contrast(1.02) brightness(1.04)}
.slot__tag{position:relative;z-index:2;pointer-events:none}
/* Kad u slotu stoji fotografija, oznaka silazi u ugao umesto u sredinu.
   Susedni selektor, ne :has() — mora da radi i u starijim pregledačima. */
.slot .shot ~ .slot__tag{position:absolute;left:12px;bottom:12px}
/* Uglovne crtice — ram crteža ostaje čitljiv i preko fotografije */
.slot::before,.slot::after{
  content:"";position:absolute;z-index:2;width:14px;height:14px;pointer-events:none;
  border:1px solid rgba(190,225,1,.55)
}
.slot::before{top:8px;left:8px;border-right:0;border-bottom:0}
.slot::after{bottom:8px;right:8px;border-left:0;border-top:0}
.sheet .slot::before,.sheet .slot::after{border-color:rgba(79,93,0,.5)}
/* Kada .slot drži fotografiju, šrafirana podloga više nije potrebna */
.slot:has(.shot){background:var(--void)}
.sheet .slot:has(.shot){background:var(--paper-2)}

/* Zaglavlje podstranice — vidi sekciju 37 (baner) */
.phead{isolation:isolate}

/* 37. BANER PODSTRANICE
   Jedna fotografija, nasumično izabrana pri učitavanju (nije slajder —
   pretapanje ostaje isključivo na početnoj, da početna zadrži hijerarhiju).
   Veo je iste vrste kao u hero-u: blagi opšti ton + usmereni gradijent s
   leva, pa desna trećina banera ostaje čist snimak.
   ------------------------------------------------------------------------ */
.phead{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(340px,54vh,600px);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + clamp(36px,5vw,72px));
  padding-bottom:clamp(30px,4vw,52px);
  border-bottom:1px solid var(--line)
}
.phead__inner{position:relative;z-index:2;width:100%}

.phead__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--void)}
.phead__bg img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;      /* JS ga prepiše iz data.js */
  filter:contrast(1.05) saturate(.95);
  opacity:0;transition:opacity .6s var(--ease)
}
.phead__bg img.is-loaded{opacity:1}
/* Veo — dva sloja, isto kao hero */
.phead__bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,
      rgba(21,15,14,.93) 0%,
      rgba(21,15,14,.90) 34%,
      rgba(21,15,14,.66) 56%,
      rgba(21,15,14,0)   74%),
    linear-gradient(to top, var(--void) 0%, rgba(21,15,14,.16) 34%, rgba(21,15,14,.10) 100%),
    linear-gradient(rgba(21,15,14,.32), rgba(21,15,14,.32))
}
/* Lede u baneru ide na kraći red (podrazumevanih 62ch bi ga izguralo u
   providni kraj gradijenta, gde padne na 3,5:1) */
.phead .lede{max-width:48ch}
/* Ispod 900px tekst ide celom širinom — usmereni veo nema šta da štiti */
@media (max-width:900px){
  .phead__bg::after{
    background:
      linear-gradient(180deg,
        rgba(21,15,14,.60) 0%,
        rgba(21,15,14,.78) 40%,
        rgba(21,15,14,.88) 100%)
  }
}
/* Mreža crteža ostaje, ali tiša — sad ispod nje stoji fotografija */
.phead::before{opacity:.28;z-index:1}

.phead .display,.phead .lede{text-shadow:0 1px 20px rgba(0,0,0,.55)}

/* Kotna linija preko donjeg dela banera — u boji akcenta, iscrtava se
   pri učitavanju (isti .dim mehanizam, samo drugi ton) */
.phead__dim{margin-top:clamp(26px,3.6vw,44px);color:var(--brand)}
.section:not(.sheet) .phead__dim{color:var(--brand)}
.phead__dim .dim__ext{opacity:.5}
.phead__dim text{opacity:0}
.phead__dim.is-in text{opacity:.9}
/* viewBox se rasteže (preserveAspectRatio="none"), pa se na uskom ekranu
   natpis sabije do nečitljivog — tamo ostaje samo kota. */
@media (max-width:640px){.phead__dim text{display:none}}

@media (prefers-reduced-motion:reduce){
  .phead__bg img{transition:none}
  .phead__dim .dim__run{stroke-dashoffset:0}
}