/* BagerCode11 — "Matrix" 3D koncept. Zelena neon estetika, oštri rubovi, staklo i skeniranje. */
:root {
  --ak: 25, 255, 138;
  --na-ak: #001a0c;
  --crna: #020605;
  --tamna: #04100b;
  --zelena: #19ff8a;
  --zelena-2: #00d96e;
  --zelena-tamna: #0a3a22;
  --tekst: #cfe9db;
  --prigusena: #78a08c;
  --rub: rgba(var(--ak), .26);
  --rub-jak: rgba(var(--ak), .6);
  --staklo: rgba(4, 22, 14, .8);
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-weight: 300; color: var(--tekst); background: var(--crna); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--zelena); color: var(--na-ak); }

/* ---- pozadina ---- */
#svijet { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.vinjeta { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 4, 2, .75) 100%); }
.skeniranje { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); }
main, footer, .nav { position: relative; z-index: 3; }

/* ---- kursor ---- */
@media (hover: hover) and (pointer: fine) {
  html.kursor-on, html.kursor-on * { cursor: none !important; }
  .kursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .3s; }
  html.kursor-on .kursor { opacity: 1; }
  .kursor i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--zelena); box-shadow: 0 0 12px var(--zelena); }
  .kursor b { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 1px solid var(--zelena); transition: transform .25s var(--ease), border-color .25s; }
  .kursor b::before, .kursor b::after { content: ""; position: absolute; background: var(--zelena); }
  .kursor b::before { left: 50%; top: -6px; width: 1px; height: 6px; } .kursor b::after { top: 50%; left: -6px; height: 1px; width: 6px; }
  .kursor.preko b { transform: scale(1.7) rotate(45deg); border-color: #fff; }
  .kursor.klik b { transform: scale(.7); }
}

/* ---- navigacija ---- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 30px; padding: 16px clamp(18px, 4vw, 60px); border-bottom: 1px solid transparent; transition: background .4s, border-color .4s, padding .4s; }
.nav.skrolan { background: rgba(2, 6, 5, .94); border-color: var(--rub); padding-block: 10px; }
.logo { display: inline-flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 500; letter-spacing: .01em; color: #fff; }
.logo-znak { font-family: var(--mono); color: var(--zelena); font-weight: 700; text-shadow: 0 0 14px rgba(var(--ak), .8); }
.logo b { color: var(--zelena); font-weight: 500; }
.nav-linkovi { display: flex; gap: clamp(16px, 2.6vw, 40px); margin-left: auto; font-size: 15px; }
.nav-linkovi a { position: relative; padding: 6px 0; color: #e6f5ee; transition: color .25s; }
.nav-linkovi a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--zelena); box-shadow: 0 0 10px var(--zelena); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-linkovi a:hover, .nav-linkovi a.aktivan { color: var(--zelena); }
.nav-linkovi a:hover::after, .nav-linkovi a.aktivan::after { transform: scaleX(1); }

/* ---- gumbi ---- */
.gumb { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 15px 30px; border: 1px solid var(--zelena); color: var(--zelena); font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; background: rgba(var(--ak), .04); overflow: hidden; border-radius: 4px; transition: color .3s, box-shadow .3s, transform .3s var(--ease); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.gumb::before { content: ""; position: absolute; inset: 0; background: var(--zelena); transform: translateX(-101%); transition: transform .45s var(--ease); z-index: -1; }
.gumb { isolation: isolate; }
.gumb:hover { color: var(--na-ak); box-shadow: 0 0 34px rgba(var(--ak), .5); transform: translateY(-2px); }
.gumb:hover::before { transform: none; }
.gumb i { font-style: normal; transition: transform .3s var(--ease); }
.gumb:hover i { transform: translateX(6px); }
.gumb-mali { padding: 11px 22px; font-size: 12px; }
.gumb-veliki { padding: 20px 44px; font-size: 15px; }
.gumb-sek { border-color: var(--rub-jak); }
.poveznica-linija { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #e6f5ee; }
.poveznica-linija u { width: 38px; height: 1px; background: var(--zelena); transition: width .35s var(--ease); } .poveznica-linija:hover u { width: 70px; }
.poveznica-linija:hover { color: var(--zelena); }

/* ---- tekst ---- */
.sek { padding: clamp(80px, 11vw, 150px) clamp(18px, 5vw, 72px); max-width: 1320px; margin: 0 auto; position: relative; }
.kicker { font-family: var(--mono); font-size: 12.5px; letter-spacing: .34em; color: var(--zelena); margin-bottom: 18px; min-height: 1.4em; text-shadow: 0 0 12px rgba(var(--ak), .5); }
h1, h2 { font-weight: 500; line-height: 1.08; color: #fff; letter-spacing: -.01em; }
h2 { font-size: clamp(34px, 4.6vw, 62px); margin-bottom: 20px; }
em { font-style: normal; color: var(--zelena); text-shadow: 0 0 26px rgba(var(--ak), .55); }
.uvod { color: var(--tekst); opacity: .85; font-size: 17px; max-width: 54ch; margin-bottom: 30px; }
.uvod.sred { margin-inline: auto; text-align: center; }
[data-reveal] { opacity: 0; transform: translateY(34px); clip-path: inset(0 0 100% 0); transition: opacity .8s var(--ease), transform .8s var(--ease), clip-path .9s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].vidi { opacity: 1; transform: none; clip-path: inset(-20px -20px -20px -20px); }
.slovo { display: inline-block; white-space: pre; }

/* ---- hero ---- */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 130px clamp(18px, 5vw, 72px) 90px; max-width: 1320px; margin: 0 auto; position: relative; }
.hero-sadrzaj { max-width: 640px; }
.hero-naslov { font-size: clamp(36px, 5.4vw, 74px); margin-bottom: 26px; font-weight: 500; }
.hero-tekst { font-size: clamp(16px, 1.4vw, 19px); max-width: 52ch; margin-bottom: 36px; opacity: .88; }
.hero-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.terminal { list-style: none; margin-top: 46px; font-family: var(--mono); font-size: 13px; color: var(--prigusena); padding: 16px 20px; border: 1px solid var(--rub); background: var(--staklo); max-width: 460px; position: relative; }
.terminal::before { content: "● ● ●"; position: absolute; top: -9px; left: 14px; background: var(--crna); padding: 0 8px; font-size: 8px; letter-spacing: 4px; color: var(--zelena); }
.terminal b { color: var(--zelena); font-weight: 500; }
.treptaj { animation: treptaj 1.1s steps(2) infinite; }
@keyframes treptaj { 50% { opacity: .25; } }
.hero-slogan { position: absolute; right: clamp(18px, 5vw, 72px); bottom: 70px; text-align: right; font-family: var(--mono); font-size: 11px; letter-spacing: .3em; line-height: 1.9; color: var(--zelena); opacity: .8; }
.skrol { position: absolute; left: 50%; bottom: 24px; width: 24px; height: 40px; border: 1px solid var(--rub-jak); transform: translateX(-50%); border-radius: 14px; }
.skrol span { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; background: var(--zelena); box-shadow: 0 0 8px var(--zelena); border-radius: 2px; transform: translateX(-50%); animation: kotac 1.7s infinite; }
@keyframes kotac { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 16px); } }

/* ---- značajke ---- */
.znacajke { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--rub); background: rgba(2, 10, 6, .82); max-width: none; padding: 0 clamp(18px, 4vw, 60px); position: relative; }
.znacajka { padding: 44px 30px; border-left: 1px solid var(--rub); position: relative; }
.znacajka:first-child { border-left: 0; }
.ikona { width: 54px; height: 54px; border: 1px solid var(--rub-jak); border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px; position: relative; box-shadow: 0 0 22px rgba(var(--ak), .16) inset, 0 0 18px rgba(var(--ak), .12); }
.ikona svg, .usluga svg { width: 26px; height: 26px; fill: none; stroke: var(--zelena); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(var(--ak), .7)); }
.znacajka h3, .usluga h3 { font-size: 19px; font-weight: 500; color: #fff; margin-bottom: 8px; line-height: 1.25; }
.znacajka p, .usluga p { font-size: 14.5px; color: var(--prigusena); }

/* ---- usluge ---- */
.usluge { display: grid; grid-template-columns: .85fr 1.4fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.usluge-mreza { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rub); background: var(--staklo); }
.usluga { padding: 34px 26px; border: 1px solid var(--rub); margin: -1px 0 0 -1px; position: relative; overflow: hidden; transition: background .35s; }
.usluga:hover { background: rgba(var(--ak), .07); }
.usluga svg { margin-bottom: 16px; width: 30px; height: 30px; }
.usluga::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--zelena), transparent); transform: translateX(-100%); transition: transform .8s var(--ease); }
.usluga:hover::after { transform: translateX(100%); }

/* ---- portfolio ---- */
.portfolio { display: grid; grid-template-columns: .8fr 1.3fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.uredaji { position: relative; padding-bottom: 20px; perspective: 1400px; }
.laptop { width: 100%; max-width: 640px; }
.laptop .ekran { border: 2px solid #1c1d20; border-bottom-width: 14px; border-radius: 10px 10px 4px 4px; background: #060707; overflow: hidden; box-shadow: 0 0 60px rgba(var(--ak), .22), 0 40px 80px rgba(0, 0, 0, .6); }
.laptop .baza { height: 12px; margin: 0 -4%; background: linear-gradient(#34363b, #0f1012); border-radius: 0 0 14px 14px; }
.traka { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #0b0c0c; border-bottom: 1px solid var(--rub); font-family: var(--mono); font-size: 10px; color: var(--prigusena); }
.traka i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--ak), .45); } .traka span { margin-left: 12px; }
.stranica { padding: 34px 26px; min-height: 250px; background: radial-gradient(ellipse at 70% 0, rgba(var(--ak), .22), transparent 60%), linear-gradient(160deg, #052015, #020a06); }
.stranica b { display: block; font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; color: #fff; line-height: 1.12; margin-bottom: 18px; }
.m-gumb { display: inline-block; font-size: 11px; padding: 8px 16px; border: 1px solid var(--zelena); color: var(--zelena); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
.m-mreza { display: flex; gap: 10px; } .m-mreza u { flex: 1; height: 52px; border: 1px solid var(--rub); background: rgba(var(--ak), .06); }
.mobitel { position: absolute; right: -2%; bottom: -4%; width: 29%; min-width: 130px; }
.mobitel .ekran { border: 6px solid #18191c; border-radius: 26px; background: #060707; overflow: hidden; box-shadow: 0 0 44px rgba(var(--ak), .25), 0 30px 60px rgba(0, 0, 0, .7); }
.mobitel .stranica { min-height: 250px; padding: 26px 16px; } .mobitel .stranica b { font-size: 20px; }

/* ---- o nama ---- */
.onama { text-align: center; }
.prsti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 50px; border: 1px solid var(--rub); background: var(--staklo); }
.stat { padding: 40px 20px; border-left: 1px solid var(--rub); } .stat:first-child { border-left: 0; }
.stat b { display: block; font-family: var(--mono); font-size: clamp(34px, 4vw, 54px); color: var(--zelena); font-weight: 500; text-shadow: 0 0 24px rgba(var(--ak), .6); }
.stat span { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--tekst); }

/* ---- cta ---- */
.cta { text-align: center; padding: clamp(110px, 15vw, 220px) clamp(18px, 5vw, 72px); max-width: 1100px; margin: 0 auto; }
.cta h2 { font-size: clamp(34px, 5.4vw, 72px); }
.cta .hero-gumbi { justify-content: center; }

/* ---- podnožje ---- */
.podnozje { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px 30px; padding: 40px clamp(18px, 5vw, 72px) 30px; border-top: 1px solid var(--rub); background: rgba(2, 6, 5, .85); }
.drustvene { display: flex; gap: 22px; justify-self: center; }
.drustvene a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--rub); transition: border-color .3s, box-shadow .3s; }
.drustvene a:hover { border-color: var(--zelena); box-shadow: 0 0 18px rgba(var(--ak), .5); }
.drustvene svg { width: 18px; height: 18px; fill: none; stroke: var(--tekst); stroke-width: 1.5; stroke-linejoin: round; }
.pod-desno { text-align: right; display: grid; font-size: 13px; color: var(--prigusena); } .pod-desno b { color: #fff; font-weight: 500; }
.pod-mala { font-size: 12.5px; color: var(--prigusena); }
.pod-linkovi { grid-column: 2 / 4; justify-self: end; display: flex; gap: 22px; font-size: 12.5px; color: var(--prigusena); } .pod-linkovi a:hover { color: var(--zelena); }

/* ---- 3D nagib kartica ---- */
[data-tilt] { transform-style: preserve-3d; }
[data-tilt].nagib { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s linear; }
[data-tilt]::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 1; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--ak), .16), transparent 62%); }
[data-tilt]:hover::before { opacity: 1; }
.znacajka, .usluga { position: relative; }

/* ---- responzivno ---- */
@media (max-width: 1000px) {
  .nav { justify-content: space-between; }
  .znacajke { grid-template-columns: 1fr 1fr; } .znacajka:nth-child(3) { border-left: 0; } .znacajka:nth-child(n+3) { border-top: 1px solid var(--rub); }
  .usluge, .portfolio { grid-template-columns: 1fr; }
  .podnozje { grid-template-columns: 1fr; text-align: center; } .pod-desno { text-align: center; } .pod-linkovi { grid-column: 1; justify-self: center; flex-wrap: wrap; justify-content: center; }
  .hero-slogan { display: none; }
}
@media (max-width: 640px) {
  .hero { padding-top: 40vh; align-items: flex-start; } .hero-naslov { font-size: 34px; }
  .znacajke { grid-template-columns: 1fr; } .znacajka { border-left: 0 !important; border-top: 1px solid var(--rub); } .znacajka:first-child { border-top: 0; }
  .usluge-mreza { grid-template-columns: 1fr 1fr; } .prsti { grid-template-columns: 1fr; } .stat { border-left: 0; border-top: 1px solid var(--rub); } .stat:first-child { border-top: 0; }
  .gumb { padding: 14px 22px; } .skeniranje { opacity: .3; }
}
@media (hover: none) { .znacajke, .usluge-mreza, .terminal, .prsti, .podnozje { backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; } .treptaj, .skrol span { animation: none; } }
h1, h2, .uvod, .hero-tekst, .kicker { text-shadow: 0 0 22px rgba(0, 6, 3, .95), 0 2px 4px rgba(0, 6, 3, .8); }
em { text-shadow: 0 0 26px rgba(var(--ak), .55), 0 2px 4px rgba(0, 6, 3, .8); }
.gumb { white-space: nowrap; }
@media (max-width: 640px) { .nav .gumb-mali { padding: 9px 14px; font-size: 11px; letter-spacing: .06em; } .logo { font-size: 21px; } }

/* ================= zvuk gumb ================= */
.zvuk-gumb { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--rub); background: rgba(var(--ak), .04); color: var(--prigusena); cursor: pointer; border-radius: 4px; transition: color .3s, border-color .3s, box-shadow .3s; }
.zvuk-gumb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zvuk-gumb .val { opacity: 0; transition: opacity .3s; }
.zvuk-gumb.upaljen { color: var(--zelena); border-color: var(--zelena); box-shadow: 0 0 16px rgba(var(--ak), .35); }
.zvuk-gumb.upaljen .val { opacity: 1; }
@media (max-width: 1000px) { .nav .zvuk-gumb { margin-left: auto; } }

/* ================= podstranice ================= */
.hero-podstranica { min-height: auto; padding-top: 150px; padding-bottom: 40px; }
.hero-podstranica .hero-sadrzaj { max-width: 760px; }
.filtri { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.filtar { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--rub); background: rgba(var(--ak), .03); color: var(--tekst); cursor: pointer; transition: all .3s; }
.filtar:hover { border-color: var(--zelena); color: var(--zelena); }
.filtar.aktivan { background: var(--zelena); color: var(--na-ak); border-color: var(--zelena); box-shadow: 0 0 22px rgba(var(--ak), .4); }
.projekti { padding-top: 30px; }
.projekti-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 30px; }
.projekt { position: relative; border: 1px solid var(--rub); background: var(--staklo); display: flex; flex-direction: column; overflow: hidden; }
.projekt-slika { display: block; position: relative; border-bottom: 1px solid var(--rub); overflow: hidden; }
.projekt-slika img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.85) contrast(1.05); }
.projekt:hover .projekt-slika img { transform: scale(1.06); filter: saturate(1.1); }
.skener { position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(var(--ak), .25), transparent); transform: translateY(-120%); }
.projekt:hover .skener { animation: skener 1.4s linear infinite; }
@keyframes skener { to { transform: translateY(330%); } }
.projekt-tekst { padding: 24px 26px 28px; }
.projekt-vrsta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--zelena); margin-bottom: 8px; }
.projekt h3 { font-size: 26px; font-weight: 500; color: #fff; margin-bottom: 10px; }
.projekt-tekst > p:not(.projekt-vrsta) { color: var(--prigusena); font-size: 15px; margin-bottom: 16px; }
.oznake { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.oznake li { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border: 1px solid var(--rub); color: var(--tekst); }
.projekt-prazan { align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 40px 30px; border-style: dashed; border-color: var(--rub-jak); min-height: 360px; }
.projekt-prazan .plus { font-family: var(--mono); font-size: 70px; line-height: 1; color: var(--zelena); text-shadow: 0 0 30px rgba(var(--ak), .7); transition: transform .5s var(--ease); }
.projekt-prazan:hover .plus { transform: rotate(90deg) scale(1.15); }
.projekt-prazan p { color: var(--prigusena); max-width: 28ch; }
.projekt.vidi { animation: ulazkartice .8s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes ulazkartice { from { opacity: 0; transform: translateY(30px) scale(.97); } }

/* ================= kontakt ================= */
.kontakt-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 6vw, 90px); align-items: start; padding-top: 150px; padding-bottom: 100px; min-height: 100svh; }
.kontakt-podaci { list-style: none; margin-top: 34px; border: 1px solid var(--rub); background: var(--staklo); max-width: 440px; }
.kontakt-podaci li { display: flex; justify-content: space-between; gap: 18px; padding: 16px 20px; border-top: 1px solid var(--rub); font-size: 15px; } .kontakt-podaci li:first-child { border-top: 0; }
.kontakt-podaci span { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--prigusena); }
.kontakt-podaci a, .kontakt-podaci b { color: var(--zelena); font-weight: 500; text-align: right; }
.forma { position: relative; padding: 38px 32px 30px; border: 1px solid var(--rub-jak); background: rgba(3, 16, 10, .9); display: grid; gap: 22px; box-shadow: 0 0 60px rgba(var(--ak), .12); }
.forma-glava { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--rub); font-family: var(--mono); font-size: 11px; color: var(--prigusena); }
.forma-glava span { color: var(--zelena); letter-spacing: 4px; font-size: 8px; padding-top: 3px; }
.forma > .polje:first-of-type { margin-top: 14px; }
.polje { display: grid; gap: 8px; border: 0; }
.polje span, .polje legend { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--zelena); text-transform: lowercase; }
.polje input, .polje textarea { width: 100%; background: rgba(2, 10, 6, .8); border: 1px solid var(--rub); color: #fff; font: 400 16px var(--sans); padding: 14px 16px; outline: none; border-radius: 0; transition: border-color .3s, box-shadow .3s; resize: vertical; }
.polje input::placeholder, .polje textarea::placeholder { color: #4d6e5e; }
.polje input:focus, .polje textarea:focus { border-color: var(--zelena); box-shadow: 0 0 0 1px var(--zelena), 0 0 26px rgba(var(--ak), .25); }
.cipovi-izbor { display: flex; flex-wrap: wrap; gap: 8px; }
.cipovi-izbor button { font-family: var(--mono); font-size: 12px; padding: 9px 14px; border: 1px solid var(--rub); background: transparent; color: var(--tekst); cursor: pointer; transition: all .25s; }
.cipovi-izbor button:hover { border-color: var(--zelena); color: var(--zelena); }
.cipovi-izbor button.aktivan { background: var(--zelena); color: var(--na-ak); border-color: var(--zelena); box-shadow: 0 0 18px rgba(var(--ak), .4); }
.forma-greska { font-family: var(--mono); font-size: 13px; color: #ff6b81; min-height: 1.2em; margin: -6px 0 0; }
.forma-gumb { justify-self: start; cursor: pointer; font-family: var(--sans); }
.forma-izlaz { font-family: var(--mono); font-size: 13px; color: var(--zelena); white-space: pre-wrap; min-height: 1.2em; }
.forma.tresi { animation: tresi .45s; }
@keyframes tresi { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-width: 1000px) { .kontakt-hero { grid-template-columns: 1fr; min-height: 0; } .projekti-mreza { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .forma { padding: 38px 18px 24px; } }
@media (min-width: 1000px) {
  .onama { text-align: left; padding-right: 50%; }
  .onama .uvod.sred { margin-inline: 0; text-align: left; }
  .onama .prsti { grid-template-columns: repeat(3, 1fr); }
  .onama .stat { padding: 28px 10px; text-align: center; }
}

/* ================= uvodni zaslon ================= */
.uvod-zaslon { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(2, 12, 7, .78), rgba(0, 3, 2, .96)); transition: opacity 1.1s ease, transform 1.4s var(--ease), filter 1.2s; }
.uvod-zaslon[hidden] { display: none; }
.uvod-zaslon.izlaz { opacity: 0; transform: scale(1.5); filter: blur(10px); pointer-events: none; }
.uvod-okvir { width: min(560px, 88vw); font-family: var(--mono); }
.uvod-logo { font-family: var(--sans); font-size: clamp(30px, 6vw, 46px); font-weight: 500; color: #fff; margin-bottom: 26px; letter-spacing: -.01em; }
.uvod-logo span { color: var(--zelena); text-shadow: 0 0 20px rgba(var(--ak), .8); }
.uvod-linije { list-style: none; font-size: 13.5px; color: var(--zelena); min-height: 108px; line-height: 1.9; text-shadow: 0 0 10px rgba(var(--ak), .5); }
.uvod-traka { height: 3px; background: rgba(var(--ak), .15); margin: 8px 0 30px; }
.uvod-traka i { display: block; height: 100%; width: 0; background: var(--zelena); box-shadow: 0 0 16px var(--zelena); transition: width .4s var(--ease); }
.uvod-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; animation: ulazkartice .7s var(--ease) both; }
.uvod-bez { background: none; border: 0; cursor: pointer; font-family: var(--mono); }
html.uvod-otvoren .nav, html.uvod-otvoren main, html.uvod-otvoren footer { visibility: hidden; }

/* ================= BOJE STRANICE (pilule): zelena je zadana ================= */
html[data-boja="crvena"] { --ak: 255, 45, 77; --zelena: #ff2d4d; --zelena-2: #d91e3c; --zelena-tamna: #3a0a14; --crna: #060203; --tamna: #100408; --tekst: #f0d6da; --prigusena: #a07880; --na-ak: #1a0006; --staklo: rgba(22, 4, 8, .8); }
html[data-boja="plava"] { --ak: 45, 139, 255; --zelena: #2d8bff; --zelena-2: #1a6fe0; --zelena-tamna: #0a2a50; --crna: #020409; --tamna: #040a14; --tekst: #d3e2f5; --prigusena: #7890a8; --na-ak: #00122a; --staklo: rgba(4, 12, 24, .8); }
html[data-boja] body, html[data-boja] .nav.skrolan { transition: background .8s; }
html[data-boja="crvena"] .nav.skrolan { background: rgba(6, 2, 3, .94); } html[data-boja="plava"] .nav.skrolan { background: rgba(2, 4, 9, .94); }
html[data-boja="crvena"] .podnozje { background: rgba(6, 2, 3, .85); } html[data-boja="plava"] .podnozje { background: rgba(2, 4, 9, .85); }
html[data-boja="crvena"] .znacajke { background: rgba(10, 3, 5, .82); } html[data-boja="plava"] .znacajke { background: rgba(3, 7, 14, .82); }

/* prekidač boje u navigaciji */
.boje-prekidac { display: flex; gap: 8px; flex: none; }
.boje-prekidac button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); cursor: pointer; padding: 0; transition: transform .3s var(--ease), box-shadow .3s; }
.boje-prekidac button[data-boja="crvena"] { background: #ff2d4d; } .boje-prekidac button[data-boja="plava"] { background: #2d8bff; } .boje-prekidac button[data-boja="zelena"] { background: #19ff8a; }
.boje-prekidac button:hover { transform: scale(1.35); }
.boje-prekidac button.aktivna { box-shadow: 0 0 0 2px var(--crna), 0 0 0 3px #fff, 0 0 14px currentColor; transform: scale(1.15); }
@media (max-width: 1000px) { .boje-prekidac { margin-left: auto; } .nav .zvuk-gumb { margin-left: 0; } }

/* ================= pilule ================= */
.uvod-okvir { width: min(820px, 92vw); text-align: center; }
.uvod-okvir .uvod-logo { margin-bottom: 14px; }
.uvod-naslov { font-family: var(--sans); font-size: clamp(26px, 4.4vw, 44px); font-weight: 500; color: #fff; margin: 6px 0 10px; line-height: 1.1; }
.uvod-podnaslov { font-family: var(--mono); font-size: 13px; color: var(--prigusena); max-width: 56ch; margin: 0 auto; }
.pilule { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(16px, 4vw, 52px); margin: 34px 0 18px; perspective: 900px; animation: ulazkartice .8s var(--ease) both; }
.pilula { background: none; border: 0; cursor: pointer; color: var(--tekst); width: 210px; text-align: center; font-family: var(--sans); padding: 10px 6px; --pa: #0aa85a; --pb: #3dffa6; --sj: rgba(25, 255, 138, .55); }
.pilula[data-boja="crvena"] { --pa: #a60f28; --pb: #ff4a68; --sj: rgba(255, 45, 77, .6); }
.pilula[data-boja="plava"] { --pa: #0a47a8; --pb: #4aa3ff; --sj: rgba(45, 139, 255, .6); }
.kapsula { position: relative; display: block; width: 156px; height: 64px; margin: 0 auto 20px; border-radius: 999px; transform: rotate(-24deg); background: linear-gradient(90deg, var(--pa) 0 50%, var(--pb) 50% 100%); box-shadow: inset 0 -9px 14px rgba(0, 0, 0, .4), inset 0 7px 10px rgba(255, 255, 255, .28), 0 16px 30px rgba(0, 0, 0, .65), 0 0 46px var(--sj); transition: transform .5s var(--ease), box-shadow .5s; animation: lebdi 3.4s ease-in-out infinite; }
.pilula:nth-child(2) .kapsula { animation-delay: -1.1s; } .pilula:nth-child(3) .kapsula { animation-delay: -2.2s; }
.kapsula::before { content: ""; position: absolute; left: 50%; top: 4%; bottom: 4%; width: 2px; background: rgba(0, 0, 0, .28); }
.kapsula::after { content: ""; position: absolute; left: 9%; right: 9%; top: 9%; height: 24%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
@keyframes lebdi { 50% { transform: rotate(-24deg) translateY(-9px); } }
.pilula:hover .kapsula, .pilula:focus-visible .kapsula { animation: none; transform: rotate(-4deg) translateY(-10px) scale(1.16); box-shadow: inset 0 -9px 14px rgba(0, 0, 0, .4), inset 0 7px 10px rgba(255, 255, 255, .34), 0 22px 40px rgba(0, 0, 0, .7), 0 0 90px var(--sj); }
.pilula b { display: block; font-size: 19px; font-weight: 500; color: #fff; margin-bottom: 6px; letter-spacing: .01em; }
.pilula small { display: block; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--prigusena); }
.pilula:hover b { text-shadow: 0 0 18px var(--sj); }
.uvod-zvuk { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--prigusena); cursor: pointer; margin-top: 8px; }
.uvod-zvuk input { accent-color: var(--zelena); width: 16px; height: 16px; }
.uvod-izbor { animation: ulazkartice .7s var(--ease) both; }

/* ---- štednja grafike ---- */
html[data-grafika="niska"] .skeniranje, html[data-grafika="niska"] .vinjeta { display: none; }
.grafika-gumb { background: none; border: 0; color: var(--prigusena); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.grafika-gumb:hover { color: var(--zelena); }

/* ---- portfolio uređaji na naslovnici: prave slike projekata, bez preklapanja i bez "kidanja" (clip-path + 3D) ---- */
[data-tilt] { transform-style: flat; }
.uredaji[data-reveal], .uredaji[data-reveal].vidi { clip-path: none; }
.uredaji { display: flex; align-items: flex-end; gap: clamp(14px, 3%, 34px); padding: 0 0 20px; perspective: none; }
.uredaji .laptop { display: block; flex: 1 1 74%; min-width: 0; max-width: none; }
.uredaji .mobitel { display: block; position: static; flex: 0 0 22%; width: auto; min-width: 0; align-self: flex-end; }
.uredaji .laptop .ekran { border-bottom-width: 12px; }
.uredaji .laptop img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; }
.uredaji .mobitel .ekran { aspect-ratio: 9 / 18; }
.uredaji .mobitel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.uredaji .laptop:hover .ekran, .uredaji .mobitel:hover .ekran { box-shadow: 0 0 80px rgba(var(--ak), .45), 0 40px 80px rgba(0, 0, 0, .6); }
@media (max-width: 640px) { .uredaji { gap: 10px; } .uredaji .laptop { flex-basis: 70%; } .uredaji .mobitel { flex-basis: 26%; } }

/* ---- vraćen izvorni raspored (mobitel preko donjeg desnog kuta laptopa); zadržan ispravak "kidanja" ---- */
.uredaji { display: block; position: relative; gap: 0; padding: 0 0 20px; }
.uredaji .laptop { display: block; width: 100%; max-width: 640px; flex: none; }
.uredaji .mobitel { display: block; position: absolute; right: -2%; bottom: -4%; width: 29%; min-width: 130px; flex: none; align-self: auto; }
.uredaji .mobitel .ekran { aspect-ratio: 9 / 17; }
@media (max-width: 640px) { .uredaji .laptop { flex-basis: auto; } .uredaji .mobitel { flex-basis: auto; } }

/* ================= uvod s laptopom ================= */
.uvod-zaslon { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7) 100%); display: block; place-items: unset; cursor: pointer; transition: opacity 1.1s ease; }
.uvod-zaslon.izlaz { opacity: 0; transform: none; filter: none; pointer-events: none; }
.uvod-natpis { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; font-family: var(--mono); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--zelena); text-shadow: 0 0 14px rgba(var(--ak), .7); animation: treptaj 1.6s steps(2) infinite; transition: opacity .5s; }
.uvod-zaslon.otvoren .uvod-natpis { opacity: 0; animation: none; }
.uvod-preskoci { position: absolute; right: clamp(18px, 4vw, 48px); bottom: 28px; background: none; border: 1px solid var(--rub); color: var(--prigusena); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; cursor: pointer; transition: color .3s, border-color .3s; }
.uvod-preskoci:hover { color: var(--zelena); border-color: var(--zelena); }

/* O nama: lijeva polovica sekcije (grid), ne postotak širine stranice – radi i na vrlo širokim ekranima */
@media (min-width: 1000px) {
  .onama { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-right: clamp(18px, 5vw, 72px); }
  .onama > * { grid-column: 1; }
}

/* Otkrivanje pri skrolu: clip-path na samom elementu je u Chromeu/Braveu/Claude panelu činio da IntersectionObserver
   nikad ne "vidi" element (ostajao je nevidljiv). Zato samo prozirnost + pomak. */
[data-reveal], [data-reveal].vidi { clip-path: none; }

/* ---- cijenik ---- */
.cijenik { padding-top: 30px; }
.paketi { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; align-items: stretch; }
.paket { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 34px 26px 28px; border: 1px solid var(--rub); background: var(--staklo); overflow: hidden; transition: border-color .35s, box-shadow .35s; }
.paket:hover { border-color: var(--rub-jak); box-shadow: 0 0 50px rgba(var(--ak), .14); }
.paket.vidi { animation: ulazkartice .8s var(--ease) both; animation-delay: var(--d, 0ms); }
.paket.istaknut { border-color: var(--zelena); box-shadow: 0 0 44px rgba(var(--ak), .16); }
.paket-znak { position: absolute; top: 0; right: 0; padding: 6px 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; background: var(--zelena); color: var(--na-ak, #00110a); }
.paket h3 { font-size: 26px; font-weight: 500; color: #fff; }
.paket-opis { color: var(--prigusena); font-size: 14.5px; min-height: 3.2em; }
.paket-cijena { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--zelena); text-shadow: 0 0 24px rgba(var(--ak), .55); }
.paket ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 9px; flex: 1; }
.paket li { position: relative; padding-left: 22px; font-size: 14.5px; color: #cfe; }
.paket li::before { content: ">"; position: absolute; left: 0; color: var(--zelena); font-family: var(--mono); }
.paket .gumb { align-self: flex-start; }
.cijenik-naslov { margin: clamp(60px, 8vw, 110px) 0 24px; font-size: clamp(28px, 3.6vw, 44px); }
.dodatno { list-style: none; padding: 0; margin: 0; border: 1px solid var(--rub); background: var(--staklo); }
.dodatno > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 20px 26px; border-top: 1px solid var(--rub); }
.dodatno > li:first-child { border-top: 0; }
.dodatno b { display: block; color: #fff; font-weight: 500; font-size: 17px; }
.dodatno > li > div > span { color: var(--prigusena); font-size: 14px; }
.dodatno > li > em { font-style: normal; font-family: var(--mono); color: var(--zelena); white-space: nowrap; }
.cijenik-napomena { margin-top: 20px; color: var(--prigusena); font-size: 13.5px; font-family: var(--mono); }
@media (max-width: 640px) { .dodatno > li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; } .paket-opis { min-height: 0; } }

/* upute za klijenta u cijeniku */
.info-gumb { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 3px 11px 3px 9px; vertical-align: middle; border: 1px solid var(--zelena); border-radius: 999px; background: rgba(var(--ak), .08); color: var(--zelena); font: 700 12px/1.4 var(--mono); cursor: pointer; transition: background .25s, box-shadow .25s; }
.info-gumb span { font-weight: 400; letter-spacing: .08em; }
.info-gumb:hover, .info-gumb[aria-expanded="true"] { background: rgba(var(--ak), .22); box-shadow: 0 0 16px rgba(var(--ak), .4); }
.upute { flex-basis: 100%; margin-top: 4px; padding: 20px 22px; border: 1px dashed var(--rub-jak); background: rgba(2, 10, 6, .6); }
.upute[hidden] { display: none; }
.upute-naslov { font-family: var(--mono); color: var(--zelena); font-size: 13px; letter-spacing: .12em; margin-bottom: 12px; }
.upute ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: #cfe; font-size: 14.5px; }
.upute ol li { display: list-item; }
.upute li::marker { color: var(--zelena); font-family: var(--mono); }
.upute-napomena { margin-top: 16px; padding: 12px 14px; border-left: 2px solid var(--zelena); background: rgba(var(--ak), .07); font-size: 14px; color: #cfe; }
.upute-napomena b { color: var(--zelena); font-family: var(--mono); font-weight: 700; }

/* mobilna navigacija: gumb s 3 crtice otvara izbornik s linkovima (na računalu se ne vidi) */
.nav-burger, .nav-ponuda { display: none; }
@media (max-width: 1000px) {
  .nav { background: rgba(2, 6, 5, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-color: var(--rub); }
  .nav-burger {
    display: grid; align-content: center; gap: 5px; flex: none; width: 40px; height: 40px; padding: 0 9px; cursor: pointer;
    border: 1px solid var(--rub); background: rgba(var(--ak), .04); border-radius: 4px; transition: border-color .3s, box-shadow .3s;
  }
  .nav-burger span { display: block; height: 2px; background: var(--zelena); box-shadow: 0 0 8px rgba(var(--ak), .7); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
  .nav.otvoren .nav-burger { border-color: var(--zelena); box-shadow: 0 0 16px rgba(var(--ak), .35); }
  .nav.otvoren .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.otvoren .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.otvoren .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-linkovi {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin: 0; gap: 0; padding: 6px clamp(18px, 4vw, 60px) 18px;
    font-size: 19px; background: rgba(2, 6, 5, .97); border-bottom: 1px solid var(--rub); box-shadow: 0 24px 40px rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav.otvoren .nav-linkovi { opacity: 1; visibility: visible; transform: none; }
  .nav-linkovi a { padding: 15px 2px; border-bottom: 1px solid rgba(var(--ak), .14); }
  .nav-linkovi a::after { display: none; }
  .nav-linkovi a.aktivan { color: var(--zelena); }
  .nav-linkovi a.aktivan::before { content: "> "; font-family: var(--mono); }
  .nav-linkovi a.nav-ponuda {
    display: block; margin-top: 16px; padding: 15px 18px; text-align: center; border: 1px solid var(--zelena); color: var(--zelena);
    letter-spacing: .08em; text-transform: uppercase; font-size: 14px; font-family: var(--mono); box-shadow: 0 0 18px rgba(var(--ak), .2);
  }
  .boje-prekidac { margin-left: auto; }
}
@media (max-width: 640px) { .nav .gumb-mali { display: none; } .nav { gap: 12px; } .nav .zvuk-gumb { margin-left: 0; } .hero { padding-top: 40vh; } }

/* zaglavlje na uskim mobitelima: sve (logo, boje, zvuk, 3 crtice) mora stati u širinu ekrana, bez obzira na veličinu mobitela */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 1000px) {
  .nav { gap: 10px; padding-inline: clamp(10px, 3.4vw, 22px); flex-wrap: nowrap; }
  .nav > * { flex-shrink: 0; }
  .nav .logo { flex-shrink: 1; min-width: 0; gap: 8px; font-size: clamp(16px, 5.4vw, 22px); white-space: nowrap; }
  .nav .boje-prekidac { margin-left: auto; }
}
@media (max-width: 430px) {
  .nav { gap: 8px; }
  .nav .boje-prekidac { gap: 6px; }
  .nav .boje-prekidac button { width: 14px; height: 14px; }
  .nav .zvuk-gumb, .nav .nav-burger { width: 36px; height: 36px; }
  .nav .nav-burger { padding: 0 8px; gap: 4px; }
  .nav.otvoren .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.otvoren .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 370px) { .nav .logo-znak { display: none; } .nav .logo { font-size: clamp(15px, 5.2vw, 19px); } }