/* ==========================================================================
   MISTRAL OSJECAJ: lokalni prijedlog za naslovnu (Boris 19.10.2026)
   Uzor: mistral.ai, samo osjecaj, ne boje: ostri uglovi, tanke sive linije,
   mirniji naslovi, bez mekih sjena, sadrzaj preko cijele sirine ekrana,
   vidljiva mreza stranice i tihe animacije (assets/mistral.js).
   Boje i tekstovi ostaju isti. Ucitava se iza sim.css, samo na /.
   ========================================================================== */
:root {
  --mx-line: #E4E2DB;
  --mx-line-strong: #D3D0C7;
  --mx-hover: rgba(10, 10, 10, 0.04);
  --mx-ease: cubic-bezier(.2, .7, .2, 1);
  --radius-card: 0px;
  --radius-tile: 0px;
  --radius-glass: 0px;
}
/* puna sirina: sadrzaj do 1680 px, sa strane samo uzak rub */
@media (min-width: 1281px) {
  :root { --container: 1680px; --pad-x: 56px; }
}

/* ---------- 1. uglovi: sve ravno ----------
   Telefon je slika prave aplikacije, zato on ostaje obao. Crvena tackica
   "uzivo" je crtez, ne kutija, pa i ona ostaje okrugla. */
*:not(.konf-phone, .konf-phone *, .sd-lv, .sx-lv, .lev-phone, .lev-phone *),
*:not(.konf-phone *, .lev-phone *)::before,
*:not(.konf-phone *, .lev-phone *)::after { border-radius: 0 !important; }

/* ---------- 2. naslovi: srednja debljina, gusce slovo ---------- */
main h1, main h2, .hero h1, .glass h1 {
  font-weight: 560 !important;
  letter-spacing: -0.028em !important;
}
.konf-copy h2 { font-weight: 580 !important; letter-spacing: -0.04em !important; }
.sim2 > h2 { font-weight: 580 !important; letter-spacing: -0.03em !important; }
.p24bar-stat b { font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- 3. dugmad: ravna, sa strelicom koja se pomjeri ---------- */
.btn { font-weight: 560; letter-spacing: -0.005em; }
.btn-sm { padding: 0.75em 1.15em; }
.konf .btn-primary { box-shadow: none; }
.btn-primary:not(.btn-sm)::after, .btn-secondary:not(.btn-sm)::after {
  content: ""; flex: none; width: 9px; height: 10px; margin-left: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--mx-ease);
}
.btn:hover::after { transform: translateX(3px); }

/* ---------- 4. zaglavlje preko cijele sirine, meni kao celije ---------- */
.header-top-in, .header-inner { max-width: none; }
@media (min-width: 1281px) {
  .header-top-in, .header-inner { padding: 0 28px; }
}
.site-header.scrolled { box-shadow: none; }
.main-nav .nav-item { border-left: 1px solid var(--mx-line); }
.main-nav .nav-item:last-child { border-right: 1px solid var(--mx-line); }
.nav-link { padding: 0 22px; transition: color .2s, background-color .25s; }
.nav-item:hover > .nav-link, .nav-item:focus-within > .nav-link,
.nav-item.open > .nav-link { background: var(--mx-hover); }
.nav-link::after { opacity: 1 !important; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.6, 0, .2, 1); }
.nav-item:hover > .nav-link::after, .nav-item:focus-within > .nav-link::after,
.nav-item.open > .nav-link::after, .nav-link.current::after { transform: scaleX(1); }
.panel { border-color: var(--mx-line-strong); box-shadow: 0 30px 60px -40px rgba(20, 19, 15, .35); }

/* ---------- 5. sekcije: puna sirina, tanka linija izmedju, okvir mreze ---------- */
.hero ~ section { position: relative; border-top: 0; }
.hero ~ section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--mx-line); transform-origin: left; z-index: 1;
}
.hero ~ section.mx-line::before { transform: scaleX(0); }
.hero ~ section.mx-line.mx-seen::before { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.6, 0, .2, 1); }
.p24bar { border-top: 0; border-color: var(--mx-line); }
.konf { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.konf-in { max-width: var(--container); }
.sim2 { padding: 80px var(--pad-x) 88px !important; }
.sim2 > h2 { max-width: none !important; }
.sx { max-width: var(--container); margin-left: auto !important; margin-right: auto !important; }
/* sekcije imaju pozadinu u style atributu, zato !important */
@media (min-width: 1281px) {
  .hero ~ section:not(.p24bar) {
    background-image:
      linear-gradient(var(--mx-line), var(--mx-line)),
      linear-gradient(var(--mx-line), var(--mx-line)) !important;
    background-size: 1px 100%, 1px 100% !important;
    background-repeat: no-repeat !important;
    background-position:
      max(calc(var(--pad-x) / 2), calc(50% - 868px)) 0,
      min(calc(100% - var(--pad-x) / 2), calc(50% + 868px)) 0 !important;
  }
  .konf-in { gap: 96px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .konf-copy { max-width: 640px; }
}

/* traka Prevedi24: celije preko cijele sirine, kao red logotipa kod Mistrala */
@media (min-width: 1024px) {
  .p24bar-in { max-width: none; padding: 0; min-height: 136px; }
  .p24bar-stats, .p24bar-logos { display: contents; }
  .p24bar-brand, .p24bar-stat, .p24bar-logos picture {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 26px 24px; border-left: 1px solid var(--mx-line); transition: background-color .3s;
  }
  .p24bar-brand { border-left: 0; }
  .p24bar-stat { text-align: center; }
  .p24bar-stat span { max-width: 230px !important; }
  .p24bar-brand:hover, .p24bar-stat:hover, .p24bar-logos picture:hover { background: #FAF9F5; }
}

/* ---------- 6. kartice i okviri: tanka siva linija umjesto debele crne ---------- */
.glass { box-shadow: none; }
.konf-photo { border: 0; box-shadow: none; }
.chip { border-color: var(--mx-line-strong); padding: 5px 9px 4px; }
.ur-box, .ur-card, .ur-tab { border-color: var(--mx-line) !important; }
.ur-panel { padding: 36px; }
.ur-card { transition: transform .35s var(--mx-ease), box-shadow .35s var(--mx-ease); }
.ur-card:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(20, 19, 15, .4); }
/* Boris 19.10.: male kartice bez pikselne slicice; tekst ostaje dolje kao u kartici sa zastavama */
.ur-card > p:only-child { margin-top: auto; }

/* ---------- 7. fotografija s telefonom na pikselastom platnu ---------- */
.konf-circle { display: none; }
.mx-px {
  position: absolute; inset: 3% 8% 3% 0; z-index: 0; pointer-events: none;
  display: grid; overflow: hidden;
}
.mx-px i { display: block; }
.mx-px i.tw { animation: mx-tw 4.6s ease-in-out infinite; }
.konf-photo { width: 76%; margin-right: 8%; }
@media (max-width: 767px) {
  .mx-px { inset: 4% 5% 4% 0; }
  .konf-photo { width: 82%; margin-right: 5%; }
}
@keyframes mx-tw { 0%, 100% { opacity: var(--o); } 50% { opacity: .15; } }
.konf-phone { translate: 0 var(--mx-par, 0px); }
.konf-phone-body { animation: mx-float 7s ease-in-out infinite; }
@keyframes mx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- 8. ulazak elemenata pri skrolanju (mistral.js) ---------- */
.mx-pre { opacity: 0; transform: translateY(24px); }
.mx-pre.mx-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--mx-ease), transform .9s var(--mx-ease), filter .9s var(--mx-ease);
  transition-delay: var(--mx-d, 0s);
}
h2.mx-pre { filter: blur(8px); }
h2.mx-pre.mx-in { filter: none; }
.konf-visual.mx-pre .konf-photo img { transform: scale(1.08); }
.konf-visual.mx-pre.mx-in .konf-photo img { transform: none; transition: transform 1.8s var(--mx-ease); }
/* promjena taba u sekciji "u radu" */
.ur-panel:not([hidden]) > * { animation: mx-up .55s var(--mx-ease) both; }
.ur-panel:not([hidden]) > *:nth-child(2) { animation-delay: .08s; }
.ur-big::before { animation: mx-drift 22s linear infinite alternate; }
@keyframes mx-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-3%, 2%, 0); } }

@media (prefers-reduced-motion: reduce) {
  .mx-pre { opacity: 1 !important; transform: none !important; filter: none !important; }
  .konf-phone-body, .mx-px i.tw, .ur-big::before, .ur-panel:not([hidden]) > * { animation: none !important; }
  .hero ~ section.mx-line::before { transform: none; }
}

/* ---------- 9. pismo: Inter, kao kod Mistrala (njihov ALTMistral je samo njihov) ----------
   Inter (SIL Open Font License 1.1, The Inter Project Authors) je na nasem serveru, bez Googlea:
   promjenljivo pismo, debljine 400 do 700, latinica i prosirena latinica. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/inter-var-latin-ext.v1.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/inter-var-latin.v1.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html body, html body *:not(.p24bar-word):not(.p24bar-word *) {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body { font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
.p24bar-word, .p24bar-word * { font-family: "Archivo", system-ui, sans-serif !important; }
main h1, main h2, .hero h1, .glass h1 { font-weight: 500 !important; letter-spacing: -0.022em !important; }
.konf-copy h2 { font-weight: 500 !important; letter-spacing: -0.035em !important; }
.sim2 > h2 { font-weight: 500 !important; letter-spacing: -0.025em !important; }
.nav-link { font-weight: 500; letter-spacing: -0.005em; }
.btn { font-weight: 500; }
.sx-tmv { font-weight: 500 !important; }

/* logotip: vatreni znak + slova simultano.ai u Interu */
.mx-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--c-ink); text-decoration: none; }
.mx-mark { flex: none; display: block; width: 28px; height: 30px; transition: width .25s ease, height .25s ease; }
.mx-word { font-weight: 600; font-size: 25px; line-height: 1; letter-spacing: -0.04em; color: var(--c-ink); white-space: nowrap; transition: font-size .25s ease; }
.mx-ai { background: linear-gradient(180deg, #FFC100 0%, #FE7509 55%, #E10500 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scrolled .mx-mark { width: 25px; height: 27px; }
.scrolled .mx-word { font-size: 22px; }
.footer-brand .mx-mark { width: 30px; height: 33px; }
.footer-brand .mx-word { font-size: 27px; color: #F4F1EA; }
@media (max-width: 899px) {
  .mx-mark, .scrolled .mx-mark { width: 24px; height: 26px; }
  .mx-word, .scrolled .mx-word { font-size: 21px; }
}

/* ---------- 10. telefon dole lijevo, prevod na njemu tece ---------- */
.mx-px { inset: 3% 0 3% 10%; }
.konf-photo { width: 76%; margin: 0 7% 0 auto; }
.konf .konf-phone { right: auto; left: 0; bottom: -64px; }
.konf-capcard { height: 310px; display: flex; flex-direction: column; justify-content: flex-end; }
.konf-lines.mx-flow { margin-top: 0; -webkit-mask-image: linear-gradient(transparent 0, #000 46px); mask-image: linear-gradient(transparent 0, #000 46px); }
.konf-lines .konf-line { max-height: 140px; transition: max-height .45s var(--mx-ease), opacity .45s ease; }
.konf-lines .konf-line.mx-new { max-height: 0; opacity: 0; }
.konf-live { z-index: 2; }
@media (max-width: 767px) {
  .mx-px { inset: 4% 0 4% 6%; }
  .konf-photo { width: 82%; margin: 0 6% 0 auto; }
  .konf-visual { padding-top: 56px; }
  .konf .konf-phone { left: -6px; bottom: -48px; width: 172px; }
}
.konf-phone { pointer-events: none; }
.mx-pre:focus-within { opacity: 1; transform: none; filter: none; }
@media print { .mx-pre { opacity: 1 !important; transform: none !important; filter: none !important; } }
@media (max-width: 1100px) {
  .konf-capcard { height: 235px; }
}

/* ---------- 11. header kao kod Mistrala: 48 px, meni odmah iza logotipa ----------
   Iznad je narandzasta traka za partnere (skriva se pri skrolanju). */
:root { --header-h: 88px; --header-h-sticky: 48px; }
.header-top.mx-bar { display: block; height: 40px; background: #FF8204; color: #14130F; line-height: normal; }
.scrolled .header-top.mx-bar { height: 0; }
.mx-bar-in { display: flex; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 0 16px; color: #14130F; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.mx-new { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .09em; line-height: 1; padding: 5px 7px 4px; background: #14130F; color: #fff; }
.mx-bar-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mx-bar-s { display: none; }
.mx-bar-l { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 19, 15, .45); text-underline-offset: 3px; }
.mx-bar-l svg { width: 12px; height: 12px; transition: transform .25s var(--mx-ease); }
.mx-bar-in:hover .mx-bar-l svg { transform: translateX(3px); }
.mx-bar-in:hover { background: #F57800; }
.mx-bar-in:focus-visible { outline: 2px solid #14130F; outline-offset: -4px; }

.header-main, .scrolled .header-main { height: 48px; min-height: 48px; }
.header-inner { padding: 0 !important; gap: 0; }
.site-header .mx-logo { height: 100%; padding: 0 22px 0 20px; border-right: 1px solid var(--mx-line); gap: 8px; }
.site-header .mx-mark, .scrolled .site-header .mx-mark, .site-header.scrolled .mx-mark { width: 22px; height: 24px; }
.site-header .mx-word, .site-header.scrolled .mx-word { font-size: 20px; }
.main-nav { margin-left: 0; }
.main-nav .nav-item:first-child { border-left: 0; }
.nav-link { padding: 0 18px; font-size: 15px; }
.scrolled .panel--wide { top: 49px; }
.lsw { margin-left: auto; height: 100%; border-left: 1px solid var(--mx-line); }
.lsw-btn { height: 100%; border: 0 !important; padding: 0 16px; background: none; }
.lsw-btn:hover, .lsw.open .lsw-btn { background: var(--mx-hover) !important; }
.header-cta.mx-cta { margin: 0; gap: 0; height: 100%; }
.mx-cell { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 20px; border: 0; border-left: 1px solid var(--mx-line); background: none; color: var(--c-ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.mx-demo { background: #FFD800; border-left-color: #EFCB00; }
.mx-demo:hover { background: #FFE24D; }
.mx-login { position: relative; height: 100%; }
.mx-login-btn { background: #14130F; color: #fff; border-left-color: #14130F; }
.mx-login-btn:hover, .mx-login.open .mx-login-btn { background: #000; }
.mx-login-btn .nav-caret { width: 9px; height: 7px; transition: transform .2s; }
.mx-login:hover .nav-caret, .mx-login.open .nav-caret { transform: rotate(180deg); }
.mx-cell:focus-visible { outline: 2px solid #FA500F; outline-offset: -2px; }
.mx-login-menu {
  position: absolute; right: 0; top: 100%; z-index: 1002; min-width: 310px; margin: 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid var(--mx-line-strong); box-shadow: 0 26px 50px -30px rgba(20, 19, 15, .4);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.mx-login:hover .mx-login-menu, .mx-login:focus-within .mx-login-menu, .mx-login.open .mx-login-menu { opacity: 1; visibility: visible; transform: none; }
.mx-login-menu a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 12px; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--mx-line); color: var(--c-ink); text-decoration: none; }
.mx-login-menu li:first-child a { border-top: 0; }
.mx-login-menu a:hover, .mx-login-menu a:focus-visible { background: #FAF9F5; outline: none; }
.mx-li-ico { width: 34px; height: 34px; display: grid; place-items: center; background: #FFF4D1; }
.mx-li-ico svg { width: 17px; height: 19px; }
.mx-li-ico2 { grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px); gap: 3px; place-content: center; background: #FDE6D8; }
.mx-li-ico2 i { display: block; width: 9px; height: 9px; background: #FA500F; }
.mx-li-ico2 i:nth-child(2), .mx-li-ico2 i:nth-child(3) { background: #FFC100; }
.mx-li-t b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.mx-li-t small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: #6E6B64; }
.mx-chev { width: 12px; height: 12px; color: #9A968C; transition: transform .2s, color .2s; }
.mx-login-menu a:hover .mx-chev { transform: translateX(3px); color: var(--c-ink); }
.burger { height: 100%; width: 52px; margin-left: 0; border-left: 1px solid var(--mx-line) !important; }
.burger span { left: 14px; top: calc(50% - 1px); }
.mobile-drawer { top: var(--header-h); }
.scrolled .mobile-drawer { top: var(--header-h-sticky); }

@media (max-width: 1120px) {
  :root { --header-h: 90px; --header-h-sticky: 52px; }
  .header-top.mx-bar { display: block; height: 38px; }
  .header-main, .scrolled .header-main { height: 52px; min-height: 52px; }
  .mx-login { display: none; }
  .lsw { margin-left: auto; }
}
@media (max-width: 720px) {
  .mx-bar-t { display: none; }
  .mx-bar-s { display: inline; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .mx-bar-in { font-size: 13px; gap: 9px; justify-content: flex-start; }
  .mx-bar-l { font-size: 0; gap: 0; }
  .mx-bar-l svg { width: 13px; height: 13px; }
  .site-header .mx-logo { padding: 0 14px; }
  .mx-cell { padding: 0 12px; font-size: 13.5px; }
  .lsw-btn { padding: 0 10px; }
  .lsw-btn .lsw-code, .lsw-btn .nav-caret { display: none; }
  .burger { width: 48px; }
  .burger span { left: 12px; }
}

/* ---------- 12. traka povjerenja uz dno naslovnog dijela (Boris 19.10., prijedlog broj 5) ----------
   Tanka bijela traka preko cijele sirine, kao red logotipa kod Mistrala. Sadrzaj prati
   sirinu stranice. Logotip Prevedi24 je pravi, samo crn; AWS i NVIDIA su u svojim bojama. */
.mx-strip {
  position: relative; z-index: 3; margin: 64px calc(var(--pad-x) * -1) -72px;
  background: rgba(255, 255, 255, .86); border-top: 1px solid rgba(20, 19, 15, .1);
  animation: mx-ht-in .9s var(--mx-ease) .2s both;
}
.mx-strip-in { max-width: calc(var(--container) + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-sc { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 76px; padding: 12px 28px; border-left: 1px solid rgba(20, 19, 15, .1); }
.mx-sc:first-child { border-left: 0; padding-left: 0; }
.mx-sc:last-child { padding-right: 0; }
.mx-tl { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: #8A867C; }
.mx-tn { display: block; flex: none; font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.mx-td { display: block; max-width: 210px; font-size: 12.5px; line-height: 1.35; color: #6E6B64; }
.mx-p24 { display: block; flex: none; width: max-content; }
.mx-p24 img { display: block; width: auto; height: 30px; }
.mx-tlogos { display: flex; align-items: center; gap: 20px; }
.mx-tlogos img { display: block; width: auto; }
.mx-tlogos picture:first-child img { height: 21px; }
.mx-tlogos picture:last-child img { height: 32px; }
.mx-sc-brand .mx-tl, .mx-sc-logos .mx-tl { max-width: 90px; }
@keyframes mx-ht-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
  .mx-sc { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 12px 18px; }
  .mx-sc-brand .mx-tl, .mx-sc-logos .mx-tl { max-width: none; }
  .mx-tn { font-size: 28px; }
}
/* telefon: dva puta dva, sve centrirano i malo manje */
@media (max-width: 767px) {
  .hero-grid > div[aria-hidden="true"]:empty { display: none; }
  .mx-strip { margin: 28px calc(var(--pad-x) * -1) -48px; }
  .mx-strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .mx-sc, .mx-sc:first-child, .mx-sc:last-child { align-items: center; text-align: center; gap: 3px; min-height: 64px; padding: 9px 10px; }
  .mx-sc:nth-child(3) { border-left: 0; }
  .mx-sc:nth-child(n+3) { border-top: 1px solid rgba(20, 19, 15, .1); }
  .mx-strip .mx-tl { display: none; }
  .mx-tn { font-size: 23px; }
  .mx-td { max-width: 150px; font-size: 10.5px; line-height: 1.3; }
  .mx-p24 img { height: 23px; }
  .mx-tlogos { gap: 12px; justify-content: center; }
  .mx-tlogos picture:first-child img { height: 15px; }
  .mx-tlogos picture:last-child img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .mx-strip { animation: none; } }

/* ---------- 13. nova partner stranica (/partneri/) ---------- */
body.mx-nobar { --header-h: 48px; }
body.mx-nobar .header-top { display: none !important; }
@media (max-width: 1120px) { body.mx-nobar { --header-h: 52px; } }
.px > section { position: relative; }
.px > section + section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--mx-line); transform-origin: left; z-index: 1; }
.px > section.mx-line::before { transform: scaleX(0); }
.px > section.mx-line.mx-seen::before { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.6, 0, .2, 1); }
.px-hero { padding: calc(var(--header-h) + 64px) var(--pad-x) 88px; background: var(--c-surface); overflow: hidden; }
.px-hero-in { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.px-crumb { display: flex; gap: 8px; margin: 0 0 30px; font-size: 13px; color: #8A867C; }
.px-crumb a { color: #8A867C; text-decoration: none; }
.px-crumb a:hover { color: var(--c-ink); }
.px-ey { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6E6B64; }
.px-ey .mx-new { background: #FF8204; color: #14130F; }
.px-hero h1 { margin: 0; font-size: clamp(40px, 4.6vw, 70px) !important; line-height: 1.02 !important; letter-spacing: -.042em !important; text-wrap: balance; }
.px-lead { max-width: 560px; margin: 24px 0 0; font-size: 19px; line-height: 1.5; color: #3A3833; }
.px-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.px-ctas-c { justify-content: center; }
.px-visual { position: relative; min-height: 460px; }
.px-visual .mx-px { inset: 0; }
.px-card { position: absolute; left: 11%; right: 11%; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid var(--mx-line-strong); box-shadow: 0 40px 80px -40px rgba(20, 19, 15, .5); }
.px-card-h { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--mx-line); }
.px-tag { font-size: 11px; font-weight: 600; letter-spacing: .09em; line-height: 1; padding: 5px 8px; background: #FFF2BF; border: 1px solid #EFD67E; }
.px-plus { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.px-rows { list-style: none; margin: 0; padding: 0; }
.px-row { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--mx-line); font-size: 16px; font-weight: 500; }
.px-row::before { content: ""; position: absolute; inset: 0; background: #FFF8DC; opacity: 0; animation: px-scan 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
.px-row > * { position: relative; }
.px-ic { width: 38px; height: 38px; display: grid; place-items: center; background: #F6F4EE; color: var(--c-ink); }
.px-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.px-ok { width: 20px; height: 20px; background: #FA500F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat; transform: scale(0); animation: px-tick 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
.px-card-f { margin: 0; padding: 14px 20px 16px; font-size: 13.5px; line-height: 1.45; color: #6E6B64; }
@keyframes px-scan { 0% { opacity: 0; } 6% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } }
@keyframes px-tick { 0%, 7% { transform: scale(0); } 11% { transform: scale(1.15); } 14%, 88% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
.px-fit, .px-steps { padding: 96px var(--pad-x); background: var(--c-surface); }
.px-k { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #C8470C; }
.px-fit h2, .px-steps h2, .px-cta h2 { max-width: 24ch; margin: 0; font-size: clamp(30px, 3.1vw, 46px) !important; line-height: 1.1 !important; text-wrap: balance; }
.px-sub { max-width: 640px; margin: 18px 0 40px; font-size: 17px; line-height: 1.55; color: #3A3833; }
.px-fit .ur-tab svg { fill: none; }
.px-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #8A867C; }
.px-fit .ur-big p { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }
.px-ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); }
.px-ol::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #FA500F; transform-origin: left; }
.px-ol.mx-pre::before { transform: scaleX(0); }
.px-ol.mx-pre.mx-in::before { transform: scaleX(1); transition: transform 1.8s cubic-bezier(.6, 0, .2, 1) .2s; }
.px-ol li { padding: 30px 36px 38px 0; }
.px-ol li + li { padding-left: 36px; border-left: 1px solid var(--mx-line); }
.px-ol b { display: block; margin-bottom: 44px; font-size: 14px; font-weight: 600; color: #FA500F; font-variant-numeric: tabular-nums; }
.px-ol h3 { margin: 0 0 14px; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.px-ol p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: #3A3833; }
.px-cta { padding: 112px var(--pad-x); background: #F7F5EF; text-align: center; }
.px-cta h2 { margin: 0 auto; }
.px-cta p { max-width: 560px; margin: 18px auto 0; font-size: 17px; line-height: 1.55; color: #3A3833; }
@media (min-width: 1281px) {
  .px > section:not(.px-hero) {
    background-image: linear-gradient(var(--mx-line), var(--mx-line)), linear-gradient(var(--mx-line), var(--mx-line));
    background-size: 1px 100%, 1px 100%; background-repeat: no-repeat;
    background-position: max(calc(var(--pad-x) / 2), calc(50% - 868px)) 0, min(calc(100% - var(--pad-x) / 2), calc(50% + 868px)) 0;
  }
}
@media (max-width: 1023px) {
  .px-hero-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .px-visual { min-height: 400px; }
}
@media (max-width: 899px) {
  .px-ol { grid-template-columns: minmax(0, 1fr); }
  .px-ol li, .px-ol li + li { padding: 24px 0 26px; border-left: 0; }
  .px-ol li + li { border-top: 1px solid var(--mx-line); }
  .px-ol b { margin-bottom: 14px; }
  .px-fit .ur-big p { font-size: 30px; }
}
@media (max-width: 599px) {
  .px-hero { padding: calc(var(--header-h) + 36px) var(--pad-x) 56px; }
  .px-visual { min-height: 360px; margin: 0 calc(var(--pad-x) * -1); }
  .px-card { left: 6%; right: 6%; }
  .px-row { padding: 12px 14px; gap: 12px; font-size: 15px; }
  .px-fit, .px-steps { padding: 64px var(--pad-x); }
  .px-cta { padding: 76px var(--pad-x); }
}
@media (prefers-reduced-motion: reduce) {
  .px-row::before { animation: none; }
  .px-ok { animation: none; transform: none; }
  .px-ol.mx-pre::before { transform: none; }
}

/* ---------- 14. odlomak "Sa simultano.ai pricate...": plave kocke, veliki naslov, telefon s vise prevoda ---------- */
.konf { position: relative; background: #F5F9FF !important; }
.mx-bg { position: absolute; inset: 0; z-index: 0; display: grid; grid-auto-rows: 40px; overflow: hidden; pointer-events: none; }
.mx-bg i { display: block; }
.mx-bg i.tw { animation: mx-tw2 5s ease-in-out infinite; }
@keyframes mx-tw2 { 0%, 100% { opacity: var(--o); } 50% { opacity: .1; } }
.konf-in { position: relative; z-index: 1; }
@media (min-width: 1281px) { .konf-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .konf-copy { max-width: 720px; } }
.konf-copy h2 { font-size: clamp(40px, 4.3vw, 68px) !important; line-height: 1.04 !important; letter-spacing: -.042em !important; text-wrap: balance; }
.konf-copy p { margin-top: 28px; }
/* telefon: bez oznake LIVE i plave crte, prevod zauzima sav prostor, dugmad na dnu */
.konf-caps { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
.konf-capcard { flex: 1; height: auto !important; max-height: none !important; border-left: 0 !important; background: #161616; }
.konf-controls { padding: 14px 0 16px; }
.konf-lines.mx-flow { -webkit-mask-image: linear-gradient(transparent 0, #000 56px); mask-image: linear-gradient(transparent 0, #000 56px); }
@media (prefers-reduced-motion: reduce) { .mx-bg i.tw { animation: none; } }

/* ---------- 15. prijedlog 6 (Boris 19.10.) ---------- */
/* naslov odlomka: "pricate i slusate bilo koji jezik" podvuceno narandzastom, kao kod Mistrala.
   Traka ide preko oba reda redom (slice), a visina joj je tacno visina reda. */
.mx-hl {
  background: linear-gradient(#FF8204, #FF8204) no-repeat 0 50% / 0% 86%;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  padding: 0 .05em; margin: 0 -.05em;
}
.mx-hl.mx-hl-on { background-size: 100% 86%; transition: background-size 1.5s cubic-bezier(.6, 0, .2, 1) .45s; }
@media (max-width: 599px) { .konf-copy h2 { font-size: 36px !important; } }

/* vizuelni prikaz: bez okvirnih linija lijevo i desno, siri */
.hero ~ section.sim2 { background-image: none !important; }
@media (min-width: 1281px) {
  .sim2 { padding-left: 28px !important; padding-right: 28px !important; }
  .sx { max-width: 1840px; }
}

/* "u radu": svaka vrsta korisnika ima svoju boju, a gore je klijent koji nas je koristio */
.ur-big { justify-content: space-between; }
.ur-ref { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ur-logo { display: grid; place-items: center; min-width: 132px; height: 64px; padding: 12px 18px; background: #fff; border: 1px solid rgba(20, 19, 15, .12); }
.ur-logo img { display: block; width: auto; height: auto; max-height: 38px; max-width: 176px; }
.ur-logo-t { font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--c-ink); text-align: center; }
.ur-ref-l { font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; }
.ur-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ur-big p { max-width: 30ch; }
.mx-ubg { position: absolute; inset: 0; display: grid; grid-auto-rows: 40px; overflow: hidden; pointer-events: none; }
.mx-ubg i { display: block; }
.mx-ubg i.tw { animation: mx-tw2 5s ease-in-out infinite; }
.ur-big[data-mx-tone]::before { display: none; }
.ur-big[data-mx-tone] .mx-ubg { transition: transform 6s ease; }
.ur-big[data-mx-tone]:hover .mx-ubg { transform: scale(1.04); }
.ur-tone-ink { background: #14130F; color: #fff; }
.ur-tone-sun { background: #FFD800; color: var(--c-ink); }
.ur-tone-sun::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(20, 19, 15, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 19, 15, .08) 1px, transparent 1px);
  background-size: 40px 40px; }
.ur-tone-sky { background: #DCE9FF; color: var(--c-ink); }
.ur-tone-sun p, .ur-tone-sky p, .ur-tone-sun .ur-more, .ur-tone-sky .ur-more { color: var(--c-ink); }
.ur-tone-ink .ur-logo, .ur-big:not([data-mx-tone]) .ur-logo { border-color: transparent; }
@media (max-width: 899px) {
  .ur-logo { min-width: 112px; height: 54px; padding: 10px 14px; }
  .ur-logo img { max-height: 32px; max-width: 150px; }
  .ur-big { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-hl { background-size: 100% 86%; }
  .mx-ubg i.tw { animation: none; }
}

/* ---------- 16. prijedlog 7 (Boris 19.10.) ---------- */
/* odlomak s plavim kockama: bez tankih okvirnih linija lijevo i desno */
.hero ~ section.konf { background-image: none !important; }

/* ---------- 17. prijedlog 8 (Boris 19.10.) ---------- */
/* zaglavlje: lijevo i desno po jedan prazan kvadrat, kao kod Mistrala. Sadrzaj je najvise 1728 px,
   a prazno polje sa strane nikad nije uze od 48 px (visina zaglavlja). */
@media (min-width: 1281px) {
  .header-inner {
    max-width: min(1728px, calc(100% - 96px)) !important; margin: 0 auto;
    border-left: 1px solid var(--mx-line); border-right: 1px solid var(--mx-line);
  }
}
/* naslov vizuelnog prikaza na sredini stranice (Boris 19.10. 21:30: "moras centrirati") */
@media (min-width: 1101px) {
  .sim2 > h2 { box-sizing: border-box; max-width: var(--container) !important; }
}
@media (min-width: 1281px) {
  .sim2 > h2 { max-width: 1840px !important; }
}
/* drugi jezici: duge rijeci u traci se lome sa crticom, oznaka "razvio i pokrece" moze biti sira */
.mx-td { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.mx-sc { min-width: 0; }
.mx-td { min-width: 0; }
:root:not(:lang(bs)):not(:lang(hr)):not(:lang(sr)) .mx-sc-brand .mx-tl,
:root:not(:lang(bs)):not(:lang(hr)):not(:lang(sr)) .mx-sc-logos .mx-tl { max-width: 128px; }
/* narandzasta traka: kad duga recenica ne stane, ide kratka (mistral.js dodaje mx-short) */
.mx-bar-in.mx-short .mx-bar-t { display: none; }
.mx-bar-in.mx-short .mx-bar-s { display: inline; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* meni ne smije prelamati rijeci; izmedju 1121 i 1280 px celije su malo uze */
.nav-link, .mx-cell { white-space: nowrap; }
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav-link { padding: 0 13px; font-size: 14.5px; }
  .mx-cell { padding: 0 15px; font-size: 14.5px; }
  .site-header .mx-logo { padding: 0 16px 0 16px; }
  .lsw-btn { padding: 0 12px; }
}
/* uski telefoni: zaglavlje mora stati i kad je dugme duze (es, it, ja) */
@media (max-width: 420px) {
  .site-header .mx-logo { padding: 0 10px; }
  .mx-cell { padding: 0 10px; font-size: 13px; }
  .lsw-btn { padding: 0 8px; }
  .burger { width: 44px; }
  .burger span { left: 10px; }
}
/* japanski i kineski: veliki naslov odlomka manji, bez stiskanja slova, lomi se po frazama */
:lang(ja) .konf-copy h2, :lang(zh) .konf-copy h2 { font-size: clamp(32px, 3.4vw, 54px) !important; line-height: 1.22 !important; letter-spacing: 0 !important; word-break: auto-phrase; }
@media (max-width: 599px) { :lang(ja) .konf-copy h2, :lang(zh) .konf-copy h2 { font-size: 30px !important; } }

/* ---------- 18. unutrasnje stranice (body.mx-page, Boris 19.10.: "ovaj dizajn na sve ostale stranice") ----------
   Isti jezik kao naslovna i /partneri/: naslovni dio s plavim kockama (kao odlomak 60+ jezika),
   sekcije preko cijele sirine s tankom linijom izmedju, mirni naslovi, oznake kao na partner
   stranici, kartice s tankom sivom linijom. Bez okvirnih linija lijevo i desno (Boris: "makni 2 linije").
   Sve je pod .mx-page, pa naslovne ostaju iste. */
.mx-page main > section { position: relative; }
.mx-page main > section + section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--mx-line); transform-origin: left; z-index: 1; }
.mx-page main > section.mx-line::before { transform: scaleX(0); }
.mx-page main > section.mx-line.mx-seen::before { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.6, 0, .2, 1); }
/* partner stranica: i ona bez okvirnih linija lijevo i desno */
@media (min-width: 1281px) { .px > section:not(.px-hero) { background-image: none; } }

/* naslovni dio: plave kocke iza, oko teksta skoro bijele (mistral.js, isto kao odlomak na naslovnoj) */
.mx-page .page-hero { position: relative; padding: calc(var(--header-h) + 64px) var(--pad-x) 88px; background: #F5F9FF; }
.mx-page .page-hero > .container { position: relative; z-index: 1; }
.mx-page .page-hero h1 { max-width: 20ch; margin: 0; font-size: clamp(40px, 4.6vw, 70px) !important; line-height: 1.02 !important; letter-spacing: -.042em !important; text-wrap: balance; }
.mx-page .page-hero .t-lead { max-width: 620px; margin: 24px 0 0; font-size: 19px; line-height: 1.5; color: #3A3833; }
.mx-page .breadcrumb { margin: 0 0 30px; font-size: 13px; line-height: 1.4; color: #8A867C; }
.mx-page .breadcrumb a { color: #8A867C; text-decoration: none; }
.mx-page .breadcrumb a:hover { color: var(--c-ink); }

/* sekcije i naslovi */
.mx-page .section { padding: 96px var(--pad-x); }
.mx-page .section-sm { padding: 56px var(--pad-x); }
.mx-page .section-alt { background: #F7F5EF; }
:where(.mx-page main) h2 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.1; text-wrap: balance; }
:where(.mx-page main) h3 { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.mx-page main h1, .mx-page main h2 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
:where(.mx-page main) .t-lead { font-size: 17px; line-height: 1.55; color: #3A3833; }
/* oznaka iznad naslova: kao "Za koga je" na partner stranici; u kartici sivo, kao "Vasa prednost" */
.mx-page main .chip { display: inline-block; margin: 0 0 14px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: #C8470C; vertical-align: baseline; }
.mx-page main :is(.pcard, .vcard, .quote-box, .tier, .ucar-slide) .chip { font-size: 11.5px; color: #8A867C; }

/* kartice i okviri: tanka siva linija, bez tvrde sjene, lagano podizanje kao kartice "u radu" */
.mx-page :is(.pcard, .vcard, .quote-box, .img-frame, .tier, .ucar-slide, .matrix-wrap) { border-color: var(--mx-line) !important; box-shadow: none; }
.mx-page :is(.pcard, .ucar-slide) { transition: transform .35s var(--mx-ease), box-shadow .35s var(--mx-ease); }
.mx-page :is(.pcard, .ucar-slide):hover { transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(20, 19, 15, .4); }
.mx-page .vcard:hover { background: #FAF9F5; box-shadow: none; }
.mx-page .pcard-sep { border-top-color: var(--mx-line); }
.mx-page .acc, .mx-page .acc-item { border-color: var(--mx-line); }

/* zavrsni poziv: kao "Razgovarajmo o partnerstvu" */
.mx-page .cta-band { padding: 112px var(--pad-x); background: #F7F5EF !important; }
.mx-page .cta-band h2 { max-width: 24ch; margin: 0 auto; }
.mx-page .cta-band .t-lead, .mx-page .cta-band p { max-width: 560px; margin: 18px auto 0; font-size: 17px; line-height: 1.55; color: #3A3833; }
.mx-page .cta-band .btn { margin: 34px 6px 0; }

/* telefon s prevodom: bez oznake LIVE (Boris: "makni ovu tockicu ko live") */
.mx-page .konf-live { display: none; }

@media (max-width: 599px) {
  .mx-page .page-hero { padding: calc(var(--header-h) + 36px) var(--pad-x) 56px; }
  .mx-page .page-hero h1 { font-size: clamp(32px, 9.4vw, 40px) !important; }
  .mx-page .page-hero .t-lead { font-size: 17px; }
  .mx-page .section { padding: 64px var(--pad-x); }
  .mx-page .section-sm { padding: 40px var(--pad-x); }
  .mx-page .cta-band { padding: 76px var(--pad-x); }
  .mx-page .cta-band .btn { margin: 24px 4px 0; }
  :where(.mx-page main) h3 { font-size: 21px; }
}
/* japanski i kineski: bez stiskanja slova, lomi se po frazama */
:lang(ja) .mx-page main :is(h1, h2), :lang(zh) .mx-page main :is(h1, h2) { letter-spacing: 0 !important; line-height: 1.25 !important; word-break: auto-phrase; }
@media (prefers-reduced-motion: reduce) { .mx-page main > section.mx-line::before { transform: none; } }
/* vrlo uski telefoni (do 379 px): zaglavlje mora stati i na 320 px u svih 12 jezika (es, it, ja imaju duze
   dugme), na svim stranicama i naslovnim, i kad se skrola. Logotip i celije malo manji, dugo dugme za demo
   smije u dva reda. Na 380 px i sire nista se ne mijenja (naslovne na 390 i 1440 ostaju iste). */
@media (max-width: 379px) {
  .site-header .mx-logo, .site-header.scrolled .mx-logo { padding: 0 8px; gap: 6px; }
  .site-header .mx-mark, .site-header.scrolled .mx-mark, .scrolled .site-header .mx-mark { width: 20px; height: 22px; }
  .site-header .mx-word, .site-header.scrolled .mx-word { font-size: 18px; }
  html[lang] .site-header .mx-word { letter-spacing: -0.04em !important; } /* i na ja/zh, logotip je latinica */
  .site-header .mx-cell { padding: 0 8px; font-size: 12.5px; line-height: 1.15; white-space: normal; text-align: center; max-width: 104px; word-break: auto-phrase; }
  .site-header .lsw-btn { padding: 0 7px; }
  .site-header .burger { width: 40px; }
  .site-header .burger span { left: 8px; }
}

/* ---------- 19. cijene (pf-*): isti jezik kao naslovna, sadrzaj i redoslijed isti ----------
   Naslov na plavim kockama, kartice paketa i kolona tabele s tankom linijom i bojom "sky"
   iz kartica "u radu", dugmad kao na naslovnoj (zuto glavno, svijetlo sporedno, sa strelicom). */
.mx-page .pf { background: var(--c-surface); color: var(--c-ink); }
.mx-page .pf > section { position: relative; }
.mx-page .pf > :is(.pf-cards-sec, .pf-langs, .pf-faq)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--mx-line); z-index: 1; }
.mx-page .pf-hero { position: relative; padding: calc(var(--header-h) + 64px) var(--pad-x) 80px; background: #F5F9FF; }
.mx-page .pf-hero > :not(.mx-bg) { position: relative; z-index: 1; }
.mx-page .pf-hero h1 { max-width: 20ch; margin: 0 auto; font-size: clamp(40px, 4.6vw, 70px) !important; line-height: 1.02 !important; letter-spacing: -.042em !important; text-wrap: balance; }
.mx-page .pf-hero p { max-width: 620px; margin: 24px auto 0; font-size: 19px; line-height: 1.5; color: #3A3833; }
.mx-page .pf-cards-sec { padding: 72px var(--pad-x) 0; }
.mx-page .pf-card { background: #fff; border-color: var(--mx-line-strong); padding: 16px 16px 20px; }
.mx-page .pf-panel { border-color: var(--mx-line); }
.mx-page .pf-card.p .pf-panel { background: #DCE9FF; border-color: #C7DAF8; }
.mx-page .pf-card.a .pf-panel { background: #F7F5EF; }
.mx-page .pf-pill { border-color: var(--mx-line-strong); padding: 5px 9px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: #fff; }
.mx-page .pf-pill-logo { text-transform: none; letter-spacing: 0; }
.mx-page .pf-logoword { font-weight: 600 !important; font-size: 12px; letter-spacing: -0.03em; }
.mx-page .pf-panel h2 { margin-top: 14px; font-size: 30px; line-height: 1.1; }
.mx-page .pf .pf-desc { font-size: 13.5px; color: #3A3833; }
.mx-page .pf-price b { font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
.mx-page .pf-price em { color: #6E6B64; opacity: 1; }
.mx-page .pf-feats li { font-size: 14.5px; color: #3A3833; }
.mx-page .pf-feats li::before { width: 6px; height: 6px; background: #FA500F; margin-top: 7px; }
/* dugmad paketa i tabele: kao .btn na naslovnoj */
.mx-page .pf-cta, .mx-page .pf-head .mini, .mx-page .pf-faq-left a {
  gap: 8px; height: 44px; padding: 0 1.2em; border: 1px solid var(--c-ink) !important; font-size: 16px; font-weight: 500;
  background: var(--c-surface-alt) !important; color: var(--c-ink) !important; transition: background-color .2s;
}
.mx-page .pf-cta::after, .mx-page .pf-head .mini::after, .mx-page .pf-faq-left a::after {
  content: ""; flex: none; width: 9px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--mx-ease);
}
.mx-page :is(.pf-cta, .pf-head .mini, .pf-faq-left a):hover::after { transform: translateX(3px); }
.mx-page .pf-card.p .pf-cta, .mx-page .pf-head .c2 .mini { background: var(--c-primary) !important; }
.mx-page .pf .pf-cta:hover, .mx-page .pf .pf-head .mini:hover, .mx-page .pf-faq-left a:hover { background: var(--c-surface) !important; color: var(--c-ink) !important; }
.mx-page .pf .pf-card.p .pf-cta:hover, .mx-page .pf .pf-head .c2 .mini:hover { background: var(--c-primary-hover) !important; }
.mx-page .pf-head .mini { height: 36px; font-size: 14px; }
/* tabela poredjenja: kolona s tankom linijom, glava se lijepi tacno ispod novog zaglavlja */
.mx-page .pf-cmp { padding: 72px var(--pad-x) 0; }
.mx-page .pf-strips i.s1, .mx-page .pf-strips i.s2, .mx-page .pf-strips i.s3 { border-color: #C7DAF8; }
.mx-page .pf-strips i.s2 { background: #EEF5FF; }
.mx-page .pf-head { background: var(--c-surface); }
@media (min-width: 1200px) {
  .mx-page .pf-head { top: var(--header-h); }
  body.mx-page:has(.site-header.scrolled) .pf-head { top: var(--header-h-sticky); }
}
.mx-page .pf-head .cell { border-color: #C7DAF8; }
.mx-page .pf-head .cell.c2 { background: #DCE9FF; }
.mx-page .pf-head b { font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.mx-page .pf-h2 h2 { font-size: 21px; letter-spacing: -.02em; }
.mx-page :is(.pf-feat, .pf-sub, .pf-bold):hover { background: #FAF9F5; }
.mx-page .pf-feat b, .mx-page .pf-bold, .mx-page .pf-glabel { font-weight: 600; }
.mx-page .pf-feat p, .mx-page .pf-sub { color: #3A3833; }
.mx-page .pf-i { background: var(--c-ink); }
.mx-page .pf-badge { background: #F6F4EE; }
/* jezici i pitanja */
.mx-page .pf-langs { padding: 96px var(--pad-x); }
.mx-page .pf-langs h2, .mx-page .pf-faq h2 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.1; }
.mx-page .pf-langs .sub { font-size: 17px; color: #3A3833; }
.mx-page .pf-faq { padding: 96px var(--pad-x) 112px; }
.mx-page .pf-faq h2 span { color: #8A867C; }
.mx-page .pf-faq details { border-color: var(--mx-line); }
.mx-page .pf-faq-in > div:last-child { border-top: 1px solid var(--mx-line); }
.mx-page .pf-faq summary { font-weight: 500; }
.mx-page .pf-faq .body { color: #3A3833; }
.mx-page .pf-faq-left p { font-weight: 500; font-size: 19px; }
@media (max-width: 1199px) {
  .mx-page .pf-hero { padding: calc(var(--header-h) + 48px) var(--pad-x) 64px; }
  .mx-page .pf-cmp-scroll { padding: 0 var(--pad-x); }
  .mx-page .pf-cmp { padding: 56px 0 0; }
}
@media (max-width: 599px) {
  .mx-page .pf-hero { padding: calc(var(--header-h) + 36px) var(--pad-x) 56px; }
  .mx-page .pf-hero h1 { font-size: clamp(32px, 9.4vw, 40px) !important; }
  .mx-page .pf-hero p { font-size: 17px; }
  .mx-page .pf-cards-sec { padding-top: 48px; }
  .mx-page .pf-langs { padding: 64px var(--pad-x); }
  .mx-page .pf-faq { padding: 64px var(--pad-x) 76px; }
}

/* lista jezika (cijene i /jezici/): tanke linije, kvadratna polja, izabrana regija zuta kao dugme za demo */
.mx-page .langs.is-ready .langs-bar { border-bottom-color: var(--mx-line); }
.mx-page .langs-search input { border-color: var(--mx-line-strong); background: #fff; }
.mx-page .langs-search input:focus { box-shadow: none; border-color: var(--c-ink); }
.mx-page .langs-tabs button { border-color: var(--mx-line-strong); background: #fff; font-weight: 500; transition: background-color .2s; }
.mx-page .langs-tabs button:hover { background: #FAF9F5; box-shadow: none; }
.mx-page .langs-tabs button.is-on { background: #FFD800; border-color: #EFCB00; }
.mx-page .langs-grid li { border-color: var(--mx-line); transition: background-color .2s; }
.mx-page .langs-grid li:hover { background: #FAF9F5; }
.mx-page .langs-n { font-weight: 500; }
.mx-page .langs-h { font-weight: 500; letter-spacing: -.02em; }
/* japanski/kineski naslov kartice paketa je jedna duga rijec (npr. カスタムソリューション): smije se lomiti */
:lang(ja) .mx-page .pf .pf-panel h2, :lang(zh) .mx-page .pf .pf-panel h2 { word-break: normal; }
@media (max-width: 599px) { .mx-page .pf-panel h2 { font-size: 26px; } }
@media (max-width: 767px) {
  .mx-page .pf-head .mini { height: auto; min-height: 34px; padding: 6px 8px; font-size: 12.5px; line-height: 1.2; text-align: center; }
  .mx-page .pf-head .mini::after { display: none; }
}

/* ---------- 20. rjesenja ----------
   (1) Konferencije, objekt, turisticke grupe (.lev): naslov s fotografijom na plavim kockama kao odlomak
   na naslovnoj (iza fotografije nema narandzastih kocki), Inter umjesto serifa, kartice s tankom linijom,
   telefon na svijetlo plavom kockastom platnu (mistral.js, meko na svim rubovima), bez LIVE oznake i plave crte,
   istaknuta rijec u naslovu kao na naslovnoj, traka povjerenja kao na naslovnoj.
   (2) Pregled, javni sektor, vjerske zajednice: osnova iz 18, kartice i slike s tankom linijom. */
.mx-page .lev { background: var(--c-surface); color: var(--c-ink); }
.mx-page .lev > section { position: relative; }
.mx-page .lev > section + section::before, .mx-page .lev > .credit + section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--mx-line); z-index: 1; }
.mx-page .lev .wrap { width: auto; max-width: var(--container); }
.mx-page .lev-cta {
  gap: 8px; height: 44px; padding: 0 1.2em; border: 1px solid var(--c-ink); background: var(--c-primary); box-shadow: none;
  font-size: 16px; font-weight: 500; letter-spacing: -0.005em; color: var(--c-ink); transition: background-color .2s;
}
.mx-page .lev-cta::after {
  content: ""; flex: none; width: 9px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--mx-ease);
}
.mx-page .lev .lev-cta:hover { background: var(--c-primary-hover); color: var(--c-ink); }
.mx-page .lev-cta:hover::after { transform: translateX(3px); }
/* naslovni dio */
.mx-page .lev-hero { padding: calc(var(--header-h) + 64px) var(--pad-x) 88px; background: #F5F9FF; }
.mx-page .lev-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.mx-page .lev-hero-left { width: auto; }
.mx-page .lev-hero-right { width: 100%; height: auto; aspect-ratio: 544 / 307; }
.mx-page .lev-tags { margin-bottom: 22px; }
.mx-page .lev-tag { height: auto; padding: 5px 9px 4px; border-color: var(--mx-line-strong); background: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mx-page .lev-tags .sl { color: #8A867C; }
.mx-page .lev-h1 { font-size: clamp(40px, 4.6vw, 70px) !important; line-height: 1.02 !important; letter-spacing: -.042em !important; text-wrap: balance; }
.mx-page .lev-hero-sub { max-width: 560px; margin-top: 24px; font-size: 19px; line-height: 1.5; letter-spacing: 0; color: #3A3833; }
.mx-page .lev-hero-cta { margin-top: 34px; }
.mx-page .lev-vframe { border: 0; box-shadow: none; }
.mx-page .lev-play { background: rgba(20, 19, 15, .55); transition: background-color .2s; }
.mx-page .lev-play:hover { background: rgba(20, 19, 15, .75); }
/* tri koraka i telefon */
.mx-page .lev-steps { padding: 96px var(--pad-x) 0; background: var(--c-surface); }
.mx-page .lev-h2, .mx-page .lev-h2-nowrap, .mx-page .lev-powers-h2 { font-size: clamp(30px, 3.1vw, 46px) !important; line-height: 1.1 !important; text-wrap: balance; }
.mx-page .lev-h2-nowrap { width: auto; max-width: 1100px; white-space: normal; }
.mx-page .lev-hl-pink, .mx-page .lev-hl-blue {
  border-radius: 0; padding: 0 .05em; margin: 0 -.05em;
  background: linear-gradient(#FF8204, #FF8204) no-repeat 0 50% / 0% 86%;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}
.mx-page .lev-hl-blue { background-image: linear-gradient(#DCE9FF, #DCE9FF); }
.mx-page .lev-hl-pink.mx-hl-on, .mx-page .lev-hl-blue.mx-hl-on { background-size: 100% 86%; transition: background-size 1.5s cubic-bezier(.6, 0, .2, 1) .45s; }
.mx-page .lev-steps-grid { gap: 56px; }
.mx-page .lev-stepcards { width: auto; flex: 0 1 460px; }
.mx-page .lev-step { height: auto; min-height: 215px; background: #fff !important; border: 1px solid var(--mx-line) !important; transition: transform .35s var(--mx-ease), box-shadow .35s var(--mx-ease); }
.mx-page .lev-step:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(20, 19, 15, .4); }
.mx-page .lev-step-num { font-size: 64px; font-weight: 500; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mx-page .lev-step.s1 .lev-step-num { color: #4F8CEB; }
.mx-page .lev-step.s2 .lev-step-num { color: #FFA901; }
.mx-page .lev-step.s3 .lev-step-num { color: #FA500F; }
.mx-page .lev-step-icon { border-color: var(--mx-line); }
.mx-page .lev-step-body { font-size: 16.5px; color: #3A3833; }
.mx-page .lev-circ-a, .mx-page .lev-circ-b { display: none; }
.mx-page .lev-phone-col > .mx-px { inset: 7% auto; left: 50%; width: min(600px, 92%); transform: translateX(-50%); }
.mx-page .lev-phone { z-index: 1; }
.mx-page .lp-live { display: none; }
.mx-page .lp-capcard { border-left: 0; }
.mx-page .lp-lines { margin-top: 0; }
/* propusnost i kartice */
.mx-page .lev-band { padding: 96px var(--pad-x) 0; background: var(--c-surface); }
.mx-page .lev-bw-p { font-size: 17px; color: #3A3833; }
.mx-page .lev-gauge-card { border-color: var(--mx-line); box-shadow: none; }
.mx-page .lev-ccard { border-color: var(--mx-line); transition: transform .35s var(--mx-ease), box-shadow .35s var(--mx-ease); }
.mx-page .lev-ccard:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(20, 19, 15, .4); }
.mx-page .lev-car-vp { padding: 4px 0 28px; }
.mx-page .lev-ccard .im { border-bottom: 1px solid var(--mx-line); }
.mx-page .lev-ccard h3 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.mx-page .lev-ccard .tx p { font-size: 16px; color: #3A3833; }
/* sta pokrece */
.mx-page .lev-powers { padding: 96px var(--pad-x); background: #F7F5EF; }
.mx-page .lev-powers-sub { max-width: 760px; margin: 18px auto 0; font-size: 17px; line-height: 1.55; color: #3A3833; text-wrap: balance; }
.mx-page .lev-panel { width: auto; max-width: 1140px; margin-top: 44px; border-color: var(--mx-line); box-shadow: none; }
.mx-page .lev-plate { background: none; }
.mx-page .lev-plist li { font-size: 17px; }
.mx-page .lev-tabs-shell { border-color: var(--mx-line-strong); }
.mx-page .lev-tab.on { background: #FFD800; }
/* traka povjerenja: kao na naslovnoj (celije s tankom linijom, brojke krupno) */
.mx-page .credit { background: #fff; border-color: var(--mx-line); }
.mx-page .credit-in { padding: 0 var(--pad-x); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0; }
.mx-page .credit-in > * { display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 16px 28px; border-left: 1px solid var(--mx-line); max-width: none; }
.mx-page .credit-in > :first-child { border-left: 0; padding-left: 0; }
.mx-page .credit-in > .credit-stat:last-child { justify-self: stretch; text-align: left; padding-right: 0; }
.mx-page .credit-by { align-items: center; gap: 8px; }
.mx-page .credit-stat { font-size: 12.5px; line-height: 1.35; color: #6E6B64; }
.mx-page .credit-stat b { margin-bottom: 4px; font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mx-page .credit-label { color: #8A867C; font-size: 11px; }
.mx-page .credit-logo img { height: 30px; }
/* pitanja */
.mx-page .lev-faq { padding: 96px var(--pad-x) 112px; background: var(--c-surface); }
.mx-page .lev-faq-left h2 { font-size: clamp(30px, 3.1vw, 46px) !important; line-height: 1.1 !important; }
.mx-page .lev-faq-left p { font-size: 17px; color: #3A3833; }
.mx-page .lev-faq-left .lev-cta { height: 44px; padding: 0 1.2em; }
.mx-page .lev-qa, .mx-page .lev-qa:last-child { border-color: var(--mx-line); }
.mx-page .lev-qa .q { font-size: 17px; font-weight: 500; }
.mx-page .lev-qa .a { color: #3A3833; }
@media (max-width: 1199px) {
  .mx-page .lev-hero { padding: calc(var(--header-h) + 48px) var(--pad-x) 64px; }
  .mx-page .lev-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mx-page .lev-hero-right { max-width: 640px; margin: 0; }
  .mx-page .lev-stepcards { flex: 1 1 100%; max-width: 560px; }
  .mx-page .lev-steps-grid { gap: 40px; }
  .mx-page .lev-faq { padding: 80px var(--pad-x); }
}
@media (max-width: 767px) {
  .mx-page .lev-hero { padding: calc(var(--header-h) + 36px) var(--pad-x) 56px; }
  .mx-page .lev-h1 { font-size: clamp(32px, 9.4vw, 40px) !important; }
  .mx-page .lev-hero-sub { font-size: 17px; }
  .mx-page .lev-steps, .mx-page .lev-band { padding: 64px var(--pad-x) 0; }
  .mx-page .lev-powers { padding: 64px var(--pad-x); }
  .mx-page .lev-faq { padding: 64px var(--pad-x) 76px; }
  .mx-page .lev-step-num { font-size: 52px; }
  .mx-page .lev-phone-col > .mx-px { inset: 4% 0; }
  /* traka: dvije brojke gore, partner ispod, sve centrirano i manje (kao na naslovnoj) */
  .mx-page .credit-in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .mx-page .credit-in > *, .mx-page .credit-in > :first-child, .mx-page .credit-in > .credit-stat:last-child { align-items: center; text-align: center; min-height: 64px; padding: 10px 10px; }
  .mx-page .credit-by { grid-column: 1 / -1; order: 0; border-left: 0; border-top: 1px solid var(--mx-line); }
  .mx-page .credit-stat b { font-size: 23px; }
  .mx-page .credit-stat { font-size: 11px; }
  .mx-page .credit-logo img { height: 24px; }
}
:lang(ja) .mx-page .lev-h1, :lang(zh) .mx-page .lev-h1, :lang(ja) .mx-page :is(.lev-h2, .lev-h2-nowrap, .lev-powers-h2), :lang(zh) .mx-page :is(.lev-h2, .lev-h2-nowrap, .lev-powers-h2) { letter-spacing: 0 !important; line-height: 1.25 !important; word-break: auto-phrase; }
@media (prefers-reduced-motion: reduce) { .mx-page .lev-hl-pink, .mx-page .lev-hl-blue { background-size: 100% 86%; } }

/* pregled, javni sektor, vjerske zajednice: slike i kartice */
.mx-page .vertical-hero .img-frame { display: block; border: 1px solid var(--mx-line); }
.mx-page .vcard img, .mx-page .vertical-links .vcard img, .mx-page .vcards .img-frame { border-color: var(--mx-line) !important; box-shadow: none; }
.mx-page .vcards .vcard.pcard:hover, .mx-page .vertical-links .vcard.pcard:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(20, 19, 15, .4); }
.mx-page .vcard { background: #fff; }
.mx-page .vcard b { font-weight: 500; letter-spacing: -.01em; }
.mx-page .learn { color: var(--c-ink); font-weight: 500; }
.mx-page .learn:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
/* linije koje pokazuju smjer se presijavaju (umjesto tackica): narandzasto od govornika, zeleno do slusalaca */
.mx-page .mx-fl { fill: none; stroke: #FA500F; stroke-width: 2.2; stroke-linecap: round; }
.mx-page .mx-fl.g { stroke: #14A05B; }
.mx-page .mx-fl-s { fill: none; stroke: #FFE2A6; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 12 36; animation: mx-fl 1.2s linear infinite; }
.mx-page .mx-fl-s.g { stroke: #C4F4D8; }
@keyframes mx-fl { to { stroke-dashoffset: -48; } }
@media (prefers-reduced-motion: reduce) { .mx-page .mx-fl-s { animation: none; opacity: 0; } }
.mx-page .pcard-media { max-width: 260px; }
/* uski telefoni: Inter je siri od Archiva, duge rijeci (npr. njemacke slozenice) se lome sa crticom da nista ne izlazi */
@media (max-width: 420px) { .mx-page main { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; } }

/* ---------- 21. kako funkcionise: vizuelni prikaz (simdemo2) i telefon kao na naslovnoj ----------
   Naslov na sredini stranice, kao na naslovnoj (Boris 19.10. 21:30). */
.mx-page .mx-sim { background: #fff; }
.mx-page .mx-sim .sx { max-width: none; margin-top: 40px; }
.mx-page .mx-sim h2 { box-sizing: border-box; max-width: none; margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 620px) { .mx-page .mx-sim h2 { font-size: 28px; } }
/* telefon slusaoca stoji na svijetlo plavom kockastom platnu kao na stranicama rjesenja; prevod na njemu tece */
.mx-page .hero-media > div { width: 100%; }
.mx-page .phone-solo { position: relative; padding: 44px 0; }
.mx-page .phone-solo > .mx-px { inset: 0 auto; left: 50%; width: min(520px, 100%); transform: translateX(-50%); }
.mx-page .phone-solo .konf-phone { position: relative; z-index: 1; }
/* uski telefoni: dugo dugme (de, fr, it) smije u dva reda, strelica ostaje uz tekst */
@media (max-width: 420px) { .mx-page main .btn { white-space: normal; text-align: center; max-width: 100%; } }

/* ---------- 22. kontakt, demo, hvala: forme i kartice ----------
   Polja kao na naslovnoj: ravna, tanka linija, bijela; fokus narandzast kao u zaglavlju.
   Kartica s formom se ne pomjera pod misem. Brojevi koraka na /demo/ kao koraci na /partneri/. */
:where(.mx-page main) :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  background: #fff; border: 1px solid var(--mx-line-strong); transition: border-color .2s, background-color .2s;
}
:where(.mx-page main) :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):hover { border-color: #B9B5AA; }
:where(.mx-page main) :is(input, select, textarea):focus { outline: 2px solid #FA500F; outline-offset: -1px; border-color: #FA500F; background: #fff; }
.mx-page .field label { font-weight: 500; }
.mx-page .form-ok { border-color: var(--c-success); }
.mx-page .pcard:has(form), .mx-page aside.pcard { background: #fff; border-color: var(--mx-line-strong) !important; }
.mx-page .pcard:has(form):hover, .mx-page aside.pcard:hover { transform: none; box-shadow: none; }
.mx-page .pcard h2 { font-size: clamp(28px, 2.4vw, 36px); line-height: 1.1; }
.mx-page main .pcard > .chip[style*="border-radius:50%"] {
  display: block !important; width: auto !important; height: auto !important; margin: 0 0 40px !important;
  font-size: 14px !important; font-weight: 600; letter-spacing: 0; color: #FA500F; font-variant-numeric: tabular-nums;
}
/* prvi dio stranice bez naslovnog dijela (hvala, 404): isti razmak ispod zaglavlja i plave kocke */
.mx-page main > section.section:first-of-type { padding-top: calc(var(--header-h) + 72px); background: #F5F9FF !important; }
.mx-page main > section.section:first-of-type > .container { position: relative; z-index: 1; }
@media (max-width: 599px) { .mx-page main > section.section:first-of-type { padding-top: calc(var(--header-h) + 40px); } }
.mx-page .field label.consent { display: flex; font-weight: 400; font-size: 13.5px; }
.mx-page .vcard > img { width: 100%; height: auto; }

/* ---------- 23. pravne stranice, sigurnost, 404 ----------
   Tekst pravila ostaje iste sirine reda kao prije (oko 1040 px), da se lako cita na sirokom ekranu;
   sekcija bez svoje boje dobija svijetlu podlogu kao ostale. */
:where(.mx-page) .section { background-color: var(--c-surface); }
.mx-page .legal-prose { max-width: 1040px; }
.mx-page .prose h2 { font-size: 26px; font-weight: 500 !important; letter-spacing: -.02em !important; }
.mx-page .prose h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.mx-page .prose p, .mx-page .prose li { color: #3A3833; }
.mx-page .prose .updated { color: #8A867C; }
.mx-page .prose li::marker { color: #FA500F; }

/* ---------- 24. unutrasnje stranice: trake, kartice, platna (web-mistral2, treci krug Boris 19.10. 21:30) ----------
   Boris 19.10. 21:30 o drugom prolazu: tamne trake s rasutim toplim kockama izgledaju "kao pakao", "nije clean",
   "smedje vibre"; "radije stavi full crnu i onda napravi nesto lijepo, ovo S u pikselima". Sada:
   (a) obojene trake [data-mx-band]: sky (svijetlo plava, Boris je voli) i sun (zuta s mrezom od 40 px) s kockama
       koje bjeze od teksta (mistral.js), gore i dole meko prelaze u susjednu sekciju; black (cisto crna, bez
       rasutih kocki, s velikim pikselastim S iz znaka) za zavrsni poziv, hvala i demo;
   (b) kartice [data-mx-card]: sky (Pay As You Go, samo svijetlo plave kocke) i black (citat, bez kocki);
   (c) celije s tankom linijom .mx-cells i koraci .mx-steps;
   (d) fotografije, crtezi i telefoni na svijetlo plavom platnu koje se gasi prema svim rubovima (bez kvadrata);
   (e) pitanja uvijek na svijetloj sekciji: tanki redovi s kvadratnim plusom; pravne stranice s kazalom.
   Tekst i redoslijed sadrzaja su isti; mijenjaju se samo oznake (atributi, klase) i stil.
   :not(#mx) samo podize specificnost iznad starijih pravila s !important (sekcije 18 do 23). */

/* (a) obojene trake */
/* clip, ne hidden: hidden pravi kontejner za skrolanje i gasi ljepljive (sticky) stubove unutar trake */
.mx-page [data-mx-band] { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.mx-page [data-mx-band] > :not(.mx-bbg) { position: relative; z-index: 1; }
.mx-page main > [data-mx-band]::before { display: none; }
.mx-bbg, .mx-cbg, .mx-cv { position: absolute; inset: 0; z-index: 0; display: grid; grid-auto-rows: 40px; overflow: hidden; pointer-events: none; }
/* sloj kocki uvijek pokriva cijelu traku, i kad stil stranice suzava djecu sekcije (npr. .pf-faq > * na /cijene/) */
.mx-page .mx-bbg, .mx-page .mx-cbg, .mx-page .mx-cv { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.mx-bbg i, .mx-cbg i, .mx-cv i { display: block; }
.mx-bbg i.tw, .mx-cbg i.tw, .mx-cv i.tw { animation: mx-tw2 5s ease-in-out infinite; }
.mx-page main [data-mx-band="sun"]:not(#mx) { background: #FFD800 !important; color: var(--c-ink); }
.mx-page main [data-mx-band="sky"]:not(#mx) { background: #DCE9FF !important; color: var(--c-ink); }
.mx-page main [data-mx-band="black"]:not(#mx) { background: #000 !important; color: #fff; }
/* meki rub trake (mistral.js postavlja --ft, --fb i boje susjeda --n0, --n1): pozadina prelazi u susjednu sekciju */
.mx-page main [data-mx-band="sky"]:is(.mx-fade-t, .mx-fade-b):not(#mx) {
  background: linear-gradient(var(--n0, #DCE9FF) 0, #DCE9FF var(--ft, 0px), #DCE9FF calc(100% - var(--fb, 0px)), var(--n1, #DCE9FF) 100%) !important;
}
.mx-page main [data-mx-band="sun"]:is(.mx-fade-t, .mx-fade-b):not(#mx) {
  background: linear-gradient(var(--n0, #FFD800) 0, #FFD800 var(--ft, 0px), #FFD800 calc(100% - var(--fb, 0px)), var(--n1, #FFD800) 100%) !important;
}
.mx-page main [data-mx-band="sun"]::after, .mx-page [data-mx-card="sun"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(20, 19, 15, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 19, 15, .08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.mx-page main [data-mx-band="sun"]:is(.mx-fade-t, .mx-fade-b)::after {
  -webkit-mask-image: linear-gradient(transparent 0, #000 var(--ft, 0px), #000 calc(100% - var(--fb, 0px)), transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 var(--ft, 0px), #000 calc(100% - var(--fb, 0px)), transparent 100%);
}
/* poneka kocka padne preko ruba u prazan prostor susjeda: traka tada ne sijece po visini, samo po sirini */
.mx-page .mx-drift:not(#mx), .mx-drift { z-index: 1; overflow-x: clip !important; overflow-y: visible !important; }
/* sekcija ispod (ili iznad) mekog ruba nema tanku liniju: prelaz se ne smije vidjeti kao rez */
.mx-noline::before { display: none !important; }
/* traka iznad crne trake (mistral.js .mx-fade-k): dno se gasi u svijetlu pozadinu, pa treba malo vise mjesta ispod sadrzaja */
.mx-page main > [data-mx-band].mx-fade-k:not(#mx):not(#mk) { padding-bottom: 168px !important; }
@media (max-width: 699px) { .mx-page main > [data-mx-band].mx-fade-k:not(#mx):not(#mk) { padding-bottom: 112px !important; } }

/* tekst na crnoj traci i kartici: bijelo, zuto glavno dugme, bijelo uokvireno sporedno */
.mx-page :is([data-mx-band="black"], [data-mx-card="black"]) :is(h1, h2, h3, b, strong, .q) { color: #fff; }
.mx-page :is([data-mx-band="black"], [data-mx-card="black"]) :is(p, .t-lead, .t-card, li) { color: rgba(255, 255, 255, .74); }
.mx-page main :is([data-mx-band="black"], [data-mx-card="black"]) .chip { color: #FFC100; }
.mx-page main :is([data-mx-band="sun"], [data-mx-card="sun"]) .chip { color: #14130F; }
.mx-page :is([data-mx-band="black"], [data-mx-card="black"]) :is(p, .t-lead, .t-card, li) a:not(.btn) { color: #FFD800; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 216, 0, .5); }
.mx-page [data-mx-band="black"] .btn-primary { border-color: #FFD800; }
.mx-page [data-mx-band="black"] .btn-primary:hover { box-shadow: none; }
.mx-page [data-mx-band="black"] .btn-secondary { background: transparent; border-color: rgba(255, 255, 255, .72); color: #fff; }
.mx-page [data-mx-band="black"] .btn-secondary:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
/* na zutoj traci je glavno dugme crno (zuto dugme se na zutom ne vidi), kao "Prijava" u zaglavlju */
.mx-page [data-mx-band="sun"] .btn-primary { background: #14130F; border-color: #14130F; color: #fff; }
.mx-page [data-mx-band="sun"] .btn-primary:hover { background: #000; color: #fff; box-shadow: none; }
.mx-page [data-mx-band="sun"] .btn-secondary { background: #fff; }

/* pikselasto S iz znaka simultano (mistral.js): 8 x 8 kocki, jedna boja pruge po redu, ostre ivice.
   --c je velicina jedne kocke; S je visoko 8 kocki. Redovi se pojave odozgo nadolje. */
.mx-s { --c: 12px; display: block; flex: none; width: calc(var(--c) * 8); height: calc(var(--c) * 8); margin: 0 0 36px; }
.mx-s svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mx-s.mx-wait rect { opacity: 0; transform: translateY(-.35px); }
.mx-s.mx-wait.mx-go rect { opacity: 1; transform: none; transition: opacity .5s var(--mx-ease), transform .5s var(--mx-ease); transition-delay: calc(var(--r) * 85ms); }
@media (prefers-reduced-motion: reduce) { .mx-s.mx-wait rect { opacity: 1; transform: none; transition: none; } }

/* zavrsni poziv na crnoj traci (mx-s-side): tekst lijevo, veliko S desno (kao M kod Mistrala); na telefonu S
   iznad teksta. Bez JS (bez S) traka ostaje centrirana kao prije. */
.mx-page main [data-mx-band="black"].mx-s-side:not(#mx) { padding: 128px var(--pad-x); text-align: left; }
.mx-page main > .page-hero + [data-mx-band="black"].mx-s-side:not(#mx) { padding: 152px var(--pad-x); }
.mx-page .mx-s-side h2 { max-width: 18ch; margin: 0; font-size: clamp(34px, 3.8vw, 58px) !important; line-height: 1.06 !important; letter-spacing: -.035em; }
.mx-page .mx-s-side :is(.t-lead, h2 + p) { max-width: 560px; margin: 20px 0 0; font-size: 18px; line-height: 1.55; }
.mx-page .mx-s-side > .container > .btn { margin: 34px 10px 0 0; }
.mx-page .mx-s-side .px-ctas { justify-content: flex-start; }
@media (min-width: 900px) {
  .mx-page .mx-s-side > .container {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto auto 1fr; align-items: start;
  }
  .mx-page .mx-s-side > .container > :is(h2, p, .px-ctas) { grid-column: 1 / 4; }
  .mx-page .mx-s-side > .container > h2 { grid-row: 2; }
  .mx-page .mx-s-side > .container > p { grid-row: 3; }
  .mx-page .mx-s-side > .container > :is(.btn, .px-ctas) { grid-row: 4; }
  .mx-page .mx-s-side > .container > .btn ~ .btn { grid-column: 2; }
  .mx-page .mx-s-side > .container > .mx-s { --c: 24px; grid-column: 4; grid-row: 1 / -1; align-self: center; margin: 0 0 0 80px; }
}
@media (min-width: 1100px) { .mx-page .mx-s-side > .container > .mx-s { --c: 30px; margin-left: 120px; } }
@media (max-width: 599px) {
  .mx-page main [data-mx-band="black"].mx-s-side:not(#mx), .mx-page main > .page-hero + [data-mx-band="black"].mx-s-side:not(#mx) { padding: 80px var(--pad-x) 88px; }
  .mx-page .mx-s-side h2 { font-size: clamp(30px, 8.6vw, 38px) !important; }
  .mx-page .mx-s-side :is(.t-lead, h2 + p) { font-size: 17px; }
  .mx-page .mx-s-side > .container > .btn { margin: 26px 8px 0 0; }
  .mx-s { --c: 10px; margin-bottom: 32px; }
}
/* hvala, 404 (mx-s-top): crna prva sekcija, S na sredini iznad teksta */
.mx-page .mx-s-top .mx-s { --c: 18px; margin: 0 auto 48px; }
@media (max-width: 599px) { .mx-page .mx-s-top .mx-s { --c: 12px; margin-bottom: 36px; } }
/* demo (mx-s-inline): kratka zavrsna recenica na crnoj traci, malo S lijevo od nje */
.mx-page .mx-s-inline > .container { display: flex; align-items: center; justify-content: center; gap: 28px; }
.mx-page .mx-s-inline .mx-s { --c: 9px; margin: 0; }
.mx-page main > .section-sm[data-mx-band="black"] .t-lead { font-size: 19px; color: #fff; }
.mx-page .mx-s-inline .t-lead { text-align: left; }
.mx-page main > .section-sm[data-mx-band="black"]:not(#mx) { padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 599px) {
  .mx-page .mx-s-inline > .container { gap: 18px; justify-content: flex-start; }
  .mx-page .mx-s-inline .mx-s { --c: 7px; }
  .mx-page main > .section-sm[data-mx-band="black"] .t-lead { font-size: 17px; }
}

/* sadrzajne trake: vise zraka */
.mx-page main > .section[data-mx-band]:not(.cta-band):not(#mx) { padding-top: 112px; padding-bottom: 112px; }
.mx-page main > .section-sm[data-mx-band]:not(#mx) { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 599px) { .mx-page main > .section[data-mx-band]:not(.cta-band):not(#mx) { padding-top: 72px; padding-bottom: 72px; } }

/* (b) kartice u boji */
.mx-page [data-mx-card] { position: relative; isolation: isolate; overflow: hidden; }
.mx-page [data-mx-card] > :not(.mx-cbg) { position: relative; z-index: 1; }
.mx-page main [data-mx-card="black"]:not(#mx) { background: #000 !important; border-color: #000 !important; color: #fff; }
.mx-page main [data-mx-card="sky"]:not(#mx) { background: #DCE9FF !important; border-color: #C7DAF8 !important; }
.mx-page main [data-mx-card]:hover:not(#mx) { transform: none; box-shadow: none; }
.mx-page [data-mx-card] .pcard-sep { border-top-color: rgba(255, 255, 255, .16); }
.mx-page [data-mx-card="sky"] .pcard-sep { border-top-color: rgba(20, 19, 15, .12); }
/* bijela plocica na kartici u boji (kao logotip na kartici "u radu") */
.mx-page [data-mx-card] .img-frame { background: #fff; border: 0 !important; box-shadow: none; }

/* (c) celije s tankom linijom: bez razmaka, susjedne celije dijele jednu liniju */
.mx-page main .mx-cells:not(#mx) { gap: 0 !important; padding: 1px 0 0 1px; }
.mx-page main .mx-cells:not(#mx) > * { margin: -1px 0 0 -1px !important; border: 1px solid var(--mx-line) !important; background: #fff; box-shadow: none !important; transition: background-color .3s, opacity .6s ease, transform .6s ease; }
.mx-page main .mx-cells:not(#mx) > :hover { background: #FAF9F5 !important; transform: none !important; box-shadow: none !important; }
.mx-page main .mx-cells > .pcard { padding: 32px; }
.mx-page main .mx-cells .img-frame { border: 1px solid var(--mx-line) !important; box-shadow: none; }
@media (max-width: 599px) { .mx-page main .mx-cells > .pcard { padding: 24px; } }
/* celije na obojenoj traci: bijele, linija malo jaca */
.mx-page [data-mx-band] .mx-cells:not(#mx) > * { border-color: rgba(20, 19, 15, .12) !important; }

/* koraci: narandzasta linija iznad, oznaka koraka narandzasta kao 01 / 02 / 03 */
.mx-page main .mx-steps { position: relative; }
.mx-page main .mx-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: #FA500F; transform-origin: left; }
.mx-page main .mx-steps.mx-wait::before { transform: scaleX(0); }
.mx-page main .mx-steps.mx-wait.mx-go::before { transform: scaleX(1); transition: transform 1.8s cubic-bezier(.6, 0, .2, 1) .2s; }
.mx-page main .mx-steps > * > .chip:first-child { display: block; margin: 0 0 40px; font-size: 13px; letter-spacing: .08em; color: #FA500F; font-variant-numeric: tabular-nums; }

/* (d) fotografija, crtez ili telefon na svijetlo plavom platnu: platno je sire od slike i gasi se prema svim
   rubovima (mistral.js), pa se ne vidi nikakav pravougaonik; bez sjene ispod platna */
.mx-page [data-mx-canvas] { position: relative; isolation: isolate; }
.mx-page [data-mx-canvas] > :not(.mx-cv) { position: relative; z-index: 1; }
.mx-page .mx-cv { grid-auto-rows: 36px; }
.mx-page .value-media[data-mx-canvas] > .mx-cv { inset: -56px -64px !important; }
@media (max-width: 767px) { .mx-page .value-media[data-mx-canvas] > .mx-cv { inset: -32px calc(var(--pad-x) * -1) !important; } }
.mx-page .phone-solo > .mx-px, .mx-page .lev-phone-col > .mx-px { box-shadow: none !important; }
/* partner stranica: platno je sire od kartice s ponudom, da se gasenje vidi oko nje */
@media (min-width: 768px) { .px-visual .mx-px { inset: -48px -56px; } }
.px-hero { overflow-x: clip; }

/* (e) pitanja: tanki redovi, kvadratni plus kao +/- u vizuelnom prikazu na naslovnoj, uvijek na svijetloj sekciji */
.mx-page .acc { border-top-color: var(--mx-line); }
.mx-page .acc-head { min-height: 68px; padding: 18px 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.mx-page .acc-head:hover { color: var(--c-ink); }
.mx-page .acc-head svg, .mx-page .pf-faq summary svg, .mx-page .lev-pm i { display: none; }
.mx-page .acc-head::after, .mx-page .lev-qa .lev-pm, .mx-page .pf-faq summary::after {
  content: ""; flex: none; width: 34px; height: 34px; box-sizing: border-box; border: 1px solid var(--mx-line-strong); background-color: #fff;
  background-image: linear-gradient(#14130F, #14130F), linear-gradient(#14130F, #14130F);
  background-size: 12px 1.5px, 1.5px 12px; background-position: center; background-repeat: no-repeat;
  transition: background-color .2s, background-size .25s var(--mx-ease);
}
.mx-page .acc-item.open .acc-head::after, .mx-page .lev-qa.open .lev-pm, .mx-page .pf-faq details[open] summary::after { background-size: 12px 1.5px, 1.5px 0; }
.mx-page .acc-head:hover::after, .mx-page .lev-qa button:hover .lev-pm, .mx-page .pf-faq summary:hover::after { background-color: #FAF9F5; }
.mx-page .acc-body-in { color: #3A3833; }
@media (prefers-reduced-motion: reduce) {
  .mx-page main .mx-steps.mx-wait::before { transform: none; }
  .mx-bbg i.tw, .mx-cbg i.tw, .mx-cv i.tw { animation: none; }
}

/* 24.1 o nama, karijere, klijenti, reference, blog, jezici, cesta pitanja */
/* na zutoj traci je crno samo dugme na traci, ne dugme u bijeloj kartici */
.mx-page [data-mx-band="sun"] :is(.pcard, [data-mx-card]) .btn-primary { background: var(--c-primary); border-color: var(--c-ink); color: var(--c-ink); }
.mx-page [data-mx-band="sun"] :is(.pcard, [data-mx-card]) .btn-primary:hover { background: var(--c-primary-hover); }
/* o nama: misija na plavoj traci, naslov lijevo, tekst desno */
@media (min-width: 1100px) {
  .mx-page .mx-mission > .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 72px; }
  .mx-page .mx-mission > .container > .chip { grid-column: 1; grid-row: 1; }
  .mx-page .mx-mission > .container > h2 { grid-column: 1; grid-row: 2; align-self: start; }
  .mx-page .mx-mission > .container > .prose { grid-column: 2; grid-row: 1 / span 2; max-width: none !important; }
}
.mx-page .mx-mission h2 { font-size: clamp(36px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
.mx-page .mx-mission .prose .t-lead { font-size: 18px; line-height: 1.6; color: #2A2925; }
.mx-page .mx-mission .prose .t-lead:first-child { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.45; color: var(--c-ink); }
/* karijere: bijela kartica na zutoj traci, crtez na svijetlo plavom platnu preko cijele sirine kartice */
/* na zutoj traci samo tanka linija: tamna sjena na zutom postaje maslinasta ("smedje vibre") */
.mx-page [data-mx-band="sun"] .pcard { background: #fff; border-color: rgba(20, 19, 15, .16) !important; box-shadow: none; }
.mx-page [data-mx-band="sun"] .pcard:hover { transform: none; box-shadow: none; }
.mx-page .pcard-media[data-mx-canvas] { width: auto; max-width: none; margin: 8px 0 0; padding: 30px 0; }
.mx-page .pcard-media[data-mx-canvas] img { position: relative; z-index: 1; }
/* cesta pitanja: svijetla sekcija, pitanja na bijeloj ploci s tankom linijom */
.mx-page .mx-faq .acc { background: #fff; border: 1px solid var(--mx-line); padding: 8px 32px; }
.mx-page .mx-faq .acc-item:last-child { border-bottom: 0; }
@media (min-width: 1000px) { .mx-page .mx-faq .cols-faq > div:first-child { position: sticky; top: calc(var(--header-h-sticky) + 40px); align-self: start; } }
@media (max-width: 599px) { .mx-page .mx-faq .acc { padding: 4px 18px; } }
/* podrzani jezici: napomena na zutoj traci */
.mx-page main > .section-sm[data-mx-band="sun"] p { margin: 0; font-size: 17px; color: var(--c-ink); }

/* 24.2 kontakt, demo, hvala */
/* forma kao staklena kartica na naslovnoj, na obicnoj svijetloj sekciji (bez toplih kocki oko nje) */
.mx-page main .pcard:has(form):not(#mx) {
  background: rgba(255, 255, 255, .94) !important; border-color: var(--mx-line-strong) !important;
  box-shadow: 0 40px 80px -56px rgba(20, 19, 15, .35); padding: 40px;
}
@media (max-width: 599px) { .mx-page main .pcard:has(form):not(#mx) { padding: 24px 20px; } }
/* kontakt: direktan kontakt kao obicna bijela kartica s tankom linijom uz formu, visoka koliko joj treba */
.mx-page main .grid > aside.pcard { align-self: start; padding: 40px; }
.mx-page main .grid > aside.pcard .img-frame { display: block; width: 100%; max-width: 360px; height: auto; }
@media (max-width: 599px) { .mx-page main .grid > aside.pcard { padding: 28px 22px; } }
/* demo: koraci kao celije s narandzastom linijom, tekst koraka kao naslov koraka */
.mx-page .mx-steps > .pcard > .t-lead { font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--c-ink); }
/* hvala: crna prva sekcija, tekst na sredini; zadrzava razmak ispod zaglavlja (kao u sekciji 22) */
.mx-page main > section.section[data-mx-band]:first-of-type:not(#mx) { padding-top: calc(var(--header-h) + 72px); padding-bottom: 120px; }
@media (max-width: 599px) { .mx-page main > section.section[data-mx-band]:first-of-type:not(#mx) { padding-top: calc(var(--header-h) + 40px); } }
.mx-page main > section.section[data-mx-band]:first-of-type h1 { font-size: clamp(40px, 4.6vw, 70px); line-height: 1.02; letter-spacing: -.042em; }
@media (max-width: 599px) { .mx-page main > section.section[data-mx-band]:first-of-type:not(#mx) { padding-bottom: 72px; } .mx-page main > section.section[data-mx-band]:first-of-type h1 { font-size: clamp(32px, 9.4vw, 40px); } }

/* 24.3 pravne stranice, sigurnost, 404 */
/* kazalo odlomaka (mistral.js ga pravi iz postojecih naslova): tanki redovi, trenutni odlomak podvucen narandzasto
   kao aktivni korak u vizuelnom prikazu na naslovnoj; tekst ostaje iste citljive sirine reda */
.mx-page .mx-legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 72px; align-items: start; max-width: 1400px; }
.mx-page .mx-legal > .legal-prose { max-width: 1040px; }
.mx-toc { position: sticky; top: calc(var(--header-h-sticky) + 32px); max-height: calc(100vh - var(--header-h-sticky) - 64px); overflow-y: auto; }
.mx-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mx-line); }
.mx-toc li { margin: 0; }
.mx-toc a { position: relative; display: block; padding: 11px 0 12px; border-bottom: 1px solid var(--mx-line); font-size: 14px; line-height: 1.35; color: #6E6B64; text-decoration: none; transition: color .2s; }
.mx-toc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #FA500F; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--mx-ease); }
.mx-toc a:hover { color: var(--c-ink); }
.mx-toc a.on { color: var(--c-ink); font-weight: 500; }
.mx-toc a.on::after { transform: scaleX(1); }
.mx-page .legal-prose > h2 { scroll-margin-top: calc(var(--header-h-sticky) + 24px); }
@media (max-width: 1099px) {
  .mx-page .mx-legal { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .mx-toc { position: static; max-height: none; overflow: visible; }
  .mx-toc ol { columns: 2; column-gap: 28px; border-top: 0; }
  .mx-toc li { break-inside: avoid; border-top: 1px solid var(--mx-line); }
  .mx-toc a { border-bottom: 0; }
}
@media (max-width: 599px) { .mx-toc ol { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .mx-toc a::after { transition: none; } }
/* sigurnost: cetiri principa kao celije na plavoj traci */
.mx-page [data-mx-band="sky"] .form-note { color: #3A3833; font-size: 13px; }
/* 404: crna prva sekcija kao hvala (S na sredini iznad teksta) */
.mx-page main > section.p404-section[data-mx-band]:not(#mx) { padding-top: calc(var(--header-h) + 88px); }
@media (max-width: 599px) { .mx-page main > section.p404-section[data-mx-band]:not(#mx) { padding-top: calc(var(--header-h) + 48px); } }

/* 24.4 rjesenja */
/* pregled: pet rjesenja kao celije s tankom linijom; "Kako?" na plavoj traci */
.mx-page .vcards.mx-cells > .vcard { padding: 20px; }
.mx-page .vcards.mx-cells .img-frame, .mx-page .vertical-links.mx-cells .vcard img { width: 100%; height: auto; }
/* javni sektor, vjerske zajednice: crtez u naslovnom dijelu na svijetlo plavom platnu */
.mx-page .value-media[data-mx-canvas] { padding: 34px; }
.mx-page .value-media[data-mx-canvas] .img-frame { display: block; border: 0 !important; box-shadow: 0 30px 60px -36px rgba(20, 19, 15, .3) !important; }
.mx-page .value-media[data-mx-canvas] .img-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 599px) { .mx-page .value-media[data-mx-canvas] { padding: 20px; } }
/* izazov kao cisto crna kartica (citat, dokaz), bez kocki */
.mx-page .quote-box[data-mx-card="black"]:not(#mx) { padding: 44px 48px; max-width: 860px !important; }
.mx-page .quote-box[data-mx-card="black"] .t-lead { max-width: 30em !important; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: #fff; }
@media (max-width: 599px) { .mx-page .quote-box[data-mx-card="black"]:not(#mx) { padding: 28px 22px; } }
/* koraci (prvi, drugi, treci korak): crtez manji, tekst ispod */
.mx-page .mx-steps .pcard-media { width: 62%; margin: 8px auto 0; }
/* za koga je: cetiri celije na zutoj traci */
.mx-page [data-mx-band="sun"] .mx-cells > .pcard { background: #fff; }
.mx-page [data-mx-band="sun"] .mx-cells .pcard-row { font-weight: 500; }
/* konferencije, objekt, turisticke grupe: koraci kao jedan stub celija, "sta pokrece" na plavoj traci,
   pitanja na svijetloj sekciji (osnova u sekciji 20) */
.mx-page .lev-stepcards.mx-cells:not(#mx) { gap: 0 !important; }
.mx-page .lev-stepcards.mx-cells .lev-step:hover { transform: none; box-shadow: none; }
.mx-page .lev-powers[data-mx-band]:not(#mx) { padding: 112px var(--pad-x); }
.mx-page .lev-powers[data-mx-band] .lev-panel { position: relative; z-index: 1; border-color: rgba(20, 19, 15, .12); box-shadow: 0 40px 80px -48px rgba(20, 19, 15, .4); }
@media (max-width: 767px) { .mx-page .lev-powers[data-mx-band]:not(#mx) { padding: 72px var(--pad-x); } }

/* 24.5 kako funkcionise */
/* slusalac: telefon na svijetlo plavom platnu, sve na plavoj traci (kao odlomak s telefonom na naslovnoj) */
.mx-page [data-mx-band="sky"] .phone-solo + p { color: #3A3833; }

/* 24.6 cijene */
/* "Prilagodjeno rjesenje": cista bijela staklena kartica s tankom linijom (Boris: "prozirno bijelo");
   Pay As You Go svijetlo plava sa svijetlo plavim kockama, bez tamno plave */
.mx-page .pf-card.m .pf-panel:not(#mx) { background: rgba(255, 255, 255, .82); border-color: var(--mx-line-strong); }
.mx-page .pf-panel[data-mx-card]:not(#mx) { padding-bottom: 28px; }
.mx-page .pf-panel[data-mx-card="sky"] .pf-pill { background: #fff; }
.mx-page .pf-panel[data-mx-card="sky"] .pf-sep { color: var(--c-ink); }

/* 24.7 partneri: zavrsni poziv na crnoj traci kao na ostalim stranicama (pravila iznad, uz .cta-band) */

/* ---------- 25. treci krug (Boris 19.10. 21:30): podnozje i meki prelazi naslovnih dijelova ----------
   Podnozje je cisto crno na svim stranicama (i na naslovnim), kao crna traka iznad njega, s tankom svijetlom
   linijom izmedju. Plavo polje se na dnu meko gasi u sljedecu sekciju (mistral.js, mxEdge): bez linije i reza. */
:root { --c-footer-bg: #000; --c-footer-text: rgba(255, 255, 255, .72); --c-footer-divider: rgba(255, 255, 255, .12); }
.site-footer { border-top: 1px solid rgba(255, 255, 255, .12); }
/* naslovna: "Sa simultano.ai pricate..." prelazi u bijeli vizuelni prikaz, koja kocka padne preko ruba */
/* .hero ~ section.konf: jace od pravila za okvirne linije (sekcije 5 i 16) */
.hero ~ section.konf.mx-fade-b, .konf.mx-fade-b { background: var(--n1, #F5F9FF) linear-gradient(#F5F9FF calc(100% - var(--fb, 0px)), var(--n1, #F5F9FF)) !important; }
/* unutrasnje stranice: plavi naslovni dio isto */
.mx-page :is(.page-hero, .pf-hero, .lev-hero).mx-fade-b:not(#mx),
.mx-page main > section.section:first-of-type.mx-fade-b:not(#mx) { background: linear-gradient(#F5F9FF calc(100% - var(--fb, 0px)), var(--n1, #F5F9FF)) !important; }

/* ---------- 21. meni, jezici, workshopi (web-meni1) ----------
   Boris 19.10. navece. Ovaj blok ubacuje tools/meni_workshopi/apply.mjs (izvor je blok21.css pored skripte).
   (a) Rjesenja, "Gdje?": tri plocice u rjecniku naslovne (vatra, sunce, tinta kao kartice "u radu") s pikselnim
       ikonama koje su bile u malim karticama na naslovnoj; (b) O nama, "Simultano 101": nova slicica (mala bina iz
       vizuelnog prikaza i telefon sa naslovne na plavim kockama), zuto kvadratno dugme; (c) iste tri plocice u
       mobilnom meniju. */
.menu-tile .tile-art { position: relative; border: 1px solid var(--mx-line-strong); background: #F7F5EF; }
.menu-tile .tile-art img { transition: transform .5s var(--mx-ease); }
.menu-tile:hover .tile-art img, .menu-tile:focus-visible .tile-art img { transform: scale(1.06); }
.menu-tile .tile-label { padding-top: 10px; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.menu-tile:hover .tile-label, .menu-tile:focus-visible .tile-label { color: var(--c-ink); text-decoration: underline; text-decoration-color: #FA500F; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.menu-tile:focus-visible { outline: 2px solid #FA500F; outline-offset: 3px; }
.panel-video .vthumb { border-color: var(--mx-line-strong); background: #F5F9FF; }
.panel-video .vthumb .play { top: auto; left: 10px; bottom: 10px; width: 38px; height: 38px; margin: 0; }
.panel-video:hover .vthumb .play { transform: scale(1.08); }
/* mobilni meni: plocice kao redovi (sliciva lijevo, natpis desno), da duge rijeci (de, fr, es) ne pucaju na 320 px */
.m-sub .m-tiles { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 10px 16px; }
.m-sub .m-tile { display: flex; align-items: center; gap: 14px; min-height: 0; padding: 4px 0; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--c-ink); }
.m-sub .m-tile img { flex: none; display: block; width: 80px; height: 48px; border: 1px solid var(--mx-line-strong); }
.m-sub .m-tile span { min-width: 0; overflow-wrap: break-word; }
.m-group.open .m-sub:has(.m-tiles) { max-height: 640px; }
:lang(ja) :is(.menu-tile .tile-label, .m-sub .m-tile span) { word-break: auto-phrase; }
/* (d) /jezici/ i /cijene/: "Po upitu je moguce aktivirati i jezike koji nisu na listi" na zutoj traci s mrezom
   (kao kartica "Obrazovanje i radionice"), tri primjera kao polja liste s isprekidanom linijom, crno dugme */
.lx-ask { position: relative; isolation: isolate; overflow: hidden; background: #FFD800 !important; color: var(--c-ink); }
.lx-ask::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(20, 19, 15, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 19, 15, .08) 1px, transparent 1px);
  background-size: 40px 40px; }
.mx-page main > section.lx-ask, .lx-ask--pf { padding: 72px var(--pad-x); }
.lx-ask-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 28px 56px; align-items: center; max-width: var(--container); margin: 0 auto; }
.lx-ask--pf .lx-ask-in { max-width: 1140px; }
.lx-ask h2 { margin: 0; font-size: clamp(26px, 2.5vw, 38px) !important; line-height: 1.12 !important; text-wrap: balance; text-align: left; }
.lx-ask-copy p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: #2A2925; }
.lx-ask-ex { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lx-ask-ex li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; background: #fff; border: 1px dashed rgba(20, 19, 15, .4); font-size: 15.5px; font-weight: 500; }
.lx-ask-ex .flag { display: block; width: 24px; height: 18px; }
.lx-ask-ex .lx-ask-more { gap: 5px; padding: 10px 14px; background: rgba(255, 255, 255, .55); }
.lx-ask-more i { display: block; width: 5px; height: 5px; background: #14130F; }
.lx-ask .lx-ask-cta { justify-self: start; background: #14130F; border-color: #14130F; color: #fff; white-space: nowrap; }
.lx-ask .lx-ask-cta:hover { background: #000; color: #fff; box-shadow: none; }
@media (max-width: 1100px) {
  .lx-ask-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 599px) {
  .mx-page main > section.lx-ask, .lx-ask--pf { padding: 56px var(--pad-x); }
  .lx-ask-ex li { min-height: 44px; padding: 8px 12px; font-size: 15px; }
}
:lang(ja) .lx-ask h2, :lang(zh) .lx-ask h2 { letter-spacing: 0 !important; line-height: 1.3 !important; word-break: auto-phrase; }
/* (e) /rjesenja/: sest kartica (s Workshopima) u dva reda po tri umjesto pet plus jedne */
@media (min-width: 1121px) { .vcards:has(> a[href$="/rjesenja/workshopi/"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* (f) /rjesenja/workshopi/ (main.wk): rjecnik naslovne i treceg kruga. Naslov na plavim kockama, telefon na svijetlo
   plavom platnu koje se gasi prema rubovima (mistral.js), celije cinjenica kao traka povjerenja, kartice u bojama
   "u radu" s pikselnim ikonama (tinta je cisto crna, bez toplih kocki), koraci s velikim 01 / 02 / 03 (prvi podvucen
   narandzasto, tanke linije), plava traka s grupama koja se meko gasi gore i dole ([data-mx-band="sky"]), celije s
   tankom linijom, pitanja na svijetloj sekciji s kvadratnim plusom, zavrsni poziv na cisto crnoj traci s pikselastim
   S ([data-mx-band="black"], sekcija 24). Bez JS-a sve je vidljivo (pitanja su <details>). */
.wk > section { position: relative; }
.mx-page .wk-hero { padding-bottom: 80px; }
.wk-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.mx-page .wk-hero h1 { max-width: 16ch; font-size: clamp(38px, 4vw, 62px) !important; }
.wk-ey { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #6E6B64; }
.wk-ey .wk-pix { flex: none; width: 24px; height: 24px; }
.wk-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.wk-ctas-c { justify-content: center; }
.mx-page .wk-hero-vis .phone-solo { padding: 48px 0; }
.mx-page .wk-hero-vis .phone-solo > .mx-px { width: min(560px, 100%); }
.wk-hero .konf-controls .lang img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* cinjenice */
.wk-facts { background: #fff; }
.wk-facts-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: calc(var(--container) + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x); }
.wk-fact { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 104px; padding: 18px 28px; border-left: 1px solid var(--mx-line); }
.wk-fact:first-child { border-left: 0; padding-left: 0; }
.wk-fact b { flex: none; font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--c-ink); white-space: nowrap; }
.wk-fact span { min-width: 0; max-width: 230px; font-size: 14px; line-height: 1.35; color: #6E6B64; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* za koga: kartice u bojama */
.wk-for h2, .wk-steps h2, .wk-feat h2 { max-width: 26ch; }
.wk-tones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wk-tone { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 340px; padding: 28px; }
.wk-tone > * { position: relative; z-index: 1; }
.wk-tone > .wk-tone-px { position: absolute; z-index: 0; top: 0; right: 0; width: min(72%, 220px); height: auto; }
.wk-tone-plate { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: auto; background: #fff; border: 1px solid rgba(20, 19, 15, .12); }
.wk-tone-plate .wk-pix { width: 48px; height: 48px; }
.mx-page .wk-tone h3 { margin: 56px 0 10px; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.wk-tone p { margin: 0; font-size: 16px; line-height: 1.5; color: #2A2925; }
.wk-tone--sun { background: #FFD800; }
.wk-tone--sun::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(20, 19, 15, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 19, 15, .08) 1px, transparent 1px); background-size: 40px 40px; }
.wk-tone--sky { background: #DCE9FF; }
.wk-tone--ink { background: #000; }
.wk-tone--ink .wk-tone-plate { border-color: transparent; }
.mx-page .wk-tone--ink h3, .mx-page .wk-tone--fire h3 { color: #fff; }
.wk-tone--ink p { color: rgba(244, 241, 234, .82); }
.wk-tone--fire { background: linear-gradient(140deg, #FB580E 0%, #EF3A08 42%, #E10500 72%, #B30400 100%); }
.wk-tone--fire p { color: rgba(255, 255, 255, .92); }
.wk-tone--fire .wk-tone-plate { border-color: transparent; }
.wk-tone--fire::after {
  content: ""; position: absolute; inset: -4%; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 640' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23FFD800' stroke-opacity='.45' stroke-width='1.1'%3E%3Cpath d='M0 24 C70 6 130 44 200 24 S330 8 400 26'/%3E%3Cpath d='M0 96 C90 76 140 116 200 96 S300 78 400 102'/%3E%3Cpath d='M0 168 C60 150 120 186 200 168 S340 150 400 172'/%3E%3Cpath d='M0 240 C110 222 150 258 200 240 S280 222 400 246'/%3E%3Cpath d='M0 312 C70 294 130 330 200 312 S330 296 400 316'/%3E%3Cpath d='M0 384 C90 366 140 402 200 384 S300 366 400 390'/%3E%3Cpath d='M0 456 C60 440 120 472 200 456 S340 440 400 460'/%3E%3Cpath d='M0 528 C110 510 150 546 200 528 S280 512 400 534'/%3E%3Cpath d='M0 600 C70 584 130 616 200 600 S330 584 400 604'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: mx-drift 22s linear infinite alternate;
}
/* tri koraka: tanke linije kao /partneri/ (px-ol), veliki broj koraka, prvi korak podvucen narandzasto (kao koraci na
   /rjesenja/konferencije/ i u vizuelnom prikazu na naslovnoj), tekst 17 px */
.mx-page .wk-steps { background: var(--c-surface); }
.wk-steps .px-ol { border-top-color: var(--mx-line-strong); border-bottom-color: var(--mx-line-strong); }
.wk-steps .px-ol::before { display: none; }
.wk-steps .px-ol li { position: relative; }
.wk-steps .px-ol li + li { border-left-color: var(--mx-line-strong); }
.wk-steps .px-ol li:first-child::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #FA500F; }
.wk-steps .px-ol b { margin-bottom: 36px; font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -.045em; color: var(--c-ink); }
.wk-steps .px-ol li:first-child b { color: #FA500F; }
.wk-steps .px-ol p { font-size: 17px; line-height: 1.55; }
/* grupe: plava traka (boja i meki rubovi iz sekcije 24), mala mapa sala */
.wk-groups-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.wk-groups .px-sub { margin-bottom: 28px; color: #2A2925; }
.wk-checks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wk-checks li { position: relative; padding-left: 32px; font-size: 16.5px; line-height: 1.45; color: #2A2925; }
.wk-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
  background: #FA500F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat; }
.wk-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px; background: #fff; border: 1px solid rgba(20, 19, 15, .12); box-shadow: 0 40px 80px -48px rgba(20, 19, 15, .4); }
.wk-room { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 96px; padding: 12px; background: #F7F5EF; border: 1px solid var(--mx-line); }
.wk-room--main { grid-column: 1 / -1; min-height: 124px; padding: 16px 18px; background: #FFF8DC; border-color: #EFD67E; }
.wk-room-n { font-size: 12px; font-weight: 600; line-height: 1; color: #FA500F; font-variant-numeric: tabular-nums; }
.wk-room b { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.wk-room--main b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.wk-codes { margin-top: auto; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: #6E6B64; white-space: nowrap; }
.wk-live { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em; color: #E10500; }
.wk-live i { display: block; width: 7px; height: 7px; background: #E10500; }
.wk-room:not(.wk-room--main)::after { content: ""; position: absolute; inset: -1px; border: 2px solid #FA500F; opacity: 0; animation: wk-scan 8s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); pointer-events: none; }
@keyframes wk-scan { 0% { opacity: 0; } 4% { opacity: 1; } 12% { opacity: 0; } 100% { opacity: 0; } }
/* sta dobijate: celije s tankom linijom */
.wk-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--mx-line); border-left: 1px solid var(--mx-line); }
.wk-cell { min-width: 0; padding: 32px; background: #fff; border-right: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); transition: background-color .3s; }
.wk-cell:hover { background: #FAF9F5; }
.wk-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 36px; background: #F6F4EE; }
.wk-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--c-ink); stroke-width: 1.6; }
.mx-page .wk-cell h3 { margin: 0 0 10px; font-size: 21px; }
.wk-cell p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #3A3833; }
/* pitanja: svijetla sekcija */
.mx-page .wk-faq { background: #FAF9F5; }
.wk-faq-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.wk-faq-left > p:not(.px-k) { margin: 18px 0 24px; font-size: 17px; color: #3A3833; }
.wk-faq-list { border-top: 1px solid var(--mx-line-strong); }
.wk-qa { border-bottom: 1px solid var(--mx-line-strong); }
.wk-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 16px 0; font-size: 17px; font-weight: 500; line-height: 1.4; cursor: pointer; list-style: none; }
.wk-qa summary::-webkit-details-marker { display: none; }
.wk-qa summary::after { content: ""; flex: none; width: 34px; height: 34px; box-sizing: border-box; border: 1px solid var(--mx-line-strong); background-color: #fff;
  background-image: linear-gradient(#14130F, #14130F), linear-gradient(#14130F, #14130F); background-size: 12px 1.5px, 1.5px 12px; background-position: center; background-repeat: no-repeat;
  transition: background-color .2s, background-size .25s var(--mx-ease); }
.wk-qa[open] summary::after { background-size: 12px 1.5px, 1.5px 0; }
.wk-qa summary:hover::after { background-color: #FAF9F5; }
.wk-qa summary:focus-visible { outline: 2px solid #FA500F; outline-offset: 2px; }
.wk-qa p { margin: 0 0 22px; padding-right: 54px; font-size: 16px; line-height: 1.6; color: #3A3833; }
/* zavrsni poziv: crna traka s pikselastim S (sekcija 24, mx-s-side); oznaka klijenta stoji iznad naslova */
.wk p.wk-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: none; margin: 0 0 32px; }
.mx-page .mx-s-side > .container > p.wk-ref { grid-row: 1; align-self: end; }
.wk-ref-logo { display: grid; place-items: center; min-width: 112px; height: 52px; padding: 0 18px; background: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--c-ink); }
.mx-page [data-mx-band="black"] .wk-ref-l { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #fff; }
@media (max-width: 1100px) {
  .wk-hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mx-page .wk-hero-vis .phone-solo { padding: 36px 0; }
  .wk-fact { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 16px 18px; }
  .wk-fact b { font-size: 32px; }
  .wk-tones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-groups-in, .wk-faq-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wk-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .wk-facts-in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .wk-fact, .wk-fact:first-child { align-items: center; text-align: center; min-height: 0; padding: 16px 12px; border-left: 1px solid var(--mx-line); }
  .wk-fact:nth-child(odd) { border-left: 0; }
  .wk-fact:nth-child(n+3) { border-top: 1px solid var(--mx-line); }
  .wk-fact b { font-size: 28px; }
  .wk-fact span { font-size: 12.5px; }
}
@media (max-width: 599px) {
  .mx-page .wk-hero h1 { font-size: clamp(32px, 9.4vw, 40px) !important; }
  .mx-page .wk-hero { padding-bottom: 48px; }
  .wk-tones { grid-template-columns: minmax(0, 1fr); }
  .wk-tone { min-height: 0; padding: 24px; }
  .mx-page .wk-tone h3 { margin-top: 36px; font-size: 23px; }
  .wk-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 8px; }
  .wk-room { min-height: 80px; }
  .wk-cells { grid-template-columns: minmax(0, 1fr); }
  .wk-cell { padding: 24px; }
  .wk-ic { margin-bottom: 24px; }
  .wk-qa p { padding-right: 0; }
  .wk-steps .px-ol b { margin-bottom: 18px; font-size: 40px; }
  .wk-steps .px-ol li:first-child::before { top: -1px; }
}
:lang(ja) .wk :is(h3, .wk-room b), :lang(zh) .wk :is(h3, .wk-room b) { letter-spacing: 0; word-break: auto-phrase; }
@media (prefers-reduced-motion: reduce) {
  .wk-tone--fire::after, .wk-room::after { animation: none; }
}
/* ---------- kraj bloka 21 (web-meni1) ---------- */

/* ---------- 26. rjesenja treci krug (r3) ---------- */
/* Boris 19.10. 21:30 (SPEC K1, K3, K4, K5) za /rjesenja/konferencije/, /rjesenja/turisticke-grupe/ i
   /rjesenja/prevodjenje-za-objekt/ (oznake: tools/treci_krug/apply.mjs, omotac .r3-lev + .r3-konf / .r3-tur / .r3-obj).
   (a) naslovni dio: slika bez dugmeta za video, na svijetlo plavom platnu koje se gasi prema rubovima;
       na konferencijama fotografija PROGRES s naslovne (kvadratna, zato visi okvir);
   (b) koraci 01 / 02 / 03: veliki broj lijevo, recenica desno, tanke linije, prvi korak podvucen narandzasto
       (kao koraci u vizuelnom prikazu na naslovnoj); stare ikonice koraka se ne prikazuju;
   (c) "Bez preuzimanja": naslov, tekst i dva mjeraca jedno ispod drugog, na sredini; mjeraci u dvije celije;
   (d) primjeri: mreza celija s tankom linijom (3 + 2), pikselasta ikona, naslov, tekst. */

/* (a) */
body.mx-page .r3-lev .lev-hero-right[data-mx-canvas] > .lev-vframe { position: absolute; inset: 0; z-index: 1; box-shadow: 0 30px 60px -36px rgba(20, 19, 15, .3); }
body.mx-page .r3-lev .lev-hero-right[data-mx-canvas] > .mx-cv { inset: -56px -64px !important; }
body.mx-page .r3-konf .lev-hero-right { aspect-ratio: 5 / 4; }
body.mx-page .r3-konf .lev-vframe img { object-position: 50% 42%; }
@media (max-width: 1099px) {
  body.mx-page .r3-lev .lev-hero-right[data-mx-canvas] > .mx-cv { inset: -32px calc(var(--pad-x) * -1) !important; }
  body.mx-page .r3-lev .lev-hero-right { margin-top: 12px; }
}

/* (b) */
body.mx-page main .r3-lev .lev-steps-grid { align-items: center; }
body.mx-page main .r3-lev .lev-stepcards.mx-cells:not(#mx) { flex: 0 1 500px; padding: 0; border-top: 1px solid var(--mx-line-strong); }
body.mx-page main .r3-lev .lev-stepcards.mx-cells:not(#mx) > .lev-step {
  position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 20px; align-items: start;
  min-height: 0; height: auto; margin: 0 !important; padding: 30px 0 32px; border: 0 !important; border-bottom: 1px solid var(--mx-line-strong) !important;
  background: transparent !important; transform: none;
}
body.mx-page main .r3-lev .lev-stepcards.mx-cells:not(#mx) > .lev-step:hover { background: transparent !important; }
body.mx-page main .r3-lev .lev-stepcards > .lev-step.s1::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #FA500F; }
body.mx-page .r3-lev .lev-step-top { display: block; }
body.mx-page .r3-lev .lev-step-icon { display: none; }
body.mx-page .r3-lev .lev-step .lev-step-num { display: block; font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -.045em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
body.mx-page .r3-lev .lev-step.s1 .lev-step-num { color: #FA500F; }
body.mx-page .r3-lev .lev-step-body { padding-top: 4px; font-size: 18px; line-height: 1.5; letter-spacing: -.01em; color: var(--c-ink); }
@media (max-width: 1099px) { body.mx-page main .r3-lev .lev-stepcards.mx-cells:not(#mx) { flex: 1 1 100%; max-width: 640px; } }
@media (max-width: 599px) {
  body.mx-page main .r3-lev .lev-stepcards.mx-cells:not(#mx) > .lev-step { grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; padding: 24px 0 26px; }
  body.mx-page .r3-lev .lev-step .lev-step-num { font-size: 40px; }
  body.mx-page .r3-lev .lev-step-body { font-size: 17px; }
}

/* (c) */
body.mx-page .r3-lev .lev-band > .lev-h2-nowrap { max-width: 920px; margin: 0 auto; text-align: center; }
body.mx-page .r3-lev .lev-bw-row { flex-direction: column; align-items: center; justify-content: flex-start; gap: 56px; margin: 28px auto 0; }
body.mx-page .r3-lev .lev-bw-p { width: auto; max-width: 640px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.6; color: #3A3833; }
body.mx-page .r3-lev .lev-bw-p strong { font-weight: 600; color: var(--c-ink); }
body.mx-page .r3-lev .lev-gauge-card { isolation: isolate; width: auto; max-width: none; height: auto; padding: 0; gap: 0; border: 1px solid var(--mx-line-strong); border-radius: 0; background: #fff; box-shadow: none; flex-wrap: nowrap; }
body.mx-page .r3-lev .lev-gauge { margin: 36px 52px; }
body.mx-page .r3-lev .lev-gauge + .lev-gauge::before { content: ""; position: absolute; top: -36px; bottom: -36px; left: -52px; border-left: 1px solid var(--mx-line-strong); }
body.mx-page .r3-lev .lev-gauge .gnum.blue { color: #3E93DC; }
body.mx-page .r3-lev .lev-gauge .gnum.red { color: #E10500; }
@media (max-width: 599px) {
  body.mx-page .r3-lev .lev-bw-row { gap: 40px; }
  body.mx-page .r3-lev .lev-bw-p { font-size: 17px; }
  body.mx-page .r3-lev .lev-gauge { margin: 24px 18px; }
  body.mx-page .r3-lev .lev-gauge + .lev-gauge::before { top: -24px; bottom: -24px; left: -18px; }
  body.mx-page .r3-lev .lev-gauge-card { zoom: .72; }
}
@media (max-width: 379px) { body.mx-page .r3-lev .lev-gauge-card { zoom: .58; } }

/* (d) */
body.mx-page main .r3-lev .lev-uses.mx-cells:not(#mx) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1140px; margin: 96px auto 0; }
body.mx-page main .r3-lev .lev-uses > .lev-ccard { grid-column: span 2; width: auto; flex: none; overflow: visible; padding: 36px 34px 40px; }
body.mx-page main .r3-lev .lev-uses > .lev-ccard:nth-child(n+4) { grid-column: span 3; }
body.mx-page .r3-lev .lev-ico { display: block; }
body.mx-page .r3-lev .lev-pix { display: block; width: 64px; height: 64px; }
body.mx-page .r3-lev .lev-uses .tx { padding: 0; margin-top: 36px; }
body.mx-page .r3-lev .lev-uses h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
body.mx-page .r3-lev .lev-uses .tx p { font-size: 16.5px; line-height: 1.55; color: #3A3833; }
body.mx-page .r3-lev .lev-car-cta { padding: 64px 0 96px; }
@media (max-width: 1099px) {
  body.mx-page main .r3-lev .lev-uses.mx-cells:not(#mx) { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 72px; }
  body.mx-page main .r3-lev .lev-uses > .lev-ccard, body.mx-page main .r3-lev .lev-uses > .lev-ccard:nth-child(n+4) { grid-column: auto; }
  body.mx-page main .r3-lev .lev-uses > .lev-ccard:last-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  body.mx-page main .r3-lev .lev-uses.mx-cells:not(#mx) { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  body.mx-page main .r3-lev .lev-uses > .lev-ccard { padding: 28px 22px 30px; }
  body.mx-page .r3-lev .lev-pix { width: 48px; height: 48px; }
  body.mx-page .r3-lev .lev-uses .tx { margin-top: 28px; }
  body.mx-page .r3-lev .lev-uses h3 { font-size: 22px; }
  body.mx-page .r3-lev .lev-car-cta { padding: 48px 0 72px; }
}
:lang(ja) body.mx-page .r3-lev :is(.lev-uses h3, .lev-step-body), :lang(zh) body.mx-page .r3-lev :is(.lev-uses h3, .lev-step-body) { letter-spacing: 0; }
/* ---------- kraj bloka 26 (r3) ---------- */

/* ---------- 27. treci krug D (Boris 19.10. kasno navece) ----------
   (a) narandzasta traka "Postanite partner": na telefonu se vidi i link (prije samo strelica), uz njega kratki tekst
       koji link ne ponavlja; kad kratki tekst ne stane cijeli, skloni se oznaka NOVO (mx-nonew), a ako ni tada ne
       stane, ostaje oznaka i samo link (mx-tiny), sve iz mistral.js;
   (b) meni Resursi se otvara udesno: lijeva ivica panela uz lijevu ivicu dugmeta; ako bi panel izasao desno iz
       ekrana, mistral.js ga pomjeri ulijevo tacno koliko treba (--mx-sx). */
@media (max-width: 720px) {
  .mx-bar-l { font-size: 13px; gap: 5px; }
}
.mx-bar-in.mx-tiny .mx-bar-s, .mx-bar-in.mx-nonew .mx-new { display: none; }
@media (max-width: 359px) {
  .mx-bar-in { gap: 7px; padding: 0 10px; font-size: 12.5px; }
  .mx-bar-l { font-size: 12.5px; }
}
.panel--right { left: 0; right: auto; transform: translate(var(--mx-sx, 0px), 8px); }
.nav-item:hover > .panel--right, .nav-item:focus-within > .panel--right, .nav-item.open > .panel--right { transform: translate(var(--mx-sx, 0px), 0); }
/* ---------- kraj bloka 27 ---------- */

/* ---------- 28. naslovna na mobitelu (web-mob1, 19.10.; prenio treci krug D) ----------
   Rucni pregled naslovne na telefonima i tabletima (12 jezika, 320 do 1024 px), radjen na zivoj grani prije treceg
   kruga (commit 2b48c860, tamo blok "18. mobitel"). Samo uklapanje, razmaci, dodirne mete i citljivost. Desktop
   (sirok ekran, mis) ostaje isti: sve je ispod 1101 px ili samo za dodir (pointer: coarse).
   Prilagodjeno trecem krugu: narandzasta traka na 320 px je u bloku 27; pravila za sadrzaj naslovne koja bi
   pogodila i unutrasnje stranice (razmak sa strane, zavrsni poziv) vaze samo na naslovnoj (body:not(.mx-page)). */

/* zaglavlje: na uskom telefonu stanu sve cetiri celije (i na 320 px u svim jezicima).
   Zuto dugme prelomi tekst u dva reda kad mora; de, fr i sl ga vise ne gube (stari sim.css ga je
   skrivao ispod 401 px). Globus je sirok 44 px, da se lako dodirne. */
@media (max-width: 720px) {
  .site-header .lsw-btn { min-width: 44px; justify-content: center; }
}
@media (max-width: 420px) {
  html[lang] .site-header .header-cta.mx-cta { display: flex; flex: 0 1 auto; min-width: 0; margin: 0; }
  .site-header .mx-cell.mx-demo { min-width: 0; padding: 0 8px; white-space: normal; line-height: 1.12; text-align: center; text-wrap: balance; }
  :lang(ja) .site-header .mx-cell.mx-demo { word-break: auto-phrase; }
  .site-header .lsw-btn { padding: 0 6px; }
}
@media (max-width: 359px) {
  .site-header .mx-logo { padding: 0 8px 0 10px; gap: 6px; }
  .site-header .mx-mark, .site-header.scrolled .mx-mark { width: 20px; height: 22px; }
  .site-header .mx-word, .site-header.scrolled .mx-word { font-size: 18.5px; }
  .site-header .mx-cell.mx-demo { padding: 0 6px; font-size: 12.5px; }
}

/* uski telefon (do 400 px): sve sekcije naslovne imaju 16 px sa strane umjesto 24, pa forma,
   vizuelni prikaz i kartice dobiju prostor (isti razmak u svim sekcijama) */
@media (max-width: 400px) {
  body:not(.mx-page) { --pad-x: 16px; }
}
@media (max-width: 359px) {
  .hero .glass { padding-left: 20px; padding-right: 20px; }
}

/* naslovni dio: dodir u e-mail polje vise ne pomjera sadrzaj unutar sekcije. Video je uvecan (scale 1.08)
   pa je sekcija s overflow: hidden imala 54 px za skrolanje; preglednik je pri fokusu pomjerao sadrzaj
   15 px gore i ispod trake povjerenja ostajala je tamna traka. clip isto sijece, ali se ne skrola. */
@media (max-width: 1100px) {
  .hero { overflow: clip; }
}

/* japanski naslov: najduza rotirajuca rijec (プレゼンテーション, 9 znakova) uvijek stane u karticu.
   Prije je kartica postajala sira od ekrana, a naslovni dio skakao gore-dolje svakih par sekundi
   (pomak sadrzaja ispod, CLS 0,15 na 320 px). Velicina slova prati sirinu ekrana, najvise kao i prije. */
@media (max-width: 359px) {
  :lang(ja) .glass h1 { font-size: min(33.6px, calc((100vw - 76px) / 9)); line-height: 1.18; }
}
@media (min-width: 360px) and (max-width: 400px) {
  :lang(ja) .glass h1 { font-size: min(33.6px, calc((100vw - 84px) / 9)); line-height: 1.18; }
}

/* forma u naslovnom dijelu (telefon i tablet, kartica je uska): dva padajuca polja jedno ispod drugog
   (inace se tekst sijece), pozivni broj iznad broja telefona na uskom telefonu, dodir nikad ne zumira
   (16 px), red s potvrdom za novosti visok najmanje 44 px */
@media (max-width: 1100px) {
  .hero-form .row2:has(select) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
}
@media (max-width: 419px) {
  .hero-form .row-phone { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
}
@media (min-width: 420px) and (max-width: 1100px) {
  .hero-form .row-phone { grid-template-columns: 118px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .hero-form input, .hero-form select { padding-left: 12px; }
  .hero-form select { padding-right: 32px; background-position: right 12px center; }
}
@media (pointer: coarse) {
  .hero-form input, .hero-form select { font-size: 16px; }
}
@media (max-width: 1100px) {
  .hero-form input { text-overflow: ellipsis; }
}
@media (pointer: coarse) {
  .hero-form .consent { min-height: 44px; }
}

/* traka povjerenja: logotip Prevedi24 ima vecu povrsinu za dodir, izgled isti; kratke rijeci
   se ne lome crticom (bilo je "un-sere", "nues-tros", "ha-ben", "traduc-tion", "simulta-neous") */
@media (max-width: 767px) {
  .mx-p24 { padding: 11px 10px; margin: -11px -10px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .mx-p24 { padding: 7px 8px; margin: -7px -8px; }
}
@media (max-width: 1100px) {
  .mx-td { -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 13 5 5; }
}

/* vizuelni prikaz na telefonu: manje praznog prostora oko bina, pa prevod publike ostane
   vidljiv i sa 2 do 4 bine (na 320 px se ranije nije vidjela nijedna rijec) */
@media (max-width: 719px) {
  .sx .sx-main { padding: 12px 8px; }
  .sx .sx-bd.tall { padding: 14px 12px 16px; }
  .sx .sx-bd.mini { column-gap: calc(16px * var(--u, 1)); padding: calc(12px * var(--u, 1)) calc(10px * var(--u, 1)) calc(14px * var(--u, 1)); }
  .sx .sx-bd.mini .sx-hb { width: calc(46px * var(--u, 1)); height: calc(46px * var(--u, 1)); }
  .sx .sx-bd.mini .sx-lr { gap: calc(6px * var(--u, 1)); padding: calc(4px * var(--u, 1)) calc(5px * var(--u, 1)); }
  .sx .sx-bd.mini .sx-ln { min-width: 0; }
}
@media (max-width: 400px) {
  .sx .sx-bd.tall .sx-ln { min-width: 40px; }
}
@media (max-width: 719px) {
  .sx .sx-lb > span:first-child { text-wrap: balance; }
}

/* vizuelni prikaz na tabletu uspravno i telefonu polozeno (720-899 px): bine jedna ispod druge kao na
   telefonu, ne stisnute jedna do druge u okvir od 600 px (prevod je bio "Bi...", slova oko 10 px) */
@media (min-width: 720px) and (max-width: 899px) {
  .sx .sx-main { height: auto; padding: 20px 24px; }
  .sx .sx-stg { position: relative; inset: auto; gap: 16px; }
  .sx .sx-card { max-height: none; }
}
/* siroka kartica bine do 1100 px: kolona govornika malo sira, pa se ime vidi cijelo (bilo je "Oliver ...") */
@media (max-width: 1100px) {
  .sx .sx-bd.wide { grid-template-columns: minmax(0, 1.25fr) calc(128px * var(--u, 1)) minmax(0, 1.35fr); padding-left: calc(18px * var(--u, 1)); padding-right: calc(18px * var(--u, 1)); }
  .sx .sx-bd.wide .sx-sp { gap: calc(10px * var(--u, 1)); padding: calc(10px * var(--u, 1)); }
}

/* "u radu": unutrasnji razmak kakav je i bio zamisljen za telefon (sekcija 6 ga je povecala
   na 36 px i za telefon), a ime klijenta u bijeloj plocici smije u dva ili tri reda */
@media (max-width: 899px) {
  .ur-panel { padding: 24px; }
  .ur-logo { height: auto; min-height: 54px; }
}
@media (max-width: 599px) {
  .ur-panel { padding: 16px; }
}

/* naslovi i kratki tekstovi na telefonu: bez jedne rijeci ili jednog znaka same u zadnjem redu
   (bilo je "Pogledaj simultano.ai u / radu", "uzivo na bilo koji / jezik", kineski "...阅 / 读。") */
@media (max-width: 1100px) {
  .ur-head h2, body:not(.mx-page) .cta-band h2, .sx .sx-fx b { text-wrap: balance; }
  .glass h1, .hero-sub, body:not(.mx-page) .cta-band .t-lead, .mx-td { text-wrap: pretty; }
}
/* brojke ispod vizuelnog prikaza: duga rijec se lomi sa crticom, ne bilo gdje bez crtice
   (bilo je "Sprachkombin / ationen", "combinacione / s") */
@media (max-width: 767px) {
  .sx .sx-fx li > span { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
}

/* japanski na telefonu i tabletu: naslovi i kratki tekstovi se lome po frazama, ne usred rijeci */
@media (max-width: 1100px) {
  :lang(ja) .glass h1, :lang(ja) .sim2 > h2, :lang(ja) .ur-head h2, :lang(ja) body:not(.mx-page) .cta-band h2, :lang(ja) .ur-big p,
  :lang(ja) .ur-card p, :lang(ja) .sx-fx b, :lang(ja) .mx-td, :lang(ja) .ur-tab span { word-break: auto-phrase; }
}

/* dodirne mete najmanje 44 px (samo na ekranima na dodir) */
@media (pointer: coarse) {
  .sx .sx-cb { width: 44px; height: 44px; }
  .sx .sx-pm b { min-width: 44px; }
  .lsw-menu a { min-height: 44px; }
}
/* pravni linkovi na telefonu jedan ispod drugog (bilo je "Kolacici" samo u drugom redu) */
@media (max-width: 479px) {
  .footer-legal { flex-direction: column; row-gap: 0; }
}
@media (pointer: coarse) and (max-width: 1100px) {
  .footer-col a { padding: 11px 0; }
  .footer-legal { row-gap: 0; }
  .footer-legal a { display: inline-block; padding: 14px 0; }
  .footer-brand .mx-logo { padding: 6px 0; margin: -6px 0; }
}

/* vizuelni prikaz do 1100 px: kartice bina u istom redu poravnate gore (bile su pomaknute ~8 px kad se
   jednoj zaglavlje prelomi), a u zaglavlju kartice oznaka bine i UZIVO uvijek stoje u prvom redu,
   dugo ime bine se lomi u svojoj koloni */
@media (max-width: 1100px) {
  .sx .sx-stg.c2, .sx .sx-stg.c3 { align-items: start; }
  .sx .sx-ch { flex-wrap: nowrap; align-items: flex-start; }
  .sx .sx-cn { flex: 1 1 0; }
  .sx .sx-tag, .sx .sx-live { flex: none; }
  .sx .sx-live { align-self: center; }
}
@media (max-width: 767px) {
  .sx .sx-fx b { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .sx .sx-bd.tall .sx-hub { gap: 18px; }
}

/* lista jezika na polozenom telefonu: tri kolone, svih 12 jezika vidljivo (prije su kineski bili
   sakriveni ispod donje ivice liste, bez ikakvog znaka da lista skrola) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .lsw-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 500px; max-height: calc(100vh - 100px); }
}

/* traka povjerenja u 4 kolone (768-1100 px): sadrzaj celija poravnat gore, pa brojke i oznake stoje
   u istoj visini; na telefonu opis malo veci (11 px, kineski i japanski 11,5 px) */
@media (min-width: 768px) and (max-width: 1100px) {
  .mx-sc { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .mx-td { font-size: 11px; }
  :lang(ja) .mx-td, :lang(zh) .mx-td { font-size: 11.5px; }
}

/* "u radu": kocke na karticama poravnate uz desnu ivicu (bez tankog isjecka zadnje kolone); na
   tabletu tekst i oznaka zauzimaju lijevih 60 %, kocke desno (prije je tekst prelazio preko kocki);
   na telefonu ime klijenta uvijek iznad oznake, plocica najvise 60 % sirine */
@media (max-width: 1100px) {
  .mx-ubg { justify-content: end; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ur-big .ur-copy, .ur-big .ur-ref { max-width: 60%; }
}
/* malo prijenosno racunalo i polozen tablet (900 do 1100 px): tri kolone su uske, pa tekst kartica puni sirinu
   i manji je (na 1024 px je velika kartica imala 9 redova po jednu ili dvije rijeci) */
@media (min-width: 900px) and (max-width: 1100px) {
  .ur-panel { padding: 28px; }
  .ur-big p { font-size: 24px; }
  .ur-card p { font-size: 18px; }
}
@media (max-width: 599px) {
  .ur-ref { flex-direction: column; align-items: flex-start; }
  .ur-logo { max-width: 60%; }
}
/* tabovi "u radu" na tabletu uspravno: 2 x 2, svi vidljivi (prije je cetvrti bio odsjecen) */
@media (min-width: 600px) and (max-width: 899px) {
  .ur-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .ur-tab { border-right: 1px solid #E4E2DC; border-bottom: 1px solid #E4E2DC; }
  .ur-tab:nth-child(2n) { border-right: 0; }
  .ur-tab:nth-child(n+3) { border-bottom: 0; }
}

/* zavrsni poziv: dva dugmeta jedno ispod drugog, iste sirine (prije razlicite sirine) */
@media (max-width: 479px) {
  body:not(.mx-page) .cta-band .btn { display: flex; justify-content: center; width: 100%; max-width: 320px; margin: 10px auto 0; }
}

/* "u radu" do 1100 px: svi paneli stoje u istoj celiji, pa okvir ima visinu najviseg panela i sadrzaj
   ispod (poziv, podnozje) vise ne skace 20-45 px pri promjeni taba; nevidljivi panel se ne cita i ne
   fokusira (visibility). Dugi naziv taba se lomi sa crticom (de "Religionsgemeinschaften" je izlazio
   iz kolone na 1024 px). */
@media (max-width: 1100px) {
  .ur-panels { display: grid; }
  .ur-panels > .ur-panel { grid-area: 1 / 1; }
  .ur-panels > .ur-panel[hidden] { display: grid; visibility: hidden; }
  .ur-tab > span { min-width: 0; max-width: 100%; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
}

/* polozen telefon: naslovni dio pocinje blize zaglavlju, pa se na prvom ekranu vidi vise kartice */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .hero { padding-top: calc(var(--header-h) + 28px); }
}
/* ---------- kraj bloka 28 (web-mob1) ---------- */

/* ---------- 29. treci krug popravke (pregled 20.10.2026) ----------
   (a) pikselaste ikone umjesto starih ravnih ilustracija (tools/treci_krug_popravke/ikone.mjs): ikona 64 px (48 na
       telefonu) gore lijevo u celiji, pa naslov i tekst, kao primjeri na /rjesenja/konferencije/; u naslovnom dijelu
       javnog sektora i vjerskih zajednica bijela plocica s velikom ikonom na svijetlo plavom platnu (kao plocice u
       meniju "Gdje?"); zelene kvacice su narandzasti kvadrat. */
.mx-page .mx-pico { display: block; margin: 0 0 28px; line-height: 0; }
.mx-page .mx-pix { display: block; width: 64px; height: 64px; }
.mx-page .mx-pix.mx-pix-s { display: block; flex: none; width: 22px; height: 22px; margin-top: 3px; }
.mx-page .mx-tick { flex: none; display: block; width: 10px; height: 10px; margin: 9px 4px 0 2px; background: #FA500F; }
.mx-page main :is(.vcards, .vertical-links).mx-cells:not(#mx) > .vcard { gap: 0; padding: 34px 32px 38px; }
.mx-page .vcard > .mx-pico { margin-bottom: 40px; }
.mx-page .vcard > b { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.mx-page .vcard > span:not(.mx-pico) { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: #3A3833; }
.mx-page .mx-steps > .pcard > .mx-pico { margin-top: -12px; }
.mx-page .value-media[data-mx-canvas] .mx-ptile, .mx-page .pcard-media[data-mx-canvas] .mx-ptile {
  position: relative; z-index: 1; display: grid; place-items: center; background: #fff; border: 1px solid var(--mx-line-strong);
}
.mx-page .value-media[data-mx-canvas] .mx-ptile { aspect-ratio: 5 / 3; box-shadow: 0 30px 60px -36px rgba(20, 19, 15, .3); }
.mx-page .value-media[data-mx-canvas] .mx-ptile .mx-pix { width: 160px; height: 160px; }
.mx-page .pcard-media[data-mx-canvas] .mx-ptile { width: 220px; aspect-ratio: 1; margin: 0 auto; }
.mx-page .pcard-media[data-mx-canvas] .mx-ptile .mx-pix { width: 112px; height: 112px; }
@media (max-width: 599px) {
  .mx-page .mx-pico .mx-pix { width: 48px; height: 48px; }
  .mx-page .mx-pico { margin-bottom: 22px; }
  .mx-page .vcard > .mx-pico { margin-bottom: 28px; }
  .mx-page main :is(.vcards, .vertical-links).mx-cells:not(#mx) > .vcard { padding: 26px 22px 30px; }
  .mx-page .value-media[data-mx-canvas] .mx-ptile .mx-pix { width: 112px; height: 112px; }
  .mx-page .pcard-media[data-mx-canvas] .mx-ptile { width: 168px; }
  .mx-page .pcard-media[data-mx-canvas] .mx-ptile .mx-pix { width: 88px; height: 88px; }
}
/* (b) rjesenja konferencije, turisticke grupe, objekt */
/* naslovni dio ostaje u dva stupca do 900 px (fotografija manja), ispod toga fotografija na sredini */
@media (min-width: 900px) and (max-width: 1199px) {
  body.mx-page .r3-lev .lev-hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; }
  body.mx-page .r3-lev .lev-hero-right { max-width: none; margin: 0; }
}
@media (max-width: 899px) { body.mx-page .r3-lev .lev-hero-right { width: 100%; max-width: 560px; margin: 12px auto 0; } }
/* titlovi na telefonu: najnoviji red uvijek cijeli, visak se sijece gore (najstariji red) */
.mx-page .lp-capcard { display: flex; flex-direction: column; justify-content: flex-end; }
.mx-page .lp-capcard > * { flex: none; }
/* platno iza telefona na telefonu: na sredini, sire od telefona, gasi se na obje strane */
@media (max-width: 767px) {
  .mx-page .lev-phone-col > .mx-px { inset: 3% calc(var(--pad-x) * -1); left: calc(var(--pad-x) * -1); width: auto; transform: none; }
}
/* traka 1000+ / Prevedi24 / 18 na telefonu: dvije brojke jedna do druge, partner ispod, preko cijele sirine */
@media (max-width: 767px) {
  .mx-page .credit-in { justify-items: stretch; }
  .mx-page .credit-in > .credit-by { order: 1; }
  .mx-page .credit-in > .credit-stat:last-child { border-left: 1px solid var(--mx-line); }
  .mx-page .credit-in > .credit-stat:first-child { border-left: 0; }
}
/* "Sta pokrece" na konferencijama ima dvije stavke: uza kartica, veca fotografija i veci redovi, bez praznine */
@media (min-width: 1200px) {
  body.mx-page .r3-konf .lev-panel { max-width: 1100px; gap: 64px; }
  body.mx-page .r3-konf .lev-plate { width: 560px; height: 420px; }
  body.mx-page .r3-konf .lev-plist { gap: 28px; }
  body.mx-page .r3-konf .lev-plist li { font-size: 21px; line-height: 1.35; }
}
/* kvacice u listi: narandzasti kvadrat kao u ostatku stranice */
.mx-page .lev-plist li svg { display: none; }
.mx-page .lev-plist li::before { content: ""; flex: none; width: 10px; height: 10px; background: #FA500F; }

/* (c) koraci 1 / 2 / 3 nikad 2 + 1: tri stupca do 900 px, ispod jedan */
@media (min-width: 900px) { .mx-page main .grid.cols-3.mx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .mx-page main .grid.cols-3.mx-steps.pcards { grid-template-columns: minmax(0, 1fr); } }
/* demo: koraci kao na konferencijama (veliki 01 / 02 / 03, prvi narandzast), broj iznad recenice; tri stupca od
   640 px, na telefonu broj lijevo uz recenicu */
.mx-page main .mx-steps:not(.pcards) > .pcard { padding: 32px 32px 36px; }
.mx-page main .mx-steps:not(.pcards) > .pcard > .chip:first-child {
  display: block !important; width: auto !important; height: auto !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important;
  background: none !important; border-radius: 0 !important; font-size: 52px !important; font-weight: 500; line-height: 1 !important;
  letter-spacing: -.045em !important; color: var(--c-ink) !important; font-variant-numeric: tabular-nums; text-transform: none;
}
.mx-page main .mx-steps:not(.pcards) > .pcard > .chip:first-child::before { content: "0"; }
.mx-page main .mx-steps:not(.pcards) > .pcard:first-child > .chip:first-child { color: #FA500F !important; }
.mx-page main .mx-steps:not(.pcards) > .pcard > .t-lead { font-size: 20px; line-height: 1.35; }
@media (min-width: 640px) { .mx-page main .grid.cols-3.mx-steps:not(.pcards) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .mx-page main .grid.cols-3.mx-steps:not(.pcards) { grid-template-columns: minmax(0, 1fr); }
  .mx-page main .mx-steps:not(.pcards) > .pcard { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: 22px 20px 24px; }
  .mx-page main .mx-steps:not(.pcards) > .pcard > .chip:first-child { margin: 0 !important; font-size: 40px !important; }
  .mx-page main .mx-steps:not(.pcards) > .pcard > .t-lead { font-size: 18px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .mx-page main .mx-steps:not(.pcards) > .pcard > .t-lead { font-size: 18px; } }

/* (d) cijene */
/* naslov pitanja na sredini iznad mreze (kutija je bila prikovana lijevo) */
.mx-page .pf-faq h2 { margin-left: auto; margin-right: auto; }
.mx-page .pf-faq h2 span { padding-left: 0; }
.mx-page .pf-faq h2 span:not(:lang(ja)):not(:lang(zh))::before { content: " "; }
/* paketi jedan ispod drugog: razmak izmedju obojene ploce i prve stavke */
@media (max-width: 1199px) { .mx-page .pf .pf-card > .pf-feats:not(#mx) { padding-top: 24px; } }
/* tabela na telefonu: kolona s kvacicama uska, naziv paketa i dugme kao traka iznad, tekst dobija sirinu */
@media (max-width: 599px) {
  .mx-page .pf-grid { grid-template-columns: minmax(0, 1fr) 80px; column-gap: 8px; }
  .mx-page .pf-head .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .mx-page .pf-head .pf-grid > div:not(.cell) { display: none; }
  .mx-page .pf-head .cell.c2 { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
  .mx-page .pf-head .cell.c2 b { margin: 0; font-size: 17px; }
  .mx-page .pf-head .cell.c2 .mini { flex: none; margin: 0; padding: 6px 14px; }
  .mx-page :is(.pf-feat, .pf-sub, .pf-bold, .pf-glabel) { padding-right: 6px; }
  .mx-page .pf-chk.pf-extra { padding: 0 2px; font-size: 12px; }
}
/* zavrsna provjera: "uz nadoplatu" se lomi samo izmedju rijeci (bila je uska kolona 52 px i overflow-wrap:anywhere) */
.mx-page .pf-chk.pf-extra { overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
/* zuta traka "jezici po upitu" na /cijene/: reset ".pf li, .pf p { margin:0; padding:0 }" u stranici je gazio polja i razmak */
.lx-ask--pf .lx-ask-copy p { margin: 14px 0 0; }
.lx-ask--pf .lx-ask-ex li { padding: 10px 16px; }
.lx-ask--pf .lx-ask-ex li.lx-ask-more { padding: 10px 14px; }
@media (max-width: 599px) { .lx-ask--pf .lx-ask-ex li:not(.lx-ask-more) { padding: 8px 12px; } }

/* (e) kontakt: forma i direktan kontakt jedno ispod drugog do 960 px; na desktopu ista kartica i prati skrol */
@media (max-width: 959px) { .mx-page main .grid.cols-2:has(> aside.pcard) { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 960px) {
  .mx-page main .grid > aside.pcard { position: sticky; top: calc(var(--header-h-sticky) + 32px); box-shadow: 0 40px 80px -56px rgba(20, 19, 15, .35); }
}
.mx-page main .grid > aside.pcard > .mx-pico { margin-bottom: 32px; }

/* (f) zavrsni poziv na telefonu: dugmad iste sirine, jedno ispod drugog (kao na naslovnoj) */
@media (max-width: 479px) {
  .mx-page .mx-s-side > .container > .btn { display: flex; justify-content: center; width: 100%; max-width: 320px; margin: 12px 0 0; }
  .mx-page .mx-s-side > .container > .btn:first-of-type { margin-top: 28px; }
}
/* hvala: S veci (oko 200 px), kao na ostalim crnim trakama */
@media (min-width: 600px) { .mx-page .mx-s-top .mx-s { --c: 25px; } }

/* (g) workshopi */
/* zavrsni poziv: referenca u svom redu, prazan prostor jednako gore i dole */
@media (min-width: 900px) {
  .mx-page .wk-cta.mx-s-side > .container { grid-template-rows: 1fr auto auto auto auto 1fr; }
  .mx-page .wk-cta.mx-s-side > .container > p.wk-ref { grid-row: 2; align-self: start; }
  .mx-page .wk-cta.mx-s-side > .container > h2 { grid-row: 3; }
  .mx-page .wk-cta.mx-s-side > .container > p:not(.wk-ref) { grid-row: 4; }
  .mx-page .wk-cta.mx-s-side > .container > :is(.btn, .px-ctas) { grid-row: 5; }
}
/* kartice "Za koga je": naslovi u istoj liniji (prazno ostaje dole); na telefonu kocke ne idu iza naslova */
.wk-tone-plate { margin-bottom: 0; }
@media (max-width: 599px) { .wk-tone > .wk-tone-px { width: min(50%, 150px); } }

/* (h) jezici i prelom */
/* veliki naslovi bez automatskog rastavljanja rijeci (njemacki, spanski); duge rijeci se i dalje lome ako ne stanu */
.mx-page main h1, .mx-page main h2, .mx-page .cta-band :is(h2, .t-lead) { -webkit-hyphens: manual; hyphens: manual; }
/* uski telefoni: rastavljanje rijeci samo gdje treba (njemacki i slovenski imaju duge slozenice), ne u spanskom itd. */
@media (max-width: 420px) { .mx-page main:not(:lang(de)):not(:lang(sl)) { -webkit-hyphens: manual; hyphens: manual; } }
@media (max-width: 599px) { :lang(de) .mx-page main :is(h1, h2), :lang(sl) .mx-page main :is(h1, h2) { -webkit-hyphens: auto; hyphens: auto; } }
/* kineski: bez balansiranja naslova (balansiranje lomi rijec usred, npr. 包含, 經營) */
:lang(zh) .mx-page main :is(h1, h2) { text-wrap: pretty; }
/* s granicama rijeci iz mistral.js (Intl.Segmenter) naslov se lomi samo izmedju rijeci, pa smije i balansirati */
:lang(zh) main :is(h1, h2).mx-zh-wb:not(#mx) { word-break: keep-all; text-wrap: balance; }
:lang(zh) .mx-page .page-hero .t-lead.mx-zh-wb { word-break: keep-all; }
/* japanski i kineski: sitni natpisi iznad naslova citljivi, bez razmaka izmedju slova; bez jednog znaka u zadnjem redu */
:lang(ja) .mx-page main .chip, :lang(zh) .mx-page main .chip, :lang(ja) .mx-page .wk-ey, :lang(zh) .mx-page .wk-ey { font-size: 13px !important; letter-spacing: 0 !important; }
:lang(ja) .mx-page main :is(p, .t-lead, h3), :lang(zh) .mx-page main :is(p, .t-lead, h3) { text-wrap: pretty; line-break: strict; }
:lang(ja) .mx-page main :is(p, .t-lead, h3, .lev-faq h2) { word-break: auto-phrase; }

/* (i) pravne stranice: citljiva sirina reda */
.mx-page .mx-legal > .legal-prose { max-width: 720px; }

/* (j) narandzasta traka na telefonu: sadrzaj na sredini */
@media (max-width: 720px) { .mx-bar-in { justify-content: center; } }

/* (k) partneri: na telefonu bez blijedih ostataka platna oko kartice s ponudom */
@media (max-width: 767px) { .px-visual .mx-px { display: none; } }
/* japanski naslov pitanja: lomi se samo na granici izraza (<wbr>), ne usred rijeci (お聞か / せください) */
:lang(ja) .mx-page h2.mx-ja-keep { word-break: keep-all; }
/* kratke recenice na japanskom i kineskom: bez jednog ili dva znaka sama u zadnjem redu */
:lang(ja) .mx-page :is(.page-hero .t-lead, .mx-s-inline .t-lead), :lang(zh) .mx-page :is(.page-hero .t-lead, .mx-s-inline .t-lead) { text-wrap: balance; }

/* ---------- 25. zavrsna provjera 20.10. ----------
   (a) G5: stara zelena boja brenda (#025E47 i zeleni tonovi iz sim.css) vise se nigdje ne vidi: linkovi, otvoren meni,
       fokus, cipovi u meniju i polja dobijaju boje iz palete (tinta, svijetlo plava, narandzasta linija). */
:root { --c-green: #14130F; --c-green-hover: #000; --c-green-deep: #000; --c-green-tint: #DCE9FF; --c-green-soft: #F2F7FF; }
.nav-link::after { background: #FA500F; }
.lsw-menu a.is-current::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l4 4 7-8.5' fill='none' stroke='%2314130F' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E"); }
/* linkovi u tekstu: tinta s tankom podvucenom linijom (kao na tamnim trakama, samo u tinti) */
main :is(p, dd, label, small, .consent, .form-note) a:not([class]) { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(20, 19, 15, .45); }
main :is(p, dd, label, small, .consent, .form-note) a:not([class]):hover { color: #C8470C; text-decoration-color: currentColor; }
/* na crnoj podlozi (napomena na /partneri/, crne trake) linkovi ostaju bijeli, tinta bi bila nevidljiva */
main :is(.pp-note, [data-mx-band="black"], .cta-band) :is(p, dd, label, small) a:not([class]) { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
main :is(.pp-note, [data-mx-band="black"], .cta-band) :is(p, dd, label, small) a:not([class]):hover { color: #fff; text-decoration-color: #fff; }
/* /cijene/ je imala svoju plavu (#1e7bc0) za linkove i fokus */
.mx-page .pf :is(p, li, dd) a:not([class]) { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(20, 19, 15, .45); }
.mx-page .pf :is(p, li, dd) a:not([class]):hover { color: #C8470C; }
.mx-page .pf :focus-visible { outline-color: var(--c-ink); }
/* (b) logotip "simultano.ai" je latinica: i na ja/zh zadrzava usko slovo (sim.css "body * { letter-spacing: 0 }") */
html[lang] .mx-word, html[lang] .mx-word * { letter-spacing: -0.04em !important; }
/* (c) naslov na stranicama rjesenja: oba dijela (ranije odvojena s <br>) balansiraju se svaki za sebe, bez jedne rijeci u zadnjem redu */
.mx-page .lev-h1 .lev-h1-l { display: block; text-wrap: balance; }
/* (d) dodirne mete na ekranima na dodir: dugme "Postavke kolacica" u podnozju, linkovi "Pogledajte ...", filteri
   jezika, malo dugme u zaglavlju tabele cijena; polje za pretragu jezika 16 px (iPhone inace zumira stranicu) */
@media (pointer: coarse) {
  .site-footer .footer-legal button.sc-kol-fl { display: inline-block; min-height: 44px; padding: 12px 0; }
  .mx-page main a.learn { min-height: 44px; padding: 10px 0; }
  .langs-tabs button { min-height: 44px; }
  .mx-page .pf .pf-head .mini { min-height: 44px; }
  .langs-search input { font-size: 16px; }
}
/* (e) telefon na stranicama rjesenja: gornji red prevoda se meko gasi (kao telefon na naslovnoj), ne sijece kroz slova */
.mx-page .lp-capcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 56px; pointer-events: none; background: linear-gradient(#1B1B1B 12px, rgba(27, 27, 27, 0)); }
.mx-page .lp-capcard .lp-live { z-index: 2; }
/* (f) 404 i hvala (S na sredini) na telefonu: dugmad iste sirine, jedno ispod drugog, kao na ostalim crnim trakama */
@media (max-width: 479px) {
  .mx-page .mx-s-top > .container > .btn { display: flex; justify-content: center; width: 100%; max-width: 320px; margin: 12px auto 0; }
  .mx-page .mx-s-top > .container > .btn:first-of-type { margin-top: 28px; }
}
/* (g) kratki podnaslovi zavrsnih poziva i uvoda bez jedne rijeci u zadnjem redu */
.mx-page main :is(.cta-band, [data-mx-band="black"]) :is(.t-lead, h2 + p), .mx-page main .section .t-center > .t-lead { text-wrap: pretty; }
/* (h) tabovi "u radu" i vrste partnera na telefonu se skrolaju vodoravno: desni rub se meko gasi, pa zadnji tab ne
   izgleda odsjecen nego kao da se nastavlja */
@media (max-width: 599px) {
  .ur-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
}
/* (i) japanski i kineski uvod ispod naslova na sirokom ekranu: balansiranje ga je suzilo na ~350 px pod naslovom od
   730 px; na desktopu samo bez jednog znaka u zadnjem redu (pretty), na telefonu i dalje balansirano */
@media (min-width: 768px) {
  :lang(ja) .mx-page .page-hero .t-lead, :lang(zh) .mx-page .page-hero .t-lead { text-wrap: pretty; }
}
/* (j) zaglavlje na telefonu: prazan prostor izmedju logotipa i globusa nije zasebna uokvirena celija (u es je bio
   uski isjecak od 12 px kao dvostruka linija); globus nema lijevu liniju, logotip zadrzava desnu */
@media (max-width: 720px) { .site-header .lsw { border-left: 0; } }