:root {
  --plava: #0E4C92;
  --plava-jarka: #1D6FD8;
  --plava-tamna: #0A1B33;
  --plava-srednja: #13284A;
  --plava-svetla: #E3EDFA;
  --tirkiz: #15A589;
  --tirkiz-tekst: #0F7F69;
  --tirkiz-svetla: #DDF4EE;
  --podloga: #F4F7FB;
  --linija: #DCE4EE;
  --linija-tamna: #2E4566;
  --tekst: #0A1B33;
  --tekst-2: #4A5D73;
  --tekst-3: #5A6B80;
  --na-tamnom: #B9C7DA;
  --zelena: #165443;
  --zelena-svetla: #DDF2E8;
  --greska: #B42318;
  --senka: 0 1px 2px rgba(10, 27, 51, .05), 0 12px 32px rgba(10, 27, 51, .08);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--tekst); background: var(--podloga); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--plava); }
a:hover { color: var(--plava-tamna); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; }
.sirina { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sitno { font-size: 14px; color: var(--tekst-3); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* zaglavlje */
.zaglavlje { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--linija); }
.zaglavlje .sirina { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--plava-tamna); font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.logo em { font-style: normal; color: var(--plava-jarka); }
.meni { display: flex; gap: 26px; margin-left: 16px; font-size: 15px; font-weight: 500; }
.meni a { color: #3B4B60; text-decoration: none; }
.meni a:hover { color: var(--plava); }
.zaglavlje .desno { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* dugmad */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; background: var(--plava); color: #FFFFFF; border: 1px solid var(--plava); border-radius: 10px; padding: 10px 20px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.dugme:hover { background: var(--plava-tamna); border-color: var(--plava-tamna); color: #FFFFFF; }
.dugme.jarko { background: var(--plava-jarka); border-color: var(--plava-jarka); }
.dugme.jarko:hover { background: #1759B0; border-color: #1759B0; }
.dugme.belo { background: #FFFFFF; color: var(--plava-tamna); border-color: var(--linija); }
.dugme.belo:hover { background: var(--plava-svetla); }
.dugme.obrub { background: transparent; color: #FFFFFF; border-color: var(--linija-tamna); }
.dugme.obrub:hover { background: rgba(255, 255, 255, .06); }
.dugme.veliko { min-height: 52px; padding: 12px 24px; font-size: 16px; border-radius: 12px; }
.dugme.malo { padding: 9px 16px; font-size: 15px; }
.dugmad { display: flex; gap: 12px; flex-wrap: wrap; }

/* uvod */
.uvod-traka { background: var(--plava-tamna); color: #FFFFFF; overflow: hidden; }
.uvod-traka .sirina { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 80px; padding-bottom: 88px; }
.uvod-tekst { flex: 1 1 480px; min-width: 0; }
.znacka { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(21, 165, 137, .16); color: #7FE0C9; font-size: 14px; font-weight: 600; }
.znacka::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tirkiz); }
.uvod-traka h1 { margin: 22px 0 18px; font-size: 56px; line-height: 1.06; letter-spacing: -.03em; }
.uvod-traka .podnaslov { margin: 0 0 30px; font-size: 19px; color: var(--na-tamnom); max-width: 560px; }
.kvacice { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; font-size: 14px; color: var(--na-tamnom); }
.kvacice > span, .lista-kvacica li { display: flex; align-items: center; gap: 8px; }
.kvacice svg, .lista-kvacica svg { flex: none; }

.uvod-slika { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; position: relative; min-height: 520px; }
.telefon { width: 270px; height: 520px; border-radius: 40px; background: var(--plava-srednja); border: 1px solid var(--linija-tamna); padding: 12px; }
.telefon .ekran { width: 100%; height: 100%; border-radius: 30px; background: var(--podloga); overflow: hidden; color: var(--tekst); }
.telefon .vrh { background: var(--plava); color: #FFFFFF; padding: 22px 18px 16px; }
.telefon .vrh b { display: block; font-size: 16px; }
.telefon .vrh span { font-size: 12px; color: #B9D2F2; }
.telefon .telo { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.telefon .skeniraj { height: 118px; border-radius: 16px; background: var(--plava); color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; }
.telefon .dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.telefon .dva span { height: 40px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--linija); font-size: 12px; font-weight: 600; color: var(--plava); display: flex; align-items: center; justify-content: center; }
.telefon .stavka { background: #FFFFFF; border: 1px solid var(--linija); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.telefon .stavka div { flex: 1; min-width: 0; }
.telefon .stavka b { display: block; font-size: 12px; }
.telefon .stavka small { font-size: 11px; color: var(--tekst-3); }
.oznaka-primljen { font-size: 11px; font-weight: 600; color: var(--tirkiz-tekst); background: var(--tirkiz-svetla); padding: 3px 8px; border-radius: 999px; }
.lebdeca { position: absolute; background: #FFFFFF; color: var(--tekst); border-radius: 14px; border: 1px solid var(--linija); font-size: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); }
.lebdeca.racun { right: 0; bottom: 36px; width: 250px; overflow: hidden; }
.lebdeca.racun .glava { background: var(--tirkiz); color: #FFFFFF; padding: 10px 14px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.lebdeca.racun .redovi { padding: 12px 14px; display: grid; gap: 7px; }
.lebdeca .red { display: flex; justify-content: space-between; gap: 8px; }
.lebdeca .red span:first-child { color: var(--tekst-3); }
.lebdeca.program { left: 0; top: 150px; width: 210px; padding: 12px 14px; }
@media (min-width: 961px) { .uvod-slika .telefon { margin-left: 110px; } }
.lebdeca.program b { display: block; margin-bottom: 8px; font-size: 12px; }
.lebdeca.program .red { padding: 6px 0; border-top: 1px solid #EDF1F6; }

/* sekcije */
.sekcija { padding: 88px 0; }
.sekcija.bela { background: #FFFFFF; border-top: 1px solid var(--linija); border-bottom: 1px solid var(--linija); }
.nadnaslov { font-size: 14px; font-weight: 600; color: var(--tirkiz-tekst); letter-spacing: .08em; text-transform: uppercase; }
.naslov { margin: 10px 0 40px; font-size: 40px; max-width: 760px; }
.naslov.blizu { margin-bottom: 16px; }
.mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.kartica { background: #FFFFFF; border: 1px solid var(--linija); border-radius: 18px; padding: 28px; }
.kartica h3 { margin: 16px 0 8px; font-size: 19px; }
.kartica p { margin: 0; color: var(--tekst-2); }
.kartica.istaknuta { background: var(--plava); color: #FFFFFF; border-color: var(--plava); grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.kartica.istaknuta h3 { font-size: 22px; }
.kartica.istaknuta p { color: #C9DAF2; max-width: 520px; }
.broj { width: 44px; height: 44px; border-radius: 12px; background: var(--plava-svetla); color: var(--plava); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.ikona { color: var(--plava); }

/* privatnost */
.dve-kolone { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.dve-kolone > div { flex: 1 1 440px; min-width: 0; }
.tok { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cvor { background: var(--podloga); border: 1px solid var(--linija); border-radius: 16px; padding: 18px; width: 130px; text-align: center; }
.cvor b { display: block; margin-top: 8px; }
.cvor span { font-size: 13px; color: var(--tekst-3); }
.cvor.tamni { background: var(--plava-tamna); color: #FFFFFF; border-color: var(--plava-tamna); }
.cvor.tamni span { color: var(--na-tamnom); }
.strelica { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--tirkiz-tekst); display: flex; flex-direction: column; align-items: center; }

/* cene */
.cene { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: stretch; }
.glavna-cena { background: var(--plava-tamna); color: #FFFFFF; border-radius: 22px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.glavna-cena .za { font-weight: 600; color: #7FE0C9; }
.glavna-cena .iznos { display: flex; align-items: baseline; gap: 10px; }
.glavna-cena .iznos b { font-size: 64px; letter-spacing: -.03em; line-height: 1; }
.glavna-cena .iznos span { font-size: 20px; color: var(--na-tamnom); }
.glavna-cena .uslov { color: var(--na-tamnom); }
.lista-kvacica { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.glavna-cena .dugme { margin-top: auto; }
.popusti { background: #FFFFFF; border: 1px solid var(--linija); border-radius: 22px; padding: 36px; }
.popusti h3 { margin: 0 0 6px; font-size: 18px; }
.popusti table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.popusti th { text-align: left; font-size: 13px; color: var(--tekst-3); font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--linija); }
.popusti td { padding: 12px 0; border-bottom: 1px solid #EDF1F6; }
.popusti td.r, .popusti th.r { text-align: right; }
.popusti td.r:nth-child(2) { color: var(--tirkiz-tekst); font-weight: 700; }
.oznaka-gratis { display: inline-block; background: var(--tirkiz-svetla); color: var(--tirkiz-tekst); font-weight: 600; border-radius: 12px; padding: 8px 14px; font-size: 14px; margin-top: 18px; }
.napomena-cene { color: var(--tekst-3); font-size: 14px; margin-top: 16px; }

/* video */
.naslov-red { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.naslov-red .naslov { margin-bottom: 0; }
.filteri { display: flex; gap: 8px; flex-wrap: wrap; }
.filteri button { font: inherit; font-weight: 600; font-size: 14px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linija); background: #FFFFFF; color: var(--tekst); cursor: pointer; }
.filteri button[aria-pressed="true"] { background: var(--plava-tamna); border-color: var(--plava-tamna); color: #FFFFFF; }
.videi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.video { background: #FFFFFF; border: 1px solid var(--linija); border-radius: 18px; overflow: hidden; }
.video .okvir { position: relative; aspect-ratio: 16 / 9; background: var(--plava-srednja); }
.video .okvir img, .video .okvir iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video .pusti { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
.video .pusti span { width: 60px; height: 60px; border-radius: 50%; background: var(--plava-jarka); display: flex; align-items: center; justify-content: center; }
.video .tekst { padding: 16px 18px 18px; }
.video b { display: block; }
.video p { margin: 4px 0 0; color: var(--tekst-3); font-size: 14px; }
.prazno { color: var(--tekst-3); }

/* preuzimanje */
.poziv { background: var(--plava); color: #FFFFFF; border-radius: 26px; padding: 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.poziv > div:first-child { flex: 1 1 420px; min-width: 0; }
.poziv h2 { margin: 0 0 10px; font-size: 38px; }
.poziv p { margin: 0; color: #C9DAF2; font-size: 17px; }
.poziv .sitno { color: #C9DAF2; margin-top: 10px; }
.poziv .dugme { background: #FFFFFF; color: var(--plava-tamna); border-color: #FFFFFF; }
.poziv .dugme.obrub { background: transparent; color: #FFFFFF; border-color: #6C95CC; }
.poziv code { font-size: 12px; word-break: break-all; color: #E3ECF7; }

/* novosti */
.novosti-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.novost { border-top: 1px solid var(--linija); padding: 14px 0; }
.novost .kada { font-size: 14px; color: var(--tekst-3); }
.novost p { margin: 4px 0 0; color: var(--tekst-2); white-space: pre-line; }

/* podnožje */
.podnozje { background: var(--plava-tamna); color: var(--na-tamnom); padding: 56px 0 32px; font-size: 15px; }
.podnozje .kolone { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.podnozje .ime { font-weight: 700; font-size: 20px; color: #FFFFFF; }
.podnozje .ime em { font-style: normal; color: #7FB3F5; }
.podnozje b { display: block; color: #FFFFFF; margin-bottom: 10px; }
.podnozje a { display: block; color: var(--na-tamnom); text-decoration: none; line-height: 1.9; }
.podnozje a:hover { color: #FFFFFF; }
.podnozje .dno { margin-top: 40px; padding-top: 20px; border-top: 1px solid #1F3556; font-size: 14px; }

/* tekstualne strane */
.strana-teksta { max-width: 820px; margin: 0 auto; padding: 48px 20px 64px; background: #FFFFFF; }
.strana-teksta h1 { color: var(--plava-tamna); }
.strana-teksta h2 { font-size: 20px; margin-top: 28px; }

@media (max-width: 960px) {
  .meni { display: none; }
  .uvod-traka h1 { font-size: 40px; }
  .naslov { font-size: 32px; }
  .kartica.istaknuta { grid-column: auto; }
}
@media (max-width: 620px) {
  .zaglavlje .desno .dugme.belo { display: none; }
  .uvod-traka .sirina { padding-top: 48px; padding-bottom: 56px; }
  .uvod-traka h1 { font-size: 36px; }
  .uvod-slika { min-height: 560px; }
  .lebdeca.program { display: none; }
  .lebdeca.racun { right: 50%; transform: translateX(50%); bottom: 0; }
  .sekcija { padding: 64px 0; }
  .poziv { padding: 32px 24px; }
  .poziv h2 { font-size: 30px; }
  .glavna-cena, .popusti { padding: 28px 22px; }
  .glavna-cena .iznos b { font-size: 52px; }
}