/* base */
:root {
  --grafit: #2c3135;
  --grafit-duboki: #23272a;
  --menta: #7fe0c0;
  --menta-blijeda: #c9f2e4;
  --menta-tamna: #1d6e55;
  --svijetla: #f4faf8;
  --bijela: #ffffff;
  --crta: rgba(44, 49, 53, 0.16);
  --font-naslov: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  --font-tekst: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --zaobljenje: 16px;
  --visina-glave: 60px;
  --rub-desno: polygon(0 0, 97% 0%, 95.09% 5%, 94.3% 10%, 95.09% 15%, 97% 20%, 98.91% 25%, 99.7% 30%, 98.91% 35%, 97% 40%, 95.09% 45%, 94.3% 50%, 95.09% 55%, 97% 60%, 98.91% 65%, 99.7% 70%, 98.91% 75%, 97% 80%, 95.09% 85%, 94.3% 90%, 95.09% 95%, 97% 100%, 0 100%);
  --rub-lijevo: polygon(3% 0%, 4.91% 5%, 5.7% 10%, 4.91% 15%, 3% 20%, 1.09% 25%, 0.3% 30%, 1.09% 35%, 3% 40%, 4.91% 45%, 5.7% 50%, 4.91% 55%, 3% 60%, 1.09% 65%, 0.3% 70%, 1.09% 75%, 3% 80%, 4.91% 85%, 5.7% 90%, 4.91% 95%, 3% 100%, 100% 100%, 100% 0);
  --obtok-lijevo: polygon(6% 0%, 9.82% 5%, 11.4% 10%, 9.82% 15%, 6% 20%, 2.18% 25%, 0.6% 30%, 2.18% 35%, 6% 40%, 9.82% 45%, 11.4% 50%, 9.82% 55%, 6% 60%, 2.18% 65%, 0.6% 70%, 2.18% 75%, 6% 80%, 9.82% 85%, 11.4% 90%, 9.82% 95%, 6% 100%, 100% 100%, 100% 0);
  --obtok-desno: polygon(0 0, 94% 0%, 90.18% 5%, 88.6% 10%, 90.18% 15%, 94% 20%, 97.82% 25%, 99.4% 30%, 97.82% 35%, 94% 40%, 90.18% 45%, 88.6% 50%, 90.18% 55%, 94% 60%, 97.82% 65%, 99.4% 70%, 97.82% 75%, 94% 80%, 90.18% 85%, 88.6% 90%, 90.18% 95%, 94% 100%, 0 100%);
  --val-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%237fe0c0' d='M0 160C240 80 480 80 720 160S1200 240 1440 160V320H0Z'/%3E%3C/svg%3E");
  --val-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%237fe0c0' d='M0 190C180 130 540 130 720 190S1260 250 1440 190V320H0Z'/%3E%3C/svg%3E");
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--visina-glave) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--svijetla);
  color: var(--grafit);
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--grafit); text-decoration-color: var(--menta-tamna); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
a:hover { color: var(--menta-tamna); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--menta-tamna); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--font-naslov); font-weight: 700; line-height: 1.12; margin: 0 0 1rem; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
p { margin: 0 0 1rem; }

.skokSadrzaj { position: absolute; left: 1rem; top: -60px; z-index: 100; background: var(--grafit); color: var(--svijetla); padding: .6rem 1rem; border-radius: 8px; transition: top .2s ease; }
.skokSadrzaj:focus { top: .75rem; color: var(--svijetla); }

.skrivenoCitac { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* header */
.glavaTraka {
  position: fixed; top: 0; left: 0; right: 0; z-index: 65;
  height: var(--visina-glave);
  display: flex; align-items: center; justify-content: center;
  padding: 0 1.25rem;
  background: rgba(244, 250, 248, .94);
  border-bottom: 3px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.jeSkrolano .glavaTraka { border-bottom-color: var(--menta); }

.izbornikVrh { position: relative; }
.izbornikPopis { position: relative; display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.stavkaIzbornika a {
  position: relative; z-index: 1; display: block;
  padding: .5rem 1rem;
  font-family: var(--font-naslov); font-weight: 700; font-size: .97rem;
  color: var(--grafit); text-decoration: none; white-space: nowrap;
  border-radius: 999px;
}
.stavkaIzbornika a:hover { color: var(--grafit); }
.stavkaIzbornika a:active { transform: translateY(1px); }
.mrljaIzbor {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%;
  width: var(--mrlja-sirina, 0px);
  transform: translateX(var(--mrlja-x, 0px));
  background: var(--menta);
  border-radius: var(--mrlja-oblik, 44% 56% 52% 48% / 62% 44% 56% 38%);
  opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.5, .1, .25, 1.2), width .32s ease, border-radius .32s ease, opacity .2s ease;
}
.mrljaIzbor.jeVidljiv { opacity: 1; }
.gumbIzbornik, .gumbZatvori { display: none; }

.znakMali {
  position: absolute; right: 1.25rem; top: 50%;
  display: flex; align-items: center; gap: .5rem;
  transform: translateY(-50%);
  font-family: var(--font-naslov); font-weight: 700; font-size: .98rem;
  color: var(--grafit); text-decoration: none;
  transition: opacity .3s ease, transform .3s ease;
}
.znakMali img { width: 30px; height: 30px; border-radius: 8px; }
.naslovnaStranica .znakMali { opacity: 0; transform: translate(14px, calc(-50% + 12px)); pointer-events: none; }
.naslovnaStranica.znakGore .znakMali { opacity: 1; transform: translateY(-50%); pointer-events: auto; }

/* buttons */
.gumbObris {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .75rem 1.6rem;
  font-family: var(--font-naslov); font-weight: 700; font-size: 1.02rem;
  color: var(--grafit); background: transparent;
  border: 2px solid var(--grafit); border-radius: var(--zaobljenje);
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .25s ease, border-width .15s ease, box-shadow .15s ease;
}
.gumbObris::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grafit);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .25s ease;
}
.gumbObris:hover { color: var(--svijetla); }
.gumbObris:hover::before { transform: scaleY(1); }
.gumbObris:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--grafit); border-width: 3px; }
.gumbObris:active::before { transform: scaleY(.5); }
.gumbObris:active { color: var(--grafit); }
.gumbObris[disabled] { opacity: .6; cursor: progress; }

.naTamnom .gumbObris { color: var(--svijetla); border-color: var(--menta); }
.naTamnom .gumbObris::before { background: var(--menta); }
.naTamnom .gumbObris:hover { color: var(--grafit); }
.naTamnom .gumbObris:focus-visible { box-shadow: inset 0 0 0 1px var(--menta); }

.gumbTekst {
  display: inline-block; padding: .3rem 0; font-weight: 600;
  color: var(--grafit); text-decoration: underline; text-decoration-color: var(--menta);
  text-decoration-thickness: 3px; text-underline-offset: 5px;
  transition: text-decoration-color .2s ease, text-underline-offset .2s ease;
}
.gumbTekst:hover { text-decoration-color: var(--grafit); text-underline-offset: 7px; color: var(--grafit); }
.gumbTekst:active { text-underline-offset: 3px; }

/* background waves */
.slojValova { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 0; overflow: hidden; pointer-events: none; }
.valPrvi, .valDrugi, .valTreci {
  position: absolute; left: 0; bottom: 0;
  width: calc(100% + var(--duljina, 1440px));
  background-repeat: repeat-x; background-position: left bottom;
  background-size: var(--duljina, 1440px) 100%;
  animation: valKlizi var(--trajanje, 16s) linear infinite;
  will-change: transform;
}
.valPrvi { height: 100%; background-image: var(--val-a); opacity: .26; --trajanje: 22s; }
.valDrugi { height: 74%; background-image: var(--val-b); opacity: .42; --trajanje: 16s; animation-direction: reverse; }
.valTreci { height: 46%; background-image: var(--val-a); opacity: .7; --trajanje: 13s; }
.slojValova.valSrednji { height: 42%; }
.slojValova.valSrednji .valPrvi, .slojValova.valSrednji .valDrugi, .slojValova.valSrednji .valTreci { --duljina: 2200px; }
.slojValova.valSrednji .valPrvi { opacity: .18; }
.slojValova.valSrednji .valDrugi { opacity: .26; }
.slojValova.valSrednji .valTreci { opacity: .38; }
.slojValova.valNizak { height: 24%; }
.slojValova.valNizak .valPrvi, .slojValova.valNizak .valDrugi, .slojValova.valNizak .valTreci { --duljina: 3000px; }
.slojValova.valNizak .valPrvi { opacity: .12; }
.slojValova.valNizak .valDrugi { opacity: .18; }
.slojValova.valNizak .valTreci { opacity: .24; }
@keyframes valKlizi {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--duljina, 1440px))); }
}

/* hero */
.uvodBlok {
  position: relative; overflow: hidden;
  padding: calc(var(--visina-glave) + clamp(2rem, 5vw, 3.75rem)) 1.25rem clamp(3rem, 6vw, 5rem);
  background: radial-gradient(120% 70% at 85% 0%, var(--menta-blijeda) 0%, rgba(201, 242, 228, 0) 60%), var(--svijetla);
}
.uvodUnutra { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }
.uvodNaslov { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; letter-spacing: -.01em; margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.uvodNaslov span { display: block; }

.parOkvir {
  --dio: 50%;
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--dio) - 11px) 22px calc(100% - var(--dio) - 11px);
  aspect-ratio: 2.75 / 1;
  transition: grid-template-columns .25s ease-out;
}
.parSlika { position: relative; margin: 0; min-width: 0; height: 100%; }
.parSlika img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--zaobljenje); background: var(--menta-blijeda); }
.parSlika:first-child img { clip-path: var(--rub-desno); }
.parSlika:last-child img { clip-path: var(--rub-lijevo); }
.parOznaka {
  position: absolute; bottom: .75rem; left: .85rem;
  padding: .3rem .8rem; border-radius: 999px;
  background: var(--grafit); color: var(--svijetla);
  font-family: var(--font-naslov); font-size: .82rem; font-weight: 700; line-height: 1.3;
}
.parSlika:last-child .parOznaka { left: 1.5rem; background: var(--menta); color: var(--grafit); }
.parRez { width: 22px; height: 100%; color: var(--menta-tamna); }
.parRez svg { width: 100%; height: 100%; display: block; }

.uvodDno { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-top: 1.4rem; }
.uvodRedak { margin: 0 0 1rem; max-width: 58ch; font-size: 1.08rem; }
.uvodAkcije { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.znakPotpis {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 0 .2rem; border-top: 2px dashed var(--grafit);
  color: var(--grafit); text-decoration: none;
  transition: opacity .35s ease, transform .35s ease;
}
.znakPotpis img { width: 52px; height: 52px; border-radius: 12px; }
.znakPotpis strong { display: block; font-family: var(--font-naslov); font-size: 1.2rem; line-height: 1.1; }
.znakPotpis small { display: block; font-size: .85rem; opacity: .8; }
.jeSkrolano .znakPotpis { opacity: 0; transform: translate(24px, -18px) scale(.85); }

/* sections */
.blokOdjeljak { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 1.25rem; }
.blokOdjeljak.razmakMali { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.blokOdjeljak.razmakVelik { padding-top: clamp(4.5rem, 10vw, 8rem); }
.unutraSiroko { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }
.unutraUsko { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

.naslovPlocica {
  display: inline; padding: 0 .4rem;
  background: linear-gradient(to bottom, transparent 54%, var(--menta) 54%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: 10px;
}
.naslovDesno { text-align: right; display: block; }
.naslovSredina { text-align: center; display: block; }
.uvodTekst { max-width: 66ch; font-size: 1.1rem; }

/* removed items */
.mrezaUklanjam { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 3rem; margin-top: 2rem; }
.popisUklonjeno { list-style: none; margin: 0; padding: 0; }
.popisUklonjeno li { position: relative; padding: .7rem 0 .7rem 2.1rem; border-bottom: 2px solid var(--crta); }
.popisUklonjeno li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 1.25rem; height: .7rem;
  border-radius: 999px 999px 4px 4px;
  background: var(--menta);
  box-shadow: inset 0 -3px 0 var(--menta-tamna);
}
.popisUklonjeno strong { font-family: var(--font-naslov); }

.potpisAutor {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.2rem; align-items: start;
  padding: 1.5rem; border-radius: var(--zaobljenje);
  background: var(--menta);
}
.monogramKrug {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grafit); color: var(--menta);
  font-family: var(--font-naslov); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em;
}
.potpisAutor p { margin: 0 0 .6rem; }
.autorIme { font-family: var(--font-naslov); font-weight: 700; font-size: 1.15rem; margin: 0; }
.autorUloga { font-size: .92rem; margin: 0 0 .7rem; }

/* wrapped text with wavy frames */
.tekstObtok { display: flow-root; }
.slikaVal { margin: 0; position: relative; }
.slikaVal img { width: 100%; border-radius: var(--zaobljenje); background: var(--menta-blijeda); }
.slikaVal.valDesno { float: right; width: 42%; margin: .4rem 0 1rem 1.5rem; shape-outside: var(--obtok-lijevo) border-box; shape-margin: 1rem; }
.slikaVal.valDesno img { clip-path: var(--obtok-lijevo); }
.slikaVal.valLijevo { float: left; width: 36%; margin: .4rem 1.5rem 1rem 0; shape-outside: var(--obtok-desno) border-box; shape-margin: 1rem; }
.slikaVal.valLijevo img { clip-path: var(--obtok-desno); }
.slikaVal figcaption { font-size: .86rem; margin-top: .5rem; padding-left: 14%; opacity: .85; }
.slikaVal.valLijevo figcaption { padding-left: 0; padding-right: 14%; }
.tekstObtok > p, .tekstObtok .stavkaOstaje { max-width: 68ch; }
.tekstObtok.obtokLijevo > p, .tekstObtok.obtokLijevo > ul { max-width: calc(36% + 1.5rem + 62ch); }

.stavkaOstaje { margin: 0 0 1.6rem; }
.stavkaOstaje h3 { display: inline-block; padding: .2rem .7rem; border-radius: 10px; background: var(--grafit); color: var(--svijetla); margin-bottom: .6rem; }
.stavkaOstaje p { margin: 0 0 .45rem; }
.savjetKamo { display: block; padding-left: 1rem; border-left: 4px solid var(--menta); font-size: .98rem; }

.velikaRijec {
  clear: both; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem;
  margin: 2.5rem 0 0; padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
  background: var(--menta); border-radius: var(--zaobljenje);
}
.velikaRijec strong { font-family: var(--font-naslov); font-size: clamp(3.2rem, 9vw, 5.6rem); line-height: .95; }
.velikaRijec span { max-width: 34ch; font-size: 1.05rem; }

.popisOtpad { list-style: none; padding: 0; margin: 1rem 0; }
.popisOtpad li { padding: .55rem 0; border-bottom: 1px dashed var(--crta); }
.popisOtpad b { font-family: var(--font-naslov); }

/* graphite band */
.trakaGrafit { position: relative; background: var(--grafit); color: var(--svijetla); }
.trakaGrafit a { color: var(--menta); }
.rubValovi { display: block; width: 100%; height: clamp(70px, 9vw, 130px); margin-bottom: -1px; color: var(--grafit); }
.rubValovi.rubOkrenut { transform: scaleY(-1); margin: -1px 0 0; }
.trakaGrafit .naslovPlocica { color: var(--grafit); background: var(--menta); padding: .05rem .55rem; line-height: 1.35; }
.ukljucenoTekst { max-width: 70ch; }
.mrezaUsluga { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.25rem; }
.uslugaKartica {
  position: relative; min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 2px solid rgba(127, 224, 192, .35); border-radius: var(--zaobljenje);
  background: rgba(127, 224, 192, .07);
  transition: border-color .25s ease, background-color .25s ease;
}
.uslugaKartica:hover { border-color: var(--menta); background: rgba(127, 224, 192, .13); }
.uslugaKartica h3 { margin-bottom: .4rem; }
.uslugaKartica h3::after { content: ""; display: block; width: 2.5rem; height: 4px; margin-top: .55rem; border-radius: 4px; background: var(--menta); transition: width .3s ease; }
.uslugaKartica:hover h3::after { width: 5.5rem; }
.uslugaKartica.sirokaPar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem 2rem; align-items: center; }
.uslugaKartica.tripolaSirina { grid-column: span 3; }
.uslugaKartica.dvijeSirine { grid-column: span 2; }
.uslugaKartica.punaVodoravna { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem 2rem; }
.uslugaCijena { display: inline-block; margin: .2rem 0 .8rem; padding: .2rem .75rem; border-radius: 999px; background: var(--menta); color: var(--grafit); font-family: var(--font-naslov); font-weight: 700; font-variant-numeric: tabular-nums; }
.uslugaPopis { margin: .4rem 0 0; padding-left: 1.15rem; }
.uslugaPopis li { margin-bottom: .3rem; }
.uslugaPopis li::marker { color: var(--menta); }
.uslugaKartica .parOkvir { aspect-ratio: 2.4 / 1; }
.uslugaKartica .parRez { color: var(--menta); }

.cjenikOkvir { margin-top: 2.5rem; overflow-x: auto; }
.cjenikTablica { width: 100%; border-collapse: collapse; min-width: 520px; font-variant-numeric: tabular-nums; }
.cjenikTablica caption { text-align: left; font-family: var(--font-naslov); font-weight: 700; font-size: 1.2rem; padding-bottom: .75rem; }
.cjenikTablica th, .cjenikTablica td { text-align: left; vertical-align: top; padding: .8rem .9rem; border-bottom: 1px solid rgba(244, 250, 248, .2); }
.cjenikTablica thead th { font-family: var(--font-naslov); font-size: .9rem; color: var(--menta); border-bottom: 3px solid var(--menta); }
.cjenikTablica td:last-child { white-space: nowrap; font-weight: 700; }
.cjenikTablica tr.redOdvojeno td { background: rgba(127, 224, 192, .12); }
.tablicaSvijetla { color: inherit; }
.tablicaSvijetla thead th { color: var(--grafit); background: var(--menta); border-bottom: 0; }
.tablicaSvijetla thead td { border-bottom: 0; }
.tablicaSvijetla tbody th { font-family: var(--font-naslov); font-weight: 700; border-bottom: 1px solid var(--crta); }
.tablicaSvijetla td, .tablicaSvijetla td:last-child { white-space: normal; font-weight: 400; border-bottom: 1px solid var(--crta); }

/* form */
.mrezaUpit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2.5rem; align-items: start; margin-top: 1.75rem; }
.obrazacPrijava { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.poljeRed { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.poljeRed.punaSirina { grid-column: 1 / -1; }
.poljeOznaka { font-family: var(--font-naslov); font-weight: 700; font-size: .95rem; }
.poljeOznaka i { font-style: normal; color: var(--menta-tamna); }
.obrazacPrijava input[type="text"],
.obrazacPrijava input[type="email"],
.obrazacPrijava input[type="tel"],
.obrazacPrijava input[type="date"],
.obrazacPrijava select,
.obrazacPrijava textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  font: inherit; color: var(--grafit);
  background: var(--bijela); border: 2px solid rgba(44, 49, 53, .35); border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.obrazacPrijava textarea { min-height: 140px; resize: vertical; }
.obrazacPrijava input:hover, .obrazacPrijava select:hover, .obrazacPrijava textarea:hover { border-color: var(--grafit); }
.obrazacPrijava input:focus-visible, .obrazacPrijava select:focus-visible, .obrazacPrijava textarea:focus-visible { outline: none; border-color: var(--menta-tamna); box-shadow: 0 0 0 3px var(--menta); }
.poljeRed.imaGresku input, .poljeRed.imaGresku select, .poljeRed.imaGresku textarea { border-color: #b3261e; }
.poljeGreska { min-height: 0; font-size: .88rem; color: #b3261e; }
.poljeKvacica { flex-direction: row; align-items: flex-start; gap: .7rem; }
.poljeKvacica input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--menta-tamna); flex: none; }
.poljeKvacica label { font-size: .96rem; }
.sazetakGreske { grid-column: 1 / -1; padding: .9rem 1rem; border-radius: 12px; background: #fde8e6; color: #7d1a14; font-weight: 600; }
.sazetakGreske:empty { display: none; }
.akcijaObrazac { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.napomenaMala { font-size: .9rem; margin: 0; }

.kontaktStupac { padding: 1.5rem; border-radius: var(--zaobljenje); background: var(--grafit); color: var(--svijetla); }
.kontaktStupac a { color: var(--menta); }
.kontaktStupac h3 { color: var(--menta); }
.kontaktStupac p { margin-bottom: .75rem; }
.kontaktStupac .podatakVelik { font-family: var(--font-naslov); font-size: 1.15rem; word-break: break-word; }

/* footer */
.podnozjeStranice { position: relative; background: var(--grafit-duboki); color: var(--svijetla); padding: 0 1.25rem 2rem; }
.podnozjeStranice a { color: var(--svijetla); text-decoration-color: var(--menta); }
.podnozjeStranice a:hover { color: var(--menta); }
.podnozjeVal { display: block; width: calc(100% + 2.5rem); height: 60px; margin: 0 -1.25rem 2.5rem; color: var(--menta); }
.podnozjeMreza { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 2rem; }
.podnozjeMreza h2 { font-size: 1.05rem; color: var(--menta); margin-bottom: .75rem; }
.podnozjeMreza ul { list-style: none; margin: 0; padding: 0; }
.podnozjeMreza li { margin-bottom: .45rem; }
.vlasnikRed { margin: 0 0 .5rem; }
.vlasnikFormula { font-size: 1.02rem; }
.podnozjeDno { max-width: 1000px; margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(244, 250, 248, .2); font-size: .9rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }

/* inner pages */
.stranicaUvod {
  position: relative; overflow: hidden;
  padding: calc(var(--visina-glave) + clamp(2rem, 5vw, 3.5rem)) 1.25rem clamp(3.5rem, 7vw, 5.5rem);
  background: radial-gradient(110% 80% at 10% 0%, var(--menta-blijeda) 0%, rgba(201, 242, 228, 0) 62%), var(--svijetla);
}
.stranicaUvod h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 22ch; }
.stranicaUvod .uvodTekst { margin-bottom: 0; }
.mrvicePut { position: relative; z-index: 1; font-size: .9rem; margin-bottom: 1.25rem; }
.mrvicePut ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.mrvicePut li + li::before { content: "/"; margin-right: .3rem; opacity: .6; }

.sadrzajStupac { max-width: 760px; margin: 0 auto; }
.sadrzajStupac h2 { margin-top: 2.5rem; }
.sadrzajStupac h2:first-child { margin-top: 0; }
.sadrzajStupac ul, .sadrzajStupac ol { padding-left: 1.3rem; }
.sadrzajStupac li { margin-bottom: .45rem; }

.pravniOdjeljak { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1.25rem; padding: 1.75rem 0; border-top: 3px solid var(--menta); }
.brojVeliki { font-family: var(--font-naslov); font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--menta-tamna); font-variant-numeric: tabular-nums; }
.pravniOdjeljak h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: .3rem; }
.umetakBoja { margin: 1.5rem 0; padding: 1.25rem 1.4rem; border-radius: var(--zaobljenje); background: var(--menta); }
.umetakBoja h3 { margin-bottom: .5rem; }
.umetakBoja p:last-child { margin-bottom: 0; }

.plocaTamna { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--zaobljenje); background: var(--grafit); color: var(--svijetla); }
.plocaTamna a { color: var(--menta); }
.plocaTamna h2, .plocaTamna h3 { color: var(--menta); }

.koraciPopis { counter-reset: korak; list-style: none; padding: 0 !important; }
.koraciPopis > li { counter-increment: korak; position: relative; padding: 1rem 0 1rem 4rem; border-bottom: 2px solid var(--crta); }
.koraciPopis > li::before { content: counter(korak); position: absolute; left: 0; top: .85rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--menta); font-family: var(--font-naslov); font-weight: 700; font-size: 1.2rem; }

.dvaStupca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }

.pitanjeBlok { border-bottom: 2px solid var(--crta); }
.pitanjeBlok summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.1rem 3rem 1.1rem 0;
  font-family: var(--font-naslov); font-weight: 700; font-size: 1.12rem;
}
.pitanjeBlok summary::-webkit-details-marker { display: none; }
.pitanjeBlok summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%;
  width: 1.6rem; height: 1.6rem; margin-top: -.8rem; border-radius: 50%;
  background: var(--menta) center / 60% no-repeat;
  background-image: linear-gradient(var(--grafit), var(--grafit)), linear-gradient(var(--grafit), var(--grafit));
  background-size: 10px 2px, 2px 10px; background-position: center, center;
  transition: transform .25s ease;
}
.pitanjeBlok[open] summary::after { transform: rotate(45deg); }
.pitanjeBlok summary:hover { color: var(--menta-tamna); }
.pitanjeBlok .odgovorTekst { padding: 0 0 1.25rem; }

.velikiBroj404 { font-family: var(--font-naslov); font-weight: 700; font-size: clamp(5rem, 18vw, 10rem); line-height: .9; margin: 0 0 1rem; color: var(--grafit); }

/* cookie banner */
.kolacicTraka {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
  max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .9rem 1.1rem; border-radius: var(--zaobljenje);
  background: var(--grafit); color: var(--svijetla);
  font-size: .94rem; max-height: 25vh; overflow: auto;
}
.kolacicTraka[hidden] { display: none; }
.kolacicTraka p { margin: 0; flex: 1 1 320px; }
.kolacicTraka a { color: var(--menta); }
.kolacicGumbi { display: flex; gap: .6rem; }
.kolacicGumb {
  min-height: 42px; padding: .5rem 1.1rem;
  font: 700 .92rem var(--font-naslov);
  color: var(--svijetla); background: transparent;
  border: 2px solid var(--menta); border-radius: 12px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.kolacicGumb:hover { background: var(--menta); color: var(--grafit); }
.kolacicGumb:active { transform: translateY(1px); }
.kolacicGumb:focus-visible { outline: 3px solid var(--menta); outline-offset: 2px; }

/* reveal */
.otkrijVal { transition: clip-path .4s cubic-bezier(.3, .6, .3, 1); }
.otkrijVal.otkrijCeka { clip-path: polygon(0 0, -12% 0%, -8.09% 7.14%, -7.13% 14.29%, -9.83% 21.43%, -14.17% 28.57%, -16.87% 35.71%, -15.91% 42.86%, -12% 50%, -8.09% 57.14%, -7.13% 64.29%, -9.83% 71.43%, -14.17% 78.57%, -16.87% 85.71%, -15.91% 92.86%, -12% 100%, 0 100%); }
.otkrijVal.otkrijTece { clip-path: polygon(0 0, 112% 0%, 115.91% 7.14%, 116.87% 14.29%, 114.17% 21.43%, 109.83% 28.57%, 107.13% 35.71%, 108.09% 42.86%, 112% 50%, 115.91% 57.14%, 116.87% 64.29%, 114.17% 71.43%, 109.83% 78.57%, 107.13% 85.71%, 108.09% 92.86%, 112% 100%, 0 100%); }
.otkrijRedak .redakDio { transition: opacity .3s ease, transform .3s ease; }
.otkrijRedak.otkrijCeka .redakDio { opacity: 0; transform: translateY(10px); }

/* responsive */
@media (max-width: 1280px) {
  .uvodUnutra, .unutraSiroko { max-width: 960px; }
}

@media (max-width: 1100px) {
  .stavkaIzbornika a { padding: .5rem .72rem; font-size: .93rem; }
  .znakMali span { display: none; }
  .mrezaUklanjam { gap: 2rem; }
}

@media (max-width: 960px) {
  .glavaTraka { justify-content: space-between; }
  .gumbIzbornik {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .4rem .95rem;
    font: 700 .95rem var(--font-naslov); color: var(--grafit);
    background: var(--menta); border: 0; border-radius: 999px; cursor: pointer;
  }
  .gumbIzbornik:active { transform: scale(.97); }
  .gumbIzbornik span { display: block; width: 18px; height: 2px; background: var(--grafit); box-shadow: 0 -6px 0 var(--grafit), 0 6px 0 var(--grafit); }
  .znakMali { position: static; transform: none; }
  .naslovnaStranica .znakMali { transform: translateY(8px); }
  .naslovnaStranica.znakGore .znakMali { transform: none; }
  .znakMali span { display: inline; }
  .izbornikVrh {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
    width: min(86vw, 340px); height: 100vh; height: 100dvh;
    padding: 1.25rem 1.25rem 2rem;
    background: var(--grafit); color: var(--svijetla);
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    overflow-y: auto;
  }
  .izbornikVrh.jeOtvoren { transform: translateX(0); visibility: visible; transition: transform .3s ease, visibility 0s linear 0s; }
  .gumbZatvori {
    display: inline-flex; margin: 0 0 1.75rem auto; min-height: 44px; padding: .4rem 1rem;
    font: 700 .95rem var(--font-naslov); color: var(--grafit);
    background: var(--menta); border: 0; border-radius: 999px; cursor: pointer;
  }
  .izbornikVrh { display: flex; flex-direction: column; }
  .izbornikPopis { flex-direction: column; gap: .35rem; }
  .stavkaIzbornika a { color: var(--svijetla); font-size: 1.2rem; padding: .8rem 1rem; border-radius: 14px; }
  .stavkaIzbornika a:hover, .stavkaIzbornika a[aria-current] { background: var(--menta); color: var(--grafit); }
  .mrljaIzbor { display: none; }
  .mrezaUsluga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uslugaKartica.tripolaSirina, .uslugaKartica.dvijeSirine { grid-column: span 1; }
  .podnozjeMreza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .podnozjeMreza > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .mrezaUklanjam, .mrezaUpit { grid-template-columns: minmax(0, 1fr); }
  .slikaVal.valDesno, .slikaVal.valLijevo { float: none; width: 100%; max-width: 440px; margin: 0 auto 1.5rem; shape-outside: none; }
  .uslugaKartica.sirokaPar, .uslugaKartica.punaVodoravna { grid-template-columns: minmax(0, 1fr); }
  .naslovDesno { text-align: left; }
  .dvaStupca { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .parOkvir { aspect-ratio: 2 / 1; }
  .cjenikTablica { min-width: 0; font-size: .92rem; }
  .cjenikTablica th, .cjenikTablica td { padding: .65rem .45rem; }
  .cjenikTablica td:last-child { white-space: normal; }
  .kolacicTraka { left: .6rem; right: .6rem; bottom: .6rem; padding: .7rem .8rem; gap: .5rem; font-size: .86rem; }
  .kolacicGumb { min-height: 40px; padding: .35rem .8rem; }
  .uslugaKartica .parOkvir { aspect-ratio: 2 / 1; }
  .mrezaUsluga { grid-template-columns: minmax(0, 1fr); }
  .obrazacPrijava { grid-template-columns: minmax(0, 1fr); }
  .uvodDno { align-items: flex-start; }
  .pravniOdjeljak { grid-template-columns: minmax(0, 1fr); }
  .brojVeliki { margin-bottom: .5rem; }
  .podnozjeMreza { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  body { font-size: 1rem; }
  .parOznaka { font-size: .72rem; padding: .2rem .55rem; bottom: .45rem; left: .45rem; }
  .parSlika:last-child .parOznaka { left: .9rem; }
  .gumbIzbornik { padding: .4rem .8rem; }
  .znakMali img { width: 26px; height: 26px; }
  .potpisAutor { grid-template-columns: minmax(0, 1fr); }
  .kolacicGumbi { width: 100%; }
  .kolacicGumb { flex: 1; }
  .koraciPopis > li { padding-left: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .otkrijVal.otkrijCeka, .otkrijVal.otkrijTece { clip-path: none; }
  .otkrijRedak.otkrijCeka .redakDio { opacity: 1; transform: none; }
  .gumbObris:hover::before { transform: none; }
  .gumbObris:hover { background: var(--grafit); }
  .naTamnom .gumbObris:hover { background: var(--menta); }
}