/* ===== pismo: Plus Jakarta Sans, posluzeno s nase domene ===========
   Ne s Google Fonts CDN-a: taj poziv salje IP posjetitelja Googleu
   bez privole. Latin-ext je nuzan za c, c, z, s, d.
   ================================================================== */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;
  font-display:swap;src:url("/fonts/jakarta-latin-ext-400.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;
  font-display:swap;src:url("/fonts/jakarta-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;
  font-display:swap;src:url("/fonts/jakarta-latin-ext-500.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;
  font-display:swap;src:url("/fonts/jakarta-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;
  font-display:swap;src:url("/fonts/jakarta-latin-ext-600.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;
  font-display:swap;src:url("/fonts/jakarta-latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;
  font-display:swap;src:url("/fonts/jakarta-latin-ext-700.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;
  font-display:swap;src:url("/fonts/jakarta-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   Javni cjenik — dizajnerski sustav
   Tipografija i prostor po uzoru na moderne SaaS landinge (Plus Jakarta Sans, tijesan
   razmak slova, utonula pozadina s bijelim plohama, meke sjene, bento kartice).
   Paleta: indigo marke, jantar kao akcent, zelena rezervirana za status uspjeha.
   ========================================================================== */

:root{
  /* tinta */
  --tinta:#101114; --tinta-2:#565c66; --tinta-3:#8c939d;

  /* plohe */
  --papir:#ffffff;            /* podignuta ploha, kartice */
  --pranje:#f5f6f7;           /* blago utonulo, unutarnji paneli */
  --pozadina:#f4f5f6;         /* utonula pozadina stranice */
  --pozadina-2:#eaedf3;       /* druga ploha odjeljka, s tragom indiga */
  --tamno:#101114;

  /* rubovi */
  --rub:rgba(16,17,20,.07);
  --rub-jaki:rgba(16,17,20,.14);
  --rub-tvrdi:#e6e8ea;

  /* marka — indigo */
  --marka:#1e2a5e; --marka-jaka:#16204a; --marka-svijetla:#2b3c7d;
  --marka-blijeda:#eef0f7; --marka-rub:rgba(30,42,94,.22);
  --marka-ploha:#e6eaf6;      /* indigo ploha, jača od blijede - trake i osnovice */

  /* akcent — jantar; jedna jantarna stvar po zaslonu */
  --akcent:#d97706; --akcent-blijedi:#fdf6ec; --akcent-rub:rgba(217,119,6,.24);

  /* status uspjeha — ostaje zelena, jer indigo ne cita kao "objavljeno" */
  --ok:#0e6a4c; --ok-jaka:#0a5039; --ok-blijeda:#ecf5f1; --ok-rub:rgba(14,106,76,.22);

  /* signal */
  --signal:#b4470f; --signal-blijedi:#fdf1e9; --signal-rub:rgba(180,71,15,.2);

  /* sjene */
  --sjena-1:0 1px 2px rgba(16,17,20,.05);
  --sjena-2:0 1px 2px rgba(16,17,20,.04), 0 10px 24px -14px rgba(16,17,20,.22);
  --sjena-3:0 1px 2px rgba(16,17,20,.04), 0 24px 48px -24px rgba(16,17,20,.3);
  --sjena-gumb:0 1px 2px rgba(22,32,74,.30), 0 8px 18px -8px rgba(22,32,74,.52);

  /* radijusi */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;

  --sirina:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--pozadina);color:var(--tinta);
  font-size:17px;line-height:1.6;
  font-family:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-feature-settings:"cv05" 1,"cv11" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.omot{max-width:var(--sirina);margin:0 auto;padding:0 22px}
.uzak{max-width:760px}
a{color:var(--marka);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:.88em}
img{max-width:100%}
::selection{background:var(--marka-blijeda);color:var(--marka-jaka)}

h1,h2,h3{font-weight:600;letter-spacing:-.033em;line-height:1.08;margin:0}
h1{font-size:clamp(37px,5.7vw,63px)}
h1 mark{color:inherit;white-space:nowrap;padding:0 .04em;border-radius:.1em;
  background:linear-gradient(to top,
    rgba(217,119,6,.28) 0,rgba(217,119,6,.28) .3em,transparent .3em)}
h1 em{font-style:normal;color:var(--akcent)}

/* ===== zaglavlje: plutajuća pilula ================================== */
.traka{position:sticky;top:0;z-index:40;padding:10px 0;
  background:linear-gradient(to bottom,var(--pozadina) 62%,transparent)}
.traka-sadrzaj{display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:56px;padding:0 10px 0 18px;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--rub);border-radius:999px;box-shadow:var(--sjena-2)}
.znak{display:inline-flex;align-items:center;flex:0 0 auto}
.znak img{height:32px;width:auto;display:block}
.znak:hover{text-decoration:none}
@media(max-width:520px){.znak img{height:27px}}
.traka nav{display:flex;align-items:center;gap:6px;font-size:15px}
.traka nav a{color:var(--tinta-2);padding:7px 12px;border-radius:999px;
  transition:background .16s,color .16s}
.traka nav a:hover{color:var(--tinta);background:var(--pranje);text-decoration:none}
.traka nav a.gumb,.traka nav a.gumb:hover{padding:9px 17px;color:#fff;
  background:linear-gradient(180deg,var(--marka-svijetla),var(--marka))}
.traka nav a.gumb:hover{filter:brightness(1.06)}
.traka nav a.gumb-obris,.traka nav a.gumb-obris:hover{color:var(--tinta);
  background:var(--papir);filter:none}

/* ===== gumbi ======================================================== */
.gumb{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,var(--marka-svijetla),var(--marka));
  color:#fff;padding:13px 24px;border:1px solid var(--marka-jaka);border-radius:999px;
  font-weight:540;font-size:16px;letter-spacing:-.01em;cursor:pointer;font-family:inherit;
  line-height:1.2;box-shadow:var(--sjena-gumb);
  transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .14s,filter .14s}
.gumb:hover{filter:brightness(1.06);color:#fff;text-decoration:none;
  box-shadow:0 2px 4px rgba(10,80,57,.28),0 12px 24px -10px rgba(10,80,57,.55)}
.gumb:active{transform:scale(.975)}
.gumb:focus-visible{outline:2px solid var(--marka);outline-offset:3px}
.gumb-mali{padding:9px 17px;font-size:15px}
.gumb-obris{background:var(--papir);color:var(--tinta);border:1px solid var(--rub-tvrdi);
  box-shadow:var(--sjena-1)}
.gumb-obris:hover{background:var(--papir);color:var(--tinta);filter:none;
  border-color:var(--rub-jaki);box-shadow:var(--sjena-2)}

/* ===== hero ========================================================= */
.hero{position:relative;padding:34px 0 84px;text-align:center;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:46px;align-items:center}
.hero:before{content:"";position:absolute;inset:-140px 0 auto;height:560px;z-index:-1;
  background:
    radial-gradient(56% 42% at 50% 12%,rgba(43,60,125,.13),transparent 70%),
    radial-gradient(40% 32% at 78% 4%,rgba(180,71,15,.07),transparent 70%);
  pointer-events:none}
.hero-tekst{max-width:840px;margin:0;text-align:left}
.hero h1{margin:0 0 20px}
.rok{display:inline-flex;align-items:center;gap:9px;background:var(--papir);
  color:var(--signal);border:1px solid var(--signal-rub);
  padding:7px 8px 7px 15px;border-radius:999px;font-size:14px;font-weight:520;
  margin-bottom:26px;box-shadow:var(--sjena-1)}
.rok b{font-variant-numeric:tabular-nums;font-weight:600;background:var(--signal);
  color:#fff;padding:4px 12px;border-radius:999px;
  animation:rok-puls 1.9s ease-out 3}
@keyframes rok-puls{
  0%{box-shadow:0 0 0 0 rgba(180,71,15,.45)}
  55%,100%{box-shadow:0 0 0 9px rgba(180,71,15,0)}
}
.vodeci{font-size:19px;color:var(--tinta-2);margin:0 0 30px;max-width:56ch;line-height:1.58}

/* trake povjerenja ispod hero kartice */
.cipovi{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;margin:4px 0 0;
  max-width:900px}
.cip{display:inline-flex;align-items:center;gap:10px;background:var(--papir);
  border:1px solid var(--rub);border-radius:999px;padding:10px 17px 10px 11px;
  font-size:14.5px;white-space:nowrap;color:var(--tinta-2);box-shadow:var(--sjena-1)}
.cip:before{content:"";width:19px;height:19px;border-radius:99px;flex:0 0 auto;
  background:var(--marka-blijeda) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%231e2a5e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px 12px no-repeat;
  border:1px solid var(--marka-rub)}
.cip strong{color:var(--tinta);font-weight:560}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 26px}
.hero-cta .sitno{margin:0;color:var(--tinta-3);font-size:13.5px;max-width:24ch;line-height:1.45}

/* stara mreža jamstava — zadržana za slučaj korištenja drugdje */
.jamstva{list-style:none;padding:0;margin:0;font-size:16px;color:var(--tinta-2)}
.jamstva li{padding:5px 0 5px 26px;position:relative;text-align:left}
.jamstva li:before{content:"";position:absolute;left:3px;top:12px;width:10px;height:6px;border-left:2px solid var(--marka);border-bottom:2px solid var(--marka);transform:rotate(-45deg);border-radius:1px}

/* ===== kartica provjere ============================================= */
.hero-kartica{min-width:0}
.provjera-kartica{max-width:none;margin:0;text-align:left;
  border:1px solid var(--rub);border-radius:var(--r-l);padding:26px;background:var(--papir);
  box-shadow:var(--sjena-3)}
.provjera-kartica h2{margin:0 0 6px;font-size:23px;letter-spacing:-.02em}
.kartica-napomena{margin:14px 2px 0;font-size:13px;color:var(--tinta-3);line-height:1.5;
  text-align:left}
.provjera-kartica p.sitno{margin:0 0 16px}
.polje-red{display:flex;gap:9px}
.polje-red input{flex:1 1 auto;min-width:0}
.provjera-kartica .polje-red input{height:54px;padding-top:0;padding-bottom:0}
.provjera-kartica .polje-red .gumb{height:54px;padding:0 26px;font-size:16.5px}

input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
input[type=date],select,textarea{
  padding:13px 15px;border:1px solid var(--rub-tvrdi);border-radius:var(--r-s);font-size:16px;
  font-family:inherit;background:var(--papir);color:var(--tinta);width:100%;
  box-shadow:inset 0 1px 2px rgba(16,17,20,.04);transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--tinta-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marka);
  box-shadow:0 0 0 3px var(--marka-blijeda)}
label{display:block;font-weight:560;font-size:14px;margin:14px 0 5px}

/* ===== demo provjere u praznom stanju kartice ======================= */
.demo{margin-top:18px;border:1px solid var(--rub);border-radius:var(--r-m);
  background:var(--pranje);padding:14px;font-family:ui-monospace,Consolas,monospace;
  font-size:12.5px;color:var(--tinta-2)}
.demo-vrh{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:13px;color:var(--tinta);font-weight:560}
.demo-vrh:before{content:"";width:8px;height:8px;border-radius:99px;flex:0 0 auto;
  background:var(--marka);box-shadow:0 0 0 3px var(--marka-blijeda)}
.demo-red{display:flex;align-items:center;gap:10px;background:var(--papir);
  border:1px solid var(--rub);border-radius:7px;padding:8px 11px;margin-bottom:6px;
  box-shadow:var(--sjena-1);opacity:0;transform:translateY(6px);
  animation:demo-ulaz .5s cubic-bezier(.2,.8,.3,1) forwards}
.demo-red:last-child{margin-bottom:0}
.demo-red:nth-child(2){animation-delay:.35s}
.demo-red:nth-child(3){animation-delay:.95s}
.demo-red:nth-child(4){animation-delay:1.55s}
.demo-put{flex:1 1 auto;min-width:0;word-break:break-all}
.demo-znak{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:560;padding:3px 9px;border-radius:99px;
  background:var(--marka-blijeda);color:var(--marka);
  opacity:0;transform:scale(.86);
  animation:demo-kvacica .34s cubic-bezier(.2,1.5,.4,1) forwards}
.demo-red:nth-child(2) .demo-znak{animation-delay:.72s}
.demo-red:nth-child(3) .demo-znak{animation-delay:1.32s}
.demo-red:nth-child(4) .demo-znak{animation-delay:1.92s}
.demo-znak:before{content:"";width:8px;height:5px;flex:0 0 auto;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateY(-1px);border-radius:1px}
.demo-noga{margin-top:10px;font-family:inherit;font-size:12px;color:var(--tinta-3)}
@keyframes demo-ulaz{to{opacity:1;transform:none}}
@keyframes demo-kvacica{to{opacity:1;transform:none}}

/* ===== odjeljci ===================================================== */
section{padding:96px 0;position:relative}
section+section{border-top:1px solid var(--rub)}
section.bez-crte{border-top:0}
/* Ritam: susjedni odjeljci ne smiju biti iste plohe. Gdje se ploha mijenja,
   crta je suvišna - promjena tona je jača granica od vlasi. */
section.tonirana{background:var(--pozadina-2)}
section.tonirana+section,section+section.tonirana{border-top:0}
section.tonirana .korak,section.tonirana .stavka{box-shadow:var(--sjena-3)}
.zaglavlje-odjeljka{text-align:center;max-width:640px;margin:0 auto 44px}
.nadnaslov{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--marka);margin-bottom:14px}
h2.naslov{font-size:clamp(28px,3.6vw,42px);margin:0 0 12px}
.podnaslov{color:var(--tinta-2);margin:0;font-size:17.5px;line-height:1.55}
.zaglavlje-odjeljka .podnaslov{max-width:560px;margin:0 auto}

/* ===== bento kartice ================================================ */
.koraci{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.korak{background:var(--papir);border:1px solid var(--rub);border-radius:var(--r-l);
  padding:12px 12px 24px;box-shadow:var(--sjena-2);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
.korak:hover{transform:translateY(-3px);box-shadow:var(--sjena-3)}
.korak .pregled{background:var(--pranje);border:1px solid var(--rub);border-radius:var(--r-m);
  height:132px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;
  padding:16px;overflow:hidden}
.korak .broj{font-size:15px;font-weight:600;color:var(--akcent);letter-spacing:.06em;
  padding:0 12px}
.korak h3{margin:8px 12px 7px;font-size:18px;letter-spacing:-.02em}
.korak p{margin:0 12px;color:var(--tinta-2);font-size:15.5px;line-height:1.55}

/* minijature unutar pregleda */
.mini{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--tinta-2)}
.mini-red{display:flex;text-align:left;align-items:center;gap:8px;background:var(--papir);
  border:1px solid var(--rub);border-radius:7px;padding:7px 10px;margin-bottom:6px;
  box-shadow:var(--sjena-1)}
.mini-red:last-child{margin-bottom:0}
.mini-tocka{width:7px;height:7px;border-radius:99px;flex:0 0 auto;background:var(--marka)}
.mini-tocka.siva{background:var(--rub-jaki)}
.mini-tocka.narancasta{background:var(--signal)}
.mini-raste{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mini-oznaka{font-size:10px;font-weight:600;letter-spacing:.04em;padding:2px 7px;
  border-radius:99px;background:var(--marka-blijeda);color:var(--marka)}
.mini-sat{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--tinta);
  font-variant-numeric:tabular-nums;font-family:inherit}

/* ===== istaknuti primjer (tamna ploha) ============================== */
.primjer{background:var(--tamno);color:#dfe5ec;border-radius:var(--r-l);
  padding:0 0 20px;margin-top:26px;overflow:hidden;box-shadow:var(--sjena-3);
  border:1px solid rgba(255,255,255,.08)}
.primjer-vrh{display:flex;align-items:center;gap:7px;padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.primjer-opis{max-width:60ch;margin:16px auto 0;text-align:center;
  font-size:14.5px;color:var(--tinta-3);line-height:1.55}
.primjer-vrh i{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.16)}
.primjer-vrh span{margin-left:8px;font-size:12.5px;color:#7f8b9c;letter-spacing:.02em}
.primjer-tijelo{padding:18px 20px 0;font-family:ui-monospace,Consolas,monospace;
  font-size:13px;line-height:1.95;overflow-x:auto}
.primjer .nat{color:#79859a}
.primjer .zut{color:#e3b341}
.primjer .zel{color:#6fdfb0}

/* ===== cijene =======================================================
   Tri razine, tri plohe: besplatno je utonulo, zajedničko je indigo,
   plaćeno je bijelo i podignuto. Jantar ostaje samo na istaknutom
   paketu - jedan jantarni naglasak po zaslonu (BRAND.md). */

/* --- besplatno: uzmakne, ne natječe se s plaćenim --- */
.besplatni{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
.besplatni .plan{background:transparent;box-shadow:none;border-style:dashed;
  border-color:var(--rub-jaki);padding:22px 24px}
.besplatni .plan h3{font-size:17px;color:var(--tinta-2)}
.besplatni .plan .oznaka{color:var(--tinta-3);background:none;padding:0}
.besplatni .plan .iznos{font-size:27px;color:var(--tinta-2);margin:6px 0 0}
.besplatni .plan ul{font-size:14.5px;margin:12px 0 20px;color:var(--tinta-3)}
.besplatni .plan ul li:before{border-color:var(--tinta-3)}

/* --- zajednička osnovica: indigo ploha ispod cijena --- */
.uvijek{background:var(--marka-ploha);border:1px solid var(--marka-rub);
  border-radius:var(--r-l);padding:24px 26px;box-shadow:none;margin:0 0 20px}
.uvijek h4{margin:0 0 14px;font-size:12.5px;font-weight:620;letter-spacing:.08em;
  text-transform:uppercase;color:var(--marka)}
.uvijek ul{list-style:none;margin:0;padding:0;display:grid;gap:11px 26px;
  grid-template-columns:repeat(3,1fr)}
.uvijek li{position:relative;padding-left:27px;font-size:15.5px;color:var(--marka-jaka);
  line-height:1.45}
.uvijek li:before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;
  border-radius:99px;border:1px solid var(--marka-rub);background:var(--papir)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%231e2a5e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px 12px no-repeat}
@media (max-width:860px){.uvijek ul{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.uvijek ul{grid-template-columns:1fr}}

/* --- plaćeni paketi --- */
.cijene{display:grid;grid-template-columns:1fr 1.09fr 1fr;gap:18px;align-items:stretch}
.plan{border:1px solid var(--rub);border-radius:var(--r-l);padding:26px;display:flex;
  flex-direction:column;background:var(--papir);box-shadow:var(--sjena-2);position:relative}
.plan .oznaka{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:620;
  letter-spacing:.08em;text-transform:uppercase;color:var(--marka);
  background:var(--marka-blijeda);border:1px solid var(--marka-rub);
  padding:4px 11px;border-radius:999px;margin-bottom:14px}
.plan h3{margin:0 0 4px;font-size:19px}
.plan .iznos{font-size:40px;font-weight:600;letter-spacing:-.04em;margin:10px 0 2px;
  font-variant-numeric:tabular-nums;color:var(--marka-jaka)}
.plan .iznos span{font-size:15px;font-weight:400;color:var(--tinta-3);letter-spacing:0}
.plan .iznos-alt{font-size:14.5px;color:var(--tinta-3);margin-top:2px;
  font-variant-numeric:tabular-nums}
.plan.istaknut .iznos-alt{font-size:15.5px;color:var(--tinta-2)}
.plan ul{list-style:none;padding:0;margin:18px 0 24px;font-size:15.5px;color:var(--tinta-2);
  flex:1;line-height:1.5;border-top:1px solid var(--rub);padding-top:16px}
.plan ul li{padding:6px 0 6px 24px;position:relative}
.plan ul li:before{content:"";position:absolute;left:3px;top:12px;width:10px;height:6px;
  border-left:2px solid var(--marka);border-bottom:2px solid var(--marka);
  transform:rotate(-45deg);border-radius:1px}

/* istaknuti paket stvarno stoji ispred ostalih, ne samo obrubom */
.plan.istaknut{margin:-14px 0;padding:40px 28px;z-index:1;
  border-color:rgba(217,119,6,.55);
  box-shadow:0 0 0 1px rgba(217,119,6,.45),0 28px 56px -26px rgba(217,119,6,.45)}
.plan.istaknut .oznaka{background:var(--akcent-blijedi);color:var(--akcent);
  border-color:var(--akcent-rub)}
.plan.istaknut h3{font-size:21px}
.plan.istaknut .iznos{font-size:46px}
.plan.istaknut ul li:before{border-color:var(--akcent)}
@media (max-width:920px){
  .besplatni{grid-template-columns:1fr}
  .cijene{grid-template-columns:1fr}
  .plan.istaknut{margin:0;padding:30px 26px}
}

/* ===== tablica ====================================================== */
table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
th,td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--rub);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);
  font-weight:620}
td.broj,th.broj{text-align:right;font-variant-numeric:tabular-nums}
.dodaci{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.dodatak{border:1px solid var(--rub);border-radius:var(--r-l);padding:22px 24px;
  background:var(--papir);box-shadow:var(--sjena-1)}
.dodatak.hitno{background:var(--signal-blijedi);border-color:var(--signal-rub);box-shadow:none}
.dodatak-vrh{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:8px}
.dodatak h4{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.dodatak.hitno h4{color:var(--signal)}
.dodatak .cijena-dodatka{font-size:20px;font-weight:620;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dodatak.hitno .cijena-dodatka{color:var(--signal)}
.dodatak .cijena-dodatka span{font-size:13px;font-weight:400;color:var(--tinta-3)}
.dodatak p{margin:0;font-size:15px;line-height:1.55;color:var(--tinta-2)}
.dodatak.hitno p{color:#7a3a14}
@media (max-width:920px){.dodaci{grid-template-columns:1fr}}

.okvir-tablice{background:var(--papir);border:1px solid var(--rub);border-radius:var(--r-l);
  padding:6px 22px;box-shadow:var(--sjena-2);margin:22px 0}
.okvir-tablice table{margin:0}
.okvir-tablice tr:last-child td{border-bottom:0}

/* ===== poruke i značke ============================================== */
.znacka{display:inline-block;padding:4px 11px;border-radius:999px;font-size:13px;font-weight:560}
.znacka-ok{background:var(--ok-blijeda);color:var(--ok)}
.znacka-lose{background:var(--signal-blijedi);color:var(--signal)}
.znacka-mirna{background:var(--pranje);color:var(--tinta-3);border:1px solid var(--rub)}
.poruka{padding:15px 17px;border-radius:var(--r-m);margin:16px 0;font-size:16px;
  border:1px solid transparent}
.poruka-ok{background:var(--ok-blijeda);color:var(--ok-jaka);border-color:var(--ok-rub)}
.poruka-lose{background:var(--signal-blijedi);color:var(--signal);border-color:var(--signal-rub)}
.poruka-mirna{background:var(--pranje);color:var(--tinta-2);border-color:var(--rub)}

.sitno{font-size:13.5px;color:var(--tinta-3);line-height:1.6}
.putanje{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--tinta-2);
  max-height:190px;overflow:auto;background:var(--pranje);border:1px solid var(--rub);
  border-radius:var(--r-s);padding:12px}
details summary{cursor:pointer}

/* ===== dvostupčane trake ============================================ */
.trake{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.stavka{background:var(--papir);border:1px solid var(--rub);border-radius:var(--r-l);
  padding:26px;box-shadow:var(--sjena-2)}
.stavka h3{margin:0 0 8px;font-size:18px}
.stavka p{margin:0;color:var(--tinta-2);font-size:16px;line-height:1.6}
.stavka p+p{margin-top:14px}

/* ===== završni poziv ================================================ */
.cta{position:relative;overflow:hidden;background:var(--tamno);color:#fff;
  border-radius:var(--r-xl);padding:52px 44px;text-align:center;box-shadow:var(--sjena-3)}
.cta:before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 120% at 50% 0%,rgba(43,60,125,.55),transparent 70%)}
.cta>*{position:relative}
.cta h3{margin:0 0 10px;font-size:clamp(24px,3.2vw,34px);color:#fff}
.cta p{margin:0 auto 26px;color:#aab3bf;max-width:520px;font-size:17px}
.cta .gumb-obris{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18);
  box-shadow:none;backdrop-filter:blur(8px)}
.cta .gumb-obris:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.cta-gumbi{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== podnožje ===================================================== */
.podnozje{padding:48px 0 60px;background:var(--tamno);color:#a8a29e;font-size:14.5px}
.podnozje .znak-podnozje{display:inline-block;margin-bottom:20px}
.podnozje .znak-podnozje img{height:30px;width:auto;display:block}
.podnozje .deskriptor{font-weight:560;margin:0 0 12px;color:#fff;font-size:16px}
.podnozje p{margin:0 0 10px;color:#a8a29e}
.podnozje a{color:#e7e5e4}
.podnozje a:hover{color:#fff}
.podnozje .sitno{color:#78716c;margin-top:18px;max-width:64ch}

/* ===== pitanja ====================================================== */
.pitanja{max-width:760px;margin:0 auto}
.pitanja .skupina{font-size:12px;font-weight:620;letter-spacing:.09em;text-transform:uppercase;
  color:var(--marka);margin:38px 0 12px;padding-left:2px}
.pitanja .skupina:first-child{margin-top:0}
.pitanja details{background:var(--papir);border:1px solid var(--rub);border-radius:var(--r-m);
  margin-bottom:8px;box-shadow:var(--sjena-1);transition:box-shadow .16s,border-color .16s}
.pitanja details:hover{box-shadow:var(--sjena-2)}
.pitanja details[open]{border-color:var(--rub-jaki);box-shadow:var(--sjena-2)}
.pitanja details summary{list-style:none;padding:17px 46px 17px 20px;position:relative;
  font-weight:540;font-size:16.5px;color:var(--tinta);letter-spacing:-.011em}
.pitanja details summary::-webkit-details-marker{display:none}
.pitanja details summary:after{content:"";position:absolute;right:20px;top:24px;
  width:9px;height:9px;border-right:1.8px solid var(--tinta-3);border-bottom:1.8px solid var(--tinta-3);
  transform:rotate(45deg);transition:transform .2s,border-color .2s}
.pitanja details[open] summary:after{transform:rotate(-135deg);border-color:var(--marka)}
.pitanja details summary:hover{color:var(--marka)}
.pitanja details p{margin:0 20px 18px;color:var(--tinta-2);font-size:16px;max-width:68ch;
  line-height:1.62}
.pitanja .kod{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--tinta-2);
  background:var(--pranje);border:1px solid var(--rub);border-radius:var(--r-s);padding:12px;
  word-break:break-all;margin:0 20px 18px}
.kod-u{font-family:ui-monospace,Consolas,monospace;font-size:14px;background:var(--pranje);
  border:1px solid var(--rub);border-radius:5px;padding:1px 6px}

/* ===== otkrivanje pri skrolu ======================================== */
.otkrij{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
.otkrij.vidljivo{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .otkrij{opacity:1;transform:none;transition:none}
  .korak:hover{transform:none}
  .gumb:active{transform:none}
  .demo-red,.demo-znak{animation:none;opacity:1;transform:none}
}

/* ===== responzivno ================================================== */
@media(max-width:920px){
  section{padding:64px 0}
  .koraci,.cijene,.trake,.besplatni{grid-template-columns:1fr}
  .traka nav a.skriv-mob{display:none}
  .traka-sadrzaj{padding:0 8px 0 16px}
  .cta{padding:40px 24px}
  .hero{padding-top:38px;grid-template-columns:1fr;gap:30px;text-align:center}
  .hero-tekst{text-align:center;margin:0 auto}
  .vodeci{margin-left:auto;margin-right:auto}
  .cipovi{justify-content:center;margin-top:26px}
  .provjera-kartica{max-width:600px;margin:0 auto}
  .kartica-napomena{max-width:600px;margin-left:auto;margin-right:auto;text-align:center}
}
@media(max-width:560px){
  body{font-size:16.5px}
  .omot{padding:0 16px}
  .polje-red{flex-direction:column}
  .polje-red .gumb{width:100%}
  .provjera-kartica{padding:20px}
  .vodeci{font-size:17.5px}
}

/* ===== brojevi u cjeniku ============================================ */
table td,table th{font-variant-numeric:tabular-nums}
.cijena,.iznos{font-variant-numeric:tabular-nums}

/* ===== pravne stranice: uvjeti, privatnost, impressum =============== */
.pravna{max-width:780px;margin:0 auto;padding:52px 22px 88px}
.pravna h1{font-size:clamp(30px,3.6vw,42px);letter-spacing:-.03em;margin:0 0 6px}
.pravna > p.sitno{margin:0 0 26px;color:var(--tinta-3)}
.pravna h2{font-size:19px;font-weight:600;letter-spacing:-.015em;
  margin:36px 0 10px;padding-top:2px}
.pravna h2 + p{margin-top:0}
.pravna h3{font-size:16.5px;font-weight:600;margin:24px 0 8px}
.pravna p,.pravna li{font-size:16px;line-height:1.66;color:var(--tinta-2)}
.pravna p{margin:0 0 14px}
.pravna ul,.pravna ol{margin:0 0 16px;padding-left:22px}
.pravna li{margin-bottom:7px}
.pravna li::marker{color:var(--tinta-3)}
.pravna strong{color:var(--tinta);font-weight:600}
.pravna a{text-decoration:underline;text-underline-offset:2px}
.pravna .poruka{margin:0 0 28px}

/* tablica u pravnoj stranici: naziv lijevo, vrijednost desno */
.pravna table{width:100%;margin:20px 0 26px;font-size:15.5px;
  border-collapse:collapse;table-layout:fixed}
.pravna table th{width:38%;text-align:left;vertical-align:top;
  font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-3);padding:13px 16px 13px 0;border-bottom:1px solid var(--rub)}
.pravna table td{vertical-align:top;color:var(--tinta);padding:13px 18px 13px 0;
  border-bottom:1px solid var(--rub);overflow-wrap:anywhere}
.pravna table td:last-child,.pravna table th:last-child{padding-right:0}
.pravna table code{font-size:12.5px;word-break:break-all;line-height:1.45}
.pravna table thead th{width:auto;color:var(--tinta-2);font-size:11.5px;
  padding-right:18px}
.pravna table thead th:first-child{width:33%}
.pravna table thead th:last-child{width:24%}
.pravna table thead + tbody td{color:var(--tinta-2)}
.pravna table tr:last-child th,.pravna table tr:last-child td{border-bottom:none}

@media(max-width:600px){
  .pravna{padding:36px 18px 64px}
  .pravna table,.pravna table tbody,.pravna table tr,
  .pravna table th,.pravna table td{display:block;width:auto}
  .pravna table th{border-bottom:none;padding:14px 0 2px}
  .pravna table td{padding:0 0 14px;border-bottom:1px solid var(--rub)}
  .pravna table thead{display:none}
}