/* =====================================================================
   ARXO software — naslovnica (jedna stranica)
   v29: svijetli arhitektonski junak (bijela i topla svijetlosiva, tanke crte tehničkog crteža,
   meke sjene) s 3D kućom u presjeku i staklenim eliptičnim izbornikom kalkulatora — blok
   „NASLOVNICA v29" na kraju datoteke. Tamna tema: noćni nacrt (tamnoplava, cijan crte).
   Odjeljci ispod (v28): tamna indigo „noćna" podloga (Linear), iskra u bojama
   logotipa ARXO (ljubičasta → indigo → cijan), industrijski katalog s tankim crtama (teenage engineering) i
   svijetli hladni odjeljci (Intercom). Sve na jednoj stranici: kalkulatori,
   3D objekt, kako radi, brzi izračun, paketi i partnerski program.
   ===================================================================== */
:root {
  --bg: #0b1026; --bg-2: #0e1330; --surface: #121835; --surface-2: #171e40; --surface-3: #1e2549;
  --line: #222a4e; --line-2: #2e3762; --line-3: #414b7c;
  --text: #f3f4fb; --text-2: #c7cbe4; --muted: #9196b8; --dim: #8a8fb4;
  /* ARXO: ljubičasta #7846dc → indigo #4c65e2 → cijan #11bad5 (boje iz logotipa) */
  --ember: #5b6cf0; --ember-2: #8b9bff; --ember-3: #b9c2ff; --ember-soft: rgba(91, 108, 240, .14); --ember-line: rgba(91, 108, 240, .45);
  --violet: #7846dc; --indigo: #4c65e2; --cyan: #11bad5; --cyan-2: #5fdcec;
  --grad: linear-gradient(112deg, #7846dc 0%, #5a56df 42%, #4c65e2 70%, #3170d4 100%);
  --grad-marka: linear-gradient(112deg, #7846dc 0%, #4c65e2 50%, #11bad5 100%);
  --cream: #f3f4fb; --cream-2: #e8eaf6; --cream-3: #dcdff0; --cream-line: #d3d7ec; --cream-ink: #10142b; --cream-muted: #5d627f;
  --sky: #8ab4ff; --mint: #5fd4a0;
  --jako: #fff;
  --f-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --f-disp: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --r-s: 8px; --r: 12px; --r-l: 18px; --r-xl: 26px;
  --sjena: 0 30px 80px -30px rgba(0, 0, 0, .8);
  --e-out: cubic-bezier(.16, 1, .3, 1);
  /* varijable koje koriste drugi moduli (partneri.js, stari stilovi) */
  --panel: var(--surface); --panel-2: var(--surface-2); --ink: var(--text); --ink-2: var(--muted); --or: var(--ember); --or-2: var(--ember-2); --or-soft: var(--ember-soft);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(91, 108, 240, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
.omot { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.mono { font-family: var(--f-mono); letter-spacing: .02em; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 200; background: var(--ember); color: #fff; padding: 9px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { left: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- traka napretka i povratak na vrh ---------- */
.napredak { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad); box-shadow: 0 0 12px rgba(91, 108, 240, .7); pointer-events: none; }
.na-vrh { position: fixed; right: 22px; bottom: 96px; z-index: 45; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(17, 23, 51, .85); backdrop-filter: blur(10px);
  display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s var(--e-out), border-color .2s; }
.na-vrh.vidi { opacity: 1; transform: none; pointer-events: auto; }
.na-vrh:hover { border-color: var(--ember); }
.na-vrh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- gumbi ---------- */
.g { --bx: 0px; --by: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 600 14.5px/1 var(--f-sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  border-radius: 999px; padding: 14px 22px; border: 1px solid transparent; white-space: nowrap; transform: translate(var(--bx), var(--by)); transition: transform .25s var(--e-out), box-shadow .25s, background .2s, border-color .2s, color .2s, filter .2s; }
.g-e { color: #fff; background: var(--grad); box-shadow: 0 10px 30px -12px rgba(91, 108, 240, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.g-e:hover { filter: brightness(1.06); box-shadow: 0 16px 40px -12px rgba(91, 108, 240, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.g-o { color: var(--text-2); background: rgba(255, 255, 255, .03); border-color: var(--line-2); }
.g-o:hover { color: var(--jako); border-color: var(--line-3); background: rgba(255, 255, 255, .06); }
.g-mali { padding: 9px 15px; font-size: 13px; }
.g .str { transition: transform .25s var(--e-out); }
.g:hover .str { transform: translateX(4px); }
.g-t { background: none; border: 0; padding: 4px; color: var(--ember-2); font: 600 13px var(--f-sans); cursor: pointer; }
.g-t:hover { text-decoration: underline; }

/* ---------- oznake odjeljaka ---------- */
.nad { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nad::before { content: ''; width: 20px; height: 1px; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.glava { max-width: 760px; margin: 0 0 44px; }
.glava h2, .h2 { font: 600 clamp(32px, 4.3vw, 54px)/1.03 var(--f-disp); letter-spacing: -.035em; margin: 0 0 16px; }
.glava p { color: var(--muted); font-size: 17px; margin: 0; font-weight: 300; max-width: 640px; }
.glava-red { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.glava-red > div { max-width: 700px; }
.odj { position: relative; padding: 120px 0; }
.svijetlo { background: var(--cream); color: var(--cream-ink); }
.svijetlo .nad { color: var(--cream-muted); }
.svijetlo .glava p { color: var(--cream-muted); }
.naglasak { background: linear-gradient(95deg, #fff 0%, #d2c8ff 26%, #9d87ff 52%, #7288ff 74%, #3fd3ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svijetlo .naglasak { background: linear-gradient(95deg, #1d1850 0%, #6a3fd0 48%, #3f55d4 76%, #0e8fa6 100%); -webkit-background-clip: text; background-clip: text; }

/* =====================================================================
   ZAGLAVLJE
   ===================================================================== */
.vrh { position: sticky; top: 0; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.vrh.skrol { background: rgba(10, 15, 37, .95); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom-color: var(--line); }
.vrh-u { display: flex; align-items: center; gap: 18px; height: 72px; }
.marka { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.marka .arxo { --arxo-w: 128px; transition: transform .5s var(--e-out), filter .4s; }
.marka:hover .arxo { transform: translateY(-1px); filter: drop-shadow(0 0 22px rgba(120, 70, 220, .45)); }
.noga-m .marka .arxo { --arxo-w: 150px; }
.izbornik { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); position: relative; }
.izbornik a { position: relative; z-index: 1; font: 500 13.5px/1 var(--f-sans); color: var(--text-2); text-decoration: none; padding: 9px 14px; border-radius: 999px; transition: color .2s; white-space: nowrap; }
.izbornik a:hover { color: var(--jako); }
.izbornik a.akt { color: var(--jako); }
.izbornik a.iz-p { color: var(--ember-3); }
.izbornik .klizac { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .45s var(--e-out), width .45s var(--e-out), opacity .3s; opacity: 0; }
.vrh-desno { display: flex; align-items: center; gap: 10px; flex: none; }
.gumb-uvod { font: 600 12.5px/1 var(--f-sans); color: var(--text-2); background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 13px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; text-decoration: none; white-space: nowrap; }
.gumb-uvod:hover, .gumb-uvod:focus-visible { border-color: var(--ember); color: var(--jako); }
.gumb-prijava { color: #fff; border-color: transparent; background: var(--grad); box-shadow: 0 8px 22px -10px rgba(91, 108, 240, .8); }
.gumb-prijava:hover { filter: brightness(1.07); }
.korisnik { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.korisnik i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--f-disp); font-style: normal; background: var(--grad); color: #fff; box-shadow: 0 0 0 3px rgba(91, 108, 240, .15); }
.korisnik small { display: block; font: 500 10px var(--f-mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); cursor: pointer; place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; position: relative; transition: transform .3s var(--e-out), opacity .2s; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.mob-meni { position: fixed; inset: 72px 0 0; z-index: 49; background: rgba(10, 15, 37, .97); backdrop-filter: blur(16px); padding: 28px 22px 40px; display: flex; flex-direction: column; gap: 4px; overflow: auto;
  opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .3s, transform .35s var(--e-out); }
.mob-meni.otv { opacity: 1; transform: none; pointer-events: auto; }
.mob-meni a { font: 600 26px/1.2 var(--f-disp); letter-spacing: -.02em; color: var(--text); text-decoration: none; padding: 12px 4px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.mob-meni a span { font: 500 12px var(--f-mono); color: var(--dim); }
.mob-meni .mob-d { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- prijava (dijalog) / radni prostor ---------- */
.junak-d { position: relative; display: grid; place-items: center; min-width: 0; }
.junak-d::before { content: ''; position: absolute; inset: 8% -4%; background: radial-gradient(closest-side, rgba(91, 108, 240, .22), transparent); filter: blur(30px); z-index: -1; }
.kartica-s { position: relative; width: 100%; max-width: 440px; padding: 30px 30px 24px; border-radius: var(--r-xl); background: linear-gradient(180deg, rgba(23, 31, 64, .82), rgba(15, 22, 49, .9)); border: 1px solid var(--line-2);
  box-shadow: var(--sjena), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform-style: preserve-3d; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--e-out); }
.kartica-s::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(120, 70, 220, .7), transparent 35%, transparent 70%, rgba(255, 255, 255, .15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.prijava h2 { font: 600 26px/1.15 var(--f-disp); letter-spacing: -.02em; margin: 0 0 4px; }
.prijava .pod { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.u-polje { display: block; margin-top: 16px; }
.u-polje > span:first-child { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; font-weight: 500; }
.u-polje input, .r-polje input, .ob input:not([type=checkbox]), .ob select, .ob textarea { width: 100%; font: 15px var(--f-sans); color: var(--text); background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 14px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.u-polje input:focus, .r-polje input:focus, .ob input:focus, .ob select:focus, .ob textarea:focus { border-color: var(--ember); box-shadow: 0 0 0 4px rgba(91, 108, 240, .14); background: rgba(0, 0, 0, .45); }
.u-polje input::placeholder, .ob input::placeholder, .ob textarea::placeholder, .r-polje input::placeholder { color: var(--dim); }
.lozinka { position: relative; display: block; }
.lozinka input { padding-right: 84px; }
.lozinka button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font: 600 12px var(--f-sans); cursor: pointer; padding: 7px; }
.lozinka button:hover { color: var(--ember-2); }
.g-glavni { width: 100%; margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; padding: 15px 18px; font: 600 15px var(--f-sans); color: #fff; cursor: pointer;
  background: var(--grad); box-shadow: 0 12px 30px -12px rgba(91, 108, 240, .85), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, box-shadow .2s, filter .2s; }
.g-glavni:hover { transform: translateY(-2px); filter: brightness(1.05); }
.g-glavni:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.g-glavni.mali { width: auto; margin: 0; padding: 12px 18px; font-size: 13.5px; white-space: nowrap; border-radius: 999px; }
.g-glavni .vrti { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: u-vrti .6s linear infinite; }
@keyframes u-vrti { to { transform: rotate(360deg); } }
.reg-poziv { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.t-gumb { background: none; border: 0; padding: 4px; font: 600 13px var(--f-sans); color: var(--ember-2); cursor: pointer; }
.t-gumb:hover { text-decoration: underline; }
.t-gumb.siv { color: var(--muted); font-weight: 500; font-size: 12.5px; text-decoration: underline; }
.demo-nap { font-size: 11.5px; color: var(--dim); line-height: 1.6; margin: 14px 0 0; }
.demo-nap b { color: var(--text-2); font-weight: 600; }
/* radni prostor (nakon prijave) */
.rp-glava { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.rp-av { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font: 700 22px var(--f-disp); color: #fff; background: var(--grad); box-shadow: 0 12px 30px -10px rgba(91, 108, 240, .8); flex: none; }
.rp-glava h2 { margin: 0; font: 600 22px/1.15 var(--f-disp); letter-spacing: -.02em; }
.rp-glava p { margin: 3px 0 0; font: 500 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rp-mjera { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.rp-mjera div { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .02); }
.rp-mjera b { display: block; font: 600 24px/1 var(--f-disp); letter-spacing: -.02em; }
.rp-mjera span { font-size: 12px; color: var(--muted); }
.rp-prsten { position: relative; }
.rp-l { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; max-height: 210px; overflow: auto; }
.rp-l a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-size: 14px; color: var(--text-2); border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s; }
.rp-l a:hover { background: rgba(91, 108, 240, .07); border-color: var(--ember-line); color: var(--jako); }
.rp-l a b { color: var(--ember-2); font-weight: 500; }
.rp-l .zak { opacity: .45; }
.rp-prazno { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.rp-gumbi { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- „Svi kalkulatori": alati popisa, zajednički objekt, traka paketa ---------- */
.alati-k { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.filtri { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); flex-wrap: wrap; position: relative; }
.filtri button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--text-2); font: 500 13.5px/1 var(--f-sans); padding: 10px 15px; border-radius: 999px; cursor: pointer; transition: color .2s; display: inline-flex; gap: 7px; align-items: center; }
.filtri button small { font: 500 11px var(--f-mono); color: var(--dim); transition: color .2s; }
.filtri button[aria-pressed="true"] { color: var(--jako); }
.filtri button[aria-pressed="true"] small { color: var(--ember-3); }
.filtri .klizac { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .45s var(--e-out), width .45s var(--e-out); }
.trazi { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.trazi input { width: 100%; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 999px; padding: 11px 14px 11px 40px; font-size: 14px; color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; }
.trazi input:focus { border-color: var(--ember); box-shadow: 0 0 0 4px rgba(91, 108, 240, .12); }
.trazi svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }
.trazi kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 11px var(--f-mono); color: var(--dim); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; }
.zaj-pocetna { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; cursor: pointer; font-size: 13px; color: var(--text-2); user-select: none; }
.zaj-pocetna input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zaj-pocetna .zp-sw { width: 38px; height: 22px; border-radius: 22px; background: var(--surface-3); border: 1px solid var(--line-2); position: relative; flex: none; transition: background .2s, border-color .2s; }
.zaj-pocetna .zp-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .3s var(--e-out), background .2s; }
.zaj-pocetna input:checked + .zp-sw { background: rgba(91, 108, 240, .25); border-color: var(--ember); }
.zaj-pocetna input:checked + .zp-sw::after { transform: translateX(16px); background: var(--ember); }
.zaj-pocetna input:focus-visible + .zp-sw { outline: 2px solid var(--ember); outline-offset: 2px; }
.zaj-pocetna b { color: var(--text); font-weight: 600; }
.zaj-pocetna small { color: var(--muted); font-size: 12px; }
.glava-k-t { color: var(--muted); font-size: 14px; margin: -30px 0 26px; }
.paket-traka { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; padding: 18px 22px; border: 1px solid var(--ember-line); border-radius: var(--r-l);
  background: radial-gradient(600px 120px at 0 0, rgba(91, 108, 240, .14), transparent), rgba(91, 108, 240, .03); }
.paket-traka h3 { font: 600 17px var(--f-disp); margin: 0 0 3px; letter-spacing: -.01em; }
.paket-traka p { margin: 0; font-size: 13.5px; color: var(--muted); }
.paket-traka .brojac { font: 600 11px var(--f-mono); letter-spacing: .14em; color: var(--ember-2); }
.paket-traka .desno { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stanje { font: 600 9.5px var(--f-mono); letter-spacing: .12em; padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; background: #111835; }
.stanje svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.stanje.akt { color: var(--ember-3); background: #1a1f48; border: 1px solid var(--ember-line); }
.stanje.zak { color: #b4cfee; border: 1px solid rgba(150, 195, 240, .32); background: #121820; }
.nista { display: none; text-align: center; padding: 50px 20px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-l); }
.nista.vidi { display: block; }
.zaledeno { display: inline-flex; align-items: center; gap: 6px; }
.stanje .pah, .zaledeno .pah { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   KAKO RADI (svijetlo)
   ===================================================================== */
.kako-u { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.koraci { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.korak { position: relative; border-radius: 18px; padding: 20px 22px 20px 74px; cursor: pointer; border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.korak:hover { background: rgba(255, 255, 255, .45); }
.korak.akt { background: #fff; border-color: var(--cream-line); box-shadow: 0 20px 50px -30px rgba(20, 25, 70, .35); }
.korak .kb { position: absolute; left: 22px; top: 20px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font: 600 13px var(--f-mono); color: var(--cream-muted); border: 1px solid var(--cream-line); background: var(--cream); transition: all .3s; }
.korak.akt .kb { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -10px rgba(91, 108, 240, .8); }
.korak h3 { margin: 0 0 4px; font: 600 19px/1.25 var(--f-disp); letter-spacing: -.015em; }
.korak p { margin: 0; color: var(--cream-muted); font-size: 14.5px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--e-out), opacity .4s, margin .4s; }
.korak.akt p { max-height: 120px; opacity: 1; margin-top: 6px; }
.korak .tr { position: absolute; left: 74px; right: 22px; bottom: 10px; height: 2px; border-radius: 2px; background: var(--cream-2); overflow: hidden; opacity: 0; transition: opacity .3s; }
.korak.akt .tr { opacity: 1; }
.korak .tr i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.korak.akt .tr i { animation: tr var(--t, 6s) linear forwards; }
.koraci.stani .korak.akt .tr i { animation-play-state: paused; }
@keyframes tr { to { transform: scaleX(1); } }
.pozornica { position: relative; aspect-ratio: 1.12; border-radius: var(--r-xl); background: linear-gradient(160deg, #161d3d, #0d132c); border: 1px solid #222b50; box-shadow: 0 40px 90px -40px rgba(8, 10, 30, .6); overflow: hidden; color: var(--text); }
.pozornica::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 28px 28px; }
.pz-traka { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #1f274c; background: rgba(12, 18, 41, .7); z-index: 2; }
.pz-traka i { width: 9px; height: 9px; border-radius: 50%; background: #313a61; }
.pz-traka span { font: 500 12px var(--f-mono); color: var(--muted); margin-left: 6px; }
.scena-k { position: absolute; inset: 46px 0 0; display: grid; place-items: center; padding: 24px; opacity: 0; transform: scale(.97); transition: opacity .5s, transform .6s var(--e-out); pointer-events: none; }
.scena-k.akt { opacity: 1; transform: none; }
.scena-k svg { width: 100%; height: 100%; }
/* korak 1: tlocrt (crta ga js/naslovna.js iz istih podataka kao 3D kuću) */
.scena-k.sk1 { padding: 10px 14px 8px; }
#pzTlocrt { overflow: visible; }
#pzTlocrt .zv { fill: url(#pzSraf); stroke: #8b9bff; stroke-width: 1.2; }
#pzTlocrt .zu { fill: url(#pzSraf2); stroke: #6b77c8; stroke-width: 1; }
#pzTlocrt .gk { fill: #cfd3d8; stroke: #9aa2ab; stroke-width: .6; }
#pzTlocrt .pr { fill: #0d132c; stroke: #8ab4ff; stroke-width: 1; }
#pzTlocrt .pr-l { stroke: #8ab4ff; stroke-width: .8; }
#pzTlocrt .vr { fill: none; stroke: #c9c9d0; stroke-width: 1; }
#pzTlocrt .vr-l { stroke: #e7e7ea; stroke-width: 1.6; }
#pzTlocrt .st { fill: rgba(139, 155, 255, .08); stroke: #b7b7c0; stroke-width: .8; }
#pzTlocrt .st-s { fill: none; stroke: #8b9bff; stroke-width: 1.2; marker-end: url(#pzStr); }
#pzTlocrt .nm { fill: none; stroke: #6e6e78; stroke-width: .9; }
#pzTlocrt .nm-f { fill: #171e3f; stroke: #6e6e78; stroke-width: .9; }
#pzTlocrt .ko { stroke: #7c7c86; stroke-width: .8; fill: none; }
#pzTlocrt .ko-t { fill: #b9b9c2; font: 9.5px var(--f-mono); text-anchor: middle; }
#pzTlocrt .so { fill: #f4f4f5; font: 600 8.5px var(--f-mono); letter-spacing: .12em; text-anchor: middle; }
#pzTlocrt .so-p { fill: #8b9bff; font: 500 9.5px var(--f-mono); text-anchor: middle; }
#pzTlocrt .nw { stroke: #8b9bff; stroke-width: 2.4; stroke-dasharray: 5 3; }
#pzTlocrt .nw-t { fill: #fff; font: 600 10px var(--f-mono); }
#pzTlocrt .nw-b { fill: #5b6cf0; }
#pzTlocrt .sj { fill: #8e8e98; font: 600 9px var(--f-mono); text-anchor: middle; }
#pzTlocrt .el { opacity: 0; }
.sk1.akt #pzTlocrt .el { animation: pojavi .5s var(--e-out) forwards; animation-delay: var(--d, 0s); }
.sk1.akt #pzTlocrt .zv, .sk1.akt #pzTlocrt .zu { animation: zidUlaz .6s var(--e-out) both; animation-delay: var(--d, 0s); }
@keyframes zidUlaz { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pojavi { to { opacity: 1; } }
/* korak 2: specifikacija i cijene */
.scena-k.sk2 { padding: 14px 18px; }
.spec { width: 100%; max-width: 520px; display: grid; gap: 10px; }
.spec-g { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spec-g span { font: 500 11px var(--f-mono); padding: 5px 10px; border-radius: 999px; color: var(--muted); border: 1px solid #222b50; }
.spec-g span.on { color: var(--jako); background: rgba(91, 108, 240, .16); border-color: var(--ember-line); }
.spec-g em { margin-left: auto; font: 500 10.5px var(--f-mono); color: var(--dim); font-style: normal; }
.tbl { width: 100%; font-size: 12.5px; border: 1px solid #1f274c; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, .25); }
.tbl .r { display: grid; grid-template-columns: 1fr 88px 92px; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #1c2448; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--e-out), background .3s; transition-delay: var(--d, 0s); position: relative; }
.tbl .r:last-child { border-bottom: 0; }
.tbl .r.gl { background: rgba(255, 255, 255, .03); font: 500 10px var(--f-mono); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.sk2.akt .tbl .r { opacity: 1; transform: none; }
.tbl .r span { color: var(--text-2); }
.tbl .r small { display: block; color: var(--muted); font-size: 10.5px; }
.tbl .r b { font: 500 12px var(--f-mono); color: #fff; text-align: right; }
.tbl .r b.i { color: var(--ember-3); }
.tbl .r::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w, 0%); background: var(--grad); opacity: .55; transition: width 1.2s var(--e-out); transition-delay: calc(var(--d, 0s) + .3s); }
.sk2:not(.akt) .tbl .r::after { width: 0; }
.spec-d { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--ember-line); border-radius: 14px; background: radial-gradient(400px 90px at 0 0, rgba(91, 108, 240, .12), transparent), rgba(91, 108, 240, .03); }
.krafna { width: 96px; height: 96px; transform: rotate(-90deg); }
.krafna circle { fill: none; stroke-width: 14; }
.kr-p { stroke: #1f274c; }
.kr-m { stroke: #5b6cf0; stroke-dasharray: 0 289; transition: stroke-dasharray 1.2s var(--e-out) .4s; }
.kr-r { stroke: #8ab4ff; stroke-dasharray: 0 289; transition: stroke-dasharray 1.2s var(--e-out) .6s, stroke-dashoffset 1.2s var(--e-out) .6s; }
.spec-l { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.spec-l i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }
.spec-l .lm { background: #5b6cf0; } .spec-l .lr { background: #8ab4ff; }
.spec-l b { font: 500 12px var(--f-mono); color: #fff; margin-left: 6px; }
.spec-l small { color: var(--dim); font-size: 10.5px; }
.spec-uk { text-align: right; }
.spec-uk span { display: block; font: 500 10px var(--f-mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.spec-uk b { font: 700 22px var(--f-disp); color: var(--ember-3); letter-spacing: -.02em; }
/* korak 3: 3D kuća koja se slaže sloj po sloj */
.scena-k.sk3 { padding: 0; }
.pz3d { position: absolute; inset: 0; }
.pz-slojevi { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; max-width: 72%; z-index: 3; }
.pz-slojevi li { font: 500 10.5px var(--f-mono); padding: 4px 9px; border-radius: 999px; border: 1px solid #222b50; color: var(--dim); background: rgba(12, 18, 41, .75); transition: color .3s, border-color .3s, background .3s, transform .4s var(--e-out); }
.pz-slojevi li.on { color: #fff; border-color: var(--c, var(--ember)); background: color-mix(in srgb, var(--c, #5b6cf0) 18%, rgba(12, 18, 41, .8)); transform: translateY(-2px); }
.pz-slojevi li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; background: var(--c, #666); vertical-align: 0; }
/* korak 4: ponuda */
.scena-k.sk4 { padding: 14px; }
.dok { position: relative; width: 72%; max-width: 390px; background: #fbfbfd; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75); padding: 18px 18px 16px; color: #151830; transform: rotate(-2.5deg) translateY(24px); opacity: 0; transition: transform .8s var(--e-out), opacity .5s; font-size: 10.5px; }
.sk4.akt .dok { transform: rotate(-2.5deg); opacity: 1; }
.dok .dh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e0e2ec; }
.dok .dz { display: flex; align-items: center; gap: 7px; }
.dok .dz i { width: 16px; height: 16px; border-radius: 4px; background: var(--grad); }
.dok .dz b { font: 700 11.5px var(--f-disp); }
.dok .dh > span:last-child { font: 600 9px var(--f-mono); color: #80859c; letter-spacing: .08em; }
.dok .dk { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 10px; }
.dok .dk small { display: block; color: #8e93aa; font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; }
.dok .dk b { font-size: 10.5px; }
.dok h4 { margin: 0 0 8px; font: 600 13.5px var(--f-disp); }
.dt { display: grid; gap: 0; border-top: 1.5px solid #151830; }
.dt .dr { display: grid; grid-template-columns: 16px 1fr 58px 64px; gap: 6px; padding: 5px 0; border-bottom: 1px solid #e8eaf2; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .4s var(--e-out); transition-delay: var(--d, 0s); }
.sk4.akt .dt .dr { opacity: 1; transform: none; }
.dt .dr span:nth-child(1) { color: #8e93aa; font-family: var(--f-mono); }
.dt .dr span:nth-child(3), .dt .dr span:nth-child(4) { text-align: right; font-family: var(--f-mono); }
.dsum { margin-top: 8px; display: grid; gap: 3px; justify-content: end; }
.dsum div { display: grid; grid-template-columns: 90px 90px; font-family: var(--f-mono); }
.dsum div b { text-align: right; }
.dsum .uk { margin-top: 4px; padding-top: 5px; border-top: 1.5px solid #151830; font-weight: 700; font-size: 12px; }
.dpot { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; width: 150px; }
.dpot svg { width: 150px; height: 36px; }
.dpot span { border-top: 1px solid #c4c8d8; width: 100%; padding-top: 3px; color: #8e93aa; font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; }
.potpis { fill: none; stroke: #1d4ed8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.sk4.akt .potpis { animation: potpis 1.6s ease-in-out 1.4s forwards; }
@keyframes potpis { to { stroke-dashoffset: 0; } }
.dok .pecat { position: absolute; left: 112px; bottom: 6px; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--ember); color: var(--ember); display: grid; place-items: center; font: 700 10.5px/1.15 var(--f-mono); text-align: center; letter-spacing: .06em; transform: rotate(-14deg) scale(1.6); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) 2.9s, opacity .2s 2.9s; background: rgba(91, 108, 240, .06); }
.sk4.akt .dok .pecat { transform: rotate(-14deg); opacity: 1; }
.dok2 { position: absolute; width: 52%; max-width: 280px; aspect-ratio: .74; background: #eceef4; border-radius: 10px; right: 7%; top: 12%; transform: rotate(7deg); opacity: 0; transition: opacity .5s .2s, transform .8s var(--e-out) .2s; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); padding: 16px; color: #5f6480; }
.dok2 .d2h { font: 600 9px var(--f-mono); letter-spacing: .1em; margin-bottom: 12px; }
.dok2 .ln, .dok .ln { height: 6px; border-radius: 4px; background: #d8dbe8; margin-bottom: 8px; } .dok2 .ln.k { width: 60%; } .dok2 .ln.s { width: 80%; }
.sk4.akt .dok2 { opacity: .6; transform: rotate(9deg); }
.izvozi { position: absolute; right: 16px; top: 16px; display: grid; gap: 6px; }
.izvozi span { font: 700 10px var(--f-mono); letter-spacing: .08em; padding: 6px 10px; border-radius: 8px; color: #fff; opacity: 0; transform: translateX(14px); transition: opacity .4s, transform .5s var(--e-out); }
.izvozi .iz-pdf { background: #dc2626; transition-delay: 3.2s; } .izvozi .iz-xls { background: #15803d; transition-delay: 3.4s; } .izvozi .iz-doc { background: #1d4ed8; transition-delay: 3.6s; }
.sk4.akt .izvozi span { opacity: 1; transform: none; }

/* =====================================================================
   BRZI IZRAČUN
   ===================================================================== */
.izr { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.izr-u { display: grid; grid-template-columns: .95fr 1.05fr; gap: 22px; }
.izr-tabovi { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); margin-bottom: 26px; position: relative; flex-wrap: wrap; }
.izr-tabovi button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--text-2); font: 500 14px/1 var(--f-sans); padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: color .2s; }
.izr-tabovi button[aria-selected="true"] { color: var(--jako); }
.izr-tabovi .klizac { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--grad); box-shadow: 0 8px 20px -10px rgba(91, 108, 240, .8); transition: transform .45s var(--e-out), width .45s var(--e-out); }
.izr-p { border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); padding: 26px; }
.izr-p h3 { margin: 0 0 4px; font: 600 20px var(--f-disp); letter-spacing: -.015em; }
.izr-p .pod { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }
.klizac-p { display: grid; grid-template-columns: 1fr 92px; gap: 6px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.klizac-p label { font-size: 13.5px; color: var(--text-2); grid-column: 1 / -1; display: flex; justify-content: space-between; }
.klizac-p label span { color: var(--dim); font: 500 11.5px var(--f-mono); }
.klizac-p input[type=number] { width: 100%; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font: 500 14px var(--f-mono); color: var(--text); text-align: right; outline: none; }
.klizac-p input[type=number]:focus { border-color: var(--ember); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; --p: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ember) var(--p), var(--surface-3) var(--p)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--surface-3); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ember); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--ember); box-shadow: 0 0 0 5px rgba(91, 108, 240, .15); transition: transform .15s; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ember); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); }
.izbor-v { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 0 4px; }
.izbor-v button { border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); color: var(--text-2); border-radius: 999px; padding: 8px 13px; font-size: 13px; cursor: pointer; transition: all .2s; }
.izbor-v button:hover { border-color: var(--line-3); color: var(--jako); }
.izbor-v button[aria-pressed="true"] { border-color: var(--ember); color: var(--jako); background: var(--ember-soft); }
.izbor-v-n { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.izr-r { border-radius: var(--r-xl); background: linear-gradient(180deg, #131a38, #0f142f); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.izr-r::before { content: ''; position: absolute; width: 380px; height: 380px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 108, 240, .16), transparent 65%); }
.izr-vis { position: relative; border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%, #161d3d, #0c1128 70%); border: 1px solid var(--line); height: 360px; overflow: hidden; }
.izr-vis::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.izr-3d { position: absolute; inset: 0; cursor: grab; }
.izr-3d .m3d-platno canvas.gl { cursor: grab; }
.izr-ozn { position: absolute; left: 12px; top: 12px; z-index: 3; display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: rgba(14, 19, 45, .82); border: 1px solid var(--line-2); backdrop-filter: blur(8px); pointer-events: none; min-width: 170px; max-width: 70%; }
.izr-ozn:empty { display: none; }
.izr-ozn .io-n { font: 500 10.5px var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.izr-ozn b { font: 700 22px/1.1 var(--f-disp); color: var(--jako); letter-spacing: -.02em; }
.izr-ozn b small { font: 500 11px var(--f-sans); color: var(--muted); letter-spacing: 0; }
.izr-ozn .io-s { font-size: 11px; color: var(--text-2); }
.izr-ozn .io-s.ok { color: #5fd4a0; } .izr-ozn .io-s.ne { color: #8b9bff; }
.io-bar { position: relative; height: 7px; border-radius: 5px; background: #1f274c; margin: 6px 0 12px; }
.io-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transition: width .5s var(--e-out), background .3s; }
.io-bar em { position: absolute; top: -3px; height: 13px; border-left: 1.5px dashed #fff; font: 500 9px var(--f-mono); color: var(--muted); font-style: normal; padding-left: 3px; line-height: 30px; }
.izr-vis svg { width: 100%; height: 100%; }
.rez { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; position: relative; }
.rez div { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: rgba(255, 255, 255, .02); }
.rez b { display: block; font: 600 26px/1 var(--f-disp); letter-spacing: -.02em; }
.rez b small { font: 500 13px var(--f-sans); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.rez > div > span { font-size: 12.5px; color: var(--muted); }
.rez b span { font: inherit; color: inherit; }
.izr-p { display: flex; flex-direction: column; }
.izr-plus { margin-top: auto; padding-top: 22px; }
.izr-plus h4 { margin: 0 0 10px; font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.izr-plus ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.izr-plus li { font-size: 12.5px; color: var(--text-2); padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .025); border: 1px dashed var(--line-2); display: flex; gap: 8px; align-items: center; }
.izr-plus li::before { content: '+'; color: var(--ember-2); font: 600 13px var(--f-mono); }
@media (max-width: 440px) { .izr-plus ul { grid-template-columns: 1fr; } }
.rez .glavni { grid-column: 1 / -1; border-color: var(--ember-line); background: radial-gradient(500px 100px at 0 0, rgba(91, 108, 240, .14), transparent), rgba(91, 108, 240, .03); }
.rez .glavni b { font-size: 38px; }
.rez > div:nth-child(even):last-child { grid-column: 1 / -1; }
.izr-dno { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; position: relative; }
.izr-dno p { margin: 0; font-size: 12px; color: var(--dim); max-width: 320px; }

/* =====================================================================
   ZNAČAJKE (bento)
   ===================================================================== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bk { --mx: 50%; --my: 50%; position: relative; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); padding: 26px; overflow: hidden; isolation: isolate; transition: border-color .3s, transform .4s var(--e-out); min-height: 210px; display: flex; flex-direction: column; }
.bk::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(91, 108, 240, .12), transparent 70%); }
.bk:hover { border-color: var(--line-3); }
.bk:hover::before { opacity: 1; }
.bk.s2 { grid-column: span 2; } .bk.s3 { grid-column: span 3; } .bk.s4 { grid-column: span 4; }
.bk .bi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ember-2); margin-bottom: auto; transition: transform .4s var(--e-out), background .3s; }
.bk:hover .bi { transform: rotate(-8deg) scale(1.08); background: var(--ember-soft); }
.bk .bi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk h3 { margin: 22px 0 6px; font: 600 19px/1.2 var(--f-disp); letter-spacing: -.015em; }
.bk p { margin: 0; color: var(--muted); font-size: 14px; }
.bk-vis { margin: -6px -6px 18px; border-radius: 12px; background: #0c1229; border: 1px solid var(--line); height: 130px; position: relative; overflow: hidden; }
.bk-vis .kat { position: absolute; left: 50%; width: 56%; height: 22%; border: 1.5px solid var(--ember-2); border-radius: 4px; transform: translateX(-50%); background: rgba(91, 108, 240, .06); transition: transform .6s var(--e-out); }
.bk:hover .bk-vis .kat { transform: translateX(-50%) translateY(var(--dy, 0)); }
.bk-vis .kat.k1 { bottom: 12%; } .bk-vis .kat.k2 { bottom: 38%; --dy: -6px; } .bk-vis .kat.k3 { bottom: 64%; --dy: -12px; width: 56%; clip-path: polygon(0 100%, 50% 0, 100% 100%); border: 0; background: rgba(91, 108, 240, .35); }
.veza { position: absolute; inset: 0; }
.veza span { position: absolute; font: 500 11px var(--f-mono); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); white-space: nowrap; transition: border-color .3s, color .3s; }
.bk:hover .veza span { border-color: var(--ember-line); color: var(--jako); }
.veza svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.veza svg path { fill: none; stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 4 4; animation: tece 1.2s linear infinite; }
.bk:hover .veza svg path { stroke: var(--ember-2); }
@keyframes tece { to { stroke-dashoffset: -16; } }
.napomena { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 16px 20px; border: 1px solid var(--ember-line); background: rgba(91, 108, 240, .05); border-radius: var(--r-l); font-size: 14px; color: var(--text-2); }
.napomena b { color: var(--ember-3); }
.napomena svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ember-2); stroke-width: 1.6; margin-top: 1px; }

/* =====================================================================
   PAKETI (svijetlo)
   ===================================================================== */
.pak-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pak-g > .pak { grid-column: span 2; }
.pak-g > .pak.siri { grid-column: span 3; }
.pak-gr { grid-column: 1 / -1; margin: 6px 0 -2px; display: flex; align-items: center; gap: 14px; font: 600 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-muted); }
.pak-gr::before, .pak-gr::after { content: ''; flex: 1; height: 1px; background: var(--cream-line); }
.pak-gr:first-child { margin-top: 0; }
.pak.siri ul { grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.pak-tocke { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 18px; }
.pak-tocke i { width: 11px; height: 11px; border-radius: 3px; background: var(--cream-2); box-shadow: inset 0 0 0 1px var(--cream-line); }
.pak-tocke i.da { background: #4c65e2; box-shadow: none; }
.pak-tocke i.kuca { width: 15px; height: 14px; margin-top: -3px; border-radius: 1px; box-shadow: none; background: #d5d9ee; clip-path: polygon(50% 0, 100% 45%, 86% 45%, 86% 100%, 14% 100%, 14% 45%, 0 45%); }
.pak-tocke span { margin-left: 8px; font: 600 11px var(--f-mono); letter-spacing: .06em; color: var(--cream-muted); }
.pak.ist .pak-tocke i { background: #272d52; box-shadow: none; }
.pak.ist .pak-tocke i.da { background: var(--grad); }
.pak.ist .pak-tocke span { color: #9ea3c4; }
.pak { --mx: 50%; --my: 0%; position: relative; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--cream-line); padding: 30px; display: flex; flex-direction: column; transition: transform .45s var(--e-out), box-shadow .45s; }
.pak:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(20, 25, 70, .45); }
.pak .ime { font: 600 12px var(--f-mono); letter-spacing: .16em; color: #3f55d4; text-transform: uppercase; }
.pak .cij { font: 600 54px/1 var(--f-disp); letter-spacing: -.04em; margin: 22px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.pak .cij small { font: 500 14px var(--f-sans); color: var(--cream-muted); letter-spacing: 0; }
.pak .pdv { font-size: 12.5px; color: var(--cream-muted); margin-bottom: 18px; }
.pak .opis { font-size: 15px; color: var(--cream-ink); margin: 0 0 20px; }
.pak ul { list-style: none; margin: 0 0 26px; padding: 18px 0 0; border-top: 1px solid var(--cream-2); display: grid; gap: 11px; }
.pak li { font-size: 14px; color: #33374f; padding-left: 26px; position: relative; }
.pak li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #e6e9fe; }
.pak li::after { content: ''; position: absolute; left: 5px; top: 7px; width: 6px; height: 3px; border-left: 1.6px solid #3f55d4; border-bottom: 1.6px solid #3f55d4; transform: rotate(-45deg); }
.pak .g { margin-top: auto; align-self: stretch; }
.pak.siri .g { align-self: flex-start; min-width: 260px; }
.pak .g-o { color: var(--cream-ink); border-color: var(--cream-line); background: var(--cream); }
.pak .g-o:hover { border-color: #c3c8e0; background: var(--cream-2); color: var(--cream-ink); }
.pak.ist { background: #10142e; color: #fff; border-color: #10142e; box-shadow: 0 40px 80px -40px rgba(10, 14, 50, .7); }
.pak.ist .opis, .pak.ist li { color: #e4e6f3; }
.pak.ist .pdv, .pak.ist .cij small { color: #9ea3c4; }
.pak.ist ul { border-top-color: #272d52; }
.pak.ist li::before { background: rgba(91, 108, 240, .2); } .pak.ist li::after { border-color: var(--ember-2); }
.pak.ist .ime { color: var(--ember-2); }
.pak .znak { position: absolute; top: 24px; right: 24px; font: 600 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--grad); color: #fff; }
.pak-nap { margin: 22px 0 0; font-size: 13px; color: var(--cream-muted); text-align: center; }

/* =====================================================================
   ZA PROIZVOĐAČE
   ===================================================================== */
.proiz { background: linear-gradient(180deg, var(--bg) 0%, #070a1a 100%); border-top: 1px solid var(--line); overflow: hidden; }
.proiz-junak { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 110px; }
.proiz-junak h2 { font: 600 clamp(36px, 5vw, 64px)/1 var(--f-disp); letter-spacing: -.04em; margin: 0 0 22px; }
.proiz-junak .lead { color: var(--muted); font-size: 17px; font-weight: 300; margin: 0 0 30px; max-width: 540px; }
.proiz-junak .lead b { color: var(--jako); font-weight: 500; }
.pm { margin: 0; border-radius: var(--r-xl); background: linear-gradient(180deg, #101733, #0c1129); border: 1px solid var(--line); overflow: hidden; position: relative; box-shadow: var(--sjena); }
.pm::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(91, 108, 240, .6), transparent 35%, transparent 70%, rgba(255, 255, 255, .12)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; }
.pm-traka { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 12px var(--f-mono); }
.pm-traka b { color: var(--jako); font-weight: 500; }
.pm-traka .uz { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pm-traka .uz i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); animation: puls 1.8s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .3; } }
.pm-scena { height: 380px; position: relative; cursor: grab; }
.pm-tab { display: flex; gap: 4px; padding: 10px 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pm-tab button { font: 500 13px/1 var(--f-sans); color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: all .2s; }
.pm-tab button:hover { color: var(--jako); }
.pm-tab button[aria-selected="true"] { color: var(--jako); background: rgba(255, 255, 255, .05); border-color: var(--line-2); }
.pm-opis { padding: 10px 18px 18px; font-size: 13.5px; color: var(--muted); min-height: 62px; }
.p-koraci { list-style: none; margin: 0 0 110px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); position: relative; }
.p-koraci::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: var(--prog, 0%); background: var(--grad); box-shadow: 0 0 10px var(--ember); transition: width 1.4s var(--e-out); }
.p-koraci li { padding: 28px 26px 0 0; position: relative; }
.p-koraci li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line-3); transition: all .5s; }
.p-koraci.vidljivo li::before { border-color: var(--ember); background: var(--ember); box-shadow: 0 0 0 4px rgba(91, 108, 240, .18); }
.p-koraci .br { font: 500 12px var(--f-mono); color: var(--dim); letter-spacing: .1em; }
.p-koraci h3 { margin: 12px 0 8px; font: 600 21px/1.2 var(--f-disp); letter-spacing: -.02em; }
.p-koraci p { margin: 0; color: var(--muted); font-size: 14.5px; }
.p-koraci b { color: var(--text); font-weight: 600; }
.kat-g { list-style: none; margin: 0 0 110px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line); }
.kat-g li { position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 250px; transition: background .3s; }
.kat-g button, .kat-g a { all: unset; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; width: 100%; padding: 22px 22px 24px; cursor: pointer; }
.kat-g li:hover, .kat-g li:focus-within { background: #0f1530; }
.kat-g .kb { font: 300 11px var(--f-mono); color: var(--dim); letter-spacing: .12em; }
.kat-g svg { width: 46px; height: 46px; margin: 26px 0 22px; fill: none; stroke: var(--text-2); stroke-width: 1.1; stroke-linejoin: round; transition: stroke .3s, transform .45s var(--e-out); }
.kat-g li:hover svg { stroke: var(--ember-2); transform: translateY(-4px) scale(1.06); }
.kat-g h3 { margin: 0 0 8px; font: 400 19px/1.2 var(--f-disp); letter-spacing: -.015em; }
.kat-g p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); font-weight: 300; }
.kat-g .kp { margin-top: auto; font: 400 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.kat-g li.vas { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, .02) 10px 11px); }
.kat-g li.vas svg { stroke: var(--ember); } .kat-g li.vas .kp { color: var(--ember-2); }
.kat-g li.odab { background: rgba(91, 108, 240, .06); }
.kat-g li.odab::after { content: '✓ u obrascu'; position: absolute; top: 18px; right: 18px; font: 500 10.5px var(--f-mono); color: var(--ember-3); letter-spacing: .06em; }
.prikaz-u { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; margin-bottom: 110px; }
.kvacice { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.kvacice li { position: relative; padding-left: 32px; color: var(--text-2); font-size: 15px; }
.kvacice li::before { content: ''; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-3); }
.kvacice li::after { content: ''; position: absolute; left: 6px; top: 8px; width: 7px; height: 4px; border-left: 1.6px solid var(--ember); border-bottom: 1.6px solid var(--ember); transform: rotate(-45deg); }
.kvacice b { color: var(--jako); font-weight: 500; }
.ekran { border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sjena); overflow: hidden; transform: perspective(1400px) rotateY(-6deg) rotateX(3deg); transition: transform .8s var(--e-out); }
.ekran:hover { transform: none; }
.ekran-t { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 12px var(--f-mono); }
.ekran-t i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-3); }
.ekran-u { padding: 18px 18px 10px; }
.tab-o { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tab-o th { text-align: left; font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 0 8px 10px; border-bottom: 1px solid var(--line); }
.tab-o td { padding: 11px 8px; border-bottom: 1px solid #171e3f; color: var(--text-2); }
.tab-o .n { text-align: right; font-family: var(--f-mono); font-size: 12.5px; }
.tab-o tbody tr:first-child td { color: var(--jako); background: linear-gradient(90deg, rgba(91, 108, 240, .12), transparent 70%); }
#pKartica .ptn { margin: 16px 0 10px; background: var(--surface-2); }
#pKartica .ptn-l { grid-template-columns: 1fr; }
#pKartica .ptn-k { background: #111835; }
.tier-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 110px; }
.tier { border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 28px; display: flex; flex-direction: column; transition: transform .4s var(--e-out), box-shadow .4s; }
.tier:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.tier .mono { font-size: 12px; color: var(--muted); }
.tier h3 { margin: 18px 0 10px; font: 600 25px/1.1 var(--f-disp); letter-spacing: -.025em; }
.tier > p { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; }
.tier ul { list-style: none; margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.tier li { font-size: 14px; color: var(--text-2); padding-left: 22px; position: relative; }
.tier li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 10px; height: 1px; background: var(--muted); }
.tier .g { margin-top: auto; align-self: flex-start; }
.tier.ist { background: linear-gradient(180deg, #161a3c, var(--surface) 65%); box-shadow: inset 0 0 0 1px var(--ember-line), 0 30px 70px -35px rgba(91, 108, 240, .45); }
.tier.ist .mono { color: var(--ember-2); } .tier.ist li::before { background: var(--ember); }

/* ---------- pitanja ---------- */
.pit-u { display: grid; grid-template-columns: .75fr 1.25fr; gap: 56px; }
.pit-tab { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--cream-2); margin-top: 8px; position: relative; }
.pit-tab button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--cream-muted); font: 500 13.5px/1 var(--f-sans); padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: color .2s; }
.pit-tab button[aria-selected="true"] { color: var(--cream-ink); }
.pit-tab .klizac { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px -6px rgba(20, 25, 70, .3); transition: transform .45s var(--e-out), width .45s var(--e-out); }
.faq { display: none; }
.faq.akt { display: block; }
.faq details { border-bottom: 1px solid var(--cream-line); }
.faq details:first-child { border-top: 1px solid var(--cream-line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 500 18px/1.3 var(--f-disp); letter-spacing: -.012em; position: relative; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; border-radius: 50%; transform: translateY(-50%); background: var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318150f' stroke-width='2'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .35s var(--e-out), background-color .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background-color: #dfe3fe; }
.faq summary:hover { color: #3f55d4; }
.faq .odg { overflow: hidden; }
.faq .odg p { margin: 0 0 22px; color: var(--cream-muted); max-width: 680px; font-size: 15.5px; }

/* ---------- kontakt / obrazac ---------- */
.kontakt-u { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.kontakt-l { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.kontakt-l li { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 14px; display: flex; gap: 16px; }
.kontakt-l span { color: var(--ember-2); font-family: var(--f-mono); }
.ob { background: var(--surface); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line); padding: 30px; display: grid; gap: 16px; position: relative; }
.ob label { display: grid; gap: 8px; font: 500 13px/1.2 var(--f-sans); color: var(--text-2); }
.ob textarea { resize: vertical; min-height: 110px; }
.ob [aria-invalid="true"] { border-color: #e5484d !important; }
.ob .p2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ob fieldset { border: 0; padding: 0; margin: 0; }
.ob legend { font: 500 13px/1.2 var(--f-sans); color: var(--text-2); margin-bottom: 10px; padding: 0; }
.cipovi { display: flex; flex-wrap: wrap; gap: 7px; }
.cipovi label { display: inline-flex; cursor: pointer; }
.cipovi input { position: absolute; opacity: 0; pointer-events: none; }
.cipovi span { font: 400 13px/1 var(--f-sans); color: var(--text-2); padding: 9px 13px; border-radius: 999px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line-2); transition: all .2s; }
.cipovi label:hover span { box-shadow: inset 0 0 0 1px var(--line-3); color: var(--jako); }
.cipovi input:checked + span { color: var(--jako); background: var(--ember-soft); box-shadow: inset 0 0 0 1px var(--ember-line); }
.cipovi input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
.privola { grid-template-columns: auto 1fr !important; align-items: start; gap: 10px !important; font-weight: 400 !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.45 !important; }
.privola input { width: 18px; height: 18px; margin: 0; accent-color: var(--ember); }
.ob-d { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.poruka { margin: 0; font-size: 13.5px; color: var(--muted); }
.poruka.ok { color: var(--mint); } .poruka.greska { color: #ff8a80; }
.poruka a { color: inherit; text-underline-offset: 3px; }
.ob-alt { margin: 8px 0 0; display: inline-block; font: 500 12.5px/1.2 var(--f-sans); color: var(--text); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 13px; cursor: pointer; }
.ob-alt:hover { border-color: var(--line-3); } .ob-alt:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.ob[aria-busy="true"] button[type=submit] { opacity: .6; cursor: progress; }
.hvala .hv-id { margin-top: 12px; font-size: 12.5px; }
.kontakt-adrese a, .noga-d a { color: inherit; text-underline-offset: 3px; }
.kontakt-adrese span { min-width: 76px; }
.skriveno { position: absolute !important; left: -9999px; }
.ob.poslano { place-items: center; text-align: center; min-height: 380px; }
.hvala h3 { font: 600 28px/1.1 var(--f-disp); letter-spacing: -.02em; margin: 16px 0 10px; }
.hvala p { color: var(--muted); margin: 0; }
.hvala svg { width: 60px; height: 60px; margin: 0 auto; stroke: var(--ember); fill: none; stroke-width: 1.4; }
.hvala svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: kvac .6s .2s var(--e-out) forwards; }
@keyframes kvac { to { stroke-dashoffset: 0; } }

/* ---------- završni poziv ---------- */
.zavrsno { padding: 0 0 120px; }
.zav-k { position: relative; border-radius: 32px; padding: 80px 60px; overflow: hidden; background: #0f1230; border: 1px solid #262c5c; text-align: center; isolation: isolate; }
.zav-k::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 360px at 50% 110%, rgba(91, 108, 240, .45), transparent 70%), radial-gradient(500px 300px at 10% -10%, rgba(95, 220, 236, .18), transparent 70%); }
.zav-k::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 50% 100%, #000, transparent 70%); }
.zav-k h2 { font: 600 clamp(34px, 5vw, 62px)/1 var(--f-disp); letter-spacing: -.04em; margin: 0 auto 18px; max-width: 760px; }
.zav-k p { color: var(--text-2); font-size: 17px; margin: 0 auto 32px; max-width: 560px; font-weight: 300; }
.zav-k .cta { justify-content: center; margin: 0; }

/* ---------- podnožje ---------- */
.noga { background: #080d1f; border-top: 1px solid var(--line); padding: 72px 0 30px; color: var(--muted); }
.noga-u { display: grid; grid-template-columns: 1.1fr 2fr; gap: 48px; }
.noga-m p { margin: 16px 0 0; font: 400 12px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.noga-s { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.noga-s h4 { margin: 0 0 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.noga-s a { display: block; color: var(--text-2); text-decoration: none; font-size: 14px; padding: 5px 0; transition: color .2s, transform .3s var(--e-out); }
.noga-s a:hover { color: var(--jako); transform: translateX(3px); }
.noga-d { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding-top: 22px; border-top: 1px solid #131a38; font-size: 12.5px; color: var(--dim); }

/* =====================================================================
   DIJALOZI, OBAVIJEST, DOBRODOŠLICA (ulaz.js)
   ===================================================================== */
.dobro { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(10, 15, 37, .84); backdrop-filter: blur(18px); pointer-events: none; }
.dobro .pecat { position: relative; width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; background: rgba(91, 108, 240, .08); border: 1px solid var(--ember-line); box-shadow: 0 0 90px rgba(91, 108, 240, .3); animation: pecat .5s ease-out both; }
.dobro .pecat::before { content: ''; position: absolute; inset: -18px; border: 1px solid rgba(91, 108, 240, .3); border-radius: 38px; animation: val 1.3s ease-out both; }
.dobro .pecat img { width: 46px; height: auto; }
.dobro h2 { font: 600 32px var(--f-disp); letter-spacing: -.02em; margin: 34px 0 8px; animation: gore .5s .1s both; }
.dobro p { color: var(--muted); font-size: 15px; margin: 0; animation: gore .5s .2s both; }
.dobro.van { animation: dobro-van .7s var(--e-out) forwards; }
@keyframes pecat { from { opacity: 0; transform: scale(.6) rotate(-15deg); } to { opacity: 1; transform: none; } }
@keyframes val { to { transform: scale(1.5); opacity: 0; } }
@keyframes dobro-van { to { opacity: 0; } }
@keyframes gore { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.u-dlg { color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 30px; width: min(1040px, calc(100% - 24px)); max-height: 92vh; box-shadow: 0 50px 140px rgba(0, 0, 0, .85); font-family: var(--f-sans); }
.u-dlg::backdrop { background: rgba(8, 13, 31, .72); backdrop-filter: blur(10px); }
.u-dlg[open] { animation: dlg .4s var(--e-out) both; }
@keyframes dlg { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.u-dlg.reg { width: min(780px, calc(100% - 24px)); }
.u-dlg .nadnaslov { font: 500 11.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-2); }
.d-glava { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.d-glava h2 { font: 600 28px var(--f-disp); letter-spacing: -.02em; margin: 6px 0 6px; }
.d-glava p { margin: 0; color: var(--muted); font-size: 14px; }
.zatvori { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); font-size: 20px; cursor: pointer; transition: all .2s; }
.zatvori:hover { border-color: var(--ember); color: var(--jako); transform: rotate(90deg); }
.paketi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.paket { text-align: left; border: 1px solid var(--line-2); border-radius: 18px; background: rgba(255, 255, 255, .02); color: var(--text); padding: 20px; cursor: pointer; font-family: var(--f-sans); transition: border-color .2s, background .2s, transform .3s var(--e-out); }
.paket:hover { border-color: var(--ember-line); transform: translateY(-2px); }
.paket[aria-pressed="true"] { border-color: var(--ember); background: rgba(91, 108, 240, .08); box-shadow: 0 0 0 1px rgba(91, 108, 240, .2), 0 16px 40px -18px rgba(91, 108, 240, .6); }
.paket .p-ime { display: block; font: 600 11px var(--f-mono); letter-spacing: .16em; color: var(--ember-2); }
.paket .p-cij { display: block; font: 600 28px var(--f-disp); letter-spacing: -.03em; margin: 12px 0 4px; white-space: nowrap; }
.paket .p-cij small { font: 500 12px var(--f-sans); color: var(--muted); letter-spacing: 0; }
.paket .p-cij .p-pdv { display: block; font: 600 11px var(--f-sans); font-style: normal; letter-spacing: .04em; color: var(--muted); margin-top: 3px; }
.paket strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.paket { padding: 16px 15px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; }
.paket .p-ime { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.paket .p-akt { font: 600 9px var(--f-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; background: rgba(95, 212, 160, .14); color: #5fd4a0; }
.paket.vrh { background: linear-gradient(160deg, rgba(91, 108, 240, .12), rgba(255, 255, 255, .02) 60%); border-color: var(--ember-line); }
.paket .p-opis { display: block; color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.5; }
.izbor-glava { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 10px; font-size: 14px; }
.izbor-glava span { font-family: var(--f-mono); color: var(--ember-2); white-space: nowrap; }
.izbori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.izb { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; color: var(--text-2); cursor: pointer; background: rgba(255, 255, 255, .015); transition: all .2s; }
.izb:has(input:checked) { border-color: var(--ember-line); background: rgba(91, 108, 240, .08); color: var(--jako); }
.izb:has(input:disabled:not(:checked)) { opacity: .4; cursor: not-allowed; }
.izb input { width: 16px; height: 16px; accent-color: var(--ember); flex-shrink: 0; margin: 0; }
.izb.glavni { flex-wrap: wrap; row-gap: 2px; border-style: dashed; }
.izb.glavni small { flex-basis: 100%; padding-left: 25px; font: 500 10.5px var(--f-mono); letter-spacing: .02em; color: var(--ember-2); }
.izb.glavni:has(input:disabled:not(:checked)) { opacity: .75; }
.naplata { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.naplata p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.naplata b { color: var(--text); }
.sitno { font-size: 11.5px; color: var(--dim); line-height: 1.6; margin: 14px 0 0; }
.r-uvod { margin-top: 14px; padding: 12px 15px; border-radius: 12px; font-size: 13px; color: #cdd3ff; background: rgba(91, 108, 240, .07); border: 1px solid var(--ember-line); }
.r-sek { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.r-sek legend { width: 100%; padding: 0 0 10px; border-bottom: 1px solid var(--line); font: 600 11px var(--f-mono); letter-spacing: .16em; color: var(--ember-2); }
.r-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.r-polje { min-width: 0; }
.r-polje label { display: block; font-size: 12.5px; color: var(--text-2); margin: 14px 0 7px; }
.r-polje input { padding: 11px 12px; font-size: 14px; }
.r-polje.sir { grid-column: 1 / -1; }
.r-polje .neob { color: var(--muted); font-size: 11px; }
.r-dno { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 24px; }
.obavijest { position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 95; max-width: 92vw; width: max-content; padding: 14px 22px; border-radius: 16px; font-size: 14px; color: #e4e8ff; background: rgba(17, 21, 52, .95);
  border: 1px solid var(--ember-line); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); animation: gore .35s var(--e-out) both; }

/* ---------- uvod (pocetna.js) ---------- */
.uvod { position: fixed; inset: 0; z-index: 100; display: block; overflow: hidden; pointer-events: auto; }
.intro-veil { position: absolute; inset: 0; background: var(--bg); background-image: radial-gradient(ellipse at 50% 46%, rgba(120, 70, 220, .16), transparent 52%), radial-gradient(ellipse at 56% 52%, rgba(17, 186, 213, .07), transparent 40%); }
.intro-brand { position: absolute; left: 50%; top: 50%; width: max-content; transform: translate(-50%, -54%); transform-origin: 0 0; pointer-events: none; will-change: transform; }
/* logotip u uvodu: veličina kao u predlošku (do 640 px s rubom → riječ ~570 px) */
.intro-brand .arxo { --arxo-w: min(570px, 78vw); display: block; filter: drop-shadow(0 0 40px rgba(76, 101, 226, .22)); }
.uvod-b { font: 600 12.5px var(--f-sans); color: #d7dde6; background: rgba(17, 24, 53, .72); border: 1px solid var(--line-3); border-radius: 999px; padding: 9px 16px; cursor: pointer; backdrop-filter: blur(6px); }
.uvod-b:hover { border-color: var(--ember); color: var(--jako); }
.intro-skip { position: absolute; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); font-size: 12px; }
html.ima-uvod body { overflow: hidden; }
html.ima-uvod .vrh .marka { visibility: hidden; }
/* opisnik u zaglavlju se pojavi kad logotip iz uvoda sleti (riječ ARXO se poklopi točno) */
html.spremno .vrh .marka .arxo__desc { animation: opis-u .5s ease both; }
@keyframes opis-u { from { opacity: 0; } to { opacity: 1; } }
html.ima-uvod main { opacity: 0; transform: translateY(12px); filter: blur(3px); transition: opacity .8s ease, transform .9s var(--e-out), filter .8s ease; }
html.ima-uvod.intro-move main { opacity: 1; transform: none; filter: none; }
html.spremno .junak-t > * { animation: gore .9s var(--e-out) both; }
html.spremno .junak-t > :nth-child(2) { animation-delay: .06s; } html.spremno .junak-t > :nth-child(3) { animation-delay: .12s; } html.spremno .junak-t > :nth-child(4) { animation-delay: .18s; } html.spremno .junak-t > :nth-child(5) { animation-delay: .24s; } html.spremno .junak-t > :nth-child(6) { animation-delay: .3s; } html.spremno .junak-t > :nth-child(7) { animation-delay: .36s; }
html.spremno .junak-d { animation: ulaz-d 1.2s .1s var(--e-out) both; }
html.bez-ulaza.spremno .junak-t > *, html.bez-ulaza.spremno .junak-d { animation: none; } /* nakon uvoda: sadržaj je već otkriven tijekom leta logotipa */
@keyframes ulaz-d { from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(6px); } }
html.povratak main { animation: gore .6s var(--e-out) both; }

/* ---------- prijelaz u program (kartica se raširi) ---------- */
.prijelaz-van { position: fixed; inset: 0; z-index: 10000; pointer-events: none; contain: strict; }
.prijelaz-van .pv-pod { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform, opacity; background: radial-gradient(120% 90% at 50% 40%, #1b2150 0%, #0e1330 60%, #0b1026 100%); }
.prijelaz-van .pv-sad { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; will-change: transform; }
.prijelaz-van .pv-ikona { width: 172px; height: 172px; }
.prijelaz-van .pv-ikona svg { width: 100%; height: 100%; display: block; overflow: visible; }
.prijelaz-van .pv-ikona svg * { animation: none !important; }
.prijelaz-van .pv-naziv { font: 700 18px 'Archivo', 'Segoe UI', sans-serif; color: #f1f3f7; letter-spacing: -.01em; margin-top: -10px; }

/* ---------- ulaz pri pomicanju ---------- */
.ulazi { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--e-out), transform .9s var(--e-out); transition-delay: var(--d, 0s); }
.ulazi.vidljivo { opacity: 1; transform: none; }
.rijeci-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.rijeci-h .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--e-out); transition-delay: calc(var(--k) * 40ms); }
.rijeci-h.vidljivo .w > span { transform: none; }

/* =====================================================================
   PRILAGODBA
   ===================================================================== */
@media (max-width: 1180px) {
  .izbornik a { padding: 9px 10px; font-size: 13px; }
  .kontakt-m { display: none; }
}
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); } .bk.s2, .bk.s3, .bk.s4 { grid-column: span 1; } .bk.siroko { grid-column: span 2; }
}
@media (max-width: 1020px) {
  .izbornik, .vrh-desno .gumb-uvod.nije-mob { display: none; }
  .burger { display: grid; }
  .vrh-desno { margin-left: auto; }
  .junak-u, .kako-u, .izr-u, .proiz-junak, .prikaz-u, .kontakt-u, .pit-u { grid-template-columns: 1fr; gap: 44px; }
  .tier-g { grid-template-columns: 1fr; max-width: 520px; }
  .paketi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pak-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pak-g > .pak, .pak-g > .pak.siri { grid-column: span 1; }
  .pak-g > .pak:nth-of-type(3) { grid-column: 1 / -1; }
  .pak-g > .pak:nth-of-type(3) ul { grid-template-columns: 1fr 1fr; gap: 11px 18px; }
  .pak.siri ul { grid-template-columns: 1fr; }
  .pak.siri .g { align-self: stretch; min-width: 0; }
  .p-koraci { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .kat-g { grid-template-columns: repeat(3, 1fr); }
  .ekran { transform: none; }
}
@media (max-width: 760px) {
  .omot { padding-left: 16px; padding-right: 16px; }
  .odj { padding: 80px 0; }
  .vrh-u { height: 64px; }
  .mob-meni { inset: 64px 0 0; }
  .bento { grid-template-columns: 1fr; } .bk.siroko { grid-column: span 1; }
  .kat-g { grid-template-columns: 1fr 1fr; }
  .kat-g li { min-height: 0; }
  .p-koraci { grid-template-columns: 1fr; }
  .ob { padding: 20px; } .ob .p2 { grid-template-columns: 1fr; }
  .zav-k { padding: 56px 22px; border-radius: 24px; }
  .noga-u, .noga-s { grid-template-columns: 1fr 1fr; }
  .pak-g { grid-template-columns: 1fr; } .pak-g > .pak:nth-of-type(3) ul { grid-template-columns: 1fr; } .pak { padding: 24px 22px; } .pak .cij { font-size: 46px; }
  .paketi { grid-template-columns: 1fr; gap: 6px; } .izbori { grid-template-columns: 1fr 1fr; }
  .paket { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 11px 14px; }
  .paket .p-ime { grid-column: 1; } .paket strong { grid-column: 1; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
  .paket .p-cij { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 21px; text-align: right; } .paket .p-cij .p-pdv { font-size: 10px; }
  .paket .p-opis { display: none; } .naplata, .r-dno { flex-direction: column; align-items: stretch; }
  .r-mreza { grid-template-columns: 1fr; } .r-polje.sir { grid-column: auto; }
  .u-dlg { padding: 20px 16px; }
  .korisnik span { display: none; }
  .zaj-pocetna { margin-left: 0; }
  .trazi { max-width: none; }
  .rez .glavni b { font-size: 30px; }
  .pm-scena { height: 300px; }
  .izr-vis { height: 320px; }
  .izr-ozn { padding: 7px 9px; min-width: 0; max-width: 62%; } .izr-ozn b { font-size: 17px; } .izr-ozn .io-s { display: none; } .izr-ozn .io-n { font-size: 9.5px; }
  .na-vrh { right: 14px; bottom: 90px; }
}
@media (max-width: 560px) {
  /* Kako radi: slojevi u jednom redu (vide se zadnji uključeni), ponuda umanjena da stane */
  .pz-slojevi { left: 10px; right: 10px; bottom: 10px; max-width: none; flex-wrap: nowrap; justify-content: flex-end; overflow: hidden; gap: 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
  .pz-slojevi li { flex: none; white-space: nowrap; font-size: 9.5px; padding: 3px 7px; }
  .pz-slojevi li:not(.on) { display: none; }
  .scena-k.sk4 { padding: 0; }
  .dok { position: absolute; left: 50%; top: 50%; width: 390px; max-width: none; transform: translate(-50%, -46%) rotate(-2.5deg) scale(.62); }
  .sk4.akt .dok { transform: translate(-50%, -50%) rotate(-2.5deg) scale(.62); }
}
@media (max-width: 440px) {
  .kat-g { grid-template-columns: 1fr 1fr; }
  .noga-s { grid-template-columns: 1fr 1fr !important; }
  .noga-u, .noga-s { grid-template-columns: 1fr; }
  .kartica-s { padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ulazi, .rijeci-h .w > span { opacity: 1; transform: none; }
  .uvod { display: none !important; }
  html.ima-uvod body { overflow: auto; } html.ima-uvod main { opacity: 1; transform: none; filter: none; } html.ima-uvod .vrh .marka { visibility: visible; }
}

/* ništa ne smije širiti stranicu vodoravno (oblačići, orbite) */
main#sadrzaj { overflow-x: clip; }

/* ================= PROBNA VERZIJA (js/proba.js, js/ulaz.js) ================= */
.stanje.proba { color: #ffd98a; background: #2a2210; border: 1px solid rgba(242, 178, 51, .5); }
.u-proba { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 12px 0 0; text-align: center; }
.u-proba b { color: #ffd98a; font-weight: 600; }
.paket-traka .pt-proba { border-color: rgba(242, 178, 51, .55); color: #ffd98a; }
.paket-traka .pt-proba:hover { background: rgba(242, 178, 51, .1); color: #ffe7b3; }
.d-proba { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(242, 178, 51, .45); background: rgba(242, 178, 51, .07); }
.d-proba b { display: block; font: 600 15px/1.3 var(--f-disp); color: #ffe2a8; }
.d-proba span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.d-proba[data-stanje="istekla"] { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.d-proba[data-stanje="istekla"] b { color: var(--text); }
.r-proba { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(242, 178, 51, .4); background: rgba(242, 178, 51, .06); font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.r-proba input { margin-top: 3px; width: 16px; height: 16px; accent-color: #f2b233; flex: none; }
.r-proba b { color: #ffe2a8; font-weight: 600; }
.pak-proba { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 18px 22px; border-radius: var(--r-l); background: #fff; border: 1px dashed #d8a431; }
.pak-proba .pp-t { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pak-proba .pp-znak { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 700 22px var(--f-disp); color: #1b2430; background: #f2b233; }
.pak-proba h3 { margin: 0 0 2px; font: 600 18px/1.25 var(--f-disp); letter-spacing: -.01em; color: var(--cream-ink); }
.pak-proba p { margin: 0; font-size: 13.5px; color: var(--cream-muted); line-height: 1.5; }
.pak-proba .g { flex: none; }
.pak-proba[data-stanje="aktivna"] { border-style: solid; background: #fffaf0; }
.rp-proba { margin: 0 0 16px; padding: 14px 15px; border-radius: 14px; border: 1px solid rgba(242, 178, 51, .45); background: rgba(242, 178, 51, .07); }
.rp-proba h3 { margin: 0 0 4px; font: 600 16px/1.3 var(--f-disp); color: #ffe2a8; letter-spacing: -.01em; }
.rp-proba p { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rp-proba p:last-child { margin-bottom: 0; }
.rp-proba small { display: block; font-size: 11.5px; color: var(--dim); line-height: 1.5; margin-top: 8px; }
.rp-proba.istekla { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.rp-proba.istekla h3 { color: var(--text); }
.rp-mjera .rp-pr b { color: #ffd98a; }
@media (max-width: 720px) {
  .d-proba, .pak-proba { flex-direction: column; align-items: stretch; }
  .pak-proba { padding: 16px; }
  .pak-proba .g, .d-proba .g-glavni { width: 100%; justify-content: center; }
}

/* ---------- ARXO logotip: prijava, dijalozi, mobitel ---------- */
.d-marka { --arxo-w: 96px; display: flex; margin: 0 0 18px; align-items: flex-start; }
.d-marka .arxo__desc { align-self: center; }
.u-dlg .d-marka { --arxo-w: 88px; margin-bottom: 14px; }
@media (max-width: 560px) {
  .vrh .marka .arxo { --arxo-w: 108px; }
}

/* =====================================================================
   LIQUID GLASS + SVIJETLA TEMA NASLOVNICE
   Tema: <html data-tema="svijetla|tamna"> (js/tema.js). Tamna je izvorni izgled;
   svijetla mijenja tokene, a „tamni otoci" (pozornica, 3D scene, istaknuti paket,
   završni poziv) ostaju tamni kao ekrani uređaja.
   Staklo (oba načina): zaglavlje, izbornik s lećom, kartica prijave, krugovi
   programa kao staklene leće, oblačići, dijalozi, obavijesti, gumbi, klizači.
   ===================================================================== */
@media screen {
:root[data-tema="svijetla"] {
  --bg: #f2f3fa; --bg-2: #eaecf6; --surface: #ffffff; --surface-2: #f5f6fc; --surface-3: #e9ecf7;
  --line: #dcdfee; --line-2: #cbd0e6; --line-3: #aeb4d4;
  --text: #0f1330; --text-2: #363c5c; --muted: #50567a; --dim: #585e80;
  --ember: #4a5de0; --ember-2: #3d4fd4; --ember-3: #3242c0; --ember-soft: rgba(74, 93, 224, .10); --ember-line: rgba(74, 93, 224, .36);
  --cyan-2: #0b8ea6; --sky: #2f6fd1; --mint: #17895c;
  --jako: #0c1130;
  --sjena: 0 30px 80px -34px rgba(24, 30, 80, .35);
  color-scheme: light;
}
/* tamni otoci u svijetloj temi */
:root[data-tema="svijetla"] :is(.pozornica, .o-scena, .izr-vis, .pm, .bk-vis, .zav-k, .pak.ist, .uvod, .prijelaz-van) {
  --bg: #0b1026; --bg-2: #0e1330; --surface: #121835; --surface-2: #171e40; --surface-3: #1e2549;
  --line: #222a4e; --line-2: #2e3762; --line-3: #414b7c;
  --text: #f3f4fb; --text-2: #c7cbe4; --muted: #9196b8; --dim: #8a8fb4;
  --ember: #5b6cf0; --ember-2: #8b9bff; --ember-3: #b9c2ff; --ember-soft: rgba(91, 108, 240, .14); --ember-line: rgba(91, 108, 240, .45);
  --jako: #fff; --sky: #8ab4ff; --mint: #5fd4a0; --cyan-2: #5fdcec;
  color: var(--text); color-scheme: dark;
}
:root[data-tema="svijetla"] .uvod .intro-veil { background-color: #f2f3fa; }
:root[data-tema="svijetla"] .arxo--tamno { --arxo-desc: #6d67a8; }
:root[data-tema="svijetla"] :is(.uvod, .zav-k, .pm) .arxo--tamno { --arxo-desc: #b3aee8; }
:root[data-tema="svijetla"] ::selection { color: #0c1130; background: rgba(120, 70, 220, .2); }

/* ---- zaglavlje: plutajuća staklena traka ---- */
.vrh.skrol {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)), rgba(11, 16, 38, .62);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06), 0 10px 30px -18px rgba(0, 0, 0, .7);
}
:root[data-tema="svijetla"] .vrh.skrol { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55)); border-bottom-color: rgba(20, 26, 70, .08); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .8), 0 10px 30px -20px rgba(24, 30, 80, .35); }
.izbornik {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(18, 24, 56, .45);
  border-color: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 24px -14px rgba(0, 0, 0, .6);
}
.izbornik .klizac { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px -4px rgba(0, 0, 0, .5); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), width .5s cubic-bezier(.34, 1.4, .64, 1), opacity .3s; }
:root[data-tema="svijetla"] .izbornik { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); border-color: rgba(20, 26, 70, .09); box-shadow: inset 0 1px 0 #fff, 0 10px 26px -16px rgba(24, 30, 80, .35); }
:root[data-tema="svijetla"] .izbornik .klizac { background: #fff; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 26, 70, .06), 0 3px 10px -3px rgba(24, 30, 80, .28); }
:root[data-tema="svijetla"] .izbornik a { color: var(--text-2); }
:root[data-tema="svijetla"] .izbornik a.iz-p { color: var(--ember-2); }
.gumb-uvod { background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: border-color .2s, color .2s, background .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.gumb-uvod:active { transform: scale(.96); }
:root[data-tema="svijetla"] .gumb-uvod:not(.gumb-prijava) { background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24, 30, 80, .08); }
.gumb-prijava { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px -10px rgba(91, 108, 240, .8); }
:root[data-tema="svijetla"] .gumb-prijava { color: #fff; }
.gumb-prijava, .gumb-prijava:hover, .gumb-prijava:focus-visible { color: #fff; background-color: #5a56df; text-shadow: 0 1px 1px rgba(20, 10, 60, .25); }
.gumb-prijava:hover { border-color: transparent; }
:root[data-tema="svijetla"] .mob-meni { background: rgba(242, 243, 250, .9); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
:root[data-tema="svijetla"] .burger { background: rgba(255, 255, 255, .7); }
.na-vrh { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)), rgba(17, 23, 51, .6); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -10px rgba(0, 0, 0, .6); }
:root[data-tema="svijetla"] .na-vrh { background: rgba(255, 255, 255, .72); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(24, 30, 80, .35); }
.vrh-desno .lg-tema { margin: 0; }
.vrh-desno:has(.korisnik:not([hidden])) { gap: 6px; }
.vrh-desno:has(.korisnik:not([hidden])) .lg-tema { --lg-tw: 50px; --lg-th: 30px; --lg-tk: 24px; }

/* ---- gumbi ---- */
.g-e, .g-glavni, .gumb-prijava { background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--grad); }
.g, .g-glavni { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, background .2s, border-color .2s, color .2s, filter .2s; }
.g:active, .g-glavni:active { transform: scale(.97); }
.g-o { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-tema="svijetla"] .g-o { color: var(--text); background: rgba(255, 255, 255, .72); border-color: var(--line-2); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24, 30, 80, .08); }
:root[data-tema="svijetla"] .g-o:hover { background: #fff; border-color: var(--line-3); }
:root[data-tema="svijetla"] :is(.zav-k, .pak.ist, .o-scena, .pm) .g-o { color: var(--text-2); background: rgba(255, 255, 255, .05); border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
:root[data-tema="svijetla"] .pilula { background: rgba(255, 255, 255, .65); box-shadow: inset 0 1px 0 #fff; }

/* ---- kartica prijave: staklo s oštrim rubom ---- */
.kartica-s {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 40%), rgba(20, 27, 60, .58);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  box-shadow: var(--sjena), inset 0 1px 0 rgba(255, 255, 255, .12);
}
:root[data-tema="svijetla"] .kartica-s {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62) 45%), rgba(255, 255, 255, .5);
  border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 40px 90px -40px rgba(40, 40, 120, .45), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 26, 70, .06);
}
:root[data-tema="svijetla"] .kartica-s::after { background: linear-gradient(140deg, rgba(120, 70, 220, .55), rgba(255, 255, 255, .9) 35%, transparent 70%, rgba(19, 196, 217, .35)); }
:root[data-tema="svijetla"] .junak-d::before { background: radial-gradient(closest-side, rgba(120, 90, 235, .28), transparent); }
:root[data-tema="svijetla"] :is(.u-polje input, .r-polje input, .ob input:not([type=checkbox]), .ob select, .ob textarea, .klizac-p input[type=number]) { background: rgba(255, 255, 255, .85); border-color: var(--line-2); box-shadow: inset 0 1px 2px rgba(20, 26, 70, .06); }
:root[data-tema="svijetla"] :is(.u-polje input, .r-polje input, .ob input, .ob select, .ob textarea):focus { background: #fff; }
:root[data-tema="svijetla"] .rp-mjera div, :root[data-tema="svijetla"] .rez div { background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff; }

/* ---- segmentirani izbornici: leća ---- */
.filtri, .izr-tabovi { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)), rgba(0, 0, 0, .18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.filtri .klizac { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px -4px rgba(0, 0, 0, .55); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), width .5s cubic-bezier(.34, 1.4, .64, 1); }
.izr-tabovi .klizac { background-image: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 60%), var(--grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -10px rgba(91, 108, 240, .8); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), width .5s cubic-bezier(.34, 1.4, .64, 1); }
:root[data-tema="svijetla"] .izr-tabovi button[aria-selected="true"] { color: #fff; }
:root[data-tema="svijetla"] .filtri, :root[data-tema="svijetla"] .izr-tabovi { background: rgba(20, 26, 70, .06); box-shadow: inset 0 1px 2px rgba(20, 26, 70, .08), inset 0 0 0 1px rgba(20, 26, 70, .05); border-color: transparent; }
:root[data-tema="svijetla"] .filtri .klizac { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 3px 10px -3px rgba(24, 30, 80, .3); }
:root[data-tema="svijetla"] .trazi input { background: rgba(255, 255, 255, .75); box-shadow: inset 0 1px 2px rgba(20, 26, 70, .06); }
.pit-tab .klizac { transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), width .5s cubic-bezier(.34, 1.4, .64, 1); }
:root[data-tema="svijetla"] .zaj-pocetna .zp-sw { background: rgba(20, 26, 70, .12); border-color: transparent; }
.zaj-pocetna .zp-sw::after { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.zaj-pocetna input:checked + .zp-sw { background-image: var(--grad); border-color: transparent; }
.zaj-pocetna input:checked + .zp-sw::after { background: #fff; }

:root[data-tema="svijetla"] .stanje { background: #eef0fb; color: var(--text-2); }
:root[data-tema="svijetla"] .stanje.akt { background: #e6e9fe; }
:root[data-tema="svijetla"] .stanje.zak { color: #2c5f8f; background: #eaf2fb; border-color: rgba(44, 95, 143, .3); }
:root[data-tema="svijetla"] .stanje.proba { color: #7a5200; background: #fff4d8; }

/* ---- odjeljci ---- */
:root[data-tema="svijetla"] .izr-r { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7)); box-shadow: inset 0 1px 0 #fff, var(--sjena); }
:root[data-tema="svijetla"] .izr-p, :root[data-tema="svijetla"] .bk, :root[data-tema="svijetla"] .ob, :root[data-tema="svijetla"] .tier, :root[data-tema="svijetla"] .ekran { box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff, 0 18px 40px -30px rgba(24, 30, 80, .35); border-color: transparent; }
:root[data-tema="svijetla"] .izbor-v button, :root[data-tema="svijetla"] .cipovi span, :root[data-tema="svijetla"] .izr-plus li { background: rgba(255, 255, 255, .7); }
:root[data-tema="svijetla"] .proiz { background: linear-gradient(180deg, var(--bg) 0%, #e8e9f6 100%); }
:root[data-tema="svijetla"] .kat-g li:hover, :root[data-tema="svijetla"] .kat-g li:focus-within { background: rgba(255, 255, 255, .7); }
:root[data-tema="svijetla"] .kat-g li.vas { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(20, 26, 70, .035) 10px 11px); }
:root[data-tema="svijetla"] .tab-o td { border-bottom-color: var(--line); }
:root[data-tema="svijetla"] #pKartica .ptn-k { background: var(--surface-2); }
:root[data-tema="svijetla"] .tier.ist { background: linear-gradient(180deg, #ecebff, var(--surface) 65%); }
:root[data-tema="svijetla"] .noga { background: #e8eaf5; }
:root[data-tema="svijetla"] .noga-d { border-top-color: var(--line); }
:root[data-tema="svijetla"] .p-koraci li::before { background: var(--bg); }
:root[data-tema="svijetla"] .io-bar { background: #2a3160; }

/* ---- klizači (brzi izračun, 3D) ---- */
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #7846dc, #4c65e2) 0 0 / var(--p, 50%) 100% no-repeat, rgba(255, 255, 255, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
input[type=range]::-webkit-slider-thumb { width: 26px; height: 18px; margin-top: -6px; border-radius: 99px; border: 0; background: radial-gradient(120% 140% at 50% 0%, #fff 0%, #f4f6fc 60%, #dfe3f2 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -2px rgba(0, 0, 0, .45); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type=range]::-moz-range-thumb { width: 26px; height: 18px; border-radius: 99px; border: 0; background: #fff; }
:root[data-tema="svijetla"] input[type=range]::-webkit-slider-runnable-track { background-color: rgba(20, 26, 70, .12); box-shadow: inset 0 1px 2px rgba(20, 26, 70, .15); }
:root[data-tema="svijetla"] input[type=range]::-webkit-slider-thumb { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(20, 26, 70, .15), 0 1px 2px rgba(20, 26, 70, .25), 0 4px 12px -2px rgba(20, 26, 70, .3); }

/* ---- dijalozi, obavijesti, dobrodošlica ---- */
.u-dlg {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 30%), rgba(19, 25, 56, .86);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 50px 140px rgba(0, 0, 0, .7);
}
.u-dlg::backdrop { background: rgba(8, 13, 31, .5); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
:root[data-tema="svijetla"] .u-dlg { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 251, 255, .9)); border-color: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(20, 26, 70, .07), 0 50px 120px -30px rgba(30, 36, 100, .45); }
:root[data-tema="svijetla"] .u-dlg::backdrop { background: rgba(40, 46, 100, .22); }
.paket, .izb { transition: border-color .2s, background .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
:root[data-tema="svijetla"] .paket, :root[data-tema="svijetla"] .izb { background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff; }
:root[data-tema="svijetla"] .paket.vrh { background: linear-gradient(160deg, rgba(91, 108, 240, .12), rgba(255, 255, 255, .8) 60%); }
:root[data-tema="svijetla"] .paket[aria-pressed="true"] { background: linear-gradient(160deg, rgba(91, 108, 240, .14), #fff 70%); }
:root[data-tema="svijetla"] .paket .p-akt { background: rgba(23, 137, 92, .12); color: #17895c; }
:root[data-tema="svijetla"] .r-uvod { color: #2b3690; }
:root[data-tema="svijetla"] .zatvori { background: rgba(255, 255, 255, .7); }
.obavijest { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)), rgba(20, 25, 60, .78); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 60px rgba(0, 0, 0, .5); }
:root[data-tema="svijetla"] .obavijest { color: var(--text); background: rgba(255, 255, 255, .86); box-shadow: inset 0 1px 0 #fff, 0 20px 50px -16px rgba(30, 36, 100, .4); }
:root[data-tema="svijetla"] .dobro { background: rgba(242, 243, 250, .78); }
:root[data-tema="svijetla"] .d-proba[data-stanje="istekla"], :root[data-tema="svijetla"] .rp-proba.istekla { background: rgba(255, 255, 255, .6); }
:root[data-tema="svijetla"] :is(.u-proba b, .paket-traka .pt-proba, .rp-mjera .rp-pr b, .d-proba b, .r-proba b, .rp-proba h3) { color: #8a5a00; }
:root[data-tema="svijetla"] .paket-traka .pt-proba:hover { color: #6b4500; }
:root[data-tema="svijetla"] .poruka.greska { color: #c0352b; }
:root[data-tema="svijetla"] .ob-alt { background: rgba(255, 255, 255, .8); }
:root[data-tema="svijetla"] .r-uvod { color: #2b3690; }
}
@media (prefers-reduced-transparency: reduce) {
  .vrh.skrol, .izbornik, .kartica-s, .u-dlg, .obavijest, .na-vrh, .g-o { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .vrh.skrol { background: #0e1330; } .kartica-s, .u-dlg { background: #151b3b; }
  :root[data-tema="svijetla"] .vrh.skrol { background: #f7f8fc; }
  :root[data-tema="svijetla"] .kartica-s, :root[data-tema="svijetla"] .u-dlg { background: #fff; }
}

/* =====================================================================
   TAMNA TEMA: „svijetli" odjeljci (Kako radi, Paketi, Pitanja) postaju
   podignuta tamna ploha, da tamna tema nema bljeskavih bijelih traka.
   (Svijetla tema ih ionako prikazuje svijetlo.)
   ===================================================================== */
@media screen {
:root[data-tema="tamna"] .svijetlo {
  --cream: #10163a; --cream-2: #1b2249; --cream-3: #232b56; --cream-line: #2a3364; --cream-ink: #f3f4fb; --cream-muted: #a6abcb;
  background: radial-gradient(900px 480px at 88% 0%, rgba(91, 108, 240, .12), transparent 70%), radial-gradient(700px 420px at 0% 100%, rgba(120, 70, 220, .10), transparent 70%), linear-gradient(180deg, #0e1433, #0c1129);
  border-top: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .05);
}
:root[data-tema="tamna"] .svijetlo .naglasak { background-image: linear-gradient(95deg, #fff 0%, #d2c8ff 26%, #9d87ff 52%, #7288ff 74%, #3fd3ea 100%); }
:root[data-tema="tamna"] .korak:hover { background: rgba(255, 255, 255, .04); }
:root[data-tema="tamna"] .korak.akt, :root[data-tema="tamna"] .pak:not(.ist), :root[data-tema="tamna"] .pak-proba {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 45%), rgba(22, 29, 66, .62);
  border-color: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 24px 60px -34px rgba(0, 0, 0, .8);
}
:root[data-tema="tamna"] .pak-proba { border: 1px dashed rgba(242, 178, 51, .55); background: linear-gradient(180deg, rgba(242, 178, 51, .08), rgba(242, 178, 51, .03)), rgba(22, 29, 66, .55); }
:root[data-tema="tamna"] .pak-proba[data-stanje="aktivna"] { border-style: solid; }
:root[data-tema="tamna"] .pak-proba h3 { color: #ffe2a8; }
:root[data-tema="tamna"] .pak:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 70px -36px rgba(0, 0, 0, .9); }
:root[data-tema="tamna"] .pak .ime { color: #aab6ff; }
:root[data-tema="tamna"] .pak li { color: #c7cbe4; }
:root[data-tema="tamna"] .pak li::before { background: rgba(91, 108, 240, .22); }
:root[data-tema="tamna"] .pak li::after { border-color: #aab6ff; }
:root[data-tema="tamna"] .pak-tocke i.kuca { background: #2e3762; }
:root[data-tema="tamna"] .pak .g-o { background: rgba(255, 255, 255, .05); }
:root[data-tema="tamna"] .pak .g-o:hover { border-color: var(--ember-line); background: rgba(255, 255, 255, .09); }
:root[data-tema="tamna"] .pak.ist { background: linear-gradient(180deg, rgba(91, 108, 240, .22), rgba(120, 70, 220, .08) 55%), #121838; border-color: var(--ember-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(91, 108, 240, .25), 0 40px 80px -40px rgba(91, 108, 240, .55); }
:root[data-tema="tamna"] .pit-tab { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .05); }
:root[data-tema="tamna"] .pit-tab .klizac { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 12px -4px rgba(0, 0, 0, .55); }
:root[data-tema="tamna"] .faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eaf6' stroke-width='2'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); }
:root[data-tema="tamna"] .faq details[open] summary::after { background-color: #2c3574; }
:root[data-tema="tamna"] .faq summary:hover { color: #aab6ff; }
}
@media screen and (prefers-reduced-transparency: reduce) {
  :root[data-tema="tamna"] :is(.korak.akt, .pak:not(.ist), .pak-proba) { -webkit-backdrop-filter: none; backdrop-filter: none; background: #161d42; }
}

/* mobitel (≤ 430 px): zaglavlje bez vodoravnog pomicanja — manji razmaci i prekidač teme */
@media (max-width: 430px) {
  .vrh-u { gap: 8px; }
  .vrh-desno, .vrh-desno:has(.korisnik:not([hidden])) { gap: 6px; }
  .vrh-desno .lg-tema { --lg-tw: 50px; --lg-th: 30px; --lg-tk: 24px; }
  .vrh-desno .burger { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
  .vrh .marka .arxo { --arxo-w: 92px; }
  .vrh-desno, .vrh-desno:has(.korisnik:not([hidden])) { gap: 4px; }
  .vrh-desno .i18n-gumb svg { display: none; }
  .vrh-desno .gumb-prijava { padding-left: 11px; padding-right: 11px; }
}
@media (max-width: 340px) { .vrh-desno .lg-tema { display: none; } }

/* audit v26 (ui): dodirni zasloni (tablet, mobitel) — gumbi zaglavlja, kartice brzog izračuna i modela ≥ 40 px */
@media (pointer: coarse) {
  .gumb-uvod, .vrh-desno .i18n-gumb, .mob-d .g { min-height: 40px; }
  .burger { min-width: 42px; min-height: 42px; }
  .lg-tema { height: 40px !important; }
  .izr-tabovi [role="tab"], .pm-tab [role="tab"], .pit-tab [role="tab"] { min-height: 40px; }
  .izbornik > a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* =====================================================================
   NASLOVNICA v29 — svijetli arhitektonski junak, 3D kuća, stakleni izbornik
   ---------------------------------------------------------------------
   Svijetla tema (osnovna, kao predložak): bijela i topla svijetlosiva podloga,
   diskretne crte tehničkog crteža, meke sjene, plavo-ljubičasti ARXO naglasci.
   Tamna tema: „noćni nacrt" (tamnoplava, tanke cijan crte), isti raspored.
   Ikone izbornika: css/izbornik.css · junak (noćna kuća, v38): css/naslovna-noc.css, js/naslovna-noc.js
   ===================================================================== */
@media screen {
:root[data-tema="svijetla"] {
  --bg: #f4f3f0; --bg-2: #efeeea; --surface: #ffffff; --surface-2: #faf9f7; --surface-3: #ecebe6;
  --line: #e2e0da; --line-2: #d2cfc8; --line-3: #b8b4ac;
  --text: #11152a; --text-2: #383d52; --muted: #5a5f72; --dim: #666a7b;
  --cream: #fbfaf8; --cream-2: #f3f2ee; --cream-3: #e9e7e1; --cream-line: #dedbd4; --cream-ink: #11152a; --cream-muted: #5a5f72;
  --v29-pod: #f2f1ed; --v29-crta: rgba(52, 62, 96, .10); --v29-crta-2: rgba(52, 62, 96, .2); --v29-vod: #2f9be6;
}
:root[data-tema="tamna"], :root:not([data-tema]) { --v29-pod: #0d1230; --v29-crta: rgba(140, 175, 255, .07); --v29-crta-2: rgba(120, 200, 240, .22); --v29-vod: #5fdcec; }
:root { --g-v29: linear-gradient(100deg, #138ef2 0%, #3f6af0 48%, #6a4be8 100%); }
}

/* ---------- zaglavlje (kao predložak: logo, četiri poveznice, Prijava + Isprobaj ARXO) ---------- */
:root .vrh .izbornik { gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vrh .izbornik a { font: 500 15px/1 var(--f-sans); padding: 12px 16px; color: var(--text-2); border-radius: 10px; }
.vrh .izbornik a:hover, .vrh .izbornik a.akt { color: var(--jako); }
.vrh .izbornik .klizac { top: auto !important; bottom: 0 !important; height: 2px !important; border-radius: 2px; background: var(--g-v29) !important; box-shadow: none !important; }
.vrh-desno { gap: 10px; }
.gumb-uvod.gumb-prijava, .gumb-uvod.gumb-isprobaj { font: 600 14px/1 var(--f-sans); padding: 13px 20px; border-radius: 12px; text-shadow: none; }
.gumb-uvod.gumb-prijava { color: var(--text) !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); filter: none; }
.gumb-uvod.gumb-prijava:hover { border-color: var(--ember); }
:root .vrh .gumb-uvod.gumb-isprobaj { color: #fff; border: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%), linear-gradient(100deg, #5a52ec, #6a3fe0); box-shadow: 0 10px 24px -10px rgba(90, 70, 230, .75), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root .vrh .gumb-uvod.gumb-isprobaj:hover { filter: brightness(1.07); color: #fff; }
:root[data-tema="svijetla"] .gumb-uvod.gumb-prijava { background: rgba(255, 255, 255, .78) !important; border-color: rgba(30, 36, 70, .1); box-shadow: inset 0 1px 0 #fff, 0 6px 18px -10px rgba(30, 36, 80, .3); }
:root[data-tema="svijetla"] .vrh.skrol { background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(250, 249, 246, .7)); }
.noga-uvod { margin-top: 16px; }

/* ---------- junak ---------- */
.junak { position: relative; isolation: isolate; overflow: clip; margin-top: -72px; padding: 72px 0 0; min-height: clamp(600px, calc(100svh - 236px), 780px); display: flex; align-items: center; }
.junak-poz { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(60% 55% at 6% 0%, rgba(255, 252, 244, .95), rgba(255, 252, 244, 0) 70%), radial-gradient(50% 60% at 78% 38%, rgba(236, 234, 248, .7), transparent 70%), linear-gradient(180deg, #fbfbf9 0%, #f6f5f2 62%, var(--v29-pod) 100%); }
.nacrt-mreza { position: absolute; inset: 0; background-image: linear-gradient(var(--v29-crta) 1px, transparent 1px), linear-gradient(90deg, var(--v29-crta) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, rgba(0, 0, 0, .55), transparent 75%); mask-image: radial-gradient(70% 70% at 70% 40%, rgba(0, 0, 0, .55), transparent 75%); }
.nacrt-crte { position: absolute; inset: 0; width: 100%; height: 100%; }
.nacrt-crte path { fill: none; stroke: var(--v29-crta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nacrt-crte .nc-kote path { stroke: var(--v29-crta-2); }
.nacrt-crte .nc-kote path { stroke-dasharray: 3 4; }
.nacrt-crte text { font: 500 11px var(--f-mono); fill: var(--v29-crta-2); }
.nacrt-crte .nc-tocka { fill: none; stroke: var(--v29-crta-2); }
.junak-poz .svjetlo { position: absolute; left: -10%; top: -30%; width: 60%; height: 90%; background: radial-gradient(closest-side, rgba(255, 248, 230, .8), transparent); filter: blur(10px); transform: rotate(-18deg); }
.junak-poz .pod { position: absolute; left: -20%; right: -20%; bottom: 0; height: 34%; transform-origin: 50% 100%; transform: perspective(520px) rotateX(64deg);
  background-image: linear-gradient(var(--v29-crta) 1px, transparent 1px), linear-gradient(90deg, var(--v29-crta) 1px, transparent 1px); background-size: 90px 90px;
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent); mask-image: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent); }
.junak > .junak-u { position: relative; z-index: 3; width: 100%; display: block; pointer-events: none; }
.junak-t { max-width: 560px; padding: 40px 0 56px; pointer-events: auto; }
.junak-t .pozdrav { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--f-mono); letter-spacing: .04em; color: var(--text-2); margin: 0 0 18px; flex-wrap: wrap; }
.junak-t .pozdrav b { color: var(--ember-2); }
.nadnaslov-j { margin: 0 0 22px; font: 500 13px/1.4 var(--f-sans); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }
.junak h1 { font: 800 clamp(44px, 5.1vw, 78px)/.98 var(--f-disp); letter-spacing: -.045em; margin: 0 0 24px; color: var(--jako); max-width: 9.4em; text-wrap: balance; }
.junak-t > p.lead { color: var(--text-2); font-size: clamp(17px, 1.35vw, 20px); font-weight: 400; line-height: 1.5; max-width: 520px; margin: 0 0 30px; }
.junak .cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 22px; }
.g-vel { padding: 0 26px; min-height: 58px; border-radius: 14px; font-size: 16px; font-weight: 600; gap: 12px; }
.junak .g-e.g-vel { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 55%), var(--g-v29); box-shadow: 0 16px 34px -14px rgba(50, 90, 230, .75), inset 0 1px 0 rgba(255, 255, 255, .3); }
.g .str { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; }
.g-play { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(90, 82, 236, .1); box-shadow: inset 0 0 0 1px rgba(90, 82, 236, .18); }
.g-play svg { width: 14px; height: 14px; fill: #5a52ec; margin-left: 2px; }
.junak .g-o.g-vel { color: var(--text); }
:root[data-tema="svijetla"] .junak .g-o.g-vel { background: rgba(255, 255, 255, .8); border-color: rgba(30, 36, 70, .08); box-shadow: inset 0 1px 0 #fff, 0 14px 30px -18px rgba(30, 36, 80, .35); }
.junak-sitno { margin: 0; font-size: 15px; color: var(--muted); }

/* junak — noćna kuća (v38): css/naslovna-noc.css */

/* ---------- izbornik kalkulatora: v30 — css/izbornik.css (isporučeni 3D demo u #kalkulatori) ---------- */
.paket-traka { max-width: 960px; margin: 18px auto 4px; }
.zamjena { animation: v29-zamjena .38s ease both; }
@keyframes v29-zamjena { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.radni-odj { padding: 10px 0 70px; background: var(--bg); }
.radni-odj .kartica-s { max-width: 760px; margin: 0 auto; transform: none; }
/* ---------- „Svi kalkulatori": popis u dijalogu ---------- */
.svi-dlg { width: min(1080px, calc(100% - 24px)); max-height: min(90vh, 920px); padding: 0; color: var(--text); border-radius: 26px; border: 1px solid var(--line-2); overflow: hidden; font-family: var(--f-sans);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 30%), rgba(19, 25, 56, .94); box-shadow: 0 50px 140px rgba(0, 0, 0, .6); }
.svi-dlg[open] { display: flex; flex-direction: column; animation: dlg .4s var(--e-out) both; }
.svi-dlg::backdrop { background: rgba(8, 13, 31, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-tema="svijetla"] .svi-dlg { background: linear-gradient(180deg, #fff, #faf9f7); border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(30, 36, 70, .06), 0 50px 120px -30px rgba(30, 36, 100, .45); }
:root[data-tema="svijetla"] .svi-dlg::backdrop { background: rgba(60, 60, 80, .2); }
.svi-glava { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 6px; }
.svi-glava h2 { margin: 0 0 4px; font: 700 28px/1.15 var(--f-disp); letter-spacing: -.02em; }
.svi-glava p:not(.nad) { margin: 0; color: var(--muted); font-size: 14px; }
.svi-glava .nad { margin-bottom: 10px; }
.svi-dlg .alati-k { padding: 10px 28px 14px; margin: 0; border-bottom: 1px solid var(--line); }
.svi-dlg .izbor { overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 20px 22px; }
.svi-dlg .nista { margin: 0 20px 20px; }
.izbor .kartica { position: relative; min-width: 0; }
.izbor .kartica.skrivena { display: none; }
.izbor .program { --akc: var(--akcent, #6a4be8); display: grid; grid-template-columns: 58px auto minmax(0, 1fr) auto; grid-template-areas: "ik ime be st" "ik opis opis ul"; gap: 3px 14px; align-items: center; height: 100%;
  padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--text); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: border-color .2s, background .2s, box-shadow .2s, transform .25s var(--e-out); }
:root[data-tema="svijetla"] .izbor .program { background: rgba(255, 255, 255, .75); }
.izbor .program:hover, .izbor .program:focus-visible { border-color: color-mix(in srgb, var(--akc) 60%, transparent); box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--akc) 80%, transparent); transform: translateY(-1px); outline: none; }
.izbor .program:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--akc) 45%, transparent); }
.izbor .p-vrh { display: contents; }
.izbor .ikona.anim { grid-area: ik; width: 58px; height: 58px; border-radius: 16px; padding: 4px; background: radial-gradient(80% 70% at 50% 100%, color-mix(in srgb, var(--akc) 30%, transparent), transparent 70%), rgba(10, 16, 40, .9); }
.izbor .ikona.anim svg { width: 100%; height: 100%; display: block; overflow: visible; }
.izbor .ikona.anim svg * { animation-play-state: paused; }
.izbor .kartica:hover .ikona.anim svg *, .izbor .program:focus-visible .ikona.anim svg * { animation-play-state: running; }
.izbor .broj, .izbor .led, .izbor .sadrzaj { display: none; }
.izbor h3 { grid-area: ime; margin: 0; font: 650 16px/1.25 var(--f-disp); letter-spacing: -.01em; }
.izbor .kb-beta { grid-area: be; justify-self: start; }
.izbor .program > p { grid-area: opis; margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.izbor .stanje { grid-area: st; justify-self: end; }
.izbor .ulaz { grid-area: ul; justify-self: end; font-size: 12.5px; font-weight: 600; color: var(--ember-2); white-space: nowrap; }
.izbor .kartica.glavni .program { border-style: dashed; }
.izbor .kartica.zakljucano .program { cursor: not-allowed; }
.izbor .kartica.zakljucano .ikona.anim { filter: saturate(.35); opacity: .72; }
.izbor .kartica.zakljucano .ulaz { color: #4f7aa3; }
.izbor .kartica.drhti .program { animation: drhti .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes drhti { 10%, 90% { translate: -1px 0; } 20%, 80% { translate: 2px 0; } 30%, 50%, 70% { translate: -3px 0; } 40%, 60% { translate: 3px 0; } }
.izbor .kartica.odmrzni .program { animation: v29-odmrzni .9s ease-out both; }
@keyframes v29-odmrzni { from { box-shadow: 0 0 0 2px rgba(91, 108, 240, .7), 0 0 40px rgba(91, 108, 240, .4); } }

/* ---------- prijava u dijalogu ---------- */
.u-dlg.prijava-dlg { width: min(460px, calc(100% - 24px)); padding: 0; background: transparent !important; border: 0; box-shadow: none !important; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; }
.prijava-dlg .kartica-s { max-width: none; transform: none; }
:root[data-tema="svijetla"] .prijava-dlg .kartica-s { background: linear-gradient(180deg, #fff, #fbfaf8); }
:root[data-tema="tamna"] .prijava-dlg .kartica-s { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 40%), #141a3a; }
.prijava-dlg > .zatvori { position: absolute; right: 14px; top: 14px; z-index: 3; }

/* ---------- prijelaz u kalkulator (kuća → zaslon kalkulatora; isti prizor dočeka program — js/okvir.js) ---------- */
.prijelaz-k { position: fixed; inset: 0; z-index: 2147480000; pointer-events: none; contain: strict; }
.prijelaz-k .pk-pod { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #f6f5f1 58%, #ecebe6 100%); clip-path: circle(0 at var(--px) var(--py)); will-change: clip-path; }
.prijelaz-k.tamno .pk-pod { background: radial-gradient(120% 90% at 50% 40%, #1b2150 0%, #0e1330 60%, #0b1026 100%); }
.prijelaz-k .pk-sad { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; opacity: 0; }
.prijelaz-k .pk-ikona { width: 172px; height: 172px; }
.prijelaz-k .pk-ikona svg { width: 100%; height: 100%; display: block; overflow: visible; }
.prijelaz-k .pk-ikona svg * { animation: none !important; }
.prijelaz-k .pk-naziv { font: 700 18px 'Archivo', 'Segoe UI', sans-serif; color: #141a33; letter-spacing: -.01em; margin-top: -10px; }
.prijelaz-k.tamno .pk-naziv { color: #f1f3f7; }

/* ---------- tamna tema: noćni nacrt ---------- */
:root[data-tema="tamna"] .junak-poz { background: radial-gradient(60% 55% at 6% 0%, rgba(91, 108, 240, .16), transparent 70%), radial-gradient(50% 60% at 78% 38%, rgba(19, 196, 217, .07), transparent 70%), linear-gradient(180deg, #0b1026 0%, #0c1129 62%, var(--v29-pod) 100%); }
:root[data-tema="tamna"] .junak-poz .svjetlo { background: radial-gradient(closest-side, rgba(120, 110, 255, .14), transparent); }
:root[data-tema="tamna"] .kuca-nacrt path { stroke: #8ea4d8; }
:root[data-tema="tamna"] .kuca-nacrt .kn-kuca path:first-child, :root[data-tema="tamna"] .kuca-nacrt .kn-kuca path:nth-child(2) { fill: rgba(20, 30, 70, .5); }
:root[data-tema="tamna"] .kuca-nacrt .kn-kote path { stroke: #5fdcec; } :root[data-tema="tamna"] .kuca-nacrt text { fill: #8fd8ea; }
:root[data-tema="tamna"] .kuca-oznake .ko:not(.ko-dio) { color: #eef0fb; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), rgba(16, 22, 52, .62); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 16px 34px -16px rgba(0, 0, 0, .7); }
:root[data-tema="tamna"] .ko-ik { background: rgba(255, 255, 255, .06); } :root[data-tema="tamna"] .ko-ik svg { stroke: #c9d2ff; }
:root[data-tema="tamna"] .kuca-crte .t { stroke: #0b1026; }

/* ---------- prilagodba ---------- */
@media (max-width: 1180px) { .vrh .izbornik a { padding: 12px 11px; font-size: 14px; } .gumb-uvod.gumb-prijava, .gumb-uvod.gumb-isprobaj { padding: 12px 15px; } }
@media (max-width: 1020px) {
  .junak { display: block; min-height: 0; padding-top: 72px; }
  .junak-t { max-width: 640px; padding: 30px 0 10px; }
  .junak-kuca { position: relative; top: auto; right: auto; width: 100%; height: clamp(320px, 62vw, 620px); margin-top: 6px; }
  .svi-dlg .izbor { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .junak { margin-top: -64px; padding-top: 64px; }
  .junak-t { padding-top: 24px; }
  .nadnaslov-j { font-size: 11.5px; letter-spacing: .26em; margin-bottom: 16px; }
  .junak h1 { font-size: clamp(38px, 11vw, 52px); margin-bottom: 18px; }
  .junak-t > p.lead { margin-bottom: 22px; }
  .junak .cta { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 16px; }
  .junak .cta .g { justify-content: center; }
  .junak-sitno { font-size: 14px; }
  .junak-kuca { height: clamp(280px, 86vw, 440px); }
  .kuca-oznake .ko { padding: 6px 12px 6px 7px; font-size: 13px; gap: 8px; border-radius: 12px; }
  .ko-ik { width: 24px; height: 24px; border-radius: 7px; } .ko-ik svg { width: 16px; height: 16px; }
  .svi-glava { padding: 18px 16px 4px; } .svi-glava h2 { font-size: 23px; }
  .svi-dlg .alati-k { padding: 8px 16px 12px; } .svi-dlg .izbor { padding: 12px 10px 18px; }
  .izbor .program { grid-template-columns: 48px auto minmax(0, 1fr); grid-template-areas: "ik ime ime" "ik opis opis" "ik be st"; padding: 10px 12px; }
  .izbor .ikona.anim { width: 48px; height: 48px; }
  .izbor .stanje { justify-self: start; } .izbor .ulaz { display: none; }
  .svi-dlg { max-height: 92vh; border-radius: 22px; }
}
@media (max-width: 430px) { .vrh-desno .gumb-prijava { padding: 10px 12px; } }
@media (pointer: coarse) { .gumb-uvod.gumb-prijava, .gumb-uvod.gumb-isprobaj { min-height: 42px; } }
@media (prefers-reduced-motion: reduce) {
  .kuca-crte .h, .junak-kuca.ucitava .kuca-nacrt { animation: none !important; }
}

/* zatvoreni mobilni izbornik nije u redoslijedu tipke Tab (bio je samo proziran) */
.mob-meni { visibility: hidden; transition: opacity .3s, transform .35s var(--e-out), visibility 0s linear .35s; }
.mob-meni.otv { visibility: visible; transition: opacity .3s, transform .35s var(--e-out), visibility 0s; }
/* rubovi 3D platna su mekani (kamera pri ulasku prilazi dijelu kuće pa slika ispuni platno — bez oštrog pravokutnika
   preko naslova); pri odlasku u kalkulator naslov i oznake se povuku */
.kuca-platno { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 97%, transparent 100%); }
@media (max-width: 1020px) { .kuca-platno { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent); } }
html.odlazi .junak-t, html.odlazi .kuca-crte path:not(.dio), html.odlazi .kuca-crte circle:not(.dio) { opacity: 0; transition: opacity .35s ease; }
/* mobitel: zaglavlje i paketi bez širenja stranice preko 390 px */
@media (max-width: 430px) {
  .vrh-u { gap: 6px; }
  .vrh-desno, .vrh-desno:has(.korisnik:not([hidden])) { gap: 5px; }
  .vrh .marka .arxo { --arxo-w: 98px; }
  .vrh-desno .lg-tema.lg-tema-vrh { --lg-tw: 48px; --lg-th: 30px; --lg-tk: 24px; }
  .vrh-desno .gumb-uvod.gumb-prijava { padding: 10px 11px; }
}
@media (max-width: 760px) { .pak-g { grid-template-columns: minmax(0, 1fr); } }