/* EVROCERT, pocetna: sest zakacenih scena oko prstena trogodisnjeg ciklusa.
   Svaki korak menja boju kadra i krupan oblik, ne samo tekst. Boje kadra idu kroz promenljive --sc-*.
   Raspored vazi i bez .ima-scene; ta klasa dodaje kadar preko ekrana i stanja po koracima. */

:root { --gore: 0px; }
.ima-scene { --gore: var(--zaglavlje); }

/* kadar je preko celog ekrana, pa zaglavlje stoji iznad njega i ne sme da propusta boju scene */
.ima-scene .zaglavlje { position: fixed; left: 0; right: 0; }
.glava { background: var(--podloga); -webkit-backdrop-filter: none; backdrop-filter: none; }

.naslov { font: 800 2.4rem/.96 var(--naslov); letter-spacing: -.03em; }
.red { display: block; }

/* ---------- boje kadra ---------- */

.scena__kadar {
  --sc-pod: #EDEEF0; --sc-tekst: #10131A; --sc-tekst-2: #474E5C;
  --sc-akc: #1D4ED8; --sc-prsten: #1D4ED8;
  --sc-linija: rgba(16, 19, 26, .16); --sc-duh: rgba(16, 19, 26, .1);
  --sc-dugme: #1D4ED8; --sc-dugme-tekst: #fff; --sc-dugme-mis: #1741B6;
  overflow: hidden; padding: 64px 0;
  background-color: var(--sc-pod); color: var(--sc-tekst);
  transition: background-color .4s ease, color .4s ease;
}
/* tamna */
.polovine .scena__kadar,
.uvod[data-sada="2"] .scena__kadar,
.ciklus[data-sada="3"] .scena__kadar,
.cifre[data-sada="0"] .scena__kadar {
  --sc-pod: #10131A; --sc-tekst: #EDEEF0; --sc-tekst-2: #C5CAD4;
  --sc-akc: #8FAAFF; --sc-prsten: #4C78FF;
  --sc-linija: rgba(237, 238, 240, .24); --sc-duh: rgba(237, 238, 240, .13);
  --sc-dugme: #EDEEF0; --sc-dugme-tekst: #10131A; --sc-dugme-mis: #fff;
}
/* plava */
.uvod[data-sada="1"] .scena__kadar,
.ciklus[data-sada="2"] .scena__kadar,
.cifre[data-sada="1"] .scena__kadar,
.standardi[data-sada="2"] .scena__kadar,
.korak[data-sada="3"] .scena__kadar {
  --sc-pod: #1D4ED8; --sc-tekst: #fff; --sc-tekst-2: #DCE5FF;
  --sc-akc: #fff; --sc-prsten: #fff;
  --sc-linija: rgba(255, 255, 255, .32); --sc-duh: rgba(255, 255, 255, .17);
  --sc-dugme: #fff; --sc-dugme-tekst: #10131A; --sc-dugme-mis: #EDEEF0;
}
/* bledoplava */
.ciklus[data-sada="1"] .scena__kadar,
.standardi[data-sada="1"] .scena__kadar,
.korak[data-sada="1"] .scena__kadar {
  --sc-pod: #C9D6FB; --sc-tekst: #10131A; --sc-tekst-2: #2F3645;
  --sc-akc: #1741B6; --sc-prsten: #1D4ED8;
  --sc-linija: rgba(16, 19, 26, .2); --sc-duh: rgba(16, 19, 26, .09);
}
/* srednja plava */
.korak[data-sada="2"] .scena__kadar {
  --sc-pod: #6D8FEF; --sc-tekst: #10131A; --sc-tekst-2: #1B2233;
  --sc-akc: #10131A; --sc-prsten: #fff;
  --sc-linija: rgba(16, 19, 26, .28);
  --sc-dugme: #10131A; --sc-dugme-tekst: #fff; --sc-dugme-mis: #2A3142;
}
/* zlatna, samo jedan kratak korak */
.polovine[data-sada="2"] .scena__kadar {
  --sc-pod: #E6AC32; --sc-tekst: #10131A; --sc-tekst-2: #2B2410;
  --sc-akc: #10131A; --sc-prsten: #10131A;
  --sc-linija: rgba(16, 19, 26, .3);
  --sc-dugme: #10131A; --sc-dugme-tekst: #fff; --sc-dugme-mis: #2A3142;
}

.scena .eyebrow { color: var(--sc-akc); transition: color .4s ease; }
.scena .text-link { text-decoration-color: var(--sc-akc); }
.scena .text-link:hover { color: var(--sc-akc); }
.scena .button { background: var(--sc-dugme); color: var(--sc-dugme-tekst); transition: background-color .3s ease, color .3s ease, box-shadow .25s ease, transform .25s var(--kriva); }
.scena .button:hover { background: var(--sc-dugme-mis); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.scena :focus-visible { outline-color: var(--sc-akc); }
.rb {
  display: inline-grid; place-items: center; flex: none;
  width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--sc-akc); color: var(--sc-pod);
  font: 700 .75rem/1 var(--tekst); font-variant-numeric: tabular-nums;
  transition: background-color .4s ease, color .4s ease;
}

/* ---------- scene, zajednicko ---------- */

.ima-scene .scena__kadar { padding: 0; }
.ima-scene .scena__kadar > .wrap { height: 100%; padding-top: calc(var(--zaglavlje) + 14px); padding-bottom: 16px; }

.ima-scene .slojevi > [data-korak] { transform: translateY(16px); }
.ima-scene .slojevi > [data-korak].je-aktivan { transform: none; }

.brojac, .uvod__dole, .uvod__duh, .ciklus__cifre, .pl-ploca { display: none; }
.ima-scene .brojac {
  position: absolute; z-index: 4; right: 7px; top: calc(50% + var(--zaglavlje) / 2); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px; color: var(--sc-tekst); pointer-events: none;
}
.brojac i {
  display: block; width: 3px; height: 14px; border-radius: 2px; background: currentColor; opacity: .3;
  transition: height .4s var(--kriva), opacity .3s ease, background-color .3s ease;
}
.brojac i.je { height: 30px; opacity: 1; background: var(--sc-akc); }
@media (min-width: 900px) {
  .ima-scene .scena__kadar > .wrap { padding-top: calc(var(--zaglavlje) + 30px); padding-bottom: 28px; }
  .ima-scene .brojac { right: 22px; }
}

/* ---------- 1: uvod ----------
   korak 0 svetla i plavi luk, korak 1 plava i beli luk, korak 2 tamna i plavo-zlatni luk;
   luk se u svakom koraku uvecava, a iza teksta se menja ogromna cifra standarda */

.uvod { --vel: min(150vw, 96vh); --vidi: clamp(100px, 19vh, 190px); --ps: 1; }
@supports (height: 1svh) {
  .uvod { --vel: min(150vw, 96svh); --vidi: clamp(100px, 19svh, 190px); }
}
.uvod[data-sada="1"] { --ps: 1.3; }
.uvod[data-sada="2"] { --ps: 1.65; }
.uvod .scena__kadar { padding-bottom: calc(var(--vidi) + 40px); }
.ima-scene .uvod .scena__kadar { padding-bottom: 0; }
.ima-scene .uvod .uvod__okvir { display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(var(--vidi) + 12px); }

.ima-scene .uvod__duh {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: calc(var(--vidi) - .1em);
  display: grid; justify-items: center; pointer-events: none; user-select: none;
  font: 800 31vw/.8 var(--naslov); letter-spacing: -.05em; white-space: nowrap; color: var(--sc-duh);
  transition: color .4s ease;
}

.uvod__prsten {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--vel); height: var(--vel);
  left: 50%; margin-left: calc(var(--vel) / -2); top: calc(100% - var(--vidi));
}
.uvod__svg { width: 100%; height: 100%; overflow: visible; transform: scale(var(--ps)); transform-origin: 50% 0; transition: transform .45s var(--kriva); }
.up-sve { transform-origin: 500px 500px; transform: rotate(90deg); }
.up-nit { fill: none; stroke: var(--sc-tekst); stroke-width: 2; opacity: .24; transition: stroke .4s ease; }
.up-pojas { transform-origin: 500px 500px; transform: rotate(calc(-226deg + var(--p, 0) * 55deg)); }
.up-pojas circle { fill: none; stroke: var(--sc-prsten); stroke-width: 84; stroke-dasharray: 346 14; transition: stroke .4s ease; }
.up-meseci { transform-origin: 500px 500px; transform: rotate(calc(var(--p, 0) * -30deg)); }
.up-mesec { fill: none; stroke: var(--sc-tekst); stroke-width: 14; stroke-dasharray: .5 9.5; opacity: .45; transition: stroke .4s ease; }
.up-godina { fill: none; stroke: var(--sc-tekst); stroke-width: 34; stroke-dasharray: .9 119.1; transition: stroke .4s ease; }
.uvod[data-sada="2"] .up-godina { stroke: var(--zlatna); }
.up-ats { fill: var(--zlatna); stroke: var(--sc-pod); stroke-width: 8; transform-box: fill-box; transform-origin: center; transition: stroke .4s ease, transform .4s var(--kriva); }
.uvod[data-sada="2"] .up-ats { transform: scale(1.5); }
.uvod__ats-oznaka {
  position: absolute; left: 60.9%; top: 15.5%; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 999px; background: var(--podloga); color: var(--mastilo);
  font: 600 .6875rem/1.25 var(--tekst); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .3s ease;
}
.uvod[data-sada="1"] .uvod__ats-oznaka, .uvod[data-sada="2"] .uvod__ats-oznaka { opacity: 0; }

.uvod__tekst { position: relative; z-index: 1; }
.uvod__recenice { gap: .2em; font: 800 clamp(2.6rem, 12.4vw, 5.5rem)/.94 var(--naslov); letter-spacing: -.035em; }
.recenica { font: inherit; letter-spacing: inherit; }
.red--plavo { color: var(--sc-akc); transition: color .4s ease; }

.ima-scene .uvod__recenice { gap: 0; }
.ima-scene .uvod__recenice > [data-korak] { align-self: end; transform: none; }
.ima-scene .recenica .red { overflow: hidden; padding: .1em 0 .15em; margin: -.1em 0 -.15em; }
.ima-scene .recenica .red > span { display: inline-block; padding-right: .06em; transform: translateY(120%); transition: transform .42s var(--kriva); }
.ima-scene .recenica .red:nth-of-type(2) > span { transition-delay: .04s; }
.ima-scene .recenica .red:nth-of-type(3) > span { transition-delay: .08s; }
.ima-scene .recenica.je-aktivan .red > span { transform: none; }

.uvod__h1 {
  max-width: 33em; margin-top: clamp(12px, 2.4vh, 28px);
  font: 600 clamp(1rem, .93rem + .42vw, 1.375rem)/1.38 var(--tekst); letter-spacing: -.005em;
}
.podvuceno {
  text-decoration: underline; text-decoration-color: var(--zlatna); text-decoration-thickness: .16em;
  text-underline-offset: .2em; text-decoration-skip-ink: none;
}
.uvod__akcije { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: clamp(12px, 2.6vh, 30px); }
.uvod__registar {
  display: flex; align-items: flex-start; gap: 10px; max-width: 42em; margin-top: clamp(8px, 2vh, 22px);
  font-size: .8125rem; line-height: 1.4; color: var(--sc-tekst-2); transition: color .4s ease;
}
.uvod__registar .tacka-ats { margin-top: .36em; }
.uvod__registar a { text-decoration: none; }
.uvod__registar a:hover { color: var(--sc-tekst); text-decoration: underline; text-underline-offset: .25em; }
.ima-scene .tacka-ats--zivo { animation: otkucaj 2.6s ease-out infinite; }
@keyframes otkucaj {
  0% { box-shadow: 0 0 0 0 rgba(230, 172, 50, .6); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(230, 172, 50, 0); }
}

@media (min-width: 900px) {
  .uvod { --vel: min(128vh, 92vw); --vidi: 0px; }
  .uvod .scena__kadar { padding-bottom: 72px; }
  .ima-scene .uvod .uvod__okvir { padding-bottom: 24px; }
  .ima-scene .uvod__duh {
    left: calc(max(0px, (100vw - var(--okvir)) / 2) + var(--ivica) - .04em); right: auto; bottom: -.11em;
    justify-items: start; font-size: min(27vw, 50vh);
  }
  .uvod__prsten { left: auto; margin-left: 0; right: calc(var(--vel) * -.52); top: calc(50% + var(--gore) / 2 - var(--vel) / 2); }
  .uvod__svg { transform-origin: 0 50%; }
  .up-sve { transform: none; }
  .uvod__ats-oznaka { left: 16.5%; top: 39.1%; transform: translateY(-50%); font-size: .75rem; padding: 4px 10px; }
  .uvod__tekst { max-width: min(50rem, calc(100vw - .48 * var(--vel) - max(0px, (100vw - var(--okvir)) / 2) - var(--ivica) - 28px)); }
  .uvod__recenice { font-size: clamp(3.4rem, min(7.4vw, 13.5vh), 7.5rem); }
}
@media (min-width: 900px) and (min-height: 720px) {
  .ima-scene .uvod__dole {
    position: absolute; z-index: 2; bottom: 24px;
    left: calc(max(0px, (100vw - var(--okvir)) / 2) + var(--ivica));
    display: flex; align-items: center; gap: 12px;
    font: 600 .75rem/1 var(--tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-tekst-2);
    transition: opacity .3s ease;
  }
  .uvod__dole::before { content: ""; width: 44px; height: 2px; background: currentColor; transform-origin: 0 50%; animation: vuci 2.2s var(--kriva) infinite; }
  .uvod[data-sada="1"] .uvod__dole, .uvod[data-sada="2"] .uvod__dole { opacity: 0; }
}
@keyframes vuci {
  0% { transform: scaleX(0); }
  60%, 100% { transform: scaleX(1); }
}

/* ---------- 2: ciklus ----------
   cetiri tona podloge (svetla, bledoplava, plava, tamna); luk raste i deblja, prsten se uvecava,
   u sredini prstena se menja ogromna cifra provere */

.ciklus { --ck: 348; --ckw: 30; --cs: 1; }
.ciklus[data-sada="0"] { --ck: 8; --ckw: 26; --cs: .8; }
.ciklus[data-sada="1"] { --ck: 120; --ckw: 40; --cs: .88; }
.ciklus[data-sada="2"] { --ck: 240; --ckw: 54; --cs: .94; }
.ciklus[data-sada="3"] { --ck: 348; --ckw: 68; --cs: 1; }

.ciklus__okvir { display: grid; gap: 14px; align-content: center; }
.ciklus__glava .naslov { margin-top: 6px; font-size: clamp(1.9rem, 9.4vw, 3.2rem); }

.ciklus__slika { display: grid; place-items: center; min-width: 0; transform: scale(var(--cs)); transition: transform .45s var(--kriva); }
.ciklus__prsten { grid-area: 1 / 1; width: min(78vw, 42vh); height: auto; overflow: visible; }
@supports (height: 1svh) {
  .ciklus__prsten { width: min(78vw, 42svh); }
}
.ck-staza { fill: none; stroke: var(--sc-linija); stroke-width: 6; transition: stroke .4s ease; }
.ck-luk {
  fill: none; stroke: var(--sc-prsten); stroke-width: calc(var(--ckw) * 1px); stroke-linecap: round;
  stroke-dasharray: calc(var(--ck) * 1px) 400px;
  transition: stroke-dasharray .45s var(--kriva), stroke-width .45s var(--kriva), stroke .4s ease;
}
.ck-godine { display: none; }
.ck-godine text { font: 600 24px/1 var(--tekst); letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; fill: var(--sc-tekst-2); transition: fill .4s ease; }
.ck-tacka { transform-box: fill-box; transform-origin: center; transform: scale(1.25); transition: transform .4s var(--kriva); }
.ck-tacka circle { fill: var(--sc-prsten); stroke: var(--sc-pod); stroke-width: 6; transition: fill .35s ease, stroke .35s ease; }
.ck-tacka text { font: 700 30px/1 var(--tekst); text-anchor: middle; fill: var(--sc-pod); transition: fill .35s ease; }

/* tacke koje tek dolaze su prazne, aktivna je puna i veca */
.ciklus[data-sada="0"] .ck-tacka--1 circle, .ciklus[data-sada="0"] .ck-tacka--2 circle, .ciklus[data-sada="0"] .ck-tacka--3 circle,
.ciklus[data-sada="1"] .ck-tacka--2 circle, .ciklus[data-sada="1"] .ck-tacka--3 circle,
.ciklus[data-sada="2"] .ck-tacka--3 circle { fill: var(--sc-pod); stroke: var(--sc-tekst); stroke-width: 4; }
.ciklus[data-sada="0"] .ck-tacka--1 text, .ciklus[data-sada="0"] .ck-tacka--2 text, .ciklus[data-sada="0"] .ck-tacka--3 text,
.ciklus[data-sada="1"] .ck-tacka--2 text, .ciklus[data-sada="1"] .ck-tacka--3 text,
.ciklus[data-sada="2"] .ck-tacka--3 text { fill: var(--sc-tekst); }
.ciklus[data-sada="0"] .ck-tacka--0, .ciklus[data-sada="1"] .ck-tacka--1,
.ciklus[data-sada="2"] .ck-tacka--2, .ciklus[data-sada="3"] .ck-tacka--3 { transform: scale(1.6); }
.ciklus[data-sada="0"] .ck-tacka--0 circle, .ciklus[data-sada="1"] .ck-tacka--1 circle,
.ciklus[data-sada="2"] .ck-tacka--2 circle, .ciklus[data-sada="3"] .ck-tacka--3 circle { fill: var(--sc-tekst); stroke: var(--sc-pod); stroke-width: 6; }

.ima-scene .ciklus__cifre {
  grid-area: 1 / 1; display: grid; place-items: center; pointer-events: none;
  font: 800 min(46vw, 25vh)/.8 var(--naslov); letter-spacing: -.05em; font-variant-numeric: lining-nums;
}
@supports (height: 1svh) {
  .ima-scene .ciklus__cifre { font-size: min(46vw, 25svh); }
}

.ciklus__koraci { width: 100%; gap: 20px; }
.ima-scene .ciklus__koraci { gap: 0; }
.ciklus__koraci h3 { display: flex; align-items: center; gap: 10px; font: 700 1.25rem/1.2 var(--naslov); letter-spacing: -.01em; }
.ciklus__koraci p { max-width: 34em; margin-top: 6px; font-size: .9375rem; line-height: 1.42; color: var(--sc-tekst-2); transition: color .4s ease; }

@media (min-width: 900px) {
  .ciklus[data-sada="0"] { --cs: .76; }
  .ciklus[data-sada="1"] { --cs: .86; }
  .ciklus[data-sada="2"] { --cs: .96; }
  .ciklus[data-sada="3"] { --cs: 1.06; }
  .ciklus__okvir { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; column-gap: clamp(24px, 4vw, 64px); row-gap: 22px; }
  .ciklus__glava { grid-area: 1 / 1; align-self: end; }
  .ciklus__glava .naslov { margin-top: 12px; font-size: clamp(2.8rem, min(5.4vw, 10vh), 4.6rem); }
  .ciklus__koraci { grid-area: 2 / 1; align-self: start; }
  .ciklus__koraci h3 { font-size: 1.5rem; }
  .ciklus__koraci p { font-size: 1.0625rem; }
  .ciklus__slika { grid-area: 1 / 2 / 3 / 3; justify-self: center; align-self: center; width: min(72vh, 100%); }
  .ciklus__prsten { width: 100%; }
  .ck-godine { display: inline; }
  .ck-tacka { transform: none; }
  .ciklus[data-sada="0"] .ck-tacka--0, .ciklus[data-sada="1"] .ck-tacka--1,
  .ciklus[data-sada="2"] .ck-tacka--2, .ciklus[data-sada="3"] .ck-tacka--3 { transform: scale(1.35); }
  .ima-scene .ciklus__cifre { font-size: min(44vh, 30vw); }
}

/* ---------- 3: audit i odluka ----------
   korak 0 ceo krug na tamnoj; korak 1 kadar se cepa na belu i plavu plocu koje se razmicu;
   korak 2 zlatna podloga i ogromno precrtano Savetovanje */

.polovine { --raz: 1; --pw: min(84vw, 40vh); }
@supports (height: 1svh) {
  .polovine { --pw: min(84vw, 40svh); }
}
.polovine[data-sada="0"] { --raz: 0; }

.polovine__okvir { display: grid; gap: 12px; align-content: center; }
.polovine__glava { transition: color .4s ease; }
.polovine__glava .naslov { margin-top: 6px; font-size: clamp(2.1rem, 11vw, 3.6rem); }

.polovine__slika { position: relative; justify-self: center; width: var(--pw); }
.polovine__krug { position: relative; aspect-ratio: 1; transition: opacity .3s ease, transform .42s var(--kriva); }
.polovine__svg { width: 100%; height: 100%; overflow: visible; transform: rotate(90deg); }
.pl-luk { transition: transform .42s var(--kriva); }
.pl-luk path { fill: none; stroke-width: 56; transition: stroke .4s ease, stroke-width .42s var(--kriva); }
.pl-luk--audit { transform: translateX(calc(var(--raz) * -46px)); }
.pl-luk--odluka { transform: translateX(calc(var(--raz) * 46px)); }
.pl-luk--audit path { stroke: var(--podloga); }
.pl-luk--odluka path { stroke: var(--plava-jaka); }
.pl-rec {
  position: absolute; left: 50%; white-space: nowrap;
  font: 800 calc(var(--pw) * .15)/1 var(--naslov); letter-spacing: -.03em;
  transition: transform .42s var(--kriva), color .4s ease;
}
.pl-rec--audit { top: 27%; color: var(--podloga); transform: translate(-50%, calc(-50% - var(--raz) * var(--pw) * .046)); }
.pl-rec--odluka { top: 73%; color: var(--plava-svetla); transform: translate(-50%, calc(-50% + var(--raz) * var(--pw) * .046)); }
.pl-savet { margin-top: 16px; text-align: center; font: 800 1.75rem/1 var(--naslov); letter-spacing: -.02em; color: rgba(237, 238, 240, .7); }
.pl-savet span { position: relative; display: inline-block; }
.pl-savet span::after { content: ""; position: absolute; left: -3%; right: -3%; top: 52%; height: .1em; background: currentColor; }

.ima-scene .pl-ploca {
  display: block; position: absolute; z-index: -1; left: 50%; width: 100vw; height: 120vh; margin-left: -50vw;
  transition: transform .42s var(--kriva);
}
.ima-scene .pl-ploca--audit { bottom: 50%; background: #fff; transform: translateY(-125vh); }
.ima-scene .pl-ploca--odluka { top: 50%; background: var(--plava); transform: translateY(125vh); }
.ima-scene .polovine[data-sada="1"] .pl-ploca--audit { transform: translateY(calc(-4px - var(--pk, 0) * 12px)); }
.ima-scene .polovine[data-sada="1"] .pl-ploca--odluka { transform: translateY(calc(4px + var(--pk, 0) * 12px)); }
.ima-scene .polovine[data-sada="1"] .polovine__glava { color: var(--mastilo); }
.ima-scene .polovine[data-sada="1"] .polovine__glava .eyebrow { color: var(--plava); }
.ima-scene .polovine[data-sada="1"] .polovine__koraci p { color: #fff; }
.polovine[data-sada="1"] .pl-luk path { stroke-width: 72; }
.polovine[data-sada="1"] .pl-luk--audit path, .polovine[data-sada="2"] .pl-luk--audit path { stroke: var(--mastilo); }
.polovine[data-sada="1"] .pl-luk--odluka path { stroke: #fff; }
.polovine[data-sada="1"] .pl-rec--audit { color: var(--mastilo); }
.polovine[data-sada="1"] .pl-rec--odluka { color: #fff; }

.ima-scene .pl-savet {
  position: absolute; left: 50%; top: 50%; width: 100vw; margin: 0; pointer-events: none;
  font-size: 16.2vw; letter-spacing: -.04em; color: var(--mastilo);
  opacity: 0; transform: translate(-50%, -50%) scale(.86); transition: opacity .3s ease, transform .42s var(--kriva);
}
.ima-scene .pl-savet span::after { background: var(--podloga); height: .12em; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--kriva) .08s; }
.ima-scene .polovine[data-sada="2"] .pl-savet { opacity: 1; transform: translate(-50%, -50%); }
.ima-scene .polovine[data-sada="2"] .pl-savet span::after { transform: scaleX(1); }
.ima-scene .polovine[data-sada="2"] .polovine__krug { opacity: 0; transform: scale(.8); }

.polovine__koraci { gap: 14px; }
.ima-scene .polovine__koraci { gap: 0; }
.polovine__koraci p { max-width: 31em; font-size: 1rem; line-height: 1.45; color: var(--sc-tekst-2); transition: color .4s ease; }

@media (min-width: 900px) {
  .ima-scene .polovine { --pw: min(44vw, 50vh); }
  .ima-scene .polovine__okvir { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(56px, 9vw, 140px); row-gap: 16px; align-content: stretch; }
  .ima-scene .polovine__glava { grid-area: 1 / 1; }
  .ima-scene .polovine__koraci { grid-area: 1 / 2; align-self: end; }
  .ima-scene .polovine__slika { grid-area: 2 / 1 / 3 / 3; align-self: center; }
  .polovine__glava .naslov { margin-top: 12px; font-size: clamp(2.8rem, min(5.6vw, 10.5vh), 5rem); }
  .polovine__koraci p { font-size: 1.125rem; }

  .ima-scene .polovine__svg { transform: none; }
  .ima-scene .pl-rec { top: 50%; font-size: calc(var(--pw) * .105); }
  .ima-scene .pl-rec--audit { left: 29%; transform: translate(calc(-50% - var(--raz) * var(--pw) * .046), -50%); }
  .ima-scene .pl-rec--odluka { left: 71%; transform: translate(calc(-50% + var(--raz) * var(--pw) * .046), -50%); }

  .ima-scene .pl-ploca { left: auto; top: 50%; bottom: auto; width: 100vw; height: 220vh; margin: -110vh 0 0; }
  .ima-scene .pl-ploca--audit { right: 50%; transform: translateX(-105vw); }
  .ima-scene .pl-ploca--odluka { left: 50%; transform: translateX(105vw); }
  .ima-scene .polovine[data-sada="1"] .pl-ploca--audit { transform: translateX(calc(-5px - var(--pk, 0) * 16px)); }
  .ima-scene .polovine[data-sada="1"] .pl-ploca--odluka { transform: translateX(calc(5px + var(--pk, 0) * 16px)); }
  .ima-scene .pl-savet { font-size: min(16.2vw, 38vh); }
}

/* ---------- 4: cifre ----------
   28 na tamnoj levo, 08-002 na plavoj preko cele sirine, 173 na svetloj desno */

.cifre__okvir { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.cifre__naslov { max-width: 24em; font: 700 clamp(1.15rem, .95rem + 1vw, 1.75rem)/1.15 var(--naslov); letter-spacing: -.015em; }
.cifre__slojevi { gap: 56px; min-height: 0; }
.ima-scene .cifre__slojevi { gap: 0; }
.ima-scene .cifre__slojevi > [data-korak] { transform: none; }

.cifra { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-width: 0; min-height: 0; }
.cifra__slika { display: grid; place-items: center; min-width: 0; min-height: 0; }
.ima-scene .cifra--28 .cifra__slika { justify-self: start; }
.ima-scene .cifra--173 .cifra__slika { justify-self: end; }
.cifra__okvir { grid-area: 1 / 1; width: min(84vw, 40vh); height: auto; overflow: visible; }
.cifra__broj {
  grid-area: 1 / 1; position: relative; z-index: 1;
  font: 800 var(--vb)/.8 var(--naslov); letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: lining-nums;
}
.cifra--28 { --vb: min(62vw, 36vh); }
.cifra--ats { --vb: min(26.5vw, 26vh); }
.cifra--173 { --vb: min(50vw, 34vh); }
.cifra--28 .cifra__okvir, .cifra--173 .cifra__okvir { width: min(66vw, 38vh); }
@supports (height: 1svh) {
  .cifra__okvir { width: min(84vw, 40svh); }
  .cifra--28 .cifra__okvir, .cifra--173 .cifra__okvir { width: min(66vw, 38svh); }
  .cifra--28 { --vb: min(62vw, 36svh); }
  .cifra--ats { --vb: min(26.5vw, 26svh); }
  .cifra--173 { --vb: min(50vw, 34svh); }
}
.cf-nit { fill: none; stroke: var(--sc-linija); stroke-width: 4; transition: stroke .4s ease; }
.cf-crta { fill: none; stroke: var(--sc-tekst); stroke-width: 6; stroke-linecap: round; stroke-dasharray: calc(min(1, var(--pk, 1) * 1.5) * 1px) 1px; transition: stroke .4s ease; }
.cf-ats { fill: var(--zlatna); stroke: var(--sc-pod); stroke-width: 8; transition: stroke .4s ease; }
.ima-scene .cifra__broj { transform: translateX(calc((.5 - var(--pk, .5)) * 5vw)) scale(calc(.94 + var(--pk, .5) * .08)); }
.ima-scene .cifra--28 .cifra__broj { transform-origin: 0 50%; }
.ima-scene .cifra--173 .cifra__broj { transform-origin: 100% 50%; }

.cifra figcaption { display: grid; justify-items: start; gap: 4px; max-width: 37rem; }
.cifra figcaption strong { font: 700 1.25rem/1.2 var(--naslov); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cifra figcaption > span { font-size: .9375rem; line-height: 1.45; color: var(--sc-tekst-2); transition: color .4s ease; }

@media (min-width: 900px) {
  .cifra__okvir, .cifra--28 .cifra__okvir, .cifra--173 .cifra__okvir { width: min(58vw, 56vh); }
  .cifra--28 { --vb: min(42vw, 56vh); }
  .cifra--ats { --vb: min(26vw, 48vh, 23rem); }
  .cifra--173 { --vb: min(36vw, 54vh); }
  .cf-nit { stroke-width: 2; }
  .cf-crta { stroke-width: 3; }
  .cf-ats { stroke-width: 5; }
  .cifra figcaption strong { font-size: 1.5rem; }
  .cifra figcaption > span { font-size: 1rem; }
}

/* ---------- 5: standardi ----------
   tri tona (svetla, bledoplava, plava); brojcanik se okrece za trecinu, aktivni isecak deblja i raste */

.standardi { --vel: min(150vw, 100vh); --vidi: clamp(120px, 100vh - 500px, 280px); --ds: 1; --dw: 120; }
@supports (height: 1svh) {
  .standardi { --vel: min(150vw, 100svh); --vidi: clamp(120px, 100svh - 500px, 280px); }
}
.standardi[data-sada="1"] { --dw: 140; }
.standardi[data-sada="2"] { --dw: 160; }
.standardi .scena__kadar { padding-top: calc(var(--vidi) + 28px); }
.ima-scene .standardi .scena__kadar { padding-top: 0; }
.ima-scene .standardi .standardi__okvir { display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--zaglavlje) + var(--vidi) + 30px); }

.standardi__brojcanik {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--vel); height: var(--vel);
  left: 50%; margin-left: calc(var(--vel) / -2); top: calc(var(--gore) + var(--vidi) - .96 * var(--vel));
}
.standardi__svg { width: 100%; height: 100%; overflow: visible; transform: rotate(90deg) scale(var(--ds)); transition: transform .45s var(--kriva); }
.st-okret { transform-origin: 500px 500px; transition: transform .45s var(--kriva); }
.standardi[data-sada="1"] .st-okret { transform: rotate(-120deg); }
.standardi[data-sada="2"] .st-okret { transform: rotate(-240deg); }
.st-nit { fill: none; stroke: var(--sc-tekst); stroke-width: 16; stroke-dasharray: .6 9.4; opacity: .4; transition: stroke .4s ease; }
.st-isecak path { fill: none; stroke: var(--sc-prsten); stroke-width: 96; transition: stroke .4s ease, stroke-width .45s var(--kriva); }
.st-tekst { font: 800 64px/1 var(--naslov); letter-spacing: -.01em; text-anchor: middle; fill: var(--sc-pod); transition: fill .4s ease; }
.st-tekst--d { display: none; }
.standardi[data-sada] .st-isecak path { stroke: var(--sc-linija); stroke-width: 64; }
.standardi[data-sada] .st-tekst { fill: var(--sc-tekst-2); }
.standardi[data-sada="0"] .st-isecak--0 path,
.standardi[data-sada="1"] .st-isecak--1 path,
.standardi[data-sada="2"] .st-isecak--2 path { stroke: var(--sc-prsten); stroke-width: calc(var(--dw) * 1px); }
.standardi[data-sada="0"] .st-isecak--0 .st-tekst,
.standardi[data-sada="1"] .st-isecak--1 .st-tekst,
.standardi[data-sada="2"] .st-isecak--2 .st-tekst { fill: var(--sc-pod); }

.standardi__tekst { position: relative; z-index: 1; }
.standardi__slojevi { gap: 36px; margin-top: 10px; }
.ima-scene .standardi__slojevi { gap: 0; }
.standard__ime { font: 800 clamp(3.2rem, 17vw, 5.4rem)/.9 var(--naslov); letter-spacing: -.04em; }
.standard__oblast { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 10px; font: 700 1.0625rem/1.25 var(--naslov); }
.standard__oblast span { font: 500 .8125rem/1.25 var(--tekst); letter-spacing: .02em; color: var(--sc-tekst-2); font-variant-numeric: tabular-nums; transition: color .4s ease; }
.standard__opis { max-width: 30em; margin-top: 8px; font-size: .9375rem; line-height: 1.45; color: var(--sc-tekst-2); transition: color .4s ease; }
.standardi__obim { margin-top: 6px; font-size: .8125rem; line-height: 1.4; color: var(--sc-tekst-2); transition: color .4s ease; }
.standardi__obim a { color: var(--sc-tekst); text-underline-offset: .22em; }
.standardi__obim a:hover { color: var(--sc-akc); }

@media (min-width: 900px) {
  .standardi { --vel: min(108vh, 92vw); --vidi: 0px; }
  .standardi[data-sada="1"] { --ds: 1.1; }
  .standardi[data-sada="2"] { --ds: 1.2; }
  .standardi .scena__kadar { padding-top: 64px; }
  .ima-scene .standardi .standardi__okvir { flex-direction: row; justify-content: flex-start; align-items: center; padding-top: calc(var(--zaglavlje) + 30px); }
  .standardi__brojcanik { left: 12vw; top: calc(50% + var(--gore) / 2 - var(--vel) / 2); }
  .standardi__svg { transform: scale(var(--ds)); }
  .st-tekst--d { display: inline; }
  .st-tekst--m { display: none; }
  .standardi__tekst { width: 40%; margin-left: 60%; }
  .standardi__slojevi { margin-top: 16px; }
  .standard__ime { font-size: clamp(3.6rem, min(7vw, 13vh), 6.25rem); }
  .standard__oblast { margin-top: 16px; font-size: 1.25rem; }
  .standard__opis { margin-top: 10px; font-size: 1.0625rem; }
  .standardi__obim { margin-top: 14px; font-size: .875rem; }
}

/* ---------- 6: prvi korak ----------
   prsten se zatvara u cetiri poteza i steze oko dugmeta, podloga ide od svetle do pune plave */

.korak { --kr: 1; --krw: 36; --krs: 1; }
.korak[data-sada="0"] { --kr: .25; --krw: 28; --krs: 1.12; }
.korak[data-sada="1"] { --kr: .5; --krw: 36; --krs: 1.08; }
.korak[data-sada="2"] { --kr: .75; --krw: 44; --krs: 1.04; }
.korak[data-sada="3"] { --kr: 1; --krw: 52; --krs: 1; }

.korak__okvir { display: grid; gap: 12px; align-content: center; }
.korak__glava .naslov { margin-top: 6px; font-size: clamp(2.1rem, 11vw, 3.6rem); }

.korak__slika {
  position: relative; justify-self: center; display: grid; place-items: center;
  width: clamp(212px, min(64vw, 34vh), 520px); aspect-ratio: 1; margin: 10px 0;
}
@supports (height: 1svh) {
  .korak__slika { width: clamp(212px, min(64vw, 34svh), 520px); }
}
.korak__prsten { grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; transform: scale(var(--krs)); transition: transform .45s var(--kriva); }
.kr-staza { fill: none; stroke: var(--sc-linija); stroke-width: 6; transition: stroke .4s ease; }
.kr-luk {
  fill: none; stroke: var(--sc-prsten); stroke-width: calc(var(--krw) * 1px); stroke-linecap: round;
  stroke-dasharray: calc(var(--kr) * 1px) 1px;
  transition: stroke-dasharray .45s var(--kriva), stroke-width .45s var(--kriva), stroke .4s ease;
}
.kr-tacka { fill: var(--sc-tekst); stroke: var(--sc-pod); stroke-width: 8; transition: fill .35s ease, stroke .35s ease; }
.korak[data-sada="0"] .kr-tacka--2, .korak[data-sada="0"] .kr-tacka--3, .korak[data-sada="0"] .kr-tacka--4,
.korak[data-sada="1"] .kr-tacka--3, .korak[data-sada="1"] .kr-tacka--4,
.korak[data-sada="2"] .kr-tacka--4 { fill: var(--sc-pod); stroke: var(--sc-tekst); stroke-width: 5; }

.korak__dugme { grid-area: 1 / 1; position: relative; z-index: 1; padding: 0 18px; font-size: .9375rem; }
.ima-scene .korak[data-sada="3"] .korak__slika::after {
  content: ""; grid-area: 1 / 1; width: 84%; height: 84%; border-radius: 50%; border: 2px solid var(--sc-prsten);
  pointer-events: none; animation: talas 2.6s ease-out infinite;
}
@keyframes talas {
  0% { transform: scale(1); opacity: .55; }
  80%, 100% { transform: scale(1.32); opacity: 0; }
}

.korak__slojevi { gap: 28px; }
.ima-scene .korak__slojevi { gap: 0; }
.korak__podaci h3 { font: 700 1.25rem/1.2 var(--naslov); letter-spacing: -.01em; }
.podaci { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.podaci li { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; }
.podaci strong { font: 700 1.0625rem/1.2 var(--naslov); }
.podaci__opis { grid-column: 2; font-size: .8125rem; line-height: 1.3; color: var(--sc-tekst-2); transition: color .4s ease; }

.korak__kontakt p { max-width: 33em; font-size: .9375rem; line-height: 1.45; color: var(--sc-tekst-2); transition: color .4s ease; }
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-top: 10px; }
.kontakt__sta { display: block; font: 600 .6875rem/1.3 var(--tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-akc); transition: color .4s ease; }
.kontakt a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 700 .9375rem/1.1 var(--naslov); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kontakt a:hover { text-decoration: underline; text-underline-offset: .25em; }

@media (min-width: 900px) {
  .korak[data-sada="0"] { --krs: 1.24; }
  .korak[data-sada="1"] { --krs: 1.16; }
  .korak[data-sada="2"] { --krs: 1.08; }
  .korak__okvir { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto; column-gap: clamp(24px, 4vw, 64px); row-gap: 26px; }
  .korak__glava { grid-area: 1 / 1; align-self: end; }
  .korak__glava .naslov { margin-top: 12px; font-size: clamp(2.8rem, min(5.6vw, 10.5vh), 5rem); }
  .korak__slojevi { grid-area: 2 / 1; align-self: start; }
  .korak__slika { grid-area: 1 / 2 / 3 / 3; align-self: center; width: min(82%, 54vh); margin: 0; }
  .korak__dugme { min-height: 60px; padding: 0 30px; font-size: 1.0625rem; }
  .korak__podaci h3 { font-size: 1.5rem; }
  .podaci { max-width: 34rem; gap: 16px 28px; margin-top: 16px; }
  .podaci strong { font-size: 1.25rem; }
  .podaci__opis { font-size: .9375rem; }
  .korak__kontakt p { font-size: 1.125rem; }
  .kontakt { max-width: 34rem; margin-top: 18px; }
  .kontakt a { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
}

/* niski ekrani telefona: isti sadrzaj, manje vazduha */
@media (max-width: 899.98px) and (max-height: 600px) {
  .uvod { --vidi: 76px; }
  .uvod__recenice { font-size: clamp(2.2rem, 10.4vw, 5rem); }
  .uvod__h1 { font-size: .875rem; }
  .uvod__akcije .button { min-height: 44px; }
  .ciklus__glava .naslov { font-size: clamp(1.7rem, 8.4vw, 3rem); }
  .polovine__glava .naslov, .korak__glava .naslov { font-size: clamp(1.8rem, 9vw, 3.2rem); }
  .polovine { --pw: min(84vw, 36vh); }
  .polovine__koraci p, .korak__kontakt p { font-size: .875rem; }
  .korak__slika { width: 200px; margin: 4px 0; }
  .korak__dugme { min-height: 44px; padding: 0 14px; font-size: .875rem; }
  .standard__ime { font-size: clamp(2.8rem, 15vw, 5rem); }
}

/* dugme za povratak bi na telefonu leglo preko teksta scene */
@media (max-width: 899.98px) {
  .ima-scene .na-vrh { display: none; }
}

@media print {
  .scena { height: auto !important; }
  .scena__kadar { position: static !important; height: auto !important; padding: 24px 0 !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  .scena__kadar > .wrap { height: auto !important; padding-top: 0 !important; }
  .slojevi > * { grid-area: auto !important; }
  [data-korak], [data-od] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .recenica .red > span { transform: none !important; }
  .uvod__prsten, .uvod__duh, .standardi__brojcanik, .polovine__slika, .ciklus__cifre, .brojac, .uvod__dole { display: none !important; }
}