/* ==========================================================================
   TIK d.o.o. Valjevo — redizajn
   Apis Development · 2026
   Boje su uzete direktno iz logotipa: #0079C0 / #231F20 / #FFFFFF
   ========================================================================== */

/* ---------- TOKENI ---------- */
:root{
  --blue:#0079C0;
  --blue-d:#005E96;
  --blue-l:#3FA3DE;
  --deep:#00304D;          /* tamna podloga izvedena iz plave, ne crna */
  --deep-2:#00253B;
  --ink:#231F20;           /* crna iz logotipa */
  --paper:#FFFFFF;
  --steel:#EDF1F4;         /* hladno sivo — ton pocinkovane površine */
  --steel-2:#DCE4EA;
  --zinc:#9AA7B0;
  --zinc-d:#6B7A85;

  --f-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --r:2px;
  --r-lg:6px;
  --pad:clamp(20px,5vw,40px);
  --gap:clamp(24px,4vw,56px);
  --sec:clamp(64px,10vw,140px);
  --max:1280px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --fab:56px;
  --fab-bottom:24px;
  --head-h:70px;           /* stvarna visina zaglavlja; 82px od 900px naviše */
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:999;background:var(--blue);color:#fff;padding:10px 16px}
.skip:focus{left:8px;top:8px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* Sidro nikad ne sme da završi ispod fiksnog zaglavlja. */
section[id],main [id]{scroll-margin-top:calc(var(--head-h) + 12px)}

/* ---------- TIPOGRAFIJA ---------- */
.h2{
  font-size:clamp(26px,4.6vw,52px);line-height:1.06;letter-spacing:-.025em;
  font-weight:600;max-width:16ch;
}
.h3{font-size:clamp(19px,2.4vw,26px);line-height:1.2;letter-spacing:-.015em;font-weight:600}
.lead{font-size:clamp(16px,1.7vw,19px);line-height:1.62;max-width:62ch;color:#3a3f44}
.lbl{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;color:var(--blue-d);
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
}
.lbl::before{content:"";width:22px;height:1px;background:var(--blue);flex:none}
/* Tabularne cifre na svakoj mono brojci — da se cifre ne pomeraju dok brojači
   rade i da se kolone u tabelama poravnavaju. */
.draw__labels text,.hero__facts dt,.hero__cap,.mx dd,.dw__spec dd,.loc__m,.card__no,
.step__n,.sheet__i,.boot__num,.ticker__row span,.post time,.foot__addr,.about__badge b,
.cta__list span,.bot__head i{font-variant-numeric:tabular-nums}

.lbl--light{color:var(--blue-l)}
.lbl--light::before{background:var(--blue-l)}
.h2--light{color:#fff}
.lead--light{color:rgba(255,255,255,.72)}

/* ---------- DUGMAD ---------- */
.btn{
  --bh:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--bh);padding:0 24px;border-radius:var(--r);
  font-weight:600;font-size:15px;letter-spacing:-.005em;
  position:relative;overflow:hidden;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--blue);color:#fff}
.btn--solid::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .42s var(--ease);z-index:0;
}
.btn--solid:hover::after{transform:translateY(0)}
.btn--solid > *{position:relative;z-index:1}
.btn--ghost{border:1px solid var(--zinc);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--full{width:100%}

.link{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;
  color:var(--blue-d);padding-bottom:3px;border-bottom:1px solid rgba(0,121,192,.3);
  transition:border-color .3s,color .3s;
}
.link i{width:18px;height:1px;background:currentColor;position:relative;transition:width .3s var(--ease)}
.link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}
.link:hover{border-color:var(--blue)}
.link:hover i{width:28px}

/* ---------- PRELOADER ---------- */
.boot{
  position:fixed;inset:0;z-index:200;background:var(--deep);
  display:grid;place-items:center;transition:opacity .6s var(--ease),visibility .6s;
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{display:grid;justify-items:center;gap:22px}
.boot__mark{width:66px;height:66px}
.boot__slash path{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1s var(--ease) forwards}
.boot__slash path:nth-child(2){animation-delay:.15s}
@keyframes draw{to{stroke-dashoffset:0}}
.boot__meter{width:170px;height:2px;background:rgba(255,255,255,.16);overflow:hidden}
.boot__meter i{display:block;height:100%;width:0;background:var(--blue-l);transition:width .2s linear}
.boot__num{font-family:var(--f-mono);font-size:12px;color:rgba(255,255,255,.55)}

/* ---------- SCROLL BAR / KURSOR ---------- */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none}
.scrollbar i{display:block;height:100%;width:0;background:var(--blue)}
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block;position:fixed;top:0;left:0;width:34px;height:34px;z-index:150;
    border:1px solid var(--blue);border-radius:50%;pointer-events:none;
    transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background-color .25s,opacity .25s;
    mix-blend-mode:normal;opacity:0;
  }
  .cursor.is-on{opacity:1}
  .cursor b{position:absolute;inset:0;margin:auto;width:4px;height:4px;border-radius:50%;background:var(--blue)}
  .cursor.is-lg{width:66px;height:66px;background:rgba(0,121,192,.1)}
  .cursor.is-lg b{opacity:0}
}

/* ---------- HEADER ---------- */
.head{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:transform .45s var(--ease),background-color .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.head.is-solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom-color:var(--steel-2)}
/* Dok je panel otvoren zaglavlje mora biti neprozirno: beo panel ispod providnog
   zaglavlja nad fotografijom izgleda kao da visi u vazduhu. has-panel takođe
   poništava is-light, jer bi beo tekst nad belim panelom nestao. */
.head.has-panel{background:var(--paper);backdrop-filter:none;border-bottom-color:transparent}
.head.has-panel.is-light .brand__txt b,
.head.has-panel.is-light .nav a,
.head.has-panel.is-light .nav__trig{color:var(--ink)}
.head.has-panel.is-light .nav a.is-here,
.head.has-panel.is-light .nav__trig[aria-expanded="true"]{color:var(--blue-d)}
.head.has-panel.is-light .burger i{background:var(--ink)}
.head.has-panel.is-light .brand__txt i{color:var(--zinc-d)}
.head.has-panel.is-light .lang__btn{border-color:var(--steel-2);color:var(--ink)}
.head.has-panel.is-up{transform:none}   /* ne skrivaj zaglavlje ispod otvorenog panela */
.head.is-up{transform:translateY(-100%)}
.head__row{display:flex;align-items:center;gap:14px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{width:34px;height:34px;flex:none}
.brand__mark--lg{width:52px;height:52px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-size:21px;font-weight:700;letter-spacing:.04em}
.brand__txt i{font-family:var(--f-mono);font-size:10px;font-style:normal;color:var(--zinc-d);margin-top:3px}
.head.is-light .brand__txt b,.head.is-light .brand__txt i{color:#fff}
.head.is-light .brand__txt i{color:rgba(255,255,255,.6)}

.nav{display:none;margin-left:auto;gap:clamp(14px,1.9vw,28px)}
.nav a{
  font-size:14.5px;font-weight:500;position:relative;padding:6px 0;color:var(--ink);
  transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .38s var(--ease);
}
.nav a:hover::after,.nav a.is-here::after{transform:scaleX(1);transform-origin:left}
.nav a.is-here{color:var(--blue-d)}
.head.is-light .nav a{color:rgba(255,255,255,.86)}
.head.is-light .nav a.is-here{color:#fff}

/* Okidač padajućeg menija izgleda kao ostale stavke, ali je <button>. */
.nav__trig{
  display:none;align-items:center;gap:6px;padding:6px 0;position:relative;
  font-size:14.5px;font-weight:500;color:var(--ink);font-family:inherit;
  transition:color .3s;
}
.nav__trig::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .38s var(--ease);
}
.nav__trig:hover::after,.nav__trig[aria-expanded="true"]::after,
.nav__trig.is-here::after{transform:scaleX(1);transform-origin:left}
.nav__trig[aria-expanded="true"]{color:var(--blue-d)}
.nav__chev{width:9px;height:6px;flex:none;transition:transform .3s var(--ease)}
.nav__trig[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.head.is-light .nav__trig{color:rgba(255,255,255,.86)}

/* ==========================================================================
   PADAJUĆI PANELI ZAGLAVLJA
   Puna širina, bez senke — ivica i hairline nose razdvajanje, kao i svuda
   drugde na sajtu. Otvara se clip-path-om odozgo naniže; redovi kasne 30ms
   jedan za drugim i podižu se 12px.
   ========================================================================== */
.panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);
  border-top:2px solid var(--blue);
  border-bottom:1px solid var(--steel-2);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .22s var(--ease-io);   /* zatvaranje je brže od otvaranja */
}
.panel.is-open{clip-path:inset(0 0 0 0);transition-duration:.38s}
.panel__in{
  display:grid;gap:clamp(20px,2.6vw,38px);
  grid-template-columns:minmax(0,1fr) minmax(240px,300px);
  padding:26px var(--pad) 30px;align-items:start;
}
.panel__in--ops{grid-template-columns:minmax(0,1fr)}

.panel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--steel-2)}
.panel__it{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;
  background:var(--paper);padding:13px 14px;
  transition:background-color .28s,transform .3s var(--ease);
}
.panel__it:hover,.panel__it:focus-visible{background:var(--steel)}
.panel__it svg{width:26px;height:26px;color:var(--blue);flex:none}
.panel__itTx{min-width:0}
.panel__it b{display:block;font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.panel__it em{
  display:block;margin-top:4px;font-family:var(--f-mono);font-size:11px;line-height:1.4;font-style:normal;
  color:var(--zinc-d);font-variant-numeric:tabular-nums;
}

/* Četiri operacije u jednom redu, sa brojem koraka u monou. */
.panel__ops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--steel-2)}
.panel__op{background:var(--paper);padding:16px 18px;transition:background-color .28s}
.panel__op:hover,.panel__op:focus-visible{background:var(--steel)}
.panel__op i{
  display:block;font-family:var(--f-mono);font-size:11px;font-style:normal;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.panel__op b{display:block;margin-top:7px;font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.panel__op span{display:block;margin-top:5px;font-family:var(--f-mono);font-size:11.5px;color:var(--zinc-d)}

/* Redovi ulaze u kaskadi. --i postavlja main.js: red za program, kolona za operacije. */
.panel__it,.panel__op{opacity:0;transform:translateY(12px)}
.panel.is-open .panel__it,.panel.is-open .panel__op{
  opacity:1;transform:none;
  transition:opacity .34s var(--ease) calc(var(--i,0) * 30ms),
             transform .34s var(--ease) calc(var(--i,0) * 30ms),
             background-color .28s;
}

.panel__promo{display:grid;gap:12px;align-content:start}
.panel__promoImg{
  position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10;
  border:1px solid var(--steel-2);
}
/* Override MORA da cilja .ovl, ne omotač: .ovl i .ovl--banner postavljaju
   --ovl-* na samom elementu, a vrednost postavljena na elementu pobeđuje
   nasleđenu od roditelja. Isto važi za svaki baner na unutrašnjim stranicama. */
.panel__promoImg .ovl{
  --ovl-fade-to:var(--paper);   /* prelaz vodi u belu podlogu panela, ne u --ink */
  --ovl-fade-h:56px;
  /* Skrim je u herou jak jer nosi tekst; ovde preko slike ne stoji ništa, pa
     nasleđene vrednosti samo zamute fotografiju. Duotone ostaje — on nosi
     prepoznatljiv ton — a zatamnjenje se povlači. */
  --ovl-scrim-1:.42; --ovl-scrim-2:.30; --ovl-scrim-3:.16; --ovl-scrim-4:.28;
  --ovl-vignette:.30;
}
.panel__promoImg img{width:100%;height:100%;object-fit:cover;object-position:58% 52%}
.panel__pitch{font-size:13.5px;line-height:1.5;color:#3a3f44}
.panel__promo .btn{--bh:40px;font-size:13.5px;justify-content:center}
.panel__all{
  font-size:13px;font-weight:600;color:var(--blue-d);display:inline-flex;gap:7px;align-items:center;
}
.panel__all::after{content:"↗";font-size:11px}

.head__tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang{position:relative}
.lang__btn{
  display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;
  font-family:var(--f-mono);font-size:12px;border:1px solid var(--steel-2);border-radius:var(--r);
  transition:border-color .3s,color .3s;
}
.lang__btn svg{width:9px;height:6px;transition:transform .3s}
.lang.is-open .lang__btn svg{transform:rotate(180deg)}
.lang__btn:hover{border-color:var(--blue);color:var(--blue-d)}
.head.is-light .lang__btn{border-color:rgba(255,255,255,.24);color:#fff}
.lang__menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:132px;background:#fff;
  border:1px solid var(--steel-2);border-radius:var(--r);padding:5px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s,transform .26s var(--ease),visibility .26s;
  box-shadow:0 18px 40px -22px rgba(0,48,77,.5);
}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang__menu button{display:block;width:100%;text-align:left;padding:8px 11px;font-size:14px;border-radius:var(--r)}
.lang__menu button:hover,.lang__menu button.is-on{background:var(--steel);color:var(--blue-d)}
.head__cta{display:none;--bh:38px;padding:0 16px;font-size:13.5px}

.burger{width:40px;height:40px;display:grid;align-content:center;gap:6px;justify-items:end}
.burger i{display:block;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),width .3s}
.burger i:first-child{width:22px}
.burger i:last-child{width:14px}
.head.is-light .burger i{background:#fff}
.burger[aria-expanded="true"] i{background:#fff;width:22px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- MOBILNI MENI ---------- */
.sheet{
  position:fixed;inset:0;z-index:79;background:var(--deep);
  clip-path:inset(0 0 100% 0);transition:clip-path .66s var(--ease-io);
  display:flex;align-items:stretch;min-height:100svh;
}
.sheet.is-open{clip-path:inset(0 0 0 0)}
/* Lista počinje odmah ispod zaglavlja (nema mrtvog prostora), kontakt red je
   zakačen za dno. Sadržaj se skroluje kad se otvori harmonika. */
.sheet__in{
  width:100%;display:grid;grid-template-rows:auto 1fr auto;align-content:start;gap:28px;
  padding:calc(var(--head-h) + 28px) var(--pad) 40px;
  overflow-y:auto;overscroll-behavior:contain;
}
.sheet__nav{display:grid;gap:2px;align-content:start}
/* Selektori su na DIREKTNU decu: dve stavke su sada .acc omotači, a ugnežđene
   veze unutar harmonike ne smeju da naslede 40px display tipografiju. */
.sheet__nav > a,.sheet__nav .acc__btn{
  display:flex;align-items:baseline;gap:16px;padding:11px 0;width:100%;text-align:left;
  font-size:clamp(26px,7.5vw,40px);line-height:1.1;font-weight:600;letter-spacing:-.03em;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.sheet__nav > a,.sheet__nav > .acc{opacity:0;transform:translateY(22px)}
.sheet.is-open .sheet__nav > a,
.sheet.is-open .sheet__nav > .acc{animation:sheetIn .55s var(--ease) forwards}
.sheet.is-open .sheet__nav > :nth-child(1){animation-delay:.16s}
.sheet.is-open .sheet__nav > :nth-child(2){animation-delay:.21s}
.sheet.is-open .sheet__nav > :nth-child(3){animation-delay:.26s}
.sheet.is-open .sheet__nav > :nth-child(4){animation-delay:.31s}
.sheet.is-open .sheet__nav > :nth-child(5){animation-delay:.36s}
.sheet.is-open .sheet__nav > :nth-child(6){animation-delay:.41s}
.sheet.is-open .sheet__nav > :nth-child(7){animation-delay:.46s}
@keyframes sheetIn{to{opacity:1;transform:none}}

/* ---------- HARMONIKA U MOBILNOM MENIJU ---------- */
.acc__btn{position:relative;padding-right:34px !important}
.acc__chev{
  position:absolute;right:0;top:50%;width:14px;height:9px;margin-top:-4px;
  color:var(--blue-l);transition:transform .32s var(--ease);
}
.acc__btn[aria-expanded="true"] .acc__chev{transform:rotate(180deg)}
/* Visina se animira sa izmerenog scrollHeight-a; auto se ne da animirati. */
.acc__panel{overflow:hidden;height:0;transition:height .32s var(--ease-io)}
.acc__in{display:grid;gap:1px;padding:10px 0 16px 38px}
.acc__in a{
  display:flex;align-items:baseline;gap:12px;padding:9px 0;
  font-size:16px;line-height:1.3;color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.acc__in a:hover,.acc__in a:focus-visible{color:#fff}
.acc__in a b{font-weight:500}
.acc__in a .acc__no{font-family:var(--f-mono);font-size:11px;color:var(--blue-l);flex:none;min-width:20px}
.acc__in a.acc__all{font-weight:600;color:#fff}
.sheet__i{font-family:var(--f-mono);font-size:11px;color:var(--blue-l)}
.sheet__foot{
  display:flex;flex-wrap:wrap;gap:10px 26px;color:rgba(255,255,255,.7);
  font-family:var(--f-mono);font-size:13px;
  margin-top:auto;padding-top:32px;   /* gurnuto na dno svoje trake, sa razmakom iznad */
}
.sheet__foot a:hover{color:#fff}

/* ==========================================================================
   HERO — slajder od tri fotografije + šest slojeva preklopa
   Redosled slojeva (od fotografije ka sadržaju):
   0 slike · 1 scrim · 2 vinjeta · 3 mreža · 4 duotone · 5 tekstura · 6 donji prelaz
   ========================================================================== */
.hero{
  position:relative;background:var(--deep);color:#fff;overflow:hidden;
  isolation:isolate;display:flex;align-items:center;
  /* Razmak je srazmeran visini ekrana, ne fiksan — fiksnih 294px je 38% niskog
     ekrana od 768px, a samo 27% ekrana od 1080px. Donji razmak nikad ne pada
     ispod visine asistenta, da indikatori uvek imaju mesto. */
  padding-top:clamp(84px, 11vh, 112px);
  padding-bottom:max(calc(var(--fab-bottom) + var(--fab) + 56px), 11vh);
  min-height:100vh;                            /* 1. baza */
  min-height:calc(var(--app-vh, 1vh) * 100);   /* 2. JS fallback, stari iOS Safari */
}
@supports (height:100svh){
  .hero{min-height:100svh}                     /* 3. mali viewport, ignoriše URL traku */
}

/* ---- slajdovi ---- */
.hero__slides{position:absolute;inset:0;z-index:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.2s var(--ease-io);
}
.hero__slide.is-on{opacity:1;z-index:2}
.hero__slide.is-prev{z-index:1}
.hero__slide picture{display:block;position:absolute;inset:0}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}

/* svaki motiv ima svoj kadar da subjekat ostane u slici na svakom odnosu strana */
.hero__slide[data-slide="0"] img{object-position:42% 45%}  /* logotip na fasadi */
.hero__slide[data-slide="1"] img{object-position:58% 52%}  /* lančani transporter */
.hero__slide[data-slide="2"] img{object-position:54% 52%}  /* usijana pripremka */

/* Ken Burns — 7,2 s (6 s prikaz + 1,2 s prelaz), smer drifta se smenjuje po slajdu */
.hero__slide.is-on img{animation-duration:7.2s;animation-timing-function:linear;animation-fill-mode:both}
.hero__slide.is-prev img{transform:scale(1)}   /* drži krajnje stanje dok slajd nestaje */
.hero__slide[data-slide="0"].is-on img{animation-name:kbA}
.hero__slide[data-slide="1"].is-on img{animation-name:kbB}
.hero__slide[data-slide="2"].is-on img{animation-name:kbC}
@keyframes kbA{from{transform:scale(1.08) translateX(-1.5%)}to{transform:scale(1) translateX(0)}}
@keyframes kbB{from{transform:scale(1.08) translateY(1.5%)} to{transform:scale(1) translateY(0)}}
@keyframes kbC{from{transform:scale(1.08) translateX(1.5%)} to{transform:scale(1) translateX(0)}}

/* ==========================================================================
   .ovl — preklop nad fotografijom, jedna komponenta za hero i za banere
   unutrašnjih stranica. Varijante se razlikuju SAMO po vrednostima custom
   propertija; gradijenti se nikad ne dupliraju.

   .ovl NEMA z-index namerno: z-index bi napravio novi stacking context i
   duotone sloj (mix-blend-mode) više ne bi video fotografiju ispod sebe.
   Slojevi zato nose z-index pojedinačno, unutar .hero koji izoluje.
   ========================================================================== */
.ovl{
  position:absolute;inset:0;pointer-events:none;
  --ovl-scrim-1:.96;      /* levi rub — ispod naslova, najjači */
  --ovl-scrim-2:.88;
  --ovl-scrim-3:.55;
  --ovl-scrim-4:.78;      /* desni rub — vraćeno tamnije da crtež čita */
  --ovl-scrim-ang:100deg;
  --ovl-vignette:.55;
  --ovl-duotone:.45;
  --ovl-grid:.06;
  --ovl-scan:.03;
  --ovl-fade-h:140px;
  --ovl-fade-to:var(--ink);   /* boja sekcije koja sledi — po instanci */
}
.ovl > i{display:block;position:absolute;inset:0}

/* sloj 1 usmereni scrim + sloj 2 vinjeta */
.ovl__scrim{z-index:1}
.ovl__scrim::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(var(--ovl-scrim-ang),
    rgba(0,48,77,var(--ovl-scrim-1)) 0%,
    rgba(0,48,77,var(--ovl-scrim-2)) 38%,
    rgba(0,48,77,var(--ovl-scrim-3)) 68%,
    rgba(0,37,59,var(--ovl-scrim-4)) 100%);
}
.ovl__scrim::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 60% 40%,transparent 30%,rgba(0,37,59,var(--ovl-vignette)) 100%);
}
/* sloj 3 plava mreža preko fotografije */
.ovl__grid{
  z-index:2;opacity:var(--ovl-grid);
  background-image:linear-gradient(#fff 1px,transparent 1px),
                   linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(115% 85% at 68% 26%,#000 18%,transparent 72%);
  -webkit-mask-image:radial-gradient(115% 85% at 68% 26%,#000 18%,transparent 72%);
}
/* sloj 4 duotone — sve fotografije u istoj brend-porodici */
.ovl__duo{z-index:3;display:none}
@supports (mix-blend-mode:color){
  .ovl__duo{display:block;background:var(--deep);mix-blend-mode:color;opacity:var(--ovl-duotone)}
}
/* sloj 5 mikro-tekstura (statična) + sloj 6 donji prelaz u sledeću sekciju */
.ovl__tex{z-index:4}
.ovl__tex::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,var(--ovl-scan)) 0 1px,transparent 1px 2px);
}
.ovl__tex::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--ovl-fade-h);
  background:linear-gradient(180deg,transparent,var(--ovl-fade-to));
}

/* varijanta: baner unutrašnje stranice — nosi manje teksta, pa je duotone
   nešto lakši, prelaz kraći, a scanline se ne koristi */
.ovl--banner{
  --ovl-duotone:.38;
  --ovl-fade-h:96px;
  --ovl-scan:0;
  --ovl-grid:.05;
}

/* Kadar 1 (tik-1) je najsvetliji od tri — bela fasada pod difuznim nebom — i sav
   sitan tekst je na njemu merio najlošije. Skrim se zato pojačava SAMO nad tim
   slajdom. `data-slide` na .hero postavlja goSlide() u main.js.

   Napomena uz meru: skrim je ovde slabiji alat nego što izgleda. Tekst je
   poluproviran beo, pa tamnjenje podloge tamni i same glifove; model pokazuje
   da bi i potpuno neproziran skrim (1/1/1) zadržao oznaku ispod fakta na 5,01:1.
   Glavni pomak zato nosi neprozirnost teksta (vidi .hero__kicker / .hero__facts dd),
   a ovaj override samo dodaje rezervu na najgorem kadru. */
.hero[data-slide="0"] .ovl--hero{
  --ovl-scrim-1:.98;
  --ovl-scrim-2:.93;
  --ovl-scrim-3:.60;
}

.hero__glow{
  position:absolute;z-index:5;width:560px;height:560px;left:60%;top:20%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.6;
  background:radial-gradient(circle,rgba(0,121,192,.42),transparent 62%);
  filter:blur(20px);transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
.hero__wrap{position:relative;z-index:6;display:grid;gap:clamp(34px,6vw,56px)}

/* ---- indikatori slajdova ---- */
.hero__dots{
  position:absolute;z-index:7;left:0;right:0;
  bottom:calc(var(--fab-bottom) + var(--fab) + 22px);
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:flex;gap:10px;pointer-events:none;
}
.hero__dot{
  position:relative;width:52px;height:20px;flex:none;pointer-events:auto;
  display:flex;align-items:center;
}
.hero__dot::before{content:"";display:block;width:100%;height:2px;background:var(--zinc);opacity:.45}
.hero__dot i{
  position:absolute;left:0;top:50%;margin-top:-1px;width:100%;height:2px;
  background:var(--blue-l);transform:scaleX(0);transform-origin:left;
}
.hero__dot.is-on i{animation:dotFill 6s linear both}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__dot:hover::before{opacity:.8}
.hero__dot:focus-visible{outline-color:var(--blue-l);outline-offset:6px}

/* Ispod 700px indikatori se vraćaju u tok, u kolonu sadržaja iznad reda sa
   brojkama, da ne dele donju ivicu sa mehurićem asistenta. Markup je već tamo —
   na širim ekranima ih apsolutno pozicioniranje vadi iz toka. */
@media (max-width:699px){
  .hero__dots{position:static;width:auto;max-width:none;margin:0 0 20px;padding:0}
  .hero{padding-bottom:max(calc(var(--fab-bottom) + var(--fab) + 20px), 11vh)}
}
/* Neprozirnost sitnog teksta nad fotografijom: .62 -> .70. Podignuto merenjem,
   ne po osećaju — vidi belešku uz .hero[data-slide="0"] .ovl--hero. Hijerarhija
   ostaje: naslov je i dalje pun beo, ovo je i dalje vidno tiše. */
.hero__kicker{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;color:rgba(255,255,255,.70)}
.tick{width:7px;height:7px;background:var(--blue-l);border-radius:50%;position:relative;flex:none}
.tick::after{content:"";position:absolute;inset:-5px;border:1px solid var(--blue-l);border-radius:50%;opacity:.5;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.7);opacity:0}}

/* Naslov je jedini element koji stvarno diktira visinu heroa: nemački prelomi
   u 4 reda tamo gde srpski staje u 3. Zato skalira i po visini ekrana (vh),
   ne samo po širini — inače pun naslov ne stane u 100svh na niskim ekranima. */
.hero__h1{
  margin:18px 0 20px;font-size:clamp(30px,min(7.2vw,7.6vh),72px);line-height:1.02;
  letter-spacing:-.035em;font-weight:600;max-width:15ch;
}
.hero__h1 .w{display:inline-block;overflow:hidden;vertical-align:top}
.hero__h1 .w > span{display:inline-block;transform:translateY(105%);animation:wordUp .82s var(--ease) forwards}
@keyframes wordUp{to{transform:none}}
.hero__lead{color:rgba(255,255,255,.78);font-size:clamp(15.5px,1.8vw,18px);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 40px}
.hero .btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.hero .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.07)}

.hero__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.hero__facts dt{font-family:var(--f-mono);font-size:clamp(21px,3.4vw,32px);font-weight:500;letter-spacing:-.02em}
.hero__facts dd{margin:5px 0 0;font-size:12.5px;color:rgba(255,255,255,.64);line-height:1.35}

/* Tehnički crtež je desktop element — ispod 900px hero nosi fotografija,
   pa sadržaj staje u 100svh bez gušenja. */
.hero__draw{display:none;margin:0;position:relative}
.draw{width:100%;height:auto;max-width:440px;margin-inline:auto}
.draw__body{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s}
.draw.is-in .draw__body{opacity:1;transform:none}
.draw__dim path,.draw__call path{stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.1s var(--ease)}
.draw.is-in .draw__dim path,.draw.is-in .draw__call path{stroke-dashoffset:0}
.draw.is-in .draw__dim path{transition-delay:.15s}
.draw.is-in .draw__call path{transition-delay:.65s}
.draw__labels text{fill:rgba(255,255,255,.8);opacity:0;transition:opacity .5s ease .95s}
.draw.is-in .draw__labels text{opacity:1}
.draw__thread path{stroke:#22333f}
/* Legenda ide ispod crteža sa 24px razmaka. Ispod 1200px crtež se skuplja i
   legenda ponovo naleti na "DIN 6914" izvod, pa se tu uopšte ne prikazuje. */
.hero__cap{
  display:none;margin-top:24px;text-align:center;
  font-family:var(--f-mono);font-size:11.5px;color:rgba(255,255,255,.45);
}
@media (min-width:1200px){ .hero__cap{display:block} }

.hero__scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:22px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:12px;display:none}
.hero__scroll i{position:absolute;left:50%;top:7px;width:2px;height:6px;background:#fff;border-radius:2px;transform:translateX(-50%);animation:scrolly 1.9s var(--ease) infinite}
@keyframes scrolly{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- TRAKA STANDARDA ---------- */
.ticker{background:var(--ink);color:#fff;overflow:hidden;padding:13px 0;border-block:1px solid rgba(255,255,255,.08)}
.ticker__row{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.ticker__row span{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.68);
  padding:0 26px;display:flex;align-items:center;gap:26px;white-space:nowrap;
}
.ticker__row span::after{content:"";width:4px;height:4px;background:var(--blue);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker:hover .ticker__row{animation-play-state:paused}

/* ---------- SEKCIJE ---------- */
.sec{padding:var(--sec) 0}
.sec--about{background:var(--paper)}
.sec--prog{background:var(--steel)}
.sec--tech{background:var(--paper)}
.sec--qa{background:var(--steel)}
.sec--loc{background:var(--paper)}
.sec--news{background:var(--steel)}
.sec--cta{background:var(--deep);color:#fff}

.sechead{display:grid;gap:18px;margin-bottom:clamp(30px,5vw,52px)}
.sechead__note{font-size:14.5px;color:var(--zinc-d);max-width:48ch}

/* reveal */
.reveal,[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in,[data-rv].is-in{opacity:1;transform:none}

/* ---------- O FIRMI ---------- */
.about{display:grid;gap:clamp(28px,4vw,48px)}
.about__body{display:grid;gap:18px}
.about__body p{color:#3a3f44;max-width:60ch}
.about__list{display:grid;gap:11px;margin-top:6px}
.about__list li{position:relative;padding-left:26px;font-size:15px;color:#3a3f44}
.about__list li::before{
  content:"";position:absolute;left:0;top:9px;width:12px;height:12px;
  border:1px solid var(--blue);transform:rotate(45deg);
}
.about__media{position:relative;border-radius:var(--r)}
.about__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);filter:saturate(.92) contrast(1.04)}
.about__badge{
  position:absolute;left:0;bottom:0;background:var(--blue);color:#fff;
  padding:14px 18px;display:grid;gap:2px;
}
.about__badge b{font-family:var(--f-mono);font-size:26px;line-height:1;font-weight:500}
.about__badge span{font-size:11px;opacity:.82}

/* ---------- PROGRAM ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{
  height:38px;padding:0 16px;border:1px solid var(--steel-2);background:#fff;border-radius:100px;
  font-size:13.5px;font-weight:500;transition:.3s var(--ease);
}
.chip:hover{border-color:var(--blue);color:var(--blue-d)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.prog{display:grid;gap:1px;background:var(--steel-2);border:1px solid var(--steel-2)}
.card{
  background:#fff;padding:24px 22px 22px;position:relative;overflow:hidden;
  display:grid;gap:12px;align-content:start;cursor:pointer;text-align:left;width:100%;
  transition:background-color .45s var(--ease);
}
.card::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.card:hover::before{transform:scaleX(1)}
.card:hover{background:#fbfcfd}
.card.is-hide{display:none}
.card__ico{width:44px;height:44px;color:var(--blue);transition:transform .5s var(--ease)}
.card:hover .card__ico{transform:translateY(-3px) rotate(-6deg)}
.card__no{position:absolute;right:18px;top:18px;font-family:var(--f-mono);font-size:11px;color:var(--zinc)}
.card__t{font-size:17px;font-weight:600;line-height:1.28;letter-spacing:-.012em;max-width:26ch}
.card__s{font-family:var(--f-mono);font-size:11.5px;color:var(--zinc-d)}
.card__more{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--blue-d);
  opacity:0;transform:translateY(6px);transition:.4s var(--ease);
}
.card:hover .card__more,.card:focus-visible .card__more{opacity:1;transform:none}

/* ---------- DRAWER ---------- */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer__bg{position:absolute;inset:0;background:rgba(0,37,59,.5);opacity:0;transition:opacity .45s var(--ease);backdrop-filter:blur(3px)}
.drawer.is-open .drawer__bg{opacity:1}
.drawer__panel{
  position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);background:#fff;
  transform:translateX(100%);transition:transform .58s var(--ease-io);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open .drawer__panel{transform:none}
.drawer__x{
  position:sticky;top:0;margin-left:auto;display:grid;place-items:center;
  width:52px;height:52px;background:#fff;color:var(--ink);z-index:2;
}
.drawer__x svg{width:19px;height:19px;transition:transform .35s}
.drawer__x:hover svg{transform:rotate(90deg)}
.drawer__in{padding:0 clamp(22px,5vw,40px) 48px}
.dw__ico{width:60px;height:60px;color:var(--blue);margin-bottom:18px}
.dw__t{font-size:clamp(23px,3.6vw,32px);line-height:1.12;letter-spacing:-.025em;font-weight:600;margin-bottom:12px}
.dw__d{color:#3a3f44;margin-bottom:26px}
.dw__spec{border-top:1px solid var(--steel-2)}
.dw__spec div{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--steel-2)}
.dw__spec dt{font-size:13px;color:var(--zinc-d)}
.dw__spec dd{margin:0;font-family:var(--f-mono);font-size:13px;line-height:1.5}
.dw__use{margin:26px 0 28px}
.dw__use h4{margin:0 0 10px;font-size:14px;font-weight:600}
.dw__use ul{display:flex;flex-wrap:wrap;gap:7px}
.dw__use li{font-family:var(--f-mono);font-size:11.5px;border:1px solid var(--steel-2);padding:5px 10px;color:var(--zinc-d)}

/* ---------- KORACI ---------- */
.steps{display:grid;gap:1px;background:var(--steel-2);border:1px solid var(--steel-2);margin-bottom:clamp(46px,7vw,84px)}
.step{background:#fff;padding:26px 22px;display:grid;gap:12px;align-content:start;position:relative;overflow:hidden}
.step__n{font-family:var(--f-mono);font-size:12px;color:var(--blue)}
.step__t{font-size:19px;font-weight:600;letter-spacing:-.015em}
.step__d{font-size:14.5px;color:#3a3f44;line-height:1.58}
.step__k{font-family:var(--f-mono);font-size:11.5px;color:var(--zinc-d);border-top:1px dashed var(--steel-2);padding-top:11px;margin-top:4px}
.step::after{
  content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--blue);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease);
}
.step.is-in::after{transform:scaleY(1)}

.matrix{border:1px solid var(--steel-2);padding:clamp(22px,3.6vw,34px);background:var(--steel)}
.matrix .h3{margin-bottom:20px}
.matrix__grid{display:grid;gap:1px;background:var(--steel-2);border:1px solid var(--steel-2)}
.mx{background:#fff;padding:18px}
.mx dt{font-size:12.5px;color:var(--zinc-d);margin-bottom:7px}
.mx dd{margin:0;font-family:var(--f-mono);font-size:15px;letter-spacing:-.01em;line-height:1.45}
.matrix__note{margin-top:16px;font-size:13px;color:var(--zinc-d)}

/* ---------- KVALITET ---------- */
.qa{display:grid;gap:clamp(30px,5vw,54px)}
.qa__cards{display:grid;gap:1px;background:var(--steel-2);border:1px solid var(--steel-2)}
.cert{background:#fff;padding:26px 22px;display:grid;gap:12px;align-content:start}
.cert img{width:74px;height:74px;object-fit:contain;filter:grayscale(1);opacity:.9;transition:filter .4s,opacity .4s}
.cert:hover img{filter:none;opacity:1}
.cert__mark{width:56px;height:56px;color:var(--blue)}
.cert h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.cert p{font-size:14px;color:#3a3f44}
.partners{border-top:1px solid var(--steel-2);padding-top:26px}
.partners__row{display:grid;gap:20px}
.partners__row div{display:grid;gap:5px}
.partners__row b{font-size:19px;letter-spacing:.02em}
.partners__row span{font-size:13.5px;color:var(--zinc-d)}

/* ---------- LOKACIJE ---------- */
.locs{display:grid;gap:1px;background:var(--steel-2);border:1px solid var(--steel-2)}
.loc{background:#fff;overflow:hidden;display:grid}
.loc__img{overflow:hidden;aspect-ratio:16/10}
.loc__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.loc:hover .loc__img img{transform:scale(1.06)}
.loc__in{padding:22px;display:grid;gap:9px;align-content:start}
.loc__c{font-family:var(--f-mono);font-size:11.5px;color:var(--blue)}
.loc__t{font-size:18px;font-weight:600;letter-spacing:-.015em}
.loc__a{font-size:14px;color:#3a3f44}
.loc__m{font-family:var(--f-mono);font-size:12px;color:var(--zinc-d)}
.loc__l{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--blue-d);display:inline-flex;gap:7px;align-items:center}
.loc__l::after{content:"↗";font-size:12px}

/* ---------- VESTI ---------- */
.news{display:grid;gap:26px}
.post{display:grid;gap:12px;align-content:start}
.post__img{overflow:hidden;aspect-ratio:16/10;background:var(--steel-2)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.post:hover .post__img img{transform:scale(1.05)}
.post time{font-family:var(--f-mono);font-size:11.5px;color:var(--blue-d)}
.post h3{font-size:18px;font-weight:600;line-height:1.28;letter-spacing:-.015em}
.post p{font-size:14.5px;color:#3a3f44}

/* ---------- KONTAKT ---------- */
.cta{display:grid;gap:clamp(34px,5vw,60px)}
.cta__list{display:grid;gap:20px;margin-top:32px;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
.cta__list li{display:grid;gap:3px}
.cta__list span{font-family:var(--f-mono);font-size:11.5px;color:var(--blue-l)}
.cta__list a{font-size:19px;font-weight:600;letter-spacing:-.015em;width:max-content;border-bottom:1px solid transparent;transition:border-color .3s}
.cta__list a:hover{border-bottom-color:#fff}
.cta__list em{font-style:normal;font-size:13.5px;color:rgba(255,255,255,.55)}

.form{display:grid;gap:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:clamp(22px,4vw,32px)}
.f{display:grid;gap:7px}
.f label{font-family:var(--f-mono);font-size:11.5px;color:rgba(255,255,255,.62)}
.f input,.f select,.f textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.24);
  padding:9px 0;color:#fff;font-size:15.5px;border-radius:0;transition:border-color .3s;
}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);background-position:calc(100% - 12px) 18px,calc(100% - 7px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.f select option{background:var(--deep);color:#fff}
.f textarea{resize:vertical;min-height:96px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--blue-l)}
.f input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}
.err{color:#FF9B8A;font-size:12px;min-height:0}
.err:empty{display:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:rgba(255,255,255,.7);cursor:pointer}
.check input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--blue)}
.form__ok{background:rgba(0,121,192,.18);border:1px solid var(--blue-l);padding:12px 14px;font-size:13.5px}

/* fallback kad slika ne stigne sa servera */
.no-img{background:linear-gradient(135deg,var(--steel-2),var(--steel));position:relative}
.no-img::after{content:"TIK";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;color:var(--zinc)}

/* ---------- FOOTER ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.68);padding:clamp(46px,6vw,72px) 0 26px;font-size:14px}
.foot__top{display:grid;gap:34px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot__brand{display:grid;gap:14px;max-width:38ch}
.foot__col{display:grid;gap:9px;align-content:start}
.foot__col h3{font-family:var(--f-mono);font-size:11.5px;color:#fff;font-weight:500;margin-bottom:5px}
.foot__col a,#footProg a{display:block;color:rgba(255,255,255,.68);transition:color .3s;font-size:14px;padding:1px 0}
.foot__col a:hover,#footProg a:hover{color:var(--blue-l)}
.foot__addr{font-family:var(--f-mono);font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.5);margin-top:6px}
.foot__bot{display:grid;gap:10px;padding-top:22px;font-size:12.5px;color:rgba(255,255,255,.45)}
.foot__legal{display:flex;flex-wrap:wrap;gap:16px}
.foot__legal a:hover{color:#fff}
.foot__by a{color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.25)}
.foot__by a:hover{color:#fff}

/* ==========================================================================
   UNUTRAŠNJE STRANICE
   Baner, mrvice, dvokolonski uvod, stranica programa, traka operacija.
   Ništa novo vizuelno: iste boje, ista hairline mreža, isti uglovni okviri i
   ista tipografska skala kao na početnoj. Stranica sa odsečenim zaglavljem
   mora da se prepozna kao isti sajt.
   ========================================================================== */

/* ---------- BANER ---------- */
.ban{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--deep);color:#fff;display:flex;align-items:flex-end;
  min-height:340px;height:44svh;
  padding-top:calc(var(--head-h) + 24px);
  padding-bottom:clamp(28px,4.4vw,48px);
}
@supports not (height:44svh){ .ban{height:44vh} }
/* Sloj se pomera paralaksom, pa mora biti viši od okvira — inače se pri
   pomeraju vidi ivica. 12% gore i dole pokriva pomeraj od 0,10. */
.ban__media{position:absolute;left:0;right:0;top:-12%;height:124%;z-index:0;will-change:transform}
.ban__media img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.ban__in{position:relative;z-index:6;width:100%}
.ban__h1{
  margin:14px 0 14px;font-size:clamp(27px,4.4vw,50px);line-height:1.06;
  letter-spacing:-.03em;font-weight:600;max-width:20ch;
}
.ban__lead{color:rgba(255,255,255,.80);font-size:clamp(15px,1.6vw,18px);line-height:1.55;max-width:62ch}
.ban__facts{display:flex;flex-wrap:wrap;gap:10px 34px;margin:22px 0 0}
.ban__facts dt{
  font-family:var(--f-mono);font-size:clamp(17px,2.1vw,24px);font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.ban__facts dd{margin:3px 0 0;font-size:12px;color:rgba(255,255,255,.66);line-height:1.35}

/* ---------- MRVICE ---------- */
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.crumb li{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px}
.crumb li + li::before{content:"/";color:rgba(255,255,255,.34)}
.crumb a{color:rgba(255,255,255,.70);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.crumb a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.crumb [aria-current="page"]{color:var(--blue-l)}

/* ---------- DVOKOLONSKI UVOD (tekst + filteri) ---------- */
.introRow{display:grid;gap:clamp(22px,3.2vw,44px);margin-bottom:clamp(28px,4.4vw,48px)}
.introRow__side{align-self:end}
.introRow .filters{margin-bottom:0}

/* ---------- SEKCIJE UNUTRAŠNJIH STRANICA ---------- */
.sec--mx{background:var(--steel)}
.sec--pd{background:var(--paper)}
.sec--pdAlt{background:var(--steel)}
.sec--ctaSlim{padding:clamp(52px,7vw,92px) 0}
.ctaSlim{display:grid;gap:clamp(20px,3vw,40px);align-items:center}
/* Bez ovog razmaka lead se lepi za naslov — .h2 nema donju marginu, a na
   početnoj razmak dolazi od .cta__copy mreže koje ovde nema. */
.ctaSlim > div{display:grid;gap:14px}
.ctaSlim .h2{max-width:22ch}
.btn--lg{--bh:52px;padding:0 26px;font-size:15px;justify-self:start}

/* ---------- STRANICA PROGRAMA ---------- */
.pdGrid{display:grid;gap:clamp(26px,4vw,56px);align-items:start}
.pdCopy p{font-size:clamp(15.5px,1.6vw,17px);line-height:1.68;color:#3a3f44;margin:0 0 16px;max-width:64ch}
.pdCopy p:last-child{margin-bottom:0}

/* Tabela podataka — isti tretman kao fioka na početnoj, ne novi jezik. */
.pdSpec{border:1px solid var(--steel-2);background:var(--paper)}
.pdSpec h2{
  margin:0;padding:15px 18px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--zinc-d);border-bottom:1px solid var(--steel-2);
}
.pdSpec dl{margin:0}
.pdSpec dl > div{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--steel-2);
}
.pdSpec dl > div:last-child{border-bottom:0}
.pdSpec dt{font-size:13px;color:var(--zinc-d)}
.pdSpec dd{
  margin:0;font-family:var(--f-mono);font-size:13.5px;line-height:1.45;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}

/* ---------- TEHNIČKI CRTEŽ ---------- */
.pdFig{display:none}          /* uključuje se od 900px naviše */
.pdFig svg{width:100%;height:auto;display:block}
.pdFig__ico{stroke:var(--zinc-d);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.pdFig__dim text,.pdFig__call text{
  font-family:var(--f-mono);font-size:13px;fill:var(--zinc-d);
  font-variant-numeric:tabular-nums;
}
.pdFig__note{margin-top:14px;font-family:var(--f-mono);font-size:11.5px;color:var(--zinc)}

/* ---------- STANDARDI ---------- */
.stds{display:grid;gap:1px;background:var(--steel-2);border:1px solid var(--steel-2)}
.std{background:var(--paper);padding:clamp(18px,2.4vw,26px);display:grid;gap:8px}
.std b{
  font-family:var(--f-mono);font-size:13px;color:var(--blue-d);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.std p{margin:0;font-size:14.5px;line-height:1.6;color:#3a3f44}
.stdNote{
  margin-top:20px;padding:16px 18px;border-left:2px solid var(--blue);
  background:var(--steel);font-size:14px;line-height:1.6;color:#3a3f44;
}

/* ---------- PRIMENA (oznake) ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tags li{
  font-family:var(--f-mono);font-size:12px;padding:7px 12px;
  border:1px solid var(--steel-2);background:var(--paper);color:var(--zinc-d);
}

/* ---------- TRAKA OPERACIJA ---------- */
.route{display:grid;gap:1px;background:var(--steel-2);border:1px solid var(--steel-2)}
.route__it{
  background:var(--paper);padding:clamp(18px,2.4vw,26px);display:grid;gap:7px;align-content:start;
  position:relative;transition:background-color .3s;
}
.route__it::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.route__it:hover::before,.route__it:focus-visible::before{transform:scaleX(1)}
.route__it:hover{background:#fbfcfd}
.route__it i{
  font-family:var(--f-mono);font-size:11px;font-style:normal;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.route__it b{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.route__it span{font-family:var(--f-mono);font-size:12px;color:var(--zinc-d)}
.route__it em{
  margin-top:4px;font-style:normal;font-size:12.5px;font-weight:600;color:var(--blue-d);
  display:inline-flex;gap:6px;align-items:center;opacity:0;transform:translateX(-4px);
  transition:opacity .3s,transform .3s var(--ease);
}
.route__it em::after{content:"→"}
.route__it:hover em,.route__it:focus-visible em{opacity:1;transform:none}

/* ==========================================================================
   AI ASISTENT (dole levo) + NAZAD NA VRH (dole desno) — ista linija
   ========================================================================== */
.bot{position:fixed;left:var(--pad);bottom:var(--fab-bottom);z-index:110}
/* Asistent i „nazad na vrh” su iznad lista (z-index 110 vs 79) pa bi se preklopili
   sa kontakt redom otvorenog menija. Dok je meni otvoren, sklanjaju se. */
.sheet.is-open ~ .bot,
.sheet.is-open ~ .top{opacity:0;visibility:hidden;pointer-events:none}
.bot__fab{
  width:var(--fab);height:var(--fab);border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;position:relative;
  box-shadow:0 14px 34px -12px rgba(0,121,192,.85);
  transition:transform .4s var(--ease),background-color .35s;
}
.bot__fab:hover{transform:translateY(-3px) scale(1.04);background:var(--blue-d)}
.bot__ico{width:25px;height:25px}
.bot__dot{position:absolute;top:5px;right:5px;width:9px;height:9px;background:#fff;border-radius:50%}
.bot__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;animation:ping 2.4s ease-out infinite}
.bot.is-open .bot__fab{transform:rotate(90deg) scale(.9)}
.bot.is-open .bot__dot{display:none}

.bot__panel{
  position:absolute;left:0;bottom:calc(var(--fab) + 14px);
  width:min(370px,calc(100vw - var(--pad)*2));height:min(520px,calc(100vh - 140px));
  background:#fff;border:1px solid var(--steel-2);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 34px 70px -30px rgba(0,48,77,.55);
  transform-origin:bottom left;
}
.bot__panel[hidden]{display:none}
.bot.is-open .bot__panel{animation:botIn .42s var(--ease)}
@keyframes botIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.bot__head{background:var(--deep);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bot__head b{display:block;font-size:15px;font-weight:600}
.bot__head i{display:block;font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:rgba(255,255,255,.55);margin-top:2px}
.bot__x{color:#fff;width:30px;height:30px;display:grid;place-items:center}
.bot__x svg{width:16px;height:16px}
.bot__log{flex:1;overflow-y:auto;padding:16px;display:grid;gap:11px;align-content:start;background:var(--steel);scroll-behavior:smooth}
.msg{max-width:86%;padding:10px 13px;font-size:14px;line-height:1.5;border-radius:var(--r-lg);animation:msgIn .32s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.msg--bot{background:#fff;border:1px solid var(--steel-2);border-bottom-left-radius:2px;justify-self:start}
.msg--me{background:var(--blue);color:#fff;border-bottom-right-radius:2px;justify-self:end}
.msg b{font-weight:600}
.msg a{color:var(--blue-d);border-bottom:1px solid currentColor}
.msg--me a{color:#fff}
.msg ul{margin-top:6px;display:grid;gap:3px}
.msg li{padding-left:13px;position:relative;font-size:13.5px}
.msg li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--blue);border-radius:50%}
.typing{display:flex;gap:4px;padding:13px}
.typing i{width:6px;height:6px;background:var(--zinc);border-radius:50%;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.bot__chips{display:flex;gap:6px;padding:10px 12px;overflow-x:auto;border-top:1px solid var(--steel-2);background:#fff}
.bot__chips::-webkit-scrollbar{display:none}
.bot__chips button{
  white-space:nowrap;font-size:12.5px;border:1px solid var(--steel-2);padding:6px 11px;border-radius:100px;
  transition:.25s;color:var(--zinc-d);
}
.bot__chips button:hover{border-color:var(--blue);color:var(--blue-d);background:rgba(0,121,192,.05)}
.bot__form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--steel-2);background:#fff}
.bot__form input{flex:1;border:1px solid var(--steel-2);border-radius:100px;padding:9px 14px;font-size:14px;background:var(--steel)}
.bot__form input:focus{outline:none;border-color:var(--blue);background:#fff}
.bot__form button{width:38px;height:38px;flex:none;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:background-color .3s}
.bot__form button:hover{background:var(--blue)}
.bot__form button svg{width:17px;height:17px}

.top{
  position:fixed;right:var(--pad);bottom:var(--fab-bottom);z-index:110;
  width:var(--fab);height:var(--fab);border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background-color .3s;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6);
}
.top.is-on{opacity:1;visibility:visible;transform:none}
.top:hover{background:var(--blue)}
.top__ring{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.top__arw{width:16px;height:16px;transition:transform .35s var(--ease)}
.top:hover .top__arw{transform:translateY(-3px)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:600px){
  .prog{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .matrix__grid{grid-template-columns:repeat(2,1fr)}
  .qa__cards{grid-template-columns:repeat(3,1fr)}
  .locs{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:repeat(2,1fr)}
  .partners__row{grid-template-columns:repeat(2,1fr)}
  .form{grid-template-columns:repeat(2,1fr)}
  .f,.check,.form .btn,.form__ok,.form .err{grid-column:1 / -1}
  .f.f--half{grid-column:span 1}
  .hero__scroll{display:block}
  .stds{grid-template-columns:repeat(2,1fr)}
  .route{grid-template-columns:repeat(2,1fr)}
  /* Traka srodnih nosi tačno tri kartice. U dve kolone bi treća ostala sama u
     redu, pa do 900px ostaje jednokolonska, a od 900px ide u tri kolone. */
  .prog--rel{grid-template-columns:1fr}
}

@media (min-width:900px){
  :root{--fab:60px;--fab-bottom:28px;--head-h:82px}
  .nav{display:flex}
  .nav__trig{display:inline-flex}
  .burger{display:none}
  .head__cta{display:inline-flex}
  .hero{padding:150px 0 calc(var(--fab-bottom) + var(--fab) + 56px)}
  .hero__wrap{grid-template-columns:1.05fr .95fr;align-items:center}
  .hero__draw{display:block;order:2}
  .about{grid-template-columns:1fr 1fr;align-items:start}
  .about__head{grid-column:1 / -1}
  .sechead{grid-template-columns:1.4fr 1fr;align-items:end;gap:34px}
  .prog{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .matrix__grid{grid-template-columns:repeat(4,1fr)}
  .locs{grid-template-columns:repeat(3,1fr)}
  .news{grid-template-columns:repeat(3,1fr)}
  .cta{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .foot__top{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .foot__bot{grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
  .foot__legal{justify-content:center}
  .foot__by{text-align:right}

  /* Baner je viši na desktopu; 52vh je iz brifa. */
  .ban{height:52vh}
  @supports (height:52svh){ .ban{height:52svh} }
  .introRow__side{justify-self:end}
  .introRow .filters{justify-content:flex-end}
  .ctaSlim{grid-template-columns:1.6fr auto}
  .btn--lg{justify-self:end}
  .stds{grid-template-columns:repeat(3,1fr)}
  .route{grid-template-columns:repeat(3,1fr)}
  .prog--rel{grid-template-columns:repeat(3,1fr)}

  /* Dvokolonski raspored stranice programa; tabela podataka se lepi uz vrh
     dok se čita tekst levo. Offset je visina zaglavlja + vazduh. */
  .pdGrid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}
  .pdSpec{position:sticky;top:calc(var(--head-h) + 20px)}
  .pdFig{display:block}
}

@media (min-width:1200px){
  .about{grid-template-columns:.55fr 1fr .9fr;gap:48px}
  .about__head{grid-column:auto;align-self:start}
  .about__media{align-self:start}
  .prog{grid-template-columns:repeat(4,1fr)}
  /* Traka srodnih uvek nosi tačno tri kartice, pa ne sme da nasledi četvrtu
     kolonu — ostalo bi prazno mesto u mreži. */
  .prog--rel{grid-template-columns:repeat(3,1fr)}

  /* Čipovi idu u kolonu široku tačno koliko im treba (auto), a tekst uzima
     ostatak. Sa udelom u frakcijama peti čip je uvek ispadao u drugi red.
     Ispod 1200px se ionako slažu jedno ispod drugog, pa čipovi dobiju punu
     širinu i nema prelamanja. */
  .introRow{grid-template-columns:minmax(0,1fr) auto;align-items:end}
}

/* Niski desktop prozori — skupljaju se samo vertikalni razmaci i traka
   indikatora se spušta bliže dnu; tipografija ostaje puna. */
@media (min-width:900px) and (max-height:960px){
  .hero{padding-bottom:max(calc(var(--fab-bottom) + var(--fab) + 44px), 11vh)}
  .hero__dots{bottom:calc(var(--fab-bottom) + var(--fab) + 10px)}
  .hero__h1{margin:14px 0 16px}
  .hero__lead{max-width:60ch}   /* kolona je šira od mere od 52ch — nemački time dobija red manje */
  .hero__cta{margin:24px 0 32px}
  .hero__facts{padding-top:18px}
  .draw{max-width:min(440px,44vh)}
}

/* Ispod ~880px visine dvokolonski hero fizički ne staje: crtež 460×520 plus
   pun blok teksta traži oko 900px. Ista odluka kao na telefonu — kad nema
   vertikalnog prostora, crtež se sklanja i hero prelazi u jednu kolonu.
   Time naslov dobija širu kolonu i prelama se u manje redova. */
@media (min-width:900px) and (max-height:880px){
  .hero__wrap{grid-template-columns:1fr}
  .hero__draw{display:none}
  /* U jednoj koloni ostaje neiskorišćena širina — mere 15ch/52ch su iz
     dvokolonskog rasporeda. Šira mera znači manje redova, što je i lepše
     i jedino što razliku između srpskog i nemačkog drži u okviru ekrana. */
  .hero__h1{max-width:19ch}
  .hero__lead{max-width:74ch}
}

/* Uski telefoni — hero se zbija da stane u 100svh, a indikatori ostaju iznad
   preloma. Prag je visina, ne širina: 360×780 pada iz istog razloga kao 360×640. */
@media (max-width:899px) and (max-height:850px){
  /* Na 360px mera od 15ch je uža od same kolone — naslov se lomi u više
     redova nego što mora. Puštamo ga na punu širinu. */
  .hero__h1{max-width:none}
  .hero__h1{margin:10px 0 10px}
  .hero__lead{font-size:14.5px;line-height:1.55}
  .hero__cta{margin:16px 0 20px;gap:10px}
  .hero .btn{--bh:46px;padding:0 14px;font-size:13.5px}
  .hero__facts{padding-top:12px;gap:10px}
  .hero__facts dt{line-height:1.15}
  .hero__facts dd{font-size:11.5px;margin-top:3px}
}

/* Niski landscape telefoni — hero raste preko viewporta umesto da gnječi sadržaj.
   Mora da stoji POSLE @supports i posle bloka od 900px da bi nadjačao min-height. */
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:auto;padding:104px 0 calc(var(--fab-bottom) + var(--fab) + 44px)}
  .hero__draw{display:none}
  .hero__dots{bottom:calc(var(--fab-bottom) + var(--fab) + 14px)}
  .hero__scroll{display:none}
  /* Meni: jedan stepen manja tipografija i niži razmak, da svih sedam stavki
     plus harmonika ostanu dohvatljivi bez gužve. */
  .sheet__in{gap:18px;padding-top:calc(var(--head-h) + 16px);padding-bottom:24px}
  .sheet__nav a{font-size:clamp(19px,5.4vw,28px);padding:8px 0}
  .sheet__foot{padding-top:20px}
}

/* smanjeno kretanje */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal,[data-rv],.draw__body{opacity:1 !important;transform:none !important}
  .draw__dim path,.draw__call path{stroke-dashoffset:0 !important}
  .draw__labels text{opacity:1 !important}
  .hero__h1 .w > span{transform:none !important}
  .cursor{display:none !important}
  /* Slajder: bez Ken Burnsa, bez prelaza, bez tajmera (tajmer gasi main.js) */
  .hero__slide{transition:none !important}
  .hero__slide img{animation:none !important;transform:none !important}
  .hero__dot i{animation:none !important;transform:scaleX(0) !important}
  .hero__dot.is-on i{transform:scaleX(1) !important}
  /* Paneli i harmonika: nema kaskade ni clip-path prelaza — otvoreno je odmah
     otvoreno. Stavke moraju biti vidljive, inače bi panel bio prazan pravougaonik.
     Visinu harmonike main.js u ovom režimu postavlja direktno, bez animacije. */
  /* Baner ostaje nepomičan; JS ni ne registruje slušače (vidi parallax()). */
  .ban__media{transform:none !important}
  .route__it em{opacity:1 !important;transform:none !important}
  .panel{transition:none !important}
  .panel__it,.panel__op{opacity:1 !important;transform:none !important;transition:none !important}
  .acc__panel{transition:none !important}
  .acc__chev{transition:none !important}
}

/* Ispod 900px okidača nema, pa se panel ne može otvoriti. Ovo je osigurač za
   slučaj da prozor bude sužen dok je panel otvoren. */
@media (max-width:899px){
  .panel{display:none}
}

@media print{
  .head,.bot,.top,.sheet,.boot,.scrollbar,.ticker,.panel{display:none !important}
  .hero,.sec--cta{background:#fff;color:#000}
}