/* ============================================================
   NOVA, "Brutalist Editorial"
   Crni vertikalni rail sa leve strane + kost-bela sadrzajna strana.
   Bez zaobljenja, bez senki, vidljiv grid, tipografija koja bezi
   preko desne ivice.
   ============================================================ */
:root{
  --bone:#eeece7;     /* kost, glavna pozadina */
  --bone2:#e4e1da;    /* drugi sloj */
  --ink:#0a0a0a;      /* crno */
  --ink2:#6a675f;     /* prigusen tekst */
  --acid:#d4ff2f;     /* kiselo zelena, jedini akcent */
  --hair:rgba(10,10,10,.14);
  --rail:248px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:'Inter',sans-serif;
     overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.big em,.pt{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:-.02em}
.mono{font-family:'Space Grotesk',monospace}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--acid);color:var(--ink)}

/* kursor */
.cur{position:fixed;width:11px;height:11px;background:var(--ink);border-radius:50%;
     pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
     transition:width .25s,height .25s,background .25s;mix-blend-mode:difference}
.cur.big{width:56px;height:56px;background:var(--acid)}
@media(max-width:900px){.cur{display:none}body{cursor:auto}}

/* ikonice */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.1em;fill:none;
    stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============ LEVI RAIL ============ */
.rail{position:fixed;top:0;left:0;width:var(--rail);height:100vh;background:var(--ink);
      color:var(--bone);display:flex;flex-direction:column;justify-content:space-between;
      padding:34px 30px;z-index:90}
.rail .logo{font-size:27px;color:var(--bone);letter-spacing:-.03em;line-height:1}
.rail .logo span{color:var(--acid)}
.rail-nav{display:flex;flex-direction:column;gap:4px;margin-top:auto;margin-bottom:auto}
.rail-nav a{display:flex;align-items:baseline;gap:12px;font-family:'Syne',sans-serif;
            font-weight:700;font-size:25px;letter-spacing:-.02em;padding:9px 0;
            color:var(--bone);position:relative;transition:.22s}
.rail-nav a i{font-family:'Space Grotesk',monospace;font-style:normal;font-size:10.5px;
              color:#77736a;letter-spacing:.1em;flex:none}
.rail-nav a::after{content:"";position:absolute;left:-30px;top:50%;width:0;height:2px;
                   background:var(--acid);transition:.25s;transform:translateY(-50%)}
.rail-nav a:hover{color:var(--acid);padding-left:12px}
.rail-nav a:hover::after{width:22px}
.rail-foot{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#77736a}
.avail{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--bone)}
.pulse{width:7px;height:7px;background:var(--acid);border-radius:50%;flex:none;
       animation:pl 1.7s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.rail-soc{display:flex;gap:14px;margin-bottom:16px}
.rail-soc a{color:#77736a;transition:.2s}
.rail-soc a:hover{color:var(--acid)}
.rail-cr{color:#4f4c46}

/* mobilni bar */
.mbar{display:none;position:fixed;top:0;left:0;right:0;z-index:95;background:var(--ink);
      color:var(--bone);padding:16px 22px;align-items:center;justify-content:space-between}
.mbar .logo{font-size:22px;color:var(--bone)}
.mbar .logo span{color:var(--acid)}

/* ============ STAGE ============ */
.stage{margin-left:var(--rail);min-height:100vh}
section{padding:110px 56px;border-top:1px solid var(--hair)}
@media(max-width:1100px){
  :root{--rail:0px}
  .rail{display:none}
  .mbar{display:flex}
  .stage{margin-left:0;padding-top:62px}
  section{padding:74px 26px}
}

/* ============ HERO ============ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;
      justify-content:center;padding:120px 56px 90px;overflow:hidden}
.grid-lines{position:absolute;inset:0;display:flex;pointer-events:none}
.grid-lines i{flex:1;border-right:1px solid var(--hair)}
.grid-lines i:last-child{border-right:0}
.ey{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2);
    margin-bottom:30px;position:relative}
.hero h1{font-size:clamp(46px,8.4vw,132px);line-height:.9;letter-spacing:-.035em;
         position:relative;margin-right:-8vw}
.hero h1 .out{-webkit-text-stroke:2px var(--ink);color:transparent}
.hero h1 em{font-style:normal;background:var(--acid);padding:0 .12em;
            box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sub{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;
     margin-top:52px;position:relative;flex-wrap:wrap}
.sub p{max-width:46ch;color:var(--ink2);font-size:16.5px;line-height:1.7}
.nbtn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--bone);
      padding:14px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
      font-weight:500;transition:.22s;flex:none}
.nbtn:hover{background:var(--acid);color:var(--ink)}
.scroll-i{position:absolute;bottom:34px;right:56px;font-size:10px;letter-spacing:.28em;
          color:var(--ink2);display:flex;align-items:center;gap:10px}
.scroll-i .dot{width:5px;height:5px;background:var(--ink);border-radius:50%;
               animation:dn 1.6s ease-in-out infinite}
@keyframes dn{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(7px);opacity:.3}}
@media(max-width:1100px){.hero{padding:100px 26px 70px;min-height:auto}.scroll-i{display:none}}

/* ============ MARQUEE ============ */
.marq{background:var(--ink);color:var(--bone);padding:17px 0;overflow:hidden;
      border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.marq .track{display:flex;align-items:center;gap:30px;white-space:nowrap;
             animation:mq 26s linear infinite;width:max-content}
.marq span{font-family:'Syne',sans-serif;font-weight:800;font-size:29px;letter-spacing:-.01em}
.marq .o{-webkit-text-stroke:1.4px var(--bone);color:transparent}
.marq .sp{width:19px;height:19px;color:var(--acid);stroke-width:1.5}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ zaglavlje sekcije ============ */
.sec-h{display:flex;align-items:baseline;gap:20px;margin-bottom:52px}
.sec-h .num{font-size:11.5px;letter-spacing:.14em;color:var(--ink2)}
.sec-h h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.03em}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ============ SERVICES ============ */
.srv{border-top:1px solid var(--hair)}
.srv-row{display:grid;grid-template-columns:64px 1fr auto 44px;align-items:center;gap:22px;
         padding:30px 0;border-bottom:1px solid var(--hair);transition:.25s;position:relative}
.srv-row .n{font-size:11.5px;color:var(--ink2);letter-spacing:.12em}
.srv-row h3{font-size:clamp(22px,2.7vw,38px);letter-spacing:-.025em;transition:.25s}
.srv-row .tags{font-size:12.5px;color:var(--ink2);letter-spacing:.03em}
.srv-row .ar{font-size:19px;justify-self:end;color:var(--ink2);transition:.25s}
.srv-row:hover{padding-left:22px;background:var(--acid)}
.srv-row:hover .ar,.srv-row:hover .n,.srv-row:hover .tags{color:var(--ink)}
@media(max-width:760px){
  .srv-row{grid-template-columns:44px 1fr 30px;gap:14px}
  .srv-row .tags{display:none}
}

/* ============ WORK, numerisana lista ============ */
.work{border-top:1px solid var(--hair)}
.proj{display:grid;grid-template-columns:64px 1fr 190px 74px;align-items:center;gap:22px;
      padding:26px 0;border-bottom:1px solid var(--hair);position:relative;transition:.25s}
.proj .pn{font-size:11.5px;color:var(--ink2);letter-spacing:.12em}
.proj .pt{font-size:clamp(21px,2.6vw,36px);letter-spacing:-.025em}
.proj .pc{font-size:11.5px;color:var(--ink2);letter-spacing:.1em;text-transform:uppercase}
.proj .py{font-size:11.5px;color:var(--ink2);justify-self:end}
.proj img{position:absolute;right:96px;top:50%;width:210px;height:132px;object-fit:cover;
          transform:translateY(-50%) scale(.86);opacity:0;pointer-events:none;
          transition:.32s cubic-bezier(.2,.7,.2,1);z-index:5}
.proj:hover{padding-left:22px}
.proj:hover img{opacity:1;transform:translateY(-50%) scale(1)}
.proj:hover .pt{color:var(--ink)}
@media(max-width:900px){
  .proj{grid-template-columns:44px 1fr 60px;gap:14px}
  .proj .pc{display:none}
  .proj img{display:none}
}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair)}
.stat{padding:38px 26px 38px 0;border-right:1px solid var(--hair)}
.stat:last-child{border-right:0}
.stat .big{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.04em}
.stat .big em{font-style:normal}
.stat p{margin-top:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid var(--hair)}}

/* ============ CTA ============ */
.cta{background:var(--ink);color:var(--bone);border-top:0}
.cta .sec-h .num,.cta .sec-h h2{color:var(--bone)}
.cta .shout{font-size:clamp(42px,8.6vw,124px);line-height:.92;letter-spacing:-.04em;margin:10px 0 46px}
.cta .shout a{color:var(--acid);text-decoration:none}
.cta .shout a:hover{background:var(--acid);color:var(--ink)}
.big-btn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--bone);
         color:var(--bone);padding:20px 42px;font-size:13px;letter-spacing:.16em;
         text-transform:uppercase;font-weight:500;transition:.22s}
.big-btn:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#77736a;padding:34px 56px;display:flex;
       justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;
       border-top:1px solid rgba(255,255,255,.1)}
footer .soc{display:flex;gap:24px}
footer a:hover{color:var(--acid)}
@media(max-width:1100px){footer{padding:28px 26px}}

/* ---------- dvojezicnost, HR i EN ----------
   Oba jezika stoje u HTML-u, prebacuje se preko data-lang na <html>.
   Radi i bez JavaScripta. display:contents znaci da omotac ne dira raspored. */
i.en,i.hr{display:contents;font-style:inherit}
html[data-lang="en"] i.hr,
html[data-lang="hr"] i.en{display:none}

.lang{display:flex;border:1px solid currentColor;opacity:.85;margin:0 12px}
.lang button{background:none;border:0;color:inherit;cursor:pointer;
  font:500 12px/1 inherit;letter-spacing:.1em;padding:8px 11px;font-family:inherit}
.lang button[aria-pressed="true"]{background:currentColor}
.lang button[aria-pressed="true"]{color:inherit;filter:invert(1)}

/* Nav mora podnijeti duze hrvatske rijeci i prekidac jezika.
   Bez ovoga se brend i prva stavka dodiruju. */
nav > div, header > div, #nav > div{gap:26px;flex-wrap:wrap}
.lang{flex:none}