/* =========================================================================
   nenadmilunov.com — ZAJEDNICKI STIL ZA CEO SAJT
   Koriste ga: /index.html, /404.html, /blog/index.html i svi postovi.

   Menjas boju, font ili razmak? Menjas ovde, jednom, i vazi svuda.

   PUTANJE SU APSOLUTNE (/fonts/...) jer ovaj fajl citaju i stranice iz
   /blog/, gde bi relativna putanja pokazivala na /blog/fonts/ i pukla.
   ========================================================================= */

/* =========================================================================
   1. FONT (self-hosted, nema poziva ka Google-u)

   Atkinson Hyperlegible Next, jedini font na sajtu. Pravljen je za
   citljivost: slova koja se inace mesaju (veliko I, malo l i jedinica;
   veliko O i nula; b/d, p/q) namerno su razlicito oblikovana.

   Cetiri tezine (400/500/600/700) plus kurziv, svaka u dva podskupa:
   latin i latin-ext. Latin-ext nosi nasa slova c, c, s, z, dj.
   Jedini izuzetak je <code> u tekstu posta, koji koristi SISTEMSKI
   monospace — kod trazi poravnate kolone, a to ne skida nijedan fajl.
   ========================================================================= */
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/atkinson-400i-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/atkinson-400i-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:700;font-display:swap;
  src:url('/fonts/atkinson-700i-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:700;font-display:swap;
  src:url('/fonts/atkinson-700i-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/atkinson-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/atkinson-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/atkinson-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/atkinson-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/atkinson-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/atkinson-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/atkinson-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/atkinson-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   2. TOKENI I OSNOVA
   ========================================================================= */
:root{
  /* Skala velicina teksta. Pet stepeni namesto 22 razlicite vrednosti.
     Ako neki element trazi velicinu koje ovde nema, skoro uvek je greska
     u odabiru stepena, a ne razlog da se doda novi. */
  --fs-xs:.8rem;      /* 12.8px — sitni natpisi verzalom */
  --fs-sm:.9rem;      /* 14.4px — navigacija, dugmici, datumi */
  --fs-md:1rem;       /* 16px   — opisi, stavke liste */
  --fs-lg:1.1rem;     /* 17.6px — uvodni pasusi, naslovi kartica */
  --fs-xl:1.25rem;    /* 20px   — tekst blog posta (telefon ima svojih 17.6px) */

  --ink:#0E0E0F;
  --paper:#F4F1EA;
  --paper-2:#E8E3D7;
  --muted:#6E6A63;
  --accent:#2F5D3A;
  --line:rgba(14,14,15,.14);
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Rezervise mesto za skrolbar i kad ga nema. Bez ovoga se navigacija
     pomeri za sirinu skrolbara (~15px) izmedju duge stranice koja skroluje
     i kratke koja ne skroluje, pa "Message me" skakuce levo-desno. Bocni
     padding je u vw, a vw racuna i skrolbar, dok ga sadrzajni prostor gubi. */
  scrollbar-gutter:stable;
}
/* Za starije browsere bez scrollbar-gutter: skrolbar je uvek prisutan.
   Manje elegantno, ali sirina stranice ostaje ista na svakoj stranici. */
@supports not (scrollbar-gutter:stable){
  html{overflow-y:scroll}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Atkinson Hyperlegible Next',system-ui,-apple-system,sans-serif;
  overflow-x:clip;   /* clip, ne hidden — ne pravi novi scroll kontejner */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* .doc = stranice sa zaglavljem i podnozjem u normalnom toku (blog, 404).
   Pocetna se NE oslanja na ovo — ona radi preko .slide sekcija. */
.doc{min-height:100svh;display:flex;flex-direction:column}
/* .doc-center = sadrzaj centriran po obe ose (404). Stoji kao <main>
   izmedju zaglavlja i podnozja, pa uzima svu preostalu visinu. */
.doc-center{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(4.5rem,9vh,7rem) clamp(1.4rem,6vw,6rem);
}
.doc-center .lede{margin-inline:auto}
.doc-center .btn{margin-top:2.4rem}
.error-title{max-width:16ch}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* =========================================================================
   3. TIPOGRAFIJA (zajednicka)
   ========================================================================= */
h1,h2,h3{font-weight:600;letter-spacing:-.018em}

.display{
  font-size:clamp(2.9rem,8.2vw,6.2rem);
  font-weight:700;letter-spacing:-.022em;
  line-height:1.02;
  text-wrap:balance;
}
.display em{font-style:normal;color:var(--accent);position:relative}
.mid{
  font-size:clamp(2.3rem,5.9vw,4.3rem);
  font-weight:700;letter-spacing:-.02em;
  line-height:1.06;
  text-wrap:balance;
}
.eyebrow{
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.6rem;display:block;
}
.lede{
  font-size:var(--fs-lg);line-height:1.55;
  color:var(--muted);max-width:46ch;margin-top:1.6rem;
}

/* =========================================================================
   4. SEKCIJE POCETNE STRANICE
   Obicna stranica: skroluje dokument, bez snap-a. Sekcije popunjavaju
   ekran, ali smeju i da narastu preko njega.
   ========================================================================= */
.slide{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(4.5rem,9vh,7rem) clamp(1.4rem,6vw,6rem) clamp(3.5rem,7vh,5rem);
  position:relative;
}
.tinted{background:var(--paper-2)}
/* sekcije bez grida/kartica — sve centrirano po obe ose */
.center{align-items:center;text-align:center}
.center .lede{margin-inline:auto}

/* ulazna animacija */
.anim{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.22,.75,.28,1),transform .8s cubic-bezier(.22,.75,.28,1);
}
.slide.live .anim{opacity:1;transform:none}
.slide.live .d1{transition-delay:.06s}
.slide.live .d2{transition-delay:.19s}
.slide.live .d3{transition-delay:.32s}
.slide.live .d4{transition-delay:.45s}
.slide.live .d5{transition-delay:.58s}

/* =========================================================================
   5. NAVIGACIJA — JEDNA ZA CEO SAJT
   Isti markup i isti razmaci na pocetnoj, 404 i svakoj blog stranici.
   Jedina razlika: na pocetnoj lebdi preko heroja (deo je prve sekcije,
   pa ne prati skrol); svuda drugde stoji u normalnom toku na vrhu.
   ========================================================================= */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:.7rem;
  padding:1.1rem clamp(1.4rem,6vw,6rem);
}
.slide .topbar{position:absolute;top:0;left:0;right:0;z-index:10}
.site-nav{display:flex;align-items:center;gap:clamp(.8rem,3vw,1.6rem)}

.brand{
  font-size:1.4rem;font-weight:700;letter-spacing:-.015em;
  text-decoration:none;color:var(--ink);flex:none;
}
/* brend koji "lebdi" gore levo — koristi 404 stranica */

.nav-link{
  font-size:var(--fs-sm);font-weight:500;text-decoration:none;color:var(--muted);
  transition:color .25s;
}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current="page"]{color:var(--ink)}

.top-cta{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--fs-sm);font-weight:500;text-decoration:none;
  border:1px solid var(--ink);padding:.55rem 1.2rem;border-radius:100px;
  color:var(--paper);background:var(--ink);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.top-cta:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.top-cta svg{width:15px;height:15px;flex:none;fill:currentColor}

/* =========================================================================
   6. DUGMAD
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--fs-sm);font-weight:500;text-decoration:none;
  padding:.92rem 1.7rem;border-radius:100px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--accent);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* =========================================================================
   7. HERO (pocetna)
   ========================================================================= */
/* --- traka sa uslugama ---------------------------------------------------
   Jedan red koji klizi ulevo, u krug, umesto prelomljenog teksta koji je na
   telefonu ispadao ukrivo. Traka je uza od ekrana i centrirana, pa 4 kopije
   sadrzaja uvek pokrivaju vidljivi deo i petlja nema rupu. */
.hero-tags{
  font-size:var(--fs-xs);
  letter-spacing:.13em;color:var(--muted);text-transform:uppercase;
  margin-bottom:2rem;
  width:min(100%,34rem);
  display:flex;
  overflow:hidden;
  /* meke ivice — tekst uplovljava i isplovljava umesto da se secka */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.tag-track{
  display:flex;flex:none;gap:1rem;padding-right:1rem;
  animation:tag-scroll 24s linear infinite;
}
.tag-track span::after{content:' /';color:var(--accent);margin-left:.9rem}
@keyframes tag-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
/* stane na prelazak misem i kad neko dodje tastaturom */
.hero-tags:hover .tag-track,
.hero-tags:focus-within .tag-track{animation-play-state:paused}
/* Staje i kad hero nije na ekranu — klasu postavlja IntersectionObserver.
   Mora POSLE :hover pravila, ista je specificnost pa pobedjuje redosled. */
.hero-tags.paused .tag-track{animation-play-state:paused}

/* Bez pokreta ako je korisnik tako podesio uredjaj. Tada se vracamo na
   staticnu verziju: jedna kopija, prelama se, svaki red centriran. */
@media(prefers-reduced-motion:reduce){
  .hero-tags{
    width:auto;max-width:100%;overflow:visible;
    -webkit-mask-image:none;mask-image:none;
  }
  .tag-track{
    animation:none;
    flex:1 1 auto;          /* mora da sme da se skupi, inace curi van ekrana */
    flex-wrap:wrap;justify-content:center;
    gap:.4rem 1rem;padding-right:0;
  }
  .tag-track ~ .tag-track{display:none}
  .tag-track span:last-child::after{content:''}
}

/* =========================================================================
   8. PORTFOLIO TRAKA (pocetna)
   ========================================================================= */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.rail-nav{display:flex;gap:.5rem}
.rail-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;font-size:var(--fs-md);
  display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.rail-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.rail{
  display:flex;gap:.9rem;margin-top:2.2rem;
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;
  /* prostor da se podignuta kartica i njena senka ne seku */
  padding:.6rem .2rem 1.1rem;margin-left:-.2rem;margin-right:-.2rem;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
/* male, guste kartice — sirina namerno ne deli kontejner na ceo broj,
   tako da sledeca kartica uvek delimicno "viri" kao znak da se skroluje */
.work{
  flex:0 0 min(72vw,270px);scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:1.1rem;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),
             box-shadow .3s cubic-bezier(.2,.8,.2,1),
             border-color .3s;
}
@media(min-width:560px){ .work{flex-basis:250px} }
@media(min-width:1000px){ .work{flex-basis:330px} }
.work:hover{
  transform:translateY(-4px);
  border-color:rgba(47,93,58,.4);
  box-shadow:0 10px 22px rgba(14,14,15,.08);
}
.work-shot{
  aspect-ratio:4/3;border-radius:7px;margin-bottom:.85rem;
  background:var(--paper-2);
  display:grid;place-items:center;
  overflow:hidden;pointer-events:none;
}
.work-shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;border-radius:inherit;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  -webkit-user-drag:none;
}
.work:hover .work-shot img{transform:scale(1.04)}
.work h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;margin-bottom:.2rem}
.work-svc{
  font-size:var(--fs-xs);
  letter-spacing:.05em;color:var(--muted);text-transform:uppercase;line-height:1.5;
}
.work p{
  font-size:var(--fs-sm);color:var(--muted);line-height:1.5;
  margin-top:.7rem;padding-top:.65rem;border-top:1px solid var(--line);
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.work-link{
  margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:var(--fs-xs);font-weight:600;color:var(--accent);
  text-decoration:none;display:inline-flex;gap:.3rem;
}
.work-link:hover{text-decoration:underline}

/* =========================================================================
   9. CITATI (pocetna)
   ========================================================================= */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;margin-top:2.4rem}
.quote{border-left:2px solid var(--accent);padding:.3rem 0 .3rem 1.3rem}
.quote p{
  font-size:clamp(1.15rem,1.9vw,1.42rem);
  font-weight:500;letter-spacing:-.02em;line-height:1.4;
}
.quote cite{
  display:block;margin-top:.9rem;font-style:normal;
  font-size:var(--fs-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

/* =========================================================================
   10. USLUGE (pocetna)
   ========================================================================= */
.svcs{margin-top:2.4rem;border-top:1px solid var(--line)}
.svc{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(.8rem,3vw,2.5rem);align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.svc:hover{padding-left:.9rem}
.svc-n{font-size:var(--fs-xs);font-weight:500;color:var(--accent)}
.svc h3{font-size:clamp(1.5rem,3.1vw,2.15rem);font-weight:700;letter-spacing:-.03em}
/* usluge dele isti pasus-stil kao uvodni tekst (.lede) */
.svc .lede{font-size:var(--fs-md);margin-top:0;max-width:none}
@media(max-width:720px){
  .svc{grid-template-columns:2rem 1fr;gap:.5rem 1rem}
  .svc p{grid-column:2}
}

/* =========================================================================
   11. CENE (pocetna)
   ========================================================================= */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.1rem;margin-top:2.2rem}
.plan{
  border:1px solid var(--line);border-radius:14px;padding:1.7rem 1.5rem;
  display:flex;flex-direction:column;transition:border-color .3s,transform .3s;
}
.plan:hover{border-color:rgba(47,93,58,.42);transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,14,15,.08)}
.plan-name{
  font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.plan-price{font-size:3.4rem;font-weight:700;letter-spacing:-.04em;line-height:1;margin:.7rem 0 .5rem}
.plan .lede{margin-top:0;max-width:none}
.plan ul{list-style:none;margin:1.3rem 0;display:grid;gap:.5rem}
.plan li{font-size:var(--fs-md);display:flex;gap:.6rem;align-items:baseline;color:var(--muted)}
.plan li::before{content:'✓';color:var(--accent);flex:none}
.plan .btn{margin-top:auto;justify-content:center}

/* =========================================================================
   12. KONTAKT I PODNOZJE
   ========================================================================= */
.status{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.4rem;
}
.pulse{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.channels{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:2.4rem}
.chan{
  font-size:var(--fs-md);font-weight:500;text-decoration:none;
  color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);border-radius:100px;padding:.78rem 1.5rem;
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.chan:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
/* Podaci firme. Stoje samo u .site-footer, na svakoj stranici. */
.legal{
  font-size:var(--fs-xs);
  letter-spacing:.06em;color:var(--muted);
  display:flex;flex-direction:column;gap:.4rem;
}

.scroll-hint{
  position:fixed;right:clamp(1.4rem,6vw,6rem);bottom:1.6rem;z-index:70;
  font-size:var(--fs-xs);letter-spacing:.16em;
  color:var(--muted);animation:bob 2.4s ease-in-out infinite;transition:opacity .5s;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.scroll-hint.gone{opacity:0;pointer-events:none}

/* =========================================================================
   13. BLOG — kontejner, mrvice, lista, tekst posta
   ========================================================================= */

/* Tacno isti bocni razmak kao .slide i .topbar — tako se navigacija,
   sadrzaj i podnozje poravnavaju na svakoj stranici sajta.
   Namerno BEZ max-width: pocetna ga nema, pa ga nema ni blog. Tekst
   ostaje citljiv jer .prose, .post-desc i .lede imaju svoju meru. */
.wrap{
  width:100%;
  padding-inline:clamp(1.4rem,6vw,6rem);
}

/* mrvice — separator prati .hero-tags sa pocetne */
.crumbs{
  /* Podignuto sa .68rem: verzal sa razmakom je citljiv u monospace fontu,
     a posle prelaska na Atkinson je na toj velicini postao pretezak. */
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.crumbs li+li::before{content:'/';color:var(--accent);margin-right:.45rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink)}

.page{flex:1;padding-block:clamp(2.2rem,5vh,3.4rem) clamp(3.5rem,8vh,5.5rem)}

/* --- kolona teksta na stranici posta -------------------------------------
   Tekst OSTAJE poravnat levo, centrira se cela kolona. Bez ovoga se merena
   sirina reda lepila uz levu ivicu ekrana, pa je na sirokom monitoru sav
   prazan prostor bio sa desne strane.
   Navigacija i podnozje ostaju puni po sirini — ovo vazi samo za <main>. */
.page-article .wrap{max-width:47.5rem;margin-inline:auto}
.page-article .prose{max-width:none}   /* kolona je vec mera; ne suzavaj dvaput */
/* Mera se postavlja na SAM naslov, ne na omotac. Jedinica ch racuna se
   prema font-size elementa na kom stoji, pa je max-width na omotacu (koji
   ima 1rem) pravio kutiju od ~280px u koju je bio stisnut naslov od 4.3rem. */
.page-head{margin-top:1.8rem;text-align:center}
.page-head .mid{max-width:20ch;margin-inline:auto}
.page-head .lede{max-width:56ch;margin-inline:auto}

/* --- lista postova ---
   .post-group je vec sada <section> da bi grupisanje po temama kasnije
   samo dodalo <h2 class="group-title"> unutar njega. Stilovi se vezuju za
   KLASE, ne za tagove, pa kad naslovi postova pređu iz h2 u h3 (zbog tema
   iznad njih) nista se u CSS-u ne dira. */
/* Lista na /blog je centrirana i drzana u citljivoj koloni, pa linije koje
   razdvajaju postove prate sirinu teksta umesto da seku ceo ekran.
   Namerno na .post-group, a ne na .post-list: srodni postovi na dnu clanka
   koriste istu .post-list, a oni treba da ostanu levo, uz sam clanak. */
.post-group{margin-top:2.8rem;text-align:center}
.group-title{
  font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:700;letter-spacing:-.02em;
  padding-bottom:.7rem;margin-bottom:.2rem;
}
.post-list{list-style:none}
.post-group .post-list{max-width:88ch;margin-inline:auto}
.post-item{border-top:1px solid var(--line);padding:1.15rem 0}
.post-list > .post-item:last-child{border-bottom:1px solid var(--line)}
.post-title{
  font-size:clamp(1.3rem,2.7vw,1.9rem);
  font-weight:700;letter-spacing:-.018em;line-height:1.15;text-wrap:balance;
}
.post-title a{color:var(--ink);text-decoration:none}
.post-title a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.post-date{
  display:block;margin-top:.55rem;
  font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.post-desc{margin-top:.65rem;font-size:var(--fs-md);line-height:1.55;color:var(--muted);max-width:62ch}
/* Opis ide do pune sirine liste. Na uzoj meri je padao u tri reda, gde je
   treci bio patrljak od par reci; na punoj sirini staje u dva puna reda. */
.post-group .post-desc{max-width:none}
/* Dugme "Read" — ista porodica kao Message me, samo manje, za listu. */
.post-btn{margin-top:1.1rem;font-size:var(--fs-sm);padding:.55rem 1.35rem}
.empty-state{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:2.4rem 0;color:var(--muted);font-size:var(--fs-md);line-height:1.55;max-width:56ch;
}
.empty-state a{color:var(--accent)}

/* --- zaglavlje posta --- */
.article-head{margin-top:1.8rem;padding-bottom:1.8rem;border-bottom:1px solid var(--line)}
.article-title{
  font-size:clamp(2rem,4.6vw,3.3rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.08;
  text-wrap:balance;max-width:22ch;
}
/* Datum, kategorija i autor. Naziv polja je prigusen i verzalom, vrednost
   normalnim slovima — inace bi "NENAD MILUNOV" vikao iz zaglavlja. */
.article-meta{
  margin-top:1.1rem;
  /* Uvek jedno ispod drugog, na svakoj sirini. U jednom redu se nije
     pouzdano uklapalo u kolonu od 44rem, pa se prelamalo 2+1. */
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  font-size:var(--fs-sm);letter-spacing:.04em;color:var(--ink);
}
/* Razmak posle dve tacke je pravi razmak u tekstu, ne margina — tako
   ostaje i kad se meta linija kopira ili procita bez stila. */
.meta-label{
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.14em;
}

/* --- tekst posta ---
   Merena sirina reda (~68ch) je jedino sto dugacak tekst stvarno trazi,
   a pocetna stranica nema nista slicno. */
.prose{
  max-width:68ch;
  /* 1.375rem = 22px. Sa kolonom od 760px daje 73 znaka po redu, sto je u
     preporucenom opsegu 60-75. Ranije: 17px u koloni od 904px = 114. */
  font-size:var(--fs-xl);line-height:1.7;color:var(--ink);
  margin-top:2.2rem;
}
/* Razmak izmedju pasusa mora biti osetno veci od razmaka izmedju redova
   (0.7em praznog), inace se pasusi ne citaju kao zasebne celine. */
.prose > * + *{margin-top:1.4em}
/* Velicine su podignute uz tekst. Sa tekstom na 22px stari h3 (21.6px)
   bio bi SITNIJI od pasusa, pa hijerarhija ne bi postojala. */
.prose h2{
  font-size:clamp(1.75rem,3.2vw,2.25rem);font-weight:700;letter-spacing:-.015em;
  line-height:1.2;margin-top:2em;
}
.prose h3{
  font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:700;letter-spacing:-.012em;
  line-height:1.25;margin-top:1.8em;
}
.prose h2 + *, .prose h3 + *{margin-top:.8em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:.22em}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:700}
.prose ul,.prose ol{padding-left:1.35em}
.prose li + li{margin-top:.55em}
.prose blockquote{
  border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.3rem;
  font-size:1.05em;font-weight:500;line-height:1.55;
}
.prose code{
  /* Sistemski monospace: kod trazi poravnate kolone, a ovo
     ne skida nijedan fajl, pa sajt i dalje nosi samo jedan font. */
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;
  background:var(--paper-2);padding:.15em .4em;border-radius:5px;
}
.prose pre{
  background:var(--paper-2);padding:1.1rem 1.2rem;border-radius:10px;
  overflow-x:auto;font-size:var(--fs-sm);line-height:1.6;
}
.prose pre code{background:none;padding:0;font-size:1em}
.prose img{max-width:100%;height:auto;display:block;border-radius:10px}
.prose figure figcaption{margin-top:.7rem;font-size:var(--fs-md);color:var(--muted);line-height:1.5}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}

/* --- dno posta --- */
.article-foot{margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.back-link{
  font-size:var(--fs-sm);font-weight:600;color:var(--accent);
  text-decoration:none;display:inline-flex;gap:.35rem;
}
.back-link:hover{text-decoration:underline}
.related{margin-top:3.2rem}
.related-title{
  font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:700;letter-spacing:-.02em;
  margin-bottom:.2rem;
}

/* --- PODNOZJE — JEDNO ZA CEO SAJT ---------------------------------------
   Isti markup na pocetnoj, 404 i svakoj blog stranici. Stoji iza </main>,
   nikad unutar sekcije. */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:2.2rem;
  background:var(--paper-2);
}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:flex-start;
}
.footer-links{display:flex;flex-wrap:wrap;gap:1.1rem}
.footer-links a{
  font-size:var(--fs-xs);
  letter-spacing:.06em;color:var(--muted);text-decoration:none;
  transition:color .25s;
}
.footer-links a:hover{color:var(--ink);text-decoration:underline}

/* =========================================================================
   14. USKI EKRANI
   ========================================================================= */
@media(max-width:820px){
  .brand{font-size:1.25rem}
  .top-cta{font-size:var(--fs-xs);padding:.48rem 1.05rem}
}

@media(max-width:560px){
  /* Telefon se tretira kao zaseban raspored, ne kao umanjeni desktop.
     Sekcija vise ne mora da popuni ceo ekran: 88svh ostavlja da se vidi
     da ispod ima jos sadrzaja, umesto da svaka sekcija bude tacno ekran. */
  .slide{
    min-height:88svh;
    padding-top:clamp(2.8rem,7vh,4.2rem);
    padding-bottom:clamp(2.4rem,6vh,3.6rem);
  }
  /* Naslov je na telefonu isao u 5 redova i pojeo ceo prvi ekran.
     10vw sa gornjom granicom 2.5rem daje 3 reda na svemu od 360px navise:
     "Good businesses / shouldn't struggle / to find customers." */
  /* Cela lestvica naslova se smanjuje ZAJEDNO, da odnosi izmedju nivoa
     ostanu isti kao na desktopu (~1.4x izmedju susednih). Da smo smanjili
     samo .display, hero i naslov sekcije bi na telefonu bili skoro iste
     velicine i razlika izmedju "izjave" i "naslova sekcije" bi nestala. */
  .display{
    font-size:clamp(1.9rem,10vw,2.5rem);
    line-height:1;letter-spacing:-.03em;
  }
  .mid{font-size:clamp(1.55rem,7vw,1.85rem);line-height:1.08}
  .article-title{font-size:clamp(1.6rem,7.6vw,2rem);line-height:1.12}
  .prose h2{font-size:clamp(1.25rem,5.4vw,1.5rem)}
  .prose h3{font-size:clamp(1.05rem,4vw,1.2rem)}
  .eyebrow{margin-bottom:.8rem}
  .lede{font-size:var(--fs-md);margin-top:.9rem;line-height:1.5}

  .hero-tags{margin-bottom:1rem;font-size:var(--fs-xs)}
  .tag-track{gap:.7rem;padding-right:.7rem}
  .btn{padding:.72rem 1.4rem}

  .rail{margin-top:1.5rem}

  /* citati -> horizontalna traka */
  .quotes{
    display:flex;gap:.9rem;margin-top:1.6rem;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:.5rem;
    -webkit-overflow-scrolling:touch;
  }
  .quotes::-webkit-scrollbar{display:none}
  .quote{
    flex:0 0 min(80vw,300px);scroll-snap-align:start;
    display:flex;flex-direction:column;justify-content:center;
  }
  .quote p{font-size:var(--fs-lg);line-height:1.35}
  .quote cite{margin-top:.7rem}

  .svcs{margin-top:1.5rem}
  .svc{padding:.95rem 0}

  /* planovi -> horizontalna traka */
  .plans{
    display:flex;gap:.9rem;margin-top:1.6rem;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:.5rem;
    -webkit-overflow-scrolling:touch;
  }
  .plans::-webkit-scrollbar{display:none}
  .plan{
    flex:0 0 min(84vw,320px);scroll-snap-align:start;
    padding:1.25rem 1.15rem;
  }
  .plan-price{font-size:2.6rem;margin:.5rem 0 .4rem}
  .plan ul{margin:.9rem 0;gap:.35rem}
  .plan li{font-size:var(--fs-sm)}

  .channels{margin-top:1.6rem;gap:.45rem}
  .chan{padding:.62rem 1.15rem;font-size:var(--fs-sm)}
  .legal{font-size:var(--fs-xs)}

  /* blog */
  .site-nav{gap:.8rem}
  .nav-link{font-size:var(--fs-xs)}
  .page-head{margin-top:1.3rem}
  .post-item{padding:.95rem 0}
  .prose{font-size:var(--fs-lg);margin-top:1.8rem}   /* 17.6px na telefonu */
}

@media(max-width:390px){
  /* Naslovi se vise ne diraju ovde. Pravila iz 560px bloka su vec u vw,
     pa sama prate sirinu i ispod 390px. Dupli propis bi ih samo uvecao. */
  .quote p{font-size:var(--fs-md)}
  .plan-price{font-size:2.3rem}
}

@media(max-width:380px){
  .brand{font-size:var(--fs-lg)}
  .top-cta{font-size:var(--fs-xs);padding:.42rem .85rem}
  /* na najuzim ekranima CTA gubi tekst, ostaje ikonica */
  .top-cta span{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .anim{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   TRAKA ZA PRISTANAK
   Prikazuje je /script/consent.js, i to samo dok posetilac ne odluci.
   ========================================================================= */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.consent-inner{
  width:100%;
  padding:1.1rem clamp(1.4rem,6vw,6rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem 1.6rem;
}
.consent-text{
  font-size:var(--fs-sm);line-height:1.5;color:var(--muted);
  max-width:62ch;margin:0;
}
.consent-text a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em}
.consent-actions{display:flex;gap:.6rem;flex:none}
.consent .btn{font-size:var(--fs-sm);padding:.6rem 1.4rem}
/* Oba dugmeta izgledaju IDENTICNO. Naglaseno "Accept" pored blede odbijalice
   je mracni obrazac i regulatori ga tretiraju kao nevazeci pristanak. */
.consent-btn{
  border:1px solid var(--ink);color:var(--ink);background:none;
  cursor:pointer;font-family:inherit;
}
.consent-btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}

/* Nagovestaj za skrol stoji u istom uglu — dok je traka gore, sklanja se. */
.has-consent .scroll-hint{display:none}

@media(max-width:560px){
  .consent-inner{
    flex-direction:column;align-items:stretch;
    padding:1rem clamp(1.4rem,6vw,6rem);
  }
  .consent-actions{justify-content:stretch}
  .consent .btn{flex:1;justify-content:center}
}

/* Dugme na /privacy kojim se odluka menja. Povlacenje pristanka mora da
   bude jednako lako kao i davanje — to trazi GDPR. */
.consent-reset{
  margin-top:.4rem;
  font:inherit;font-size:var(--fs-sm);
  color:var(--accent);background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:.22em;cursor:pointer;
}
.consent-reset:hover{color:var(--ink)}

/* =========================================================================
   O AUTORU — blok ispod svakog blog posta
   Stoji unutar <article>, posle teksta a pre navigacije nazad.
   ========================================================================= */
.author{
  margin-top:3rem;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.6rem;
  display:flex;gap:1.4rem;align-items:flex-start;
}
.author-photo{
  width:88px;height:88px;flex:none;
  border-radius:50%;object-fit:cover;
  background:var(--paper);
}
.author-body{min-width:0}
.author-name{
  font-size:var(--fs-lg);font-weight:700;letter-spacing:-.015em;
  line-height:1.2;color:var(--ink);
}
.author-role{
  margin-top:.2rem;
  font-size:var(--fs-sm);color:var(--muted);
}
.author-bio{
  margin-top:.9rem;
  font-size:var(--fs-md);line-height:1.6;color:var(--muted);
}
.author-cta{
  margin-top:1.2rem;
  font-size:var(--fs-md);font-weight:700;color:var(--ink);
}
.author .btn{margin-top:.7rem;font-size:var(--fs-sm);padding:.6rem 1.3rem}
.author .btn svg{width:15px;height:15px;flex:none;fill:currentColor}

@media(max-width:560px){
  .author{flex-direction:column;align-items:center;text-align:center;padding:1.4rem}
  .author-bio{text-align:left}
}