:root {
  --zelena: #045A2B;
  --svijetla: #E6F0E9;
  --siva: #5A5A5A;
  --plava: #1A5F9E;
  --smeda: #7A4A24;
  --tekst: #1F2420;
  --pozadina: #FFFFFF;
  --crta: #D6E2D9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--pozadina); color: var(--tekst);
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-size: 18px; line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--zelena); }
a:hover { color: var(--plava); }
.sadrzaj { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.odjeljak { padding: 64px 16px; }
h1, h2, h3 { line-height: 1.2; color: var(--zelena); }
h2 { font-size: 2.1rem; margin: 0 0 24px; }
h3 { font-size: 1.25rem; margin: 28px 0 10px; }
.nadnaslov { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; font-weight: 700; color: var(--smeda); margin: 0 0 6px; }

/* traka */
.traka { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--crta); }
.traka-unutra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.znak img { width: 56px; height: 56px; }
nav { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: flex-end; }
nav a { text-decoration: none; color: var(--tekst); font-size: .95rem; font-weight: 600; }
nav a:hover { color: var(--zelena); }

/* naslovnica */
.naslovnica {
  color: #fff; text-align: center; padding: 96px 0 104px;
  background: linear-gradient(rgba(4,90,43,.72), rgba(4,40,20,.78)), url("img/naslovnica.jpg") center/cover no-repeat;
}
.naslovni-znak { margin: 0 auto 8px; width: 150px; height: 150px; }
.naslovnica h1 { color: #fff; font-size: 3.4rem; letter-spacing: .06em; margin: 0; }
.podnaslov { font-size: 1.3rem; margin: 8px 0 24px; }
.geslo { font-size: 1.6rem; font-weight: 700; margin: 0; }
.napomena { margin-top: 28px; font-size: .95rem; opacity: .9; }

/* raspored */
.dva { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.pozadina { background: var(--svijetla); }
.okvir { background: var(--svijetla); border-left: 4px solid var(--zelena); padding: 4px 20px 8px; margin-top: 24px; }
.pozadina .okvir { background: #fff; }
.okvir.upozorenje { border-left-color: var(--smeda); }
.okvir h3 { margin-top: 14px; }
.istaknuto { font-size: 1.2rem; font-weight: 700; color: var(--zelena); border-top: 2px solid var(--crta); padding-top: 16px; margin-top: 28px; }
.vrijednosti dt { font-weight: 700; color: var(--zelena); margin-top: 10px; }
.vrijednosti dd { margin: 0 0 4px; }
.stup img, .sirokaslika { border-radius: 6px; margin-bottom: 8px; }
.sirokaslika { max-height: 360px; width: 100%; object-fit: cover; margin: 8px 0 16px; }
.moto { font-style: italic; color: var(--smeda); margin-top: -4px; }
.kartica { background: var(--svijetla); border-radius: 6px; padding: 4px 20px 16px; border-top: 5px solid var(--zelena); }
.kartica.voda { border-top-color: var(--plava); }
.kartica.tlo { border-top-color: var(--smeda); }
.kartica.zrak { border-top-color: var(--siva); }
.kartica h3 { margin-top: 16px; }
.popis { padding-left: 1.2em; }
.popis li { margin-bottom: 6px; }
.koraci { counter-reset: k; list-style: none; padding: 0; }
.koraci li { counter-increment: k; position: relative; padding-left: 52px; margin: 14px 0; min-height: 38px; }
.koraci li::before {
  content: counter(k); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--zelena); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.razine { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.razine li { background: var(--svijetla); border-radius: 6px; padding: 14px 16px; font-size: .95rem; }
.razine li span { display: block; font-weight: 700; color: var(--zelena); font-size: 1.1rem; margin-bottom: 4px; }
.razine li:nth-child(2) { background: #D3E5D8; }
.razine li:nth-child(3) { background: #BFD9C6; }
.razine li:nth-child(4) { background: #ABCDB4; }

.kontakt { background: var(--zelena); color: #fff; }
.kontakt h2 { color: #fff; }
.kontakt a { color: #fff; font-weight: 700; }
.geslo-dno { font-size: 1.3rem; font-style: italic; margin-top: 24px; }
.podnozje { background: #032F17; color: #C9D8CD; font-size: .85rem; padding: 24px 0; }
.podnozje a { color: #E6F0E9; }
.zasluge { line-height: 1.5; }

@media (max-width: 820px) {
  body { font-size: 17px; }
  .dva, .tri { grid-template-columns: 1fr; gap: 24px; }
  .razine { grid-template-columns: 1fr 1fr; }
  .naslovnica h1 { font-size: 2.4rem; }
  h2 { font-size: 1.7rem; }
  .traka-unutra { flex-direction: column; align-items: flex-start; }
  nav { justify-content: flex-start; gap: 4px 14px; }
  .traka { position: static; }
  .odjeljak { padding: 44px 16px; }
}