/* ============================================================================
   FONTOVI — poslužuju se s našeg servera, ne s Googleovog
   ----------------------------------------------------------------------------
   Prije je stranica dohvaćala fontove s fonts.googleapis.com. To je značilo da
   preglednik prvo mora otvoriti vezu prema Googleu, dohvatiti popis fontova, pa
   tek onda same fontove s trećeg servera (fonts.gstatic.com) — a dok se to ne
   dogodi, stranica se NE crta. To je bio glavni razlog zašto je prvi prikaz
   stranice trajao ~2,9 sekunde.

   Sada su datoteke fontova u mapi "assets/fonts/" i stižu s iste adrese kao i
   stranica, po vezi koja je ionako već otvorena.

   VAŽNO: pravila ispod su DOSLOVNA kopija onoga što je Google servirao — iste
   datoteke (preuzete s fonts.gstatic.com), iste težine i isti "unicode-range"
   (popis znakova koje datoteka pokriva). Zato izgled slova ostaje potpuno
   nepromijenjen.

   Zadržana su samo dva podskupa: "latin" i "latin-ext". Provjereno je da oni
   pokrivaju svih 101 znak koji se pojavljuje na stranicama, uključujući č, ć,
   ž, š i đ. Podskupovi cyrillic, cyrillic-ext, greek i vietnamese su izbačeni
   jer se nijedan njihov znak nigdje ne koristi.

   Znakovi poput → ✓ ▼ i emojija nisu ni u jednom podskupu, pa ih preglednik
   crta zamjenskim fontom — kao i dosad, tu se ništa ne mijenja.

   Ako se ovdje išta mijenja, u svim stranicama treba podići broj verzije u
   adresi (nos.css?v=...) — inače posjetitelji mjesec dana dobivaju staru
   datoteku iz keša.

   Fontovi su pod SIL Open Font License 1.1 — vidi assets/fonts/LICENSE.txt.
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}
/* NOS AI Platforma — shared styles for all pages */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0a1524; font-family: 'Plus Jakarta Sans', sans-serif; color: #0f2438; }
a { color: #2f7cbb; text-decoration: none; }
a:hover { color: #3b9ae0; }
::selection { background: #2b7dc4; color: #fff; }
button { font-family: inherit; }

@keyframes v2pulse { 0%,100% { opacity:1; } 50% { opacity:0.42; } }
@keyframes v2pulse2 { 0%,100%{ opacity:.55; transform: scale(1);} 50%{ opacity:1; transform: scale(1.06);} }
@keyframes v2menu { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes v2fade { from { opacity:0; } to { opacity:1; } }
@keyframes v2rise { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes v2orbit { to { transform: rotate(360deg); } }
@keyframes v2floaty { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,calc(-50% - 6px)); } }
@keyframes v2marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes v2flow { 0%{ transform: translateY(-100%);} 100%{ transform: translateY(320%);} }
@keyframes v2spin { to { transform: rotate(360deg); } }
@keyframes v2pop { 0%{ transform:scale(0);} 60%{ transform:scale(1.18);} 100%{ transform:scale(1);} }

.v2-marquee-track { animation: v2marquee 34s linear infinite; }
.v2-marquee:hover .v2-marquee-track { animation-play-state: paused; }

input[type="checkbox"] { appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1.5px solid #d3dfea; border-radius:5px; background:#fff; cursor:pointer; flex-shrink:0; display:inline-block; transition:background-color .15s ease, border-color .15s ease; }
input[type="checkbox"]:checked { background-color:#2170ab; border-color:#2170ab; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size:12px; background-position:center; background-repeat:no-repeat; }

/* demo modal fields share one focus treatment */
.demo-field { font-family:'Plus Jakarta Sans',sans-serif; width:100%; font-size:15px; font-weight:500; color:#102942; background:#f8fafd; border:1px solid #e4ebf3; border-radius:12px; padding:14px 16px; outline:none; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.demo-field:focus { border-color:#3b9ae0; background:#fff; box-shadow:0 0 0 3px rgba(59,154,224,0.13); }
textarea.demo-field { resize:vertical; line-height:1.55; }
select.demo-field { appearance:none; cursor:pointer; padding-right:44px; }

/* nav dropdown ("AI rješenja")
   Pet rješenja stoji u jednoj uspravnoj listi (`.nos-menu-list` u samim
   stranicama). Širina ploče je odmjerena po najdužem opisu, pa svaki opis
   stane u jedan red i u hrvatskoj i u engleskoj inačici — zato 400px, a ne
   600px kao kad su stavke bile u dva stupca. */
.ai-menu-trigger { position:relative; display:flex; align-items:center; gap:6px; cursor:pointer; padding:24px 0; color:#b8c4d4; }
.ai-menu-trigger.open { color:#ffffff; }
.ai-menu-trigger .caret { display:flex; transition:transform .2s ease; }
.ai-menu-trigger.open .caret { transform:rotate(180deg); }
.ai-menu-panel { position:absolute; top:100%; left:-14px; width:400px; padding-top:8px; display:none; animation:v2menu .18s cubic-bezier(.2,.8,.3,1); }
.ai-menu-trigger.open .ai-menu-panel { display:block; }
.ai-dropdown-item:hover { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.12); }
.footer-link:hover { color:#fff; }
.nav-quicklink:hover { color:#fff; }

/* generic hover-lift used on cards; exact shadow supplied per-element via data-hover */
[data-hover] { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease, border-color .3s ease, filter .16s ease; }

/* demo modal */
.demo-overlay { display:none; font-family:'Plus Jakarta Sans',sans-serif; position:fixed; inset:0; z-index:200; align-items:flex-start; justify-content:center; padding:44px 20px; overflow-y:auto; background:rgba(10,21,36,0.6); backdrop-filter:blur(10px); animation:v2fade .2s ease; }
.demo-overlay.open { display:flex; }
.demo-card { font-family:'Plus Jakarta Sans',sans-serif; position:relative; width:100%; max-width:580px; background:#fff; border:1px solid #e8eef5; border-radius:24px; padding:46px 46px 32px; box-shadow:0 40px 100px rgba(8,20,36,0.45); animation:v2rise .26s cubic-bezier(.2,.8,.3,1); }
.demo-close { font-family:'Plus Jakarta Sans',sans-serif; position:absolute; top:24px; right:24px; width:36px; height:36px; padding:0; border:1px solid #e4ebf3; cursor:pointer; border-radius:11px; background:#f6f9fc; color:#5b6b7e; display:flex; align-items:center; justify-content:center; transition:background .16s ease, color .16s ease; }
.demo-close:hover { background:#eaf2fa; color:#2170ab; }
#demo-success { display:none; }
.demo-overlay.sent #demo-form { display:none; }
.demo-overlay.sent #demo-success { display:block; }
.demo-more-toggle { font-family:'Plus Jakarta Sans',sans-serif; background:none; border:none; padding:0; cursor:pointer; color:#2170ab; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; align-self:flex-start; }
.demo-more-toggle:hover { color:#3b9ae0; }
.demo-more-toggle .caret { display:flex; transition:transform .2s ease; }
.demo-more-toggle.open .caret { transform:rotate(180deg); }
#demo-more-field { display:none; }
.demo-more-toggle.open ~ #demo-more-field { display:block; }
/* informativna napomena o privatnosti ispod polja forme (nije privola, nema kvačice) */
.demo-privacy-note { margin:0; font-size:13.5px; line-height:1.6; color:#5b6b7e; font-weight:500; }
.demo-privacy-note a { color:#2170ab; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.demo-privacy-note a:hover { color:#3b9ae0; }
.demo-privacy-note a:focus-visible { outline:2px solid #3b9ae0; outline-offset:3px; border-radius:3px; color:#3b9ae0; }

.demo-submit { font-family:'Plus Jakarta Sans',sans-serif; margin-top:6px; width:100%; border:none; cursor:pointer; background:linear-gradient(180deg,#3b9ae0,#2170ab); color:#fff; padding:17px; border-radius:12px; font-weight:700; font-size:16px; box-shadow:0 14px 32px rgba(43,125,196,0.3); transition:filter .16s ease, transform .16s ease; }
.demo-submit:hover { filter:brightness(1.07); transform:translateY(-1px); }
.demo-submit[disabled] { cursor:progress; filter:none; transform:none; opacity:0.72; box-shadow:0 8px 20px rgba(43,125,196,0.22); }
.demo-submit[disabled]:hover { filter:none; transform:none; }

/* honeypot — vidljivo samo botovima, nikad korisniku (ne koristi display:none jer ga dio botova preskače) */
.demo-hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* greška pri slanju demo forme */
#demo-error { display:none; gap:10px; align-items:flex-start; background:#fdf2f1; border:1px solid #f2cfcb; color:#9c3025; border-radius:12px; padding:13px 15px; font-size:14px; line-height:1.5; font-weight:600; }
#demo-error.show { display:flex; }

/* accordion (pricing add-ons) */
.acc-toggle .caret { display:flex; flex-shrink:0; transition:transform .22s ease; }
.acc-toggle.open .caret { transform:rotate(180deg); }
.acc-panel { display:none; }
.acc-toggle.open ~ .acc-panel { display:block; }

/* image placeholder tiles for unfilled visual slots */
.img-slot { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px); background-color:#0f2338; }
.img-slot.light { background-color:#eef3f8; background-image:repeating-linear-gradient(135deg, rgba(20,42,72,0.05) 0 2px, transparent 2px 14px); }
.img-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.img-slot-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#7fa7cc; text-align:center; padding:0 14px; }
.img-slot.light .img-slot-label { color:#7f94ab; }

/* ----------------------------------------------------------------------------
   NOS ItemAI — sekcija "Od ulaznog podatka do gotovog artikla" (SAMO DESKTOP)

   Problem: obje kartice ("Fotografija" i "Barkod") koriste isti okvir, ali su
   slike različitih omjera. Kako su slike ulazile u računanje visine, verzija s
   biljkom razvlačila je lijevi okvir (i time cijeli modul) puno više od verzije
   s barkodom — prebacivanje kartica vidljivo je skakalo.

   Rješenje: barkod verzija je referentni raspored. Lijevom okviru se upisuje
   fiksni omjer ulazne slike barkoda (899×1200), što daje točno iste dimenzije
   kakve je imao prije. Obje slike se postavljaju apsolutno unutar svog okvira,
   pa više ne mogu dizati visinu; ispunjavaju okvir preko "object-fit:cover"
   (naslijeđeno iz .img-slot img), dakle bez razvlačenja — slika se samo reže.

   Sve je zatvoreno u "min-width:981px" da mobilni i tablet prikaz ostanu isti.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {

  /* 01 · ULAZNI PODATAK — okvir uvijek istog omjera kao u barkod verziji.
     "flex: 1 1 auto" znači: polazna visina je ona koju daje omjer (dakle točno
     referentne dimenzije), a ako je neki drugi stupac viši, okvir se svejedno
     rastegne do dna — pa stupci ostaju poravnati i na užim desktop širinama. */
  div:has(> #ex-input-slot) {
    flex: 1 1 auto !important;
    aspect-ratio: 899 / 1200;
  }
  #ex-input-slot { position: absolute; inset: 0; }

  /* 03 · GOTOV ARTIKL — slika na "Product page" kartici također ne smije
     dizati visinu; okvir joj i dalje popunjava preostali prostor kartice */
  #ex-output-slot { position: absolute; inset: 0; }

  /* naziv proizvoda zauzima jednako mjesta bez obzira lomi li se u 1 ili 2
     retka — inače bi se slika iznad njega razlikovala za jedan redak */
  #ex-prodname { min-height: 32px; }
}

/* ============================================================================
   MOBILNI I TABLET PRIKAZ
   ----------------------------------------------------------------------------
   Dizajn stranica pisan je inline stilovima (style="..." u samim tagovima),
   pa se ovdje koristi !important — inače inline stil uvijek pobijedi.

   SVE je unutar @media pravila, dakle desktop prikaz (širine iznad 980px)
   ostaje točno kakav je bio. Boje, fontovi, tekstovi i animacije se ne mijenjaju
   — mijenja se samo raspored, veličine i razmaci na manjim ekranima.

   Dvije granice:
     ≤ 980px  tablet i manje  — glavni rasporedi se sužavaju
     ≤ 640px  mobiteli        — sve u jedan stupac
   ========================================================================== */

/* iOS ne smije sam povećavati tekst u vodoravnom položaju */
html { -webkit-text-size-adjust: 100%; }

/* ---------------------------------------------------------------------------
   ZAGLAVLJE NA USKOM DESKTOPU (981–1140px)

   U navigaciji je jedna poveznica više ("Partneri"). Na širokim ekranima to se
   ne primijeti, ali između 981px (gdje se navigacija još prikazuje) i ~1140px
   red je bio pun do zadnjeg piksela — poveznice bi prešle u dva reda.

   Zato se u tom pojasu razmaci u zaglavlju malo suze, a poveznice se izričito
   drže u jednom redu. Iznad 1140px sve ostaje točno kako je bilo, a ispod
   981px desktop navigacija se ionako skriva (preuzima je hamburger izbornik).

   "!important" je nužan jer su razmaci upisani inline u samim tagovima.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1140px) {
  header > div:first-child > div:first-child { gap: 26px !important; }
  header nav { gap: 20px !important; }

  /* Engleske oznake u izborniku dulje su od hrvatskih ("How it works" prema
     "Kako radi", "Integrations" prema "Integracije"), pa im u ovom pojasu treba
     još malo prostora. Pravilo je vezano na <html lang="en">, dakle hrvatske
     stranice se ovime NE mijenjaju. */
  html[lang="en"] header > div:first-child > div:first-child { gap: 22px !important; }
  html[lang="en"] header nav { gap: 17px !important; }
  .nav-quicklink { white-space: nowrap; }
}

/* mobilni izbornik (hamburger) — na desktopu se ne prikazuje */
.nos-burger { display:none; }

.nos-mobile-menu { display:none; }

.nos-mobile-menu.open { display:block; }

/* sigurnosna brava: na desktopu se mobilni izbornik ne prikazuje nikada,
   čak ni ako je slučajno ostao otvoren pri povećanju okna preglednika */
@media (min-width: 981px) {
  .nos-mobile-menu, .nos-mobile-menu.open { display:none !important; }
}

/* ---------------------------------------------------------------------------
   TABLET I MANJE (≤ 980px)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {

  /* --- zaglavlje: desktop navigacija se skriva, pojavljuje se hamburger --- */
  header nav { display:none !important; }
  .ai-menu-panel { width:92vw !important; left:0 !important; }

  .nos-burger {
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:4px; width:42px; height:42px; flex-shrink:0; padding:0; cursor:pointer;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16);
    border-radius:10px; color:#e6eef7;
    transition:background .16s ease, border-color .16s ease;
  }
  .nos-burger:hover { background:rgba(255,255,255,0.11); }
  .nos-burger span {
    display:block; width:17px; height:1.8px; border-radius:2px; background:currentColor;
    transition:transform .22s cubic-bezier(.2,.8,.3,1), opacity .16s ease;
  }
  .nos-burger.open span:nth-child(1) { transform:translateY(5.8px) rotate(45deg); }
  .nos-burger.open span:nth-child(2) { opacity:0; }
  .nos-burger.open span:nth-child(3) { transform:translateY(-5.8px) rotate(-45deg); }

  /* Panel izbornika je "position:fixed" i visi o ekranu, NE o zaglavlju.
     Zato ga ne može odnijeti pomicanje stranice, nikad nije odrezan, a
     "bottom:0" znači da uvijek završava točno na dnu vidljivog ekrana —
     pa sadržaj koji ne stane može se pomicati unutar panela.
     Visinu zaglavlja upisuje JavaScript u --nos-hdr-h, pa je početak panela
     uvijek točno ispod zaglavlja. */
  .nos-mobile-menu {
    position:fixed; top:var(--nos-hdr-h, 63px); left:0; right:0; bottom:0; z-index:190;
    background:rgba(11,23,39,0.985); backdrop-filter:blur(18px);
    border-top:1px solid rgba(255,255,255,0.09);
    box-shadow:0 30px 70px rgba(4,12,24,0.5);
    /* namjerno samo stapanje (v2fade), bez pomicanja (v2menu):
       položaj panela tako nikad ne zavisi od toga je li animacija završila */
    animation:v2fade .18s ease;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }

  /* Red s gumbom za zatvaranje. "sticky" znači da ostaje vidljiv na vrhu
     panela i dok se izbornik pomiče — izlaz je uvijek na dohvat ruke. */
  .nos-mm-close-row {
    position:sticky; top:0; z-index:2;
    display:flex; align-items:center; justify-content:flex-end;
    padding:12px 20px 8px;
    background:linear-gradient(180deg, rgba(11,23,39,0.99) 72%, rgba(11,23,39,0));
  }
  .nos-mm-close {
    display:flex; align-items:center; gap:8px; cursor:pointer;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16);
    border-radius:10px; padding:9px 13px; color:#c5d3e2;
    font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
    letter-spacing:0.14em; text-transform:uppercase;
    transition:background .16s ease, color .16s ease;
  }
  .nos-mm-close:hover { background:rgba(255,255,255,0.12); color:#fff; }

  .nos-mm-inner { padding:2px 20px 34px; display:flex; flex-direction:column; gap:8px; }
  .nos-mm-label {
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.2em;
    color:#7f94ab; font-weight:600; text-transform:uppercase; margin:6px 0 4px;
  }
  .nos-mm-grid { display:grid; grid-template-columns:1fr; gap:2px; }
  /* cilja se na sve kartice (> a), a ne samo na ".ai-dropdown-item" — kartica
     trenutne stranice tu klasu nema, pa bi inače imala drukčiji rub */
  .nos-mm-grid > a { padding:12px 12px !important; }
  .nos-mm-links { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
  .nos-mm-links a {
    color:#c5d3e2 !important; font-size:15.5px; font-weight:600;
    padding:13px 12px; border-radius:11px;
    border:1px solid transparent; transition:background .16s ease;
  }
  .nos-mm-links a:hover { background:rgba(255,255,255,0.07); color:#fff !important; }
  .nos-mm-cta {
    display:block !important; text-align:center; margin-top:12px;
    padding:15px 20px !important; border-radius:11px !important; font-size:15.5px !important;
  }
  /* NAPOMENA: pomicanje stranice iza otvorenog izbornika NE zaustavlja se
     s "overflow:hidden" na stranici. To bi razbilo lijepljeno (sticky)
     zaglavlje — ono bi odskočilo na svoje mjesto u dokumentu, odnijelo
     izbornik izvan ekrana i korisnik ne bi imao čime zatvoriti izbornik.
     Umjesto toga pomicanje pozadine zaustavlja JavaScript (assets/js/nos.js). */

  /* --- zaglavlje: uži rubovi i manji logo ---
     Pazi: ":first-child" je važan — panel mobilnog izbornika je također
     <div> unutar <header>, pa bi ga pravilo bez toga također pogodilo. */
  header > div:first-child { padding-left:24px !important; padding-right:24px !important; }
  header > div:first-child > div:first-child { gap:0 !important; }
  header > div:first-child img { height:40px !important; }

  /* --- vanjski rubovi sekcija, hero okvira i podnožja ---
     Redoslijed je važan: zapisi s tri vrijednosti (npr. "96px 40px 110px")
     sadrže u sebi i zapis s dvije ("96px 40px"), pa moraju doći KASNIJE —
     kod istog prioriteta pobjeđuje pravilo napisano niže. */
  [style*="padding:120px 40px"] { padding:72px 28px !important; }
  [style*="padding:104px 40px"] { padding:68px 28px !important; }
  [style*="padding:100px 40px"] { padding:68px 28px !important; }
  [style*="padding:96px 40px"]  { padding:64px 28px !important; }
  [style*="padding:78px 40px"]  { padding:58px 28px !important; }
  [style*="padding:64px 40px"]  { padding:52px 28px !important; }
  [style*="padding:44px 40px"]  { padding:44px 28px !important; }
  /* sekcije bez vodoravnog ruba (vrpca s logotipima) ostaju od kraja do kraja */
  [style*="padding:104px 0"]    { padding:64px 0 !important; }
  /* zapisi s tri vrijednosti */
  [style*="padding:96px 40px 110px"] { padding:64px 28px 72px !important; }
  [style*="padding:30px 40px 96px"]  { padding:26px 28px 64px !important; }
  [style*="padding:64px 40px 34px"]  { padding:52px 28px 30px !important; }

  /* Red s oznakama u hero dijelu proizvodnih stranica ima zadanu "prirodnu"
     širinu, pa se ne bi sam sužio i izašao bi iz ekrana.
     Namjerno se cilja SAMO taj red — vrpca s logotipima (.v2-marquee-track)
     mora zadržati prirodnu širinu, inače njeno pomicanje prestane raditi. */
  [style*="align-items:center; gap:14px; width:max-content"] {
    width:auto !important; max-width:100% !important;
  }
  .v2-marquee-track { width:max-content !important; }

  /* --- glavni dvostupčani rasporedi (tekst + vizual) → jedan stupac --- */
  [style*="grid-template-columns:0.92fr minmax(0,1.08fr);"],
  [style*="grid-template-columns:0.9fr 1.1fr;"],
  [style*="grid-template-columns:0.95fr 1.05fr;"],
  [style*="grid-template-columns:1.05fr 0.95fr;"],
  [style*="grid-template-columns:1.02fr 1fr;"],
  [style*="grid-template-columns:1.38fr 0.62fr;"],
  [style*="grid-template-columns:0.62fr 1.38fr;"],
  [style*="grid-template-columns:0.82fr 1.18fr;"],
  [style*="grid-template-columns:340px 1fr;"],
  [style*="grid-template-columns:1fr 56px 1fr 56px 1.05fr;"] {
    grid-template-columns: minmax(0,1fr) !important;
  }

  /* --- tri kartice u redu → dvije --- */
  [style*="grid-template-columns:repeat(3,1fr);"],
  [style*="grid-template-columns:1fr 1fr 1fr;"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* --- tri bloka "Poslovni učinak" na početnoj stranici
     (Manje ručnog rada / Brži poslovni procesi / Bolje korištenje novca) ---

     Na desktopu su to tri stupca odijeljena uspravnim crtama, pa je prostor
     za crtu upisan u same blokove: prvi ima rub samo desno (0 34px 0 0),
     srednji s obje strane (0 34px), a zadnji samo lijevo (0 0 0 34px).
     Kad se blokovi slože jedan pod drugi, taj lijevi prostor uvuče drugi i
     treći blok u desno — zato nisu poravnati s prvim. To je uzrok, ne margina.

     Rješenje: ispod 980px ovi blokovi idu u JEDAN stupac, prostor sa strane
     se uklanja (svi počinju na istoj liniji), a uspravne crte razdjelnice
     postaju vodoravne crte između blokova — hijerarhija ostaje ista. */
  [style*="grid-template-columns:repeat(3,1fr);"]:has(> [style*="padding:0 34px 0 0"]) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  [style*="padding:0 34px 0 0"] {
    padding:0 0 24px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,0.1) !important;
  }
  [style*="padding:0 34px;"] {
    padding:24px 0 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,0.1) !important;
  }
  [style*="padding:0 0 0 34px"] {
    padding:24px 0 0 !important;
  }

  /* --- podnožje: pet stupaca → tri, logo preko cijele širine --- */
  [style*="grid-template-columns:1.2fr repeat(4,1fr);"] {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  [style*="grid-template-columns:1.2fr repeat(4,1fr);"] > a:first-child {
    grid-column: 1 / -1 !important;
  }

  /* --- veliki razmaci se sužavaju --- */
  [style*="gap:70px"] { gap:40px !important; }
  [style*="gap:64px"] { gap:38px !important; }
  [style*="gap:62px"] { gap:38px !important; }
  [style*="gap:60px"] { gap:36px !important; }
  [style*="gap:52px"] { gap:34px !important; }

  /* --- naslovi i velike brojke: fluidno se smanjuju, nikad iznad izvorne veličine --- */
  [style*="font-size:60px"] { font-size: clamp(34px, calc(18.2px + 4.27vw), 60px) !important; }
  [style*="font-size:58px"] { font-size: clamp(33px, calc(17.6px + 4.12vw), 58px) !important; }
  [style*="font-size:56px"] { font-size: clamp(32px, calc(17.0px + 3.98vw), 56px) !important; }
  [style*="font-size:52px"] { font-size: clamp(30px, calc(15.8px + 3.70vw), 52px) !important; }
  [style*="font-size:50px"] { font-size: clamp(29px, calc(15.2px + 3.56vw), 50px) !important; }
  [style*="font-size:48px"] { font-size: clamp(28px, calc(14.6px + 3.41vw), 48px) !important; }
  [style*="font-size:46px"] { font-size: clamp(27px, calc(14.0px + 3.27vw), 46px) !important; }
  [style*="font-size:44px"] { font-size: clamp(26px, calc(13.3px + 3.13vw), 44px) !important; }
  [style*="font-size:42px"] { font-size: clamp(25px, calc(12.7px + 2.99vw), 42px) !important; }
  [style*="font-size:40px"] { font-size: clamp(24px, calc(12.1px + 2.84vw), 40px) !important; }
  [style*="font-size:38px"] { font-size: clamp(23px, calc(11.5px + 2.70vw), 38px) !important; }
  [style*="font-size:31px"] { font-size: clamp(21px, calc(9.4px  + 2.20vw), 31px) !important; }
  [style*="font-size:30px"] { font-size: clamp(20px, calc(9.1px  + 2.13vw), 30px) !important; }

  /* slika se nikad ne smije proširiti izvan svog okvira */
  img { max-width:100%; }

  /* Zaštita od vodoravnog scrollanja.
     Neki ukrasni slojevi (mekano svjetlo iza vizuala) namjerno prelaze rub
     svog okvira. Na velikom ekranu to se ne vidi, a na mobitelu bi stvorilo
     vodoravni scroll. "clip" ih odreže bez da razbije lijepljeno zaglavlje
     (za razliku od "hidden", koji bi ga pokvario). */
  body > div { overflow-x: clip; }
}

/* ---------------------------------------------------------------------------
   MOBITELI (≤ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* dugačke riječi (npr. adrese) ne smiju razvući raspored */
  body { overflow-wrap: break-word; }

  /* --- zaglavlje --- */
  header > div:first-child { padding-left:16px !important; padding-right:16px !important; height:62px !important; gap:10px !important; }
  header > div:first-child > div:last-child { gap:10px !important; }
  header > div:first-child img { height:34px !important; }
  /* gumb "Zatražite demo" u zaglavlju je dostupan u izborniku, pa se ovdje skriva
     da logo, prekidač jezika i hamburger stanu u jedan red */
  header > div:first-child > div:last-child > a[onclick] { display:none !important; }
  /* panel već ide od zaglavlja do dna ekrana (top/bottom), pa mu ovdje
     ne treba nikakvo dodatno ograničenje visine */

  /* --- vanjski rubovi (isti redoslijed kao gore: tri vrijednosti kasnije) --- */
  [style*="padding:120px 40px"] { padding:60px 20px !important; }
  [style*="padding:104px 40px"] { padding:56px 20px !important; }
  [style*="padding:100px 40px"] { padding:56px 20px !important; }
  [style*="padding:96px 40px"]  { padding:52px 20px !important; }
  [style*="padding:78px 40px"]  { padding:48px 20px !important; }
  [style*="padding:64px 40px"]  { padding:44px 20px !important; }
  [style*="padding:44px 40px"]  { padding:36px 20px !important; }
  [style*="padding:104px 0"]    { padding:52px 0 !important; }

  /* --- svi višestupčani rasporedi → jedan stupac ---
     (iznimke: "28px 1fr" su ikona + tekst u istom redu, i "1fr auto" je red s
      dva elementa uz rub — oni i na mobitelu trebaju ostati u dva stupca) */
  [style*="grid-template-columns:repeat(3,1fr);"],
  [style*="grid-template-columns:1fr 1fr 1fr;"],
  [style*="grid-template-columns:1fr 1fr;"],
  [style*="grid-template-columns:repeat(2,1fr);"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr);"] {
    grid-template-columns: minmax(0,1fr) !important;
  }

  /* podnožje: tri stupca → dva */
  [style*="grid-template-columns:1.2fr repeat(4,1fr);"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* "portal" vizual u hero sekciji — bočni stupac se sužava da sve stane */
  [style*="grid-template-columns:170px minmax(0,1fr);"] {
    grid-template-columns: 124px minmax(0,1fr) !important;
  }

  /* --- razmaci --- */
  [style*="gap:70px"] { gap:30px !important; }
  [style*="gap:64px"] { gap:28px !important; }
  [style*="gap:62px"] { gap:28px !important; }
  [style*="gap:60px"] { gap:28px !important; }
  [style*="gap:52px"] { gap:26px !important; }
  [style*="gap:44px"] { gap:24px !important; }
  [style*="gap:40px"] { gap:22px !important; }
  [style*="gap:34px"] { gap:20px !important; }
  [style*="gap:30px"] { gap:18px !important; }

  /* --- redovi s dva gumba (hero i CTA) → gumbi jedan pod drugim, preko cijele širine --- */
  [style*="display:flex; gap:14px; margin-top:36px"],
  [style*="display:flex; gap:14px; margin-top:38px"] {
    flex-direction:column !important; align-items:stretch !important; gap:11px !important;
  }
  [style*="display:flex; gap:14px; margin-top:36px"] > a,
  [style*="display:flex; gap:14px; margin-top:38px"] > a {
    text-align:center !important;
  }

  /* Tekst unutar redova (flex) mora se smjeti suziti. Bez ovoga tekst zadržava
     svoju "prirodnu" širinu i izbaci red iz ekrana. Ovo je uži i sigurniji
     način od prelamanja cijelih redova u novi red. */
  [style*="display:flex"] > [style*="flex-direction:column"] { min-width:0; }

  /* --- prostranije unutrašnjosti kartica --- */
  [style*="padding:56px 30px"] { padding:36px 22px !important; }
  [style*="padding:34px 30px"] { padding:26px 20px !important; }
  [style*="padding:32px 30px"] { padding:26px 20px !important; }
  [style*="padding:30px 40px"] { padding:24px 20px !important; }
  [style*="padding:30px 28px"] { padding:24px 20px !important; }

  /* zapisi s tri vrijednosti — moraju biti nakon svih dvovrijednosnih,
     jer ih ovi u sebi sadrže (npr. "30px 40px" je dio "30px 40px 96px") */
  [style*="padding:96px 40px 110px"] { padding:44px 20px 60px !important; }
  [style*="padding:30px 40px 96px"]  { padding:22px 20px 52px !important; }
  [style*="padding:64px 40px 34px"]  { padding:44px 20px 28px !important; }

  /* --- veze u podnožju: veća površina za prst --- */
  .footer-link { padding:5px 0 !important; display:inline-block; }

  /* --- demo forma (modal) --- */
  .demo-overlay { padding:14px 12px 26px; align-items:flex-start; }
  .demo-card { padding:30px 22px 24px; border-radius:20px; }
  .demo-close { top:16px; right:16px; }
}

/* ============================================================================
   SEKCIJA "INTEGRACIJE" — vizual s karticama oko središnjeg elementa
   ----------------------------------------------------------------------------
   Ovaj vizual postoji na SVIH 14 stranica, u dvije varijante:

     visina 440px  — naslovnica: središnja kartica + 8 oznaka u krug oko nje
     visina 360px  — 6 stranica AI rješenja: središnji kvadrat + 4 kartice
                     u kutovima (širina svake je fiksno 168px)

   ZAŠTO SE PREKLAPALO
   Kartice ne stoje u normalnom toku nego "lebde" na zadanim koordinatama
   (npr. "gore 44px, lijevo 24px"), a širina im je fiksna. Za dvije kartice
   jednu uz drugu treba 24+168+168+24 = 384px, plus prostor za središnji
   element. Na mobitelu je taj okvir širok samo ~335px, pa su kartice
   nalijetale jedna na drugu i na središnji element. Smanjivanje cijelog
   vizuala nije dobro rješenje jer čini tekst nečitljivim (spao je na 11px).

   RJEŠENJE
   Na mobitelu (≤640px) kartice izlaze iz "lebdenja" i staju u normalan tok:
   središnji element ide na vrh, kartice ispod njega u dva stupca. Svaka
   kartica time dobije pun prostor, tekst ostaje u originalnoj veličini, a
   izgled kartica (boje, obrubi, ikone, tekst) ostaje nepromijenjen.

   Ukrasni slojevi (mekano svjetlo, pulsirajući prsten) prepoznaju se po
   "inset:" i namjerno ostaju lebdeći — oni ispunjavaju okvir i ne smiju
   ući u tok. Zato ":not([style*="inset:"])".
   ========================================================================== */
@media (max-width: 640px) {

  /* okvir vizuala: iz fiksne visine u mrežu koja raste po sadržaju */
  [style*="position:relative; height:360px;"],
  [style*="position:relative; height:440px;"] {
    height: auto !important;
    zoom: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  /* kartice i oznake: iz lebdenja u tok.
     "position:relative" (a ne static) jer kartice u sebi imaju ukrasne
     lebdeće slojeve koji se moraju držati svoje kartice.
     Koordinate se gase (auto), inače bi ih relative pomaknuo.
     Animacija lebdenja se gasi jer pomiče element sa svog mjesta. */
  [style*="position:relative; height:360px;"] > [style*="position:absolute"]:not([style*="inset:"]),
  [style*="position:relative; height:440px;"] > [style*="position:absolute"]:not([style*="inset:"]) {
    position: relative !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    transform: none !important;
    animation: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* središnji element (ima "top:50%; left:50%") ide sam u prvi red,
     u svojoj izvornoj veličini i po sredini */
  [style*="position:relative; height:360px;"] > [style*="top:50%; left:50%"],
  [style*="position:relative; height:440px;"] > [style*="top:50%; left:50%"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: auto !important;
    margin: 0 0 6px !important;
  }
}

/* Dva stupca provjereno rade i na 320px (kartice ~128px, nigdje odrezanog
   teksta ni s najduljim oznakama kao "Prilagođeni API i formati"), pa se
   raspored ne prebacuje u jedan stupac — tako sekcija ostaje kompaktna
   i bliža izvornom "klasteru" oko središnjeg elementa. */

/* ---------------------------------------------------------------------------
   Korisnici koji su u sustavu isključili animacije
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   PET RJEŠENJA U REŠETKI — zadnji red se centrira

   Rasporedi rješenja izvorno su pisani za šest kartica: 3+3 na naslovnici i
   2+2+2 u prikazu portala. Sada ih je pet, pa bi u zadnjem redu ostala
   prazna rupa. (Padajući izbornik „AI rješenja" ovo NE koristi — on je
   preuređen u jednu uspravnu listu, vidi `.nos-menu-list` gore.)

   Rješenje: rešetka dobije dvostruko više stupaca, a svaka kartica zauzima
   po dva. Širina kartice pri tome ostaje IDENTIČNA kao prije — kod tri
   stupca ona je (W − 2g)/3, a kod šest stupaca s rasponom od dva
   (W − 5g)/6 × 2 + g, što je isti broj. Dobiva se samo mogućnost da se
   zadnji red pomakne za pola kartice i tako stane točno po sredini.
   Ništa drugo (širine, razmaci, obrubi, sjene, tipografija) se ne mijenja.

   Pravila stoje na kraju datoteke namjerno: gornja pravila za tablet
   (npr. „tri kartice u redu → dvije") imaju istu težinu, pa odlučuje ono
   koje je napisano niže.

   Na mobitelu (≤ 640px) sve ide u jedan stupac kao i dosad — zato ovdje
   nema nijednog pravila ispod 641px.
   -------------------------------------------------------------------------- */

/* Naslovnica, sekcija „AI rješenja": tri kartice u prvom redu,
   dvije centrirane u drugom. */
@media (min-width: 981px) {
  .nos-grid-5 { grid-template-columns:repeat(6, minmax(0,1fr)) !important; }
  .nos-grid-5 > * { grid-column:span 2; }
  .nos-grid-5 > *:nth-child(4) { grid-column:2 / span 2; }
  .nos-grid-5 > *:nth-child(5) { grid-column:4 / span 2; }
}

/* Tablet (641–980px): dvije kartice u redu, peta centrirana. */
@media (min-width: 641px) and (max-width: 980px) {
  .nos-grid-5 { grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  .nos-grid-5 > * { grid-column:span 2; }
  .nos-grid-5 > *:nth-child(5) { grid-column:2 / span 2; }
}

/* Prikaz aktivnih modula u sekciji „Upravljanje modulima" — na desktopu je
   dvostupčan: dvije kartice u redu, peta centrirana. */
@media (min-width: 641px) {
  .nos-grid-5-2col { grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  .nos-grid-5-2col > * { grid-column:span 2; }
  .nos-grid-5-2col > *:nth-child(5) { grid-column:2 / span 2; }
}