/* GENERIRANO iz novo.sp.css (tools/boja.py) – glavna boja #2980B9, ne uređivati ručno */
/* GENERIRANO iz novo.css (tools/razmaci.py) – ne uređivati ručno */
/* =====================================================================
   ENERGONOVA v8 — NOVO: font, glatko skrolanje, header (3 varijante), nove sekcije, Lab panel
   Inspiracija: Digidop (header, skrol, sekcije), Freesolar (font Instrument Sans),
   Chrome Bicycle (header pilula), Morfo, Masteris. Izvedba i sadržaj su vlastiti.
   ===================================================================== */

/* ---------- FONT ---------- */
html[data-font="instrument"] { --font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; }
html[data-font="instrument"] .h72, html[data-font="instrument"] .nx-h { font-weight: 500; letter-spacing: -0.045em; }
html[data-font="instrument"] .hero__title { font-weight: 500; letter-spacing: -0.04em; }
html[data-font="instrument"] .cta__h { letter-spacing: -0.04em; }

/* ---------- GLATKO SKROLANJE + SPLIT NASLOVA ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis, html.is-smooth, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw__i { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.05s var(--ease) var(--d, 0ms); will-change: transform; }
.is-split.is-in .sw__i { transform: none; }
[data-rv] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease) .1s, transform 1.1s var(--ease) .1s; }
[data-rv].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sw__i, [data-rv] { transform: none !important; opacity: 1 !important; transition: none !important; } }

/* zajedničko za nove sekcije */
.nx-h { font-size: clamp(36px, 4.6vw, 64px); font-weight: 600; line-height: 1.02; letter-spacing: -0.05em; }
.nx-h span:not(.sw):not(.sw__i) { color: var(--text); }
.nx-h em { font-style: normal; color: var(--blue); }
.na { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   HEADER
   ===================================================================== */
.hdr { --h: 76px; --hp: 0; --fg: var(--ink); --gx: max(24px, calc((100% - 1440px) / 2 + 64px)); position: fixed; inset: 0 0 auto; z-index: 80; color: var(--fg); transform: translate3d(0, -100%, 0); transition: transform .6s var(--ease); }
.hdr.is-ready { transform: none; }
.hdr.is-ready.is-hidden { transform: translate3d(0, -110%, 0); }
html[data-hdr-off="1"] .hdr, html[data-hdr-off="1"] .hdr-dim { display: none; }
.hdr__bar { position: relative; }
.hdr__bg { position: absolute; inset: 0; pointer-events: none; transition: background-color .4s, box-shadow .4s, border-color .4s; }
.hdr__in { position: relative; display: flex; align-items: center; gap: 12px; height: var(--h); padding-inline: var(--gx); transition: height .6s var(--ease), margin .6s var(--ease), padding .6s var(--ease), background-color .5s, box-shadow .5s, border-radius .6s var(--ease); }
.hdr__logo { display: inline-flex; flex: none; padding: 8px 12px; border-radius: 8px; background: #fff; transition: transform .4s var(--ease); }
.hdr__logo:hover { transform: scale(1.03); }
.hdr__logo img { width: auto; height: 30px; }
.hdr__nav { display: flex; align-items: center; gap: 2px; margin-left: 24px; }
.hdr__lnk { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: 6px; font-size: 15px; font-weight: 500; color: inherit; white-space: nowrap; transition: background-color .25s, color .25s; }
.hdr__lnk:hover, .hdr__lnk[aria-expanded="true"] { background: color-mix(in srgb, currentColor 9%, transparent); }
.hc { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.hdr__lnk[aria-expanded="true"] .hc { transform: rotate(180deg); }
.ha { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.hdr__end { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.hdr__tel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: .85; transition: opacity .25s; }
.hdr__tel:hover { opacity: 1; }
.hdr__tel i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.hdr__cta { --cb: var(--blue); --cf: #fff; display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 4px 0 24px; border-radius: 6px; background: var(--cb); color: var(--cf); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background-color .35s, color .35s; }
.hdr__cta-t { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.hdr__cta-t::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.hdr__cta-t, .hdr__cta-t::after { transition: transform .5s var(--ease); }
.hdr__cta:hover .hdr__cta-t { transform: translateY(-100%); }
.hdr__cta:hover .hdr__cta-t::after { transform: none; }
.hdr__cta-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cf); color: var(--cb); transition: background-color .35s, color .35s; }
.hdr__cta:hover .ha { transform: rotate(45deg); }
.hdr__burger { display: none; position: relative; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, currentColor 9%, transparent); }
.hdr__burger i { position: absolute; left: 14px; right: 14px; height: 1.6px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.hdr__burger i:first-child { top: 19px; }
.hdr__burger i:last-child { top: 26px; }
.mnav-on .hdr__burger i:first-child { top: 22.5px; transform: rotate(45deg); }
.mnav-on .hdr__burger i:last-child { top: 22.5px; transform: rotate(-45deg); }
.hdr__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; opacity: 0; transition: opacity .4s; }
.hdr__prog i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }

/* mega izbornik */
.hm { --mh: 0px; position: relative; height: 0; overflow: hidden; transition: height .6s var(--ease); }
.hdr.is-open .hm { height: var(--mh); }
.hm__panel { position: absolute; left: 0; right: 0; top: 0; display: none; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; padding: 32px var(--gx) 40px; }
.hm__panel.is-on { display: grid; }
.hm__lead { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.45; opacity: .7; }
.hm__lead span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.hm__links { display: flex; flex-direction: column; }
.hm__links li { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease) calc(var(--i) * 45ms + 80ms), transform .6s var(--ease) calc(var(--i) * 45ms + 80ms); }
.hdr.is-open .hm__panel.is-on .hm__links li, .hdr.is-open .hm__panel.is-on .hm__card { opacity: 1; transform: none; }
.hm__links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); transition: color .25s, padding-left .4s var(--ease); }
.hm__links b { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; }
.hm__links b em { margin-left: 8px; font-style: normal; font-size: 13px; color: var(--hm-acc, #94c6e7); vertical-align: 3px; }
.hm__links small { grid-column: 1; font-size: 13px; opacity: .6; }
.hm__links .ha { grid-row: 1 / 3; grid-column: 2; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .4s var(--ease); }
.hm__links a:hover { padding-left: 8px; color: var(--hm-acc, #94c6e7); }
.hm__links a:hover .ha { opacity: 1; transform: none; }
.hm__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hm__card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 236px; padding: 24px; border-radius: 16px; overflow: hidden; color: #fff; isolation: isolate; opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease) calc(var(--i) * 70ms + 140ms), transform .7s var(--ease) calc(var(--i) * 70ms + 140ms); }
.hm__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.hm__card:hover img { transform: scale(1.12); }
.hm__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 11, 0) 30%, rgba(10, 10, 11, .78)); }
.hm__card strong { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.hm__card > span:last-child { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; opacity: .85; }
.hm__card:hover .ha { transform: rotate(45deg); }
.hm__card--blue { justify-content: space-between; background: radial-gradient(120% 120% at 90% 0%, #439bd6, #2980b9 50%, #205a81); }
.hm__card--blue strong { font-size: 26px; }
.hm__card--ink { justify-content: flex-start; background: #1b1c20; }
.hm__card--ink ul { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 14px; opacity: .85; }
.hm__card--ink li::before { content: "§ "; color: #94c6e7; }
.hm__ck { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.hm__go { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--blue); }
.hdr-dim { position: fixed; inset: 0; z-index: 79; background: rgba(10, 10, 11, .5); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.hdr-dim.is-on { opacity: 1; pointer-events: auto; }

/* ---------- d · DIGIDOP: tamna pozadina se puni sa skrolom ---------- */
.hdr[data-v="d"] { --fg: color-mix(in srgb, #fff calc(var(--hp) * 100%), var(--ink)); }
.hdr[data-v="d"].is-open { --hp: 1 !important; }
.hdr[data-v="d"] .hdr__bg { background: rgba(16, 16, 17, var(--hp)); }
.hdr[data-v="d"] .hdr__cta { --cb: color-mix(in srgb, #fff calc(var(--hp) * 100%), var(--blue)); --cf: color-mix(in srgb, var(--ink) calc(var(--hp) * 100%), #fff); }
.hdr[data-v="d"] .hm { background: #101011; color: #fff; }
.hdr[data-v="d"] .hm__panel { border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---------- c · CHROME: puna širina → plutajuća pilula ---------- */
.hdr[data-v="c"] .hdr__in { margin: 0; }
.hdr[data-v="c"].is-scrolled .hdr__in { --h: 58px; margin: 12px max(12px, calc((100% - 1312px) / 2)) 0; padding-inline: 8px 8px; border-radius: 6px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 rgba(10, 10, 11, .04), 0 18px 40px -18px rgba(19, 42, 57, .28); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.hdr[data-v="c"].is-scrolled .hdr__logo { padding: 4px 8px; }
.hdr[data-v="c"].is-scrolled .hdr__logo img { height: 26px; }
.hdr[data-v="c"].is-scrolled .hdr__cta { --cb: var(--ink); height: 46px; }
.hdr[data-v="c"] .hdr__logo img { transition: height .6s var(--ease); }
.hdr[data-v="c"] .hm { margin: 12px max(12px, calc((100% - 1312px) / 2)) 0; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -30px rgba(19, 42, 57, .35); --hm-acc: var(--blue); }
.hdr[data-v="c"] .hm__panel { padding-inline: 32px; }
.hdr[data-v="c"]:not(.is-open) .hm { box-shadow: none; }

/* ---------- m · MORFO: bijela traka, plavi CTA, linija napretka ---------- */
.hdr[data-v="m"] .hdr__bg { border-bottom: 1px solid transparent; }
.hdr[data-v="m"].is-scrolled .hdr__bg, .hdr[data-v="m"].is-open .hdr__bg { background: rgba(255, 255, 255, .96); border-color: var(--line-08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hdr[data-v="m"].is-scrolled .hdr__in { --h: 64px; }
.hdr[data-v="m"] .hdr__cta { height: 40px; padding: 0 16px; border-radius: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hdr[data-v="m"] .hdr__cta-ic { display: none; }
.hdr[data-v="m"] .hdr__lnk { border-radius: 6px; }
.hdr[data-v="m"] .hdr__prog { opacity: 1; }
.hdr[data-v="m"] .hm { background: #fff; --hm-acc: var(--blue); border-bottom: 1px solid var(--line-08); }

/* ---------- mobilni izbornik ---------- */
.mnav { position: fixed; inset: 0; z-index: 78; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 96px 24px 24px; background: var(--ink); color: #fff; clip-path: circle(0 at calc(100% - 44px) 38px); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s; overflow-y: auto; }
.mnav-on .mnav { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; transition: clip-path .8s var(--ease), visibility 0s; }
.mnav-on .hdr { --fg: #fff !important; }
.mnav-on .hdr .hdr__bg { background: transparent !important; }
.mnav__links { display: flex; flex-direction: column; }
.mnav__links a { display: flex; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: clamp(32px, 9vw, 52px); font-weight: 500; letter-spacing: -0.04em; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.mnav__links a span { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: #94c6e7; }
.mnav-on .mnav__links a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms + 200ms); }
.mnav__sub { display: flex; flex-wrap: wrap; gap: 8px; }
.mnav__sub a { padding: 8px 16px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18); font-size: 14px; }
.mnav__foot { display: grid; gap: 16px; }
.mnav__foot a { display: flex; flex-direction: column; font-size: 18px; }
.mnav__foot small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }

@media (max-width: 1180px) { .hdr__tel { display: none; } }
@media (max-width: 1023px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: block; }
  .hdr__in { --h: 68px; }
  .hm, .hdr-dim { display: none; }
}
@media (max-width: 520px) {
  .hdr { --gx: 16px; }
  .hdr__cta { width: 46px; padding: 0 4px; }
  .hdr__cta-t { display: none; }
  .hdr[data-v="m"] .hdr__cta { width: auto; padding: 0 12px; }
  .hdr[data-v="m"] .hdr__cta-t { display: inline-block; }
  .hdr__logo img { height: 26px; }
}

/* =====================================================================
   NOVE SEKCIJE
   ===================================================================== */

/* ---------- NA TERENU (Digidop video) ---------- */
.nt { position: relative; padding-top: 40px; }
.nt__head { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.nt__head .nx-h { max-width: 17ch; }
.nt__track { position: relative; height: 230vh; }
.nt__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.nt__media { position: absolute; inset: 0; overflow: hidden; background: var(--ink); clip-path: inset(12vh 64px round 28px); will-change: clip-path; }
.nt__film { position: absolute; inset: 0; will-change: transform; }
.nt__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.3s var(--ease); }
.nt__shot.is-on { opacity: 1; }
.nt__shot img { width: 100%; height: 100%; object-fit: cover; }
.nt__shot.is-on img { animation: ntkb 7s linear both; }
@keyframes ntkb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.nt__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .45) 0%, rgba(10, 10, 11, 0) 26%, rgba(10, 10, 11, 0) 52%, rgba(10, 10, 11, .72) 100%); pointer-events: none; }
.nt__ui { --ix: 64px; --iy: 12vh; position: absolute; z-index: 2; inset: var(--iy) var(--ix); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; padding: clamp(16px, 2.4vw, 32px); color: #fff; }
.nt__bars { grid-column: 1 / -1; display: flex; gap: 8px; }
.nt__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.nt__bars b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.nt__cap { align-self: end; display: flex; flex-direction: column; gap: 8px; }
.nt__k { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; opacity: .75; }
.nt__cap strong { font-size: clamp(34px, 5vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.nt__cap span:last-child { font-size: clamp(14px, 1.2vw, 17px); opacity: .85; }
.nt__ctl { align-self: end; display: flex; gap: 8px; }
.nt__btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color .25s, color .25s; }
.nt__btn:hover { background: #fff; color: var(--ink); }
.nt__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nt__pl { display: none; fill: currentColor; }
.nt__pp.is-paused .nt__pl { display: block; }
.nt__pp.is-paused .nt__pa { display: none; }
.nt-cut { animation: ntcut .7s var(--ease) both; }
@keyframes ntcut { from { clip-path: inset(0 0 100% 0); transform: translateY(14px); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* ---------- ZAŠTO ISPITIVATI (Morfo 01/02/03) ---------- */
.nr { padding-top: 40px; padding-bottom: 128px; }
.nr__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.nr__head .nx-h { max-width: 16ch; }
.nr__head .lead17 { max-width: 32ch; }
.nr__cards { display: flex; gap: 12px; height: 480px; }
.nr__card { position: relative; flex: 1 1 0; min-width: 0; border-radius: 20px; overflow: hidden; background: var(--ink); color: #fff; cursor: default; outline: none; isolation: isolate; transition: flex-grow .8s var(--ease); }
.nr__card.is-on { flex-grow: 2.1; }
.nr__card:focus-visible { box-shadow: 0 0 0 3px var(--blue); }
.nr__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: grayscale(.4); transform: scale(1.06); transition: opacity .8s, filter .8s, transform 1.4s var(--ease); }
.nr__card.is-on img { opacity: .7; filter: none; transform: scale(1); }
.nr__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 11, .1), rgba(10, 10, 11, .82)); }
.nr__no { position: absolute; right: 22px; top: 14px; font-size: clamp(56px, 6vw, 92px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .6); transition: color .6s; }
.nr__card.is-on .nr__no { color: rgba(255, 255, 255, .92); -webkit-text-stroke-color: transparent; }
.nr__txt { position: absolute; left: 26px; right: 26px; bottom: 26px; }
.nr__txt h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -0.03em; white-space: nowrap; }
.nr__txt p { max-width: 38ch; max-height: 0; margin-top: 0; overflow: hidden; font-size: 16px; line-height: 1.5; opacity: 0; transition: max-height .8s var(--ease), opacity .5s, margin .6s var(--ease); }
.nr__card.is-on .nr__txt p { max-height: 120px; margin-top: 12px; opacity: .88; transition-delay: .15s; }
.nr__res { display: flex; align-items: center; gap: 24px; margin-top: 12px; padding: 24px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--line-08); box-shadow: var(--shadow); }
.nr__res span { padding-right: 24px; border-right: 2px solid var(--blue); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.nr__res p { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }

/* ---------- PODRUČJA (Digidop industrije) ---------- */
.np { padding-top: 40px; padding-bottom: 128px; }
.np__h { margin-bottom: 48px; text-align: center; }
.np__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line-08); box-shadow: var(--shadow); }
.np__list { display: flex; flex-direction: column; gap: 4px; padding: 16px 0 0 12px; }
.np__list button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0 16px; font-size: 22px; font-weight: 500; letter-spacing: -0.025em; color: var(--muted); text-align: left; transition: color .3s; }
.np__list button:hover { color: var(--ink); }
.np__list button[aria-selected="true"] { color: var(--ink); }
.np__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.np__list button[aria-selected="true"] .np__dot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.np__bar { position: absolute; left: 21px; right: 12px; bottom: 6px; height: 2px; background: var(--line-08); opacity: 0; transition: opacity .3s; }
.np__bar s { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.np__list button[aria-selected="true"] .np__bar { opacity: 1; }
.np__photo { position: relative; aspect-ratio: 4 / 4.6; border-radius: 16px; overflow: hidden; background: var(--ink); }
.np__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 1s var(--ease), transform 1.6s var(--ease); }
.np__photo img.is-on { opacity: 1; transform: none; }
.np__body { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 12px 0; }
.np__body > * { opacity: 0; transform: translateY(14px); }
.np__body.is-in > * { animation: npin .8s var(--ease) both; }
.np__body.is-in > :nth-child(2) { animation-delay: .06s; } .np__body.is-in > :nth-child(3) { animation-delay: .12s; } .np__body.is-in > :nth-child(4) { animation-delay: .18s; } .np__body.is-in > :nth-child(5) { animation-delay: .24s; }
@keyframes npin { to { opacity: 1; transform: none; } }
.np__k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--blue); }
.np__body h3 { font-size: clamp(30px, 3vw, 44px); font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.np__d { font-size: 17px; line-height: 1.5; color: var(--text); }
.np__body ul { margin-top: 8px; border-top: 1px solid var(--line-10); }
.np__body li a { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line-10); font-size: 15.5px; font-weight: 500; transition: color .25s, padding-left .4s var(--ease); }
.np__body li a em { font-style: normal; font-size: 12px; color: var(--blue); }
.np__body li a .na { margin-left: auto; width: 16px; height: 16px; opacity: .35; transition: opacity .25s, transform .4s var(--ease); }
.np__body li a:hover { color: var(--blue); padding-left: 8px; }
.np__body li a:hover .na { opacity: 1; transform: rotate(45deg); }
.np__more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 16px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500; transition: background-color .25s; }
.np__more:hover { background: var(--blue); }

/* ---------- OD MJERENJA DO DOKUMENTA (Morfo kartice koje se slažu) ---------- */
.ns { padding-top: 40px; padding-bottom: 96px; }
.ns__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.ns__head .nx-h { max-width: 17ch; }
.ns__head .lead17 { max-width: 36ch; }
.ns__card { --cover: 0; position: sticky; top: calc(96px + var(--k) * 20px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: end; gap: 32px; min-height: 520px; margin-bottom: 24px; padding: clamp(24px, 3vw, 40px); border-radius: 20px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; transform-origin: 50% 0; transform: scale(calc(1 - var(--cover) * .05)); filter: brightness(calc(1 - var(--cover) * .4)); box-shadow: 0 -20px 50px -30px rgba(19, 42, 57, .45); }
.ns__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.ns__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 11, .85) 0%, rgba(10, 10, 11, .35) 60%, rgba(10, 10, 11, .2)); }
.ns__l { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 30ch; }
.ns__tag { padding: 8px 12px; border-radius: 6px; background: var(--blue); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ns__l h3 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; }
.ns__l p { font-size: 16.5px; line-height: 1.5; opacity: .82; }
.ns__w { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.ns__wh { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.ns__wh span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ns__wh i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: fpulse 2s ease-out infinite; }
.ns__w svg { width: 100%; height: 130px; border-radius: 8px; background: #f6f8f9; }
.ns__grid { fill: none; stroke: rgba(10, 10, 11, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ns__area { fill: rgba(41, 128, 185, .1); opacity: 0; transition: opacity 1s .9s; }
.ns__ln { fill: none; stroke: var(--blue); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.ns__w.is-play .ns__ln { stroke-dashoffset: 0; }
.ns__w.is-play .ns__area { opacity: 1; }
.ns__rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line-08); font-size: 13.5px; }
.ns__rows span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.ns__rows b { font-weight: 500; text-align: right; }
.ns__ok { color: var(--blue); }
.ns__th { position: relative; height: 150px; border-radius: 8px; overflow: hidden; }
.ns__th img { width: 100%; height: 100%; object-fit: cover; }
.ns__th i { position: absolute; left: var(--x); top: var(--y); width: 20px; height: 20px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: nsping 2.2s ease-out infinite; }
.ns__th i:nth-child(3) { animation-delay: .5s; } .ns__th i:nth-child(4) { animation-delay: 1s; }
@keyframes nsping { 70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.ns__chk { display: flex; flex-direction: column; }
.ns__chk li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-08); font-size: 14px; }
.ns__chk li:last-child { border-bottom: 0; }
.ns__chk li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-16); color: transparent; font-size: 12px; font-weight: 700; transition: background-color .4s, border-color .4s, color .4s; transition-delay: calc(var(--i) * 260ms + 300ms); }
.ns__w.is-play .ns__chk li::before { background: var(--blue); border-color: var(--blue); color: #fff; }
.ns__note { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* ---------- POSTUPAK (Masteris koraci) ---------- */
.nk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); padding-top: 40px; padding-bottom: 128px; }
.nk__l { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.nk__l .nx-h { max-width: 13ch; }
.nk__img { position: relative; margin: 24px 0 0; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; }
.nk__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; }
.nk__steps { position: relative; margin: 0; padding: 0 0 0 64px; list-style: none; }
.nk__line { position: absolute; left: 17px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px; background: var(--line-10); }
.nk__line i { position: absolute; inset: 0; border-radius: 2px; background: var(--blue); transform-origin: 50% 0; transform: scaleY(0); }
.nk__line b { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft), 0 0 18px rgba(41, 128, 185, .5); }
.nk__st { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 32px 0; border-bottom: 1px solid var(--line-10); }
.nk__st::before { content: ""; position: absolute; left: -48px; top: 38px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-16); transition: border-color .4s, background-color .4s; }
.nk__st.is-on::before, .nk__st.is-done::before { border-color: var(--blue); background: var(--blue); }
.nk__n { padding-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); transition: color .4s; }
.nk__st h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.035em; color: var(--muted); transition: color .5s; }
.nk__st p { max-width: 42ch; margin-top: 8px; font-size: 16.5px; line-height: 1.5; color: var(--text); opacity: .45; transition: opacity .5s; }
.nk__st.is-on h3, .nk__st.is-done h3 { color: var(--ink); }
.nk__st.is-on p { opacity: 1; }
.nk__st.is-on .nk__n { color: var(--blue); }

/* ---------- DOSEG (Digidop karta + orbita) ---------- */
.nd { padding-top: 40px; padding-bottom: 128px; }
.nd__h { margin-bottom: 48px; text-align: center; }
.nd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nd__card { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line-08); box-shadow: var(--shadow); }
.nd__vis { position: relative; height: 380px; margin-bottom: 16px; border-radius: 16px; overflow: hidden; background: radial-gradient(100% 100% at 50% 40%, #fff 0%, #f2f4f6 100%); border: 1px solid var(--line-08); }
.nd__vis canvas { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
.nd__pin { position: absolute; display: inline-flex; align-items: center; gap: 8px; margin-left: 24px; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; white-space: nowrap; transform: translateY(-50%); pointer-events: none; }
.nd__pin i { width: 6px; height: 6px; border-radius: 50%; background: #94c6e7; }
.nd__card h3, .nd__card p, .nd__a { margin-inline: 12px; }
.nd__card h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.nd__card h3 span { color: var(--text); }
.nd__card p { max-width: 46ch; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.nd__a { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--blue); }
.nd__a:hover .na { transform: rotate(45deg); }
.nd__a .na { transition: transform .4s var(--ease); }
.nd__orbit { display: grid; place-items: center; }
.no__core { position: relative; z-index: 2; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--ink); color: #fff; text-align: center; box-shadow: 0 0 0 10px rgba(41, 128, 185, .06), 0 0 0 22px rgba(41, 128, 185, .04); }
.no__core b { font-size: 15px; font-weight: 500; line-height: 1.1; }
.no__core i { font-style: normal; font-size: 18px; color: #94c6e7; line-height: 1; }
.no__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(41, 128, 185, .22); animation: nospin var(--t) linear infinite; }
.no__ring--in { --r: 116px; --t: 40s; width: 232px; height: 232px; margin: -128px 0 0 -128px; }
.no__ring--out { --r: 172px; --t: 64s; width: 344px; height: 344px; margin: -172px 0 0 -172px; animation-direction: reverse; }
.nd__orbit:hover .no__ring, .nd__orbit:hover .no__ic { animation-play-state: paused; }
.no__it { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
.no__ic { position: absolute; left: -24px; top: -24px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--line-10); box-shadow: 0 10px 24px -12px rgba(19, 42, 57, .4); color: var(--blue); animation: nospin var(--t) linear infinite reverse; }
.no__ring--out .no__ic { animation-direction: normal; }
.no__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.no__ic small { position: absolute; top: 100%; left: 50%; margin-top: 8px; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 10px; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.no__ic:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.no__ic:hover small { opacity: 1; }
@keyframes nospin { to { transform: rotate(360deg); } }
.no__it .no__ic { transform-origin: 50% 50%; }

/* ---------- TRAKA (Chrome) ---------- */
.nb { overflow: hidden; margin-bottom: 128px; padding: 16px 0; background: var(--blue); color: #fff; }
.nb__track { display: flex; align-items: center; width: max-content; will-change: transform; }
.nb__track span { padding: 0 24px; font-size: clamp(20px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.nb__track i { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }

/* ---------- REFERENCE (Masteris kartice) ---------- */
.nf { padding-top: 40px; padding-bottom: 128px; overflow: hidden; }
.nf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.nf__head .eyebrow { margin-bottom: 16px; }
.nf__head .nx-h { max-width: 16ch; }
.nf__nav { display: flex; gap: 8px; }
.nf__nav button { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line-16); transition: background-color .25s, color .25s, border-color .25s; }
.nf__nav button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.nf__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nf__rail { display: flex; gap: 16px; margin-right: calc(-1 * max(64px, (100vw - 1440px) / 2 + 64px)); padding-right: max(64px, (100vw - 1440px) / 2 + 64px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.nf__rail::-webkit-scrollbar { display: none; }
.nf__rail.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.nf__card { position: relative; flex: none; display: flex; flex-direction: column; justify-content: flex-end; width: clamp(260px, 26vw, 360px); aspect-ratio: 3 / 4.1; padding: 24px; border-radius: 20px; overflow: hidden; color: #fff; isolation: isolate; scroll-snap-align: start; }
.nf__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); -webkit-user-drag: none; }
.nf__card:hover img { transform: scale(1.07); }
.nf__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 11, 0) 40%, rgba(10, 10, 11, .82)); }
.nf__tag { position: absolute; left: 18px; top: 18px; padding: 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); font-size: 12.5px; font-weight: 500; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nf__go { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); transform: scale(.8); opacity: 0; transition: transform .4s var(--ease), opacity .3s; }
.nf__card:hover .nf__go { transform: none; opacity: 1; }
.nf__txt { display: flex; flex-direction: column; gap: 4px; }
.nf__txt small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; opacity: .7; }
.nf__txt strong { font-size: 22px; font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; }
.nf__txt span { font-size: 14px; opacity: .82; }
.nf__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
.nf__bar { position: relative; flex: 1; max-width: 360px; height: 2px; background: var(--line-10); overflow: hidden; }
.nf__bar i { position: absolute; left: 0; top: 0; width: 25%; height: 100%; background: var(--ink); }
.nf__foot p { font-size: 12.5px; color: var(--muted); }

/* ---------- responsive sekcija ---------- */
@media (max-width: 1100px) {
  .np__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .np__list { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 24px; padding: 8px 8px 0; }
  .np__list li { flex: 1; min-width: 160px; }
  .ns__card { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 860px) {
  .nr__head, .ns__head, .nf__head { flex-direction: column; align-items: flex-start; }
  .nr__cards { flex-direction: column; height: auto; }
  .nr__card { min-height: 220px; }
  .nr__card.is-on { min-height: 320px; }
  .nk { grid-template-columns: minmax(0, 1fr); }
  .nk__l { position: relative; top: 0; }
  .nd__grid { grid-template-columns: minmax(0, 1fr); }
  .np__grid { grid-template-columns: minmax(0, 1fr); }
  .np__photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .nt__track { height: 190vh; }
  .nt__ui { grid-template-columns: minmax(0, 1fr); }
  .nt__ctl { margin-top: 16px; }
  .nr__txt h3 { white-space: normal; }
  .nr__res { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nr__res span { border-right: 0; padding: 0; }
  .ns__card { min-height: 0; top: calc(84px + var(--k) * 12px); }
  .nk__steps { padding-left: 40px; }
  .nk__line { left: 9px; }
  .nk__st::before { left: -40px; }
  .nk__st { grid-template-columns: 34px minmax(0, 1fr); }
  .nd__vis { height: 300px; }
  .no__ring--in { --r: 84px; width: 168px; height: 168px; margin: -80px 0 0 -80px; }
  .no__ring--out { --r: 130px; width: 260px; height: 260px; margin: -128px 0 0 -128px; }
  .no__core { width: 104px; height: 104px; }
  .nb { margin-bottom: 80px; }
  .nf__rail { margin-right: -24px; padding-right: 24px; }
}

/* =====================================================================
   LAB PANEL
   ===================================================================== */
.lab { position: fixed; left: 12px; bottom: 14px; z-index: 95; font-family: var(--font); }
.lab__fab { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .7); transition: transform .3s var(--ease); }
.lab__fab:hover { transform: scale(1.08); }
.lab__fab::after { content: "Lab"; position: absolute; left: 48px; padding: 4px 8px; border-radius: 8px; background: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--ease); pointer-events: none; }
.lab__fab:hover::after { opacity: 1; transform: none; }
.lab.is-open .lab__fab::after { display: none; }
.lab__fab i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(41, 128, 185, .35); animation: fpulse 2.4s ease-out infinite; }
.lab__p { position: absolute; left: 0; bottom: 50px; width: 316px; max-height: calc(100vh - 90px); overflow-y: auto; padding: 16px; border-radius: 16px; background: #fff; color: var(--ink); border: 1px solid var(--line-08); box-shadow: 0 30px 70px -20px rgba(19, 42, 57, .35); opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 0 100%; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.lab.is-open .lab__p { opacity: 1; transform: none; pointer-events: auto; }
.lab__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.lab__h b { font-size: 15px; }
.lab__h span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.lab__g { padding: 12px 0; border-top: 1px solid var(--line-08); }
.lab__g > p { margin-bottom: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lab__seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 8px; background: var(--bg); }
.lab__seg button { flex: 1; padding: 8px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s; }
.lab__seg button:hover { background: #fff; }
.lab__seg button.is-on { background: var(--ink); color: #fff; }
.lab__list { display: flex; flex-direction: column; gap: 2px; }
.lab__list label { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.lab__list label:hover { background: var(--bg); }
.lab__list input { width: 16px; height: 16px; accent-color: var(--blue); }
.lab__go { display: block; margin-top: 8px; padding: 12px 12px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 600; text-align: center; }
@media (max-width: 520px) { .lab__p { width: calc(100vw - 32px); } }

/* =====================================================================
   FOOTERI N–Q (footer.js)
   ===================================================================== */
.fx__legal, .fo__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px 0 24px; font-size: 13px; }
.fx__legal nav, .fo__legal nav { display: flex; gap: 24px; }

/* ---------- N · DIGIDOP ---------- */
.fx { --mx: 0; --my: 0; padding-top: 80px; background: #0f0f10; color: #fff; overflow: hidden; }
.fx__cta { position: relative; display: flex; align-items: center; min-height: 560px; margin-inline: calc(-1 * max(64px, (100% - 1440px) / 2 + 64px)); padding-inline: max(64px, calc((100% - 1440px) / 2 + 64px)); isolation: isolate; }
.fx__rib { position: absolute; inset: -20% -10% -20% 30%; z-index: -1; transform: translate(calc(var(--mx) * -30px), calc(var(--my) * -20px)); transition: transform 1.2s var(--ease); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); }
.fx__rib i { position: absolute; top: -10%; bottom: -10%; left: calc(8% + var(--o) * 14%); width: calc(40px + var(--o) * 9px); border-radius: 50%; background: linear-gradient(90deg, rgba(41, 128, 185, 0) 0%, rgba(41, 128, 185, .55) 30%, #bcdbf0 48%, #fff 50%, #75b6e1 54%, rgba(41, 128, 185, .45) 70%, rgba(41, 128, 185, 0) 100%); filter: blur(calc(2px + var(--o) * 1.2px)); opacity: calc(.95 - var(--o) * .1); transform: rotate(28deg) skewY(-8deg); mix-blend-mode: screen; animation: fxrib calc(9s + var(--o) * 1.7s) ease-in-out infinite alternate; animation-delay: calc(var(--o) * -1.3s); }
.fx__rib i:nth-child(2n) { width: calc(12px + var(--o) * 3px); filter: blur(1px); opacity: .8; }
@keyframes fxrib { from { transform: rotate(28deg) skewY(-8deg) translateX(-40px); } to { transform: rotate(34deg) skewY(-4deg) translateX(60px); } }
.fx__cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 75% 50%, rgba(41, 128, 185, .35), transparent 70%); pointer-events: none; }
.fx__h { font-size: clamp(40px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.fx__h span { color: rgba(255, 255, 255, .45); }
.fx__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.fx__b { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 500; transition: background-color .25s, color .25s; }
.fx__b:hover { background: var(--blue); color: #fff; }
.fx__l { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; }
.fx__l .fa { transition: transform .4s var(--ease); }
.fx__l:hover .fa { transform: rotate(45deg); }
.fx__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 0 0 48px; }
.fx__logo { display: inline-flex; padding: 12px 16px; border-radius: 8px; background: #fff; }
.fx__brand p { max-width: 36ch; margin-top: 16px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.fx__news { text-align: right; }
.fx__news p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.fx__news a { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 18px; font-weight: 500; }
.fx__news a:hover { color: #94c6e7; }
.fx__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .7fr); gap: 40px; padding-bottom: 64px; }
.fx__cards { display: flex; flex-direction: column; gap: 16px; }
.fx__card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; padding: 24px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); text-align: center; isolation: isolate; }
.fx__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(1) contrast(1.1); transition: opacity .6s, transform 1.2s var(--ease), filter .6s; }
.fx__cr { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fx__cr i { position: absolute; top: -40%; bottom: -40%; width: 36px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(41, 128, 185, .6), #d1e7f5, rgba(41, 128, 185, .5), transparent); filter: blur(3px); transform: rotate(58deg); mix-blend-mode: screen; transition: transform 1.4s var(--ease); }
.fx__cr i:first-child { left: 18%; }
.fx__cr i:last-child { left: 72%; width: 14px; }
.fx__card:hover img { opacity: .5; filter: grayscale(.2); transform: scale(1.06); }
.fx__card:hover .fx__cr i { transform: rotate(58deg) translateY(-40px); }
.fx__card strong { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.fx__card span:last-child { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.fx__links { display: flex; flex-direction: column; gap: 4px; padding-left: 20%; }
.fx__links a { display: inline-block; padding: 8px 0; font-size: 22px; letter-spacing: -0.02em; color: rgba(255, 255, 255, .9); transition: color .25s, transform .4s var(--ease); }
.fx__links a:hover { color: #94c6e7; transform: translateX(6px); }
.fx__loc { display: flex; flex-direction: column; gap: 24px; }
.fx__loc div { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.fx__loc b { font-size: 16px; font-weight: 500; color: #fff; }
.fx__loc b i { font-style: normal; color: rgba(255, 255, 255, .35); }
.fx__loc b span { font-variant-numeric: tabular-nums; }
.fx__loc a:hover { color: #fff; }
.fx__legal { border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }
.fx__legal a:hover { color: #fff; }

/* ---------- O · MASTERIS ---------- */
.fo { padding-top: 64px; background: #fff; }
.fo__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); align-items: end; gap: 32px; min-height: 420px; padding: clamp(24px, 3.4vw, 48px); border-radius: 20px; overflow: hidden; color: #fff; isolation: isolate; }
.fo__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); }
.fo__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 11, .62), rgba(10, 10, 11, .15) 60%, rgba(10, 10, 11, .45)); }
.fo__h { font-size: clamp(34px, 4.2vw, 60px); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; }
.fo__side { display: flex; flex-direction: column; gap: 16px; }
.fo__side p { font-size: 15.5px; line-height: 1.5; opacity: .9; }
.fo__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 16px 0 24px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 500; transition: background-color .25s, color .25s; }
.fo__btn:hover { background: var(--blue); color: #fff; }
.fo__btn .fa { transition: transform .4s var(--ease); }
.fo__btn:hover .fa { transform: rotate(45deg); }
.fo__main { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; padding: 64px 0 40px; }
.fo__logo { display: inline-flex; }
.fo__brand address { margin-top: 16px; font-style: normal; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.fo__soc { display: flex; gap: 8px; margin-top: 16px; }
.fo__soc a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-16); transition: background-color .25s, color .25s, border-color .25s; }
.fo__soc a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.fo__soc .fa { width: 16px; height: 16px; }
.fo__col p { margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.fo__col li a { display: inline-block; padding: 4px 0; font-size: 14.5px; color: var(--text); transition: color .25s; }
.fo__col li a:hover { color: var(--blue); }
.fo__cert { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 24px 0; border-top: 1px solid var(--line-10); }
.fo__cert p { margin-right: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fo__seal { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 6px; background: var(--bg); font-size: 13px; font-weight: 500; }
.fo__seal i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid var(--blue); color: var(--blue); font-style: normal; font-weight: 700; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(41, 128, 185, .25); }
.fo__legal { border-top: 1px solid var(--line-10); color: var(--text); }
.fo__legal a:hover { color: var(--blue); }

/* ---------- P · MORFO ---------- */
.fp { --gx: max(64px, calc((100% - 1440px) / 2 + 64px)); padding-inline: 0 !important; }
.fp__band { position: relative; display: flex; justify-content: center; padding: 96px var(--gx); overflow: hidden; background: linear-gradient(180deg, #3895d3 0%, #2980b9 55%, #256895 100%); color: #fff; text-align: center; isolation: isolate; }
.fp__glow i { position: absolute; z-index: -1; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(148, 198, 231, .55), transparent); filter: blur(20px); animation: fpglow 14s ease-in-out infinite alternate; }
.fp__glow i:first-child { left: -20vw; top: -30vw; }
.fp__glow i:last-child { right: -25vw; bottom: -35vw; animation-delay: -7s; background: radial-gradient(closest-side, rgba(32, 90, 129, .9), transparent); }
@keyframes fpglow { to { transform: translate(10vw, 6vw) scale(1.1); } }
.fp__bin { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 760px; }
.fp__band h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; }
.fp__band h2 span { color: #cbe4f4; }
.fp__band p { font-size: 17px; opacity: .88; }
.fp__btn { margin-top: 12px; padding: 16px 24px; border-radius: 6px; background: #fff; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: transform .35s var(--ease), box-shadow .35s; }
.fp__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45); }
.fp__dark { padding: 64px var(--gx) 0; background: #17181b; color: #fff; }
.fp__main { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 24px; padding-bottom: 48px; }
.fp__logo { display: inline-flex; padding: 8px 12px; border-radius: 8px; background: #fff; }
.fp__logo img { width: 140px; height: auto; }
.fp__brand p { max-width: 26ch; margin-top: 16px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.fp__brand small { display: block; margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .45); }
.fp__col p, .fp__mid p { margin-bottom: 16px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.fp__col li a, .fp__plain li { display: inline-block; padding: 4px 0; font-size: 14px; color: rgba(255, 255, 255, .82); transition: color .25s; }
.fp__plain li { display: block; color: rgba(255, 255, 255, .6); }
.fp__col li a:hover { color: #94c6e7; }
.fp__mid { display: flex; justify-content: space-between; gap: 32px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.fp__pill { display: inline-flex; padding: 12px 24px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .5); font-size: 14px; font-weight: 500; transition: background-color .25s, color .25s; }
.fp__pill:hover { background: #fff; color: var(--ink); }
.fp__mid nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.fp__mid nav a:hover { color: #94c6e7; }
.fp__mid > div:last-child { text-align: right; }
.fp__mid > div:last-child nav { justify-content: flex-end; }
.fp__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 24px 0 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ---------- Q · CHROME ---------- */
.fq { padding-top: 128px; overflow: hidden; }
.fq__top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 128px; text-align: center; }
.fq__tag { padding: 8px 16px; border-radius: 6px; background: var(--blue); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.fq__h { font-size: clamp(36px, 4.4vw, 62px); font-weight: 500; line-height: 1.04; letter-spacing: -0.045em; }
.fq__form { display: flex; align-items: center; gap: 8px; width: min(100%, 440px); padding: 8px 8px 8px 24px; border-radius: 6px; background: #fff; border: 1px solid var(--line-10); box-shadow: var(--shadow); }
.fq__form span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--text); text-align: left; }
.fq__form a { flex: none; padding: 12px 24px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; transition: background-color .25s; }
.fq__form a:hover { background: var(--blue); }
.fq__or { font-size: 14px; color: var(--muted); }
.fq__or a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fq__ph { --fy: 0px; position: absolute; z-index: -1; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 50px -24px rgba(19, 42, 57, .45); transform: translate3d(0, var(--fy), 0) rotate(var(--r)); transition: transform .2s linear; }
.fq__ph img { width: 100%; height: 100%; object-fit: cover; }
.fq__ph--1 { --r: -8deg; left: 4%; top: 46%; width: clamp(110px, 12vw, 180px); aspect-ratio: 1; }
.fq__ph--2 { --r: 7deg; right: 6%; top: 18%; width: clamp(120px, 13vw, 200px); aspect-ratio: 4 / 3.4; }
.fq__ph--3 { --r: 4deg; left: 16%; top: -6%; width: clamp(80px, 8vw, 120px); aspect-ratio: 3 / 4; }
.fq__top { isolation: isolate; }
.fq__word { display: flex; align-items: flex-start; gap: 8px; overflow: hidden; padding-bottom: 8px; white-space: nowrap; }
.fq__word span { font-size: 200px; font-weight: 500; letter-spacing: -0.065em; line-height: 1; margin-top: -.12em; }
.fq__word sup { margin-top: .6em; font-size: clamp(14px, 1.6vw, 22px); font-weight: 500; color: var(--blue); }
.fq__bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px 0 24px; font-size: 13px; color: var(--text); }
.fq__bot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fq__bot a { color: var(--ink); transition: color .25s; }
.fq__bot a:hover { color: var(--blue); }

@media (max-width: 980px) {
  .fx__main { flex-direction: column; align-items: flex-start; }
  .fx__news { text-align: left; }
  .fx__grid { grid-template-columns: minmax(0, 1fr); }
  .fx__links { padding-left: 0; }
  .fx__cta { margin-inline: -24px; padding-inline: 24px; min-height: 460px; }
  .fo__card { grid-template-columns: minmax(0, 1fr); }
  .fo__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo__brand { grid-column: 1 / -1; }
  .fp { --gx: 24px; }
  .fp__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp__brand { grid-column: 1 / -1; }
  .fp__mid { flex-direction: column; }
  .fp__mid > div:last-child { text-align: left; }
  .fp__mid > div:last-child nav { justify-content: flex-start; }
  .fq__ph--1 { top: 70%; }
}
@media (max-width: 640px) {
  .fo__main, .fp__main { grid-template-columns: minmax(0, 1fr); }
  .fq__top { padding-bottom: 170px; }
  .fq__ph--3 { display: none; }
  .fq__ph--1 { left: 2%; top: auto; bottom: 14px; width: 92px; }
  .fq__ph--2 { right: 2%; top: auto; bottom: 40px; width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .fx__rib i, .fp__glow i { animation: none; } }

.mnav-on .lab { display: none; }

/* =====================================================================
   v9 · REDIZAJN — Three.js scene, grafovi i linije umjesto fotografija
   ===================================================================== */

/* ---------- HERO 3D ---------- */
.hero__3d { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 140px); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%); }
html[data-hero="3d"] .hero__pipes { display: none; }
html[data-hero="2d"] .hero__3d { display: none; }
.hero__col { z-index: 1; }
.hero__k { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 8px 16px 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, .72); border: 1px solid var(--line-08); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--text); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero__k i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(41, 128, 185, .18); }
.hero__title { text-shadow: 0 0 40px rgba(241, 241, 239, .9), 0 0 12px rgba(241, 241, 239, .8); }
.hero__scroll { position: absolute; z-index: 1; left: 50%; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero__scroll i { position: relative; width: 1px; height: 42px; overflow: hidden; background: var(--line-16); }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--blue); animation: hscroll 2.2s var(--ease) infinite; }
@keyframes hscroll { to { top: 100%; } }

/* ---------- OBJEKT 3D ---------- */
.o3 { position: relative; background: linear-gradient(180deg, var(--bg) 0%, #ebeff1 18%, #ebeff1 82%, var(--bg) 100%); }
.o3__track { position: relative; height: 430vh; }
.o3__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.o3__canvas { position: absolute; inset: 0; }
.o3__ui { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.o3__txt { display: flex; flex-direction: column; gap: 24px; width: min(440px, 100%); pointer-events: auto; }
.o3__chs { position: relative; height: 330px; }
.o3__ch { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.o3__ch.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.o3__n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.o3__ch h3 { font-size: clamp(36px, 4.2vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.o3__ch p { font-size: 17px; line-height: 1.5; color: var(--text); }
.o3__ch a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500; transition: background-color .25s; }
.o3__ch a:hover { background: var(--blue); }
.o3__ch a .na { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.o3__ch a:hover .na { transform: rotate(45deg); }
.o3__nav { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.o3__nav button { padding: 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line-10); font-size: 13px; font-weight: 500; color: var(--text); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .25s, color .25s, border-color .25s; }
.o3__nav button:hover { color: var(--ink); border-color: var(--line-16); }
.o3__nav button.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.o3__bar { position: absolute; left: -26px; top: -360px; width: 2px; height: 340px; border-radius: 2px; background: var(--line-10); overflow: hidden; }
.o3__bar i { position: absolute; inset: 0; background: var(--blue); transform-origin: 50% 0; transform: scaleY(0); }
.o3__note { position: absolute; right: max(24px, calc((100% - 1440px) / 2 + 64px)); bottom: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }

/* ---------- RAZLOZI · linije umjesto fotografija ---------- */
.nr__card { background: radial-gradient(120% 90% at 80% 10%, #1c3445 0%, #0a0a0b 60%); }
.nr__vis { position: absolute; inset: 0; z-index: -2; opacity: .45; transition: opacity .8s; }
.nr__vis .hlines { position: absolute; inset: 0; }
.nr__card.is-on .nr__vis { opacity: .9; }
.nr__card::after { background: linear-gradient(180deg, rgba(10, 10, 11, 0) 30%, rgba(10, 10, 11, .78)); }

/* ---------- PODRUČJA · linijske ilustracije ---------- */
.np__tile { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 0%, #1c3445 0%, #0a0a0b 62%); opacity: 0; transform: scale(1.04); transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
.np__tile.is-on { opacity: 1; transform: none; }
.np__tile .hlines { position: absolute; inset: 0; }
.np__cap { position: absolute; left: 18px; bottom: 16px; padding: 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- USLUGE · ilustracija u praznom okviru ---------- */
.tabs__art { position: relative; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #fff 0%, #f3f6f8 100%); }
.tabs__3d { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.tabs__3d.is-drag { cursor: grabbing; }
.tabs__artk { position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- SLOJEVI · linije + generirani termogram ---------- */
.ns__card { background: radial-gradient(110% 120% at 85% 0%, #1c3445 0%, #0a0a0b 58%); }
div.ns__bg { position: absolute; inset: 0; z-index: -2; opacity: .55; }
div.ns__bg .hlines { position: absolute; inset: 0; }
.ns__card::after { background: linear-gradient(90deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, .4) 55%, rgba(10, 10, 11, .1)); }
.ns__th { background: #0d1c25; }
.ns__th canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ns__th i { z-index: 1; }

/* ---------- POSTUPAK · graf koraka ---------- */
.nk__vis { margin: 24px 0 0; padding: 16px 16px 8px; border-radius: 20px; background: #fff; border: 1px solid var(--line-08); box-shadow: var(--shadow); }
.nk__vh { display: flex; justify-content: space-between; font-size: 14px; }
.nk__vh span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--blue); }
.nk__vis svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr__grid line { stroke: rgba(10, 10, 11, .06); stroke-width: 1; }
.tr__base { fill: none; stroke: var(--line-10); stroke-width: 2; stroke-linejoin: round; }
.tr__ln { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s linear; }
.tr__dot { fill: #fff; stroke: rgba(10, 10, 11, .25); stroke-width: 2; transition: fill .35s, stroke .35s; }
.tr__halo { fill: rgba(41, 128, 185, .12); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .35s; }
.tr__pt text { font-family: var(--mono); font-size: 11px; text-anchor: middle; fill: var(--muted); transition: fill .35s; }
.tr__pt.is-done .tr__dot { fill: var(--blue); stroke: var(--blue); }
.tr__pt.is-on .tr__dot { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.tr__pt.is-on .tr__halo { opacity: 1; animation: trpulse 1.8s ease-out infinite; }
.tr__pt.is-on text, .tr__pt.is-done text { fill: var(--ink); }
@keyframes trpulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- DOSEG · 3D karta ---------- */
.nd__3d { position: absolute; inset: 0; cursor: crosshair; }
.nd__pin { z-index: 2; transform: translate(12px, -50%); margin-left: 0; }

/* ---------- REFERENCE · kartice s ikonama ---------- */
.nf__card { justify-content: flex-end; border: 1px solid transparent; }
.nf__card--ink { background: radial-gradient(120% 90% at 80% 0%, #1c3445 0%, #0a0a0b 60%); }
.nf__card--blue { background: radial-gradient(120% 100% at 80% 0%, #439bd6 0%, #2980b9 50%, #205a81 100%); }
.nf__card--white { background: #fff; border-color: var(--line-10); color: var(--ink); }
.nf__lines { position: absolute; inset: 0; z-index: -1; opacity: .5; transition: opacity .6s; }
.nf__lines .hlines { position: absolute; inset: 0; }
.nf__card:hover .nf__lines { opacity: .9; }
.nf__ic { position: absolute; left: 22px; top: 70px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nf__ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nf__card--white .nf__ic { background: var(--blue-soft); border-color: rgba(41, 128, 185, .15); color: var(--blue); }
.nf__card--white .nf__tag { background: var(--bg); border-color: var(--line-10); color: var(--ink); }
.nf__card--white .nf__txt span { color: var(--text); opacity: 1; }
.nf__card--white .nf__go { background: var(--ink); color: #fff; }

/* ---------- HEADER · mega kartice s ikonama ---------- */
.hm__card--ic { justify-content: flex-end; }
.hm__card--ic.hm__card--blue { background: radial-gradient(120% 120% at 90% 0%, #439bd6, #2980b9 50%, #205a81); }
.hm__card--ic.hm__card--ink { background: radial-gradient(120% 100% at 80% 0%, #233d4e 0%, #121318 60%); }
.hm__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(80% 80% at 70% 20%, #000, transparent); mask-image: radial-gradient(80% 80% at 70% 20%, #000, transparent); }
.hm__ico { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); transition: transform .6s var(--ease); }
.hm__ico svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hm__card--ic:hover .hm__ico { transform: rotate(-8deg) scale(1.06); }

/* ---------- FOOTERI N, O, Q bez fotografija ---------- */
.fx__card { background: radial-gradient(120% 120% at 80% 0%, #1c2e3a 0%, #131417 65%); }
.fo__card { background: var(--blue); }
.fo__card::after { display: none; }
.fo__dither { z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 26%, #000 62%); mask-image: linear-gradient(90deg, transparent 0, transparent 26%, #000 62%); }
.fo__side { position: relative; z-index: 1; padding: 24px; border-radius: 16px; background: rgba(41, 128, 185, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fq__ph { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 16px; text-align: left; }
.fq__ph span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.fq__ph b { font-size: clamp(18px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.fq__ph--blue { background: radial-gradient(120% 120% at 80% 0%, #439bd6, #2980b9 55%, #205a81); color: #fff; }
.fq__ph--ink { background: var(--ink); color: #fff; }
.fq__ph--white { background: #fff; border: 1px solid var(--line-10); color: var(--ink); }
.fq__ph--white span { color: var(--blue); opacity: 1; font-size: 18px; font-family: var(--font); }

@media (max-width: 980px) {
  .o3__track { height: 380vh; }
  .o3__ui { align-items: flex-end; padding-bottom: 24px; }
  .o3__txt { padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .82); border: 1px solid var(--line-08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .o3__chs { height: 230px; }
  .o3__ch h3 { font-size: 32px; }
  .o3__ch p { font-size: 15px; }
  .o3__bar { display: none; }
  .o3__note { display: none; }
}
@media (max-width: 640px) {
  .tabs__art { min-height: 320px; }
  .hero__k { margin-bottom: 16px; }
  .hero__scroll { display: none; }
  .o3__chs { height: 250px; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll i::after, .tr__pt.is-on .tr__halo { animation: none; } }

/* =====================================================================
   v9 · PARTNERI G–L (partneri.js) — partneri su IZMIŠLJENI primjeri
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* G · Fokus */
.pv-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.pv-g__stage { position: relative; min-height: 420px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 120% at 85% 10%, #439bd6 0%, #2980b9 48%, #205a81 100%); color: #fff; --logo-bg: #2980b9; }
.pv-g__big { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 32px; }
.pv-g__big > * { position: relative; }
.pv-g__big.is-in > * { animation: pvgin .8s var(--ease) both; }
.pv-g__big.is-in > :nth-child(3) { animation-delay: .08s; } .pv-g__big.is-in > :nth-child(4) { animation-delay: .16s; }
@keyframes pvgin { from { opacity: 0; transform: translateY(18px); } }
.pv-g__ghost { position: absolute !important; right: -40px; bottom: -60px; width: 360px; height: 360px; color: rgba(255, 255, 255, .1); }
.pv-g__big.is-in .pv-g__ghost { animation: pvgg 1.2s var(--ease) both; }
@keyframes pvgg { from { opacity: 0; transform: rotate(-20deg) scale(.8); } }
.pv-g__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; opacity: .85; }
.pv-g__top .ptag { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
.pv-g__big .flogo { color: #fff; font-size: clamp(34px, 4vw, 54px); }
.pv-g__svc { display: flex; flex-direction: column; gap: 12px; }
.pv-g__svc small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.pv-g__svc div { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-g__svc .ptag { background: #fff; border-color: #fff; color: var(--blue); }
.pv-g__prog { position: absolute; left: 32px; right: 32px; bottom: 16px; height: 2px; background: rgba(255, 255, 255, .25); }
.pv-g__prog i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.pv-g__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pv-g__list button { display: flex; align-items: center; width: 100%; height: 64px; padding: 0 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-08); transition: border-color .25s, box-shadow .25s, transform .3s var(--ease); }
.pv-g__list .flogo { font-size: 17px; color: rgba(10, 10, 11, .55); transition: color .25s; }
.pv-g__list button:hover .flogo, .pv-g__list button.is-on .flogo { color: var(--ink); }
.pv-g__list button.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.pv-g__list button.is-on .flogo__m { color: var(--blue); }
/* H · Okret */
.pv-h { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; perspective: 1200px; }
.pv-h__cell { height: 150px; outline: none; }
.pv-h__in { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.pv-h__cell:hover .pv-h__in, .pv-h__cell:focus-visible .pv-h__in { transform: rotateY(180deg); }
.pv-h__f, .pv-h__b { position: absolute; inset: 0; display: flex; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pv-h__f { align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line-08); }
.pv-h__f .flogo { font-size: 22px; color: rgba(10, 10, 11, .62); }
.pv-h__b { flex-direction: column; justify-content: space-between; padding: 16px; background: radial-gradient(120% 120% at 85% 10%, #439bd6, #2980b9 55%, #205a81); color: #fff; transform: rotateY(180deg); }
.pv-h__sec { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pv-h__b strong { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.pv-h__svc { font-size: 13px; opacity: .85; }
/* I · Orbita */
.pv-i { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.pv-i__orb { position: relative; height: 520px; border-radius: 20px; background: radial-gradient(60% 60% at 50% 50%, #fff 0%, #edf1f4 100%); border: 1px solid var(--line-08); overflow: hidden; }
.pv-i__core { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 190px; height: 190px; margin: -96px 0 0 -96px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 14px rgba(41, 128, 185, .05), 0 0 0 30px rgba(41, 128, 185, .035), 0 30px 60px -30px rgba(19, 42, 57, .4); }
.pv-i__core img { width: 140px; height: auto; }
.pv-i__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(41, 128, 185, .25); animation: nospin var(--t) linear infinite; }
.pv-i__ring--in { --r: 150px; --t: 50s; width: 300px; height: 300px; margin: -128px 0 0 -128px; }
.pv-i__ring--out { --r: 228px; --t: 80s; width: 456px; height: 456px; margin: -228px 0 0 -228px; animation-direction: reverse; }
.pv-i__orb:hover .pv-i__ring, .pv-i__orb:hover .pv-i__ic { animation-play-state: paused; }
.pv-i__it { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
.pv-i__ic { position: absolute; left: -30px; top: -30px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 1px solid var(--line-10); color: var(--ink); box-shadow: 0 12px 24px -14px rgba(19, 42, 57, .45); animation: nospin var(--t) linear infinite reverse; transition: background-color .25s, color .25s; }
.pv-i__ring--out .pv-i__ic { animation-direction: normal; }
.pv-i__ic svg { width: 26px; height: 26px; }
.pv-i__ic small { position: absolute; top: 100%; left: 50%; margin-top: 8px; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.pv-i__ic:hover { background: var(--blue); color: #fff; --logo-bg: var(--blue); }
.pv-i__ic:hover small { opacity: 1; }
.pv-i__side { display: flex; flex-direction: column; }
.pv-i__side div { padding: 16px 0; border-bottom: 1px solid var(--line-10); }
.pv-i__side span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.pv-i__side p { margin-top: 8px; font-size: 17px; line-height: 1.45; }
/* J · Stupci */
.pv-j { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pv-j__col { display: flex; flex-direction: column; gap: 12px; }
.pv-j__h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; }
.pv-j__h i { font-style: normal; font-family: var(--mono); font-size: 11px; color: #94c6e7; }
.pv-j__win { height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.pv-j__track { display: flex; flex-direction: column; gap: 12px; animation: pvj var(--d) linear infinite; }
.pv-j__track.is-down { animation-direction: reverse; }
.pv-j__col:hover .pv-j__track { animation-play-state: paused; }
@keyframes pvj { to { transform: translateY(-50%); } }
.pv-j__item { display: grid; place-items: center; height: 96px; flex: none; border-radius: 16px; background: #fff; border: 1px solid var(--line-08); }
.pv-j__item .flogo { font-size: 19px; color: rgba(10, 10, 11, .6); }
.pv-j__item:hover .flogo { color: var(--ink); }
/* K · Vrtuljak 3D */
.pv-k { --r: 560px; position: relative; height: 440px; perspective: 1100px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.pv-k.is-drag { cursor: grabbing; }
.pv-k__ring { position: absolute; left: 50%; top: 40px; width: 290px; height: 330px; margin-left: -128px; transform-style: preserve-3d; }
.pv-k__card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; --logo-bg: #fff; border-radius: 20px; background: #fff; border: 1px solid var(--line-08); box-shadow: 0 30px 50px -36px rgba(19, 42, 57, .5); transform: rotateY(calc(var(--i) * 30deg)) translateZ(var(--r)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pv-k__card .flogo { font-size: 28px; }
.pv-k__card span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pv-k__card:nth-child(3n + 1) { background: var(--ink); --logo-bg: var(--ink); } .pv-k__card:nth-child(3n + 1) .flogo { color: #fff; } .pv-k__card:nth-child(3n + 1) span { color: rgba(255, 255, 255, .55); }
.pv-k__card:nth-child(3n + 2) { background: var(--blue); --logo-bg: var(--blue); } .pv-k__card:nth-child(3n + 2) .flogo { color: #fff; } .pv-k__card:nth-child(3n + 2) span { color: rgba(255, 255, 255, .7); }
.pv-k__hint { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; }
/* L · Tablica */
.pv-l { border-radius: 20px; background: #fff; border: 1px solid var(--line-08); overflow: hidden; }
.pv-l__row { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.4fr) 40px; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line-08); transition: background-color .25s; }
.pv-l__row:last-child { border-bottom: 0; }
.pv-l__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); transform: scaleY(0); transition: transform .35s var(--ease); }
.pv-l__row:not(.pv-l__row--h):hover { background: #f8fafc; }
.pv-l__row:not(.pv-l__row--h):hover::before { transform: none; }
.pv-l__row--h { padding-block: 12px; background: var(--bg); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pv-l__n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pv-l__row .flogo { font-size: 18px; }
.pv-l__sec { font-size: 14px; color: var(--text); }
.pv-l__svc { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-l__go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-16); opacity: .4; transition: opacity .25s, background-color .25s, color .25s, border-color .25s; }
.pv-l__go .parr { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pv-l__row:hover .pv-l__go { opacity: 1; background: var(--blue); border-color: var(--blue); color: #fff; }

/* =====================================================================
   v9 · BROJKE B–F (brojke.js)
   ===================================================================== */
.blab { align-self: center; margin-bottom: 24px; }
.bview { width: 100%; }
.bnum { display: inline-flex; align-items: baseline; gap: .04em; font-weight: 500; line-height: .95; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bnum small { margin-right: .12em; font-size: .4em; font-weight: 500; letter-spacing: -0.01em; }
.bnum i { font-style: normal; font-size: .52em; color: var(--blue); letter-spacing: -0.02em; }
.bnum--lg { font-size: clamp(40px, 4.2vw, 60px); }
.bnum--xl { font-size: clamp(48px, 6vw, 92px); }
.bnum--xxl { font-size: clamp(64px, 8.6vw, 132px); }
/* B · Velike brojke */
.bb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-16); }
.bb__it { display: flex; flex-direction: column; gap: 24px; padding: 24px 24px 8px 0; }
.bb__it + .bb__it { padding-left: 24px; border-left: 1px solid var(--line-10); }
.bb__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bb__it p { max-width: 20ch; font-size: 16px; line-height: 1.4; color: var(--text); }
/* C · Bento */
.bc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(220px, auto)); gap: 16px; }
.bc__t { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line-08); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.bc__t p { font-size: 15px; line-height: 1.45; color: var(--text); }
.bc__t p span { color: inherit; opacity: .75; font-size: 14px; }
.bc__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bc__t--big { grid-column: 1 / 3; grid-row: 1 / 3; background: radial-gradient(120% 120% at 85% 10%, #439bd6 0%, #2980b9 50%, #205a81 100%); border-color: transparent; color: #fff; }
.bc__t--big .hlines { position: absolute; inset: 0; z-index: -1; opacity: .45; }
.bc__t--big .bnum i, .bc__t--ink .bnum i { color: #bcdbf0; }
.bc__t--big .bc__k, .bc__t--ink .bc__k { color: rgba(255, 255, 255, .65); }
.bc__t--big p, .bc__t--ink p { color: rgba(255, 255, 255, .85); }
.bc__t--big p { font-size: 18px; }
.bc__t--ink { background: var(--ink); border-color: transparent; color: #fff; }
.bc__t--soft { background: var(--blue-soft); border-color: rgba(41, 128, 185, .12); }
/* D · Brojač */
.bd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 40px 12px; border-radius: 20px; background: var(--ink); color: #fff; }
.bd__it { display: flex; flex-direction: column; gap: 16px; padding: 0 24px; }
.bd__it + .bd__it { border-left: 1px solid rgba(255, 255, 255, .12); }
.bd__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #94c6e7; }
.bd__it p { font-size: 15px; color: rgba(255, 255, 255, .7); }
.bd__num { display: inline-flex; align-items: baseline; font-size: clamp(40px, 4.6vw, 66px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.bd__num small { margin-right: .15em; font-size: .4em; }
.bd__num i { font-style: normal; font-size: .5em; color: #94c6e7; margin-left: .06em; }
.bd__col { display: inline-block; height: 1em; overflow: hidden; }
.bd__col > span { display: flex; flex-direction: column; transform: translateY(0); transition: transform 2.2s cubic-bezier(.2, .9, .2, 1) calc(var(--i) * 90ms); }
.bd__col b { display: block; height: 1em; font-weight: inherit; }
.bd.is-in .bd__col > span { transform: translateY(calc(var(--n) * -1em)); }
/* E · Vremenska crta */
.be { position: relative; height: 380px; margin: 0 40px; }
.be__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line-10); }
.be__line i { position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); transition: transform 2.4s var(--ease); }
.be.is-in .be__line i { transform: none; }
.be__ev { position: absolute; left: var(--x); top: 50%; }
.be__dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); transform: scale(0); transition: transform .6s var(--ease) calc(var(--i) * 550ms + 200ms); }
.be__ev.is-now .be__dot { background: var(--blue); box-shadow: 0 0 0 8px var(--blue-soft); }
.be.is-in .be__dot { transform: none; }
.be__card { position: absolute; left: 0; width: 240px; padding: 16px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-08); box-shadow: var(--shadow); opacity: 0; transition: opacity .6s calc(var(--i) * 550ms + 300ms), transform .8s var(--ease) calc(var(--i) * 550ms + 300ms); }
.be__ev:nth-child(odd) .be__card { bottom: 28px; transform: translate(-30px, 14px); }
.be__ev:nth-child(even) .be__card { top: 28px; transform: translate(-30px, -14px); }
.be__ev.is-now .be__card { left: auto; right: 0; background: var(--blue); color: #fff; border-color: transparent; }
.be.is-in .be__card { opacity: 1; transform: translate(-30px, 0); }
.be.is-in .be__ev.is-now .be__card { transform: translate(30px, 0); }
.be__card b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.be__card strong { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; }
.be__card p { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.be__ev.is-now .be__card p { color: rgba(255, 255, 255, .85); }
/* F · Jedna po jedna */
.bf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; }
.bf__stick { position: sticky; top: 120px; align-self: start; height: 420px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; border-radius: 20px; background: radial-gradient(120% 120% at 85% 10%, #439bd6 0%, #2980b9 50%, #205a81 100%); color: #fff; overflow: hidden; }
.bf__big { position: relative; flex: 1; }
.bf__n { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .7s var(--ease); }
.bf__n.is-on { opacity: 1; transform: none; }
.bf__n .bnum i { color: #bcdbf0; }
.bf__n p { font-size: 19px; opacity: .9; }
.bf__dots { display: flex; gap: 8px; margin-bottom: 16px; order: -1; }
.bf__dots i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); transition: background-color .3s, width .4s var(--ease); }
.bf__dots i.is-on { width: 44px; background: #fff; }
.bf__list { margin: 0; padding: 0; list-style: none; }
.bf__list li { display: flex; flex-direction: column; gap: 8px; min-height: 34vh; padding: 24px 0; border-bottom: 1px solid var(--line-10); opacity: .35; transition: opacity .4s; }
.bf__list li.is-on { opacity: 1; }
.bf__list span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.bf__list h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.035em; }
.bf__list p { font-size: 16.5px; line-height: 1.5; color: var(--text); }

/* =====================================================================
   v9 · FOOTER R · ČISTO
   ===================================================================== */
.froot > footer.fr { padding-top: 64px; background: #fafbfc; border-top: 1px solid var(--line-08); }
.fr__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; padding-bottom: 64px; }
.fr__logo { display: inline-flex; }
.fr__logo img { width: 170px; height: auto; }
.fr__brand p { max-width: 36ch; margin-top: 24px; font-size: 16px; line-height: 1.6; color: var(--text); }
.fr__ic { display: flex; gap: 8px; margin-top: 24px; }
.fr__ic a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--ink); transition: background-color .25s, color .25s; }
.fr__ic a:hover { background: var(--blue-soft); color: var(--blue); }
.fr__ic .fa { width: 20px; height: 20px; }
.fr__t { margin-bottom: 24px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fr__col ul { display: flex; flex-direction: column; gap: 16px; }
.fr__col li a { font-size: 16px; color: var(--text); transition: color .2s; }
.fr__col li a:hover { color: var(--blue); }
.fr__p { margin-bottom: 24px; font-size: 16px; line-height: 1.6; color: var(--text); }
.fr__form { display: flex; flex-direction: column; gap: 12px; }
.fr__form input { height: 52px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-10); background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.fr__form input::placeholder { color: var(--muted); }
.fr__form input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.fr__form button { height: 52px; border-radius: 8px; border: 1px solid rgba(41, 128, 185, .35); background: #fff; font-size: 16px; font-weight: 500; color: var(--ink); transition: background-color .25s, color .25s, border-color .25s; }
.fr__form button:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.fr__note { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.fr__bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px 0 32px; border-top: 1px solid var(--line-10); font-size: 15px; color: var(--text); }
.fr__bot nav { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.fr__bot a { transition: color .2s; }
.fr__bot a:hover { color: var(--blue); }

@media (max-width: 1100px) {
  .pv-h, .pv-j { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-g, .pv-i { grid-template-columns: minmax(0, 1fr); }
  .bc { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .bc__t--big { grid-row: auto; min-height: 320px; }
  .bb, .bd { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .bb__it:nth-child(3) { padding-left: 0; border-left: 0; }
  .bd__it:nth-child(3) { border-left: 0; }
  .fr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pv-l__row { grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .pv-l__sec, .pv-l__svc, .pv-l__row--h span:nth-child(3), .pv-l__row--h span:nth-child(4) { display: none; }
  .pv-i__orb { height: 400px; }
  .pv-i__ring--in { --r: 110px; width: 220px; height: 220px; margin: -96px 0 0 -96px; }
  .pv-i__ring--out { --r: 168px; width: 336px; height: 336px; margin: -168px 0 0 -168px; }
  .pv-i__core { width: 140px; height: 140px; margin: -64px 0 0 -64px; }
  .pv-i__core img { width: 104px; }
  .pv-k { --r: 330px; height: 360px; }
  .pv-k__ring { width: 180px; height: 240px; margin-left: -96px; }
  .be { height: auto; margin: 0; padding-left: 24px; }
  .be__line { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .be__line i { transform-origin: 50% 0; transform: scaleY(0); }
  .be__ev { position: relative; left: 0; top: 0; padding: 0 0 16px; }
  .be__dot { left: -27px; top: 18px; }
  .be__card, .be__ev.is-now .be__card { position: relative; left: 0; right: auto; top: auto; bottom: auto; width: auto; }
  .be.is-in .be__card, .be.is-in .be__ev.is-now .be__card { transform: none; }
  .bf { grid-template-columns: minmax(0, 1fr); }
  .bf__stick { top: 84px; height: 260px; z-index: 1; }
  .fr__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .pv-h { grid-template-columns: minmax(0, 1fr); }
  .pv-j { grid-template-columns: minmax(0, 1fr); }
  .pv-j__win { height: 220px; }
  .bb, .bd, .bc { grid-template-columns: minmax(0, 1fr); }
  .bb__it + .bb__it { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-10); }
  .bd__it + .bd__it { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px; }
  .bc__t--big { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .pv-j__track, .pv-i__ring, .pv-i__ic { animation: none; } }

/* =====================================================================
   v9 · JEDINSTVENI GUMBI (kao v4) — gumbi.js pretvara sve gumbe u ovu strukturu
   ===================================================================== */
.btn.btn { --bg: var(--ink); --fg: #fff; --hbg: var(--blue); --hfg: #fff; --ln: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--ln); font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; text-decoration: none; isolation: isolate; overflow: hidden; cursor: pointer; transition: color .4s var(--ease), transform .5s var(--ease), box-shadow .4s; }
.btn.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hbg); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn__label { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.btn__label > span { position: relative; display: inline-block; transition: transform .55s var(--ease); }
.btn__label > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
@media (hover: hover) {
  .btn.btn:hover { color: var(--hfg); box-shadow: inset 0 0 0 1px transparent; }
  .btn.btn:hover::before { transform: none; }
  .btn.btn:hover .btn__label > span { transform: translateY(-100%); }
  .btn.btn:hover .arrow-sq--in svg { transform: translate(2px, -2px) rotate(-90deg); }
}
.btn.btn:active { transform: scale(.97); }
.btn.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn.btn--blue { --bg: var(--blue); --fg: #fff; --hbg: var(--ink); }
.btn.btn--ink { --bg: var(--ink); --fg: #fff; --hbg: var(--blue); }
.btn.btn--white { --bg: #fff; --fg: var(--ink); --hbg: var(--ink); --hfg: #fff; }
.btn.btn--line { --bg: transparent; --fg: var(--ink); --hbg: var(--ink); --hfg: #fff; --ln: rgba(10, 10, 11, .18); }
.btn.btn--ghost { --bg: transparent; --fg: #fff; --hbg: #fff; --hfg: var(--ink); --ln: rgba(255, 255, 255, .35); }
.btn.btn--sm { height: 38px; padding: 0 16px; font-size: 13.5px; border-radius: 8px; }
.btn.btn--lg { height: 56px; padding: 0 24px; font-size: 16px; }
.arrow-sq { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; background: #fff; color: var(--ink); border: 1px solid var(--line-10); }
.arrow-sq svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.arrow-sq--in { width: 30px; height: 30px; margin-right: -8px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16); color: inherit; }
.btn--white .arrow-sq--in, .btn--line .arrow-sq--in { background: var(--blue); color: #fff; }
/* položaji koji su ovisili o starim klasama */
.fr__form .btn { width: 100%; }
.fq__form .btn { flex: none; border-radius: 6px; }
.tabs__btn .btn, .wpanel__btns .btn { align-self: flex-start; }
.wpanel__btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* header: boje dolaze iz varijante */
.hdr .btn.hdr__cta { --bg: var(--cb); --fg: var(--cf); --hbg: var(--ink); --hfg: #fff; height: 46px; padding: 0 16px; }
.hdr[data-v="d"].is-scrolled .btn.hdr__cta, .hdr[data-v="d"].is-open .btn.hdr__cta { --hbg: var(--blue); }
.hdr[data-v="d"] .btn.hdr__cta .arrow-sq--in { background: color-mix(in srgb, var(--blue) calc(var(--hp) * 100%), rgba(255, 255, 255, .16)); color: #fff; }
.hdr[data-v="m"] .btn.hdr__cta { height: 42px; border-radius: 8px; }
@media (max-width: 520px) { .hdr .btn.hdr__cta { width: 46px; padding: 0; } .hdr .btn.hdr__cta .btn__label { display: none; } .hdr .btn.hdr__cta .arrow-sq--in { margin: 0; } }
/* okrugli gumbi sa strelicom u karticama → kvadratić kao u v4 */
.kround { border-radius: 8px; }
a:hover > .kround img, button:hover > .kround img, .kround:hover img { transform: rotate(-90deg) !important; }

/* =====================================================================
   v9 · FONTOVI — Barlow (zadano), IBM Plex Sans; cijela stranica jednim fontom
   ===================================================================== */
html[data-font="barlow"] { --font: "Barlow", ui-sans-serif, system-ui, sans-serif; --mono: "Barlow", ui-sans-serif, sans-serif; }
html[data-font="plex"] { --font: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --mono: "IBM Plex Sans", ui-sans-serif, sans-serif; }
html:is([data-font="barlow"], [data-font="plex"]) body :not(.flogo__w, .flogo__w *, svg, svg *) { font-family: var(--font) !important; }
html[data-font="barlow"] :is(.h72, .nx-h, .hero__title, .cta__h, .o3__ch h3, .fx__h, .fo__h, .fq__h, .fh__h, .fr__t) { font-weight: 600; letter-spacing: -0.025em; }
html[data-font="barlow"] :is(.bnum, .kcard__val, .nt__cap strong, .np__body h3, .nk__st h3, .ns__l h3) { font-weight: 600; letter-spacing: -0.02em; }
html[data-font="plex"] :is(.h72, .nx-h, .hero__title, .cta__h, .o3__ch h3, .fx__h, .fo__h, .fq__h, .fh__h, .fr__t) { font-weight: 500; letter-spacing: -0.035em; }
html[data-font="plex"] :is(.bnum, .kcard__val, .np__body h3, .nk__st h3, .ns__l h3) { font-weight: 500; letter-spacing: -0.03em; }

/* =====================================================================
   v9 · POZADINA #FFFFFF + HERO DIZAJNI (html[data-hero]: 3d · 2d · split · tipo · kartica · zapis)
   ===================================================================== */
html[data-page="white"] body { background: #fff; }
html[data-page="white"] .o3 { background: linear-gradient(180deg, #fff 0%, #f0f4f6 18%, #f0f4f6 82%, #fff 100%); }
html[data-page="white"] .kcard, html[data-page="white"] .wcard, html[data-page="white"] .tabs__menu, html[data-page="white"] .tabs__text { border-color: var(--line-10); }
.hero { background: #fff; }
.hero__title { text-shadow: 0 0 40px rgba(255, 255, 255, .95), 0 0 12px rgba(255, 255, 255, .9); }
.hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero__main { display: flex; flex-direction: column; align-items: center; }
.hero__lead { max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--text); }
.hero__stats { display: flex; gap: 40px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line-10); }
.hero__stats dt { font-size: 13px; color: var(--muted); }
.hero__stats dd { margin: 4px 0 0; font-size: 32px; font-weight: 600; letter-spacing: -0.03em; }
.hero__stats dd i { font-style: normal; font-size: .55em; color: var(--blue); }
.hero__side, .hero__svc, .hero__dith, .hero__lead, .hero__stats { display: none; }
.hero__dith { position: absolute; inset: 86px 16px 16px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 120% at 85% 10%, #439bd6 0%, #2980b9 50%, #205a81 100%); }
.hero__dith .dither { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 0, transparent 30%, #000 70%); }
.hero__obj { position: relative; height: 100%; min-height: 520px; border-radius: 20px; background: radial-gradient(90% 80% at 50% 40%, #fff 0%, #f2f5f7 100%); border: 1px solid var(--line-08); overflow: hidden; }
.hero__objc { position: absolute; inset: 0; }
.hero__objk { position: absolute; left: 20px; bottom: 18px; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; }
.hero__zap { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line-10); box-shadow: 0 40px 80px -50px rgba(19, 42, 57, .45); }
.hero__zh { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.hero__zh span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.hero__zh i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: fpulse 2s ease-out infinite; }
.hero__zc { position: relative; height: 300px; border-radius: 16px; background: #f7f9fa; overflow: hidden; }
.hero__zc canvas { display: block; width: 100%; height: 100%; }
.hero__zr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero__zr div { padding: 12px 16px; border-radius: 8px; background: #f7f9fa; }
.hero__zr small { display: block; font-size: 12px; color: var(--muted); }
.hero__zr b { font-size: 17px; font-weight: 600; }
.hero__zr b.is-ok { color: var(--blue); }
.hero__svc { position: relative; z-index: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 64px; }
.hero__svc a { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--line-10); transition: border-color .3s, transform .5s var(--ease), box-shadow .4s; }
.hero__svc a span { font-size: 13px; color: var(--blue); }
.hero__svc a b { margin-top: 16px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.hero__svc a small { font-size: 14px; color: var(--text); }
.hero__svc a:hover { border-color: var(--blue); transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(41, 128, 185, .45); }

/* 3d / 2d: kao dosad (centrirano), samo na bijeloj podlozi */
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="kartica"], [data-hero="zapis"]) :is(.hero__3d, .hero__pipes) { display: none; }
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="zapis"], [data-hero="kartica"]) .hero { min-height: 100vh; min-height: 100svh; padding-top: 128px; padding-bottom: 80px; justify-content: center; }
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="zapis"], [data-hero="kartica"]) :is(.hero__main, .hero__col) { align-items: flex-start; text-align: left; }
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="zapis"], [data-hero="kartica"]) .hero__title { text-align: left; }
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="zapis"], [data-hero="kartica"]) .hero__title br { display: none; }
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="zapis"], [data-hero="kartica"]) :is(.hero__lead, .hero__stats) { display: block; }
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="zapis"], [data-hero="kartica"]) .hero__stats { display: flex; }
html:is([data-hero="split"], [data-hero="zapis"]) .hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
html:is([data-hero="split"], [data-hero="zapis"]) .hero__side { display: block; }
html[data-hero="split"] .hero__zap, html[data-hero="zapis"] .hero__obj { display: none; }
html:is([data-hero="split"], [data-hero="zapis"]) .hero__title { font-size: clamp(2.6rem, 4.6vw, 68px); }
/* tipo: golema tipografija + usluge */
html[data-hero="tipo"] .hero { background: #fff linear-gradient(var(--line-08) 1px, transparent 1px) 0 0 / 100% 96px; }
html[data-hero="tipo"] .hero__title { max-width: 17ch; font-size: clamp(2.8rem, 6.6vw, 100px); line-height: .95; }
html[data-hero="tipo"] .hero { padding-top: 128px; }
html[data-hero="tipo"] .hero__svc { margin-top: 40px; }
html[data-hero="tipo"] .hero__in { align-items: stretch; }
html[data-hero="tipo"] .hero__svc { display: grid; }
html[data-hero="tipo"] .hero__stats { display: none; }
/* kartica: plava kartica s dither animacijom */
html[data-hero="kartica"] .hero__dith { display: block; }
html[data-hero="kartica"] .hero__in { padding-inline: 40px; }
html[data-hero="kartica"] :is(.hero__title, .hero__lead, .hero__stats dd) { color: #fff; text-shadow: none; }
html[data-hero="kartica"] .hero__lead { color: rgba(255, 255, 255, .85); }
html[data-hero="kartica"] .hero__stats { border-color: rgba(255, 255, 255, .25); }
html[data-hero="kartica"] .hero__stats dt { color: rgba(255, 255, 255, .7); }
html[data-hero="kartica"] .hero__stats dd i { color: #bcdbf0; }
html[data-hero="kartica"] .hero__k { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
html[data-hero="kartica"] .hero__k i { background: #fff; }
html[data-hero="kartica"] .hero .btn--blue { --bg: #fff; --fg: var(--ink); --hbg: var(--ink); --hfg: #fff; }
html[data-hero="kartica"] .hero .btn--blue .arrow-sq--in { background: var(--blue); color: #fff; }
html[data-hero="kartica"] .hero .btn--line { --fg: #fff; --ln: rgba(255, 255, 255, .4); --hbg: #fff; --hfg: var(--ink); }
html[data-hero="kartica"] .hero__scroll { color: rgba(255, 255, 255, .7); }
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="zapis"]) .hero__scroll { display: none; }
@media (max-width: 980px) {
  html:is([data-hero="split"], [data-hero="zapis"]) .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__obj { min-height: 360px; }
  html[data-hero="tipo"] .hero__svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__stats { gap: 24px; flex-wrap: wrap; }
  html[data-hero="kartica"] .hero__in { padding-inline: 16px; }
}
@media (max-width: 640px) {
  html[data-hero="tipo"] .hero__svc { grid-template-columns: minmax(0, 1fr); }
  .hero__stats dd { font-size: 26px; }
  .hero__zc { height: 220px; }
}

/* =====================================================================
   v9 · ČAROBNJAK "ŠTO TREBATE?" — 3D objekt + oznaka preporuke
   ===================================================================== */
.wsteps__art { position: relative; overflow: hidden; height: 300px; }
@media (max-width: 1100px) { .wsteps__art { height: 260px; } }
.wiz3d { position: absolute; inset: 0; }
.wiz3d__cap { position: absolute; left: 14px; bottom: 12px; padding: 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line-08); font-size: 12.5px; font-weight: 500; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wiz3d__badge { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; max-width: 190px; padding: 12px 12px; border-radius: 16px; background: var(--blue); color: #fff; box-shadow: 0 20px 40px -20px rgba(41, 128, 185, .7); opacity: 0; transform: translateY(-10px) scale(.92); transform-origin: 100% 0; pointer-events: none; transition: opacity .35s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.wiz3d__badge.is-on { opacity: 1; transform: none; transition-delay: .35s; }
.wiz3d__badge small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.wiz3d__badge strong { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.wiz3d__badge em { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .2); font-style: normal; font-size: 11.5px; }
.wiz3d__badge em[hidden] { display: none; }
.wpanel.is-in > * { animation: npin .6s var(--ease) both; }
.wpanel.is-in > :nth-child(2) { animation-delay: .05s; } .wpanel.is-in > :nth-child(3) { animation-delay: .1s; } .wpanel.is-in > :nth-child(4) { animation-delay: .15s; }
@media (max-width: 760px) { .hero__dith .dither { opacity: .55; -webkit-mask-image: linear-gradient(200deg, #000 0, transparent 38%); mask-image: linear-gradient(200deg, #000 0, transparent 38%); } }

/* =====================================================================
   v9 · O NAMA (tekst se popunjava pri skrolu) + brojke E kao zadane
   ===================================================================== */
.onama { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 1060px; margin: 40px auto 96px; text-align: center; }
.onama__t { font-size: clamp(28px, 3.4vw, 50px); font-weight: 500; line-height: 1.18; letter-spacing: -0.02em; }
.fw { --f: 0; color: color-mix(in srgb, var(--ink) calc(var(--f) * 100%), #cfd2da); transition: color .15s linear; }
.onama__a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--blue); }
.onama__a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.onama__a:hover svg { transform: rotate(45deg); }
.blab[hidden] { display: none !important; }

/* ---------- HERO · plava kartica + 3D cijevi ---------- */
html[data-hero="kartica3d"] .hero__pipes { display: none; }
html[data-hero="kartica3d"] .hero__dith { display: block; background: radial-gradient(110% 120% at 50% 0%, #3895d3 0%, #2980b9 45%, #236089 100%); }
html[data-hero="kartica3d"] .hero__dith .dither { display: none; }
html[data-hero="kartica3d"] .hero__3d { inset: 86px 16px 16px; height: auto; border-radius: 20px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
html[data-hero="kartica3d"] .hero { min-height: 100vh; min-height: 100svh; }
html[data-hero="kartica3d"] :is(.hero__title, .hero__lead) { color: #fff; text-shadow: 0 2px 30px rgba(25, 69, 98, .55); }
html[data-hero="kartica3d"] .hero__k { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
html[data-hero="kartica3d"] .hero__k i { background: #fff; }
html[data-hero="kartica3d"] .hero .btn--blue { --bg: #fff; --fg: var(--ink); --hbg: var(--ink); --hfg: #fff; }
html[data-hero="kartica3d"] .hero .btn--blue .arrow-sq--in { background: var(--blue); color: #fff; }
html[data-hero="kartica3d"] .hero .btn--line { --fg: #fff; --ln: rgba(255, 255, 255, .45); --hbg: #fff; --hfg: var(--ink); }
html[data-hero="kartica3d"] .hero__scroll { color: rgba(255, 255, 255, .75); }
html[data-hero="kartica3d"] .hero__scroll i { background: rgba(255, 255, 255, .3); }
html[data-hero="kartica3d"] .hero__scroll i::after { background: #fff; }

/* =====================================================================
   v9 · HEADER PO SITEMAPU — Naslovna · Usluge (mega) · Reference · O nama · Kontakt · HR/EN · CTA
   ===================================================================== */
.hdr__lnk.is-act { color: var(--blue); }
.hdr__lnk.is-act::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2px; border-radius: 2px; background: currentColor; }
.hdr__lang { display: inline-flex; align-items: center; padding: 4px; border-radius: 8px; background: color-mix(in srgb, currentColor 7%, transparent); font-size: 13px; font-weight: 600; }
.hdr__lang a { padding: 8px 8px; border-radius: 6px; opacity: .55; transition: opacity .2s, background-color .2s; }
.hdr__lang a:hover { opacity: 1; }
.hdr__lang a[aria-current="true"] { opacity: 1; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10, 10, 11, .12); }
.hm__panel--usl { display: none; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.hm__panel--usl.is-on { display: grid; }
.hm__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm__col { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, currentColor 4%, transparent); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease) calc(var(--i) * 60ms + 80ms), transform .6s var(--ease) calc(var(--i) * 60ms + 80ms); }
.hdr.is-open .hm__panel.is-on .hm__col { opacity: 1; transform: none; }
.hm__area { display: flex; gap: 12px; padding: 12px; border-radius: 8px; transition: background-color .25s; }
.hm__area:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.hm__ai { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 8px; background: var(--blue); color: #fff; }
.hm__ai svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hm__area > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.hm__area small { font-size: 11px; opacity: .55; }
.hm__area b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.hm__area em { font-style: normal; font-size: 13px; opacity: .65; }
.hm__col ul { display: flex; flex-direction: column; padding: 0 4px 8px; }
.hm__col li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 8px 8px; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); transition: color .2s, padding-left .35s var(--ease); }
.hm__col li a b { font-size: 14.5px; font-weight: 500; }
.hm__col li a small { grid-column: 1; font-size: 12.5px; opacity: .6; }
.hm__col li a .ha { grid-row: 1 / 3; grid-column: 2; align-self: center; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease); }
.hm__col li a:hover { color: var(--hm-acc, #94c6e7); padding-left: 12px; }
.hm__col li a:hover .ha { opacity: 1; transform: none; }
.hm__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); font-size: 14px; opacity: .9; }
.hm__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--hm-acc, #94c6e7); }
.hm__all:hover .ha { transform: rotate(45deg); }
.mnav__dd summary { display: flex; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: clamp(32px, 9vw, 52px); font-weight: 500; letter-spacing: -0.04em; list-style: none; cursor: pointer; }
.mnav__dd summary::-webkit-details-marker { display: none; }
.mnav__dd summary span { font-size: 12px; letter-spacing: 0; color: #94c6e7; }
.mnav__dd summary .hc { width: 26px; height: 26px; margin-left: auto; align-self: center; }
.mnav__dd[open] summary .hc { transform: rotate(180deg); }
.mnav__dd { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.mnav-on .mnav__dd { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms + 200ms); }
.mnav__areas { display: flex; flex-direction: column; padding: 12px 0 16px 24px; }
.mnav__area { padding: 8px 0; font-size: 18px; font-weight: 600; }
.mnav__subl { padding: 4px 0 4px 16px; font-size: 15px; opacity: .7; }
.mnav__all { color: #94c6e7; }
.mnav__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.hdr__lang--m { color: #fff; }
.hdr__lang--m a[aria-current="true"] { color: var(--ink); }
@media (max-width: 1023px) { .hdr__end .hdr__lang { display: none; } }

/* =====================================================================
   v9 · FOOTER R PO SITEMAPU — bijeli (zadano) / crni (Lab → Footer)
   ===================================================================== */
.froot > footer.fr { background: #fff; }
.fr__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1.1fr); }
.fr__brand p span { color: var(--blue); font-weight: 600; }
.fr__cert { margin-top: 32px; }
.fr__t--s { margin-bottom: 12px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fr__cert ul { display: flex; flex-wrap: wrap; gap: 8px; }
.fr__cert li { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line-16); font-size: 13.5px; font-weight: 500; }
.fr__usl { gap: 8px !important; }
.fr__usl li a { font-size: 15px; }
.fr__usl .fr__area { margin-top: 12px; }
.fr__usl .fr__area:first-child { margin-top: 0; }
.fr__usl .fr__area a { font-weight: 600; color: var(--ink); }
.fr__usl li:not(.fr__area) a { padding-left: 12px; border-left: 1px solid var(--line-16); }
.fr__kon li a { display: flex; flex-direction: column; gap: 2px; color: var(--ink) !important; }
.fr__kon small { font-size: 12.5px; color: var(--muted); }
.fr__kon li a:hover { color: var(--blue) !important; }
html[data-foot="dark"] .froot > footer.fr { background: #0a0a0b; border-top-color: transparent; color: #fff; }
html[data-foot="dark"] .fr__logo { padding: 8px 12px; border-radius: 8px; background: #fff; }
html[data-foot="dark"] .fr__brand p, html[data-foot="dark"] .fr__col li a { color: rgba(255, 255, 255, .68); }
html[data-foot="dark"] .fr__brand p span { color: #94c6e7; }
html[data-foot="dark"] .fr__t { color: #fff; }
html[data-foot="dark"] .fr__t--s, html[data-foot="dark"] .fr__kon small { color: rgba(255, 255, 255, .45); }
html[data-foot="dark"] .fr__cert li { border-color: rgba(255, 255, 255, .2); color: #fff; }
html[data-foot="dark"] .fr__usl .fr__area a, html[data-foot="dark"] .fr__kon li a { color: #fff !important; }
html[data-foot="dark"] .fr__usl li:not(.fr__area) a { border-color: rgba(255, 255, 255, .18); }
html[data-foot="dark"] .fr__col li a:hover, html[data-foot="dark"] .fr__kon li a:hover { color: #94c6e7 !important; }
html[data-foot="dark"] .fr__bot { border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); }
html[data-foot="dark"] .fr__bot a:hover { color: #fff; }
@media (max-width: 1100px) { .fr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fr__grid { grid-template-columns: minmax(0, 1fr); } }
html[data-hero="kartica3d"] .hero__3d { z-index: 1; }
html[data-hero="kartica3d"] .hero__in, html[data-hero="kartica3d"] .hero__scroll { z-index: 2; }
.mnav__links .mnav__areas a { display: block; padding: 8px 0; border: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; opacity: 1; transform: none; transition: color .2s; }
.mnav__links .mnav__areas a.mnav__subl { padding: 4px 0 4px 16px; font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.mnav__links .mnav__areas a.mnav__all { margin-top: 8px; color: #94c6e7; }

/* =====================================================================
   v9 · HERO OZNAKA (html[data-htag]) i HERO NASLOV (h1[data-v])
   ===================================================================== */
.hero__k[hidden] { display: none !important; }
/* crta */
.hk--crta { padding: 0 !important; background: none !important; border: 0 !important; backdrop-filter: none !important; gap: 12px !important; font-size: 14px !important; letter-spacing: .02em !important; color: var(--ink) !important; }
.hk__line { width: 44px; height: 2px; border-radius: 2px; background: var(--blue); transform-origin: 0 50%; animation: hkline 1.2s var(--ease) both .2s; }
@keyframes hkline { from { transform: scaleX(0); } }
/* znak + podnaslov */
.hk--znak { gap: 12px !important; padding: 8px 16px 8px 8px !important; font-size: 14px !important; letter-spacing: 0 !important; color: var(--ink) !important; background: #fff !important; box-shadow: 0 10px 24px -16px rgba(19, 42, 57, .4); }
.hk--znak img { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--blue-soft); object-fit: contain; }
/* područja */
.hk--podrucja { gap: 8px !important; padding: 0 !important; background: none !important; border: 0 !important; backdrop-filter: none !important; }
.hk--podrucja span { padding: 8px 12px; border-radius: 8px; background: var(--blue-soft); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--blue); opacity: 0; transform: translateY(8px); animation: hkin .7s var(--ease) forwards; }
.hk--podrucja span:nth-child(2) { animation-delay: .08s; } .hk--podrucja span:nth-child(3) { animation-delay: .16s; } .hk--podrucja span:nth-child(4) { animation-delay: .24s; }
@keyframes hkin { to { opacity: 1; transform: none; } }
/* mjerilo */
.hk--mjerilo { gap: 12px !important; padding: 8px 16px !important; border-radius: 8px !important; font-size: 13px !important; color: var(--ink) !important; }
.hk--mjerilo b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hk__ticks { width: 54px; height: 10px; background: repeating-linear-gradient(90deg, var(--blue) 0 1.5px, transparent 1.5px 6px); -webkit-mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, .35)); mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, .35)); }
.hk__dash { position: relative; width: 70px; height: 2px; background: var(--line-16); overflow: hidden; }
.hk__dash::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; animation: hkline 1.8s var(--ease) both .3s; }
/* pečat */
.hk--pecat { position: relative; width: 92px; height: 92px; padding: 0 !important; justify-content: center; border-radius: 50% !important; background: #fff !important; box-shadow: 0 14px 30px -18px rgba(19, 42, 57, .5); }
.hk--pecat svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: nospin 18s linear infinite; }
.hk--pecat text { font-size: 9.6px; font-weight: 600; letter-spacing: .16em; fill: var(--blue); }
.hk--pecat b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
/* na plavoj kartici */
html:is([data-hero="kartica"], [data-hero="kartica3d"]) :is(.hk--crta, .hk--mjerilo b, .hk--znak) { color: #fff !important; }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) .hk__line, html:is([data-hero="kartica"], [data-hero="kartica3d"]) .hk__dash::after { background: #fff; }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) .hk--znak { background: rgba(255, 255, 255, .14) !important; box-shadow: none; }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) .hk--podrucja span { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- naslovi ---------- */
.ht__mute { color: var(--text); }
.ht__it { font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--text); }
.ht__out { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.ht__out .sw__i { transition: transform 1.05s var(--ease) var(--d, 0ms), color .5s; }
.hero__title:hover .ht__out .sw__i { color: var(--blue); -webkit-text-stroke-color: var(--blue); }
.ht__mark { position: relative; color: var(--blue); white-space: nowrap; }
.ht__mark svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .22em; overflow: visible; }
.ht__mark path { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .7s; }
.hero__title.is-in .ht__mark path { stroke-dashoffset: 0; }
.ht__hl { position: relative; display: inline-block; padding: 0 .14em; color: #fff; isolation: isolate; }
.ht__hl::before { content: ""; position: absolute; inset: .08em 0 .02em; z-index: -1; border-radius: .12em; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease) .55s; }
.hero__title.is-in .ht__hl::before { transform: none; }
.ht__hl .sw__i { color: var(--ink); transition: transform 1.05s var(--ease) var(--d, 0ms), color .4s .85s; }
.hero__title.is-in .ht__hl .sw__i { color: #fff; }
.ht__rot { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; color: var(--blue); text-align: left; }
.ht__rot > span { grid-area: 1 / 1; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform .7s var(--ease), opacity .4s; }
.ht__rot > span.is-on { transform: none; opacity: 1; }
.ht__rot > span.is-out { transform: translateY(-105%); opacity: 0; }
.ht__rot .sw { overflow: visible; }
.ht__rot .sw__i { transform: none !important; }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) :is(.ht__mute, .ht__it) { color: rgba(255, 255, 255, .7); }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) .ht__out { -webkit-text-stroke-color: #fff; }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) :is(.ht__mark, .ht__rot) { color: #bcdbf0; }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) .ht__mark path { stroke: #fff; }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) .ht__hl::before { background: #fff; }
html:is([data-hero="kartica"], [data-hero="kartica3d"]) .hero__title.is-in .ht__hl .sw__i { color: var(--blue); }
.hero__title[data-v]:not([data-v="standard"]) { max-width: 1060px; }
.hero__col:has(.hero__title[data-v]:not([data-v="standard"])) { max-width: 1060px; }
.hero__title[data-v="marker"], .hero__title[data-v="marker"] .sw__i { text-shadow: none; }
.ht__rot { display: grid; justify-items: var(--rot-j, center); }
html:is([data-hero="split"], [data-hero="tipo"], [data-hero="zapis"], [data-hero="kartica"]) .ht__rot { --rot-j: start; }
.hero__title[data-v="izmjena"] br { display: none; }

/* =====================================================================
   v9 · HEADER v3 (staklo) — usklađen s v9: plavo umjesto žutog, Barlow, gumbi v4, navigacija po sitemapu
   ===================================================================== */
.hdr__brand3 { display: none; align-items: center; gap: 12px; flex: none; }
.hdr__brand3 img { width: 44px; height: auto; transition: background-color .3s, padding .3s; border-radius: 8px; }
.hdr__brand3 span { font-size: 15px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.hdr[data-v="v3"] { padding: 12px max(12px, calc((100% - 1440px) / 2 + 40px)) 0; }
.hdr[data-v="v3"] .hdr__bg { display: none; }
.hdr[data-v="v3"] .hdr__logo { display: none; }
.hdr[data-v="v3"] .hdr__brand3 { display: flex; }
.hdr[data-v="v3"] .hdr__in { --h: 60px; max-width: 1360px; margin: 0 auto; padding: 0 12px 0 16px; border: 1px solid transparent; border-radius: 16px; transition: background-color .4s, border-color .4s, box-shadow .4s; }
.hdr[data-v="v3"].is-scrolled .hdr__in { background: rgba(255, 255, 255, .78); border-color: var(--line-10); box-shadow: 0 10px 30px -18px rgba(11, 12, 14, .25); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); }
.hdr[data-v="v3"].is-open { --fg: #f2f1ec; }
.hdr[data-v="v3"].is-open .hdr__in { background: rgba(14, 15, 18, .86); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.hdr[data-v="v3"].is-open .hdr__brand3 img { padding: 4px 4px; background: #fff; }
.hdr[data-v="v3"] .hdr__lang { padding: 4px; border-radius: 6px; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.hdr[data-v="v3"] .hdr__lang a { border-radius: 6px; }
.hdr[data-v="v3"] .btn.hdr__cta { --hbg: var(--ink); height: 42px; border-radius: 8px; }
.hdr[data-v="v3"].is-open .btn.hdr__cta { --hbg: #fff; --hfg: var(--ink); }
.hdr[data-v="v3"] .hm { max-width: 1360px; margin: 8px auto 0; border-radius: 16px; background: rgba(14, 15, 18, .96); color: #f2f1ec; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .5); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.hdr:not([data-v="v3"]) .hm__panel--v3, .hdr[data-v="v3"] .hm__panel--usl { display: none !important; }
.hm__panel--v3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .85fr); gap: 12px; padding: 24px !important; }
.m3__t { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 241, 236, .5); }
.m3__areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.m3__areas .m3__t { grid-column: 1 / -1; }
.m3__area { display: grid; gap: 4px; padding: 16px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09); opacity: 0; transform: translateY(12px); transition: background-color .3s, border-color .3s, opacity .5s var(--ease) calc(var(--i) * 50ms + 100ms), transform .6s var(--ease) calc(var(--i) * 50ms + 100ms); }
.hdr.is-open .m3__area { opacity: 1; transform: none; }
.m3__area:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); }
.m3__n { font-size: 12px; font-weight: 600; color: #94c6e7; }
.m3__area .m3__n { margin-bottom: 16px; }
.m3__area strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.m3__area > span:last-child { font-size: 13px; color: rgba(242, 241, 236, .55); }
.m3__subs { display: flex; flex-direction: column; padding: 0 8px; }
.m3__subs ul { display: grid; margin-top: 8px; }
.m3__subs a { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14px; color: rgba(242, 241, 236, .85); transition: color .2s, padding-left .4s var(--ease); }
.m3__subs a span:last-child { display: flex; flex-direction: column; }
.m3__subs a small { font-size: 12px; color: rgba(242, 241, 236, .45); }
.m3__subs a:hover { color: #fff; padding-left: 8px; }
.m3__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; color: #94c6e7 !important; border: 0 !important; }
.m3__cta { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; border-radius: 8px; background: var(--blue); color: #fff; }
.m3__cta .m3__t { color: rgba(255, 255, 255, .7); }
.m3__cta strong { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.m3__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #fff; color: var(--blue); transition: transform .5s var(--ease); }
.m3__cta:hover .m3__go { transform: rotate(45deg); }

/* =====================================================================
   v9 · O NAMA + BROJKE — dizajni (html[data-onama])
   ===================================================================== */
.oc, .oq__mark, .oq__sig { display: none; }
.onama { position: relative; }
/* vremenska crta okomito (podijeljeno) */
.be.be--v { height: auto; margin: 0; padding-left: 32px; }
.be--v .be__line { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
.be--v .be__line i { transform-origin: 50% 0; transform: scaleY(0); }
.be--v.is-in .be__line i { transform: none; }
.be--v .be__ev { position: relative; left: 0 !important; top: 0; padding: 0 0 16px; }
.be--v .be__dot { left: -30px; top: 20px; }
.be--v .be__card, .be--v .be__ev.is-now .be__card { position: relative; left: 0; right: auto; top: auto; bottom: auto; width: auto; transform: none !important; }
/* podijeljeno */
html[data-onama="podijeljeno"] .stat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
html[data-onama="podijeljeno"] .onama { grid-row: 1 / 4; position: sticky; top: 120px; align-items: flex-start; margin: 0; text-align: left; }
html[data-onama="podijeljeno"] .stat__head { align-items: flex-start; text-align: left; padding-bottom: 32px; }
html[data-onama="podijeljeno"] .bview { grid-column: 2; }
/* manifest */
html[data-onama="manifest"] .onama { align-items: flex-start; max-width: none; text-align: left; }
html[data-onama="manifest"] .onama__t { font-size: clamp(36px, 5vw, 76px); line-height: 1.06; letter-spacing: -0.035em; }
html[data-onama="manifest"] .onama__a { align-self: flex-end; }
.fw--k { border-radius: .18em; transition: color .15s linear, background-color .4s, padding .4s var(--ease); }
html[data-onama="manifest"] .fw--k { padding: 0 .08em; background: color-mix(in srgb, var(--blue-soft) calc(var(--f) * 100%), transparent); color: color-mix(in srgb, var(--blue) calc(var(--f) * 100%), #cfd2da); }
/* tamno */
html[data-onama="tamno"] .stat { margin: 0 16px; padding-top: 96px; padding-bottom: 96px; border-radius: 20px; background: radial-gradient(90% 60% at 50% 0%, #1b2e3a 0%, #0a0a0b 60%); color: #fff; }
html[data-onama="tamno"] .fw { color: color-mix(in srgb, #fff calc(var(--f) * 100%), #34373f); }
html[data-onama="tamno"] .onama__a, html[data-onama="tamno"] .stat .eyebrow { color: #94c6e7; }
html[data-onama="tamno"] .stat .eyebrow i { background: #94c6e7; }
html[data-onama="tamno"] .stat .lead17 { color: rgba(255, 255, 255, .6); }
html[data-onama="tamno"] .be__line { background: rgba(255, 255, 255, .12); }
html[data-onama="tamno"] .be__line i { background: #94c6e7; }
html[data-onama="tamno"] .be__dot { background: #0a0a0b; border-color: #94c6e7; }
html[data-onama="tamno"] .be__card { background: #16171c; border-color: rgba(255, 255, 255, .08); box-shadow: none; color: #fff; }
html[data-onama="tamno"] .be__card p { color: rgba(255, 255, 255, .6); }
html[data-onama="tamno"] .be__ev.is-now .be__card { background: var(--blue); }
/* oblak brojki */
html[data-onama="oblak"] .onama { min-height: 560px; justify-content: center; max-width: 1240px; padding: 64px 128px; }
html[data-onama="oblak"] .oc { display: block; position: absolute; inset: 0; pointer-events: none; }
.oc__b { --py: 0px; position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-08); box-shadow: 0 24px 40px -26px rgba(19, 42, 57, .45); text-align: left; opacity: 0; transform: translate3d(0, calc(var(--py) + 20px), 0) scale(.94); transition: opacity .6s, transform .9s var(--ease); }
.oc__b.is-on { opacity: 1; transform: translate3d(0, var(--py), 0); }
.oc__b b { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.oc__b small { font-size: 13px; color: var(--text); }
.oc__b:nth-child(2n) { background: var(--blue); border-color: transparent; color: #fff; }
.oc__b:nth-child(2n) small { color: rgba(255, 255, 255, .75); }
/* citat */
html[data-onama="citat"] .onama { align-items: flex-start; max-width: 1100px; padding-left: 48px; text-align: left; border-left: 3px solid var(--blue); }
html[data-onama="citat"] .oq__mark { display: block; position: absolute; left: 50px; top: -64px; font-size: 140px; font-weight: 600; line-height: 1; color: var(--blue); opacity: .9; }
html[data-onama="citat"] .onama__t { font-size: clamp(30px, 3.6vw, 54px); }
html[data-onama="citat"] .oq__sig { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.oq__sig img { width: 40px; height: auto; }
.oq__sig span { display: flex; flex-direction: column; }
.oq__sig b { font-size: 15px; font-weight: 600; }
.oq__sig small { font-size: 13px; color: var(--text); }
html[data-onama="citat"] .onama .eyebrow { margin-top: 32px; }
@media (max-width: 980px) {
  html[data-onama="podijeljeno"] .stat { display: flex; }
  html[data-onama="podijeljeno"] .onama { position: relative; top: 0; }
  html[data-onama="oblak"] .onama { padding: 128px 0; }
  .oc__b { padding: 8px 12px; } .oc__b b { font-size: 20px; }
  .hm__panel--v3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  html[data-onama="citat"] .onama { padding-left: 24px; }
  html[data-onama="citat"] .oq__mark { left: 18px; font-size: 100px; top: -46px; }
  html[data-onama="tamno"] .stat { margin: 0 8px; }
}
.be.be--v .be__ev .be__card { position: relative; left: 0; right: auto; top: auto; bottom: auto; width: auto; transform: none; }
@media (max-width: 760px) { .be .be__ev .be__card { position: relative; left: 0; right: auto; top: auto; bottom: auto; width: auto; } }
html[data-onama="oblak"] .oc__b:nth-child(3) { top: 88%; }

/* =====================================================================
   v9 · HERO "Plava kartica + 3D cijevi" — dorađeno
   kartica počinje ispod samog vrha (header je unutar kartice, bijeli), nacrt-rešetka, sjena iza teksta,
   donja traka s brojkama i područjima, kartica se pri skrolu lagano udalji (scale + radius)
   ===================================================================== */
.hero__bar { display: none; }
html[data-hero="kartica3d"] .hero { --hk: 0; min-height: 100vh; min-height: 100svh; padding-top: 128px; padding-bottom: 96px; background: #fff; }
html[data-hero="kartica3d"] :is(.hero__dith, .hero__3d) { inset: 10px 10px 10px; border-radius: calc(20px + var(--hk) * 16px); transform-origin: 50% 0; transform: scale(calc(1 - var(--hk) * .045)); will-change: transform; }
html[data-hero="kartica3d"] .hero__dith { background:
    radial-gradient(46% 38% at 50% 44%, rgba(21, 59, 84, .55) 0%, rgba(21, 59, 84, 0) 100%),
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(110% 120% at 50% 0%, #3895d3 0%, #2980b9 45%, #236089 100%); }
html[data-hero="kartica3d"] .hero__3d { -webkit-mask-image: radial-gradient(38% 34% at 50% 46%, rgba(0, 0, 0, .25) 0%, #000 100%); mask-image: radial-gradient(38% 34% at 50% 46%, rgba(0, 0, 0, .25) 0%, #000 100%); }
html[data-hero="kartica3d"] .hero__dith::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -120px 120px -60px rgba(11, 30, 43, .45); pointer-events: none; }
html[data-hero="kartica3d"] .hero__title { text-shadow: none; }
html[data-hero="kartica3d"] .hero__scroll { display: none; }
html[data-hero="kartica3d"] .hero__bar { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px max(24px, calc((100% - 1440px) / 2 + 48px)); border-top: 1px solid rgba(255, 255, 255, .16); border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(21, 59, 84, 0), rgba(21, 59, 84, .35)); color: #fff; transform-origin: 50% calc(-100vh + 100%); transform: scale(calc(1 - var(--hk) * .045)); }
.hero__bstats { display: flex; gap: clamp(24px, 3.4vw, 48px); }
.hero__bstats div { display: flex; flex-direction: column; gap: 2px; }
.hero__bstats b { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.hero__bstats i { font-style: normal; font-size: .6em; color: #bcdbf0; }
.hero__bstats small { font-size: 13px; color: rgba(255, 255, 255, .7); }
.hero__bsvc { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hero__bsvc a { padding: 8px 16px; border-radius: 6px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-size: 14px; font-weight: 500; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .25s, color .25s; }
.hero__bsvc a:hover { background: #fff; color: var(--blue); }
/* header je unutar kartice dok je na vrhu: bijeli tekst, logo u bijeloj pločici */
html[data-hero="kartica3d"] .hdr:not(.is-scrolled):not(.is-open) { --fg: #fff; }
html[data-hero="kartica3d"] .hdr[data-v="d"]:not(.is-open) { --fg: #fff; }
html[data-hero="kartica3d"] .hdr[data-v="d"] .hdr__bg { margin: 12px 12px 0; border-radius: 20px 20px 0 0; }
html[data-hero="kartica3d"] .hdr:not(.is-scrolled):not(.is-open) .hdr__in { padding-inline: max(32px, calc((100% - 1440px) / 2 + 64px)); margin-top: 12px; }
html[data-hero="kartica3d"] .hdr[data-v="v3"]:not(.is-scrolled):not(.is-open) .hdr__in { padding-inline: 12px 16px; }
html[data-hero="kartica3d"] .hdr:not(.is-scrolled):not(.is-open) .btn.hdr__cta { --cb: #fff; --cf: var(--ink); --bg: #fff; --fg: var(--ink); --hbg: var(--ink); --hfg: #fff; }
html[data-hero="kartica3d"] .hdr:not(.is-scrolled):not(.is-open) .hdr__cta .arrow-sq--in { background: var(--blue); color: #fff; }
html[data-hero="kartica3d"] .hdr:not(.is-scrolled):not(.is-open) .hdr__lang a[aria-current="true"] { color: var(--blue); }
html[data-hero="kartica3d"] .hdr:not(.is-scrolled):not(.is-open) .hdr__lnk.is-act { color: #fff; }
html[data-hero="kartica3d"] .hdr:not(.is-scrolled):not(.is-open) .hdr__brand3 img { padding: 4px 4px; border-radius: 8px; background: #fff; }
@media (max-width: 980px) {
  html[data-hero="kartica3d"] .hero__bar { flex-direction: column; align-items: flex-start; }
  html[data-hero="kartica3d"] .hero__bsvc { justify-content: flex-start; }
  html[data-hero="kartica3d"] .hero { padding-bottom: 96px; }
}
@media (max-width: 640px) {
  html[data-hero="kartica3d"] :is(.hero__dith, .hero__3d) { inset: 6px; border-radius: 20px; }
  html[data-hero="kartica3d"] .hero__3d { opacity: .7; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .15) 30%, rgba(0, 0, 0, .15) 62%, #000 100%); mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .15) 30%, rgba(0, 0, 0, .15) 62%, #000 100%); }
  html[data-hero="kartica3d"] .hero__bar { left: 6px; right: 6px; bottom: 6px; padding: 16px 16px; border-radius: 0 0 20px 20px; }
  html[data-hero="kartica3d"] .hero__bsvc { display: none; }
  html[data-hero="kartica3d"] .hero__bstats { width: 100%; justify-content: space-between; gap: 12px; }
  html[data-hero="kartica3d"] .hero__bstats small { font-size: 11.5px; }
  html[data-hero="kartica3d"] .hero { padding-top: 96px; padding-bottom: 96px; }
  html[data-hero="kartica3d"] .hdr:not(.is-scrolled):not(.is-open) .hdr__in { padding-inline: 24px; }
}
html[data-hero="kartica3d"] .hero__3d {
  -webkit-mask-image: radial-gradient(38% 34% at 50% 46%, rgba(0, 0, 0, .25) 0%, #000 100%), linear-gradient(180deg, #000 0, #000 calc(100% - 140px), rgba(0, 0, 0, .35) 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(38% 34% at 50% 46%, rgba(0, 0, 0, .25) 0%, #000 100%), linear-gradient(180deg, #000 0, #000 calc(100% - 140px), rgba(0, 0, 0, .35) 100%);
  mask-composite: intersect;
}
@media (max-width: 640px) {
  html[data-hero="kartica3d"] .hero__3d {
    -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .15) 30%, rgba(0, 0, 0, .15) 62%, #000 82%, rgba(0, 0, 0, .1) calc(100% - 70px));
    mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .15) 30%, rgba(0, 0, 0, .15) 62%, #000 82%, rgba(0, 0, 0, .1) calc(100% - 70px));
  }
}
.lab__p { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* =====================================================================
   v9 · ČISTI FOOTERI S–X — zajedničke varijable i dijelovi (tema: html[data-foot])
   ===================================================================== */
.lab__seg--wrap button { flex: 1 1 45%; }
.froot > footer.fz { --f-bg: #fff; --f-fg: var(--ink); --f-mut: var(--text); --f-faint: #8b909a; --f-line: rgba(10, 10, 11, .1); --f-card: #f4f5f8; --f-acc: var(--blue); padding-top: 80px; background: var(--f-bg); color: var(--f-fg); border-top: 1px solid var(--f-line); overflow: hidden; }
html[data-foot="dark"] .froot > footer.fz { --f-bg: #0a0a0b; --f-fg: #fff; --f-mut: rgba(255, 255, 255, .66); --f-faint: rgba(255, 255, 255, .42); --f-line: rgba(255, 255, 255, .11); --f-card: #141519; --f-acc: #94c6e7; border-top-color: transparent; }
.fz__logo { display: inline-flex; align-self: flex-start; }
.fz__logo img { width: 168px; height: auto; }
html[data-foot="dark"] .fz__logo { padding: 8px 12px; border-radius: 8px; background: #fff; }
.fz__t { margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--f-faint); }
.fz ul { display: flex; flex-direction: column; gap: 12px; }
.fz li a, .fz__plain li { font-size: 15.5px; color: var(--f-mut); transition: color .2s; }
.fz li a:hover { color: var(--f-acc); }
.fz__plain li { color: var(--f-fg); }
.fz__con li a { color: var(--f-fg); line-height: 1.45; }
.fz__tree { gap: 8px !important; }
.fz__tree .fz__area { margin-top: 8px; } .fz__tree .fz__area:first-child { margin-top: 0; }
.fz__tree .fz__area a { font-weight: 600; color: var(--f-fg); }
.fz__tree .fz__sub a { display: block; padding-left: 12px; border-left: 1px solid var(--f-line); font-size: 14.5px; }
.fz__chips { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; }
.fz__chips li { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--f-line); font-size: 13px; font-weight: 500; color: var(--f-fg); }
.fz__u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .25s; }
.fz__u:hover { background-size: 100% 1px; color: var(--f-acc); }
.fz__bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 64px; padding: 24px 0 32px; border-top: 1px solid var(--f-line); font-size: 14px; color: var(--f-faint); }
.fz__bot nav { display: flex; gap: 24px; }
.fz__bot a:hover { color: var(--f-fg); }

/* S · Mirno */
.fs__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-bottom: 48px; border-bottom: 1px solid var(--f-line); }
.fs__h { max-width: 18ch; font-size: clamp(32px, 3.6vw, 52px); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; }
.fs__h span { color: var(--f-faint); }
.fs__con { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; justify-self: end; }
.fs__con a { font-size: clamp(22px, 2.1vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.fs__con span { margin-top: 8px; font-size: 15px; color: var(--f-mut); }
.fs__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: 48px; }
.fs .fz__bot { margin-top: 64px; }
.fs .fz__bot .fz__logo img { width: 140px; }

/* T · Natpis */
.ft2__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.ft2__brand { display: flex; flex-direction: column; gap: 24px; }
.ft2__brand p { max-width: 28ch; font-size: 16px; line-height: 1.55; color: var(--f-mut); }
.ft2 .fz__bot { margin-top: 48px; }
.ft2__word { margin: 4px 0 -0.2em; line-height: .8; white-space: nowrap; user-select: none; }
.ft2__word span { display: inline-block; font-size: 200px; font-weight: 700; letter-spacing: -0.03em; color: transparent; background: linear-gradient(100deg, var(--f-card) 0 40%, var(--f-acc) 50%, var(--f-card) 60% 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position 1.6s var(--ease); }
.ft2__word:hover span { background-position: 0% 0; }
html[data-foot="dark"] .ft2__word span { background-image: linear-gradient(100deg, #17181d 0 40%, #94c6e7 50%, #17181d 60% 100%); }

/* U · Kartica */
.froot > footer.fu { padding-top: 24px; border-top: 0; }
.fu__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; padding: clamp(24px, 4vw, 48px); border-radius: 20px; background: var(--f-card); }
.fu__l { display: flex; flex-direction: column; gap: 24px; }
.fu__p { max-width: 34ch; font-size: 17px; line-height: 1.55; color: var(--f-mut); }
.fu__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fu__tel { display: flex; flex-direction: column; font-size: 18px; font-weight: 600; }
.fu__tel small { font-size: 12.5px; font-weight: 400; color: var(--f-faint); }
.fu__tel:hover { color: var(--f-acc); }
.fu__r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fu .fz__bot { margin-top: 8px; border-top: 0; }

/* V · Centar */
.fv { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fv .fz__logo { align-self: center; }
.fv__tag { margin-top: 16px; font-size: 17px; color: var(--f-mut); }
.fv__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 40px; font-size: 20px; font-weight: 500; }
.fv__usl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 16px; font-size: 15px; color: var(--f-mut); }
.fv__usl i { width: 4px; height: 4px; border-radius: 50%; background: var(--f-line); }
.fv__usl a:hover { color: var(--f-acc); }
.fv__con { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin: 40px 0 24px; padding-top: 40px; border-top: 1px solid var(--f-line); font-size: 15.5px; }
.fv__con a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.fv__con .fa { width: 17px; height: 17px; color: var(--f-acc); }
.fv__con a:hover { color: var(--f-acc); }
.fv .fz__chips { justify-content: center; }
.fv .fz__bot { width: 100%; margin-top: 48px; }

/* W · Kontakt */
.fw2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fw2__con { padding-right: clamp(24px, 4vw, 64px); border-right: 1px solid var(--f-line); }
.fw2__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--f-line); transition: padding-left .45s var(--ease); }
.fw2__row:first-of-type { border-top: 1px solid var(--f-line); }
.fw2__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--f-card); color: var(--f-acc); transition: background-color .3s, color .3s; }
.fw2__ic .fa { width: 19px; height: 19px; }
.fw2__row small { display: block; font-size: 12.5px; color: var(--f-faint); }
.fw2__row b { display: block; overflow-wrap: anywhere; font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.01em; }
.fw2__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease); }
.fw2__row:hover { padding-left: 8px; }
.fw2__row:hover .fw2__ic { background: var(--f-acc); color: #fff; }
.fw2__row:hover .fw2__go { opacity: 1; transform: none; color: var(--f-acc); }
.fw2__side { display: flex; flex-direction: column; gap: 24px; padding-left: clamp(24px, 4vw, 64px); }
.fw2__p { font-size: 16px; color: var(--f-mut); }
.fw2__cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; margin-top: 12px; }

/* X · Indeks */
.fx2__head { display: flex; align-items: center; gap: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--f-line); }
.fx2__clock { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; color: var(--f-mut); }
.fx2__clock i { width: 7px; height: 7px; border-radius: 50%; background: var(--f-acc); animation: fpulse 2s ease-out infinite; }
.fx2__clock b { font-weight: 600; color: var(--f-fg); font-variant-numeric: tabular-nums; }
.fx2__up { color: var(--f-fg); }
.fx2__up svg circle { stroke: var(--f-line); }
.fx2__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx2__col { padding: 32px 24px 0; border-left: 1px solid var(--f-line); }
.fx2__col:first-child { padding-left: 0; border-left: 0; }
.fx2__t { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; font-size: 17px; font-weight: 600; }
.fx2__t span { font-size: 12px; color: var(--f-acc); }
.fx2__col li a { position: relative; display: inline-block; transition: color .2s, transform .4s var(--ease); }
.fx2__col li a::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-radius: 50%; background: var(--f-acc); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--ease); }
.fx2__col li a:hover { transform: translateX(6px); }
.fx2__col li a:hover::before { opacity: 1; transform: none; }
.fx2__note { margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--f-faint); }

@media (max-width: 1100px) {
  .ft2__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft2__brand { grid-column: 1 / -1; }
  .fu__card { grid-template-columns: minmax(0, 1fr); }
  .fx2__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx2__col:nth-child(3) { padding-left: 0; border-left: 0; }
  .fs__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fs__top, .fw2__grid { grid-template-columns: minmax(0, 1fr); }
  .fs__con { justify-self: start; }
  .fw2__con { padding-right: 0; border-right: 0; }
  .fw2__side { padding: 40px 0 0; }
  .fu__r { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ft2__grid, .fs__cols, .fu__r, .fx2__cols, .fw2__cols { grid-template-columns: minmax(0, 1fr); }
  .fx2__col { padding-left: 0; border-left: 0; }
  .fx2__clock { display: none; }
  .fv__nav { font-size: 18px; gap: 8px 24px; }
  .froot > footer.fu { padding-inline: 12px; }
}

/* =====================================================================
   v9 · HEADER "Vercel" (data-v="vc") — tanka traka, sivi linkovi, mali gumbi, plutajući izbornik
   boje: --vc-* (tamno preko tamnog Vercel heroja dok je na vrhu, inače svijetlo)
   ===================================================================== */
.hdr__call { display: none; }
.hdr[data-v="vc"] { --vc-bg: rgba(255, 255, 255, .86); --vc-fg: #0a0a0b; --vc-mut: #5f6168; --vc-line: rgba(10, 10, 11, .1); --vc-pan: #fff; --vc-btn: #0a0a0b; --vc-btnf: #fff; --fg: var(--vc-fg); --hm-acc: var(--blue); }
html[data-hero="vercel"][data-vct="dark"] .hdr[data-v="vc"]:not(.is-scrolled) { --vc-bg: rgba(0, 0, 0, .78); --vc-fg: #ededed; --vc-mut: #a1a1a1; --vc-line: rgba(255, 255, 255, .12); --vc-pan: #0a0a0a; --vc-btn: #ededed; --vc-btnf: #0a0a0a; --hm-acc: #94c6e7; }
.hdr[data-v="vc"] .hdr__bg { background: var(--vc-bg); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.hdr[data-v="vc"].is-scrolled .hdr__bg { border-bottom-color: var(--vc-line); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.hdr[data-v="vc"] .hdr__in { --h: 64px; padding-inline: var(--gx); gap: 8px; }   /* rubovi poravnati sa sekcijama (isti --gx kao ostali headeri) */
.hdr[data-v="vc"] .hdr__logo { display: none; }
.hdr[data-v="vc"] .hdr__brand3 { display: flex; gap: 12px; }
.hdr[data-v="vc"] .hdr__brand3 img { width: 30px; padding: 4px 4px; border-radius: 6px; background: #fff; }
.hdr[data-v="vc"] .hdr__brand3 span { font-size: 14px; letter-spacing: .14em; color: var(--vc-fg); }
.hdr[data-v="vc"] .hdr__nav { margin-left: 24px; gap: 0; }
.hdr[data-v="vc"] .hdr__lnk { height: 32px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 400; color: var(--vc-mut); }
.hdr[data-v="vc"] .hdr__lnk:hover, .hdr[data-v="vc"] .hdr__lnk[aria-expanded="true"], .hdr[data-v="vc"] .hdr__lnk.is-act { color: var(--vc-fg); background: transparent; }
.hdr[data-v="vc"] .hdr__lnk.is-act::after { display: none; }
.hdr[data-v="vc"] .hc { width: 13px; height: 13px; }
.hdr[data-v="vc"] .hdr__end { gap: 8px; }
.hdr[data-v="vc"] .hdr__lang { padding: 0; background: none; font-size: 13px; }
.hdr[data-v="vc"] .hdr__lang a { padding: 8px 8px; color: var(--vc-mut); background: none !important; box-shadow: none !important; opacity: 1; }
.hdr[data-v="vc"] .hdr__lang a[aria-current="true"] { color: var(--vc-fg); }
.hdr[data-v="vc"] .hdr__call { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--vc-line); font-size: 14px; font-weight: 500; color: var(--vc-fg); transition: background-color .2s, border-color .2s; }
.hdr[data-v="vc"] .hdr__call:hover { border-color: var(--vc-mut); }
.hdr[data-v="vc"] .btn.hdr__cta { --bg: var(--vc-btn); --fg: var(--vc-btnf); --hbg: var(--blue); --hfg: #fff; height: 32px; padding: 0 12px; border-radius: 6px; font-size: 14px; }
.hdr[data-v="vc"] .btn.hdr__cta .arrow-sq--in { display: none; }
.hdr[data-v="vc"] .hdr__burger { width: 36px; height: 36px; }
.hdr[data-v="vc"] .hdr__burger i { left: 10px; right: 10px; }
.hdr[data-v="vc"] .hdr__burger i:first-child { top: 14px; } .hdr[data-v="vc"] .hdr__burger i:last-child { top: 21px; }
/* plutajući izbornik ispod "Usluge" */
.hdr[data-v="vc"] .hm { position: absolute; left: calc(var(--gx) + 166px); top: 58px; width: min(760px, calc(100vw - 48px)); border-radius: 8px; background: var(--vc-pan); color: var(--vc-fg); box-shadow: 0 0 0 1px var(--vc-line), 0 24px 48px -16px rgba(0, 0, 0, .35); }
.hdr[data-v="vc"]:not(.is-open) .hm { box-shadow: none; }
.hdr[data-v="vc"] .hm__panel--usl { padding: 8px !important; gap: 8px; }
.hdr[data-v="vc"] .hm__cols { grid-template-columns: 1fr 1fr; gap: 8px; }
.hdr[data-v="vc"] .hm__col { background: none; padding: 4px; }
.hdr[data-v="vc"] .hm__ai { width: 34px; height: 34px; border-radius: 8px; background: transparent; color: var(--vc-fg); box-shadow: inset 0 0 0 1px var(--vc-line); }
.hdr[data-v="vc"] .hm__area:hover .hm__ai { background: var(--blue); color: #fff; box-shadow: none; }
.hdr[data-v="vc"] .hm__area b { font-size: 15px; } .hdr[data-v="vc"] .hm__area em { font-size: 12.5px; }
.hdr[data-v="vc"] .hm__col li a { padding: 8px 8px; border-top: 0; border-radius: 6px; }
.hdr[data-v="vc"] .hm__col li a:hover { background: color-mix(in srgb, currentColor 6%, transparent); padding-left: 12px; }
.hdr[data-v="vc"] .hm__bar { margin: 0 4px; padding: 12px 8px 4px; font-size: 13px; }
html[data-hdr="vc"] .hdr-dim { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* =====================================================================
   v9 · HERO "Vercel" (data-hero="vercel") — tamna / svijetla tema (html[data-vct])
   ===================================================================== */
.hv { display: none; }
html[data-hero="vercel"] .hero { --v-bg: #000; --v-fg: #ededed; --v-mut: #a1a1a1; --v-line: rgba(255, 255, 255, .1); --v-face: #000; --v-tick: rgba(255, 255, 255, .22); --v-tick2: rgba(255, 255, 255, .6); --v-needle: #fff;
  display: block; min-height: 100vh; min-height: 100svh; padding: 64px 0 0; background: var(--v-bg); color: var(--v-fg); overflow: hidden; }
html[data-hero="vercel"][data-vct="light"] .hero { --v-bg: #fff; --v-fg: #0a0a0b; --v-mut: #5f6168; --v-line: rgba(10, 10, 11, .1); --v-face: #0a0a0b; --v-tick: rgba(255, 255, 255, .25); --v-tick2: rgba(255, 255, 255, .7); --v-needle: #fff; }
html[data-hero="vercel"] :is(.hero__3d, .hero__pipes, .hero__dith, .hero__in, .hero__scroll, .hero__svc) { display: none !important; }
html[data-hero="vercel"] .hv { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100svh - 64px); max-width: 1440px; margin: 0 auto; border-inline: 1px solid var(--v-line); }
.hv__ann { justify-self: center; display: inline-flex; align-items: center; gap: 24px; margin-top: 16px; padding: 8px 8px 8px 16px; font-size: 14px; color: var(--v-fg); }
.hv__ann span { color: var(--v-mut); }
.hv__ann b { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.hv__ann svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.hv__ann:hover svg { transform: translateX(3px); }
.hv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .8fr); align-items: center; gap: 24px; padding: 0 24px; }
.hv__l { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
html[data-hero="vercel"] .hv__l .hero__title { max-width: 11ch; color: var(--v-fg); font-size: clamp(42px, 4.6vw, 70px); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; text-align: left; text-shadow: none; }
html[data-hero="vercel"] .hv__l .hero__title br { display: none; }
html[data-hero="vercel"] .hv__l :is(.ht__mute, .ht__it) { color: var(--v-mut); }
html[data-hero="vercel"] .hv__l .hero__actions { flex-direction: row; }
html[data-hero="vercel"] .hero .btn.btn { height: 44px; padding: 0 16px; border-radius: 6px; font-size: 16px; }
html[data-hero="vercel"] .hero .btn--blue { --bg: var(--v-fg); --fg: var(--v-bg); --hbg: var(--blue); --hfg: #fff; }
html[data-hero="vercel"] .hero .btn--blue .arrow-sq--in { display: none; }
html[data-hero="vercel"] .hero .btn--line { --bg: transparent; --fg: var(--v-fg); --ln: var(--v-line); --hbg: var(--v-fg); --hfg: var(--v-bg); }
.hv__r { display: flex; flex-direction: column; gap: 12px; justify-self: end; padding-right: 40px; font-size: 17px; color: var(--v-fg); }
.hv__r li { position: relative; padding-left: 0; transition: color .3s, padding-left .4s var(--ease); }
.hv__r li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--blue); transition: width .4s var(--ease); }
.hv__r li:hover { padding-left: 24px; } .hv__r li:hover::before { width: 14px; }
/* pomrčina manometra */
.hv__sym { --lx: 0px; --ly: 0px; position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 1; }
.hv__glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, #cbe4f4 26%, #439bd6 52%, rgba(41, 128, 185, 0) 100%); filter: blur(18px); transform: translate(calc(var(--lx) * -1), calc(var(--ly) * -1 - 6px)) scale(1.12); animation: hvpulse 6s ease-in-out infinite; }
.hv__glow--2 { inset: -18%; opacity: .55; filter: blur(60px); background: radial-gradient(closest-side, rgba(67, 155, 214, .9), rgba(41, 128, 185, 0)); animation-delay: -3s; }
@keyframes hvpulse { 50% { opacity: .82; transform: translate(calc(var(--lx) * -1), calc(var(--ly) * -1 - 6px)) scale(1.16); } }
.hv__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hv__face { fill: var(--v-face); }
.hv__ticks line { stroke: var(--v-tick); stroke-width: 1.4; }
.hv__ticks line.mj { stroke: var(--v-tick2); stroke-width: 2.2; }
.hv__needle path { fill: var(--v-needle); }
.hv__needle circle { fill: var(--v-needle); }
/* traka podataka (umjesto logotipa klijenata) */
.hv__strip { display: flex; justify-content: space-between; gap: 24px; padding: 32px 24px 40px; border-top: 1px solid var(--v-line); font-size: 15px; color: var(--v-mut); white-space: nowrap; }
.hv__strip b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--v-fg); margin-right: 4px; }
/* "+" oznake na uglovima rešetke */
.hv__x { position: absolute; width: 13px; height: 13px; pointer-events: none; }
.hv__x::before, .hv__x::after { content: ""; position: absolute; background: var(--v-mut); opacity: .7; }
.hv__x::before { left: 6px; top: 0; width: 1px; height: 13px; } .hv__x::after { top: 6px; left: 0; width: 13px; height: 1px; }
.hv__x--1 { left: -7px; top: 72px; } .hv__x--2 { right: -7px; top: 72px; }
.hv__x--3 { left: -7px; bottom: calc(100px - 7px); } .hv__x--4 { right: -7px; bottom: calc(100px - 7px); }
html[data-hero="vercel"] .hv::before { content: ""; position: absolute; left: 0; right: 0; top: 78px; height: 1px; background: var(--v-line); }
@media (max-width: 1100px) {
  .hv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hv__r { grid-column: 1 / -1; justify-self: start; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; padding: 0 0 24px; }
  .hv__strip { flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 760px) {
  html[data-hero="vercel"] .hv { border-inline: 0; }
  .hv__x { display: none; }
  .hv__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 24px 24px; }
  .hv__sym { order: -1; width: min(260px, 70vw); }
  .hv__r { font-size: 15px; flex-direction: column; gap: 8px; }
  .hv__ann { gap: 12px; font-size: 13px; }
  .hv__ann span { display: none; }
  .hv__strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 24px 24px; font-size: 13px; }
  .hv__strip b { display: block; font-size: 19px; }
  html[data-hero="vercel"] .hv__l .hero__actions { flex-direction: column; align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .hv__glow { animation: none; } }
.hv__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .72fr); }
html[data-hero="vercel"] .hv__l .hero__title { max-width: 14ch; font-size: clamp(40px, 4.3vw, 66px); }
@media (max-width: 1100px) { .hv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .hv__grid { grid-template-columns: minmax(0, 1fr); } html[data-hero="vercel"] .hv__l .hero__title { font-size: clamp(36px, 10vw, 48px); } }
@media (max-width: 520px) {
  .hdr[data-v="vc"] .btn.hdr__cta { width: auto; padding: 0 12px; }
  .hdr[data-v="vc"] .btn.hdr__cta .btn__label { display: inline-block; }
  .hdr[data-v="vc"] .hdr__call { display: none; }
}

/* Vercel header – popravci: traka uvijek ima podlogu (zamućenje + crta), mobilni X, CTA u mobilnom izborniku */
.hdr[data-v="vc"] .hdr__bg { border-bottom-color: var(--vc-line) !important; backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
html[data-hdr="vc"].mnav-on .hdr[data-v="vc"] .hdr__burger i:first-child, html[data-hdr="vc"].mnav-on .hdr[data-v="vc"] .hdr__burger i:last-child { top: 17.5px; }
html[data-hdr="vc"].mnav-on .hdr[data-v="vc"] { --vc-fg: #fff; --vc-bg: transparent; }
.mnav__foot .btn { flex-direction: row !important; align-self: flex-start; }
.mnav__row .btn { flex: none; }
.hero__scroll { display: none !important; }

/* ---------- hero: duži naslov (Lab → Hero tekst) ---------- */
.lab__seg--col button { flex: 1 1 100%; text-align: left; }
.hero__title.is-long { max-width: 22ch; font-size: clamp(2.3rem, 4.2vw, 60px); line-height: 1.05; }
.hero__col:has(.hero__title.is-long) { max-width: 1100px; }
html[data-hero="vercel"] .hv__l .hero__title.is-long { max-width: 20ch; font-size: clamp(34px, 3.4vw, 52px); }
html[data-hero="kartica3d"] .hero__title.is-long { max-width: 24ch; }
.hero__title.is-long .ht__mark { white-space: normal; }
.hero__title.is-long .ht__mark svg { display: none; }
.hero__title.is-long .ht__mark { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
@media (max-width: 640px) { .hero__title.is-long { font-size: clamp(28px, 8vw, 36px); } }
/* ostali headeri iznad tamnog Vercel heroja: bijeli tekst dok su na vrhu */
html[data-hero="vercel"][data-vct="dark"] .hdr:not([data-v="vc"]):not(.is-scrolled):not(.is-open) { --fg: #fff; }
html[data-hero="vercel"][data-vct="dark"] .hdr:not([data-v="vc"]):not(.is-scrolled):not(.is-open) .hdr__lang a[aria-current="true"] { color: var(--ink); }

/* =====================================================================
   v9 · ČISTI FOOTERI Y–AD
   ===================================================================== */
/* Y · Velike poveznice */
.fy__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; }
.fy__nav { display: flex; flex-direction: column; border-top: 1px solid var(--f-line); }
.fy__nav a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--f-line); transition: color .3s, padding-left .45s var(--ease); }
.fy__nav span { font-size: 13px; color: var(--f-faint); }
.fy__nav b { font-size: clamp(36px, 4.4vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; }
.fy__nav .fa { width: 28px; height: 28px; opacity: 0; transform: translate(-12px, 12px); transition: opacity .3s, transform .45s var(--ease); }
.fy__nav a:hover { color: var(--f-acc); padding-left: 12px; }
.fy__nav a:hover .fa { opacity: 1; transform: none; }
.fy__side { display: flex; flex-direction: column; gap: 32px; }
.fy__p { font-size: 16px; color: var(--f-mut); margin-top: -16px; }
/* Z · Plava traka */
.fzb__band { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 24px 32px; border-radius: 16px; background: var(--blue); color: #fff; }
.fzb__band p { font-size: 18px; font-weight: 500; }
.fzb__mail { margin-left: auto; font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; background: linear-gradient(#fff, #fff) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--ease); }
.fzb__mail:hover { background-size: 100% 2px; }
.fzb__cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; margin-top: 64px; }
.fzb__p { margin: 16px 0 24px; font-size: 15.5px; color: var(--f-mut); }
/* AA · Harmonika */
.faa__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; }
.faa__l { display: flex; flex-direction: column; gap: 24px; }
.faa__p { font-size: 16px; color: var(--f-mut); }
.faa__nav { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 40px; font-size: 20px; font-weight: 500; }
.faa__d { border-top: 1px solid var(--f-line); }
.faa__d:last-of-type { border-bottom: 1px solid var(--f-line); }
.faa__d summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; padding: 16px 0; list-style: none; cursor: pointer; }
.faa__d summary::-webkit-details-marker { display: none; }
.faa__d summary span { font-size: 13px; color: var(--f-acc); }
.faa__d summary b { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; transition: color .2s; }
.faa__d summary:hover b { color: var(--f-acc); }
.faa__d summary i { position: relative; width: 16px; height: 16px; }
.faa__d summary i::before, .faa__d summary i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease); }
.faa__d summary i::after { transform: rotate(90deg); }
.faa__d[open] summary i::after { transform: rotate(0); }
.faa__in { display: flex; flex-direction: column; gap: 4px; padding: 0 0 16px 40px; }
.faa__in a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 15.5px; color: var(--f-mut); transition: color .2s; }
.faa__in a .fa { width: 15px; height: 15px; opacity: 0; transition: opacity .2s; }
.faa__in a:hover { color: var(--f-acc); } .faa__in a:hover .fa { opacity: 1; }
/* AB · Rešetka */
.fab__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--f-line); border-left: 1px solid var(--f-line); }
.fab__c { display: flex; flex-direction: column; gap: 8px; padding: 32px; border-right: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); transition: background-color .3s; }
.fab__c--brand p { margin-top: 16px; font-size: 15px; color: var(--f-mut); }
.fab__c--link { position: relative; min-height: 128px; justify-content: flex-end; }
.fab__c--link small { font-size: 12.5px; color: var(--f-faint); }
.fab__c--link b { font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; overflow-wrap: anywhere; }
.fab__c--link .fa { position: absolute; right: 24px; top: 24px; width: 20px; height: 20px; color: var(--f-faint); transition: transform .45s var(--ease), color .3s; }
.fab__c:hover { background: var(--f-card); }
.fab__c--link:hover .fa { color: var(--f-acc); transform: rotate(45deg); }
.fab__c--link:last-of-type:hover .fa { transform: translateY(-4px); }
.fab__x { position: absolute; left: var(--x); top: var(--y); width: 13px; height: 13px; margin: -8px 0 0 -8px; pointer-events: none; }
.fab__x::before, .fab__x::after { content: ""; position: absolute; background: var(--f-fg); opacity: .45; }
.fab__x::before { left: 6px; width: 1px; height: 13px; } .fab__x::after { top: 6px; width: 13px; height: 1px; }
/* AC · Karta */
.fac__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
.fac__map { position: relative; min-height: 400px; border-radius: 20px; background: var(--f-card); overflow: hidden; }
.fac__map canvas { position: absolute; inset: 24px 24px 80px; width: calc(100% - 48px); height: calc(100% - 104px); }
.fac__addr { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 2px; font-size: 18px; font-weight: 500; }
.fac__addr small { font-size: 12.5px; font-weight: 400; color: var(--f-faint); }
.fac__addr:hover { color: var(--f-acc); }
.fac__addr .fa { position: absolute; right: 0; bottom: 4px; transition: transform .45s var(--ease); }
.fac__addr:hover .fa { transform: rotate(45deg); }
.fac__r { display: flex; flex-direction: column; gap: 40px; }
.fac__top p { margin-top: 16px; font-size: 16px; color: var(--f-mut); }
.fac__cols { display: grid; grid-template-columns: 1fr 1.3fr 1.1fr; gap: 32px; }
.fac__cols .fz__chips { margin-top: 24px; }
/* AD · Dvoslojno */
.froot > footer.fad { padding-bottom: 0 !important; }
.fad__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 64px; }
.fad__p { margin: 16px 0 24px; font-size: 15.5px; color: var(--f-mut); }
.fad__band { margin-inline: calc(-1 * max(var(--gut, 64px), (100% - 1440px) / 2 + var(--gut, 64px))); padding: 64px max(var(--gut, 64px), calc((100% - 1440px) / 2 + var(--gut, 64px))) 0; background: #0a0a0b; color: #fff; }
html[data-foot="dark"] .fad__band { background: #141519; }
.fad__mail { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(32px, 5vw, 72px); font-weight: 500; letter-spacing: -0.04em; transition: color .3s; }
.fad__mail .fa { width: .6em; height: .6em; transition: transform .45s var(--ease); }
.fad__mail:hover { color: #94c6e7; } .fad__mail:hover .fa { transform: rotate(45deg); }
.fad__row { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 24px; font-size: 17px; color: rgba(255, 255, 255, .7); }
.fad__row a:hover { color: #fff; }
.fad__band .fz__bot { margin-top: 48px; border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .45); }
.fad__band .fz__bot a:hover { color: #fff; }
@media (max-width: 1100px) {
  .fzb__cols, .fad__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab__x { display: none; }
  .fac__grid { grid-template-columns: minmax(0, 1fr); }
  .fac__map { min-height: 340px; }
}
@media (max-width: 860px) {
  .fy__grid, .faa__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fac__cols { grid-template-columns: 1fr 1fr; }
  .fzb__mail { margin-left: 0; }
}
@media (max-width: 640px) {
  .fzb__cols, .fad__top, .fab__grid, .fac__cols { grid-template-columns: minmax(0, 1fr); }
  .fzb__band { padding: 24px; }
  .fab__c { padding: 24px; }
}

/* =====================================================================
   v9 · BROJKE — nove varijante G–K (brojke.js; Lab → Brojke koje se mjere)
   ===================================================================== */
.bnum--md { font-size: clamp(32px, 3vw, 44px); }

/* G · Crta + sve brojke */
.bgr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--line-16); }
.bgr__it { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--line-10); opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease) calc(var(--i) * 70ms + 300ms), transform .9s var(--ease) calc(var(--i) * 70ms + 300ms); }
.bgr__it:not(:nth-child(4n+1)) { padding-left: 24px; border-left: 1px solid var(--line-10); }
.bgr.is-in .bgr__it { opacity: 1; transform: none; }
.bgr__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bgr__it p { max-width: 22ch; font-size: 15px; line-height: 1.4; color: var(--text); }

/* H · Po područjima */
.bh { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 32px; }
.bh__tabs { display: flex; flex-direction: column; gap: 8px; }
.bh__tab { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; padding: 24px 24px; border: 1px solid var(--line-10); border-radius: 16px; background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; transition: background-color .4s, border-color .4s, color .4s; }
.bh__tab span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bh__tab b { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.bh__tab:hover { border-color: var(--line-16); }
.bh__tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bh__tab.is-on span { color: rgba(255, 255, 255, .55); }
.bh__pr { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.bh__pr em { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.bh.is-play:not(.is-user) .bh__tab.is-on .bh__pr em { animation: bhpr 5.2s linear forwards; }
@keyframes bhpr { to { transform: scaleX(1); } }
.bh__panels { position: relative; display: grid; min-height: 360px; padding: 40px; border-radius: 20px; background: var(--blue); color: #fff; overflow: hidden; }
.bh__panels::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 90% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%); pointer-events: none; }
.bh__p { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.bh__p.is-on { opacity: 1; visibility: visible; transition: opacity .6s .1s; }
.bh__d { position: relative; max-width: 46ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.bh__nums { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; align-items: end; }
.bh__n { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .3); }
.bh__p.is-on .bh__n { animation: bhn .8s var(--ease) both; animation-delay: calc(var(--j) * 90ms + 80ms); }
@keyframes bhn { from { opacity: 0; transform: translateY(18px); } }
.bh__n .bnum i { color: #fff; opacity: .7; }
.bh__n p { font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .85); }

/* I · Zapisnik */
.bi { border: 1px solid var(--line-16); border-radius: 20px; background: #fff; overflow: hidden; }
.bi__h { display: flex; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--ink); color: rgba(255, 255, 255, .7); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.bi__h span:first-child { color: #fff; }
.bi__row { position: relative; display: grid; grid-template-columns: 64px 1fr 200px 220px; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line-10); }
.bi__row--th { border-top: 0; padding-block: 12px; background: var(--grey, #f1f1ef); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bi__row--th span:last-child, .bi__v { text-align: right; justify-self: end; }
.bi__row:not(.bi__row--th) { opacity: 0; transform: translateX(-12px); transition: opacity .6s var(--ease) calc(var(--i) * 80ms), transform .8s var(--ease) calc(var(--i) * 80ms), background-color .3s; }
.bi.is-in .bi__row { opacity: 1; transform: none; }
.bi__row:not(.bi__row--th)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); transform: scaleY(0); transition: transform .35s var(--ease); }
.bi__row:not(.bi__row--th):hover { background: var(--blue-soft); }
.bi__row:not(.bi__row--th):hover::before { transform: none; }
.bi__no { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.bi__l { display: flex; flex-direction: column; gap: 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.bi__l small { font-size: 13.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.bi__a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.bi__v .bnum { font-size: 32px; }

/* J · Mjerna ploča */
.bj__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bj__it { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px 24px; border: 1px solid var(--line-10); border-radius: 20px; background: #fff; text-align: center; }
.bj__dial { position: relative; width: 100%; max-width: 230px; aspect-ratio: 1; }
.bj__dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bj__ticks line { stroke: var(--line-16); stroke-width: 1.5; }
.bj__track, .bj__arc { fill: none; stroke-width: 6; stroke-linecap: round; }
.bj__track { stroke: var(--line-10); }
.bj__arc { stroke: var(--blue); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.7s cubic-bezier(.25, 1, .5, 1) calc(var(--i) * 120ms); }
.bj__needle { transform-origin: 100px 100px; transform: rotate(135deg); transition: transform 1.7s cubic-bezier(.34, 1.25, .5, 1) calc(var(--i) * 120ms); }
.bj__needle path, .bj__needle circle { fill: var(--ink); }
.bj.is-in .bj__arc { stroke-dashoffset: 0; }
.bj.is-in .bj__needle { transform: rotate(405deg); }
.bj__v { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; }
.bj__v .bnum { font-size: clamp(26px, 2.4vw, 36px); }
.bj__k { margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bj__it p { max-width: 20ch; font-size: 15px; line-height: 1.4; color: var(--text); }
.bj__mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--line-10); border-radius: 16px; background: #fff; }
.bj__mini > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 24px; }
.bj__mini > div + div { border-left: 1px solid var(--line-10); }
.bj__mini b { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; }
.bj__mini span { font-size: 13.5px; line-height: 1.35; color: var(--muted); }

/* K · Traka */
.bk { display: flex; flex-direction: column; gap: 8px; margin-inline: calc(var(--gut, 64px) * -1); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bk__row { display: flex; width: max-content; }
.bk__trk { display: flex; align-items: center; flex: none; animation: bkm 48s linear infinite; }
.bk__row--r .bk__trk { animation-direction: reverse; animation-duration: 56s; }
.bk:hover .bk__trk { animation-play-state: paused; }
@keyframes bkm { to { transform: translateX(-100%); } }
.bk__it { display: flex; align-items: baseline; gap: 16px; padding: 16px 32px; }
.bk__it b { font-size: clamp(56px, 7vw, 112px); font-weight: 500; line-height: 1; letter-spacing: -0.055em; white-space: nowrap; }
.bk__it b i { font-style: normal; font-size: .5em; color: var(--blue); }
.bk__it span { max-width: 14ch; font-size: 15px; line-height: 1.35; color: var(--text); }
.bk__row--r .bk__it b { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.bk__row--r .bk__it b i { -webkit-text-stroke: 0; }
.bk__sep { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
@media (prefers-reduced-motion: reduce) { .bk__trk { animation: none; } }

@media (max-width: 960px) {
  .bgr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgr__it:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .bgr__it:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line-10); }
  .bh { grid-template-columns: 1fr; gap: 16px; }
  .bh__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .bh__tab { flex: none; padding: 12px 16px; }
  .bh__tab b { font-size: 16px; }
  .bh__panels { min-height: 0; padding: 24px; }
  .bh__nums { grid-template-columns: 1fr; gap: 16px; }
  .bi__row { grid-template-columns: 40px 1fr auto; padding: 16px; }
  .bi__a, .bi__row--th span:nth-child(3) { display: none; }
  .bi__h span:nth-child(2) { display: none; }
  .bi__l { font-size: 16px; }
  .bi__v .bnum { font-size: 24px; }
  .bj__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bj__it { padding: 16px 8px; }
  .bj__mini { grid-template-columns: 1fr 1fr; }
  .bj__mini > div { padding: 12px 16px; border-top: 1px solid var(--line-10); }
  .bj__mini > div:nth-child(-n+2) { border-top: 0; }
  .bj__mini > div + div { border-left: 0; }
  .bj__mini > div:nth-child(even) { border-left: 1px solid var(--line-10); }
  .bk__it { padding: 12px 24px; }
}

/* =====================================================================
   v9 · FOOTERI AE–AJ (footer.js) — inspiracija Wix Playground: mekani sjaj odozdo; samo plava paleta
   ===================================================================== */
/* zajednički sjaj */
.fg { position: relative; isolation: isolate; --g1: #75b6e1; --g2: #b6d8ef; --g3: #459cd6; --ga: .9; }
html[data-foot="dark"] .fg { --g1: #2980b9; --g2: #3393d2; --g3: #93c6e7; --ga: .85; }
.fg > :not(.fg__glow) { position: relative; z-index: 1; }
.fg__glow { position: absolute; left: 0; right: 0; bottom: 0; height: 82%; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--ga); -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%); mask-image: linear-gradient(to top, #000 30%, transparent 100%); }
.fg__glow--full { height: 100%; -webkit-mask-image: linear-gradient(to top, #000 55%, rgba(0, 0, 0, .35) 100%); mask-image: linear-gradient(to top, #000 55%, rgba(0, 0, 0, .35) 100%); }
.fg__b { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.fg__b--1 { width: 70%; height: 120%; left: -10%; bottom: -60%; background: var(--g1); translate: calc((var(--mx, .5) - .5) * 120px) 0; animation: fgd1 18s ease-in-out infinite alternate; }
.fg__b--2 { width: 60%; height: 110%; right: -12%; bottom: -50%; background: var(--g2); translate: calc((var(--mx, .5) - .5) * -90px) 0; animation: fgd2 22s ease-in-out infinite alternate; }
.fg__b--3 { width: 40%; height: 80%; left: calc(var(--mx, .5) * 60% + 10%); bottom: -45%; background: var(--g3); opacity: .55; transition: left 1.2s var(--ease); animation: fgd3 14s ease-in-out infinite alternate; }
@keyframes fgd1 { to { transform: translate(8%, -6%) scale(1.08); } }
@keyframes fgd2 { to { transform: translate(-10%, -4%) scale(.94); } }
@keyframes fgd3 { to { transform: translate(-20%, -10%) scale(1.15); } }
.fg__grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .fg__b { animation: none; } }

/* AE · Sjaj (Wix) */
.fae__grid { display: grid; grid-template-columns: 1fr 1.25fr 1.1fr 1.5fr; gap: 48px; padding-bottom: 96px; }
.fae__t { margin-bottom: 24px; font-size: 16px; font-weight: 600; color: var(--f-fg); }
.fae__brand { display: flex; flex-direction: column; gap: 24px; }
.fae__brand p { font-size: 16px; line-height: 1.55; color: var(--f-fg); }
.fae__cert { font-size: 13px !important; letter-spacing: .04em; color: var(--f-mut) !important; }
.fae__bot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 24px 0 40px; border-top: 1px solid color-mix(in srgb, var(--f-fg) 18%, transparent); font-size: 14px; color: var(--f-fg); }
.fae__bot > :nth-child(4) { margin-left: auto; }
.fae__bot a:not(.fae__pill):hover { text-decoration: underline; text-underline-offset: 3px; }
.fae__pill { position: absolute; right: 0; top: 0; translate: 0 -50%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; border-radius: 6px; background: var(--f-bg); color: var(--f-fg); font-weight: 500; box-shadow: 0 6px 24px -10px rgba(41, 128, 185, .45); transition: background-color .3s, color .3s; }
.fae__pill:hover { background: var(--blue); color: #fff; }
.fae__pill .fa { width: 16px; height: 16px; }

/* AF · Svjetlo kursora */
.faf { position: relative; isolation: isolate; --sx: 72%; --sy: 55%; }
.faf::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(41, 128, 185, .14), transparent 70%); }
html[data-foot="dark"] .faf::before { background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(41, 128, 185, .38), transparent 70%); }
.faf__draw { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(300px circle at var(--sx) var(--sy), #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .05) 100%); mask-image: radial-gradient(300px circle at var(--sx) var(--sy), #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .05) 100%); }
.faf__draw svg { width: 100%; height: 100%; }
.faf__grid path { stroke: var(--f-acc); stroke-width: 1; opacity: .35; }
.faf__pipe path { fill: none; stroke: var(--f-acc); stroke-width: 6; stroke-linecap: round; }
.faf__dev :is(circle, rect, path) { fill: var(--f-bg); stroke: var(--f-acc); stroke-width: 3; }
.faf__big { font-size: 190px; font-weight: 600; letter-spacing: -0.05em; fill: none; stroke: var(--f-acc); stroke-width: 1.5; }
.faf__in, .faf .fz__bot { position: relative; z-index: 1; }
.faf__in { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.faf__top { display: flex; flex-direction: column; gap: 24px; }
.faf__top p { max-width: 30ch; font-size: 17px; line-height: 1.5; color: var(--f-fg); }
.faf__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.faf__hint { grid-column: 1 / -1; margin-top: 48px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--f-faint); }

/* AG · Valovi */
.fag__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1.2fr; gap: 48px; }
.fag__brand { display: flex; flex-direction: column; gap: 24px; }
.fag__brand p { max-width: 28ch; font-size: 16px; line-height: 1.5; color: var(--f-fg); }
.fag__waves { position: relative; height: 240px; margin: 48px calc(50% - 50vw) 0; }
.fag__waves canvas { display: block; width: 100%; height: 100%; }
.fag__lbl { position: absolute; left: max(64px, calc((100vw - 1440px) / 2 + 64px)); bottom: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--f-faint); }
.fag .fz__bot { margin-top: 0; }

/* AH · Termo trag */
.fah__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1.2fr; gap: 48px; }
.fah__brand { display: flex; flex-direction: column; gap: 24px; }
.fah__brand p { max-width: 28ch; font-size: 16px; line-height: 1.5; color: var(--f-fg); }
.fah__band { position: relative; height: 260px; margin-top: 64px; border-radius: 20px; overflow: hidden; background: var(--f-card); }
.fah__band canvas { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); filter: blur(8px); cursor: crosshair; }
.fah__hud { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; justify-content: space-between; gap: 16px; pointer-events: none; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.fah__hud > span { padding: 8px 12px; border-radius: 6px; background: var(--f-bg); color: var(--f-fg); }
.fah__scale { display: inline-flex; align-items: center; gap: 8px; }
.fah__scale i { order: 1; width: 96px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #f7f9fa, #d1e7f5, #93c6e7, #2980b9, #163b54); }
.fah__scale b:first-of-type { order: 0; font-weight: 400; } .fah__scale b:last-of-type { order: 2; font-weight: 400; }
.fah__mail { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 8px; background: var(--f-bg); color: var(--f-fg); font-size: clamp(18px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; transition: background-color .3s, color .3s; }
.fah__mail:hover { background: var(--blue); color: #fff; }

/* AI · Staklo */
.fai { padding-bottom: 0; }
.fai__grid { display: grid; grid-template-columns: 1fr 1.7fr 1.1fr; gap: 16px; align-items: stretch; }
.fai__c { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 16px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 20px 50px -30px rgba(28, 71, 99, .35); }
html[data-foot="dark"] .fai__c { background: rgba(18, 20, 28, .5); border-color: rgba(255, 255, 255, .12); }
.fai__c--brand p { font-size: 16px; line-height: 1.5; color: var(--f-fg); }
.fai__since { margin-top: auto; font-size: 48px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.fai__two { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; }
.fai__mail { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--f-fg); word-break: break-all; }
.fai__mail:hover { color: var(--f-acc); }
.fai .fz__bot { margin-top: 48px; border-top-color: color-mix(in srgb, var(--f-fg) 16%, transparent); color: var(--f-fg); }

/* AJ · Horizont */
.faj { position: relative; text-align: center; }
.faj__top { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.faj .fz__logo { align-self: center; }
.faj__p { max-width: 40ch; font-size: 18px; line-height: 1.5; color: var(--f-fg); }
.faj__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin-top: 8px; font-size: 16px; font-weight: 500; }
.faj__nav i { width: 4px; height: 4px; border-radius: 50%; background: var(--f-acc); }
.faj__usl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1100px; margin: 64px auto 0; text-align: left; }
.faj__a { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--f-line); }
.faj__a > span { font-family: var(--mono); font-size: 11px; color: var(--f-faint); }
.faj__ah { font-size: 17px; font-weight: 600; color: var(--f-fg); }
.faj__ah:hover { color: var(--f-acc); }
.faj__a ul { gap: 8px; }
.faj__a li a { font-size: 14.5px; }
.faj__con { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin-top: 48px; font-size: 15.5px; color: var(--f-fg); }
.faj__con a:hover { color: var(--f-acc); }
.faj__hz { position: relative; height: 200px; margin: 48px calc(50% - 50vw) 0; overflow: hidden; pointer-events: none; }
.faj__glow { position: absolute; left: calc(var(--mx, .5) * 100%); top: 40px; width: 70vw; height: 260px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(41, 128, 185, .55), rgba(41, 128, 185, .12) 60%, transparent); filter: blur(30px); transition: left 1s var(--ease); }
.faj__arc { position: absolute; left: -30vw; right: -30vw; top: 96px; height: 1400px; border-radius: 50%; background: var(--f-bg); box-shadow: 0 -1px 0 rgba(41, 128, 185, .9), 0 -14px 40px -6px rgba(41, 128, 185, .55), inset 0 24px 60px -30px rgba(41, 128, 185, .35); }
html[data-foot="dark"] .faj__arc { box-shadow: 0 -1px 0 #93c6e7, 0 -18px 60px -6px rgba(41, 128, 185, .9), inset 0 30px 80px -30px rgba(41, 128, 185, .6); }
.faj__bot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: -80px; }
.faj__bot .fz__chips { justify-content: center; }
.faj__bot .fz__bot { width: 100%; margin-top: 0; text-align: left; }

@media (max-width: 960px) {
  .fae__grid, .fag__grid, .fah__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .fae__brand, .fag__brand, .fah__brand { grid-column: 1 / -1; order: -1; }
  .fae__bot { padding-top: 40px; }
  .fae__bot > :nth-child(4) { margin-left: 0; }
  .fae__pill { left: 0; right: auto; }
  .faf__in { grid-template-columns: 1fr; }
  .faf__cols { grid-template-columns: 1fr 1fr; }
  .faf__big { font-size: 120px; }
  .fag__waves { height: 160px; }
  .fag__lbl { left: 24px; }
  .fah__band { height: 220px; }
  .fai__grid, .fai__two { grid-template-columns: 1fr; }
  .fai__c { padding: 24px; }
  .faj__usl { grid-template-columns: 1fr 1fr; }
  .faj__hz { height: 150px; }
  .faj__arc { left: -60vw; right: -60vw; top: 70px; }
  .faj__bot { margin-top: -64px; }
}
@media (max-width: 560px) { .faj__usl, .faf__cols { grid-template-columns: 1fr; } .fah__scale { display: none; } }

/* =====================================================================
   v9 · BROJKE — varijante L–P
   ===================================================================== */
/* L · Prezentacija */
.bl { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: stretch; }
.bl__stage { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 420px; padding: 40px; border-radius: 20px; background: var(--ink); color: #fff; overflow: hidden; }
.bl__stage::after { content: ""; position: absolute; right: -20%; bottom: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(41, 128, 185, .55), transparent); pointer-events: none; }
.bl__cnt { position: relative; z-index: 1; font-family: var(--mono); font-size: 13px; color: rgba(255, 255, 255, .55); }
.bl__cnt b { color: #fff; font-weight: 500; }
.bl__nums { position: relative; z-index: 1; display: grid; }
.bl__n { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; opacity: 0; visibility: hidden; transform: translateY(40px); transition: opacity .5s, transform .7s var(--ease), visibility 0s .7s; }
.bl__n.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s .15s, transform .9s var(--ease) .15s; }
.bl__n.is-out { transform: translateY(-40px); }
.bl__k { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #94c6e7; }
.bl__n .bnum i { color: #94c6e7; }
.bl__n p { display: flex; flex-direction: column; gap: 8px; max-width: 36ch; font-size: 20px; font-weight: 500; }
.bl__n p span { font-size: 15px; font-weight: 400; line-height: 1.45; color: rgba(255, 255, 255, .65); }
.bl__list { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-10); }
.bl__list button { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line-10); background: none; font: inherit; font-size: 16px; text-align: left; color: var(--muted); cursor: pointer; transition: color .3s, padding .4s var(--ease); }
.bl__list button span { font-family: var(--mono); font-size: 12px; }
.bl__list button:hover { color: var(--ink); }
.bl__list button.is-on { padding-left: 12px; color: var(--ink); font-weight: 500; }
.bl__list button i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.bl__list button em { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.bl__list button.is-on em { transform: scaleX(1); }
.bl.is-play:not(.is-user) .bl__list button.is-on em { animation: blp 3.6s linear forwards; }
@keyframes blp { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* M · Rešetka */
.bm { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-16); border-radius: 20px; overflow: hidden; }
.bm__c { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 32px; border-right: 1px solid var(--line-10); border-bottom: 1px solid var(--line-10); background: #fff; opacity: 0; transition: opacity .7s var(--ease) calc(var(--i) * 70ms), background-color .4s, color .4s; }
.bm.is-in .bm__c { opacity: 1; }
.bm__c:nth-child(3n) { border-right: 0; }
.bm__c:nth-child(n+7) { border-bottom: 0; }
.bm__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .4s; }
.bm__l { font-size: 16px; color: var(--text); transition: color .4s; }
.bm__d { margin-top: auto; max-width: 30ch; font-size: 14px; line-height: 1.45; color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease), color .4s; }
.bm__c:hover { background: var(--blue); color: #fff; }
.bm__c:hover :is(.bm__k, .bm__l, .bm__d, .bnum i) { color: rgba(255, 255, 255, .85); }
.bm__c:hover .bm__d { opacity: 1; transform: none; }
.bm__x { position: absolute; left: calc(var(--x) * 100% / 3); top: calc(var(--y) * 100% / 3); width: 13px; height: 13px; translate: -6.5px -6.5px; pointer-events: none; z-index: 1; }
.bm__x::before, .bm__x::after { content: ""; position: absolute; background: var(--ink); }
.bm__x::before { left: 6px; top: 0; width: 1px; height: 13px; } .bm__x::after { top: 6px; left: 0; height: 1px; width: 13px; }

/* N · Rečenica */
.bn { max-width: 1100px; margin-inline: auto; }
.bn__t { font-size: clamp(28px, 3.6vw, 52px); font-weight: 500; line-height: 1.25; letter-spacing: -0.035em; }
.bn__w { color: color-mix(in srgb, var(--ink) calc(18% + var(--f, 0) * 82%), transparent); }
.bn__n { display: inline-flex; padding: 0 .18em; margin-inline: .04em; border-radius: 8px; background: color-mix(in srgb, var(--blue) calc(6% + var(--f, 0) * 6%), transparent); color: color-mix(in srgb, var(--blue) calc(30% + var(--f, 0) * 70%), transparent); vertical-align: baseline; }
.bn__n .bnum { font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.bn__n .bnum i, .bn__n .bnum small { color: inherit; }
.bn__src { margin-top: 32px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* O · Zaslon instrumenta */
.bo { --lcd: #a3ceeb; padding: 24px; border-radius: 20px; background: #06070b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(28, 71, 99, .5); overflow: hidden; }
.bo__top { display: flex; justify-content: space-between; gap: 16px; padding: 0 8px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.bo__rec { display: inline-flex; align-items: center; gap: 8px; color: var(--lcd); }
.bo__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--lcd); box-shadow: 0 0 10px var(--lcd); animation: borec 1.6s steps(2) infinite; }
@keyframes borec { 50% { opacity: .2; } }
.bo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo__ch { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 8px; background: linear-gradient(180deg, #0c1014, #080c0e); box-shadow: inset 0 0 0 1px rgba(148, 198, 231, .14); overflow: hidden; }
.bo__ch::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.bo__lab { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.bnum--lcd { font-family: var(--mono); font-size: clamp(44px, 5.4vw, 80px); font-weight: 500; letter-spacing: -0.04em; color: var(--lcd); text-shadow: 0 0 18px rgba(148, 198, 231, .55); }
.bnum--lcd i { color: rgba(163, 206, 235, .7) !important; }
.bo__u { font-size: 14px; color: rgba(255, 255, 255, .7); }
.bo__bar { display: flex; gap: 4px; margin-top: 8px; }
.bo__bar i { flex: 1; height: 6px; border-radius: 1px; background: rgba(148, 198, 231, .12); }
.bo.is-in .bo__bar i { animation: bobar 1.6s steps(1) both; animation-delay: calc(var(--j) * 45ms); }
@keyframes bobar { to { background: var(--lcd); box-shadow: 0 0 6px rgba(148, 198, 231, .6); } }
.bo__tick { margin: 16px -24px -24px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .08); overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: 13px; color: rgba(255, 255, 255, .6); }
.bo__tick > div { display: inline-flex; gap: 24px; padding-left: 24px; animation: bkm 40s linear infinite; }
.bo__tick b { color: var(--lcd); font-weight: 500; }
.bo__tick i { font-style: normal; color: rgba(255, 255, 255, .25); }

/* P · Okretne kartice */
.bp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; perspective: 1400px; }
.bp__c { position: relative; display: grid; min-height: 240px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transform-style: preserve-3d; transition: transform .8s var(--ease); opacity: 0; translate: 0 20px; }
.bp.is-in .bp__c { opacity: 1; translate: 0 0; transition: transform .8s var(--ease), opacity .6s calc(var(--i) * 60ms), translate .8s var(--ease) calc(var(--i) * 60ms); }
@media (hover: hover) { .bp__c:hover { transform: rotateY(180deg); } }
.bp__c.is-flip { transform: rotateY(180deg); }
.bp__f, .bp__b { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bp__f { background: #fff; border: 1px solid var(--line-10); box-shadow: var(--shadow); }
.bp__b { transform: rotateY(180deg); background: var(--blue); color: #fff; }
.bp__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bp__b .bp__k { color: rgba(255, 255, 255, .7); }
.bp__l { margin-top: auto; font-size: 15px; color: var(--text); }
.bp__h { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-16); font-size: 16px; color: var(--muted); }
.bp__d { font-size: 16px; line-height: 1.45; }
.bp__b b { margin-top: auto; font-size: 28px; font-weight: 500; letter-spacing: -0.03em; }

@media (max-width: 960px) {
  .bl { grid-template-columns: 1fr; gap: 24px; }
  .bl__stage { min-height: 340px; padding: 24px; }
  .bl__list { display: none; }
  .bm { grid-template-columns: 1fr 1fr; }
  .bm__c { min-height: 0; padding: 24px; border-right: 1px solid var(--line-10) !important; border-bottom: 1px solid var(--line-10) !important; }
  .bm__c:nth-child(2n) { border-right: 0 !important; }
  .bm__d { opacity: 1; transform: none; }
  .bm__x { display: none; }
  .bo__grid { grid-template-columns: 1fr; }
  .bo__top span:last-child { display: none; }
  .bp { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bp__c { min-height: 200px; }
  .bp__f, .bp__b { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bo__tick > div, .bo__rec i { animation: none; } }

/* v9 · tamna kartica O nama + brojke: iznad heroja (cijevi idu "iza"), malo prekriva dno heroja,
   skrivena dok se ne krene skrolati, onda izroni odozdo (onama.js → .is-wait / .is-up) */
html[data-onama="tamno"] .stat { position: relative; z-index: 2; margin-top: -48px; box-shadow: 0 -30px 60px -30px rgba(19, 42, 57, .35); transition: transform 1.3s cubic-bezier(.16, 1, .3, 1), opacity .9s ease, box-shadow 1.3s, visibility 0s; }
/* skrivena već prije prvog iscrtavanja (html.is-js iz <head>), ne tek kad se učita onama.js — inače bi "bljesnula" */
html.is-js .stat:not(.is-up) { transform: translate3d(0, 220px, 0) scale(.94); opacity: 0; visibility: hidden; }
html.is-js .stat:not(.is-up) * { animation-play-state: paused; }
html[data-onama="tamno"] .stat.is-up { visibility: visible; }
@media (max-width: 760px) { html[data-onama="tamno"] .stat { margin-top: -32px; } html.is-js .stat:not(.is-up) { transform: translate3d(0, 140px, 0) scale(.96); } }
@media (prefers-reduced-motion: reduce) { html[data-onama="tamno"] .stat { transition: none; } }

/* =====================================================================
   v9 · STATISTIKA (tamna) — statistika.js, 5 verzija (Lab → Statistika)
   ===================================================================== */
.ds { margin: 0 16px; border-radius: 20px; background: radial-gradient(80% 50% at 50% 0%, #172732 0%, #0a0a0b 62%); color: #fff; overflow: hidden; }
.ds__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 64px; text-align: center; }
.ds__eye { color: #94c6e7; } .ds__eye i { background: #94c6e7; }
.ds__lead { max-width: 52ch; color: rgba(255, 255, 255, .62); }
.ds__body { position: relative; }

/* kartica */
.dsc { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; min-height: 260px; padding: 24px; border-radius: 16px; background: linear-gradient(180deg, #17181d, #0f1014); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); transition: background .6s, border-color .6s, box-shadow .6s, transform .6s var(--ease); }
.dsc__top { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 8px 12px 8px 16px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.dsc__chip { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: #fff; }
.dsc__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #94c6e7; }
.dsc__meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dsc__mid { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
.dsc__sub { font-size: 14px; color: rgba(255, 255, 255, .78); }
.dsc__spark { flex: none; width: 110px; height: 30px; overflow: visible; }
.dsc__spark path { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.65, 0, .35, 1) .3s; }
.ds__body.is-in .dsc__spark path, .dsb__p.is-on .dsc__spark path { stroke-dashoffset: 0; }
.dsn { display: inline-flex; align-items: baseline; gap: .04em; font-size: clamp(48px, 5vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsn i { font-style: normal; font-size: .5em; color: rgba(255, 255, 255, .62); letter-spacing: -0.01em; }
.dsn--xl { font-size: clamp(64px, 8vw, 120px); }
.dsc__l { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .58); }

/* snop svjetla (zajedničko) */
.ds__beam { position: absolute; z-index: 0; left: var(--bx, 50%); bottom: 0; width: var(--bw, 33%); height: 300px; translate: -50% 0; pointer-events: none; transition: left .7s var(--ease), width .7s var(--ease); }
.ds__beam::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -20%; background: radial-gradient(42% 100% at 50% 100%, rgba(88, 166, 218, .85), rgba(41, 128, 185, .32) 45%, transparent 78%); filter: blur(26px); }
.ds__beam::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 70%; background: linear-gradient(to top, rgba(174, 212, 237, .55), transparent); filter: blur(14px); }
.ds__beam > i { position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px; border-radius: 3px; background: #bcdbf0; box-shadow: 0 0 18px 4px rgba(68, 156, 214, .9), 0 0 60px 10px rgba(41, 128, 185, .55); }

/* A · Snop svjetla */
.dsa { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 128px; }
.dsa .dsc, .dse .dsc { min-height: 320px; }
.dsa .dsn, .dse .dsn { font-size: clamp(56px, 5.6vw, 84px); }
.dsa .dsc.is-on { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(42, 133, 193, .22)); border-color: rgba(148, 198, 231, .3); box-shadow: inset 0 -80px 90px -50px rgba(68, 156, 214, .75), 0 30px 60px -30px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dsa .dsc { cursor: default; }

/* B · Jedna kartica */
.dsb__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.dsb__tab { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 24px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .6); font: inherit; font-size: 16px; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .3s, color .3s, border-color .3s; }
.dsb__tab small { font-size: 12px; color: #94c6e7; }
.dsb__tab:hover { color: #fff; }
.dsb__tab.is-on { background: rgba(255, 255, 255, .08); border-color: rgba(148, 198, 231, .3); color: #fff; }
.dsb__tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.dsb__tab em { display: block; height: 100%; background: #94c6e7; transform-origin: 0 50%; transform: scaleX(0); }
.dsb.is-play:not(.is-user) .dsb__tab.is-on em { animation: bhpr 4.5s linear forwards; }
.dsb__stage { position: relative; display: grid; padding-bottom: 128px; }
.dsb__p { grid-area: 1 / 1; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: end; padding: 40px; border-radius: 20px; border: 1px solid rgba(148, 198, 231, .28); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(42, 133, 193, .2)); box-shadow: inset 0 -100px 120px -60px rgba(68, 156, 214, .7); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.dsb__p.is-on { opacity: 1; visibility: visible; transition: opacity .6s; }
.dsb__l { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.dsb__l .dsc__chip { padding: 8px 16px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.dsb__spark { width: 100%; height: 90px; }
.dsb__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dsb__row small { display: block; margin-bottom: 4px; font-size: 12px; color: rgba(255, 255, 255, .45); }
.dsb__row b { font-size: 16px; font-weight: 500; }
.ds__beam--c { --bw: 70%; }

/* C · Mjerači */
.dsk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dsc--g { align-items: stretch; min-height: 0; }
.dsk__g { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.dsg { width: 100%; max-width: 240px; overflow: visible; }
.dsg__t line { stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.dsg__tr, .dsg__arc { fill: none; stroke-width: 5; stroke-linecap: round; }
.dsg__tr { stroke: rgba(255, 255, 255, .08); }
.dsg__arc { stroke: #94c6e7; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(68, 156, 214, .9)); transition: stroke-dashoffset 1.6s cubic-bezier(.25, 1, .5, 1) calc(var(--gi) * 150ms + .2s); }
.dsg__n { transform-origin: 90px 88px; transform: rotate(180deg); transition: transform 1.6s cubic-bezier(.34, 1.3, .5, 1) calc(var(--gi) * 150ms + .2s); }
.dsg__n :is(path, circle) { fill: #fff; }
.ds__body.is-in .dsg__arc { stroke-dashoffset: 0; }
.ds__body.is-in .dsg__n { transform: rotate(360deg); }
.dsk .dsn { margin-top: -8px; }
.dsk__x { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.dsk .dsc:hover { border-color: rgba(148, 198, 231, .35); box-shadow: inset 0 -80px 90px -60px rgba(68, 156, 214, .6); }

/* D · Traka */
.dsd { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: #0f1014; overflow: hidden; }
.dsd__c { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.dsd__c + .dsd__c { border-left: 1px solid rgba(255, 255, 255, .08); }
.dsd__spark { width: 100%; height: 56px; margin-top: auto; }
.dsd__x { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; color: rgba(255, 255, 255, .62); }
.dsd__sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(68, 156, 214, .22), transparent); pointer-events: none; animation: dsdsw 7s cubic-bezier(.65, 0, .35, 1) infinite; }
.dsd__sweep::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 60%; height: 2px; translate: -50% 0; background: #94c6e7; box-shadow: 0 0 20px 4px rgba(68, 156, 214, .8); }
@keyframes dsdsw { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* E · Perspektiva */
.dse { --tx: 0; position: relative; padding: 24px 0 170px; perspective: 1400px; }
.dse__floor { position: absolute; left: -20%; right: -20%; bottom: -40px; height: 380px; transform: rotateX(72deg); transform-origin: 50% 100%; background:
  radial-gradient(40% 60% at 50% 100%, rgba(68, 156, 214, .5), transparent 70%),
  repeating-linear-gradient(90deg, rgba(148, 198, 231, .16) 0 1px, transparent 1px 64px),
  repeating-linear-gradient(0deg, rgba(148, 198, 231, .16) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent); }
.dse__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(calc(var(--tx) * 7deg)); }
@media (min-width: 961px) { .dse .dsc { -webkit-box-reflect: below 10px linear-gradient(transparent 62%, rgba(255, 255, 255, .14)); } }
.dse .dsc:nth-child(2) { transform: translateZ(40px); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(42, 133, 193, .22)); border-color: rgba(148, 198, 231, .3); box-shadow: inset 0 -80px 90px -50px rgba(68, 156, 214, .75); }
.dse .dsc:nth-child(1) { transform: translateZ(-20px) rotateY(10deg); }
.dse .dsc:nth-child(3) { transform: translateZ(-20px) rotateY(-10deg); }
.ds__beam--e { --bw: 30%; height: 220px; left: calc(50% + var(--tx) * 30px); }

@media (prefers-reduced-motion: reduce) { .dsd__sweep { animation: none; } }
@media (max-width: 960px) {
  .ds { margin: 0 8px; }
  .ds__head { margin-bottom: 40px; }
  .dsa, .dsk, .dsd, .dse__row { grid-template-columns: 1fr; gap: 12px; }
  .dsa { padding-bottom: 0; }
  .dsa .ds__beam { display: none; }
  .dsc { min-height: 0; }
  .dsb__tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .dsb__tab { flex: none; }
  .dsb__p { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .dsb__stage { padding-bottom: 96px; }
  .dsd__c + .dsd__c { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .dsd__c { padding: 24px; }
  .dse { padding-bottom: 128px; }
  .dse__row { transform: none; }
  .dse .dsc:nth-child(n) { transform: none; }
}

/* =====================================================================
   v9 · KAKO RADIMO (iz v4 — "Pikseli"; kako.js + pixels.js)
   ===================================================================== */
.kr__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 64px; text-align: center; }
.kr__head .eyebrow { justify-content: center; }
.pcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-10); border-bottom: 1px solid var(--line-10); }
.pcol { display: grid; align-content: start; gap: 12px; padding: 32px 32px 40px; }
.pcol + .pcol { border-left: 1px solid var(--line-10); }
.pcol__art { display: grid; place-items: center; aspect-ratio: 1.25; margin-bottom: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-10); background-image: radial-gradient(rgba(10, 10, 11, .14) 1px, transparent 1.2px); background-size: 14px 14px; overflow: hidden; transition: border-color .3s; }
.pcol:hover .pcol__art { border-color: var(--blue); }
.pcol__art .pixel { width: min(52%, 180px); }
.pcol__n { font-family: var(--mono); font-size: 13px; color: var(--blue); }
.pcol h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.04em; }
.pcol p { max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--text); }
.pixel { aspect-ratio: 1; width: 100%; }
.pixel canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
@media (max-width: 960px) {
  .kr__head { margin-bottom: 40px; }
  .pcols { grid-template-columns: 1fr; }
  .pcol { padding: 24px 0 32px; }
  .pcol + .pcol { border-left: 0; border-top: 1px solid var(--line-10); }
}

/* v9 · STATISTIKA — brojka uvijek stane u svoj stupac (container query) + trake F–I */
.dsd__c, .dsi__b { container-type: inline-size; min-width: 0; }
.dsn--fit { font-size: clamp(44px, 20cqi, 104px); }
.dsn--row { font-size: clamp(44px, 16cqi, 88px); }
.dsd--calm .dsd__c { transition: background-color .4s; }
.dsd--calm .dsd__c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #94c6e7; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.dsd--calm .dsd__c:hover { background: rgba(255, 255, 255, .03); }
.dsd--calm .dsd__c:hover::before { transform: none; }

/* G · mjerilo: marker klizne po skali (ukrasno) */
.dsg2__h { display: flex; align-items: center; gap: 12px; }
.dsg2__no { font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, .4); }
.dsg2__h .dsc__chip { font-size: 18px; }
.dsr { position: relative; margin-top: auto; padding-top: 16px; }
.dsr__t { display: flex; justify-content: space-between; align-items: flex-end; height: 18px; }
.dsr__t i { width: 1px; height: 6px; background: rgba(255, 255, 255, .22); }
.dsr__t i.m { height: 10px; background: rgba(255, 255, 255, .35); }
.dsr__t i.M { height: 18px; background: rgba(255, 255, 255, .55); }
.dsr__m { position: absolute; left: 0; bottom: -4px; width: 9px; height: 9px; translate: -4px 0; border-radius: 50%; background: #94c6e7; box-shadow: 0 0 10px rgba(148, 198, 231, .9); transition: left 1.8s cubic-bezier(.25, 1, .5, 1) calc(var(--i) * 150ms + .3s); }
.dsr__m::before { content: ""; position: absolute; left: 4px; bottom: 9px; width: 1px; height: 30px; background: linear-gradient(to top, #94c6e7, transparent); }
.ds__body.is-in .dsd__c:nth-child(1) .dsr__m { left: 80%; }
.ds__body.is-in .dsd__c:nth-child(2) .dsr__m { left: 50%; }
.ds__body.is-in .dsd__c:nth-child(3) .dsr__m { left: 75%; }
.dsd--ruler .dsd__x { margin-top: 0; }

/* H · raster: tanke crte, oznake "+" na kutovima, jedan signal preko sva tri stupca */
.dsd--grid { overflow: visible; border-radius: 0; border-color: rgba(255, 255, 255, .12); background: transparent; }
.dsd--grid .dsd__c { padding-bottom: 128px; }
.dsx { position: absolute; z-index: 2; width: 15px; height: 15px; translate: -7px -7px; }
.dsx::before, .dsx::after { content: ""; position: absolute; background: rgba(255, 255, 255, .6); }
.dsx::before { left: 7px; top: 0; width: 1px; height: 15px; } .dsx::after { top: 7px; left: 0; height: 1px; width: 15px; }
.dsx--1 { left: 0; top: 0; } .dsx--2 { left: 100%; top: 0; } .dsx--3 { left: 0; top: 100%; } .dsx--4 { left: 100%; top: 100%; }
.dsh__line { position: absolute; left: 0; right: 0; bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; }
.dsh__sp { width: 100%; height: 60px; }
.dsh__sp path { stroke: #94c6e7; }

/* I · redovi: tri vodoravna reda u jednoj ploči */
.dsi { border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: #0f1014; overflow: hidden; }
.dsi__r { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px; transition: background-color .4s; }
.dsi__r + .dsi__r { border-top: 1px solid rgba(255, 255, 255, .08); }
.dsi__r:hover { background: rgba(255, 255, 255, .03); }
.dsi__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dsi__b { display: flex; flex-direction: column; gap: 8px; }
.dsi__c { display: flex; flex-direction: column; gap: 12px; }
.dsi__sp { width: 100%; height: 44px; }
.dsi .dsd__x { padding-top: 12px; }

@media (max-width: 960px) {
  .dsd--grid .dsd__c { padding-bottom: 24px; }
  .dsh__line { display: none; }
  .dsi__r { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .dsn--fit, .dsn--row { font-size: clamp(48px, 18cqi, 80px); }
}

/* v9 · KAKO RADIMO · U BROJKAMA — ista struktura kao v4 "Pikseli", tamna pozadina, podaci + krivulje iz Statistike */
html[data-krd="1"] .kr { margin: 0 16px; border-radius: 20px; background: radial-gradient(80% 50% at 50% 0%, #172732 0%, #0a0a0b 62%); color: #fff; }
html[data-krd="1"] .kr .eyebrow { color: #94c6e7; } html[data-krd="1"] .kr .eyebrow i { background: #94c6e7; }
html[data-krd="1"] .kr .lead17 { color: rgba(255, 255, 255, .62); }
html[data-krd="1"] .pcols { border-color: rgba(255, 255, 255, .1); }
html[data-krd="1"] .pcol + .pcol { border-left-color: rgba(255, 255, 255, .1); }
.pcol__art--g { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; padding: 24px; background-color: #0f1014; border-color: rgba(255, 255, 255, .08); background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.2px); }
.pcol:hover .pcol__art--g { border-color: rgba(148, 198, 231, .45); box-shadow: inset 0 -60px 80px -50px rgba(68, 156, 214, .55); }
.pcol__gh { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 8px 12px 8px 16px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.pcol__gh .dsc__chip { font-size: 17px; }
.pcol__sp { width: 100%; height: 46%; }
.pcol__sp path { stroke: #94c6e7; stroke-width: 1.8; filter: drop-shadow(0 0 6px rgba(68, 156, 214, .8)); }
.pcol.is-in .pcol__sp path { stroke-dashoffset: 0; }
.pcol__gs { font-size: 13px; color: rgba(255, 255, 255, .62); }
html[data-krd="1"] .pcol__n { color: #94c6e7; }
.pcol__v { display: flex; align-items: baseline; gap: .04em; font-size: clamp(48px, 4.6vw, 72px) !important; font-weight: 500 !important; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcol__v i { font-style: normal; font-size: .5em; color: #94c6e7; letter-spacing: -0.01em; }
html[data-krd="1"] .pcol p { color: rgba(255, 255, 255, .78); }
html[data-krd="1"] .pcol p span { color: rgba(255, 255, 255, .5); }
@media (max-width: 960px) { html[data-krd="1"] .kr { margin: 0 8px; } html[data-krd="1"] .pcol { padding-inline: 0; } }

/* v9 · KAKO RADIMO · još tamnih verzija (Mjerač, Pikseli tamno, Brojka u okviru, Mjerilo) */
.pcol__gg { display: grid; place-items: center; flex: 1; }
.pcol__gg .dsg { max-width: 230px; }
.pcol.is-in .dsg__arc { stroke-dashoffset: 0; }
.pcol.is-in .dsg__n { transform: rotate(360deg); }
.pcol__px { width: min(46%, 150px); align-self: center; margin-block: auto; }
.pcol--okvir .pcol__art--g { justify-content: flex-end; gap: 8px; }
.pcol--okvir .pcol__gh { position: absolute; top: 20px; left: 20px; padding: 8px 12px; }
.pcol__sp--bg { position: absolute; left: 0; right: 0; top: 18%; height: 50%; width: 100%; opacity: .55; }
.pcol__big { position: relative; display: flex; align-items: baseline; gap: .04em; font-size: clamp(48px, 5vw, 80px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.pcol__big i { font-style: normal; font-size: .5em; color: #94c6e7; }
.pcol--okvir .pcol__gs { position: relative; }
.pcol__t { font-size: clamp(24px, 2.2vw, 32px); }
.pcol__rl { position: relative; margin-block: auto; padding-top: 24px; }
.pcol__rl .dsr__m { left: 0; bottom: 18px; transition: left 1.8s cubic-bezier(.25, 1, .5, 1) calc(var(--i, 0) * 150ms + .3s); }
.pcol.is-in .pcol__rl .dsr__m { left: var(--m); }
.pcol__rn { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, .35); }

/* v9 · klijent: naslov "Brojke koje se mjere" + podnaslov sakriveni (ostaju u HTML-u, vraća se brisanjem ovog pravila) */
#brojke .stat__head { display: none; }
.flogo__w--real { font-family: var(--font, Barlow), sans-serif; font-weight: 600; letter-spacing: -0.02em; }
/* brojke N (Rečenica) na tamnoj kartici: tekst svijetli umjesto tamnog */
html[data-onama="tamno"] .bn__w { color: color-mix(in srgb, #fff calc(22% + var(--f, 0) * 78%), transparent); }
html[data-onama="tamno"] .bn__n { color: #94c6e7; background: rgba(148, 198, 231, .12); }

/* =====================================================================
   v9 · CTA + FOOTER KOMBINACIJE (footer.js KA–KE) — zamjenjuju sekciju #kontakt i footer
   ===================================================================== */
html[data-combo]:not([data-combo=""]) #kontakt-izvorni { display: none; }
.cx { --gx: max(var(--gut, 64px), calc((100% - 1440px) / 2 + var(--gut, 64px))); }
.cx .fa { width: 18px; height: 18px; }

/* KA · Krug (United Carriers) */
.cxa__cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 760px; padding: 128px var(--gx); background: #111214; color: #fff; text-align: center; overflow: hidden; }
.cxa__rings { position: absolute; left: 50%; top: 50%; width: min(1100px, 130vw); translate: -50% -50%; pointer-events: none; }
.cxa__rings circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.2; }
.cxa__tk { transform-origin: 500px 500px; animation: cxarot 80s linear infinite; }
.cxa__tk line { stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
@keyframes cxarot { to { transform: rotate(360deg); } }
.cxa__k { position: relative; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #94c6e7; }
.cxa__h { position: relative; font-size: clamp(56px, 8vw, 128px); font-weight: 700; line-height: .92; letter-spacing: -0.04em; text-transform: uppercase; }
.cxa__p { position: relative; max-width: 36ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.cxa__go { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; width: 140px; height: 140px; margin-top: 16px; border-radius: 50%; background: #fff; color: #0a0a0b; font-size: 15px; font-weight: 600; line-height: 1.15; transition: background-color .3s, color .3s, transform .3s; }
.cxa__go:hover { background: var(--blue); color: #fff; }
.cxa__f { padding: 48px var(--gx) 24px; background: #fff; color: #0a0a0b; }
.cxa__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-10); }
.cxa__top p { font-size: 15px; line-height: 1.4; }
.cxa__top .fz__logo img { width: 140px; }
.cxa__m { margin-bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cxa__m--gap { margin-top: 24px; }
.cxa__grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 32px; padding: 40px 0; }
.cxa__cert { display: flex; flex-wrap: wrap; gap: 8px; }
.cxa__cert li { padding: 8px 12px; border: 1px solid var(--line-16); border-radius: 6px; font-size: 13px; }
.cxa__nav ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 64px; }
.cxa__nav a, .cxa__plain a { font-size: 16px; font-weight: 500; }
.cxa__nav a:hover, .cxa__plain a:hover, .cxa__v a:hover { color: var(--blue); }
.cxa__plain { display: flex; flex-direction: column; gap: 8px; }
.cxa__tabs { padding: 24px 0 32px; border-bottom: 1px solid var(--line-10); }
.cxa__tl { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 8px; background: var(--grey, #f1f1ef); }
.cxa__tl button { padding: 8px 12px; border: 0; border-radius: 6px; background: none; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.cxa__tl button.is-on { background: #fff; color: #0a0a0b; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cxa__mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cxa__mq > div { display: inline-flex; align-items: center; gap: 24px; white-space: nowrap; animation: bkm 40s linear infinite; }
.cxa__mq a { font-size: clamp(28px, 3vw, 44px); font-weight: 500; letter-spacing: -0.03em; color: #c3c5cb; transition: color .3s; }
.cxa__mq a:hover { color: #0a0a0b; }
.cxa__mq i { font-style: normal; color: #c3c5cb; font-size: 24px; }
.cxa__mq:hover > div { animation-play-state: paused; }
.cxa__row { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 32px; align-items: start; padding: 40px 0; }
.cxa__art { position: relative; aspect-ratio: 1.6; border-radius: 16px; background: #0a0a0b; overflow: hidden; }
.cxa__art .hlines { position: absolute; inset: 0; }
.cxa__v { font-size: 16px; font-weight: 500; line-height: 1.4; }
.cxa__dir { display: inline-block; margin-top: 8px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.cxa__map { position: relative; aspect-ratio: 1.4; }
.cxa__map canvas { width: 100%; height: 100%; }
.cxa__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 16px; border-top: 1px solid var(--line-10); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cxa__legal nav { display: flex; gap: 24px; } .cxa__legal a:hover { color: #0a0a0b; }

/* KB · Jedan tamni blok + obrazac */
.cxb { margin: 0 16px 16px; padding: 96px calc(var(--gx) - 16px) 0; border-radius: 20px; background: radial-gradient(70% 50% at 20% 0%, #1c3445 0%, #0a0a0b 60%); color: #fff; overflow: hidden; }
.cxb__cta { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; padding-bottom: 96px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cxb__k { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 500; color: #94c6e7; }
.cxb__k i { width: 8px; height: 8px; border-radius: 2px; background: #94c6e7; }
.cxb__h { font-size: clamp(44px, 5.6vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.cxb__p { max-width: 40ch; margin-top: 24px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .65); }
.cxb__con { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 40px; }
.cxb__con a { display: flex; flex-direction: column; gap: 4px; font-size: 20px; font-weight: 500; }
.cxb__con small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.cxb__con a:hover { color: #94c6e7; }
.cxb__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 32px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.cxb__form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.cxb__full { grid-column: 1 / -1; }
.cxb__form :is(input, select, textarea) { width: 100%; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: rgba(0, 0, 0, .3); color: #fff; font: inherit; font-size: 15px; transition: border-color .2s; }
.cxb__form :is(input, select, textarea):focus { outline: none; border-color: #94c6e7; }
.cxb__form select option { color: #0a0a0b; }
.cxb__send { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 0; border-radius: 8px; background: #fff; color: #0a0a0b; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color .3s, color .3s; }
.cxb__send:hover { background: var(--blue); color: #fff; }
.cxb__note { grid-column: 1 / -1; font-size: 12px; color: rgba(255, 255, 255, .4); }
.cxb__note.is-on { color: #94c6e7; animation: cxbn .5s; }
@keyframes cxbn { from { transform: translateY(4px); opacity: 0; } }
.cxb__f { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1.2fr; gap: 48px; padding: 64px 0; }
.cxb__f .fz__logo { padding: 8px 12px; border-radius: 8px; background: #fff; }
.cxb__fp { margin: 16px 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.cxb__m { margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.cxb__f :is(li a, .fz__plain li) { color: rgba(255, 255, 255, .72); }
.cxb__f .fz__tree .fz__area a, .cxb__f .fz__con li a { color: #fff; }
.cxb__f .fz__tree .fz__sub a { border-left-color: rgba(255, 255, 255, .14); }
.cxb__f li a:hover { color: #94c6e7; }
.cxb__f .fz__chips li { border-color: rgba(255, 255, 255, .16); color: #fff; }
.cxb__legal.fz__bot { margin-top: 0; border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); }
.cxb__legal.fz__bot a:hover { color: #fff; }

/* KC · Plavi e-mail */
.cxc__cta { position: relative; padding: 0 var(--gx) 80px; background: var(--blue); color: #fff; overflow: hidden; }
.cxc__mq { margin: 0 calc(var(--gx) * -1) 80px; padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, .25); overflow: hidden; white-space: nowrap; }
.cxc__mq > div { display: inline-flex; align-items: center; gap: 32px; animation: bkm 36s linear infinite; }
.cxc__mq span { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.cxc__mq i { font-style: normal; opacity: .6; }
.cxc__k { font-size: 18px; color: rgba(255, 255, 255, .85); }
.cxc__mail { margin-top: 16px; }
.cxc__mail button { display: inline-block; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; line-height: 1; letter-spacing: -0.045em; white-space: nowrap; cursor: copy; transition: opacity .3s; }
.cxc__mail button:hover { opacity: .85; }
.cxc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 17px; font-weight: 500; }
.cxc__row a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cxc__hint { margin-right: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.cxc__toast { position: absolute; right: var(--gx); top: 100px; padding: 12px 16px; border-radius: 8px; background: #fff; color: #0a0a0b; font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; }
.cxc__toast.is-on { opacity: 1; transform: none; }
.cxc__f { padding: 80px var(--gx) 0; background: #fff; color: #0a0a0b; }
.cxc__cols { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 48px; }
.cxc__fp { margin-top: 24px; font-size: 15px; line-height: 1.5; color: var(--text); }
.cxc__word { margin-top: 64px; overflow: hidden; }
.cxc__word span { display: inline-block; font-weight: 700; line-height: .78; letter-spacing: -0.05em; white-space: nowrap; color: #0a0a0b; translate: 0 6%; }
.cxc .fz__bot { margin-top: 0; }

/* KD · Manometar */
.cxd { --p: 0; }
.cxd__cta { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; padding: 128px var(--gx); background: #f4f5f8; }
.cxd__g { position: relative; width: min(100%, 460px); justify-self: center; }
.cxd__g svg { display: block; width: 100%; overflow: visible; }
.cxd__face { fill: #fff; stroke: var(--line-10); stroke-width: 1.5; filter: drop-shadow(0 30px 40px rgba(19, 42, 57, .12)); }
.cxd__tk line { stroke: rgba(10, 10, 11, .35); stroke-width: 2; }
.cxd__arc { fill: none; stroke: var(--blue); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); }
.cxd__n { transform-origin: 200px 200px; transform: rotate(calc(-135deg + var(--p) * 270deg)); }
.cxd__n :is(path, circle) { fill: #0a0a0b; }
.cxd__read { position: absolute; left: 0; right: 0; bottom: 18%; display: flex; flex-direction: column; align-items: center; }
.cxd__read b { font-family: var(--mono); font-size: 44px; font-weight: 500; letter-spacing: -0.04em; color: #0a0a0b; }
.cxd__read small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cxd__k { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 500; color: var(--blue); }
.cxd__k i { width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.cxd__h { font-size: clamp(48px, 6vw, 96px); font-weight: 600; line-height: .98; letter-spacing: -0.05em; }
.cxd__p { max-width: 42ch; margin-top: 24px; font-size: 17px; line-height: 1.5; color: var(--text); }
.cxd__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }
.cxd__tel { font-size: 18px; font-weight: 500; } .cxd__tel:hover { color: var(--blue); }
.cxd__f { padding: 80px var(--gx) 0; background: #0a0a0b; color: #fff; }
.cxd__grid { position: relative; display: grid; grid-template-columns: 1fr .8fr 1.3fr 1.1fr; border: 1px solid rgba(255, 255, 255, .12); }
.cxd__c { padding: 32px; }
.cxd__c + .cxd__c { border-left: 1px solid rgba(255, 255, 255, .12); }
.cxd__c .fz__logo { padding: 8px 12px; border-radius: 8px; background: #fff; }
.cxd__c > p:not(.cxd__m) { margin-top: 16px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.cxd__m { margin-bottom: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.cxd__m--gap { margin-top: 24px; }
.cxd__cert { font-size: 13px; color: rgba(255, 255, 255, .7); }
.cxd__f :is(li a, .fz__plain li) { color: rgba(255, 255, 255, .72); }
.cxd__f .fz__tree .fz__area a, .cxd__f .fz__con li a { color: #fff; }
.cxd__f .fz__tree .fz__sub a { border-left-color: rgba(255, 255, 255, .14); }
.cxd__f li a:hover { color: #94c6e7; }
.cxd__legal.fz__bot { margin-top: 0; border-top: 0; color: rgba(255, 255, 255, .45); }

/* KE · Otkrivanje: kartica CTA klizi preko footera koji je "ispod" */
.cxe { position: relative; }
.cxe__cta { position: relative; z-index: 2; padding: 128px var(--gx) 96px; border-radius: 0 0 20px 20px; background: #fff; box-shadow: 0 40px 60px -30px rgba(16, 32, 43, .25); }
.cxe__in { max-width: 1312px; margin-inline: auto; }
.cxe__k { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 500; color: var(--blue); }
.cxe__k i { width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.cxe__h { font-size: clamp(56px, 8.4vw, 136px); font-weight: 600; line-height: .92; letter-spacing: -0.055em; }
.cxe__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-10); }
.cxe__row p { max-width: 44ch; font-size: 17px; line-height: 1.5; color: var(--text); }
.cxe__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cxe__f { position: sticky; bottom: 0; z-index: 1; margin-top: -40px; padding: 128px var(--gx) 0; background: #0a0a0b; color: #fff; }
.cxe__cols { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1.2fr; gap: 48px; padding-bottom: 64px; }
.cxe__cols .fz__logo { padding: 8px 12px; border-radius: 8px; background: #fff; }
.cxe__fp { margin: 16px 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.cxe__m { margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.cxe__f :is(li a, .fz__plain li) { color: rgba(255, 255, 255, .72); }
.cxe__f .fz__tree .fz__area a, .cxe__f .fz__con li a { color: #fff; }
.cxe__f .fz__tree .fz__sub a { border-left-color: rgba(255, 255, 255, .14); }
.cxe__f li a:hover { color: #94c6e7; }
.cxe__f .fz__chips li { border-color: rgba(255, 255, 255, .16); color: #fff; }
.cxe__legal.fz__bot { margin-top: 0; border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); }

@media (prefers-reduced-motion: reduce) { .cxa__tk, .cxa__mq > div, .cxc__mq > div { animation: none; } }
@media (max-width: 960px) {
  .cxa__cta { min-height: 600px; padding-block: 96px; }
  .cxa__go { width: 120px; height: 120px; }
  .cxa__grid, .cxa__row { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cxa__nav { grid-column: 1 / -1; order: -1; }
  .cxa__nav ul { grid-template-columns: repeat(2, auto); gap: 8px 32px; }
  .cxa__top { flex-direction: column-reverse; align-items: flex-start; }
  .cxb { margin: 0 8px 8px; padding-top: 64px; }
  .cxb__cta { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
  .cxb__form { grid-template-columns: 1fr; padding: 24px; }
  .cxb__f, .cxc__cols, .cxe__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .cxb__f > :first-child, .cxe__cols > :first-child { grid-column: 1 / -1; }
  .cxc__mq { margin-bottom: 48px; }
  .cxc__toast { top: 72px; }
  .cxd__cta { grid-template-columns: 1fr; gap: 40px; padding-block: 80px; }
  .cxd__g { width: min(100%, 320px); }
  .cxd__grid { grid-template-columns: 1fr 1fr; }
  .cxd__c { padding: 24px; }
  .cxd__c:nth-child(odd) { border-left: 0 !important; }
  .cxd__c:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
  .cxe__cta { padding-block: 80px; border-radius: 0 0 20px 20px; }
  .cxe__f { position: relative; padding-top: 80px; }
}
@media (max-width: 560px) { .cxa__grid, .cxa__row, .cxc__cols { grid-template-columns: 1fr; } .cxd__grid { grid-template-columns: 1fr; } .cxd__c { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .12); } }

/* kombinacije: zajedničke varijable footera (svijetle / tamne) */
.cx .fz { --f-fg: #0a0a0b; --f-mut: var(--text); --f-faint: #8b909a; --f-line: rgba(10, 10, 11, .1); --f-acc: var(--blue); }
.cx :is(.cxb__f, .cxd__f, .cxe__f) { --f-fg: #fff; --f-mut: rgba(255, 255, 255, .72); --f-faint: rgba(255, 255, 255, .45); --f-line: rgba(255, 255, 255, .14); --f-acc: #94c6e7; }
.cx .fz__bot { padding-bottom: 32px; }
.cxb__legal.fz__bot { padding-inline: 0; }

/* v9 · partneri: stvarni logotipi (primjeri) — jednobojno, prijelazom miša puna tamnoća */
.flogo--img { display: inline-flex; align-items: center; justify-content: center; }
.flogo--img img { display: block; width: auto; height: var(--lh, 36px); max-width: min(170px, 100%); object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .62; transition: opacity .35s, filter .35s, transform .5s var(--ease); }
.flogo--img img.is-dk { filter: grayscale(1) brightness(.55) contrast(1.6); }
:is(a, button, div, li, article):hover > .flogo--img img, .flogo--img:hover img { opacity: 1; transform: scale(1.04); }
.flogo--lg img { height: calc(var(--lh, 36px) * 1.25); }
.flogo--xl img { height: calc(var(--lh, 36px) * 1.8); max-width: min(280px, 100%); }
.flogo--w img { filter: grayscale(1) brightness(0) invert(1); opacity: .85; }
@media (max-width: 760px) { .flogo--img img { height: calc(var(--lh, 36px) * .8); } }
@media (max-width: 640px) { .pv-a { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } .pv-a__cell { height: 76px; padding: 0 8px; } }

/* =====================================================================
   v9 · CRNI CTA + FOOTER (KF–KJ): spojevi AE sjaj · AH termo trag · AI staklo
   ===================================================================== */
.cxk { position: relative; isolation: isolate; padding: 0 var(--gx); background: #0a0a0b; color: #fff; overflow: hidden;
  --f-bg: #0a0a0b; --f-fg: #fff; --f-mut: rgba(255, 255, 255, .7); --f-faint: rgba(255, 255, 255, .45); --f-line: rgba(255, 255, 255, .12); --f-card: #141519; --f-acc: #94c6e7; }
.cxk.fg--dark { --g1: #2980b9; --g2: #3393d2; --g3: #93c6e7; --ga: .9; }
.cxk.fg--tall .fg__glow { height: 100%; }
.cxk > :not(.fg__glow):not(.cxk__heat) { position: relative; z-index: 1; }
.cxk__heat { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; filter: blur(14px); opacity: .9; pointer-events: none; }
.cxk__cta { padding: 128px 0 96px; }
.cxk__k { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 500; color: #94c6e7; }
.cxk__k i { width: 8px; height: 8px; border-radius: 2px; background: #94c6e7; }
.cxk__h { font-size: clamp(56px, 8.4vw, 136px); font-weight: 600; line-height: .92; letter-spacing: -0.055em; }
.cxk__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.cxk__row p { max-width: 46ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.cxk__hint { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #94c6e7; }
.cxk__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cxk .btn--white { --bg: #fff; --fg: #0a0a0b; --hbg: var(--blue); --hfg: #fff; }
.cxk .cxk__line { --fg: #fff; --ln: rgba(255, 255, 255, .4); --hbg: #fff; --hfg: #0a0a0b; }
.cxk__f { padding-top: 64px; border-top: 1px solid rgba(255, 255, 255, .1); }
.cxk__f .fae__grid { padding-bottom: 64px; }
.cxk__f .fz__logo { padding: 8px 12px; border-radius: 8px; background: #fff; }
.cxk__f :is(li a, .fz__plain li) { color: rgba(255, 255, 255, .72); }
.cxk__f .fz__tree .fz__area a, .cxk__f .fz__con li a, .cxk__f .fae__t { color: #fff; }
.cxk__f .fz__tree .fz__sub a { border-left-color: rgba(255, 255, 255, .14); }
.cxk__f li a:hover { color: #94c6e7; }
.cxk__f .fz__chips li { border-color: rgba(255, 255, 255, .16); color: #fff; }
.cxk__f .fae__brand p { color: rgba(255, 255, 255, .85); }
.cxk__legal.fz__bot { margin-top: 0; padding-bottom: 32px; border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .5); }
.cxk__legal.fz__bot a:hover { color: #fff; }

/* staklo (AI) na crnom: kartice propuštaju sjaj / termo trag */
.cxk .fai__c { background: rgba(18, 20, 28, .42); border-color: rgba(255, 255, 255, .12); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .8); }
.cxk__f .fai__grid { padding-bottom: 48px; }
.cxk__cta--glass { margin-top: 96px; padding: 64px; border-radius: 20px; background: rgba(18, 20, 28, .42); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.cxk--kh .cxk__f, .cxk--ki .cxk__f { margin-top: 16px; padding-top: 0; border-top: 0; }
.cxk--kh .cxk__cta--glass, .cxk--ki .cxk__cta--glass { margin-bottom: 0; }

/* termo naslov: platno se vidi samo kroz slova (multiply: bijelo slovo × boja platna, crno ostaje crno) */
.cxk__hw { position: relative; isolation: isolate; cursor: crosshair; }
.cxk__hw canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.cxk__h--heat { position: relative; color: transparent; }
.cxk__h--heat .hw { color: transparent; }

@media (max-width: 960px) {
  .cxk__cta { padding: 96px 0 64px; }
  .cxk__cta--glass { margin-top: 64px; padding: 32px 24px; }
  .cxk__f .fae__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .cxk__f .fae__brand { grid-column: 1 / -1; order: -1; }
}

.cxk .fz, .cxk.fz { --f-bg: #0a0a0b; --f-fg: #fff; --f-mut: rgba(255, 255, 255, .7); --f-faint: rgba(255, 255, 255, .45); --f-line: rgba(255, 255, 255, .12); --f-acc: #94c6e7; }
.cxk.fg--dark { --ga: .72; }
.cxk .fai__mail { color: #fff; }

/* v9 · Statistika (tamna): klijent — nikakvo posvjetljenje na hover */
#statistika .dsk .dsc:hover { border-color: rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
#statistika .dsd--calm .dsd__c:hover { background: transparent; }
#statistika .dsd--calm .dsd__c:hover::before { transform: scaleX(0); }
#statistika .dsi__r:hover { background: transparent; }
#statistika .dsb__tab:not(.is-on):hover { color: rgba(255, 255, 255, .6); }

/* KF: CTA u izvornom rasporedu (#kontakt) na crnoj podlozi; razmaci kao u izvornoj sekciji */
.cxk__cta--orig { display: flex; flex-direction: column; align-items: flex-start; padding: 80px 0; color: #fff; }
.cxk__cta--orig .cta__k { color: #fff; }
.cxk__cta--orig .cta__row { padding-top: 32px; }
.cxk__cta--orig .cta__h { margin-top: 24px; }
@media (max-width: 960px) { .cxk__cta--orig { padding: 64px 0; } }

/* v10 · tamna kartica "O nama": spuštena niže (Lab → pomak: 40 / 80 / 0 px) */
html[data-onama="tamno"][data-onpad="40"] .stat { margin-top: -16px; }
html[data-onama="tamno"][data-onpad="80"] .stat { margin-top: 24px; }
@media (max-width: 760px) { html[data-onama="tamno"][data-onpad="40"] .stat { margin-top: 8px; } html[data-onama="tamno"][data-onpad="80"] .stat { margin-top: 48px; } }

/* v10 · Vercel header: izbornik Usluge — četiri jednaka, poravnata stupca preko širine sadržaja */
.hdr[data-v="vc"] .hm { left: var(--gx); right: var(--gx); width: auto; top: 60px; }
.hdr[data-v="vc"] .hm__panel--usl { padding: 8px !important; }
.hdr[data-v="vc"] .hm__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.hdr[data-v="vc"] .hm__col { gap: 0; padding: 8px; border-radius: 0; }
.hdr[data-v="vc"] .hm__col + .hm__col { border-left: 1px solid var(--vc-line); }
.hdr[data-v="vc"] .hm__area { flex-direction: column; gap: 16px; min-height: 172px; padding: 12px; border-radius: 8px; }
.hdr[data-v="vc"] .hm__area > span:last-child { gap: 4px; }
.hdr[data-v="vc"] .hm__area em { line-height: 1.45; }
.hdr[data-v="vc"] .hm__col ul { padding: 0 4px 4px; }
.hdr[data-v="vc"] .hm__col li a { padding: 12px 8px; border-top: 1px solid var(--vc-line); }
.hdr[data-v="vc"] .hm__col li a small { margin-top: 2px; line-height: 1.4; }
.hdr[data-v="vc"] .hm__bar { margin: 8px 4px 0; padding: 16px 12px 8px; border-top: 1px solid var(--vc-line); }

/* sjaj (AE/AI/KF…): animacije mrlja pauzirane dok blok nije vidljiv — manje posla za grafičku */
.fg:not(.is-vis) .fg__b { animation-play-state: paused; }
html[data-onama="tamno"][data-onpad="120"] .stat { margin-top: 64px; }
@media (max-width: 760px) { html[data-onama="tamno"][data-onpad="120"] .stat { margin-top: 80px; } }

/* v10 · "Što trebate?": razmak gore i dolje 80 px (mobitel 56 px) */
#problemi.prob { padding-top: 80px !important; padding-bottom: 80px !important; }
@media (max-width: 760px) { #problemi.prob { padding-top: 48px !important; padding-bottom: 48px !important; } }

/* =====================================================================
   v10 · PARTNERI · ISTICANJE (html[data-pst], Lab → Partneri · isticanje)
   Ista struktura (naslov + mreža 4 × 3 + napomena), mijenja se podloga i naglasak.
   ===================================================================== */
.part__k { display: none; }
.pv-a__cell { position: relative; overflow: hidden; }
.pv-a__i, .pv-a__s, .pv-a__n { display: none; }
html:not([data-pst="0"]) .part__head { flex-wrap: wrap; }
html:not([data-pst="0"]) .part__k { display: flex; flex-basis: 100%; align-items: center; gap: 8px; margin-bottom: -8px; font-size: 14px; font-weight: 500; color: var(--blue); }
html:not([data-pst="0"]) .part__k i { width: 8px; height: 8px; background: currentColor; }
html:not([data-pst="0"]) .pv-a__cell .flogo--img img { opacity: .82; }
html:not([data-pst="0"]) .pv-a__cell:hover .flogo--img img { opacity: 1; }

/* — Svijetla ploča: tonirana ploča s mjernom mrežom, bijele pločice sa sjenom */
html[data-pst="ploca"] #partneri { margin: 0 16px 128px; padding-top: 96px; padding-bottom: 80px; border-radius: 20px; border: 1px solid #dce7f1;
  background: linear-gradient(rgba(41, 128, 185, .045) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(41, 128, 185, .045) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(180deg, #f4f8fc, #eaf1f8); }
html[data-pst="ploca"] .pv-a__cell { height: 104px; border-color: #dfe8f1; box-shadow: 0 1px 2px rgba(16, 32, 43, .05), 0 16px 32px -24px rgba(16, 32, 43, .35); }

/* — Tamna ploča: isti jezik kao tamna kartica "O nama" */
html[data-pst="tamna"] #partneri { margin: 0 16px 128px; padding-top: 96px; padding-bottom: 80px; border-radius: 20px; color: #fff;
  background: radial-gradient(90% 70% at 50% 0%, #1b2e3a 0%, #0a0a0b 62%); }
html[data-pst="tamna"] #partneri h2 { color: #fff; }
html[data-pst="tamna"] .part__p { color: rgba(255, 255, 255, .7); }
html[data-pst="tamna"] .part__k { color: #94c6e7; }
html[data-pst="tamna"] .part__note { color: rgba(255, 255, 255, .42); }
html[data-pst="tamna"] .pv-a__cell { height: 104px; background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); transition: background-color .3s, border-color .3s; }
html[data-pst="tamna"] .pv-a__cell:hover { border-color: rgba(148, 198, 231, .45); }
html[data-pst="tamna"] .pv-a__cell .flogo--img img { filter: grayscale(1) invert(1) brightness(1.2); opacity: .78; }
html[data-pst="tamna"] .pv-a__cell .flogo--img img.is-dk { filter: grayscale(1) brightness(.55) contrast(1.6) invert(1); }
html[data-pst="tamna"] .pv-a__cell:hover .flogo--img img { opacity: 1; }

/* — Plavi pojas: puna širina u glavnoj boji, bijele pločice */
html[data-pst="plava"] #partneri { padding-top: 96px; padding-bottom: 96px; background: var(--blue); color: #fff; }
html[data-pst="plava"] #partneri h2 { color: #fff; }
html[data-pst="plava"] .part__p { color: rgba(255, 255, 255, .82); }
html[data-pst="plava"] .part__k { color: #fff; }
html[data-pst="plava"] .part__note { color: rgba(255, 255, 255, .62); }
html[data-pst="plava"] .pv-a { gap: 12px; }
html[data-pst="plava"] .pv-a__cell { height: 104px; border: 0; border-radius: 8px; box-shadow: 0 18px 36px -24px rgba(9, 29, 42, .55); }
html[data-pst="plava"] .pv-a__cell .flogo--img img { opacity: .9; }

/* — Spojena mreža: velik naslov, ćelije dijele tanke crte, oznake + na kutovima, naziv se otkriva prijelazom */
html[data-pst="mreza"] .pv-a { position: relative; gap: 0; border-top: 1px solid #d9e2ec; border-left: 1px solid #d9e2ec; }
html[data-pst="mreza"] .pv-a::before, html[data-pst="mreza"] .pv-a::after { content: ""; position: absolute; width: 15px; height: 15px; z-index: 2; pointer-events: none;
  background: linear-gradient(var(--blue), var(--blue)) 7px 0 / 1px 15px no-repeat, linear-gradient(var(--blue), var(--blue)) 0 7px / 15px 1px no-repeat; }
html[data-pst="mreza"] .pv-a::before { left: -8px; top: -8px; }
html[data-pst="mreza"] .pv-a::after { right: -7px; bottom: -7px; }
html[data-pst="mreza"] .pv-a__cell { height: 152px; border: 0; border-right: 1px solid #d9e2ec; border-bottom: 1px solid #d9e2ec; border-radius: 0 !important; transition: background-color .35s; }
html[data-pst="mreza"] .pv-a__cell:hover { background: #f3f8fc; }
html[data-pst="mreza"] .pv-a__i { display: block; position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #8b909a; }
html[data-pst="mreza"] .pv-a__n { display: block; position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: 13px; font-weight: 500; color: var(--blue); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease); }
html[data-pst="mreza"] .pv-a__cell:hover .pv-a__n { opacity: 1; transform: none; }

/* — Kartice s oznakama: više pločice, redni broj i područje, blago podizanje */
html[data-pst="kartice"] .pv-a { gap: 16px; }
html[data-pst="kartice"] .pv-a__cell { height: 168px; padding: 0 24px; border-color: #e2ebf3; border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 32, 43, .04); transition: transform .45s var(--ease), box-shadow .45s, border-color .3s; }
html[data-pst="kartice"] .pv-a__cell:hover { transform: translateY(-4px); border-color: #cddbe8; box-shadow: 0 24px 40px -28px rgba(16, 32, 43, .45); }
html[data-pst="kartice"] .pv-a__i { display: block; position: absolute; left: 20px; top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--blue); }
html[data-pst="kartice"] .pv-a__s { display: block; position: absolute; left: 20px; right: 20px; bottom: 16px; padding-top: 12px; border-top: 1px solid #edf2f7; font-size: 12px; font-weight: 500; color: #8b909a; }
html[data-pst="kartice"] .pv-a__cell .flogo { margin-top: -16px; }

/* — Reflektor: plavo svjetlo prati miš preko mreže (rub i podloga ćelija) */
html[data-pst="reflektor"] #partneri h2 { font-size: clamp(64px, 8vw, 120px); line-height: .92; letter-spacing: -0.05em; }
html[data-pst="reflektor"] .pv-a { gap: 8px; }
html[data-pst="reflektor"] .pv-a__cell { --mx: -999px; --my: -999px; height: 120px; border-color: #e6edf4; border-radius: 8px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(41, 128, 185, .11), transparent 70%), #fff; }
html[data-pst="reflektor"] .pv-a__cell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(41, 128, 185, 1), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

@media (max-width: 760px) {
  html:is([data-pst="ploca"], [data-pst="tamna"]) #partneri { margin: 0 8px 64px; padding-top: 64px; padding-bottom: 48px; border-radius: 20px; }
  html[data-pst="plava"] #partneri { padding-top: 64px; padding-bottom: 48px; }
  html[data-pst="mreza"] .pv-a__cell, html[data-pst="kartice"] .pv-a__cell { height: 120px; }
  html[data-pst="kartice"] .pv-a__s { display: none; }
  html[data-pst="kartice"] .pv-a__cell .flogo { margin-top: 0; }
}

/* v10 · partneri: prijelazom miša logotip u pravim bojama (osim na tamnoj ploči, gdje su logotipi bijeli) */
html:not([data-pst="tamna"]) .pv-a__cell .flogo--img img { transition: opacity .35s, filter .45s, transform .5s var(--ease); }
html:not([data-pst="tamna"]) .pv-a__cell:hover .flogo--img img, html:not([data-pst="tamna"]) .pv-a__cell:hover .flogo--img img.is-dk { filter: none; opacity: 1; }

/* v10 · Lab → Oznake iznad naslova: sakrij sve male oznake (eyebrow) odjednom */
html[data-eyeb="0"] :is(.eyebrow, .cta__k, .cxk__k, .cxa__k, .cxb__k, .cxc__k, .cxd__k, .cxe__k, .part__k, .hero__k, .fd__eyebrow, .fm__eyebrow, .fi__eyebrow) { display: none !important; }


/* =====================================================================
   RAZMACI · jedinstveni ritam (generirano: tools/razmaci.py)
   skala: 4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128
   ===================================================================== */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 128px;
  --sec: var(--sp-9); --gut: var(--sp-9); --foot: var(--sp-11); }
@media (max-width: 980px) { :root { --sec: var(--sp-8); --gut: var(--sp-6); --foot: var(--sp-9); } }
@media (max-width: 640px) { :root { --sec: var(--sp-7); --gut: var(--sp-5); } }
/* sekcije: isti razmak gore i dolje (između dviju sekcija = 2 × --sec) */
main > section:not(.hero):not(.o3) { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
main > .nb { margin: var(--sec) 0 !important; }
.froot > footer { padding-top: var(--foot) !important; }
.froot > footer.fu { padding-top: var(--sp-5) !important; }
/* bočni razmak: jedan za sve (Figma 84 px → 64 px) */
.sec { --px: var(--gut) !important; padding-inline: max(var(--gut), calc((100% - 1440px) / 2 + var(--gut))) !important; }
.froot > footer:not(.fp) { padding-inline: max(var(--gut), calc((100% - 1440px) / 2 + var(--gut))) !important; }
.hdr { --gx: max(var(--gut), calc((100% - 1440px) / 2 + var(--gut))) !important; }
.flab { padding-block: var(--sp-5) !important; }
/* naslov sekcije → sadržaj */
.stat__head, .prob__head, .usl__head, .part__head, .nr__head, .ns__head, .nf__head, .np__h, .nd__h { margin-bottom: 0; }
.stat__head { padding-bottom: var(--sp-8) !important; }
.onama { margin: 0 auto var(--sp-11) !important; }
.prob, .usl, .part { gap: var(--sp-8) !important; }
.nk { column-gap: var(--sp-9) !important; }
@media (max-width: 860px) { .nk { row-gap: var(--sp-7) !important; } }
.np__h, .nd__h { margin-bottom: var(--sp-8) !important; }
.nr__head, .ns__head, .nf__head { margin-bottom: var(--sp-7) !important; }
/* hero: gornji razmak = visina headera + ritam */
.hero { padding-bottom: var(--sp-12) !important; }
@media (max-width: 980px) { .hero { padding-top: var(--sp-12) !important; padding-bottom: var(--sp-11) !important; } }
html[data-hero="kartica3d"] .hero { padding-bottom: var(--sp-11) !important; }
html[data-hero="vercel"] .hero { padding-bottom: 0 !important; }

/* RADIJUSI · gumbi 8 · header traka 16 · čipovi i polja 6 · kartice 16 · veliki blokovi 20 · okrugle ikone krug */
:root { --r-chip: 6px; --r-btn: 8px; --r-card: 16px; --r-bar: 16px; --r-block: 20px; }
.btn.btn, .hdr__cta, .hdr__call, .lab__fab::after, .arrow-sq, .kround, .nf__nav button, .nt__btn, .np__more, .fq__form .btn, .hm__go, .m3__go, .fd__btn, .pv-f__btn, .fl__play { border-radius: var(--r-btn) !important; }
.arrow-sq--in { border-radius: var(--r-chip) !important; }
.fm__q input, .fr__form input, .fq__form, .hdr__lang, .hdr__lang a, .ptag, .wtag, .kpill, .fz__chips li, .fr__cert li, .fo__seal, .hero__k, .nf__tag, .fe__k, .ns__tag, .fq__tag { border-radius: var(--r-chip) !important; }
.hdr[data-v="c"].is-scrolled .hdr__in, .hdr[data-v="v3"] .hdr__in, .hdr[data-v="c"] .hm, .hdr[data-v="v3"] .hm, .hdr[data-v="vc"] .hm, .hm__card, .mnav__sub a { border-radius: var(--r-bar) !important; }
.pv-a__cell, .pv-b__item, .pv-c__card, .pv-d__cell, .pv-f__card, .pv-h__f, .pv-h__b, .pv-j__item, .pv-k__card, .pv-l, .tabs__art, .tabs__text, .tabs__menu, .nf__card, .be__card, .fab__c--link, .hm__col { border-radius: var(--r-card) !important; }
.kcard, .wcard, .bc__t, .bd, .bf__stick, .np__grid, .ns__card, .nr__card, .nd__card, .fu__card, .fo__card, .pv-g__stage, .pv-i__orb, .hero__obj, .hero__zap, .fl__app, .o3__txt, .nr__res { border-radius: var(--r-block) !important; }
html[data-hero="kartica3d"] :is(.hero__dith, .hero__3d), html[data-hero="kartica"] .hero__dith { border-radius: var(--r-block) !important; }
html[data-onama="tamno"] .stat { border-radius: var(--r-block) !important; }
html[data-hero="kartica3d"] .hdr[data-v="d"] .hdr__bg { border-radius: var(--r-block) var(--r-block) 0 0 !important; }

/* GLAVNA BOJA: LOGO — platna (canvas) pomaknuta u ton loga */
canvas { filter: hue-rotate(-24deg) saturate(.7) brightness(.95); }
.hero__3d canvas { filter: none; }
.fah__band canvas { filter: blur(8px) hue-rotate(-24deg) saturate(.7) brightness(.95); }