/* Self-hosted Inter (varijabilni font, latin + latin-ext za srpsku latinicu).
   Zamenjuje Google Fonts: bez eksternog render-blocking zahteva, font ide pod
   nas 1-godisnji cache. font-display:swap = tekst se vidi odmah, bez FOIT-a. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   BizCore v2 - dizajn sistem
   --------------------------------------------------------------------------
   Pravilo koje drži ceo sajt: JEDNA STRANICA = JEDNO PITANJE.
   Početna odgovara "za koga je ovo", stranica delatnosti "šta dobijam",
   stranica proizvoda "šta je ovo i šta rešava". Zato ovde nema desetak
   varijanti sekcija - ima ih malo, i svaka ima svoj posao.

   Boja NOSI ZNAČENJE, ne ukrašava:
     plava   = akcija (dugme, link, aktivna stavka)
     zelena  = potvrda, dokaz, "radi"
     ambra   = pažnja (retko, npr. fiskalna obaveza)
     mastilo = tekst i tamne sekcije
   ========================================================================== */

:root {
  /* Mastilo i papir */
  --ink:        #0b1220;
  --ink-2:      #1f2937;
  --muted:      #5b6472;
  --muted-2:    #8a939f;
  --line:       #e5e8ec;
  --bg:         #ffffff;
  --bg-soft:    #f7f8fa;
  --bg-dark:    #0b1220;

  /* Akcija i signali */
  --blue:       #2563eb;
  --blue-dark:  #1d4ed8;
  --blue-soft:  #eff4ff;
  --blue-light: #3b82f6;   /* „Core" u logotipu - svetlija plava sa starog sajta */
  --green:      #059669;
  --green-soft: #ecfdf5;
  --amber:      #d97706;

  --radius:     14px;
  --radius-sm:  10px;
  --radius-lg:  22px;
  --shadow:     0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
  --shadow-lg:  0 24px 60px rgba(11,18,32,.14);

  --container:  1180px;
  --nav-h:      68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto je obavezan: slike nose width/height atribute (da stranica ne
   poskakuje dok se učitavaju), pa bez ovoga browser drži zadatu visinu i
   sabija sliku po širini. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Tipografija: jedna skala, bez improvizacije po stranicama */
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* Sekcije: ritam je uvek isti, pa stranica "diše" bez obzira ko je piše */
.section        { padding: 88px 0; }
.section--soft  { background: var(--bg-soft); }
.section--dark  { background: var(--bg-dark); color: #e8ecf3; }
.section--tight { padding: 56px 0; }

.eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.section--dark .eyebrow { color: #7aa2f7; }
/* Nadnaslov iznad kartica ka srodnim stranicama: stoji sam, bez h2 ispod,
   pa mu treba nesto veci razmak nego kad je deo .section-head bloka. */
.eyebrow--related { margin-bottom: 22px; }

.lead { font-size: 1.075rem; color: var(--muted); max-width: 62ch; }
.section--dark .lead { color: #a9b4c4; }

.section-head { margin-bottom: 48px; max-width: 720px; }
.section-head h2 + .lead { margin-top: 14px; }

/* ── Dugmad ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); }
.btn--ghost   { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--muted-2); }
.btn--dark    { background: #fff; color: var(--ink); }
.btn--lg      { padding: 16px 28px; font-size: 1rem; }
.btn:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }

/* ── Navigacija ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
}
/* „Core" ide u svetliju plavu (--blue-light), ne u onu kojom se boje dugmad -
   tamnija plava je odudarala od logotipa na starom sajtu. */
.logo { display: flex; align-items: center; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.logo b { color: var(--blue-light); font-weight: 800; }
.logo small { display: block; font-size: .62rem; color: var(--muted-2); font-weight: 500; letter-spacing: .02em; white-space: nowrap; }

.nav__menu { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 12px; border-radius: 8px;
  font-size: .93rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; background: none; border: none; font-family: inherit;
}
.nav__link:hover, .nav__item.open .nav__link { background: var(--blue-soft); color: var(--blue-dark); }
.nav__link[aria-current="page"] { color: var(--blue); }
.nav__caret { width: 10px; height: 10px; transition: transform .18s ease; }
.nav__item.open .nav__caret { transform: rotate(180deg); }

/* Padajući meni: proizvodi su STVARI koje kupac prepoznaje, zato ide lista sa
   nazivom i jednom rečenicom, a ne gola imena bez konteksta. */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 560px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none; grid-template-columns: 1fr 1fr; gap: 4px;
}
.nav__item.open .dropdown { display: grid; }

/* Male grupe (npr. „Ostalo") ne treba da nose širinu od 560px i dve kolone
   zbog dve stavke. Uz to su poslednje u traci, pa bi im padajući meni
   poravnat ulevo izašao van desne ivice ekrana. */
.dropdown--usko {
  min-width: 320px; grid-template-columns: 1fr;
  left: auto; right: 0;
}
.dropdown__link {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
}
.dropdown__link:hover { background: var(--bg-soft); }
.dropdown__link strong { display: block; font-size: .9rem; font-weight: 700; color: var(--ink); }
.dropdown__link span   { display: block; font-size: .78rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.dropdown__foot {
  grid-column: 1 / -1; margin-top: 6px; padding: 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: .84rem; color: var(--muted);
}
.dropdown__foot a { color: var(--blue); font-weight: 700; }

.nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang button {
  padding: 5px 8px; font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  background: #fff; border: none; color: var(--muted); cursor: pointer; font-family: inherit;
}
.lang button.active { background: var(--ink); color: #fff; }

/* Dugmad u traci su manja od onih u sadržaju. U zaglavlju ona prate logo i
   meni, a poziv na akciju je u samoj stranici; kad su iste veličine kao
   dugmad u sekcijama, zaglavlje deluje teže nego sadržaj ispod njega. */
.nav__right .btn { padding: 7px 13px; font-size: .8rem; border-radius: 7px; }

.nav__burger { display: none; background: none; border: none; padding: 8px; cursor: pointer; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { padding: 84px 0 72px; background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { font-size: 1.15rem; }
.hero__cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero__note { margin-top: 18px; font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.hero__shot { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }

/* ── Partneri: traka ispod hero-a ─────────────────────────────────────────── */
.partners { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 26px 0; }
.partners__row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 18px 40px;
}
.partners__label {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.partners__list { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 34px; }
.partner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none;
}
.partner__logo {
  height: 34px; width: auto; flex-shrink: 0;
  opacity: .8; transition: opacity .16s ease, transform .16s ease;
}
.partner:hover .partner__logo { opacity: 1; transform: translateY(-1px); }
.partner__cap { font-size: .74rem; font-weight: 600; color: var(--muted); }
@media (max-width: 640px) {
  .partners__row { flex-direction: column; gap: 16px; }
}

/* ── Tri vrata: izbor delatnosti ──────────────────────────────────────────── */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.door {
  display: flex; flex-direction: column;
  padding: 28px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #cfd6e0; }
.door__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--blue-soft); color: var(--blue-dark);
}
.door h3 { font-size: 1.3rem; margin-bottom: 8px; }
.door p  { color: var(--muted); font-size: .95rem; }
.door__list { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.door__list li {
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 5px 9px; border-radius: 999px;
}
.door__go { margin-top: auto; color: var(--blue); font-weight: 700; font-size: .93rem; display: flex; align-items: center; gap: 6px; }

/* ── Dokaz (klijenti, fiskal) ─────────────────────────────────────────────── */
/* Traka klijenata se pomera.

   Ranije je to bila obicna lista koja se prelamala u vise redova, pa je na
   uzem ekranu zauzimala pola zaslona a nista nije govorila. Traka koja klizi
   staje u jedan red bez obzira koliko imena ima, i zaustavlja se kad se dodje
   misem preko nje, da se ime moze procitati.

   Kako radi: imena su ispisana DVA PUTA, jedno za drugim, a animacija pomera
   traku tacno za pola njene sirine. Kad prva kopija izadje levo, druga je vec
   na njenom mestu, pa nema praznine ni trzaja. Druga kopija nosi aria-hidden,
   da je citac ekrana ne procita dvaput. */
.proof { display: flex; align-items: center; gap: 28px; }
.proof__label {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); flex-shrink: 0;
}
.proof__okvir {
  flex: 1; min-width: 0; overflow: hidden;
  /* Imena se stapaju sa pozadinom na ivicama, umesto da se seku napola. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.proof__traka {
  display: flex; align-items: center; gap: 40px;
  width: max-content;
  /* Zavrsni razmak mora biti JEDNAK razmaku izmedju imena. Bez njega je
     ukupna sirina „imena + 13 razmaka", pa pomeraj od 50% ne pada tacno na
     pocetak druge kopije i na svakom krugu se vidi trzaj. */
  padding-right: 40px;
  animation: proof-klizi 34s linear infinite;
}
.proof__okvir:hover .proof__traka { animation-play-state: paused; }
.proof__name { font-size: .95rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

@keyframes proof-klizi {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .proof { flex-direction: column; align-items: stretch; gap: 14px; }
  .proof__label { text-align: center; }
}
/* Kome smeta kretanje, traka stoji. Tada se prelama u vise redova, pa se sva
   imena i dalje vide - animacija je ukras, ne nacin da se do sadrzaja dodje. */
@media (prefers-reduced-motion: reduce) {
  .proof__traka { animation: none; flex-wrap: wrap; width: auto; }
  .proof__okvir { -webkit-mask-image: none; mask-image: none; }
}

/* ── Kartice (funkcije, koraci) ───────────────────────────────────────────── */
.grid   { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: 26px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.card__icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 16px;
  display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-dark);
}
.card h3 { margin-bottom: 7px; }
.card p  { color: var(--muted); font-size: .93rem; }

/* Koraci: numeracija ima smisla SAMO kad je redosled stvaran (a ovde jeste:
   porudžbina ide kroz kasu, kuhinju, gosta i vozača tim redom). */
.steps { counter-reset: step; display: grid; gap: 14px; }
.step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.step::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: .82rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.step h4 { font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.step p  { color: var(--muted); font-size: .92rem; }

/* ── Lista sa kvačicama (šta rešava) ──────────────────────────────────────── */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; color: var(--ink-2); }
.checks svg { flex: 0 0 20px; margin-top: 2px; color: var(--green); }

/* ── Naizmenične sekcije proizvoda ────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split--flip .split__media { order: -1; }
.split__media img { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.split h2 { margin-bottom: 14px; }

/* ── Traka sa pozivom na akciju ───────────────────────────────────────────── */
.cta {
  background: var(--ink); color: #fff; border-radius: var(--radius-lg);
  padding: 56px; text-align: center;
}
.cta h2 { margin-bottom: 12px; }
.cta p  { color: #a9b4c4; max-width: 56ch; margin: 0 auto 28px; }
.cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Podnožje ─────────────────────────────────────────────────────────────── */
.footer { background: var(--ink); color: #98a3b3; padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer h4 { color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { font-size: .9rem; }
.footer a:hover { color: #fff; }
.footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid #1e2839;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem;
}

/* ── Stranica proizvoda ───────────────────────────────────────────────────── */
.phero { padding: 56px 0 64px; background: linear-gradient(180deg, var(--bg-soft), #fff); border-bottom: 1px solid var(--line); }
.crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; }
.crumbs a:hover { color: var(--blue); }
.phero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.phero h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 16px; }
.phero__cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 800; letter-spacing: .03em;
  background: var(--green-soft); color: var(--green); border: 1px solid rgba(5,150,105,.25);
}
.tag--amber { background: #fffbeb; color: var(--amber); border-color: rgba(217,119,6,.25); }
.tag--blue  { background: var(--blue-soft); color: var(--blue-dark); border-color: rgba(37,99,235,.22); }

/* ── Akreditaciona oznaka: zvanično rešenje Ministarstva finansija ─────────── */
.fisc {
  display: inline-flex; align-items: stretch; margin-bottom: 8px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 12px 26px -20px rgba(11,18,32,.4);
}
.fisc__seal {
  flex-shrink: 0; width: 54px;
  display: grid; place-items: center;
  background: #fbfbfc; border-right: 1px solid var(--line);
  color: var(--ink);
}
.fisc__body { display: grid; gap: 6px; padding: 11px 17px; align-content: center; min-width: 0; }
.fisc__lead {
  font-size: .64rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2);
}
.fisc__nums { display: grid; gap: 5px; }
.fisc__nums > span { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; }
.fisc__nums b {
  flex-shrink: 0; font-size: .6rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
  background: #f2f3f5; border: 1px solid var(--line);
  padding: 3px 7px; border-radius: 6px;
}
.fisc__nums code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; letter-spacing: -.01em; color: var(--ink-2); font-weight: 600;
}
@media (max-width: 480px) {
  .fisc__seal { width: 46px; }
  .fisc__body { padding: 10px 13px; }
  .fisc__nums code { font-size: .74rem; }
}

/* Galerija snimaka ekrana */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; background: #fff; }
/* <picture> wrapper oko slika (webp + fallback) ne sme da menja raspored -
   display:contents cini da se img ponasa kao direktno dete .shot-a kao ranije. */
picture { display: contents; }
.shot img { transition: transform .3s ease; }
.shot:hover img { transform: scale(1.03); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,18,32,.9); display: none;
  align-items: center; justify-content: center; padding: 32px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; }

/* Povezani proizvodi */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related a {
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  transition: border-color .16s ease, transform .16s ease;
}
.related a:hover { border-color: var(--blue); transform: translateY(-2px); }
.related strong { display: block; font-size: .95rem; margin-bottom: 3px; }
.related span   { font-size: .84rem; color: var(--muted); }

/* Stavka koja postoji samo u mobilnom (otvorenom) meniju - na desktopu je isto
   dostupna kao dugme u traci, pa bi se ovde duplirala. */
.nav__item--mob { display: none; }

/* ── Cenovnik ─────────────────────────────────────────────────────────────── */
.cene { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: start; }
.cena {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.cena--top { border-color: var(--blue); box-shadow: 0 6px 26px rgba(37,99,235,.10); }
.cena__znak {
  position: absolute; top: -11px; left: 24px;
  background: var(--blue); color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.cena h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.cena__opis { font-size: .84rem; color: var(--muted); margin-bottom: 16px; min-height: 3.2em; }
.cena__broj { margin-bottom: 18px; }
.cena__broj strong { font-size: 2.1rem; font-weight: 900; letter-spacing: -.02em; }
.cena__broj span  { font-size: .85rem; color: var(--muted); font-weight: 600; }
.cena__lista { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cena__lista li { font-size: .86rem; color: #334155; padding-left: 20px; position: relative; }
.cena__lista li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
.cena .btn { justify-content: center; }

/* ── Responsivno ──────────────────────────────────────────────────────────── */
/* Traka je sa vremenom narasla: tri padajuca menija plus Digital Signage,
   LPFR, Oprema, Cenovnik i FAQ, a sa desne strane jos jezik i dva dugmeta.
   Na 1180px kontejnera to vise ne staje u jedan red.

   Zato se izmedju 1080 i 1240 piksela traka STEZE (manji razmaci, uzi
   paddinzi, sitniji font) umesto da se odmah skloni u burger. Ispod 1080 se
   ide na burger, jer dalje stezanje pravi tekst koji se ne cita. */
@media (max-width: 1240px) {
  .nav__inner { gap: 14px; }
  .nav__menu  { gap: 2px; margin-left: 0; }
  .nav__link  { padding: 9px 8px; font-size: .85rem; gap: 4px; }
  .nav__caret { width: 9px; height: 9px; }
  .nav__right { gap: 8px; }
  .lang button { padding: 6px 8px; font-size: .72rem; }
  .nav__right .btn { padding: 6px 11px; font-size: .77rem; }
  .logo { font-size: 1.18rem; }
}

@media (max-width: 1080px) {
  .nav__menu { display: none; }
  .nav__burger { display: block; }
  .nav.open .nav__item--mob { display: block; }
  .nav.open .nav__menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px; box-shadow: var(--shadow-lg); max-height: 70vh; overflow-y: auto;
  }
  /* U otvorenom meniju ima mesta, pa se stezanje ponistava. */
  .nav.open .nav__link { padding: 11px 12px; font-size: .95rem; }
  .dropdown { position: static; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: none; padding: 0 0 0 10px; }
}

@media (max-width: 980px) {
  .hero__grid, .phero__grid, .split { grid-template-columns: 1fr; gap: 36px; }
  .split--flip .split__media { order: 0; }
  .doors, .grid-3, .grid-4, .shots, .related { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .doors, .grid-2, .grid-3, .grid-4, .shots, .related, .footer__grid { grid-template-columns: 1fr; }
  .cta { padding: 36px 24px; }
  /* Na uskom ekranu iz trake ostaje samo Registracija: dva dugmeta uz prekidac
     jezika i burger ne staju u jedan red. Prijava se seli u otvoreni meni
     (.nav__item--mob), pa nije izgubljena. */
  .nav__auth { display: none; }
}

/* ==========================================================================
   Kontakt forma
   --------------------------------------------------------------------------
   Jedina forma na sajtu, pa klase nose prefiks `kform` i nigde se ne sudaraju
   sa ostatkom. Dolazi posle medija upita namerno: nijedan selektor odavde ne
   preklapa se sa gornjima, a svoja pravila za uski ekran nosi sam na dnu.
   ========================================================================== */
.kform__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start;
}
.kform { display: grid; gap: 18px; }
.kform__par { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kfield { display: grid; gap: 7px; }
.kfield > span {
  font-size: .82rem; font-weight: 700; color: var(--ink-2);
}
.kfield > span i {
  font-style: normal; font-weight: 500; color: var(--muted-2);
}
.kfield input, .kfield select, .kfield textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.kfield textarea { min-height: 150px; resize: vertical; }
.kfield input:focus, .kfield select:focus, .kfield textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
/* Zamka za botove: mora biti nedostupna i citacima ekrana, inace je slepi
   posetilac popuni i poruka mu tiho nestane. */
.kform__zamka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kform__dno { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kform__ishod { font-size: .9rem; font-weight: 600; }
.kform__ishod--ok  { color: var(--green); }
.kform__ishod--pad { color: #dc2626; }
.kform button[disabled] { opacity: .6; cursor: progress; }

.kside { display: grid; gap: 14px; align-content: start; }
.kcard {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; background: var(--bg-soft);
}
.kcard h3 { font-size: 1rem; margin-bottom: 8px; }
.kcard p, .kcard li { font-size: .92rem; color: var(--muted); }
/* `:not(.btn)` je OBAVEZAN. Ovaj selektor je klasa + element, dakle
   specificniji od `.btn--primary`, pa bi dugmetu unutar kartice prebojio
   tekst u plavo - plavo na plavoj podlozi, tekst nestane. Vec se desilo. */
.kcard a:not(.btn) { color: var(--blue); font-weight: 600; }
.kcard ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.kcard dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; margin: 0; }
.kcard dt { color: var(--muted-2); }
.kcard dd { margin: 0; color: var(--ink-2); }

@media (max-width: 900px) {
  .kform__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .kform__par { grid-template-columns: 1fr; }
}

/* ── Dodaci uz osnovu ─────────────────────────────────────────────────────
   Cena stoji uz naziv, a ne ispod opisa: dodatak se bira sabiranjem, pa oko
   mora da hvata iznos u istom redu sa imenom, bez čitanja cele kartice. */
.dodatak__vrh {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 8px; flex-wrap: wrap;
}
.dodatak__vrh h3 { margin: 0; }
.dodatak__cena {
  font-size: 1.05rem; font-weight: 800; color: var(--blue); white-space: nowrap;
}
.dodatak__cena em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--muted-2); }

/* Zbir na dnu cenovnika: jedan red koji kaže koliko košta sve zajedno. */
.zbir {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--blue-soft); padding: 30px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.zbir h3 { font-size: 1.15rem; margin-bottom: 6px; }
.zbir p { font-size: .93rem; color: var(--muted); margin: 0; max-width: 56ch; }
.zbir__broj { text-align: right; }
.zbir__broj strong { font-size: 2rem; font-weight: 800; color: var(--ink); display: block; line-height: 1.1; }
.zbir__broj s { color: var(--muted-2); font-size: .95rem; }
.zbir__broj span { font-size: .8rem; font-weight: 700; color: var(--muted-2); }
@media (max-width: 640px) {
  .zbir { flex-direction: column; align-items: flex-start; }
  .zbir__broj { text-align: left; }
}

/* ── Izbor delatnosti na cenovniku ────────────────────────────────────────
   Cenovnik pokazuje jednu granu odjednom. Ugostitelj ne treba da prelistava
   magacinske pakete da bi našao svoju cenu.

   Bez JavaScripta sve tri grane ostaju vidljive: strana je i tada upotrebljiva,
   samo duža. Zato se sakrivanje radi iz skripte, a ne iz CSS-a. */
.grane {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 40px 0 0;
  /* Posle izbora delatnosti skrol dolazi ovde. Bez ovoga bi lepljiva
     navigacija (--nav-h) prekrila traku na koju se sleće. */
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.grane button {
  font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 24px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.grane button:hover { border-color: #cfd6e0; }
.grane button.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.grane button:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.grana[hidden] { display: none; }
@media (max-width: 640px) {
  .grane { padding-top: 28px; }
  .grane button { padding: 10px 18px; font-size: .88rem; }
}

/* ── Pitanje na ulasku u cenovnik ─────────────────────────────────────────
   Modal je u HTML-u sa atributom `hidden`, a otvara ga skripta. Posetilac bez
   JavaScripta ga nikada ne vidi, i to je ispravno: njemu su sve tri grane
   ionako vidljive, pa nema sta da bira.

   Izbor se pamti, da se pitanje ne ponavlja pri svakoj poseti. Traka sa
   delatnostima ostaje na strani, pa se izbor menja i posle. */
.izbor {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(11, 18, 32, .55);
  backdrop-filter: blur(3px);
  animation: izbor-ulaz .18s ease-out;
}
.izbor[hidden] { display: none; }
.izbor__panel {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 40px; max-width: 880px; width: 100%;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  animation: izbor-panel .22s cubic-bezier(.2, .8, .3, 1);
}
.izbor__naslov { text-align: center; margin-bottom: 6px; font-size: 1.6rem; }
.izbor__uvod {
  text-align: center; color: var(--muted); font-size: .96rem;
  margin: 0 auto 30px; max-width: 46ch;
}
.izbor__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.izbor__karta {
  font: inherit; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; display: grid; gap: 10px; align-content: start;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.izbor__karta:hover {
  border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow);
}
.izbor__karta:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.izbor__ikona {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--blue-soft); color: var(--blue);
  display: grid; place-items: center;
}
.izbor__karta strong { font-size: 1.02rem; color: var(--ink); }
.izbor__karta span { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.izbor__dno { text-align: center; margin-top: 24px; }
.izbor__sve {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  background: none; border: none; color: var(--muted-2); text-decoration: underline;
}
.izbor__sve:hover { color: var(--blue); }

@keyframes izbor-ulaz  { from { opacity: 0 } to { opacity: 1 } }
@keyframes izbor-panel { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

@media (max-width: 760px) {
  .izbor__panel { padding: 28px 22px; }
  .izbor__grid { grid-template-columns: 1fr; }
  .izbor__naslov { font-size: 1.3rem; }
  .izbor__karta { grid-template-columns: 44px 1fr; column-gap: 16px; align-items: center; }
  .izbor__ikona { grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .izbor, .izbor__panel { animation: none; }
  .izbor__karta:hover { transform: none; }
}

/* ── Pitanja i odgovori ───────────────────────────────────────────────────
   Nosi ih <details>, pa sklapanje radi bez skripte. Marker koji pretraživač
   sam crta se sklanja, jer se ne da uskladiti sa ostatkom sajta. */
.pitanja { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.pitanje {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
  transition: border-color .16s ease;
}
.pitanje[open] { border-color: #cfd6e0; }
.pitanje summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px;
  font-weight: 700; font-size: 1rem; color: var(--ink);
}
.pitanje summary::-webkit-details-marker { display: none; }
.pitanje summary:hover { color: var(--blue); }
.pitanje summary:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: -3px; }
.pitanje__znak {
  flex-shrink: 0; color: var(--muted-2);
  transition: transform .18s ease, color .16s ease;
}
.pitanje[open] .pitanje__znak { transform: rotate(180deg); color: var(--blue); }
.pitanje p {
  margin: 0; padding: 0 24px 22px;
  color: var(--muted); font-size: .95rem; line-height: 1.65;
}
@media (max-width: 640px) {
  .pitanje summary { padding: 16px 18px; font-size: .95rem; gap: 12px; }
  .pitanje p { padding: 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pitanje__znak { transition: none; }
}

/* ── Pravne stranice ──────────────────────────────────────────────────────
   Politika privatnosti i slično: dug tekst koji se stvarno čita, pa je merilo
   čitljivost, a ne izgled. Uža kolona, veći prored, jasna hijerarhija. */
.pravni { max-width: 780px; margin: 0 auto; }
.pravni h2 {
  font-size: 1.45rem; margin: 52px 0 16px;
  padding-top: 28px; border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.pravni h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.pravni h3 { font-size: 1.05rem; margin: 30px 0 10px; }
.pravni p  { margin: 0 0 14px; color: var(--muted); line-height: 1.72; }
.pravni p strong { color: var(--ink-2); }
.pravni a:not(.btn) { color: var(--blue); font-weight: 600; }   /* isti razlog kao kod .kcard */
.pravni .kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; color: var(--muted-2);
}

/* Tabela „podatak / zašto / gde ide". Na uskom ekranu se ne sabija u
   nečitljive kolone nego se svaki red pretvori u karticu, sa nazivom kolone
   ispisanim iz data-atributa. */
.tabela { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .92rem; }
.tabela th {
  text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--line);
}
.tabela td {
  padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line);
  color: var(--muted); vertical-align: top; line-height: 1.55;
}
.tabela td:first-child { color: var(--ink-2); font-weight: 600; width: 32%; }
.tabela td:last-child, .tabela th:last-child { padding-right: 0; }

.pravni .napomena {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin: 18px 0;
}
.pravni .napomena p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead { display: none; }
  .tabela tr { border-bottom: 1px solid var(--line); padding: 14px 0; }
  .tabela td { border: none; padding: 2px 0; }
  .tabela td:first-child { width: auto; }
  .tabela td[data-kolona]::before {
    content: attr(data-kolona); display: block;
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted-2); margin-top: 8px;
  }
}

/* ── Izbor aplikacije u politici privatnosti ──────────────────────────────
   Odeljak „sta prikuplja koja aplikacija" je najduzi na strani, a posetioca
   po pravilu zanima tacno jedna aplikacija. Ovo su obicni linkovi na sidra,
   ne tabovi: rade bez skripte, mogu se otvoriti u novoj kartici i mogu se
   poslati kao adresa. */
.app-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }
.app-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-size: .88rem; font-weight: 600; color: var(--ink-2);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.app-nav a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.app-nav a:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.app-nav svg { flex-shrink: 0; }
/* Sidro ne sme da zavrsi ispod lepljive navigacije. */
.pravni h3[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ── Slajder za obim mejlova ──────────────────────────────────────────────
   Cetiri kartice sa paketima teraju kupca da poredi kolone da bi nasao svoj
   obim. Slajder postavlja pravo pitanje: koliko mejlova saljes mesecno. Cena
   se onda samo procita.

   Bez JavaScripta slajder ostaje obican `range` sa vidljivom tabelom ispod,
   pa se cene i tada vide sve odjednom. */
.obim {
  max-width: 720px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 36px; background: #fff; box-shadow: var(--shadow);
}
.obim__vrh { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.obim__kolicina { font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.obim__kolicina span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }
.obim__cena { text-align: right; }
.obim__cena strong { display: block; font-size: 2.1rem; font-weight: 800; color: var(--blue); line-height: 1.1; }
.obim__cena em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--muted-2); }

.obim input[type="range"] { width: 100%; margin: 0; accent-color: var(--blue); height: 26px; cursor: pointer; }
.obim__oznake { display: flex; justify-content: space-between; margin-top: 4px; font-size: .74rem; font-weight: 600; color: var(--muted-2); }
.obim__oznake span { flex: 1; text-align: center; }
.obim__oznake span:first-child { text-align: left; }
.obim__oznake span:last-child  { text-align: right; }
.obim__oznake span.active { color: var(--blue); }

.obim__dno { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.obim__napomena { font-size: .88rem; color: var(--muted); margin: 0; max-width: 42ch; }

/* Tabela sa svim nivoima. Sa skriptom je pomocna, bez nje je jedini prikaz. */
.obim__tabela { margin-top: 26px; }
.obim__tabela table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.obim__tabela th { text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.obim__tabela td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.obim__tabela td:first-child { color: var(--ink-2); font-weight: 700; }
.obim__tabela tr.active td { color: var(--blue); }

@media (max-width: 640px) {
  .obim { padding: 24px 20px; }
  .obim__vrh { flex-direction: column; align-items: flex-start; }
  .obim__cena { text-align: left; }
  .obim__oznake { font-size: .68rem; }
}