/* ABAKUS PLUS — knjigovodstvo za mikro i mala poduzeća
   Brand: Knjiga grafičkih standarda v1.0 — #404040 / #e7e7e7 / #c2b5a3
   Type:  Outfit (Gilmer stand-in) + Cormorant Garamond (BV Celine stand-in) */

:root{
  --ink:#2a2a2a;
  --char:#404040;         /* primarna, knjiga str.3 */
  --char-deep:#2e2e2e;
  --char-950:#232323;
  --grey:#e7e7e7;         /* sekundarna, knjiga str.4 */
  --taupe:#c2b5a3;        /* dodatna, knjiga str.5 */
  --taupe-dim:#a99a86;
  --paper:#faf9f7;
  --paper-2:#f3f1ed;
  --line:rgba(64,64,64,.14);
  --line-dark:rgba(231,231,231,.16);
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --track-lockup:.34em;   /* logo tracking kao token */
  --wrap:1140px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:350;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.016em;text-wrap:balance;line-height:1.14}
p{margin:0;text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sec{padding:88px 0}
.sec-sm{padding:64px 0}
@media(max-width:760px){ .sec{padding:60px 0} .sec-sm{padding:44px 0} .wrap{width:min(100% - 32px,var(--wrap))} }

/* ---------- reveal (progressive enhancement — never default hidden) ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .js .reveal{opacity:1!important;transform:none!important;transition:none} }

/* ---------- topbar ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(250,249,247,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.top img{width:168px}
.top-cta{
  display:inline-flex;align-items:center;background:var(--char);color:#fff;text-decoration:none;
  padding:13px 22px;border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:.005em;
  transition:background .2s;
}
.top-cta:hover{background:var(--char-950)}
@media(max-width:760px){ .top img{width:132px} .top .in{min-height:62px} .top-cta{padding:11px 16px;font-size:13.5px} }
@media(max-width:420px){ .top-cta{display:none} }

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe-dim);margin-bottom:20px;
}
.on-dark .eyebrow{color:var(--taupe)}

/* ---------- hero ---------- */
.hero{
  position:relative;color:#f2f0ec;overflow:hidden;
  background:var(--char) url("/assets/img/hero-office.jpg") center 44% / cover no-repeat;
}
/* Legibility veil: opaque under the headline, opens toward the right so the real
   office (and its colour) reads through around the form card. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(40,40,40,.90) 0%,
      rgba(40,40,40,.84) 30%,
      rgba(40,40,40,.60) 50%,
      rgba(40,40,40,.38) 72%,
      rgba(40,40,40,.42) 100%),
    linear-gradient(to bottom, rgba(30,30,30,.45) 0%, rgba(30,30,30,0) 26%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(980px 560px at 74% 12%,rgba(194,181,163,.20),transparent 62%);
}
.hero .in{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;padding:78px 0 84px}
.hero h1{
  font-size:clamp(2.15rem,4.35vw,3.5rem);font-weight:400;letter-spacing:-.026em;line-height:1.08;
  color:#fff;max-width:15.5ch;text-shadow:0 2px 22px rgba(20,20,20,.55);
}
.hero .lede{margin-top:22px;font-size:clamp(1.02rem,1.5vw,1.16rem);color:#d8d3cb;max-width:46ch;line-height:1.6;text-shadow:0 1px 16px rgba(20,20,20,.5)}
.hero-note{margin-top:26px;display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#a9a49c}
.hero-note .dot{width:6px;height:6px;border-radius:50%;background:var(--taupe);flex:none;margin-top:8px}
@media(max-width:960px){
  .hero .in{grid-template-columns:1fr;gap:36px;padding:52px 0 58px}
  .hero h1{max-width:20ch}
  .hero{
    background-image:url("/assets/img/hero-office-m.jpg");
    background-position:34% 46%;
  }
  .hero::before{
    background:
      linear-gradient(180deg,
        rgba(40,40,40,.90) 0%,
        rgba(40,40,40,.84) 38%,
        rgba(40,40,40,.58) 62%,
        rgba(40,40,40,.40) 100%),
      linear-gradient(to bottom, rgba(30,30,30,.4) 0%, rgba(30,30,30,0) 20%);
  }
}

/* ---------- form card ---------- */
.card{
  background:#fff;color:var(--ink);border-radius:var(--r);padding:30px 28px 26px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.55);border-top:3px solid var(--taupe);
}
.card h2{font-size:1.24rem;font-weight:500;letter-spacing:-.015em;color:var(--char)}
.card .sub{margin-top:8px;font-size:14.5px;color:#6b6b6b;line-height:1.5}
.steps-bar{display:flex;gap:6px;margin:20px 0 22px}
.steps-bar i{height:3px;flex:1;border-radius:2px;background:var(--grey);transition:background .3s}
.steps-bar i.on{background:var(--taupe)}
.step{display:none}
.step.on{display:block}
.step h3{font-size:1.02rem;font-weight:500;color:var(--char);margin-bottom:14px;line-height:1.35}
.opts{display:grid;gap:9px}
.opt{
  text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;font-size:15px;cursor:pointer;transition:border-color .18s,background .18s;
  min-height:48px;line-height:1.35;
}
.opt:hover{border-color:var(--taupe);background:#fdfcfa}
.opt.sel{border-color:var(--char);background:var(--paper-2)}
.fields{display:grid;gap:11px}
.fields input{
  width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  font-size:16px;min-height:48px;
}
.fields input:focus{outline:none;border-color:var(--taupe);box-shadow:0 0 0 3px rgba(194,181,163,.22)}
.fields input::placeholder{color:#9b9b9b}
.btn{
  width:100%;background:var(--char);color:#fff;border:0;border-radius:999px;
  padding:16px 22px;font-size:15.5px;font-weight:500;cursor:pointer;min-height:52px;
  transition:background .2s;letter-spacing:.005em;
}
.btn:hover{background:var(--char-950)}
.btn[disabled]{opacity:.6;cursor:default}
a.btn{display:inline-block;width:auto;text-decoration:none;text-align:center;line-height:1.35}
.back{background:none;border:0;color:#8a8a8a;font-size:13.5px;cursor:pointer;padding:12px 4px 0;min-height:44px}
.back:hover{color:var(--char)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#6f6f6f;line-height:1.5;margin-top:4px}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--char)}
.consent a{color:var(--char)}
.consent.attention{border:1px solid #c0392b;background:#fdf3f2;border-radius:8px;padding:9px;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.err{color:#c0392b;font-size:13px;margin-top:9px;display:none}
.err.on{display:block}
.priv{margin-top:14px;font-size:13px;color:#8a8a8a;text-align:center;line-height:1.5}

/* ---------- proof bar ---------- */
.proof{background:var(--char-deep);color:#e9e5df;border-top:2px solid var(--taupe)}
.proof .in{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:38px 0}
.proof .n{font-family:var(--serif);font-size:clamp(1.9rem,3.1vw,2.5rem);color:var(--taupe);line-height:1;font-weight:500}
.proof .t{margin-top:9px;font-size:13.5px;color:#a9a49c;line-height:1.45}
.proof .it{text-align:center;padding:0 8px}
@media(max-width:700px){ .proof .in{grid-template-columns:1fr;gap:22px;padding:28px 0} }

/* ---------- generic section head ---------- */
.head{max-width:78ch}
.head h2{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:400;letter-spacing:-.022em;max-width:22ch}
.head .lede{margin-top:16px;font-size:1.04rem;color:#5e5e5e;max-width:62ch;line-height:1.62}
.on-dark .head h2{color:#fff}
.on-dark .head .lede{color:#b6b1a9}

/* ---------- pain ---------- */
.pain{background:var(--paper-2)}
.pain-list{margin-top:34px;display:grid;gap:0;border-top:1px solid var(--line)}
.pain-list li{
  list-style:none;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:19px 2px;border-bottom:1px solid var(--line);font-size:1.01rem;line-height:1.55;
}
.pain-list .mk{color:var(--taupe-dim);font-family:var(--serif);font-size:1.15rem;line-height:1.4}
.pain-tail{margin-top:30px;font-size:1.16rem;color:var(--char);font-weight:500}

/* ---------- mechanism (dark) ---------- */
.mech{background:var(--char);color:#eae6e0}
.mech .grid{margin-top:44px;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.mech-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--char-950)}
.mech-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.mech-pts{display:grid;gap:26px}
.mech-pt h3{font-size:1.12rem;font-weight:500;color:#fff;margin-bottom:8px}
.mech-pt p{font-size:.99rem;color:#b6b1a9;line-height:1.6}
.mech-pt{padding-left:19px;border-left:2px solid var(--taupe)}
@media(max-width:900px){ .mech .grid{grid-template-columns:1fr;gap:34px} .mech-photo{aspect-ratio:3/2} .mech-photo img{object-position:50% 30%} }

/* ---------- offer ---------- */
.offer-wrap{margin-top:38px;display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:center}
.offer-photo{border-radius:var(--r);overflow:hidden;background:var(--paper-2);aspect-ratio:4/5}
.offer-photo img{width:100%;height:100%;object-fit:cover;object-position:58% 38%}
.offer-box{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:38px 36px;box-shadow:0 22px 54px -40px rgba(0,0,0,.35);
}
@media(max-width:900px){
  .offer-wrap{grid-template-columns:1fr;gap:20px}
  .offer-photo{aspect-ratio:4/5;min-height:0}
  .offer-photo img{object-position:58% 26%}
}
.offer-box h3{font-size:1.3rem;font-weight:500;color:var(--char)}
.offer-list{margin:24px 0 0;padding:0;display:grid;gap:14px}
.offer-list li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;font-size:1.005rem;line-height:1.55}
.tick{width:21px;height:21px;flex:none;margin-top:2px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center}
.tick svg{width:11px;height:11px;stroke:var(--char);stroke-width:2.6;fill:none}
.offer-foot{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:#6b6b6b;line-height:1.55}
@media(max-width:640px){ .offer-box{padding:28px 22px} }

/* ---------- selectivity ---------- */
.filter{background:var(--paper-2)}
.filter .cols{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.fcard.no{background:#fbfaf8}
.fcard h3{font-size:1.08rem;font-weight:500;color:var(--char);margin-bottom:18px}
.fcard ul{margin:0;padding:0;display:grid;gap:12px}
.fcard li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.985rem;line-height:1.52;color:#4a4a4a}
.mark{width:19px;height:19px;flex:none;margin-top:3px;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1}
.mark.y{background:rgba(194,181,163,.3);color:#7a6c58}
.mark.n{background:var(--grey);color:#8d8d8d}
@media(max-width:800px){ .filter .cols{grid-template-columns:1fr} .fcard{padding:26px 22px} }

/* ---------- testimonials ---------- */
.revs{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sec.warm{background:linear-gradient(180deg,#faf7f2 0%,#f6f2ea 100%)}
.rev{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.rev::before{
  content:"\201C";position:absolute;top:-26px;right:14px;font-family:var(--serif);
  font-size:8rem;line-height:1;color:rgba(194,181,163,.26);pointer-events:none;
}
.stars{color:var(--taupe-dim);font-size:14px;letter-spacing:.14em;margin-bottom:16px}
.rev q{quotes:none;font-size:1.02rem;line-height:1.6;color:#3d3d3d;flex:1}
.rev q::before,.rev q::after{content:""}
.rev .who{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:#7a7a7a}
.rev .who b{display:block;color:var(--char);font-weight:500;font-size:14.5px;margin-bottom:2px}
@media(max-width:860px){ .revs{grid-template-columns:1fr} }

/* ---------- team strip ---------- */
.team{background:var(--char);color:#eae6e0}
.team-grid{margin-top:38px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.team-grid figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--char-950)}
.team-grid img{width:100%;height:100%;object-fit:cover}
.team-grid figure:nth-child(4){aspect-ratio:3/4}
@media(max-width:820px){ .team-grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- steps ---------- */
.flow{margin-top:40px;display:grid;gap:0;counter-reset:s}
.flow .row{
  display:grid;grid-template-columns:auto 1fr;column-gap:22px;row-gap:6px;
  padding:24px 0;border-top:1px solid var(--line);align-items:start;
}
.flow .row:last-child{border-bottom:1px solid var(--line)}
.flow .num{
  grid-row:1 / span 2;font-family:var(--serif);font-size:1.5rem;color:var(--taupe-dim);
  width:44px;line-height:1.1;font-weight:500;
}
.flow h3{font-size:1.06rem;font-weight:500;color:var(--char)}
.flow p{font-size:.99rem;color:#5e5e5e;line-height:1.58}
@media(max-width:560px){ .flow .num{width:32px;font-size:1.25rem} .flow .row{column-gap:14px} }

/* ---------- faq ---------- */
.faq{background:var(--paper-2)}
.faq-list{margin-top:34px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  cursor:pointer;list-style:none;padding:21px 44px 21px 2px;position:relative;
  font-size:1.04rem;font-weight:500;color:var(--char);line-height:1.45;min-height:48px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:8px;top:29px;width:9px;height:9px;
  border-right:1.6px solid var(--taupe-dim);border-bottom:1.6px solid var(--taupe-dim);
  transform:rotate(45deg);transition:transform .22s;
}
.faq-list details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq-list .a{padding:0 44px 24px 2px;font-size:1rem;color:#5a5a5a;line-height:1.65}

/* ---------- final cta ---------- */
.final{background:var(--char);color:#f2f0ec;text-align:center}
.final h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:400;color:#fff;max-width:20ch;margin-inline:auto;letter-spacing:-.022em}
.final p{margin-top:18px;color:#b6b1a9;max-width:52ch;margin-inline:auto;font-size:1.04rem}
.final .btn{display:inline-block;width:auto;padding:17px 40px;margin-top:34px;background:var(--taupe);color:#332e27;font-weight:500;text-decoration:none}
.final .btn:hover{background:#cfc4b4}

/* ---------- footer ---------- */
.foot{background:var(--char-950);color:#8f8a83;padding:52px 0 40px;font-size:13.5px}
.foot img{width:150px;opacity:.85;margin-bottom:22px}
.foot .in{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start}
.foot a{color:#b6b1a9;text-decoration:none}
.foot a:hover{color:var(--taupe);text-decoration:underline}
.foot .nap{display:grid;gap:7px;line-height:1.55}
.foot .legal{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:13px;color:#77726c;line-height:1.6}
@media(max-width:700px){ .foot .in{grid-template-columns:1fr;gap:24px} }

/* ---------- sticky mobile cta ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(20,20,20,.22) 0%, rgba(20,20,20,0) 100%);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.sticky .btn{
  display:block;width:100%;padding:15px;font-size:15px;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.55);
}
/* No-JS keeps the bar (a CTA beats no CTA); with JS it stays out of the way until the
   reader has actually passed the hero form, then slides in. */
.js .sticky{opacity:0;transform:translateY(105%);pointer-events:none;transition:opacity .3s ease,transform .34s cubic-bezier(.2,.7,.3,1)}
.js .sticky.on{opacity:1;transform:translateY(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){ .js .sticky{transition:none} }
@media(max-width:760px){ .sticky{display:block} body{padding-bottom:78px} }