/* poslovnitok.rs — početna strana
   Tokeni, tipografija i pokret prema DESIGN-SYSTEM.md */

:root{
  --ink:#0B0B0F;
  --ink-soft:#55555F;
  --paper:#FBFAF8;
  --paper-2:#F3F0EC;
  --coral:#F5384E;
  --coral-soft:#FFE7EA;
  --line:rgba(11,11,15,.09);

  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.8s;
  --pad-x:6vw;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ background:var(--paper); }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  overflow-x:clip;
}
img,svg{ max-width:100%; }
a{ color:inherit; }

.mono{ font-family:var(--mono); font-variant-ligatures:none; }
.coral{ color:var(--coral); }

.wrap{ padding-inline:var(--pad-x); max-width:calc(80rem + 2 * var(--pad-x)); margin-inline:auto; }

/* ---------- Glavni meni ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,248,.78);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; gap:1.5rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:800; font-size:1.12rem; letter-spacing:-.02em; text-decoration:none;
}
.brand .dot{ width:7px; height:7px; border-radius:50%; background:var(--coral); }

.menu{ list-style:none; margin:0; padding:0; display:flex; gap:.25rem; }
.menu a{
  display:block; padding:.5rem .8rem; border-radius:10px;
  text-decoration:none; font-size:.95rem; color:var(--ink-soft);
  transition:color .25s var(--ease);
}
.menu a:hover{ color:var(--ink); }
.menu a[aria-current="page"]{ color:var(--coral); font-weight:600; }
.menu a:focus-visible,
.menu-toggle:focus-visible,
.btn:focus-visible,
.brand:focus-visible,
.site-footer a:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }

.menu-toggle{
  display:none; align-items:center; gap:.6rem;
  font:inherit; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:12px;
  padding:.6rem .85rem; cursor:pointer;
}
.menu-toggle .bars{ position:relative; width:16px; height:10px; }
.menu-toggle .bars::before,
.menu-toggle .bars::after{
  content:""; position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease), top .35s var(--ease);
}
.menu-toggle .bars::before{ top:1px; }
.menu-toggle .bars::after{ top:7.5px; }
.menu-toggle[aria-expanded="true"] .bars::before{ top:4.25px; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after{ top:4.25px; transform:rotate(-45deg); }

@media (max-width:860px){
  .menu-toggle{ display:inline-flex; }
  .nav{ position:static; }
  .menu{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    padding:.5rem var(--pad-x) 1.2rem;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .menu.open{ display:flex; }
  .menu li + li{ border-top:1px solid var(--line); }
  .menu a{ padding:.95rem 0; font-size:1.05rem; border-radius:0; }
}

/* ---------- Tipografija (DESIGN-SYSTEM.md §4) ---------- */
.eyebrow{
  font-family:var(--mono); font-variant-ligatures:none;
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.7rem;
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--coral); flex:none; }
.h2{
  font-size:clamp(2.1rem,4.9vw,3.7rem); font-weight:800; line-height:1.03;
  letter-spacing:-.025em; margin:0; max-width:20ch;
}
.lead{
  font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink-soft);
  line-height:1.5; margin:1.6rem 0 0; max-width:48ch;
}
.headline{
  font-size:clamp(2.6rem,5.4vw,5.2rem); font-weight:800; line-height:.98;
  letter-spacing:-.03em; margin:0; max-width:16ch;
}

/* Podvlaka ispod koral reči u naslovu (kao .headline .ai::after) */
.headline .coral{ position:relative; display:inline-block; }
.headline .coral::after{
  content:""; position:absolute; left:var(--ul-l,.05em); right:var(--ul-r,-.035em); bottom:-.06em;
  height:.06em; background:var(--coral); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
}
/* Petlja 5.5s: iscrtavanje .8s · stoji 4s · nestaje .3s · pauza .4s.
   Prvo iscrtavanje 1.5s posle ulaska hero sekcije; pauzirano dok hero nije u ekranu. */
.hero.in .headline .coral::after,
.lesson.in .headline .coral::after{
  animation:ul-loop 5.5s linear 1.5s infinite backwards;
}
.hero.in.offscreen .headline .coral::after,
.lesson.in.offscreen .headline .coral::after{ animation-play-state:paused; }
@keyframes ul-loop{
  0%      { transform:scaleX(0); opacity:1; animation-timing-function:cubic-bezier(.2,.7,.2,1); }
  14.545% { transform:scaleX(1); opacity:1; animation-timing-function:linear; }   /* .8s  */
  87.273% { transform:scaleX(1); opacity:1; animation-timing-function:cubic-bezier(.2,.7,.2,1); } /* 4.8s */
  92.727% { transform:scaleX(1); opacity:0; }                                      /* 5.1s */
  100%    { transform:scaleX(1); opacity:0; }                                      /* 5.5s */
}

/* ---------- Dugmad ---------- */
.actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.8rem 1.35rem; border-radius:12px;
  font-size:1rem; font-weight:600; text-decoration:none; line-height:1.2;
  border:1px solid transparent;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--coral); color:#fff; }
.btn-primary:hover{ background:#E42A40; }
.btn-ghost{ border-color:rgba(11,11,15,.22); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--coral); color:var(--coral); }

/* ---------- Sekcije ---------- */
.section{ padding-block:clamp(4.5rem,11vh,8.5rem); border-top:1px solid var(--line); }
.section:first-of-type{ border-top:0; }

.hero{ padding-block:clamp(3rem,9vh,7rem) clamp(4rem,10vh,7.5rem); }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:center;
}
.hero .lead{ max-width:44ch; }

.split{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:center;
}
.split .copy{ order:2; }
.split .ill{ order:1; }

.section-head{ max-width:64ch; margin-bottom:clamp(2.2rem,5vh,3.5rem); }
.ill-wide{ max-width:80rem; }

/* Proces: četiri kolone */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2.2rem;
}
.steps li{ border-top:1px solid var(--ink); padding-top:1.3rem; }
.steps .num{
  font-family:var(--mono); font-variant-ligatures:none;
  color:var(--coral); font-size:.95rem; letter-spacing:.14em; display:block;
  margin-bottom:1.1rem;
}
.steps h3{
  font-size:clamp(1.15rem,1.6vw,1.4rem); font-weight:700; letter-spacing:-.01em;
  margin:0 0 .6rem;
}
.steps p{ margin:0; color:var(--ink-soft); max-width:32ch; }

/* Podaci: tri kartice */
.grid3{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.6rem 2.2rem; max-width:66rem;
}
.card{
  border:1px solid var(--line); border-radius:18px;
  background:rgba(255,255,255,.5);
  padding:1.8rem 1.7rem 1.9rem;
}
.card h3{ font-size:1.2rem; font-weight:700; letter-spacing:-.01em; margin:0 0 .6rem; }
.card p{ margin:0; color:var(--ink-soft); }
.card .dot{ display:block; width:8px; height:8px; border-radius:50%; background:var(--coral); margin-bottom:1.3rem; }

/* Poziv */
.cta{ background:var(--paper-2); }
.cta .h2{ max-width:18ch; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding-block:2.2rem; }
.site-footer .wrap{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center;
  font-family:var(--mono); font-variant-ligatures:none; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:var(--coral); }
.site-footer .sep{ opacity:.5; }

/* ---------- Ulazne animacije (DESIGN-SYSTEM.md §5), okidač: sekcija u ekranu ---------- */
.js .fade{ opacity:0; transform:translateY(16px); }
.js .in .fade{ animation:fadeUp var(--dur) var(--ease) both; }
.js .in .f1{ animation-delay:.05s; }
.js .in .f2{ animation-delay:.20s; }
.js .in .f3{ animation-delay:.38s; }
.js .in .f4{ animation-delay:.54s; }
.js .in .f5{ animation-delay:.70s; }
.js .in .f6{ animation-delay:.86s; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* ---------- SVG ilustracije ----------
   Pravila iz <style> blokova SVG fajlova, scope-ovana na .ill i sa
   preimenovanim keyframe-ovima da se ne sudaraju sa ostatkom strane. */
.ill svg{ display:block; width:100%; height:auto; }

.ill .draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:ill-draw 1.6s var(--ease) forwards; }
.ill .draw.d2{ animation-delay:.35s; }
.ill .draw.d3{ animation-delay:.7s; }
.ill .draw.d4{ animation-delay:1.1s; }
@keyframes ill-draw{ to{ stroke-dashoffset:0; } }

.ill .pop{ opacity:0; animation:ill-pop .8s var(--ease) forwards; }
.ill .pop.p1{ animation-delay:.2s; }
.ill .pop.p2{ animation-delay:.5s; }
.ill .pop.p3{ animation-delay:.8s; }
.ill .pop.p4{ animation-delay:1.1s; }
.ill .pop.p5{ animation-delay:1.4s; }
.ill .pop.p6{ animation-delay:1.7s; }
@keyframes ill-pop{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.ill .ping{ transform-box:fill-box; transform-origin:center; animation:ill-ping 2.6s var(--ease) infinite; }
@keyframes ill-ping{ 0%{ transform:scale(.92); opacity:.55; } 70%,100%{ transform:scale(1.35); opacity:0; } }

.ill .blink{ animation:ill-blink 1.15s step-end infinite; }
@keyframes ill-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

.ill .cur{ animation:ill-cur 4.6s ease-in-out infinite; }
@keyframes ill-cur{ 0%,100%{ transform:translate(0,0); } 45%{ transform:translate(-26px,-30px); } 60%{ transform:translate(-26px,-30px); } }

.ill .still{ display:none; }

/* Pauzirano dok ilustracija ne uđe u ekran */
.js .ill:not(.run) .draw,
.js .ill:not(.run) .pop,
.js .ill:not(.run) .ping,
.js .ill:not(.run) .blink,
.js .ill:not(.run) .cur{ animation-play-state:paused; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .hero-grid,.split{ grid-template-columns:minmax(0,1fr); }
  .split .copy{ order:1; }
  .split .ill{ order:2; }
  .grid3{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  :root{ --pad-x:16px; }
  .steps{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .actions .btn{ width:100%; }
  .eyebrow{ font-size:.72rem; letter-spacing:.18em; }
  .site-header .wrap{ min-height:58px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fade,.js .fade{ opacity:1!important; transform:none!important; animation:none!important; }
  .headline .coral::after{ transform:scaleX(1)!important; opacity:1!important; animation:none!important; }
  .menu-toggle .bars::before,.menu-toggle .bars::after,.btn,.menu a{ transition:none!important; }

  .ill .draw{ animation:none; stroke-dashoffset:0; }
  .ill .pop{ animation:none; opacity:1; }
  .ill .ping,.ill .blink,.ill .cur{ animation:none; }
  .ill .ping{ opacity:0; }
  .ill .mover{ display:none; }
  .ill .still{ display:inline; }
}

/* ---------- Strana „Laka analiza“ (lbi.html) ---------- */
.article{ padding-top:clamp(2rem,6vh,4.5rem); }
.lbi{
  --s-idle:var(--ink-soft);   /* tekst u mirovanju: srednje siva */
  --s-hot:var(--ink);         /* naglašena rečenica: puna boja teksta */
  font-size:clamp(1.02rem,1.2vw,1.12rem);
  display:grid; gap:2rem 4vw;
  /* animacija ≈ pola širine ekrana; na vrlo širokim ekranima najviše 58% kolone sadržaja */
  grid-template-columns:minmax(0,1fr) min(50vw,58%);
  grid-template-areas:"title movie" "text movie";
  align-items:start;
}
.lbi .h2{ grid-area:title; margin:0; }
.lbi .sentences{ grid-area:text; }
.lbi .movie{ grid-area:movie; position:sticky; top:calc(64px + 1.5rem); margin:0; }

.sentences p{ margin:0 0 2.1em; line-height:1.6; position:relative; padding-left:calc(2px + 14px); }
/* Vertikalna linija samo uz aktivnu rečenicu (hover / tap): visine te rečenice,
   u praznom prostoru levo od teksta, pa ne pomera redove */
.sentences .s{ position:relative; }
.sentences .s::before{
  content:""; position:absolute; left:calc(-1 * (2px + 14px)); top:0; bottom:0; width:2px;
  background:var(--coral); border-radius:1px;
  opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.sentences .s.on::before{ opacity:.35; }
@media (hover:hover){ .sentences .s:hover::before{ opacity:.35; } }
.sentences p:last-child{ margin-bottom:0; }
.sentences .s{
  display:block; margin-bottom:.55em;
  color:var(--s-idle);
  transition:color .2s ease;
  cursor:default;
}
.sentences .s:last-child{ margin-bottom:0; }
.sentences .s .rest{ color:transparent; }        /* još neispisani deo: rezerviše prostor */
.sentences .s.on{ color:var(--s-hot); }
@media (hover:hover){ .sentences .s:hover{ color:var(--s-hot); } }

.movie object{
  display:block; width:100%; aspect-ratio:16 / 9; height:auto;
  border:1px solid var(--line); border-radius:18px; background:#F6F7F9;
}
.movie figcaption{
  margin-top:.9rem; font-family:var(--mono); font-variant-ligatures:none;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  line-height:1.6;
}

@media (max-width:999px){
  .lbi{ grid-template-columns:minmax(0,1fr); grid-template-areas:"title" "movie" "text"; gap:1.6rem; }
  .lbi .movie{ position:static; }
  .lbi .sentences{ max-width:65ch; margin-top:.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .sentences .s{ transition:none; }
  .sentences .s::before{ transition:none; }
}