/* base */
:root {
  --noc: #141d33;
  --noc-dublje: #0e1526;
  --noc-svjetlije: #22304f;
  --koralj: #ff6b5a;
  --koralj-blijedi: #ffd6cf;
  --plava: #8fa3d9;
  --plava-blijeda: #dbe2f4;
  --svijetlo: #f2f4f8;
  --svijetlo-toplije: #e6e9f1;
  --tinta-meka: #45506b;
  --na-tamnom-meko: #bcc5da;
  --antik: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
  --humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --visina-zaglavlja: 68px;
  --zrno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)' opacity='.22'/%3E%3C/svg%3E");
}

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

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

body {
  margin: 0;
  font-family: var(--humanist);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--noc);
  background: var(--svijetlo);
  overflow-x: clip;
}

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

h1, h2 {
  font-family: var(--antik);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }

h3 {
  font-family: var(--humanist);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 .5rem;
}

p { margin: 0 0 1.1rem; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--noc);
  outline-offset: 3px;
  border-radius: 4px;
}

.zaglavlje :focus-visible,
.junak :focus-visible,
.usluge :focus-visible,
.uvod :focus-visible,
.podnozje :focus-visible,
.kolacici :focus-visible { outline-color: var(--koralj); }

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

.preskok {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 90;
  padding: .7rem 1.1rem;
  background: var(--koralj);
  color: var(--noc);
  font-weight: 700;
  border-radius: 999px;
  transition: top .2s ease;
}

.preskok:focus { top: .6rem; }

/* layout */
.okvir {
  width: min(1100px, 100% - 2.5rem);
  margin-inline: auto;
}

.okvir--rub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 1.5rem 3rem;
  align-items: start;
}

.okvir__glavno { min-width: 0; }

.okvir__rub {
  min-width: 0;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--tinta-meka);
  padding: .2rem 0 .2rem 1rem;
  border-left: 5px solid var(--koralj);
}

.okvir__rub--plavi { border-left-color: var(--plava); }

.okvir__rub p { margin-bottom: .8rem; }

.okvir__rub p:last-child { margin-bottom: 0; }

/* header */
.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--noc);
  color: var(--svijetlo);
  border-bottom: 3px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.zaglavlje--skupljeno {
  border-bottom-color: var(--koralj);
  box-shadow: 0 10px 0 -6px rgba(143, 163, 217, .45);
}

.zaglavlje__unutra {
  position: relative;
  width: min(1240px, 100% - 2.5rem);
  margin-inline: auto;
  height: var(--visina-zaglavlja);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.75rem;
}

.zaglavlje__prekidac,
.zaglavlje__sklopka { display: none; }

.zaglavlje__znak {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--svijetlo);
  border-radius: 999px;
  padding: 0 .4rem;
}

.zaglavlje__slika {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform-origin: 100% 50%;
  transition: transform .3s ease;
}

.zaglavlje--skupljeno .zaglavlje__slika { transform: scale(.5); }

.zaglavlje__ime {
  font-family: var(--antik);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.zaglavlje__znak:hover .zaglavlje__ime { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--koralj); }

.izbornik { min-width: 0; transition: transform .35s ease; }

.izbornik--lijevo { justify-self: end; }

.izbornik--desno { justify-self: start; }

.izbornik__popis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .4rem;
}

.izbornik__poveznica {
  display: block;
  padding: .45rem .95rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 0 0 2px transparent;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.izbornik__poveznica:hover { box-shadow: inset 0 0 0 2px var(--koralj); }

.izbornik__poveznica:active { background: var(--koralj); color: var(--noc); }

.izbornik__poveznica--aktivna { background: var(--noc-svjetlije); box-shadow: inset 0 0 0 2px var(--plava); }

@media (min-width: 901px) {
  .zaglavlje--skupljeno .izbornik--lijevo { transform: translateX(calc(var(--odmak, 0px) * -1)); }
  .zaglavlje--skupljeno .izbornik--desno { transform: translateX(var(--odmak, 0px)); }
}

/* buttons and links */
.gumb {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  padding: .85rem 1.5rem;
  border: 3px solid var(--noc);
  border-radius: 999px;
  background: transparent;
  color: var(--noc);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.gumb::after {
  content: "";
  position: absolute;
  left: var(--val-x, 50%);
  top: var(--val-y, 50%);
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: rgba(20, 29, 51, .22);
  box-shadow: 0 0 0 5px rgba(242, 244, 248, .5);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

.gumb--val::after { animation: gumb-val .4s ease-out; }

@keyframes gumb-val {
  0% { opacity: .9; transform: scale(.3); }
  100% { opacity: 0; transform: scale(12); }
}

.gumb:hover { background: var(--noc); color: var(--svijetlo); }

.gumb:active { transform: scale(.97); }

.gumb--glavni {
  background: var(--koralj);
  border-color: var(--koralj);
  color: var(--noc);
  font-size: 1.15rem;
  padding: 1.05rem 2rem;
  box-shadow: 0 8px 0 var(--noc);
}

.gumb--glavni:hover { background: var(--koralj-blijedi); border-color: var(--koralj-blijedi); color: var(--noc); }

.gumb--glavni:active { transform: translateY(4px) scale(.99); }

.gumb--obrub-svijetli { border-color: var(--svijetlo); color: var(--svijetlo); }

.gumb--obrub-svijetli:hover { background: var(--svijetlo); color: var(--noc); }

.gumb[disabled] { opacity: .65; cursor: progress; }

.veza {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--koralj);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness .15s ease, background-color .2s ease;
}

.veza:hover { text-decoration-thickness: 5px; }

.veza:active { background: var(--koralj-blijedi); }

.usluge .veza:active,
.podnozje .veza:active,
.junak .veza:active { background: var(--noc-svjetlije); }

.oznaka {
  display: inline-block;
  padding: .2rem .8rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.4;
  background: var(--koralj);
  color: var(--noc);
}

.oznaka--plava { background: var(--plava); }

.oznaka--dvojna { background: linear-gradient(90deg, var(--koralj) 0 50%, var(--plava) 50% 100%); }

.oznaka--tamna { background: var(--noc); color: var(--svijetlo); }

/* section reveal */
.stranica--skripta .otkrivanje {
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
}

.stranica--skripta .otkrivanje--slijeva { transform: translateX(-56px); }

.stranica--skripta .otkrivanje--zdesna { transform: translateX(56px); }

.stranica--skripta .otkrivanje--odozdo { transform: translateY(44px); }

.stranica--skripta .otkrivanje--rast { transform: scale(.93); }

.stranica--skripta .otkrivanje--kasnije { transition-delay: .28s; }

.stranica--skripta .otkrivanje--vidljivo { opacity: 1; transform: none; }

/* hero */
.junak {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noc);
  color: var(--svijetlo);
  padding: clamp(2rem, 5vw, 3.75rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}

.junak::before,
.junak::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
}

.junak::before {
  background: radial-gradient(circle at 50% 44%,
    transparent 0 130px,
    rgba(255, 107, 90, .2) 130px 168px,
    transparent 168px 250px,
    rgba(143, 163, 217, .2) 250px 262px,
    transparent 262px 360px,
    rgba(255, 107, 90, .13) 360px 426px,
    transparent 426px 540px,
    rgba(143, 163, 217, .13) 540px 560px,
    transparent 560px 700px,
    rgba(255, 107, 90, .08) 700px 800px,
    transparent 800px);
}

.junak::after {
  background:
    var(--zrno),
    radial-gradient(circle at 50% 44%,
      transparent 0 122px,
      rgba(255, 107, 90, .12) 122px 176px,
      transparent 176px 352px,
      rgba(255, 107, 90, .08) 352px 434px,
      transparent 434px 690px,
      rgba(143, 163, 217, .07) 690px 810px,
      transparent 810px);
  animation: junak-puls 18s ease-in-out infinite alternate;
}

@keyframes junak-puls {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.junak__naslov {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  max-width: 24ch;
}

.junak__red { display: block; }

.junak__tvrdnja {
  max-width: 44ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto clamp(2rem, 4vw, 3rem);
  font-size: 1.2rem;
  line-height: 1.5;
}

.junak__kadar { margin: 0; }

/* participant rings */
.prsteni {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.prsteni__krug {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
}

.prsteni__krug--vanjski { inset: 0; border-width: 3px; border-color: var(--plava); }

.prsteni__krug--srednji { inset: 13%; border-width: 9px; border-color: rgba(143, 163, 217, .55); }

.prsteni__krug--jezgra { inset: 27%; border-width: 16px; border-color: var(--koralj); background: var(--noc-dublje); }

.prsteni__cvor {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: .3rem .8rem;
  border-radius: 999px;
  font-family: var(--antik);
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.25;
  white-space: nowrap;
  background: var(--plava);
  color: var(--noc);
}

.prsteni__cvor--ja {
  left: 50%;
  top: 50%;
  white-space: normal;
  width: 8.4em;
  padding: 0;
  background: none;
  color: var(--svijetlo);
  font-size: 1rem;
}

.prsteni__cvor--lektor { left: 80.3%; top: 28.8%; }

.prsteni__cvor--prevoditelj { left: 19.7%; top: 71.2%; }

.prsteni__cvor--fotograf { left: 21.3%; top: 9%; background: var(--svijetlo); }

.prsteni__cvor--citatelj { left: 78.7%; top: 91%; background: var(--svijetlo); }

.prsteni--ulaz .prsteni__krug { animation: prsteni-sirenje .6s cubic-bezier(.2, .7, .2, 1) both; }

.prsteni--ulaz .prsteni__cvor { animation: prsteni-natpis .25s ease .4s both; }

@keyframes prsteni-sirenje {
  from { opacity: 0; transform: scale(.25); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes prsteni-natpis {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* image frames */
.kadar { margin: 0; }

.kadar__slika {
  width: 100%;
  object-fit: cover;
  border-radius: 999px;
  border: 7px solid var(--koralj);
  background: var(--noc-svjetlije);
}

.kadar__slika--siroka { aspect-ratio: 16 / 9; box-shadow: 0 0 0 7px var(--noc), 0 0 0 10px var(--plava); }

.kadar__slika--kvadrat { aspect-ratio: 1; }

.kadar__slika--uspravna { aspect-ratio: 3 / 4; }

.kadar__slika--klasicna { aspect-ratio: 4 / 3; }

.kadar__slika--suradnik { border-color: var(--plava); }

.kadar__slika--zajedno { border-color: var(--koralj); outline: 5px solid var(--plava); outline-offset: 4px; }

/* dividers */
.razdjelnik {
  display: flex;
  height: 14px;
}

.razdjelnik__dio { flex: 1 1 0; background: var(--noc); }

.razdjelnik__dio--koralj { flex-grow: 3; background: var(--koralj); }

.razdjelnik__dio--plavi { flex-grow: 1.4; background: var(--plava); }

/* section 2 */
.podjela {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3rem 0 3rem;
}

.podjela::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--zrno),
    radial-gradient(circle at -6% 18%,
      transparent 0 220px,
      rgba(255, 107, 90, .16) 220px 300px,
      transparent 300px 420px,
      rgba(143, 163, 217, .28) 420px 446px,
      transparent 446px 610px,
      rgba(255, 107, 90, .09) 610px 740px,
      transparent 740px);
}

.podjela__naslov { text-align: center; max-width: 20ch; margin-inline: auto; }

.podjela__uvod { max-width: 68ch; margin: 0 auto 2.5rem; }

.podjela__pruge {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0;
  margin-bottom: 3.5rem;
  border-radius: 28px;
  overflow: hidden;
  border: 4px solid var(--noc);
}

.podjela__pruga { min-width: 0; padding: 1.75rem 1.75rem 1.25rem; }

.podjela__pruga--ja { background: var(--koralj-blijedi); border-right: 4px solid var(--noc); }

.podjela__pruga--suradnik { background: var(--plava-blijeda); }

.podjela__popis { margin: .9rem 0 0; }

.podjela__popis li { margin-bottom: .45rem; }

.podjela__poziv { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

/* order type switcher */
.sastav { position: relative; }

.sastav__pitanje { font-family: var(--antik); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0 0 1.1rem; }

.sastav__izbor {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sastav__jezicci { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }

.sastav__jezicak {
  padding: .6rem 1.15rem;
  border-radius: 999px;
  border: 3px solid var(--noc);
  font-weight: 700;
  cursor: pointer;
  background: var(--svijetlo);
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.sastav__jezicak:hover { background: var(--plava-blijeda); }

.sastav__jezicak:active { transform: scale(.97); }

.sastav__izbor--kratko:checked ~ .sastav__jezicci .sastav__jezicak--kratko,
.sastav__izbor--dugo:checked ~ .sastav__jezicci .sastav__jezicak--dugo,
.sastav__izbor--prijevod:checked ~ .sastav__jezicci .sastav__jezicak--prijevod {
  background: var(--noc);
  color: var(--svijetlo);
}

.sastav__izbor--kratko:focus-visible ~ .sastav__jezicci .sastav__jezicak--kratko,
.sastav__izbor--dugo:focus-visible ~ .sastav__jezicci .sastav__jezicak--dugo,
.sastav__izbor--prijevod:focus-visible ~ .sastav__jezicci .sastav__jezicak--prijevod {
  outline: 3px solid var(--koralj);
  outline-offset: 3px;
}

.sastav__ploca { display: none; }

.sastav__izbor--kratko:checked ~ .sastav__ploca--kratko,
.sastav__izbor--dugo:checked ~ .sastav__ploca--dugo,
.sastav__izbor--prijevod:checked ~ .sastav__ploca--prijevod { display: block; }

.sastav__napomena { max-width: 66ch; margin: 1.25rem 0 0; color: var(--tinta-meka); }

/* participant cards */
.sudionik__popis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}

.sudionik__popis--jedan { grid-template-columns: minmax(0, 34rem); }

.sudionik__kartica {
  min-width: 0;
  padding: 1.4rem 1.4rem 1.1rem;
  border-radius: 24px;
  background: var(--svijetlo);
  border: 3px solid var(--noc);
  border-top-width: 14px;
  box-shadow: 8px 8px 0 var(--plava);
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.sudionik__kartica--ja { border-top-color: var(--koralj); box-shadow: 8px 8px 0 var(--koralj); }

.sudionik__kartica--vanjski { border-top-color: var(--plava); }

.sudionik__popis:hover .sudionik__kartica { opacity: .5; }

.sudionik__popis:hover .sudionik__kartica:hover { opacity: 1; transform: translateY(-8px); }

.sudionik__uloga { font-family: var(--antik); font-size: 1.5rem; line-height: 1.2; margin: 0 0 .5rem; }

.sudionik__zona { margin: 0 0 .7rem; }

.sudionik__granica { margin: 0; font-size: .95rem; color: var(--tinta-meka); }

/* section 3 */
.odabir {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--svijetlo-toplije);
  padding: 3.25rem 0 6.5rem;
}

.odabir::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 108% 70%,
    transparent 0 260px,
    rgba(143, 163, 217, .34) 260px 330px,
    transparent 330px 470px,
    rgba(255, 107, 90, .2) 470px 490px,
    transparent 490px 660px,
    rgba(143, 163, 217, .18) 660px 780px,
    transparent 780px);
}

.odabir__gore {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2.25rem;
}

.odabir__naslov { margin-bottom: .8rem; }

.odabir__tekst { max-width: 62ch; }

.odabir__mjerila { list-style: none; margin: 0 0 2.5rem; padding: 0; max-width: 70ch; }

.odabir__mjerilo {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: .4rem 1.25rem;
  padding: 1rem 0;
  border-bottom: 4px solid var(--plava);
}

.odabir__mjerilo:last-child { border-bottom-color: var(--koralj); }

.odabir__pojam { font-weight: 700; min-width: 0; }

.odabir__opis { margin: 0; min-width: 0; }

.autor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  max-width: 44rem;
  padding: 1.5rem;
  border-radius: 28px;
  background: var(--noc);
  color: var(--svijetlo);
}

.autor__monogram {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--antik);
  font-weight: 700;
  font-size: 1.9rem;
  background: var(--koralj);
  color: var(--noc);
  box-shadow: 0 0 0 5px var(--noc), 0 0 0 8px var(--plava);
}

.autor__ime { font-weight: 700; margin: 0; overflow-wrap: anywhere; }

.autor__uloga { margin: 0 0 .7rem; color: var(--na-tamnom-meko); }

.autor__rijec { margin: 0; }

/* section 4 */
.usluge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noc);
  color: var(--svijetlo);
  padding: 4.5rem 0 4rem;
}

.usluge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--zrno),
    radial-gradient(circle at 50% -30%,
      transparent 0 380px,
      rgba(255, 107, 90, .14) 380px 470px,
      transparent 470px 640px,
      rgba(143, 163, 217, .16) 640px 664px,
      transparent 664px 880px,
      rgba(255, 107, 90, .08) 880px 1010px,
      transparent 1010px);
}

.usluge__glava {
  width: min(1100px, 100% - 2.5rem);
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1rem 3rem;
  align-items: end;
}

.usluge__naslov { margin: 0; }

.usluge__uvod { margin: 0; color: var(--na-tamnom-meko); }

.usluge__zone {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, 1.1fr);
  border-top: 6px solid var(--svijetlo);
  border-bottom: 6px solid var(--svijetlo);
}

.usluge__zona { min-width: 0; padding: 0 clamp(1.1rem, 2.4vw, 2.25rem) 2rem; }

.usluge__zona--suradnik { border-left: 6px solid var(--plava); border-right: 6px solid var(--plava); background: rgba(143, 163, 217, .08); }

.usluge__zona--ja { background: rgba(255, 107, 90, .07); }

.usluge__uloga {
  display: block;
  margin: 0 calc(clamp(1.1rem, 2.4vw, 2.25rem) * -1) 1.75rem;
  padding: 1rem clamp(1.1rem, 2.4vw, 2.25rem);
  font-family: var(--antik);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  background: var(--koralj);
  color: var(--noc);
}

.usluge__uloga--plava { background: var(--plava); }

.usluge__uloga--dvojna { background: linear-gradient(100deg, var(--koralj) 0 52%, var(--plava) 52% 100%); }

.usluge__stavka { margin-bottom: 2rem; }

.usluge__stavka:last-child { margin-bottom: 0; }

.usluge__stavka--sa-slikom {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.usluge__ime { font-size: 1.25rem; }

.usluge__stavka > .kadar { max-width: 150px; margin-bottom: 1rem; }

.usluge__opis { margin: 0 0 .6rem; color: var(--svijetlo); }

/* price table */
.cjenik {
  width: min(1100px, 100% - 2.5rem);
  margin: 3.5rem auto 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 28px;
  background: var(--svijetlo);
  color: var(--noc);
  box-shadow: 10px 10px 0 var(--koralj);
}

.cjenik__izjava {
  font-family: var(--antik);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 .6rem;
  max-width: 24ch;
}

.cjenik__pojasnjenje { max-width: 66ch; }

.cjenik__omotac { overflow-x: auto; margin: 1.25rem 0; }

.cjenik__tablica { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.cjenik__tablica th,
.cjenik__tablica td { text-align: left; padding: .7rem .8rem; border-bottom: 3px solid var(--plava-blijeda); vertical-align: top; }

.cjenik__tablica thead th { background: var(--noc); color: var(--svijetlo); border-bottom: 0; }

.cjenik__tablica thead th:first-child { border-radius: 999px 0 0 999px; padding-left: 1.3rem; }

.cjenik__tablica thead th:last-child { border-radius: 0 999px 999px 0; }

.cjenik__tablica tbody tr { transition: background-color .2s ease; }

.cjenik__tablica tbody tr:hover { background: var(--koralj-blijedi); }

.cjenik__cijena { font-weight: 700; white-space: nowrap; }

/* section 5 */
.upit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 6rem 0 4.5rem;
}

.upit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 12% 112%,
    transparent 0 240px,
    rgba(255, 107, 90, .2) 240px 316px,
    transparent 316px 450px,
    rgba(143, 163, 217, .3) 450px 472px,
    transparent 472px 640px,
    rgba(143, 163, 217, .16) 640px 760px,
    transparent 760px);
}

.upit__mreza {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem 3.5rem;
  align-items: start;
}

.upit__strana { min-width: 0; }

.upit__naslov { max-width: 14ch; }

.upit__kontakt { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.upit__kontakt li { margin-bottom: .6rem; overflow-wrap: anywhere; }

.obrazac {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 28px;
  background: var(--svijetlo);
  border: 4px solid var(--noc);
  box-shadow: -10px 10px 0 var(--plava);
}

.obrazac__redak { margin-bottom: 1.15rem; }

.obrazac__oznaka { display: block; font-weight: 700; margin-bottom: .35rem; }

.obrazac__polje {
  width: 100%;
  font: inherit;
  color: var(--noc);
  padding: .75rem 1rem;
  border: 3px solid var(--noc);
  border-radius: 18px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.obrazac__polje:hover { box-shadow: 0 0 0 3px var(--plava-blijeda); }

.obrazac__polje:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--plava); }

.obrazac__polje--poruka { min-height: 9rem; resize: vertical; }

.obrazac__polje--neispravno { border-color: #b3261e; box-shadow: 0 0 0 3px var(--koralj-blijedi); }

.obrazac__greska { margin: .35rem 0 0; font-size: .95rem; font-weight: 700; color: #9c1f18; }

.obrazac__privola { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }

.obrazac__kvacica { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: var(--noc); }

.obrazac__zamka { display: none; }

.obrazac__stanje { margin: .9rem 0 0; font-weight: 700; min-height: 1.6rem; }

/* section 6 */
.odgovornost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3rem 0 7rem;
}

.odgovornost::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(135vw, 1050px);
  aspect-ratio: 1;
  right: -16%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--koralj) 0 56%,
    rgba(255, 107, 90, .5) 56% 62%,
    transparent 62% 70%,
    rgba(255, 107, 90, .3) 70% 73%,
    transparent 73%);
}

.odgovornost__velika {
  font-family: var(--antik);
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 8.5rem);
  line-height: .95;
  margin: 0 0 .5rem;
  letter-spacing: -0.03em;
}

.odgovornost__naslov { font-size: clamp(1.9rem, 3vw, 2.5rem); max-width: 22ch; }

.odgovornost__uvod { max-width: 60ch; }

.odgovornost__slucajevi {
  list-style: none;
  margin: 2rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.1rem;
}

.odgovornost__slucaj {
  min-width: 0;
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: 24px;
  background: var(--svijetlo);
  border: 3px solid var(--noc);
  transition: transform .25s ease, box-shadow .25s ease;
}

.odgovornost__slucaj:hover { transform: translateY(-5px); box-shadow: 0 9px 0 var(--noc); }

.odgovornost__slucaj p { margin-bottom: .7rem; }

.odgovornost__slucaj p:last-child { margin-bottom: 0; }

.odgovornost .okvir__rub { background: var(--svijetlo); color: var(--noc); padding: 1rem 1rem 1rem 1.1rem; border-radius: 0 20px 20px 0; }

/* article list */
.clanci {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 4.5rem 0 2.5rem;
}

.clanci::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--zrno),
    radial-gradient(circle at 104% 8%,
      transparent 0 210px,
      rgba(143, 163, 217, .3) 210px 280px,
      transparent 280px 400px,
      rgba(255, 107, 90, .18) 400px 424px,
      transparent 424px 590px,
      rgba(143, 163, 217, .14) 590px 700px,
      transparent 700px);
}

.clanci__naslov { margin-bottom: 1.75rem; }

.clanci__glavni {
  display: block;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  margin-bottom: 2.5rem;
  border-radius: 32px;
  background: var(--noc);
  color: var(--svijetlo);
  box-shadow: 12px 12px 0 var(--koralj);
}

.clanci__glavni :focus-visible { outline-color: var(--koralj); }

.clanci__udarni {
  font-family: var(--antik);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  margin: .9rem 0 .8rem;
  max-width: 18ch;
}

.clanci__uvodnik { max-width: 58ch; margin: 0; color: var(--svijetlo); }

.clanci__popis { list-style: none; margin: 0 0 2rem; padding: 0; }

.clanci__redak {
  padding: 1.25rem 0 1.1rem;
  border-bottom: 4px solid var(--plava);
  transition: transform .25s ease;
}

.clanci__redak:nth-child(even) { border-bottom-color: var(--koralj); }

.clanci__redak:hover { transform: translateX(10px); }

.clanci__ime {
  font-family: var(--humanist);
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin: .55rem 0 .3rem;
}

.clanci__sazetak { margin: 0; max-width: 62ch; color: var(--tinta-meka); }

.clanak__potpis { font-size: .98rem; color: var(--tinta-meka); padding-left: 1rem; border-left: 5px solid var(--koralj); overflow-wrap: anywhere; }

.clanak__dalje { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 4px solid var(--plava); }

.usluge__vise { width: min(1100px, 100% - 2.5rem); margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }

.usluge__izjava { font-family: var(--antik); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0; max-width: 22ch; }

.usluge__pojasnjenje { margin: 0; max-width: 46ch; color: var(--na-tamnom-meko); flex: 1 1 280px; }

/* floating strip */
.traka {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  max-width: calc(100% - 1.5rem);
  padding: .5rem 1.15rem;
  border-radius: 999px;
  background: var(--noc);
  color: var(--svijetlo);
  border: 3px solid var(--koralj);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.3;
  text-decoration: none;
  transform: translate(-50%, 180%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s, background-color .2s ease, color .2s ease;
}

.traka--vidljiva { transform: translate(-50%, 0); visibility: visible; transition: transform .3s ease, visibility 0s, background-color .2s ease, color .2s ease; }

.traka:hover { background: var(--koralj); color: var(--noc); }

.traka:active { background: var(--koralj-blijedi); color: var(--noc); }

.traka__tocka { width: .7rem; height: .7rem; border-radius: 50%; background: var(--koralj); box-shadow: 0 0 0 3px var(--plava); flex: none; }

.traka:hover .traka__tocka { background: var(--noc); }

/* cookie notice */
.kolacici {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  width: min(380px, calc(100% - 24px));
  max-height: 25vh;
  overflow: auto;
  padding: 1rem 1.1rem;
  border-radius: 22px;
  background: var(--noc);
  color: var(--svijetlo);
  border: 3px solid var(--plava);
  font-size: .95rem;
  line-height: 1.45;
}

.kolacici[hidden] { display: none; }

.kolacici__tekst { margin: 0 0 .8rem; }

.kolacici__gumbi { display: flex; gap: .6rem; }

.kolacici__gumb { flex: 1 1 0; padding: .55rem .8rem; font-size: .95rem; }

/* footer */
.podnozje {
  background: var(--noc-dublje);
  color: var(--svijetlo);
  padding: 3.5rem 0 5.5rem;
  border-top: 14px solid var(--koralj);
}

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

.podnozje__stupac { min-width: 0; }

.podnozje__ime { font-family: var(--antik); font-weight: 700; font-size: 1.9rem; margin: 0 0 .6rem; }

.podnozje__vlasnik { margin: 0 0 .9rem; overflow-wrap: anywhere; }

.podnozje__podaci { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }

.podnozje__podaci li { margin-bottom: .35rem; }

.podnozje__naslov { font-family: var(--humanist); letter-spacing: 0; font-size: 1.05rem; margin: 0 0 .7rem; color: var(--plava); }

.podnozje__popis { list-style: none; margin: 0; padding: 0; }

.podnozje__popis li { margin-bottom: .4rem; }

.podnozje__poveznica { text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease, color .2s ease; }

.podnozje__poveznica:hover { border-bottom-color: var(--koralj); }

.podnozje__poveznica:active { color: var(--koralj); }

.podnozje__prava { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 3px solid var(--noc-svjetlije); font-size: .95rem; color: var(--na-tamnom-meko); overflow-wrap: anywhere; }

/* inner pages */
.uvod {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noc);
  color: var(--svijetlo);
  padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}

.uvod::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--zrno),
    radial-gradient(circle at 88% 130%,
      var(--koralj) 0 150px,
      transparent 150px 230px,
      rgba(255, 107, 90, .3) 230px 290px,
      transparent 290px 400px,
      rgba(143, 163, 217, .3) 400px 418px,
      transparent 418px 560px,
      rgba(143, 163, 217, .14) 560px 660px,
      transparent 660px);
}

.uvod__naslov { font-size: clamp(2.3rem, 4.6vw, 3.8rem); max-width: 18ch; margin-bottom: .8rem; }

.uvod__sazetak { max-width: 58ch; font-size: 1.15rem; margin: 0; }

.mrvice { margin: 0 0 1.5rem; font-size: .95rem; }

.mrvice__popis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }

.mrvice__stavka + .mrvice__stavka::before { content: "/"; margin-right: .5rem; color: var(--plava); }

.clanak {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3.5rem 0 5rem;
}

.clanak::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at -8% 40%,
    transparent 0 300px,
    rgba(143, 163, 217, .24) 300px 370px,
    transparent 370px 520px,
    rgba(255, 107, 90, .14) 520px 540px,
    transparent 540px);
}

.clanak__tijelo { max-width: 68ch; }

.clanak__tijelo h2 { font-size: clamp(1.8rem, 2.8vw, 2.3rem); margin-top: 2.5rem; }

.clanak__plocica {
  display: inline-block;
  font-family: var(--humanist);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 2.25rem 0 .8rem;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  background: var(--koralj);
  color: var(--noc);
}

.clanak__plocica--plava { background: var(--plava); }

.clanak__plocica--tamna { background: var(--noc); color: var(--svijetlo); }

.clanak__izdvojeno {
  margin: 2.5rem 0;
  padding: 1.5rem 1.6rem 1.2rem;
  border-radius: 28px;
  background: var(--noc);
  color: var(--svijetlo);
  box-shadow: 10px 10px 0 var(--plava);
}

.clanak__izdvojeno :focus-visible { outline-color: var(--koralj); }

.clanak__kadar { margin: 2rem 0; max-width: 32rem; }

.clanak__tablica { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 1rem 0 1.5rem; }

.clanak__tablica th,
.clanak__tablica td { text-align: left; padding: .65rem .75rem; border-bottom: 3px solid var(--plava-blijeda); vertical-align: top; }

.clanak__tablica thead th { background: var(--noc); color: var(--svijetlo); }

.clanak__omotac { overflow-x: auto; }

.pitanja__stavka { border-bottom: 4px solid var(--plava); }

.pitanja__stavka:last-child { border-bottom-color: var(--koralj); }

.pitanja__pitanje { cursor: pointer; padding: 1rem 0; font-weight: 700; font-size: 1.15rem; transition: color .2s ease; }

.pitanja__pitanje:hover { color: var(--tinta-meka); }

.pitanja__odgovor { padding: 0 0 1rem; max-width: 66ch; }

.sadrzaj__popis { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }

.sadrzaj__stavka { min-width: 0; }

.sadrzaj__poveznica {
  display: block;
  padding: .9rem 1.1rem;
  border-radius: 20px;
  border: 3px solid var(--noc);
  background: var(--svijetlo);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.sadrzaj__poveznica:hover { background: var(--koralj-blijedi); transform: translateY(-3px); }

.sadrzaj__poveznica:active { background: var(--koralj); }

/* responsive */
@media (max-width: 1280px) {
  .okvir--rub { grid-template-columns: minmax(0, 1fr) 210px; gap: 1.5rem 2.25rem; }
  .usluge__zone { grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr) minmax(0, 1.05fr); }
}

@media (max-width: 1100px) {
  .okvir--rub { grid-template-columns: minmax(0, 1fr) 190px; gap: 1.5rem 1.75rem; }
  .usluge__zone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .usluge__zona--zajedno { grid-column: 1 / -1; border-top: 6px solid var(--svijetlo); }
  .usluge__zona--suradnik { border-right: 0; }
  .usluge__stavka--sa-slikom { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
  .podnozje__mreza { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .podnozje__stupac--siri { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --visina-zaglavlja: 60px; }
  .zaglavlje__unutra { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
  .zaglavlje__znak { justify-self: start; padding-left: 0; grid-column: 1; grid-row: 1; }
  .zaglavlje__slika { width: 42px; height: 42px; transform-origin: 0 50%; }
  .zaglavlje--skupljeno .zaglavlje__slika { transform: scale(.8); }
  .zaglavlje__prekidac {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
  }
  .zaglavlje__sklopka {
    display: inline-flex;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 3px solid var(--koralj);
    font-weight: 700;
    transition: background-color .2s ease, color .2s ease;
  }
  .zaglavlje__prekidac:checked ~ .zaglavlje__sklopka { background: var(--koralj); color: var(--noc); }
  .zaglavlje__prekidac:focus-visible ~ .zaglavlje__sklopka { outline: 3px solid var(--svijetlo); outline-offset: 3px; }
  .izbornik {
    position: fixed;
    right: 0;
    width: min(80vw, 300px);
    background: var(--noc-dublje);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .izbornik--lijevo { top: var(--visina-zaglavlja); padding-top: 1rem; justify-self: auto; }
  .izbornik--desno { top: calc(var(--visina-zaglavlja) + 1rem + 7.2rem + 6px); bottom: 0; justify-self: auto; }
  .zaglavlje__prekidac:checked ~ .izbornik { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
  .izbornik__popis { flex-direction: column; gap: 0; }
  .izbornik__stavka { border-bottom: 3px solid var(--koralj); }
  .izbornik--desno .izbornik__stavka { border-bottom-color: var(--plava); }
  .izbornik__poveznica { display: flex; align-items: center; height: 3.6rem; padding: 0 1.25rem; border-radius: 0; font-size: 1.1rem; }
  .okvir--rub { grid-template-columns: minmax(0, 1fr); }
  .okvir__rub { max-width: 60ch; }
  .usluge__glava { grid-template-columns: minmax(0, 1fr); }
  .upit__mreza { grid-template-columns: minmax(0, 1fr); }
  .upit__naslov { max-width: none; }
  .odgovornost::before { right: -45%; }
}

@media (max-width: 768px) {
  .podjela { padding: 4rem 0 2.5rem; }
  .podjela__pruge { grid-template-columns: minmax(0, 1fr); }
  .podjela__pruga--ja { border-right: 0; border-bottom: 4px solid var(--noc); }
  .odabir { padding-bottom: 4.5rem; }
  .odabir__gore { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 1.5rem; }
  .odgovornost__slucajevi { grid-template-columns: minmax(0, 1fr); }
  .upit { padding: 4rem 0 3.5rem; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .usluge__zone { grid-template-columns: minmax(0, 1fr); }
  .usluge__zona--suradnik { border-left: 0; border-top: 6px solid var(--plava); border-bottom: 6px solid var(--plava); }
  .usluge__zona--zajedno { border-top: 0; }
  .odabir__gore { grid-template-columns: minmax(0, 1fr); }
  .odabir__kadar { max-width: 200px; }
  .odabir__mjerilo { grid-template-columns: minmax(0, 1fr); }
  .podnozje__mreza { grid-template-columns: minmax(0, 1fr); }
  .kadar__slika { border-width: 5px; }
  .kadar__slika--siroka { box-shadow: 0 0 0 5px var(--noc), 0 0 0 7px var(--plava); }
  .odgovornost { padding-bottom: 5rem; }
  .odgovornost::before { right: -70%; opacity: .85; }
}

@media (max-width: 480px) {
  .clanci__glavni { box-shadow: 7px 7px 0 var(--koralj); border-radius: 26px; }
  .usluge__vise { width: calc(100% - 2rem); }
  .okvir,
  .usluge__glava,
  .cjenik { width: calc(100% - 2rem); }
  .zaglavlje__unutra { width: calc(100% - 2rem); }
  .zaglavlje__ime { font-size: 1.5rem; }
  .prsteni__cvor { font-size: .78rem; padding: .25rem .6rem; }
  .prsteni__cvor--ja { font-size: .88rem; padding: 0; }
  .prsteni__krug--jezgra { border-width: 11px; }
  .junak__tvrdnja { font-size: 1.08rem; }
  .sastav__jezicak { padding: .5rem .9rem; }
  .autor { grid-template-columns: minmax(0, 1fr); }
  .usluge__stavka--sa-slikom { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 1rem; }
  .gumb--glavni { width: 100%; }
  .traka { font-size: .9rem; padding: .45rem .9rem; }
  .cjenik { box-shadow: 6px 6px 0 var(--koralj); }
  .obrazac { box-shadow: -6px 6px 0 var(--plava); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .stranica--skripta .otkrivanje { opacity: 1; transform: none; }
}