/* Skica E: Kičma. Dizajn sistem nove početne. */
:root {
  --noc: #030508; --noc2: #070b12; --ploca: #0b1018; --ploca2: #101722;
  --ivica: rgba(176, 208, 236, .13); --ivica2: rgba(176, 208, 236, .26);
  --kost: #e8edf3; --sivo: #b9c3d2; --tiho: #8f9bb0;
  --zrak: #39e1ff; --zrak2: #a5f3ff; --amber: #ffb24d; --svetlo: #ffd49c;
  --naslov: 'Bricolage Grotesque', system-ui, sans-serif;
  --broj: 'Archivo', system-ui, sans-serif;
  --tekst: 'Inter Tight', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --rub: clamp(18px, 3.6vw, 56px);
  --sir: 1240px;
  --lako: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #2a3646 var(--noc); }
body { margin: 0; background: var(--noc); color: var(--kost); font: 400 16px/1.55 var(--tekst); overflow-x: clip; -webkit-font-smoothing: antialiased; }
::selection { background: var(--zrak); color: #021418; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--zrak); outline-offset: 3px; border-radius: 2px; }
.mono { font: 500 11.5px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.preskoci { position: fixed; left: 12px; top: -80px; z-index: 999; padding: 12px 16px; background: var(--zrak); color: #021418; font-weight: 600; text-decoration: none; }
.preskoci:focus { top: 12px; }
.sakrij { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* dugmad */
.dugmad { display: flex; flex-wrap: wrap; gap: 10px; }
.dugme { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 1px solid var(--ivica2); border-radius: 3px; background: rgba(8, 13, 20, .6); text-decoration: none; font: 600 15px/1 var(--tekst); cursor: pointer; transition: transform .2s var(--lako), box-shadow .25s, border-color .2s, background .2s; }
.dugme::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-right: 2px solid var(--zrak); border-bottom: 2px solid var(--zrak); opacity: .8; }
.dugme--puno { background: var(--svetlo); border-color: var(--svetlo); color: #1b1307; }
.dugme--puno::after { border-color: #1b1307; opacity: .55; right: 3px; bottom: 3px; }
.dugme:active { transform: scale(.97); }
@media (hover: hover) {
  .dugme:hover { transform: translateY(-2px); border-color: var(--zrak); box-shadow: 0 10px 30px rgba(57, 225, 255, .16); }
  .dugme--puno:hover { border-color: var(--svetlo); box-shadow: 0 10px 34px rgba(255, 186, 110, .35); }
}

/* traka napretka */
.napredak { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 80; pointer-events: none; }
.napredak i { display: block; height: 100%; background: linear-gradient(90deg, var(--zrak), var(--amber)); transform: scaleX(0); transform-origin: 0 50%; }

/* vrh */
.vrh { position: fixed; z-index: 70; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 var(--rub); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.vrh--dole { background: rgba(3, 5, 8, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--ivica); }
.vrh__ime { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 1.06rem/1 var(--naslov); letter-spacing: -.01em; text-decoration: none; }
.vrh__ime i { width: 9px; height: 9px; border-radius: 50%; background: var(--zrak); box-shadow: 0 0 12px var(--zrak); }
.vrh nav { display: none; gap: 4px; }
.vrh nav a { padding: 14px 11px; text-decoration: none; color: var(--sivo); }
.vrh nav a:hover { color: var(--zrak2); }
.vrh__desno { display: flex; align-items: center; gap: 6px; }
.jezik { display: inline-flex; border: 1px solid var(--ivica); border-radius: 3px; overflow: hidden; }
.jezik a { display: grid; place-items: center; min-width: 40px; min-height: 36px; padding: 0 9px; text-decoration: none; color: var(--tiho); }
.jezik a[aria-current] { background: rgba(57, 225, 255, .13); color: var(--zrak2); }
.vrh__meni { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.vrh__meni i { display: block; width: 22px; height: 2px; background: currentColor; box-shadow: 0 7px 0 currentColor; transform: translateY(-3.5px); transition: transform .25s, box-shadow .25s; }
.vrh__meni[aria-expanded="true"] i { box-shadow: 0 0 0 transparent; transform: rotate(45deg); }
.vrh__meni[aria-expanded="true"] i::after { content: ''; position: absolute; inset: 0; background: currentColor; transform: rotate(90deg); }
.meni { position: fixed; inset: 0; z-index: 65; display: grid; align-content: center; gap: 4px; padding: 80px var(--rub) 40px; background: rgba(3, 5, 8, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.meni--otvoren { opacity: 1; visibility: visible; }
.meni a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ivica); text-decoration: none; font: 700 clamp(1.7rem, 8vw, 2.4rem)/1.05 var(--naslov); letter-spacing: -.03em; }
.meni a span { color: var(--zrak); font: 500 11px/1 var(--mono); letter-spacing: .08em; }

/* prelaz rebrastim staklom */
.lamele { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-columns: repeat(7, 1fr); pointer-events: none; visibility: hidden; }
.lamele i { transform: scaleX(0); transform-origin: 0 50%; border-left: 1px solid rgba(205, 246, 255, .38);
  background: linear-gradient(90deg, rgba(190, 240, 255, .26), rgba(9, 15, 23, .9) 16%, rgba(6, 10, 16, .95) 62%, rgba(110, 215, 255, .2) 92%, rgba(9, 15, 23, .9)); }
.lamele i:nth-child(n+8) { display: none; }
.lamele--ide, .lamele--otvori { visibility: visible; }
.lamele--ide i { animation: lamela 1s cubic-bezier(.7, 0, .2, 1) both; animation-delay: calc(var(--n) * 22ms); }
.lamele--otvori i { animation: lamela-otvori .7s cubic-bezier(.7, 0, .2, 1) both; animation-delay: calc(var(--n) * 22ms); }
@keyframes lamela { 0% { transform: scaleX(0); transform-origin: 0 50%; } 30% { transform: scaleX(1.02); transform-origin: 0 50%; } 62% { transform: scaleX(1.02); transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }
@keyframes lamela-otvori { 0% { transform: scaleX(1.02); transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }
@media (min-width: 900px) {
  .lamele { grid-template-columns: repeat(12, 1fr); }
  .lamele i:nth-child(n+8) { display: block; }
}
@media (hover: hover) and (min-width: 900px) { .lamele i { -webkit-backdrop-filter: blur(16px) brightness(1.2); backdrop-filter: blur(16px) brightness(1.2); background: linear-gradient(90deg, rgba(190, 240, 255, .3), rgba(9, 15, 23, .72) 16%, rgba(6, 10, 16, .8) 62%, rgba(110, 215, 255, .22) 92%, rgba(9, 15, 23, .72)); } }

/* ===== scena sa kicmom ===== */
.kicma { position: relative; }
.scena { position: relative; padding: 96px var(--rub) 56px; }
.dnk, .nize, .tabla, .preskok { display: none; }
.karte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.karta { position: relative; display: block; overflow: hidden; aspect-ratio: 1.6; border-radius: 5px; background: var(--ploca); outline: 1px solid var(--ivica); text-decoration: none; }
.karta img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.karta i { display: none; }
.karta b { position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 2px; background: rgba(3, 5, 8, .8); font: 600 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--zrak2); }
.karta--prazna { display: grid; place-items: center; padding: 8%; text-align: center; outline: 2px dashed var(--amber); background: rgba(8, 10, 16, .82); }
.karta--prazna strong { display: block; font: 800 clamp(1.4rem, 6vw, 2.4rem)/.95 var(--naslov); letter-spacing: -.02em; color: var(--amber); }
.karta--prazna span { display: block; margin-top: 8px; color: var(--kost); }

.oznaka { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--tiho); }
.oznaka::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.uvod h1 { font: 800 clamp(3rem, 15vw, 5rem)/.88 var(--naslov); letter-spacing: -.05em; }
.uvod h1 small { display: block; margin-bottom: 12px; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zrak2); }
.uvod h1 span { display: block; }
.uvod h1 em { font-style: normal; color: var(--zrak2); text-shadow: 0 0 44px rgba(57, 225, 255, .55); }
.lid { margin-top: 16px; max-width: 31em; color: var(--sivo); font-size: 1rem; line-height: 1.5; }
.uvod .dugmad { margin-top: 20px; }

.ima-js .kicma { --visina: 100vh; }
.ima-js .scena { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; overflow: clip; background:
  radial-gradient(70% 46% at 62% 44%, rgba(20, 78, 112, .42), transparent 72%),
  linear-gradient(180deg, #020306, #060a12 52%, #030508); }
.ima-js .scena::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(140, 190, 230, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 190, 230, .05) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 60% 46%, #000, transparent 78%); mask-image: radial-gradient(70% 60% at 60% 46%, #000, transparent 78%); }
.ima-js .scena::after { content: ''; position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); }
.scena__foto { display: none; }
.ima-js .scena__foto { display: block; position: absolute; left: 0; top: 0; z-index: 9; width: 80.93vh; height: 145vh; transform-origin: 0 0; will-change: transform; mix-blend-mode: lighten; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent); mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent); }
.scena__foto img { display: block; width: 100%; height: 100%; }
.scena__sjaj { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: screen; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.scena__sjaj i { position: absolute; left: 0; right: 0; top: -100%; height: 200%; will-change: transform; animation: srz 3.4s linear infinite;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 13%, rgba(225, 253, 255, .95) 19%, rgba(120, 236, 255, .5) 22%, transparent 25%); }
@keyframes srz { to { transform: translate3d(0, 50%, 0); } }
.ima-js .dnk { display: block; position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; pointer-events: none; }
.ima-js .karte { display: block; position: absolute; inset: 0; margin: 0; }
.ima-js .karta { position: absolute; left: 0; top: 0; display: none; aspect-ratio: auto; border-radius: 4px; outline-color: rgba(150, 215, 245, .2); transform-origin: 50% 50%; will-change: transform, opacity; cursor: pointer; }
.ima-js .karta--tu { display: block; }
.ima-js .karta--prazna.karta--tu { display: grid; }
.ima-js .karta i { display: block; position: absolute; inset: 0; background: #020408; will-change: opacity; }
.ima-js .karta::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .13), transparent 24%, transparent 72%, rgba(57, 225, 255, .1)); }
.ima-js .karta--napred { outline-color: rgba(165, 243, 255, .6); box-shadow: 0 0 80px rgba(57, 225, 255, .26), 0 0 16px rgba(165, 243, 255, .3), 0 30px 60px -20px rgba(0, 0, 0, .85); }
.ima-js .uvod { position: absolute; z-index: 30; left: 0; right: 0; top: 0; padding: 88px var(--rub) 40px; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(3, 5, 8, .95), rgba(3, 5, 8, .84) 58%, rgba(3, 5, 8, .3));
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.ima-js .uvod .lid { max-width: min(31em, 73%); }
.ima-js .nize { display: block; position: absolute; z-index: 30; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); text-align: center; color: var(--tiho); will-change: opacity; }
.nize::after { content: ''; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--zrak), transparent); animation: kap 1.8s ease-in-out infinite; }
@keyframes kap { 0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .5; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } }
.ima-js .preskok { display: inline-flex; position: absolute; z-index: 36; right: var(--rub); top: 70px; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--ivica); border-radius: 3px; background: rgba(3, 5, 8, .6); color: var(--tiho); text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .3s; }
.ima-js .preskok--vidi { opacity: 1; pointer-events: auto; }

/* tabla aktivnog rada */
.ima-js .tabla { position: absolute; z-index: 35; left: 0; right: 0; bottom: 0; padding: 48px var(--rub) max(16px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 6px 14px; background: linear-gradient(180deg, transparent, rgba(3, 5, 8, .92) 36%, #030508); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; pointer-events: none; }
.ima-js .tabla--vidi { opacity: 1; transform: none; pointer-events: auto; }
.tabla > div { grid-column: 1 / -1; grid-row: 1; }
.tabla__broj { grid-row: 2; font: 900 3.1rem/.8 var(--broj); font-stretch: 62%; letter-spacing: -.03em; color: var(--zrak2); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(57, 225, 255, .4); }
.tabla__broj small { display: block; margin-top: 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--tiho); text-shadow: none; }
.tabla__ime { font: 700 1.7rem/1.02 var(--naslov); letter-spacing: -.025em; overflow-wrap: anywhere; min-height: 2.04em; display: flex; align-items: flex-end; }
.tabla__sta { margin: 4px 0 8px; color: var(--sivo); font-size: .95rem; line-height: 1.3; min-height: 2.6em; }
.tabla__psi { grid-row: 2; grid-column: 3; text-align: right; }
.tabla__psi b { display: block; font: 900 2.2rem/.85 var(--broj); font-stretch: 70%; color: var(--svetlo); font-variant-numeric: tabular-nums; }
.tabla__psi span { display: block; margin-top: 6px; color: var(--tiho); font: 500 9.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.tabla .dugme { grid-column: 1 / -1; margin-top: 8px; }
.tabla__ime, .tabla__sta, .tabla__psi { transition: opacity .18s; }
.tabla--menja .tabla__ime, .tabla--menja .tabla__sta, .tabla--menja .tabla__psi { opacity: .2; }

/* ulazak u prsljen */
.rad { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; }
.rad::backdrop { background: rgba(2, 3, 6, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rad__telo { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 64px var(--rub) 40px; }
.rad__blic { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(60% 50% at 50% 40%, rgba(165, 243, 255, .9), rgba(57, 225, 255, .25) 45%, transparent 75%); opacity: 0; }
.rad__medij { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: none; }
.rad__zatvori { position: fixed; z-index: 5; right: 12px; top: 10px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ivica2); border-radius: 3px; background: rgba(3, 5, 8, .8); cursor: pointer; font: 400 26px/1 var(--tekst); }
.rad__mreza { max-width: var(--sir); margin: 0 auto; display: grid; gap: 22px; }
.rad__glava .mono { color: var(--zrak2); }
.rad__glava h2 { margin-top: 10px; font: 800 clamp(2.2rem, 9vw, 5rem)/.92 var(--naslov); letter-spacing: -.045em; overflow-wrap: anywhere; }
.rad__glava p { margin-top: 10px; color: var(--sivo); font-size: 1.05rem; }
.rad__brojke { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.rad__brojke div { min-width: 96px; }
.rad__brojke b { display: block; font: 900 2.5rem/.9 var(--broj); font-stretch: 68%; color: var(--svetlo); font-variant-numeric: tabular-nums; }
.rad__brojke span { display: block; margin-top: 6px; color: var(--tiho); }
.rad__snimci { position: relative; }
.rad__okvir { position: relative; overflow: hidden; border-radius: 6px; outline: 1px solid rgba(165, 243, 255, .32); background: var(--ploca); box-shadow: 0 0 90px rgba(57, 225, 255, .16), 0 40px 80px -30px #000; }
.rad__okvir img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: top; }
.rad__tel { position: absolute; right: 10px; bottom: -18px; width: 27%; max-width: 190px; border-radius: 14px; overflow: hidden; outline: 1px solid rgba(255, 212, 156, .5); background: #000; box-shadow: 0 24px 50px -10px #000, 0 0 40px rgba(255, 178, 77, .2); }
.rad__tel img { display: block; width: 100%; aspect-ratio: 390 / 780; object-fit: cover; object-position: top; }
.rad .dugmad { margin-top: 30px; }

/* ===== sekcije ===== */
.tok { position: relative; }
.vodilica { display: none; }
.ima-js .vodilica { display: block; position: absolute; left: calc(var(--rub) * .5); top: 0; bottom: 0; width: 1px; background: var(--ivica); pointer-events: none; }
.vodilica i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--zrak), var(--zrak) 92%, var(--amber)); transform: scaleY(0); transform-origin: 50% 0; box-shadow: 0 0 12px rgba(57, 225, 255, .7); }
.sek { position: relative; padding: clamp(72px, 13vh, 150px) var(--rub) 0 calc(var(--rub) + 14px); }
.sek__unutra { position: relative; max-width: var(--sir); margin: 0 auto; }
.sek__glava { position: relative; margin-bottom: clamp(28px, 5vh, 54px); }
.sek__glava::before { content: ''; position: absolute; left: calc(var(--rub) * -.5 - 14px - 5px); top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--noc); border: 2px solid var(--ivica2); transition: border-color .4s, box-shadow .4s, background .4s; }
.sek--tu .sek__glava::before { border-color: var(--zrak); background: var(--zrak); box-shadow: 0 0 16px var(--zrak); }
.sek__red { display: flex; align-items: center; gap: 12px; color: var(--tiho); }
.sek__red b { color: var(--zrak2); font-weight: 500; }
.sek__red::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ivica2), transparent); }
.sek__duh { position: absolute; z-index: 0; right: -4px; top: -.42em; font: 900 clamp(4.6rem, 21vw, 15rem)/.8 var(--broj); font-stretch: 62%; letter-spacing: -.02em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(150, 200, 235, .11); pointer-events: none; user-select: none; white-space: nowrap; }
.sek h2 { position: relative; z-index: 1; margin-top: 16px; max-width: 15em; font: 800 clamp(2.1rem, 8.4vw, 4.6rem)/.96 var(--naslov); letter-spacing: -.04em; text-wrap: balance; }
.sek h2 em { font-style: normal; color: var(--zrak2); }
.sek__lid { position: relative; z-index: 1; margin-top: 16px; max-width: 36em; color: var(--sivo); font-size: 1.04rem; }

/* ulazak elemenata */
.ima-js [data-u] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--lako), transform .7s var(--lako); transition-delay: calc(var(--i, 0) * 70ms); }
.ima-js [data-u].u--tu { opacity: 1; transform: none; }

/* traka usluga */
.niz { overflow: hidden; border-block: 1px solid var(--ivica); background: var(--noc2); }
.niz ul { display: flex; width: max-content; animation: niz 46s linear infinite; }
.niz li { display: flex; align-items: center; gap: 18px; padding: 15px 9px; white-space: nowrap; color: var(--sivo); }
.niz li::after { content: ''; width: 6px; height: 6px; background: var(--zrak); transform: rotate(45deg); opacity: .7; }
@keyframes niz { to { transform: translateX(-50%); } }

/* osnova: sest prsljenova */
.osnova { display: grid; gap: 1px; padding: 1px; }
.osnova li { position: relative; padding: 24px 20px 26px; background: var(--noc); box-shadow: 0 0 0 1px var(--ivica); }
.osnova li::before { content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 2px; background: var(--zrak); }
.osnova .mono { color: var(--tiho); }
.osnova h3 { margin-top: 30px; font: 700 1.5rem/1.05 var(--naslov); letter-spacing: -.025em; }
.osnova p { margin-top: 10px; color: var(--sivo); }
.osnova strong { color: var(--svetlo); font-weight: 600; }
@media (hover: hover) { .osnova li:hover { background: var(--ploca); } }

/* brojke */
.brojke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; margin-top: 40px; }
.brojke b { display: block; font: 900 clamp(3.4rem, 16vw, 7.4rem)/.8 var(--broj); font-stretch: 62%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--kost); }
.brojke div:nth-child(3) b { color: var(--zrak2); text-shadow: 0 0 44px rgba(57, 225, 255, .45); }
.brojke span { display: block; margin-top: 12px; max-width: 15em; color: var(--tiho); }

/* spisak radova */
.filteri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filteri button { min-height: 40px; padding: 0 13px; border: 1px solid var(--ivica); border-radius: 3px; background: none; color: var(--sivo); cursor: pointer; }
.filteri button b { margin-left: 6px; color: var(--tiho); font-weight: 500; }
.filteri button[aria-pressed="true"] { border-color: var(--zrak); background: rgba(57, 225, 255, .1); color: var(--zrak2); }
.spisak { border-top: 1px solid var(--ivica); }
.spisak a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 13px 2px; border-bottom: 1px solid var(--ivica); text-decoration: none; transition: background .2s, padding .25s var(--lako); }
.spisak a[hidden] { display: none; }
.spisak .br { color: var(--tiho); font: 500 11px/1 var(--mono); }
.spisak .ime { font: 600 1.08rem/1.2 var(--naslov); letter-spacing: -.01em; }
.spisak .br, .spisak .ime, .spisak .str { grid-row: 1; }
.spisak .str { grid-column: 3; }
.spisak .sta { grid-column: 2 / -1; grid-row: 2; color: var(--tiho); font-size: .92rem; line-height: 1.35; }
.spisak .teh { display: none; color: var(--tiho); }
.spisak .str { color: var(--zrak); }
@media (hover: hover) { .spisak a:hover { background: var(--ploca); padding-left: 12px; } .spisak a:hover .ime { color: var(--zrak2); } }
.spisak--kratko a:nth-of-type(n+11) { display: none; }
.spisak__sve-red { margin-top: 16px; }
.dno ~ .skica-traka { position: static; transform: none; width: max-content; margin: -84px auto 28px; }
.spisak__jos { display: grid; gap: 8px; margin-top: 22px; }
.spisak__jos a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--ivica); border-radius: 3px; text-decoration: none; color: var(--sivo); }
.spisak__jos b { color: var(--zrak2); font: 600 13px/1.4 var(--mono); }
.lebdi { position: fixed; z-index: 60; left: 0; top: 0; width: 320px; aspect-ratio: 1.6; border-radius: 4px; overflow: hidden; outline: 1px solid rgba(165, 243, 255, .45); box-shadow: 0 30px 60px -20px #000, 0 0 50px rgba(57, 225, 255, .2); pointer-events: none; opacity: 0; transition: opacity .2s; }
.lebdi img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* usluge */
.usluge { display: grid; gap: 1px; padding: 1px; }
.usluge li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 4px 6px; align-content: start; padding: 22px 18px; background: var(--noc); box-shadow: 0 0 0 1px var(--ivica); }
.usluge .mono { color: var(--zrak); padding-top: 6px; }
.usluge h3 { font: 700 1.36rem/1.1 var(--naslov); letter-spacing: -.02em; }
.usluge p { grid-column: 2; color: var(--sivo); }
.gradovi { margin-top: 30px; }
.gradovi p { max-width: 44em; color: var(--tiho); }
.gradovi ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gradovi a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border: 1px solid var(--ivica); border-radius: 3px; text-decoration: none; color: var(--sivo); font-size: .94rem; }
.gradovi a:hover { border-color: var(--zrak); color: var(--zrak2); }
.gradovi .jace { border-color: var(--ivica2); color: var(--kost); }

/* saradnja */
.saradnja { display: grid; gap: 26px 30px; }
.saradnja li { position: relative; padding-left: 20px; border-left: 1px solid var(--ivica2); }
.saradnja li::before { content: ''; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; background: var(--amber); transform: rotate(45deg); }
.saradnja h3 { font: 700 1.2rem/1.15 var(--naslov); letter-spacing: -.015em; }
.saradnja p { margin-top: 6px; color: var(--sivo); }

/* proces */
.proces { position: relative; display: grid; gap: 0; counter-reset: k; }
.proces li { position: relative; padding: 18px 0 18px 58px; border-bottom: 1px solid var(--ivica); }
.proces li::before { counter-increment: k; content: '0' counter(k); position: absolute; left: 0; top: 14px; font: 900 2rem/1 var(--broj); font-stretch: 62%; color: transparent; -webkit-text-stroke: 1px var(--zrak); }
.proces h3 { font: 700 1.3rem/1.1 var(--naslov); letter-spacing: -.02em; }
.proces p { margin-top: 4px; color: var(--sivo); }

/* provera */
.provera { position: relative; overflow: hidden; padding: clamp(28px, 6vw, 60px); border: 1px solid var(--ivica2); border-radius: 4px; background: linear-gradient(135deg, rgba(57, 225, 255, .1), transparent 46%), var(--ploca); }
.provera::before { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(57, 225, 255, .25); box-shadow: 0 0 0 40px rgba(57, 225, 255, .04), 0 0 0 90px rgba(57, 225, 255, .025); }
.provera h2 { margin-top: 12px; }
.provera form { position: relative; display: grid; gap: 10px; margin-top: 24px; max-width: 620px; }
.provera input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--ivica2); border-radius: 3px; background: rgba(3, 5, 8, .7); font: 500 16px/1 var(--mono); }
.provera input::placeholder { color: var(--tiho); }
.provera small { display: block; margin-top: 12px; color: var(--tiho); font-size: .9rem; }

/* pitanja */
.pitanja { border-top: 1px solid var(--ivica); }
.pitanja details { border-bottom: 1px solid var(--ivica); }
.pitanja summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 1.12rem/1.25 var(--naslov); letter-spacing: -.01em; }
.pitanja summary::-webkit-details-marker { display: none; }
.pitanja summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ivica2); border-radius: 50%; color: var(--zrak); font: 400 18px/1 var(--tekst); transition: transform .25s; }
.pitanja details[open] summary::after { transform: rotate(45deg); }
.pitanja details > div { padding: 0 0 20px; max-width: 44em; color: var(--sivo); }
.pitanja details a { color: var(--zrak2); }

/* kontakt */
.sek--kraj { margin-top: clamp(72px, 13vh, 150px); padding-bottom: clamp(60px, 10vh, 110px); background:
  radial-gradient(80% 50% at 50% 0%, rgba(20, 78, 112, .4), transparent 70%), linear-gradient(180deg, #040810, #030508); border-top: 1px solid var(--ivica); overflow: hidden; }
.sek--kraj .sek__medij { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .0; pointer-events: none; }
.kontakt { display: grid; gap: 34px; }
.forma { display: grid; gap: 14px; }
.forma label { display: grid; gap: 6px; color: var(--sivo); font-size: .92rem; }
.forma input, .forma select, .forma textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--ivica2); border-radius: 3px; background: rgba(3, 5, 8, .72); font-size: 16px; }
.forma textarea { min-height: 130px; resize: vertical; }
.forma select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--zrak) 50%), linear-gradient(135deg, var(--zrak) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
.forma select option { background: var(--ploca); }
.forma .saglasnost { grid-template-columns: 24px 1fr; align-items: start; gap: 10px; }
.forma .saglasnost input { width: 22px; min-height: 22px; height: 22px; padding: 0; accent-color: var(--zrak); }
.forma a { color: var(--zrak2); }
.forma__poruka { color: var(--svetlo); min-height: 1.5em; }
.direktno { display: grid; gap: 1px; background: var(--ivica); border: 1px solid var(--ivica); align-self: start; }
.direktno a { text-transform: none; letter-spacing: .02em; font-size: 13px; display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 15px 16px; background: var(--noc); text-decoration: none; overflow-wrap: anywhere; }
.direktno a span { color: var(--tiho); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
.direktno a:hover { background: var(--ploca); color: var(--zrak2); }

/* podnozje */
.dno { padding: 44px var(--rub) 110px; border-top: 1px solid var(--ivica); background: #020306; }
.dno__unutra { max-width: var(--sir); margin: 0 auto; display: grid; gap: 28px; }
.dno h2 { font: 700 1.3rem/1 var(--naslov); }
.dno p { margin-top: 8px; max-width: 30em; color: var(--tiho); }
.dno ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dno li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--sivo); text-decoration: none; }
.dno li a:hover { color: var(--zrak2); }
.dno small { color: var(--tiho); font-size: .88rem; }

@media (min-width: 620px) {
  .osnova { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usluge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saradnja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brojke { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .provera form { grid-template-columns: minmax(0, 1fr) auto; }
  .karte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .vrh nav { display: flex; }
  .vrh__meni, .meni { display: none; }
  .scena { padding-top: 120px; }
  .ima-js .uvod { top: 50%; right: auto; width: min(47vw, 700px); padding: 0 0 0 var(--rub); transform: translateY(-50%); background: none; -webkit-mask-image: none; mask-image: none; }
  .uvod h1 { font-size: clamp(3.8rem, min(8.2vw, 15.5vh), 9.4rem); }
  .uvod h1 small { font-size: 13px; margin-bottom: 18px; }
  .lid, .ima-js .uvod .lid { font-size: 1.14rem; margin-top: 24px; max-width: 31em; }
  .uvod .dugmad { margin-top: 28px; }
  .ima-js .preskok { top: auto; bottom: 26px; }
  .ima-js .tabla { top: 50%; bottom: auto; right: auto; width: min(41vw, 580px); padding: 0 0 0 var(--rub); transform: translateY(calc(-50% + 16px)); background: none; grid-template-columns: 1fr; gap: 0; }
  .ima-js .tabla--vidi { transform: translateY(-50%); }
  .tabla > div, .tabla__broj, .tabla__psi { grid-column: 1; grid-row: auto; }
  .tabla__broj { order: -1; font-size: clamp(6rem, min(15vw, 26vh), 15rem); }
  .tabla__broj small { font-size: 12px; margin-top: 14px; }
  .tabla__ime { margin-top: 3.4vh; font-size: clamp(2.2rem, 3.6vw, 3.8rem); }
  .tabla__sta { font-size: 1.1rem; margin-top: 10px; }
  .tabla__psi { text-align: left; margin-top: 2.6vh; display: flex; align-items: baseline; gap: 12px; }
  .tabla__psi b { font-size: 3.4rem; }
  .tabla__psi span { font-size: 11.5px; margin: 0; }
  .tabla .dugme { justify-self: start; margin-top: 3vh; }
  .rad__mreza { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 5vw; min-height: calc(100vh - 110px); }
  .osnova { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .osnova li { padding: 30px 28px 34px; }
  .usluge { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .usluge li { padding: 28px 24px; }
  .saradnja { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 40px; }
  .spisak a { grid-template-columns: 3em minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) auto; padding: 15px 4px; }
  .spisak .sta, .spisak .str { grid-column: auto; grid-row: 1; }
  .spisak .teh { display: block; text-align: right; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; }
  .spisak__jos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proces { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ivica2); }
  .proces li { padding: 64px 18px 8px 0; border-bottom: 0; }
  .proces li::before { top: 18px; font-size: 2.4rem; }
  .proces li::after { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--zrak); box-shadow: 0 0 12px var(--zrak); }
  .kontakt { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 60px; }
  .forma { grid-template-columns: 1fr 1fr; }
  .forma .siroko { grid-column: 1 / -1; }
  .dno__unutra { grid-template-columns: 1.2fr 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nize::after, .niz ul, .scena__sjaj i { animation: none; }
  .scena__sjaj { display: none; }
  .ima-js [data-u] { opacity: 1; transform: none; transition: none; }
  .tabla, .tabla__ime, .tabla__sta, .tabla__psi, .dugme { transition: none; }
}