/* ============================================================
   FAKTO — javni sajt
   Isti tokeni, drugačija upotreba: veći tekst, više vazduha, mekši radijusi.
   ============================================================ */

.sajt { font-size: var(--t-lg); line-height: var(--t-lg-h); background: var(--n-0); }
.sajt h1, .sajt h2, .sajt h3 { font-family: var(--font-naslov); font-weight: 700; letter-spacing: -.02em; }

.omot { max-width: var(--sajt-max); margin: 0 auto; padding: 0 var(--r6); }

/* ---------------- zaglavlje ---------------- */

.sajt-glava {
    position: sticky; top: 12px; z-index: 50;
    width: min(calc(100% - var(--list-margina) * 2), calc(var(--sajt-max) + 48px));
    margin: 12px auto 0;
    background: var(--staklo);
    backdrop-filter: blur(18px) saturate(1.15);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    box-shadow: var(--senka-2), 0 10px 30px var(--senka-boja-1);
    transition: box-shadow var(--srednje), border-color var(--srednje), transform var(--srednje);
}
.sajt-glava:hover { border-color: var(--brend-200); box-shadow: var(--senka-3), 0 12px 32px var(--senka-boja-1); }
.sajt-glava .omot { display: flex; align-items: center; gap: var(--r6); height: 62px; padding: 0 var(--r5); }

.sajt-logo { display: inline-flex; align-items: center; flex: none; }
.sajt-logo:hover { text-decoration: none; }
.sajt-logo img { height: 29px; width: auto; transition: transform var(--srednje); }
.sajt-logo:hover img { transform: translateY(-1px); }

/* U podnožju stoji svetla varijanta i sme da bude nešto veća — tamo je logo
   jedina slika na tamnoj podlozi. */
.sajt-noga .sajt-logo img { height: 32px; }

.sajt-nav { display: flex; align-items: center; gap: 4px; margin-left: var(--r6); }
.sajt-nav a { position: relative; padding: 8px 10px; border-radius: var(--rad-sm); font-size: var(--t-md); font-weight: 500; color: var(--n-700); }
.sajt-nav a::after { content: ''; position: absolute; right: 10px; bottom: 4px; left: 10px; height: 2px; background: var(--brend-600); border-radius: var(--rad-pun); transform: scaleX(0); transform-origin: right; transition: transform var(--srednje); }
.sajt-nav a:hover { background: var(--brend-50); color: var(--brend-700); text-decoration: none; }
.sajt-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.sajt-akcije { margin-left: auto; display: flex; align-items: center; gap: var(--r3); }
.sajt-akcije > .dugme-primarno { box-shadow: 0 5px 14px color-mix(in srgb, var(--brend-600) 25%, transparent); transition: transform var(--srednje), box-shadow var(--srednje); }
.sajt-akcije > .dugme-primarno:hover { transform: translateY(-1px); box-shadow: 0 8px 18px color-mix(in srgb, var(--brend-600) 30%, transparent); }

@media (max-width: 900px) {
    .sajt-nav { display: none; }
    .sajt-glava { top: 8px; margin-top: 8px; border-radius: var(--rad-lg); }
    .sajt-glava .omot { gap: var(--r3); height: 58px; padding: 0 var(--r3); }
}

/* ---------------- sekcije ---------------- */

.sekcija { padding: var(--r16) 0; }
.sekcija.tesna { padding: var(--r12) 0; }
.sekcija.siva { background: var(--n-25); }
.sekcija.tamna { background: var(--brend-900); color: rgba(255, 255, 255, .85); }
.sekcija.tamna h2, .sekcija.tamna h3 { color: var(--na-boji); }

.sekcija-glava { max-width: 680px; margin: 0 auto var(--r10); text-align: center; }
.sekcija-oznaka {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--brend-100);
    border-radius: var(--rad-pun);
    background: var(--brend-50);
    font-size: var(--t-sm); font-weight: 600;
    color: var(--brend-700);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: var(--r4);
}
.sekcija-naslov { font-size: var(--t-3xl); line-height: var(--t-3xl-h); margin-bottom: var(--r3); }
.sekcija-opis { color: var(--n-500); font-size: var(--t-lg); line-height: var(--t-lg-h); }

@media (min-width: 900px) {
    .sekcija-naslov { font-size: var(--t-4xl); line-height: var(--t-4xl-h); }
}

/* ---------------- hero ---------------- */

.hero { padding: var(--r16) 0 var(--r12); }
.hero-prodajni { position: relative; overflow: hidden; isolation: isolate; }
.hero-prodajni .omot { position: relative; z-index: 1; }
.hero-mreza { display: grid; grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr); gap: clamp(40px, 6vw, 84px); align-items: center; }
.hero-sadrzaj { max-width: 570px; }

.hero h1 {
    font-size: var(--t-4xl);
    line-height: var(--t-4xl-h);
    margin: var(--r4) 0 var(--r5);
}
@media (min-width: 1000px) {
    .hero h1 { font-size: var(--t-5xl); line-height: var(--t-5xl-h); }
}
.hero-oznaka {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px;
    color: var(--brend-700); background: var(--brend-50);
    border: 1px solid var(--brend-100); border-radius: var(--rad-pun);
    font-size: var(--t-sm); font-weight: 600;
}
.hero-tekst { font-size: var(--t-lg); line-height: 27px; color: var(--n-500); margin-bottom: var(--r6); max-width: 540px; }
.hero-dugmad { display: flex; gap: var(--r3); flex-wrap: wrap; margin-bottom: var(--r5); }
.hero-dugmad .ikona:last-child { margin-left: 2px; }

.hero-aplikacija {
    overflow: hidden;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    box-shadow: 0 24px 56px var(--senka-boja-4), 0 3px 8px var(--senka-boja-1);
}
.hero-aplikacija-traka {
    display: flex; align-items: center; gap: 10px;
    min-height: 47px; padding: 0 17px;
    background: var(--n-25); border-bottom: 1px solid var(--n-200);
    color: var(--n-600); font-size: var(--t-sm); font-weight: 600;
}
.hero-aplikacija-značka { display: inline-flex; gap: 4px; }
.hero-aplikacija-značka span { width: 7px; height: 7px; border-radius: 50%; background: var(--n-300); }
.hero-aplikacija-značka span:first-child { background: var(--greska); opacity: .7; }
.hero-aplikacija-značka span:nth-child(2) { background: var(--akcenat-500); opacity: .75; }
.hero-aplikacija-značka span:last-child { background: var(--uspeh); opacity: .7; }
.hero-status { margin-left: auto; color: var(--uspeh); font-size: var(--t-xs); font-weight: 600; }
.hero-aplikacija-telo { padding: var(--r5); background: linear-gradient(145deg, var(--n-0) 0%, var(--brend-50) 150%); }
.hero-kpi-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r3); margin-bottom: var(--r3); }
.hero-kpi { padding: 15px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--rad); box-shadow: var(--senka-1); }
.hero-kpi > span { display: block; color: var(--n-500); font-size: var(--t-xs); margin-bottom: 7px; }
.hero-kpi strong { display: block; color: var(--n-900); font-size: var(--t-xl); letter-spacing: -.03em; line-height: 1.1; }
.hero-kpi strong small { color: var(--n-500); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; }
.hero-kpi em { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--uspeh); font-size: 11px; font-style: normal; }
.hero-kpi-rok em { color: var(--brend-600); }
.hero-limiti { padding: var(--r4); background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--rad); }
.hero-blok-naslov { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--r4); color: var(--n-500); font-size: var(--t-xs); }
.hero-blok-naslov span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--n-700); font-weight: 600; }
.hero-limiti .limit + .limit { margin-top: var(--r4); }
.hero-limiti .limit-glava { margin-bottom: 6px; }
.hero-limiti .limit-traka { height: 6px; }
.hero-limiti .limit-noga { margin-top: 5px; }
.hero-limiti .tekst-xs { display: none; }
.hero-faktura { display: flex; align-items: center; gap: 10px; margin-top: var(--r3); padding: 12px 14px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--rad); box-shadow: var(--senka-1); }
.hero-faktura-ikona { display: grid; place-items: center; width: 32px; height: 32px; background: var(--brend-50); border-radius: 9px; color: var(--brend-600); }
.hero-faktura div { min-width: 0; display: grid; gap: 1px; }
.hero-faktura strong { color: var(--n-800); font-size: var(--t-sm); }
.hero-faktura span { color: var(--uspeh); font-size: var(--t-xs); }
.hero-faktura b { margin-left: auto; color: var(--n-800); font-size: var(--t-sm); white-space: nowrap; }

@media (max-width: 1000px) {
    .hero-mreza { grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr); gap: var(--r8); }
    .hero-aplikacija-telo { padding: var(--r4); }
}
@media (max-width: 900px) {
    .hero-mreza { grid-template-columns: 1fr; gap: var(--r8); }
    .hero { padding: var(--r10) 0; }
    .hero-sadrzaj { max-width: 680px; }
    .hero-aplikacija { max-width: 640px; }
}
@media (max-width: 640px) {
    .hero h1 { font-size: 38px; line-height: 46px; }
    .hero-dugmad .dugme { flex: 1 1 auto; justify-content: center; }
    .hero-aplikacija-traka { padding: 0 13px; }
    .hero-status { display: none; }
    .hero-kpi { padding: 12px; }
    .hero-kpi strong { font-size: 18px; }
    .hero-faktura { padding: 10px; }
    .hero-faktura b { font-size: var(--t-xs); }
}

/* ---------------- kartice na sajtu ---------------- */

.sajt-mreza { display: grid; gap: var(--r5); }
.sajt-mreza.k2 { grid-template-columns: repeat(2, 1fr); }
.sajt-mreza.k3 { grid-template-columns: repeat(3, 1fr); }
.sajt-mreza.k4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) { .sajt-mreza.k4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .sajt-mreza.k3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sajt-mreza.k2, .sajt-mreza.k4 { grid-template-columns: 1fr; } }

.sajt-kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r6);
    transition: border-color var(--brzo), box-shadow var(--brzo), transform var(--brzo);
}
a.sajt-kartica:hover {
    border-color: var(--brend-300);
    box-shadow: var(--senka-3);
    text-decoration: none;
}
.sajt-kartica .ikona-krug {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: var(--rad);
    margin-bottom: var(--r4);
}
.sajt-kartica h3 { font-size: var(--t-xl); margin-bottom: 8px; }
.sajt-kartica p { color: var(--n-500); font-size: var(--t-md); line-height: 22px; }

/* pločice delatnosti */
.delatnost-plocica {
    display: flex; align-items: center; gap: 10px;
    padding: var(--r4);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    font-weight: 500;
    color: var(--n-700);
    font-size: var(--t-md);
    transition: all var(--brzo);
}
.delatnost-plocica:hover {
    border-color: var(--brend-600);
    background: var(--brend-50);
    color: var(--brend-700);
    text-decoration: none;
}
.delatnost-plocica .ikona { color: var(--n-400); }
.delatnost-plocica:hover .ikona { color: var(--brend-600); }
.delatnosti-veza { margin-top: var(--r6); }
.delatnosti-veza a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-md); font-weight: 600; }

/* Cenovnik (.cene, .cena-*, .prekidac-ciklusa) stoji u 2-komponente.css —
   isti blok koristi i čarobnjak pretplate u panelu, koji ne učitava ovaj fajl. */

/* ---------------- FAQ ---------------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
    border-bottom: 1px solid var(--n-200);
    padding: var(--r5) 0;
}
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r4);
    font-size: var(--t-lg); font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    font-size: var(--t-2xl); font-weight: 400; color: var(--n-500);
    line-height: 1;
    flex: none;
}
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--n-500); font-size: var(--t-md); line-height: 24px; margin-top: var(--r3); }

/* ---------------- utisci ---------------- */

.utisak { display: flex; flex-direction: column; gap: var(--r4); }
.utisak-tekst { font-size: var(--t-lg); line-height: 26px; }
.utisak-autor { display: flex; align-items: center; gap: 10px; }
.utisak-autor .ime { font-weight: 600; font-size: var(--t-md); }
.utisak-autor .posao { font-size: var(--t-sm); color: var(--n-500); }

/* ---------------- završni poziv i podnožje ---------------- */

.zavrsni-poziv { position: relative; overflow: hidden; }
.zavrsni-poziv::before, .zavrsni-poziv::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); pointer-events: none; }
.zavrsni-poziv::before { top: -310px; left: -80px; }
.zavrsni-poziv::after { right: -110px; bottom: -330px; }
.zavrsni-poziv .omot { position: relative; z-index: 1; }
.zavrsni-poziv .sekcija-naslov { margin-top: var(--r4); }
.zavrsni-poziv .sekcija-opis { max-width: 610px; margin: 0 auto; color: rgba(255,255,255,.7); }
.zavrsni-poziv-akcije { display: flex; flex-direction: column; align-items: center; gap: var(--r4); margin-top: var(--r6); }
.zavrsni-kontakt { color: rgba(255,255,255,.82); font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 4px; }
.zavrsni-kontakt:hover { color: var(--na-boji); }

.sajt-noga { background: var(--brend-900); color: rgba(255, 255, 255, .7); padding: var(--r16) 0 var(--r8); font-size: var(--t-md); }
.noga-mreza { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r8); margin-bottom: var(--r10); }
.sajt-noga h4 { color: var(--na-boji); font-size: var(--t-md); margin-bottom: var(--r4); }
.sajt-noga ul { list-style: none; display: grid; gap: 10px; }
.sajt-noga a { color: rgba(255, 255, 255, .7); font-size: var(--t-sm); }
.sajt-noga a:hover { color: var(--na-boji); }
.noga-dno {
    display: flex; justify-content: space-between; gap: var(--r5); flex-wrap: wrap;
    padding-top: var(--r6);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--t-sm);
}

@media (max-width: 900px) {
    .noga-mreza { grid-template-columns: 1fr 1fr; gap: var(--r6); }
}
@media (max-width: 560px) {
    .noga-mreza { grid-template-columns: 1fr; }
}

/* ---------------- članak (vodič) ---------------- */

.clanak { max-width: 720px; margin: 0 auto; }
.clanak h2 { font-size: var(--t-2xl); margin: var(--r8) 0 var(--r3); }
.clanak h3 { font-size: var(--t-xl); margin: var(--r6) 0 var(--r2); }
.clanak p { margin-bottom: var(--r4); color: var(--n-700); }
.clanak ul, .clanak ol { margin: 0 0 var(--r4) var(--r5); display: grid; gap: 8px; }
.clanak li { color: var(--n-700); }
.clanak blockquote {
    border-left: 3px solid var(--brend-600);
    background: var(--brend-50);
    padding: var(--r4) var(--r5);
    border-radius: 0 var(--rad) var(--rad) 0;
    margin: var(--r5) 0;
}
.clanak img { border-radius: var(--rad); margin: var(--r5) 0; }

.kljucno {
    background: var(--akcenat-50);
    border: 1px solid var(--akcenat-400);
    border-radius: var(--rad);
    padding: var(--r5);
    margin-bottom: var(--r8);
}
.kljucno h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--akcenat-700); margin-bottom: 8px; }

/* .napomena-odgovornost je u 2-komponente.css — koristi je i aplikacija */

/* ---------------- vodiči ---------------- */

.mreza-vodici { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r5); }

@media (max-width: 900px) { .mreza-vodici { grid-template-columns: 1fr; } }

.vodic-kartica {
    display: flex; flex-direction: column;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r5);
    color: inherit;
    transition: border-color var(--brzo), box-shadow var(--brzo), transform var(--brzo);
}
.vodic-kartica:hover {
    text-decoration: none;
    border-color: var(--brend-600);
    box-shadow: var(--senka-3);
    transform: translateY(-2px);
}
.vodic-kategorija {
    align-self: flex-start;
    font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--brend-700);
    background: var(--brend-50);
    padding: 3px 10px;
    border-radius: var(--rad-pun);
    margin-bottom: var(--r3);
}
.vodic-naslov { font-size: var(--t-lg); font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.vodic-uvod { font-size: var(--t-sm); color: var(--n-500); line-height: 1.6; flex: 1; }
.vodic-noga { font-size: var(--t-xs); color: var(--n-500); margin-top: var(--r4); }

/* Ključno u tri rečenice — ono što pročita i onaj ko ne pročita ceo tekst. */
.vodic-kljucno {
    max-width: 760px; margin: 0 auto var(--r8);
    background: var(--brend-50);
    border-left: 3px solid var(--brend-600);
    border-radius: 0 var(--rad) var(--rad) 0;
    padding: var(--r5);
}
.vodic-kljucno-naslov {
    font-size: var(--t-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--brend-700);
    margin-bottom: 6px;
}
.vodic-kljucno p { margin: 0; font-size: var(--t-lg); line-height: 1.6; }

/* Tekst vodiča i prilagođenih stranica — jedina mesta gde ide slobodan HTML. */
.vodic-sadrzaj { max-width: 760px; margin: 0 auto; font-size: var(--t-lg); line-height: 1.75; color: var(--n-800); }
.vodic-sadrzaj > * + * { margin-top: var(--r5); }
.vodic-sadrzaj h2 { font-size: var(--t-2xl); font-weight: 700; margin-top: var(--r8); line-height: 1.3; }
.vodic-sadrzaj h3 { font-size: var(--t-xl); font-weight: 600; margin-top: var(--r6); }
.vodic-sadrzaj ul, .vodic-sadrzaj ol { padding-left: var(--r6); display: grid; gap: 8px; }
.vodic-sadrzaj li { line-height: 1.7; }
.vodic-sadrzaj a { color: var(--brend-600); text-decoration: underline; }
.vodic-sadrzaj blockquote {
    border-left: 3px solid var(--n-300);
    padding-left: var(--r5);
    color: var(--n-500);
    font-style: italic;
}
.vodic-sadrzaj code {
    font-family: var(--pismo-mono); font-size: .9em;
    background: var(--n-100); padding: 2px 6px; border-radius: var(--rad-sm);
}
.vodic-sadrzaj pre {
    background: var(--povrsina-tamna); color: var(--na-tamnoj);
    padding: var(--r4); border-radius: var(--rad);
    overflow-x: auto; font-size: var(--t-sm);
}
.vodic-sadrzaj pre code { background: none; padding: 0; color: inherit; }
.vodic-sadrzaj table { width: 100%; border-collapse: collapse; font-size: var(--t-md); display: block; overflow-x: auto; }
.vodic-sadrzaj th, .vodic-sadrzaj td { padding: 10px var(--r3); border-bottom: 1px solid var(--n-200); text-align: left; }
.vodic-sadrzaj th { background: var(--n-25); font-weight: 600; white-space: nowrap; }
.vodic-sadrzaj hr { border: 0; border-top: 1px solid var(--n-200); margin: var(--r8) 0; }

/* ---------------- meni na telefonu ---------------- */

/* <details> umesto dugmeta sa skriptom: otvara se i bez JavaScripta.
   Trougao koji pregledač sam dodaje se sklanja — imamo svoju ikonu. */
.sajt-meni-mob { display: none; position: relative; }
.sajt-meni-mob > summary {
    list-style: none;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    color: var(--n-700);
    cursor: pointer;
}
.sajt-meni-mob > summary::-webkit-details-marker { display: none; }
.sajt-meni-mob[open] > summary { background: var(--n-50); border-color: var(--n-300); }

.sajt-meni-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 240px;
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--r3);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-3);
}
.sajt-meni-panel > a:not(.dugme) {
    padding: 10px 12px;
    border-radius: var(--rad-sm);
    font-size: var(--t-md); font-weight: 500;
    color: var(--n-700);
}
.sajt-meni-panel > a:not(.dugme):hover { background: var(--n-50); text-decoration: none; }
.sajt-meni-crta { height: 1px; background: var(--n-200); margin: 8px 0; }
.sajt-meni-panel .dugme + .dugme { margin-top: 8px; }

@media (max-width: 900px) {
    .sajt-meni-mob { display: block; }
}

/* ---------------- ⚠ PRIVREMENA traka za brzi ulaz ----------------
   Ceo blok ide napolje kad se `sajt.brze_prijave` trajno ugasi. */

.brzi-ulaz {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--r3);
    padding: 7px var(--r6);
    background: var(--povrsina-tamna);
    color: var(--na-tamnoj);
    font-size: var(--t-sm);
}
.brzi-ulaz-oznaka {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    padding: 2px 7px;
    background: var(--akcenat-500); color: var(--brend-900);
    border-radius: var(--rad-pun);
}
.brzi-ulaz-ko {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw;
}
.brzi-ulaz a, .brzi-ulaz button {
    color: var(--na-boji); font-size: var(--t-sm); font-weight: 500;
    background: none; border: 0; padding: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.brzi-ulaz a:hover, .brzi-ulaz button:hover { color: var(--akcenat-500); }
.brzi-ulaz form { display: inline; margin-left: auto; }

@media (max-width: 640px) {
    .brzi-ulaz { padding: 7px var(--r4); gap: var(--r2) var(--r3); }
    .brzi-ulaz form { margin-left: 0; }
}

/* ============================================================
   Početna V2 — ritam i produkt-makete su inspirisani savremenim
   SaaS landing stranicama, a sadržaj i Fakto vizuelni identitet ostaju naši.
   ============================================================ */

.hero-v2 { padding: 92px 0 142px; background: linear-gradient(180deg, var(--n-0) 0%, var(--brend-50) 100%); }
.hero-v2-uvod { max-width: 760px; margin: 0 auto; text-align: center; }
.hero-v2 .hero-sadrzaj { max-width: none; }
.hero-v2 h1 { max-width: 760px; margin: var(--r4) auto var(--r5); }
.hero-v2 .hero-tekst { max-width: 610px; margin: 0 auto var(--r6); }
.hero-v2 .hero-dugmad, .hero-v2 .hero-prednosti { justify-content: center; }
.hero-v2-scena { position: relative; z-index: 2; max-width: 900px; margin: var(--r10) auto 0; }
.hero-v2 .hero-aplikacija { max-width: 900px; }
.hero-v2 .hero-aplikacija-telo { padding: var(--r6); }
.hero-v2 .hero-kpi { padding: var(--r4); }
.izvestaj-mreza { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(460px, 1.2fr); align-items: center; gap: clamp(48px, 8vw, 110px); }
.izvestaj-kopija { max-width: 470px; }
.izvestaj-kopija .sekcija-oznaka { margin-bottom: var(--r3); }
.izvestaj-kopija .sekcija-naslov { margin-bottom: var(--r4); }
.izvestaj-kopija .sekcija-opis { margin-bottom: var(--r6); }
.izvestaj-prikaz { position: relative; min-height: 435px; padding: 32px 30px 0; background: var(--brend-50); border-radius: var(--rad-lg); }
.izvestaj-prikaz::before { content: ''; position: absolute; inset: auto -50px -95px 80px; height: 230px; background: var(--brend-100); border-radius: 50%; filter: blur(18px); opacity: .75; }
.izvestaj-prozor { position: relative; z-index: 1; overflow: hidden; height: 345px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: 17px 17px 0 0; box-shadow: var(--senka-4); }
.izvestaj-prozor-glava { display: flex; align-items: center; gap: 5px; height: 43px; padding: 0 14px; background: var(--n-25); border-bottom: 1px solid var(--n-200); }
.izvestaj-prozor-glava span { width: 7px; height: 7px; border-radius: 50%; background: var(--n-300); }
.izvestaj-prozor-glava span:first-child { background: var(--greska); opacity: .7; }
.izvestaj-prozor-glava span:nth-child(2) { background: var(--akcenat-500); opacity: .75; }
.izvestaj-prozor-glava span:nth-child(3) { background: var(--uspeh); opacity: .7; }
.izvestaj-prozor-glava b { margin-left: 9px; color: var(--n-700); font-size: var(--t-xs); }
.izvestaj-prozor-telo { padding: var(--r4); }
.izvestaj-mini-kartice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r3); }
.izvestaj-mini-kartice > div { position: relative; overflow: hidden; min-height: 90px; padding: var(--r3); border: 1px solid var(--n-200); border-radius: var(--rad); }
.izvestaj-mini-kartice small { display: block; color: var(--n-500); font-size: var(--t-xs); margin-bottom: 7px; }
.izvestaj-mini-kartice strong { position: relative; z-index: 1; color: var(--n-800); font-size: var(--t-md); }
.izvestaj-mini-kartice i { position: absolute; width: 95px; height: 95px; right: -45px; bottom: -55px; border-radius: 50%; background: var(--brend-100); }
.izvestaj-mini-kartice > div:last-child i { background: var(--akcenat-50); }
.izvestaj-grafik { display: flex; align-items: end; gap: 10px; height: 150px; margin-top: var(--r4); padding: 18px 18px 20px; border-radius: var(--rad); background: linear-gradient(180deg, var(--n-25), var(--n-0)); border: 1px solid var(--n-100); }
.izvestaj-grafik span { flex: 1; min-width: 10px; background: linear-gradient(180deg, var(--brend-300), var(--brend-600)); border-radius: 8px 8px 2px 2px; }
.izvestaj-grafik span:nth-child(3n) { background: linear-gradient(180deg, var(--akcenat-400), var(--akcenat-500)); }
.izvestaj-plutajuca { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--rad); box-shadow: var(--senka-3); }
.izvestaj-plutajuca > .ikona { display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; color: var(--brend-600); background: var(--brend-50); border-radius: 9px; }
.izvestaj-plutajuca span { display: grid; gap: 2px; }
.izvestaj-plutajuca small { color: var(--n-500); font-size: 11px; }
.izvestaj-plutajuca b { color: var(--n-800); font-size: var(--t-xs); }
.izvestaj-plutajuca-limit { top: 118px; right: -38px; }
.izvestaj-plutajuca-rok { bottom: 20px; left: -34px; }

.sekcija-problemi .sajt-kartica { position: relative; overflow: hidden; min-height: 238px; border-color: var(--n-100); box-shadow: var(--senka-1); }
.sekcija-problemi .sajt-kartica::after { content: ''; position: absolute; width: 110px; height: 110px; right: -52px; bottom: -58px; background: var(--brend-50); border-radius: 50%; }
.sekcija-problemi .sajt-kartica > * { position: relative; z-index: 1; }
.sekcija-delatnosti { background: var(--n-0); }
.delatnosti-istaknute .delatnost-plocica { min-height: 78px; box-shadow: var(--senka-1); }

.vodici-pocetna-glava { align-items: end; margin-bottom: var(--r10); }
.vodici-pocetna-glava .sekcija-oznaka { margin-bottom: var(--r2); }
.vodici-pocetna-glava .sekcija-naslov { margin-bottom: 0; }

.mozaik-grafik span:nth-child(2) { height: 52%; }.mozaik-grafik span:nth-child(3) { height: 39%; }.mozaik-grafik span:nth-child(4) { height: 72%; }.mozaik-grafik span:nth-child(5) { height: 57%; }
.mozaik-krug small { color: var(--n-500); font-size: 10px; }
.mozaik-lista i { display: block; height: 9px; background: var(--n-100); border-radius: var(--rad-pun); }.mozaik-lista i::before { content: ''; display: block; width: 25%; height: 100%; background: var(--brend-500); border-radius: inherit; }.mozaik-lista i:nth-child(2)::before { width: 52%; }.mozaik-lista i:nth-child(3)::before { width: 78%; }.mozaik-lista i:nth-child(4)::before { width: 43%; }
.mozaik-kpo span { color: var(--n-700); font-size: var(--t-sm); font-weight: 600; }

@media (max-width: 1000px) {
    .izvestaj-mreza { grid-template-columns: 1fr 1fr; gap: var(--r8); }
    .izvestaj-prikaz { padding: var(--r5) var(--r4) 0; }
    .izvestaj-plutajuca-limit { right: -18px; }
    .izvestaj-plutajuca-rok { left: -18px; }
}
@media (max-width: 780px) {
    .hero-v2 { padding-top: var(--r12); }
    .izvestaj-mreza { grid-template-columns: 1fr; }
    .izvestaj-kopija { max-width: 600px; }
    .izvestaj-prikaz { max-width: 590px; width: calc(100% - 30px); margin: 0 auto; }
}
@media (max-width: 640px) {
    .hero-v2 { padding: var(--r10) 0 var(--r12); }
    .hero-v2 h1 { font-size: 38px; line-height: 46px; }
    .hero-v2 .hero-aplikacija-telo { padding: var(--r3); }
    .hero-v2-scena { margin-top: var(--r8); }
    .izvestaj-prikaz { min-height: 365px; padding: var(--r3) var(--r2) 0; }
    .izvestaj-prozor { height: 300px; }.izvestaj-grafik { height: 116px; gap: 7px; }.izvestaj-plutajuca { transform: scale(.85); }.izvestaj-plutajuca-limit { transform-origin: top right; right: -25px; }.izvestaj-plutajuca-rok { transform-origin: bottom left; left: -22px; bottom: -3px; }
    .vodici-pocetna-glava { display: block; }.vodici-pocetna-glava .sekcija-naslov { font-size: var(--t-3xl); }
}

/* ---------------- mikro-animacije javnog sajta ---------------- */

@keyframes sajt-izranjanje {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sajt-izranjanje-stavke {
    from { opacity: 0; filter: blur(7px); transform: translateY(18px) scale(.985); }
    to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes sajt-lebdenje {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes sajt-puls {
    0%, 100% { box-shadow: var(--senka-3); }
    50% { box-shadow: 0 12px 28px color-mix(in srgb, var(--brend-600) 18%, transparent); }
}

.hero-v2 .hero-aplikacija { animation: sajt-lebdenje 7s ease-in-out 1s infinite; }
.izvestaj-plutajuca { animation: sajt-puls 4.6s ease-in-out infinite; }
.izvestaj-plutajuca-rok { animation-delay: 1.2s; }

/* Kriva za ulazne animacije.

   NE koristi se `--sporo`: on je `240ms cubic-bezier(…)`, dakle vreme I kriva
   u jednoj vrednosti. U skraćenici `animation` prvo vreme je trajanje a drugo
   kašnjenje, pa je `--sporo` sekcijama tiho dodavao 240ms kašnjenja — a kod
   stavki, gde uz njega ide i `--ulaz-kasnjenje`, skraćenica je dobijala TRI
   vremena, što je nedozvoljeno, pa je pregledač odbacivao celo pravilo.

   Posledica je bila da stavke (kartice, cene, FAQ) ostaju na `opacity: 0`
   zauvek — sekcija se pojavi prazna. Zato ovde kriva bez vremena. */
.sajt-animacije-spremne { --ulaz-kriva: cubic-bezier(.2, .8, .2, 1); }

.sajt-animacije-spremne .sajt-sekcija-ulaz { opacity: 0; transform: translateY(28px); }
.sajt-animacije-spremne .sajt-sekcija-ulaz.sajt-vidljiva {
    animation: sajt-izranjanje .6s var(--ulaz-kriva) both;
}

.sajt-animacije-spremne .sajt-stavka-ulaz { opacity: 0; filter: blur(7px); transform: translateY(18px) scale(.985); }
.sajt-animacije-spremne .sajt-vidljiva .sajt-stavka-ulaz {
    animation: sajt-izranjanje-stavke .5s var(--ulaz-kriva) var(--ulaz-kasnjenje, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
    .hero-v2 .hero-aplikacija, .izvestaj-plutajuca, .zavrsni-mozaik,
    .sajt-animacije-spremne .sajt-sekcija-ulaz,
    .sajt-animacije-spremne .sajt-stavka-ulaz {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Javni sajt nema gornju traku panela; njegovo zaglavlje je lepljivo na 12px
   i niže je, pa lepljiva kolona kreće ranije. */
body.sajt { --lepljivi-vrh: 88px; }

/* ============================================================
   Scene koje pričaju priču
   ------------------------------------------------------------
   Tri mesta na naslovnoj se KREĆU: tabla u heroju, brojači uštede i
   vremenska linija „Kako radi". Pravilo je svuda isto:

     · server iscrta KRAJNJE stanje;
     · skripta doda klasu „spremna/spremni" — tek TADA CSS vrati elemente na
       početak i čeka da ih skripta upali;
     · bez skripte, uz „smanji kretanje" ili ako skripta padne, klase nema, pa
       posetilac gleda gotov ekran. Nikad prazan.
   ============================================================ */

/* ---------------- hero: tabla koja radi ---------------- */

.hero-faktura { position: relative; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
.hero-faktura-stanje { position: relative; display: block; height: 16px; font-size: var(--t-xs); }
.hero-faktura-stanje i {
    position: absolute; left: 0; top: 0;
    font-style: normal; white-space: nowrap;
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}
.hero-faktura-stanje [data-stanje="pripremi"]  { color: var(--n-500); }
.hero-faktura-stanje [data-stanje="poslata"]   { color: var(--brend-600); }
.hero-faktura-stanje [data-stanje="naplacena"] { color: var(--uspeh); }

/* Krajnje stanje (i bez skripte): faktura je tu i naplaćena. */
.hero-faktura-stanje [data-stanje="naplacena"] { opacity: 1; transform: none; }

/* Obaveštenje iskoči iz donjeg desnog ugla table. Van scene ne postoji —
   bez skripte nema ni šta da iskoči, pa je skriveno i ne zauzima mesto. */
.hero-obavestenje {
    position: absolute; right: var(--r5); bottom: var(--r5); z-index: 3;
    display: flex; align-items: center; gap: 9px;
    padding: 10px 14px;
    background: var(--n-900); color: var(--na-boji);
    border-radius: var(--rad);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
    font-size: var(--t-xs);
    opacity: 0; transform: translateY(14px) scale(.96);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.hero-obavestenje .ikona { color: var(--akcenat-400); flex: none; }
.hero-obavestenje strong { color: var(--na-boji); }
.hero-aplikacija-telo { position: relative; }

/* Trake limita: skripta ih spusti na 0% pa vrati na cilj — ovo je brzina
   kojom se pune. Podrazumevani `--sporo` je 240ms; ovde treba da se VIDI. */
.scena-spremna .limit-popuna { transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }

/* Početak scene: faktura još nije stigla, nijedno stanje nije upaljeno. */
.scena-spremna[data-scena=""] .hero-faktura,
.scena-spremna[data-scena="broji"] .hero-faktura { opacity: 0; transform: translateY(18px); }
.scena-spremna[data-scena=""] .hero-faktura-stanje i,
.scena-spremna[data-scena="broji"] .hero-faktura-stanje i { opacity: 0; transform: translateY(6px); }

/* Faktura ulazi — „U pripremi". */
.scena-spremna[data-scena="faktura-ulazi"] .hero-faktura-stanje i { opacity: 0; transform: translateY(6px); }
.scena-spremna[data-scena="faktura-ulazi"] .hero-faktura-stanje [data-stanje="pripremi"] { opacity: 1; transform: none; }

/* „Poslata". */
.scena-spremna[data-scena="faktura-poslata"] .hero-faktura-stanje i { opacity: 0; transform: translateY(6px); }
.scena-spremna[data-scena="faktura-poslata"] .hero-faktura-stanje [data-stanje="poslata"] { opacity: 1; transform: none; }

/* „Naplaćena" — i od tada pa do kraja petlje. */
.scena-spremna[data-scena="faktura-naplacena"] .hero-faktura-stanje i,
.scena-spremna[data-scena="kpo-javlja"] .hero-faktura-stanje i,
.scena-spremna[data-scena="kpo-tiho"] .hero-faktura-stanje i { opacity: 0; transform: translateY(6px); }
.scena-spremna[data-scena="faktura-naplacena"] .hero-faktura-stanje [data-stanje="naplacena"],
.scena-spremna[data-scena="kpo-javlja"] .hero-faktura-stanje [data-stanje="naplacena"],
.scena-spremna[data-scena="kpo-tiho"] .hero-faktura-stanje [data-stanje="naplacena"] { opacity: 1; transform: none; }

/* Naplata se i oseti: kartica kratko „zasvetli". */
.scena-spremna[data-scena="faktura-naplacena"] .hero-faktura { box-shadow: 0 0 0 3px color-mix(in srgb, var(--uspeh) 22%, transparent), var(--senka-1); }

.scena-spremna[data-scena="kpo-javlja"] .hero-obavestenje { opacity: 1; transform: none; }

/* ---------------- ušteda vremena: brojači ---------------- */

.sekcija-usteda { padding-top: var(--r10); padding-bottom: var(--r10); }
.usteda-mreza {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r4);
    max-width: 1040px; margin: 0 auto;
}
.usteda-stavka {
    padding: var(--r6) var(--r5);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    text-align: center;
}
.usteda-stavka b {
    display: flex; align-items: baseline; justify-content: center; gap: 4px;
    font-family: var(--font-naslov);
    font-size: 46px; line-height: 1; letter-spacing: -.04em;
    color: var(--brend-600);
    font-variant-numeric: tabular-nums;
}
.usteda-stavka b i { font-style: normal; min-width: 1.2ch; }
.usteda-stavka b small { font-size: var(--t-md); font-weight: 600; color: var(--n-500); letter-spacing: 0; }
.usteda-stavka span { display: block; margin-top: 10px; color: var(--n-500); font-size: var(--t-sm); line-height: 20px; }

@media (max-width: 900px) { .usteda-mreza { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .usteda-mreza { grid-template-columns: 1fr; } .usteda-stavka b { font-size: 40px; } }

/* ---------------- kako radi: vremenska linija ---------------- */

.tok { position: relative; max-width: 1040px; margin: 0 auto; padding: var(--r2) 0; }

/* Linija po sredini. `::before` je siva podloga cele dužine, `::after` je
   obojen deo koji raste sa `--napredak` (0–1). Bez skripte `--napredak` nema,
   pa je linija cela — kao i sve ostalo bez skripte. */
.tok-linija { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); }
.tok-linija::before { content: ''; position: absolute; inset: 0; background: var(--n-200); border-radius: var(--rad-pun); }
.tok-linija::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: calc(var(--napredak, 1) * 100%);
    background: linear-gradient(180deg, var(--brend-500), var(--brend-700));
    border-radius: var(--rad-pun);
    transition: height .25s linear;
}

.tok-korak {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 96px);
    align-items: center;
    padding: var(--r8) 0;
}
.tok-korak + .tok-korak { margin-top: var(--r2); }

/* Tačka na liniji kod svakog koraka; upaljen tok-korak je puni, sa oreolom. */
.tok-korak::before {
    content: ''; position: absolute; left: 50%; top: 50%; z-index: 1;
    width: 16px; height: 16px; transform: translate(-50%, -50%);
    background: var(--n-0); border: 3px solid var(--n-300); border-radius: 50%;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.tok-korak.je-aktivan::before,
.tok:not(.tok-spremni) .tok-korak::before {
    background: var(--brend-600); border-color: var(--brend-600);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--brend-600) 16%, transparent);
}

.tok-kopija { padding-right: var(--r4); }
.tok-korak-desno .tok-kopija { order: 2; padding-right: 0; padding-left: var(--r4); }
.tok-korak-desno .tok-ekran { order: 1; }

.tok-broj {
    display: inline-block; margin-bottom: var(--r3);
    padding: 3px 9px; border-radius: var(--rad-sm);
    background: var(--brend-900); color: var(--na-boji);
    font-family: var(--pismo-mono); font-size: 11px; letter-spacing: .12em;
}
.tok-kopija h3 { font-size: var(--t-2xl); line-height: 1.15; margin-bottom: var(--r3); }
.tok-kopija p { color: var(--n-500); font-size: var(--t-md); line-height: 24px; max-width: 420px; }
.tok-vreme {
    display: inline-flex; align-items: center; gap: 6px; margin-top: var(--r4);
    padding: 6px 12px; border-radius: var(--rad-pun);
    background: var(--akcenat-50); color: var(--akcenat-700);
    font-size: var(--t-sm); font-weight: 600;
}

/* Kopija i ekran ulaze svaki sa svoje strane kad se tok-korak upali. */
.tok-spremni .tok-kopija,
.tok-spremni .tok-ekran { opacity: 0; transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.tok-spremni .tok-kopija { transform: translateX(-24px); }
.tok-spremni .tok-ekran { transform: translateX(24px); }
.tok-spremni .tok-korak-desno .tok-kopija { transform: translateX(24px); }
.tok-spremni .tok-korak-desno .tok-ekran { transform: translateX(-24px); }
.tok-spremni .tok-korak.je-aktivan .tok-kopija,
.tok-spremni .tok-korak.je-aktivan .tok-ekran { opacity: 1; transform: none; }

/* mali ekran uz tok-korak */
.mini-ekran {
    overflow: hidden;
    background: var(--n-0); border: 1px solid var(--n-200); border-radius: 16px;
    box-shadow: var(--senka-4);
}
.mini-ekran-glava { display: flex; align-items: center; gap: 5px; padding: 10px 14px; background: var(--n-25); border-bottom: 1px solid var(--n-200); }
.mini-ekran-glava span { width: 7px; height: 7px; border-radius: 50%; background: var(--n-300); }
.mini-ekran-glava b { margin-left: 8px; color: var(--n-600); font-size: var(--t-xs); font-weight: 600; }
.mini-ekran-telo { padding: var(--r4); display: grid; gap: var(--r3); }

.mini-polje { display: grid; gap: 3px; padding: 9px 12px; border: 1px solid var(--n-200); border-radius: var(--rad); background: var(--n-0); }
.mini-polje small { color: var(--n-500); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.mini-polje b { color: var(--n-900); font-size: var(--t-sm); font-variant-numeric: tabular-nums; min-height: 18px; }
.mini-polje-pib { border-color: var(--brend-300); box-shadow: 0 0 0 3px var(--brend-50); }
.mini-polje-pib b::after { content: ''; display: inline-block; width: 1px; height: 14px; margin-left: 2px; background: var(--brend-600); vertical-align: -2px; opacity: 0; }
.mini-popunjeno { display: grid; gap: var(--r2); }
.mini-popunjeno .mini-polje { transition: opacity .4s ease, transform .4s ease; }

.mini-znacka {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    padding: 5px 10px; border-radius: var(--rad-pun);
    background: var(--uspeh-bg); color: var(--uspeh);
    font-size: var(--t-xs); font-weight: 600;
    transition: opacity .4s ease, transform .4s ease;
}
.mini-ekran > .mini-znacka { margin: 0 var(--r4) var(--r4); }

/* Korak 1 bez upaljenog stanja: PIB prazan sa kursorom, ostalo skriveno. */
.tok-spremni .tok-korak:not(.je-otkucano) .mini-polje-pib b::after { opacity: 1; animation: mini-kursor 1s steps(2) infinite; }
.tok-spremni .tok-korak:not(.je-otkucano) .mini-popunjeno .mini-polje,
.tok-spremni .tok-korak:not(.je-otkucano) .mini-ekran-telo .mini-znacka { opacity: 0; transform: translateY(8px); }
.tok-spremni .tok-korak.je-otkucano .mini-popunjeno .mini-polje:nth-child(1) { transition-delay: .1s; }
.tok-spremni .tok-korak.je-otkucano .mini-popunjeno .mini-polje:nth-child(2) { transition-delay: .25s; }
.tok-spremni .tok-korak.je-otkucano .mini-popunjeno .mini-polje:nth-child(3) { transition-delay: .4s; }
.tok-spremni .tok-korak.je-otkucano .mini-ekran-telo .mini-znacka { transition-delay: .6s; }

@keyframes mini-kursor { 50% { opacity: 0; } }

/* Korak 2: meni. Suvišne stavke se precrtaju i izblede, jedna po jedna. */
.mini-meni { list-style: none; margin: 0; padding: var(--r3) var(--r4); display: grid; gap: 2px; }
.mini-meni li {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: var(--rad-sm);
    color: var(--n-800); font-size: var(--t-sm);
    transition: opacity .5s ease, color .5s ease, text-decoration-color .5s ease;
}
.mini-meni li .ikona { color: var(--brend-600); }
.mini-meni li.suvisno { color: var(--n-400); opacity: .6; text-decoration: line-through; text-decoration-color: var(--greska); }
.mini-meni li.suvisno .ikona { color: var(--n-400); }

.tok-spremni .tok-korak:not(.je-aktivan) .mini-meni li.suvisno { opacity: 1; color: var(--n-800); text-decoration-color: transparent; }
.tok-spremni .tok-korak:not(.je-aktivan) .mini-meni li.suvisno .ikona { color: var(--brend-600); }
.tok-spremni .tok-korak.je-aktivan .mini-meni li.suvisno:nth-of-type(5) { transition-delay: .6s; }
.tok-spremni .tok-korak.je-aktivan .mini-meni li.suvisno:nth-of-type(6) { transition-delay: .9s; }
.tok-spremni .tok-korak.je-aktivan .mini-meni li.suvisno:nth-of-type(7) { transition-delay: 1.2s; }
.tok-spremni .tok-korak:not(.je-aktivan) .mini-ekran > .mini-znacka { opacity: 0; transform: translateY(8px); }
.tok-spremni .tok-korak.je-aktivan .mini-ekran > .mini-znacka { transition-delay: 1.5s; }

/* Korak 3: faktura ode, strelica, KPO red se upiše. */
.mini-red {
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--n-200); border-radius: var(--rad); background: var(--n-0);
    transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1), border-color .4s ease;
}
.mini-red-ikona { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brend-50); color: var(--brend-600); }
.mini-red > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.mini-red > span:nth-child(2) b { color: var(--n-900); font-size: var(--t-sm); }
.mini-red > span:nth-child(2) small { color: var(--n-500); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-red > b { color: var(--n-900); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.mini-status { padding: 3px 8px; border-radius: var(--rad-pun); background: var(--brend-50); color: var(--brend-700); font-size: 10px; font-style: normal; font-weight: 600; white-space: nowrap; }
.mini-red-kpo { border-color: var(--uspeh-ivica); }
.mini-red-kpo .mini-red-ikona { background: var(--uspeh-bg); color: var(--uspeh); }
.mini-red-kpo .mini-status { background: var(--uspeh-bg); color: var(--uspeh); }
.mini-strelica { display: grid; place-items: center; color: var(--n-400); height: 18px; transition: opacity .4s ease; }

.tok-spremni .tok-korak:not(.je-aktivan) .mini-red-faktura { opacity: 0; transform: translateX(-16px); }
.tok-spremni .tok-korak:not(.je-aktivan) .mini-strelica,
.tok-spremni .tok-korak:not(.je-aktivan) .mini-red-kpo { opacity: 0; transform: translateY(10px); }
.tok-spremni .tok-korak.je-aktivan .mini-strelica { transition-delay: .7s; }
.tok-spremni .tok-korak.je-aktivan .mini-red-kpo { transition-delay: 1s; }

@media (max-width: 860px) {
    .tok-linija { left: 14px; transform: none; }
    .tok-korak { grid-template-columns: 1fr; gap: var(--r5); padding: var(--r6) 0 var(--r6) 44px; }
    .tok-korak::before { left: 14px; top: 34px; transform: translateX(-50%); }
    .tok-kopija, .tok-korak-desno .tok-kopija { order: 1; padding: 0; }
    .tok-ekran, .tok-korak-desno .tok-ekran { order: 2; }
    .tok-spremni .tok-kopija, .tok-spremni .tok-korak-desno .tok-kopija { transform: translateY(16px); }
    .tok-spremni .tok-ekran, .tok-spremni .tok-korak-desno .tok-ekran { transform: translateY(16px); }
    .tok-kopija h3 { font-size: var(--t-xl); }
    .hero-obavestenje { right: var(--r3); bottom: var(--r3); }
}

/* „Smanji kretanje": skripte se ne pale, ali ako neko sistemski prekidač
   promeni usred posete, ni ono što je već zakačeno ne sme da treperi. */
@media (prefers-reduced-motion: reduce) {
    .hero-faktura, .hero-faktura-stanje i, .hero-obavestenje,
    .limit-popuna, .tok-linija::after,
    .tok-kopija, .tok-ekran, .mini-polje, .mini-znacka, .mini-meni li, .mini-red, .mini-strelica {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   Drugi krug scena: traka napretka, poređenje, klizne trake,
   prekidač cena, akordeon.

   Isto pravilo kao u prvom krugu: server iscrta KRAJNJE stanje, skripta doda
   svoju klasu i tek tada CSS sme nešto da sakrije ili pomeri.
   ============================================================ */

/* ---------------- traka napretka čitanja ---------------- */

.napredak-strane {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: 3px;
    pointer-events: none;
}
.napredak-strane i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--brend-500), var(--akcenat-500));
    transform: scaleX(0);            /* bez skripte ostaje 0 — traka se ne vidi */
    transform-origin: 0 50%;
    will-change: transform;
}

/* Zaglavlje pri skrolu: uže, jača senka. Ne krije se — dugme „Probaj
   besplatno" mora da ostane na ekranu i posle šest hiljada piksela. */
.sajt-glava.je-skrolovano { box-shadow: var(--senka-4), 0 14px 34px var(--senka-boja-1); border-color: var(--brend-200); }
.sajt-glava.je-skrolovano .omot { height: 54px; }
/* Osnovno pravilo `.omot` nema prelaz, pa se visina bez ovoga menja skokom —
   zaglavlje kvrcne na 24 piksela skrola umesto da se skupi. */
.sajt-glava .omot { transition: height var(--srednje); }

/* ---------------- poređenje: bez programa / sa Faktom ---------------- */

.poredjenje {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
    gap: clamp(16px, 3vw, 34px);
    margin-bottom: var(--r10);
}

.poredjenje-strana {
    padding: var(--r6);
    border-radius: var(--rad-lg);
    border: 1px solid var(--n-200);
    background: var(--n-0);
}
.poredjenje-pre { background: var(--n-25); }
.poredjenje-posle { border-color: var(--brend-200); box-shadow: var(--senka-3); }

.poredjenje-glava { display: grid; grid-template-columns: auto 1fr; gap: 3px var(--r3); align-items: center; margin-bottom: var(--r5); }
.poredjenje-znak { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.poredjenje-pre .poredjenje-znak { background: var(--greska-bg); color: var(--greska); }
.poredjenje-posle .poredjenje-znak { background: var(--uspeh-bg); color: var(--uspeh); }
.poredjenje-glava b { font-family: var(--font-naslov); font-size: var(--t-xl); align-self: end; }
.poredjenje-glava small { color: var(--n-500); font-size: var(--t-sm); align-self: start; }

.poredjenje-strana ul { list-style: none; display: grid; gap: var(--r3); margin: 0; }
.poredjenje-strana li {
    position: relative;
    padding-left: 26px;
    color: var(--n-600); font-size: var(--t-md); line-height: 22px;
}
.poredjenje-strana li::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 8px; height: 8px; border-radius: 50%;
}
.poredjenje-pre li { color: var(--n-500); }
.poredjenje-pre li::before { background: var(--n-300); }
.poredjenje-posle li::before { background: var(--brend-500); }

/* Leva strana se precrtava kad sekcija uđe u vidokrug — to je cela poenta
   poređenja. Crta raste sleva nadesno, jedna stavka za drugom.

   Ne koristi se `text-decoration`: ona se ne da animirati. Crta je zaseban
   sloj koji raste po širini. */
.poredjenje-pre li::after {
    content: ''; position: absolute; left: 26px; right: 0; top: 11px;
    height: 1px; background: var(--greska); opacity: .55;
    transform: scaleX(1); transform-origin: 0 50%;
}
.sajt-animacije-spremne .sekcija-problemi:not(.sajt-vidljiva) .poredjenje-pre li::after { transform: scaleX(0); }
.sajt-animacije-spremne .sekcija-problemi .poredjenje-pre li::after { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sajt-animacije-spremne .sekcija-problemi.sajt-vidljiva .poredjenje-pre li:nth-child(1)::after { transition-delay: .25s; }
.sajt-animacije-spremne .sekcija-problemi.sajt-vidljiva .poredjenje-pre li:nth-child(2)::after { transition-delay: .40s; }
.sajt-animacije-spremne .sekcija-problemi.sajt-vidljiva .poredjenje-pre li:nth-child(3)::after { transition-delay: .55s; }
.sajt-animacije-spremne .sekcija-problemi.sajt-vidljiva .poredjenje-pre li:nth-child(4)::after { transition-delay: .70s; }
.sajt-animacije-spremne .sekcija-problemi.sajt-vidljiva .poredjenje-pre li:nth-child(5)::after { transition-delay: .85s; }

.poredjenje-strelica { display: grid; place-items: center; color: var(--brend-300); }

.problemi-kartice { margin-top: var(--r2); }

@media (max-width: 860px) {
    .poredjenje { grid-template-columns: 1fr; gap: var(--r4); }
    .poredjenje-strelica { transform: rotate(90deg); }
}

/* ---------------- klizne trake ---------------- */

.klizac { overflow: hidden; }

/* Bez skripte: običan red koji se skroluje prstom. Sve se vidi i dohvati. */
.klizac-staza { display: flex; gap: var(--r3); overflow-x: auto; padding-bottom: var(--r2); scrollbar-width: none; }
.klizac-staza::-webkit-scrollbar { display: none; }
.klizac-staza > * { flex: none; }

/* Sa skriptom: dve staze jedna do druge kližu ulevo u petlji.

   Bez `width: max-content` na SAMOJ traci — ona je i element sa
   `overflow: hidden`, pa bi se raširila na dužinu sadržaja i prosula stranu u
   stranu umesto da je iseče. Izmereno: strana je dobila 6497px vodoravnog
   skrola. Širinu drže staze (`flex: none`), a traka ostaje široka koliko i red. */
.klizac-spreman { position: relative; display: flex; }
.klizac-spreman .klizac-staza {
    flex: none;
    overflow: visible; padding-bottom: 0;
    animation: klizac-klizi var(--klizac-trajanje, 40s) linear infinite;
}
.klizac-spreman .klizac-kopija { margin-left: var(--r3); }
.klizac-nazad.klizac-spreman .klizac-staza { animation-direction: reverse; }

/* Pauza na prelazak mišem — pločica je link i mora da se stigne kliknuti.
   `:focus-within` je isto: ko ide tastaturom, traka mu ne sme bežati. */
.klizac-spreman:hover .klizac-staza,
.klizac-spreman:focus-within .klizac-staza { animation-play-state: paused; }

@keyframes klizac-klizi {
    from { transform: translateX(0); }
    to { transform: translateX(calc(var(--klizac-pomak, -100%) - var(--r3))); }
}

/* Ivice trake se stapaju sa pozadinom, da pločice ne „seca" okvir. */
.klizaci-delatnosti { display: grid; gap: var(--r3); margin: 0 calc(var(--r6) * -1); padding: 0 var(--r6);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* ---------------- prekidač cena ---------------- */

.cenovnik-pocetna { display: grid; justify-items: center; }

/* Paketa ume da bude i četiri (uz agencijski), a zajednički `.cene` je krut na
   tri kolone — četvrti je ostajao sam u drugom redu, pored dve prazne trećine.
   `auto-fit` se ovde sme: prostor deli koliko ih ima. Menja se SAMO na
   naslovnoj; ekran cenovnika i čarobnjak u panelu dele `.cene` i ostaju kakvi
   jesu. */
.cenovnik-pocetna .cene { width: 100%; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.prekidac-usteda {
    margin-left: 6px; padding: 2px 7px; border-radius: var(--rad-pun);
    background: var(--uspeh-bg); color: var(--uspeh);
    font-size: 11px; font-weight: 700;
}

/* Obe note stoje u HTML-u; vidi se ona koja odgovara izabranom ciklusu.
   Bez skripte (`data-ciklus="mesecno"` sa servera) to je mesečna. */
.cena-nota { display: none; }
.cenovnik-pocetna[data-ciklus="mesecno"] .cena-nota-mesecno,
.cenovnik-pocetna[data-ciklus="godisnje"] .cena-nota-godisnje { display: inline; }

/* Godišnje: iznos je isti broj, ali „na mesec" dobija drugačiji smisao —
   kartica to prati tankom linijom umesto da menja tekst. */
.cenovnik-pocetna[data-ciklus="godisnje"] .cena-kartica { border-color: var(--uspeh-ivica); }
.cenovnik-pocetna[data-ciklus="godisnje"] .cena-kartica.istaknut { border-color: var(--brend-600); }
.cena-iznos b { transition: color .2s ease; }
.cenovnik-pocetna[data-ciklus="godisnje"] .cena-iznos b { color: var(--uspeh); }

/* ---------------- FAQ ---------------- */

.faq details { transition: border-color .2s ease; }
.faq details[open] { border-color: var(--brend-200); }
.faq summary::after { transition: transform .2s ease, color .2s ease; }
.faq details[open] summary { color: var(--brend-700); }
.faq details[open] summary::after { color: var(--brend-600); }

/* Skripta animira visinu omota odgovora (`.faq-odgovor`); vidi peti krug. */

/* ---------------- „smanji kretanje" ---------------- */

@media (prefers-reduced-motion: reduce) {
    .klizac-spreman .klizac-staza { animation: none; }
    .napredak-strane i,
    .sajt-glava, .sajt-glava .omot,
    .poredjenje-pre li::after,
    .cena-iznos b, .faq details, .faq summary::after {
        transition: none !important;
        animation: none !important;
    }
    /* Precrtano ostaje precrtano — to je podatak, ne animacija. */
    .sajt-animacije-spremne .sekcija-problemi:not(.sajt-vidljiva) .poredjenje-pre li::after { transform: scaleX(1); }
}


/* ============================================================
   Treći krug: obojena podloga, beli list, bento kartice,
   zamućeno otkrivanje.

   Isto pravilo kao u prva dva kruga: server iscrta KRAJNJE stanje, skripta
   doda svoju klasu i tek tada CSS sme nešto da sakrije ili pomeri.
   ============================================================ */

/* ---------------- podloga i list ---------------- */

body.sajt {
    --list-margina: clamp(8px, 1.1vw, 16px);
    --list-rad: clamp(18px, 2.2vw, 30px);

    background: var(--sajt-podloga);
}

/* Sadržaj je jedan beli list koji lebdi na podlozi. `overflow: clip` seče
   ukrasne odsjaje heroja — pre ovoga su curili preko ivice ekrana (izmereno:
   `.hero-sjaj` je na 375px dopirao do 710px). `clip` ne pravi skrol-kontejner,
   pa lepljivo zaglavlje i lepljive kolone unutra i dalje rade. */
.sajt-list {
    margin: 0 var(--list-margina);
    background: var(--n-0);
    border-radius: var(--list-rad);
    overflow: clip;
    box-shadow: 0 1px 2px var(--senka-boja-2), 0 40px 90px -50px var(--senka-boja-4);
}

/* Sekcija „siva" unutar belog lista više nije siva nego blago plava — na
   podlozi iste porodice to čita kao dubina, a ne kao prljav sivi pojas. */
.sajt-list .sekcija.siva { background: color-mix(in srgb, var(--sajt-podloga) 34%, var(--n-0)); }

/* Pilula na tamnoj sekciji: `--brend-50` je tamo skoro bela mrlja. */
.sekcija.tamna .sekcija-oznaka { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .10); color: var(--na-boji); }

/* ---------------- podnožje kao kartica ---------------- */

.sajt-noga {
    margin: var(--list-margina);
    border-radius: var(--list-rad);
    background:
        radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--brend-500) 55%, transparent) 0%, transparent 62%),
        var(--brend-900);
}

/* ---------------- plutajuća traka na dnu ---------------- */

.sajt-dno {
    position: fixed; z-index: 45;
    right: var(--list-margina); bottom: var(--list-margina); left: var(--list-margina);
    display: flex; justify-content: center;
    pointer-events: none;                 /* klikovi prolaze pored trake */
}

.sajt-dno-unutra {
    display: flex; align-items: center; gap: var(--r5);
    max-width: calc(var(--sajt-max) + 48px);
    padding: 8px 8px 8px var(--r5);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-pun);
    background: var(--staklo);
    backdrop-filter: blur(18px) saturate(1.15);
    box-shadow: var(--senka-4), 0 18px 40px var(--senka-boja-1);
    pointer-events: auto;
}

.sajt-dno-tekst { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-md); }
.sajt-dno-tekst .ikona { color: var(--brend-600); }
.sajt-dno-tekst b { color: var(--n-900); }
.sajt-dno-tekst span { color: var(--n-500); }

/* Skripta traku skloni kad se vidi završni poziv ili podnožje — ista ponuda
   dvaput jedna preko druge izgleda kao greška. Bez skripte traka prosto stoji. */
.sajt-dno { transition: transform var(--sporo), opacity var(--sporo); }
.sajt-dno.sajt-dno-sklonjena { transform: translateY(140%); opacity: 0; pointer-events: none; }

@media (max-width: 620px) {
    .sajt-dno-tekst span { display: none; }
    .sajt-dno-unutra { width: 100%; justify-content: space-between; gap: var(--r3); }
}

/* ---------------- bento kartice ---------------- */

/* Kartica: slika gore (iseca je okvir), naslov i jedan red objašnjenja dole.
   Prikaz je ukras — `aria-hidden` je na njemu u pogledu, a sve što se čita
   stoji u podnožju kartice. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r4); }

.bento-kartica {
    display: grid; grid-template-rows: 1fr auto;
    overflow: hidden;
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    background: var(--n-0);
    box-shadow: var(--senka-1);
    transition: border-color var(--srednje), box-shadow var(--srednje), transform var(--srednje);
}
.bento-kartica:hover { border-color: var(--brend-200); box-shadow: var(--senka-3); transform: translateY(-2px); }

.bento-prikaz {
    position: relative;
    height: clamp(184px, 21vw, 214px);
    overflow: hidden;
    padding: var(--r5) var(--r5) 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brend-50) 70%, var(--n-0)) 0%, var(--n-0) 100%);
}

/* Donja ivica prikaza se stapa sa karticom, da isečena maketa ne izgleda
   kao da je slučajno presečena. */
.bento-prikaz::after {
    content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 46px;
    background: linear-gradient(180deg, transparent, var(--n-0));
    pointer-events: none;
}

.bento-natpis { padding: var(--r4) var(--r5) var(--r6); text-align: center; }
.bento-natpis h3 { margin: 0 0 6px; font-size: var(--t-lg); }
.bento-natpis p { margin: 0; color: var(--n-500); font-size: var(--t-md); line-height: 21px; }

/* --- maketa: traka limita --- */
.bento-limit { display: grid; gap: var(--r3); }
.bento-limit-red { display: grid; gap: 6px; }
.bento-limit-red > span { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--n-500); }
.bento-limit-red > span b { color: var(--n-800); font-variant-numeric: tabular-nums; }
.bento-sipka { height: 8px; border-radius: var(--rad-pun); background: var(--n-100); overflow: hidden; }
.bento-sipka i { display: block; height: 100%; border-radius: var(--rad-pun); background: linear-gradient(90deg, var(--brend-500), var(--akcenat-500)); }
.bento-sipka.opasna i { background: linear-gradient(90deg, var(--upozor), var(--greska)); }

/* --- maketa: rokovi --- */
.bento-rokovi { display: grid; gap: 8px; }
.bento-rok {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--r3);
    padding: 9px var(--r3);
    border: 1px solid var(--n-200); border-radius: var(--rad);
    background: var(--n-0);
    font-size: var(--t-sm);
}
.bento-rok .datum { display: grid; place-items: center; width: 34px; padding: 3px 0; border-radius: var(--rad-sm); background: var(--brend-50); color: var(--brend-700); font-weight: 700; line-height: 1.1; }
.bento-rok .datum small { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.bento-rok b { color: var(--n-800); font-weight: 600; }
.bento-rok em { font-style: normal; color: var(--n-500); font-size: 11px; }
.bento-rok .znak { color: var(--uspeh); }
.bento-rok.prvi { border-color: var(--brend-200); box-shadow: var(--senka-2); }

/* --- maketa: KPO --- */
.bento-kpo { border: 1px solid var(--n-200); border-radius: var(--rad); overflow: hidden; background: var(--n-0); }
.bento-kpo-red { display: grid; grid-template-columns: 26px 1fr auto; gap: var(--r3); align-items: center; padding: 8px var(--r3); font-size: var(--t-sm); border-top: 1px solid var(--n-100); }
.bento-kpo-red:first-child { border-top: 0; background: var(--n-25); color: var(--n-500); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.bento-kpo-red b { color: var(--n-800); font-weight: 600; font-variant-numeric: tabular-nums; }
.bento-kpo-red .oznaka { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--uspeh-bg); color: var(--uspeh); }
.bento-kpo-novi { border-color: var(--brend-200); background: var(--brend-50); }

@media (max-width: 900px) {
    .bento { grid-template-columns: 1fr; }
    .bento-prikaz { height: 200px; }
}

/* ---------------- otvoreno pitanje se boji ---------------- */

/* Otvoren odgovor dobija blagu podlogu — oko odmah vidi koje pitanje je
   razmotano, i kad ih je šest jedno ispod drugog. */
.faq details[open] { background: color-mix(in srgb, var(--brend-50) 60%, var(--n-0)); }

/* ---------------- zamućeno otkrivanje ---------------- */

/* Naslov ulazi reč po reč: iz zamućenja u oštrinu. Podelu na reči radi
   SKRIPTA — u HTML-u naslov je običan tekst, kako ga čita i pretraživač i
   čitač ekrana. Bez skripte nema nijednog `<span>`, pa nema ni šta da se
   sakrije. */
.rec { display: inline-block; }

.sajt-animacije-spremne [data-otkrij="reci"] .rec {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(.22em);
}
.sajt-animacije-spremne .sajt-vidljiva [data-otkrij="reci"] .rec {
    animation: sajt-izostravanje .62s var(--ulaz-kriva) var(--rec-kasnjenje, 0ms) both;
}

@keyframes sajt-izostravanje {
    from { opacity: 0; filter: blur(12px); transform: translateY(.22em); }
    to { opacity: 1; filter: blur(0); transform: none; }
}

/* Zamućuju se REČI i STAVKE, nikad cela sekcija: `filter` na pojasu od
   1200px je skup, a pravi i novi kontekst slaganja preko celog ekrana. */

/* ---------------- „smanji kretanje" ---------------- */

@media (prefers-reduced-motion: reduce) {
    .sajt-dno { transition: none; }
    .bento-kartica { transition: none; }
    .sajt-animacije-spremne [data-otkrij="reci"] .rec,
    .sajt-animacije-spremne .sajt-sekcija-ulaz,
    .sajt-animacije-spremne .sajt-stavka-ulaz {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
    }
}


/* ============================================================
   Šesti krug: tiha strana

   Izgled vođen skillovima design-taste-frontend i emil-design-eng. Šta se
   promenilo i zašto:

   - JEDNA tema: svetla od vrha do završnog poziva, gde je jedini namerni
     prelaz u tamno (poziv + podnožje). Tamni pojasevi usred strane su izvrtali
     temu tri puta.
   - JEDAN akcenat: indigo brenda. Azurna je ukinuta — dve plave na istoj strani.
   - Sopstveni font (Geist, OFL, self-host): sistemski stek je najveći „AI"
     potpis; ovo je poluga broj jedan.
   - Zaobljenja po jednom pravilu: kartice i paneli 16px, dugmad pilula.
   - Bez lažnog prozora, bez dopisane napomene, bez „+12%", bez kartica koje
     se ponavljaju tri puta u redu.
   - Kretanje je motivisano: samo hero (proizvod stiže i odlazi) i slog ishoda
     (jedan po jedan). Sve ostalo miruje ili ulazi jednom.

   Pravilo iz prethodnih krugova važi: server iscrta krajnje stanje, skripta
   doda svoju klasu ili inline transformaciju i tek tada sme nešto da pomeri.
   ============================================================ */

body.sajt {
    --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-naslov: var(--font);
    --font-brojke: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* Krive iz emil-design-eng: ugrađene su preslabe. */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --ulaz-kriva: var(--ease-out);

    --sajt-rad: 16px;

    background: var(--n-0);
    font-feature-settings: 'ss01', 'cv01';
}

/* List i podnožje idu od ivice do ivice; trag trećeg kruga (lebdeći list). */
.sajt-list { margin: 0; border-radius: 0; box-shadow: none; }
.sajt-noga { margin: 0; border-radius: 0; background: var(--brend-900); border-top: 1px solid rgba(255, 255, 255, .08); }

.sajt h1, .sajt h2, .sajt h3 { letter-spacing: -.025em; }
.sajt-glava, .sajt-glava .omot, .sajt-meni-mob > summary, .sajt-meni-panel { border-radius: var(--sajt-rad); }

/* Brojke koje se broje ne smeju da „igraju" dok se menjaju: tabularne cifre. */
.hero-kpi strong, .usteda-stavka b, .cena-iznos b, .bento-limit-red b, .bento-kpo-red b { font-variant-numeric: tabular-nums; }

/* Dugme mora da oseti pritisak (emil-design-eng): 0.97, 160ms, ease-out. */
.sajt .dugme { transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, box-shadow 200ms ease, color 150ms ease; }
.sajt .dugme:active { transform: scale(.97); }

/* ---------------- naslov u dve boje ---------------- */

.naglaseno { color: var(--brend-600); }

/* ---------------- hero ---------------- */

.hero-v2 {
    padding: clamp(48px, 5.5vw, 80px) 0 clamp(64px, 8vw, 112px);
    background: linear-gradient(180deg, var(--n-0) 0%, color-mix(in srgb, var(--brend-50) 60%, var(--n-0)) 100%);
    overflow: visible;
}

.hero-v2 .omot {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: clamp(32px, 4.5vw, 72px);
}
.hero-v2-uvod { max-width: 660px; margin: 0; text-align: left; }
.hero-v2 .hero-sadrzaj { max-width: none; }

/* Naslov: najviše dva reda (skill: treći red je greška veličine, ne kopije).
   Sedam reči i 55 znakova stanu u dva reda na 41px u koloni od 640px. */
.hero-v2 h1 {
    max-width: none; margin: var(--r4) 0 var(--r5);
    font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.03em;
    color: var(--n-900);
}
.hero-v2 .hero-tekst { max-width: 50ch; margin: 0 0 var(--r8); color: var(--n-600); font-size: var(--t-lg); line-height: 1.55; }
.hero-v2 .hero-dugmad { justify-content: flex-start; margin: 0; }

/* Jedini mali natpis u heroju; bez pilule, bez ikone. */
.hero-v2 .hero-oznaka {
    display: inline-block; padding: 0; border: 0; background: none;
    color: var(--n-500); font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
}

/* --- tabla --- */

.hero-v2-scena { position: relative; max-width: none; margin: 0; }

/* Ulazak table: iz blagog nagiba u ravan, jednom. CSS, ne skripta — unapred
   poznato kretanje ne sme da zavisi od rAF-a (u prigušenom oknu je GSAP ulazak
   ostajao na startu, a start je opacity 0). Puni se `backwards`, NE `both`:
   `both` bi posle animacije zauvek držao `transform: none` iznad inline
   transformacije koju kasnije piše ScrollTrigger. Pali se tek uz klasu
   sekcije koju daje sajt-animacije.js; bez skripte tabla prosto stoji. */
.sajt-animacije-spremne .hero-v2.sajt-vidljiva .hero-v2-scena { animation: tabla-ulaz .9s var(--ease-out) .12s backwards; }
@keyframes tabla-ulaz {
    from { opacity: 0; transform: perspective(1400px) rotateX(10deg) translateY(28px); }
    to { opacity: 1; transform: perspective(1400px) rotateX(0) translateY(0); }
}
.hero-v2 .hero-aplikacija {
    max-width: none;
    border-color: var(--n-200);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--brend-900) 6%, transparent), 0 32px 70px -28px color-mix(in srgb, var(--brend-900) 30%, transparent);
}

/* Dve kartice koje lebde uz tablu. Ponavljaju ono što tabla već kaže, pa su
   ukras; senka nosi nijansu podloge, ne crnu. */
.hero-plutajuca {
    position: absolute; z-index: 4;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--n-200); border-radius: 12px;
    background: var(--n-0);
    box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--brend-900) 22%, transparent);
    font-size: var(--t-xs);
}
.hero-plutajuca > .ikona { display: grid; place-items: center; width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--brend-50); color: var(--brend-600); }
.hero-plutajuca span { display: grid; gap: 2px; }
.hero-plutajuca small { color: var(--n-500); font-size: 11px; }
.hero-plutajuca b { color: var(--n-900); font-size: var(--t-xs); }
.hero-plutajuca-rok { top: -22px; right: 22px; }
.hero-plutajuca-faktura { top: 46%; right: -12px; }
.hero-plutajuca-faktura > .ikona { background: var(--uspeh-bg); color: var(--uspeh); }

/* Obaveštenje u tabli je tamna pločica: `--brend-900` je jedini brend token koji
   u tamnoj temi NE posvetli. Sa `--n-900` je u tamnoj temi bila skoro bela sa
   belim slovom (izmereno 1,16:1). */
.hero-v2 .hero-obavestenje { background: var(--brend-900); color: #fff; }
.hero-v2 .hero-obavestenje strong { color: #fff; }

@media (max-width: 1080px) {
    .hero-v2 .omot { grid-template-columns: 1fr; }
    .hero-v2-uvod { max-width: 640px; margin: 0 auto; text-align: center; }
    .hero-v2 .hero-tekst { margin-left: auto; margin-right: auto; }
    .hero-v2 .hero-dugmad { justify-content: center; }
    .hero-v2-scena { margin-top: var(--r6); }
}
@media (max-width: 720px) {
    .hero-plutajuca-faktura { display: none; }
    .hero-plutajuca-rok { top: -14px; right: 0; }
}

/* ---------------- mogućnosti: bento sa ritmom ---------------- */

/* Šest ćelija za šest stavki, tri široke, tri tonirane — ne šest belih
   kartica u redu po tri. Boja pločice ikone stiže sa same kartice. */
.mogucnosti-mreza { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--r4); }
.mogucnost-kartica {
    position: relative; grid-column: span 2;
    padding: var(--r6);
    border: 1px solid var(--n-200); border-radius: var(--sajt-rad);
    background: var(--n-0);
    transition: transform 200ms var(--ease-out), border-color 150ms ease;
}
.mogucnost-kartica.siroka { grid-column: span 4; }
.mogucnost-kartica.polovina { grid-column: span 3; }
.mogucnost-kartica.tonirana {
    border-color: var(--brend-100);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brend-50) 85%, var(--n-0)) 0%, var(--n-0) 70%);
}
.mogucnost-kartica h3 { margin: var(--r4) 0 6px; font-size: var(--t-lg); }
.mogucnost-kartica p { margin: 0; max-width: 46ch; color: var(--n-600); font-size: var(--t-md); line-height: 1.5; }
.mogucnost-kartica.siroka p { max-width: 56ch; }

.ikona-plocica {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 10px;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--plocica-od, var(--brend-100)), var(--plocica-do, var(--brend-50)));
    color: var(--plocica-boja, var(--brend-700));
}
.mogucnost-kartica .oznaka-novo {
    position: absolute; top: var(--r5); right: var(--r5);
    padding: 3px 9px; border-radius: var(--rad-pun);
    background: var(--brend-600); color: var(--n-0);   /* u tamnoj temi podloga posvetli, pa slovo potamni sa njom */
    font-size: 11px; font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
    .mogucnost-kartica:hover { transform: translateY(-2px); border-color: var(--brend-200); }
}
@media (max-width: 900px) {
    .mogucnost-kartica, .mogucnost-kartica.siroka, .mogucnost-kartica.polovina { grid-column: span 6; }
}

/* ---------------- poređenje (svetlo) ---------------- */

.sekcija-problemi .sekcija-glava { margin-bottom: var(--r8); }
.poredjenje-posle { border-color: var(--brend-200); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--brend-900) 28%, transparent); }

/* ---------------- slog: tri ishoda, jedan preko drugog ---------------- */

/* Slaganje je CSS: svaka kartica je lepljiva na istoj visini, pa sledeća
   prelazi preko prethodne. Radi bez skripte. GSAP prethodnu samo skupi i
   nagne (vidi sajt-3d.js) — bez njega se kartice samo slažu. */
.slog { position: relative; display: grid; gap: var(--r5); perspective: 1400px; }
.slog-kartica {
    position: sticky; top: 100px;
    transform-origin: 50% 0;
    will-change: transform;
}
.slog .bento-kartica {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: none;
    min-height: min(60vh, 540px);
    overflow: hidden;
    border-radius: var(--sajt-rad);
    background: var(--n-0);
    box-shadow: 0 30px 70px -36px color-mix(in srgb, var(--brend-900) 35%, transparent);
}
.slog .slog-kartica:nth-child(2) .bento-kartica { background: color-mix(in srgb, var(--brend-50) 70%, var(--n-0)); border-color: var(--brend-100); }
.slog .slog-kartica:nth-child(3) .bento-kartica { background: color-mix(in srgb, var(--akcenat-50) 70%, var(--n-0)); }

.slog .bento-natpis { order: -1; align-self: center; padding: var(--r8); text-align: left; }
.slog .bento-natpis h3 { margin-bottom: var(--r3); font-size: var(--t-2xl); line-height: 1.15; }
.slog .bento-natpis p { max-width: 42ch; font-size: var(--t-lg); line-height: 1.5; color: var(--n-600); }
.slog .bento-prikaz { height: auto; min-height: 100%; padding: var(--r8) var(--r8) 0; background: none; }
.slog .bento-prikaz::after { display: none; }
.slog .bento-limit, .slog .bento-rokovi, .slog .bento-kpo { max-width: 440px; }

@media (max-width: 900px) {
    .slog { perspective: none; }
    .slog-kartica { position: static; }
    .slog .bento-kartica { grid-template-columns: 1fr; min-height: 0; }
    .slog .bento-natpis { padding: var(--r6) var(--r6) 0; }
    .slog .bento-prikaz { min-height: 0; height: 220px; padding: var(--r6) var(--r6) 0; }
}

/* ---------------- ušteda: brojke bez kutija ---------------- */

.usteda-mreza {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--r6);
    padding-top: var(--r6);
    border-top: 1px solid var(--n-200);
}
.usteda-stavka { padding: 0; border: 0; background: none; box-shadow: none; text-align: left; }
.usteda-stavka b { display: flex; align-items: baseline; gap: 4px; font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -.03em; color: var(--n-900); }
.usteda-stavka b small { font-size: var(--t-md); font-weight: 600; color: var(--n-500); letter-spacing: 0; }
.usteda-stavka span { display: block; margin-top: 8px; max-width: 24ch; color: var(--n-600); font-size: var(--t-md); line-height: 1.45; }

@media (max-width: 800px) { .usteda-mreza { grid-template-columns: 1fr 1fr; gap: var(--r5); } }

/* ---------------- utisci: mreža, ne traka ---------------- */

.utisci-mreza { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--r4); }
.utisci-mreza .utisak:first-child { grid-row: span 2; }
.utisci-mreza .utisak { border-radius: var(--sajt-rad); }
.utisci-mreza .utisak:first-child .utisak-tekst { font-size: var(--t-xl); line-height: 1.4; }
@media (max-width: 800px) { .utisci-mreza { grid-template-columns: 1fr; } .utisci-mreza .utisak:first-child { grid-row: auto; } }

/* ---------------- FAQ kao kartice ---------------- */

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: var(--r3); }
.faq details {
    padding: 0;
    border: 1px solid var(--n-200);
    border-radius: var(--sajt-rad);
    background: var(--n-0);
    transition: border-color 200ms ease, background-color 200ms ease;
}
.faq summary { padding: 18px 22px; font-size: var(--t-md); line-height: 24px; }
.faq summary::after {
    content: '+';
    display: grid; place-items: center; flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--n-50); color: var(--n-700);
    font-size: 20px; font-weight: 400; line-height: 1;
    transition: transform 200ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
.faq details[open] { border-color: var(--brend-200); background: color-mix(in srgb, var(--brend-50) 55%, var(--n-0)); }
.faq details[open] summary { color: var(--brend-700); }
.faq details[open] summary::after { content: '+'; background: var(--brend-600); color: #fff; transform: rotate(45deg); }

/* Odgovor je u svom omotu: skripta animira VISINU omota, a on nema ni marginu
   ni padding, pa se skupi na tačno nulu. */
.faq-odgovor { overflow: hidden; }
.faq-odgovor p { margin: 0; padding: 0 22px 20px; color: var(--n-700); font-size: var(--t-md); line-height: 24px; }
.faq-noga { margin: var(--r6) auto 0; max-width: 820px; color: var(--n-500); font-size: var(--t-md); }

@media (max-width: 800px) {
    .faq summary { padding: 16px 18px; }
    .faq-odgovor p { padding: 0 18px 18px; }
}

/* ---------------- vodiči: bez kutija ---------------- */

/* Isti redovi svuda gde se vodiči nižu (naslovna, spisak, srodni): ranije je
   `gap: 0` važio svuda, a stil bez kutija samo na naslovnoj, pa su se na
   /vodici kartice lepile jedna uz drugu. */
.mreza-vodici { gap: 0; border-top: 1px solid var(--n-200); }
.vodic-kartica { min-height: 0; padding: var(--r6) var(--r5) var(--r6) 0; border: 0; border-bottom: 1px solid var(--n-200); border-radius: 0; background: none; box-shadow: none; }
.vodic-kartica:hover { transform: none; box-shadow: none; }
.vodic-kartica .vodic-noga { display: flex; align-items: center; gap: 7px; color: var(--brend-600); font-weight: 600; }
.sekcija-vodici-pocetna .vodici-pocetna-glava .sekcija-naslov { margin-bottom: 0; }

/* ---------------- završni poziv: jedini prelaz u tamno ----------------
   Bio je centriran blok teksta u tamnoj traci — isti kao na svakom sajtu.
   Sada je podeljen 7/5: levo poruka i dugme, desno broj „14" kao nosilac
   ponude, u Geist Mono kao brojači uštede. Jedini „ukras" je blago svetlija
   zona iza broja, da tamna traka ne bude ravna ploča; nema kruga, sjaja ni
   linija. Ispod 860px jedna kolona: poruka pa broj, sve levo poravnato. */

.zavrsni-poziv-v3 {
    padding: 0;
    background:
        radial-gradient(48% 90% at 84% 50%, rgba(255, 255, 255, .07), transparent 72%),
        var(--brend-900);
}
.zavrsni-poziv-v3::before, .zavrsni-poziv-v3::after { display: none; }
.zavrsni-v3 {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
    gap: clamp(40px, 6vw, 96px);
    padding: clamp(72px, 9vw, 120px) 0;
}
.zavrsni-poziv-v3 .sekcija-naslov { max-width: 20ch; margin: 0 0 var(--r4); color: #fff; }
.zavrsni-poziv-v3 .sekcija-opis { margin: 0; max-width: 44ch; color: rgba(255, 255, 255, .72); }
.zavrsni-poziv-v3 .zavrsni-poziv-akcije { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--r5); margin-top: var(--r8); }
.zavrsni-kontakt { color: rgba(255, 255, 255, .78); }

.zavrsni-v3-brojka { margin: 0; justify-self: end; text-align: right; }
.zavrsni-v3-brojka b {
    display: block;
    font-family: var(--font-brojke); font-weight: 500; font-variant-numeric: tabular-nums;
    font-size: clamp(96px, 13vw, 184px); line-height: .9; letter-spacing: -.05em;
    color: #fff;
}
.zavrsni-v3-brojka span { display: block; margin-top: var(--r3); font-size: var(--t-lg); line-height: var(--t-lg-h); color: rgba(255, 255, 255, .72); }

@media (max-width: 860px) {
    .zavrsni-v3 { grid-template-columns: 1fr; gap: var(--r8); padding: var(--r10) 0; }
    /* Jedna kolona: broj ide ispod poruke, pa mu treba crta da se ne čita kao
       nastavak linka iznad (izmereno: bez nje razmak deluje kao 20px, jer
       veliki broj ima line-height .9). */
    .zavrsni-v3-brojka { justify-self: start; padding-top: var(--r6); border-top: 1px solid rgba(255, 255, 255, .14); text-align: left; }
    .zavrsni-v3-brojka b { font-size: 96px; }
}

/* ============================================================
   Sedmi krug: ostale strane prate naslovnu
   ------------------------------------------------------------
   Sve strane sajta su imale isto zaglavlje: mala oznaka, centriran naslov,
   centriran pasus, a svaka je dole imala svoju verziju završnog poziva.
   Sada: zaglavlje strane govori istim jezikom kao hero (levo, ista podloga,
   naslov otkriven po rečima), sekcije kao na naslovnoj, isti završni poziv
   iz partiala. Kretanje je isto kao na naslovnoj: sekcija i stavke ulaze
   kad se doskroluje, ništa se ne vrti samo od sebe.
   ============================================================ */

/* ---------------- zaglavlje strane ---------------- */

.strana-glava {
    padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px);
    background: linear-gradient(180deg, var(--n-0) 0%, color-mix(in srgb, var(--brend-50) 60%, var(--n-0)) 100%);
}
.strana-glava .omot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--r6) var(--r10); }
.strana-glava-kopija { max-width: 720px; }
.strana-glava h1 {
    max-width: 22ch; margin: 0;
    font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em;
    color: var(--n-900);
}
.strana-glava-uvod { max-width: 54ch; margin: var(--r4) 0 0; color: var(--n-600); font-size: var(--t-lg); line-height: 1.55; }
.strana-glava-meta { margin: var(--r3) 0 0; color: var(--n-500); font-size: var(--t-sm); }
.strana-glava-akcije { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r6); }
.strana-glava-desno { justify-self: end; }
.strana-mrvice { margin-bottom: var(--r4); }
.strana-mrvice .ikona { color: var(--n-400); }

/* Tabovi u zaglavlju (vodiči): bez donje crte, prelamaju se u red. */
.tabovi-glava { border: 0; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 860px) {
    .strana-glava .omot { grid-template-columns: 1fr; }
    .strana-glava-desno { justify-self: start; }
    .tabovi-glava { justify-content: flex-start; }
}

/* ---------------- mogućnosti: grupe modula ----------------
   Bilo: devet istih kartica sa ikonom u krugu. Sada: grupa je podeljen red,
   levo naziv i rečenica (lepljivi dok moduli prolaze), desno moduli u dve
   kolone bez kutija. Između grupa jedna crta, ne oko svakog modula. */

.moduli-grupa {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--r6) clamp(32px, 5vw, 80px);
    padding: var(--r10) 0;
    border-top: 1px solid var(--n-200);
}
.moduli-grupa:first-child { padding-top: 0; border-top: 0; }
.moduli-grupa:last-child { padding-bottom: 0; }
.moduli-grupa-glava { position: sticky; top: calc(var(--lepljivi-vrh) + 16px); align-self: start; }
.moduli-grupa h2 { margin: 0 0 var(--r2); font-size: var(--t-2xl); line-height: 1.2; letter-spacing: -.02em; }
.moduli-grupa-uvod { max-width: 30ch; margin: 0; color: var(--n-500); font-size: var(--t-md); }
.moduli-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r6) var(--r8); }
.modul-red { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--r3); align-items: start; }
.modul-red .ikona-krug {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: var(--rad); background: var(--brend-50); color: var(--brend-600);
}
.modul-red h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--t-lg); line-height: 1.3; }
.modul-red h3 .bedz { font-size: var(--t-xs); }
.modul-red p { margin: 0; color: var(--n-500); font-size: var(--t-md); line-height: 22px; }

@media (max-width: 860px) {
    .moduli-grupa { grid-template-columns: 1fr; gap: var(--r5); padding: var(--r8) 0; }
    .moduli-grupa-glava { position: static; }
    .moduli-lista { grid-template-columns: 1fr; gap: var(--r5); }
}

/* ---------------- cenovnik ---------------- */

.sekcija-cene { padding-top: var(--r10); }
/* Dve grupe paketa: za jednu firmu (dve kartice, uže, po sredini) i za
   agencije (tri kartice). Broj kolona prati broj paketa u grupi, da se nijedna
   ne razvuče preko pola ekrana. */
.cene-grupa + .cene-grupa { margin-top: var(--r12); }
.cene-grupa-naslov { margin: 0 0 var(--r5); font-size: var(--t-2xl); line-height: 1.2; letter-spacing: -.02em; }
.cene-grupa-uvod { max-width: 60ch; margin: calc(-1 * var(--r3)) 0 var(--r5); color: var(--n-500); font-size: var(--t-md); }
.sekcija-cene .cene { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sekcija-cene .cene-dve { max-width: 760px; }
.sekcija-cene .cene-tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .sekcija-cene .cene-tri { grid-template-columns: 1fr; } }
/* Naslovna: kartica „od 1.999" za agencije — reč „od" ispred broja, sitno. */
.cena-od { align-self: flex-end; margin-bottom: 6px; color: var(--n-500); font-size: var(--t-sm); font-weight: 600; }
.cene-napomena { margin: var(--r8) 0 0; color: var(--n-500); font-size: var(--t-sm); text-align: center; }

/* ---------------- delatnost: dve liste jedna uz drugu ---------------- */

.delatnost-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r5); margin-bottom: var(--r10); }
.delatnost-lista { padding: var(--r6); border: 1px solid var(--n-200); border-radius: var(--sajt-rad); }
.delatnost-lista.ukljuceno { border-color: var(--brend-200); background: color-mix(in srgb, var(--brend-50) 60%, var(--n-0)); }
.delatnost-lista h2 { margin: 0 0 var(--r3); font-size: var(--t-xl); line-height: 1.25; }
.delatnost-lista-uvod { margin: 0 0 var(--r4); color: var(--n-500); font-size: var(--t-md); }
.delatnost-lista .cena-lista { margin: 0; }
.delatnost-tekst { max-width: 720px; margin: 0; }
.delatnost-tekst > h2:first-child { margin-top: 0; }
.delatnost-tekst .napomena-odgovornost { margin-top: var(--r8); }

@media (max-width: 800px) { .delatnost-liste { grid-template-columns: 1fr; } }

/* ---------------- vodiči: prazno stanje ---------------- */

.prazno-vodici { max-width: 560px; }
.prazno-vodici h2 { margin: 0 0 var(--r2); font-size: var(--t-xl); }
.prazno-vodici p { margin: 0; }

/* ---------------- članak: vodič i pravna strana ----------------
   Kolona teksta je levo, u ravni sa zaglavljem, ne centrirana. */

.clanak-sekcija { padding-top: var(--r10); }
.clanak-sekcija .vodic-kljucno, .clanak-sekcija .vodic-sadrzaj { margin-left: 0; margin-right: 0; }
.clanak-noga { max-width: 760px; margin-top: var(--r10); }
.clanak-delatnosti { margin-top: var(--r6); }
.clanak-plocice { flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------------- alati ---------------- */

.alati-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r5); }
.alat-kartica {
    display: flex; flex-direction: column; gap: var(--r3);
    padding: var(--r6);
    border: 1px solid var(--n-200); border-radius: var(--sajt-rad);
    background: var(--n-0); color: inherit;
    transition: border-color var(--brzo), transform var(--brzo);
}
.alat-kartica:hover { text-decoration: none; border-color: var(--brend-300); }
@media (hover: hover) and (pointer: fine) { .alat-kartica:hover { transform: translateY(-2px); } }
.alat-kartica .ikona-krug {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: var(--rad); background: var(--brend-50); color: var(--brend-600);
}
.alat-kartica h2 { margin: var(--r2) 0 0; font-size: var(--t-xl); }
.alat-kartica p { flex: 1; margin: 0; color: var(--n-500); font-size: var(--t-md); line-height: 22px; }
.alat-veza { display: inline-flex; align-items: center; gap: 6px; color: var(--brend-600); font-size: var(--t-md); font-weight: 600; }
.alati-napomena { max-width: 840px; margin: var(--r8) 0 0; }
.alat-sekcija { padding-top: var(--r10); }
.alat-forma { max-width: 960px; }
.alat-napomena { max-width: 960px; margin: var(--r8) 0 0; }

@media (max-width: 700px) { .alati-mreza { grid-template-columns: 1fr; } }

/* ---------------- kontakt ---------------- */

.kontakt-sekcija { padding-top: var(--r10); }
.kontakt-mreza { max-width: 960px; }

/* ---------------- „smanji kretanje" ---------------- */

@media (prefers-reduced-motion: reduce) {
    .sajt .dugme, .mogucnost-kartica, .faq details, .faq summary::after { transition: none; }
    .slog-kartica { will-change: auto; }
}