@font-face{font-family:"Aktiv Grotesk";src:url("../fonts/AktivGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url("../fonts/AktivGrotesk-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url("../fonts/AktivGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url("../fonts/AktivGrotesk-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
html,body{margin:0;padding:0;background:#121211}
body{font-family:"Aktiv Grotesk","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:where(:hover){color:#f08ea2}
[data-svc] li{transition:background-color .2s steps(2,end),color .2s steps(2,end)}
[data-svc]:hover li{background-image:linear-gradient(90deg,#9b6ac4 0%,#f08ea2 55%,#f2d74b 100%);background-size:var(--bw,100%) 100%;background-position:var(--bx,0) 0;background-repeat:no-repeat;color:#0b0b0b;border-color:transparent !important}
[data-peek]{transition:grid-template-rows .36s steps(4,end)}
[data-serv]:hover [data-peek]{grid-template-rows:1fr !important}
@media (hover:none){[data-peek]{display:none !important}}
@keyframes dtMrq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
[data-mrq]{animation:dtMrq 38s steps(480,end) infinite;will-change:transform}
[data-btn]{transition:color .42s steps(6,end) !important}
[data-btn]::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .42s steps(6,end)}
[data-btn="grad"]::before{background:linear-gradient(90deg,#9b6ac4 0%,#f08ea2 55%,#f2d74b 100%)}
[data-btn="paper"]::before{background:var(--fg)}
[data-btn]:hover::before{transform:scaleX(1)}
[data-arr]{transition:transform .3s steps(3,end)}
[data-btn]:hover [data-arr]{transform:rotate(45deg)}
[data-btn]:hover{color:#0b0b0b !important}
[data-btn="grad"]{}
.dch{transition:color 0s;transition-delay:var(--d,0ms)}
[data-lnk]:hover .dch{color:var(--c)}
[data-theme]{--bg:#121211;--fg:#f4f3f0;--fgrgb:244,243,240;--mut1:#b4b1aa;--mut2:#8a8780;--raise:#1c1b1a}
/* Iste boje i na korijenu, jer se traka za privolu dodaje u <body>,
   izvan omota koji nosi temu, pa bi inače ostala bez ijedne vrijednosti. */
:root{--bg:#121211;--fg:#f4f3f0;--fgrgb:244,243,240;--mut1:#b4b1aa;--mut2:#8a8780;--raise:#1c1b1a}
[data-theme="light"]{--bg:#f2f2f0;--fg:#121211;--fgrgb:18,18,17;--mut1:#45433f;--mut2:#5f5c57;--raise:#e6e6e3}
:root[data-theme="light"]{--bg:#f2f2f0;--fg:#121211;--fgrgb:18,18,17;--mut1:#45433f;--mut2:#5f5c57;--raise:#e6e6e3}
[data-theme="light"] img[src*="klijenti"]{filter:invert(1)}
[data-theme] {transition:background-color .3s steps(3,end),color .3s steps(3,end)}
[data-btn="paper"]:hover{color:var(--bg) !important}
::selection{background:#f08ea2;color:#0b0b0b}

/* ===== Dodano pri prijenosu iz Claude Designa =================================
   U Designu su ova dva stanja stajala kao style-hover atribut na elementu.
   Obicni preglednik to ne poznaje, pa su ovdje prava pravila.            ===== */
[data-hov] { transition: transform .3s steps(3,end), box-shadow .3s steps(3,end),
             background-color .3s steps(3,end), color .3s steps(3,end) }
[data-hov="inv"]:hover { background: var(--fg); color: var(--bg) }
[data-hov="lift"]:hover { transform: translate(-6px,-6px); box-shadow: 6px 6px 0 #f08ea2 }

/* Boja kvadratica u prekidacu teme. */
[data-theme] { --swatch: #f2f2f0 }
[data-theme="light"] { --swatch: #121211 }

/* Prekidac teme. Prije je stajao fiksno u donjem desnom kutu i tamo je na
   svakoj stranici prekrivao sadrzaj; sada je zadnja stavka u gornjoj traci. */
.tema { display: flex; align-items: center; gap: 8px; padding: 16px 0;
  min-width: 24px; background: none; border: 0; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; cursor: pointer }
.tema:hover { color: #f08ea2 }
.tema__sw { display: block; width: 10px; height: 10px;
  border: 1px solid currentColor; background: var(--swatch) }

/* Na uskom zaslonu ostaje samo kvadratic; natpis i dalje nosi ime gumba. */
@media (max-width: 760px) {
  .tema { padding: 16px 7px; justify-content: center }
  .tema__t { position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
}

/* Trenutna stranica u izborniku, crtom a ne samo bojom. */
header nav [aria-current] { text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 7px }

/* Preskakanje izbornika, tipkovnicom. */
.preskoci { position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 16px; background: #f4f3f0; color: #0b0b0b;
  font: 700 12px/1 "Aktiv Grotesk", Helvetica, Arial, sans-serif;
  letter-spacing: .04em; text-transform: uppercase }
.preskoci:focus { left: 0 }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #f08ea2; outline-offset: 3px }

@media (prefers-reduced-motion: reduce) {
  [data-mrq] { animation: none }
  * { transition-duration: .01ms !important }
}

/* ===== Privola za kolačiće ====================================================
   Pisano u jeziku ovog dizajna: pravi kutovi, rub od 1 px, steps() prijelazi.
   Traka i postavke stoje iznad svega, pa im z-index ide iznad kursora.   ===== */
.cc {
  position: fixed;
  left: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 210;
  max-width: 520px;
  padding: clamp(18px, 2vw, 26px);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  box-shadow: 8px 8px 0 rgba(var(--fgrgb), 0.12);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s steps(3, end), transform 0.3s steps(3, end);
}

.cc.on {
  opacity: 1;
  transform: none;
}

.cc__t {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc__p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mut1);
}

.cc__p a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Odbijanje i pristanak moraju izgledati jednako teško; zakon traži da
   odbiti bude jednako lako kao pristati. */
.cc__btn {
  flex: 1 1 auto;
  padding: 14px 18px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.24s steps(3, end), color 0.24s steps(3, end);
}

.cc__btn:hover {
  background: var(--fg);
  color: var(--bg);
}

.cc__more,
.cc__foot-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--mut2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cc__more:hover,
.cc__foot-link:hover {
  color: var(--fg);
}

/* --- Postavke --------------------------------------------------------------- */
.ccs {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 28px);
  background: rgba(0, 0, 0, 0.62);
}

.ccs.on {
  display: flex;
}

.ccs__box {
  width: min(100%, 620px);
  max-height: 86vh;
  overflow: auto;
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
}

.ccs__h {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.ccs__list {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(var(--fgrgb), 0.35);
}

.ccs__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--fgrgb), 0.35);
}

.ccs__name {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ccs__desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mut1);
}

.ccs__sw {
  grid-row: 1;
  grid-column: 2;
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  flex: none;
}

.ccs__sw input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ccs__sw span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--fg);
  background: transparent;
  transition: background-color 0.2s steps(2, end);
}

.ccs__sw span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--fg);
  transition: transform 0.2s steps(2, end), background-color 0.2s steps(2, end);
}

.ccs__sw input:checked + span {
  background-image: linear-gradient(90deg, #9b6ac4 0%, #f08ea2 55%, #f2d74b 100%);
}

.ccs__sw input:checked + span::after {
  transform: translateX(20px);
  background: #0b0b0b;
}

.ccs__sw input:focus-visible + span {
  outline: 2px solid #f08ea2;
  outline-offset: 3px;
}

.ccs__sw input:disabled {
  cursor: not-allowed;
}

.ccs__sw input:disabled + span {
  opacity: 0.55;
}

.ccs__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 520px) {
  .cc__row,
  .ccs__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .cc__more,
  .ccs__foot .cc__more {
    padding-top: 6px;
  }
}

/* ===== Mete za klik ===========================================================
   Sitne velike poveznice (podnožje, putanja, redovi ispod kartica) visoke su
   oko 15 px, a prst traži barem 24. Nevidljivi sloj preko njih proširuje metu,
   a da se razmaci u rasporedu ne pomaknu ni za piksel.                   ===== */
footer a,
footer button,
a[data-lnk] {
  position: relative;
}

footer a::after,
footer button::after,
a[data-lnk]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 24px;
  transform: translateY(-50%);
}

/* U naslovima je poveznica već velika; ondje sloj samo smeta. */
:where(h1, h2, h3) a[data-lnk]::after {
  content: none;
}

/* Isto vrijedi za poveznice u traci privole i u tekstu pravnih stranica. */
.cc__p a,
.cc__more,
.cc__foot-link,
article a {
  position: relative;
}

.cc__p a::after,
.cc__more::after,
.cc__foot-link::after,
article a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 24px;
  transform: translateY(-50%);
}