/* ============================================================
   Standardizuj.me — dizajn sistem v3
   Paleta: duboki petrol + moderni mint/teal (bez narandžaste)
   Fontovi: Space Grotesk (naslovi/logo) + Inter (tekst)
   ============================================================ */
:root {
  /* --- Fiksni brend tokeni: ISTI u oba režima (dark/light). --ink/--white ostaju
     rezervisani isključivo za: (a) stalno-tamne trake koje ne mijenjaju izgled po temi
     (hero, contact-band, ai-box, example-band, cta-band) i (b) tekst/ivice koje moraju
     ostati bukvalno bijele na tim trakama ili na mint/steel dugmadima. Sve OSTALO
     (pozadine kartica, naslovi, tekst, linije) ide kroz theme-aware tokene ispod. */
  --ink:    #0F2E2C;   /* duboki petrol — hero, tamne sekcije (fiksno) */
  --ink2:   #0A2120;   /* footer, tamnije (fiksno) */
  --steel:  var(--accent);          /* linkovi — sada idu kroz --accent (theme-aware) */
  --seal:   #0FBF8F;                /* mint FILL (dugmad/gradijenti) — živ u obije teme */
  --seal2:  var(--accent-on-dark);  /* svijetli mint na stalno-tamnim trakama */
  --seal3:  var(--accent-on-dark);  /* (bivši #7CF2D6 — jedan ton manje, isti svijetli mint) */
  --seal-deep: #0A8F6B;             /* deep mint (sitne labele/hover); light override niže */
  --white:  #FFFFFF;   /* fiksno bijelo (tekst/ivice na tamnim/mint pozadinama) */
  --on-seal: #06231B;  /* tekst NA mint fill-u (--seal): bijelo daje 2.37:1, ovo preko 8:1 */
  --seal-hover: #3FDCB0; /* mint kad se predje misem — dugme se PALI, ne gasi (9.55:1 sa --on-seal) */
  /* Kanali za poruke — tamniji tonovi zvanicnih brend boja, da bijeli natpis i ikona
     imaju bar 4.9:1 (zvanicne su 1.98–4.48:1). Isti tokeni za dugmad i za plutajuce ikone. */
  --wa: #0E7C40;   /* WhatsApp */
  --vb: #5F4BDC;   /* Viber */
  --tg: #0F76AE;   /* Telegram */
  --ico-globus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="none" stroke="%234FE0BE" stroke-width="1.1"><circle cx="50" cy="50" r="46"/><ellipse cx="50" cy="50" rx="18" ry="46"/><ellipse cx="50" cy="50" rx="34" ry="46"/><path d="M4 50h92"/><path d="M11.5 27.5h77"/><path d="M11.5 72.5h77"/><path d="M25 12h50"/><path d="M25 88h50"/></g></svg>');
  --ico-globe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>');
  --display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --sans:    "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --maxw: 1120px;

  /* --- Prošireni tokeni (Faza 1 redizajna — homepage "Standards System" hero) ---
     Čisto aditivno: ništa gore nije promijenjeno, postojeće stranice i jezici
     nastavljaju da rade identično. */
  --navy:      #0B1F36;
  --navy-soft: #102C46;
  --navy-deep: #071827;
  --black: #061312;
  --shadow-soft:   0 18px 50px rgba(5, 33, 31, 0.10);
  --shadow-medium: 0 24px 70px rgba(5, 25, 38, 0.18);
  --shadow-dark:   0 30px 90px rgba(2, 18, 28, 0.34);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- PHASE C — Dark/Light tema: theme-aware tokeni ---
     Dark je podrazumijevana (bez atributa). :root[data-theme="light"] ispod vraća
     TAČNO iste vrijednosti koje je sajt koristio prije Faze C — light mod je nula-rizik
     jer je bit-za-bit isti kao postojeći dizajn. Toggle samo postavlja/uklanja atribut. */

  /* ===== ULOŽNI (role-based) TOKENI — GLAVNA paleta, koristi OVA imena ===== */
  /* Mint akcenat — samo 2 tona po temi (osnovni + hover) */
  --accent:          #0FBF8F;   /* primarni mint: linkovi, akcenti, tekst-akcenti */
  --accent-hover:    #4FE0BE;   /* svjetliji mint: hover + isticanje */
  --accent-contrast: #06231B;   /* tekst na mint podlozi (AA) */
  --gold:            #B4791E;   /* zlatna — poseban akcenat (upozorenje u samoprocjeni) */
  --bg:              #0A1815;   /* glavna pozadina */
  --bg-alt:          #0F1F1A;   /* .alt sekcije */
  --border:          rgba(124, 242, 214, 0.16);
  --text-muted:      #7E9C95;
  /* mint/neutralno na STALNO tamnim trakama (hero/footer/kontakt/example) —
     namjerno ostaju svijetli u OBIJE teme jer te trake nikad ne postaju bijele */
  --accent-on-dark:  #4FE0BE;
  --accent-label:    #4FE0BE;   /* sitne mint oznake — na tamnoj podlozi (AA) */
  --on-dark-strong:  #CFE5E1;   /* naglašen svijetli tekst na tamnom */
  --on-dark-soft:    #9FBDB7;   /* prigušen svijetli tekst na tamnom */

  /* ===== implementacioni tokeni (ostaju zbog postojećeg CSS-a) — vezani na role ===== */
  --page-bg:      var(--bg);
  --surface:      #142621;
  --surface-alt:  var(--bg-alt);
  --surface-soft: #0D1B17;
  --heading:      #EDF6F3;
  --text:         #C3D6D0;
  --muted:        var(--text-muted);
  --muted-light:  #5A7972;
  --line:         var(--border);
  --line-dark:    rgba(124, 242, 214, 0.16);
  --row-intl-bg:  rgba(255, 255, 255, 0.07);   /* zvanična (ISO) oznaka u tabeli — neutralno zatamnjenje */
  --warn-bg:      rgba(232, 106, 90, 0.13);
  --warn-border:  rgba(232, 106, 90, 0.45);
  --warn-text:    #F4B3A6;
  --note-bg:      rgba(15, 191, 143, 0.09);
  --note-border:  rgba(15, 191, 143, 0.28);
  --note-text:    var(--accent-on-dark);
  --shadow-card:  0 18px 40px rgba(0, 0, 0, 0.32);
  --glass-bg:          rgba(10, 24, 21, 0.82);
  --glass-bg-scrolled: rgba(9, 20, 18, 0.94);
}
:root[data-theme="light"] {
  /* Mint za TEKST/LINKOVE na bijeloj — tamniji da NE blješti i da prođe WCAG AA.
     Fill dugmadi (--seal) i akcenti na tamnim trakama (--accent-on-dark) ostaju živi. */
  --accent:       #0A7A5C;   /* linkovi/akcenti na bijeloj ≈ 5.3:1 */
  --accent-hover: #096B52;   /* hover / deep ≈ 6.5:1 */
  --seal-deep:    #096B52;   /* sitne labele/kodovi na bijeloj (AA) */
  --accent-label: #096B52;    /* isti token, ali na bijeloj podlozi */
  --accent-contrast: #FFFFFF; /* na svijetloj temi je --accent tamnozelen, pa tekst na njemu mora biti bijel */

  --bg:           #FFFFFF;
  --bg-alt:       #F1F8F6;
  --border:       #DCE7E5;
  --text:         #1E3230;
  --text-muted:   #56706C;

  --page-bg:      var(--bg);
  --surface:      #FFFFFF;
  --surface-alt:  var(--bg-alt);
  --surface-soft: #F7FBFA;
  --heading:      #0F2E2C;
  --muted:        var(--text-muted);
  --muted-light:  #87A29D;
  --line:         var(--border);
  --row-intl-bg:  #E8EFEE;
  --warn-bg:      #FDECEA;
  --warn-border:  #F3C0B9;
  --warn-text:    #8E2C1E;
  --note-bg:      #EAFBF4;
  --note-border:  #B9EDDA;
  --note-text:    #0B4A3A;
  --shadow-card:  0 18px 40px rgba(15, 46, 44, 0.12);
  --glass-bg:          rgba(255, 255, 255, 0.86);
  --glass-bg-scrolled: rgba(255, 255, 255, 0.95);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); color:var(--text); background:var(--page-bg); line-height:1.65; font-size:16.5px;
  transition:background-color .25s ease, color .25s ease; animation:pageFadeIn .35s ease both; }
@keyframes pageFadeIn { from { opacity:0; } to { opacity:1; } }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
h1,h2,h3 { font-family:var(--display); font-weight:700; line-height:1.15; letter-spacing:-0.02em; color:var(--heading); }
h1 { font-size:clamp(2rem,5vw,3.2rem); }
h2 { font-size:clamp(1.5rem,3.5vw,2.15rem); margin-bottom:0.6em; }
h3 { font-size:1.18rem; margin-bottom:0.4em; }
p + p { margin-top:0.9em; }
a { color:var(--steel); }
/* Fokus prsten ide kroz --accent-label: --seal na bijeloj daje 2.37:1, a 1.4.11 trazi 3:1.
   Trake koje su uvijek tamne vracaju svijetli mint (pravilo nize). */
a:focus-visible, button:focus-visible { outline:3px solid var(--accent-label); outline-offset:2px; }

/* ---------- Logo (tekstualni, dvije boje, bez linije) ---------- */
.brand { font-family:var(--display); font-size:1.5rem; font-weight:700; letter-spacing:-0.03em;
  color:var(--heading); text-decoration:none; display:inline-flex; align-items:baseline;
  transition:opacity .2s ease, letter-spacing .3s ease; }
.brand:hover { opacity:0.88; letter-spacing:-0.01em; }
.brand .dot { color:var(--seal); transition:color .3s ease; }
.brand:hover .dot { color:var(--steel); }
.hero .brand, footer .foot-brand { color:var(--white); }
/* ---------- Logo u zaglavlju i podnozju ----------
   Znak je dvobojan, pa ne moze da uzme boju iz currentColor kao ikonice — zato dvije
   datoteke i prebacivanje po temi. Zaglavlje je tamno u tamnoj temi i bijelo u svijetloj;
   podnozje je tamno u OBIJE, pa tamo uvijek ide bijela varijanta. */
.brand-logo { display:block; height:24px; width:auto; position:relative; top:2px; }
.brand-svijetla { display:none; }
:root[data-theme="light"] .brand-tamna { display:none; }
:root[data-theme="light"] .brand-svijetla { display:block; }
.brand { display:inline-flex; align-items:center; }
footer .foot-brand img { display:block; height:30px; width:auto; max-width:100%; }
@media (max-width:520px){ .brand-logo { height:21px; } }
.foot-brand { font-family:var(--display); font-size:1.32rem; font-weight:700; letter-spacing:-0.03em; }
.foot-brand .dot { color:var(--seal2); }

/* ---------- Navigacija — "premium staklo" zaglavlje ----------
   Fin gradijentni rub umjesto obične linije, blago stanjivanje i jače staklo pri skrolu,
   opipljiviji hover na linkovima. Bez petljajućih animacija — sjaj je statičan, ne treperi. */
.topbar { border-bottom:1px solid transparent; background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  position:sticky; top:0; z-index:50; transition:box-shadow .35s ease, background .35s ease; }
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(15,191,143,0.5) 18%, rgba(14,138,128,0.35) 50%,
    rgba(15,191,143,0.5) 82%, transparent); }
.topbar.scrolled { background:var(--glass-bg-scrolled); box-shadow:0 12px 32px -8px rgba(15,46,44,0.16); }
.topbar.scrolled .wrap { min-height:56px; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; min-height:66px;
  flex-wrap:wrap; gap:8px; padding-top:8px; padding-bottom:8px; transition:min-height .3s ease;
  max-width:1440px; /* šire od standardnog --maxw (1120px) — zaglavlju treba više daha za sve stavke */ }
.nav { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.nav a { color:var(--heading); text-decoration:none; font-size:0.93rem; font-weight:600; padding:8px 10px;
  border-radius:8px; position:relative; transition:color .2s ease, background .2s ease, transform .2s ease; }
.nav > a::after { content:""; position:absolute; left:10px; right:10px; bottom:3px; height:2px;
  background:linear-gradient(90deg, var(--seal), var(--steel)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.nav a:hover { background:rgba(15,191,143,0.14); transform:translateY(-1px); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform:scaleX(1); }
.nav a[aria-current="page"] { color:var(--accent-label); }
.nav details.dd { position:relative; }
.nav details.dd summary { cursor:pointer; list-style:none; color:var(--heading); font-size:0.93rem; font-weight:600;
  padding:8px 10px; border-radius:8px; display:inline-flex; align-items:center; gap:5px;
  transition:color .2s ease, background .2s ease; }
.nav details.dd summary:hover, .nav details.dd summary:focus-visible {
  background:rgba(15,191,143,0.14); color:var(--accent-label); }
.nav details.dd[open] > summary { background:rgba(15,191,143,0.10); color:var(--accent-label); }
.nav details.dd summary::-webkit-details-marker { display:none; }
.nav details.dd summary::after { content:"▾"; font-size:0.7rem; color:var(--seal); transition:transform .2s ease; }
.nav details.dd[open] summary::after { transform:rotate(180deg); }
.nav details.dd .menu { position:absolute; top:calc(100% + 10px); left:0; z-index:60; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 48px -8px rgba(15,46,44,0.22);
  min-width:300px; padding:9px; animation:ddIn .22s cubic-bezier(.2,.7,.3,1);
  /* Koristi skoro cijelu raspoloživu visinu ekrana ispod zaglavlja (ne fiksnih 560px) da se na
     nižim laptopima vidi cijela lista standarda, a ne da scroll "stane prerano". */
  max-height:calc(100vh - 72px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.nav details.dd .menu::-webkit-scrollbar { width:8px; }
.nav details.dd .menu::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.nav details.dd .menu::-webkit-scrollbar-thumb:hover { background:var(--steel); }
.nav details.dd .menu::before { content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--seal), var(--steel), var(--seal)); }
@keyframes ddIn { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
.nav details.dd .menu a { display:block; padding:9px 14px; border-radius:7px; border-bottom:none;
  font-weight:500; font-size:0.9rem; }
/* ---------- Isticanje stavke menija pod misem ----------
   Ranije je hover mijenjao podlogu na --surface-alt, sto je u tamnoj temi TAMNIJE od samog
   menija — razlika u svjetlini 1.08, prakticno nevidljivo; isto i u svijetloj. Sam preliv tu
   ne pomaze mnogo (mint preko bijele jedva pomjeri svjetlinu), pa signal nose traka sa strane,
   boja teksta i mali pomjeraj udesno. To se vidi bez obzira na svjetlinu podloge. */
.nav details.dd .menu a { position:relative;
  transition:background-color .18s ease, color .18s ease, padding-left .18s var(--ease-out); }
.nav details.dd .menu > a:not(.mega-cta)::before { content:""; position:absolute; left:5px; top:7px;
  bottom:7px; width:3px; border-radius:3px; background:var(--accent-label); transform:scaleY(0);
  transform-origin:center; transition:transform .18s var(--ease-out); }
.nav details.dd .menu a:hover, .nav details.dd .menu a:focus-visible {
  background:rgba(15,191,143,0.16); color:var(--accent-label); transform:none; }
.nav details.dd .menu > a:not(.mega-cta):hover,
.nav details.dd .menu > a:not(.mega-cta):focus-visible { padding-left:20px; }
.nav details.dd .menu > a:not(.mega-cta):hover::before,
.nav details.dd .menu > a:not(.mega-cta):focus-visible::before { transform:scaleY(1); }
.nav details.dd .menu a::after { display:none; }
.nav details.dd .menu .grp { font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-label); font-weight:700; padding:14px 14px 6px; grid-column:1 / -1;
  border-top:1px solid var(--line); margin-top:6px; }
.nav details.dd .menu .grp:first-child { padding-top:4px; margin-top:0; border-top:none; }
.nav details.dd .menu.wide { min-width:860px; display:grid; grid-template-columns:repeat(4,1fr); gap:2px 10px; }

/* ---------- Meni "Oblasti": sest kolona, tri vodoravna reda ----------
   Osamnaest oblasti u jednoj uspravnoj koloni bilo je predugacko za oko. Isti siroki okvir
   kao spisak standarda, ali obicna mreza umjesto visekolonskog toka — stavke se citaju
   slijeva nadesno, kao redovi. */
@media (min-width:1240px){
  /* Uspravne linije iz .menu.wide crtaju se na 20/40/60/80% — to su granice PET kolona.
     Ovaj meni ima šest, pa su linije padale usred stavki i sjekle tekst. Ovdje su suvišne
     i bez njih: nema grupa, svih osamnaest oblasti su ravnopravne stavke u mreži. */
  .nav details.dd .menu.wide.oblasti { columns:auto; column-rule:none; display:grid;
    grid-template-columns:repeat(6,1fr); gap:2px 8px; padding:12px 14px; background-image:none; }
  .nav details.dd .menu.wide.oblasti > a { font-size:0.83rem; line-height:1.3; padding:8px 9px; }
}

/* ---------- Mega-meni: kolona po grupi (>=1240px) ----------
   Svaka grupa ima SVOJU kolonu, stavke idu odozgo nadolje, izmedju kolona vertikalna linija.
   Ranije je to bio visekolonski (multicol) tok. Problem: meni ima max-height (visina ekrana
   minus zaglavlje), a multicol kad mu se ogranici visina ne skroluje nadolje nego pravi NOVE
   kolone udesno — na laptopu nizem od ~800px dvije-tri kolone su bjezale van menija.
   Sada je obicna mreza od 5 kolona: grupa i njene stavke dobijaju kolonu preko selektora
   brace (.grp ~ .grp ~ a = druga kolona...), a `dense` ih slaze odozgo u toj koloni. Visina
   je prirodna, pa kad ne stane — meni se skroluje nadolje, sirina ostaje ista.
   Linije izmedju kolona su pozadina menija (1px trake na granicama kolona: padding 14px,
   razmak 22px); `local` ih vodi zajedno sa sadrzajem pri skrolu, a traka precica ima punu
   podlogu, pa linije krenu tek ispod nje. */
@media (min-width:1240px){
  .nav details.dd .menu.wide { display:grid; columns:auto; grid-template-columns:repeat(5, minmax(0,1fr));
    grid-auto-flow:row dense; align-content:start; gap:0 22px; min-width:1040px; padding:9px 14px 14px;
    background-image:linear-gradient(var(--line),var(--line)), linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)), linear-gradient(var(--line),var(--line));
    background-size:1px 100%; background-repeat:no-repeat; background-attachment:local;
    background-position:calc(20% + 1.8px) 0, calc(40% + 0.6px) 0, calc(60% - 0.6px) 0, calc(80% - 1.8px) 0; }
  .nav details.dd .menu.wide > * { align-self:start; }
  /* Redovi mreze su zajednicki za sve kolone, pa bi dugi opis u jednoj koloni razvukao isti red
     u ostalima. site.js pri otvaranju izmjeri stavke i svakoj da `span` od toliko redova od
     1px (klasa .zidanje) — svaka kolona tako ima svoju prirodnu visinu. Bez JS-a ostaju
     zajednicki redovi: nesto visi meni, ali bez bjezanja udesno. */
  .nav details.dd .menu.wide.zidanje { grid-auto-rows:1px; }
  .nav details.dd .menu.wide.zidanje > * { grid-row-end:span var(--redova, 1); }
  .nav details.dd .menu.wide.zidanje > .mega-featured { grid-row:1 / span var(--redova, 1); }
  .nav details.dd .menu.wide > .mega-featured { grid-row:1; background:var(--surface); }
  .nav details.dd .menu.wide > .grp,
  .nav details.dd .menu.wide > .grp ~ a { grid-column:1; }
  .nav details.dd .menu.wide > .grp ~ .grp,
  .nav details.dd .menu.wide > .grp ~ .grp ~ a { grid-column:2; }
  .nav details.dd .menu.wide > .grp ~ .grp ~ .grp,
  .nav details.dd .menu.wide > .grp ~ .grp ~ .grp ~ a { grid-column:3; }
  .nav details.dd .menu.wide > .grp ~ .grp ~ .grp ~ .grp,
  .nav details.dd .menu.wide > .grp ~ .grp ~ .grp ~ .grp ~ a { grid-column:4; }
  .nav details.dd .menu.wide > .grp ~ .grp ~ .grp ~ .grp ~ .grp,
  .nav details.dd .menu.wide > .grp ~ .grp ~ .grp ~ .grp ~ .grp ~ a { grid-column:5; }
  .nav details.dd .menu.wide > .grp { border-top:none; margin-top:0; padding:2px 10px 8px; }
  .nav details.dd .menu.wide > a { padding:7px 10px; }
  .nav details.dd .menu.wide > a:not(.mega-cta)::before { left:1px; }
  .nav details.dd .menu.wide > a:not(.mega-cta):hover,
  .nav details.dd .menu.wide > a:not(.mega-cta):focus-visible { padding-left:16px; }
  /* Kod (ISO 9001) i opis ("Kvalitet") u dva reda — site.js razdvaja natpis na crtici.
     Bez JS-a stavka ostaje obican tekst u jednom redu, meni radi isto. */
  .nav details.dd .menu.wide > a .mi-code { display:block; font-weight:700; font-size:0.87rem;
    letter-spacing:0.005em; }
  .nav details.dd .menu.wide > a .mi-desc { display:block; font-size:0.76rem; line-height:1.3;
    color:var(--muted); margin-top:1px; }
  .nav details.dd .menu.wide > a:hover .mi-desc,
  .nav details.dd .menu.wide > a:focus-visible .mi-desc { color:inherit; }
}
.nav details.dd .menu .mega-cta { grid-column:1 / -1; margin-top:8px; padding:12px 14px !important;
  border-top:1px solid var(--line); border-radius:0 0 8px 8px; font-weight:700 !important;
  color:var(--accent-label) !important; background:rgba(15,191,143,0.07); }
.nav details.dd .menu .mega-cta:hover { background:rgba(15,191,143,0.14); }
/* ---------- Red precica iznad spiska standarda ----------
   Bilo je: mint natpis na mint podlozi od 7% — dvije bliske zelene, natpis se jedva odvajao.
   Sada su to prava dugmad: tamna podloga (ista porodica kao hero traka), svijetli mint natpis
   na 7.5:1, vodeni zig globusa i traka svjetla koja povremeno prosisa — isti mehanizam kao
   na .btn-gold. Pet precica stoji tacno iznad pet kolona standarda. */
.nav details.dd .menu .mega-featured { grid-column:1 / -1; display:grid; grid-template-columns:repeat(5,1fr);
  gap:9px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.nav details.dd .menu .mega-featured a { position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:15px 12px !important; border-radius:11px; font-weight:700 !important;
  color:var(--accent-on-dark) !important; font-size:0.82rem; line-height:1.3;
  background:linear-gradient(135deg, #143F39 0%, #0F2E2C 58%, #0B2320 100%);
  border:1px solid rgba(79,224,190,0.20);
  box-shadow:0 6px 16px rgba(6,25,23,0.28), inset 0 1px 0 rgba(255,255,255,0.07);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s ease; }
/* Vodeni zig: zicani globus u donjem desnom uglu, isti motiv kao u hero sekciji. */
.nav details.dd .menu .mega-featured a::before { content:""; position:absolute; z-index:-1;
  right:-26px; bottom:-34px; width:104px; height:104px; opacity:.42; pointer-events:none;
  background:var(--ico-globus) center/contain no-repeat; }
/* Traka svjetla — stoji van dugmeta 82% ciklusa, pa samo prosisa. */
.nav details.dd .menu .mega-featured a::after { content:""; position:absolute; z-index:-1;
  top:-20%; left:0; width:40%; height:140%; pointer-events:none; display:block;
  background:linear-gradient(100deg, transparent, rgba(190,255,240,0.20), transparent);
  transform:translateX(-180%) skewX(-20deg); animation:btnSheen 7s ease-in-out infinite; }
.nav details.dd .menu .mega-featured a:hover,
.nav details.dd .menu .mega-featured a:focus-visible { background:linear-gradient(135deg, #1A5049 0%, #133B38 58%, #0E2C29 100%);
  border-color:rgba(79,224,190,0.45); transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(6,25,23,0.4), inset 0 1px 0 rgba(255,255,255,0.12); }
.nav details.dd .menu .mega-featured a:hover::after { animation:btnSheenPass .8s ease; }
.nav details.dd .menu .mega-featured a:hover::before { opacity:.6; }
@media (prefers-reduced-motion:reduce){
  .nav details.dd .menu .mega-featured a::after { animation:none; }
}
/* Široki mega-meni se centrirao ispod SVOG TRIGERA, a triger stoji lijevo u zaglavlju — na
   ekranu od 1200px meni od 1019px tako je izlazio i lijevo i desno van vidljivog dijela.
   Zato .dd-wide postaje position:static, pa se meni pozicionira u odnosu na traku zaglavlja
   (.topbar .wrap, koja je position:relative) i centrira u njoj, dakle i u ekranu.
   Zaključano na >=1240px — ispod toga meni je harmonika u samoj stranici, pa left/transform
   tamo ne smiju ni da dopru. */
@media (min-width:1240px){
  /* Albanska verzija je najsira: trazila je 1213px, pa se zaglavlje prelamalo u dva reda
     tacno na granici. Malo uzi razmaci u samoj traci (ne diraju ostatak stranice) vracaju
     je na oko 1180px, pa jedan red stane od 1240px navise. */
  .topbar .wrap { position:relative; padding-left:18px; padding-right:18px; gap:6px; }
  .nav { gap:5px; }
  .nav a.nav-cta { padding:9px 14px; font-size:0.86rem; }
  /* Cetiri stavke desno nose jos i margin-left:6px iz svojih pravila — uz flex gap to je
     dupli razmak i 24px viska koji su gurali traku u drugi red. */
  .nav a.nav-cta, .nav a.call-btn, .nav .theme-toggle, .nav details.dd.lang-dd { margin-left:0; }
  .nav > a:not(.nav-cta):not(.call-btn):not(.nav-home), .nav details.dd > summary { padding-left:9px; padding-right:9px; }
  .nav > a:not(.nav-cta):not(.call-btn):not(.nav-home)::after { left:9px; right:9px; }
  .nav details.dd.dd-wide { position:static; }
  /* Centriranje NE ide preko transform-a: animacija otvaranja (ddIn) zavrsava na
     `transform:none`, a animacija nadjacava obicnu deklaraciju — pa je meni ostajao
     pomjeren za pola svoje sirine udesno i visio van ekrana. left/right + margin:auto
     centriraju bez transform-a, pa se animacija i pozicija ne bore. */
  .nav details.dd.dd-wide .menu.wide { left:0; right:0; margin-inline:auto;
    min-width:0; width:min(1060px, calc(100vw - 40px)); }
}
@media (max-width:1239px){ .nav details.dd .menu.wide{ min-width:0; grid-template-columns:1fr; }
  .nav details.dd .menu .mega-featured { grid-template-columns:1fr; }
  /* site.js razdvaja "ISO 9001 — Kvalitet" na kod i opis; dva reda su samo na desktopu, a
     ovdje su spanovi u istom redu — bez ovoga je pisalo "ISO 9001Kvalitet". */
  .nav details.dd .menu.wide > a .mi-desc::before { content:" — "; } }
/* ---------- Jezički switcher — dropdown lista umjesto statičnog reda od 7 pilula ---------- */
.nav details.dd.lang-dd { margin-left:6px; }
.nav details.dd.lang-dd summary::before { content:""; width:15px; height:15px; margin-right:5px;
  flex:none; background-color:currentColor;
  -webkit-mask:var(--ico-globe) center/contain no-repeat; mask:var(--ico-globe) center/contain no-repeat; }
.nav details.dd.lang-dd summary { display:inline-flex; align-items:center; }
.nav details.dd.lang-dd .menu { min-width:150px; left:auto; right:0; display:flex; flex-direction:column;
  gap:2px; max-height:min(70vh, 400px); }
.lang-menu a { display:flex !important; align-items:center; justify-content:space-between; gap:10px; }
.lang-menu a.on { color:var(--accent-label) !important; font-weight:700 !important; background:rgba(15,191,143,0.08); }
.lang-menu a.on::after { content:"✓"; color:var(--accent-label); font-weight:700; }
@media (max-width:1239px){ .nav details.dd.lang-dd .menu { right:auto; } }

/* ---------- PHASE C — Dark/Light toggle dugme ----------
   Postavljeno odmah lijevo od jezičkog prekidača. Ikonica sunca/mjeseca prikazuje TRENUTNO
   aktivan režim (mjesec = tamno, aktivno podrazumijevano; sunce = svijetlo). */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; border:1px solid var(--line); background:none; cursor:pointer; margin-left:6px;
  color:var(--heading); transition:background .2s ease, border-color .2s ease, transform .15s ease; flex:none; }
.theme-toggle:hover, .theme-toggle:focus-visible { background:rgba(15,191,143,0.14); border-color:var(--seal);
  color:var(--accent-label); transform:translateY(-1px); }
/* ---------- Dugme za poziv u zaglavlju ----------
   Ista velicina i oblik kao prekidac teme, odmah do njega. Broj zavisi od verzije sajta:
   srpska i bosanska zovu srpski broj, sve ostale crnogorski — jer su Rusi, Turci i
   englesko govorno podrucje ovdje mjestani, samo koriste drugi jezik. */
.call-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; border:1px solid var(--line); margin-left:6px; color:var(--heading);
  text-decoration:none; flex:none;
  transition:background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease; }
.call-btn:hover, .call-btn:focus-visible { background:rgba(15,191,143,0.14); border-color:var(--seal);
  color:var(--accent-label); transform:translateY(-1px); }
/* .call-btn je <a> unutar .nav, pa ga hvata `.nav a { padding:8px 12px }` i stisne ikonu
   na 4px sirine. Prekidac teme je <button> pa mu se to ne desava. */
.nav a.call-btn { padding:0; }
.nav a.call-btn::after { display:none; }
.call-btn .tt-icon { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1239px){ .call-btn { margin-left:0; } }

.theme-toggle .tt-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .tt-sun { display:none; }
.theme-toggle .tt-moon { display:block; }
:root[data-theme="light"] .theme-toggle .tt-sun { display:block; }
:root[data-theme="light"] .theme-toggle .tt-moon { display:none; }
@media (max-width:1239px){ .theme-toggle { margin:8px 8px 0 0; } }

/* ---------- Kucica umjesto natpisa "Home" ----------
   Natpis je trosio sirinu koja treba padajucim menijima; ikonica radi isto, a brend gore
   lijevo ionako vodi na pocetnu. U harmonici (ispod 1240px) uz ikonicu se vraca i natpis,
   jer tamo nema tooltipa pa sama kucica u koloni tekstualnih stavki zbunjuje. */
.nav a.nav-home { display:inline-flex; align-items:center; justify-content:center; width:36px; padding:8px 0; }
.nav a.nav-home .tt-icon { width:19px; height:19px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.nav > a.nav-home::after { left:8px; right:8px; }

/* ---------- Glavno dugme u zaglavlju ----------
   Jedini ispunjeni element u navigaciji, pa oko ide na njega. Tekst je --on-seal, ne bijel:
   bijelo na mintu daje 2.37:1, ovo preko 8:1. Hover PALI podlogu (--seal-hover), ne gasi je. */
.nav a.nav-cta { background:var(--seal); color:var(--on-seal); padding:9px 15px; border-radius:99px;
  font-weight:700; font-size:0.88rem; margin-left:6px; box-shadow:0 6px 18px rgba(15,191,143,0.26); }
.nav a.nav-cta { overflow:hidden; isolation:isolate; }
.nav a.nav-cta:hover, .nav a.nav-cta:focus-visible { background:var(--seal-hover); color:var(--on-seal);
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,191,143,0.36); }
@media (max-width:1239px){
  /* U harmonici sve stavke su redovi sa natpisom; kucica, telefon i prekidac teme bi inace
     ostali gola dugmad bez teksta, pa im se natpis vraca iz aria-label. */
  .nav a.nav-home, .nav a.call-btn, .nav .theme-toggle {
    width:100%; justify-content:flex-start; gap:11px; padding:12px 10px; border:none; margin:0; }
  .nav a.nav-home::before, .nav a.call-btn::before, .nav .theme-toggle::before {
    content:attr(aria-label); order:2; font-family:var(--sans); font-size:0.93rem; font-weight:600;
    color:var(--heading); }
  .nav a.nav-cta { text-align:center; margin:10px 0 4px; }
}

/* ---------- Hamburger (mobilni meni) ---------- */
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); cursor:pointer; padding:0; }
.nav-toggle span { display:block; width:18px; height:2px; background:var(--heading); margin:0 auto;
  border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1239px){
  .nav-toggle { display:flex; order:2; }
  .topbar .wrap { position:relative; }
  /* nowrap: desktop .nav ima flex-wrap:wrap, a kolona sa ogranicenom visinom onda ne skroluje
     nego prelama u NOVU kolonu desno — kad se otvori "Standardi", Sertifikacija, Kontakt,
     dugme za ponudu, pretraga, tema i jezik skakali su van ekrana telefona. */
  .nav { order:3; flex-basis:100%; max-height:0; overflow:hidden; flex-direction:column; align-items:stretch;
    flex-wrap:nowrap; gap:2px; transition:max-height .3s ease; }
  .nav > * { flex-shrink:0; }
  .nav.open { max-height:calc(100vh - 76px); overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; padding-top:10px; padding-bottom:24px; }
  /* Na telefonu 100vh racuna i traku pregledaca koja se sakriva pri skrolu, pa dno menija
     zna da ostane van ekrana. 100dvh mjeri stvarno vidljivu visinu; stariji pregledaci
     ostaju na pravilu iznad. */
  @supports (height:100dvh) { .nav.open { max-height:calc(100dvh - 76px); } }
  .nav a, .nav details.dd summary { width:100%; padding:12px 10px; }
  .nav > a::after { display:none; }
  /* U harmonici (ispod 1240px) podmeni se otvara u samoj stranici. Spisak standarda ima 42
     stavke i dodavao je preko 2000px duzine, pa se moralo skrolovati kroz pola stranice da se
     dodje do dna menija. Sada se duga lista skroluje unutar svog okvira. */
  .nav details.dd .menu { position:static; box-shadow:none; border:none; background:var(--surface-alt);
    margin-top:4px; min-width:0; animation:none;
    -webkit-overflow-scrolling:touch; }
  /* Samo spisak standarda (43 stavke) skroluje u svom okviru; ostali podmeniji (O nama, Usluge,
     Oblasti, jezik) otvaraju se cijeli, a skroluje se sam meni — bez sakrivenih stavki. */
  .nav details.dd .menu { max-height:none; }
  .nav details.dd.dd-wide .menu:not(.oblasti) { max-height:min(64vh, 540px); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:rgba(79,224,190,0.75) rgba(255,255,255,0.08); }
  @supports (height:100dvh) { .nav details.dd.dd-wide .menu:not(.oblasti) { max-height:min(64dvh, 540px); } }
  /* Vidljiva traka za skrolovanje (mint), ne tamna sistemska. */
  .nav details.dd.dd-wide .menu:not(.oblasti)::-webkit-scrollbar { width:6px; }
  .nav details.dd.dd-wide .menu:not(.oblasti)::-webkit-scrollbar-track { background:rgba(255,255,255,0.08); border-radius:6px; }
  .nav details.dd.dd-wide .menu:not(.oblasti)::-webkit-scrollbar-thumb { background:rgba(79,224,190,0.75); border-radius:6px; }
  /* Pet prečica iznad standarda (Svi standardi, Integrisani sistem…) bile su pet velikih dugmadi
     jedno ispod drugog i zauzimale skoro cijeli okvir — na telefonu se od standarda vidio samo
     ISO 9001, a da lista ide dalje nije se primjećivalo. Sada su manje, u dvije kolone. */
  .nav details.dd .menu .mega-featured { grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; padding-bottom:8px; }
  .nav details.dd .menu .mega-featured a { padding:9px 8px !important; font-size:0.78rem; border-radius:9px; }
  .nav details.dd .menu .mega-featured a:last-child:nth-child(odd) { grid-column:1 / -1; }
  /* Blago zatamnjenje na dnu spiska standarda dok ispod ima još stavki (klasu .ima-jos
     postavlja site.js i skida je kad se dođe do kraja). */
  .nav details.dd.dd-wide .menu.ima-jos::after { content:""; position:sticky; bottom:0; display:block; height:26px; margin-top:-26px;
    grid-column:1 / -1; pointer-events:none; background:linear-gradient(rgba(0,0,0,0), var(--surface-alt)); }
  .lang { margin:8px 0 0; }
  .nav details.dd.lang-dd .menu { background:var(--surface); }
}

/* ---------- Hero — tamna "premium" pozadina sa mjestom za buduću fotografiju ----------
   --hero-photo je prazan slot: kad se doda prava fotografija (npr. inline style="--hero-photo:url(...)"
   na .hero), automatski se prikazuje ispod tamnog preliva, bez ikakve druge izmjene. Do tada ovaj sloj
   sam nosi "fotografski" utisak kroz slojevite prelive + finu tehničku mrežu linija — ne oslanja se na
   lebdeće mrlje kao glavni vizuelni nosilac. */
.hero { --hero-photo: none; background:var(--ink); color:var(--white); padding:96px 0 80px; position:relative; overflow:hidden;
  background-image:
    linear-gradient(100deg, rgba(6,20,19,0.94) 0%, rgba(8,28,26,0.86) 42%, rgba(10,36,33,0.62) 100%),
    var(--hero-photo),
    radial-gradient(1100px 520px at 88% -15%, rgba(14,138,128,0.4), transparent 62%),
    radial-gradient(700px 420px at -8% 115%, rgba(15,191,143,0.22), transparent 60%),
    linear-gradient(150deg, #0C2624 0%, #0F2E2C 55%, #0A2422 100%);
  background-size:cover, cover, auto, auto, auto; background-position:center; }
.hero .wrap { position:relative; z-index:3; }
.hero h1 { color:var(--white); max-width:760px; }
.hero .eyebrow { font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--seal2);
  font-weight:700; margin-bottom:16px; display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(124,242,214,0.22); padding:7px 14px 7px 12px;
  border-radius:99px; backdrop-filter:blur(6px); }
.hero .eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--seal);
  box-shadow:0 0 0 4px rgba(15,191,143,0.25); animation:pulse 2.2s ease-in-out infinite; flex:none; }
.hero p.lead { margin-top:20px; max-width:640px; font-size:1.08rem; color:var(--on-dark-strong); }
.mest-sub { margin-top:14px; display:inline-block; background:rgba(255,255,255,0.08);
  border:1px solid rgba(79,224,190,0.4); color:#CFF7EB; font-size:0.86rem; padding:8px 14px;
  border-radius:99px; }
.mest-sub strong { color:var(--seal2); }
/* Nova verzija standarda ispod postojeće oznake: uvijek u svom redu (table = blok koji se skuplja na sadržaj). */
.mest-sub.mest-nova { display:table; margin-top:8px; border-radius:14px; }
.mest-nova span { font-size:0.86em; opacity:.85; margin-left:.4em; }
.hero .cta-row { margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.hero .eyebrow, .hero h1, .hero .mest-sub, .hero p.lead, .hero .cta-row { animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both; }
.hero h1 { animation-delay:.05s; }
.hero .mest-sub { animation-delay:.1s; }
.hero p.lead { animation-delay:.15s; }
.hero .cta-row { animation-delay:.22s; }
@keyframes heroIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
/* Žičani globus umjesto ranijih koncentričnih krugova. Ranije su to bili prelivi: krugovi
   na svakih 14px i zraci na svakih 15° — gusto, i geometrijski to nije bila sfera nego meta.
   Sada je prava sferna geometrija (paralele se skupljaju ka polovima po sinusu, meridijani po
   kosinusu), osa nagnuta 23.4° kao Zemljina, i mnogo rjeđe: 12 meridijana i 7 paralela.
   Stoji desno gdje je prazan prostor, sa mekim ispadanjem po ivici. */
.hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("media/globus.svg");
  background-repeat:no-repeat;
  background-position:right -170px top -130px;
  background-size:760px 760px;
  -webkit-mask-image:radial-gradient(circle at calc(100% + 70px) -20px, #000 0%, #000 55%, transparent 78%);
          mask-image:radial-gradient(circle at calc(100% + 70px) -20px, #000 0%, #000 55%, transparent 78%); }
@media (max-width:820px){ .hero::before { background-size:520px 520px; background-position:right -150px top -110px; } }

/* ---------- Hero sa fotografijom (stranice djelatnosti) ----------
   Fotografija i zicani globus se bore za isti prostor, pa hero sa fotografijom gasi i globus i
   ambijentalne mrlje — slika preuzima ulogu koju je do sada nosio ukras. Preliv ide ukoso (100deg):
   najjaci lijevo gdje stoji tekst, najslabiji desno gdje se slika vidi.
   Mjereno preko stvarnih redova slova (ne preko okvira elementa, koji se proteze i tamo gdje slova
   nema), najgori slucaj od 14 fotografija: svijetla tema 6.2 (oznaka iznad naslova), tamna 6.0
   (obrisano dugme). Na uskom ekranu tekst ide preko cijele sirine, pa preliv postaje ravnomjeran. */
.hero.sa-fotkom { background-image:
    linear-gradient(100deg, rgba(6,20,19,0.975) 0%, rgba(7,24,22,0.955) 55%, rgba(8,28,26,0.64) 80%, rgba(10,36,33,0.26) 100%),
    var(--hero-photo),
    linear-gradient(150deg, #0C2624 0%, #0F2E2C 55%, #0A2422 100%);
  background-size:cover, cover, auto; background-position:center, center, center; }
.hero.sa-fotkom::before { display:none; }
.hero.sa-fotkom .hero-fx { display:none; }
/* Ukrasna ikonica stranice stoji desno — tacno tamo gdje se sada vidi fotografija. Isti sudar kao
   sa globusom, pa i ona odlazi sa fotografskih heroja; na stranicama bez fotografije ostaje. */
.hero.sa-fotkom .hero-icon { display:none; }
/* Svijetla tema: bijel veo preko svijetle fotografije (bijela sala, nebo, snijeg) pojede sliku do
   nevidljivosti. Zato ispod vela ide tanak tamni sloj koji raste udesno — slika dobije oblik, a
   tekst lijevo ostaje na gotovo cistoj bijeloj podlozi. */
:root[data-theme="light"] .hero.sa-fotkom { background-image:
    linear-gradient(100deg, rgba(255,255,255,0.985) 0%, rgba(255,255,255,0.97) 55%, rgba(250,253,252,0.70) 80%, rgba(240,249,246,0.30) 100%),
    linear-gradient(100deg, rgba(9,40,36,0) 0%, rgba(9,40,36,0.05) 55%, rgba(9,40,36,0.20) 80%, rgba(9,40,36,0.32) 100%),
    var(--hero-photo),
    linear-gradient(158deg, #F7FCFA 0%, #EFF8F5 58%, #E7F4EF 100%);
  background-size:cover, cover, cover, auto; background-position:center, center, center, center; }
@media (max-width:820px){
  .hero.sa-fotkom { background-image:
      linear-gradient(168deg, rgba(6,20,19,0.945) 0%, rgba(7,24,22,0.90) 58%, rgba(8,28,26,0.78) 100%),
      var(--hero-photo), linear-gradient(150deg, #0C2624 0%, #0A2422 100%); }
  :root[data-theme="light"] .hero.sa-fotkom { background-image:
      linear-gradient(168deg, rgba(255,255,255,0.955) 0%, rgba(255,255,255,0.92) 58%, rgba(248,252,251,0.84) 100%),
      var(--hero-photo), linear-gradient(158deg, #F7FCFA 0%, #E7F4EF 100%); } }
/* ============================================================
   SVIJETLA TEMA — svijetli hero
   Hero je bio tamna traka u OBIJE teme, pa je u svijetloj temi odmah ispod bijelog zaglavlja
   dolazila crna povrsina. Sada se u svijetloj temi cijela traka prevrce.

   Nista u HTML-u se ne dira. Sve unutar heroja (naslov, uvod, mrvice, oba dugmeta, oznaka
   iznad naslova) uzima boju iz tokena --white / --on-dark-strong / --accent-on-dark, pa je
   dovoljno te tokene PONISTITI SAMO UNUTAR .hero. To hvata i inline stilove na drugom dugmetu,
   koji stoje na preko 400 mjesta i koje bi inace trebalo rucno mijenjati.

   Tamne trake koje OSTAJU tamne u obije teme: kontakt traka, footer, cta-band, example-band.
   Stranica tako i dalje ima tamnu tacku oslonca, samo ne odmah ispod zaglavlja.

   Izmjereni kontrast na najtamnijoj tacki podloge (#F4FAF8):
     naslov 13.7:1 · uvod 9.4:1 · oznaka 6.1:1 · mrvice 6.9:1
   ============================================================ */
:root[data-theme="light"] .hero {
  --white:          #0F2E2C;   /* naslov, obrisano dugme — u ovoj traci vise nije bijelo */
  --on-dark-strong: #2C4844;
  --on-dark-soft:   #52706B;
  --accent-on-dark: #096B52;
  --seal2:          #096B52;
  --seal3:          #096B52;
  color:#2C4844;
  background:#FFFFFF;
  /* Cetiri sloja, odozgo nadolje:
     1. bijeli "bazen" iza teksta — tu je podloga najsvjetlija, da se naslov cita najlakse
     2. mint gore desno, oko globusa
     3. blagi teal dolje desno
     4. osnovni ton trake — NIJE bijel, jer bi cijela stranica ispod zaglavlja bila jedna
        bijela ploha bez ijedne ivice.
     Kontrast na najtamnijoj tacki (#E7F4EF): naslov 12.8:1, uvod 8.8:1, oznaka 5.7:1. */
  background-image:
    radial-gradient(780px 470px at 4% 36%, rgba(255,255,255,0.94), rgba(255,255,255,0) 72%),
    radial-gradient(900px 440px at 96% -16%, rgba(15,191,143,0.26), transparent 62%),
    radial-gradient(560px 320px at 102% 116%, rgba(14,138,128,0.14), transparent 60%),
    linear-gradient(158deg, #F7FCFA 0%, #EFF8F5 58%, #E7F4EF 100%);
  border-bottom:1px solid var(--line); }
/* Globus iz tamne teme ima ispunu od #02100E do #1B4F49 i linije od 4.5% bijele — na bijelom
   se od njega vidjela samo okrugla mrlja. Svijetla tema dobija svoju verziju: ista geometrija,
   tijelo u blagom mint tonu, meridijani i paralele tamnozeleni da se stvarno vide. */
:root[data-theme="light"] .hero::before { background-image:url("media/globus-svijetli.svg"); opacity:0.8; }
/* Mrlje: bijela (b3) na bijelom ne postoji, a mint su prejake — prigusuju se.
   Vazno: pravilo je vezano za .hero, jer .hero-fx.mini stoji i u kontakt traci koja OSTAJE tamna. */
:root[data-theme="light"] .hero .hero-fx { opacity:0.5; }
:root[data-theme="light"] .hero .hero-fx .b3 { display:none; }
/* Oznaka iznad naslova i MEST pilula imale su bijelu prozirnu podlogu. */
:root[data-theme="light"] .hero .eyebrow { background:rgba(15,191,143,0.10);
  border-color:rgba(9,107,82,0.30); }
:root[data-theme="light"] .hero .mest-sub { background:rgba(15,191,143,0.09);
  border-color:rgba(9,107,82,0.28); color:#2C4844; }
:root[data-theme="light"] .hero .mest-sub strong { color:#096B52; }
/* Obrisano dugme: ivica je bila poluprozirna bijela. */
:root[data-theme="light"] .hero .btn-ghost { border-color:rgba(15,46,44,0.35); }
/* Kosa crta izmedju mrvica bila je poluprozirna bijela. */
:root[data-theme="light"] .hero .breadcrumb li:not(:last-child)::after { color:rgba(15,46,44,0.32); }
:root[data-theme="light"] .hero .btn-ghost:hover { border-color:#0F2E2C; background:rgba(15,46,44,0.06); }
/* Ukrasna ikonica stranice crtana je bijelim linijama. */
:root[data-theme="light"] .hero .hero-icon .i-line { stroke:rgba(15,46,44,0.34); }
:root[data-theme="light"] .hero .hero-icon .i-soft { stroke:rgba(15,46,44,0.18); }
:root[data-theme="light"] .hero .hero-icon .i-fill { fill:rgba(15,46,44,0.10); }
:root[data-theme="light"] .hero .hero-icon .i-mark { fill:rgba(15,46,44,0.26); }
:root[data-theme="light"] .hero .hero-icon .i-accent,
:root[data-theme="light"] .hero .hero-icon .i-dot,
:root[data-theme="light"] .hero .hero-icon .i-fill-accent { stroke:#0A8F6B; }
:root[data-theme="light"] .hero .hero-icon .i-dot,
:root[data-theme="light"] .hero .hero-icon .i-fill-accent { fill:#0A8F6B; }

/* ---------- Ambijentalne mrlje — sada sporedan, suptilan sloj (ne glavni dizajn) ---------- */
.hero-fx { position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; opacity:0.7; }
.blob { position:absolute; border-radius:50%; filter:blur(70px); will-change:transform; }
.hero-fx .b1 { width:400px; height:400px; right:-120px; top:-160px;
  background:radial-gradient(circle, rgba(15,191,143,0.4), transparent 70%); animation:drift1 27s ease-in-out infinite; }
.hero-fx .b2 { width:280px; height:280px; right:100px; bottom:-160px;
  background:radial-gradient(circle, rgba(14,138,128,0.36), transparent 70%); animation:drift2 31s ease-in-out infinite; }
.hero-fx .b3 { width:170px; height:170px; right:290px; top:0;
  background:radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%); animation:drift1 23s ease-in-out infinite reverse; }
.hero-fx.mini { opacity:0.4; }
.hero-fx.mini .b1 { width:280px; height:280px; right:-70px; top:-110px; }
.hero-fx.mini .b2 { width:210px; height:210px; right:80px; bottom:-110px; }
.hero-fx.mini .b3 { display:none; }
@keyframes drift1 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-38px,30px) scale(1.1); } }
@keyframes drift2 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(26px,-26px) scale(0.92); } }
@media (max-width:820px){ .hero-fx { opacity:0.35; } .hero::before { opacity:0.55; } }

/* ---------- Tematska ikonica u zaglavlju — različita po standardu, jedinstven stil ----------
   Sjedi iznad ambijentalnih mrlja (.hero-fx): tanke linije (bijelo + mint), suptilna, ista "porodica"
   crteža na svakoj stranici, ali drugačiji motiv (zupčanici, imejl, planeta, sunce...). */
.hero-icon { position:absolute; right:3%; top:50%; transform:translateY(-50%); width:min(260px,28vw);
  z-index:1; opacity:0.92; pointer-events:none; overflow:visible; }
@media (max-width:900px){ .hero-icon { width:190px; opacity:0.4; right:-18px; } }
@media (max-width:560px){ .hero-icon { width:150px; opacity:0.3; right:-30px; } }
.hero-icon .i-line { fill:none; stroke:rgba(255,255,255,0.4); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hero-icon .i-accent { fill:none; stroke:#4FE0BE; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hero-icon .i-fill { fill:rgba(255,255,255,0.14); }
.hero-icon .i-fill-accent { fill:#4FE0BE; }
.hero-icon .i-dot { fill:#4FE0BE; }
/* CE znak u heroju: pun oblik, ne linija — mora se prepoznati kao znak, pa ide
   jaci fill od .i-fill (0.14) koji je predviden za pozadinske plohe. */
.hero-icon .i-mark { fill:rgba(255,255,255,0.32); }
/* nastavak .hero-icon pravila ispod (i-soft, i-spin...) je netaknut */

/* ---------- Canva SVG vizuali — Faza A prototip (samo iso-9001/14001/27001/22301) ----------
   Nova, izolovana klasa .std-visual — ne dira postojeći .hero-icon sistem koji ostale
   standard-stranice i dalje koriste bez izmjena. */
.std-visual { position:absolute; right:3%; top:50%; transform:translateY(-50%); width:min(240px,26vw);
  z-index:1; opacity:0.95; pointer-events:none; }
.std-visual img { display:block; width:100%; height:auto; }
@media (max-width:900px){ .std-visual { width:180px; opacity:0.55; right:-10px; } }
@media (max-width:560px){ .std-visual { width:140px; opacity:0.4; right:-20px; } }

/* Jedini dozvoljen kontinuirani pokret u ovoj fazi: spora rotacija izolovanog zupčanika (9001). */
.std-visual--gear img { animation:stdGearSpin 20s linear infinite; transform-origin:center; }
@keyframes stdGearSpin { to { transform:rotate(360deg); } }

/* Statični vizuali (14001/27001/22301): samo jednokratni entrance reveal, bez petlje. */
.std-visual--static { animation:stdVisualIn .6s ease backwards; }
@keyframes stdVisualIn { from { opacity:0; transform:translateY(-50%) translateY(10px); }
  to { opacity:0.95; transform:translateY(-50%); } }

/* ---------- Traka za orijentaciju ispod heroa (zamjena za quickbar SAMO na homepage-u —
   .quickbar klasa i CSS ostaju netaknuti jer ih en/ru/sq/tr početne strane i dalje koriste)
   Traka nosi svoju visinu: globalnih `section { padding:64px 0 }` ovdje je davalo 128px
   praznine na 50px sitnog teksta, pa je traka djelovala kao rupa između heroja i sadržaja.
   overflow:clip (a ne hidden) — hidden bi od trake napravio sopstveni scroll container i
   ugasio animation-timeline:scroll() na sjaju. ---------- */
.trust-strip { position:relative; padding:0; overflow:clip;
  background:var(--surface-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ts-wrap { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 22px; padding:14px 24px; font-size:0.97rem; color:var(--muted); }
/* min-height 26px: WCAG 2.2 trazi bar 24px za mete koje nisu link u tekstu. */
.ts-item { display:inline-flex; align-items:center; min-height:26px; gap:8px; }
.ts-item strong { color:var(--heading); font-weight:700; }
.ts-ico { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; opacity:.78;
  transition:transform .25s ease, opacity .25s ease; }
.ts-link { position:relative; color:var(--steel); text-decoration:none; font-weight:600; }
/* linija koja izlazi ispod teksta, ne ispod ikonice (16px ikonica + 8px razmak) */
.ts-link::after { content:""; position:absolute; left:24px; right:0; bottom:-3px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease; }
.ts-link:hover { color:var(--accent-label); }
.ts-link:hover::after, .ts-link:focus-visible::after { transform:scaleX(1); }
.ts-link:hover .ts-ico { opacity:1; transform:translateY(-1px); }
.ts-sep { width:1px; height:15px; background:var(--line); align-self:center; }

/* živa tačka uz „Brz odgovor“ — jedini stalni pokret na traci */
.ts-tacka { position:relative; width:8px; height:8px; flex:none; border-radius:50%;
  background:var(--accent-label); }
.ts-tacka::after { content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--accent-label); opacity:.45; }
@media (prefers-reduced-motion: no-preference) {
  .ts-tacka::after { animation:tsPuls 2.8s ease-out infinite; }
}
@keyframes tsPuls { 0% { transform:scale(1); opacity:.45; } 70%,100% { transform:scale(3.4); opacity:0; } }

/* poziv na akciju gurnut na desni kraj trake */
.ts-cta { margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:7px 16px; border-radius:999px; font-size:0.93rem; font-weight:700;
  color:var(--accent-label); text-decoration:none; white-space:nowrap;
  border:1px solid rgba(15,191,143,0.42); background:rgba(15,191,143,0.10);
  transition:background .25s ease, border-color .25s ease, transform .25s ease; }
.ts-cta:hover { background:rgba(15,191,143,0.18); border-color:var(--accent-label);
  transform:translateY(-1px); }
.ts-cta:hover .ts-ico { opacity:1; transform:translateY(2px); }
.ts-cta .ts-ico { opacity:.9; }

/* sjaj koji pređe preko trake dok se skroluje prvih 900px stranice */
.ts-sjaj { display:none; }
@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) and (min-width:861px) {
    .ts-sjaj { display:block; position:absolute; top:0; bottom:0; left:0; width:34%;
      pointer-events:none; z-index:0; transform:translateX(-130%);
      background:linear-gradient(90deg, transparent, rgba(15,191,143,0.16), transparent);
      animation:tsSjaj linear both; animation-timeline:scroll(root block);
      animation-range:0 900px; }
    @keyframes tsSjaj { to { transform:translateX(320%); } }
  }
}

@media (max-width:760px){
  .ts-sep { display:none; }
  .ts-wrap { gap:9px 18px; padding:12px 20px; font-size:0.92rem; }
  .ts-cta { margin-left:0; }
}

/* ---------- Statistika povjerenja — brojevi koji se "učitavaju" (count-up) pri prvom ulasku u
   vidno polje; smještena niže na stranici, između dvije sekcije sadržaja ---------- */
.stats-strip { background:var(--surface-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-strip .wrap { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; padding:26px 24px; }
.stat { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 32px;
  position:relative; }
.stat + .stat::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:34px; background:var(--line); }
/* Krupniji, srazmjerni brojevi — svi kroz istu klasu pa je 400+, 15+ i 15 uvijek isti font.
   tabular-nums drži cifre iste širine da brojevi izgledaju poravnato. */
.stat-num { position:relative; z-index:1; font-family:var(--display); font-weight:700; font-size:2.1rem; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
  background:linear-gradient(135deg, var(--seal-deep), var(--steel)); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
/* Zupčanik iza svakog broja — theme-aware kroz mask + var(--accent); .stat-num ima z-index:1 pa
   njegov gradijentni tekst uvijek ostaje iznad zupčanika. Susjedni se okreću u suprotnim smjerovima
   da djeluju kao da su spregnuti (mesh). Broj i oznaka ostaju potpuno čitljivi — zupčanik je diskretan. */
.stat::after { content:""; position:absolute; left:50%; top:-18px; width:76px; height:76px;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  background:var(--accent); opacity:0.16;
  -webkit-mask:url(media/gear.svg) center/contain no-repeat;
  mask:url(media/gear.svg) center/contain no-repeat;
  animation:statGear 20s linear infinite; }
.stat:nth-child(even)::after { animation-duration:24s; animation-direction:reverse; opacity:0.13; }
@keyframes statGear { to { transform:translateX(-50%) rotate(1turn); } }
@media (prefers-reduced-motion:reduce){ .stat::after { animation:none; } }
.stat-label { position:relative; z-index:1; font-size:0.82rem; color:var(--muted); margin-top:4px; max-width:150px; }
@media (max-width:640px){
  .stats-strip .wrap { padding:20px 16px; gap:16px 0; }
  /* Na telefonu tri stavke ne staju čitko u jedan red pri punoj veličini, pa se lome
     u kolonu preko pune širine — brojevi i oznake ostaju krupni kao na desktopu. */
  .stat { padding:0 14px; flex:1 1 100%; }
  .stat + .stat::before { display:none; }
  .stat-num { font-size:1.85rem; }
  .stat-label { font-size:0.82rem; max-width:none; }
}

/* ---------- Standardi explorer — editorijalna lista umjesto kartica (SAMO homepage;
   .grid/.card klase ostaju netaknute jer ih 10+ drugih stranica koristi) ---------- */
.explorer { padding-top:74px; }
.explorer-grid { display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:48px; align-items:start; }
.explorer-intro { position:sticky; top:92px; }
#standardi .explorer-intro h2 { text-align:left; }
#standardi .explorer-intro h2::after { left:0; transform:scaleX(0); transform-origin:left; }
#standardi .explorer-intro h2.in::after { transform:scaleX(1); }
.explorer-intro .sec-num { display:block; font-family:var(--display); font-size:0.82rem; font-weight:700;
  color:var(--accent-label); letter-spacing:0.1em; margin-bottom:10px; }
.explorer-intro .section-intro { text-align:left; text-align-last:left; }

.std-list { list-style:none; border-top:1px solid var(--line); }
.std-list li { border-bottom:1px solid var(--line); }
.std-list a { display:grid; grid-template-columns:38px 1fr 22px; align-items:center; gap:18px;
  padding:18px 6px; text-decoration:none; color:var(--text);
  transition:background .2s ease, padding-left .2s var(--ease-out); }
.std-list a:hover, .std-list a:focus-visible { background:var(--surface-alt); padding-left:12px; }
.std-list a:focus-visible { outline:2px solid var(--accent-label); outline-offset:-2px; }
.sl-idx { font-family:var(--display); font-size:0.78rem; color:var(--muted); font-weight:700; }
.sl-body { display:flex; flex-direction:column; gap:2px; }
.sl-code { font-family:var(--display); font-size:0.78rem; color:var(--accent-label); font-weight:700; }
.sl-name { font-family:var(--display); font-size:1.05rem; font-weight:700; color:var(--heading); }
.sl-desc { font-size:0.88rem; color:var(--muted); max-width:60ch; }
.sl-arrow { font-size:1.1rem; color:var(--accent-label); transition:transform .2s var(--ease-out); justify-self:end; }
.std-list a:hover .sl-arrow, .std-list a:focus-visible .sl-arrow { transform:translateX(4px); }

@media (max-width:860px){
  .explorer-grid { grid-template-columns:1fr; gap:24px; }
  .explorer-intro { position:static; }
}
@media (max-width:560px){
  .std-list a { grid-template-columns:26px 1fr 18px; gap:12px; padding:15px 4px; }
  .sl-name { font-size:0.98rem; }
  .sl-desc { font-size:0.85rem; }
}
.hero-icon .i-soft { stroke:rgba(255,255,255,0.22); }
.hero-icon .i-spin { transform-box:fill-box; transform-origin:center; animation:iconspin 40s linear infinite; }
.hero-icon .i-spin-rev { transform-box:fill-box; transform-origin:center; animation:iconspin 34s linear infinite reverse; }
.hero-icon .i-spin-fast { transform-box:fill-box; transform-origin:center; animation:iconspin 12s linear infinite; }
.hero-icon .i-float { animation:floaty 5s ease-in-out infinite; }
.hero-icon .i-float2 { animation:floaty 6s ease-in-out infinite 1s; }
.hero-icon .i-pulse2 { animation:pulse2 3s ease-in-out infinite; }
@keyframes iconspin { to { transform:rotate(360deg); } }
/* Ljuljanje (kazaljka vage, list, stranice knjige) */
.hero-icon .i-sway { transform-box:fill-box; transform-origin:top center; animation:iconsway 3.6s ease-in-out infinite; }
.hero-icon .i-sway2 { transform-box:fill-box; transform-origin:top center; animation:iconsway 3.6s ease-in-out infinite reverse; }
@keyframes iconsway { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg); } }
/* Domine koje padaju u nizu — svaka kasni malo više */
.hero-icon .i-tip { transform-box:fill-box; transform-origin:bottom center; animation:icontip 3.2s ease-in-out infinite; }
@keyframes icontip { 0%,60%,100% { transform:rotate(0deg); } 75% { transform:rotate(14deg); } }
/* Radar puls — širi se i nestaje (koristi se za "aktuelnosti" i zaštitne prstenove) */
.hero-icon .i-ring { transform-box:fill-box; transform-origin:center; animation:iconring 2.6s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes iconring { 0% { transform:scale(0.7); opacity:0.9; } 100% { transform:scale(1.35); opacity:0; } }
/* Protok podataka duž isprekidane linije (imejl → štit, lanac sljedljivosti) */
.hero-icon .i-flow { stroke-dasharray:4 6; animation:iconflow 1.6s linear infinite; }
@keyframes iconflow { to { stroke-dashoffset:-20; } }
/* Globus koji se okreće (integrisani sistem) — meridijani se sužavaju i šire pa djeluje kao
   rotacija sfere. rx je SVG geometrijsko svojstvo animirano preko CSS-a; ako ga pregledač ne
   animira, elipse i dalje uredno stoje kao statična mreža globusa. */
.hero-icon .i-meridian { animation:iconmeridian 9s ease-in-out infinite; }
@keyframes iconmeridian { 0%,100% { rx:50px; } 50% { rx:3px; } }
/* Kaskadni bljesak (mreža, karike lanca, tačke jedna za drugom) */
.hero-icon .i-blink { animation:iconblink 2.4s ease-in-out infinite; }
@keyframes iconblink { 0%,100% { opacity:0.35; } 50% { opacity:1; } }
/* Iscrtavanje kvačice (sertifikacija) */
.hero-icon .i-draw { stroke-dasharray:40; stroke-dashoffset:0; }
@keyframes icondraw { 0%,15% { stroke-dashoffset:40; } 45%,80% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-40; } }
@keyframes pulse2 { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
/* Matrix kiša cifara (ISO 27001) — kolona pada odozgo naniže, blijedi na ulazu/izlazu, petlja se */
.hero-icon .i-fall { transform-box:fill-box; animation:iconfall 3.2s linear infinite; }
@keyframes iconfall { 0% { transform:translateY(-18px); opacity:0; } 12% { opacity:1; } 78% { opacity:1; }
  100% { transform:translateY(150px); opacity:0; } }
/* Domina koja se naginje pa se ZAUSTAVI (kontinuitet poslovanja) — za razliku od i-tip, ne vraća se u nulu */
.hero-icon .i-tip-stop { transform-box:fill-box; transform-origin:bottom center; animation:icontipstop 3.6s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes icontipstop { 0%,55% { transform:rotate(0deg); } 72% { transform:rotate(19deg); } 84%,100% { transform:rotate(13deg); } }
/* Domina koja pada DO KRAJA, pa se resetuje na sledeći krug (za prve u nizu, prije nego lanac stane) */
.hero-icon .i-tip-full { transform-box:fill-box; transform-origin:bottom center; animation:icontipfull 3.6s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes icontipfull { 0%,50% { transform:rotate(0deg); } 68% { transform:rotate(78deg); } 92% { transform:rotate(78deg); } 100% { transform:rotate(0deg); } }
/* Hod (radnici sa šljemovima, ISO 45001) — noge/tijelo se blago ljuljaju kao korak */
.hero-icon .i-walk { transform-box:fill-box; transform-origin:top center; animation:iconwalk 1.1s ease-in-out infinite; }
.hero-icon .i-walk2 { transform-box:fill-box; transform-origin:top center; animation:iconwalk 1.1s ease-in-out infinite .55s; }
@keyframes iconwalk { 0%,100% { transform:rotate(-5deg) translateY(0); } 50% { transform:rotate(5deg) translateY(-1.5px); } }
/* Mjehurić koji se penje u epruveti (laboratorije) */
.hero-icon .i-bubble { animation:iconbubble 2.8s ease-in infinite; }
.hero-icon .i-bubble2 { animation:iconbubble 2.8s ease-in infinite .9s; }
@keyframes iconbubble { 0% { transform:translateY(0); opacity:0; } 15% { opacity:0.9; }
  90% { opacity:0.4; } 100% { transform:translateY(-38px); opacity:0; } }

/* ---------- Saće — IMS "cvijet" (centralni IMS heksagon + 6 povezanih standarda) ----------
   Geometrija: pravilan šestougao, vrhovi lijevo/desno, ravne ivice gore/dolje. --hw/--hh su bazne
   dimenzije (hh = hw*0.866); svi razmaci su calc() izrazi nad njima pa se cijeli "cvijet" glatko
   skalira preko jedne promjenljive na svakom breakpoint-u — nema duplog seta pravila. */
.hcomb-wrap { display:flex; justify-content:center; margin:38px auto 6px; }
.hcomb { --hw:132px; --hh:calc(var(--hw) * 0.866); position:relative;
  width:calc(var(--hw) * 2.5); height:calc(var(--hh) * 3); }
.hcomb-spokes { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hcomb-spokes line { stroke:var(--line); stroke-width:2; }
.hx { position:absolute; width:var(--hw); height:var(--hh); transform:translate(-50%,-50%) scale(1);
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:0 14%;
  background:var(--surface); border:1px solid var(--line); color:var(--heading);
  font-family:var(--display); font-weight:700; font-size:0.86rem; line-height:1.2; text-decoration:none;
  z-index:1; transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background .22s ease, color .22s ease;
  opacity:1; }
/* JS dodaje .reveal PRIJE nego što posmatra element (progressive enhancement: bez JS/uz
   prefers-reduced-motion heksagoni ostaju odmah vidljivi, nikad ne zavise od IntersectionObservera). */
.hcomb.reveal .hx { opacity:0; transform:translate(-50%,-50%) scale(.8);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background .22s ease, color .22s ease; }
.hcomb.reveal.in .hx { opacity:1; transform:translate(-50%,-50%) scale(1); }
.hcomb.reveal.in .hx-n  { transition-delay:.05s; } .hcomb.reveal.in .hx-ne { transition-delay:.1s; }
.hcomb.reveal.in .hx-se { transition-delay:.15s; } .hcomb.reveal.in .hx-s  { transition-delay:.2s; }
.hcomb.reveal.in .hx-sw { transition-delay:.25s; } .hcomb.reveal.in .hx-nw { transition-delay:.3s; }
.hcomb.reveal.in .hx-c  { transition-delay:0s; }
.hx-c  { left:calc(var(--hw) * 1.25); top:calc(var(--hh) * 1.5); }
.hx-n  { left:calc(var(--hw) * 1.25); top:calc(var(--hh) * 0.5); }
.hx-s  { left:calc(var(--hw) * 1.25); top:calc(var(--hh) * 2.5); }
.hx-ne { left:calc(var(--hw) * 2);    top:var(--hh); }
.hx-se { left:calc(var(--hw) * 2);    top:calc(var(--hh) * 2); }
.hx-nw { left:calc(var(--hw) * 0.5);  top:var(--hh); }
.hx-sw { left:calc(var(--hw) * 0.5);  top:calc(var(--hh) * 2); }
a.hx:hover, a.hx:focus-visible { transform:translate(-50%,-50%) scale(1.07); box-shadow:0 10px 26px rgba(15,46,44,0.18);
  border-color:var(--seal); color:var(--steel); z-index:2; }
/* Tamni tekst na mint pozadini (bijeli je imao kontrast 2,4). */
.hx-c { background:var(--seal); color:var(--on-seal); border-color:var(--seal); font-size:0.95rem; letter-spacing:0.01em;
  box-shadow:0 12px 30px rgba(15,191,143,0.35); z-index:2; cursor:pointer; }
.hx-c:hover { background:var(--seal-deep); transform:translate(-50%,-50%) scale(1.06); }
.hx-active { background:rgba(15,191,143,0.08); border:2px solid var(--seal); color:var(--heading); cursor:default; }
.hx-active::after { content:"trenutna stranica"; position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-weight:600; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--steel); white-space:nowrap; }
@media (max-width:900px){ .hcomb { --hw:104px; } }
/* Mobilni prikaz: cvijet postaje uredna mreža čipova — bez apsolutnog pozicioniranja i bez zbrke. */
@media (max-width:640px){
  .hcomb-spokes { display:none; }
  .hcomb { --hw:auto; width:100%; height:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:420px; margin:0 auto; }
  .hx { position:static; transform:none !important; width:auto; height:auto; clip-path:none; border-radius:12px;
    padding:10px 16px; font-size:0.82rem; opacity:1; }
  .hcomb.in .hx { opacity:1; }
  .hx-c { order:-1; width:100%; padding:13px 16px; font-size:0.9rem; }
  .hx-active::after { position:static; display:block; transform:none; margin-top:3px; }
}

/* ---------- IMS tekstualni blok ispod saća ---------- */
.ims-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; margin-top:28px; }
.ims-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px 22px 20px;
  transition:transform .2s ease, box-shadow .2s ease; }
.ims-card:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(15,46,44,0.08); }
.ims-card strong { display:block; font-family:var(--display); color:var(--heading); font-size:1.02rem; margin-bottom:8px; }
.ims-card p { color:var(--muted); font-size:0.93rem; }
.contact-band { z-index:0; }
.contact-band .wrap { position:relative; z-index:2; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 4px rgba(15,191,143,0.25); } 50% { box-shadow:0 0 0 8px rgba(15,191,143,0.05); } }
/* Kucajući (typewriter) efekat za hero h1 — vidi site.js. Kursor je poseban span koji JS ubacuje/uklanja. */
.tw-cursor { display:inline-block; width:3px; margin-left:3px; background:currentColor;
  animation:twBlink .8s step-end infinite; }
@keyframes twBlink { 0%,49% { opacity:0.85; } 50%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .tw-cursor { display:none; } }
/* "Clarify" otkrivanje naslova pri skrolu — tekst kreće blago zamagljen i uveličan, pa se izoštri.
   Primjenjuje se preko JS-a (ista .rv-u lista + IntersectionObserver) na section h2. */
.rv-blur { opacity:0; filter:blur(6px); transform:scale(1.015); transition:opacity .6s ease, filter .7s ease, transform .7s cubic-bezier(.16,.8,.24,1); }
.rv-blur.in { opacity:1; filter:blur(0); transform:none; }
@media (prefers-reduced-motion: reduce) { .rv-blur { opacity:1; filter:none; transform:none; } }
/* Suptilan "otkucaj srca" na CTA dugmadima za poziv/kontakt da privuku pažnju bez treperenja teksta. */
.btn-pulse { animation:btnPulse 2.6s ease-in-out infinite; }
@keyframes btnPulse { 0%,100% { box-shadow:0 0 0 0 rgba(15,191,143,0.45); } 60% { box-shadow:0 0 0 10px rgba(15,191,143,0); } }
.btn-pulse:hover { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .btn-pulse { animation:none; } }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }

.btn { display:inline-block; isolation:isolate; text-decoration:none; font-weight:700; padding:13px 26px; border-radius:10px;
  font-size:0.96rem; font-family:var(--display); letter-spacing:0; position:relative; overflow:hidden;
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s ease,
             border-color .18s ease, color .18s ease; }
/* Usamljeno CTA dugme direktno u .wrap (ispod centriranog naslova) centriramo i samo */
section > .wrap > a.btn { display:table; margin:0 auto; }
.btn:hover { transform:translateY(-2px); }
/* Pritisak: dugme "sjedne" nazad — jedina povratna informacija koju dodir na telefonu uopste dobija. */
.btn:active { transform:translateY(0) scale(0.985); transition-duration:.06s; }

/* ---------- Sjaj na dugmadima ----------
   Tri sloja, svaki sa svojim poslom:
     ::before = staklasti odsjaj koji STALNO stoji (vidi se i kad je pokret iskljucen)
     ::after  = traka svjetla koja sama prelazi preko dugmeta na svakih ~7s
     :hover   = mint se POSVIJETLI (ne potamni), dugme se podigne i dobije oreol
   Boja teksta se na hover NE mijenja: --on-seal na --seal-hover daje 9.55:1.
   Ranije je hover isao na --seal-deep, sto je sa istim tekstom davalo 2.56:1 u svijetloj temi. */
.btn-gold { background:var(--seal); color:var(--on-seal);
  box-shadow:0 8px 22px rgba(15,191,143,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-gold::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.05) 100%); }
.btn-gold::after { content:""; position:absolute; z-index:-1; top:-20%; left:0; width:38%; height:140%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:translateX(-180%) skewX(-20deg); animation:btnSheen 7s ease-in-out infinite; }
.btn-gold:hover { background:var(--seal-hover);
  box-shadow:0 14px 32px rgba(15,191,143,0.5), 0 0 0 1px rgba(255,255,255,0.28) inset; }
.btn-gold:hover::after { animation:btnSheenPass .8s ease; }
/* Mirovanje: traka stoji van dugmeta 82% ciklusa, pa samo prosisa — zato "svjetluca", a ne "trepce". */
@keyframes btnSheen { 0%,82% { transform:translateX(-180%) skewX(-20deg); }
                      100% { transform:translateX(380%) skewX(-20deg); } }
@keyframes btnSheenPass { from { transform:translateX(-180%) skewX(-20deg); }
                          to { transform:translateX(380%) skewX(-20deg); } }

/* Na 414 mjesta .btn-gold nosi inline stil koji ga pravi prozirnim (obrisana varijanta za tamne
   trake). Tu odsjaj nema po čemu da klizi — bijeli preliv bi izgledao kao mrlja preko providnog
   dugmeta, pa se oba sloja gase. Bira ih sam inline stil, tako da nijedan HTML ne mora da se dira. */
.btn-gold[style*="transparent"]::before, .btn-gold[style*="transparent"]::after { content:none; }
/* Ta ista prozirna varijanta nije imala NIKAKVU reakciju na prelazak misa: inline stil nosi
   background, border i color, a inline uvijek pobjeduje pravilo iz stilova — pa je hover iz
   .btn-gold (koji mijenja samo background) bio bez efekta. Ostajalo je samo podizanje za 2px,
   sto se jedva primijeti, i dugme je djelovalo kao da nije dugme.
   Zato ovdje !important, jedino mjesto gdje je opravdan — protiv inline stila se drugacije
   ne moze. Ivica ide na currentColor da ostane u boji natpisa, koja je vec provjerena po
   temi i po traci na kojoj dugme stoji. */
.btn-gold[style*="transparent"]:hover,
.btn-gold[style*="transparent"]:focus-visible {
  background:rgba(15,191,143,0.15) !important;
  border-color:currentColor !important;
  box-shadow:0 10px 24px rgba(15,191,143,0.24); }

/* ---------- Odsjaj i na svijetlim i obrisanim dugmadima ----------
   Traka svjetla je do sada stajala samo na punim mint dugmadima. Obrisana i svijetla su bila
   bez ikakvog pokreta jer bi BIJELI preliv preko prozirne podloge izgledao kao mrlja — zbog
   toga je gore i bio ugasen. Rjesenje je da traka uzme currentColor: na dugmetu sa tamnim
   natpisom je tamna, na dugmetu sa svijetlim natpisom svijetla. Tako se vidi na svakoj
   podlozi i u obije teme, a nigdje ne izgleda kao mrlja.
   Nizak opacitet (0.14) i isti ritam kao na punim dugmadima — traka stoji van dugmeta 82%
   ciklusa, pa samo prosisa. */
.btn-ghost::after,
.btn-outline::after,
.btn-gold[style*="transparent"]::after,
.nav a.nav-cta::after,
.cform button::after,
.assess-btn::after {
  content:""; position:absolute; z-index:-1; top:-20%; left:0; width:38%; height:140%; pointer-events:none;
  background:linear-gradient(100deg, transparent, currentColor, transparent);
  opacity:0.14; transform:translateX(-180%) skewX(-20deg);
  animation:btnSheen 7s ease-in-out infinite; }
.btn-ghost:hover::after,
.btn-outline:hover::after,
.btn-gold[style*="transparent"]:hover::after,
.nav a.nav-cta:hover::after,
.cform button:hover::after,
.assess-btn:hover::after { animation:btnSheenPass .8s ease; }
/* Puno mint dugme u formi i u upitniku dobija i stalni staklasti odsjaj, kao .btn-gold. */
.cform button::before,
.assess-btn-primary::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,0.30) 0%,
  rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.05) 100%); }
@media (prefers-reduced-motion:reduce){
  .btn-ghost::after, .btn-outline::after, .btn-gold[style*="transparent"]::after,
  .nav a.nav-cta::after, .cform button::after, .assess-btn::after { animation:none; }
}

.btn-ghost { border:1.5px solid rgba(255,255,255,0.5); color:var(--white); }
.btn-ghost:hover { border-color:var(--white); background:rgba(255,255,255,0.12);
  box-shadow:0 10px 26px rgba(0,0,0,0.22); }
:root[data-theme="light"] .btn-ghost:hover { background:rgba(15,46,44,0.07); box-shadow:0 10px 26px rgba(15,46,44,0.14); }
/* Obrisano dugme za svijetle sekcije u tijelu stranice — boja ide iz --accent pa radi u obje teme
   (za razliku od .btn-ghost koji je pravljen za tamnu podlogu heroja). */
.btn-outline { border:1.5px solid var(--accent); color:var(--accent); background:transparent; }
.btn-outline:hover { background:var(--note-bg); border-color:var(--accent-hover); color:var(--accent-hover);
  box-shadow:0 10px 24px rgba(15,191,143,0.20); }
/* "Više o ovom ciklusu →" nije imao nijedno pravilo, pa je kao običan <p> ostajao lijevo
   poravnat dok su naslov, ciklus i dugmad oko njega centrirani — na tabletu je to najviše
   upadalo u oči. Javlja se isključivo u toj centriranoj sekciji, na 39 stranica. */
.more-link { text-align:center; margin:18px 0 0; }
/* Red dugmadi ispod "Put do sertifikata" — .cta-row je stilizovan samo unutar .hero. */
.std-cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:28px 0 0; }
/* Tri dugmeta u jednom redu traže ~730px, a tablet od 768px daje 720px unutar .wrap — prelamala
   su se tako da treće ostane samo u drugom redu i izgleda neporavnato prema dva iznad. Dužina
   teksta se razlikuje po jeziku (RU i SQ su duži), pa se granica ne može pogađati po pikselu:
   ispod 900px uvijek slažemo u centriranu kolonu, gdje su sva tri poravnata jedno pod drugim. */
@media (max-width:900px){ .std-cta { flex-direction:column; align-items:center; } }
@media (max-width:560px){ .std-cta .btn { width:100%; text-align:center; } }

/* ---------- Sekcije ---------- */
section { padding:64px 0; }
section.alt { background:var(--surface-alt); }
/* Naslovi sekcija i uvodni pasusi centrirani radi sklada; hero i kartice ostaju lijevo poravnati */
section > .wrap > h2, section > .wrap > div > h2 { text-align:center; }
.section-intro { max-width:680px; color:var(--muted); margin-bottom:34px; margin-left:auto; margin-right:auto;
  text-align:center; }
/* Duži tekstualni blokovi poravnati u blok (justify) radi urednijeg izgleda kolona teksta */
/* .card p i .step p su NAMJERNO izuzeti: to su uske kolone, a justify u njima
   pravi rijeke bijelog i tekst izgleda razvuceno. Justify radi samo u sirokim blokovima. */
.prose p, .law-box p, .seo-cert p, .ai-box p, .benefit p,
.faq details p, .price-row p { text-align:justify; text-align-last:left; hyphens:auto; }
.card p, .step p { text-align:left; hyphens:auto; }

/* ---------- Brzi kontakt ---------- */
.quickbar { background:var(--surface-alt); border-bottom:1px solid var(--line); padding:12px 0; }
.quickbar .wrap { display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  font-size:0.93rem; }
.quickbar a { font-weight:700; text-decoration:none; }

/* ---------- FAZE — moderne strelice koje ulaze jedna u drugu ---------- */
.flow { display:flex; flex-wrap:wrap; gap:10px 0; counter-reset:fz; margin-top:8px; }
.fstep { counter-increment:fz; position:relative; background:var(--surface); border:1px solid var(--line);
  padding:16px 22px 16px 34px; flex:1 1 200px; min-width:190px;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
  margin-left:-14px; }
.fstep:first-child { margin-left:0; clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  padding-left:22px; border-radius:12px 0 0 12px; }
.fstep strong { display:block; font-family:var(--display); font-size:0.98rem; color:var(--heading); }
.fstep strong::before { content:counter(fz) ". "; color:var(--seal); }
.fstep span { font-size:0.82rem; color:var(--muted); line-height:1.45; display:block; margin-top:3px; }
.fstep.last { background:linear-gradient(120deg,var(--seal),#34D9A8); border-color:transparent; }
.fstep.last strong, .fstep.last span { color:var(--on-seal); }
.fstep.last strong::before { color:var(--on-seal); }
/* link u mint koraku: ista tamna boja kao okolni tekst, pa mu treba podvlacenje da se razlikuje */
.fstep.last a { color:var(--on-seal); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:860px){
  .flow { flex-direction:column; gap:6px; }
  /* flex:none je namjerno — .fstep na desktopu ima flex:1 1 200px (bazis za ŠIRINU u redu),
     a kad .flow postane kolona taj isti "200px" bazis se primjenjuje na VISINU svake kartice,
     tjerajući čak i kratak jednorečenični tekst da zauzme do 200px prostora ("lufta" između
     naslova, teksta i sljedeće kartice). flex:none vraća prirodnu visinu prema sadržaju. */
  .fstep, .fstep:first-child { flex:none; margin-left:0; clip-path:none; border-radius:10px; padding:12px 16px;
    border-left:5px solid var(--seal); }
  .fstep.last { border-left-color:transparent; }
  .fstep strong { font-size:0.92rem; }
  .fstep span { margin-top:2px; }
}

/* ---------- Mreža kartica ---------- */
.grid { display:grid; gap:22px; justify-content:center;
  /* gornja granica staze: sa 1fr bi se usamljena kartica u zadnjem redu razvukla
     preko cijele sirine i pocinjala uz lijevu ivicu. Ovako se zadnji red centrira. */
  grid-template-columns:repeat(auto-fit,minmax(260px,340px)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px;
  display:flex; flex-direction:column; transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease; }
.card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(15,46,44,0.12); border-color:rgba(15,191,143,0.35); }
.card .std-code { font-family:var(--display); font-size:0.95rem; color:var(--accent-label); font-weight:700; }
.card h3 { margin-top:6px; }
.std-card-icon { width:32px; height:32px; display:block; margin:0 0 10px; color:var(--accent);
  flex:none; }
.card p { color:var(--muted); font-size:0.93rem; flex-grow:1; }
/* Zajednička suptilna "pomjeri strelicu" mikro-interakcija za sve a.more linkove (card/benefit/news) */
a.more::after { display:inline-block; transition:transform .2s cubic-bezier(.2,.7,.3,1); }
a.more:hover::after { transform:translateX(4px); }
.card a.more { display:inline-flex; align-items:center; min-height:24px; margin-top:16px; font-weight:700;
  text-decoration:none; font-size:0.93rem; }
.card a.more::after { content:" →"; }

/* ---------- Detaljni koraci ---------- */
.steps { display:grid; gap:0; border-top:1px solid var(--line); }
.step { display:grid; grid-template-columns:92px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); }
.step .clause { font-family:var(--display); font-size:1.6rem; font-weight:700; color:var(--accent-label); line-height:1; }
.step .clause small { display:block; font-family:var(--sans); font-size:0.66rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-top:6px; font-weight:700; }
/* Tematska bulet-ikonica umjesto golog broja — klauzula i dalje piše u manjoj oznaci ispod. */
.step .clause-icon { width:34px; height:34px; }
.step .clause-icon .ci-line { fill:none; stroke:var(--seal-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.step .clause-icon .ci-fill { fill:var(--seal); }
.step .clause-icon .ci-soft { fill:none; stroke:var(--line); stroke-width:1.4; }
.step p { color:var(--muted); font-size:0.95rem; }
@media (max-width:640px){ .step { grid-template-columns:64px 1fr; gap:14px; } }

/* ---------- Put do sertifikata ---------- */
.cert-note { background:var(--note-bg); border:1px solid var(--note-border); border-left:5px solid var(--seal); border-radius:10px;
  padding:14px 18px; margin:0 auto 24px; max-width:760px; font-size:0.95rem; color:var(--note-text); text-align:left; }
/* Grid sa fiksnim koracima umjesto auto-fit — sprječava da posljednja kartica "pobjegne" u red sama na laptop rezolucijama.
   Redizajnirano iz lijevo-akcentovanih kartica (neujednačene visine + justify tekst ružno izgledali jedno pored drugog)
   u "stepper" traku: brojčani krug (conic-gradient, podsjeća na loading prsten) sjedi na spojnoj liniji iznad svake
   kartice, tekst je lijevo poravnat bez justify-a. */
/* "Put do sertifikata" kao CIKLUS: implementacija je jednokratna (gore, istaknuta), a
   sertifikacija → godišnji nadzori → resertifikacija čine ciklus koji se ponavlja na 3 godine. */
.cert-path { display:grid; grid-template-columns:1fr 1fr; gap:34px 18px; counter-reset:certstage;
  position:relative; max-width:760px; margin:30px auto 0; }
.cert-stage { position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:32px 18px 20px; counter-increment:certstage;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease; }
.cert-stage::before { content:counter(certstage,decimal-leading-zero); position:absolute; left:50%; top:-19px;
  transform:translateX(-50%); width:38px; height:38px; border-radius:50%; z-index:1;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700;
  font-size:0.82rem; color:var(--white); background:conic-gradient(from -90deg, var(--seal), var(--steel));
  box-shadow:0 0 0 5px var(--surface-alt), 0 6px 16px rgba(15,46,44,0.18);
  transition:transform .2s cubic-bezier(.2,.7,.3,1); }
.cert-stage:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(15,46,44,0.08); border-color:var(--seal); }
.cert-stage:hover::before { transform:translateX(-50%) scale(1.1); }
.cert-stage strong { display:block; margin-bottom:8px; font-size:0.99rem; font-family:var(--display); text-align:center; }
.cert-stage p { font-size:0.88rem; color:var(--muted); text-align:left; text-align-last:left; hyphens:auto; }
/* 1) Implementacija — puna širina, istaknuta, jednokratna, sa strelicom nadole */
.cert-path > .cert-stage:first-child { grid-column:1 / -1; background:var(--note-bg); border-color:var(--note-border); }
.cert-path > .cert-stage:first-child::after { content:"↓"; position:absolute; left:50%; bottom:-31px;
  transform:translateX(-50%); font-size:1.5rem; font-weight:800; line-height:1; color:var(--accent); pointer-events:none; }
/* 2) Natpis o ponavljanju ciklusa — puna širina na dnu */
.cert-path::after { content:"↻  Ciklus sertifikacija → godišnji nadzor → resertifikacija ponavlja se svake 3 godine. Implementacija se ne ponavlja — osim kada izađe nova verzija standarda.";
  grid-column:1 / -1; margin-top:6px; text-align:center; font-size:0.85rem; line-height:1.55;
  color:var(--note-text); background:var(--note-bg); border:1px solid var(--note-border);
  border-radius:12px; padding:14px 18px; }
@media (max-width:560px){ .cert-path { grid-template-columns:1fr; } }

/* ---------- Prednosti ----------
   Fleksibilna mreža umjesto fiksnih grid kolona: kartice same određuju koliko ih staje u red,
   a "justify-content:center" centrira i nepotpun posljednji red — bez obzira na broj kartica (4, 5, 6...),
   nijedna više ne "bježi" usamljena uz lijevu ivicu. */
.benefits { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; counter-reset:benefitnum; }
.benefit { counter-increment:benefitnum; position:relative; overflow:hidden; flex:1 1 250px; max-width:300px;
  padding:26px 24px 22px; border:1px solid var(--line); border-radius:16px; background:var(--surface);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.benefit::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--seal),var(--steel)); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.benefit::after { content:counter(benefitnum, decimal-leading-zero); position:absolute; top:-14px; right:2px;
  font-family:var(--display); font-weight:700; font-size:3.6rem; color:var(--surface-alt); z-index:0; line-height:1;
  pointer-events:none; }
.benefit:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(15,46,44,0.1); border-color:rgba(15,191,143,0.3); }
.benefit:hover::before { transform:scaleX(1); }
.benefit > * { position:relative; z-index:1; }
.benefit strong { display:block; margin-bottom:6px; font-family:var(--display); font-size:1.03rem; }
.benefit p { font-size:0.91rem; color:var(--muted); }
.benefit a.more { margin-top:12px; display:inline-flex; align-items:center; min-height:24px;
  font-weight:700; text-decoration:none; font-size:0.87rem; }
.benefit a.more::after { content:" →"; }
.benefit .flag { display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--accent-label); background:rgba(15,191,143,0.12);
  padding:4px 11px; border-radius:99px; margin-bottom:10px; }
@media (max-width:480px){ .benefit { flex-basis:100%; max-width:100%; } }

/* ---------- Prednosti — alternativni "checklist" izgled ----------
   Kada se dvije "benefits" sekcije nađu jedna ispod druge, druga dobija ovaj drugačiji
   izgled (bez kartica i brojeva) da sajt ne izgleda kao isto nabrajanje ponovljeno dvaput. */
.benefits.list-style { flex-direction:column; flex-wrap:nowrap; max-width:820px; margin:0 auto; gap:0; }
.benefits.list-style .benefit { flex:none; max-width:none; width:100%; display:grid;
  grid-template-columns:34px 1fr; column-gap:18px; row-gap:3px; padding:20px 6px; border:none; border-radius:0;
  border-bottom:1px solid var(--line); background:transparent; box-shadow:none !important; transform:none !important; }
.benefits.list-style .benefit:last-child { border-bottom:none; }
.benefits.list-style .benefit::after { display:none; }
.benefits.list-style .benefit::before { content:counter(benefitnum); position:static; grid-column:1; grid-row:1 / 3;
  align-self:start; width:34px; height:34px; border-radius:50%; background:rgba(15,191,143,0.1); color:var(--seal-deep);
  font-family:var(--display); font-weight:700; font-size:0.95rem; display:flex; align-items:center;
  justify-content:center; transform:none; transition:background .2s ease, color .2s ease; }
.benefits.list-style .benefit:hover::before { background:var(--seal); color:var(--white); }
.benefits.list-style .benefit strong { grid-column:2; grid-row:1; margin-bottom:0; }
.benefits.list-style .benefit p { grid-column:2; grid-row:2; }
@media (max-width:480px){ .benefits.list-style .benefit { grid-template-columns:28px 1fr; column-gap:12px; }
  .benefits.list-style .benefit::before { width:28px; height:28px; font-size:0.82rem; } }

/* ---------- Prednosti kao "drvo" — centralno stablo + grane lijevo/desno ----------
   "Put do sertifikata" (numerisana vremenska linija) i "Prednosti" su ranije izgledale isto.
   Obična .benefits sekcija sada je vertikalno drvo: mint stablo kroz sredinu, ✓ čvor na stablu,
   a svaka prednost je grana koja izlazi lijevo (neparne) ili desno (parne) sa spojnom crticom.
   Grane uklizavaju s lijeva/desna pri skrolu (rv-l/rv-r se dodaju u site.js).
   Ne primjenjuje se na .list-style / .pb-bento / .aktuelno-grid varijante. */
.b-tree, .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli){
  display:block; position:relative; max-width:880px; margin:0 auto; padding:6px 0;
}
/* stablo (vertikalna linija kroz sredinu) */
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli)::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:0; bottom:0; width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent) 82%, transparent 100%);
  opacity:0.85;
}
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit{
  position:relative; overflow:visible; flex:none; max-width:none;
  width:50%; box-sizing:border-box; background:transparent; border:none;
  border-radius:0; box-shadow:none; margin:0; padding:16px 46px 16px 6px; text-align:right;
}
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit:nth-child(even){
  margin-left:50%; padding:16px 6px 16px 46px; text-align:left;
}
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit::after{
  /* spojna grančica od stabla do teksta */
  content:""; position:absolute; top:31px; width:34px; height:2px; background:var(--accent); opacity:0.5;
  right:0; left:auto;
}
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit:nth-child(even)::after{
  left:0; right:auto;
}
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit::before{
  /* ✓ čvor koji sjedi NA stablu */
  content:"✓"; position:absolute; top:16px; transform:none;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:800; font-size:0.95rem; line-height:1;
  color:var(--accent-contrast); background:var(--accent);
  box-shadow:0 4px 12px rgba(15,191,143,0.32), 0 0 0 5px var(--bg-alt);
  right:-17px; left:auto;
}
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit:nth-child(even)::before{
  left:-17px; right:auto;
}
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit:hover{
  transform:none; box-shadow:none; border-color:transparent;
}
.benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit:hover::before{ transform:none; }
/* Na telefonu drvo se sklapa u jednostavno lijevo stablo (sve grane desno). */
@media (max-width:719px){
  .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli)::before{ left:19px; }
  .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit,
  .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit:nth-child(even){
    width:100%; margin-left:0; padding:16px 6px 16px 54px; text-align:left;
  }
  .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit::before,
  .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit:nth-child(even)::before{
    left:2px; right:auto;
  }
  .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit::after,
  .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit:nth-child(even)::after{
    left:36px; right:auto; width:16px;
  }
}

/* ---------- Srodni standardi ---------- */
.related { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.related a { border:1.5px solid var(--steel); color:var(--steel); text-decoration:none; padding:10px 18px;
  border-radius:99px; font-size:0.9rem; font-weight:700; background:var(--surface); transition:all .15s ease; }
/* Ispuna ide na fiksni mint (--seal) sa tamnim natpisom, kao i sva ostala mint dugmad:
   --steel je u tamnoj temi svijetli mint, pa je bijeli natpis na njemu davao 2.37:1. */
.related a:hover { background:var(--seal); border-color:var(--seal); color:var(--on-seal);
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,191,143,0.30); }

/* ---------- FAQ ---------- */
.faq details { border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:12px; padding:0 20px; }
.faq summary { cursor:pointer; font-weight:700; padding:16px 0; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:12px; font-family:var(--display); font-size:0.98rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.3rem; color:var(--seal); flex-shrink:0; }
.faq details[open] summary::after { content:"–"; }
.faq details p { padding-bottom:18px; color:var(--muted); font-size:0.95rem; }

/* ---------- SEO sertifikat blok ----------
   Sve lijevo poravnato, dosljedno (naslov, pasusi, expandable) — miješanje centriranog naslova
   i punog-reda (justify) pasusa ispod njega je stvaralo utisak da se kutija "cima" između dva
   različita poravnanja. Jedno poravnanje za cijeli blok je stabilnije i čitljivije. */
/* Cijeli blok je jedna kolona. Ranije su h2, p, .std-compare i .sc-more imali svako svoje
   ograničenje širine — a .sc-more još i margin:auto, pa je bio centriran dok je ostalo bilo
   lijevo poravnato. Zbog toga je na desktopu dio bloka izgledao pomjereno udesno. Sada jedno
   pravilo drži svu djecu u istoj koloni, pa se ivice ne mogu razići. */
.seo-cert { background:var(--surface-alt); border:1px dashed var(--line); border-radius:14px;
  padding:26px 28px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.seo-cert > * { width:100%; max-width:820px; margin-left:auto; margin-right:auto; }
/* Naslov je centriran kao u svakoj drugoj sekciji (uz istu animiranu liniju ispod, koja dolazi
   iz section > .wrap > div > h2). Ranije je ovdje bio prisilno lijevo poravnat, pa je linija
   ostajala u sredini a tekst uz lijevu ivicu. Pasusi nasljeđuju justify kao ostatak sajta. */
.seo-cert h2 { font-size:1.35rem; margin:0; }
.seo-cert p { color:var(--muted); font-size:0.94rem; margin:0; }
.seo-cert .sc-more summary { text-align:left; }

/* ---------- Cjenovnik posebnih usluga ---------- */
.pricelist { display:flex; flex-direction:column; gap:12px; max-width:900px; margin-left:auto; margin-right:auto; }
.price-row { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 24px;
  transition:transform .2s ease, box-shadow .2s ease; }
.price-row:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,46,44,0.08); }
.price-row h3 { margin-bottom:4px; font-size:1.03rem; }
.price-row p { font-size:0.9rem; color:var(--muted); max-width:560px; margin:0; }
.price-tag { flex-shrink:0; font-family:var(--display); font-weight:700; font-size:0.88rem; color:var(--accent-label);
  background:rgba(15,191,143,0.1); padding:8px 16px; border-radius:99px; white-space:nowrap; }
@media (max-width:600px){ .price-row { flex-direction:column; align-items:flex-start; } }

/* ---------- Poređenje oznaka: svijet vs. Crna Gora ----------
   Grid umjesto flex: garantuje da obje kolone budu TAČNO iste širine (1fr/1fr), bez obzira na to
   da li je tekst "ISO 50001:2018" kraći od "MEST EN ISO 50001:2018" — flex je ranije dozvoljavao
   da duži, neprelomljivi tekst raširi svoju kolonu (min-width:auto kvaka), pa je izgledalo nesrazmjerno. */
/* Poređenje oznaka: jedan panel podijeljen na dvije polovine, sa "=" trakom po sredini —
   umjesto tri odvojene kartice koje su se razilazile po širini. Širinu nasljeđuje od
   .seo-cert > *, pa je uvijek u ravni sa naslovom i tekstom. */
.std-compare { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0;
  margin:0; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; }
.sc-item { min-width:0; padding:18px 22px; }
.sc-tag { display:block; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);
  font-weight:700; margin-bottom:6px; }
.sc-item strong { font-family:var(--display); font-size:1.12rem; color:var(--heading); word-break:break-word; }
.sc-eq { display:flex; align-items:center; justify-content:center; width:46px; flex-shrink:0;
  font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--accent);
  background:var(--note-bg); border-left:1px solid var(--line); border-right:1px solid var(--line); }
@media (max-width:560px){
  .std-compare { grid-template-columns:1fr; }
  .sc-eq { width:auto; padding:5px 0; transform:none; margin:0;
    border-left:0; border-right:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
}
/* Vidljivo samo čitačima ekrana (npr. <caption> tabele koji ne treba da se prikazuje). */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Tabela nacionalnih oznaka istog standarda po zemljama. Omotač skroluje vodoravno na uskim
   ekranima da tabela nikad ne razvuče cijelu stranicu u stranu. */
.desig-wrap { margin:18px 0 6px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); overflow:hidden; }
/* Zvanična oznaka na vrhu tabele — ostaje fiksna dok tabela ispod skroluje bočno. */
.desig-head { display:flex; align-items:center; gap:10px; margin:0; padding:12px 14px;
  background:var(--note-bg); border-bottom:1px solid var(--note-border);
  font-family:var(--display); font-weight:700; font-size:0.88rem; line-height:1.35;
  color:var(--note-text); }
.desig-seal { flex:0 0 auto; width:26px; height:26px; color:var(--accent); }
.desig-seal svg { display:block; width:100%; height:100%; }
.desig-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Izbor standarda — više njih se može prikazati istovremeno, svaki dodaje svoju kolonu. */
.desig-pick { border:0; margin:0; padding:11px 14px; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:7px 9px; }
.desig-pick legend { float:left; width:100%; padding:0; margin:0 0 8px; font-size:0.76rem;
  letter-spacing:0.05em; text-transform:uppercase; font-weight:700; color:var(--muted); }
.desig-pick label { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:0.82rem; line-height:1; color:var(--text); background:var(--surface-alt);
  border:1px solid var(--line); border-radius:999px; padding:7px 12px;
  transition:border-color .18s ease, background .18s ease, color .18s ease; }
.desig-pick label:hover { border-color:var(--accent); }
.desig-pick input { accent-color:var(--accent); margin:0; width:14px; height:14px; }
.desig-pick label:has(input:checked) { background:var(--note-bg); border-color:var(--note-border);
  color:var(--note-text); font-weight:600; }
.desig-pick input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Sakrivanje kolone standarda koji trenutno nije izabran. */
.desig-table .is-off { display:none; }
/* Oznaka mora ostati u jednom redu — inače se pri više izabranih standarda "MEST EN ISO 9001"
   lomi u tri reda i postaje nečitljivo. Tabela u tom slučaju skroluje bočno unutar svog okvira. */
.desig-table th[data-c], .desig-table td[data-c] { white-space:nowrap; }
.desig-note { margin:12px 0 0; font-size:0.86rem; line-height:1.6; color:var(--muted); }
/* ---------- Pragovi i rokovi (.thr) ----------
   Iznos je ono zbog cega se ova tabela cita, pa stoji sam, veliki, u svojoj koloni.
   Na uskim ekranima kolona pada ispod naslova umjesto da se tekst gnjeci. */
.thr { display:grid; gap:0; margin:22px 0 6px; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; background:var(--surface); }
.thr-row { display:grid; grid-template-columns:170px 1fr; gap:0; align-items:stretch; }
.thr-row + .thr-row { border-top:1px solid var(--line); }
.thr-key { padding:18px 20px; background:var(--surface-alt); display:flex; flex-direction:column;
  justify-content:center; gap:4px; border-right:1px solid var(--line); }
.thr-key b { font-family:var(--display); font-size:1.24rem; line-height:1.1; color:var(--accent); }
.thr-key span { font-size:0.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  font-weight:700; }
.thr-val { padding:18px 20px; font-size:0.93rem; line-height:1.65; color:var(--text); }
.thr-val strong { color:var(--heading); }
.thr-val em { font-style:normal; display:block; font-family:var(--display); font-size:0.98rem;
  color:var(--heading); margin-bottom:4px; }
@media (max-width:640px){
  .thr-row { grid-template-columns:1fr; }
  .thr-key { border-right:0; border-bottom:1px solid var(--line); flex-direction:row; align-items:baseline; gap:10px; }
}

/* ---------- Ko nadzire koga (.sup) ----------
   Dvokolonski spisak: organ lijevo, obveznici desno. Bez kartica — ovo se cita
   kao tabela, a ne pregleda kao mreza. */
.sup { margin:20px 0 6px; border-top:1px solid var(--line); }
.sup-row { display:grid; grid-template-columns:minmax(200px,34%) 1fr; gap:0 24px;
  padding:14px 2px; border-bottom:1px solid var(--line); align-items:baseline; }
.sup-row strong { font-family:var(--display); font-size:0.98rem; color:var(--heading); }
.sup-row span { font-size:0.9rem; line-height:1.6; color:var(--muted); }
@media (max-width:640px){
  .sup-row { grid-template-columns:1fr; gap:4px; }
}

/* ---------- Kontakt po zemljama (.ctc) ----------
   Jedan red = jedna zemlja: kako se zove, na koji broj se poziva i preko koje
   aplikacije se pise. Dugmad nose boju svoje aplikacije da se prepoznaju bez citanja. */
.ctc { margin:22px 0 6px; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--surface); }
.ctc-row { display:grid; grid-template-columns:minmax(150px,22%) 1fr auto; gap:12px 20px;
  align-items:center; padding:16px 20px; }
.ctc-row + .ctc-row { border-top:1px solid var(--line); }
.ctc-row > strong { font-family:var(--display); font-size:1rem; color:var(--heading); }
.ctc-num { display:flex; flex-direction:column; gap:2px; font-size:0.92rem; }
.ctc-num a { color:var(--heading); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line); }
.ctc-num a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.ctc-num small { color:var(--muted); font-size:0.78rem; }
.ctc-apps { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ch-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px;
  font-size:0.84rem; font-weight:700; text-decoration:none; color:#fff; white-space:nowrap;
  transition:transform .15s var(--ease-out), filter .15s var(--ease-out); }
/* Bez filter:brightness — posvjetljavanje je Telegramu obaralo kontrast na 4.51. Oreol radi isti
   posao, a boja podloge ostaje tacno ona koja je izmjerena. */
.ch-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.28); }
.ch-btn svg { width:17px; height:17px; flex:none; }
.ch-wa { background:var(--wa); } .ch-vb { background:var(--vb); } .ch-tg { background:var(--tg); }
.ch-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (max-width:720px){
  .ctc-row { grid-template-columns:1fr; gap:8px; }
  .ctc-apps { justify-content:flex-start; }
}
/* Kancelarije: navedene, ali bez pompe — vecina posla ide online i kod klijenta. */
.off-list { display:flex; flex-wrap:wrap; gap:10px 26px; margin:14px 0 0; padding:0; list-style:none; }
.off-list li { font-size:0.92rem; color:var(--text); }
.off-list b { font-family:var(--display); color:var(--heading); font-weight:700; }

/* ---------- Termini obuka (.trn) ----------
   Datum je ono zbog cega se ovaj spisak gleda, pa stoji kao blok lijevo; red je
   klikabilan cijelom sirinom. Namjerno se ne oslanja na .benefits mrezu, da se
   dvije susjedne sekcije na pocetnoj ne bi ponavljale. */
.trn { display:flex; flex-direction:column; gap:10px; margin:22px 0 6px; }
.trn-row { display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:18px;
  padding:14px 18px 14px 14px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); text-decoration:none; color:inherit;
  transition:border-color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.trn-row:hover { border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(15,46,44,0.10); }
.trn-date { display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 6px; border-radius:11px; background:var(--note-bg); border:1px solid var(--note-border); }
.trn-date b { font-family:var(--display); font-size:1.6rem; line-height:1; color:var(--accent); }
.trn-date span { font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  margin-top:3px; font-weight:700; }
.trn-body { min-width:0; }
.trn-tag { display:inline-block; font-size:0.72rem; letter-spacing:.05em; text-transform:uppercase;
  font-weight:700; color:var(--muted); }
.trn-body strong { display:block; font-family:var(--display); font-size:1.02rem; color:var(--heading);
  margin:3px 0 2px; }
.trn-meta { display:block; font-size:0.86rem; color:var(--muted); }
/* Nivoi unutar termina: broj dana zavisi od nivoa, pa nivo i trajanje idu zajedno. */
.trn-lvl { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.trn-lvl span { font-size:0.78rem; line-height:1; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-alt); color:var(--text); }
.trn-lvl span b { font-weight:700; color:var(--heading); }
.trn-lvl span em { font-style:normal; color:var(--accent); font-weight:700; }
.trn-cta { font-weight:700; font-size:0.9rem; color:var(--accent); white-space:nowrap; }
.trn-row.is-top { border-color:var(--note-border); background:var(--surface-alt); }
.trn-badge { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:var(--accent); color:var(--accent-contrast); font-size:0.68rem; letter-spacing:.04em;
  text-transform:uppercase; font-weight:700; vertical-align:middle; }
.trn-note { margin:14px 0 0; font-size:0.86rem; line-height:1.6; color:var(--muted); }
/* koliko je ostalo do termina (site.js) */
.trn-date .trn-za { display:block; margin-top:6px; font-size:0.64rem; line-height:1.25; font-weight:700; letter-spacing:.03em; color:var(--muted); text-align:center; white-space:normal; }
.trn-date .trn-za.je-blizu, .trn-date .trn-za.je-u-toku { color:var(--accent); }
.trn-mjesec { margin:16px 0 0; font:700 0.78rem/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.trn-mjesec:first-child { margin-top:4px; }
.trn-mjesec[hidden], .trn-row[hidden], .trn[hidden], [data-trn-sljedeca][hidden], [data-trn-filter][hidden] { display:none; }
.trn-filter { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.trn-filter button { font:600 0.84rem/1.2 var(--sans); padding:8px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--note-border); background:var(--note-bg); color:var(--heading); }
.trn-filter button:hover { border-color:var(--accent-label); }
.trn-filter button[aria-pressed="true"] { background:var(--seal); color:var(--on-seal); border-color:transparent; }
.trn-filter button:focus-visible { outline:2px solid var(--accent-label); outline-offset:2px; }
/* obuka kod klijenta i online uživo — dvije kartice (stranica Obuke) */
.trn-formati-naslov { margin:34px 0 0; font-size:1.15rem; }
.trn-formati { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin:16px 0 4px; }
.trn-format { display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px; border-radius:18px;
  background:var(--surface); border:1px solid var(--line); }
.trn-format h3 { margin:2px 0 0; font-size:1.12rem; }
.trn-format p { margin:0; color:var(--text); }
.trn-format ul { margin:4px 0 8px; padding-left:1.1em; color:var(--text); }
.trn-format li + li { margin-top:4px; }
.trn-format .btn { align-self:flex-start; margin-top:auto; }
.trn-format-ikona { width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--note-bg); border:1px solid var(--note-border); color:var(--accent); }
.trn-format-ikona svg { width:24px; height:24px; }
@media (max-width:760px){ .trn-formati { grid-template-columns:1fr; } }
/* kartica „Sljedeća obuka“ sa brojačem */
.trn-sljedeca { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:22px 30px; align-items:center;
  margin:24px 0 8px; padding:24px 26px; border-radius:20px; background:var(--ink); color:#fff;
  border:1px solid var(--line); box-shadow:0 24px 60px -30px rgba(0,0,0,0.6); }
.trn-s-tekst { display:flex; flex-direction:column; gap:3px; min-width:0; }
.trn-s-nad { font-size:0.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-on-dark); }
.trn-s-naslov { font-family:var(--display); font-size:1.55rem; line-height:1.2; color:#fff; margin-top:2px; }
.trn-s-naziv { color:var(--on-dark-strong); font-size:1rem; }
.trn-s-meta { color:var(--on-dark-soft); font-size:0.9rem; }
.trn-sljedeca .trn-lvl { margin-top:10px; }
.trn-sljedeca .trn-lvl span { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.16); color:var(--on-dark-strong); }
.trn-sljedeca .trn-lvl span b { color:#fff; }
.trn-sljedeca .trn-lvl span em { color:var(--accent-on-dark); }
.trn-s-brojac { display:flex; flex-direction:column; gap:10px; }
.trn-s-pocinje { font-size:0.8rem; font-weight:600; letter-spacing:.04em; color:var(--on-dark-soft); }
.trn-s-polja { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.trn-s-polja[hidden] { display:none; }
.trn-s-polja > span { display:flex; flex-direction:column; align-items:center; padding:12px 6px 10px; border-radius:14px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13); }
.trn-s-polja b { font-family:var(--display); font-size:2.1rem; line-height:1; color:var(--accent-on-dark); font-variant-numeric:tabular-nums; }
.trn-s-polja i { font-style:normal; margin-top:5px; font-size:0.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-soft); }
.trn-s-dugmad { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:4px; }
.trn-s-svi { color:var(--on-dark-strong); font-weight:600; font-size:0.86rem; text-underline-offset:3px; }
.trn-s-svi:hover { color:#fff; }
@media (max-width:760px){
  .trn-sljedeca { grid-template-columns:1fr; padding:20px 18px; }
  .trn-s-naslov { font-size:1.3rem; }
  .trn-s-polja b { font-size:1.75rem; }
}
@media (max-width:640px){
  .trn-row { grid-template-columns:64px 1fr; gap:12px; }
  .trn-date b { font-size:1.3rem; }
  .trn-cta { grid-column:2; justify-self:start; }
}
/* ---------- Poredjenje ispravnog i pogresno nacrtanog CE znaka ----------
   Dva panela iste sirine; znak je SVG u zvanicnim proporcijama (oba slova su
   isjecci istog kruga), pa ostaje ostar na svakoj velicini i prati temu. */
.mark-compare { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;
  margin:22px 0 6px; }
.mk { margin:0; padding:20px 22px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); display:flex; flex-direction:column; align-items:center; text-align:center; }
.mk .ce-mark { width:150px; height:auto; display:block; color:var(--heading); }
.mk .ce-mark path { fill:currentColor; }
.mk figcaption { margin-top:14px; font-size:0.9rem; line-height:1.6; color:var(--muted); }
.mk figcaption strong { display:block; font-family:var(--display); font-size:0.98rem;
  color:var(--heading); margin-bottom:5px; }
.mk--ok { border-color:var(--note-border); }
.mk--ok figcaption strong { color:var(--accent); }
.mk--bad { border-color:var(--warn-border); background:var(--warn-bg); }
.mk--bad .ce-mark { color:var(--warn-text); }
.mk--bad figcaption, .mk--bad figcaption strong { color:var(--warn-text); }
/* Crveno uokviren primjer greške sa tendera (traženo vs dostavljeno). */
.warn-note { background:var(--warn-bg); border:1px solid var(--warn-border);
  border-left:5px solid #E86A5A; border-radius:12px; padding:18px 22px; margin:22px 0;
  color:var(--warn-text); font-size:0.94rem; line-height:1.65; }
.warn-note > strong:first-child { display:block; font-family:var(--display); font-size:1rem;
  margin-bottom:8px; color:var(--warn-text); }
.warn-note p { color:var(--warn-text) !important; margin:10px 0 0; }
.warn-note .std-compare { margin:14px 0; }
@media (max-width:560px){ .desig-pick label { font-size:0.78rem; padding:6px 10px; } }
.desig-table { border-collapse:collapse; width:100%; min-width:520px; font-size:0.88rem; text-align:left; }
.desig-table th, .desig-table td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
/* Zaglavlja se smiju prelomiti u dva reda — tako cijela tabela staje u širinu sadržaja na desktopu
   i skrol ostaje samo za uske ekrane. */
.desig-table thead th { font-family:var(--display); font-size:0.74rem; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--muted); background:var(--surface-alt); line-height:1.35; }
.desig-table tbody tr:last-child td { border-bottom:0; }
.desig-table td:first-child { white-space:nowrap; color:var(--muted); }
.desig-table td strong { color:var(--heading); font-weight:700; }
/* Dva reda su istaknuta iz različitih razloga: zvanična međunarodna (ISO) oznaka neutralnim
   zatamnjenjem jer je ona ta koju preporučujemo u tenderu, a zemlja čitaoca mint bojom. */
.desig-table tbody tr.is-intl td { background:var(--row-intl-bg); }
.desig-table tbody tr.is-intl td strong { color:var(--heading); }
.desig-table tbody tr.is-intl td:first-child { color:var(--heading); font-weight:600; }
.desig-table tbody tr.is-home td { background:var(--note-bg); }
.desig-table tbody tr.is-home td strong { color:var(--note-text); }
/* margin:auto je ovdje ranije centrirao kutiju dok je ostatak bloka bio lijevo poravnat —
   širina i poravnanje sada dolaze iz .seo-cert > *. */
.sc-more { border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:0 20px; margin:0; }
.sc-more summary { cursor:pointer; font-weight:700; padding:14px 0; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:12px; font-family:var(--display); font-size:0.94rem; color:var(--heading); }
.sc-more summary::-webkit-details-marker { display:none; }
.sc-more summary::after { content:"+"; font-size:1.2rem; color:var(--seal); flex-shrink:0; }
.sc-more[open] summary::after { content:"–"; }
.sc-more p { padding-bottom:16px; color:var(--muted); font-size:0.92rem; }

/* ---------- Mikro-interakcije ----------
   Namjerno razdvojeno po tome šta element JESTE, a ne po tome što svemu treba pokret:
   • klikabilno (summary, red tabele, pilula) → hover/focus jer to je stvarni afordans;
   • kartica u nizu → isto suptilno podizanje kao .cert-stage/.news-item (-3px);
   • informativni panel (law-box, guidance-box, warn-note, training-cta) NE dobija podizanje —
     na neklikabilnom bloku to lažno signalizira „klikni me". Njima život daje ulazna
     reveal animacija, koja se dodjeljuje iz site.js.
   Animiraju se samo transform/opacity/background — jedino to ne pravi reflow. */

/* Interaktivno: FAQ i „Zašto se oznake razlikuju" harmonika */
.faq summary, .sc-more summary { transition:color .18s var(--ease-out); }
.faq summary:hover, .sc-more summary:hover { color:var(--accent); }
/* Marker je „+" / „–" glif, a ne strelica — rotacija na njemu ne bi bila vidljiva. Vidljivo je
   blago naraštanje pod mišem, koje potvrđuje da je cio red klikabilan. */
.faq summary::after, .sc-more summary::after {
  transition:transform .2s var(--ease-out); display:inline-block; }
.faq summary:hover::after, .sc-more summary:hover::after { transform:scale(1.25); }
.faq details { transition:border-color .2s var(--ease-out); }
.faq details[open], .faq details:hover { border-color:rgba(15,191,143,0.35); }
.faq summary:focus-visible, .sc-more summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* Interaktivno: red tabele oznaka — pomaže da se pogled vodi kroz široku tabelu */
.desig-table tbody tr td { transition:background-color .16s var(--ease-out); }
.desig-table tbody tr:hover td { background:var(--surface-alt); }
.desig-table tbody tr.is-intl:hover td { background:var(--row-intl-bg); }
.desig-table tbody tr.is-home:hover td { background:var(--note-bg); }

/* .fstep NAMJERNO bez hovera: on je reveal element (.rv-u iz site.js), pa mu transition traje
   0.6s — hover bi se vukao pola sekunde i borio se sa ulaznom animacijom. Fazama je dovoljno
   pojavljivanje pri skrolu; hover ovdje ne nosi nikakvu informaciju. */

/* Poređenje oznaka: bez podizanja (dio je jednog panela), samo topliji ton */
.sc-item { transition:background-color .18s var(--ease-out); }
.std-compare:hover .sc-item { background:var(--surface-alt); }

/* Klauzule: ikona klauzule blago naraste kad se čita red */
.step .clause-icon { transition:transform .22s var(--ease-out); transform-origin:center; }
.step:hover .clause-icon { transform:scale(1.12); }

/* Dugmad u .std-cta: vidljiv fokus za tastaturu (hover već postoji na .btn) */
.std-cta .btn:focus-visible, .desig-pick label:focus-within {
  outline:2px solid var(--accent); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .faq summary, .sc-more summary, .faq summary::after, .sc-more summary::after,
  .faq details, .desig-table tbody tr td, .sc-item, .step .clause-icon { transition:none; }
  .step:hover .clause-icon,
  .faq summary:hover::after, .sc-more summary:hover::after { transform:none; }
}

/* ---------- Dijagram toka procesa (HACCP, korak 4) ----------
   Vertikalna šina sa čvorovima: čitljivo na telefonu bez bočnog skrola, a svaki korak nosi
   oznaku PRP / oPRP / CCP i, gdje je CCP, mjerljivu kritičnu granicu. Namjerno NIJE BPMN —
   klijent (ugostitelj, pekar) ne čita gateway-e i pool-ove. */
.hflow { margin:22px 0 0; }
.hflow-steps { list-style:none; margin:0; padding:0; position:relative; }
/* Spojna linija kroz sve čvorove; ne ide ispod posljednjeg. */
.hflow-steps::before { content:""; position:absolute; left:19px; top:18px; bottom:26px;
  width:2px; background:linear-gradient(var(--accent), var(--line)); opacity:0.5; }
.fl-step { position:relative; display:grid; grid-template-columns:40px 1fr; gap:16px;
  padding:0 0 20px; }
.fl-step:last-child { padding-bottom:0; }
.fl-num { grid-row:1 / span 3; width:40px; height:40px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; font-family:var(--display);
  font-weight:700; font-size:0.95rem; background:var(--surface); color:var(--muted);
  border:2px solid var(--line); position:relative; z-index:1; }
.fl-step.is-ccp .fl-num { background:var(--warn-bg); color:var(--warn-text); border-color:#E86A5A; }
.fl-body { min-width:0; }
.fl-body strong { display:block; font-family:var(--display); font-size:1.02rem; color:var(--heading); }
.fl-body p { margin:4px 0 0; font-size:0.9rem; color:var(--muted); text-align:left; }
.fl-tag { display:inline-block; margin-top:8px; font-size:0.7rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; padding:4px 10px; border-radius:99px; }
.fl-prp { background:var(--surface-alt); color:var(--muted); border:1px solid var(--line); }
.fl-ccp { background:var(--warn-bg); color:var(--warn-text); border:1px solid var(--warn-border); }
/* Kritična granica — mjerljiva vrijednost koja razdvaja bezbjedno od nebezbjednog. */
.fl-limit { margin:10px 0 0; padding:10px 14px; border-radius:10px; font-size:0.88rem;
  background:var(--warn-bg); border:1px solid var(--warn-border); border-left:4px solid #E86A5A;
  color:var(--warn-text); }
.fl-limit strong { display:inline; font-family:var(--sans); font-size:inherit; color:inherit; }
/* oPRP nema "kritičnu granicu" — taj termin pripada isključivo CCP-u. Za preduslovni program
   se koristi kriterijum djelovanja, pa i vizuelno mora stajati drugačije od crvene CCP granice. */
.fl-limit.fl-op { background:var(--note-bg); border-color:var(--note-border);
  border-left-color:var(--accent); color:var(--note-text); }
.hflow-note { margin:18px 0 0; font-size:0.86rem; line-height:1.6; color:var(--muted);
  padding:14px 16px; background:var(--surface-alt); border:1px solid var(--line); border-radius:10px; }
@media (max-width:560px){
  .fl-step { grid-template-columns:32px 1fr; gap:12px; }
  .fl-num { width:32px; height:32px; font-size:0.85rem; }
  .hflow-steps::before { left:15px; }
}

/* ---------- Region u kojem radimo ----------
   Gradovi grupisani po zemlji, jer se po zemlji stvarno razlikuje ono što klijenta zanima:
   nacionalna oznaka standarda, akreditaciono tijelo i propis. Namjerno BEZ zasebnih stranica
   po gradu — dvadeset stranica koje se razlikuju samo po imenu grada je doorway obrazac koji
   Google kažnjava; jedna stranica sa stvarnim sadržajem vrijedi više. */
.reg-group { margin:0 0 34px; text-align:center; }
.reg-group + .reg-group { padding-top:30px; border-top:1px solid var(--line); }
.reg-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; margin:0 0 4px;
  justify-content:center; text-align:center; }
.reg-head h3 { margin:0; font-family:var(--display); font-size:1.12rem; color:var(--heading); }
.reg-meta { font-size:0.84rem; color:var(--muted); }
.qb-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.qb-pair > .quote-banner { margin:0; height:100%; }
@media (max-width:900px){ .qb-pair { grid-template-columns:1fr; } }

.reg-cities-lab { margin:16px 0 0; font-size:0.8rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); text-align:center; }
.reg-std { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px auto 0;
  padding:0; list-style:none; max-width:760px; }
.reg-std a { display:inline-block; padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  font-size:0.82rem; color:var(--heading); text-decoration:none; background:var(--surface);
  transition:border-color .18s var(--ease-out), color .18s var(--ease-out); }
.reg-std a:hover, .reg-std a:focus-visible { border-color:var(--accent); color:var(--accent); }
@media (prefers-reduced-motion:reduce){ .reg-std a { transition:none; } }
.reg-intro { max-width:700px; margin:10px auto 0; font-size:0.92rem; line-height:1.65;
  color:var(--muted); text-align:center; }
.reg-meta strong { color:var(--accent); font-weight:700; }
.reg-cities { display:flex; flex-wrap:wrap; gap:9px; margin:12px 0 0; padding:0; list-style:none;
  justify-content:center; }
.reg-cities li { margin:0; }
.reg-city { display:inline-block; padding:8px 15px; border-radius:999px; font-size:0.89rem;
  border:1px solid var(--line); background:var(--surface); color:var(--text); }
.reg-city.is-base { background:var(--note-bg); border-color:var(--note-border);
  color:var(--note-text); font-weight:700; }
/* Kancelarije: ono što stvarno postoji, jasno odvojeno od pokrivenosti terenom. */
.reg-offices { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px;
  margin:0 0 32px; }
.reg-office { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent);
  border-radius:14px; padding:18px 20px; }
.reg-office strong { display:block; font-family:var(--display); color:var(--heading); font-size:1.02rem; }
.reg-office p { margin:5px 0 0; font-size:0.9rem; color:var(--muted); text-align:left; }

/* ---------- Vremenska linija (razvoj standarda) ---------- */
.tl { position:relative; margin-top:20px; }
.tl::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; background:var(--line);
  transform:translateX(-50%); border-radius:99px; }
.tl-item { position:relative; width:calc(50% - 34px); background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; margin-bottom:22px; }
.tl-item:nth-child(odd) { margin-right:auto; }
.tl-item:nth-child(even) { margin-left:auto; }
.tl-item::after { content:""; position:absolute; top:24px; width:14px; height:14px; border-radius:50%;
  background:var(--seal); border:3px solid var(--white); box-shadow:0 0 0 2px var(--seal); }
.tl-item:nth-child(odd)::after { right:-42px; }
.tl-item:nth-child(even)::after { left:-42px; }
.tl-item .yr { font-family:var(--display); font-weight:700; color:var(--accent-label); font-size:1.05rem; }
.tl-item p { font-size:0.9rem; color:var(--muted); margin-top:4px; }
@media (max-width:760px){
  .tl::before { left:10px; }
  .tl-item { width:auto; margin-left:34px !important; margin-right:0 !important; }
  .tl-item::after { left:-31px !important; right:auto !important; }
}

/* ---------- IMS krugovi: centar = zajednicki zahtjevi, standardi okolo ----------
   Nema mix-blend-mode: na tamnoj temi multiply ugasi sve. Preklapanje se vidi
   samo kroz alfa kanal, pa radi jednako u obje teme. */
.venn { position:relative; width:min(100%,400px); aspect-ratio:1; margin:34px auto 14px;
  --hub:170px; --pet:136px; --rad:116px; }
.venn-hub { position:absolute; left:50%; top:50%; width:var(--hub); height:var(--hub);
  margin:calc(var(--hub) / -2) 0 0 calc(var(--hub) / -2); border-radius:50%; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 15px;
  /* Boja centra je fiksna, ne var(--accent): accent se mijenja po temi i u svijetloj
     je kontrast padao na 3.12, pa je potpis od 11px bio necitljiv. Ovako je 8+ u obje. */
  background:#0B564F; color:#fff;
  box-shadow:0 0 0 3px var(--accent), 0 0 0 7px var(--surface), 0 10px 30px rgba(0,0,0,0.20); }
.venn-hub b { font-family:var(--display); font-size:1.5rem; line-height:1; letter-spacing:.01em; }
.venn-hub span { font-size:0.72rem; line-height:1.3; margin-top:6px; color:rgba(255,255,255,0.92); }
.venn .vp { position:absolute; left:50%; top:50%; width:var(--pet); height:var(--pet);
  margin:calc(var(--pet) / -2) 0 0 calc(var(--pet) / -2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--display); font-weight:700; font-size:0.84rem; color:var(--white);
  /* latice su poluprozirne pa im se podloga mijenja s temom i s brojem preklapanja;
     sjenka drzi natpis citljivim bez obzira sta je iza njega */
  text-shadow:0 1px 3px rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.16);
  transform:rotate(var(--a)) translateY(calc(var(--rad) * -1)) rotate(calc(var(--a) * -1)); }
/* Tonovi su spusteni (i alfa podignuta) da bijeli natpis ima 4.7:1 i kad je latica
   sama na bijeloj podlozi — preklapanja idu samo na tamnije, pa su uvijek dobra. */
.venn .vp:nth-child(2) { background:rgba(11,104,97,0.88); }
.venn .vp:nth-child(3) { background:rgba(10,112,78,0.90); }
.venn .vp:nth-child(4) { background:rgba(9,88,84,0.88); }
.venn .vp:nth-child(5) { background:rgba(20,92,74,0.90); }
.venn .vp:nth-child(6) { background:rgba(15,46,44,0.88); }
.venn .vp:nth-child(7) { background:rgba(14,99,114,0.88); }
@media (max-width:620px){ .venn { width:min(100%,320px); --hub:136px; --pet:108px; --rad:93px; }
  .venn .vp { font-size:0.72rem; } .venn-hub b { font-size:1.2rem; } .venn-hub span { font-size:0.62rem; } }
@media (max-width:380px){ .venn { width:270px; --hub:116px; --pet:92px; --rad:79px; }
  .venn .vp { font-size:0.64rem; } }

/* ---------- "SINCE 2014" — izdvojena oznaka na stranici O nama ---------- */
.od-kada { display:inline-flex; align-items:center; gap:16px; margin:4px 0 22px;
  padding:14px 22px 14px 16px; border:1px solid var(--line); border-left:4px solid var(--seal);
  border-radius:14px; background:var(--surface); }
.od-kada-broj { font-family:var(--display); font-weight:700; font-size:2.5rem; line-height:1;
  color:var(--accent); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.od-kada-txt { display:flex; flex-direction:column; font-size:0.86rem; color:var(--muted); line-height:1.45; }
.od-kada-txt strong { font-family:var(--display); font-size:0.76rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent-label); margin-bottom:3px; }
@media (max-width:480px){ .od-kada { width:100%; } .od-kada-broj { font-size:2.1rem; } }

/* Pravna napomena — namjerno tiša od ostatka teksta: podatak koji mora da stoji,
   ali nije poruka stranice. */
.pravna-napomena { margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  font-size:0.83rem; color:var(--muted); line-height:1.65; }
.pravna-napomena strong { color:var(--text); font-weight:600; }

/* ---------- Reference platforme ---------- */
.ref-firme { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(215px,1fr));
  gap:10px; margin:22px 0 0; padding:0; }
.ref-firme li { border:1px solid var(--line); border-left:3px solid var(--seal); border-radius:10px;
  padding:11px 14px; background:var(--surface); }
.ref-firme strong { display:block; font-family:var(--display); font-size:0.9rem; color:var(--heading); }
.ref-firme span { display:block; font-size:0.78rem; color:var(--muted); margin-top:2px; }
.ref-izjave { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px; margin-top:26px; }
.ref-izjava { margin:0; border:1px solid var(--line); border-radius:15px; padding:22px 24px;
  background:var(--surface); position:relative; }
.ref-izjava::before { content:"\201C"; position:absolute; top:2px; left:16px; font-family:var(--display);
  font-size:3.4rem; line-height:1; color:var(--seal); opacity:0.28; }
.ref-izjava blockquote { margin:0; }
.ref-izjava p { font-size:0.89rem; line-height:1.65; color:var(--text); text-align:left; }
.ref-izjava figcaption { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.ref-izjava figcaption strong { display:block; font-family:var(--display); font-size:0.88rem; color:var(--heading); }
.ref-izjava figcaption span { display:block; font-size:0.79rem; color:var(--muted); margin-top:1px; }
.ref-izvor { margin-top:20px; font-size:0.82rem; color:var(--muted); line-height:1.6; }
.ref-izvor a { color:var(--accent); }

/* ---------- Spisak modula platforme ----------
   Obicna .benefits je vertikalno drvo — za deset modula to je metar i po skrolovanja i cita
   se kao redosljed koraka, sto moduli nisu. Ovdje je obicna mreza kartica. */
.benefits.moduli { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:14px; margin-top:16px; }
.benefits.moduli > .benefit { max-width:none; width:auto; margin:0; padding:16px 18px;
  border:1px solid var(--line); border-radius:13px; background:var(--surface); text-align:left;
  transition:border-color .18s ease, transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.benefits.moduli > .benefit strong { display:block; font-family:var(--display); font-size:0.94rem;
  color:var(--heading); margin-bottom:5px; }
.benefits.moduli > .benefit p { font-size:0.85rem; color:var(--muted); line-height:1.55;
  text-align:left; hyphens:none; }
/* Veliki broj u pozadini kartice ima smisla kod pet-sest prednosti; kod deset modula je
   samo suma. Isto i gornja mint traka na hover. */
.benefits.moduli > .benefit::after { content:none; }
.benefits.moduli > .benefit::before { content:none; }
.benefits.moduli > .benefit:hover { border-color:var(--seal); transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(15,191,143,0.14); }

/* ---------- Snimak ekrana platforme ----------
   Svijetla slika na svijetloj podlozi se stapa, pa dobija okvir i sjenku; u tamnoj temi se
   blago prigusi da ne bode oci. */
.dna-slika { margin:26px 0 6px; }
.dna-slika { position:relative; }
.dna-slika img { display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid var(--line); box-shadow:var(--shadow-soft); background:var(--bg); }
/* Navlaka u boji sajta preko snimka ekrana — mnozenje zadrzava bijele povrsine bijelim, a
   tonira srednje tonove, pa se tudji plavi UI uklapa u mint paletu. Jacina se mijenja na
   jednom mjestu: --navlaka. */
.dna-slika { --navlaka:0.25; }
.dna-slika::after { content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:var(--seal); opacity:var(--navlaka); mix-blend-mode:multiply; }
:root:not([data-theme="light"]) .dna-slika img { filter:brightness(0.92) saturate(0.95); }
.dna-slika figcaption { margin-top:10px; font-size:0.83rem; color:var(--muted); line-height:1.6; }
.dna-slika figcaption span { display:block; font-size:0.78rem; opacity:0.8; margin-top:2px; }
.dna-h3 { margin-top:30px; font-size:1.05rem; }

/* ---------- Mapa standarda ----------
   Pregled svega sto sertifikujemo, grupisan isto kao u meniju — ko dodje na stranicu o
   sertifikaciji odmah vidi opseg i moze da skoci na konkretan standard. Cip nosi kod
   podebljano i kratak opis ispod, isto kao stavke u meniju. */
/* Grupe idu jedna ispod druge preko cijele sirine, a cipovi se unutar grupe sami slazu u
   red — grupe imaju 4 do 10 standarda, pa bi dvije kolone kartica davale rupe i kartice
   vrlo razlicite visine jednu pored druge. */
.std-map { display:grid; gap:16px; margin-top:26px; }
.sm-grupa { border:1px solid var(--line); border-radius:16px; padding:20px 20px 18px;
  background:var(--surface); position:relative; overflow:hidden; }
.sm-grupa::before { content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg, var(--seal), transparent); }
.sm-grupa h3 { display:flex; align-items:center; gap:10px; font-size:0.98rem; margin:0 0 14px; }
.sm-ikona { width:32px; height:32px; flex:none; border-radius:9px; display:inline-flex;
  align-items:center; justify-content:center; background:rgba(15,191,143,0.12);
  color:var(--accent-label); }
.sm-ikona svg { width:18px; height:18px; }
.sm-broj { margin-left:auto; font-family:var(--sans); font-size:0.72rem; font-weight:700;
  color:var(--muted); background:var(--bg-alt); border:1px solid var(--line);
  padding:3px 9px; border-radius:99px; }
.sm-cips { display:grid; grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:9px; }
.sm-cips a { display:block; text-decoration:none; padding:10px 12px; border-radius:11px;
  border:1px solid var(--line); background:var(--bg);
  transition:border-color .18s ease, transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.sm-cips a b { display:block; font-family:var(--display); font-size:0.87rem; font-weight:700;
  color:var(--heading); letter-spacing:0; }
.sm-cips a span { display:block; font-size:0.75rem; line-height:1.35; color:var(--muted); margin-top:2px; }
.sm-cips a:hover, .sm-cips a:focus-visible { border-color:var(--seal); transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(15,191,143,0.16); }
.sm-cips a:hover b, .sm-cips a:focus-visible b { color:var(--accent); }
.sm-podnozje { margin-top:20px; font-size:0.88rem; color:var(--muted); }
.sm-podnozje a { color:var(--accent); font-weight:600; }

/* ---------- Kontakt / forma ---------- */
.contact-band { background:var(--ink); color:var(--white); padding:66px 0; position:relative; overflow:hidden;
  background-image:radial-gradient(700px 360px at 100% 0%, rgba(14,138,128,0.3), transparent 60%); }
/* Globus se sa fotografskih heroja seli nize — u tamnu kontakt traku na dnu iste stranice.
   Tamo ima prazan prostor i ni sa cim se ne bori, a stranica zadrzava prepoznatljiv motiv.
   :has() gadja samo stranice koje imaju fotografiju u heroju; gdje ga pregledac ne podrzava,
   traka ostaje kakva je i bila. Kontakt traka je tamna u obije teme, pa ide tamna verzija crteza. */
body:has(.hero.sa-fotkom) .contact-band::after { content:""; position:absolute; z-index:1; pointer-events:none;
  left:-190px; bottom:-240px; width:620px; height:620px;
  background:url("media/globus.svg") no-repeat center/contain; opacity:0.5;
  -webkit-mask-image:radial-gradient(circle at 62% 38%, #000 0%, #000 52%, transparent 78%);
          mask-image:radial-gradient(circle at 62% 38%, #000 0%, #000 52%, transparent 78%); }
@media (max-width:820px){ body:has(.hero.sa-fotkom) .contact-band::after {
  width:420px; height:420px; left:-160px; bottom:-180px; opacity:0.4; } }
.contact-band h2 { color:var(--white); }
.contact-band .intro { color:var(--on-dark-strong); max-width:640px; margin-bottom:30px; margin-left:auto; margin-right:auto;
  text-align:center; }
.contact-band .cform { margin-left:auto; margin-right:auto; }
/* Pitanje iznad forme na kontakt-traci: sjedi na tamnoj podlozi, iznad bijele kartice. */
.contact-band .form-q { max-width:780px; margin:0 auto 14px; text-align:center;
  font-family:var(--display); font-weight:700; font-size:1.06rem; line-height:1.4;
  color:var(--accent-on-dark); }
.cform { background:var(--white); border-radius:16px; padding:30px; display:grid; gap:16px;
  grid-template-columns:1fr 1fr; max-width:780px; box-shadow:0 24px 60px rgba(0,0,0,0.3); }
.cform .full { grid-column:1 / -1; }
/* .cform sjedi unutar .contact-band, koja je UVIJEK tamna traka bez obzira na temu — sama forma
   zadržava fiksnu svijetlu pozadinu u oba režima, pa njena unutrašnja polja/labele koriste
   fiksne (ne theme-aware) boje da ostanu čitljive na toj fiksno svijetloj kartici. */
.cform label { display:block; font-size:0.8rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.cform input, .cform select, .cform textarea { width:100%; padding:12px 14px; border:1.5px solid #DCE7E5;
  border-radius:10px; font-family:var(--sans); font-size:0.96rem; color:#1E3230; background:#F1F8F6; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline:none; border-color:var(--steel);
  background:var(--white); box-shadow:0 0 0 3px rgba(14,138,128,0.18); }
.cform textarea { min-height:120px; resize:vertical; }
.cform button { grid-column:1 / -1; position:relative; isolation:isolate; overflow:hidden; background:var(--seal);
  /* mint je svijetla boja: bijeli natpis na njoj daje 2.37, ispod praga.
     Tamni natpis daje 9.2, a dugme i dalje ostaje mint. */
  color:#06231B; border:none; padding:15px;
  border-radius:10px; font-size:1rem; font-weight:700; font-family:var(--display); cursor:pointer;
  transition:background .15s ease; }
/* Isti kvar kao na .btn-gold: hover je tamnio podlogu ispod tamnog natpisa (2.56:1 u svijetloj
   temi). --seal-hover ga pali umjesto da ga gasi, isti natpis je na 9.55:1. */
.cform button:hover { background:var(--seal-hover); box-shadow:0 8px 20px rgba(15,191,143,0.35); }
.cform .hp { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form-ok { display:none; background:#E6F6EE; border:1px solid #7CC79A; color:#155B36; border-radius:10px;
  padding:16px 20px; margin-bottom:20px; max-width:780px; font-weight:600; }
@media (max-width:640px){ .cform { grid-template-columns:1fr; padding:22px; } }

/* ---------- Prose / law box / AI box ---------- */
.prose { max-width:780px; margin-left:auto; margin-right:auto; }
.prose p { margin-bottom:1em; color:var(--text); }
.prose strong { color:var(--heading); }
.law-box { border:1px solid var(--line); border-left:5px solid var(--seal); background:var(--surface-alt);
  border-radius:12px; padding:24px 26px; margin:26px auto; max-width:780px; }
.law-box h3 { margin-bottom:10px; }
.law-box p { font-size:0.94rem; color:var(--text); margin-bottom:0.8em; }
.law-box p:last-child { margin-bottom:0; }
/* Stranice djelatnosti — kartice propisa u dvije kolone (zdravstvo). */
.propisi-lista { display:grid; gap:18px; margin-top:26px; }
@media (min-width:900px){ .propisi-lista { grid-template-columns:1fr 1fr; } }
.propisi-lista .law-box { margin:0; max-width:none; }
.propisi-lista .law-box p { text-align:left; hyphens:manual; }
@media (max-width:640px){ .propisi-lista .law-box { padding:18px 18px 16px; } }
.law-box .propis-izvor { font-size:0.8rem; letter-spacing:0.03em; color:var(--muted); margin:-4px 0 10px; }
.law-box .propis-veze { font-size:0.9rem; font-weight:600; }
.propisi-napomena { margin-top:22px; color:var(--muted); font-size:0.95rem; }
/* Preporuka preko cijele sirine (ISO 9001): ista tehnika kao .example-band.sa-slikom — fotografija
   stoji pri skrolu, tamni preliv 0.86/0.78 drzi kontrast i nad bijelim dijelom slike. */
.preporuka-band { padding:88px 0; background-color:#0c2825;
  background-image:linear-gradient(160deg, rgba(9,30,28,.86) 0%, rgba(12,40,37,.78) 100%), var(--pp-foto);
  background-size:cover, cover; background-position:center, center; background-repeat:no-repeat, no-repeat;
  background-attachment:scroll, fixed; }
.preporuka-band .law-box { background:transparent; border:0; border-left:5px solid var(--seal); border-radius:0;
  max-width:820px; margin:0 auto; padding:6px 0 6px 28px; }
.preporuka-band .law-box h3 { color:#fff; font-size:1.5rem; }
.preporuka-band .law-box p { color:var(--on-dark-strong); font-size:1.02rem; }
/* traka je sama po sebi vizuelni akcenat — tekst na fotografiji se ne animira (i ne dobija zaseban sloj) */
.preporuka-band .law-box.rv-f { opacity:1; transform:none; will-change:auto; transition:none; }
@media (hover:none), (prefers-reduced-motion:reduce){ .preporuka-band { background-attachment:scroll, scroll; } }
@media (max-width:640px){ .preporuka-band { padding:60px 0; } .preporuka-band .law-box { padding-left:18px; }
  .preporuka-band .law-box h3 { font-size:1.25rem; } }

/* ---------- Duga sekcija sa fotografijom iza teksta (npr. akreditacija na stranici sertifikacija) ----
   Ista tehnika kao .preporuka-band — slika stoji dok tekst klizi — ali sa jacim velom, jer ovdje
   preko slike ide cijeli tekst sekcije, a ne jedan citat. Racun za najgori slucaj (potpuno bijel
   dio slike ispod vela): podloga pada na ~35, pa je bijeli naslov 13:1, a tekst u --on-dark-strong
   oko 8.6:1. Na dodir i uz smanjeno kretanje pozadina se skroluje normalno. */
/* Dvostruka klasa namjerno: `section.alt` (gore) je pisan skracenicom `background`, sto bi inace
   ponistilo sliku — ovako pravilo pobjeduje bez obzira na redoslijed u fajlu. */
/* Prevlaka je spustena sa 0.90/0.84 na 0.34/0.26 — fotografija se sada stvarno vidi. Kontrast
   teksta vise ne nosi prevlaka nego KARTICA ispod teksta (.foto-traka > .wrap): tamna podloga
   0.90 + blagi blur, pa je bijeli naslov preko najgore (potpuno bijele) fotografije i dalje
   iznad 7:1, a tekst iznad 5:1. Slika ostaje vidljiva oko kartice. */
.foto-traka.foto-traka { padding:78px 0; background-color:#0C2825;
  background-image:linear-gradient(160deg, rgba(9,30,28,0.34) 0%, rgba(12,40,37,0.26) 100%), var(--pp-foto);
  background-size:cover, cover; background-position:center, center; background-repeat:no-repeat, no-repeat;
  background-attachment:scroll, fixed; }
.foto-traka.foto-traka > .wrap { position:relative; background:rgba(7,24,22,0.90);
  border:1px solid rgba(124,242,214,0.20); border-radius:20px; padding-top:38px; padding-bottom:38px;
  box-shadow:0 26px 64px -20px rgba(0,0,0,0.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  /* .wrap je inace pun do ivice ekrana na uzim prozorima; kartica mora imati vazduh sa strane,
     inace se lijepi za ivicu i gubi se utisak kartice na fotografiji. */
  max-width:min(var(--maxw), calc(100% - 36px)); }
@supports not (backdrop-filter:blur(3px)) { .foto-traka.foto-traka > .wrap { background:rgba(7,24,22,0.94); } }
@media (max-width:640px){ .foto-traka.foto-traka > .wrap { border-radius:14px; padding-top:26px; padding-bottom:26px; } }
.foto-traka h2 { color:#fff; }
.foto-traka .prose p { color:var(--on-dark-strong); }
.foto-traka .prose strong { color:#fff; }
.foto-traka .prose a { color:var(--seal2); }
/* Traka moze nositi i uvodni pasus i iscrtkani okvir (seo-cert), ne samo .prose — na tamnoj
   podlozi okvir postaje staklast, a tekst uzima svijetle tokene. */
.foto-traka .section-intro { color:var(--on-dark-strong); }
.foto-traka .seo-cert { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.26); }
.foto-traka .seo-cert h2, .foto-traka .seo-cert h3 { color:#fff; }
.foto-traka .seo-cert p { color:var(--on-dark-strong); }
.foto-traka .seo-cert strong { color:#fff; }
.foto-traka .seo-cert summary { color:var(--seal2); }
.foto-traka a:not(.btn) { color:var(--seal2); }
/* Poredjenje oznaka i "vise" okvir nose var(--surface) — u svijetloj temi bijelo, pa bi bijeli tekst
   preko fotografije nestao. U traci postaju staklasti, sa svijetlom ivicom. */
.foto-traka .std-compare, .foto-traka .sc-more { background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.22); color:var(--on-dark-strong); }
.foto-traka .sc-tag { color:var(--on-dark-soft); }
.foto-traka .sc-item strong { color:#fff; }
.foto-traka .sc-eq { background:rgba(255,255,255,0.10); color:var(--seal2);
  border-left-color:rgba(255,255,255,0.22); border-right-color:rgba(255,255,255,0.22); }
.foto-traka .sc-more p, .foto-traka .sc-more li { color:var(--on-dark-strong); }
/* Naslovi h3 i spiskovi direktno na tamnoj kartici trake: u svijetloj temi bi uzeli tamne tokene
   (--heading, --text) i nestali (kontrast ≈ 1,3) — npr. „Od čega zavisi cijena“, spisak kancelarija. */
.foto-traka.foto-traka > .wrap > h3, .foto-traka .prose h3, .foto-traka .prose h4 { color:#fff; }
.foto-traka .off-list li { color:var(--on-dark-strong); }
.foto-traka .off-list .adr-tip { color:var(--on-dark-soft); }
.foto-traka .desig-note { color:var(--on-dark-soft); }
/* Pilule sa vezama (.related) u tamnoj traci: staklaste, bijeli tekst — u obje teme. */
.foto-traka .related a, :root[data-theme="light"] .foto-traka .related a { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.26); color:#fff; }
.foto-traka .related a:hover, :root[data-theme="light"] .foto-traka .related a:hover { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.5); color:#fff; }
/* Svijetla tema mijenja mint akcente u tamnozelene (#096B52) — na trakama koje ostaju tamne
   vraćamo svijetli mint, inače linkovi i oznake padaju na kontrast ≈ 1,6. */
:root[data-theme="light"] .foto-traka, :root[data-theme="light"] .px-foto { --seal2:#4FE0BE; --accent-on-dark:#4FE0BE; }

/* Naslov drugog dijela spojene sekcije (sace + integrisani sistem). Kada je "Vise o integrisanom
   sistemu" postao podnaslov, ostao bi sitan i lijevo poravnat usred centrirane sekcije. */
.ims-naslov { text-align:center; font-size:1.32rem; margin:46px 0 10px; }
.ims-naslov::after { content:""; display:block; width:52px; height:3px; border-radius:2px;
  margin:12px auto 0; background:var(--seal); opacity:0.75; }
@media (hover:none), (prefers-reduced-motion:reduce){ .foto-traka { background-attachment:scroll, scroll; } }
@media (max-width:640px){ .foto-traka { padding:56px 0; } }
/* ---------- Aktuelnosti (vijesti o propisima) ---------- */
.news-list { display:flex; flex-direction:column; gap:18px; max-width:820px; margin:0 auto; }
.news-item { display:grid; grid-template-columns:104px 1fr; gap:20px; padding:22px 24px; background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--seal); border-radius:14px;
  transition:transform .2s ease, box-shadow .2s ease; }
.news-item:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,46,44,0.08); }
.news-date { font-family:var(--display); font-weight:700; color:var(--accent-label); font-size:0.86rem;
  line-height:1.3; padding-top:2px; }
.news-date small { display:block; font-family:var(--sans); font-weight:700; font-size:0.63rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.news-item h3 { margin-bottom:6px; font-size:1.05rem; }
.news-item p { font-size:0.92rem; color:var(--muted); }
.news-item .news-tag { display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--accent-label); background:rgba(15,191,143,0.1); padding:3px 10px;
  border-radius:99px; margin-bottom:8px; }
.news-item a.more { margin-top:8px; }
@media (max-width:560px){ .news-item { grid-template-columns:1fr; gap:6px; } .news-date { display:flex;
  align-items:baseline; gap:8px; } .news-date small { margin-top:0; } }

.ai-box { background:var(--ink); color:var(--on-dark-strong); border-radius:18px; padding:32px 34px; display:flex; gap:24px;
  flex-wrap:wrap; align-items:center; justify-content:space-between; position:relative; overflow:hidden;
  background-image:radial-gradient(500px 260px at 100% 0%, rgba(15,191,143,0.25), transparent 60%); }
.ai-box h3 { color:var(--white); font-size:1.35rem; margin-bottom:6px; }
.ai-box .tag { display:inline-block; background:var(--seal); color:var(--white); font-size:0.68rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; padding:4px 12px; border-radius:99px; margin-bottom:10px; }
.ai-box p { max-width:560px; font-size:0.94rem; }

/* ---------- Primjer iz prakse — tamna traka na sredini stranice standarda ----------
   Ista "premium" pozadinska logika kao hero/contact-band (slojeviti prelivi + fina mreža linija +
   ambijentalne mrlje), ali sa jasno obilježenim ilustrativnim citatom umjesto CTA forme — daje
   stranici vizuelni "dah" na pola puta bez generičkog lebdenja. */
.example-band { position:relative; background:var(--ink); color:var(--white); padding:56px 0;
  overflow:hidden; border-radius:20px; margin:8px auto; max-width:calc(var(--maxw) - 8px);
  background-image:radial-gradient(700px 360px at 12% 0%, rgba(14,138,128,0.32), transparent 62%),
                   radial-gradient(500px 300px at 100% 100%, rgba(15,191,143,0.2), transparent 60%),
                   linear-gradient(160deg, #0C2624 0%, #0F2E2C 55%, #0A2422 100%); }
.example-band::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 60px);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 85% 15%, #000, transparent 72%);
          mask-image:radial-gradient(ellipse 70% 60% at 85% 15%, #000, transparent 72%); }
.example-band .eb-blob { position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; }
.example-band .eb-blob.b1 { width:320px; height:320px; left:-90px; bottom:-120px;
  background:radial-gradient(circle, rgba(15,191,143,0.4), transparent 70%); animation:drift2 26s ease-in-out infinite; }
.example-band .eb-blob.b2 { width:220px; height:220px; right:6%; top:-80px;
  background:radial-gradient(circle, rgba(14,138,128,0.4), transparent 70%); animation:drift1 22s ease-in-out infinite; }
.example-band .wrap { position:relative; z-index:1; max-width:760px; }
.example-band .eb-tag { display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--seal2); background:rgba(255,255,255,0.07);
  border:1px solid rgba(124,242,214,0.28); padding:6px 14px; border-radius:99px; }
.example-band .eb-note { font-size:0.78rem; color:var(--on-dark-soft); margin-top:10px; max-width:520px; }
.example-band blockquote { font-family:var(--display); font-size:1.28rem; line-height:1.5; font-weight:500;
  color:var(--white); margin:20px 0 16px; position:relative; padding-left:26px;
  border-left:3px solid var(--seal); }
.example-band .eb-attr { font-size:0.86rem; color:var(--seal2); font-weight:700; }
@media (max-width:640px){ .example-band { border-radius:14px; padding:40px 0; } .example-band blockquote { font-size:1.08rem; } }

/* ---------- "Primjer iz prakse" sa fotografijom — fiksna pozadina (paralaksa) ----------
   Fotografija stoji u mjestu dok okvir sa citatom klizi preko nje pri skrolovanju.
   Kod background-attachment:fixed "cover" se racuna prema EKRANU, ne prema okviru, pa okvir
   postaje prozor u sliku koja miruje — to je efekat koji se trazio.
   Tamni preliv ide IZNAD fotografije da bijeli citat ostane citljiv; jacina je u dvije
   varijable, pa se podesava bez diranja slike.
   Na dodirnim ekranima i uz prefers-reduced-motion pozadina se skroluje normalno: iOS Safari
   ionako ignorise fixed, a paralaksa zna da izazove mucninu kod osjetljivih na pokret. */
.example-band.sa-slikom {
  /* Jacina preliva je izracunata za NAJGORI slucaj — cisto bijeli dio fotografije ispod
     teksta. Sa 0.78 dole i svjetlijom napomenom sav tekst prolazi 4.5:1 preko bilo koje slike;
     sa ranijih 0.74 mint potpis je padao na 4.07:1. */
  --eb-zat-gore: 0.86; --eb-zat-dole: 0.78;
  background-image:
    linear-gradient(160deg, rgba(9,30,28,var(--eb-zat-gore)) 0%, rgba(12,40,37,var(--eb-zat-dole)) 100%),
    var(--eb-slika);
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:scroll, fixed; }
/* Dijagonalne linije i mrlje su bile ukras prazne povrsine — preko fotografije samo smetaju. */
.example-band.sa-slikom::before { display:none; }
.example-band.sa-slikom .eb-blob { opacity:.45; }
/* Napomena je inace --on-dark-soft (#9FBDB7): na praznoj tamnoj traci dovoljno, ali preko
   fotografije pada ispod 4.5:1 u najgorem slucaju. Svjetlija varijanta prolazi. */
.example-band.sa-slikom .eb-note { color:var(--on-dark-strong); }
@media (hover:none), (prefers-reduced-motion:reduce){
  .example-band.sa-slikom { background-attachment:scroll, scroll; }
}

/* ---------- Kompaktan CTA ka stranici "Zahtjev za ponudu" ---------- */
.quote-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--surface-alt); border:1px solid var(--line); border-radius:16px; padding:26px 30px; margin:0 auto; }
.quote-banner h3 { margin-bottom:4px; }
.quote-banner p { color:var(--muted); font-size:0.94rem; max-width:480px; }
.quote-banner .btn { flex:none; }
.price-cta-link { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--steel);
  background:rgba(14,138,128,0.08); border:1px solid rgba(14,138,128,0.25); padding:6px 14px; border-radius:99px;
  font-size:0.88rem; text-decoration:none; margin-top:10px; transition:background .2s ease, transform .15s ease; }
/* Jača ispuna na hover je tekstu obarala kontrast na 4.34 u svijetloj temi. Ispuna ostaje
   (hover mora da se vidi), a tekst ide na tamniji --accent-hover: 5.3 svijetla / 7.97 tamna. */
.price-cta-link:hover { background:rgba(14,138,128,0.16); color:var(--accent-hover); transform:translateY(-1px); }

/* ---------- Podnožje ---------- */
.cta-band { background:var(--ink); color:var(--white); text-align:center; padding:56px 0; }
.cta-band h2 { color:var(--white); }
.cta-band p { color:var(--on-dark-strong); max-width:560px; margin:10px auto 26px; }
footer { background:var(--ink2); color:var(--on-dark-soft); padding:44px 0 30px; font-size:0.88rem; }
footer .wrap { display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between;
  max-width:1500px; /* šire od standardnog --maxw — brand kolona + 3 kolone linkova inače ne staju u red i lome se ispod */ }
footer a { color:var(--on-dark-strong); text-decoration:none; }
footer a:hover { text-decoration:underline; }
/* Prva kolona nema svoju sirinu, pa je najduza linija u njoj (spisak zemalja
   'po pozivu') razvlacila na punu duzinu teksta i gurala linkove uz desnu ivicu,
   ostavljajuci prazninu u sredini. Ogranicena je da se te linije prelome. */
footer .wrap > div:first-child { flex:0 1 360px; max-width:380px; min-width:260px; }
footer .cols { display:flex; gap:30px; flex-wrap:wrap; flex:1 1 0; min-width:0;
  /* space-between umjesto flex-end: kolone popunjavaju preostalu sirinu umjesto da
     se skupe uz desnu ivicu i ostave prazninu do brend kolone */
  justify-content:space-between; }
/* Kolone dijele raspolozivu sirinu na jednake dijelove; ranije su se sirile prema najduzem
   natpisu, pa je cetvrta kolona ispadala u novi red. */
footer .cols > ul { flex:1 1 0; min-width:0; }
/* Ispod 820px se podnozje slaze u redove: brend preko cijele sirine, pa linkovi
   ispod njega. Bez ovoga brend zadrzi 360px, linkovima ostane uska traka i svaki
   naziv standarda se prelomi u dva-tri reda pa se spisak otegne u nedogled. */
@media (max-width:820px){
  footer .wrap > div:first-child { flex:1 1 100%; max-width:none; }
  footer .cols { flex:1 1 100%; justify-content:flex-start; gap:26px; }
  footer .cols > ul { flex:1 1 200px; }
}
@media (max-width:520px){
  footer .cols { flex-direction:column; gap:0; }
  footer .cols > ul { flex:1 1 auto; }
}
footer ul { list-style:none; }
footer li { margin-bottom:6px; }
/* Oznaka uz maticnu adresu — tisa od same adrese, da spisak ostane ravnomjeran. */
footer .adr-tip { color:var(--on-dark-soft); font-size:0.82em; white-space:nowrap; }
/* Naslovi kolona u podnozju — do sada su tri liste stajale bez ijedne oznake sta su. */
footer li.foot-h { font-family:var(--display); font-size:0.72rem; letter-spacing:0.11em;
  text-transform:uppercase; font-weight:700; color:var(--accent-on-dark);
  margin:0 0 9px; padding-bottom:7px; border-bottom:1px solid rgba(79,224,190,0.18); }
footer li.foot-h:not(:first-child) { margin-top:20px; }
footer .legal { width:100%; border-top:1px solid #1C3C39; margin-top:26px; padding-top:18px; font-size:0.8rem; }
@media (max-width:900px){
  /* Kad se brand kolona i .cols slože jedno ispod drugog, flex-end ostavlja svaku kolonu
     zalijepljenu za desnu ivicu, pa lijeve ivice kolona ne budu poravnate ni sa brendom
     ni jedna sa drugom — na uskim ekranima treba flex-start da sve krene s lijeve ivice. */
  footer .cols { justify-content:flex-start; }
}

/* ---------- Reveal animacije ----------
   .rv-f (fade + blago podizanje + skaliranje) je glavni, "premium" efekat za široke blokove
   (kartice, seo-cert, law-box...) — bez bočnog klizanja koje kod širokih elemenata zna da
   privremeno pomjeri sadržaj van centra i djeluje kao jeftin "AOS.js" efekat.
   .rv-l/.rv-r ostaju samo za uzak, namjerno naizmjeničan raspored (npr. vremenska linija). */
.rv-l, .rv-r, .rv-u, .rv-f { opacity:0; transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.24,1); will-change:transform; }
.rv-l { transform:translateX(-28px); }
.rv-r { transform:translateX(28px); }
.rv-u { transform:translateY(22px); }
.rv-f { transform:translateY(16px) scale(0.98); }
.rv-l.in, .rv-r.in, .rv-u.in, .rv-f.in { opacity:1; transform:none; }

/* Moderan efekat: naslovi sekcija dobijaju animiranu liniju koja se "iscrtava" nakon pojavljivanja */
section > .wrap > h2, section > .wrap > div > h2 { position:relative; padding-bottom:16px; }
section > .wrap > h2::after, section > .wrap > div > h2::after {
  content:""; position:absolute; left:50%; bottom:0; width:56px; height:4px; border-radius:99px;
  background:linear-gradient(90deg,var(--seal),var(--steel)); transform:translateX(-50%) scaleX(0);
  transform-origin:center; transition:transform .55s cubic-bezier(.2,.7,.3,1) .2s; }
section > .wrap > h2.in::after, section > .wrap > div > h2.in::after { transform:translateX(-50%) scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { animation:none !important; transition:none !important; }
  .rv-l, .rv-r, .rv-u, .rv-f, .rv-blur { opacity:1; transform:none; filter:none; }
}
@media (max-width:640px){ .hero { padding:54px 0 46px; } section { padding:46px 0; } }

/* ============================================================
   PHASE B — GSAP/ScrollTrigger/Swiper modernization
   Namespaced under "pb-" (Phase B). Loaded only on the 6 prototype
   pages. Default state (no JS / mobile / reduced-motion) renders
   every component as a plain, fully-readable stacked layout —
   phase-b.js only ADDS an "is-enhanced" class after confirming
   desktop viewport + no prefers-reduced-motion + library present.
   ============================================================ */

/* ---------- Sticky ISO Explorer (homepage) ---------- */
/* Isti "editorijalni" izgled kao .explorer-intro (lijevo poravnanje, sec-num stil),
   ali BEZ position:sticky — ovdje intro sjedi iznad pb-explorer-body punom širinom,
   a sticky ponašanje umjesto toga nosi .pb-explorer-tabs kolona unutar body-ja. */
#standardi .pb-explorer-intro h2 { text-align:left; }
#standardi .pb-explorer-intro h2::after { left:0; transform:scaleX(0); transform-origin:left; }
#standardi .pb-explorer-intro h2.in::after { transform:scaleX(1); }
.pb-explorer-intro .sec-num { display:block; font-family:var(--display); font-size:0.82rem; font-weight:700;
  color:var(--accent-label); letter-spacing:0.1em; margin-bottom:10px; }
#standardi .pb-explorer-intro .section-intro { text-align:left; text-align-last:left; margin-left:0; max-width:none; }
.pb-explorer-tabs { display:none; }
.pb-explorer-panels { list-style:none; display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.pb-explorer-panel { display:flex; align-items:center; gap:22px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:20px; }
.pb-explorer-panel .pb-panel-visual { width:88px; height:88px; flex:none; object-fit:contain; }
.pb-panel-body { min-width:0; }
.pb-panel-code { font-family:var(--display); font-size:0.8rem; font-weight:700; color:var(--accent-label); }
.pb-panel-body h3 { margin:2px 0 6px; }
.pb-panel-body p { color:var(--muted); font-size:0.92rem; }
.pb-panel-link { display:inline-flex; align-items:center; min-height:24px; gap:4px; margin-top:10px;
  font-weight:700; font-size:0.9rem; text-decoration:none; }
@media (min-width:900px){
  .pb-explorer.is-enhanced .pb-explorer-body { display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start; }
  .pb-explorer.is-enhanced .pb-explorer-tabs { display:flex; flex-direction:column; gap:3px; }
  /* Kolona vise nije ljepljiva. Dok je bila, pri skrolu se pomjerala nize od svoje celije i
     prelazila preko rečenice "Ostali standardi", koja sada ide punom sirinom ispod kartica.
     Spisak je 477px, kartica 425px — dobitak od ljepljivosti bio je mali, a steta vidljiva. */
  .pb-explorer.is-enhanced .pb-rail { align-self:start; }
  .pb-explorer-tab { cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
    background:none; border:none; border-left:3px solid transparent; cursor:pointer; padding:11px 16px;
    border-radius:0 10px 10px 0; font-family:inherit; color:var(--muted); transition:background .2s ease, border-color .2s ease, color .2s ease; }
  .pb-explorer-tab:hover { background:var(--surface-alt); }
  .pb-explorer-tab .pb-tab-code { font-family:var(--display); font-size:0.78rem; font-weight:700; }
  .pb-explorer-tab .pb-tab-name { font-size:0.86rem; }
  .pb-explorer-tab.is-active { border-left-color:var(--seal); background:var(--surface-alt); color:var(--heading); }
  .pb-explorer-tab.is-active .pb-tab-code { color:var(--accent-label); }
  .pb-explorer.is-enhanced .pb-explorer-panels { margin-top:0; min-height:300px; }
  .pb-explorer.is-enhanced .pb-explorer-panel { display:none; flex-direction:column; align-items:flex-start;
    padding:34px; }
  .pb-explorer.is-enhanced .pb-explorer-panel.is-active { display:flex; }
  .pb-explorer.is-enhanced .pb-explorer-panel .pb-panel-visual { width:150px; height:150px; margin-bottom:18px; }
  /* Fotografija u panelu (inline --pb-foto): ulazi s desne strane i blijedi u karticu, a tekst
     ostaje na cistoj podlozi — foto pocinje na 46% sa potpuno providnom ivicom, tekst staje na 48%.
     Neaktivni panel je display:none pa se njegova slika i ne ucitava dok se tab ne otvori. */
  .pb-explorer.is-enhanced .pb-explorer-panel { position:relative; overflow:hidden; isolation:isolate; }
  /* Preko fotografije ide blagi ton kuce (jaci uz ivicu teksta, slabiji desno) i malo smanjena
     zasicenost — da slika iz stoka ne stoji kao strano tijelo pored zelene palete sajta. */
  .pb-explorer.is-enhanced .pb-explorer-panel[style*="--pb-foto"]::after { content:""; position:absolute;
    inset:0 0 0 46%; z-index:-1; filter:saturate(0.9);
    background-image:linear-gradient(105deg, rgba(9,40,36,0.34) 0%, rgba(9,40,36,0.16) 45%, rgba(9,40,36,0.06) 100%), var(--pb-foto);
    background-size:cover, cover; background-position:center, center; background-repeat:no-repeat, no-repeat;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 35%, #000 75%);
            mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 35%, #000 75%);
    animation:pbFoto .5s ease both; }
  .pb-explorer.is-enhanced .pb-explorer-panel[style*="--pb-foto"] .pb-panel-body { max-width:48%; }
}
@keyframes pbFoto { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:none; } }

/* ---------- Ostali standardi (kompaktna lista ispod explorer-a) ---------- */
.pb-other-standards { margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
.pb-other-standards h3 { font-size:1.05rem; text-align:left; }
.pb-other-standards .std-list { border-top:none; }
/* "Ostali standardi" kao jedna recenica sa linkovanim standardima, umjesto jednog reda sa opisom.
   Svaki naziv vodi na svoju stranicu, a recenica se zavrsava linkom na kompletan direktorijum. */
.std-recenica { color:var(--muted); font-size:0.95rem; line-height:1.9; margin:0; max-width:none; }
.std-recenica a { color:var(--accent-label); font-weight:600; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px; }
.std-recenica a:hover, .std-recenica a:focus-visible { border-bottom-color:currentColor; }
.std-recenica a.svi-std { color:var(--heading); font-weight:700; white-space:nowrap; }
/* Na sirokom ekranu "Ostali standardi" nisu vise zasebna traka ispod, nego posljednji red u istoj
   koloni sa standardima — jedan spisak umjesto dva. Na uskom ekranu mreza se raspada u jednu
   kolonu, pa blok ostaje ispod kartica, kako je i bio. */
@media (min-width:900px){
  /* Blok ide punom sirinom ispod kolone sa standardima i kartice — da recenica sa linkovima ima
     mjesta, umjesto da se lomi u uskoj koloni od 280px. */
  .pb-explorer.is-enhanced .pb-other-standards { grid-column:1 / -1; margin-top:30px; padding-top:22px; }
  .pb-explorer.is-enhanced .pb-other-standards h3 { font-size:0.76rem; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--muted); padding-left:16px; margin-bottom:4px; }
  .pb-explorer.is-enhanced .pb-other-standards .std-list li { border-bottom:none; }
  .pb-explorer.is-enhanced .pb-other-standards .std-list a { grid-template-columns:1fr 16px; gap:10px;
    padding:11px 16px; border-left:3px solid transparent; border-radius:0 10px 10px 0; }
  .pb-explorer.is-enhanced .pb-other-standards .std-list a:hover,
  .pb-explorer.is-enhanced .pb-other-standards .std-list a:focus-visible { background:var(--surface-alt);
    border-left-color:var(--seal); padding-left:16px; }
  .pb-explorer.is-enhanced .pb-other-standards .sl-idx,
  .pb-explorer.is-enhanced .pb-other-standards .sl-desc { display:none; }
  .pb-explorer.is-enhanced .pb-other-standards .sl-code { font-size:0.78rem; }
  .pb-explorer.is-enhanced .pb-other-standards .sl-name { font-size:0.86rem; font-weight:700; }
}

/* ---------- Implementation Process (homepage) ---------- */
.pb-process-track { display:none; }
.pb-process .flow { margin-top:20px; }
@media (min-width:900px){
  .pb-process.is-enhanced .pb-process-track { display:block; position:relative; height:4px;
    background:var(--line); border-radius:99px; margin:28px 0 30px; overflow:hidden; }
  .pb-process.is-enhanced .pb-process-fill { position:absolute; inset:0; width:0%;
    background:linear-gradient(90deg,var(--seal),var(--steel)); border-radius:99px; }
  .pb-process.is-enhanced .fstep.is-active { border-color:var(--seal); box-shadow:0 14px 32px rgba(15,46,44,0.12);
    transform:translateY(-3px); }
}

/* ---------- Training Swiper (obuke.html) — built by JS around existing .grid cards ---------- */
.pb-swiper { padding-bottom:44px; }
.pb-swiper .swiper-slide { height:auto; }
.pb-swiper .swiper-slide .card { height:100%; }
/* WCAG 2.2 (2.5.8): vidljiva tackica ostaje 9px, ali joj je meta prosirena na 24x24 —
   sam krug sada crta ::before, a bottom:0 drzi tackice na istom mjestu kao prije. */
.pb-swiper .swiper-pagination { bottom:0; }
.pb-swiper .swiper-pagination-bullet { width:24px; height:24px; margin:0 1px !important;
  background:none; opacity:1; border-radius:0; display:inline-flex; align-items:center; justify-content:center; }
.pb-swiper .swiper-pagination-bullet::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--line); }
.pb-swiper .swiper-pagination-bullet-active { background:none; }
.pb-swiper .swiper-pagination-bullet-active::before { background:var(--seal); }
.pb-swiper .swiper-button-prev, .pb-swiper .swiper-button-next { color:var(--steel); }
.pb-swiper .swiper-button-prev:after, .pb-swiper .swiper-button-next:after { font-size:1.4rem; }
.pb-swiper .swiper-button-prev:focus-visible, .pb-swiper .swiper-button-next:focus-visible { outline:3px solid var(--accent-label); outline-offset:3px; border-radius:50%; }
@media (max-width:640px){ .pb-swiper .swiper-button-prev, .pb-swiper .swiper-button-next { display:none; } }

/* ---------- Generic 3-stage pathway (ISO 14001 Aspect→Impact→Control, ISO 22301 Disruption→Response→Recovery) ---------- */
.pb-pathway { display:grid; gap:18px; grid-template-columns:1fr; margin-top:22px; counter-reset:pbstage; }
.pb-pathway-stage { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:24px 24px 20px; counter-increment:pbstage; }
.pb-pathway-stage::before { content:counter(pbstage,decimal-leading-zero); position:absolute; top:-14px; right:16px;
  font-family:var(--display); font-weight:700; font-size:2.6rem; color:var(--surface-alt); z-index:0; line-height:1; }
.pb-pathway-stage > * { position:relative; z-index:1; }
.pb-pathway-stage .pb-stage-tag { display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--accent-label); background:rgba(15,191,143,0.12); padding:4px 11px;
  border-radius:99px; margin-bottom:10px; }
.pb-pathway-stage h3 { margin-bottom:6px; }
.pb-pathway-stage p { color:var(--muted); font-size:0.93rem; }
.pb-pathway-arrow { display:none; }
@media (min-width:900px){
  .pb-pathway { grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:0; }
  .pb-pathway-stage { border-radius:0; border-right:none; }
  .pb-pathway-stage:first-child { border-radius:16px 0 0 16px; }
  .pb-pathway-stage:last-child { border-radius:0 16px 16px 0; border-right:1px solid var(--line); }
  .pb-pathway-arrow { display:flex; align-items:center; justify-content:center; width:0; position:relative; z-index:2; }
  .pb-pathway-arrow::after { content:"→"; display:flex; align-items:center; justify-content:center; width:30px; height:30px;
    border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--seal-deep); font-weight:700;
    margin-left:-15px; margin-right:-15px; }
}

/* ---------- Bento benefits layout (ISO 9001) ---------- */
.pb-bento { display:grid; gap:16px; grid-template-columns:1fr; margin-top:8px; }
.pb-bento .benefit { max-width:none; flex:none; }
@media (min-width:720px){
  .pb-bento { grid-template-columns:repeat(2,1fr); }
  .pb-bento .benefit:first-child { grid-column:1 / -1; }
}
@media (min-width:1080px){
  .pb-bento { grid-template-columns:repeat(3,1fr); }
  .pb-bento .benefit:first-child { grid-row:1 / 3; grid-column:1; }
  .pb-bento .benefit:nth-child(2) { grid-column:2; }
  .pb-bento .benefit:nth-child(3) { grid-column:3; }
  .pb-bento .benefit:nth-child(4) { grid-column:2 / 4; }
}

/* ---------- Annex A accessible tabs (ISO/IEC 27001) ---------- */
.pb-tabs-nav { display:none; }
.pb-tabpanels { display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.pb-tabpanel { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 24px; }
.pb-tabpanel h3 { font-size:1.02rem; margin-bottom:6px; }
.pb-tabpanel p { color:var(--muted); font-size:0.92rem; }
@media (min-width:900px){
  .pb-annex.is-enhanced .pb-tabs-nav { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line);
    margin-top:20px; }
  .pb-annex.is-enhanced .pb-tab-btn { background:none; border:none; border-bottom:3px solid transparent;
    padding:10px 16px; font-family:inherit; font-weight:600; font-size:0.92rem; color:var(--muted);
    cursor:pointer; margin-bottom:-1px; transition:color .2s ease, border-color .2s ease; }
  .pb-annex.is-enhanced .pb-tab-btn:hover { color:var(--heading); }
  .pb-annex.is-enhanced .pb-tab-btn.is-active { color:var(--accent-label); border-bottom-color:var(--seal); }
  .pb-annex.is-enhanced .pb-tabpanels { margin-top:0; }
  .pb-annex.is-enhanced .pb-tabpanel { display:none; border-top-left-radius:0; }
  .pb-annex.is-enhanced .pb-tabpanel.is-active { display:block; }
}

/* ---------- Discreet scroll-triggered fingerprint taps (ISO/IEC 27001) ---------- */
.fp-anchor { position:relative; height:0; }
.fp-mark { position:absolute; top:-46px; width:34px; height:34px; color:var(--seal2);
  opacity:0; transform:scale(.4) rotate(0deg); pointer-events:none; z-index:1;
  transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.fp-mark svg { width:100%; height:100%; display:block; }
.fp-mark.in { opacity:.16; transform:scale(1) rotate(var(--fp-rot, 0deg)); }
.fp-1, .fp-3, .fp-5 { right:6%; }
.fp-2, .fp-4, .fp-6 { left:5%; }
.fp-1 { --fp-rot:6deg; }
.fp-2 { --fp-rot:-12deg; }
.fp-3 { --fp-rot:9deg; }
.fp-4 { --fp-rot:-6deg; }
.fp-5 { --fp-rot:11deg; }
.fp-6 { --fp-rot:-9deg; }
@media (max-width:720px) {
  .fp-mark { width:24px; height:24px; top:-34px; }
  .fp-1, .fp-3, .fp-5 { right:16px; }
  .fp-2, .fp-4, .fp-6 { left:16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-mark { transition:none; }
  .pb-explorer.is-enhanced .pb-explorer-panel,
  .pb-process.is-enhanced .fstep,
  .pb-annex.is-enhanced .pb-tabpanel { transition:none !important; }
  .pb-explorer.is-enhanced .pb-explorer-panel::after { animation:none; }
}

/* ==================== PHASE D — standards directory, breadcrumbs, service pages ==================== */
.breadcrumb { font-size:0.82rem; margin:0 0 18px; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; }
.breadcrumb li { display:flex; align-items:center; gap:6px; }
.breadcrumb li:not(:last-child)::after { content:"/"; color:var(--line); }
.breadcrumb a { color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; }
.breadcrumb a:hover { color:var(--steel); border-bottom-color:var(--steel); }
.breadcrumb [aria-current="page"] { color:var(--heading); font-weight:600; }
.hero .breadcrumb { color:var(--on-dark-strong); }
.hero .breadcrumb a { color:var(--on-dark-strong); }
.hero .breadcrumb a:hover { color:var(--seal2); }
.hero .breadcrumb [aria-current="page"] { color:var(--white); }
.hero .breadcrumb li:not(:last-child)::after { color:rgba(255,255,255,0.3); }

.std-cat-title { margin-top:52px; }
.std-cat-title:first-child { margin-top:0; }
.std-cat-note { max-width:680px; margin:6px auto 28px; color:var(--muted); font-size:0.92rem; text-align:center; }
.std-card-icon { width:32px; height:32px; margin-bottom:10px; display:block; }

.guidance-box { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px 32px;
  max-width:760px; margin:0 auto; text-align:center; }
.guidance-box .cta-row { justify-content:center; margin-top:18px; }
/* .btn-ghost je fiksno bijel (bijeli tekst + prozirna bijela ivica) jer je pravljen za tamne
   pozadine. U light temi većina sekcija ima svijetlu pozadinu, pa bijelo dugme postane
   nevidljivo. Zato u light temi .btn-ghost podrazumijevano dobija tamnu boju...
   ...a zatim ga vraćamo na bijelo unutar kontejnera koji i u light temi ostaju tamni.
   HERO VISE NIJE MEDJU NJIMA — u svijetloj temi je svijetla traka (vidi blok "svijetli hero"),
   pa mu ovdje bijela ivica nije trebala; ostajala je bijela linija na bijeloj podlozi. */
:root[data-theme="light"] .btn-ghost { color:var(--ink); border-color:rgba(15,46,44,0.4); }
:root[data-theme="light"] .btn-ghost:hover { border-color:var(--ink); }
:root[data-theme="light"] .contact-band .btn-ghost,
:root[data-theme="light"] .example-band .btn-ghost,
:root[data-theme="light"] .cta-band .btn-ghost { color:var(--white); border-color:rgba(255,255,255,0.5); }
:root[data-theme="light"] .px-foto .btn-ghost,
:root[data-theme="light"] .foto-traka .btn-ghost { color:#fff; border-color:rgba(255,255,255,0.5); }
:root[data-theme="light"] .contact-band .btn-ghost:hover,
:root[data-theme="light"] .example-band .btn-ghost:hover,
:root[data-theme="light"] .cta-band .btn-ghost:hover { border-color:var(--white); }

/* Isti razlog kao kod .btn-ghost, samo za obicne tekstualne linkove: --accent je u light
   temi tamnozelen (#0A7A5C) i na --ink traci daje 2.73:1. Trake koje ostaju tamne u obije
   teme zato uzimaju svijetli mint. */
.hero a:not(.btn):not(.brand),
.contact-band a:not(.btn),
.example-band a:not(.btn),
.cta-band a:not(.btn),
.ai-box a:not(.btn),
.reg-map a:not(.btn) { color:var(--accent-on-dark); }
.hero :focus-visible,
.contact-band :focus-visible,
.example-band :focus-visible,
.cta-band :focus-visible,
.ai-box :focus-visible,
.assess-intro :focus-visible,
.reg-map :focus-visible,
footer :focus-visible { outline-color:var(--accent-on-dark); }

.training-cta { background:var(--note-bg); border:1px solid var(--note-border); border-left:5px solid var(--seal);
  border-radius:10px; padding:18px 22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; margin:40px 0 44px; }
.training-cta strong { color:var(--note-text); font-family:var(--display); display:block; }
.training-cta p { margin:2px 0 0; color:var(--note-text); font-size:0.92rem; }
.training-cta a.more { white-space:nowrap; flex:none; }

.svc-scope { background:var(--note-bg); border:1px solid var(--note-border); border-left:5px solid var(--steel);
  border-radius:10px; padding:16px 20px; margin:0 0 24px; font-size:0.92rem; color:var(--note-text); }

fieldset.svc-group { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px;
  padding:16px 18px 18px; margin:0; min-width:0; }
fieldset.svc-group legend { width:100%; font-weight:700; font-family:var(--display); padding:0 0 4px; color:var(--ink)  /* kartica forme je bijela; --heading je svijetla pa je legend bio nevidljiv (1.1) */; }
.svc-check-list { display:grid; grid-template-columns:repeat(4,1fr); gap:6px 14px; margin-top:8px; }
.svc-check { display:flex; align-items:flex-start; gap:8px; }
.svc-check input[type="checkbox"] { width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--seal); }
.svc-check label { font-size:0.88rem; cursor:pointer; line-height:1.3; }
@media (max-width:640px) { .svc-check-list { grid-template-columns:repeat(2,1fr); } }

/* Sklopivi okidač za svc-group listu — vidljiv sažetak izbora kad je zatvorena, mreža polja kad je otvorena. */
.svc-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#F1F8F6; border:1.5px solid #B6D2CC; border-radius:10px; padding:12px 14px; margin-top:4px;
  cursor:pointer; font-family:var(--sans); text-align:left; transition:border-color .15s ease, background .15s ease; }
.svc-toggle:hover { border-color:var(--steel); }
.svc-toggle:focus-visible { outline:3px solid var(--accent-label); outline-offset:2px; }
.svc-toggle-placeholder { color:#46615C; font-size:0.92rem; }
.svc-toggle-summary { color:#1E3230; font-size:0.9rem; font-weight:600; }
/* .svc-toggle je <button> unutar .cform, pa ga je pravilo `.cform button`
   (za dugme Posalji) bojilo mint jer ima vecu specificnost. Ovo ga vraca
   na svjetlo polje za izbor — nije radnja slanja, ne smije tako izgledati. */
.cform .svc-toggle { background:#F1F8F6; border:1.5px solid #B6D2CC; color:#1E3230;
  padding:12px 14px; font-size:1rem; font-weight:400; }
.cform .svc-toggle:hover { background:#E9F4F1; border-color:var(--steel); }
.svc-toggle-arrow { flex:none; color:#0A7A5D; transition:transform .25s var(--ease-out); font-size:0.85em; }
.svc-toggle[aria-expanded="true"] .svc-toggle-arrow { transform:rotate(180deg); }
.svc-panel { max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease-smooth), opacity .3s ease, margin-top .4s var(--ease-smooth); }
.svc-panel.is-open { max-height:2400px; opacity:1; margin-top:14px; }
@media (prefers-reduced-motion: reduce) { .svc-panel { transition:none; } }
.svc-error { display:none; background:rgba(214,69,69,0.09); border:1px solid rgba(214,69,69,0.35);
  border-left:5px solid #D64545; border-radius:10px; padding:12px 16px; margin-bottom:16px; color:#8C2F2F;
  font-size:0.9rem; }
.svc-error.is-visible { display:block; }
:root[data-theme="light"] .svc-error { color:#8C2F2F; }
.svc-subhead { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin:20px 0 8px; }
.svc-subhead:first-child { margin-top:0; }

/* ============================================================
   Self-assessment readiness questionnaire ("Provjerite spremnost")
   Namespaced .assess-* . Reuses existing tokens only (navy/mint/surface/line).
   ============================================================ */
.assess { margin:40px 0; scroll-margin-top:90px; }
.assess-intro { position:relative; background:linear-gradient(155deg, var(--navy) 0%, var(--navy-soft) 60%, var(--navy-deep) 100%);
  border-radius:var(--radius-lg); padding:38px 40px; color:var(--white); overflow:hidden;
  box-shadow:var(--shadow-medium); border:1px solid rgba(124,242,214,0.14); }
.assess-intro::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background:radial-gradient(circle at 88% -10%, rgba(15,191,143,0.22), transparent 55%),
    radial-gradient(circle at -5% 115%, rgba(14,138,128,0.18), transparent 50%); }
.assess-intro-top { position:relative; display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; justify-content:space-between; }
.assess-intro-copy { max-width:600px; }
.assess-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:0.74rem; font-weight:700;
  /* .assess-intro je tamnoplava traka u obije teme, pa ne moze --accent (u light temi 2.69:1) */
  text-transform:uppercase; letter-spacing:0.1em; color:var(--accent-on-dark); margin-bottom:10px; }
.assess-eyebrow svg { width:16px; height:16px; flex:none; }
.assess-intro h2 { color:var(--white); margin-bottom:0.4em; font-size:clamp(1.3rem,2.6vw,1.7rem); }
.assess-intro p { color:var(--on-dark-strong); font-size:0.98rem; }
.assess-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:0.82rem; color:var(--on-dark-soft); }
.assess-meta span { display:inline-flex; align-items:center; gap:6px; }
.assess-meta span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--seal2); flex:none; }
.assess-toggle { position:relative; flex:none; display:inline-flex; align-items:center; gap:10px; background:var(--seal);
  color:#06231B; border:none; padding:15px 26px; border-radius:12px; font-family:var(--display); font-weight:700;
  font-size:0.98rem; cursor:pointer; transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 14px 30px -10px rgba(15,191,143,0.55); }
.assess-toggle:hover { background:var(--seal3); transform:translateY(-1px); }
.assess-toggle .at-arrow { transition:transform .3s var(--ease-out); font-size:0.85em; }
.assess-toggle[aria-expanded="true"] .at-arrow { transform:rotate(180deg); }
.assess-disclaimer { position:relative; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.14);
  font-size:0.82rem; color:var(--on-dark-soft); line-height:1.6; }

.assess-panel { margin-top:0; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s var(--ease-smooth), opacity .35s ease, margin-top .45s var(--ease-smooth); }
.assess-panel.is-open { max-height:5200px; opacity:1; margin-top:22px; }
.assess-panel.is-open.je-otvoren { max-height:none; overflow:visible; }
@media (prefers-reduced-motion: reduce) { .assess-panel { transition:none; } }
.assess-body { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px clamp(18px,4vw,44px); box-shadow:var(--shadow-card); }

/* Stepper */
.assess-stepper { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin-bottom:30px;
  list-style:none; }
.assess-stepper li { flex:1; text-align:center; position:relative; font-size:0.72rem; color:var(--muted); }
.assess-stepper li::before { content:""; position:absolute; top:13px; left:-50%; width:100%; height:2px;
  background:var(--line); z-index:0; }
.assess-stepper li:first-child::before { display:none; }
.assess-stepper .as-dot { position:relative; z-index:1; width:26px; height:26px; border-radius:50%; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center; background:var(--surface-alt); border:2px solid var(--line);
  font-weight:700; font-family:var(--display); color:var(--muted); transition:all .25s ease; font-size:0.78rem; }
.assess-stepper li.is-done .as-dot { background:var(--seal); border-color:var(--seal); color:#06231B; }
.assess-stepper li.is-done::before { background:var(--seal); }
.assess-stepper li.is-current .as-dot { border-color:var(--seal); color:var(--seal-deep); box-shadow:0 0 0 4px var(--note-bg); }
.assess-stepper li.is-current { color:var(--heading); font-weight:700; }
.assess-stepper .as-label { display:block; max-width:92px; margin:0 auto; line-height:1.25; }
@media (max-width:820px) { .assess-stepper .as-label { display:none; } }
.assess-progress-compact { display:none; font-size:0.82rem; color:var(--muted); margin-bottom:18px; font-weight:600; }
.assess-progress-compact .apc-bar { height:6px; border-radius:4px; background:var(--line); margin-top:8px; overflow:hidden; }
.assess-progress-compact .apc-fill { height:100%; background:linear-gradient(90deg,var(--steel),var(--seal));
  border-radius:4px; transition:width .3s ease; }
@media (max-width:820px) { .assess-progress-compact { display:block; } }

.assess-step-head { margin-bottom:22px; outline:none; }
.assess-step-head .as-step-no { font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--seal-deep); }
.assess-step-head h3 { margin:4px 0 0; font-size:1.3rem; }
.assess-step-note { color:var(--muted); font-size:0.9rem; margin-top:6px; max-width:620px; }

.assess-field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 20px; }
.assess-field-grid .full { grid-column:1 / -1; }
@media (max-width:640px) { .assess-field-grid { grid-template-columns:1fr; } }
.assess-field label { display:block; font-size:0.82rem; font-weight:700; color:var(--heading); margin-bottom:6px; }
.assess-field .req { color:var(--seal-deep); }
.assess-field input[type="text"], .assess-field input[type="email"], .assess-field input[type="tel"],
.assess-field input[type="url"], .assess-field select, .assess-field textarea { width:100%; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:10px; font-family:var(--sans); font-size:0.95rem; color:var(--text);
  background:var(--surface-alt); transition:border-color .15s ease, box-shadow .15s ease; }
.assess-field input:focus, .assess-field select:focus, .assess-field textarea:focus { outline:none;
  border-color:var(--steel); box-shadow:0 0 0 3px var(--note-bg); }
.assess-field textarea { min-height:90px; resize:vertical; }
.assess-check-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px 14px; margin-top:6px; }
.assess-check-grid label { display:flex; align-items:flex-start; gap:8px; font-size:0.88rem; font-weight:500;
  color:var(--text); cursor:pointer; }
.assess-check-grid input { width:17px; height:17px; flex:none; margin-top:2px; accent-color:var(--seal); }
.assess-hp { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* Questions */
.assess-section-title { font-size:0.98rem; font-weight:700; font-family:var(--display); color:var(--heading);
  margin:26px 0 14px; padding-top:22px; border-top:1px solid var(--line); }
.assess-section-title:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.assess-section-note { font-size:0.85rem; color:var(--muted); margin:-8px 0 16px; }
/* Brojač odgovorenih pitanja iznad liste (tok u dva koraka) */
.assess-brojac { display:inline-block; margin:2px 0 18px; padding:6px 12px; border-radius:999px; font-size:0.85rem;
  font-weight:700; color:var(--seal-deep); background:var(--note-bg); }
/* Pitanje je <fieldset> sa <legend>. Chrome prvi legend uvijek crta NA gornjoj ivici okvira
   ("notch") — flex na fieldset-u to ne mijenja — pa je tekst pitanja stajao pola u kartici,
   pola van nje, a linija okvira je prolazila kroz slova. Plutajuci legend (float) po
   specifikaciji vise nije "rendered legend": ide u normalan tok, unutar kartice. */
.assess-q { display:block; border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; margin-bottom:14px; background:var(--surface-alt); min-width:0; }
.assess-q legend { float:left; width:100%; font-size:0.94rem; font-weight:600;
  color:var(--heading); padding:0; margin:0 0 12px; line-height:1.45; }
.assess-q legend + * { clear:both; }
.assess-q-help { display:block; font-size:0.82rem; font-weight:400; color:var(--muted); margin-top:4px; }
.assess-scale { display:flex; flex-wrap:wrap; gap:8px; }
.assess-opt { position:relative; }
.assess-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.assess-opt > span { display:inline-flex; align-items:center; padding:9px 14px; border-radius:9px; border:1.5px solid var(--line);
  background:var(--surface); font-size:0.84rem; font-weight:600; color:var(--text); cursor:pointer;
  transition:all .15s ease; user-select:none; }
.assess-opt input:checked + span { background:var(--seal); border-color:var(--seal); color:#06231B; }
.assess-opt input:focus-visible + span { outline:3px solid var(--accent-label); outline-offset:2px; }
.assess-opt:hover > span { border-color:var(--steel); }
/* ---------- Skala zrelosti u upitniku ----------
   Sest istih pilula u jednom redu davalo je izbor bez tezine — sve je izgledalo isto.
   Sada su cetiri stepenika (0-3) kao kartice sa brojem, kratkim naslovom i objasnjenjem,
   a "ne odnosi se" i "nijesam siguran" stoje odvojeno ispod, sitnije. */
.assess-ladder { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:820px){ .assess-ladder { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .assess-ladder { grid-template-columns:1fr; } }
.assess-step { display:block; }
.assess-step .as-box { display:flex; gap:10px; align-items:flex-start; height:100%;
  padding:12px 13px; border-radius:11px; border:1.5px solid var(--line); background:var(--surface);
  cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.assess-step .as-rang { flex:none; width:22px; height:22px; border-radius:7px; display:inline-flex;
  align-items:center; justify-content:center; font-family:var(--display); font-size:0.78rem;
  font-weight:700; background:var(--line); color:var(--muted); transition:all .15s ease; }
.assess-step .as-txt { display:block; }
.assess-step .as-title { display:block; font-size:0.85rem; font-weight:700; color:var(--heading); line-height:1.3; }
.assess-step .as-hint { display:block; font-size:0.76rem; color:var(--muted); line-height:1.4; margin-top:3px; }
/* Bez podizanja na hover: kartica koja se pomjeri ispod misa djeluje kao da "izmice". */
.assess-step:hover .as-box { border-color:var(--steel); }
.assess-step input:focus-visible + .as-box { outline:3px solid var(--accent-label); outline-offset:2px; }
/* Izabrani stepenik: mint okvir i blaga mint podloga. Puni mint fill sa tamnim tekstom radi
   na dugmetu od jedne rijeci, ali ne i na kartici sa dva reda teksta. */
.assess-step input:checked + .as-box { border-color:var(--seal); background:rgba(15,191,143,0.10);
  box-shadow:inset 0 0 0 1px var(--seal); }
.assess-step input:checked + .as-box .as-rang { background:var(--seal); color:var(--on-seal); }
.assess-step input:checked + .as-box .as-hint { color:var(--text); }
.assess-scale-side { margin-top:9px; }
.assess-scale-side .assess-opt span { font-size:0.79rem; font-weight:600; padding:7px 12px;
  background:none; color:var(--muted); }
.assess-scale-side .assess-opt input:checked + span { background:var(--surface-alt);
  border-color:var(--steel); color:var(--heading); }

.assess-comment-toggle { display:inline-block; margin-top:10px; font-size:0.8rem; color:var(--steel); background:none;
  border:none; cursor:pointer; padding:0; font-weight:600; }
.assess-comment { display:none; margin-top:10px; }
.assess-comment.is-open { display:block; }
.assess-comment textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--text); font-family:var(--sans); font-size:0.86rem; min-height:64px; resize:vertical; }

.assess-review-box { background:var(--surface-alt); border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.assess-review-box dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:0.9rem; }
.assess-review-box dt { color:var(--muted); }
.assess-review-box dd { color:var(--heading); font-weight:600; }
.assess-consent { display:flex; align-items:flex-start; gap:10px; margin-top:20px; font-size:0.86rem; color:var(--text); }
.assess-consent input { width:19px; height:19px; flex:none; margin-top:2px; accent-color:var(--seal); }
.assess-consent a { color:var(--steel); }
.assess-privacy-note { font-size:0.8rem; color:var(--muted); margin-top:14px; line-height:1.6; }

.assess-nav { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:28px;
  padding-top:22px; border-top:1px solid var(--line); }
.assess-nav-spacer { flex:1; }
/* Na koraku sa pitanjima dugme „Prikaži rezultat“ ostaje vidljivo na dnu ekrana — sva pitanja su
   na jednoj stranici, pa posjetilac ne mora da skroluje do kraja da bi vidio rezultat. */
.assess-nav.na-pitanjima { position:sticky; bottom:12px; z-index:5; margin-top:18px; padding:10px 12px; border:1px solid var(--line);
  border-radius:12px; background:var(--glass-bg-scrolled); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); }
@media (max-width:720px){ body:has(.mob-cta.je-vidljiv) .assess-nav.na-pitanjima { bottom:80px; } }
/* Na telefonu plutajuća dugmad (WhatsApp, Telegram) ne smiju prekrivati dugme „Prikaži rezultat“ dok je upitnik otvoren. */
@media (max-width:720px){ body:has(.assess-panel.je-otvoren) .chat-fab { opacity:0; visibility:hidden; pointer-events:none; } }
.assess-btn { position:relative; isolation:isolate; overflow:hidden; font-family:var(--display); font-weight:700; font-size:0.92rem; padding:12px 22px; border-radius:10px;
  cursor:pointer; border:none; transition:background .15s ease, transform .15s ease; }
.assess-btn-primary { background:var(--seal); color:#06231B; }
.assess-btn-primary:hover { background:var(--seal3); }
.assess-btn-ghost { background:transparent; color:var(--heading); border:1.5px solid var(--line); }
.assess-btn-ghost:hover { border-color:var(--steel); color:var(--steel); }
.assess-btn:disabled { opacity:0.4; cursor:not-allowed; }
.assess-error-summary { background:rgba(214,69,69,0.09); border:1px solid rgba(214,69,69,0.35); border-left:5px solid #D64545;
  border-radius:10px; padding:14px 18px; margin-bottom:20px; color:#8C2F2F; font-size:0.88rem; display:none; }
.assess-error-summary.is-visible { display:block; }
:root[data-theme="light"] .assess-error-summary { color:#8C2F2F; }
.assess-error-summary ul { margin:8px 0 0 18px; }

/* Result panel */
.assess-result-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border-radius:99px;
  font-family:var(--display); font-weight:700; font-size:0.86rem; margin-bottom:8px; }
.assess-result-badge.lvl-1 { background:rgba(214,69,69,0.14); color:#C24545; }
.assess-result-badge.lvl-2 { background:rgba(217,158,44,0.16); color:#B4791E; }
.assess-result-badge.lvl-3 { background:rgba(14,138,128,0.16); color:var(--steel); }
.assess-result-badge.lvl-4 { background:rgba(15,191,143,0.16); color:var(--seal-deep); }
.assess-result-score { font-family:var(--display); font-size:clamp(2.4rem,6vw,3.4rem); font-weight:700; color:var(--heading);
  line-height:1; }
.assess-result-score span { font-size:0.42em; color:var(--muted); font-weight:600; }
.assess-result-msg { max-width:640px; color:var(--text); margin-top:10px; }
/* ---------- Grafikoni u rezultatu ----------
   Prsten (ukupno), radar (po oblastima) i traka raspodjele odgovora. Sve je rucno crtan SVG,
   bez biblioteke — sajt nema chart lib i ne treba mu zbog tri prikaza. */
.assess-result-top { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:8px; }
.assess-result-head { flex:1 1 320px; min-width:280px; }
.assess-result-head h3 { margin-top:10px; }
.assess-gauge { position:relative; width:150px; height:150px; flex:none; }
.assess-gauge .ag-svg { width:100%; height:100%; display:block; }
.assess-gauge .ag-track { fill:none; stroke:var(--line); stroke-width:11; }
.assess-gauge .ag-arc { fill:none; stroke-width:11; stroke-linecap:round; stroke:var(--seal); }
.assess-gauge .ag-arc.lvl-1 { stroke:#C24545; }
.assess-gauge .ag-arc.lvl-2 { stroke:#B4791E; }
.assess-gauge .ag-arc.lvl-3 { stroke:var(--steel); }
.assess-gauge .ag-arc.lvl-4 { stroke:var(--seal); }
@keyframes agFill { from { stroke-dashoffset:var(--ag-from); } }
.assess-gauge .ag-mid { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.assess-gauge .ag-mid strong { font-family:var(--display); font-size:1.9rem; font-weight:700;
  color:var(--heading); line-height:1; font-variant-numeric:tabular-nums; }
.assess-gauge .ag-mid span { font-size:0.72rem; color:var(--muted); margin-top:3px; }

.assess-charts { display:grid; grid-template-columns:300px 1fr; gap:30px; margin-top:28px;
  align-items:start; }
@media (max-width:860px){ .assess-charts { grid-template-columns:1fr; gap:24px; } }
.assess-bars h4, .assess-mix h4 { font-size:0.96rem; margin-bottom:4px; }
.assess-bars .assess-cat-list { margin-top:14px; }

.assess-radar .ar-svg { width:100%; max-width:300px; height:auto; display:block; margin:0 auto; }
.assess-radar .ar-grid { fill:none; stroke:var(--line); stroke-width:1; }
.assess-radar .ar-axis { stroke:var(--line); stroke-width:1; }
.assess-radar .ar-area { fill:rgba(15,191,143,0.22); stroke:var(--seal); stroke-width:2;
  stroke-linejoin:round; }
.assess-radar .ar-dot { fill:var(--seal); }
.assess-radar .ar-num { fill:var(--muted); font-size:10px; font-family:var(--sans); font-weight:700; }

.assess-mix { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.assess-mix .am-bar { display:flex; height:30px; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); margin-top:10px; }
.assess-mix .am-seg { display:flex; align-items:center; justify-content:center; min-width:0;
  font-size:0.75rem; font-weight:700; color:var(--on-seal); }
.assess-mix .am-seg span { overflow:hidden; }
.assess-mix .am-seg.am-yes     { background:var(--seal); }
.assess-mix .am-seg.am-partial { background:#5FD3AE; }
.assess-mix .am-seg.am-planned { background:#E0B75C; color:#3A2A05; }
.assess-mix .am-seg.am-no      { background:#D98A80; color:#3A0F0A; }
.assess-mix .am-leg { list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px;
  font-size:0.78rem; color:var(--text); }
.assess-mix .am-leg li { display:inline-flex; align-items:center; gap:7px; }
.assess-mix .am-leg i { width:11px; height:11px; border-radius:3px; flex:none; }
.assess-mix .am-leg li.am-yes i     { background:var(--seal); }
.assess-mix .am-leg li.am-partial i { background:#5FD3AE; }
.assess-mix .am-leg li.am-planned i { background:#E0B75C; }
.assess-mix .am-leg li.am-no i      { background:#D98A80; }

.assess-cat-list { display:grid; gap:12px; margin-top:26px; }
.assess-cat-row { display:grid; grid-template-columns:20px 170px 1fr auto; align-items:center;
  gap:10px; font-size:0.88rem; }
@media (max-width:600px) { .assess-cat-row { grid-template-columns:20px 1fr auto; gap:4px 10px; }
  .assess-cat-row .ac-bar { grid-column:1 / -1; } }
/* Broj oblasti odgovara broju ose na radaru lijevo. */
.assess-cat-row .ac-no { width:19px; height:19px; border-radius:6px; background:var(--line);
  color:var(--heading); font-size:0.68rem; font-weight:700; display:inline-flex;
  align-items:center; justify-content:center; flex:none; }
.assess-cat-row .ac-label { color:var(--heading); font-weight:600; }
.assess-cat-row .ac-bar { height:9px; border-radius:5px; background:var(--line); overflow:hidden; }
.assess-cat-row .ac-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,var(--steel),var(--seal)); }
.assess-cat-row .ac-pct { color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; }
.assess-result-cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px; }
@media (max-width:700px) { .assess-result-cols { grid-template-columns:1fr; } }
.assess-result-col h4 { font-size:0.96rem; margin-bottom:10px; }
.assess-result-col ul { list-style:none; display:grid; gap:8px; }
.assess-result-col li { font-size:0.87rem; color:var(--text); padding-left:20px; position:relative; }
.assess-result-col.ac-strong li::before { content:"✓"; position:absolute; left:0; color:var(--seal-deep); font-weight:700; }
.assess-result-col.ac-gaps li::before { content:"!"; position:absolute; left:0; color:#B4791E; font-weight:700; }
.assess-unsure-note { font-size:0.82rem; color:var(--muted); margin-top:18px; }
.assess-result-disclaimer { background:var(--note-bg); border:1px solid var(--note-border); border-left:5px solid var(--seal);
  border-radius:10px; padding:16px 20px; margin-top:28px; font-size:0.86rem; color:var(--note-text); }
.assess-cta-box { margin-top:30px; padding-top:26px; border-top:1px solid var(--line); text-align:center; }
.assess-cta-box h4 { font-size:1.15rem; }
.assess-cta-box p { color:var(--muted); max-width:520px; margin:6px auto 18px; }
/* Kontakt uz rezultat: polja poravnata lijevo, kao u ostatku obrasca */
.assess-cta-box .assess-field-grid, .assess-cta-box .assess-consent, .assess-cta-box .assess-cap,
.assess-cta-box .assess-privacy-note { text-align:left; max-width:640px; margin-left:auto; margin-right:auto; }
.assess-cta-box .assess-consent, .assess-cta-box .assess-cap { margin-top:16px; }
.assess-cta-box .assess-btn-primary { margin-top:18px; }
.assess-start-again { display:block; margin:18px auto 0; background:none; border:none; color:var(--muted);
  text-decoration:underline; font-size:0.82rem; cursor:pointer; }
.assess-thanks { text-align:center; padding:40px 20px; }
.assess-thanks .at-icon { font-size:2.6rem; margin-bottom:12px; }
.assess-live-region { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:640px) { .assess-intro { padding:28px 22px; } .assess-intro-top { flex-direction:column; } .assess-toggle { width:100%; justify-content:center; } }


/* ---------- Brzi kontakt (fiksno, dolje desno) ----------
   z-index 55: iznad sadrzaja, ali ispod otvorenog mega-menija (60), da ga meni prekrije.
   Ikone su SVG pa su ostre na svakoj rezoluciji i u svakoj velicini. */
.chat-fab { position:fixed; right:18px; bottom:18px; z-index:55;
  display:flex; flex-direction:column-reverse; gap:10px; }
.chat-fab a { width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  color:#fff; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,0.30);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.chat-fab a:hover, .chat-fab a:focus-visible { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,0.38); }
.chat-fab a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.chat-fab svg { width:28px; height:28px; display:block; }
.chat-fab .cf-wa { background:var(--wa); }
.chat-fab .cf-vb { background:var(--vb); }
.chat-fab .cf-tg { background:var(--tg); }
.chat-fab .cf-ph { background:var(--accent); color:#04231f; }
@media (max-width:560px){ .chat-fab { right:12px; bottom:12px; gap:8px; }
  .chat-fab a { width:48px; height:48px; } .chat-fab svg { width:25px; height:25px; } }
@media (prefers-reduced-motion:reduce){
  .chat-fab a { transition:none; } .chat-fab a:hover, .chat-fab a:focus-visible { transform:none; } }
@media print { .chat-fab { display:none; } }

/* ---------- Sitne ikone (meni, meta linije, naslovi) ----------
   Inline SVG sa currentColor: nasljeđuju boju teksta, ostre su na svakoj
   rezoluciji i ne traze dodatni zahtjev. Uvijek aria-hidden — uz njih
   stoji tekst, pa citacu ekrana ne treba jos jednom isto. */
.mi { width:16px; height:16px; flex:0 0 16px; margin-right:9px; opacity:.62;
  vertical-align:-3px; transition:opacity .18s var(--ease-out); }
.menu a:hover .mi, .menu a:focus-visible .mi { opacity:1; }
.menu a { display:flex; align-items:center; }
.reg-meta .mi { width:14px; height:14px; flex:0 0 14px; margin-right:5px; opacity:.7; vertical-align:-2px; }
h2 > .h-ico { width:22px; height:22px; margin-right:10px; vertical-align:-4px; color:var(--accent); opacity:.9; }
@media (prefers-reduced-motion:reduce){ .mi { transition:none; } }

/* Na uskom ekranu je kartica jedna kolona preko cijele sirine; centrirano se
   cita mirnije nego lijevo poravnat blok sa ikonom u uglu. */
@media (max-width:640px){
  .card { text-align:center; align-items:center; }
  .card p, .card h3, .card .std-code { text-align:center; }
  .card .std-card-icon { margin-left:auto; margin-right:auto; }
  .card .more { align-self:center; }
}

/* ---------- Saće standarda (.hgrid) ----------
   Postojeci .hcomb je cvijet od 7 celija sa fiksnim pozicijama i ne moze primiti 35.
   Ovdje su sestougaonici sa vrhom gore (h = w * 2/sqrt3), slozeni u 5 redova po 7.
   Redovi se preklapaju po visini za 25% (tako se sace sklapa); posto su svi redovi
   iste duzine, parni se moraju pomjeriti za pola celije, inace bi se poklopili. */
.hgrid-wrap { margin:34px auto 8px; }
.hgrid { --w:118px; --h:calc(var(--w) * 1.1547); --g:7px;
  display:flex; flex-direction:column; align-items:center; }
.hgrid-row { display:flex; gap:var(--g); }
.hgrid-row + .hgrid-row { margin-top:calc(var(--h) * -0.25 + var(--g) * 0.5); }
.hgrid-row:nth-child(even) { transform:translateX(calc((var(--w) + var(--g)) / 2)); }
.hgrid-cell { width:var(--w); height:var(--h); flex:none;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:var(--surface); border:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 8px; font-family:var(--display); font-weight:700;
  font-size:0.78rem; line-height:1.2; color:var(--heading); text-decoration:none;
  transition:background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out); }
.hgrid-cell:hover, .hgrid-cell:focus-visible {
  background:var(--accent); color:var(--accent-contrast); transform:scale(1.06); }
.hgrid-cell:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* sitna oznaka ispod naziva */
.hgrid-cell small { display:block; font-weight:500; font-size:0.64rem; opacity:.72; margin-top:2px; }
@media (max-width:1080px){ .hgrid { --w:104px; } }
@media (max-width:900px){ .hgrid { --w:92px; --g:6px; }
  .hgrid-cell { font-size:0.68rem; padding:0 6px; }
  .hgrid-cell small { font-size:0.6rem; } }
@media (max-width:840px){ .hgrid { --w:88px; } }
/* Ispod 760px saće se raspada u obican niz: red od 7 sestougaonika trazi oko
   700px, a da bi stao morali bi biti toliko sitni da se naziv vise ne cita. */
@media (max-width:760px){
  .hgrid { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; max-width:560px; }
  .hgrid-row { display:contents; }
  .hgrid-row:nth-child(even) { transform:none; }
  .hgrid-row + .hgrid-row { margin-top:0; }
  .hgrid-cell { width:auto; height:auto; clip-path:none; border-radius:999px; flex-direction:row;
    border:1px solid var(--line); padding:9px 14px; font-size:0.8rem; }
  .hgrid-cell small { display:inline; margin:0 0 0 5px; }
}
@media (prefers-reduced-motion:reduce){ .hgrid-cell { transition:none; }
  .hgrid-cell:hover, .hgrid-cell:focus-visible { transform:none; } }

/* Kartice standarda su centrirane na svakoj sirini, ne samo na telefonu: ikona,
   oznaka, naslov i opis. Bira ih :has(.std-code) da ostale kartice na sajtu
   (oblasti, usluge) zadrze svoje lijevo poravnanje. */
.card:has(.std-code) { text-align:center; align-items:center; }
.card:has(.std-code) p,
.card:has(.std-code) h3,
.card:has(.std-code) .std-code { text-align:center; }
.card:has(.std-code) .std-card-icon { margin-left:auto; margin-right:auto; }
.card:has(.std-code) .more { align-self:center; }

/* ============================================================
   FAZA D — prelazi između stranica, traka napretka, filter standarda,
   sadržaj stranice, stanja forme i mobilna CTA traka.

   Sve što je ovdje dolje je nadogradnja (progressive enhancement): ako pretraživač
   ne podržava neku funkciju ili je JS ugašen, stranica izgleda tačno kao i prije.
   Tekst za sve što JS ubacuje dolazi iz site.js po jeziku stranice.
   ============================================================ */

/* ---------- Prelaz između stranica ----------
   Sajt je klasičan višestranični, pa je svaki klik do sada bio tvrdi rez. Ovo daje meko
   pretapanje, a zaglavlje ostaje na mjestu jer nosi svoje ime prelaza. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: zaglavlje; }
::view-transition-old(root) { animation:vtOut .18s ease both; }
::view-transition-new(root) { animation:vtIn .26s ease both; }
@keyframes vtOut { to { opacity:0; } }
@keyframes vtIn { from { opacity:0; transform:translateY(6px); } }
/* Globalni prekidač za pokret (* { animation:none }) NE hvata ::view-transition pseudo-elemente
   jer oni žive u gornjem sloju — zato im treba zasebno gašenje. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}

/* ---------- Traka napretka čitanja ----------
   Bez ijedne linije JS-a: traka je vezana za skrol dokumenta. Crta se preko body::before,
   pa nijedna stranica ne mora dobiti novi element. Pretraživači koji ne znaju scroll()
   ne dobiju ništa — nikad zaglavljenu punu traku. */
@supports (animation-timeline: scroll()) {
  body::before { content:""; position:fixed; inset:0 0 auto 0; height:3px; z-index:70; transform-origin:0 50%;
    background:linear-gradient(90deg, var(--seal), var(--accent-on-dark)); transform:scaleX(0);
    animation:citanjeNapredak linear both; animation-timeline:scroll(root block); }
  @keyframes citanjeNapredak { to { transform:scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { body::before { display:none; } }
}

/* ---------- Filter na listama standarda ----------
   27 kartica u nizu bez ijednog načina da se suze. Polje za kucanje + grupe.
   Ubacuje ga site.js iznad mreže kartica, samo ako mreža ima bar 8 kartica. */
.stdfilter { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 26px; }
.stdfilter-search { position:relative; flex:1 1 260px; min-width:220px; }
.stdfilter-search input { width:100%; padding:11px 14px 11px 38px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--text); font:inherit; font-size:0.92rem;
  transition:border-color .18s ease, box-shadow .18s ease; }
.stdfilter-search input:focus { outline:none; border-color:var(--seal); box-shadow:0 0 0 3px rgba(15,191,143,0.18); }
.stdfilter-search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:2; pointer-events:none; }
.stdfilter-chips { display:flex; flex-wrap:wrap; gap:6px; }
.stdfilter-chip { font-family:var(--display); font-size:0.82rem; font-weight:700; cursor:pointer;
  padding:8px 14px; min-height:24px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--surface); color:var(--heading);
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .15s var(--ease-out); }
.stdfilter-chip:hover { border-color:var(--seal); transform:translateY(-1px); }
.stdfilter-chip[aria-pressed="true"] { background:var(--seal); border-color:var(--seal); color:var(--on-seal); }
.stdfilter-count { width:100%; font-size:0.84rem; color:var(--muted); }
.stdfilter-prazno { padding:26px 0; color:var(--muted); font-size:0.94rem; }
.card.je-skriven { display:none; }

/* Pasus odmah poslije spiska nije imao razmak, pa se čitao kao nastavak zadnje stavke. */
.prose ul + p, .prose ol + p, .prose ul + h3, .prose ol + h3 { margin-top:0.95em; }

.reg-more { margin:8px 0 0; font-size:0.85rem; }
.reg-more a { font-weight:600; text-decoration:none; }
.reg-more a:hover { text-decoration:underline; }

/* ---------- Referentna tabela na stranicama oblasti ----------
   Podaci su izvod iz javno objavljene referentne liste na mobes.me/reference. */
.ref-tabela-okvir { overflow-x:auto; margin-top:22px; border:1px solid var(--line); border-radius:14px; }
.ref-tabela { width:100%; border-collapse:collapse; font-size:0.92rem; }
.ref-tabela thead th { text-align:left; font-family:var(--display); font-size:0.78rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); background:var(--surface-alt); padding:12px 16px;
  border-bottom:1px solid var(--line); white-space:nowrap; }
.ref-tabela tbody th { text-align:left; font-weight:700; color:var(--heading); font-family:var(--display);
  padding:12px 16px; vertical-align:top; }
.ref-tabela tbody td { padding:12px 16px; color:var(--muted); vertical-align:top; }
.ref-tabela tbody tr + tr th, .ref-tabela tbody tr + tr td { border-top:1px solid var(--line); }
.ref-tabela tbody tr:hover th, .ref-tabela tbody tr:hover td { background:var(--surface-alt); }
.ref-izvor { margin-top:12px; font-size:0.84rem; color:var(--muted); }
/* naslov tabele postoji za citace ekrana, ali se ne prikazuje */
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Karta dosega (region stranica) ----------
   Traka je uvijek tamna, u obije teme, jer je karta crtana za tamnu podlogu. Ispod karte ide
   ista informacija kao tekst — karta je slika i pretrazivac iz nje ne cita nista. */
.reg-map { background:var(--ink); color:var(--white); padding:56px 0; }
.reg-map h2 { color:var(--white); }
.reg-map .section-intro { color:var(--on-dark-strong); }
.reg-map img { display:block; width:100%; height:auto; margin:26px 0 6px; }
.reg-map-legenda { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:20px 26px; margin-top:22px; }
.reg-map-legenda strong { display:block; font-family:var(--display); color:var(--accent-on-dark); font-size:0.95rem; margin-bottom:5px; }
.reg-map-legenda p { color:var(--on-dark-strong); font-size:0.88rem; line-height:1.55; }

/* ---------- Jezik umjesto zemlje ----------
   Turska, Rusija i EU/UK nisu tržišta na koja izlazimo na teren nego firme registrovane ovdje
   kao d.o.o., čija uprava govori drugi jezik. Zato im mjesto nije u spisku zemalja (koji govori
   gdje radimo) nego u zasebnom bloku koji govori na kojim jezicima radimo. */
.lang-reach { margin:30px auto 0; max-width:760px; text-align:center;
  border-top:1px solid var(--line); padding-top:26px; }
.lang-reach h3 { margin-bottom:8px; }
.lang-reach p { color:var(--muted); font-size:0.94rem; max-width:640px; margin:0 auto 16px; }
.lang-reach .related { justify-content:center; }

/* ---------- Forma: stanje slanja i greške uz samo polje ----------
   Do sada je dugme ćutalo dok se šalje, a greške su stizale tek sa servera. */
/* Boje su fiksne, ne theme-aware: .cform je uvijek svijetla kartica (vidi komentar uz .cform label),
   pa bi --warn-text u tamnoj temi bio svijetli losos na bijelom — izmjereno 1.77:1. Ovako je 8.3:1
   u obije teme. */
.cform .f-greska { display:block; margin-top:5px; font-size:0.82rem; font-weight:600; color:#8E2C1E; }
.cform :is(input,textarea,select).je-neispravan { border-color:#C4574A;
  box-shadow:0 0 0 3px rgba(232,106,90,0.14); }
.cform button[disabled] { cursor:progress; opacity:0.75; }
.cform button[disabled] .btn-spiner { display:inline-block; width:13px; height:13px; margin-right:8px;
  vertical-align:-2px; border:2px solid rgba(6,35,27,0.28); border-top-color:var(--on-seal); border-radius:50%;
  animation:spiner .7s linear infinite; }
@keyframes spiner { to { transform:rotate(360deg); } }

/* ---------- Mobilna CTA traka ----------
   Plutajući dugmići za poruke (.chat-fab) postoje odavno, ali "Zatraži ponudu" nije bio
   nadohvat palca. Traka se pojavi tek kad korisnik pređe ~40% stranice, da ne smeta odmah. */
.mob-cta { position:fixed; left:0; right:0; bottom:0; z-index:56; display:none; gap:8px; padding:9px 12px;
  background:var(--glass-bg-scrolled); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .28s var(--ease-out); }
.mob-cta.je-vidljiv { transform:none; }
.mob-cta .btn { flex:1 1 0; text-align:center; padding:12px 14px; font-size:0.9rem; }
@media (max-width:720px){
  .mob-cta { display:flex; }
  /* Dugmići za poruke se dižu iznad trake da se ne preklope. */
  .mob-cta.je-vidljiv ~ .chat-fab, body:has(.mob-cta.je-vidljiv) .chat-fab { bottom:76px; }
}

/* ==================== Pretraga sajta ====================
   Dugme u meniju nosi klasu .theme-toggle, pa nasljeđuje izgled prekidača teme.
   Prozor koristi tokene teme (--surface, --line, --heading…), pa radi u obje teme bez izuzetaka. */
.srch { position:fixed; inset:0; z-index:2000; display:flex; align-items:flex-start; justify-content:center;
  padding:10vh 16px 16px; background:rgba(6,20,19,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .18s ease; }
.srch.is-open { opacity:1; }
/* Obavezno: .srch ima display:flex, a to pregazi ugrađeno [hidden]{display:none} pregledača —
   bez ovoga zatvoren prozor ostaje nevidljiv sloj preko cijele stranice i guta svaki klik mišem. */
.srch[hidden] { display:none !important; }
.srch-panel { width:100%; max-width:680px; overflow:hidden; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,0.35); }
.srch-bar { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.srch-bar svg { width:20px; height:20px; flex:none; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
.srch-bar input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--heading);
  font:inherit; font-size:1.05rem; }
.srch-bar input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.srch-x { flex:none; font:inherit; font-size:0.72rem; font-weight:700; color:var(--muted); cursor:pointer;
  background:var(--surface-alt); border:1px solid var(--line); border-radius:6px; padding:3px 7px; }
.srch-x:hover, .srch-x:focus-visible { color:var(--heading); border-color:var(--seal); }
.srch-lista { list-style:none; margin:0; padding:6px; max-height:min(56vh, 480px); overflow-y:auto; }
.srch-lista:empty { display:none; }
.srch-lista a { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:10px;
  text-decoration:none; color:inherit; }
.srch-lista a strong { color:var(--heading); font-size:0.95rem; }
.srch-lista a span { color:var(--muted); font-size:0.84rem; line-height:1.45; }
.srch-lista li.je-aktivan a, .srch-lista a:hover, .srch-lista a:focus-visible { background:var(--surface-alt); outline:none; }
.srch-lista li.je-aktivan a strong, .srch-lista a:hover strong { color:var(--accent-label); }
.srch-status { margin:0; padding:12px 18px; color:var(--muted); font-size:0.88rem; }
.srch-status:empty { display:none; }
.srch-pomoc { margin:0; padding:9px 16px; font-size:0.74rem; color:var(--muted);
  border-top:1px solid var(--line); background:var(--surface-alt); }
html.srch-otvoren { overflow:hidden; }
@media (max-width:640px){ .srch { padding:12px; } .srch-pomoc { display:none; } .srch-lista { max-height:70vh; } }
@media (prefers-reduced-motion: reduce){ .srch { transition:none; } }

/* ============================================================
   FORMA — savremeniji izgled (17.09.2026)
   Kartica ostaje bijela (čitljivost), ali dobija živ okvir, ikonice u poljima, kvačicu kad je
   polje ispravno, ulazak polja jedno za drugim i papirni avion koji poleti pri slanju.
   Sve je CSS + nekoliko linija u site.js; nijedna nova slika ni biblioteka. Ikonice su vezane za
   name atribut polja, pa rade na svih 8 jezika bez izmjene HTML-a.
   ============================================================ */
@property --cf-ugao { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.cform { position:relative; border:1.5px solid transparent;
  background:linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--cf-ugao), rgba(15,191,143,0.65), rgba(14,138,128,0.10) 28%,
      rgba(79,224,190,0.55) 52%, rgba(14,138,128,0.10) 78%, rgba(15,191,143,0.65)) border-box;
  transition:box-shadow .45s ease, transform .45s var(--ease-out); }
.cform:focus-within { animation:cfOkvir 7s linear infinite; transform:translateY(-3px);
  box-shadow:0 30px 70px rgba(0,0,0,0.34), 0 0 0 5px rgba(15,191,143,0.12), 0 0 60px -8px rgba(15,191,143,0.35); }
@keyframes cfOkvir { to { --cf-ugao:360deg; } }

.cform label { transition:color .2s ease, transform .25s var(--ease-out); }
.cform > div:focus-within > label { color:#0E8A80; transform:translateX(3px); }
.cform ::placeholder { color:#7A9894; opacity:1; transition:opacity .2s ease; }
.cform :focus::placeholder { opacity:0.5; }
.cform :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea):hover:not(:focus) { border-color:#B9D3CE; }

/* Ikonice: jedna varijabla po polju, jedno pravilo za sve. `background` skraćenica iz starijeg
   :focus pravila briše sliku, zato fokus ponovo postavlja sve pozadinske osobine. */
.cform input[name="ime"] { --cf-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A9894' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); --cf-ik-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
.cform input[name="firma"] { --cf-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A9894' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16M16 9h3a2 2 0 0 1 2 2v10M9 7h3M9 11h3M9 15h3'/%3E%3C/svg%3E"); --cf-ik-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16M16 9h3a2 2 0 0 1 2 2v10M9 7h3M9 11h3M9 15h3'/%3E%3C/svg%3E"); }
.cform input[name="email"] { --cf-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A9894' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); --cf-ik-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.cform input[name="telefon"] { --cf-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A9894' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); --cf-ik-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.cform select[name="standard"], .cform select[name="usluga"] { --cf-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A9894' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='m8.5 14-1.5 8 5-3 5 3-1.5-8'/%3E%3C/svg%3E"); --cf-ik-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='m8.5 14-1.5 8 5-3 5 3-1.5-8'/%3E%3C/svg%3E"); }
.cform textarea[name="poruka"] { --cf-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A9894' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 8h8M8 12h5'/%3E%3C/svg%3E"); --cf-ik-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 8h8M8 12h5'/%3E%3C/svg%3E"); }
.cform :is(input, select, textarea)[style], .cform :is(input[name], select[name], textarea[name]) { }
.cform :is(input[name="ime"], input[name="firma"], input[name="email"], input[name="telefon"], select[name="standard"], select[name="usluga"], textarea[name="poruka"]) {
  padding-left:42px; background-color:#F1F8F6; background-image:var(--cf-ik); background-repeat:no-repeat;
  background-size:18px 18px; background-position:left 14px center;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .25s ease; }
.cform textarea[name="poruka"] { background-position:left 14px top 13px; }
.cform :is(input[name="ime"], input[name="firma"], input[name="email"], input[name="telefon"], select[name="standard"], select[name="usluga"], textarea[name="poruka"]):focus {
  background-color:#fff; background-image:var(--cf-ik-f); background-repeat:no-repeat; background-size:18px 18px;
  background-position:left 14px center; box-shadow:0 0 0 4px rgba(14,138,128,0.16), 0 6px 18px rgba(14,138,128,0.10); }
.cform textarea[name="poruka"]:focus { background-position:left 14px top 13px; }
/* Ispravno popunjeno obavezno polje: kvačica desno. */
.cform :is(input, textarea).je-ispravan { --cf-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230FBF8F'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); padding-right:42px; border-color:#9ED8C4;
  background-image:var(--cf-ok), var(--cf-ik); background-size:18px 18px, 18px 18px;
  background-position:right 13px center, left 14px center; }
.cform :is(input, textarea).je-ispravan:focus { background-image:var(--cf-ok), var(--cf-ik-f);
  background-position:right 13px center, left 14px center; }
.cform textarea.je-ispravan, .cform textarea.je-ispravan:focus { background-position:right 13px top 12px, left 14px top 13px; }

/* Dugme: papirni avion uz natpis, na hover se malo zaleti. */
.cform button[type="submit"] { display:flex; align-items:center; justify-content:center; gap:10px; }
.cf-avion { display:inline-flex; width:19px; height:19px; flex:none; transition:transform .35s var(--ease-out); }
.cf-avion svg { width:100%; height:100%; }
.cform button[type="submit"]:hover .cf-avion, .cform button[type="submit"]:focus-visible .cf-avion {
  transform:translate(4px,-4px) rotate(-10deg); }
/* Avion koji poleti — privremen element na body, pravi ga site.js samo u trenutku slanja. */
/* Boja je srednja zelena: na bijeloj kartici i na tamnoj traci jednako se vidi (svijetla mint je
   preko bijele kartice bila gotovo nevidljiva). */
.cf-let { position:fixed; z-index:120; width:26px; height:26px; margin:-3px 0 0 -3px; pointer-events:none;
  color:#0C9E78; filter:drop-shadow(0 4px 8px rgba(6,35,27,0.35)); will-change:transform, opacity; }
.cf-let svg { width:100%; height:100%; fill:rgba(15,191,143,0.30); stroke-width:2.1; }
/* Talas sa dugmeta u trenutku klika. */
.cform button[type="submit"].cf-talas { animation:cfTalas .7s ease-out; }
@keyframes cfTalas { 0% { box-shadow:0 0 0 0 rgba(15,191,143,0.55); } 100% { box-shadow:0 0 0 18px rgba(15,191,143,0); } }

/* Ulazak: polja jedno za drugim (site.js dodaje klase samo formi koja je ispod ekrana). */
.cform.cf-ulaz > * { opacity:0; transform:translateY(14px); }
.cform.cf-ulaz.cf-vidljiv > * { opacity:1; transform:none;
  transition:opacity .5s ease, transform .6s var(--ease-out); transition-delay:calc(var(--cf-i, 0) * 55ms); }

/* Potvrda poslije slanja: kvačica se iscrta, mali avion preleti preko kartice. */
.form-ok { position:relative; overflow:hidden; }
.form-ok.je-poslato { padding:16px 22px 16px 58px; border-radius:12px; line-height:1.5;
  box-shadow:0 12px 30px rgba(0,0,0,0.12); animation:okUlaz .55s var(--ease-out) both; }
.ok-ikona { position:absolute; left:18px; top:50%; width:28px; height:28px; margin-top:-14px; }
.ok-ikona svg { width:100%; height:100%; overflow:visible; }
.ok-ikona circle { fill:#0FBF8F; transform-origin:12px 12px; animation:okKrug .45s var(--ease-out) .15s both; }
.ok-ikona path { fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:16; stroke-dashoffset:16; animation:okKvaka .4s ease-out .5s forwards; }
.form-ok.je-poslato::after { content:""; position:absolute; top:4px; left:0; width:20px; height:20px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230FBF8F' fill-opacity='.25' stroke='%230E8A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E") no-repeat center/contain; opacity:0; animation:okAvion 1.8s cubic-bezier(.45,0,.25,1) .6s both; }
@keyframes okUlaz { from { opacity:0; transform:translateY(-10px) scale(0.97); } to { opacity:1; transform:none; } }
@keyframes okKrug { from { transform:scale(0); } 70% { transform:scale(1.15); } to { transform:scale(1); } }
@keyframes okKvaka { to { stroke-dashoffset:0; } }
@keyframes okAvion { 0% { left:40px; transform:translateY(18px) rotate(12deg); opacity:0; }
  15% { opacity:0.9; } 80% { opacity:0.9; } 100% { left:calc(100% - 20px); transform:translateY(0) rotate(-4deg); opacity:0; } }

@media (prefers-reduced-motion: reduce) {
  .cform, .cform:focus-within { animation:none; transform:none; }
  .cform label, .cform > div:focus-within > label { transform:none; }
  .cf-avion, .cform button[type="submit"]:hover .cf-avion { transform:none; transition:none; }
  .form-ok.je-poslato, .ok-ikona circle { animation:none; }
  .ok-ikona path { animation:none; stroke-dashoffset:0; }
  .form-ok.je-poslato::after { display:none; }
}


/* ---------------------------------------------------------------
   PARALAKS TRAKA SA FOTOGRAFIJOM (početna: Faze implementacije)
   Fotografija je u ::before i šira je od sekcije, pa se pri skrolu
   pomjera lijevo-desno (--px-x postavlja phase-b.js). Tekst stoji na
   tamnoj kartici, kao kod .foto-traka, da kontrast ostane visok.
   Bez JS-a i uz prefers-reduced-motion slika miruje — izgled isti.
   --------------------------------------------------------------- */
.px-foto.px-foto { position:relative; overflow:hidden; background-color:#0C2825; padding:72px 0; }
.px-foto::before { content:""; position:absolute; top:-6%; left:-14%; width:128%; height:112%; z-index:0;
  background-image:var(--px-foto); background-size:cover; background-position:center;
  transform:translate3d(var(--px-x, 0px), 0, 0); will-change:transform; }
.px-foto::after { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,24,22,0.46) 0%, rgba(7,24,22,0.34) 55%, rgba(7,24,22,0.52) 100%); }
.px-foto > .wrap { position:relative; z-index:2; background:rgba(7,24,22,0.88); border-radius:18px;
  padding:34px 26px 30px; backdrop-filter:blur(3px); }
@supports not (backdrop-filter:blur(3px)) { .px-foto > .wrap { background:rgba(7,24,22,0.93); } }
.px-foto h2 { color:#fff; }
.px-foto .section-intro { color:var(--on-dark-strong); }
.px-foto .fstep { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.22); }
.px-foto .fstep strong { color:#fff; }
.px-foto .fstep span { color:var(--on-dark-strong); }
.px-foto .fstep.last { background:linear-gradient(120deg,var(--seal),#34D9A8); border-color:transparent; }
.px-foto .fstep.last strong, .px-foto .fstep.last span, .px-foto .fstep.last strong::before { color:var(--on-seal); }
.px-foto.is-enhanced .pb-process-track { background:rgba(255,255,255,0.18); }
@media (max-width:640px){ .px-foto.px-foto { padding:52px 0; } .px-foto > .wrap { border-radius:14px; padding:24px 18px; } }
@media (prefers-reduced-motion:reduce){ .px-foto::before { transform:none; } }

/* Jezički spisak u dvije kolone: 10 stavki (CG EN SR AL HR BH MK RU TR KS) mora stati
   bez skrolovanja i na telefonu — ranije je lista bila jedna kolona pa su posljednji
   jezici ostajali ispod ivice okvira i djelovali kao da ih nema. */
.nav details.dd.lang-dd .menu.lang-menu { display:grid; grid-template-columns:1fr 1fr; gap:2px 6px;
  max-height:none; overflow:visible; min-width:190px; }
.lang-menu a { padding-left:10px; padding-right:10px; }
@media (max-width:1239px){
  .nav details.dd.lang-dd .menu.lang-menu { max-height:none; overflow:visible; }
}

/* ============================================================
   EFEKTI VEZANI ZA SKROL (scroll-driven animations)
   Sve ispod je čisti CSS — animacija je vezana za položaj elementa u vidnom polju
   (animation-timeline:view()), odnosno za skrol cijele stranice (scroll(root block)),
   pa nema ni jedne nove linije JS-a, ni nove biblioteke, ni izmjene u ijednom HTML fajlu. Pregledač koji ne zna view() ne dobije ništa
   i stranica izgleda tačno kao do sada; uz prefers-reduced-motion sve se gasi.
   Animiraju se samo transform i opacity — dakle kompozitorska svojstva, bez ponovnog
   crtanja pri svakom kadru (zato se fotografije NE pomjeraju preko background-position).
   ============================================================ */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero — dok traka odlazi sa ekrana, tekst se blago podiže i gasi, pa se sadržaj
        ispod "otvara". Ide na .wrap, a ne na djecu (.eyebrow, h1, .lead, .cta-row) koja
        već imaju svoju ulaznu animaciju pri učitavanju, pa se ne sudaraju.
        Hero je na samom vrhu dokumenta i tu view() ne valja: početak "cover" opsega pada
        na negativan skrol koji se nikad ne dostigne, pa animacija krene već završena.
        Zato je vezana za skrol cijele stranice, od 90. do 470. piksela.
        Samo desktop: na telefonu je hero visok (tri dugmeta jedno ispod drugog), pa bi
        tekst blijedio dok je još uveliko na ekranu. */
  @media (min-width:861px) {
    .hero > .wrap { animation:herojOdlazi linear both; animation-timeline:scroll(root block);
      animation-range:90px 470px; }
  }
  @keyframes herojOdlazi { to { transform:translateY(-26px); opacity:0.35; } }

  /* 2. Faze implementacije — šina napretka iznad koraka se puni dok se blok penje
        kroz ekran. Stranice koje već imaju GSAP traku (.pb-process: početna, stranica o
        implementaciji, ISO 9001) preskaču ovo da ne bi imale dvije šine. Na telefonu je
        .flow kolona, pa vodoravna šina nema smisla — ide od 861px naviše. */
  @media (min-width:861px) {
    section:not(.pb-process) > .wrap > .flow { position:relative; padding-top:20px; }
    section:not(.pb-process) > .wrap > .flow::before,
    section:not(.pb-process) > .wrap > .flow::after {
      content:""; position:absolute; top:5px; left:0; right:0; height:3px; border-radius:99px; }
    section:not(.pb-process) > .wrap > .flow::before { background:var(--line); }
    section:not(.pb-process) > .wrap > .flow::after {
      background:linear-gradient(90deg, var(--seal), #34D9A8); transform:scaleX(0); transform-origin:left center;
      animation:sinaVodoravna linear both; animation-timeline:view(); animation-range:entry 55% exit 5%; }
    /* na tamnoj fotografskoj traci (HACCP) siva šina se ne vidi; selektor mora imati
       bar istu težinu kao pravilo iznad (section + ::before su dva elementa) */
    section.px-foto > .wrap > .flow::before { background:rgba(255,255,255,0.18); }
  }
  @keyframes sinaVodoravna { to { transform:scaleX(1); } }

  /* 3. Zahtjevi standarda (klauzule) — uspravna šina uz listu koja se boji kako se čita.
        Lista se uvlači za 20px da šina ima svoj prostor. */
  .steps { position:relative; padding-left:20px; }
  .steps::before, .steps::after { content:""; position:absolute; left:2px; top:0; width:2px; border-radius:99px; }
  .steps::before { bottom:0; background:var(--line); }
  .steps::after { height:100%; background:linear-gradient(180deg, var(--seal), #34D9A8);
    transform:scaleY(0); transform-origin:top center;
    animation:sinaUspravna linear both; animation-timeline:view(); animation-range:cover 6% cover 76%; }
  @keyframes sinaUspravna { to { transform:scaleY(1); } }

  /* 4. Vremenska linija (razvoj standarda) — siva središnja linija već postoji (.tl::before);
        preko nje ide mint sloj koji raste uz skrol. */
  .tl::after { content:""; position:absolute; left:50%; top:0; height:100%; width:3px; border-radius:99px;
    background:linear-gradient(180deg, var(--seal), #34D9A8);
    transform:translateX(-50%) scaleY(0); transform-origin:top center;
    animation:sinaLinija linear both; animation-timeline:view(); animation-range:cover 8% cover 74%; }
  @keyframes sinaLinija { to { transform:translateX(-50%) scaleY(1); } }
  @media (max-width:760px){ .tl::after { left:10px; } }

  /* 5. Kartica na foto-traci uklizava dok traka prolazi kroz ekran. Animira se
        UNUTRAŠNJA kartica, nikad sama traka — transform na traci bi pokvario
        background-attachment:fixed, tj. paralaksu fotografije.
        Namjerno BEZ promjene providnosti: "primjer iz prakse" i paralaks traka
        režu svoj sadržaj (overflow), pa u nekim pregledačima (Safari) view() unutar
        njih nema šta da mjeri i animacija ostane zaglavljena na početnom kadru —
        tekst tada trajno ostaje blijed. Pomjeranje ne može da naškodi čitljivosti,
        providnost može, pa je nema; iz istog razloga efekat nose samo trake koje
        ne režu sadržaj. */
  .foto-traka > .wrap {
    animation:karticaUlazi linear both; animation-timeline:view(); animation-range:entry 5% cover 30%; }
  @keyframes karticaUlazi { from { transform:translateY(26px); } to { transform:none; } }

  /* 6. Zupčanici u traci sa statistikom — do sada su se vrtjeli sami od sebe (20s u krug).
        Sada ih okreće skrol: jedan puni krug dok traka prelazi preko ekrana, u suprotnim
        smjerovima kod susjednih brojeva. Kad traka nije na ekranu, ništa se ne vrti. */
  .stat::after { animation:statGear linear both; animation-timeline:view(); animation-range:cover; }
  .stat:nth-child(even)::after { animation-direction:reverse; }
}
}

/* ---------- Traka koja klizi (nazivi standarda; kasnije i logotipi) ----------
   Dvije identične grupe pločica u nizu; animacija pomjeri red za tačno pola
   njegove širine, pa kad se vrati na početak prelaz se ne vidi. Red se zaustavlja
   kad se mišem ili tastaturom uđe u traku, da se na pločicu može kliknuti.
   Uz prefers-reduced-motion nema pomjeranja: kopija se sakrije, a traka postane
   obična vodoravna lista koja se prevlači prstom. */
.logo-traka { padding:30px 0; background:var(--surface-alt);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logo-traka .lt-naslov { margin:0 0 16px; text-align:center; font-family:var(--sans); font-weight:700;
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.lt-okvir { overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.lt-red { display:flex; width:max-content; animation:ltKlizi 64s linear infinite; }
@keyframes ltKlizi { to { transform:translateX(-50%); } }
.lt-okvir:hover .lt-red, .lt-okvir:focus-within .lt-red { animation-play-state:paused; }
.lt-grupa { display:flex; flex:none; gap:10px; padding-right:10px; }
.lt-cip { flex:none; display:inline-flex; align-items:center; padding:9px 17px; border-radius:99px;
  border:1px solid var(--line); background:var(--surface); color:var(--heading);
  font-family:var(--display); font-weight:700; font-size:0.92rem; letter-spacing:-0.01em;
  text-decoration:none; white-space:nowrap;
  transition:border-color .18s ease, color .18s ease, transform .18s var(--ease-out), box-shadow .18s ease; }
.lt-cip:hover, .lt-cip:focus-visible { border-color:var(--seal); color:var(--accent-label);
  transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(15,46,44,0.5); }
/* logotipi (kad se ubace): ista pločica, samo nosi sliku umjesto teksta */
.lt-cip img { display:block; height:30px; width:auto; object-fit:contain; }
@media (max-width:640px){ .logo-traka { padding:22px 0; } .lt-cip { padding:8px 14px; font-size:0.86rem; } }
@media (prefers-reduced-motion:reduce){
  .lt-okvir { overflow-x:auto; -webkit-overflow-scrolling:touch; mask-image:none; -webkit-mask-image:none; }
  .lt-red { animation:none; }
  .lt-grupa[aria-hidden="true"] { display:none; }
  .lt-cip { transition:none; }
}

/* ---------- Naslov koji se boji uz skrol ----------
   Dvobojni preliv (jaka boja → prigušena) isječen je na oblik slova; kako se
   preliv pomjera, granica boje putuje kroz naslov i tekst se "ispisuje" bojom.
   Ide na naslov sekcije sa fazama implementacije — jedan naslov po stranici
   standarda, uvijek isti, bez ijedne izmjene u HTML-u.
   Traži i view() i background-clip:text; ako bilo šta fali, naslov je običan. */
@supports ((animation-timeline: view()) and ((-webkit-background-clip: text) or (background-clip: text))) {
  @media (prefers-reduced-motion: no-preference) {
    section:has(> .wrap > .flow) > .wrap > h2 {
      background-image:linear-gradient(100deg, var(--heading) 0 46%, var(--muted) 54% 100%);
      background-size:220% 100%; background-position:100% 0; background-repeat:no-repeat;
      -webkit-background-clip:text; background-clip:text; color:transparent;
      animation:naslovBojenje linear both; animation-timeline:view(); animation-range:entry 35% cover 50%; }
    @keyframes naslovBojenje { to { background-position:0 0; } }
    /* tamna fotografska traka (HACCP, početna): isti efekat, svijetle boje */
    section.px-foto:has(> .wrap > .flow) > .wrap > h2 {
      background-image:linear-gradient(100deg, #fff 0 46%, var(--on-dark-soft) 54% 100%); }
  }
}

/* ---------- Zalijepljena fotografija uz spisak koraka ----------
   Dvije kolone: lijevo fotografija koja ostaje na mjestu (position:sticky),
   desno koraci koji prolaze pored nje. Na užim ekranima kolone se slažu jedna
   ispod druge i fotografija prestaje da bude zalijepljena. */
.sk-dvokolona { display:grid; gap:24px; }
.sk-dvokolona > .steps { margin-top:0; }
.sk-slika { border-radius:18px; border:1px solid var(--line); background-image:var(--sk-foto);
  background-size:cover; background-position:center; aspect-ratio:16/9;
  box-shadow:0 24px 50px -28px rgba(0,0,0,0.55); }
@media (min-width:1000px){
  .sk-dvokolona { grid-template-columns:minmax(230px,310px) 1fr; gap:36px; align-items:start; }
  .sk-vizuelno { position:sticky; top:96px; }
  .sk-slika { aspect-ratio:3/4; }
}

/* ---------- Galerija oblasti koja klizi uz skrol ----------
   Bez biblioteke i bez "zaključavanja" ekrana: red kartica se pomjera ulijevo
   dok sekcija prolazi kroz vidno polje, pa se u jednom potezu vide sve oblasti.
   Gdje scroll-driven animacije ne postoje (ili je uključeno "smanji pokret"),
   red ostaje obična galerija koja se prevlači prstom ili mišem. */
.hg-okvir { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-top:18px; padding-bottom:4px; }
.hg-okvir::-webkit-scrollbar { display:none; }
.hg-red { display:flex; gap:14px; width:max-content; padding:0 max(18px, calc((100vw - var(--maxw)) / 2)); }
.hg-kart { position:relative; flex:none; width:210px; aspect-ratio:3/4; border-radius:16px; overflow:hidden;
  display:flex; align-items:flex-end; text-decoration:none; border:1px solid var(--line);
  background-image:linear-gradient(180deg, rgba(7,24,22,0.12) 0%, rgba(7,24,22,0.78) 62%, rgba(7,24,22,0.92) 100%), var(--hg-foto);
  background-size:cover, cover; background-position:center, center;
  transition:transform .22s var(--ease-out), box-shadow .22s ease, border-color .18s ease; }
.hg-kart:hover, .hg-kart:focus-visible { transform:translateY(-4px); border-color:var(--seal);
  box-shadow:0 22px 44px -22px rgba(0,0,0,0.7); }
.hg-ime { display:block; padding:14px 15px; font-family:var(--display); font-weight:700; font-size:0.95rem;
  line-height:1.25; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,0.5); }
@media (max-width:640px){ .hg-kart { width:164px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width:1000px) {
    /* overflow:hidden bi od okvira napravio sopstveni scroll container, pa bi view()
       unutar njega mjerio nepostojeći skrol i red ostao zaglavljen na prvoj kartici
       — bez pomjeranja i bez mogućnosti da se prevuče. overflow:clip reže isto,
       ali ne pravi scroll container, pa se efekat računa prema skrolu stranice. */
    .hg-okvir { overflow-x:clip; overflow-y:clip; }
    .hg-red { animation:hgKlizi linear both; animation-timeline:view(); animation-range:cover 4% cover 96%; }
    @keyframes hgKlizi { to { transform:translateX(min(0px, calc(100vw - 100% - 36px))); } }
  }
}

/* ---------- Tečna mrlja u uglu kartice ----------
   Mrlja stoji skupljena u gornjem desnom uglu i na hover naraste preko cijele
   kartice — sporo, sa "istrčavanjem" na kraju. Ide iza sadržaja (z-index:-1 uz
   isolation:isolate, pa ne bježi izvan kartice) i ne hvata klik. */
.card { position:relative; isolation:isolate; overflow:hidden; }
.card::before { content:""; position:absolute; z-index:-1; top:-46px; right:-46px; width:124px; height:124px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(15,191,143,0.30) 0%, rgba(15,191,143,0.15) 45%, rgba(15,191,143,0) 72%);
  transform:scale(1); transition:transform 1s cubic-bezier(.16,1,.3,1); }
.card:hover::before, .card:focus-within::before { transform:scale(3.6); }
/* Kratka crta ispod naslova koja se izduži na hover. */
.card h3::after { content:""; display:block; width:26px; height:3px; margin-top:10px; border-radius:99px;
  background:linear-gradient(90deg, var(--seal), var(--steel)); transition:width .4s var(--ease-out); }
.card:hover h3::after { width:58px; }
/* Ikonica standarda dobija svoju pločicu umjesto da stoji gola. */
.std-card-icon { box-sizing:content-box; padding:9px; border-radius:12px; background:rgba(15,191,143,0.12);
  border:1px solid rgba(15,191,143,0.18); transition:background .25s ease, transform .35s var(--ease-out); }
.card:hover .std-card-icon { background:rgba(15,191,143,0.2); transform:translateY(-2px) rotate(-3deg); }
/* Isto na karticama prednosti u "list-style" rasporedu — tamo je ::after slobodan
   (u drvolikom rasporedu prednosti pseudo-elementi nose granu i čvor, pa se ne diraju). */
.benefits.list-style .benefit { isolation:isolate; }
.benefits.list-style .benefit::after { display:block; content:""; position:absolute; z-index:-1;
  top:-40px; right:-40px; width:110px; height:110px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(15,191,143,0.26), rgba(15,191,143,0) 70%);
  transform:scale(1); transition:transform 1s cubic-bezier(.16,1,.3,1); }
.benefits.list-style .benefit:hover::after { transform:scale(3.2); }
@media (prefers-reduced-motion:reduce){
  .card::before, .card h3::after, .std-card-icon, .benefits.list-style .benefit::after { transition:none; }
  .card:hover::before, .benefits.list-style .benefit:hover::after { transform:scale(1); }
  .card:hover .std-card-icon { transform:none; }
}

/* ---------- Forma: preliv na dugmetu i tačkasta dekoracija ----------
   Dugme je bilo puna mint površina; sada je preliv koji se na hover pomjeri
   udesno. Natpis ostaje taman (#06231B) pa je kontrast i dalje preko 9:1.
   Tačkice u dva ugla kartice idu iza polja (negativan z-index), kao ukras. */
.cform button[type="submit"] {
  background:linear-gradient(100deg, var(--seal) 0%, #34D9A8 46%, var(--seal) 100%);
  background-size:190% 100%; background-position:0 0;
  transition:background-position .55s var(--ease-out), box-shadow .25s ease, transform .18s var(--ease-out); }
.cform button[type="submit"]:hover, .cform button[type="submit"]:focus-visible {
  background:linear-gradient(100deg, var(--seal) 0%, #34D9A8 46%, var(--seal) 100%);
  background-size:190% 100%; background-position:100% 0;
  box-shadow:0 14px 28px -8px rgba(15,191,143,0.55); transform:translateY(-1px); }
/* isolation:isolate je obavezan: bez sopstvenog stacking konteksta pseudo-element sa
   z-index:-1 pada IZA bijele pozadine forme i uopšte se ne vidi. */
.cform { isolation:isolate; }
.cform::before, .cform::after { content:""; position:absolute; z-index:-1; width:96px; height:21px;
  pointer-events:none;
  background-image:radial-gradient(rgba(15,191,143,0.45) 1.7px, transparent 1.8px); background-size:11px 11px; }
/* Trake tačkica stoje u praznom pojasu unutrašnje margine — gore desno iznad prvog
   polja i dolje lijevo ispod dugmeta, jedina dva mjesta gdje forma ima vazduha. */
.cform::before { top:5px; right:14px; }
.cform::after { left:14px; bottom:5px; }
@media (max-width:640px){ .cform::before, .cform::after { display:none; } }
@media (prefers-reduced-motion:reduce){ .cform button[type="submit"] { transition:none; } }

/* ---------- Safari: padding na <select> ----------
   Safari na macOS-u crta padajuću listu nativno i IGNORIŠE padding-left, pa je
   ikonica polja padala preko teksta ("— izaberite —"). Čim se isključi nativni
   izgled, padding radi — ali nestaje i nativna strelica, pa je crtamo sami.
   Chromium je ovo prikazivao ispravno, zato se nije vidjelo u pregledu. */
.cform select { -webkit-appearance:none; appearance:none; }
.cform :is(select[name="standard"], select[name="usluga"]) {
  --cf-strelica:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235A7B77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  padding-right:38px;
  background-image:var(--cf-ik), var(--cf-strelica);
  background-repeat:no-repeat, no-repeat;
  background-size:18px 18px, 11px 7px;
  background-position:left 14px center, right 14px center; }
.cform :is(select[name="standard"], select[name="usluga"]):focus {
  background-image:var(--cf-ik-f), var(--cf-strelica);
  background-repeat:no-repeat, no-repeat;
  background-size:18px 18px, 11px 7px;
  background-position:left 14px center, right 14px center; }

/* ---------- Prečice pored dugmeta menija (telefon i tablet) ----------
   Tri stavke koje najviše trebaju odmah — poziv, pretraga i zahtjev za ponudu —
   ostaju vidljive i kad je meni sklopljen. Elementi već postoje u .nav, ali je
   .nav na telefonu sklopljena (max-height:0; overflow:hidden); position:fixed ih
   vadi iz tog odsijecanja, a .topbar je sticky pa ostaju poravnati sa dugmetom.
   Ne dira se nijedan HTML fajl. */
@media (max-width:1239px){
  .topbar .wrap { padding-left:14px; padding-right:14px; }
  /* top je usklađen sa sredinom hamburgera i logotipa: visina 36 -> sredina 29
     traži top 11, a ne 15; ranije su ikonice stajale 4px niže od hamburgera. */
  .nav .srch-btn, .nav a.call-btn, .nav a.nav-cta {
    position:fixed; top:11px; z-index:60; margin:0; padding:0;
    width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:12px; }
  .nav a.nav-cta { right:58px; font-size:0; box-shadow:0 6px 16px rgba(15,191,143,0.30);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306231B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.6h6a1 1 0 0 1 1 1v1.2H8V4.6a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 5.8H6a1 1 0 0 0-1 1v13.6a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6.8a1 1 0 0 0-1-1h-2'/%3E%3Cpath d='M9 11.6h6M9 15.4h4'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:19px 19px; }
  .nav .srch-btn { right:98px; }
  .nav a.call-btn { right:138px; }
  .nav .srch-btn, .nav a.call-btn { background:var(--surface); border:1px solid var(--line); }
  .nav .srch-btn .tt-icon, .nav a.call-btn .tt-icon { width:18px; height:18px; }
  /* dugme menija je 40px, pa se traka pomjera kad se zaglavlje skupi pri skrolu */
  .topbar.scrolled .nav .srch-btn,
  .topbar.scrolled .nav a.call-btn,
  .topbar.scrolled .nav a.nav-cta { top:10px; }
  /* sheen animacija na dugmetu za ponudu nema smisla na ikonici */
  .nav a.nav-cta::after { display:none; }
  /* U harmonici se telefonu i pretrazi natpis vraća iz aria-label (::before);
     ove tri su sada ikonice u traci, pa im natpis smeta. */
  .nav a.call-btn::before, .nav .srch-btn::before { content:none; }
}
@media (max-width:399px){
  /* Na najužim telefonima (320px) znak je dodirivao prvu ikonicu — malo je niži,
     ikonice su 30px i unutrašnja margina trake je 12px. */
  .topbar .wrap { padding-left:12px; padding-right:12px; }
  .brand-logo { height:19px; }
  .nav .srch-btn, .nav a.call-btn, .nav a.nav-cta { width:30px; height:30px; top:14px; }
  .nav a.nav-cta { right:56px; background-size:16px 16px; }
  .nav .srch-btn { right:90px; }
  .nav a.call-btn { right:124px; }
  .nav .srch-btn .tt-icon, .nav a.call-btn .tt-icon { width:16px; height:16px; }
  .topbar.scrolled .nav .srch-btn,
  .topbar.scrolled .nav a.call-btn,
  .topbar.scrolled .nav a.nav-cta { top:13px; }
}

/* ---------- Red dugmadi van heroja ----------
   .cta-row je do sada bio stilizovan samo unutar .hero, pa su se u okviru sa
   preporukom (guidance-box) dva dugmeta dodirivala — izgledalo je kao greška u
   prelomu. Sada je red svuda flex sa razmakom, a na telefonu se slaže u kolonu. */
.cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.guidance-box .cta-row { justify-content:center; }
.guidance-box .cta-row .btn { min-height:46px; display:inline-flex; align-items:center; }
@media (max-width:560px){
  .guidance-box .cta-row { flex-direction:column; align-items:stretch; }
  .guidance-box .cta-row .btn { width:100%; justify-content:center; text-align:center; }
}

/* ---------- Otisci prstiju na ISO/IEC 27001: iz mrlje u vodeni žig ----------
   Šest otisaka bilo je 34px na 16% providnosti i, pošto .fp-anchor stoji unutar
   .wrap-a, padali su preko samih kartica — na ekranu su izgledali kao prljavština,
   a ne kao motiv. Sada su krupniji i izmješteni u spoljnu marginu, i prikazuju se
   samo tamo gdje te margine stvarno ima.
   Granica je 1400px, a ne 1280px: sadržaj je širok 1180px i centriran, pa tek od
   1400px sa svake strane ostane dovoljno prazne margine da otisak stane cijeli —
   na užem ekranu bi virio preko ivice i otvorio vodoravni skrol. */
@media (min-width:1400px){
  .fp-mark { width:76px; height:76px; top:-78px; }
  .fp-1, .fp-3, .fp-5 { right:-96px; }
  .fp-2, .fp-4, .fp-6 { left:-96px; }
  .fp-mark.in { opacity:0.12; }
}
@media (max-width:1399px){ .fp-mark { display:none; } }

/* ---------- Galerija oblasti: strelice i preuzimanje kontrole ----------
   Dok traje efekat uz skrol, okvir je overflow:clip i red se pomjera
   transformacijom — korisnik ne može doći do kartice koja je izašla iz kadra.
   Strelice (dodaje ih site.js) na prvi klik gase animaciju, pamte dokle je red
   stigao i prebacuju okvir u običnu galeriju koja se prevlači. */
.hg-nosac { position:relative; }
.hg-dugme { display:none; }
/* bez scroll-snap-a: kartice bi se lijepile uz sam rub okvira i poništile
   bočni razmak reda, a i pomjerile bi galeriju u trenutku predaje kontrole */
.hg-okvir.hg-rucno { overflow-x:auto; overflow-y:clip; }
.hg-okvir.hg-rucno .hg-red { animation:none; animation-timeline:auto; transform:none; }
@media (min-width:1000px) {
  .hg-dugme { position:absolute; top:calc(50% - 10px); z-index:3; display:grid; place-items:center;
    width:46px; height:46px; padding:0; border-radius:50%; cursor:pointer;
    color:var(--heading); border:1px solid var(--line); background:var(--surface);
    box-shadow:0 14px 34px -16px rgba(0,0,0,0.75);
    transition:border-color .2s ease, color .2s ease, opacity .2s ease, transform .2s ease; }
  .hg-dugme:hover { border-color:var(--seal); color:var(--accent-label); transform:scale(1.06); }
  .hg-dugme[disabled] { opacity:.28; cursor:default; transform:none; }
  .hg-dugme svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; }
  .hg-prethodna { left:14px; }
  .hg-sljedeca { right:14px; }
}

/* ---------- Propisi i rokovi: kartice zakona sa provjerom usklađenosti ---------- */
.prop-mreza { display:grid; gap:14px; margin-top:22px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.prop-kart { position:relative; display:flex; flex-direction:column; gap:9px;
  padding:20px 20px 18px; border-radius:16px; text-decoration:none;
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .2s ease, transform .22s var(--ease-out), box-shadow .22s ease; }
.prop-kart:hover, .prop-kart:focus-visible { border-color:var(--seal); transform:translateY(-3px);
  box-shadow:0 24px 46px -26px rgba(0,0,0,0.6); }
.prop-oznaka { align-self:flex-start; padding:4px 10px; border-radius:999px;
  font-size:0.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-label); background:rgba(15,191,143,0.12);
  border:1px solid rgba(15,191,143,0.30); }
.prop-kart.je-novo .prop-oznaka { color:#FFD48A; background:rgba(255,186,73,0.13);
  border-color:rgba(255,186,73,0.36); }
/* Svijetla tema: žuta oznaka „Novo“ na bijeloj kartici imala je kontrast 1,4 — tamnija nijansa iste boje. */
:root[data-theme="light"] .prop-kart.je-novo .prop-oznaka { color:#7A4E00; background:rgba(255,186,73,0.18); border-color:rgba(190,130,20,0.45); }
.prop-naziv { font-family:var(--display); font-weight:700; font-size:1.06rem; line-height:1.3;
  color:var(--heading); }
.prop-kart p { margin:0; font-size:0.93rem; line-height:1.55; color:var(--muted); }
.prop-rok { font-size:0.86rem; font-weight:600; color:var(--heading); }
.prop-veza { margin-top:auto; padding-top:4px; font-size:0.9rem; font-weight:700;
  color:var(--accent-label); }
.prop-kart:hover .prop-veza { text-decoration:underline; text-underline-offset:3px; }

/* ---------- Spisak svih standarda kao oznake ---------- */
.std-spisak { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:22px 0 24px; }
.std-oznaka { display:inline-flex; align-items:center; min-height:34px; padding:6px 13px;
  border-radius:999px; font-size:0.88rem; font-weight:600; text-decoration:none;
  color:var(--heading); border:1px solid var(--line); background:var(--surface);
  transition:border-color .18s ease, color .18s ease, background .18s ease; }
.std-oznaka:hover, .std-oznaka:focus-visible { border-color:var(--seal);
  color:var(--accent-label); background:rgba(15,191,143,0.08); }

/* ---------- Zid logotipa klijenata ----------
   Logotipi dolaze iz raznih izvora: 86 od njih ima neprovidnu bijelu podlogu
   u samom fajlu, pa ih nije moguće obojiti filterom kao na tamnim „logo
   zidovima“. Zato svaki ide na svijetlu pločicu, u sivim tonovima, a boju
   dobija na prelazak mišem. Pet logotipa je svijetlo mastilo na providnosti
   (.tamna): njima je nekada stajala tamna pločica, ali je u mreži od 161 svijetle
   to izgledalo kao pet rupa — zato im se logotip obrne (invert mijenja boju, ne
   providnost), pa mastilo postaje tamno na istoj pločici kao kod svih ostalih. */
.kl-plocica { display:grid; place-items:center; height:92px; padding:14px 18px;
  border-radius:14px; background:#FBFDFC; border:1px solid var(--line); overflow:hidden;
  transition:border-color .22s ease, transform .22s var(--ease-out), box-shadow .22s ease; }
.kl-plocica.tamna { background:#FBFDFC; }
.kl-plocica img { max-width:100%; max-height:52px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.70;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease; }
.kl-plocica.tamna img { filter:grayscale(1) invert(1); opacity:.72; }
.kl-plocica.tamna:hover img { filter:invert(1); opacity:1; }
.kl-plocica:hover { border-color:var(--seal); transform:translateY(-2px);
  box-shadow:0 18px 36px -22px rgba(0,0,0,0.55); }
.kl-plocica:hover img { filter:none; opacity:1; }
/* Naziv firme na prelazak mišem (i fokus): pločica nosi data-ime, a pločica je dovoljno visoka
   da natpis stane ispod logotipa. Logotip se pri tom blago podigne da ga natpis ne prekrije. */
.kl-plocica { position:relative; }
.kl-plocica[data-ime]::after { content:attr(data-ime); position:absolute; left:6px; right:6px; bottom:5px;
  font:600 0.66rem/1.2 var(--sans); color:#1E3230; text-align:center; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease;
  pointer-events:none; }
.kl-plocica[data-ime]:hover::after, .kl-plocica[data-ime]:focus-within::after { opacity:1; transform:none; }
.kl-plocica[data-ime]:hover img { transform:translateY(-7px); }
/* Logotipi sa više redova sitnog teksta (ministarstva) dobijaju dvostruko širu pločicu da bi se čitali. */
.kl-mreza > .kl-plocica.kl-siroka { flex-basis:316px; }
.kl-traka .kl-plocica.kl-siroka { width:364px; }
.kl-mreza > .kl-plocica.kl-siroka, .kl-traka .kl-plocica.kl-siroka { padding-top:6px; padding-bottom:6px; }
.kl-plocica.kl-siroka img { max-height:78px; opacity:.9; }
@media (max-width:520px){ .kl-mreza > .kl-plocica.kl-siroka { flex-basis:248px; } }
@media (prefers-reduced-motion:reduce){ .kl-plocica[data-ime]::after, .kl-plocica img { transition:none; } }

/* Flex, a ne grid: kod mreže se zadnji nepotpun red lijepi uz lijevu ivicu i to se
   vidi kao greška. Flex sa justify-content:center centrira svaki red, pa i posljednji. */
.kl-mreza { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }
.kl-mreza > .kl-plocica { flex:0 1 152px; }
@media (max-width:520px){ .kl-mreza > .kl-plocica { flex:0 1 118px; height:76px; padding:10px 12px; }
  .kl-mreza > .kl-plocica img { max-height:42px; } }

/* beskonačna traka na početnoj: dvije identične grupe, pomak za -50% */
.kl-traka { position:relative; margin-top:26px; overflow:clip;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kl-red { display:flex; width:max-content; }
.kl-grupa { display:flex; gap:12px; padding-right:12px; }
.kl-traka .kl-plocica { width:176px; flex:none; }
@media (prefers-reduced-motion: no-preference) {
  /* Trajanje prati dužinu trake: sa 161 logotipom pola kruga je oko 30.000 px,
     pa 78s davalo brzinu od skoro 400 px/s — nečitljivo. 300s je oko 100 px/s. */
  .kl-red { animation:klKlizi 300s linear infinite; }
  .kl-traka:hover .kl-red, .kl-traka:focus-within .kl-red { animation-play-state:paused; }
  /* Stranice djelatnosti nose oko 56 logotipa (pola kruga ≈ 10.500 px) — 110s daje istu brzinu od ≈ 100 px/s. */
  .kl-traka-oblast .kl-red { animation-duration:110s; }
}
@keyframes klKlizi { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.kl-potpis { margin-top:20px; text-align:center; font-size:0.8rem; letter-spacing:0.05em;
  color:var(--muted); opacity:.8; }
.kl-potpis b { font-weight:700; color:var(--heading); opacity:.9; }

/* ---------- Nalaz o statusu obveznika u samoprocjeni ----------
   Status obveznika se ne mjeri procentima nego se utvrđuje po zakonu, pa stoji
   kao zasebna kartica iznad bodovanja spremnosti. */
.assess-nalaz { padding:22px 24px 20px; border-radius:18px; margin-bottom:22px;
  border:1px solid var(--line); background:var(--surface); }
.assess-nalaz .an-oznaka { display:inline-block; padding:5px 12px; border-radius:999px;
  font-size:0.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  margin-bottom:12px; }
.assess-nalaz h3 { margin:0 0 8px; font-size:1.32rem; line-height:1.25; color:var(--heading); }
.assess-nalaz p { margin:0; color:var(--muted); line-height:1.6; }
.assess-nalaz .an-lista { margin:14px 0 0; padding-left:20px; color:var(--muted); line-height:1.65; }
.assess-nalaz .an-lista li { margin-bottom:5px; }
.nalaz-da { border-color:rgba(255,138,110,0.46); background:rgba(255,138,110,0.08); }
.nalaz-da .an-oznaka { background:rgba(255,138,110,0.18); color:#FFB4A0; }
.nalaz-vjerovatno { border-color:rgba(255,186,73,0.46); background:rgba(255,186,73,0.08); }
.nalaz-vjerovatno .an-oznaka { background:rgba(255,186,73,0.18); color:#FFD48A; }
.nalaz-ne { border-color:rgba(15,191,143,0.42); background:rgba(15,191,143,0.08); }
.nalaz-ne .an-oznaka { background:rgba(15,191,143,0.18); color:var(--accent-label); }
.nalaz-info { border-color:var(--line); }
.nalaz-info .an-oznaka { background:rgba(15,191,143,0.14); color:var(--accent-label); }
:root[data-theme="light"] .nalaz-da .an-oznaka { color:#9A3412; }
:root[data-theme="light"] .nalaz-vjerovatno .an-oznaka { color:#8A5A00; }

/* ---------- Tabovi (početna: put do sertifikata, tenderi, pitanja, usluge) ----------
   Bez JS-a svi paneli su vidljivi jedan ispod drugog i stranica je potpuna; site.js
   dodaje .je-tab i tek tada se ponašaju kao tabovi. */
.tabovi { margin-top:26px; }
.tb-traka { display:none; }
.tb-panel + .tb-panel { margin-top:28px; padding-top:26px; border-top:1px solid var(--line); }
.tb-panel > h3 { font-size:1.18rem; margin:0 0 10px; color:var(--heading); }
.tb-panel p { color:var(--muted); line-height:1.65; }
.tb-panel p + p { margin-top:12px; }
.tb-veze { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.tb-veze a { display:inline-flex; align-items:center; min-height:36px; padding:7px 14px; border-radius:999px;
  font-size:0.89rem; font-weight:600; text-decoration:none; color:var(--heading);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .18s ease, color .18s ease, background .18s ease; }
.tb-veze a:hover, .tb-veze a:focus-visible { border-color:var(--seal); color:var(--accent-label);
  background:rgba(15,191,143,0.08); }
.tb-panel .faq { margin-top:4px; }

.tabovi.je-tab .tb-traka { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px;
  padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--surface-alt); }
.tabovi.je-tab .tb-dug { appearance:none; cursor:pointer; border:1px solid transparent;
  border-radius:10px; background:transparent;
  font-family:var(--display); font-weight:700; font-size:0.95rem; color:var(--heading);
  padding:10px 16px; transition:color .18s ease, background .18s ease, border-color .18s ease; }
.tabovi.je-tab .tb-dug:hover { background:var(--surface); border-color:var(--line); }
.tabovi.je-tab .tb-dug[aria-selected="true"] { color:var(--on-seal); background:var(--seal);
  border-color:var(--seal); box-shadow:0 6px 16px -8px rgba(15,191,143,0.7); }
.tabovi.je-tab .tb-dug:focus-visible { outline:3px solid var(--accent-label); outline-offset:-3px; border-radius:6px; }
.tabovi.je-tab .tb-panel { display:none; margin-top:0; padding-top:0; border-top:0; }
.tabovi.je-tab .tb-panel.je-otvoren { display:block; }
@media (max-width:640px){
  .tabovi.je-tab .tb-dug { font-size:0.86rem; padding:9px 12px; }
}

/* ---------- Jednostavna provjera protiv botova ----------
   Zbir dva broja: radi i bez JavaScripta (brojevi su u HTML-u), a site.js ih pri
   učitavanju izmijeni da par ne bude uvijek isti. Server provjerava zbir, pa se ne
   može proći slanjem praznih polja. */
.cap-polje { display:flex; flex-direction:column; gap:6px; }
.cap-polje label { font-size:0.88rem; font-weight:600; color:var(--heading); }
.cap-polje label b { color:var(--accent-on-dark); font-weight:800; letter-spacing:.02em; }
.cform .cap-polje input { width:100%; }
/* .cform je uvijek bijela kartica (i u tamnoj temi), pa provjera ne smije uzimati boje iz teme —
   var(--heading) je u tamnoj temi skoro bijel i natpis je bio nevidljiv (kontrast 1,1:1). */
.cform .cap-polje label { color:#1E3230; }
.cform .cap-polje label b { color:#096B52; }
/* U svijetloj temi upitnik je na bijeloj kartici — mint brojevi bi imali kontrast ≈ 1,6. */
[data-theme="light"] .assess-cap label b { color:#096B52; }
@media (min-width:720px){ .cform .cap-polje { max-width:260px; } }

/* ---------- Arhiva održanih obuka ----------
   Bez poziva na prijavu i bez naglaska — to je zapis, a ne ponuda; aktuelni
   termini ostaju jedino što poziva na akciju. */
.trn-arhiva { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:2px;
  border-top:1px solid var(--line); }
.trn-arhiva li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding:11px 2px; border-bottom:1px solid var(--line); font-size:0.93rem; color:var(--muted); }
.trn-arhiva .arh-datum { flex:none; min-width:116px; font-family:var(--display); font-weight:700;
  font-size:0.86rem; color:var(--accent-label); }
.trn-arhiva strong { color:var(--heading); font-weight:700; }
@media (max-width:560px){ .trn-arhiva .arh-datum { min-width:100%; } }

/* ---------- Samoprocjena: dodatna polja i provjera protiv botova ----------
   Korak 1 je imao četrnaest polja, od čega pet obaveznih — previše za prvi
   dodir. Obavezni su sada naziv firme, e-mail i telefon; ostalo je sklopljeno. */
.assess-dodatno { grid-column:1 / -1; margin-top:4px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); overflow:hidden; }
.assess-dodatno > summary { cursor:pointer; padding:14px 18px; font-weight:700;
  color:var(--heading); list-style:none; display:flex; align-items:center; gap:10px; }
.assess-dodatno > summary::-webkit-details-marker { display:none; }
.assess-dodatno > summary::before { content:"+"; width:22px; height:22px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-weight:800; line-height:1;
  background:rgba(15,191,143,0.14); color:var(--accent-label); }
.assess-dodatno[open] > summary::before { content:"–"; }
.assess-dodatno > summary:hover { color:var(--accent-label); }
.assess-dodatno > .assess-field-grid { padding:4px 18px 18px; }
.assess-dodatno > .assess-field { padding:0 18px 18px; }

/* Polje za zbir: kratko i čitljivo, a ne traka preko cijele širine. */
.assess-cap { margin:16px 0 4px; }
.assess-cap label { font-size:0.95rem; font-weight:600; color:var(--heading); }
.assess-cap label b { color:var(--accent-on-dark); font-weight:800; }
.assess-cap input { width:130px; max-width:100%; padding:12px 14px; font-size:1.1rem;
  font-weight:700; text-align:center; letter-spacing:0.06em; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--heading); }
.assess-cap input:focus-visible { outline:3px solid var(--accent-label); outline-offset:2px; }

/* ---------- Prelaz između koraka ---------- */
@media (prefers-reduced-motion: no-preference) {
  .assess-steps > * { animation:korakUlazi .34s var(--ease-out) both; }
  @keyframes korakUlazi { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
}

/* ---------- Traka za kolačiće (saglasnost) ----------
   Pojavljuje se pri prvoj posjeti. „Samo neophodno“ i „Prihvatam sve“ imaju isti izgled
   i istu veličinu — odbijanje ne smije biti teže ni manje vidljivo od pristanka. */
.kol-traka { position:fixed; left:12px; right:12px; bottom:12px; z-index:200;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 20px;
  max-width:980px; margin:0 auto; padding:16px 20px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.65); }
.kol-traka p { margin:0; flex:1 1 320px; font-size:0.92rem; line-height:1.55; color:var(--text); }
.kol-traka a { color:var(--accent-label); font-weight:600; }
.kol-izbor { flex:1 1 100%; display:grid; gap:10px; }
.kol-izbor[hidden] { display:none; }
.kol-red { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface-soft); cursor:pointer; }
.kol-red input { width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--seal); cursor:pointer; }
.kol-red input:disabled { cursor:not-allowed; }
.kol-red span { display:grid; gap:2px; flex:1; }
.kol-red strong { color:var(--heading); font-size:0.95rem; }
.kol-red small { color:var(--muted); font-size:0.85rem; line-height:1.45; }
.kol-red em { font-style:normal; font-size:0.78rem; font-weight:700; color:var(--accent-label); white-space:nowrap; margin-top:3px; }
.kol-dugmad { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; flex:none; }
.kol-dugmad button { cursor:pointer; font-family:inherit; font-size:0.9rem; font-weight:700;
  padding:10px 18px; border-radius:999px; border:1px solid var(--heading); background:transparent;
  color:var(--heading); transition:background .2s ease, color .2s ease, border-color .2s ease; }
.kol-dugmad .kol-ne:hover, .kol-dugmad .kol-da:hover { background:var(--heading); color:var(--surface); }
.kol-dugmad .kol-podesi { border-color:transparent; text-decoration:underline; text-underline-offset:3px; padding-inline:10px; }
.kol-dugmad .kol-podesi:hover { color:var(--accent-label); }
.kol-dugmad button:focus-visible, .kol-red input:focus-visible { outline:3px solid var(--accent-label); outline-offset:2px; }
.kol-otvori { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }
.kol-otvori:hover { color:var(--on-dark-strong); }
.kol-otvori:focus-visible { outline:2px solid var(--accent-on-dark); outline-offset:2px; border-radius:3px; }
@media (max-width:560px){
  .kol-traka { left:8px; right:8px; bottom:8px; padding:14px 16px; max-height:calc(100dvh - 16px); overflow:auto; }
  .kol-dugmad { width:100%; } .kol-dugmad .kol-ne, .kol-dugmad .kol-da { flex:1 1 40%; }
  .kol-dugmad .kol-podesi { flex:1 1 100%; order:3; }
}

/* Prednosti unutar trake sa fotografijom.
   .benefits u osnovnom izgledu nije niz pločica nego „stablo“: vertikalna linija kroz
   sredinu i ✓ čvorovi koji na njoj sjede, a svaki čvor ima prsten u boji podloge
   (--bg-alt). Na tamnoj traci taj prsten bi bio svijetli oreol, pa se ovdje mijenja
   u boju kartice. Selektori ponavljaju puni :not() lanac jer original ima specifičnost
   koju kraće pravilo ne može nadjačati.
   Varijanta .moduli jeste pločica, pa ona postaje staklasta kao .std-compare. */
.foto-traka .benefit strong { color:#fff; }
.foto-traka .benefit p { color:var(--on-dark-strong); }
.foto-traka .benefit a.more { color:var(--seal2); }
.foto-traka .benefit .flag { color:var(--seal2); background:rgba(124,242,214,0.14); }
.foto-traka .benefits:not(.list-style):not(.pb-bento):not(.aktuelno-grid):not(.moduli) > .benefit::before {
  box-shadow:0 4px 12px rgba(0,0,0,0.45), 0 0 0 5px rgba(7,24,22,0.92); }
.foto-traka .benefits.moduli > .benefit { background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.22); }
.foto-traka .benefits.list-style .benefit { background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.22); }

/* ---------- Tabovi: blok se čita kao cjelina ispod centriranog naslova ----------
   Traka tabova je bila lijevo poravnata ispod centriranog naslova i uvoda, pa je
   djelovala kao da je blok odlutao ulijevo; tekst panela išao je preko cijele
   širine sekcije, što je za čitanje predugačak red. */
.tabovi { max-width:980px; margin-left:auto; margin-right:auto; }
.tabovi.je-tab .tb-traka { justify-content:center; }

/* ---------- Veze ka drugim stranicama nisu dugmad ----------
   Sve je do sada bilo pilula sa radijusom 999px — i poziv na akciju i obična veza
   ka drugoj stranici — pa se na stranici nije vidjelo šta je šta. Akcije ostaju
   pilule (.btn), a veze ka stranicama postaju meki pravougaonici sa mint ivicom
   koja na prelazak mišem naraste. */
.related a, .tb-veze a, .reg-std a {
  border-radius:8px; position:relative; padding-left:19px; padding-right:30px; overflow:hidden; }
/* strelica govori da vodi na drugu stranicu, a ne da pokreće radnju */
.related a::after, .tb-veze a::after, .reg-std a::after {
  content:"\2192"; position:absolute; right:11px; top:50%; transform:translateY(-50%);
  opacity:0.45; font-weight:700; transition:transform .2s var(--ease-out), opacity .2s ease; }
.related a:hover::after, .tb-veze a:hover::after, .reg-std a:hover::after {
  opacity:1; transform:translateY(-50%) translateX(2px); }
.related a::before, .tb-veze a::before, .reg-std a::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--seal); opacity:0.55; transform:scaleY(0.42); transform-origin:center;
  transition:transform .2s var(--ease-out), opacity .2s ease; }
.related a:hover::before, .related a:focus-visible::before,
.tb-veze a:hover::before, .tb-veze a:focus-visible::before,
.reg-std a:hover::before, .reg-std a:focus-visible::before { transform:scaleY(1); opacity:1; }
.related a:hover::before { background:var(--on-seal); }
@media (prefers-reduced-motion:reduce){
  .related a::before, .tb-veze a::before, .reg-std a::before,
  .related a::after, .tb-veze a::after, .reg-std a::after { transition:none; } }

/* ---------- Ko je pravno lice, a ko organizaciona jedinica ----------
   Podaci o pružaocu usluge bili su jedan spisak u kojem se Mobes Monte i
   Qualiterna miješaju u istoj stavci. Razdvojeni su u dvije kartice:
   lijevo pravno lice sa svim podacima iz člana 7, desno jedinica koja radi
   na standardima. Uz njih i kartica osobe koja vodi te projekte. */
.pravno { display:grid; gap:16px; grid-template-columns:1fr; margin-top:22px; }
@media (min-width:880px){ .pravno { grid-template-columns:1.3fr 1fr; align-items:start; } }
.pravno-kart { position:relative; overflow:hidden; padding:26px 28px;
  border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.pravno-kart::before { content:""; position:absolute; top:0; bottom:0; left:0; width:4px;
  background:linear-gradient(180deg,var(--seal),var(--steel)); }
.pravno-kart h3 { font-size:1.08rem; margin:0 0 12px; }
.pravno-oznaka { display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent-label); background:rgba(15,191,143,0.12);
  padding:4px 11px; border-radius:99px; margin-bottom:11px; }
.pravno-kart dl { display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:0; font-size:0.92rem; }
.pravno-kart dt { color:var(--muted); font-weight:600; }
.pravno-kart dd { margin:0; }
.pravno-kart p { color:var(--muted); font-size:0.94rem; }
.pravno-kart p + p { margin-top:10px; }
@media (max-width:520px){ .pravno-kart { padding:20px 18px; }
  .pravno-kart dl { grid-template-columns:1fr; gap:2px; }
  .pravno-kart dd { margin-bottom:8px; } }

.osoba { display:grid; gap:18px; grid-template-columns:1fr; align-items:start; margin-top:22px;
  padding:26px 28px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
@media (min-width:720px){ .osoba { grid-template-columns:92px 1fr; gap:26px; } }
.osoba-mono { width:92px; height:92px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:1.65rem; letter-spacing:.02em;
  color:var(--on-seal); background:linear-gradient(135deg,var(--seal),var(--steel)); }
.osoba h3 { margin:0 0 2px; font-size:1.14rem; }
.osoba-uloga { color:var(--accent-label); font-weight:700; font-size:0.9rem; margin:0 0 10px; }
.osoba p { color:var(--muted); }
.osoba p + p { margin-top:10px; }

/* ---------- Društvene mreže ----------
   Ikonice crta site.js, i to samo za mreže kojima je adresa upisana. Dok je
   polje prazno, mjesto u HTML-u (<div data-mreze>) ostaje prazno i ne zauzima
   prostor, pa na sajtu nema mrtve veze ni praznog reda. */
[data-mreze]:empty { display:none; }
.soc-nat { font-size:0.78rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin:0 0 9px; }
.soc { display:flex; flex-wrap:wrap; gap:9px; }
.soc a { width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:var(--heading); background:var(--surface); border:1px solid var(--line);
  transition:border-color .18s ease, color .18s ease, transform .18s var(--ease-out); }
.soc svg { width:19px; height:19px; display:block; }
.soc a:hover, .soc a:focus-visible { border-color:var(--seal); color:var(--accent-label);
  transform:translateY(-2px); }
.soc a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
footer .soc-nat { color:var(--on-dark-soft); }
footer .soc a { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.18);
  color:var(--on-dark-strong); }
footer .soc a:hover, footer .soc a:focus-visible { border-color:var(--seal2); color:#fff; }
@media (prefers-reduced-motion:reduce){ .soc a { transition:none; }
  .soc a:hover, .soc a:focus-visible { transform:none; } }

/* ---------- EU, Ujedinjeno Kraljevstvo i ostale zemlje ----------
   Sekcija su bila dva duga pasusa ispod ogromnog spiska gradova, pa se nije
   čitala. Sada: kratak uvod, tri kartice sa onim što klijenta zanima (šta ide
   online, kada dolazimo, šta se razlikuje) i spisak zemalja ispod. */
.eu-kart { display:grid; gap:14px; grid-template-columns:1fr; max-width:980px;
  margin:24px auto 6px; text-align:left; }
@media (min-width:820px){ .eu-kart { grid-template-columns:repeat(3,1fr); } }
.eu-k { position:relative; padding:22px 24px; border:1px solid var(--line);
  border-radius:15px; background:var(--surface);
  transition:border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s ease; }
.eu-k:hover { border-color:rgba(15,191,143,0.42); transform:translateY(-3px);
  box-shadow:0 16px 34px -22px rgba(15,46,44,0.5); }
.eu-ik { width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(15,191,143,0.12); color:var(--accent-label); margin-bottom:13px; }
.eu-ik svg { width:21px; height:21px; }
.eu-k strong { display:block; font-family:var(--display); font-size:1.02rem;
  color:var(--heading); margin-bottom:6px; }
.eu-k p { color:var(--muted); font-size:0.92rem; line-height:1.6; }
@media (prefers-reduced-motion:reduce){ .eu-k { transition:none; }
  .eu-k:hover { transform:none; } }

/* Natpis iznad trake tabova — bez njega se traka čitala kao niz veza, a ne kao
   prekidač koji mijenja sadržaj ispod. */
.tb-poziv { text-align:center; font-size:0.78rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px; }
.tabovi:not(.je-tab) .tb-poziv { display:none; }

/* O nama — fotografija ispod opisa osobe koja vodi projekte (predavanje, obuka). */
.osoba-foto { margin:30px 0 0; }
.osoba-foto img { display:block; width:100%; height:auto; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-card); }
.osoba-foto figcaption { margin-top:10px; font-size:0.86rem; line-height:1.5; color:var(--muted); }

/* ==================== AI asistent ====================
   Dugme je prvo (najniže) u plutajućim dugmićima; prozor se otvara iznad njih.
   Na telefonu prozor zauzima cijeli ekran, a dugmići i mobilna traka se sklanjaju. */
.chat-fab { align-items:flex-end; }
.chat-fab .cf-ai { height:54px; min-width:54px; padding:0 18px 0 14px; border-radius:999px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; font:700 0.92rem/1 var(--sans); letter-spacing:0.01em;
  background:var(--seal); color:var(--on-seal); box-shadow:0 6px 20px rgba(0,0,0,0.30);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s ease; }
.chat-fab .cf-ai svg { width:28px; height:28px; flex:none; }
.chat-fab .cf-ai:hover { background:var(--seal-hover); transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,0.38); }
.chat-fab .cf-ai:focus-visible { outline:3px solid var(--accent-label); outline-offset:3px; }
.chat-fab .cf-ai[aria-expanded="true"] { box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--seal); }
/* dok je razgovor otvoren, ostali kanali su ponuđeni u samom razgovoru — dugmići se sklanjaju */
html.asist-otvoren .chat-fab a { display:none; }
@media (max-width:900px){
  .chat-fab .cf-ai { width:54px; padding:0; justify-content:center; }
  .chat-fab .cf-ai-natpis { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width:560px){ .chat-fab .cf-ai { width:48px; min-width:48px; height:48px; } .chat-fab .cf-ai svg { width:25px; height:25px; } }
@media (prefers-reduced-motion:reduce){ .chat-fab .cf-ai { transition:none; } .chat-fab .cf-ai:hover { transform:none; } }

/* .asist je <section>, pa poništava opšti razmak sekcija (padding:64px 0) */
.asist { position:fixed; right:18px; bottom:86px; z-index:58; width:min(400px, calc(100vw - 36px)); padding:0; margin:0;
  height:min(620px, calc(100dvh - 110px)); display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.55); font-size:0.95rem; }
.asist[hidden] { display:none; }
@media (prefers-reduced-motion:no-preference){
  .asist:not([hidden]) { animation:asistUlaz .24s var(--ease-out) both; }
  @keyframes asistUlaz { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
}
.asist-glava { display:flex; align-items:center; gap:10px; padding:12px 10px 12px 14px; background:var(--ink); color:#fff; flex:none; }
.asist-znak { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--seal); color:var(--on-seal); }
.asist-znak svg { width:20px; height:20px; }
.asist-ime { flex:1; min-width:0; }
.asist-ime h2 { font-size:1rem; margin:0; color:#fff; letter-spacing:-0.01em; line-height:1.25; }
.asist-ime p { margin:0; font-size:0.78rem; color:var(--on-dark-soft); }
.asist-ikona { width:38px; height:38px; border-radius:50%; border:0; background:transparent; color:var(--on-dark-strong);
  display:grid; place-items:center; cursor:pointer; flex:none; }
.asist-ikona svg { width:20px; height:20px; }
.asist-ikona:hover { background:rgba(255,255,255,0.1); color:#fff; }
.asist-ikona:focus-visible { outline:2px solid var(--accent-on-dark); outline-offset:1px; }
.asist-lista { flex:1; overflow-y:auto; padding:16px 14px 8px; display:flex; flex-direction:column; gap:10px;
  overscroll-behavior:contain; scroll-behavior:smooth; }
.asist-poruka { max-width:88%; padding:10px 13px; border-radius:16px; line-height:1.55; overflow-wrap:anywhere; }
.asist-poruka p { margin:0; }
.asist-poruka p + p, .asist-poruka p + ul, .asist-poruka p + ol, .asist-poruka ul + p, .asist-poruka ol + p { margin-top:0.5em; }
.asist-poruka ul, .asist-poruka ol { margin:0; padding-left:1.15em; }
.asist-poruka li + li { margin-top:0.2em; }
.asist-poruka a { color:var(--accent-label); font-weight:600; text-underline-offset:2px; }
.asist-ai { align-self:flex-start; background:var(--surface-soft); border:1px solid var(--line); border-bottom-left-radius:6px; color:var(--text); }
.asist-ai strong { color:var(--heading); }
.asist-ja { align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:6px; }
:root[data-theme="light"] .asist-ja { background:#0F2E2C; }
.asist-kontakt { display:flex; flex-wrap:wrap; gap:6px; margin-top:0.6em !important; }
.asist-kontakt a { display:inline-block; padding:6px 11px; border-radius:999px; border:1px solid var(--line);
  text-decoration:none; font-size:0.85rem; background:var(--surface); }
.asist-tacke { display:flex; gap:5px; padding:4px 2px; }
.asist-tacke span:not(.sr-only) { width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.5; }
@media (prefers-reduced-motion:no-preference){
  .asist-tacke span:not(.sr-only) { animation:asistTacka 1.1s ease-in-out infinite; }
  .asist-tacke span:nth-child(2) { animation-delay:.15s; } .asist-tacke span:nth-child(3) { animation-delay:.3s; }
  @keyframes asistTacka { 0%,80%,100% { opacity:.35; transform:none; } 40% { opacity:1; transform:translateY(-3px); } }
}
.asist-cipovi { display:flex; flex-wrap:wrap; gap:7px; padding:4px 14px 10px; flex:none; }
.asist-cipovi[hidden] { display:none; }
.asist-cipovi button { font:600 0.84rem/1.25 var(--sans); padding:8px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--note-border); background:var(--note-bg); color:var(--heading); text-align:left; }
.asist-cipovi button:hover { border-color:var(--accent-label); }
.asist-cipovi button:focus-visible { outline:2px solid var(--accent-label); outline-offset:2px; }
.asist-forma[hidden] { display:none; }
.asist-forma { display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid var(--line); flex:none; }
.asist-forma textarea { flex:1; resize:none; min-height:44px; max-height:132px; padding:11px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface-soft); color:var(--heading); font:inherit; line-height:1.4; }
.asist-forma textarea::placeholder { color:var(--muted); }
.asist-forma textarea:focus { outline:2px solid var(--accent-label); outline-offset:0; border-color:transparent; }
.asist-salji { width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; flex:none; display:grid; place-items:center;
  background:var(--seal); color:var(--on-seal); }
.asist-salji svg { width:20px; height:20px; }
.asist-salji:hover { background:var(--seal-hover); }
.asist-salji:disabled { opacity:.5; cursor:wait; }
.asist-salji:focus-visible { outline:3px solid var(--accent-label); outline-offset:2px; }
.asist-napomena { margin:0; padding:0 14px 10px; font-size:0.74rem; line-height:1.45; color:var(--muted); flex:none; }
.asist-napomena a { color:inherit; text-decoration:underline; }
.asist-cip-oznaka { flex-basis:100%; font-size:0.76rem; color:var(--muted); margin-bottom:-2px; }
.asist-cipovi .asist-cip-sva { background:transparent; border-style:dashed; }
.asist-cipovi .asist-cip-ponuda { background:var(--seal); color:var(--on-seal); border-color:transparent; }
.asist-cipovi .asist-cip-ponuda:hover { background:var(--seal-hover); }
/* lista svih pitanja i forma za kontakt — mjehur preko cijele širine */
.asist-sva, .asist-forma-upit { max-width:100%; width:100%; box-sizing:border-box; }
.asist-sva .asist-grupa { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }
.asist-sva .asist-grupa + .asist-pitanja { margin-top:4px; }
.asist-sva .asist-pitanja + .asist-grupa { margin-top:12px; }
.asist-pitanja { display:flex; flex-direction:column; gap:4px; }
.asist-pitanja button { font:500 0.88rem/1.35 var(--sans); text-align:left; padding:7px 10px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--heading); }
.asist-pitanja button:hover { border-color:var(--accent-label); }
.asist-pitanja button:focus-visible { outline:2px solid var(--accent-label); outline-offset:1px; }
.asist-upit { display:grid; gap:8px; }
.asist-upit .asist-upit-naslov { font-weight:600; color:var(--heading); }
.asist-upit label { display:grid; gap:3px; font-size:0.78rem; font-weight:600; color:var(--heading); }
.asist-upit input, .asist-upit select, .asist-upit textarea { width:100%; box-sizing:border-box; padding:8px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--heading); font:400 0.9rem/1.35 var(--sans); }
.asist-upit textarea { resize:vertical; min-height:64px; }
.asist-upit input:focus, .asist-upit select:focus, .asist-upit textarea:focus { outline:2px solid var(--accent-label); outline-offset:0; border-color:transparent; }
.asist-upit-red { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.asist-upit .asist-upit-pom { margin:-4px 0 0 !important; font-size:0.74rem; color:var(--muted); }
.asist-upit .asist-upit-greska { margin:0 !important; font-size:0.82rem; font-weight:600; color:var(--warn-text); }
.asist-upit .asist-upit-greska[hidden] { display:none; }
.asist-upit button[type="submit"] { justify-self:start; font:600 0.9rem/1 var(--sans); padding:11px 18px; border-radius:999px; border:0;
  cursor:pointer; background:var(--seal); color:var(--on-seal); }
.asist-upit button[type="submit"]:hover { background:var(--seal-hover); }
.asist-upit button[type="submit"]:disabled { opacity:.55; cursor:wait; }
.asist-upit button[type="submit"]:focus-visible { outline:3px solid var(--accent-label); outline-offset:2px; }
.asist-upit .asist-upit-priv { margin:0 !important; font-size:0.74rem; color:var(--muted); }
.asist-upit .asist-upit-priv a { color:inherit; font-weight:400; }
.asist-hp { position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
/* zatamnjena pozadina iza ploče — samo na telefonu (JS je otkriva samo tamo) */
.asist-pozadina { position:fixed; inset:0; z-index:57; background:rgba(4,16,15,0.55); }
.asist-pozadina[hidden] { display:none; }
@media (max-width:560px){
  /* ploča od donje ivice: stranica se vidi iznad nje, a tap na tamni dio zatvara prozor */
  .asist { left:0; right:0; top:auto; bottom:0; width:auto; height:min(80dvh, 640px); max-height:calc(100dvh - 48px);
    border-radius:20px 20px 0 0; border:1px solid var(--line); border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -18px 50px -10px rgba(0,0,0,0.5); }
  .asist-glava { padding-top:12px; }
  .asist-glava::before { content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px;
    border-radius:4px; background:rgba(255,255,255,0.35); }
  .asist-glava { position:relative; }
  .asist-zatvori { width:44px; height:44px; background:rgba(255,255,255,0.12); }
  .asist-zatvori svg { width:22px; height:22px; }
  html.asist-otvoren .chat-fab, html.asist-otvoren .mob-cta { visibility:hidden; }
  html.asist-otvoren body { overflow:hidden; }
  .asist-forma textarea, .asist-upit input, .asist-upit select, .asist-upit textarea { font-size:16px; } /* manje od 16px — iOS uveća stranicu pri fokusu */
  .asist-upit-red { grid-template-columns:1fr; }
}
@media print { .asist, .kol-traka { display:none !important; } }

/* dugme „Podešavanja kolačića“ u tekstu stranice o kolačićima */
.kol-dugme-strana { font:inherit; font-weight:700; font-size:0.92em; color:var(--on-seal); background:var(--seal);
  border:0; border-radius:999px; padding:3px 12px; cursor:pointer; vertical-align:baseline; }
.kol-dugme-strana:hover { background:var(--seal-hover); }
.kol-dugme-strana:focus-visible { outline:3px solid var(--accent-label); outline-offset:2px; }
#asistent { scroll-margin-top:84px; }