/* ===== eStanar v3 — pametna gornja traka (dizajn ostaje iz styles.css) ===== */

.sbar{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:20px; height:64px;
  padding:0 clamp(16px,3vw,32px); background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid #f1f5f9;
}
.sbar .brand__word{ font-size:20px; }
.sbar .brand__mark{ width:34px; height:34px; }

/* Točkice sekcija */
.sbar__dots{ display:flex; gap:2px; margin:0 auto; }
.sbar__dots button{
  display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13.5px; font-weight:600;
  color:#64748b; background:none; border:0; cursor:pointer; padding:7px 12px; border-radius:20px;
  transition:color .2s, background .2s;
}
.sbar__dots button span{ width:7px; height:7px; border-radius:50%; background:#cbd5e1; transition:background .2s, transform .2s; }
.sbar__dots button:hover{ color:#1e2a52; background:#f8fafc; }
.sbar__dots button.is-active{ color:#171f3d; }
.sbar__dots button.is-active span{ background:#e8752f; transform:scale(1.5); }

/* Desno: demo + strelice */
.sbar__ctrl{ display:flex; align-items:center; gap:8px; }
.sbar__demo{ padding:9px 16px !important; font-size:14px !important; }
.sbar__arrow{
  width:36px; height:36px; border-radius:10px; border:1px solid #e2e8f0; background:#fff; color:#1e2a52;
  font-size:16px; display:grid; place-items:center; cursor:pointer; transition:all .18s ease;
}
.sbar__arrow:hover{ border-color:#4f46e5; color:#4f46e5; transform:translateY(-1px); }
.sbar__arrow:disabled{ opacity:.35; cursor:default; transform:none; border-color:#e2e8f0; color:#94a3b8; }

/* Mobilni izbornik */
.sbar__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.sbar__burger span{ width:24px; height:2px; background:#1e2a52; border-radius:2px; transition:.25s; }
.sbar__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.sbar__burger.is-open span:nth-child(2){ opacity:0; }
.sbar__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.sbar__mobile{
  display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:4px;
  padding:12px 24px 20px; background:#fff; border-bottom:1px solid #f1f5f9; box-shadow:0 10px 30px -12px rgba(23,31,61,.2);
}
.sbar__mobile.is-open{ display:flex; }
.sbar__mobile a{ padding:12px 4px; font-weight:500; color:#334155; border-bottom:1px solid #f1f5f9; }
.sbar__mobile a.btn{ border:0; margin-top:8px; color:#fff; }

/* Traka napretka */
.sbar__progress{ position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:transparent; }
.sbar__progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#4f46e5,#e8752f); transition:width .15s linear; }

/* Preinake zbog sticky trake (dizajn sekcija ostaje iz styles.css) */
html{ scroll-padding-top:64px; }
section[id]{ scroll-margin-top:64px; }
.hero{ padding-top:clamp(40px,5vw,64px) !important; }

@media (max-width:1024px){
  .sbar__dots, .sbar__arrow{ display:none; }
  .sbar__burger{ display:flex; }
}
@media (max-width:560px){
  .sbar__demo{ display:none; }
}

/* ===== Usklađivanje s eStanar aplikacijom: linijske ikone umjesto emojija ===== */
.card__icon svg{ width:26px; height:26px; }
.card__icon.icon--terracotta{ color:#c2571b; }
.card__icon.icon--indigo{ color:#4f46e5; }
.card__icon.icon--blue{ color:#1f52a8; }

/* Ikone u oznakama uloga (kao role badge u aplikaciji) */
.tag{ display:inline-flex !important; align-items:center; gap:6px; }
.tag svg{ width:14px; height:14px; }

/* Hero: mirna slika (bez lebdenja) da ne djeluje kao da nešto "puca" */
.hero .mock--float{ animation:none !important; }

/* Jači kolorni akcent — navy "statement" traka s terakota naglaskom */
.intro{
  background:linear-gradient(140deg,#1b2749 0%,#243360 55%,#33448a 100%);
  padding:clamp(64px,8vw,100px) 0 !important;
}
.intro .eyebrow{ color:#f4a06a; }
.intro__title{ color:#ffffff; }
.intro__title span{ color:#f6975a; }
.intro__text{ color:rgba(255,255,255,.82); }

/* Završni CTA — topla terakota (privlači pažnju na poziv na akciju) */
.cta__box{ background:linear-gradient(140deg,#f0813b 0%,#e8752f 45%,#cf5f1f 100%) !important; }
.cta .btn--accent{ background:#ffffff !important; color:#c2571b !important; }
.cta .btn--accent svg{ stroke:#c2571b; }

/* Powered by Mediatorium */
.footer__powered{ font-size:13px; color:rgba(255,255,255,.5); }
.footer__powered a{ color:rgba(255,255,255,.82); font-weight:600; transition:color .2s ease; }
.footer__powered a:hover{ color:#f28b4c; }