:root{
  --ink:#eae6df;
  --ink-dim:rgba(234,230,223,.62);
  --ink-faint:rgba(234,230,223,.34);
  --dark:#141414;
  --dark-2:#1b1b1b;
  --light:#f0ece4;
  --light-ink:#1c1a17;
  --light-dim:rgba(28,26,23,.62);
  --accent:#e52600;
  --accent-soft:rgba(229,38,0,.14);
  --line:rgba(234,230,223,.14);
  --line-light:rgba(28,26,23,.16);
  --radius:18px;
  --pad:clamp(20px, 5vw, 72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Quicksand', system-ui, sans-serif;
  background:var(--dark) url('../img/bg.webp') repeat;
  color:var(--ink);
  font-size:19px;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}

/* Archive (Slava Kirilenko), lokalno iz fonts/; jedna težina pokriva sve, da preglednik ne radi lažni bold */
@font-face{font-family:'Archive';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Archive.otf') format('opentype')}
.archive{font-family:'Archive','Archivo Black','Quicksand',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.it{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--accent);font-size:.98em;
}

a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--accent);
  pointer-events:none;
}

/* ---------- chapter marker ---------- */
.ch{
  font-size:16px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vh,34px);
}
.ch b{color:var(--accent);font-weight:700}
.ch::after{content:"";flex:1;height:1px;background:var(--line)}
.light-band .ch{color:rgba(28,26,23,.4)}
.light-band .ch b{color:var(--accent)}
.light-band .ch::after{background:var(--line-light)}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--pad) + 40px) var(--pad) var(--pad);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 54% 39%, rgba(229,38,0,.16), transparent 68%);
  opacity:0;transition:opacity .8s ease;
}
.hero:has(.art-mask.reveal)::before{
  opacity:1;
  animation:heroGlowFlicker 3s ease-in-out infinite, heroGlowDrift 16s ease-in-out infinite;
}
@keyframes heroGlowFlicker{
  0%,100%{filter:brightness(1)}
  10%{filter:brightness(1.15)}
  22%{filter:brightness(.92)}
  35%{filter:brightness(1.2)}
  50%{filter:brightness(.95)}
  65%{filter:brightness(1.1)}
  80%{filter:brightness(.9)}
  92%{filter:brightness(1.05)}
}
@keyframes heroGlowDrift{
  0%{transform:translate(0,0)}
  25%{transform:translate(4%,-5%)}
  50%{transform:translate(-3%,4%)}
  75%{transform:translate(-5%,-3%)}
  100%{transform:translate(0,0)}
}
.eyebrow{
  font-weight:700;font-size:16px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink);margin-bottom:26px;display:flex;align-items:center;gap:14px;
  opacity:0;transform:translateY(-8px);animation:fadeUp .6s ease .1s forwards;
}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--accent)}
.hero h1{
  font-size:clamp(57px,11vw,188px);
  line-height:.96;font-weight:400;max-width:15ch;
}
.hero h1 .it{font-size:.92em}
.scramble{display:inline-flex}
.lt{display:inline-block;min-width:.15ch}
.art-mask{position:relative;display:inline-flex}
.art-mask::after{
  content:"art";position:absolute;inset:0;
  color:var(--accent);clip-path:inset(0 100% 0 0);
  pointer-events:none;
}
.art-mask.reveal::after{
  animation:artWipe .55s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes artWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
.hero p{
  max-width:52ch;margin-top:30px;font-size:clamp(20px,1.5vw,24px);
  color:var(--ink-dim);font-weight:500;
  opacity:0;animation:fade .8s ease 1.6s forwards;
}
.hero p b{color:var(--ink);font-weight:700}
.h-cta{
  margin-top:clamp(32px,5vh,52px);display:flex;gap:28px;flex-wrap:wrap;align-items:center;
  opacity:0;animation:fade .8s ease 1.9s forwards;
}
.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:15px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);
  opacity:0;
  animation:fade .6s ease 2.2s forwards, bob 2.4s ease-in-out 2.2s infinite;
}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* ---------- section chrome ---------- */
section{padding:clamp(70px,10vh,130px) var(--pad)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,5vh,64px);flex-wrap:wrap}
.sec-head h2{font-size:clamp(35px,4.6vw,68px);font-weight:400;line-height:1.02}
.sec-head .count{font-size:18px;font-weight:700;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase}
/* ---------- links & buttons ---------- */
.link-plain{
  font-weight:700;font-size:18px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);transition:color .3s;position:relative;
}
.link-plain::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.19,1,.22,1);
}
.link-plain:hover{color:var(--ink)}
.link-plain:hover::after{transform:scaleX(1);transform-origin:left}

.btn{
  display:inline-block;
  font-family:'Archive','Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(19px,1.4vw,23px);
  background:var(--accent);color:#fff;
  padding:20px 44px;border-radius:100px;
  transition:transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s ease, background .3s ease;
  box-shadow:0 10px 34px -10px rgba(229,38,0,.55);
}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 44px -12px rgba(229,38,0,.7)}
.btn-sm{font-size:18px;padding:15px 30px}


/* ---------- istaknuti radovi (carousel) ---------- */
:root{--tgap:18px}
.fcar{position:relative}
.fcar-viewport{overflow:hidden;margin:0 calc(var(--pad) * -1);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.fcar-viewport.dragging{cursor:grabbing}
.fcar-track{display:flex;gap:var(--tgap);transition:transform .65s cubic-bezier(.19,1,.22,1)}
.mtile{
  position:relative;display:block;flex:0 0 calc((100% - 2 * var(--tgap)) / 3);
  aspect-ratio:4/5;overflow:hidden;background:var(--dark-2);border:none;
}
.mtile img{
  position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  object-fit:cover;object-position:top;display:block;border:none;
  transition:transform .7s cubic-bezier(.19,1,.22,1);
}
.mtile:hover img, .mtile:focus-visible img{transform:scale(1.06)}
/* hover: slika ostaje vidljiva, zatamni se gradijentom odozdo (za tekst) i odozgo (za oznaku) */
.mtile::after{
  content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;border:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 62%, rgba(0,0,0,.97) 100%);
  opacity:0;transition:opacity .5s ease;
}
.mtile:hover::after, .mtile:focus-visible::after{opacity:1}
/* strelica u gornjem desnom kutu, ulazi iz kuta uz lagano okretanje */
.mlink{
  position:absolute;top:18px;right:18px;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.mlink svg{
  width:48px;height:48px;padding:13px;box-sizing:border-box;border:none;
  background:#fff;border-radius:50%;color:var(--accent);
  opacity:0;transform:translate(14px,-14px) scale(.5) rotate(-30deg);
  transition:opacity .35s ease, transform .55s cubic-bezier(.19,1,.22,1);
}
.mtile:hover .mlink svg, .mtile:focus-visible .mlink svg{opacity:1;transform:none}
/* redni broj i oznaka u istom retku, gore lijevo */
.midx{
  position:absolute;left:24px;top:30px;z-index:2;border:none;
  font-size:19px;color:#fff;letter-spacing:.1em;line-height:1;
  opacity:0;transform:translateY(-10px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.19,1,.22,1);
}
.meyebrow{
  position:absolute;left:0;right:76px;top:30px;z-index:1;border:none;
  display:flex;align-items:center;padding:0 0 0 64px;box-sizing:border-box;line-height:1;
  font-size:15px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  opacity:0;transform:translateY(-10px);
  transition:opacity .35s ease .05s, transform .45s cubic-bezier(.19,1,.22,1) .05s;
}
.mtile:hover .midx, .mtile:focus-visible .midx,
.mtile:hover .meyebrow, .mtile:focus-visible .meyebrow{opacity:1;transform:none}
/* naziv i opis leže na gradijentu, bez crne ploče; ulaze odozdo jedno za drugim */
.mtext{
  position:absolute;left:0;right:0;bottom:0;z-index:1;border:none;
  padding:0 clamp(18px,1.7vw,24px) clamp(20px,2.2vw,30px);box-sizing:border-box;
  display:flex;flex-direction:column;gap:10px;
}
.mname{
  color:#fff;font-weight:700;font-style:normal;
  font-size:clamp(26px,1.9vw,32px);line-height:1.2;
  opacity:0;transform:translateY(22px);
  transition:opacity .4s ease, transform .6s cubic-bezier(.19,1,.22,1);
}
/* crvena crta koja se izvuče ispod naziva */
.mname::after{
  content:"";display:block;width:0;height:3px;margin-top:12px;background:var(--accent);
  transition:width .55s cubic-bezier(.19,1,.22,1) .18s;
}
.mhook{
  color:rgba(255,255,255,.9);font-weight:500;font-style:normal;
  font-size:clamp(16px,1.4vw,19px);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  opacity:0;transform:translateY(22px);
  transition:opacity .4s ease .08s, transform .6s cubic-bezier(.19,1,.22,1) .08s;
}
.mtile:hover .mname, .mtile:focus-visible .mname,
.mtile:hover .mhook, .mtile:focus-visible .mhook{opacity:1;transform:none}
.mtile:hover .mname::after, .mtile:focus-visible .mname::after{width:48px}
/* bez hovera (touch): sve je odmah vidljivo, na crnoj podlozi umjesto gradijenta */
@media (hover:none){
  .midx,.meyebrow,.mname,.mhook{opacity:1;transform:none;transition:none}
  .mname::after{width:48px}
  .mtile::after{opacity:1}
  .mtext{background:rgba(0,0,0,.72);padding:16px 18px;gap:6px}
}
/* mobilni carousel: kategorija iznad slike, cijela slika, tekst ispod slike */
@media (max-width:900px){
  .mtile{aspect-ratio:auto;display:flex;flex-direction:column}
  .mtile img{position:relative;inset:auto;width:100%;height:auto;order:1}
  .meyebrow{position:relative;left:auto;right:auto;top:auto;order:0;padding:16px 18px 16px 64px;background:#000}
  .midx{position:absolute;left:18px;top:16px;right:auto}
  .mtext{position:relative;left:auto;right:auto;bottom:auto;order:2;padding:18px;gap:6px;background:#000}
  .midx,.meyebrow,.mname,.mhook{opacity:1;transform:none;transition:none}
  .mname::after{width:36px;margin-top:8px}
  .mtile::after{display:none}
  .mlink{display:none}
  .mtile:hover img, .mtile:focus-visible img{transform:none}
}
@media (max-width:560px){
  .meyebrow{font-size:14px}
  .mname{font-size:22px}
  .mhook{font-size:16px}
  .midx{font-size:17px}
}

.sec-head:has(.fcar-nav){align-items:center}
.fcar-nav{
  display:flex;align-items:center;gap:clamp(12px,1.8vw,20px);flex-shrink:0;
}
.fcar-btn{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--accent);background:var(--accent);color:#fff;
  font-size:18px;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(229,38,0,.6);
  transition:transform .3s ease, box-shadow .3s ease;
}
.fcar-btn:hover{transform:scale(1.1);box-shadow:0 10px 24px -8px rgba(229,38,0,.75)}
.fcar-btn:active{transform:scale(.96)}
.fcar-count{
  font-family:'Archive','Archivo Black',sans-serif;font-size:19px;letter-spacing:.1em;
  color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fcar-count b{color:var(--accent);font-weight:400;display:inline-block}
.fcar-count b.is-ticking{animation:countTick .45s cubic-bezier(.19,1,.22,1)}
@keyframes countTick{from{opacity:0;transform:translateY(60%)}}
.fcar-sep{margin:0 .45em;opacity:.6}
/* prsten oko strelice: odbrojava do sljedećeg automatskog pomaka */
.fcar-next{position:relative}
.fcar-ring{
  position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);
  transform:rotate(-90deg);pointer-events:none;overflow:visible;
}
.fcar-ring circle{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .4s ease;
}
.fcar-nav.is-auto .fcar-ring circle{opacity:.9}
.fcar-nav.is-auto.is-running .fcar-ring circle{animation:ringFill var(--fcar-delay,4.5s) linear forwards}
@keyframes ringFill{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.fcar-bar{
  display:block;width:100%;height:1px;background:var(--line);position:relative;
  margin-bottom:clamp(24px,3.5vh,40px);
}
.fcar-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.19,1,.22,1)}

@media (max-width:900px){.mtile{flex:0 0 100%}}

/* ---------- light band (bg-2) ---------- */
.light-band{
  background:var(--light) url('../img/bg-2.webp') repeat;
  color:var(--light-ink);
  border-radius:clamp(20px,3vw,40px);
  margin:0 clamp(8px,1.2vw,20px);
  box-shadow:0 -30px 80px -50px rgba(0,0,0,.8), 0 30px 80px -50px rgba(0,0,0,.8);
}
.light-band .sec-head .count{color:rgba(28,26,23,.4)}
.light-band ::selection{background:var(--light-ink);color:var(--light)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.cell{
  position:relative;aspect-ratio:4/3;display:block;overflow:hidden;border:none;
  background:var(--dark-2);
}
.cell img{
  position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  object-fit:cover;object-position:top;display:block;border:none;
  transition:transform .5s ease;
}
.cell:hover img{transform:scale(1.04)}
.cell-overlay{
  position:absolute;top:-100%;left:0;width:100%;height:100%;z-index:1;
  background:var(--dark-2) url('../img/bg.webp') repeat;
  padding:24px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:10px;
  visibility:hidden;pointer-events:none;
}
.cell .sector{font-size:16px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.cell h3{font-size:26px;font-weight:700;line-height:1.2;color:var(--accent)}
.cell p{font-size:20px;line-height:1.5;color:rgba(255,255,255,.85);flex:1}
.cell .url{font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--accent);opacity:.85}
.cell:focus-visible .cell-overlay{visibility:visible;top:0;left:0}
@media (hover: none){
  .cell{aspect-ratio:auto;display:flex;flex-direction:column}
  .cell img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3}
  .cell-overlay{position:relative!important;visibility:visible!important;pointer-events:auto;top:0!important;left:0!important;height:auto}
}

/* ---------- usluge ---------- */
/* klijenti: bijeli logotipi u mreži */
.clients{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.client{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;padding:20px;background:rgba(20,20,20,.72);overflow:hidden;
  transition:background .35s ease;
}
.client::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 120%, var(--accent-soft), transparent 70%);
  opacity:0;transition:opacity .45s ease;
}
.client:hover::before{opacity:1}
.client img{
  position:relative;display:block;width:auto;height:auto;
  max-width:72%;max-height:var(--h,44px);
  filter:brightness(0) invert(1);opacity:.62;
  transition:opacity .35s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.client:hover img, .client:hover .client-word{opacity:1;transform:scale(1.06)}
.client-word{
  position:relative;color:#fff;opacity:.62;text-align:center;line-height:1;
  transition:opacity .35s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.client-word--knjaz{font-family:'Archive','Archivo Black',sans-serif;font-size:clamp(22px,2vw,30px);text-transform:uppercase;letter-spacing:.04em}
.client-word--knjaz b{font-weight:inherit;opacity:.55}
.client-word--hdd{font-family:'Archive','Archivo Black',sans-serif;font-size:clamp(28px,2.6vw,40px);letter-spacing:.06em}
.client-word--hdd small{display:block;margin-top:8px;font-family:'Quicksand',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:1024px){.clients{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.clients{grid-template-columns:repeat(2,1fr)}}

.services{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.svc{
  background:rgba(20,20,20,.72);padding:clamp(24px,3vw,40px);
  position:relative;overflow:hidden;transition:background .35s ease;
}
.svc::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.svc:hover::after{transform:scaleX(1)}
.svc:hover{background:var(--accent-soft)}
.svc-no{font-family:'Archive','Archivo Black',sans-serif;font-size:18px;color:var(--accent);letter-spacing:.14em;margin-bottom:14px}
.svc h3{font-size:22px;font-weight:700;margin-bottom:10px}
.svc p{font-size:19px;color:var(--ink-dim)}
.svc.featured{grid-column:span 2}
.svc.featured::after{transform:scaleX(1)}
.svc.featured .svc-no{font-size:20px}
.svc.featured h3{font-size:clamp(27px,2.2vw,32px);margin-bottom:14px}
.svc.featured p{font-size:20px;max-width:46ch}

/* ---------- usluge: ulazne animacije (JS dodaje .anim samo kad animacije nisu isključene) ---------- */
/* naslov: svako slovo izlazi iz maskiranog retka, s laganim zaokretom */
#usluge .sec-head .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .18em;margin:0 -.04em -.18em}
#usluge.anim .sec-head .l{
  display:inline-block;transform:translateY(130%) rotate(5deg);transform-origin:left bottom;
  transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 45ms);
}
#usluge.anim.is-in-head .sec-head .l{transform:none}
/* kartice: dijagonalni stagger (red i stupac računa JS), otkrivaju se odozgo i dižu */
#usluge.anim .svc{
  opacity:0;transform:translateY(46px) scale(.96);clip-path:inset(0 0 100% 0);
  transition:opacity .6s ease var(--d,0ms), transform .9s cubic-bezier(.16,1,.3,1) var(--d,0ms),
             clip-path .9s cubic-bezier(.16,1,.3,1) var(--d,0ms), background .35s ease;
}
#usluge.anim.is-in-grid .svc{opacity:1;transform:none;clip-path:inset(0)}
/* sadržaj kartice ulazi nakon nje, u tri koraka */
#usluge.anim .svc-no, #usluge.anim .svc h3, #usluge.anim .svc p{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
#usluge.anim.is-in-grid .svc-no{opacity:1;transform:none;transition-delay:calc(var(--d,0ms) + 180ms)}
#usluge.anim.is-in-grid .svc h3{opacity:1;transform:none;transition-delay:calc(var(--d,0ms) + 260ms)}
#usluge.anim.is-in-grid .svc p{opacity:1;transform:none;transition-delay:calc(var(--d,0ms) + 340ms)}
/* crvena crta jednom prođe kroz karticu kad uđe; poslije opet reagira na hover */
#usluge.anim.is-in-grid .svc:not(.featured)::after{animation:svcSweep 1.1s cubic-bezier(.77,0,.18,1) calc(var(--d,0ms) + 300ms) backwards}
@keyframes svcSweep{
  0%{transform:scaleX(0);transform-origin:left}
  45%{transform:scaleX(1);transform-origin:left}
  55%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}
/* reflektor koji prati miš preko mreže; kartice su poluprozirne pa sjaj prolazi kroz njih i kroz linije mreže */
.services{position:relative;--mx:50%;--my:50%}
.services::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx) var(--my), rgba(229,38,0,.55), transparent 65%);
  opacity:0;transition:opacity .5s ease;
}
.services:hover::before{opacity:1}
.svc{z-index:1}

/* ---------- brojke ---------- */
.figures{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border-radius:var(--radius);overflow:hidden;
}
.fig{background:rgba(20,20,20,.72);padding:clamp(26px,3vw,44px);transition:background .35s ease}
.fig:hover{background:var(--accent-soft)}
.fig .num{
  font-family:'Archive','Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(50px,6vw,85px);line-height:1;
  font-variant-numeric:tabular-nums;
}
.fig .num b{color:var(--accent);font-weight:400}
.fig .lbl{margin-top:12px;font-size:16px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.fig .desc{margin-top:10px;font-size:19px;line-height:1.7;color:var(--ink-dim)}

/* ---------- CTA / kontakt ---------- */
.cta{text-align:left;padding-top:clamp(90px,14vh,160px);padding-bottom:clamp(90px,14vh,160px);position:relative}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 45% at 15% 40%, rgba(229,38,0,.11), transparent 70%);
}
.cta-grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(40px,6vw,90px);
  align-items:start;margin-top:clamp(36px,5vh,56px);
}
.cta h2{font-size:clamp(38px,5.6vw,81px);font-weight:400;line-height:1.04;max-width:16ch}
.cta p{color:var(--ink-dim);max-width:44ch;margin:24px 0 40px;font-size:clamp(20px,1.5vw,23px);font-weight:500}
.c-meta{
  display:flex;flex-direction:column;gap:clamp(28px,4vh,44px);
  padding-top:clamp(8px,1.5vh,16px);border-left:1.5px solid var(--line);
  padding-left:clamp(28px,3vw,44px);
  font-size:19px;line-height:2;color:var(--ink-dim);font-weight:500;
}
.c-meta strong{
  display:block;font-weight:700;color:var(--ink);
  font-size:15px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:6px;
}
.c-meta a{transition:color .3s ease}
.c-meta a:hover{color:var(--accent)}
@media (max-width:800px){
  .cta-grid{grid-template-columns:1fr}
  .c-meta{border-left:none;padding-left:0;border-top:1.5px solid var(--line);padding-top:28px;flex-direction:row;flex-wrap:wrap;gap:clamp(28px,6vw,48px)}
}


/* ---------- traka usluga: isti jezik kao oznake poglavlja (mala verzalna slova, razmak, crveni broj) ---------- */
.ticker{
  margin:0 var(--pad);padding:16px 0;overflow:hidden;white-space:nowrap;
  /* rubovi se gase, da tekst ne bude odrezan na liniji margine */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker .track{display:inline-flex;animation:tick 90s linear infinite;will-change:transform}
.ticker:hover .track{animation-play-state:paused}
.ticker .copy{display:inline-flex}
/* traka sjedi bliže susjednim sekcijama: klijenti dolje i kontakt gore imaju manji razmak */
#klijenti{padding-bottom:clamp(44px,5vh,72px)}
#kontakt{padding-top:clamp(48px,6vh,80px)}
.ticker .copy > span{
  display:inline-flex;align-items:baseline;margin-right:clamp(28px,3vw,48px);
  font-size:15px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
  transition:color .3s ease;
}
.ticker .copy > span:hover{color:var(--ink)}
.ticker b{color:var(--accent);font-weight:700;margin-right:.9em}
@keyframes tick{to{transform:translateX(-25%)}}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}
.mtile.rv{opacity:0;transform:translateY(90px) scale(.94);transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1)}
.mtile.rv.in{opacity:1;transform:none}
.cell.rv{opacity:0;transform:translateY(56px);transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1)}
.cell.rv.in{opacity:1;transform:none}

/* arhiva: prva 2 reda, ostalo se otkriva gumbom "Prikaži još" (po 2 reda) */
.grid > .cell.is-off{display:none}
.grid-more{display:flex;justify-content:center;padding-top:clamp(36px,4vw,56px)}
.grid-more[hidden]{display:none}
.grid-more-btn{border:none;cursor:pointer}
.grid-more-n{opacity:.7}
.grid-more.is-leaving{animation:moreOut .45s cubic-bezier(.7,0,.84,0) forwards}
@keyframes moreOut{to{opacity:0;transform:scale(.6)}}
/* novootkrivene kartice: crveni zastor prijeđe preko, a kartica se otkriva ispod njega */
.cell.cell-pop{animation:cellPop 1s cubic-bezier(.16,1,.3,1) var(--d,0s) backwards}
.cell.cell-pop img{animation:cellImg 1.4s cubic-bezier(.16,1,.3,1) var(--d,0s) backwards}
.cell.cell-pop::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--accent);transform:scaleY(0);transform-origin:bottom;
  animation:cellWipe .9s cubic-bezier(.77,0,.18,1) var(--d,0s) both;
}
@keyframes cellPop{
  from{opacity:0;transform:translateY(70px);clip-path:inset(100% 0 0 0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes cellImg{from{transform:scale(1.35)}}
@keyframes cellWipe{
  0%{transform:scaleY(0);transform-origin:bottom}
  45%{transform:scaleY(1);transform-origin:bottom}
  55%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(0);transform-origin:top}
}

@media (max-width:900px){
  .figures{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,1fr)}
  .svc.featured{grid-column:span 2}
}
@media (max-width:560px){
  .services{grid-template-columns:1fr}
  .svc.featured{grid-column:span 1}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .l span{transform:none}
  .hero p,.h-cta{opacity:1}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}