:root {
  --pozadina: #f4f6fa;
  --povrsina: #ffffff;
  --ivica: #dce2ec;
  --tekst: #18202b;
  --tiho: #5f6b7a;
  --akcenat: #3b6fd8;
  --akcenat-tamni: #2c56b0;
  --na-akcentu: #ffffff;
  --srce: #f2c94c;
  --kasni: #d64545;
  --uspeh: #2e9b5f;
  --senka: 0 10px 30px rgba(24, 32, 43, 0.08);
  --sirina: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadina: #11161d;
    --povrsina: #1a212b;
    --ivica: #2b3542;
    --tekst: #e7ecf2;
    --tiho: #98a3b1;
    --akcenat: #6b95ee;
    --akcenat-tamni: #8aaaf2;
    --na-akcentu: #0d1320;
    --kasni: #f07171;
    --uspeh: #5cc48a;
    --senka: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

a { color: var(--akcenat); }

.okvir { max-width: var(--sirina); margin: 0 auto; padding: 0 16px; }

/* zaglavlje */
.zaglavlje { padding: 18px 0; }
.zaglavlje .okvir { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.znak { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--tekst); text-decoration: none; }
.znak img { width: 34px; height: 34px; }
.dugme {
  display: inline-block;
  background: var(--akcenat);
  color: var(--na-akcentu);
  border: 0;
  border-radius: 12px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.dugme:hover { background: var(--akcenat-tamni); }
.dugme:disabled { opacity: 0.6; cursor: wait; }
.dugme.malo { padding: 9px 16px; font-size: 15px; }

/* hero */
.hero { padding: 40px 0 56px; }
.hero .okvir { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .hero .okvir { grid-template-columns: 1.1fr 0.9fr; } }
.hero h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--akcenat); }
.hero p.uvod { font-size: 19px; color: var(--tiho); margin: 0 0 24px; max-width: 34em; }
.oznake { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; color: var(--tiho); font-size: 15px; }
.oznake li::before { content: "✓ "; color: var(--uspeh); font-weight: 700; }
.oznake li { margin-right: 10px; }

/* telefon - prikaz pocetnog ekrana aplikacije */
.telefon {
  justify-self: center;
  width: min(320px, 100%);
  background: var(--pozadina);
  border: 10px solid #1d2430;
  border-radius: 38px;
  padding: 18px 14px 22px;
  box-shadow: var(--senka);
}
.telefon .naslov-ekrana { font-weight: 800; font-size: 19px; margin: 4px 4px 14px; }
.blok-naslov { font-size: 12px; font-weight: 750; letter-spacing: 0.05em; color: var(--tiho); margin: 14px 4px 6px; }
.blok-naslov.kasni { color: var(--kasni); }
.stavka {
  display: flex; align-items: center; gap: 10px;
  background: var(--povrsina);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-left: 4px solid var(--ivica);
  font-size: 14px;
}
.stavka.kasni { border-left-color: var(--kasni); }
.stavka.nedelja { border-left-color: var(--srce); }
.stavka .ik { font-size: 20px; }
.stavka .tx { flex: 1; min-width: 0; }
.stavka .tx b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stavka .tx span { color: var(--tiho); font-size: 13px; }
.stavka.kasni .tx span { color: var(--kasni); }
.stavka .iz { font-weight: 650; white-space: nowrap; }
.telefon .skeniraj { margin-top: 14px; text-align: center; background: var(--akcenat); color: var(--na-akcentu); border-radius: 12px; padding: 11px; font-weight: 650; }

/* sekcije */
section { padding: 56px 0; }
section h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; }
section p.pod { color: var(--tiho); margin: 0 0 28px; max-width: 40em; }
.mreza { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .mreza.tri { grid-template-columns: repeat(3, 1fr); } .mreza.dva { grid-template-columns: repeat(2, 1fr); } }
.karta { background: var(--povrsina); border: 1px solid var(--ivica); border-radius: 18px; padding: 22px; }
.karta h3 { margin: 6px 0 8px; font-size: 19px; }
.karta p, .karta ul { margin: 0; color: var(--tiho); font-size: 16px; }
.karta ul { padding-left: 18px; }
.karta .e { font-size: 30px; }

.koraci { counter-reset: korak; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.koraci li { counter-increment: korak; position: relative; padding: 16px 16px 16px 60px; background: var(--povrsina); border: 1px solid var(--ivica); border-radius: 16px; }
.koraci li::before {
  content: counter(korak);
  position: absolute; left: 16px; top: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--akcenat); color: var(--na-akcentu);
  display: grid; place-items: center; font-weight: 750; font-size: 15px;
}

.cena { text-align: center; }
.cena .iznos { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; }
.cena .iznos small { font-size: 20px; color: var(--tiho); font-weight: 600; }

/* prijava */
.prijava { background: var(--povrsina); border: 1px solid var(--ivica); border-radius: 22px; padding: 28px 20px; box-shadow: var(--senka); }
@media (min-width: 700px) { .prijava { padding: 36px; } }
.prijava form { display: grid; gap: 18px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend, label.oznaka { font-weight: 650; margin-bottom: 8px; display: block; }
.izbori { display: flex; flex-wrap: wrap; gap: 8px; }
.izbori label {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ivica); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; font-size: 15px;
  background: var(--pozadina);
}
.izbori input { accent-color: var(--akcenat); }
.izbori label:has(input:checked) { border-color: var(--akcenat); }
input[type="email"], input[type="text"] {
  width: 100%; font: inherit; color: var(--tekst);
  background: var(--pozadina); border: 1px solid var(--ivica); border-radius: 12px; padding: 12px 14px;
}
input:focus-visible, .dugme:focus-visible, .izbori label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--akcenat) 45%, transparent); outline-offset: 2px; }
.red { display: grid; gap: 12px; }
@media (min-width: 600px) { .red { grid-template-columns: 2fr 1fr; } }
.sitno { font-size: 14px; color: var(--tiho); margin: 0; }
.poruka { padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.poruka.ok { background: color-mix(in srgb, var(--uspeh) 15%, transparent); color: var(--uspeh); }
.poruka.greska { background: color-mix(in srgb, var(--kasni) 15%, transparent); color: var(--kasni); }
.skriveno { position: absolute; left: -9999px; }

details { background: var(--povrsina); border: 1px solid var(--ivica); border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 650; }
details p { color: var(--tiho); margin: 10px 0 0; }

footer { padding: 32px 0 48px; color: var(--tiho); font-size: 14px; border-top: 1px solid var(--ivica); margin-top: 24px; }
footer .okvir { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }

.tekst-strana { max-width: 760px; padding-top: 24px; padding-bottom: 48px; }
.tekst-strana h1 { font-size: 34px; }
.tekst-strana h2 { font-size: 22px; margin-top: 32px; }