/* =====================================================================
   KOMUNA v3 - DELJENI VIZUELNI SISTEM (naslovna, O nama, Portfolio kategorija)
   ---------------------------------------------------------------------
   STIL VODIC (drugi dizajneri: pratite ovo 1:1, kreativni ste u rasporedu sekcija)

   Pravac: „projekciona sala" - savremeni filmski modernizam. Tamna topla pozadina,
   plakati i arhiva su glavni akteri (u punoj boji, nikad zatamnjeni velom), puno
   vazduha, jaka tipografska hijerarhija, crvena kao retka akcentna boja.

   FONTOVI
   - Bodoni Moda 500 (--f-mark)  SAMO za wordmark „KOMUNA" (ucitavaju se samo ta slova).
   - Archivo (--f-sans, variable wdth+wght) - SVI naslovi i tekst.
       naslovi: font-stretch 82% (poluuzan, „filmska spica"), wght 560-650, tracking -0.02em
       tekst:   font-stretch 100%, wght 400, 17px/1.6
   - IBM Plex Mono (--f-mono) - metapodaci: godine, format, brojevi, labele, timecode.
   BOJE (60/30/10): --ink pozadina, --cream tekst, --red akcenat (dugme, tacka, aktivno).
     Svetla sekcija za ritam: --paper sa --ink tekstom. Crvenih sekcija NEMA (krug 2).
     Tamne sekcije nose .v3-tex (tekstura), footer ima liniju-lenjir i bez copyright traku.
   RADIJUS: pravougaono (0) za kadrove/plakate/dugmad; --r-pill samo za „chip" izbore.
   MOTION: sporo i meko (--ease-out, 0.9-1.2s), scroll-scrub za 1 efekat po sekciji.
     Uvek postuj prefers-reduced-motion (klasa html.v3-rm gasi sve).

   KOMPONENTE / KLASE KOJE STRANE KORISTE
   .v3-wrap            kontejner (bocni padding --pad, max 1680)
   .v3-sec             sekcija (vertikalni ritam --sec)
   .v3-lab             mono labela sa crvenom tackom       .v3-mono  mono tekst
   .v3-d1/.v3-d2/.v3-h3 tipografska skala naslova          .v3-p     tekst paragrafa
   .v3-btn / .v3-btn--ghost / .v3-btn--light   dugmad (unutra <span data-t="Tekst">Tekst</span> za roll hover)
   .v3-link            tekst link sa strelicom (<a class="v3-link">Tekst <i>→</i></a>)
   .v3-ul              link sa podvlakom koja se crta na hover
   .v3-frame           kadar za plakat 2:3 (img object-fit cover) + .v3-frame--marks uglovi kadra
   .v3-on-paper / .v3-on-red   promena teme sekcije (pozadina + boje teksta)
     KRUG 2 (Ivan 24.09): NEMA crvenih pozadina sekcija. .v3-on-red je od sada isto sto i
     bez sekcija (--paper, tamni tekst) - klasa ostaje samo radi kompatibilnosti; unutar nje
     su --cream/--cream-2/--cream-3/--line preusmereni na tamne tonove, pa komponente koje
     koriste tokene same prelaze u tamno. Crvena = samo sitan akcenat (tacka, dugme, aktivno).
     U CSS-u strane ne koristiti hardkodovan rgba(243,237,227,..) unutar svetle sekcije.
   .v3-tex             TEKSTURA tamne sekcije: tanka mreza + registracione oznake „+" + blag
     odsjaj odozgo (sloj ::before, z-index:-1, sekcija dobija isolation). Stavlja se na TAMNE
     sekcije (i na svetle - sama prelazi u tamne linije). Sekcija mora imati position
     (relative/sticky) - klasa ga ne namece. Ne koristiti ::before na istom elementu.
     .v3-tex--img + style="--tex-img:url(...)"  dodaje ekstremno bledu c/b fotografiju
     (sloj ::after, --tex-o menja jacinu, podrazumevano .07; na bez sekciji multiply).
   DRAG (v3.js): V3.drag(el, opcije) - prevlacenje misem i prstom za svaku traku/karusel.
     V3.drag(scrollEl)                 el sa overflow-x:auto -> mis prevlaci scrollLeft sa
                                        inercijom (touch ostaje nativan); scroll-snap radi.
     V3.drag(el, {onSwipe: fn(dir)})   swipe gest (dir 1 = sledeci, -1 = prethodni), mis+touch
     V3.drag(el, {onStart, onMove: fn(dx), onEnd: fn(vx)})  sopstveno ponasanje (npr. traka
                                        koju pomera skrol: dx pretvoris u skrol strane)
     Klik posle prevlacenja se gasi (linkovi u traci ne okidaju). Kursor grab/grabbing sam.
   REVEAL (v3.js): data-rv (fade+up), data-rv="clip" (slika se otvara clip-path-om),
     data-split (naslov ulazi red po red iz maske), data-d="1..6" kasnjenje,
     data-parallax="0.15" (slika plovi po y na skrol; roditelj mora imati overflow:hidden)
   QA: ?noanim=1 gasi animacije, ?at=<id> skroluje do sekcije.
===================================================================== */

:root{
  --ink:#0C0B0A;
  --ink-2:#141311;
  --ink-3:#1D1B18;
  --cream:#F3EDE3;
  --cream-2:rgba(243,237,227,.66);
  --cream-3:rgba(243,237,227,.4);
  --paper:#EAE3D6;
  --paper-2:#DDD4C4;
  --ink-on-paper:#1A1815;
  --mute-on-paper:#6A6358;
  --red:#C8102E;
  --red-hi:#E2253F;          /* hover = svetlija crvena */
  --line:rgba(243,237,227,.14);
  --line-2:rgba(243,237,227,.07);

  --f-mark:"Bodoni Moda",Georgia,serif;
  --f-sans:"Archivo",-apple-system,"Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --fs-mark:clamp(64px,13.4vw,248px);
  --fs-d1:clamp(44px,6.4vw,112px);
  --fs-d2:clamp(34px,4.4vw,76px);
  --fs-h3:clamp(22px,2vw,32px);
  --fs-p:17px;
  --fs-sm:14px;
  --fs-mono:12px;

  --pad:clamp(20px,4.6vw,88px);
  --sec:clamp(96px,13vw,200px);
  --head-h:88px;
  --r-pill:999px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --t-fast:.35s;
  --t-med:.7s;
  --t-slow:1.2s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body.v3_body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--f-sans);font-size:var(--fs-p);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ol,ul,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
::selection{background:var(--red);color:var(--cream)}
:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}

/* ---------- layout ---------- */
.v3-wrap{width:100%;max-width:1680px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.v3-sec{padding-top:var(--sec);padding-bottom:var(--sec);position:relative}
.v3-on-paper{background:var(--paper);color:var(--ink-on-paper)}
.v3-on-paper .v3-lab,.v3-on-paper .v3-mono{color:var(--mute-on-paper)}
/* krug 2: .v3-on-red = bez sekcija (crvene pozadine se ne koriste); tokeni preusmereni na tamno */
.v3-on-red{background:var(--paper);color:var(--ink-on-paper);
  --cream:#1A1815;--cream-2:rgba(26,24,21,.74);--cream-3:rgba(26,24,21,.52);--line:rgba(26,24,21,.2);--line-2:rgba(26,24,21,.1)}
.v3-on-red .v3-lab,.v3-on-red .v3-mono{color:var(--mute-on-paper)}
.v3-on-red .v3-p{color:var(--mute-on-paper)}

/* ---------- tekstura tamne sekcije (.v3-tex) ---------- */
:where(.v3-tex){position:relative}
.v3-tex{isolation:isolate}
.v3-tex::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(243,237,227,.045),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cpath d='M0 .5H168M.5 0V168' stroke='%23F3EDE3' stroke-opacity='.022'/%3E%3Cpath d='M80 84.5h9M84.5 80v9' stroke='%23F3EDE3' stroke-opacity='.07'/%3E%3C/svg%3E");
  background-position:0 0,calc(var(--pad) - 84px) -84px}
.v3-on-paper.v3-tex::before,.v3-on-red.v3-tex::before{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cpath d='M0 .5H168M.5 0V168' stroke='%231A1815' stroke-opacity='.028'/%3E%3Cpath d='M80 84.5h9M84.5 80v9' stroke='%231A1815' stroke-opacity='.09'/%3E%3C/svg%3E");
  background-position:calc(var(--pad) - 84px) -84px}
.v3-tex--img::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--tex-img) center/cover no-repeat;
  opacity:var(--tex-o,.07);filter:grayscale(1) contrast(1.15)}
.v3-on-paper.v3-tex--img::after,.v3-on-red.v3-tex--img::after{mix-blend-mode:multiply;opacity:var(--tex-o,.1)}

/* ---------- drag (V3.drag) ---------- */
.v3-drag{cursor:grab;-webkit-user-select:none;user-select:none}
.v3-drag img{-webkit-user-drag:none}
.v3-drag.is-drag{cursor:grabbing;scroll-snap-type:none!important}
.v3-drag.is-drag a{pointer-events:none}

/* ---------- tipografija ---------- */
.v3-mark{font-family:var(--f-mark);font-weight:500;letter-spacing:-.01em;line-height:.8}
.v3-d1,.v3-d2,.v3-h3{font-family:var(--f-sans);font-stretch:82%;font-weight:600;letter-spacing:-.02em}
.v3-d1{font-size:var(--fs-d1);line-height:.96}
.v3-d2{font-size:var(--fs-d2);line-height:1}
.v3-h3{font-size:var(--fs-h3);line-height:1.12;font-weight:560}
.v3-p{font-size:var(--fs-p);line-height:1.6;color:var(--cream-2);max-width:60ch}
.v3-on-paper .v3-p{color:var(--mute-on-paper)}
.v3-mono{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3)}
.v3-lab{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2)}
.v3-lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}

/* ---------- linkovi ---------- */
.v3-ul{position:relative;display:inline-block}
.v3-ul::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--t-med) var(--ease-out)}
.v3-ul:hover::after,.v3-ul.is-on::after{transform:scaleX(1);transform-origin:left}
.v3-link{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid currentColor}
.v3-link i{font-style:normal;display:inline-block;transition:transform var(--t-fast) var(--ease-out)}
.v3-link:hover i{transform:translateX(8px)}

/* ---------- dugmad (roll hover: tekst se kotrlja navise) ---------- */
.v3-btn{--bg:var(--red);--fg:var(--cream);--bg-h:var(--red-hi);--fg-h:var(--cream);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;
  background:var(--bg);color:var(--fg);font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.v3-btn::before{content:"";position:absolute;inset:0;background:var(--bg-h);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease-out);z-index:-1}
.v3-btn:hover::before{transform:scaleY(1)}
.v3-btn:hover{color:var(--fg-h)}
/* tekst ostaje u DOM-u (citaci ekrana), vidljiva su dva pseudo reda koja se kotrljaju */
.v3-btn span[data-t]{display:block;height:18px;overflow:hidden;font-size:0}
.v3-btn span[data-t]::before,.v3-btn span[data-t]::after{content:attr(data-t);display:block;font-size:13px;line-height:18px;white-space:nowrap;transition:transform .55s var(--ease-out)}
.v3-btn:hover span[data-t]::before,.v3-btn:hover span[data-t]::after{transform:translateY(-100%)}
.v3-btn i{font-style:normal;transition:transform .55s var(--ease-out)}
.v3-btn:hover i{transform:translateX(5px)}
.v3-btn--ghost{--bg:transparent;--fg:var(--cream);--bg-h:var(--cream);--fg-h:var(--ink);box-shadow:inset 0 0 0 1px var(--cream-3)}
.v3-btn--light{--bg:var(--cream);--fg:var(--red);--bg-h:#fff;--fg-h:var(--red)}
.v3-on-paper .v3-btn--ghost{--fg:var(--ink-on-paper);--bg-h:var(--ink-on-paper);--fg-h:var(--cream);box-shadow:inset 0 0 0 1px rgba(26,24,21,.35)}
.v3-on-red .v3-btn{--fg:#F3EDE3;--fg-h:#F3EDE3}
.v3-on-red .v3-btn--ghost{--fg:var(--ink-on-paper);--bg-h:#3A352E;--fg-h:#F3EDE3;box-shadow:inset 0 0 0 1px rgba(26,24,21,.35)}
.v3-on-red .v3-btn--light{--bg:var(--red);--fg:#F3EDE3;--bg-h:var(--red-hi);--fg-h:#F3EDE3}

/* ---------- kadar za plakat ---------- */
.v3-frame{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--ink-3)}
.v3-frame img{width:100%;height:100%;object-fit:cover}
.v3-frame--marks::before,.v3-frame--marks::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--cream-2);pointer-events:none;z-index:3}
.v3-frame--marks::before{top:-10px;left:-10px;border-right:0;border-bottom:0}
.v3-frame--marks::after{bottom:-10px;right:-10px;border-left:0;border-top:0}

/* ---------- filmsko zrno ---------- */
.v3-grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:v3grain 1s steps(6) infinite}
@keyframes v3grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* ============================ HEADER ============================ */
.v3-head{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--head-h);display:flex;align-items:center;gap:clamp(20px,3vw,48px);padding:0 var(--pad);
  transition:transform .6s var(--ease-out),background-color .4s ease,height .4s var(--ease-out)}
.v3-head.is-solid{background:rgba(12,11,10,.92);--head-h:72px}
.v3-head.is-hidden{transform:translateY(-100%)}
.v3-logo{margin-right:auto;display:block;position:relative;z-index:2}
.v3-logo img{height:60px;width:auto;transition:height .4s var(--ease-out)}
.v3-head.is-solid .v3-logo img{height:50px}
.v3-head_nav{display:flex;align-items:center;gap:clamp(20px,2.2vw,32px);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
/* dropdown produkcija pod „Projekti" (01.10.2026): tamna ploca, lista + plakat; .is-open postavlja v3.js (hover/fokus/klik) */
.v3-dd{position:relative;display:flex;align-items:center;gap:4px}
.v3-dd::after{content:"";position:absolute;left:-24px;right:-24px;top:100%;height:30px}/* most za mis do ploce */
.v3-dd:not(.is-open)::after{pointer-events:none;height:0}
.v3-dd_btn{width:26px;height:26px;display:inline-grid;place-items:center;border-radius:50%;color:var(--cream-2);transition:background-color .3s,color .3s}
.v3-dd_btn i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .5s var(--ease-out)}
.v3-dd_btn:hover,.v3-dd.is-open .v3-dd_btn{color:var(--cream);background:rgba(243,237,227,.08)}
.v3-dd.is-open .v3-dd_btn i{transform:translateY(2px) rotate(-135deg)}
.v3-dd_btn:focus-visible{outline:1px solid var(--red-hi);outline-offset:2px}
.v3-dd_panel{position:absolute;top:calc(100% + 26px);left:-32px;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:28px;width:min(560px,calc(100vw - 2 * var(--pad)));padding:26px 26px 26px 30px;
  background:var(--ink-2);border:1px solid var(--line);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);text-transform:none;letter-spacing:0;white-space:normal;
  visibility:hidden;opacity:0;transform:translateY(-10px);clip-path:inset(0 0 100% 0);transition:opacity .35s,transform .6s var(--ease-out),clip-path .6s var(--ease-out),visibility 0s .6s}
.v3-dd_panel::before{content:"";position:absolute;left:30px;top:-1px;width:42px;height:2px;background:var(--red)}
.v3-dd.is-open .v3-dd_panel{visibility:visible;opacity:1;transform:none;clip-path:inset(0 0 0 0);transition:opacity .35s,transform .6s var(--ease-out),clip-path .6s var(--ease-out),visibility 0s}
.v3-dd_list{display:flex;flex-direction:column}
.v3-dd_lab,.v3-dd_grp{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-3)}
.v3-dd_lab{margin-bottom:12px}
.v3-dd_grp{margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line-2)}
.v3-dd_list a:not(.v3-dd_all){display:flex;align-items:baseline;gap:14px;padding:9px 0;font-family:var(--f-sans);font-stretch:88%;font-size:19px;font-weight:520;line-height:1.2;color:var(--cream-2);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .6s var(--ease-out),color .3s}
.v3-dd.is-open .v3-dd_list a{opacity:1;transform:none;transition-delay:calc(.08s + var(--k) * .045s),calc(.08s + var(--k) * .045s),0s}
.v3-dd_list a b{font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--red-hi);min-width:2em}
.v3-dd_list a.is-sub b{visibility:hidden}
.v3-dd_list a span{transition:transform .5s var(--ease-out)}
.v3-dd_list a>i{margin-left:auto;font-style:normal;color:var(--red-hi);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .5s var(--ease-out)}
.v3-dd_list a:hover,.v3-dd_list a:focus-visible,.v3-dd_list a.is-on{color:var(--cream)}
.v3-dd_list a:hover span,.v3-dd_list a:focus-visible span{transform:translateX(6px)}
.v3-dd_list a:hover>i,.v3-dd_list a:focus-visible>i,.v3-dd_list a.is-on>i{opacity:1;transform:none}
.v3-dd_list a:focus-visible{outline:0}
.v3-dd_list a:focus-visible span{text-decoration:underline;text-decoration-color:var(--red-hi);text-underline-offset:.2em}
.v3-dd_list .v3-dd_all{align-self:flex-start;margin-top:16px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);padding:8px 0;border-bottom:1px solid currentColor;transition:color .3s}
.v3-dd_list .v3-dd_all:hover,.v3-dd_list .v3-dd_all:focus-visible{color:var(--cream)}
.v3-dd_pv{position:relative;align-self:start;aspect-ratio:2/3;overflow:hidden;background:var(--ink-3)}
.v3-dd_pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path .7s var(--ease-out),transform 1.2s var(--ease-out)}
.v3-dd_pv img.on{clip-path:inset(0 0 0 0);transform:none;z-index:1}
.v3-lang{display:inline-flex;gap:2px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em}
.v3-lang a{padding:6px 8px;color:var(--cream-3);transition:color .3s}
.v3-lang a.on{color:var(--cream);box-shadow:inset 0 -1px 0 var(--red)}
.v3-lang a:hover{color:var(--cream)}
.v3-burger{position:relative;z-index:2;display:inline-flex;align-items:center;gap:14px;height:48px;padding:0 4px 0 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-left:1px solid var(--line)}
.v3-burger_l{position:relative;display:block;height:1.3em;overflow:hidden;min-width:5.6em;text-align:left}
.v3-burger_l::before,.v3-burger_l::after{display:block;transition:transform .6s var(--ease-out)}
.v3-burger_l::before{content:attr(data-a)}
.v3-burger_l::after{content:attr(data-b)}
.v3-burger_i{position:relative;width:44px;height:44px;border-radius:50%;background:var(--cream);display:block;transition:background-color .4s,transform .6s var(--ease-out)}
.v3-burger_i i{position:absolute;left:13px;right:13px;height:2px;background:var(--ink);transition:transform .6s var(--ease-out),top .6s var(--ease-out)}
.v3-burger_i i:first-child{top:17px}
.v3-burger_i i:last-child{top:25px}
.v3-burger:hover .v3-burger_i{transform:scale(1.08)}
.is-menu .v3-burger_l::before,.is-menu .v3-burger_l::after{transform:translateY(-100%)}
.is-menu .v3-burger_i{background:var(--red)}
.is-menu .v3-burger_i i{background:var(--cream)}
.is-menu .v3-burger_i i:first-child{top:21px;transform:rotate(45deg)}
.is-menu .v3-burger_i i:last-child{top:21px;transform:rotate(-45deg)}
.is-menu .v3-head{background:transparent;transform:none}
.is-menu .v3-head_nav,.is-menu .v3-head>.v3-lang{opacity:0;pointer-events:none}

/* ============================ MENI ============================ */
.v3-menu{position:fixed;inset:0;z-index:70;background:var(--ink-2);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(260px,.7fr);gap:clamp(24px,4vw,72px);
  padding:calc(var(--head-h) + 5vh) var(--pad) 6vh;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-io),visibility 0s .9s}
.is-menu .v3-menu{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-io),visibility 0s}
.v3-menu_nav{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:2px}
.v3-menu_nav a{display:flex;align-items:baseline;gap:18px;font-stretch:82%;font-weight:560;font-size:clamp(34px,4.6vw,76px);line-height:1.08;letter-spacing:-.02em;color:var(--cream-2);
  opacity:0;transform:translateY(60%);transition:opacity .5s,transform .8s var(--ease-out),color .3s}
.is-menu .v3-menu_nav a{opacity:1;transform:none;transition-delay:calc(.35s + var(--k) * .06s),calc(.35s + var(--k) * .06s),0s}
.v3-menu_nav a:hover,.v3-menu_nav a.is-on,.v3-menu_nav a:focus-visible{color:var(--cream)}
.v3-menu_nav a .v3-menu_t{transition:transform .5s var(--ease-out)}
.v3-menu_nav a:hover .v3-menu_t,.v3-menu_nav a:focus-visible .v3-menu_t{transform:translateX(14px)}
.v3-menu_nav a:focus-visible{outline:0}
.v3-menu_nav a:focus-visible .v3-menu_t{text-decoration:underline;text-decoration-color:var(--red-hi);text-underline-offset:.12em;text-decoration-thickness:2px}
.v3-menu_no{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--red-hi);font-weight:500;min-width:2.2em}
.v3-menu_pv{grid-column:2;grid-row:1;position:relative;align-self:center;aspect-ratio:2/3;max-height:68vh;justify-self:center;width:100%;max-width:420px;overflow:hidden;
  opacity:0;transform:scale(.94);transition:opacity .6s .3s,transform 1.2s .3s var(--ease-out)}
.is-menu .v3-menu_pv{opacity:1;transform:none}
.v3-menu_pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--ease-out)}
.v3-menu_pv img.on{clip-path:inset(0 0 0 0);z-index:1}
.v3-menu_side{grid-column:3;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;gap:32px;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .8s var(--ease-out)}
.is-menu .v3-menu_side{opacity:1;transform:none;transition-delay:.6s}
.v3-menu_blk{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:16px;color:var(--cream-2)}
.v3-menu_blk .v3-lab{margin-bottom:6px}
.v3-menu_row{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.v3-lang--menu{display:none}
/* podstavke (izdavastvo: dve edicije) - mali mono red ispod stavke, isti ulaz kao stavka */
.v3-menu_sub{display:flex;flex-wrap:wrap;gap:6px 22px;padding:4px 0 10px calc(2.2em * 12 / 13 + 18px);font-size:13px;opacity:0;transform:translateY(60%);transition:opacity .5s,transform .8s var(--ease-out)}
.is-menu .v3-menu_sub{opacity:1;transform:none;transition-delay:calc(.4s + var(--k) * .06s)}
.v3-menu_nav .v3-menu_sub a{display:inline-flex;align-items:center;gap:10px;font:500 13px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-3);opacity:1;transform:none;transition:color .3s}
.v3-menu_nav .v3-menu_sub a::before{content:"";width:14px;height:1px;background:var(--red-hi)}
.v3-menu_nav .v3-menu_sub a:hover,.v3-menu_nav .v3-menu_sub a.is-on,.v3-menu_nav .v3-menu_sub a:focus-visible{color:var(--cream)}
.v3-menu_grp{display:inline-flex;align-items:center;font:500 13px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2)}
.v3-menu_nav .v3-menu_sub a.is-pub::before{background:var(--cream-3)}
.v3-foot_sub{margin-top:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3)}
.v3-foot_subl{padding-left:14px}

/* ============================ FOOTER ============================ */
.v3-foot{position:relative;background:var(--ink);padding-top:clamp(72px,8.5vw,128px);overflow:hidden}
/* linija-lenjir na vrhu footera: tanka linija + podeoci, crvena oznaka na pocetku */
.v3-foot_rule{position:absolute;left:0;right:0;top:0;height:14px;pointer-events:none;border-top:1px solid var(--line);
  background:repeating-linear-gradient(90deg,rgba(243,237,227,.22) 0 1px,transparent 1px 12px) 0 0/100% 5px no-repeat,
    repeating-linear-gradient(90deg,rgba(243,237,227,.3) 0 1px,transparent 1px 120px) 0 0/100% 11px no-repeat}
.v3-foot_rule::after{content:"";position:absolute;left:var(--pad);top:-4px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.v3-foot_grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:clamp(32px,5vw,96px)}
.v3-foot_brand{position:relative;align-self:start;justify-self:start;padding:26px 30px 24px}
.v3-foot_brand::before,.v3-foot_brand::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--cream-3);pointer-events:none}
.v3-foot_brand::before{top:0;left:0;border-right:0;border-bottom:0}
.v3-foot_brand::after{bottom:0;right:0;border-left:0;border-top:0}
.v3-foot_brand img{height:64px;width:auto}
.v3-foot_brand p{margin-top:20px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3)}
.v3-acc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.v3-acc_h{display:flex;width:100%;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);pointer-events:none;padding-bottom:18px}
.v3-acc_h i{display:none}
.v3-acc_b>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:16px;color:var(--cream-2)}
.v3-acc_b a:hover{color:var(--cream)}
.v3-foot_word{margin-top:clamp(56px,7vw,110px);line-height:.72;height:calc(var(--fs-foot) * .6);overflow:hidden;--fs-foot:19.6vw;text-align:center}
.v3-foot_word span{font-family:var(--f-mark);font-weight:500;font-size:var(--fs-foot);letter-spacing:-.01em;color:#1B1916;-webkit-text-stroke:1px rgba(243,237,227,.1);display:block;white-space:nowrap}
/* copyright traka na bez pozadini (puna sirina i iznad 1680px) */
.v3-foot_bar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:22px;font-size:13px;
  background:var(--paper);color:var(--ink-on-paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
.v3-foot_bar .v3-mono{color:var(--mute-on-paper)}
.v3-foot_bar>span:first-child{display:inline-flex;align-items:center;gap:10px}
.v3-foot_bar>span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
@media (min-width:761px){
  .v3-acc_col{border-left:1px solid var(--line);padding-left:24px}
  .v3-acc_h{counter-increment:v3f}
  .v3-acc_h::before{content:"0" counter(v3f);color:var(--red-hi);margin-right:12px}
  .v3-acc{counter-reset:v3f}
  .v3-acc_h{justify-content:flex-start}
}

/* ============================ REVEAL ============================ */
.v3-js [data-rv]{opacity:0;transform:translateY(36px)}
.v3-js [data-rv="clip"]{opacity:1;transform:none;clip-path:inset(18% 10% 18% 10%)}
.v3-js [data-rv="clip"] img{transform:scale(1.25)}
.v3-js [data-rv].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:calc(var(--d,0) * .09s)}
.v3-js [data-rv="clip"].is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.4s var(--ease-out)}
.v3-js [data-rv="clip"].is-in img{transform:scale(1);transition:transform 1.8s var(--ease-out)}
.v3-split-l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.v3-split-l>span{display:block}
.v3-js [data-split] .v3-split-l>span{transform:translateY(105%)}
.v3-js [data-split].is-in .v3-split-l>span{transform:none;transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--l,0) * .08s + var(--d,0) * .09s)}

/* reduced motion / ?noanim=1 */
.v3-rm .v3-grain{animation:none}
.v3-rm [data-rv],.v3-rm [data-rv="clip"],.v3-rm [data-rv="clip"] img,.v3-rm [data-split] .v3-split-l>span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===================== CEKA SE OD KLIJENTA (29.09.2026) =====================
   Jasno oznaceno mesto za podatak koji jos nije stigao od klijenta (Petar: kontakt
   podaci + 5 pitanja). Upotreba: <span class="v3-todo">Čeka se: …</span> (inline) ili
   <div class="v3-todo v3-todo--blk">…</div>. Kad podatak stigne, element se brise. */
.v3-todo{display:inline-flex;align-items:center;gap:.6em;padding:.35em .8em;border:1px dashed var(--red-hi);border-radius:6px;color:var(--red-hi);background:rgba(200,16,46,.08);font:500 var(--fs-mono)/1.4 var(--f-mono);letter-spacing:.04em;text-transform:none;vertical-align:middle}
.v3-todo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.v3-todo--blk{display:flex;padding:1em 1.2em;font-size:13px}

/* ============================ MOBILNI ============================ */
@media (max-width:1024px){
  .v3-head_nav{display:none}
  .v3-menu{grid-template-columns:1fr;grid-template-rows:1fr auto;padding-top:calc(var(--head-h) + 3vh);overflow-y:auto;overscroll-behavior:contain}
  .v3-menu_pv{display:none}
  .v3-menu_side{grid-column:1;grid-row:2;gap:22px}
}
@media (max-width:760px){
  :root{--head-h:72px;--fs-p:16px}
  .v3-head{gap:12px}
  .v3-head.is-solid{--head-h:64px}
  .v3-logo img{height:50px}
  .v3-head.is-solid .v3-logo img{height:42px}
  .v3-head>.v3-lang{display:none}
  .v3-lang--menu{display:inline-flex}
  .v3-burger{border-left:0;padding-left:0;gap:10px}
  .v3-burger_l{display:none}
  .v3-menu_nav a{font-size:clamp(34px,10vw,48px);gap:14px}
  .v3-menu_sub{flex-direction:column;flex-wrap:nowrap;gap:0;padding:2px 0 12px calc(2.2em * 12 / 13 + 14px)}
  .v3-menu_nav .v3-menu_sub a{padding:7px 0;font-size:12.5px}
  .v3-menu_grp{padding:9px 0 3px;font-size:12px}
  .v3-menu_nav .v3-menu_sub a.is-pub{padding-left:18px}
  .v3-menu_blk{font-size:15px}
  .v3-menu_side .v3-btn{width:100%}
  .v3-menu_row{flex-direction:column;align-items:stretch}

  .v3-foot_grid{grid-template-columns:1fr;gap:36px}
  .v3-acc{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
  .v3-acc_col{border-bottom:1px solid var(--line)}
  .v3-acc_h{pointer-events:auto;padding:20px 0;font-size:13px;color:var(--cream)}
  .v3-acc_h i{display:block;position:relative;width:14px;height:14px}
  .v3-acc_h i::before,.v3-acc_h i::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--red-hi);transition:transform .5s var(--ease-out)}
  .v3-acc_h i::after{transform:rotate(90deg)}
  .v3-acc_col.is-open .v3-acc_h i::after{transform:rotate(0)}
  .v3-acc_b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
  .v3-acc_b>div{overflow:hidden;min-height:0}
  .v3-acc_col.is-open .v3-acc_b{grid-template-rows:1fr}
  .v3-acc_col.is-open .v3-acc_b>div{padding-bottom:22px}
  .v3-foot_bar{flex-direction:column;gap:6px}
}