/* FakturaPlus naslovna 2026 — standalone template page-fp-home-2026.php */
img{max-width:100%}
[hidden]{display:none!important}
:root{
  --blue:#1e4fa3; --blue-700:#1a4287; --blue-900:#122c56; --blue-50:#eef3fb; --blue-100:#d6e2f5;
  --teal:#0d9488; --teal-text:#0f766e; --teal-50:#effcfa;
  --ink:#1e293b; --ink-soft:#475569; --muted:#64748b; --line:#e2e8f0; --line-strong:#cbd5e1;
  --bg:#ffffff; --bg-alt:#f6f8fc; --paper:#ffffff; --paper-line:#e5eaf2;
  --on-blue:#ffffff; --band:#122c56; --band-ink:#e8eef9; --band-muted:#a9bbdb;
  --shadow:0 1px 2px rgba(18,44,86,.06),0 12px 32px -12px rgba(18,44,86,.22);
  --f-head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --blue:#6f9ae6; --blue-700:#8fb1ee; --blue-900:#0b1830; --blue-50:#15233d; --blue-100:#1d3257;
    --teal:#2fb8ac; --teal-text:#5fd3c8; --teal-50:#10302d;
    --ink:#e6ebf3; --ink-soft:#b6c2d4; --muted:#8b99ae; --line:#26324a; --line-strong:#34425e;
    --bg:#0c1322; --bg-alt:#111a2d; --paper:#f7f9fc; --paper-line:#e5eaf2;
    --on-blue:#0c1322; --band:#0a1120; --band-ink:#e6ebf3; --band-muted:#8fa3c4;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --blue:#6f9ae6; --blue-700:#8fb1ee; --blue-900:#0b1830; --blue-50:#15233d; --blue-100:#1d3257;
  --teal:#2fb8ac; --teal-text:#5fd3c8; --teal-50:#10302d;
  --ink:#e6ebf3; --ink-soft:#b6c2d4; --muted:#8b99ae; --line:#26324a; --line-strong:#34425e;
  --bg:#0c1322; --bg-alt:#111a2d; --paper:#f7f9fc; --paper-line:#e5eaf2;
  --on-blue:#0c1322; --band:#0a1120; --band-ink:#e6ebf3; --band-muted:#8fa3c4;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
p,li{color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit}
b,strong{font-weight:600}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-head);color:var(--ink);text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.1;font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.18;font-weight:700;letter-spacing:-.015em}
h3{font-size:1.08rem;line-height:1.3;font-weight:600}
p{margin:0}
a{color:var(--blue)}
.eyebrow{font:600 .78rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--teal-text)}
.lede{font-size:1.14rem;color:var(--ink-soft);max-width:34em}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font:600 1rem/1 var(--f-body);padding:.95em 1.35em;border-radius:8px;text-decoration:none;border:1.5px solid transparent;transition:background .15s,border-color .15s,transform .15s}
.btn-primary{background:var(--blue);color:var(--on-blue)}
.btn-primary:hover{background:var(--blue-700)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{padding:.65em 1em;font-size:.92rem}
.btn:active{transform:translateY(1px)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 1.22rem/1 var(--f-head);letter-spacing:-.01em}
.logo-mark{width:30px;height:30px;border-radius:7px;background:var(--blue);display:grid;place-items:center;color:var(--on-blue);font:700 1.05rem/1 var(--f-head)}
.logo b{color:var(--teal-text);font-weight:700}
.nav{display:flex;gap:22px;margin-left:8px}
.nav a{color:var(--ink-soft);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--blue)}
.top-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.top-cta .login{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;padding:.6em .8em}
@media (max-width:900px){.nav{display:none}}
@media (max-width:480px){.top-cta .login{display:none}}

/* hero */
.hero{padding-block:64px 72px;background:radial-gradient(1100px 520px at 88% 0%,var(--blue-50),transparent 62%),var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.hero-copy{display:grid;gap:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-note{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:.92rem}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.tick{width:16px;height:16px;border-radius:50%;background:var(--teal-50);display:inline-grid;place-items:center;flex:none}
.tick::after{content:"";width:7px;height:4px;border-left:2px solid var(--teal-text);border-bottom:2px solid var(--teal-text);transform:rotate(-45deg) translate(1px,-1px)}
@media (max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:44px}.hero{padding-block:40px 56px}}

/* invoice document */
.doc-stage{position:relative}
.doc{background:var(--paper);color:#1e293b;border-radius:6px;box-shadow:var(--shadow);border:1px solid var(--paper-line);padding:26px 26px 22px;font-size:12.5px;line-height:1.45;transform:rotate(.6deg)}
.doc *{color:inherit}
.doc-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:14px;border-bottom:2px solid #1e4fa3}
.doc-seller{display:grid;gap:2px}
.doc-seller strong{font:600 14px/1.2 var(--f-head);color:#122c56}
.doc-meta{text-align:right;display:grid;gap:2px}
.doc-type{font:700 17px/1 var(--f-head);color:#1e4fa3;letter-spacing:.02em}
.mono{font-family:var(--f-mono);font-size:11.5px}
.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:14px;color:#475569}
.doc-parties b{display:block;color:#1e293b;font-weight:600;font-size:12.5px}
.doc-lbl{font:600 9.5px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:5px;display:block}
.doc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.doc th{font:600 9.5px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:#64748b;text-align:right;padding:7px 4px;border-bottom:1px solid #e2e8f0}
.doc th:first-child,.doc td:first-child{text-align:left}
.doc td{padding:7px 4px;border-bottom:1px solid #f1f5f9;text-align:right}
.doc-foot{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:end;padding-top:14px}
.qr{width:74px;height:74px;display:block;image-rendering:pixelated;border:1px solid #e2e8f0;border-radius:3px;background:#fff}
.qr-cap{font-size:9.5px;color:#64748b;margin-top:4px;text-align:center}
.totals{display:grid;gap:3px;justify-self:end;min-width:190px;font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between;gap:18px;color:#475569}
.totals .grand{margin-top:5px;padding-top:7px;border-top:2px solid #1e293b;color:#122c56;font:700 15px/1.2 var(--f-head)}
.fisc{margin-top:14px;padding:9px 11px;border:1px dashed #97e6de;background:#effcfa;border-radius:5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#0f766e;font-size:11px}
.stamp{position:absolute;z-index:2;right:-8px;top:-16px;background:var(--teal);color:#fff;font:600 12.5px/1 var(--f-body);padding:9px 12px;border-radius:999px;box-shadow:var(--shadow);transform:rotate(3deg)}
.doc-note{margin-top:14px;font-size:.82rem;color:var(--muted);text-align:center}
@media (max-width:520px){.doc{padding:18px 16px;font-size:11.5px;transform:none}.doc-parties{grid-template-columns:1fr}.stamp{right:4px}.doc .hide-sm{display:none}}

/* sections */
section{padding-block:84px}
.alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.sec-head{display:grid;gap:12px;max-width:44em;margin-bottom:44px}
.sec-head p{color:var(--ink-soft);font-size:1.06rem}

/* products */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prod{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:grid;gap:14px;align-content:start}
.prod.feat{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.prod-tag{font:600 .74rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prod.feat .prod-tag{color:var(--blue)}
.prod p{color:var(--ink-soft);font-size:.97rem}
.prod ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.95rem}
.prod li{display:flex;gap:10px;align-items:flex-start}
.prod li .tick{margin-top:4px}
.prod a{font-weight:600;text-decoration:none;margin-top:4px}
.prod a:hover{text-decoration:underline}
@media (max-width:900px){.products{grid-template-columns:1fr}}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fg{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:12px;align-content:start;background:var(--bg)}
.fg-ico{width:36px;height:36px;border-radius:8px;background:var(--blue-50);display:grid;place-items:center}
.fg-ico svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fg ul{margin:0;padding-left:1.05em;color:var(--ink-soft);font-size:.94rem;display:grid;gap:5px}
.fg li::marker{color:var(--teal)}
@media (max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr}}

/* spotlight */
.spots{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.spot{border:1px solid var(--line);border-radius:12px;background:var(--bg);display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.spot-body{padding:26px 26px 22px;display:grid;gap:12px;align-content:start}
.spot-body p{color:var(--ink-soft);font-size:.97rem}
.spot-body ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:.93rem;color:var(--ink-soft)}
.spot-body li{display:flex;gap:9px;align-items:flex-start}
.spot-body li .tick{margin-top:4px}
.spot-vis{background:var(--bg-alt);border-top:1px solid var(--line);padding:20px 22px;display:grid;align-content:center}
.mini{background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:.84rem;overflow:hidden}
.mini-h{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.mini-h span:last-child{font-weight:500;color:var(--muted)}
.mini-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.mini-row:last-child{border-bottom:0}
.mini-row b{color:var(--ink);font-weight:500}
.mini-row small{display:block;color:var(--muted);font-size:.78rem}
.chip{font:600 .72rem/1 var(--f-body);padding:5px 8px;border-radius:999px;white-space:nowrap}
.chip-ok{background:var(--teal-50);color:var(--teal-text)}
.chip-new{background:var(--blue-50);color:var(--blue)}
.chip-warn{background:color-mix(in srgb,#f59e0b 16%,transparent);color:#b45309}
.mini-foot{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--teal-50);color:var(--teal-text);font-weight:600;font-size:.8rem}
.ledger-amt{font:700 1.5rem/1.1 var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums}
.link-pill{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:6px;background:var(--bg-alt);border:1px dashed var(--line-strong);font-family:var(--f-mono);font-size:.76rem;color:var(--ink-soft);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sig{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;padding:12px}
.sig svg{width:100%;max-width:170px;height:44px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sig-line{border-top:1px solid var(--line-strong);padding-top:5px;color:var(--muted);font-size:.76rem}
.qr-sm{width:58px;height:58px;image-rendering:pixelated;border:1px solid var(--line);border-radius:3px;background:#fff;display:block}
@media (max-width:860px){.spots{grid-template-columns:1fr}}
@media (max-width:480px){.spot-body{padding:20px 18px}.spot-vis{padding:16px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.step{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--line)}
.step::before{counter-increment:s;content:"Korak " counter(s);font:600 .78rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text)}
.step p{color:var(--ink-soft);font-size:.96rem}
.step:first-child{border-top-color:var(--blue)}
@media (max-width:800px){.steps{grid-template-columns:1fr;gap:22px}}

/* pricing */
.trial{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;background:var(--teal-50);border:1px solid color-mix(in srgb,var(--teal) 35%,transparent);border-radius:var(--r);padding:20px 24px;margin-bottom:24px}
.trial strong{font:600 1.12rem/1.3 var(--f-head);color:var(--ink)}
.trial p{color:var(--ink-soft);font-size:.95rem}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;display:grid;gap:16px;align-content:start;background:var(--bg);position:relative}
.plan.pop{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.plan .badge{position:absolute;top:-11px;left:22px;background:var(--blue);color:var(--on-blue);font:600 .74rem/1 var(--f-body);padding:6px 10px;border-radius:999px}
.plan-name{font:600 1.05rem/1.2 var(--f-head)}
.plan-for{color:var(--muted);font-size:.9rem;margin-top:3px}
.price{font:700 2rem/1 var(--f-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price small{font:500 .9rem/1 var(--f-body);color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.93rem;color:var(--ink-soft)}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li .tick{margin-top:4px}
.plan .btn{justify-content:center}
.price-note{margin-top:18px;color:var(--muted);font-size:.9rem}
@media (max-width:1000px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}

/* kasa band */
.band{background:var(--band);color:var(--band-ink);padding-block:72px}
.band .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.band h2{color:#fff}
.band p{color:var(--band-muted)}
.band .eyebrow{color:#5fd3c8}
.band-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.band-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.band-list b{color:#fff;font-weight:600}
.band-list span{color:var(--band-muted);font-size:.95rem}
.band-k{font:500 .8rem/1 var(--f-mono);color:#5fd3c8}
.band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.band .btn-ghost:hover{border-color:#fff;color:#fff}
.band .btn-primary{background:#fff;color:#122c56}
.band .btn-primary:hover{background:#e8eef9}
@media (max-width:860px){.band .wrap{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:0;max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font:600 1.03rem/1.4 var(--f-head);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 20px;color:var(--ink-soft);max-width:64ch}

/* final cta */
.final{text-align:left}
.final-box{background:var(--blue);color:var(--on-blue);border-radius:14px;padding:44px;display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.final-box h2{color:var(--on-blue)}
.final-box p{color:color-mix(in srgb,var(--on-blue) 78%,transparent);margin-top:8px}
.final-box .btn{background:var(--on-blue);color:var(--blue)}
.final-box .btn:hover{opacity:.92}
@media (max-width:560px){.final-box{padding:28px 22px}}

/* footer */
footer{padding-block:56px 40px;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink-soft)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h4{font:600 .8rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:var(--ink-soft);text-decoration:none}
.foot a:hover{color:var(--blue)}
.foot address{font-style:normal;display:grid;gap:4px;margin-top:14px}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--muted);font-size:.85rem}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}