/* OrgTicker. Apple Human Interface Guidelines primijenjene na web:
   jasnoca, povlacenje ukrasa, dubina kroz slojeve a ne kroz efekte.
   Tipografija SF, razmaci na mrezi od 8, dugmad u obliku pilule,
   sistemske boje, poluprozirna navigacija. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Apple sistemske neutralne */
  --white:#ffffff;
  --tint:#f5f5f7;
  --tint-deep:#ececee;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --hair:#d2d2d7;
  --hair-soft:#e8e8ed;

  /* Apple sistemske akcentne */
  --blue:#0071e3;
  --blue-dark:#0077ed;
  --green:#00875a;
  --green-soft:#e3f4ec;
  --red:#c9251c;
  --red-soft:#fbe6e4;

  /* SF ako postoji, inace Inter */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,SFMono-Regular,"IBM Plex Mono",Menlo,monospace;

  --r-lg:18px;   /* velike ploce */
  --r-md:12px;   /* male ploce */
  --r-pill:980px;
  --shadow:0 4px 16px rgba(0,0,0,.06);
  --shadow-lift:0 12px 32px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);
     font:17px/1.47 var(--sans);letter-spacing:-.012em;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     font-variant-numeric:tabular-nums;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.narrow{max-width:760px}
@media (max-width:1000px){.wrap{padding:0 24px}}
@media (max-width:600px){.wrap{padding:0 20px}}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------- navigacija: tanka, poluprozirna, sadrzaj klizi ispod ---------- */
.top{position:sticky;top:0;z-index:40}
.bar{height:48px;background:rgba(255,255,255,.72);
     backdrop-filter:saturate(180%) blur(20px);
     -webkit-backdrop-filter:saturate(180%) blur(20px);
     border-bottom:1px solid rgba(0,0,0,.08);position:relative;z-index:2}
.bar .wrap{display:flex;align-items:center;gap:26px;height:48px}
.logo{display:flex;align-items:center;gap:8px;flex:none}
.logo:hover{text-decoration:none}
.logo .word{font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.mark{display:inline-flex;width:22px;height:22px;border-radius:6px;background:var(--ink);
      align-items:center;justify-content:center;flex:none}
.mark svg{width:14px;height:14px;display:block}
.mark rect{fill:#8e8e93}
.mark rect.hi{fill:#30d158}

.nav{display:flex;gap:24px;margin-left:auto;font-size:12px;letter-spacing:-.005em}
.nav a{color:var(--ink);opacity:.82;font-weight:400}
.nav a:hover{opacity:1;text-decoration:none}
.nav a.on{opacity:1;font-weight:500}
.hdr-cta{flex:none}

/* dugme sa tri crtice */
.burger{display:none;margin-left:auto;width:44px;height:44px;padding:0;
        background:none;border:0;cursor:pointer;position:relative;
        -webkit-tap-highlight-color:transparent}
.burger span{position:absolute;left:13px;width:18px;height:1.5px;border-radius:1px;
             background:var(--ink);transition:transform .32s cubic-bezier(.4,0,.2,1),
             opacity .2s linear,top .32s cubic-bezier(.4,0,.2,1)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:26px}
.top[data-open] .burger span:nth-child(1){top:21.5px;transform:rotate(45deg)}
.top[data-open] .burger span:nth-child(2){opacity:0}
.top[data-open] .burger span:nth-child(3){top:21.5px;transform:rotate(-45deg)}

/* ladica koja se spusta */
.sheet{position:absolute;left:0;right:0;top:48px;z-index:1;
       background:var(--white);
       backdrop-filter:saturate(180%) blur(20px);
       -webkit-backdrop-filter:saturate(180%) blur(20px);
       border-bottom:1px solid rgba(0,0,0,.08);
       max-height:0;overflow:hidden;visibility:hidden;
       transition:max-height .38s cubic-bezier(.4,0,.2,1),visibility 0s linear .38s}
.top[data-open] .sheet{max-height:80vh;visibility:visible;transition-delay:0s}
.sheet .wrap{padding-block:10px 26px}
.sheet-nav{display:flex;flex-direction:column}
.sheet-nav a{display:flex;align-items:center;min-height:52px;
             font-size:21px;font-weight:500;letter-spacing:-.018em;color:var(--ink);
             border-bottom:1px solid var(--hair-soft);opacity:0;transform:translateY(-6px)}
.sheet-nav a:hover{text-decoration:none}
.sheet-nav a.on{color:var(--blue)}
.top[data-open] .sheet-nav a{opacity:1;transform:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.9,.3,1)}
.top[data-open] .sheet-nav a:nth-child(1){transition-delay:.06s}
.top[data-open] .sheet-nav a:nth-child(2){transition-delay:.10s}
.top[data-open] .sheet-nav a:nth-child(3){transition-delay:.14s}
.top[data-open] .sheet-nav a:nth-child(4){transition-delay:.18s}
.top[data-open] .sheet-nav a:nth-child(5){transition-delay:.22s}
.sheet-cta{display:block;text-align:center;margin-top:22px;opacity:0}
.top[data-open] .sheet-cta{opacity:1;transition:opacity .3s ease .26s}
.scrim{position:fixed;inset:48px 0 0;background:rgba(0,0,0,.22);
       opacity:0;pointer-events:none;transition:opacity .32s ease;z-index:0}
.top[data-open] .scrim{opacity:1;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .sheet,.sheet-nav a,.sheet-cta,.scrim,.burger span{transition:none}
}

/* na telefonu i tabletu: samo znak i tri crtice */
@media (max-width:860px){
  .bar .nav,.bar .hdr-cta{display:none}
  .burger{display:block}
}
@media (min-width:861px){
  .sheet,.scrim{display:none}
}

/* ---------- traka signala ---------- */
.ticker{background:var(--ink);color:rgba(255,255,255,.82);overflow:hidden;
        font:400 12px/1 var(--mono);letter-spacing:0}
.ticker-in{display:flex;width:max-content;animation:slide 72s linear infinite;padding-block:10px}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker span{padding-inline:20px;white-space:nowrap}
.ticker b{font-weight:500;color:#fff}
.ticker .u{color:#30d158}
.ticker .d{color:#ff6961}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-in{animation:none}}

/* ---------- tipografija ---------- */
h1{font-size:clamp(40px,6.2vw,64px);line-height:1.05;letter-spacing:-.028em;
   font-weight:600;margin:0 0 20px;color:var(--ink)}
h2{font-size:clamp(28px,3.8vw,40px);line-height:1.1;letter-spacing:-.024em;
   font-weight:600;margin:0 0 16px}
h3{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.016em;margin:0 0 8px}
h4{font-size:13px;font-weight:500;margin:0}
.kicker{font-size:19px;line-height:1.2;font-weight:600;letter-spacing:-.016em;
        color:var(--blue);margin:0 0 12px}
.lede{font-size:clamp(19px,2.1vw,21px);line-height:1.42;letter-spacing:-.018em;
      color:var(--ink-2);margin:0 0 20px}
p{margin:0 0 16px;color:var(--ink-2);font-size:17px;line-height:1.53}
p.tight{margin-bottom:8px}
strong{color:var(--ink);font-weight:600}

/* sekcije: naizmjenicna podloga preko cijele sirine */
section{padding-block:72px;position:relative}
section.tint{background:var(--tint);
             box-shadow:0 0 0 100vmax var(--tint);clip-path:inset(0 -100vmax)}
.hero{padding-block:80px 0;text-align:center}
.hero h1{font-size:clamp(32px,4.2vw,48px);max-width:24ch;margin-inline:auto}
.hero.big h1{font-size:clamp(40px,6vw,64px);max-width:16ch}
.hero .lede{margin-inline:auto;max-width:660px}
.hero .btns{justify-content:center}
.hero .note{margin-inline:auto;text-align:left;max-width:660px}

/* Sve izvan uvoda je lijevo poravnato, a duzina reda se drzi
   po elementu umjesto da se cijela stranica stisne u usku traku. */
section h2{max-width:22ch}
section > p,section > .lede{max-width:68ch}
.col{max-width:64ch}
@media (max-width:760px){
  section{padding-block:48px}
  .hero{padding-block:36px 4px}
  .hero .lede{font-size:17.5px;line-height:1.45}
  .compare{margin-top:34px}
  .btn{min-height:44px;display:inline-flex;align-items:center}
  .btns{gap:10px}
}
@media (max-width:400px){
  h1{font-size:34px}
  .wrap{padding:0 18px}
}
/* iPhone sa zarezom na vrhu: postuj sigurnu zonu */
@supports (padding:max(0px)){
  .wrap{padding-left:max(24px,env(safe-area-inset-left));
        padding-right:max(24px,env(safe-area-inset-right))}
}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:start}
/* uredjivacki raspored: naslov u lijevoj sini, sadrzaj desno */
.split{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.1fr);
       gap:56px;align-items:start}
.split > .rail h2{margin-bottom:10px}
.split > .rail p{font-size:15px;color:var(--ink-3);max-width:30ch}
.split .body > *:last-child{margin-bottom:0}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:24px}
  .split > .rail p{max-width:none}
}
@media (max-width:820px){.g2,.g3{grid-template-columns:1fr;gap:32px}}

/* ---------- dugmad: pilula ---------- */
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:400;font-size:17px;
     padding:12px 23px;border-radius:var(--r-pill);border:1px solid var(--blue);
     letter-spacing:-.012em;transition:background .2s,transform .15s}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn.ghost:hover{background:rgba(0,113,227,.06)}
.btn.sm{font-size:12px;padding:5px 13px}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;align-items:center}
.linkish{font-size:17px;color:var(--blue)}
.linkish::after{content:" ›";font-size:19px;line-height:0}

/* ---------- glavni prikaz ---------- */
.compare{margin-top:56px;text-align:left}
.compare-card{background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);overflow:hidden}
.compare-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:20px 26px 16px}
.compare-head .t{font-size:19px;font-weight:600;letter-spacing:-.016em;color:var(--ink)}
.compare-head .s{font:400 12px/1 var(--mono);color:var(--ink-3);margin-left:auto}
.delta-rows{padding:0 0 8px}
.drow{display:grid;grid-template-columns:170px 104px 1fr 64px;align-items:center;
      gap:16px;padding:9px 26px}
.drow+.drow{border-top:1px solid var(--hair-soft)}
.drow .nm{font-weight:500;font-size:15px;color:var(--ink);letter-spacing:-.012em;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .ct{font:400 12.5px/1 var(--mono);color:var(--ink-3);white-space:nowrap}
.drow .ct i{font-style:normal;color:var(--ink)}
.track{height:6px;background:var(--tint-deep);border-radius:3px;position:relative}
.track i{position:absolute;top:0;bottom:0;border-radius:3px;display:block;
         animation:grow 1s cubic-bezier(.2,.9,.3,1) both}
.track i.u{background:var(--green);left:50%}
.track i.d{background:var(--red);right:50%}
.track::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;
              background:var(--hair)}
@keyframes grow{from{width:0}}
@media (prefers-reduced-motion:reduce){.track i{animation:none}}
.drow .dv{font:500 13.5px/1 var(--mono);text-align:right;letter-spacing:-.01em}
.drow .dv.u{color:var(--green)}
.drow .dv.d{color:var(--red)}
.compare-foot{padding:14px 26px 20px;font-size:13px;color:var(--ink-3);line-height:1.45}
@media (max-width:760px){
  .drow{grid-template-columns:1fr 84px 56px;gap:12px;padding:9px 18px}
  .drow .track{display:none}
  .compare-head,.compare-foot{padding-inline:18px}
}

/* ---------- brojke ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:none}
.stat{background:var(--white);border-radius:var(--r-md);padding:22px 24px;
      box-shadow:var(--shadow)}
section.tint .stat{background:var(--white)}
.stat .n{font-size:34px;line-height:1.05;font-weight:600;letter-spacing:-.026em;color:var(--ink)}
.stat .l{font-size:13.5px;color:var(--ink-2);margin-top:8px;line-height:1.35}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:14px}}

/* ---------- ploce i tabele ---------- */
.card{background:var(--white);border-radius:var(--r-lg);padding:40px 44px;
      box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) auto;
      gap:40px;align-items:center}
.card.plain{display:block;max-width:560px}
.card h2{margin-bottom:10px;max-width:20ch}
.card p{max-width:60ch;margin-bottom:0}
.card .btns{margin-top:0;flex-direction:column;align-items:stretch}
.card .btn{text-align:center;white-space:nowrap}
@media (max-width:820px){
  .card{grid-template-columns:1fr;gap:24px;padding:32px 26px}
  .card .btns{flex-direction:row;flex-wrap:wrap}
}
.panel{border-radius:var(--r-lg);overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.panel-head{padding:18px 24px 14px}
.panel-head .t{font-weight:600;font-size:17px;letter-spacing:-.016em;color:var(--ink)}
.panel-head .s{font:400 12px/1 var(--mono);color:var(--ink-3);margin-top:6px}
.panel-foot{padding:14px 24px 18px;font-size:13px;color:var(--ink-3);line-height:1.45}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:12px;font-weight:500;color:var(--ink-3);
   padding:10px 24px;border-bottom:1px solid var(--hair-soft);white-space:nowrap;
   letter-spacing:-.004em}
td{padding:12px 24px;border-top:1px solid var(--hair-soft);vertical-align:top;
   color:var(--ink-2);line-height:1.4}
tbody tr:first-child td{border-top:0}
td.co{font-weight:600;color:var(--ink);white-space:nowrap;width:1%}
td.r{text-align:right;white-space:nowrap;width:1%;font:400 12.5px/1.5 var(--mono);color:var(--ink-3)}
.pay{font:400 12.5px/1 var(--mono);color:var(--green);white-space:nowrap;
     background:var(--green-soft);border-radius:5px;padding:4px 7px;margin-left:6px}
.up{color:var(--green);font-weight:500}
.down{color:var(--red);font-weight:500}

ul.plain{margin:0;padding-left:22px;color:var(--ink-2)}
ul.plain li{margin-bottom:10px;line-height:1.5}
ol.steps{margin:0;padding:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;padding-left:52px;position:relative;margin-bottom:32px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--blue);background:rgba(0,113,227,.1);
  border-radius:50%}

.note{color:var(--ink-3);font-size:14px;line-height:1.5;margin:0 0 16px;max-width:74ch}
.hero .note{margin-inline:auto}

.cov{columns:3;column-gap:32px;font-size:15px;line-height:1.95}
.cov div{break-inside:avoid;color:var(--ink-2)}
@media (max-width:780px){.cov{columns:2}}
@media (max-width:440px){.cov{columns:1}}
.vert{margin-bottom:34px;break-inside:avoid}
.vert h3{font-size:13px;font-weight:500;color:var(--ink-3);margin-bottom:10px;
         letter-spacing:0}

/* ---------- podnozje ---------- */
.foot{margin-top:0;background:var(--tint);font-size:12px;line-height:1.5;color:var(--ink-3)}
.foot-strip{background:var(--ink);color:rgba(255,255,255,.72)}
.strip-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
          padding-block:14px;font:400 12px/1 var(--mono)}
.strip-in b{color:#fff;font-weight:500}
.strip-in .sep{width:1px;height:11px;background:rgba(255,255,255,.22);display:inline-block}
.pulse{width:7px;height:7px;border-radius:50%;background:#30d158;flex:none;
       animation:pulse 2.8s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(48,209,88,.5)}
  70%{box-shadow:0 0 0 9px rgba(48,209,88,0)}
  100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

.foot-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;
           padding-block:36px 28px;border-bottom:1px solid var(--hair)}
.foot-brand .logo{margin-bottom:12px}
.foot-brand p{font-size:12px;line-height:1.5;color:var(--ink-3);margin:0 0 14px;max-width:36ch}
.foot-brand address{font-size:12px;line-height:1.6;color:var(--ink-3)}
.foot-col h4{color:var(--ink);font-size:12px;font-weight:600;margin-bottom:12px}
.foot-col a{display:block;font-size:12px;color:var(--ink-3);margin-bottom:9px;width:fit-content}
.foot-col a:hover{color:var(--ink);text-decoration:underline}
.foot-bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
          padding-block:18px 40px;font-size:12px;color:var(--ink-3)}
@media (max-width:860px){.foot-main{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:560px){.foot-main{grid-template-columns:1fr;gap:22px}}
address{font-style:normal}

/* ---------- tabela izvjestaja: cetiri kolone, ponovljeno ime firme utisano ---------- */
table.report{table-layout:auto}
table.report th.ra{text-align:right}
table.report tr.grp td{border-top-color:var(--hair)}
table.report td.co{font-weight:600;color:var(--ink);white-space:nowrap;width:1%;padding-right:8px}
table.report td.co .rep{color:transparent;user-select:none}
table.report td.role{color:var(--ink);font-weight:400;width:auto}
table.report td.money{white-space:nowrap;width:1%;text-align:left;padding-left:8px}

table.report td.r{text-align:right;width:1%;max-width:250px;
                  font:400 12.5px/1.5 var(--mono);color:var(--ink-3);
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.report th:nth-child(1){width:16%}
table.report th:nth-child(3){width:1%;white-space:nowrap}
table.report .pay{margin-left:0}

/* Na telefonu tabela postaje kartice. Bez vodoravnog klizanja. */
@media (max-width:700px){
  table.report,table.report tbody,table.report tr,table.report td{display:block;width:auto}
  table.report thead{display:none}
  table.report .scroll,.scroll:has(table.report){overflow:visible}
  table.report tr{padding:16px 20px;border-top:1px solid var(--hair-soft)}
  table.report tr:first-child{border-top:0}
  table.report td{border:0;padding:0;line-height:1.45}
  table.report td.co{font-size:13px;color:var(--ink-3);font-weight:500;margin-bottom:2px}
  table.report td.co .rep{color:var(--ink-3)}
  table.report td.role{font-size:16px;font-weight:600;letter-spacing:-.014em;margin-bottom:8px}
  table.report td.money,table.report td.r{display:inline-block;text-align:left;vertical-align:middle}
  table.report td.money{margin-right:10px}
  table.report td.money:empty{display:none;margin:0}
  table.report td.money .none{display:none}
  table.report td.r{color:var(--ink-3);font-size:12px}
}

/* prva sekcija odmah nakon uvoda ne treba puni razmak */
.hero + section{padding-top:40px}
@media (max-width:760px){.hero + section{padding-top:28px}}