/* ==========================================================
   MJ ČELIK MONT — stilovi
   Boje su izvučene iz originalnog logotipa:
   plava #1C4C7B · grafit #474C51 · podloga #F5F5F5
   ========================================================== */

/* ============================================================
   MJ ČELIK MONT — sistem dizajna
   Boje su pipetom izvučene iz originalnog logotipa:
   plava #1C4C7B · grafit #474C51 · podloga #F5F5F5
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

:root{
  /* --- brend --- */
  --blue:#1C4C7B;
  --blue-hi:#2E74B4;
  --blue-soft:rgba(28,76,123,.10);
  --steel:#474C51;
  --steel-2:#767C82;
  --paper:#F5F5F5;
  --white:#FFFFFF;

  /* --- tamna skala (izvedena iz grafita logotipa) --- */
  --ink:#10161B;
  --ink-2:#161D24;
  --ink-3:#1E262E;
  --hair:rgba(255,255,255,.10);
  --hair-d:#DDE1E5;

  /* --- tipografija --- */
  --display:"Archivo","Arial Narrow",Helvetica,sans-serif;
  --body:"IBM Plex Sans",-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- ritam --- */
  --gut:clamp(20px,5vw,72px);
  --wrap:1320px;
  --sec:clamp(72px,11vw,160px);
  --r:2px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  /* visina zaglavlja — heroj i fioka računaju odstojanje iz iste vrednosti */
  --h:96px;
  --logo:66px;
}
@media(max-width:480px){
  /* na telefonu logotip ne sme da gura burger */
  :root{--h:78px;--logo:52px}
}

html,body{background:var(--paper)}
section[id]{scroll-margin-top:96px}
body{
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.65;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

h1,h2,h3,h4,.dsp{
  font-family:var(--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.028em;
  text-wrap:balance;
}
h2{font-size:clamp(2rem,5.4vw,4.15rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.85rem);letter-spacing:-.018em;line-height:1.14}
p{text-wrap:pretty}

::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px;border-radius:2px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.lead{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.6;color:var(--steel);max-width:60ch}
.dark .lead{color:#9AA3AB}

/* Zaglavlje sekcije: kota + naslov, kao u tehničkom crtežu */
.shead{display:grid;gap:clamp(18px,2.6vw,30px);margin-bottom:clamp(38px,5vw,68px);position:relative}
.shead__idx{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  color:var(--blue);display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums;
}
/* rulica sa krajnjom crticom — kotna linija, ne ukrasno podvlačenje */
.shead__idx::after{
  content:"";flex:1;max-width:200px;height:7px;opacity:.4;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:100% 1px,1px 100%;
  background-position:0 50%,100% 0;
  background-repeat:no-repeat;
}
.dark .shead__idx{color:var(--blue-hi)}

/* Reperne crtice u uglovima zaglavlja — okvir crteža */
.dark .shead::before,.dark .shead::after{
  content:"";position:absolute;top:-15px;width:8px;height:8px;pointer-events:none;
  border-style:solid;border-color:var(--blue-hi);border-width:0;opacity:.5;
}
.dark .shead::before{left:0;border-left-width:1px;border-top-width:1px}
.dark .shead::after{right:0;border-right-width:1px;border-top-width:1px}
@media(min-width:900px){
  .shead--split{grid-template-columns:1fr minmax(300px,42%);align-items:end}
  .shead--split .shead__idx{grid-column:1/-1}
}

/* ---------- dugmad ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:17px 26px;border-radius:var(--r);
  background:var(--bg);color:var(--fg);
  font-family:var(--display);font-weight:600;font-size:.93rem;letter-spacing:.005em;
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),color .35s ease,box-shadow .5s var(--ease);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover{box-shadow:0 14px 34px -14px rgba(28,76,123,.75)}
.btn:active{transform:scale(.975)}
.btn--blue{--bg:var(--blue)}
.btn--blue::before{background:var(--ink)}
.btn--ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.btn--ghost::before{background:currentColor}
.btn--ghost:hover{color:var(--paper);box-shadow:inset 0 0 0 1px transparent}
.dark .btn--ghost:hover{color:var(--ink)}
.btn__ico{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.btn:hover .btn__ico{transform:translateX(4px)}

/* ---------- animacije pri skrolu ---------- */
[data-rv]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
[data-rv="mask"]{transform:translate3d(0,0,0);clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease),opacity .5s linear;transition-delay:var(--d,0ms)}
[data-rv="left"]{transform:translate3d(-28px,0,0)}
[data-rv="scale"]{transform:scale(.955);transform-origin:bottom}
.rv-in[data-rv]{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* ---------- šum / tekstura ---------- */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ PRELOADER ============ */
.pre{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;transition:opacity .6s ease}
.pre__inner{width:min(340px,74vw);text-align:left}
.pre__logo{display:block;width:220px;max-width:68vw;margin:0 auto 28px}
.pre__logo img{width:100%;height:auto}
.pre__bar{margin-top:22px;height:2px;background:rgba(255,255,255,.13);position:relative;overflow:hidden}
.pre__fill{position:absolute;inset:0;background:var(--blue-hi);transform:scaleX(0);transform-origin:0 50%}
.pre__row{margin-top:12px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:#5E6971;letter-spacing:.1em}
.pre.is-done{opacity:0;pointer-events:none}
.pre__panel{position:fixed;left:0;width:100%;height:50.2%;background:var(--ink);z-index:199;transition:transform 1s var(--ease)}
.pre__panel--t{top:0}
.pre__panel--b{bottom:0}
.is-revealed .pre__panel--t{transform:translateY(-100%)}
.is-revealed .pre__panel--b{transform:translateY(100%)}

/* ============ HEADER ============ */
.hdr{position:fixed;top:0;left:0;width:100%;z-index:80;transition:transform .55s var(--ease),background .4s ease,box-shadow .4s ease}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--h);transition:height .4s var(--ease)}
.hdr.is-stuck{background:rgba(16,22,27,.86);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px)}
/* dok je meni otvoren sadržaj se skroluje ispod zaglavlja — mora da ima podlogu */
.is-open .hdr{background:var(--ink)}
.hdr.is-stuck .hdr__in{height:72px}
.hdr.is-hidden{transform:translateY(-102%)}

/* Donja linija zaglavlja JESTE traka napretka skrola — jedna linija, ne dve. */
.hdr__prog{position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--hair);opacity:0;transition:opacity .4s ease}
.hdr.is-stuck .hdr__prog{opacity:1}
.hdr__prog>span{display:block;height:100%;background:var(--blue-hi);transform:scaleX(0);transform-origin:0 50%}

/* Logotip je pun lokotip klijenta — sadrži i sam natpis MJ ČELIK MONT,
   pa uz njega ne ide nikakav tekst u HTML-u. Ime nosi alt i .sr raspon. */
.logo{display:flex;align-items:center;color:#fff}
.logo__mk{flex:none;display:block;line-height:0}
.logo__mk img{width:auto;height:var(--logo);transition:height .4s var(--ease)}
.hdr.is-stuck .logo__mk img{height:50px}
.logo--ft .logo__mk img{height:64px}
@media(max-width:480px){.hdr.is-stuck .logo__mk img{height:44px}.logo--ft .logo__mk img{height:52px}}

.nav{display:none;align-items:center;gap:clamp(16px,2vw,34px)}
.nav a{position:relative;font-size:1rem;font-weight:400;color:rgba(255,255,255,.74);padding:6px 0;transition:color .3s ease}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--blue-hi);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.nav a:hover,.nav a.is-active{color:#fff}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);transform-origin:0 50%}
.hdr__cta{display:none}
/* Natpis je krupniji, ali dugme ostaje iste veličine (196 × 59): slova rastu,
   a vodoravni razmak se za toliko smanjuje. line-height drži visinu. */
.hdr__cta{font-size:1.04rem;line-height:1.5;padding-inline:19px}
@media(min-width:1080px){.nav{display:flex}.hdr__cta{display:inline-flex}}

.burger{width:46px;height:46px;display:grid;place-items:center;gap:0;margin-right:-8px}
.burger span{display:block;width:24px;height:1.6px;background:#fff;transition:transform .45s var(--ease),opacity .25s ease}
.burger span+span{margin-top:6px}
.is-open .burger span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}
@media(min-width:1080px){.burger{display:none}}

/* Meni mora da se skroluje: na telefonu je viši od ekrana čim se otvori
   podlista usluga. Zato bez justify-content (koji bi odsekao vrh sadržaja)
   — podnožje se dole drži sa margin-top:auto. */
.drawer{
  position:fixed;inset:0;z-index:79;background:var(--ink);
  padding:calc(var(--h) + 40px) var(--gut) calc(40px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:40px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--ease);
}
.is-open .drawer{clip-path:inset(0 0 0 0)}
.drawer__nav{display:grid;flex:0 0 auto}
.drawer__nav a{
  font-family:var(--display);font-weight:700;font-size:clamp(1.85rem,8.5vw,2.9rem);
  letter-spacing:-.03em;color:#fff;padding:13px 0;border-bottom:1px solid var(--hair);
  display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s ease;
}
.is-open .drawer__nav a{opacity:1;transform:none;transition-delay:calc(.16s + var(--i) * .055s)}
.drawer__nav a:hover{color:var(--blue-hi)}
.drawer__nav i{font-family:var(--mono);font-style:normal;font-size:.66rem;color:var(--steel-2);letter-spacing:.1em}
.drawer__foot{display:grid;gap:18px;flex:0 0 auto;margin-top:auto;opacity:0;transition:opacity .5s ease .5s}
.is-open .drawer__foot{opacity:1}
/* plutajuća dugmad ne smeju da stoje preko otvorenog menija */
.is-open .dock{opacity:0;pointer-events:none}
.drawer__foot a{font-family:var(--display);font-weight:600;font-size:1.15rem;color:#fff}
.drawer__foot small{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--steel-2);display:block;margin-bottom:4px}
@media(min-width:1080px){.drawer{display:none}}

/* ============ HERO — slajder preko cele visine ekrana ============ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:#fff;
  /* tačno jedan ekran kada sadržaj stane, a nikad manje od 640px;
     na sasvim niskim ekranima raste umesto da seče tekst */
  min-height:640px;
  min-height:max(640px,100vh);
  min-height:max(640px,100svh);
  display:flex;flex-direction:column;
}
.hero:focus{outline:none}

/* --- fotografije --- */
.hslides{position:absolute;inset:0;z-index:0}
.hslide{position:absolute;inset:0;opacity:0;z-index:1}
.hslide.is-prev{opacity:1}
.hslide.is-on{opacity:1;z-index:2;transition:opacity 1.1s var(--ease)}
.hslide picture{display:block;width:100%;height:100%}
.hslide img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  /* fotografija se prvo obezboji — plava se dodaje slojem iznad */
  filter:grayscale(1) contrast(1.06) brightness(.66);
  transform:scale(1.06);
}
/* Ken Burns kreće tek kad preloader siđe, da bude u koraku sa trakom napretka */
.hero.is-live .hslide.is-on img{animation:kenburns var(--dwell,6500ms) linear forwards}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero.is-paused .hslide.is-on img{animation-play-state:paused}

/* --- duoton: brend plava preuzima ton sive fotografije --- */
.hero__tone{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--blue-hi);mix-blend-mode:color;opacity:.55}

/* --- zatamnjenje, da naslov ostane čitljiv na svakoj od četiri fotografije --- */
/* Nema ravnog sloja preko cele slike — on je ono što je heroja pretvaralo u
   ravnu tamnu ploču. Zatamnjenje je asimetrično: levo koliko treba za tekst,
   desno se fotografija otvara. */
.hero__scrim{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    /* Na telefonu tekst ide preko cele širine, pa uspravni sloj nosi čitljivost. */
    linear-gradient(180deg,rgba(16,22,27,.80) 0%,rgba(16,22,27,.50) 22%,rgba(16,22,27,.52) 58%,rgba(16,22,27,.90) 100%),
    linear-gradient(100deg,
      rgba(16,22,27,.88) 0%,
      rgba(16,22,27,.80) 34%,
      rgba(16,22,27,.62) 58%,
      rgba(16,22,27,.50) 78%,
      rgba(16,22,27,.60) 100%);
}
@media(min-width:1080px){
  .hero__scrim{background:
    linear-gradient(180deg,rgba(16,22,27,.52) 0%,rgba(16,22,27,0) 20%,rgba(16,22,27,0) 60%,rgba(16,22,27,.82) 100%),
    linear-gradient(100deg,
      rgba(16,22,27,.92) 0%,
      rgba(16,22,27,.86) 30%,
      rgba(16,22,27,.70) 48%,
      rgba(16,22,27,.34) 66%,
      rgba(16,22,27,.22) 80%,
      rgba(16,22,27,.48) 100%)}
}

.hero__grid-bg{
  position:absolute;inset:-10% -10% 0;z-index:5;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:clamp(46px,7vw,88px) clamp(46px,7vw,88px);
  mask-image:radial-gradient(115% 88% at 74% 40%,#000 12%,transparent 74%);
  -webkit-mask-image:radial-gradient(115% 88% at 74% 40%,#000 12%,transparent 74%);
}
.hero__glow{
  position:absolute;width:min(880px,105vw);aspect-ratio:1;right:-16%;top:-24%;z-index:5;pointer-events:none;
  background:radial-gradient(circle,rgba(46,116,180,.34),rgba(28,76,123,.10) 42%,transparent 66%);
  filter:blur(12px);animation:pulse 9s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

/* sadržaj: centriran blok koji se rasteže, pa fiksirano podnožje */
.hero__body{
  position:relative;z-index:6;flex:1 1 auto;min-height:0;display:flex;align-items:center;
  padding-top:calc(var(--h) + clamp(12px,2.4vw,30px));
  padding-bottom:clamp(12px,2.2vw,26px);
}
.hero__in{width:100%;display:grid;gap:clamp(26px,5vw,52px)}
/* dve kolone tek kad se crtež zaista prikazuje — inače bi druga kolona
   ostala prazna i bespotrebno stiskala tekst */
@media(min-width:1280px){
  .hero__in{grid-template-columns:1.06fr .94fr;align-items:center;gap:clamp(30px,4vw,58px)}
}
.hero__foot{position:relative;z-index:6;flex:0 0 auto}

/* --- zbijeni režim: nizak ili uzak ekran --- */
@media(max-height:820px){
  .hero__body{padding-top:calc(var(--h) + 10px);padding-bottom:10px}
  .hero__tag{margin-bottom:15px}
  .hero__p{margin-top:15px;line-height:1.5}
  .hero__acts{margin-top:20px}
  .hctl{padding-bottom:6px}
  .stat{padding-top:11px;padding-bottom:13px}
}
@media(max-width:430px){
  .hero__p{font-size:.93rem;line-height:1.52}
  .hero__acts .btn{padding:14px 20px;font-size:.88rem}
  .stat b{font-size:1.3rem}
  .stat span{font-size:.7rem;margin-top:3px}
}
.hero__tag{
  display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.15em;color:#9FB4C7;margin-bottom:clamp(20px,3vw,30px);
}
.hero__tag::before{content:"";width:26px;height:1px;background:var(--blue-hi)}
.hero__dot{width:6px;height:6px;border-radius:50%;background:#57C77F;box-shadow:0 0 0 0 rgba(87,199,127,.6);animation:live 2.4s infinite}
@keyframes live{70%{box-shadow:0 0 0 9px rgba(87,199,127,0)}100%{box-shadow:0 0 0 0 rgba(87,199,127,0)}}

h1.hero__h{font-size:clamp(2.4rem,6.4vw,4.7rem);line-height:1;letter-spacing:-.035em;font-weight:800}
.hero__h .ln{display:block;overflow:hidden}
.hero__h .ln>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease);transition-delay:var(--d)}
.is-hero-in .hero__h .ln>span{transform:translateY(0)}
.hero__h em{font-style:normal;color:var(--blue-hi)}
.hero__p{margin-top:clamp(18px,2.6vw,30px);max-width:52ch;color:#B3BCC4;font-size:clamp(.97rem,1.25vw,1.16rem);line-height:1.58}
.hero__acts{margin-top:clamp(24px,3.4vw,42px);display:flex;flex-wrap:wrap;gap:12px}

/* --- brojač slajdova + crtice (donji desni ugao heroja) --- */
.hctl{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,2vw,18px);padding-bottom:10px}
.hctl__num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:#9FB4C7;font-variant-numeric:tabular-nums}
.hctl__num i{font-style:normal;color:var(--steel-2);margin:0 3px}
.hctl__ticks{display:flex;align-items:center;gap:7px}
.hctl__ticks button{width:26px;height:44px;display:grid;align-items:center;transition:width .5s var(--ease)}
.hctl__ticks button i{display:block;width:100%;height:2px;background:rgba(255,255,255,.30);transition:background .4s ease}
.hctl__ticks button.is-on{width:44px}
.hctl__ticks button.is-on i{background:var(--blue-hi)}
@media(hover:hover){.hctl__ticks button:hover i{background:rgba(255,255,255,.62)}}

/* --- traka napretka na donjoj ivici heroja --- */
.hprog{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:7;background:rgba(255,255,255,.10)}
.hprog>span{display:block;height:100%;width:100%;background:var(--blue-hi);transform:scaleX(0);transform-origin:0 50%}

/* Statistika je prikucana uz donju ivicu heroja, pa je van domašaja posmatrača
   skrola (rootMargin -8%). Zato ulazi zajedno sa ostatkom heroja, a ne na skrol. */
.hero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border-top:1px solid var(--hair);
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .9s var(--ease) .84s,transform .9s var(--ease) .84s}
.is-hero-in .hero__stats{opacity:1;transform:none}
@media(min-width:640px){.hero__stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:rgba(16,22,27,.60);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:clamp(13px,1.9vw,19px) 14px clamp(15px,2.1vw,21px) 0}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.42rem,3.4vw,2.05rem);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:4px;font-size:.74rem;color:#8A949D;line-height:1.32}
.stat:nth-child(n+2){padding-left:14px}
@media(min-width:640px){.stat:nth-child(n+2){padding-left:18px}}

/* --- blueprint crtež: tehnički sloj preko fotografije --- */
.bp{position:relative;z-index:1;width:100%;height:auto;overflow:visible;opacity:.62;mix-blend-mode:screen}
/* Pošto je desna strana sada svetlija, crtež dobija sopstvenu meku podlogu
   tačno ispod sebe — ne još jedan sloj preko cele širine heroja. */
.bp-wrap::before{
  content:"";position:absolute;inset:-16% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(56% 50% at 52% 48%,rgba(16,22,27,.80),rgba(16,22,27,.44) 50%,rgba(16,22,27,0) 76%);
}
.hero__cap{position:absolute;left:0;bottom:7px;z-index:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;color:#9DB2C4;transition:opacity .35s ease}
.hero__cap.is-out{opacity:0}
.bp-l{fill:none;stroke:#5E7183;stroke-width:1.15;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s var(--ease-io);transition-delay:var(--d,0s)}
.bp-l.a{stroke:#8FB6DA;stroke-width:1.9}
.bp-l.b{stroke:var(--blue-hi);stroke-width:2.4}
.bp-dim{fill:none;stroke:#41505E;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s var(--ease-io);transition-delay:var(--d,0s)}
.bp-f{fill:#1C4C7B;opacity:0;transition:opacity .7s ease;transition-delay:var(--d,0s)}
.bp-t{font-family:var(--mono);font-size:11px;fill:#7C8B99;letter-spacing:.08em;opacity:0;transition:opacity .8s ease;transition-delay:var(--d,0s)}
.bp-t.hl{fill:#8FB6DA}
.is-hero-in .bp-l,.is-hero-in .bp-dim{stroke-dashoffset:0}
.is-hero-in .bp-t{opacity:1}
.is-hero-in .bp-f{opacity:1}
/* crtež ima smisla tek kada ima mesta — ispod 1280px se sklanja */
.bp-wrap{position:relative;display:none}
@media(min-width:1280px){.bp-wrap{display:block}}
.bp-wrap::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)}

/* ---------- prilagođeni pokazivač preko heroja (samo miš) ---------- */
.hcur{display:none}
@media(hover:hover) and (pointer:fine) and (min-width:1024px){
  .hcur{display:block;position:fixed;top:0;left:0;z-index:8;width:54px;height:54px;
    margin:-27px 0 0 -27px;pointer-events:none;will-change:transform}
}
.hcur__s{width:100%;height:100%;opacity:0;transform:scale(.68);
  transition:opacity .3s ease,transform .45s var(--ease)}
.hcur.is-live .hcur__s{opacity:1;transform:scale(1)}
.hcur__i{width:100%;height:100%;display:grid;place-items:center;
  transition:transform .32s var(--ease),opacity .16s linear}
.hcur.is-right .hcur__i{transform:rotate(180deg)}
.hcur.is-flip .hcur__i{opacity:.12}
.hcur svg{width:54px;height:54px;fill:none;stroke:var(--blue-hi);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hero.has-cur{cursor:none}
/* na samim dugmadima vraćamo sistemski pokazivač — klik tamo ne menja slajd */
.hero.has-cur a,.hero.has-cur button{cursor:pointer}
@media(prefers-reduced-motion:reduce){.hcur{display:none!important}}

/* ============ TRAKA (marquee) ============ */
.ticker{background:var(--blue);color:#fff;overflow:hidden;padding:13px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ticker__t{display:flex;width:max-content;animation:slide 60s linear infinite}
.ticker:hover .ticker__t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker__t span{display:flex;align-items:center;gap:clamp(22px,3vw,42px);padding-right:clamp(22px,3vw,42px);
  font-family:var(--display);font-weight:600;font-size:clamp(.92rem,1.6vw,1.15rem);letter-spacing:.005em;white-space:nowrap}
.ticker__t i{width:5px;height:5px;background:rgba(255,255,255,.55);transform:rotate(45deg);flex:none}

/* ============ O NAMA ============ */
.about{background:var(--paper)}
.about__grid{display:grid;gap:clamp(38px,6vw,72px)}
@media(min-width:960px){.about__grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.about__body p+p{margin-top:1.1em}
.about__sign{margin-top:30px;display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--hair-d)}
.about__sign b{font-family:var(--display);font-size:1rem;display:block}
.about__sign span{font-size:.8rem;color:var(--steel-2)}

.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair-d);border:1px solid var(--hair-d)}
.fig{background:var(--paper);padding:clamp(20px,3vw,30px);transition:background .45s var(--ease)}
.fig:hover{background:var(--white)}
.fig b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.04em;color:var(--blue);line-height:1}
.fig span{display:block;margin-top:9px;font-size:.82rem;color:var(--steel);line-height:1.4}
.fig em{font-style:normal;font-size:.6em;vertical-align:.35em;margin-left:1px}

/* ============ USLUGE ============ */
.serv{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.serv__wrap{position:relative;z-index:2}
.serv__layout{display:grid;gap:0}
@media(min-width:1080px){.serv__layout{grid-template-columns:1fr 400px;gap:clamp(30px,4vw,60px);align-items:start}}

.srow{position:relative;border-top:1px solid var(--hair);padding:clamp(20px,2.6vw,28px) 0;cursor:pointer}
.srow:last-child{border-bottom:1px solid var(--hair)}
.srow__top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2.4vw,28px)}
.srow__no{font-family:var(--mono);font-size:.7rem;color:var(--steel-2);letter-spacing:.1em;transition:color .4s ease}
.srow__ttl{font-family:var(--display);font-weight:700;font-size:clamp(1.28rem,3.5vw,2.15rem);letter-spacing:-.028em;line-height:1.06;transition:transform .55s var(--ease),color .4s ease;transform-origin:left center}
.srow__pl{width:34px;height:34px;flex:none;position:relative;border:1px solid var(--hair);border-radius:50%;transition:background .45s var(--ease),border-color .45s var(--ease),transform .55s var(--ease)}
.srow__pl::before,.srow__pl::after{content:"";position:absolute;inset:50% auto auto 50%;background:#fff;transition:transform .5s var(--ease),background .4s ease}
.srow__pl::before{width:12px;height:1.4px;transform:translate(-50%,-50%)}
.srow__pl::after{width:1.4px;height:12px;transform:translate(-50%,-50%)}
.srow__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.srow__panel>div{overflow:hidden}
.srow__inner{padding-top:clamp(14px,2vw,20px);max-width:62ch;padding-left:clamp(0px,4vw,52px)}
.srow__inner p{color:#A6AFB7;font-size:.98rem}
.srow__tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.srow__tags li{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:#B9C4CE;border:1px solid var(--hair);padding:6px 11px;border-radius:100px}
.srow.is-on .srow__panel{grid-template-rows:1fr}
.srow.is-on .srow__pl{background:var(--blue);border-color:var(--blue);transform:rotate(135deg)}
.srow.is-on .srow__no{color:var(--blue-hi)}
.srow.is-on .srow__ttl{color:#fff}
@media(hover:hover){
  .srow:hover .srow__ttl{transform:translateX(9px)}
  .srow:hover .srow__no{color:var(--blue-hi)}
  .srow:hover .srow__pl{border-color:var(--blue-hi)}
}

.serv__view{display:none}
@media(min-width:1080px){
  .serv__view{display:block;position:sticky;top:110px;aspect-ratio:4/5;border:1px solid var(--hair);overflow:hidden;background:linear-gradient(150deg,#1B242C,#121A21)}
}
.sview{position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.sview.is-on{opacity:1;transform:scale(1)}
/* Fotografija je podloga panela; inženjerski sloj (mreža, reperi, oznaka)
   ostaje iznad nje. Okvir drži geometriju 4:5, slika mu se pokorava. */
.sview__ph{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:linear-gradient(150deg,#1B242C,#121A21)}
.sview__ph picture{display:block;width:100%;height:100%}
.sview__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(.55) contrast(1.04) brightness(.8)}
.sview__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--blue);mix-blend-mode:multiply;opacity:.4}
.serv__view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:34px 34px;opacity:.5}
.sview__cap{position:absolute;left:18px;bottom:16px;z-index:4;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.13em;color:#CBD7E2;padding:5px 9px;background:rgba(16,22,27,.74);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* reperne crtice u sva četiri ugla panela — okvir crteža ostaje i preko slike */
.serv__view::before{content:"";position:absolute;inset:10px;z-index:3;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--blue-hi),var(--blue-hi)),linear-gradient(var(--blue-hi),var(--blue-hi)),
    linear-gradient(var(--blue-hi),var(--blue-hi)),linear-gradient(var(--blue-hi),var(--blue-hi)),
    linear-gradient(var(--blue-hi),var(--blue-hi)),linear-gradient(var(--blue-hi),var(--blue-hi)),
    linear-gradient(var(--blue-hi),var(--blue-hi)),linear-gradient(var(--blue-hi),var(--blue-hi));
  background-size:9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-repeat:no-repeat}

/* ============ PROCES ============ */
.proc{background:var(--white)}
.proc__list{display:grid;gap:0;counter-reset:p}
.pstep{display:grid;gap:clamp(10px,2vw,26px);padding:clamp(24px,3.4vw,38px) 0;border-top:1px solid var(--hair-d);position:relative}
.pstep:last-child{border-bottom:1px solid var(--hair-d)}
@media(min-width:820px){.pstep{grid-template-columns:96px 1.05fr 1.2fr;align-items:baseline}}
.pstep__n{font-family:var(--mono);font-size:.76rem;color:var(--blue);letter-spacing:.14em;font-weight:500}
.pstep__t{font-family:var(--display);font-weight:700;font-size:clamp(1.18rem,2.5vw,1.6rem);letter-spacing:-.022em}
.pstep__d{color:var(--steel);font-size:.96rem;max-width:56ch}
.pstep::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--blue);transition:width .8s var(--ease)}
.pstep:hover::after{width:100%}

/* ============ RADIONICA / SPEC ============ */
.shop{background:var(--ink-2);color:#fff;position:relative;overflow:hidden}
.shop__grid{display:grid;gap:clamp(36px,5vw,64px)}
@media(min-width:960px){.shop__grid{grid-template-columns:.95fr 1.05fr;align-items:center}}
.spec{border-top:1px solid var(--hair)}
.spec__row{display:grid;grid-template-columns:auto 1fr auto;gap:8px 16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.spec__row>*{position:relative;z-index:1}
.spec__row::before{content:"";position:absolute;inset:0;background:rgba(46,116,180,.10);transform:translateX(-101%);transition:transform .6s var(--ease);z-index:0}
.spec__row:hover::before{transform:translateX(0)}
.spec__no{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;color:var(--steel-2);font-variant-numeric:tabular-nums}
.spec__k{font-size:.94rem;color:#C4CCD3}
.spec__v{font-family:var(--mono);font-size:.82rem;color:var(--blue-hi);letter-spacing:.04em;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.shop__art{border:1px solid var(--hair);padding:clamp(20px,3vw,34px);background:linear-gradient(155deg,#18212A,#111820)}

/* ============ RADOVI ============ */
.work{background:var(--paper)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3.4vw,38px)}
.filters button{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;padding:10px 16px;border-radius:100px;
  min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--hair-d);color:var(--steel);transition:all .4s var(--ease);background:var(--white)
}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.grid{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.6vw,20px)}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr);grid-auto-flow:row dense}}
.card{
  position:relative;overflow:hidden;background:var(--ink);cursor:pointer;isolation:isolate;
  aspect-ratio:4/3;border:1px solid transparent;
  transition:opacity .5s var(--ease),transform .6s var(--ease),border-color .4s ease;
}
.card.is-hidden{display:none}

/* Format pločice prati oblik fotografije koja u njoj stoji: uspravna slika
   ide u uspravnu pločicu, kvadratna u kvadratnu. Veliki formati rade samo
   dok su prikazani svi radovi — čim se uključi filter, mreža se vraća na
   jednake kartice, pa u redu ne može da ostane rupa. */
@media(min-width:1000px){
  .grid .card{aspect-ratio:1/1}
  .grid:not(.is-filtered) .card--w{grid-column:span 2;aspect-ratio:2/1}
  .grid:not(.is-filtered) .card--sq{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
  .grid:not(.is-filtered) .card--p{grid-row:span 2;aspect-ratio:1/2}
}

/* 1 — fotografija je podloga kartice, 2 — tonski tretman kao na uslugama */
.card__ph{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;
  background:linear-gradient(148deg,#212B34 0%,#141C23 55%,#1B242C 100%)}
.card__ph picture{display:block;width:100%;height:100%}
.card__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--op,center);
  filter:grayscale(.55) contrast(1.04) brightness(.78);
  transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.card__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--blue);mix-blend-mode:multiply;opacity:.4}
/* 4 — tanka mreža crteža, sada preko fotografije */
.card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 100%;opacity:.55}
/* 5 — crtež ostaje, ali kao napomena preko stvarnog predmeta: prigušen i
   povučen u gornji deo pločice da ne ulazi u naslov */
.card__art{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  padding:10% 12% 33%;opacity:.62;mix-blend-mode:screen;
  transition:opacity .6s var(--ease),transform 1s var(--ease)}
.card__art svg{width:100%;height:100%}
/* 3 — scrim: naslov i oznaka moraju da se čitaju i preko najsvetlije slike */
.card__ov{position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(180deg,rgba(16,22,27,.80) 0%,rgba(16,22,27,.34) 18%,rgba(16,22,27,0) 36%),
    linear-gradient(0deg,rgba(16,22,27,.96) 0%,rgba(16,22,27,.88) 20%,rgba(16,22,27,.46) 52%,rgba(16,22,27,.06) 80%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,2vw,22px);gap:5px;
  transition:background .6s var(--ease)}
.card__cat{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;color:#7FB0E0}
.card__ttl{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.8vw,1.18rem);color:#fff;letter-spacing:-.015em;line-height:1.2}
/* pozicioni broj i unutrašnji ram — kartica čita kao list crteža */
.card__no{position:absolute;top:17px;left:20px;z-index:4;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.15em;color:#C3D2DF;font-variant-numeric:tabular-nums;pointer-events:none}
.card__fr{position:absolute;inset:10px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.10);transition:border-color .45s var(--ease)}
.card__zoom{position:absolute;top:14px;right:14px;z-index:5;width:36px;height:36px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  display:grid;place-items:center;opacity:0;transform:scale(.7);transition:all .5s var(--ease);background:rgba(16,22,27,.5);backdrop-filter:blur(6px)}
.card__zoom svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.6}
@media(hover:hover){
  .card:hover{border-color:var(--blue)}
  .card:hover .card__ph img{transform:scale(1.04)}
  .card:hover .card__art{opacity:.62}
  .card:hover .card__ov{background:
    linear-gradient(180deg,rgba(16,22,27,.86) 0%,rgba(16,22,27,.40) 18%,rgba(16,22,27,0) 38%),
    linear-gradient(0deg,rgba(16,22,27,.97) 0%,rgba(16,22,27,.92) 24%,rgba(16,22,27,.62) 58%,rgba(16,22,27,.18) 86%)}
  .card:hover .card__zoom{opacity:1;transform:scale(1)}
  .card:hover .card__fr{border-color:rgba(46,116,180,.7)}
}
.card:focus-visible .card__fr{border-color:rgba(46,116,180,.7)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:150;background:rgba(10,14,18,.96);backdrop-filter:blur(10px);display:grid;place-items:center;
  padding:clamp(16px,4vw,54px);opacity:0;pointer-events:none;transition:opacity .45s ease}
.lb.is-on{opacity:1;pointer-events:auto}
.lb__box{width:min(880px,100%);border:1px solid var(--hair);background:linear-gradient(150deg,#1C252E,#121A21);position:relative;
  transform:scale(.96);transition:transform .55s var(--ease)}
.lb.is-on .lb__box{transform:scale(1)}
/* u detaljnom prikazu fotografija ide velika, crtež ostaje kao napomena preko nje */
.lb__art{position:relative;aspect-ratio:16/10;display:grid;place-items:center;padding:6%;
  overflow:hidden;isolation:isolate}
.lb__ph{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate}
.lb__ph picture{display:block;width:100%;height:100%}
.lb__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--op,center);
  filter:grayscale(.5) contrast(1.04) brightness(.82)}
.lb__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--blue);mix-blend-mode:multiply;opacity:.34}
.lb__art svg{position:relative;z-index:1;width:100%;height:100%;opacity:.55}
.lb__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid var(--hair);color:#fff}
.lb__meta b{font-family:var(--display);font-weight:600;font-size:1.05rem;display:block}
.lb__meta span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--steel-2)}
.lb__nav{display:flex;gap:8px}
.lb__nav button,.lb__x{width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;display:grid;place-items:center;color:#fff;transition:all .4s var(--ease)}
.lb__nav button:hover,.lb__x:hover{background:var(--blue);border-color:var(--blue)}
.lb__x{position:absolute;top:12px;right:12px;z-index:3;background:rgba(16,22,27,.65);backdrop-filter:blur(6px)}
.lb svg.i{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}

/* ============ RAZLOZI ============ */
.why{background:var(--white)}
.why__grid{display:grid;gap:1px;background:var(--hair-d);border:1px solid var(--hair-d)}
@media(min-width:700px){.why__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.why__grid{grid-template-columns:repeat(4,1fr)}}
.wcell{background:var(--white);padding:clamp(24px,3vw,34px);display:grid;gap:14px;align-content:start;position:relative;transition:background .5s var(--ease)}
.wcell:hover{background:var(--paper)}
.wcell svg{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.wcell h3{font-size:1.1rem}
.wcell p{font-size:.9rem;color:var(--steel)}

/* ============ UTISCI ============ */
.quotes{background:var(--blue);color:#fff;overflow:hidden}
.qtrack{position:relative;min-height:1px}
.q{position:absolute;inset:0;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.q.is-on{position:relative;opacity:1;transform:none;pointer-events:auto}
.q blockquote{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,3.3vw,2.35rem);line-height:1.22;letter-spacing:-.025em;max-width:22ch;text-wrap:balance}
@media(min-width:800px){.q blockquote{max-width:26ch}}
.q figcaption{margin-top:clamp(22px,3vw,32px);display:flex;align-items:center;gap:12px;font-size:.86rem}
.q figcaption b{font-weight:600}
.q figcaption span{color:rgba(255,255,255,.62)}
.qnav{margin-top:clamp(30px,4vw,42px);display:flex;align-items:center;gap:10px}
.qnav button{position:relative;width:34px;height:3px;background:rgba(255,255,255,.28);transition:background .4s ease,width .5s var(--ease)}
.qnav button.is-on{background:#fff;width:54px}
/* dodirna površina 44px, a da crtica ostane tanka */
.qnav button::before{content:"";position:absolute;inset:-21px -5px}
.quotes :focus-visible{outline-color:#fff}

/* ============ FAQ ============ */
.faq{background:var(--paper)}
.fq{border-top:1px solid var(--hair-d)}
.fq:last-child{border-bottom:1px solid var(--hair-d)}
.fq__q{width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:clamp(18px,2.4vw,24px) 0;
  font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.9vw,1.24rem);letter-spacing:-.015em;transition:color .35s ease}
.fq__q:hover{color:var(--blue)}
.fq__i{width:26px;height:26px;position:relative;flex:none}
.fq__i::before,.fq__i::after{content:"";position:absolute;left:50%;top:50%;background:var(--blue);transition:transform .5s var(--ease)}
.fq__i::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.fq__i::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.fq.is-on .fq__i::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.fq__a>div{overflow:hidden}
.fq__a p{padding-bottom:24px;max-width:70ch;color:var(--steel);font-size:.96rem}
.fq.is-on .fq__a{grid-template-rows:1fr}

/* ============ KONTAKT ============ */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta__grid{display:grid;gap:clamp(40px,6vw,70px)}
@media(min-width:980px){.cta__grid{grid-template-columns:.9fr 1.1fr}}
.cinfo{display:grid;gap:26px;align-content:start}
.cinfo__item small{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;color:var(--steel-2);margin-bottom:7px}
.cinfo__item a,.cinfo__item p{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2vw,1.32rem);letter-spacing:-.015em;color:#fff;transition:color .3s ease}
.cinfo__item a:hover{color:var(--blue-hi)}
.cinfo__item p{font-family:var(--body);font-weight:400;font-size:.96rem;color:#A6AFB7;letter-spacing:0}

.form{display:grid;gap:16px}
@media(min-width:640px){.form{grid-template-columns:1fr 1fr}.form .f-full{grid-column:1/-1}}
.field{position:relative}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);
  padding:16px 0 12px;font-size:.98rem;color:#fff;transition:border-color .4s ease;border-radius:0
}
.field textarea{resize:vertical;min-height:106px}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23767C82' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:11px}
.field select option{background:var(--ink-3);color:#fff}
.field label{position:absolute;left:0;top:16px;font-size:.98rem;color:#77818A;pointer-events:none;transform-origin:0 0;transition:transform .4s var(--ease),color .4s ease}
.field input:focus~label,.field textarea:focus~label,.field.is-filled label{transform:translateY(-15px) scale(.72);color:var(--blue-hi)}
.field select~label{transform:translateY(-15px) scale(.72)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-hi)}
.field__line{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--blue-hi);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.field input:focus~.field__line,.field textarea:focus~.field__line,.field select:focus~.field__line{transform:scaleX(1)}
.field.has-err input,.field.has-err textarea,.field.has-err select{border-color:#E06A5A}
.err{display:block;min-height:16px;margin-top:6px;font-size:.72rem;color:#E68A7C;opacity:0;transform:translateY(-3px);transition:all .3s ease}
.field.has-err .err{opacity:1;transform:none}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:#8A939B;line-height:1.5}
.consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--blue-hi)}
.form__msg{font-size:.88rem;padding:14px 16px;border:1px solid rgba(87,199,127,.4);background:rgba(87,199,127,.1);color:#9BE0B4;display:none}
.form__msg.is-on{display:block;animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}

/* ============ FOOTER ============ */
.ft{background:var(--ink-2);color:#fff;padding-block:clamp(52px,7vw,78px) 30px;border-top:1px solid var(--hair)}
.ft__grid{display:grid;gap:clamp(32px,4vw,48px)}
@media(min-width:700px){.ft__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.ft__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ft h4{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.19em;color:var(--steel-2);margin-bottom:16px}
.ft__links{display:grid;gap:10px}
.ft__links a{font-size:.92rem;color:#A6AFB7;transition:color .3s ease,padding-left .4s var(--ease)}
.ft__links a:hover{color:#fff;padding-left:6px}
.ft__bot{margin-top:clamp(40px,5vw,60px);padding-top:22px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;color:#67717A}
.ft__bot a:hover{color:#fff}
.ft__blurb{max-width:38ch;color:#8A939B;font-size:.9rem;margin-top:18px}

/* ============ PLUTAJUĆE DUGMAD (u istoj liniji) ============ */
.dock{position:fixed;bottom:clamp(18px,3vw,28px);z-index:120;transition:opacity .35s var(--ease)}
.dock--l{left:clamp(16px,3vw,28px)}
.dock--r{right:clamp(16px,3vw,28px)}
.fab{
  position:relative;
  width:clamp(52px,10vw,58px);height:clamp(52px,10vw,58px);border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--ink);
  box-shadow:0 12px 30px -10px rgba(16,22,27,.6);
  transition:transform .5s var(--ease),background .4s ease,opacity .45s ease,visibility .45s
}
.fab:hover{transform:translateY(-4px)}
.fab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fab--chat{background:var(--blue)}
.fab--chat:hover{background:var(--blue-hi)}
.fab--top{opacity:0;visibility:hidden;transform:translateY(14px);box-shadow:0 12px 30px -10px rgba(16,22,27,.6),0 0 0 1px rgba(255,255,255,.16)}
.fab--top.is-on{opacity:1;visibility:visible;transform:none}
.fab--top:hover{background:var(--blue)}
.fab__ping{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#57C77F;border:2px solid var(--ink);animation:live 2.6s infinite}
.fab__ring{position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--blue);opacity:.45;animation:ring 2.8s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.28);opacity:0}}
.dock__lbl{
  position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-6px,-50%);white-space:nowrap;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;padding:7px 11px;
  opacity:0;pointer-events:none;transition:all .4s var(--ease)
}
.dock--l .fab:hover+.dock__lbl{opacity:1;transform:translate(0,-50%)}
@media(max-width:520px){.dock__lbl{display:none}}

/* --- prozor asistenta --- */
.chat{
  position:fixed;left:clamp(16px,3vw,28px);bottom:calc(clamp(18px,3vw,28px) + clamp(52px,10vw,58px) + 14px);
  width:min(376px,calc(100vw - 32px));height:min(560px,calc(100vh - 140px));z-index:130;
  background:var(--white);border:1px solid var(--hair-d);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 34px 70px -28px rgba(16,22,27,.5);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:0 100%;
  transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s
}
.chat.is-on{opacity:1;visibility:visible;transform:none}
.chat__hd{background:var(--ink);color:#fff;padding:15px 16px;display:flex;align-items:center;gap:11px;flex:none}
.chat__av{width:36px;height:36px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.8rem;flex:none}
.chat__hd b{display:block;font-family:var(--display);font-weight:600;font-size:.93rem;line-height:1.2}
.chat__hd small{display:flex;align-items:center;gap:6px;font-size:.68rem;color:#8A939B}
.chat__hd small::before{content:"";width:6px;height:6px;border-radius:50%;background:#57C77F}
.chat__x{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;transition:background .3s ease}
.chat__x:hover{background:rgba(255,255,255,.1)}
.chat__x svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8}
.chat__body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:11px;background:var(--paper);scrollbar-width:thin}
.chat__body::-webkit-scrollbar{width:5px}
.chat__body::-webkit-scrollbar-thumb{background:#CDD3D8}
.msg{max-width:86%;padding:11px 14px;font-size:.88rem;line-height:1.52;animation:msgin .45s var(--ease) both}
@keyframes msgin{from{opacity:0;transform:translateY(9px)}}
.msg--bot{background:var(--white);border:1px solid var(--hair-d);align-self:flex-start;border-radius:2px 12px 12px 12px}
.msg--me{background:var(--blue);color:#fff;align-self:flex-end;border-radius:12px 2px 12px 12px}
.msg b{font-weight:600}
.msg a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.msg--me a{color:#fff}
.msg ul{margin:7px 0 0;padding-left:16px;list-style:disc}
.msg li{margin-bottom:3px}
.typing{display:flex;gap:4px;align-items:center;padding:14px}
.typing i{width:6px;height:6px;border-radius:50%;background:#A8B0B7;animation:bob 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;background:var(--paper);flex:none}
.chips button{font-size:.75rem;padding:7px 12px;border:1px solid var(--hair-d);border-radius:100px;background:var(--white);color:var(--steel);transition:all .35s var(--ease)}
.chips button:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.chat__foot{display:flex;gap:8px;padding:11px;border-top:1px solid var(--hair-d);background:var(--white);flex:none}
.chat__foot input{flex:1;border:1px solid var(--hair-d);padding:11px 13px;font-size:.87rem;border-radius:100px;background:var(--paper);color:var(--ink)}
.chat__foot input:focus{outline:none;border-color:var(--blue)}
.chat__send{width:40px;height:40px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none;transition:background .3s ease,transform .3s var(--ease)}
.chat__send:hover{background:var(--ink);transform:scale(1.05)}
.chat__send svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}
.chat__note{font-size:.6rem;text-align:center;color:var(--steel-2);padding:0 0 8px;background:var(--white);flex:none}
@media(max-width:520px){.chat{left:12px;right:12px;width:auto;height:min(74vh,540px)}}

/* ============================================================
   PODSTRANICE — zajedničke komponente
   ============================================================ */

/* ---------- padajući meni „Usluge“ ---------- */
.nav__has{position:relative;display:flex;align-items:center}
.nav__top{display:inline-flex;align-items:center;gap:7px}
.nav__car{width:9px;height:6px;flex:none;transition:transform .3s ease}
.nav__has.is-open .nav__car{transform:rotate(180deg)}
/* most preko praznine, da meni ne pobegne dok miš silazi */
.nav__has::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px}
.nav__drop{
  position:absolute;top:calc(100% + 16px);left:-18px;min-width:296px;z-index:5;
  background:rgba(16,22,27,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--hair);padding:8px;display:grid;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s ease,transform .34s var(--ease),visibility .28s;
}
.nav__has:hover .nav__drop,.nav__has.is-open .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop a{display:flex;align-items:center;gap:13px;padding:11px 12px;font-size:.92rem;
  color:rgba(255,255,255,.78);white-space:nowrap;transition:background .3s ease,color .3s ease}
.nav__drop a::after{display:none}
.nav__drop a:hover,.nav__drop a:focus-visible{background:rgba(46,116,180,.18);color:#fff}
.nav__drop a[aria-current]{color:#fff;background:rgba(46,116,180,.12)}
.nav__drop i{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.1em;color:var(--steel-2);font-variant-numeric:tabular-nums}
.nav a[aria-current]{color:#fff}
.nav a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- fioka: podlista usluga ---------- */
.drawer__row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--hair);
  opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.is-open .drawer__row{opacity:1;transform:none;transition-delay:calc(.16s + var(--i) * .055s)}
.drawer__row>a{flex:1;border-bottom:0}
.drawer__more{width:46px;height:46px;flex:none;position:relative;border:1px solid var(--hair);border-radius:50%}
.drawer__more::before,.drawer__more::after{content:"";position:absolute;inset:50% auto auto 50%;background:#fff;transition:transform .45s var(--ease)}
.drawer__more::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.drawer__more::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.drawer__more[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(90deg)}
/* Svih šest linkova stoji u jednom omotaču. Bez njega bi 0fr skupio samo
   prvi red, a ostalih pet bi ostalo otvoreno (implicitni auto redovi). */
.drawer__sub{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .55s var(--ease)}
.drawer__sub.is-on{grid-template-rows:1fr}
.drawer__sub>div{overflow:hidden;min-height:0}
.drawer__sub a{display:block;padding:11px 0 11px 30px;font-size:.95rem;color:#A6AFB7;border-bottom:1px solid var(--hair)}
.drawer__sub a:hover{color:#fff}

/* ---------- mrvice ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.14em;color:var(--steel-2);margin-bottom:clamp(18px,2.4vw,26px)}
.crumb a{color:var(--blue-hi);transition:color .3s ease}
.crumb a:hover{color:#fff}
.crumb b{font-weight:400;color:#C4CCD3}
.crumb span{opacity:.5}

/* ---------- hero podstranice ---------- */
.phero{
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;
  min-height:420px;min-height:max(420px,56svh);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--h) + clamp(30px,5vw,64px));
}
.phero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate}
.phero__bg picture{display:block;width:100%;height:100%}
.phero__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(1) contrast(1.06) brightness(.66)}
.phero__bg::after{content:"";position:absolute;inset:0;background:var(--blue-hi);mix-blend-mode:color;opacity:.55}
.phero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(16,22,27,.72) 0%,rgba(16,22,27,.30) 34%,rgba(16,22,27,.62) 100%),
    linear-gradient(100deg,rgba(16,22,27,.92) 0%,rgba(16,22,27,.82) 34%,rgba(16,22,27,.46) 72%,rgba(16,22,27,.56) 100%);
}
.phero .hero__grid-bg{z-index:2}
.phero__in{position:relative;z-index:3;padding-bottom:clamp(30px,5vw,54px)}
.phero__idx{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.16em;color:var(--blue-hi);margin-bottom:clamp(14px,2vw,20px);font-variant-numeric:tabular-nums}
.phero__idx::after{content:"";flex:1;max-width:190px;height:7px;opacity:.4;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:100% 1px,1px 100%;background-position:0 50%,100% 0;background-repeat:no-repeat}
h1.phero__h{font-size:clamp(2.1rem,5.2vw,3.9rem);line-height:1.02;letter-spacing:-.032em;font-weight:800;max-width:18ch}
.phero__lead{margin-top:clamp(16px,2.4vw,24px);max-width:56ch;color:#C0C8CF;font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.55}
.phero__spec{position:relative;z-index:3;border-top:1px solid var(--hair);background:rgba(16,22,27,.62);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.phero__specin{display:grid;grid-template-columns:repeat(3,1fr)}
.phero__specin>div{padding:14px 18px 16px 0}
.phero__specin>div:nth-child(n+2){padding-left:18px;border-left:1px solid var(--hair)}
.phero__specin small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;color:var(--steel-2);margin-bottom:5px}
.phero__specin b{font-family:var(--display);font-weight:600;font-size:clamp(.9rem,1.5vw,1.06rem);letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
@media(max-width:640px){
  /* naslagano jedno ispod drugog — pregrada ide vodoravno, ne uspravno */
  .phero__specin{grid-template-columns:1fr}
  .phero__specin>div{padding:12px 0 13px}
  .phero__specin>div:nth-child(n+2){padding-left:0;border-left:0;border-top:1px solid var(--hair)}
}

/* ---------- kartice usluga (usluge.html) ---------- */
.serv2{background:var(--paper)}
.scards{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:1fr}
@media(min-width:640px){.scards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.scards{grid-template-columns:repeat(3,1fr)}}
.scard__link{display:grid;grid-template-rows:auto 1fr;height:100%;background:var(--white);
  border:1px solid var(--hair-d);transition:border-color .4s ease,transform .6s var(--ease),box-shadow .6s var(--ease)}
.scard__link:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(16,22,27,.45)}
.scard__ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:var(--ink)}
.scard__ph picture{display:block;width:100%;height:100%}
.scard__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(.55) contrast(1.04) brightness(.86);transition:filter .7s var(--ease),transform 1s var(--ease)}
.scard__ph::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:multiply;opacity:.4;transition:opacity .7s var(--ease)}
.scard__link:hover .scard__ph img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
.scard__link:hover .scard__ph::after{opacity:.12}
.scard__body{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:clamp(18px,2.2vw,24px)}
.scard__no{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;color:var(--blue);font-variant-numeric:tabular-nums}
.scard__ttl{font-family:var(--display);font-weight:700;font-size:clamp(1.14rem,1.9vw,1.4rem);letter-spacing:-.02em;line-height:1.14}
.scard__lead{font-size:.9rem;color:var(--steel);line-height:1.5}
.scard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.scard__tags li{font-family:var(--mono);font-size:.63rem;letter-spacing:.06em;color:var(--steel);
  border:1px solid var(--hair-d);padding:5px 9px;border-radius:100px}
.scard__go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--blue)}
.scard__go .btn__ico{width:14px;height:14px;transition:transform .45s var(--ease)}
.scard__link:hover .scard__go .btn__ico{transform:translateX(4px)}

/* ---------- „Šta radimo“ — specifikaciona mreža ---------- */
.sgrid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(min-width:700px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sgrid{grid-template-columns:repeat(3,1fr)}}
.sgrid__cell{background:var(--ink);padding:clamp(20px,2.4vw,28px);display:grid;gap:8px;align-content:start;
  transition:background .45s var(--ease)}
.sgrid__cell:hover{background:var(--ink-3)}
.sgrid__cell b{font-family:var(--display);font-weight:600;font-size:1.04rem;letter-spacing:-.015em;color:#fff}
.sgrid__cell span{font-size:.89rem;color:#9AA3AB;line-height:1.5}

/* ---------- puna traka sa fotografijom ---------- */
.band{position:relative;height:clamp(220px,34vw,420px);overflow:hidden;isolation:isolate;background:var(--ink)}
.band picture{display:block;width:100%;height:100%}
.band img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(.55) contrast(1.04) brightness(.8)}
.band::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:multiply;opacity:.4}

/* ---------- traka radova ---------- */
.wstrip{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:1fr}
@media(min-width:700px){.wstrip{grid-template-columns:repeat(3,1fr)}}
.wstrip__i{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:var(--ink);border:1px solid var(--hair-d)}
.wstrip__i picture{display:block;width:100%;height:100%}
.wstrip__i img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(.55) contrast(1.04) brightness(.84);transition:filter .7s var(--ease)}
.wstrip__i::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:multiply;opacity:.4;transition:opacity .7s var(--ease);pointer-events:none}
@media(hover:hover){.wstrip__i:hover img{filter:grayscale(0) brightness(1)}.wstrip__i:hover::after{opacity:.1}}
.wstrip__i figcaption{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;color:#CBD7E2;padding:5px 9px;background:rgba(16,22,27,.74);font-variant-numeric:tabular-nums}

/* ---------- srodne usluge ---------- */
.xsec{background:var(--ink-2);color:#fff}
.xgrid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(min-width:760px){.xgrid{grid-template-columns:repeat(2,1fr)}}
.xlink{display:grid;gap:6px;background:var(--ink-2);padding:clamp(20px,2.4vw,26px);position:relative;
  transition:background .45s var(--ease)}
.xlink:hover{background:var(--ink-3)}
.xlink i{font-family:var(--mono);font-style:normal;font-size:.63rem;letter-spacing:.14em;color:var(--blue-hi);font-variant-numeric:tabular-nums}
.xlink b{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.018em}
.xlink span{font-size:.88rem;color:#9AA3AB;line-height:1.5}
.xlink::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--blue-hi);transition:width .7s var(--ease)}
.xlink:hover::after{width:100%}

/* ---------- CTA traka ---------- */
.ctaband{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.ctaband__in{position:relative;z-index:2;display:grid;gap:clamp(26px,4vw,48px);align-items:center}
@media(min-width:900px){.ctaband__in{grid-template-columns:1.25fr .75fr}}
.ctaband h2{font-size:clamp(1.7rem,3.8vw,2.9rem)}
.ctaband__act{display:flex;flex-wrap:wrap;gap:12px}

/* Sekcija koju odmah nasleđuje puna traka sa fotografijom — bez praznog repa. */
.section--tight{padding-bottom:clamp(36px,5vw,64px)}
.section--tight .shead{margin-bottom:0}
/* kada tamna sekcija ide odmah ispod tamnog zaglavlja stranice,
   pun razmak odozgo čita se kao prazan hod */
.section--tt{padding-top:clamp(46px,6vw,86px)}

/* ============ STRANICA KONTAKT ============ */
.kgrid{display:grid;gap:clamp(34px,5vw,58px)}
@media(min-width:1020px){.kgrid{grid-template-columns:1.4fr .6fr;align-items:start}}

/* rok od 48 h stoji uz dugme za slanje — to je najjača stvar koju obećavamo */
.kpromise{border:1px solid var(--hair);background:var(--ink-2);padding:clamp(20px,2.6vw,28px);
  display:grid;gap:12px;align-content:start;position:sticky;top:calc(var(--h) + 22px)}
@media(max-width:1019px){.kpromise{position:static}}
.kpromise__n{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5vw,3rem);
  letter-spacing:-.03em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.kpromise__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--steel-2)}
.kpromise p{font-size:.92rem;color:#A6AFB7;line-height:1.55}
.kpromise ul{display:grid;gap:10px;margin-top:4px;border-top:1px solid var(--hair);padding-top:16px}
.kpromise li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:.87rem;color:#C4CCD3;line-height:1.5}
.kpromise i{font-family:var(--mono);font-style:normal;font-size:.64rem;letter-spacing:.1em;color:var(--blue-hi);padding-top:4px}

/* prilog: crtež, skica ili fotografija.
   Natpis je ovde dugme, pa se plutajući natpis iz .field poništava. */
.file>small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--steel-2);margin-bottom:10px}
.file .file__in{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0}
.file .file__btn,.file .file__in:focus~.file__btn,.file.is-filled .file__btn{
  position:static;transform:none;pointer-events:auto;
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 18px;
  border:1px dashed rgba(255,255,255,.22);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:#C4CCD3;cursor:pointer;transition:border-color .4s var(--ease),color .4s ease,background .4s ease}
.file .file__btn:hover{border-color:var(--blue-hi);color:#fff;background:rgba(46,116,180,.10)}
.file .file__in:focus-visible+.file__btn{outline:2px solid var(--blue-hi);outline-offset:3px}
.file .file__btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.file__name{display:block;margin-top:11px;font-size:.82rem;color:#8A939B;word-break:break-word}
.file.has-err .file__btn{border-color:#E06A5A}
/* saglasnost ima svoj omotač: .field bi joj natpis pretvorio u plutajući
   i isključio klik (pointer-events:none), pa se koristi zasebna klasa */
.consent-wrap{position:relative}
.consent-wrap .err{margin-top:8px}
.consent-wrap.has-err .err{opacity:1;transform:none}
.consent-wrap.has-err .consent input{outline:1px solid #E06A5A;outline-offset:2px}

/* direktan kontakt — tehnički podaci idu monospejsom, kao i drugde na sajtu */
.kcards{display:grid;gap:1px;background:var(--hair-d);border:1px solid var(--hair-d)}
@media(min-width:680px){.kcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.kcards{grid-template-columns:repeat(4,1fr)}}
.kcard{background:var(--white);padding:clamp(22px,2.8vw,30px);display:grid;gap:9px;align-content:start;transition:background .5s var(--ease)}
.kcard:hover{background:var(--paper)}
.kcard small{font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;color:var(--steel-2)}
.kcard a,.kcard b{font-family:var(--mono);font-weight:400;font-size:1rem;letter-spacing:.02em;
  color:var(--ink);line-height:1.6;font-variant-numeric:tabular-nums;transition:color .3s ease}
.kcard a{display:inline-flex;align-items:center;min-height:34px}
.kcard a:hover{color:var(--blue)}
.kcard p{font-size:.9rem;color:var(--steel);line-height:1.55}

/* mapa — okvir stoji, sadržaj stiže kada bude potvrđena adresa */
.kmap{position:relative;border:1px solid var(--hair-d);background:var(--white);aspect-ratio:16/9;overflow:hidden}
@media(max-width:700px){.kmap{aspect-ratio:4/3}}
.kmap__ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:15px;text-align:center;padding:26px;
  background-image:linear-gradient(var(--hair-d) 1px,transparent 1px),linear-gradient(90deg,var(--hair-d) 1px,transparent 1px);
  background-size:46px 46px}
.kmap__ph svg{width:32px;height:32px;stroke:var(--blue);fill:none;stroke-width:1.3}
.kmap__ph b{font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:-.015em}
.kmap__ph span{font-size:.88rem;color:var(--steel);max-width:46ch;line-height:1.55}

/* vidljiva oznaka podatka koji tek treba da stigne od naručioca */
.todo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.65rem;
  letter-spacing:.12em;color:var(--blue);background:var(--blue-soft);border:1px dashed var(--blue-hi);padding:5px 9px}
.dark .todo,.cta .todo{color:#C3D2DF;background:rgba(46,116,180,.14)}

/* ---------- fokus na novim komponentama ---------- */
.scard__link:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px;border-color:var(--blue)}
.scard__link:focus-visible .scard__ph img{filter:grayscale(0) brightness(1)}
.scard__link:focus-visible .scard__ph::after{opacity:.12}
.xlink:focus-visible{outline:2px solid var(--blue-hi);outline-offset:-2px;background:var(--ink-3)}
.crumb a:focus-visible,.srow__go:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.drawer__more:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}

/* ---------- link „Detaljnije“ u harmonici na početnoj ---------- */
.srow__go{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--blue-hi)}
.srow__go .btn__ico{width:14px;height:14px;transition:transform .45s var(--ease)}
.srow__go:hover .btn__ico{transform:translateX(4px)}

/* ---------- brojevi: tabelarne cifre svuda gde stoji podatak ---------- */
.fig b,.pstep__n,.srow__no,.bp-t,.sview__cap,.card__cat,.lb__meta span,.ft__bot{font-variant-numeric:tabular-nums}

/* ---------- dodirne površine na uređajima bez miša ---------- */
@media(pointer:coarse){
  .chips button{min-height:40px;display:inline-flex;align-items:center}
  .chat__x{width:40px;height:40px}
  .chat__send{width:44px;height:44px}
  .ft__links a{padding-block:9px}
  .ft__links{gap:2px}
}

/* ---------- pristupačnost / smanjena animacija ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero__h .ln>span{transform:none!important}
  .bp-l,.bp-dim{stroke-dashoffset:0!important}
  .bp-t,.bp-f{opacity:1!important}
  /* slajder: bez automatskog smenjivanja, bez Ken Burnsa, bez pretapanja */
  .hslide img{transform:none!important;animation:none!important}
  /* radovi: bez uvećavanja fotografije na hover */
  .card__ph img{transform:none!important}
  .hero__stats{opacity:1!important;transform:none!important}
  .hprog{display:none}
}
.sr{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:-9999px;top:0;z-index:300;background:var(--blue);color:#fff;padding:12px 18px}
.skip:focus{left:12px;top:12px}