/* Folio homepage. Scoped to this page; the application keeps its own tokens. */
.sajt-folio-pocetna {
    --folio-papir: #f8fafc; --folio-povrsina: #fff; --folio-mastilo: #0c1530;
    --folio-plava: #214eff; --folio-led: #eaf0ff; --folio-sivo: #59677e; --folio-linija: #dce3ee;
    --brend-puna: #214eff; --brend-600: #214eff; --brend-700: #163bd0;
    background: var(--folio-papir); color: var(--folio-mastilo);
}
[data-tema="tamna"] .sajt-folio-pocetna {
    --folio-papir: #101725; --folio-povrsina: #172132; --folio-mastilo: #eef3ff;
    --folio-led: #1b2a4a; --folio-sivo: #b2bdd1; --folio-linija: #2e3b52;
}
.sajt-folio-pocetna .sajt-list { overflow: visible; background: var(--folio-papir); border: 0; margin: 0; border-radius: 0; box-shadow: none; }
.sajt-folio-pocetna .sajt-glava { top: 0; width: 100%; max-width: none; margin: 0; border: 0; border-bottom: 1px solid var(--folio-linija); border-radius: 0; box-shadow: none; background: var(--folio-povrsina); backdrop-filter: none; }
.sajt-folio-pocetna .sajt-glava .omot { max-width: 1240px; height: 76px; padding-inline: 32px; }
.sajt-folio-pocetna .sajt-glava.je-skrolovano .omot { height: 76px; }
.sajt-folio-pocetna .sajt-glava:hover { box-shadow: none; }
.sajt-folio-pocetna .sajt-logo img { height: 28px; }
.sajt-folio-pocetna .sajt-akcije > .dugme-primarno { box-shadow: none; }
.pocetna-folio .omot { width: 100%; max-width: 1200px; padding-inline: 40px; }
.sajt-folio-pocetna .dugme { border-radius: 10px; min-height: 44px; font-weight: 550; box-shadow: none; }
.pocetna-folio .dugme-l { min-height: 52px; padding: 14px 22px; font-size: 14px; }
.pocetna-folio .dugme-primarno { background: var(--folio-plava); border-color: var(--folio-plava); color: #fff; }
.pocetna-folio :is(h1,h2,h3,p) { margin-top: 0; }
.pocetna-folio :is(h1,h2,h3) { color: inherit; }
.pocetna-folio h2 { font-size: clamp(36px, 4.3vw, 58px); line-height: 1.08; letter-spacing: -.055em; font-weight: 600; }
.pocetna-folio a { text-decoration: none; }
.pocetna-folio :is(a,button,summary):focus-visible { outline: 3px solid #7e9cff; outline-offset: 5px; }
.pocetna-folio :is(section,article,[id]) { scroll-margin-top: 104px; }
.folio-hero { padding: 44px 0 0; text-align: center; overflow: clip; }
.folio-nadnaslov { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 22px; color: var(--folio-sivo); font-size: 12px; font-weight: 500; }
.folio-nadnaslov > span { width: 6px; height: 6px; border-radius: 50%; background: var(--folio-plava); }
.folio-hero h1 { margin-bottom: 24px; font-size: clamp(48px, 5.8vw, 78px); font-weight: 600; line-height: 1.02; letter-spacing: -.065em; }
.folio-hero h1 > span { color: var(--folio-plava); }
[data-tema="tamna"] .folio-hero h1 > span { color: #819fff; }
.folio-hero-opis { color: var(--folio-sivo); font-size: 18px; line-height: 1.65; margin-bottom: 26px; }
.folio-akcije { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px; }
.folio-tekst-veza { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--folio-mastilo); font-size: 14px; font-weight: 500; }
.folio-proba { margin: 15px 0 0; color: var(--folio-sivo); font-size: 12px; }
.folio-scena { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1000 / 620; }
.folio-scena-hero { max-width: 1040px; height: min(42vw, 440px); aspect-ratio: auto; margin: 8px auto 0; }
.folio-poster, .folio-platno { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.folio-poster { transition: opacity 220ms ease; }
.folio-platno { opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.folio-scena[data-folio-ziva] .folio-platno { opacity: 1; }
.folio-scena[data-folio-ziva] .folio-poster { opacity: 0; }
.folio-hero-podnozje { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--folio-linija); font-size: 12px; color: var(--folio-sivo); }
.folio-hero-podnozje a { display: inline-flex; align-items: center; gap: 12px; color: var(--folio-mastilo); }
.folio-tok { background: #0c1530; color: #fff; padding: 88px 0 72px; }
.folio-tok-glava { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px 60px; align-items: end; margin-bottom: 40px; }
.folio-oznaka { display: block; margin-bottom: 22px; color: var(--folio-sivo); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.folio-tok .folio-oznaka { grid-column: 1 / -1; color: #9eafff; margin-bottom: 0; }
.folio-tok h2 { margin-bottom: 0; }
.folio-tok-glava > p { color: #b8c4dd; font-size: 18px; line-height: 1.65; margin-bottom: 4px; }
.folio-tok-mreza { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 60px; }
.folio-tok-levo { min-width: 0; }
.folio-koraci { padding-bottom: 220px; }
.folio-tok-lepljivo { position: sticky; top: 100px; padding-top: 20px; }
.folio-scena-tok { height: min(550px, calc(100svh - 270px)); min-height: 300px; aspect-ratio: auto; border-radius: 20px; background: #131f3d; }
.folio-scena-tok .folio-poster { transform: scale(1.07); }
.folio-scena-potpis { display: flex; justify-content: space-between; gap: 12px; color: #abb9d3; font-size: 10px; line-height: 1.5; margin: 16px 0 24px; }
.folio-scena-potpis > span { display: flex; align-items: center; gap: 7px; }
.folio-scena-potpis i { background: #8aa4ff; width: 5px; height: 5px; border-radius: 50%; }
.folio-scena-potpis b { font-weight: 500; color: #d8e2ff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.folio-precice { display: flex; flex-wrap: wrap; gap: 8px; }
.folio-precice a { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid #34415e; border-radius: 8px; color: #c5d0e5; font-size: 11px; min-height: 44px; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.folio-precice a span { color: #8e9fbd; font-size: 10px; }
.folio-precice a[aria-current="step"] { background: #214eff; border-color: #214eff; color: #fff; }
.folio-precice a[aria-current="step"] span { color: #d4dfff; }
.folio-korak { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 56vh; padding: 50px 0 50px 28px; border-left: 1px solid #34415e; }
.folio-korak::before { content: ''; position: absolute; left: -2px; top: 50%; width: 3px; height: 72px; background: #6e90ff; transform: translateY(-50%) scaleY(0); transition: transform 240ms var(--ease-out); }
.folio-korak.je-aktivan::before { transform: translateY(-50%) scaleY(1); }
.folio-korak-broj { color: #94abff; font-size: 12px; font-variant-numeric: tabular-nums; margin-bottom: 20px; }
.folio-korak h3 { font-size: clamp(25px, 3vw, 36px); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; margin-bottom: 18px; }
.folio-korak > p { color: #c1cce2; font-size: 16px; line-height: 1.8; max-width: 35ch; margin-bottom: 24px; }
.folio-korak-napomena { display: flex; align-items: center; gap: 8px; color: #9eafff; font-size: 12px; }
.folio-tok-veza { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; margin-top: 28px; min-height: 44px; }
.folio-mogucnosti { padding: 120px 0; }
.folio-mogucnosti-mreza { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 72px; }
.folio-mogucnosti h2 { margin-bottom: 24px; }
.folio-uvod { color: var(--folio-sivo); max-width: 35ch; font-size: 15px; line-height: 1.8; margin-bottom: 32px; }
.folio-mogucnosti-lista { border-top: 1px solid var(--folio-linija); }
.folio-mogucnosti-lista > a { display: grid; grid-template-columns: 22px 1fr 20px; gap: 16px; align-items: center; padding: 23px 0; border-bottom: 1px solid var(--folio-linija); color: inherit; }
.folio-red-broj { align-self: start; margin-top: 3px; font-size: 10px; color: var(--folio-sivo); }
.folio-mogucnosti-lista h3 { font-size: 18px; font-weight: 550; letter-spacing: -.03em; margin-bottom: 6px; }
.folio-mogucnosti-lista p { color: var(--folio-sivo); font-size: 12px; line-height: 1.6; margin: 0; }
.folio-mogucnosti-lista > a > .ikona { color: var(--folio-plava); }
/* An inexpensive dimensional board; one WebGL context serves the hero and story. */
.folio-sistem { position: relative; height: 500px; perspective: 1000px; color: #0c1530; }
.folio-sistem-osnova { position: absolute; inset: 52px 14px 25px; background: #214eff; border-radius: 22px; transform: rotateY(-13deg) rotateX(12deg) rotateZ(8deg); box-shadow: 12px 30px 0 #c5d1f4, 20px 48px 45px -30px #6879a3; }
.folio-sistem-knjiga { position: absolute; top: 30px; left: 0; width: 78%; padding: 32px 28px; border-radius: 14px; background: #fffefa; box-shadow: 0 5px 0 #d9deeb, 0 22px 36px #0c15302b; transform: rotateY(-13deg) rotateX(12deg) rotateZ(4deg); }
.folio-mini-oznaka { display: block; color: #68748a; font-size: 9px; letter-spacing: .1em; margin-bottom: 12px; }
.folio-sistem-knjiga > b { font-size: 20px; letter-spacing: -.04em; }
.folio-stubici { display: flex; gap: 12px; align-items: end; height: 130px; margin: 24px 0; padding: 0 6px 0; border-bottom: 1px solid #dce3ee; }
.folio-stubici i { flex: 1; height: 24%; background: #cbd8ff; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.folio-stubici i:nth-child(2) { height: 40%; }.folio-stubici i:nth-child(3) { height: 32%; }.folio-stubici i:nth-child(4) { height: 60%; }.folio-stubici i:nth-child(5) { height: 52%; }.folio-stubici i:nth-child(6) { height: 75%; }.folio-stubici i:nth-child(7) { height: 92%; background: #214eff; }
.folio-mini-red { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; padding-block: 14px; border-top: 1px solid #dce3ee; }
.folio-mini-red > span { color: #69748a; }.folio-mini-red > b { font-weight: 500; }
.folio-sistem-rok { position: absolute; top: 210px; right: -5px; display: grid; gap: 14px; padding: 24px; width: 52%; background: #eaf0ff; border: 1px solid #fff; border-radius: 12px; box-shadow: 0 5px 0 #b2c3f3, 0 20px 25px #0c153026; transform: rotateY(-13deg) rotateX(12deg) rotateZ(-5deg); }
.folio-sistem-rok > span { color: #59677e; font-size: 9px; letter-spacing: .1em; }.folio-sistem-rok > .ikona { width: 32px; height: 32px; color: #214eff; }.folio-sistem-rok > b { font-size: 20px; letter-spacing: -.04em; }.folio-sistem-rok small { color: #59677e; font-size: 10px; }
.folio-sistem-potvrda { position: absolute; left: 12px; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-radius: 12px; background: #fffefa; box-shadow: 0 3px 0 #d9deeb; font-size: 11px; transform: rotate(-2deg); }.folio-sistem-potvrda .ikona { color: #214eff; }
.folio-delatnosti { padding: 64px 0; border-block: 1px solid var(--folio-linija); }
.folio-delatnosti > .omot { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.folio-delatnosti h2 { font-size: 36px; }.folio-delatnosti p { color: var(--folio-sivo); font-size: 14px; line-height: 1.8; max-width: 34ch; margin-bottom: 0; }
.folio-delatnosti-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-content: center; }
.folio-delatnosti-lista a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--folio-linija); color: inherit; font-size: 12px; }.folio-delatnosti-lista .folio-sve-delatnosti { grid-column: 1 / -1; color: var(--folio-plava); border: 0; }
.pocetna-folio .sekcija { padding: 100px 0; }
.pocetna-folio .sekcija-glava { max-width: 710px; margin-bottom: 36px; }
.pocetna-folio .sekcija-oznaka { padding: 0; border: 0; background: none; color: var(--folio-sivo); font-size: 10px; letter-spacing: .1em; margin-bottom: 20px; }
.pocetna-folio .sekcija-opis { color: var(--folio-sivo); font-size: 15px; line-height: 1.8; }
.pocetna-folio .cenovnik-pocetna { max-width: 840px; margin-inline: auto; }
.pocetna-folio .prekidac-ciklusa { margin-bottom: 32px; border-radius: 12px; background: var(--folio-led); border: 1px solid var(--folio-linija); }
.pocetna-folio .cene { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 20px; }
.pocetna-folio .cena-kartica { display: flex; flex-direction: column; padding: 32px; background: var(--folio-povrsina); border: 1px solid var(--folio-linija); border-radius: 20px; box-shadow: none; transform: none; }
.pocetna-folio .cena-kartica.istaknut { background: var(--folio-led); border: 1px solid var(--folio-plava); box-shadow: none; transform: none; }
.pocetna-folio .cenovnik-pocetna[data-ciklus] .cena-kartica { border-color: var(--folio-linija); }
.pocetna-folio .cenovnik-pocetna[data-ciklus] .cena-kartica.istaknut { border-color: var(--folio-plava); }
.pocetna-folio .cenovnik-pocetna[data-ciklus] .cena-iznos b { color: var(--folio-mastilo); }
.pocetna-folio .cena-status { min-height: 27px; color: var(--folio-sivo); font-size: 11px; }.pocetna-folio .cena-oznaka { position: static; background: none; border: 0; padding: 0; color: var(--folio-plava); font-size: 11px; }
.pocetna-folio .cena-naziv { color: var(--folio-mastilo); font-size: 23px; font-weight: 550; margin-top: 12px; letter-spacing: -.03em; }.pocetna-folio .cena-podnaslov { color: var(--folio-sivo); font-size: 12px; min-height: 22px; margin-bottom: 0; }
.pocetna-folio .cena-iznos { align-items: baseline; gap: 8px; margin-block: 22px 4px; }.pocetna-folio .cena-iznos b { color: var(--folio-mastilo); font-size: 54px; font-weight: 550; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }.pocetna-folio .cena-iznos > span { color: var(--folio-sivo); font-size: 11px; }
.pocetna-folio .cena-godisnje { min-height: 36px; margin-bottom: 0; color: var(--folio-sivo); font-size: 10px; line-height: 1.7; }.pocetna-folio .cena-opis { min-height: 70px; color: var(--folio-sivo); font-size: 12px; line-height: 1.8; margin: 15px 0; }
.pocetna-folio .cena-lista { flex: 1; align-content: start; margin: 0 0 28px; padding-top: 20px; border-top: 1px solid var(--folio-linija); }.pocetna-folio .cena-lista li { color: var(--folio-mastilo); font-size: 12px; line-height: 1.6; }.pocetna-folio .cena-lista .ikona { color: var(--folio-plava); }
.folio-agencije { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 24px; padding: 23px 26px; margin-top: 20px; border: 1px solid var(--folio-linija); border-radius: 12px; color: var(--folio-mastilo); font-size: 12px; }.folio-agencije b { font-weight: 600; }.folio-agencije .ikona { color: var(--folio-plava); flex: none; }
.pocetna-folio :is(.cena-ciklus-opis,.cena-dodaci-napomena) { color: var(--folio-sivo); font-size: 10px; line-height: 1.7; text-align: center; margin-top: 20px; }.pocetna-folio .pocetna-sekcija-veza { text-align: center; font-size: 13px; margin-top: 22px; }
.pocetna-folio .sekcija-faq-pocetna { border-top: 1px solid var(--folio-linija); }.pocetna-folio .faq { max-width: 760px; margin-inline: auto; }.pocetna-folio .faq details { background: none; border: 0; border-bottom: 1px solid var(--folio-linija); border-radius: 0; }.pocetna-folio .faq summary { padding: 24px 4px; color: var(--folio-mastilo); font-size: 16px; }.pocetna-folio .faq-odgovor { color: var(--folio-sivo); font-size: 14px; line-height: 1.8; padding-inline: 4px; }.pocetna-folio .faq-noga { color: var(--folio-sivo); font-size: 12px; text-align: center; margin-top: 26px; }
.pocetna-folio .utisci-mreza { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }.pocetna-folio .utisak { background: var(--folio-povrsina); border: 1px solid var(--folio-linija); border-radius: 16px; padding: 26px; margin: 0; }.pocetna-folio .utisak-tekst { font-size: 16px; line-height: 1.8; }
.pocetna-folio .utisci-mreza .utisak:first-child { grid-row: auto; }
.pocetna-folio .utisci-mreza .utisak:first-child .utisak-tekst { font-size: 16px; line-height: 1.8; }
.pocetna-folio .mreza-vodici { gap: 20px; border: 0; }
.pocetna-folio .vodici-pocetna-glava { margin-bottom: 32px; }.pocetna-folio .vodici-pocetna-glava h2 { font-size: 40px; }.pocetna-folio .vodic-kartica { padding: 24px; border: 1px solid var(--folio-linija); border-radius: 16px; background: var(--folio-povrsina); }
.folio-zavrsni { padding: 88px 0 96px; text-align: center; border-top: 1px solid var(--folio-linija); }.folio-zavrsni h2 { margin-bottom: 30px; }.folio-zavrsni > .omot > p { color: var(--folio-sivo); font-size: 12px; margin: 18px 0 0; }
.sajt-folio-pocetna .sajt-noga { background: #0c1530; }
@media (hover:hover) and (pointer:fine) {
    .pocetna-folio .dugme-primarno:hover { background: #163bd0; border-color: #163bd0; transform: translateY(-2px); }
    .folio-precice a:hover { border-color: #7898ff; color: #fff; }
    .folio-mogucnosti-lista > a:hover h3, .folio-delatnosti-lista a:hover { color: var(--folio-plava); }
    .pocetna-folio .folio-tekst-veza:hover { color: var(--folio-plava); }
}
@media (max-width:1000px), (max-height:700px) {
    .folio-koraci { padding-bottom: 0; }
    .folio-tok-mreza { gap: 32px; }.folio-tok-lepljivo { position: static; }.folio-korak { min-height: auto; padding-block: 32px; }.folio-tok-glava { gap: 20px 32px; }
    .folio-mogucnosti-mreza { gap: 40px; }.folio-sistem { height: 440px; }.folio-sistem-knjiga { padding: 24px 20px; }.folio-sistem-rok { padding: 20px; right: 0; }.folio-sistem-rok > b { font-size: 17px; }
}
@media (max-width:760px) {
    .sajt-folio-pocetna .sajt-glava .omot { padding-inline: 16px; gap: 8px; height: 66px; }.sajt-folio-pocetna .sajt-glava.je-skrolovano .omot { height: 66px; }.sajt-folio-pocetna .sajt-akcije { gap: 8px; }
    .sajt-folio-pocetna .sajt-glava .sajt-logo img { height: 24px; }
    .sajt-folio-pocetna .sajt-akcije > .dugme-primarno { display: inline-flex; padding-inline: 10px; font-size: 11px; white-space: nowrap; }
    .sajt-folio-pocetna .sajt-akcije > .dugme-primarno .ikona { display: none; }
    .pocetna-folio .omot { padding-inline: 24px; }.folio-hero { padding-top: 46px; }.folio-hero h1 { font-size: clamp(42px,7.5vw,64px); }.folio-hero-opis { font-size: 16px; }
    .folio-scena-hero { height: auto; aspect-ratio: 1.65; width: calc(100% + 32px); margin-left: -16px; margin-top: 16px; }.folio-hero-podnozje { padding-block: 20px; font-size: 10px; }
    .folio-tok { padding: 64px 0; }.folio-tok-glava { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }.folio-tok-glava > p { font-size: 15px; }.folio-tok-glava > p > br { display: none; }.folio-tok-mreza { grid-template-columns: 1fr; gap: 22px; }.folio-tok-lepljivo { padding: 0; }.folio-scena-tok { height: auto; min-height: 0; aspect-ratio: 1.5; }.folio-precice { gap: 8px; }.folio-precice a { flex: 1 1 calc(50% - 8px); font-size: 10px; padding-inline: 10px; }.folio-korak { padding-left: 22px; }.folio-korak h3 { font-size: 27px; }.folio-korak > p { max-width: none; font-size: 14px; }.folio-korak-broj { margin-bottom: 12px; }
    .folio-mogucnosti { padding: 72px 0; }.folio-mogucnosti-mreza { grid-template-columns: 1fr; gap: 38px; }.folio-sistem { width: min(100%,440px); height: 430px; margin: 0 auto; }.folio-sistem-rok { top: 200px; }.folio-stubici { height: 110px; }
    .folio-delatnosti { padding-block: 56px; }.folio-delatnosti > .omot { grid-template-columns: 1fr; gap: 24px; }.folio-delatnosti h2 { font-size: 34px; }
    .pocetna-folio .sekcija { padding-block: 64px; }.pocetna-folio .sekcija-naslov { font-size: 36px; }.pocetna-folio .cene { gap: 16px; }.pocetna-folio .cena-kartica { padding: 26px; }.pocetna-folio .cena-opis { min-height: 130px; }.pocetna-folio .cena-iznos b { font-size: 46px; }.folio-agencije { padding: 20px; line-height: 1.8; }
    .pocetna-folio .utisci-mreza { grid-template-columns: 1fr; }.pocetna-folio .vodici-pocetna-glava h2 { font-size: 34px; }.folio-zavrsni { padding-block: 64px; }
}
@media (max-width:520px) {
    .pocetna-folio .omot { padding-inline: 20px; }.folio-nadnaslov { font-size: 10px; margin-bottom: 20px; }.folio-hero h1 { font-size: clamp(39px,10vw,51px); margin-bottom: 20px; }.folio-hero-opis { font-size: 15px; line-height: 1.7; margin-bottom: 22px; }.folio-akcije { gap: 10px; }.folio-akcije .dugme-l { padding-inline: 18px; font-size: 12px; }.folio-tekst-veza { font-size: 12px; gap: 6px; }.folio-proba { font-size: 10px; }.folio-scena-hero { margin-top: 12px; width: calc(100% + 40px); margin-left: -20px; aspect-ratio: 1.38; }.folio-hero-podnozje { gap: 12px; align-items: start; }.folio-hero-podnozje > span { max-width: 19ch; line-height: 1.7; }.folio-hero-podnozje a { min-height: 32px; gap: 6px; }
    .folio-tok h2,.folio-mogucnosti h2 { font-size: 40px; }.folio-oznaka { font-size: 9px; }.folio-scena-potpis { font-size: 9px; }.folio-korak > p { line-height: 1.8; }.folio-mogucnosti-lista h3 { font-size: 18px; }.folio-mogucnosti-lista p { font-size: 11px; }.folio-mogucnosti-lista > a { gap: 10px; }
    .folio-sistem { height: 400px; }.folio-sistem-knjiga { width: 85%; }.folio-sistem-knjiga > b { font-size: 18px; }.folio-sistem-osnova { inset-inline: 8px; }.folio-sistem-rok { top: 194px; width: 56%; padding: 20px 16px; }.folio-mini-red { font-size: 8px; }.folio-stubici { gap: 9px; height: 90px; }.folio-sistem-potvrda { bottom: 5px; left: 0; }
    .pocetna-folio .cena-opis, .pocetna-folio .cena-lista li { font-size: 14px; }
    .pocetna-folio .cena-godisnje { font-size: 12px; }
    .folio-mogucnosti-lista p { font-size: 13px; }
    .folio-korak-napomena { font-size: 13px; }
    .pocetna-folio .cene { grid-template-columns: 1fr; }.pocetna-folio .cena-opis { min-height: 0; }.pocetna-folio .cena-kartica { padding: 28px; }.pocetna-folio .cena-godisnje { min-height: 36px; }.pocetna-folio .cena-lista { margin-top: 8px; }.pocetna-folio .prekidac-ciklusa { width: 100%; }.pocetna-folio .prekidac-ciklusa a { flex: 1; justify-content: center; padding-inline: 12px; }.folio-agencije > span { max-width: 26ch; }.folio-agencije b { display: block; }.pocetna-folio .faq summary { font-size: 14px; padding-block: 22px; }.pocetna-folio .faq-odgovor { font-size: 13px; }.folio-zavrsni h2 { font-size: 44px; }
}
@media (max-width:359px) {
    .sajt-folio-pocetna .sajt-glava .omot { padding-inline: 12px; gap: 6px; }
    .sajt-folio-pocetna .sajt-akcije { gap: 6px; }
    .sajt-folio-pocetna .sajt-glava .sajt-logo img { height: 23px; }
    .folio-hero h1 { font-size: 35px; }
}
@media (prefers-reduced-motion:reduce) {
    .sajt-folio-pocetna *, .sajt-folio-pocetna *::before { scroll-behavior: auto; transition-duration: 0ms; animation: none; }
    .folio-tok-lepljivo { position: static; }.folio-korak { min-height: auto; padding-block: 32px; }.pocetna-folio .dugme:active { transform: none; }
    .folio-koraci { padding-bottom: 0; }
}

/* Complete homepage: the same visual grammar from navigation to the last link. */
.sajt-folio-pocetna :is(h1,h2,h3) { text-wrap: balance; }
.sajt-folio-pocetna .napredak-strane > i { background: #214eff; }
.sajt-folio-pocetna p { text-wrap: pretty; }
.sajt-folio-pocetna :is(a,button,summary):focus-visible { outline: 3px solid #819fff; outline-offset: 4px; }
.folio-preskoci { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 14px 20px; background: var(--folio-povrsina); color: var(--folio-mastilo); border-radius: 8px; transform: translateY(-160%); }
.folio-preskoci:focus { transform: none; }
.sajt-folio-pocetna .sajt-glava { transition: box-shadow 200ms ease, background-color 200ms ease; }
.sajt-folio-pocetna .sajt-glava.je-skrolovano { box-shadow: 0 6px 24px #0c153008; }
.sajt-folio-pocetna .sajt-nav { gap: 3px; margin-left: auto; }
.sajt-folio-pocetna .sajt-nav a { padding: 10px 13px; font-size: 13px; border-radius: 8px; color: var(--folio-sivo); }
.sajt-folio-pocetna .sajt-nav a[aria-current="location"] { color: var(--folio-mastilo); background: var(--folio-led); }
.sajt-folio-pocetna .sajt-nav a[aria-current="location"]::after { transform: scaleX(1); }
.sajt-folio-pocetna .sajt-akcije { margin-left: 24px; }
.sajt-folio-pocetna .sajt-meni-panel { background: var(--folio-povrsina); border: 1px solid var(--folio-linija); border-radius: 16px; padding: 20px; box-shadow: 0 20px 50px #0c15301c; max-height: calc(100dvh - 96px); overflow-y: auto; }
.sajt-folio-pocetna .sajt-meni-panel > a:not(.dugme) { display: flex; justify-content: space-between; min-height: 48px; align-items: center; color: var(--folio-mastilo); font-size: 16px; border-bottom: 1px solid var(--folio-linija); border-radius: 0; }
.folio-meni-naslov { display: block; color: var(--folio-sivo); font-size: 11px; margin: 0 12px 8px; letter-spacing: .08em; text-transform: uppercase; }
.sajt-folio-pocetna .sajt-meni-mob[open] .sajt-meni-panel { animation: folio-meni-ulaz 200ms var(--ease-out); transform-origin: top right; }
@keyframes folio-meni-ulaz { from { opacity: .6; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.folio-hero { padding-top: 62px; background: radial-gradient(ellipse at 50% 72%, #eaf0ff88, transparent 53%); }
.folio-nadnaslov { width: fit-content; margin-inline: auto; padding: 8px 13px; border: 1px solid var(--folio-linija); border-radius: 24px; background: var(--folio-povrsina); }
.folio-hero h1 { font-size: clamp(48px,5.8vw,82px); letter-spacing: -.065em; }
.folio-hero-opis { max-width: 42ch; margin-inline: auto; }
.folio-scena-hero { margin-top: 18px; height: min(43vw,470px); }
.folio-orbite { position: absolute; inset: 8% 3% 7%; z-index: -1; pointer-events: none; }
.folio-orbite i { position: absolute; inset: 18% 0 0; border: 1px solid var(--folio-linija); border-radius: 50%; transform: rotate(-9deg); opacity: .7; }
.folio-orbite i + i { inset: 7% 13% 10%; transform: rotate(13deg); opacity: .5; }
.folio-scena-etiketa { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--folio-povrsina); border: 1px solid var(--folio-linija); box-shadow: 0 12px 36px #0c153008; text-align: left; pointer-events: none; }
.folio-scena-etiketa > .ikona { width: 22px; height: 22px; color: var(--folio-plava); }
.folio-scena-etiketa span { display: grid; gap: 4px; font-size: 10px; color: var(--folio-sivo); }
.folio-scena-etiketa b { font-size: 12px; color: var(--folio-mastilo); font-weight: 550; }
.folio-scena-etiketa-levo { left: 2%; top: 13%; transform: rotate(-5deg); }
.folio-scena-etiketa-desno { right: 0; bottom: 17%; transform: rotate(4deg); }
.folio-pokret { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--folio-sivo); cursor: pointer; font: inherit; font-size: 11px; }
.folio-pokret[hidden] { display: none; }
.folio-pokret-znak { width: 10px; height: 11px; border-inline: 3px solid currentColor; }
.folio-pokret[aria-pressed="true"] .folio-pokret-znak { height: 0; width: 0; border: 6px solid transparent; border-right: 0; border-left: 9px solid currentColor; }
.folio-hero-podnozje { padding-block: 10px; }
.folio-prednosti { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 34px 0 42px; text-align: left; }
.folio-prednosti p { display: flex; align-items: center; gap: 14px; margin: 0; }
.folio-prednosti .ikona { width: 22px; height: 22px; flex: none; color: var(--folio-plava); }
.folio-prednosti span { display: grid; gap: 7px; }.folio-prednosti b { font-size: 12px; font-weight: 550; }.folio-prednosti small { color: var(--folio-sivo); font-size: 11px; }
.folio-tok { position: relative; background: #0c1530; border-radius: 32px 32px 0 0; }
.folio-scena-tok { background: radial-gradient(ellipse at 50% 48%,#273858 0,#16233f 60%,#131f3d 100%); border: 1px solid #ffffff0d; }
.folio-tok-progres { margin-top: 24px; height: 2px; border-radius: 2px; overflow: hidden; background: #34415e; }
.folio-tok-progres i { display: block; width: 100%; height: 100%; background: #8aa4ff; transform: scaleX(.25); transform-origin: left; }
.folio-korak { min-height: 54vh; }
.folio-korak-primer { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; max-width: 360px; padding: 18px; border: 1px solid #34415e; border-radius: 12px; margin-top: 24px; background: #ffffff03; }
.folio-korak-primer > span { grid-row: span 2; align-self: center; font-size: 9px; color: #9baccd; letter-spacing: .06em; text-transform: uppercase; padding-right: 12px; border-right: 1px solid #34415e; }
.folio-korak-primer b { font-weight: 500; font-size: 12px; }.folio-korak-primer small { color: #b8c4dd; font-size: 10px; line-height: 1.5; }
.folio-mogucnosti { background: var(--folio-povrsina); }
.folio-mogucnosti-lista > a { position: relative; padding-inline: 8px; transition: background-color 200ms ease; }
.folio-mogucnosti-lista > a > .ikona, .folio-resursi-lista > a > .ikona, .folio-delatnosti-lista > a > .ikona { transition: transform 200ms var(--ease-out); }
.folio-mogucnosti-lista p { font-size: 13px; max-width: 38ch; }
.folio-delatnosti { padding-block: 88px; }
.folio-delatnosti h2 { font-size: clamp(34px,3.6vw,46px); }
.folio-delatnosti > .omot > div:first-child > .folio-tekst-veza { margin-top: 20px; font-size: 13px; }
.folio-delatnosti-lista { gap: 12px; }
.folio-delatnosti-lista a { position: relative; flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding: 18px; min-height: 100px; background: var(--folio-povrsina); border: 1px solid var(--folio-linija); border-radius: 12px; transition: border-color 200ms ease, transform 200ms var(--ease-out); }
.folio-delatnosti-lista a > span:not(.folio-delatnost-broj) { flex: 1; font-size: 13px; line-height: 1.5; }
.folio-delatnosti-lista a > .ikona { width: 15px; height: 15px; margin-left: auto; }
.folio-delatnost-broj { width: 100%; font-size: 10px; color: var(--folio-sivo); font-variant-numeric: tabular-nums; }
.folio-delatnosti-lista .folio-sve-delatnosti { background: none; min-height: 44px; padding: 6px 0; }
.pocetna-folio .sekcija-cenovnik-pocetna { position: relative; background: var(--folio-povrsina); }
.pocetna-folio .cenovnik-pocetna { max-width: 920px; }
.pocetna-folio .cena-kartica { background: var(--folio-papir); padding: 36px; border-radius: 20px; }
.pocetna-folio .cena-kartica.istaknut { box-shadow: 0 10px 34px #214eff0b; background: var(--folio-led); }
.pocetna-folio .cena-status { display: flex; align-items: center; gap: 7px; }
.pocetna-folio .cena-oznaka { transform: none; }
.pocetna-folio .istaknut .cena-status::before { content: ''; width: 6px; height: 6px; background: var(--folio-plava); border-radius: 50%; }
.pocetna-folio .cena-opis { font-size: 14px; min-height: 78px; }.pocetna-folio .cena-lista li { font-size: 13px; }
.pocetna-folio .cena-naziv { font-size: 27px; }.pocetna-folio .cena-podnaslov { font-size: 13px; }.pocetna-folio .cena-godisnje { font-size: 12px; min-height: 42px; }
.pocetna-folio .cena-kartica > .dugme { min-height: 48px; }.pocetna-folio .cena-ciklus-opis,.pocetna-folio .cena-dodaci-napomena { font-size: 12px; }
.folio-agencije { background: var(--folio-papir); padding: 22px 28px; font-size: 13px; }
.pocetna-folio .sekcija-utisci-pocetna { border-top: 1px solid var(--folio-linija); }
.pocetna-folio .utisci-mreza { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.pocetna-folio .utisak { border: 0; border-left: 2px solid var(--folio-plava); border-radius: 0 16px 16px 0; padding: 30px; }
.pocetna-folio .utisak .utisak-tekst { font-weight: 450; letter-spacing: -.02em; }.pocetna-folio .utisak .avatar { border-radius: 10px; background: var(--folio-led); color: var(--folio-plava); }
.pocetna-folio .sekcija-faq-pocetna > .omot { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 22px 72px; align-items: start; }
.pocetna-folio .sekcija-faq-pocetna .sekcija-glava { text-align: left; margin: 0; position: sticky; top: 116px; }
.pocetna-folio .sekcija-faq-pocetna h2 { font-size: clamp(34px,3.5vw,46px); }
.pocetna-folio .faq { width: 100%; }.pocetna-folio .faq-noga { grid-column: 2; margin: 0; text-align: left; }
.pocetna-folio .faq details:first-child { border-top: 1px solid var(--folio-linija); }
.pocetna-folio .faq details[open] summary { color: var(--folio-plava); }
.pocetna-folio .faq details[open] { box-shadow: none; background: var(--folio-povrsina); }
.pocetna-folio .pocetna-sekcija-veza { display: flex; justify-content: center; }
.pocetna-folio :is(.pocetna-sekcija-veza,.faq-noga) a { color: var(--folio-plava); }
.pocetna-folio .faq summary { line-height: 1.6; font-weight: 500; }
.pocetna-folio .sekcija-vodici-pocetna { border-top: 1px solid var(--folio-linija); background: var(--folio-povrsina); }
.pocetna-folio .vodic-kartica { padding: 28px; border-radius: 16px; background: var(--folio-papir); display: flex; flex-direction: column; box-shadow: none; }
.folio-vodic-broj { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--folio-plava); margin-bottom: 28px; }
.folio-vodic-broj i { display: block; width: 42px; height: 32px; border: 1px solid var(--folio-linija); border-radius: 4px; box-shadow: -4px 4px 0 var(--folio-led),-8px 8px 0 var(--folio-linija); transform: rotate(-8deg); }
.pocetna-folio .vodic-kategorija { color: var(--folio-sivo); background: transparent; padding: 0; font-size: 11px; }
.pocetna-folio .vodic-naslov { font-size: 22px; letter-spacing: -.03em; line-height: 1.25; }
.pocetna-folio .vodic-uvod { font-size: 14px; color: var(--folio-sivo); line-height: 1.7; }.pocetna-folio .vodic-noga { padding-top: 24px; margin-top: auto; color: var(--folio-plava); font-size: 12px; }
.folio-resursi { padding: 88px 0; border-top: 1px solid var(--folio-linija); }
.folio-resursi > .omot { display: grid; grid-template-columns: 1fr 1.2fr; gap: 88px; align-items: center; }
.folio-resursi h2 { font-size: clamp(34px,3.5vw,46px); }.folio-resursi-glava > p { max-width: 34ch; font-size: 15px; color: var(--folio-sivo); line-height: 1.8; }
.folio-resursi-lista > a { display: grid; grid-template-columns: 46px 1fr 20px; align-items: center; gap: 20px; padding: 24px 0; color: var(--folio-mastilo); border-bottom: 1px solid var(--folio-linija); }
.folio-resursi-lista > a:first-child { border-top: 1px solid var(--folio-linija); }
.folio-resurs-ikona { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--folio-led); border-radius: 12px; color: var(--folio-plava); }
.folio-resursi h3 { font-size: 18px; font-weight: 550; letter-spacing: -.025em; margin-bottom: 8px; }.folio-resursi-lista p { font-size: 13px; line-height: 1.65; margin: 0; color: var(--folio-sivo); }.folio-resursi-lista > a > .ikona { width: 18px; color: var(--folio-plava); }
.folio-zavrsni { position: relative; padding: 76px 0 88px; overflow: clip; background: #214eff; color: #fff; border: 0; }
.folio-zavrsni .omot { position: relative; z-index: 1; }
.folio-zavrsni .folio-oznaka { color: #d6e1ff; margin-top: 28px; }
.folio-zavrsni h2 { font-size: clamp(44px,5.5vw,72px); font-weight: 550; }
.pocetna-folio .folio-zavrsni .dugme-primarno { background: #fff; border-color: #fff; color: #153bbd; }
.folio-zavrsni > .omot > p { color: #d6e1ff; font-size: 13px; }
.folio-zavrsni-pitanje { display: inline-flex; gap: 8px; align-items: center; color: #fff; font-size: 12px; margin-top: 16px; min-height: 44px; }
.folio-zavrsni-ukras { position: relative; width: 90px; height: 85px; margin: 0 auto; perspective: 500px; }
.folio-zavrsni-ukras i,.folio-zavrsni-ukras > span { position: absolute; inset: 7px 12px; border-radius: 10px; background: #a8bcff; transform: rotate(-15deg); }
.folio-zavrsni-ukras i:nth-child(2) { transform: rotate(16deg); background: #5d7fff; }.folio-zavrsni-ukras i:nth-child(3) { transform: rotate(6deg); background: #dce6ff; }
.folio-zavrsni-ukras > span { display: flex; align-items: center; justify-content: center; transform: rotate(-5deg); background: #fff; color: #214eff; font-size: 40px; font-weight: 650; box-shadow: 0 10px 24px #0b268533; letter-spacing: -.08em; }
.folio-zavrsni::before,.folio-zavrsni::after { content: ''; position: absolute; width: 700px; height: 700px; border: 1px solid #ffffff22; border-radius: 50%; left: -410px; top: -50px; pointer-events: none; }
.folio-zavrsni::after { left: auto; right: -400px; top: 140px; }
.folio-noga { background: #0c1530; color: #fff; padding: 72px 0 0; }
.folio-noga > .omot { width: 100%; max-width: 1200px; padding-inline: 40px; }
.folio-noga-glavno { display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px; padding-bottom: 56px; }
.folio-noga-brend > p { font-size: 30px; letter-spacing: -.045em; line-height: 1.25; margin: 28px 0 18px; }
.folio-noga-brend > span { color: #aab9d4; font-size: 13px; line-height: 1.8; }
.folio-noga-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.folio-noga-nav h2 { font-size: 11px; font-weight: 500; color: #8ea3ca; margin: 4px 0 20px; }
.folio-noga a { color: #e3ebff; text-decoration: none; }
.folio-noga-nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; width: fit-content; font-size: 14px; }
.folio-noga-delatnosti { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; padding: 28px 0; border-block: 1px solid #2c3954; align-items: baseline; }
.folio-noga-delatnosti > span { color: #8ea3ca; font-size: 11px; }.folio-noga-delatnosti > div { display: flex; flex-wrap: wrap; gap: 2px 24px; }.folio-noga-delatnosti a { display: inline-flex; align-items: center; font-size: 12px; min-height: 38px; }
.folio-noga-potpis { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 36px 0 40px; }
.folio-noga-potpis span { color: #8ea3ca; font-size: 13px; padding-bottom: 12px; }.folio-noga-potpis b { font-size: clamp(90px,14vw,170px); font-weight: 550; line-height: .9; letter-spacing: -.075em; color: #324873; }
.folio-noga-dno { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid #2c3954; padding: 20px 0; color: #aab9d4; font-size: 11px; }
.folio-noga-dno nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }.folio-noga-dno a { min-height: 44px; display: inline-flex; align-items: center; color: #aab9d4; }
.folio-na-vrh { gap: 12px; white-space: nowrap; }.folio-na-vrh span { font-size: 18px; }
[data-tema="tamna"] .sajt-folio-pocetna { --folio-plava: #89a5ff; }
[data-tema="tamna"] .pocetna-folio .dugme-primarno { background: #214eff; border-color: #214eff; }
[data-tema="tamna"] .folio-hero { background: radial-gradient(ellipse at 50% 72%,#182740,transparent 58%); }
[data-tema="tamna"] .pocetna-folio .folio-zavrsni .dugme-primarno { background: #fff; color: #153bbd; border-color: #fff; }

/* Only illustrations move automatically. Copy, prices and controls remain steady. */
.folio-u-kadru .folio-scena-etiketa-levo { animation: folio-etiketa-levo 7s ease-in-out infinite; }
.folio-u-kadru .folio-scena-etiketa-desno { animation: folio-etiketa-desno 8s ease-in-out infinite; }
@keyframes folio-etiketa-levo { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes folio-etiketa-desno { 0%,100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(7px) rotate(2deg); } }
@media (max-width:599px) {
    .folio-u-kadru .folio-scena-hero .folio-poster { animation: folio-poster-dah 8s ease-in-out infinite; }
}
@keyframes folio-poster-dah { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(.5deg); } }
.sajt-folio-pocetna[data-folio-skriveno] * { animation-play-state: paused !important; }
.folio-sistem-rok,.folio-zavrsni-ukras { transition: transform 250ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
    .sajt-folio-pocetna .sajt-nav a:hover { background: var(--folio-led); color: var(--folio-mastilo); }
    .folio-pokret:hover { background: var(--folio-led); color: var(--folio-mastilo); }
    .folio-mogucnosti-lista > a:hover { background: var(--folio-papir); }
    .folio-mogucnosti-lista > a:hover > .ikona,.folio-resursi-lista > a:hover > .ikona,.folio-delatnosti-lista a:hover > .ikona { transform: translateX(4px); }
    .folio-delatnosti-lista a:hover { border-color: var(--folio-plava); transform: translateY(-2px); }
    .folio-sistem:hover .folio-sistem-rok { transform: translateY(-8px) rotateY(-8deg) rotateX(9deg) rotateZ(-2deg); }
    .folio-zavrsni:hover .folio-zavrsni-ukras { transform: translateY(-5px) rotate(4deg); }
    .pocetna-folio .folio-zavrsni .dugme-primarno:hover { background: #edf2ff; color: #153bbd; }
    .folio-noga a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
}
@media (max-width:1100px) { .folio-scena-etiketa { display: none; }.folio-noga-glavno { gap: 40px; }.sajt-folio-pocetna .sajt-akcije { margin-left: auto; } }
@media (max-width:1000px), (max-height:700px) { .folio-korak { min-height: auto; }.pocetna-folio .sekcija-faq-pocetna .sekcija-glava { position: static; } }
@media (max-width:760px) {
    .sajt-folio-pocetna .sajt-meni-panel { position: fixed; top: 72px; left: 16px; right: 16px; min-width: 0; }
    .folio-hero { padding-top: 38px; }.folio-hero h1 { font-size: clamp(42px,7.5vw,64px); }.folio-scena-hero { height: auto; margin-top: 12px; }
    .folio-hero-podnozje { flex-wrap: wrap; justify-content: space-between; row-gap: 2px; }.folio-hero-podnozje > span { max-width: none; }.folio-hero-podnozje .folio-pokret { order: 3; width: 100%; }
    .folio-prednosti { grid-template-columns: 1fr; padding: 24px 0 32px; gap: 22px; }.folio-prednosti b { font-size: 13px; }.folio-prednosti small { font-size: 12px; }.folio-prednosti .ikona { width: 20px; }
    .folio-tok { border-radius: 24px 24px 0 0; }.folio-korak-primer { max-width: none; }.folio-korak-primer b { font-size: 13px; }.folio-korak-primer small { font-size: 11px; }
    .folio-delatnosti { padding-block: 60px; }.folio-delatnosti > .omot { gap: 28px; }.folio-delatnosti-lista a { padding: 15px; min-height: 104px; }
    .pocetna-folio .sekcija-faq-pocetna > .omot { grid-template-columns: 1fr; gap: 28px; }.pocetna-folio .faq-noga { grid-column: 1; }.pocetna-folio .faq summary { font-size: 15px; }
    .pocetna-folio .cena-kartica { padding: 26px; }.pocetna-folio .cena-opis { min-height: 104px; }
    .folio-resursi { padding-block: 60px; }.folio-resursi > .omot { grid-template-columns: 1fr; gap: 20px; }.folio-resursi-lista > a { gap: 14px; }.folio-resursi h3 { font-size: 17px; }
    .folio-zavrsni { padding-block: 60px; }.folio-zavrsni h2 { font-size: 52px; }.folio-zavrsni > .omot > p { max-width: 30ch; margin-inline: auto; line-height: 1.8; }
    .folio-noga { padding-top: 52px; }.folio-noga > .omot { padding-inline: 24px; }.folio-noga-glavno { grid-template-columns: 1fr; gap: 40px; padding-bottom: 32px; }.folio-noga-brend > p { font-size: 30px; }
    .folio-noga-delatnosti { grid-template-columns: 1fr; gap: 12px; }.folio-noga-delatnosti > div { gap: 2px 20px; }.folio-noga-potpis { padding-block: 32px; }.folio-noga-potpis span { font-size: 11px; padding-bottom: 6px; }
    .folio-noga-dno { flex-wrap: wrap; gap: 4px 16px; }.folio-noga-dno nav { order: 3; width: 100%; gap: 0 16px; }.folio-na-vrh { margin-left: auto; }
}
@media (max-width:520px) {
    .folio-hero h1 { font-size: clamp(37px,10vw,51px); }.folio-nadnaslov { font-size: 10px; }.folio-hero-opis { font-size: 16px; }.folio-scena-hero { aspect-ratio: 1.38; }
    .folio-hero-podnozje { font-size: 11px; }.folio-hero-podnozje > span { max-width: 19ch; }.folio-orbite { inset-inline: 7%; }
    .folio-delatnosti-lista { gap: 10px; }.folio-delatnosti-lista a > span:not(.folio-delatnost-broj) { font-size: 12px; }.folio-delatnosti-lista a > .ikona { display: none; }
    .pocetna-folio .cena-opis { min-height: 0; }.pocetna-folio .cena-godisnje { min-height: 0; margin-bottom: 10px; }.pocetna-folio .cena-lista li { font-size: 14px; }
    .pocetna-folio .faq-odgovor { font-size: 14px; }.folio-noga > .omot { padding-inline: 20px; }.folio-resursi-lista > a { grid-template-columns: 40px 1fr 16px; gap: 12px; }.folio-resurs-ikona { width: 40px; height: 40px; }
    .folio-noga-potpis b { font-size: clamp(76px,24vw,100px); }.folio-noga-potpis span { max-width: 8ch; line-height: 1.6; }
}
@media (max-width:359px) { .folio-hero h1 { font-size: 34px; }.folio-nadnaslov { padding-inline: 10px; font-size: 9px; }.folio-korak-primer { padding: 13px; gap: 8px; }.folio-noga-nav { gap: 16px; }.folio-noga-nav a { font-size: 13px; } }
.sajt-folio-pocetna[data-folio-mirno] *, .sajt-folio-pocetna[data-folio-mirno] *::before, .sajt-folio-pocetna[data-folio-mirno] *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
@media (prefers-reduced-motion:reduce) {
    .sajt-folio-pocetna *, .sajt-folio-pocetna *::before, .sajt-folio-pocetna *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
    .folio-tok-lepljivo { position: static; }.folio-korak { min-height: auto; }.folio-koraci { padding-bottom: 0; }
}

/* ============================================================
   Preglednost: čitljiva slova, razmaci, delatnosti kao redovi
   ------------------------------------------------------------
   Doterivanje novog dizajna, ne novi dizajn. Sve vrednosti ispod su
   izmerene na 390px i 1024px pre izmene:

     · sitan tekst je išao do 9px (oznaka sekcije i potpis scene na
       telefonu), opisi uz prednosti i mogućnosti 11–12px — prodajna strana
       koju čita i čovek koji retko sedi za računarom ne sme da ima
       tekst koji se zagleda;
     · podnaslov kod delatnosti i resursa stajao je 0px ispod naslova, pa
       su se čitali kao jedan blok;
     · delatnosti su bile visoke kartice (100px+) sa brojem gore i nazivom
       od 12–13px dole: kartica je bila uglavnom prazna, a naziv — jedino
       što se traži — najsitniji.

   Blok stoji NA KRAJU fajla namerno: pobeđuje ranija pravila iste
   jačine, pa se dizajn ne dira na petnaest mesta i lako se vraća.
   ============================================================ */

/* --- najmanja čitljiva slova --- */
.folio-nadnaslov { font-size: 13px; }
.folio-oznaka { font-size: 12px; letter-spacing: .1em; }
.folio-hero-podnozje { font-size: 13px; }
.folio-scena-potpis { font-size: 12px; }
.folio-precice a { font-size: 13px; }
.folio-prednosti b { font-size: 15px; }
.folio-prednosti small { font-size: 13.5px; line-height: 1.5; }
.folio-mogucnosti-lista p { font-size: 14px; line-height: 1.55; }

/* --- naslov i podnaslov se ne dodiruju --- */
:is(.folio-delatnosti, .folio-resursi) h2 + p { margin-top: 14px; }

/* --- delatnosti: red sa brojem, nazivom i strelicom --- */
.folio-delatnosti-lista a {
    flex-wrap: nowrap; align-items: center; gap: 12px;
    min-height: 0; padding: 15px 16px;
}
.folio-delatnost-broj { width: auto; flex: none; font-size: 12px; }
.folio-delatnosti-lista a > span:not(.folio-delatnost-broj) { font-size: 15px; font-weight: 550; line-height: 1.35; }
.folio-delatnosti-lista .folio-sve-delatnosti {
    justify-content: flex-start; gap: 8px;
    width: fit-content; padding: 8px 0;
    font-size: 14px; font-weight: 600;
}

/* Na laptopu (761–1100px) lista dobija više mesta od teksta pored nje: sa
   jednakim kolonama i razmakom od 80px red je bio ~218px, pa se „Za marketing
   agencije" lomio u dva reda i taj red je štrčao među ostalima. */
@media (min-width: 761px) and (max-width: 1100px) {
    .folio-delatnosti > .omot { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; }
}

@media (max-width: 520px) {
    .folio-oznaka { font-size: 11px; }
    .folio-nadnaslov { font-size: 12px; }
    .folio-scena-potpis { font-size: 11px; }
    .folio-hero-podnozje { font-size: 12.5px; }
    .folio-precice a { font-size: 12.5px; }
    .folio-mogucnosti-lista p { font-size: 13.5px; }

    /* Na telefonu jedna kolona: dva naziva u redu od 160px su se lomila. */
    .folio-delatnosti-lista { grid-template-columns: 1fr; gap: 8px; }
    .folio-delatnosti-lista a > span:not(.folio-delatnost-broj) { font-size: 15px; }
    /* Strelica se vraća: jedino ona kaže da je red veza. */
    .folio-delatnosti-lista a > .ikona { display: block; }
}