/* ============================================================
   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-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-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);
    /* Imenovana svojstva, ne `all`: `all` animira i ono što niko nije tražio
       (senku, širinu okvira, boju pozadine iz nasleđa), i to van grafičke
       kartice. Ovde se menjaju tačno tri stvari. */
    transition: border-color var(--brzo), background-color var(--brzo), color 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); }
/* Naslovi kolona u podnožju. Bili su <h4> bez ijednog <h3> iznad sebe, pa je
   svaka strana imala rupu u redosledu naslova (h2 → h4, a na kontaktu h1 → h4).
   Čitač ekrana to prijavljuje kao preskočen nivo, a pretraživač kao neuredan
   dokument. Sada su <h2>, a izgled je isti — veličinu ionako nosi ovo pravilo,
   ne stepen naslova. */
.sajt-noga .noga-naslov { color: var(--na-boji); font-size: var(--t-md); font-weight: 600; 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; }

/* Meko svetlo iza prikaza table.

   Tabla je do sada stajala na ravnoj podlozi, kao nalepljena slika. Jedan
   difuzan krug brend boje iza nje daje dubinu: oko je čita kao predmet koji
   stoji ispred pozadine, a ne kao sliku u tekstu. To je razlika između
   „screenshot u članku" i „proizvod".

   Crta se u `::before`, ispod sadržaja (`z-index: -1` unutar scene koja ima
   svoj sloj), pa ne presreće nijedan klik. `filter: blur` se ne koristi —
   radijalni gradijent je već mek, a blur bi napravio novi sloj za kompozitor
   na elementu koji se pri skrolu pomera. */
.hero-v2-scena::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%; top: 42%;
    width: 112%; aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--brend-500) 26%, transparent) 0%,
        color-mix(in srgb, var(--brend-500) 10%, transparent) 55%,
        transparent 100%
    );
    pointer-events: none;
}

/* U tamnoj temi podloga je već tamna, pa svetlo sme da bude jače — inače se
   izgubi i scena opet deluje nalepljeno. */
:root[data-tema="tamna"] .hero-v2-scena::before {
    background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--brend-500) 34%, transparent) 0%,
        color-mix(in srgb, var(--brend-500) 14%, transparent) 55%,
        transparent 100%
    );
}
.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(22px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bez `filter: blur()`.

   Zamućenje pri ulasku lepo izgleda na jednoj kartici, ali ovde ulazi ceo red
   odjednom: svaki element sa zamućenjem traži svoj međupuffer i svoj crtež u
   svakom kadru animacije. Na otvaranju strane, kad se u istom trenutku
   raspakuje biblioteka scene i pale ulazne animacije, to je upravo ono što se
   oseti kao kočenje.

   Pomeraj i prozirnost rade isti posao — oko ne primeti da zamućenja nema — a
   obe osobine grafička kartica crta bez ponovnog rasporeda. */
@keyframes sajt-izranjanje-stavke {
    from { opacity: 0; transform: translateY(16px) scale(.99); }
    to { opacity: 1; 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. */
/* Jedna kriva za sve ulaske. Niže u fajlu `--ulaz-kriva` se vezuje za
   `--ease-out`; ovde je rezerva, da pravilo radi i pre te deklaracije. Dve
   skoro iste krive su dve odluke za isti pokret. */
.sajt-animacije-spremne { --ulaz-kriva: cubic-bezier(.23, 1, .32, 1); }

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

.sajt-animacije-spremne .sajt-stavka-ulaz { opacity: 0; transform: translateY(16px) scale(.99); }
.sajt-animacije-spremne .sajt-vidljiva .sajt-stavka-ulaz {
    animation: sajt-izranjanje-stavke .44s 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 upravlja prikazom prema skrolu, vidljivim pozivima i unosu u forme. */
.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; }

/* Reč po reč, ali bez zamućenja po reči: naslov od šest reči inače pokrene
   šest istovremenih zamućenja, a na strani ima više takvih naslova. Pomeraj i
   prozirnost daju isti utisak izranjanja i ne traže ni jedan međupuffer. */
.sajt-animacije-spremne [data-otkrij="reci"] .rec {
    opacity: 0;
    transform: translateY(.26em);
}
.sajt-animacije-spremne .sajt-vidljiva [data-otkrij="reci"] .rec {
    animation: sajt-izostravanje .5s var(--ulaz-kriva) var(--rec-kasnjenje, 0ms) both;
}

@keyframes sajt-izostravanje {
    from { opacity: 0; transform: translateY(.26em); }
    to { opacity: 1; 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 sme na TRI reda (maketa).

   Ranije je pravilo bilo „najviše dva reda", pa je naslov stao na 42px. U
   maketi je naslov najveća stvar na strani i lomi se na tri reda — kolona nosi
   nešto manje od pola širine, a rečenica je obećanje, ne natpis. Četvrti red
   i dalje nije dozvoljen: `clamp` vezuje veličinu za širinu ekrana, pa se na
   laptopu ne prelije. */
.hero-v2 h1 {
    max-width: none; margin: var(--r5) 0 var(--r5);
    font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -.035em;
    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 je UKLONJEN.

   Tabla je iz blagog nagiba ulazila u ravan, 0,9s, iz `opacity: 0`. Kretanje
   je bilo lepo, ali je visilo o klasu `.sajt-vidljiva` koju prvoj sekciji
   više niko ne dodeljuje: hero je izuzet iz ulaznih animacija, jer je on prvi
   ekran i Google po njemu meri „najveće iscrtavanje" (LCP), a proziran
   element se ne broji kao iscrtan. Vidi `sajt-animacije.js`.

   Pravilo je zato obrisano, a ne ostavljeno kao mrtvo slovo — i da je vraćeno
   bez te klase, animiralo bi najveći element prvog ekrana, što je upravo ono
   što smo prestali da radimo. Tabla sada prosto stoji, od prvog kadra. */
.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);
}

/* 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); }
}

/* ---------------- 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 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; }

.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); }
}


/* ---------------- 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; }
}

/* ============================================================
   Naslovna po maketi
   ------------------------------------------------------------
   Maketa koju je vlasnik dao: pilula iznad naslova, potez ispod poslednje
   reči, tri potvrde ispod dugmadi, a desno PROZOR programa sa bočnim menijem
   i telefonom koji ga preklapa.

   Razlika prema ranijem heroju nije ukras nego količina dokaza: ranije se
   videla jedna kartica sa dve brojke, sada se vidi program — meni sa imenima
   ekrana, pretraga, tri brojke, limiti, krug po kategorijama i spisak faktura.
   Posetilac koji prvi put čuje za Fakto u prvom ekranu dobija odgovor na
   „kako ovo izgleda kad radim u njemu".
   ============================================================ */

/* ---------------- levo: reč ---------------- */

/* Pilula se vraća: u maketi je prva stvar koju oko uhvati, a uhvati je zato
   što je oblik, ne red teksta. Druga polovina natpisa je u brend boji —
   „nemaju vremena za papire" je ono po čemu se čovek prepozna. */
:is(.hero-v2, .prica) .hero-oznaka {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 11px;
    border: 1px solid color-mix(in srgb, var(--brend-200) 70%, transparent);
    border-radius: var(--rad-pun);
    background: color-mix(in srgb, var(--brend-50) 75%, var(--n-0));
    /* `--n-600`, ne `--n-500`: na plavičastoj podlozi pilule je 500 davao
       4,22:1, a ovo je sitno pismo od 11px (izmereno, svetla tema). */
    color: var(--n-600); font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
}
:is(.hero-v2, .prica) .hero-oznaka .ikona { color: var(--brend-600); }
:is(.hero-v2, .prica) .hero-oznaka b { color: var(--brend-700); font-weight: 700; }

/* Potez ispod poslednje reči. Crta se preko `::after` prostora reči, pa prati
   njenu širinu ma koliko reč bila duga. `overflow: visible` je obavezan:
   `preserveAspectRatio="none"` razvlači putanju, a kapice poteza izlaze van
   okvira. */
/* Samo naslov heroja: `inline-block` se NE sme dati svakom dvobojnom delu —
   on tada ne može da se prelomi, pa bi „Više vremena za posao." na telefonu
   izašlo van ekrana. U heroju je to jedna reč i nosi potez ispod sebe. */
:is(.hero-v2, .prica) h1 .naglaseno { position: relative; display: inline-block; }
.hero-podvlaka {
    position: absolute; left: -.04em; bottom: -.17em;
    width: calc(100% + .08em); height: .3em;
    overflow: visible;
    color: color-mix(in srgb, var(--brend-500) 85%, transparent);
    pointer-events: none;
}

:is(.hero-v2, .prica) .hero-tekst { margin-bottom: var(--r6); }

/* Tri potvrde: odgovor na pitanje koje se postavlja PRE klika. */
.hero-poverenje {
    display: flex; flex-wrap: wrap; gap: var(--r3) var(--r6);
    margin: var(--r6) 0 0; padding: 0; list-style: none;
}
.hero-poverenje li {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--n-600); font-size: var(--t-md); font-weight: 500;
}
.hero-poverenje .ikona { color: var(--brend-600); flex: none; }

/* ---------------- desno: prozor programa ---------------- */

/* Prozoru se daje VIŠE prostora nego reči: u maketi je on veći deo prvog
   ekrana. Sa ranijom podelom (reč šira od prozora) prozor je bio 543px, pa se
   u njemu sve prelamalo i narastao je na 896px visine — viši od ekrana. */
@media (min-width: 1081px) {
    :is(.hero-v2, .prica) .omot { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
}

/* Ispod 1080px je jedna kolona, ali `1fr` nije dovoljan: najmanja širina
   ćelije je podrazumevano `auto`, pa prozor (koji iznutra ima svoj najmanji
   sadržaj) razvuče kolonu i prelije se preko teksta. `minmax(0, 1fr)` mu kaže
   da sme da se skupi. */
@media (max-width: 1080px) {
    :is(.hero-v2, .prica) .omot { grid-template-columns: minmax(0, 1fr); }
    .hero-v2-scena, .hero-v2-uvod { min-width: 0; }
}

/* Scena sme da pređe preko desne ivice omota (maketa): prozor tako deluje kao
   da se nastavlja van ekrana, umesto da stoji uredno uokviren. Vrednost je
   vezana za širinu ekrana, pa na užem nema prelivanja. */
@media (min-width: 1240px) {
    .hero-v2-scena { margin-right: clamp(-72px, -3vw, 0px); }
}

:is(.hero-v2, .prica) .hero-aplikacija {
    display: grid; grid-template-columns: 146px minmax(0, 1fr);
    position: relative;
    border-radius: var(--sajt-rad);
}

/* Bočni meni: imena ekrana koja posetilac prepozna kad uđe u program. */
.hero-app-bocna {
    display: flex; flex-direction: column; gap: 1px;
    padding: 14px 10px;
    background: color-mix(in srgb, var(--n-25) 70%, var(--n-0));
    border-right: 1px solid var(--n-100);
}
.hero-app-logo {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 2px 6px 14px;
    color: var(--brend-700); font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em;
}
.hero-app-stavka {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 9px;
    color: var(--n-500); font-size: 12px; font-weight: 500;
}
.hero-app-stavka .ikona { color: var(--n-400); flex: none; }
.hero-app-stavka.je-tekuca { background: var(--brend-50); color: var(--brend-700); font-weight: 600; }
.hero-app-stavka.je-tekuca .ikona { color: var(--brend-600); }

/* Gornja traka prozora: pretraga, zvono, nalog. Tačkice „prozora" su otišle —
   ovo nije slika pregledača nego sam program. */
:is(.hero-v2, .prica) .hero-aplikacija-traka {
    display: flex; align-items: center; gap: var(--r3);
    height: 46px; padding: 0 var(--r4);
    border-bottom: 1px solid var(--n-100);
    background: var(--n-0);
}
.hero-app-pretraga {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
    max-width: 280px; padding: 7px 12px;
    border: 1px solid var(--n-200); border-radius: var(--rad-pun);
    background: var(--n-25);
    color: var(--n-400); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-app-pretraga .ikona { flex: none; }
.hero-app-zvono {
    position: relative; display: grid; place-items: center;
    width: 32px; height: 32px; margin-left: auto;
    border-radius: 50%; background: var(--n-25); color: var(--n-500);
}
.hero-app-zvono i {
    position: absolute; top: 5px; right: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--greska); border: 2px solid var(--n-0);
}
.hero-app-nalog { display: flex; align-items: center; gap: 8px; }
.hero-app-nalog b {
    display: grid; place-items: center; width: 32px; height: 32px;
    border-radius: 50%; background: var(--brend-600); color: var(--n-0);
    font-size: 11px; font-weight: 700;
}
.hero-app-nalog > span { display: grid; line-height: 1.25; }
.hero-app-nalog strong { color: var(--n-800); font-size: 12px; }
.hero-app-nalog small { color: var(--n-500); font-size: 10px; }   /* 400 je davao 2,49:1 */

:is(.hero-v2, .prica) .hero-aplikacija-telo { position: relative; padding: 16px; background: var(--n-0); }

.hero-app-glava { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); margin-bottom: 12px; }
.hero-app-glava strong { display: block; color: var(--n-900); font-size: var(--t-lg); letter-spacing: -.02em; }
.hero-app-glava small { color: var(--n-500); font-size: var(--t-xs); }
.hero-app-period {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 6px 11px; border: 1px solid var(--n-200); border-radius: 9px;
    color: var(--n-600); font-size: 11px; font-weight: 500;
}

/* Tri brojke, ne dve: treća je ono što se zaista pita („ko mi duguje"). */
:is(.hero-v2, .prica) .hero-kpi-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:is(.hero-v2, .prica) .hero-kpi { padding: 10px 11px; border-color: var(--n-100); border-radius: 12px; box-shadow: none; background: var(--n-25); }
:is(.hero-v2, .prica) .hero-kpi > span { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; }
:is(.hero-v2, .prica) .hero-kpi > span .ikona { width: 13px; height: 13px; color: var(--n-400); }
:is(.hero-v2, .prica) .hero-kpi strong { font-size: var(--t-md); line-height: 1.2; }
:is(.hero-v2, .prica) .hero-kpi em { margin-top: 5px; font-size: 10px; }
.hero-kpi-dug em { color: var(--greska); }

/* Limiti i krug stoje u istom redu, kao u maketi. */
.hero-app-dva { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
:is(.hero-v2, .prica) .hero-limiti, .hero-krug {
    padding: 13px; border: 1px solid var(--n-100); border-radius: 12px; background: var(--n-0);
}
:is(.hero-v2, .prica) .hero-blok-naslov { margin-bottom: 11px; font-size: 11px; }

/* Krug je jedno `conic-gradient` pravilo: četiri udela, bez biblioteke i bez
   slike. Rupa u sredini je `mask`, pa prati temu bez druge boje. */
.hero-krug-telo { display: flex; align-items: center; gap: 12px; }
.hero-krug-slika {
    flex: none; width: 64px; height: 64px; border-radius: 50%;
    background: conic-gradient(
        var(--brend-600) 0 58%,
        var(--akcenat-500) 58% 82%,
        var(--uspeh) 82% 94%,
        var(--n-200) 94% 100%
    );
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
    mask: radial-gradient(circle, transparent 54%, #000 55%);
}
.hero-krug-spisak { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.hero-krug-spisak li { display: flex; align-items: center; gap: 7px; color: var(--n-500); font-size: 10px; white-space: nowrap; }
.hero-krug-spisak i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tacka); }
.hero-krug-spisak b { margin-left: auto; color: var(--n-700); font-variant-numeric: tabular-nums; }

/* Gustina prozora je merena, ne procenjena: na 1440px je prvo bio 848px visok
   (viši od ekrana), pa se tabla videla samo do pola. Sledeća tri pravila su ga
   svela na oko 560 — razmaci, visine redova i veličina pisma, bez ijedne
   izbačene stavke. */
:is(.hero-v2, .prica) .hero-limiti .limit-glava { margin-bottom: 4px; }
:is(.hero-v2, .prica) .hero-limiti .limit-traka { height: 7px; }
:is(.hero-v2, .prica) .hero-limiti .limit-noga { margin-top: 4px; }
:is(.hero-v2, .prica) .hero-limiti .limit + .limit { margin-top: 10px; }
:is(.hero-v2, .prica) .hero-limiti .limit-sazeto { gap: 8px; flex-wrap: nowrap; }
.hero-v2 .hero-limiti .limit-sazeto .limit-ostatak { display: none; }   /* u 255px kolone se prelamao u drugi red */
:is(.hero-v2, .prica) .hero-limiti .limit-naziv, :is(.hero-v2, .prica) .hero-limiti .limit-brojevi { font-size: 10px; }
:is(.hero-v2, .prica) .hero-limiti .limit-noga { font-size: 9px; }

/* Spisak faktura: tri reda, jedan od njih je onaj koji skripta oživi. */
.hero-app-fakture { margin-top: 10px; padding: 13px; border: 1px solid var(--n-100); border-radius: 12px; }
.hero-app-veza { display: inline-flex; align-items: center; gap: 4px; color: var(--brend-600); font-weight: 600; }
:is(.hero-v2, .prica) .hero-faktura { margin-top: 0; padding: 7px 9px; gap: 9px; border-color: transparent; border-radius: 10px; box-shadow: none; background: var(--n-25); }
:is(.hero-v2, .prica) .hero-faktura + .hero-faktura { margin-top: 6px; }
:is(.hero-v2, .prica) .hero-faktura-ikona { width: 26px; height: 26px; border-radius: 8px; }
:is(.hero-v2, .prica) .hero-faktura-stanje { height: 13px; font-size: 10px; }
:is(.hero-v2, .prica) .hero-faktura strong { font-size: 12px; line-height: 1.25; }
:is(.hero-v2, .prica) .hero-faktura b { font-size: 12px; }
.hero-faktura-mirna { opacity: 1; }
.hero-faktura-mirna .hero-faktura-stanje { color: var(--n-400); }
.hero-faktura-mirna .hero-faktura-stanje i { position: static; opacity: 1; transform: none; color: var(--n-400); }

/* Obaveštenje se sidri u PROZOR, ne u scenu: desno dole sada stoji telefon. */
:is(.hero-v2, .prica) .hero-obavestenje { right: auto; left: var(--r5); bottom: var(--r5); }

/* ---------------- telefon ---------------- */

/* Najviše faktura se izda sa puta, pa telefon nije ukras nego tvrdnja: isti
   program, isti posao, u ruci. Preklapa prozor jer tako i radi — jedno preko
   drugog, ne jedno pored drugog. */
.hero-telefon {
    position: absolute; z-index: 5; right: -18px; bottom: -34px;
    width: 196px; padding: 7px;
    /* Zaobljenje telefona se IZVODI iz tokena, a ne kuca: telefon je predmet,
       ne kartica, pa mu 16px daje izgled tablice — ali ni on ne sme da uvede
       svoju brojku koja posle živi sama. */
    border-radius: calc(var(--sajt-rad) * 1.75);
    background: linear-gradient(160deg, var(--n-100), var(--n-0));
    border: 1px solid var(--n-200);
    box-shadow: 0 30px 60px -22px color-mix(in srgb, var(--brend-900) 40%, transparent);
}
.hero-telefon-ekran {
    display: grid; gap: 9px;
    padding: 10px 12px 14px;
    border-radius: calc(var(--sajt-rad) * 1.4); background: var(--n-0);
}
.hero-telefon-traka { display: flex; align-items: center; justify-content: space-between; color: var(--n-700); font-size: 10px; font-weight: 600; }
.hero-telefon-traka i { width: 26px; height: 4px; border-radius: var(--rad-pun); background: var(--n-200); }
.hero-telefon-glava { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; color: var(--n-900); }
.hero-telefon-glava strong { font-size: var(--t-md); letter-spacing: -.02em; }
.hero-telefon-glava .ikona { color: var(--n-400); }
.hero-telefon label { display: grid; gap: 4px; color: var(--n-500); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.hero-telefon label span {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border: 1px solid var(--n-200); border-radius: 9px;
    color: var(--n-700); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-telefon label span .ikona { flex: none; color: var(--n-400); }
.hero-telefon .je-upisano { border-color: var(--brend-300); color: var(--n-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-telefon-dugme {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 2px; padding: 10px;
    border-radius: 10px; background: var(--brend-600); color: var(--n-0);
    font-size: 11px; font-weight: 600;
}

/* ---------------- dopisana napomena ---------------- */

/* Rukom dopisana rečenica sa strelicom ka tabli. Nije font rukopisa (jedan
   font manje da se učita): nagib, razmak slova i tanak potez rade isti posao. */
.hero-dopis {
    position: absolute; z-index: 5; left: -162px; top: -18px;
    width: 150px; margin: 0;
    color: var(--brend-600);   /* 500 je na svetloj podlozi davao 4,37:1 */
    font-size: 15px; font-style: italic; line-height: 1.35; letter-spacing: .01em;
    transform: rotate(-5deg);
}
.hero-dopis-strelica { display: block; width: 92px; height: 46px; margin: 2px 0 0 38px; color: inherit; opacity: .85; }

@media (max-width: 1380px) {
    .hero-dopis { display: none; }   /* nema mesta levo od table, a tekst nije obaveštenje */
}

/* ---------------- uže od 1080px ---------------- */

@media (max-width: 1080px) {
    .hero-poverenje { justify-content: center; }
    .hero-v2-scena { margin-right: 0; }
}
@media (max-width: 860px) {
    :is(.hero-v2, .prica) .hero-aplikacija { grid-template-columns: 1fr; }
    .hero-app-bocna { display: none; }           /* meni bez ekrana uz sebe ne govori ništa */
    .hero-telefon { width: 158px; right: -10px; bottom: -26px; }
    :is(.hero-v2, .prica) .hero-kpi-mreza { grid-template-columns: 1fr 1fr; }
    .hero-kpi-dug { display: none; }
    .hero-app-dva { grid-template-columns: 1fr; }
    .hero-krug { display: none; }
}
@media (max-width: 560px) {
    .hero-telefon { display: none; }             /* preko pola table, a tabla je dokaz */
    :is(.hero-v2, .prica) .hero-obavestenje { left: var(--r3); right: var(--r3); bottom: var(--r3); }

    /* Oznaka u jedan red: na 11px se lomila na dva, pa je pilula izgledala kao
       pasus u okviru. */
    :is(.hero-v2, .prica) .hero-oznaka { padding: 6px 11px 6px 9px; font-size: 10px; letter-spacing: .05em; }

    /* Od spiska faktura ostaje onaj red koji se i menja. Druga dva su na
       telefonu samo visina: ista poruka, 90px niže. */
    .hero-faktura-mirna { display: none; }

    /* Od naloga ostaje krug sa inicijalima: ime i uloga su se sekli o ivicu. */
    .hero-app-nalog > span { display: none; }
    .hero-app-pretraga { max-width: none; }
}

/* ---------------- mogućnosti: šest jednakih ---------------- */

/* Šest kartica u jednom redu (maketa). Mreža je i dalje šest kolona, samo
   sada svaka ćelija uzima po jednu: ranije su dve uzimale po četiri, dve po
   tri, pa je red bio „razbijen" namerno. Prelom ide na tri pa na dve kolone,
   nikad na pet ili četiri: pola reda praznog je gore nego uži red. */
.mogucnosti-mreza { gap: 14px; }
.mogucnost-kartica { grid-column: span 1; padding: var(--r5) var(--r4); }
.mogucnost-kartica .ikona-plocica { width: 38px; height: 38px; padding: 9px; border-radius: 11px; }
.mogucnost-kartica h3 { margin: 14px 0 5px; font-size: var(--t-md); letter-spacing: -.02em; }
.mogucnost-kartica p { font-size: var(--t-sm); line-height: 1.5; }
.mogucnost-kartica .oznaka-novo { top: 12px; right: 12px; }

@media (max-width: 1180px) {
    .mogucnost-kartica { grid-column: span 2; }     /* tri u redu */
}
@media (max-width: 760px) {
    .mogucnost-kartica { grid-column: span 3; }     /* dve u redu */
}
@media (max-width: 460px) {
    .mogucnost-kartica { grid-column: span 6; }
}

/* ============================================================
   Kretanje na naslovnoj
   ------------------------------------------------------------
   Četiri stvari se kreću, i svaka ima razlog:

     1. potez ispod poslednje reči se POVUČE, kao da ga neko upravo crta;
     2. strelica uz dopisanu napomenu se iscrta za njim i vodi oko na tablu;
     3. prozor i telefon dišu, svaki svojim ritmom, pa scena nije slika;
     4. svetlo iza heroja se pomera toliko sporo da se primeti tek posle
        nekoliko sekundi gledanja.

   Sve četiri su `transform` ili `stroke` — ništa što tera pregledač da
   ponovo računa raspored. Potez i strelica se crtaju samo kad je skripta
   živa (`.sajt-animacije-spremne`): bez nje stoje iscrtani, jer su deo
   rečenice, a ne najava.

   Uz „smanji kretanje" ne radi nijedna (vidi blok na dnu fajla).
   ============================================================ */

@keyframes hero-potez {
    from { stroke-dashoffset: var(--potez-duzina, 260); }
    to   { stroke-dashoffset: 0; }
}

.sajt-animacije-spremne .hero-podvlaka path {
    stroke-dasharray: var(--potez-duzina, 260);
    animation: hero-potez .85s var(--ease-out) .5s both;
}
.sajt-animacije-spremne .hero-podvlaka path + path {
    --potez-duzina: 190;
    animation-delay: .72s; animation-duration: .6s;
}

.sajt-animacije-spremne .hero-dopis-strelica path {
    --potez-duzina: 130;
    stroke-dasharray: var(--potez-duzina);
    animation: hero-potez .7s var(--ease-out) 1.05s both;
}
.sajt-animacije-spremne .hero-dopis-strelica path + path {
    --potez-duzina: 40;
    animation-delay: 1.6s; animation-duration: .35s;
}

/* Telefon diše u drugom ritmu od prozora (7s naspram 9s), pa se dva sloja
   nikad ne poklope — zato scena izgleda kao prostor, a ne kao slika.

   Diše EKRAN, ne sam telefon: spoljni element nosi parallax iz `sajt-3d.js`,
   koji piše `transform` u stil elementa. CSS animacija na istom svojstvu bi
   taj upis pregazila i dubina bi nestala. */
.hero-telefon-ekran { animation: sajt-lebdenje 9s ease-in-out 2.4s infinite; }

/* Svetlo iza heroja. Dva kruga brend boje koja se vrlo sporo razmiču —
   podloga prestaje da bude ravna, a ništa se ne vrti pred očima. */
@keyframes hero-svetlo {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
.hero-v2::after {
    content: '';
    position: absolute; inset: -10% -5% auto -5%; height: 90%;
    z-index: 0;
    background:
        radial-gradient(38% 55% at 18% 30%, color-mix(in srgb, var(--brend-500) 16%, transparent) 0%, transparent 70%),
        radial-gradient(42% 60% at 82% 20%, color-mix(in srgb, var(--brend-300) 22%, transparent) 0%, transparent 72%);
    pointer-events: none;
    animation: hero-svetlo 19s ease-in-out infinite alternate;
}
.hero-v2 > .omot { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .hero-telefon-ekran, .hero-v2::after { animation: none; }
    .sajt-animacije-spremne .hero-podvlaka path,
    .sajt-animacije-spremne .hero-dopis-strelica path { animation: none; stroke-dasharray: none; }
}

/* Priča: zasebna 3D pozornica i četiri čitljiva poglavlja. */

/* The stage owns a column; it can never pass behind readable content. */
.prica {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 72px);
    max-width: 1540px;
    margin-inline: auto;
    padding-inline: clamp(24px, 4.5vw, 72px);
    background: var(--n-0);
}
.prica-scena {
    grid-column: 2; grid-row: 1 / 5;
    position: sticky; top: 100px; align-self: start;
    height: min(740px, calc(100svh - 124px)); min-height: 330px;
    margin: 22px 0 0; overflow: hidden;
    border: 1px solid var(--n-200); border-radius: 28px;
    background: radial-gradient(ellipse at 50% 35%, var(--n-0), var(--brend-50));
    pointer-events: none;
}
.prica-scena-glava, .prica-scena-noga {
    position: absolute; left: 24px; right: 24px; z-index: 2;
    display: flex; align-items: center; gap: 12px;
    color: var(--n-600); font-size: 12px; line-height: 1.5;
}
.prica-scena-glava { top: 24px; justify-content: space-between; font-size: 10px; letter-spacing: .06em; }
.prica-scena-glava > :last-child { color: var(--brend-700); font-weight: 700; white-space: nowrap; }
.prica-scena-noga { bottom: 24px; padding-top: 18px; border-top: 1px solid var(--n-200); }
.prica-scena-broj { color: var(--brend-700); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prica-etape { margin-left: auto; display: flex; gap: 5px; }
.prica-etape i { width: 6px; height: 6px; border-radius: 50%; background: var(--n-300); }
.prica-etape [data-aktivan] { background: var(--brend-600); }
.prica-platno { display: block; width: 100%; height: 100%; transition: opacity 250ms ease; }
.prica-rezerva { position: absolute; inset: 60px 12px 70px; display: grid; place-items: center; }
.prica-rezerva svg { width: 100%; max-width: 560px; height: auto; }
.prica-ziva .prica-rezerva { display: none; }
.rez-senka { fill: color-mix(in srgb, var(--brend-900) 12%, transparent); }
.rez-papir rect, .rez-snop rect { fill: var(--n-0); stroke: var(--n-200); stroke-width: 1.5; }
.rez-sto rect { fill: light-dark(#d8bd97, #333b52); }
.rez-program > rect:first-child { fill: var(--n-0); stroke: var(--brend-200); stroke-width: 2; }
.rez-traka, .rez-puna { fill: var(--brend-600); }
.rez-sadrzaj rect { fill: var(--n-100); }
.prica-cin {
    grid-column: 1; position: relative; z-index: 1;
    display: flex; align-items: center;
    min-height: max(680px, calc(100svh - 80px));
    padding: 96px 0;
    scroll-margin-top: 100px;
}
.prica-cin-haos { grid-row: 1; }
.prica-cin-odluka { grid-row: 2; }
.prica-cin-klikovi { grid-row: 3; }
.prica-cin-sloboda { grid-row: 4; }
.prica-cin > .omot { width: 100%; max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.prica-tekst { position: relative; max-width: 620px; }
.prica .prica-tekst::before { content: none; }
.prica .hero-oznaka { font-size: 10px; letter-spacing: .035em; }
.prica h1 { font-size: clamp(40px, 4.1vw, 64px); line-height: 1.07; letter-spacing: -.045em; text-wrap: balance; }
.prica .hero-tekst { max-width: 44ch; font-size: 17px; line-height: 1.75; color: var(--n-600); }
.prica .hero-dugmad { flex-wrap: wrap; gap: 12px; }
.prica .hero-poverenje { justify-content: flex-start; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; }
.prica-kartica, .prica-ziva .prica-kartica { max-width: 560px; padding: 0; border: 0; background: var(--n-0); box-shadow: none; backdrop-filter: none; }
.prica-korak { display: inline-block; margin-bottom: 24px; color: var(--brend-700); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.prica-kartica h2 { margin: 0 0 24px; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.prica-kartica > p { margin: 0; max-width: 43ch; color: var(--n-600); font-size: 18px; line-height: 1.75; }
.prica-kraj .hero-dugmad { margin-top: 28px; }
.prica-klikovi { counter-reset: klik; margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.prica-klikovi li { counter-increment: klik; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.prica-klikovi li::before { content: counter(klik, decimal-leading-zero); grid-row: span 2; color: var(--brend-700); font-size: 13px; font-weight: 600; line-height: 24px; }
.prica-klikovi b { color: var(--n-900); font-size: 17px; }
.prica-klikovi span { color: var(--n-600); font-size: 15px; line-height: 1.65; }
.prica-dalje { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--n-500); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.prica-dalje .ikona { animation: none; }
.prica .hero-dopis, .prica .hero-telefon, .prica .hero-plutajuca { display: none; }
.prica .hero-v2-scena { margin: 0; min-width: 0; transform: none; opacity: 1; animation: none; }
.prica .hero-aplikacija { transform: none; animation: none; width: 100%; line-height: 1.4; }
/* The dashboard is HTML, so the numbers and labels stay sharp at every size. */
.prica-scena > .hero-v2-scena {
    position: absolute; inset: 64px 16px 76px; display: flex; align-items: center;
    opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms;
}
.prica-scena.prica-pokazi-preview > .hero-v2-scena { opacity: 1; visibility: visible; }
.prica-scena.prica-pokazi-preview .prica-platno, .prica-scena.prica-pokazi-preview .prica-rezerva { opacity: 0; }
.prica-scena .hero-aplikacija { grid-template-columns: minmax(0, 1fr); border-radius: 16px; box-shadow: 0 16px 40px -24px color-mix(in srgb, var(--brend-900) 30%, transparent); }
.prica-scena .hero-app-bocna { display: none; }
.prica .hero-obavestenje { display: none; }
.prica .hero-app-glavno { min-width: 0; }
.prica .hero-aplikacija-telo { padding: 16px; }
.prica .hero-app-dva { grid-template-columns: minmax(0, 1fr); }
.prica .hero-krug { display: none; }
.prica .hero-kpi strong { font-size: clamp(15px, 1.4vw, 22px); }
/* Content cards flow in reading order; no sticky card can cover another. */
.slog { perspective: none; }
.slog-kartica { position: relative; top: auto; will-change: auto; }
@media (max-width: 1099px) {
    .prica { display: flex; flex-direction: column; padding-inline: clamp(20px, 5vw, 48px); }
    .prica-cin { min-height: 0; padding: 72px 0; }
    .prica-cin-haos { order: -2; padding: 64px 0 40px; }
    .prica-scena { order: -1; position: relative; top: auto; width: 100%; height: clamp(380px, 65vw, 520px); min-height: 0; margin: 0 0 24px; border-radius: 22px; }
    .prica-cin > .omot { gap: 32px; }
    .prica-kartica { max-width: 660px; }
    .prica .hero-v2-scena { max-width: 760px; }
    .prica h1 { max-width: 17ch; font-size: clamp(38px, 6.4vw, 66px); }
    .prica .hero-kpi strong { font-size: clamp(16px, 3vw, 24px); }
    .prica .hero-poverenje { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .prica-cin-haos { padding-top: 52px; }
    .prica-cin { padding-bottom: 40px; }
    .prica-scena-glava, .prica-scena-noga { left: 16px; right: 16px; }
    .prica-scena-glava { top: 18px; font-size: 9px; }
    .prica-scena-noga { bottom: 16px; font-size: 11px; }
    .prica-scena-broj { font-size: 20px; }
    .prica-kartica h2 { font-size: 34px; }
    .prica-kartica > p { font-size: 17px; }
    .prica .hero-kpi-mreza { grid-template-columns: minmax(0, 1fr); }
    .prica .hero-kpi-dug { display: block; }
    .prica .hero-kpi { padding: 12px; }
    .prica .hero-aplikacija-traka { padding-inline: 10px; gap: 8px; }
    .prica .hero-app-pretraga { font-size: 10px; }
    .prica .hero-app-glava { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .prica-platno, .prica-scena > .hero-v2-scena { transition: none; }
}
/* ============================================================
   Sekcije ispod priče govore istim jezikom
   ------------------------------------------------------------
   Kad se priča završi, strana ide dalje: mogućnosti, poređenje, slog, cene,
   pitanja. Te sekcije su starije od priče i nosile su svoj ritam, pa je posle
   četvrtog čina delovalo kao da je počeo drugi sajt.

   Ovde se izjednačava TROJE, ne sve:

     · oznaka iznad naslova izgleda kao oznaka čina (`.prica-korak`);
     · kartice nose isti radijus i istu senku kao `.prica-kartica`;
     · prva sekcija posle priče ima vazduh iznad sebe, da se vidi da je priča
       završena, a ne da je presečena.

   Boje, raspored i sadržaj sekcija se NE diraju — one i dalje rade svoj posao.
   ============================================================ */

/* Oznaka sekcije = oznaka čina. Ista pilula, ista slova, isti razmak. */
.sekcija-oznaka {
    padding: 5px 11px;
    border: 0;
    border-radius: var(--rad-pun);
    background: color-mix(in srgb, var(--brend-50) 80%, var(--n-0));
    color: var(--brend-700);
    font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
}

/* Jedna senka za sve kartice ispod priče. `-40px` razmak je ono što kartici
   daje da „stoji nad stranom", a ne da bude nalepljena na nju. */
.sekcija-mogucnosti .mogucnost-kartica,
.poredjenje-strana,
.faq details,
.vodic-kartica,
.sekcija .sajt-kartica {
    border-radius: var(--sajt-rad);
    box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--brend-900) 45%, transparent);
}

/* Prvi dah posle priče. */
.prica + .sekcija { padding-top: clamp(72px, 9vw, 128px); }

/* Naslovi sekcija prate skalu naslova u činovima, samo stepenicu niže. */
.sekcija-naslov { font-size: clamp(26px, 3vw, 40px); line-height: 1.12; letter-spacing: -.03em; }





/* ============================================================
   Homepage sections: the same type, surfaces and rhythm as the studio hero.
   All selectors are scoped so the application and other pages retain their layout.
   ============================================================ */
:is(.pocetna-sadrzaj, .sajt-sadrzaj) {
    --pocetna-rad: 24px;
    --pocetna-ivica: var(--n-200);
    background: var(--n-0);
}
:is(.pocetna-sadrzaj, .sajt-sadrzaj) > .sekcija {
    padding-block: clamp(64px, 7vw, 104px);
    scroll-margin-top: 100px;
    background: var(--n-0);
}
:is(.pocetna-sadrzaj, .sajt-sadrzaj) > .sekcija > .omot {
    width: 100%; max-width: 1540px;
    padding-inline: clamp(24px, 4.5vw, 72px);
}
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-glava { max-width: 760px; margin: 0 0 44px; text-align: left; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-oznaka {
    display: block; width: fit-content; margin: 0 0 18px; padding: 0;
    border: 0; border-radius: 0; background: none;
    color: var(--brend-700); font-size: 11px; font-weight: 600; letter-spacing: .1em;
}
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-naslov {
    margin: 0 0 20px; max-width: 25ch;
    font-size: clamp(30px, 3.2vw, 46px); line-height: 1.13; letter-spacing: -.035em;
    text-wrap: balance;
}
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-opis { max-width: 52ch; margin: 0; color: var(--n-600); font-size: 17px; line-height: 1.75; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .pocetna-glava-podeljena {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
    align-items: end; gap: 32px 64px; max-width: none;
}
.pocetna-glava-podeljena .sekcija-naslov { margin-bottom: 0; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .pocetna-glava-podeljena .sekcija-opis { max-width: 40ch; padding-bottom: 4px; }
.pocetna-sekcija-veza { display: flex; justify-content: flex-start; margin: 28px 0 0; font-size: 15px; }
.pocetna-sekcija-veza a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) :is(a, summary):focus-visible { outline: 3px solid var(--brend-500); outline-offset: 5px; }
/* Two feature stories, followed by four concise capabilities. */
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnosti-mreza { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-kartica {
    grid-column: span 3; min-width: 0; margin: 0; padding: 28px;
    border: 1px solid var(--pocetna-ivica); border-radius: var(--pocetna-rad);
    background: var(--n-0); box-shadow: none; transform: none;
}
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-kartica h3 { margin: 24px 0 10px; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-kartica p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--n-600); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .ikona-plocica { width: 44px; height: 44px; border-radius: 13px; background: var(--brend-50); color: var(--brend-700); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-glavna {
    grid-column: span 7; display: grid; grid-template-columns: 1fr .95fr; gap: 32px; align-items: center;
    padding: 36px; background: color-mix(in srgb, var(--brend-50) 60%, var(--n-0));
}
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-glavna h3 { font-size: 28px; max-width: 14ch; }
.mogucnost-napomena { display: block; margin-top: 24px; color: var(--brend-700); font-size: 12px; font-weight: 500; }
.mogucnost-faktura {
    padding: 24px 20px; border: 1px solid var(--n-200); border-radius: 14px; background: var(--n-0);
    box-shadow: 0 16px 30px -24px color-mix(in srgb, var(--brend-900) 35%, transparent);
    color: var(--n-900); font-size: 12px; line-height: 1.6;
}
.mogucnost-faktura-glava { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 28px; }
.mogucnost-faktura-glava b { color: var(--brend-700); font-size: 20px; letter-spacing: -.04em; }
.mogucnost-faktura-glava span { font-size: 10px; color: var(--n-500); }
.mogucnost-faktura-oznaka { display: block; color: var(--n-500); font-size: 10px; }
.mogucnost-faktura > strong { font-size: 14px; font-weight: 500; }
.mogucnost-faktura-red { display: grid; gap: 5px; margin: 20px 0; padding-top: 16px; border-top: 1px solid var(--n-200); }
.mogucnost-faktura-red span { color: var(--n-500); font-size: 10px; }
.mogucnost-faktura-red b { font-size: 25px; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.mogucnost-faktura-red small { color: var(--n-500); font-size: 10px; letter-spacing: 0; }
.mogucnost-potvrda { display: flex; align-items: center; gap: 6px; color: var(--uspeh); font-size: 11px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-prihodi { grid-column: span 5; padding: 36px; background: var(--n-25); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-prihodi h3 { font-size: 28px; }
.mogucnost-grafik { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--n-200); }
.mogucnost-grafik > div { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; margin-bottom: 20px; font-size: 11px; color: var(--n-600); }
.mogucnost-grafik b { font-weight: 500; color: var(--n-800); }
.mogucnost-grafik svg { display: block; width: 100%; height: 76px; }
.grafik-mreza { stroke: var(--n-200); stroke-width: 1; }
.grafik-putanja { stroke: var(--brend-600); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
/* Comparison and detailed benefits share quiet, readable surfaces. */
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-strelica { display: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-strana { padding: 32px; border: 1px solid var(--n-200); border-radius: var(--pocetna-rad); box-shadow: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-pre { background: var(--n-25); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-posle { background: var(--brend-50); border-color: var(--brend-100); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-glava { margin-bottom: 28px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-strana ul { padding: 0; gap: 18px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-strana li { color: var(--n-600); font-size: 15px; line-height: 1.65; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-posle li { color: var(--n-800); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-pre li::after { display: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog { gap: 20px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-kartica { min-height: 320px; border: 1px solid var(--n-200); border-radius: var(--pocetna-rad); background: var(--n-0); box-shadow: none; align-items: center; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-natpis { padding: 40px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-natpis h3 { font-size: 28px; letter-spacing: -.025em; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-natpis p { font-size: 16px; line-height: 1.75; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-prikaz { display: grid; place-items: center; min-height: 320px; padding: 32px; background: var(--n-25); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-prikaz > div { width: 100%; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog-kartica:nth-child(2) .bento-prikaz { background: var(--brend-50); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .bento-rok { line-height: 1.5; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .bento-rok em { font-size: 12px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-mreza { padding: 32px 0; border-block: 1px solid var(--n-200); gap: 24px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka { padding-right: 24px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka + .usteda-stavka { padding-left: 24px; border-left: 1px solid var(--n-200); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka b { font-size: clamp(40px, 4.5vw, 62px); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka span { font-size: 14px; line-height: 1.65; }
/* A static industry directory is easier to scan and navigate than a marquee. */
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .klizaci-delatnosti { margin: 0; padding: 0; gap: 12px; mask-image: none; -webkit-mask-image: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .klizac { overflow: visible; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .klizac-staza { display: flex; flex-wrap: wrap; gap: 10px; overflow: visible; padding: 0; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .delatnost-plocica { min-height: 44px; padding: 11px 16px; border: 1px solid var(--n-200); border-radius: 12px; background: var(--n-0); box-shadow: none; font-size: 13px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .delatnosti-veza { text-align: left; margin-top: 24px; font-size: 15px; }
/* The three setup steps remain fully visible before and after scrolling. */
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok { max-width: none; margin: 16px 0 0; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-linija { display: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-korak { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 48px; padding: 36px 0; border-top: 1px solid var(--n-200); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-korak::before { display: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-korak-desno .tok-kopija, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-korak-desno .tok-ekran { order: initial; padding: 0; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-kopija { padding: 0; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-broj { display: block; margin-bottom: 16px; padding: 0; background: none; color: var(--brend-700); font-family: var(--font-brojke); font-size: 13px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-kopija h3 { font-size: 27px; letter-spacing: -.025em; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-kopija p { color: var(--n-600); font-size: 16px; line-height: 1.7; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-vreme { margin-top: 20px; background: var(--brend-50); color: var(--brend-700); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mini-ekran { border: 1px solid var(--n-200); border-radius: 16px; box-shadow: none; }
/* Prices: equal hierarchy, fixed reading order and bottom-aligned actions. */
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-cenovnik-pocetna { background: var(--n-25); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cenovnik-pocetna { display: block; justify-items: stretch; text-align: left; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .prekidac-ciklusa { display: flex; width: fit-content; justify-self: start; margin: 0 0 28px; border: 1px solid var(--n-200); border-radius: 14px; background: var(--n-50); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .prekidac-ciklusa a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 20px; border-radius: 10px; color: var(--n-600); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .prekidac-ciklusa a.aktivan { background: var(--n-0); color: var(--n-900); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .prekidac-usteda { border-radius: 5px; background: var(--brend-50); color: var(--brend-700); font-size: 11px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cenovnik-pocetna .cene { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--n-200); border-radius: var(--pocetna-rad); background: var(--n-0); box-shadow: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica.istaknut { border: 1px solid var(--brend-500); background: color-mix(in srgb, var(--brend-50) 30%, var(--n-0)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brend-100) 60%, transparent); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-status { min-height: 28px; margin-bottom: 16px; font-size: 11px; line-height: 20px; color: var(--n-600); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-oznaka { position: static; transform: none; display: inline-block; padding: 4px 9px; border-radius: 6px; font-size: 11px; background: var(--brend-600); color: var(--na-boji); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-naziv { font-size: 25px; font-weight: 600; letter-spacing: -.03em; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-podnaslov { margin: 8px 0 20px; min-height: 24px; font-size: 14px; line-height: 1.6; color: var(--n-600); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-iznos { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 0; min-height: 56px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-iznos b { color: var(--n-900); font-family: var(--font-naslov); font-size: clamp(36px, 3.2vw, 48px); font-weight: 600; letter-spacing: -.05em; transition: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-iznos span { color: var(--n-600); font-size: 13px; white-space: nowrap; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-od { color: var(--n-600); font-size: 13px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-godisnje { min-height: 46px; margin: 10px 0 20px; color: var(--n-600); font-size: 12px; line-height: 1.65; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-opis { min-height: 100px; margin: 0; padding-top: 20px; border-top: 1px solid var(--n-200); color: var(--n-600); font-size: 13px; line-height: 1.7; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-lista { margin: 20px 0 32px; padding: 0; gap: 12px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-lista li { font-size: 14px; line-height: 1.6; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-lista .ikona { color: var(--brend-700); margin-top: 3px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica > .dugme { margin-top: auto; min-height: 46px; font-size: 14px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-ciklus-opis { margin: 24px 0 0; max-width: 70ch; color: var(--n-600); font-size: 13px; line-height: 1.6; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-dodaci-napomena { margin: 10px 0 0; max-width: 70ch; color: var(--n-600); font-size: 13px; line-height: 1.6; }
/* FAQ and editorial content use dividers rather than heavy floating boxes. */
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-faq-pocetna > .omot { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 64px; align-items: start; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-faq-pocetna .sekcija-glava { grid-column: 1; grid-row: 1 / 3; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq { grid-column: 2; width: 100%; max-width: none; margin: 0; gap: 0; border-top: 1px solid var(--n-200); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq details { border: 0; border-bottom: 1px solid var(--n-200); border-radius: 0; box-shadow: none; background: var(--n-0); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq summary { min-height: 72px; padding: 20px 0; gap: 20px; font-size: 16px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq summary::after { width: 28px; height: 28px; background: var(--n-50); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq details[open] summary::after { background: var(--brend-600); color: var(--na-boji); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq-odgovor p { padding: 0 40px 24px 0; font-size: 15px; line-height: 1.75; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq-noga { grid-column: 2; margin: 24px 0 0; font-size: 14px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .utisak, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .vodic-kartica { border: 1px solid var(--n-200); border-radius: 20px; padding: 28px; background: var(--n-0); box-shadow: none; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .mreza-vodici { border: 0; gap: 18px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .vodic-naslov { font-size: 22px; line-height: 1.3; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .vodic-uvod { color: var(--n-600); font-size: 15px; line-height: 1.7; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .vodic-noga { margin-top: auto; padding-top: 24px; font-size: 13px; }
/* The closing invitation echoes the pale blue studio stage. */
:is(.pocetna-sadrzaj, .sajt-sadrzaj) > .zavrsni-poziv-v3 { margin: 0 clamp(24px, 4.5vw, 72px) 64px; padding: 0; border: 1px solid var(--brend-100); border-radius: 28px; background: var(--brend-50); color: var(--n-900); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) > .zavrsni-poziv-v3 > .omot { padding-inline: clamp(24px, 4vw, 56px); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-v3 { padding: 64px 0; gap: 48px; }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-poziv-v3 .sekcija-naslov { color: var(--n-900); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-poziv-v3 .sekcija-opis, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-kontakt { color: var(--n-600); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-v3-brojka { border-color: var(--brend-200); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-v3-brojka b { color: var(--brend-700); font-size: clamp(96px, 11vw, 152px); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-v3-brojka span { color: var(--n-600); font-size: 16px; }
@media (max-width: 1100px) {
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-glavna { grid-column: span 12; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-prihodi { grid-column: span 12; display: grid; grid-template-columns: auto 1fr; gap: 0 20px; align-items: start; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-prihodi .ikona-plocica { grid-row: span 2; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-prihodi h3 { margin-top: 0; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-grafik { grid-column: 1 / -1; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-kartica:not(.mogucnost-glavna):not(.mogucnost-prihodi) { grid-column: span 6; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica { padding: 24px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-iznos b { font-size: 36px; }
}
@media (max-width: 900px) {
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .pocetna-glava-podeljena { grid-template-columns: 1fr; gap: 20px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cenovnik-pocetna .cene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica-agencije { grid-column: 1 / -1; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica-agencije .cena-opis { min-height: 0; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica-agencije .cena-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica-agencije > .dugme { align-self: flex-start; width: auto; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-kartica { grid-template-columns: 1fr; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-prikaz { min-height: 280px; height: auto; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka:nth-child(3) { padding-left: 0; border-left: 0; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-korak { gap: 32px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-faq-pocetna > .omot { grid-template-columns: 1fr; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-faq-pocetna .sekcija-glava, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq-noga { grid-column: 1; grid-row: auto; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-v3 { grid-template-columns: 1fr; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-v3-brojka { justify-self: start; text-align: left; padding-top: 28px; border-top: 1px solid var(--brend-200); }
}
@media (max-width: 640px) {
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) > .sekcija > .omot { padding-inline: 20px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-glava { margin-bottom: 32px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .sekcija-opis { font-size: 16px; line-height: 1.7; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnosti-mreza { grid-template-columns: 1fr; gap: 14px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnosti-mreza > .mogucnost-kartica,
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnosti-mreza .mogucnost-kartica:not(.mogucnost-glavna):not(.mogucnost-prihodi) { grid-column: 1; padding: 24px; border-radius: 20px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-glavna { grid-template-columns: 1fr; gap: 28px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-glavna h3 { max-width: none; font-size: 26px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-faktura { padding: 24px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-prihodi { display: block; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-prihodi h3 { margin-top: 24px; font-size: 26px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje { grid-template-columns: 1fr; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .poredjenje-strana, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-natpis { padding: 24px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-prikaz { min-height: 250px; padding: 20px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .slog .bento-natpis h3 { font-size: 25px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka { padding-right: 0; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka + .usteda-stavka { padding-left: 16px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka:nth-child(3) { padding-left: 0; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka b { font-size: 40px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .usteda-stavka span { font-size: 13px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .tok-korak { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cenovnik-pocetna .cene { grid-template-columns: 1fr; gap: 18px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica-agencije { grid-column: 1; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica { padding: 28px 24px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-podnaslov, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-godisnje, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-opis { min-height: 0; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-iznos b { font-size: 46px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica-agencije .cena-lista { grid-template-columns: 1fr; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .cena-kartica-agencije > .dugme { width: 100%; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .prekidac-ciklusa { width: 100%; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .prekidac-ciklusa a { flex: 1; justify-content: center; gap: 6px; padding-inline: 12px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .faq summary { font-size: 15px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) > .zavrsni-poziv-v3 { margin-inline: 20px; margin-bottom: 40px; border-radius: 22px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-v3 { padding-block: 40px; gap: 32px; }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .zavrsni-v3-brojka b { font-size: 96px; }
}
@media (hover: hover) and (pointer: fine) {
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .mogucnost-kartica:hover { transform: none; border-color: var(--brend-200); }
    :is(.pocetna-sadrzaj, .sajt-sadrzaj) .delatnost-plocica:hover, :is(.pocetna-sadrzaj, .sajt-sadrzaj) .vodic-kartica:hover { transform: none; background: var(--brend-50); border-color: var(--brend-200); }
}

:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cenovnik-pocetna[data-ciklus] .cena-kartica { border-color: var(--n-200); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cenovnik-pocetna[data-ciklus] .cena-kartica.istaknut { border-color: var(--brend-500); }
:is(.pocetna-sadrzaj, .sajt-sadrzaj) .cenovnik-pocetna[data-ciklus] .cena-iznos b { color: var(--n-900); }

/* Product pages share the homepage surfaces and spacing. */
.sajt-sadrzaj .strana-glava { background: var(--n-0); padding-top: clamp(56px, 6vw, 88px); padding-bottom: 56px; }
.sajt-sadrzaj .strana-glava > .omot { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.sajt-sadrzaj .strana-glava h1 { max-width: 18ch; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.07; letter-spacing: -.045em; text-wrap: balance; }
.sajt-sadrzaj .strana-glava-uvod { margin-top: 24px; max-width: 47ch; font-size: 17px; line-height: 1.75; }
.sajt-sadrzaj .strana-glava-desno { justify-self: stretch; min-width: 0; }
.sajt-sadrzaj .strana-mrvice { margin-bottom: 24px; font-size: 12px; }
.sajt-sadrzaj .strana-glava-akcije { margin-top: 28px; gap: 12px; }
.sajt-sadrzaj .strana-glava-akcije .dugme { min-height: 46px; font-size: 14px; }
.mogucnosti-pregled { padding: 28px; border: 1px solid var(--brend-100); border-radius: 26px; background: var(--brend-50); color: var(--n-900); font-size: 13px; line-height: 1.5; }
.pregled-traka { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.pregled-traka b { font-size: 22px; letter-spacing: -.04em; color: var(--brend-700); }
.pregled-traka span { color: var(--n-600); font-size: 11px; }
.pregled-dokument { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px 16px; border: 1px solid var(--n-200); border-radius: 16px; background: var(--n-0); box-shadow: 0 16px 32px -28px color-mix(in srgb, var(--brend-900) 40%, transparent); }
.pregled-dokument small { display: block; color: var(--n-600); font-size: 10px; font-weight: 400; }
.pregled-dokument strong { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; }
.pregled-dokument > b { text-align: right; font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pregled-putanja { position: relative; padding: 26px 0; text-align: center; color: var(--n-600); font-size: 10px; }
.pregled-putanja i { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--brend-200); }
.pregled-putanja span { position: relative; padding: 8px 12px; border: 1px solid var(--brend-100); border-radius: 8px; background: var(--brend-50); }
.pregled-stavke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pregled-stavke > div { display: grid; gap: 10px; padding: 18px 12px; border: 1px solid var(--n-200); border-radius: 14px; background: var(--n-0); }
.pregled-stavke .ikona { color: var(--brend-700); }
.pregled-stavke b { font-size: 12px; font-weight: 500; }
.pregled-stavke span { color: var(--n-600); font-size: 10px; }
.pregled-potvrda { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--brend-700); font-size: 12px; }
.sajt-sadrzaj .sekcija-moduli { padding-top: 32px; }
.moduli-precice { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.moduli-precice a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 12px 16px; border: 1px solid var(--n-200); border-radius: 12px; color: var(--n-700); font-size: 13px; }
.sajt-sadrzaj .moduli-grupa { grid-template-columns: minmax(0, .75fr) minmax(0, 1.7fr); gap: 48px; padding: 56px 0; scroll-margin-top: 100px; }
.sajt-sadrzaj .moduli-grupa-glava { top: 110px; }
.sajt-sadrzaj .moduli-grupa h2 { max-width: 15ch; margin-bottom: 20px; font-size: 32px; line-height: 1.15; letter-spacing: -.035em; }
.sajt-sadrzaj .moduli-grupa-uvod { max-width: 32ch; color: var(--n-600); font-size: 15px; line-height: 1.75; }
.sajt-sadrzaj .moduli-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sajt-sadrzaj .modul-red { display: block; min-width: 0; padding: 26px; border: 1px solid var(--n-200); border-radius: 20px; background: var(--n-0); }
.sajt-sadrzaj .modul-red .ikona-krug { width: 44px; height: 44px; margin-bottom: 20px; border-radius: 13px; background: var(--brend-50); color: var(--brend-700); }
.sajt-sadrzaj .modul-red h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; letter-spacing: -.025em; }
.sajt-sadrzaj .modul-red p { color: var(--n-600); font-size: 14px; line-height: 1.75; }
.modul-dodatak { padding: 3px 6px; border-radius: 5px; background: var(--n-50); color: var(--n-600); font-size: 10px; font-weight: 500; letter-spacing: 0; }
.moduli-napomena { margin: 16px 0 0; max-width: 76ch; color: var(--n-600); font-size: 14px; line-height: 1.8; }
.moduli-napomena a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.delatnosti-imenik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sajt-sadrzaj .delatnosti-imenik .delatnost-plocica { display: flex; justify-content: space-between; gap: 16px; min-width: 0; white-space: normal; }
.delatnosti-imenik .ikona { flex: none; }
.naplata-panel { padding: 28px; border: 1px solid var(--brend-100); border-radius: 24px; background: var(--brend-50); }
.naplata-naslov { display: block; margin-bottom: 20px; color: var(--n-900); font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.naplata-panel .prekidac-ciklusa { width: 100%; }
.naplata-panel .cena-ciklus-opis { min-height: 64px; margin-top: 20px; font-size: 13px; }
.naplata-poverenje { display: flex; align-items: center; gap: 8px; padding-top: 20px; border-top: 1px solid var(--brend-100); color: var(--n-600); font-size: 11px; }
.sajt-sadrzaj .sekcija-cene { padding-top: 32px; }
.cenovnik-stranica .cene-grupa-glava { margin-bottom: 32px; max-width: 760px; }
.cenovnik-stranica .cene-grupa-naslov { margin: 0 0 16px; font-size: 34px; line-height: 1.15; letter-spacing: -.035em; }
.cenovnik-stranica .cene-grupa-uvod { margin: 0; color: var(--n-600); font-size: 16px; line-height: 1.75; }
.cenovnik-stranica .cene { align-items: stretch; gap: 20px; }
.cenovnik-stranica .cene-dve { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cenovnik-stranica .cene-tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cenovnik-stranica .cene-grupa + .cene-grupa { margin-top: 80px; padding-top: 64px; border-top: 1px solid var(--n-200); scroll-margin-top: 100px; }
.cenovnik-stranica .cena-naziv { margin: 0; }
.cenovnik-stranica .cene-dve .cena-opis { min-height: 80px; }
.cenovnik-stranica .cene-dve .cena-kartica { padding: 32px; }
.cenovnik-stranica[data-ciklus="mesecno"] .cena-nota-mesecno,
.cenovnik-stranica[data-ciklus="godisnje"] .cena-nota-godisnje { display: inline; }
.cena-detalji { margin: 0 0 24px; border-block: 1px solid var(--n-200); }
.cena-detalji summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none; color: var(--n-700); font-size: 13px; }
.cena-detalji summary::-webkit-details-marker { display: none; }
.cena-detalji summary > span { color: var(--n-500); font-variant-numeric: tabular-nums; }
.cena-detalji summary > .ikona { margin-left: auto; }
.cena-detalji[open] summary > .ikona { transform: rotate(45deg); }
.cena-detalji .cena-lista { margin: 8px 0 20px; }
.cenovnik-stranica .cene-napomena { margin: 28px 0 0; max-width: 84ch; color: var(--n-600); font-size: 13px; line-height: 1.8; text-align: left; }
.sajt-sadrzaj .sekcija-dodaci { background: var(--n-25); }
.dodaci-mreza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dodatak-kartica { display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid var(--n-200); border-radius: 20px; background: var(--n-0); }
.dodatak-kartica h3 { margin: 24px 0 12px; font-size: 20px; line-height: 1.3; }
.dodatak-kartica p { margin: 0 0 24px; color: var(--n-600); font-size: 14px; line-height: 1.75; }
.dodatak-cena { margin-top: auto; font-size: 25px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.dodatak-cena small, .dodatak-uslov { margin-top: auto; color: var(--n-600); font-size: 12px; letter-spacing: 0; font-weight: 400; }
/* The billing selection moves as one surface; prices always change immediately. */
.cenovnik-spreman .prekidac-ciklusa { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 340px); }
.cenovnik-spreman .prekidac-ciklusa::before { content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--n-0); box-shadow: var(--senka-1); transform: translateX(0); transition: transform 220ms var(--ease-out); }
.cenovnik-spreman[data-ciklus="godisnje"] .prekidac-ciklusa::before { transform: translateX(100%); }
.cenovnik-spreman .prekidac-ciklusa a { justify-content: center; padding-inline: 12px; }
.cenovnik-spreman .prekidac-ciklusa a.aktivan { background: transparent; box-shadow: none; }
.cenovnik-spreman[data-ciklus-tastatura] .prekidac-ciklusa::before { transition: none; }
/* Small, interruptible reactions on actual links and controls. */
@media (hover: hover) and (pointer: fine) {
    .sajt :is(.delatnost-plocica, .vodic-kartica, .alat-kartica) { transition: transform 200ms var(--ease-out), background-color 180ms ease, border-color 180ms ease; }
    .sajt :is(.delatnost-plocica, .vodic-kartica, .alat-kartica):hover { transform: translateY(-3px); }
    .sajt :is(.pocetna-sekcija-veza, .moduli-precice, .moduli-napomena) a .ikona { transition: transform 180ms var(--ease-out); }
    .sajt :is(.pocetna-sekcija-veza, .moduli-napomena) a:hover .ikona { transform: translateX(4px); }
    .sajt .moduli-precice a:hover .ikona { transform: translateY(3px); }
    .sajt .moduli-precice a:hover { background: var(--brend-50); text-decoration: none; border-color: var(--brend-200); }
}
@media (max-width: 1000px) {
    .sajt-sadrzaj .strana-glava > .omot { grid-template-columns: 1fr; gap: 32px; }
    .sajt-sadrzaj .strana-glava-kopija { max-width: 760px; }
    .sajt-sadrzaj .strana-glava h1 { max-width: 22ch; }
    .sajt-sadrzaj .strana-glava-desno { width: 100%; max-width: 680px; }
    .sajt-sadrzaj .moduli-grupa { grid-template-columns: 1fr; gap: 28px; }
    .sajt-sadrzaj .moduli-grupa-glava { position: static; }
    .sajt-sadrzaj .moduli-grupa h2 { max-width: none; }
    .sajt-sadrzaj .moduli-grupa-uvod { max-width: 55ch; }
    .delatnosti-imenik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dodaci-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cenovnik-stranica .cene-tri { grid-template-columns: 1fr; }
    .cenovnik-stranica .cene-tri .cena-opis { min-height: 0; }
}
@media (max-width: 760px) {
    .cenovnik-stranica .cene-dve, .cenovnik-stranica .cene-tri { grid-template-columns: 1fr; }
    .cenovnik-stranica .cene-grupa + .cene-grupa { margin-top: 56px; padding-top: 48px; }
    .cenovnik-stranica .cene-dve .cena-kartica { padding: 28px 24px; }
    .cenovnik-stranica .cene-dve .cena-opis { min-height: 0; }
}
@media (max-width: 640px) {
    .sajt-sadrzaj .strana-glava { padding-top: 48px; padding-bottom: 40px; }
    .sajt-sadrzaj .strana-glava h1 { font-size: 40px; max-width: 16ch; }
    .sajt-sadrzaj .strana-glava-uvod { font-size: 16px; }
    .sajt-sadrzaj .strana-glava-akcije .dugme { flex: 1; }
    .mogucnosti-pregled, .naplata-panel { padding: 20px; border-radius: 20px; }
    .pregled-traka { align-items: start; gap: 12px; }
    .pregled-traka span { max-width: 15ch; text-align: right; }
    .pregled-dokument { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px; }
    .pregled-dokument .ikona-plocica { width: 36px; height: 36px; padding: 8px; }
    .pregled-dokument > b { grid-column: 2; text-align: left; }
    .pregled-dokument > b small { display: inline; }
    .pregled-stavke { grid-template-columns: 1fr; }
    .pregled-stavke > div { grid-template-columns: 24px 1fr; gap: 4px 12px; padding: 14px; }
    .pregled-stavke .ikona { grid-row: span 2; }
    .pregled-stavke b { font-size: 13px; }
    .pregled-stavke span { font-size: 11px; }
    .moduli-precice { gap: 8px; margin-bottom: 24px; }
    .moduli-precice a { width: 100%; justify-content: space-between; }
    .sajt-sadrzaj .moduli-grupa { padding-block: 36px; }
    .sajt-sadrzaj .moduli-lista, .delatnosti-imenik, .dodaci-mreza { grid-template-columns: 1fr; }
    .sajt-sadrzaj .moduli-grupa h2 { font-size: 29px; }
    .sajt-sadrzaj .modul-red { padding: 24px; }
    .sajt-sadrzaj .modul-red h3 { font-size: 20px; }
    .sajt-sadrzaj .modul-red p { font-size: 15px; }
    .naplata-poverenje { align-items: start; line-height: 1.6; }
    .naplata-poverenje .ikona { flex: none; margin-top: 2px; }
    .cenovnik-stranica .cene-grupa-naslov { font-size: 30px; }
    .cenovnik-spreman .prekidac-ciklusa { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cenovnik-spreman .prekidac-ciklusa::before { transition: none; }
    .sajt :is(.delatnost-plocica, .vodic-kartica, .alat-kartica), .sajt :is(.pocetna-sekcija-veza, .moduli-precice, .moduli-napomena) a .ikona { transition: background-color 150ms ease, border-color 150ms ease; }
    .sajt :is(.delatnost-plocica, .vodic-kartica, .alat-kartica):hover, .sajt :is(.pocetna-sekcija-veza, .moduli-precice, .moduli-napomena) a:hover .ikona { transform: none; }
}

:is(.pocetna-sadrzaj, .sajt-sadrzaj) :is(a, summary) { scroll-margin-block: 110px 100px; }

/* Resource pages: the same typography and surfaces as the product pages. */
.resursi-stranica .strana-glava > .omot { grid-template-columns: minmax(0, 1fr); }
.resursi-stranica .strana-glava-kopija { max-width: 960px; }
.resursi-stranica .strana-glava h1 { max-width: 22ch; }
.resursi-stranica .strana-glava-uvod { max-width: 64ch; }
.resursi-stranica > :is(.resursi-sekcija, .kontakt-sekcija, .alat-sekcija) { padding-top: 24px; }
.resursi-stranica .ikona-plocica { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--brend-100); border-radius: 13px; background: var(--brend-50); color: var(--brend-700); }
.vodici-prazno { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 88px); padding: clamp(24px, 4vw, 48px); border: 1px solid var(--n-200); border-radius: 24px; background: var(--n-25); }
.vodici-prazno h2 { max-width: 21ch; margin: 24px 0 16px; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.vodici-prazno p { max-width: 48ch; margin: 0; color: var(--n-600); font-size: 15px; line-height: 1.8; }
.vodici-prazno .dugme { margin-top: 24px; }
.resursi-precice { display: grid; gap: 12px; min-width: 0; }
.resursi-precice a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: 16px; min-height: 96px; padding: 20px; border: 1px solid var(--n-200); border-radius: 16px; background: var(--n-0); color: var(--n-900); text-decoration: none; transition: border-color 180ms ease, background-color 180ms ease; }
.resursi-precice a > .ikona { color: var(--brend-700); }
.resursi-precice b { display: block; font-size: 15px; font-weight: 600; }
.resursi-precice small { display: block; margin-top: 5px; color: var(--n-600); font-size: 12px; line-height: 1.6; }
.vodici-pretraga { display: grid; gap: 24px; margin-bottom: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--n-200); }
.vodici-trazi { width: 100%; max-width: 600px; }
.vodici-trazi label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 500; }
.vodici-trazi-unos { display: flex; gap: 10px; }
.vodici-trazi-unos .unos { min-width: 0; min-height: 48px; font-size: 16px; }
.vodici-kategorije { display: flex; flex-wrap: wrap; gap: 8px; }
.vodici-kategorije a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--n-200); border-radius: 10px; color: var(--n-600); font-size: 13px; text-decoration: none; }
.vodici-kategorije a[aria-current] { border-color: var(--brend-200); background: var(--brend-50); color: var(--brend-700); }
.vodici-kategorije span { color: var(--n-500); font-variant-numeric: tabular-nums; }
.vodici-stranica .mreza-vodici { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resursi-stranica .vodic-kartica { min-width: 0; gap: 12px; }
.resursi-stranica .vodic-kategorija { margin-bottom: 8px; border-radius: 6px; text-transform: none; letter-spacing: 0; }
.resursi-stranica .vodic-naslov { margin: 0; }
.resursi-stranica .vodic-uvod { margin: 0; }
.resursi-stranica .vodic-noga { justify-content: space-between; gap: 16px; line-height: 1.6; }
.resursi-stranica .vodic-noga > .ikona { flex: none; }
.vodic-stranica > :is(.strana-glava, .clanak-sekcija) > .omot { max-width: 940px; }
.vodic-stranica .strana-glava h1 { font-size: clamp(36px, 4vw, 56px); max-width: 24ch; }
.vodic-stranica .strana-glava-meta { margin-top: 24px; font-size: 13px; line-height: 1.8; }
.vodic-stranica > .clanak-sekcija { padding-top: 12px; }
.vodic-stranica .vodic-kljucno { max-width: none; padding: 28px; border: 1px solid var(--brend-100); border-radius: 18px; background: var(--brend-50); }
.vodic-stranica .vodic-kljucno p { font-size: 17px; line-height: 1.8; }
.vodic-stranica .vodic-sadrzaj { max-width: none; font-size: 17px; line-height: 1.85; overflow-wrap: anywhere; }
.vodic-stranica .vodic-sadrzaj :is(img, video, iframe) { max-width: 100%; }
.vodic-stranica .vodic-sadrzaj h2 { font-size: 29px; letter-spacing: -.025em; }
.vodic-stranica .vodic-sadrzaj pre { white-space: pre; overflow: auto; }
.vodic-stranica .clanak-noga { padding-top: 28px; border-top: 1px solid var(--n-200); }
.alati-stranica .alati-mreza { gap: 24px; }
.alati-stranica .alat-kartica { gap: 0; min-width: 0; padding: 28px; border: 1px solid var(--n-200); border-radius: 24px; background: var(--n-0); box-shadow: none; }
.alat-kartica-vrh { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.alat-kartica-vrh > span:last-child { color: var(--n-500); font-size: 12px; font-variant-numeric: tabular-nums; }
.alat-prikaz { display: flex; flex-direction: column; justify-content: center; min-height: 180px; padding: 24px; border: 1px solid var(--brend-100); border-radius: 16px; background: var(--brend-50); color: var(--n-900); }
.alat-prikaz span, .alat-prikaz small { display: block; color: var(--n-600); font-size: 11px; line-height: 1.6; }
.alat-prikaz b { display: block; margin-top: 5px; font-size: clamp(18px, 2vw, 25px); letter-spacing: -.03em; font-weight: 500; line-height: 1.3; }
.alat-mini-traka { height: 9px; margin-top: 22px; overflow: hidden; border-radius: 4px; background: var(--brend-100); }
.alat-mini-traka i { display: block; width: 64%; height: 100%; border-radius: inherit; background: var(--brend-500); }
.alat-mini-legenda { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; }
.alat-prikaz-qr { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.alat-prikaz-qr small { margin-top: 14px; }
.alat-qr-znak { display: grid; place-items: center; flex: none; width: 80px; height: 80px; border: 1px solid var(--brend-100); border-radius: 14px; background: var(--n-0); color: var(--brend-700); }
.alat-qr-znak .ikona { width: 48px; height: 48px; }
.alati-stranica .alat-kartica h2 { margin: 28px 0 12px; font-size: 27px; line-height: 1.25; letter-spacing: -.035em; }
.alati-stranica .alat-kartica p { margin: 0 0 28px; max-width: 52ch; font-size: 15px; line-height: 1.8; color: var(--n-600); }
.alati-stranica .alat-veza { justify-content: space-between; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--n-200); font-size: 14px; }
.alati-dostupnost { display: flex; flex-wrap: wrap; gap: 16px 32px; padding-block: 28px; border-bottom: 1px solid var(--n-200); }
.alati-dostupnost span { display: flex; align-items: center; gap: 8px; color: var(--n-600); font-size: 12px; }
.alati-dostupnost .ikona { color: var(--brend-700); }
.alati-stranica .alati-napomena { margin-top: 24px; max-width: 90ch; line-height: 1.8; }
.resursi-stranica :is(.kontakt-mreza, .alat-forma) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 28px; max-width: none; }
.resursi-stranica :is(.kontakt-mreza, .alat-forma) > * { min-width: 0; }
.resursi-stranica :is(.kontakt-mreza, .alat-forma) .kartica { border: 1px solid var(--n-200); border-radius: 22px; background: var(--n-0); box-shadow: none; overflow: visible; }
.resursi-stranica :is(.kontakt-mreza, .alat-forma) .kartica-telo { padding: 28px; }
.resursi-stranica .alat-forma .kartica-glava { padding: 24px 28px; border-bottom: 1px solid var(--n-200); }
.resursi-stranica .alat-forma .kartica-naslov { font-size: 17px; font-weight: 600; }
.resursi-stranica :is(.kontakt-mreza, .alat-forma) :is(.unos, .izbor, .oblast) { min-height: 48px; font-size: 16px; border-radius: 10px; }
.resursi-stranica :is(.kontakt-mreza, .alat-forma) .polje-labela { font-size: 13px; }
.resursi-stranica :is(.kontakt-mreza, .alat-forma) .mreza { gap: 16px; }
.resursi-stranica :is(.kontakt-mreza, .alat-forma) .mreza-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resursi-stranica .meseci-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resursi-stranica .lepljiva-kolona { top: 110px; }
.resursi-stranica .alat-rezime { background: var(--n-25); border-radius: 22px; }
.resursi-stranica :is(.alat-rezime, .alat-qr-rezultat) h2 { margin: 0 0 28px; color: var(--n-900); font-size: 22px; letter-spacing: -.03em; }
.resursi-stranica .limit-glava { flex-wrap: wrap; gap: 8px; }
.resursi-stranica .limit-brojevi { font-size: 12px; font-variant-numeric: tabular-nums; }
.resursi-stranica .limit-noga { gap: 12px; font-size: 11px; }
.resursi-stranica .limit-poruka { text-align: right; }
.resursi-stranica .alat-rezime .red-kartica-podaci { grid-template-columns: 1fr; gap: 6px; }
.resursi-stranica .alat-rezime .red-kartica-podaci dd { text-align: left; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.resursi-stranica .alat-qr-rezultat { padding-block: 36px; }
.alat-qr-rezultat img { max-width: 100%; height: auto !important; }
.resursi-stranica .alat-napomena { max-width: 100ch; margin-top: 28px; font-size: 12px; line-height: 1.8; }
.alat-na-rezultat { display: none; }
.alat-izracunaj { min-height: 46px; margin-top: 20px; }
#pregled-limita { scroll-margin-block: 110px 28px; }
.kontakt-forma-glava { padding: 28px 28px 0; }
.kontakt-forma-glava h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.kontakt-forma-glava p { margin: 10px 0 0; font-size: 12px; color: var(--n-600); }
.kontakt-privatnost { max-width: 68ch; margin-top: 18px; line-height: 1.8; }
.kontakt-posalji { min-height: 48px; margin-top: 8px; }
.kontakt-podrska { gap: 20px; }
.resursi-stranica .kontakt-info { border-color: var(--brend-100); background: var(--brend-50); }
.kontakt-info h2 { margin: 24px 0 12px; font-size: 28px; letter-spacing: -.035em; }
.kontakt-info p { margin: 0 0 28px; max-width: 36ch; font-size: 14px; color: var(--n-600); line-height: 1.8; }
.kontakt-info .red-kartica-podaci { grid-template-columns: 1fr; gap: 6px; }
.kontakt-info .red-kartica-podaci dt { font-size: 12px; color: var(--n-600); }
.kontakt-info .red-kartica-podaci dd { margin: 0 0 18px; text-align: left; overflow-wrap: anywhere; color: var(--n-900); }
.kontakt-info .red-kartica-podaci dd:last-child { margin-bottom: 0; }
.kontakt-info a { color: var(--brend-700); }
.kontakt-podrska h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.4; letter-spacing: -.02em; }
.kontakt-podrska .napomena-odgovornost { font-size: 12px; line-height: 1.8; }
/* A compact, dismissible trial prompt, clear of the device safe area. */
.sajt-dno { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); transition: transform 220ms var(--ease-out), opacity 180ms ease, visibility 220ms; }
.sajt-dno-unutra { max-width: 600px; gap: 16px; padding: 7px 7px 7px 20px; border-radius: 20px; box-shadow: 0 8px 28px -8px var(--senka-boja-1); }
.sajt-dno-tekst { display: grid; flex: 1; min-width: 0; gap: 3px; line-height: 1.4; }
.sajt-dno-tekst b { font-size: 13px; font-weight: 600; }
.sajt-dno-tekst span { display: block; color: var(--n-600); font-size: 11px; }
.sajt-dno .dugme { min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 13px; white-space: nowrap; }
.sajt-dno-zatvori { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--n-600); cursor: pointer; font-size: 22px; line-height: 1; transition: background-color 180ms ease, color 180ms ease; }
.sajt-dno.sajt-dno-sklonjena { transform: translateY(16px); opacity: 0; visibility: hidden; }
.sajt-dno.sajt-dno-sklonjena .sajt-dno-unutra { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
    .resursi-precice a:hover { background: var(--brend-50); border-color: var(--brend-200); }
    .sajt-dno-zatvori:hover { color: var(--n-900); background: var(--n-100); }
}
@media (max-width: 1000px) {
    .resursi-stranica :is(.kontakt-mreza, .alat-forma) { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 20px; }
    .resursi-stranica .meseci-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resursi-stranica :is(.kontakt-mreza, .alat-forma) .kartica-telo { padding: 24px; }
    .resursi-stranica .lepljiva-kolona { position: static; }
}
@media (max-width: 800px) {
    .vodici-prazno { grid-template-columns: 1fr; gap: 28px; }
    .resursi-stranica :is(.kontakt-mreza, .alat-forma) { grid-template-columns: minmax(0, 1fr); }
    .alati-stranica .alati-mreza { grid-template-columns: 1fr; }
    .vodici-stranica .mreza-vodici { grid-template-columns: 1fr; }
    .alat-na-rezultat { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--n-200); font-size: 14px; font-weight: 500; }
}
@media (max-width: 640px) {
    .resursi-stranica .strana-glava h1 { font-size: clamp(34px, 9vw, 40px); max-width: 19ch; }
    .resursi-stranica > :is(.resursi-sekcija, .kontakt-sekcija, .alat-sekcija) { padding-top: 12px; }
    .vodici-prazno { padding: 24px 20px; border-radius: 20px; }
    .resursi-precice a { padding: 16px; gap: 12px; }
    .resursi-precice small { font-size: 12px; }
    .vodici-trazi-unos { flex-wrap: wrap; }
    .vodici-trazi-unos .unos { flex: 1 1 100%; }
    .vodici-trazi-unos .dugme { width: 100%; min-height: 44px; }
    .alati-stranica .alat-kartica { padding: 22px 20px; border-radius: 20px; }
    .alat-prikaz { min-height: 164px; padding: 18px; }
    .alat-mini-legenda { gap: 12px; }
    .alat-mini-legenda span { font-size: 10px; }
    .alat-prikaz-qr { gap: 12px; }
    .alat-qr-znak { width: 56px; height: 56px; border-radius: 10px; }
    .alat-qr-znak .ikona { width: 36px; height: 36px; }
    .alati-stranica .alat-kartica h2 { font-size: 25px; }
    .alati-dostupnost { display: grid; gap: 14px; }
    .resursi-stranica :is(.kontakt-mreza, .alat-forma) .kartica-telo { padding: 22px 20px; }
    .resursi-stranica .alat-forma .kartica-glava { padding: 20px; }
    .resursi-stranica :is(.kontakt-mreza, .alat-forma) .mreza-2 { grid-template-columns: 1fr; }
    .kontakt-forma-glava { padding: 24px 20px 0; }
    .kontakt-posalji, .alat-stranica button[type="submit"], .alat-stranica .kartica-telo > button { width: 100%; }
    .kontakt-podrska { gap: 16px; }
    .vodic-stranica .vodic-kljucno { padding: 22px; }
    .vodic-stranica .vodic-sadrzaj { font-size: 16px; }
    .sajt-dno { bottom: calc(12px + env(safe-area-inset-bottom)); }
    .sajt-dno-unutra { width: auto; max-width: 100%; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 18px; }
    .sajt-dno-tekst b { font-size: 12px; }
    .sajt-dno-tekst span { font-size: 10px; }
    .sajt-dno .dugme { padding-inline: 12px; font-size: 12px; }
    .sajt-dno .dugme .ikona { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sajt-dno { transition: opacity 150ms ease, visibility 150ms; transform: none; }
    .sajt-dno.sajt-dno-sklonjena { transform: none; }
}
@media (max-width: 360px) {
    .sajt-dno-unutra { gap: 6px; padding-left: 10px; }
    .sajt-dno-tekst b { font-size: 11px; white-space: nowrap; }
    .sajt-dno .dugme { padding-inline: 10px; }
}