/* ============================================================
   Zeus Agency — čist stylesheet
   Stil: velika tipografija, puno praznine, zrno teksture, mrak
   ============================================================ */

/* ---------- 1. Varijable ---------- */
:root{
  --bg:#05060b;
  --bg-alt:#080910;
  --surface:#0c0e18;
  --surface-2:#11131f;
  --border:rgba(232,185,58,.14);
  --border-soft:rgba(255,255,255,.07);
  --text:#eceaf3;
  --muted:#8f8ea6;
  --accent:#e8b93a;
  --accent-lt:#f6d875;
  --accent-dim:rgba(232,185,58,.12);

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pad:clamp(1.25rem,5vw,5.5rem);
  --max:1280px;
  --r:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--accent);color:#000;padding:.75rem 1.25rem;font-weight:600;
}
.skip:focus{left:1rem;top:1rem}

/* ---------- 3. Zrno teksture (fiksni overlay) ---------- */
.grain{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
  opacity:.035;
  mix-blend-mode:overlay;
}

/* ---------- 4. Navigacija ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem var(--pad);
  background:transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(5,6,11,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--border-soft);
}
.brand,.footer-brand{
  display:flex;align-items:center;gap:.55rem;
  font-weight:800;letter-spacing:-.02em;font-size:1.05rem;
}
/* Brand mark — kružni medaljon (img/zeus-mark.png).
   Medaljon već nosi vlastiti zlatni prsten, pa vanjski obrub i podloga
   više ne trebaju: border-radius mora pratiti krug, a object-fit:cover bi
   medaljon izrezao u kvadrat. 32->36px + mekši sjaj drže marku čitljivom
   u zaglavlju i podnožju bez da postane dominantna. */
.brand-mark{
  width:36px;height:36px;flex:none;
  object-fit:contain;border-radius:50%;
  background:transparent;border:0;
  transition:transform .3s var(--ease),filter .3s var(--ease);
  box-shadow:0 0 0 1px rgba(232,185,58,.30),
             0 0 16px rgba(232,185,58,.30),
             0 2px 8px rgba(0,0,0,.55);
}
.brand:hover .brand-mark,.footer-brand:hover .brand-mark{
  transform:scale(1.07);
  filter:brightness(1.14) saturate(1.06);
  box-shadow:0 0 0 1px rgba(232,185,58,.58),
             0 0 26px rgba(232,185,58,.58),
             0 3px 12px rgba(0,0,0,.6);
}
.brand em,.footer-brand em{font-style:normal;color:var(--muted);font-weight:500}
.nav-links{display:flex;gap:1.75rem;font-size:.9rem;color:var(--muted)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-4px;height:1px;width:0;
  background:var(--accent);transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
/* Aktivna sekcija — klasa, ne inline stil, da :hover i dalje radi. */
.nav-links a.is-active{color:var(--accent)}
.nav-links a.is-active::after{width:100%}

/* ---------- 5. Dugmad ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 1.9rem;border-radius:100px;
  background:var(--accent);color:#0a0a0a;
  font-weight:650;font-size:.95rem;letter-spacing:-.01em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;
  box-shadow:0 4px 24px rgba(232,185,58,.22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(232,185,58,.34);background:var(--accent-lt)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.6rem 1.25rem;font-size:.875rem}
.btn-ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--border);box-shadow:none;
}
.btn-ghost:hover{background:var(--accent-dim);border-color:var(--accent);box-shadow:none;color:var(--accent-lt)}
.btn-block{display:flex;width:100%}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:9rem var(--pad) 3rem;
  max-width:var(--max);margin:0 auto;
}
.hero::before{
  content:'';position:absolute;z-index:-1;
  width:min(900px,120vw);aspect-ratio:1;top:-18%;right:-22%;
  background:radial-gradient(circle,rgba(232,185,58,.11),transparent 62%);
  filter:blur(28px);animation:drift 22s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-4%,6%) scale(1.08)}
}
/* Zeus portret — desna strana heroja, tekst ostaje lijevo.
   Alfa se izvlači iz same datoteke po TOPLINI boje (pozadina je neutralna,
   lik je topao), pa je rub stvarni a ne prijelaz. Luminarita membrana ovdje
   nije radila: sjena profila lica (L≈45) ima istu svjetlinu kao pozadina
   (L≈38) — zato je prijašnji portret završio kao tamna mrlja.
   CSS maska ovdje samo pere najudalji rub; stara (66%/96%) je režala kosu. */
.hero-mark{
  position:absolute;z-index:1;
  right:1%;top:50%;bottom:auto;
  transform:translateY(-46%);
  width:clamp(230px,25vw,400px);height:auto;
  opacity:.96;pointer-events:none;
  filter:drop-shadow(0 0 62px rgba(232,185,58,.20))
         drop-shadow(0 20px 44px rgba(0,0,0,.55));
  -webkit-mask-image:radial-gradient(112% 116% at 50% 44%,#000 80%,rgba(0,0,0,.55) 93%,transparent 100%);
          mask-image:radial-gradient(112% 116% at 50% 44%,#000 80%,rgba(0,0,0,.55) 93%,transparent 100%);
}
/* tekst heroja mora biti iznad portreta */
.hero-eyebrow,.hero-title,.hero-sub,.hero-cta,.marquee{position:relative;z-index:2}
.hero-eyebrow{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:2rem;font-weight:600;
}
.hero-title{
  font-size:clamp(3.2rem,12.5vw,10.5rem);
  line-height:.86;letter-spacing:-.045em;font-weight:850;
  margin-bottom:2.25rem;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(236,234,243,.42);
}
.accent{color:var(--accent);-webkit-text-stroke:0}
.hero-sub{
  max-width:47ch;font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--muted);margin-bottom:2.5rem;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- 7. Traka (marquee) ---------- */
.marquee{
  margin:5rem calc(var(--pad) * -1) 0;padding:1.1rem 0;
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
  overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:inline-flex;gap:3.5rem;animation:slide 34s linear infinite;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.marquee-track span{display:inline-flex;align-items:center;gap:3.5rem}
.marquee-track span::after{content:'◆';color:var(--accent);font-size:.6rem;letter-spacing:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 8. Sekcije ---------- */
.section{position:relative;z-index:2;padding:clamp(5rem,12vh,9rem) var(--pad)}
.section-alt{background:var(--bg-alt)}
.section > *{max-width:var(--max);margin-inline:auto}
.section-head{margin-bottom:clamp(3rem,6vw,5rem)}
.kicker{
  display:inline-block;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;font-weight:600;
}
.section-head h2{
  font-size:clamp(2.4rem,7vw,5.25rem);line-height:.94;
  letter-spacing:-.04em;font-weight:800;margin-bottom:1.25rem;
}
.lead{max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem)}

/* ---------- 9. Kartice usluga ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.card{
  padding:2.25rem 1.85rem;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:transform .45s var(--ease),border-color .45s,background .45s;
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(232,185,58,.09),transparent 62%);
  transition:opacity .4s;
}
.card:hover{transform:translateY(-5px);border-color:var(--border);background:var(--surface-2)}
.card:hover::before{opacity:1}
.card-icon{
  width:34px;height:34px;margin-bottom:1.4rem;
  fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.card h3{font-size:1.28rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.7rem}
.card p{color:var(--muted);font-size:.96rem}

/* ---------- 10. Proces ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem}
.step{padding-top:1.75rem;border-top:1px solid var(--border-soft);position:relative}
.step::before{
  content:'';position:absolute;top:-1px;left:0;width:0;height:1px;
  background:var(--accent);transition:width .8s var(--ease);
}
.step.in::before{width:100%}
.step-num{
  display:block;font-size:.75rem;letter-spacing:.2em;
  color:var(--accent);font-weight:700;margin-bottom:1rem;
}
.step h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.55rem}
.step p{color:var(--muted);font-size:.95rem}

/* ---------- 11. Projekti ---------- */
.work{display:grid;gap:1.25rem}
.work-item{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--border-soft);
  transition:border-color .45s,transform .45s var(--ease);
}
.work-item:hover{border-color:var(--border);transform:translateY(-4px)}
.work-item:nth-child(even){grid-template-columns:1fr 1.15fr}
.work-item:nth-child(even) .work-media{order:2}
.work-media{margin:0;background:var(--bg-alt);overflow:hidden}
.work-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .8s var(--ease)}
.work-item:hover .work-media img{transform:scale(1.05)}
.work-body{padding:clamp(1.85rem,4vw,3.25rem);display:flex;flex-direction:column;justify-content:center}
.work-body h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:750;letter-spacing:-.03em;margin:.6rem 0 .85rem}
.work-body p{color:var(--muted);font-size:1rem}
.tag{
  display:inline-block;align-self:flex-start;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-dim);
  padding:.35rem .8rem;border-radius:100px;font-weight:650;
}
.voice-note{
  margin-top:1.25rem;padding:clamp(1.75rem,4vw,2.75rem);
  display:flex;gap:1.75rem;align-items:flex-start;flex-wrap:wrap;
  border-radius:var(--r);
  border:1px dashed var(--border);background:var(--accent-dim);
}
.voice-note-icon svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round}
.voice-note h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:.6rem 0 .5rem}
.voice-note p{color:var(--muted);max-width:62ch}

/* ---------- 12. Cijene ---------- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem;align-items:start}
.plan{
  padding:2.25rem 1.9rem;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-soft);
  display:flex;flex-direction:column;position:relative;
  transition:transform .45s var(--ease),border-color .45s;
}
.plan:hover{transform:translateY(-4px);border-color:var(--border)}
.plan-featured{
  border-color:var(--accent);
  background:linear-gradient(180deg,rgba(232,185,58,.08),var(--surface) 45%);
}
.plan-badge{
  position:absolute;top:-11px;left:1.9rem;
  background:var(--accent);color:#0a0a0a;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .75rem;border-radius:100px;
}
.plan-name{font-size:1.4rem;font-weight:750;letter-spacing:-.02em}
.plan-for{color:var(--muted);font-size:.92rem;margin-top:.4rem;min-height:2.6em}
.price{display:flex;align-items:baseline;gap:.15rem;margin:1.5rem 0 1.85rem}
.price .amount{font-size:3.4rem;font-weight:850;letter-spacing:-.05em;line-height:1}
.price .cur{font-size:1.7rem;font-weight:700;color:var(--accent);align-self:flex-start;margin-top:.35rem}
.price .per{color:var(--muted);font-size:1rem;margin-left:.3rem}
.plan-list{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;flex:1}
.plan-list li{position:relative;padding-left:1.65rem;font-size:.95rem;color:var(--muted)}
.plan-list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(232,185,58,.6);
}
.pricing-foot{margin-top:2.5rem;color:var(--muted);font-size:.97rem;max-width:60ch}
.pricing-foot a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- 13. Tim ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem}
.person{text-align:center;padding:2.25rem 1.25rem;border-radius:var(--r);transition:background .4s}
.person:hover{background:var(--surface)}
.person-avatar{
  width:96px;height:96px;margin:0 auto 1.4rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);
}
.person-avatar svg{width:56px;height:56px;fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.person:hover .person-avatar svg{stroke:var(--accent)}
.person h3{font-size:1.12rem;font-weight:700;letter-spacing:-.015em}
.person p{color:var(--muted);font-size:.9rem;margin-top:.3rem}

/* ---------- 14. Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.form{
  display:flex;flex-direction:column;gap:1.15rem;
  padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-soft);
}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.97rem;color:var(--text);
  background:var(--bg-alt);border:1px solid var(--border-soft);
  border-radius:11px;padding:.9rem 1.05rem;
  transition:border-color .25s,background .25s;
  width:100%;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface-2);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#c0392b}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-msg{min-height:1.4em;font-size:.92rem;font-weight:550}
.form-msg.ok{color:#4ade80}
.form-msg.err{color:#f87171}
.contact-aside{padding-top:.5rem}
.contact-aside h3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.35rem}
.aside-steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:1.15rem}
.aside-steps li{counter-increment:s;position:relative;padding-left:2.6rem;color:var(--muted);font-size:.97rem}
.aside-steps li::before{
  content:counter(s);position:absolute;left:0;top:-.1rem;
  width:1.75rem;height:1.75rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-dim);color:var(--accent);
  font-size:.8rem;font-weight:700;
}
.aside-note{
  margin-top:2rem;padding:1.25rem;border-left:2px solid var(--accent);
  background:var(--accent-dim);border-radius:0 10px 10px 0;
  color:var(--muted);font-size:.92rem;
}

/* ---------- 15. Podnožje ---------- */
.footer{
  position:relative;z-index:2;
  padding:clamp(3rem,6vw,4.5rem) var(--pad) 2.5rem;
  border-top:1px solid var(--border-soft);background:var(--bg);
}
.footer > *{max-width:var(--max);margin-inline:auto}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.footer-links{display:flex;gap:1.75rem;font-size:.9rem;color:var(--muted);flex-wrap:wrap}
.footer-links a{transition:color .25s}
.footer-links a:hover{color:var(--accent)}
.footer-copy{color:var(--muted);font-size:.85rem;opacity:.75}

/* ---------- 16. Dugme "nazad na vrh" ---------- */
.to-top{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:90;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#0a0a0a;
  box-shadow:0 6px 26px rgba(232,185,58,.3);
  transition:transform .3s var(--ease),opacity .3s;
}
.to-top:hover{transform:translateY(-3px)}
/* display:grid iznad zaobilazi UA [hidden]{display:none} — bez ovoga se dugme vidi na vrhu */
.to-top[hidden]{display:none}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 17. Reveal animacija ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* bez JS-a sadržaj mora ostati vidljiv */
.no-js .reveal{opacity:1;transform:none}

/* ---------- 18. Responsivnost ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  /* portret se krije: hero na tabletu već ima puno teksta, a mark ostaje u zaglavlju */
  .hero-mark{display:none}
  .work-item,.work-item:nth-child(even){grid-template-columns:1fr}
  .work-item:nth-child(even) .work-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .hero-title{font-size:clamp(3rem,15vw,6rem)}
}
@media (max-width:560px){
  .hero{min-height:auto;padding-top:8rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .plan{padding:1.85rem 1.4rem}
  .price .amount{font-size:2.9rem}
}

/* ---------- 19. Poštovanje preferencija kretanja ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  .grain{display:none}
}

/* ---------- 20. Print ---------- */
@media print{
  .grain,.nav,.to-top,.marquee,.hero::before{display:none !important}
  body{background:#fff;color:#000}
  .reveal{opacity:1;transform:none}
}

/* ── 404 (.nf) ──────────────────────────────────────────────────────────
   Izvučeno iz inline <style> bloka u 404.html 03.10. — razlog je CSP:
   style-src više ne potrebuje 'unsafe-inline' jer više nema inline stila. */
.nf{min-height:100svh;display:grid;place-content:center;text-align:center;padding:6rem var(--pad);position:relative;z-index:2}
.nf h1{font-size:clamp(4rem,22vw,14rem);line-height:.85;letter-spacing:-.05em;font-weight:850;color:transparent;-webkit-text-stroke:1.5px rgba(236,234,243,.35)}
.nf p{color:var(--muted);max-width:42ch;margin:1.5rem auto 2.5rem;font-size:1.05rem}
.nf .btn{display:inline-flex}

/* ─── PARTNERI (dodano 03.10. — Protos Web) ─────────────────────────────
   Dizajn preuzet iz postojećeg sistema (.work-item / .tag / .btn), da
   sekcija ne izgleda kao ubačen klin nego kao dio sajta. */
.partners{display:grid;gap:1.25rem}
.partner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1.1rem,3vw,2rem);
  padding:clamp(1.4rem,3vw,2.25rem);
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);
  transition:border-color .45s,transform .45s var(--ease),background .45s;
}
.partner:hover{border-color:var(--border);transform:translateY(-3px);background:var(--bg-alt)}
.partner-logo{
  width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px);
  border-radius:16px;object-fit:cover;border:1px solid var(--border-soft);
}
.partner-body{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.partner-name{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:750;letter-spacing:-.02em}
.partner-desc{color:var(--muted);font-size:.97rem;max-width:56ch}
.partner-cta{
  white-space:nowrap;font-size:.85rem;color:var(--accent);
  border:1px solid var(--border-soft);border-radius:100px;padding:.5rem .95rem;
}
.partner:hover .partner-cta{border-color:var(--accent)}

/* Naslov projekta koji vodi na stvarnu stranicu */
.work-link{color:inherit;text-decoration:none;transition:color .3s}
.work-link:hover{color:var(--accent)}
.work-cta-row{margin-top:1.35rem}
.work-cta-row .btn{text-decoration:none}

@media (max-width:640px){
  .partner{grid-template-columns:auto 1fr;gap:1.1rem}
  .partner-cta{grid-column:1/-1;justify-self:start;white-space:normal}
}

/* ============================================================
   Zeus Agency — vizualna nadogradnja
   ============================================================ */

/* ---------- 6b. Canvas FX sloj ----------
   canvas ide z-index:0, a tekst heroja nosi z-index:2, pa je
   sloj uvijek ispod slova. Nije klikabilan. */
.hero-fx{
  position:absolute;inset:0;z-index:0;
  display:block;pointer-events:none;
}

/* ---------- 6c. Simboli Zeusa (pečati) ----------
   Sekcija vec stvara kontekst sloga (position:relative;z-index:2),
   pa z-index:-1 svrstava pečat IZNAD pozadine, a ISPOD sadrzaja.
   Zato nijedno postojece pravilo za djecu sekcije nije dirano. */
.seal{
  position:absolute;z-index:-1;pointer-events:none;
  top:50%;width:var(--sz,clamp(240px,30vw,430px));
  aspect-ratio:1;max-width:none;margin-inline:0;
  transform:translateY(-50%);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:var(--op,.16);
}
/* Uz zaglavlje sekcije: tamo je praznina, pa pečat ne završi iza kartica
   i ne izgleda kao artefakt stiskanja. */
.seal-head{top:11%;--sz:clamp(200px,22vw,290px)}
.seal-a{background-image:url('../img/zeus-seal.png')}
.seal-b{background-image:url('../img/zeus-seal-alt.png')}
.seal-right{right:calc(var(--pad) * -.35)}
.seal-left{left:calc(var(--pad) * -.35)}
/* fx.js postavi --py; pečat se tiho pomakne i dobije dubinu. */
.seal[data-parallax]{transform:translateY(calc(-50% + var(--py,0px)))}

/* ---------- 15b. Medaljon u podnozju ---------- */
.footer-seal{
  width:clamp(64px,7vw,96px);height:auto;flex:none;opacity:.9;
  filter:drop-shadow(0 6px 22px rgba(232,185,58,.28));
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.footer-brand:hover .footer-seal{opacity:1;transform:translateY(-2px) rotate(-4deg)}

@media (max-width:900px){
  .seal{display:none}
}

/* ---------- 6d. Mala pečat-brtvica u hero-ju ----------
   "Mali logo gore desno": lezi preko gornjeg desnog ugla portreta,
   kao voskavi pečat na antiknoj ploči. Iznad portreta (z-index:2). */
.hero-seal{
  position:absolute;z-index:2;pointer-events:none;
  right:1%;
  /* Sidro identno portretu (.hero-mark), pa pečat prati položaj na svakoj širini. */
  top:calc(50% - .46 * clamp(230px,25vw,400px));
  width:clamp(70px,7.6vw,112px);height:auto;
  transform:translateY(calc(-100% - 16px)) rotate(-4deg);
  filter:drop-shadow(0 0 30px rgba(232,185,58,.34))
         drop-shadow(0 10px 22px rgba(0,0,0,.62));
  animation:seal-breathe 7s ease-in-out infinite;
}
@keyframes seal-breathe{
  0%,100%{transform:translateY(calc(-100% - 14px)) rotate(-4deg) scale(1)}
  50%    {transform:translateY(calc(-100% - 14px)) rotate(-1.5deg) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .hero-seal{animation:none;transform:translateY(calc(-100% - 16px)) rotate(-4deg)}
}
/* Portret je skriven ispod 900px; pečat bez njega samo smeta tekstu. */
@media (max-width:900px){.hero-seal{display:none}}

/* ---------- 15c. Pečat u podnozju ---------- */
.footer{overflow:hidden}
.seal-foot{--sz:clamp(190px,24vw,340px);--op:.07}

/* ---------- 15d. Ilustrativni efekti ----------
   Sve je čisti CSS: bez skripti, bez vanjskog fonta i bez data-URI, pa
   ne dira CSP koji nema unsafe-inline. Sve se poštuje prefers-reduced-motion. */

/* Zlatne zrake iza portreta. Spor okretaj (64s) da djeluje kao svjetlo,
   ne kao kazaljke. Maskiranje radi radialno prema rubu da zrake
   zapećaju u zlatnu aureolu oko glave. */
.hero-rays{
  position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:50%;
  width:clamp(320px,36vw,580px);aspect-ratio:1;
  transform:translateY(-46%);
  background:conic-gradient(from 200deg at 50% 50%,
    transparent 0deg,      rgba(232,185,58,.105) 9deg,   transparent 18deg,
    transparent 27deg,     rgba(232,185,58,.085) 34deg,  transparent 45deg,
    transparent 56deg,     rgba(232,185,58,.07)  63deg,  transparent 75deg,
    transparent 91deg,     rgba(232,185,58,.10)  100deg, transparent 112deg,
    transparent 129deg,    rgba(232,185,58,.075) 136deg, transparent 149deg,
    transparent 171deg,    rgba(232,185,58,.09)  179deg, transparent 193deg,
    transparent 216deg,    rgba(232,185,58,.08)  223deg, transparent 237deg,
    transparent 261deg,    rgba(232,185,58,.10)  269deg, transparent 283deg,
    transparent 301deg,    rgba(232,185,58,.075) 309deg, transparent 323deg,
    transparent 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 10%,rgba(0,0,0,.5) 50%,transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%,#000 10%,rgba(0,0,0,.5) 50%,transparent 72%);
  filter:blur(2px);
  animation:rays-turn 64s linear infinite;
}
@keyframes rays-turn{to{transform:translateY(-46%) rotate(360deg)}}

/* Zlatni sjaj koji jednom prođe preko pečata i nestane — pečat ostaje
   miran, a oko njega se kratko podigne blještavo prstenje. */
.seal::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,240,205,.34) 42deg,transparent 96deg);
  -webkit-mask-image:radial-gradient(circle,#000 26%,transparent 70%);
          mask-image:radial-gradient(circle,#000 26%,transparent 70%);
  opacity:0;
  animation:seal-shine 9s ease-in-out infinite;
}
@keyframes seal-shine{
  0%,74%{opacity:0;transform:rotate(0deg)}
  82%    {opacity:.95}
  100%   {opacity:0;transform:rotate(300deg)}
}

@media (prefers-reduced-motion:reduce){
  .hero-rays,.seal::after{animation:none}
  .hero-rays{opacity:.7}
}
/* Portret je skriven ispod 900px; zrake i pečat bez njega samo smetaju tekstu. */
@media (max-width:900px){.hero-rays{display:none}}

/* ══════════ 02. AGENTI (dva agenta: demo + plaćeno) ══════════ */
.agents{display:grid;gap:1.75rem}

.agent{
  padding:clamp(1.85rem,4vw,3.25rem);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-soft);
  position:relative;overflow:hidden;
}
.agent::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 100% 0%,rgba(232,185,58,.07),transparent 70%);
}

.agent-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem}
.agent-num{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);
}
.agent-badge{
  font-size:.7rem;font-weight:600;letter-spacing:.06em;
  padding:.28rem .7rem;border-radius:100px;
  background:var(--accent-dim);color:var(--accent-lt);
  border:1px solid var(--border);
}
.agent h3{
  font-size:clamp(1.5rem,3vw,2.15rem);font-weight:750;letter-spacing:-.03em;
  margin-bottom:.75rem;
}
.agent-lead{color:var(--muted);font-size:1.02rem;max-width:74ch;margin-bottom:2rem}
.agent-lead em,.agent-list strong{color:var(--text);font-style:normal;font-weight:650}
.agent code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--bg-alt);border:1px solid var(--border-soft);
  padding:.08em .38em;border-radius:5px;color:var(--accent-lt);
}

.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:2.5rem}
.agent-col h4{
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.agent-col h4.mt{margin-top:2rem}

.agent-list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.agent-list li{position:relative;padding-left:1.6rem;font-size:.95rem;color:var(--muted);line-height:1.55}
.agent-list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(232,185,58,.55);
}
.agent-list-alt li::before{
  background:none;border:1px solid var(--accent);box-shadow:none;
}
.agent-list-warn li::before{
  background:var(--muted);box-shadow:none;border-radius:1px;
  width:6px;height:6px;top:.6em;transform:rotate(45deg);
}
.agent-list-warn li{font-size:.92rem}

/* Dokaz mjerenja — brojke sa stvarnog skeniranja, ne ilustracija */
.agent-proof{
  border:1px solid var(--border-soft);border-radius:12px;
  background:var(--bg-alt);padding:1.15rem 1.25rem;
}
.proof-line{
  display:grid;grid-template-columns:1fr auto;gap:.15rem .75rem;
  padding:.6rem 0;border-bottom:1px dashed var(--border-soft);
}
.proof-line:last-of-type{border-bottom:0;padding-bottom:.2rem}
.proof-line span{font-size:.9rem;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.proof-line b{font-size:.9rem;font-weight:700;color:var(--accent);text-align:right;white-space:nowrap}
.proof-line i{
  grid-column:1/-1;font-style:normal;font-size:.82rem;color:var(--muted);
}
.proof-note{font-size:.78rem;color:var(--muted);opacity:.8;margin-top:.85rem;line-height:1.5}

.agent-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.25rem;margin-top:2.5rem}

.offer{
  padding:1.6rem 1.5rem;border-radius:14px;
  border:1px solid var(--border-soft);background:var(--bg-alt);
  display:flex;flex-direction:column;
}
.offer-tag{
  align-self:flex-start;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .7rem;border-radius:100px;margin-bottom:1rem;
  background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.28);
}
.offer-paid .offer-tag{
  background:var(--accent-dim);color:var(--accent-lt);border-color:var(--border);
}
.offer-what{font-size:.95rem;color:var(--muted);margin-bottom:1.1rem;line-height:1.55}
.offer-what strong{color:var(--text);font-weight:650}
.offer-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.4rem;flex:1}
.offer-list li{position:relative;padding-left:1.35rem;font-size:.9rem;color:var(--muted);line-height:1.5}
.offer-list li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:var(--accent);font-size:.85rem;font-weight:700;
}

.offer-tier{padding-top:1.1rem;margin-top:.2rem;border-top:1px dashed var(--border-soft)}
.offer-tier + .offer-tier{margin-top:1.1rem}
.offer-price{display:flex;align-items:baseline;gap:.2rem;margin-bottom:.15rem}
.offer-price span{font-size:1.9rem;font-weight:850;letter-spacing:-.04em;line-height:1;color:var(--text)}
.offer-price i{font-style:normal;font-size:.92rem;color:var(--muted)}
.offer-name{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.85rem}

.agent-foot{margin-top:2rem;font-size:.88rem;color:var(--muted);max-width:78ch;line-height:1.6}
.agent-foot a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .agent-head{gap:.5rem}
  .proof-line{grid-template-columns:1fr}
  .proof-line b{text-align:left}
}