/* ZWE — zajednički stil za sve strane (početna, portfolio, projekat, kontakt).
   Zaseban fajl (a ne inline) jer ga dele četiri strane; ide sa ?v=N u <link>,
   pošto Cloudflare drži .css/.js 4 h u pregledaču. */

/* Paleta i tipografija dolaze iz vizuelnog identiteta ZWE — izvor istine je
   api/zwe-brand/tokens.css (generiše ga zwe-brand/build.js). Ovde su preslikane u
   imena koja stranice već koriste, da se ne prepisuje ceo stilski fajl.

   BORDO IMA DVE VREDNOSTI I TO NIJE GRESKA:
   --akcenat (#8F274A) je brendirani bordo i sme SAMO kao ispuna — dugmad, trake znaka,
   pune plohe, gde tekst preko njega ide beo (8,4:1).
   --akcenat-tekst (#D9668A) je isti ton podignut do 5,4:1 na charcoal podlozi i ide na
   svaki bordo TEKST i svaku tanku liniju. Pun bordo kao tekst na #0F172A daje 2,4:1 —
   to pada i na najblažem pragu, pa se ne koristi. */
:root{
  --bg:#0F172A;
  --bg2:#151F36;
  --bg3:#1C2842;
  --linija:rgba(255,255,255,.09);
  --linija-jaka:rgba(255,255,255,.16);
  --tekst:#E8EAEE;
  --prigusen:#94A0B4;
  --akcenat:#8F274A;
  --akcenat-tekst:#D9668A;
  --akcenat-krupno:#C2456E;
  --akcenat-jak:#A8315A;
  --zelena:#5FD08A;
  --r:14px;
  --maxs:1120px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--tekst);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.032em;margin:0}
p{margin:0}
.omot{max-width:var(--maxs);margin:0 auto;padding:0 20px}
/* Stavke u grid/flex rasporedu imaju `min-width:auto` i zato se NE skupljaju ispod svog
   sadržaja — jedna duga reč ili `nowrap` niska tako razvuče celu kolonu i sajt ispadne
   iz ekrana na telefonu. Ovde se to gasi na svim našim mrežama, jednom za sva vremena. */
.usluga>*,.pr-telo>*,.pr-galerija>*,.projekti>*,.kontakt>*,.razlika>*,
.brojke>*,.koraci>*,.korak>*,.nav>*,.pod>*{min-width:0}
/* slike i okviri nikad šire od svog mesta */
.prozor,.skica,.telefon{max-width:100%}
.sekcija{padding:96px 0;scroll-margin-top:80px}
@media(max-width:720px){.sekcija{padding:64px 0}}
.uski{max-width:760px}

/* ── zaglavlje ─────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(15,23,42,.80);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
header.uz{border-bottom-color:var(--linija)}
.nav{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo .zwe-znak{display:block;height:24px;width:auto}
/* klasa je `zwe-znak`, a NE `znak` — `.znak` je vec zauzeto za cipove tehnologija
   (ima ivicu i podlogu), pa bi znak u zaglavlju dobio okvir oko sebe. */
.logo:focus-visible{outline:2px solid var(--akcenat-tekst);outline-offset:6px;border-radius:4px}
.nav-lista{display:flex;gap:26px;margin-left:auto;list-style:none;padding:0}
.nav-lista a{text-decoration:none;color:var(--prigusen);font-size:15px;font-weight:500;
  transition:color .15s;padding:4px 0;border-bottom:1px solid transparent}
.nav-lista a:hover{color:var(--tekst)}
.nav-lista a.tekuca{color:var(--tekst);border-bottom-color:var(--akcenat-tekst)}
/* Zaglavlje ostaje u JEDNOM redu na svakoj širini — bez prelamanja u dva sprata.
   Ispod 860 px se skuplja (manji znak, sitnija slova, uži razmaci), a ispod 560 px
   se sklanja dugme „Zatraži ponudu": na telefonu ne stanu i tri linka i dugme, a
   link „Kontakt" vodi na istu stranu i svaka strana se ionako završava tim pozivom. */
@media(max-width:860px){
  .nav{height:60px;gap:14px;flex-wrap:nowrap}
  .logo .zwe-znak{height:20px}
  .nav-lista{gap:16px;margin-left:auto;flex-wrap:nowrap}
  .nav-lista a{font-size:14px;white-space:nowrap}
  .nav .dug{padding:9px 14px;font-size:14px;white-space:nowrap;flex:0 0 auto}
}
@media(max-width:560px){
  .nav{gap:10px;height:56px}
  .logo .zwe-znak{height:18px}
  .nav-lista{gap:14px}
  .nav-lista a{font-size:13.5px}
  .nav .dug{display:none}
}

/* ── dugmad ────────────────────────────────────────────────── */
.dug{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans);
  transition:transform .12s ease,background .15s,border-color .15s}
.dug:active{transform:translateY(1px)}
.dug-glavno{background:var(--akcenat);color:#fff}
.dug-glavno:hover{background:var(--akcenat-jak)}
.dug-tiho{border-color:var(--linija-jaka);color:var(--tekst);background:transparent}
.dug-tiho:hover{border-color:var(--prigusen);background:rgba(255,255,255,.04)}

/* ── zajednički naslovi ────────────────────────────────────── */
.oznaka{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akcenat-tekst)}
h2{font-size:clamp(1.8rem,4.2vw,2.7rem);margin-top:14px;max-width:20ch}
.uvod{margin-top:16px;max-width:60ch;color:var(--prigusen);font-size:17px}

/* ── hero (početna) ────────────────────────────────────────── */
.hero{position:relative;padding:84px 0 40px;overflow:hidden}
.hero::before{content:'';position:absolute;top:-340px;left:50%;transform:translateX(-50%);
  width:1100px;height:700px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(143,39,74,.26),transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--linija) 1px,transparent 1px),
    linear-gradient(90deg,var(--linija) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(closest-side at 50% 0,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(closest-side at 50% 0,#000,transparent 75%)}
.hero>.omot{position:relative;z-index:1}
.znacka{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--linija-jaka);background:rgba(255,255,255,.03);
  font-size:13.5px;color:var(--prigusen);font-weight:500}
.znacka .puls{width:7px;height:7px;border-radius:50%;background:var(--zelena);
  box-shadow:0 0 0 0 rgba(95,208,138,.6);animation:puls 2.4s infinite}
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(95,208,138,0)}100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}}
@media (prefers-reduced-motion:reduce){.znacka .puls{animation:none}}
h1{font-size:clamp(2.3rem,6.2vw,4.3rem);margin:26px 0 0;max-width:15ch}
/* Naglasena rec u naslovu: BELA sa bordo trakom ispod, a ne bordo slova. Pun bordo
   kao tekst na charcoal-u daje 2,4:1, a posvetljen do citljivosti ispadne roze i vise
   nije boja brenda. Traka koristi PRAVU boju i ponavlja trake iz samog znaka. */
h1 em{font-style:normal;color:var(--tekst);padding-bottom:.1em;
  background:linear-gradient(var(--akcenat),var(--akcenat)) no-repeat 0 100%/100% .13em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-p{margin-top:22px;max-width:56ch;font-size:clamp(1.02rem,2.4vw,1.2rem);color:var(--prigusen)}
.hero-dugmad{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-sitno{margin-top:18px;font-size:14px;color:var(--prigusen)}
.hero-brojke{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--linija)}
.hero-brojke span{font-size:14.5px;color:var(--prigusen)}
.hero-brojke b{font-family:var(--display);color:var(--tekst);font-weight:700;letter-spacing:-.02em}
.skroluj{display:flex;align-items:center;gap:10px;margin-top:44px;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--prigusen);text-decoration:none}
.skroluj i{display:block;width:1px;height:26px;
  background:linear-gradient(var(--akcenat-tekst),transparent);animation:kap 2s infinite}
@keyframes kap{0%{opacity:.2;transform:translateY(-6px)}50%{opacity:1}100%{opacity:.2;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.skroluj i{animation:none}}

/* ── hero unutrašnjih strana ───────────────────────────────── */
.strana-hero{position:relative;padding:70px 0 10px;overflow:hidden}
.strana-hero::before{content:'';position:absolute;top:-360px;left:50%;transform:translateX(-50%);
  width:1000px;height:620px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(143,39,74,.22),transparent 70%);pointer-events:none}
.strana-hero>.omot{position:relative;z-index:1}
.strana-hero h1{max-width:20ch;font-size:clamp(2.1rem,5vw,3.4rem)}
.mrve{font-size:14px;color:var(--prigusen);margin-bottom:22px}
.mrve a{text-decoration:none}
.mrve a:hover{color:var(--tekst)}

/* ── okviri za snimke ──────────────────────────────────────── */
.prozor{border-radius:12px;overflow:hidden;border:1px solid var(--linija-jaka);
  background:var(--bg2);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.prozor-traka{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#191C21;
  border-bottom:1px solid var(--linija)}
.prozor-traka i{width:10px;height:10px;border-radius:50%;background:#3A3F47;display:block}
/* min-width:0 je OBAVEZAN: bez njega dugačka adresa sa `nowrap` diktira najmanju širinu
   celoj koloni (stavka u flex/grid rasporedu se podrazumevano ne skuplja ispod sadržaja),
   pa naslovna na telefonu ispada iz ekrana. Višak adrese se seče sa tri tačke. */
.prozor-url{margin-left:12px;flex:1 1 0;min-width:0;height:22px;border-radius:6px;
  background:#0F1115;display:block;line-height:22px;padding:0 10px;font-size:12px;
  color:var(--prigusen);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* okvir drži odnos stranica i seče sliku od vrha — pa svaki snimak leže kako treba */
.kadar{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--bg2)}
.kadar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.telefon{width:250px;margin:0 auto;border-radius:34px;padding:9px;background:#1A1D22;
  border:1px solid var(--linija-jaka);box-shadow:0 30px 70px -25px rgba(0,0,0,.9)}
.telefon .ekran{overflow:hidden;border-radius:26px;aspect-ratio:390/844;background:var(--bg2)}
.telefon .ekran img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* ── usluge (pune sekcije, naizmenično) ────────────────────── */
.usluga{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:72px 0;border-top:1px solid var(--linija)}
.usluga:first-of-type{border-top:none}
.usluga.obrnuto .usluga-vizual{order:-1}
@media(max-width:940px){.usluga{grid-template-columns:1fr;gap:36px;padding:52px 0}
  .usluga.obrnuto .usluga-vizual{order:0}}
.broj-usluge{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akcenat-tekst);display:block}
.usluga h2{margin-top:14px;max-width:18ch}
.usluga>div>p{margin-top:16px;color:var(--prigusen);font-size:17px;max-width:52ch}
.usluga ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px}
.usluga ul li{display:flex;gap:11px;font-size:15.5px;color:var(--prigusen)}
.usluga ul li::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--akcenat-tekst);margin-top:9px;opacity:.9}
.usluga .dug{margin-top:30px}

.ishod{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;text-decoration:none;
  border:1px solid var(--linija);border-radius:var(--r);padding:20px 26px;
  background:linear-gradient(90deg,rgba(143,39,74,.22),rgba(255,255,255,0));
  transition:border-color .2s,transform .2s}
.ishod:hover{border-color:var(--linija-jaka);transform:translateY(-2px)}
.ishod-broj{font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:-.03em;
  color:var(--akcenat-krupno);white-space:nowrap}
.ishod-tekst{flex:1;min-width:240px;font-size:15.5px;color:var(--prigusen)}
.ishod-tekst b{color:var(--tekst);font-weight:600}
.ishod-strelica{font-size:15px;color:var(--akcenat-tekst);white-space:nowrap}

/* ── skica stranice (kad nema snimka) ──────────────────────── */
.skica{border:1px solid var(--linija-jaka);border-radius:12px;background:var(--bg2);
  padding:20px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.skica .traka{height:8px;border-radius:99px;background:var(--linija-jaka);display:block}
.skica .blok{border-radius:8px;background:rgba(255,255,255,.05)}

/* ── kartice ───────────────────────────────────────────────── */
.kartica{border:1px solid var(--linija);border-radius:var(--r);padding:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  transition:border-color .2s,transform .2s}
.kartica:hover{border-color:var(--linija-jaka);transform:translateY(-2px)}
.kartica h3{font-size:1.1rem}
.kartica p{margin-top:12px;color:var(--prigusen);font-size:15.5px}
.razlika{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:860px){.razlika{grid-template-columns:1fr}}

.uz-svaki{margin-top:28px;border:1px solid var(--linija);border-radius:var(--r);
  padding:26px 32px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center}
.uz-svaki b{font-family:var(--display);font-size:15px;letter-spacing:-.01em}
.uz-svaki span{font-size:15px;color:var(--prigusen)}

/* ── brojke ────────────────────────────────────────────────── */
/* mreža prati broj stavki — projekat sa tri brojke inače ostavlja praznu ćeliju kao rupu */
.brojke{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--linija);border:1px solid var(--linija);border-radius:var(--r);overflow:hidden}
.brojke div{background:var(--bg);padding:24px 20px}
.brojke .broj{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;
  letter-spacing:-.03em}
.brojke .opis{font-size:13.5px;color:var(--prigusen);margin-top:4px}
@media(max-width:760px){.brojke{grid-template-columns:1fr 1fr}}

/* ── portfolio: mreža projekata ────────────────────────────── */
.projekti{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
@media(max-width:860px){.projekti{grid-template-columns:1fr;gap:22px}}
.projekat-kartica{display:block;text-decoration:none;border:1px solid var(--linija);
  border-radius:18px;overflow:hidden;background:var(--bg2);
  transition:border-color .2s,transform .2s}
.projekat-kartica:hover{border-color:var(--linija-jaka);transform:translateY(-3px)}
.projekat-kartica .slika{aspect-ratio:16/10;overflow:hidden;background:var(--bg3);position:relative}
.projekat-kartica .slika img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s ease}
.projekat-kartica:hover .slika img{transform:scale(1.03)}
.projekat-kartica .telo{padding:26px 28px 30px}
.projekat-kartica .vrsta{font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--akcenat-tekst)}
.projekat-kartica h3{font-size:1.35rem;margin-top:10px}
.projekat-kartica p{margin-top:10px;color:var(--prigusen);font-size:15.5px}
.znake{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.znak{font-size:12.5px;color:var(--prigusen);border:1px solid var(--linija);
  border-radius:999px;padding:4px 11px}
.projekat-kartica .vise{margin-top:20px;font-size:14.5px;color:var(--akcenat-tekst);font-weight:600}
.projekat-kartica.prazna .slika{display:grid;place-items:center;color:var(--prigusen);font-size:14px}

/* ── stranica projekta ─────────────────────────────────────── */
.pr-meta{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:34px;padding:22px 0;
  border-top:1px solid var(--linija);border-bottom:1px solid var(--linija)}
.pr-meta div{min-width:130px}
.pr-meta dt{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--prigusen)}
.pr-meta dd{margin:5px 0 0;font-family:var(--display);font-weight:600;font-size:15.5px}
.pr-glavna{margin-top:48px}
.pr-telo{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px}
@media(max-width:940px){.pr-telo{grid-template-columns:1fr;gap:36px}}
.pr-telo h2{font-size:1.5rem;max-width:none}
.pr-telo p{margin-top:14px;color:var(--prigusen);font-size:16.5px}
.pr-telo ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.pr-telo ul li{display:flex;gap:11px;font-size:16px;color:var(--prigusen)}
.pr-telo ul li::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--akcenat-tekst);margin-top:9px;opacity:.9}
.pr-galerija{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;margin-top:64px}
@media(max-width:940px){.pr-galerija{grid-template-columns:1fr}.pr-galerija .telefon{display:none}}
.pr-navigacija{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  margin-top:80px;padding-top:32px;border-top:1px solid var(--linija)}
.pr-navigacija a{text-decoration:none;font-family:var(--display);font-weight:600;font-size:16px}
.pr-navigacija a:hover{color:var(--akcenat-tekst)}
.pr-navigacija span{display:block;font-family:var(--sans);font-weight:400;font-size:13px;
  color:var(--prigusen);margin-bottom:4px}

/* ── mogućnosti projekta ───────────────────────────────────── */
.mogucnosti{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--linija);border:1px solid var(--linija);border-radius:var(--r);
  overflow:hidden;margin-top:44px}
.mogucnosti>*{min-width:0}
.mogucnost{background:var(--bg);padding:26px 26px 30px;transition:background .2s}
.mogucnost:hover{background:var(--bg2)}
.mog-broj{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.1em;
  color:var(--akcenat-tekst)}
.mogucnost h3{font-size:1.05rem;margin-top:10px}
.mogucnost p{margin-top:9px;color:var(--prigusen);font-size:14.5px;line-height:1.6}
@media(max-width:560px){.mogucnost{padding:22px}}

/* ── proces ────────────────────────────────────────────────── */
.koraci{margin-top:44px;border-top:1px solid var(--linija)}
.korak{display:grid;grid-template-columns:72px 1fr 1.1fr;gap:24px;padding:28px 0;
  border-bottom:1px solid var(--linija);align-items:start}
.korak .n{font-family:var(--display);font-size:2rem;font-weight:700;color:var(--linija-jaka);
  letter-spacing:-.04em}
.korak h3{font-size:1.15rem}
.korak p{color:var(--prigusen);font-size:15.5px}
@media(max-width:760px){.korak{grid-template-columns:48px 1fr;gap:16px}.korak p{grid-column:2}}

/* ── pitanja ───────────────────────────────────────────────── */
.pitanja{margin-top:40px;border-top:1px solid var(--linija)}
details{border-bottom:1px solid var(--linija)}
summary{cursor:pointer;padding:22px 40px 22px 0;font-family:var(--display);font-weight:600;
  font-size:1.05rem;position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--prigusen);border-bottom:2px solid var(--prigusen);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 0 24px;color:var(--prigusen);max-width:70ch;font-size:15.5px}

/* ── forma ─────────────────────────────────────────────────── */
.kontakt{border:1px solid var(--linija);border-radius:20px;padding:44px;
  background:linear-gradient(180deg,rgba(143,39,74,.18),rgba(255,255,255,.01));
  display:grid;grid-template-columns:.85fr 1fr;gap:48px;align-items:start}
@media(max-width:940px){.kontakt{grid-template-columns:1fr;gap:32px;padding:28px}}
.polja{display:grid;gap:16px}
.red2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.red2{grid-template-columns:1fr}}
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--tekst)}
label span{color:var(--prigusen);font-weight:400}
input,select,textarea{width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--linija-jaka);background:rgba(0,0,0,.35);color:var(--tekst);
  font-family:var(--sans);font-size:15.5px;transition:border-color .15s,box-shadow .15s}
textarea{min-height:130px;resize:vertical}
select{appearance:none;padding-right:38px;background-repeat:no-repeat;
  background-position:right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A0B4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akcenat-tekst);
  box-shadow:0 0 0 3px rgba(143,39,74,.45)}
/* Zamka za robote: sakriveno bez izbacivanja van platna (`left:-9999px` ume da napravi
   vodoravni skrol u nekim pregledačima). Robot i dalje vidi polje u HTML-u i popuni ga. */
.med{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.poruka{margin-top:16px;padding:14px 16px;border-radius:10px;font-size:15px;display:none}
.poruka.ok{display:block;background:rgba(95,208,138,.1);border:1px solid rgba(95,208,138,.35);color:#B6EFCC}
.poruka.greska{display:block;background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.35);color:#FFC2C2}
.kontakt-levo h2{max-width:none}
.kontakt-levo ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px;
  font-size:15px;color:var(--prigusen)}
.kontakt-levo li{display:flex;gap:11px;align-items:flex-start}
.kontakt-levo svg{flex:0 0 auto;margin-top:3px}

/* ── poziv na kraju strane ─────────────────────────────────── */
.zavrsni{border:1px solid var(--linija);border-radius:20px;padding:48px;text-align:center;
  background:linear-gradient(180deg,rgba(143,39,74,.22),rgba(255,255,255,0))}
.zavrsni h2{margin:0 auto;max-width:22ch}
.zavrsni p{margin:16px auto 0;max-width:52ch;color:var(--prigusen)}
.zavrsni .dug{margin-top:28px}

/* ── podnožje ──────────────────────────────────────────────── */
footer{border-top:1px solid var(--linija);padding:40px 0;margin-top:40px}
.pod{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:14px;color:var(--prigusen)}
.pod a{color:var(--prigusen);text-decoration:none}
.pod a:hover{color:var(--tekst)}
.pod nav{display:flex;gap:18px}

/* ── otkrivanje pri skrolu ─────────────────────────────────── */
.otkrij{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.otkrij.vidi{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.otkrij{opacity:1;transform:none;transition:none}}
[hidden]{display:none!important}