/* ═══════════════════════════════════════════════════
   Princteq — stilovi.  Boje se mijenjaju samo u :root
   ═══════════════════════════════════════════════════ */
:root {
  /* ── neutralne boje: topla bijela, uz narančastu ide bolje od plavkaste ── */
  --bg:#ffffff; --bg-alt:#f8f7f4; --surface:#ffffff; --border:#e9e6e1;
  --text:#17161a; --soft:#56555e; --faint:#8b8891;

  /* ── narančasta u tri uloge ──
     --brand    puna podloga (gumbi, znak) — Cloudflare #F6821F
     --accent   tekst i linkovi; dublja jer #F6821F na bijeloj daje 2.6:1
     --on-brand tekst NA narančastoj podlozi (8:1)                        */
  --brand:#f6821f; --accent:#c2410c; --on-brand:#1c1103;
  --accent-soft:rgba(246,130,31,.12);

  --shadow:0 1px 2px rgba(28,17,3,.05),0 8px 24px rgba(28,17,3,.06);
  --shadow-lg:0 2px 4px rgba(28,17,3,.07),0 16px 40px rgba(28,17,3,.10);
  /* IBM Plex je crtan za inženjersku tvrtku — ima karaktera i ne izgleda
     kao svaki drugi sajt. Jedan font za sve; sitne oznake su verzal s
     razmaknutim slovima, ne monospace — mono pločice izgledaju generirano. */
  --font:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --r:13px; --maxw:1060px; --ease:cubic-bezier(.2,.7,.3,1);
}
:root[data-theme="dark"] {
  --bg:#0d0c0f; --bg-alt:#141317; --surface:#18171c; --border:#2a282f;
  --text:#f4f3f5; --soft:#a5a3ad; --faint:#6f6d78;
  --brand:#f6821f; --accent:#ff9d43; --on-brand:#1c1103;
  --accent-soft:rgba(246,130,31,.15);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.4);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.6;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease)}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.14;letter-spacing:-.026em}
p{margin:0 0 1rem}
.container{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:0;z-index:999;background:var(--accent);color:#fff;padding:.7rem 1.2rem}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ───── nav ───── */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.nav.is-scrolled{background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--border)}
.nav__inner{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--brand)}
.brand__mark{width:26px;height:26px;flex:none}
.brand__word{color:var(--text);font-weight:600;font-size:.95rem;letter-spacing:.155em}

.nav__links{display:flex;align-items:center;gap:.2rem}
.nav__links>a{padding:.5rem .8rem;border-radius:9px;font-size:.89rem;font-weight:500;
  color:var(--soft);transition:color .2s,background .2s}
.nav__links>a:hover{color:var(--text);background:var(--bg-alt)}
.nav__cta{background:var(--brand)!important;color:var(--on-brand)!important;
  font-weight:600;margin-left:.35rem}
.nav__cta:hover{filter:brightness(1.06)}

.lang{display:flex;gap:1px;padding:2px;background:var(--bg-alt);
  border:1px solid var(--border);border-radius:9px}
.lang button{border:0;background:none;cursor:pointer;font-size:.73rem;
  font-weight:600;letter-spacing:.02em;color:var(--faint);padding:.3rem .5rem;border-radius:7px;
  transition:color .2s,background .2s}
.lang button:hover{color:var(--text)}
.lang button.is-active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}

.nav__tools{display:flex;align-items:center;gap:.45rem}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;background:none;
  border:1px solid var(--border);border-radius:10px;color:var(--soft);cursor:pointer;
  transition:color .2s,background .2s}
.icon-btn:hover{color:var(--text);background:var(--bg-alt)}
.icon-btn svg{width:17px;height:17px}
.icon-moon{display:none}
:root[data-theme="dark"] .icon-sun{display:none}
:root[data-theme="dark"] .icon-moon{display:block}
.nav__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav__burger span{width:18px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s}
.nav__burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* zatamnjenje iza izbornika: ostatak stranice ide iz fokusa */
.nav__backdrop{position:fixed;inset:0;z-index:90;background:rgba(10,10,13,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.nav__backdrop.is-on{opacity:1;pointer-events:auto}
@media (min-width:861px){.nav__backdrop{display:none}}

/* ───── hero ───── */
.hero{position:relative;padding:10rem 0 5.5rem;overflow:hidden;
  background:linear-gradient(180deg,rgba(246,130,31,.07),transparent 58%)}
.hero__glow{position:absolute;top:-300px;left:50%;transform:translateX(-50%);
  width:860px;height:600px;pointer-events:none;filter:blur(20px);
  background:radial-gradient(ellipse at center,var(--accent-soft),transparent 68%)}
.hero .container{position:relative}

/* hero u dva stupca: tekst lijevo, Zemlja gore desno */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem 2.5rem;align-items:center}
.hero__text{min-width:0}
.hero__globe{justify-self:end;line-height:0}
.hero__globe canvas{display:block}
.hero__title{font-size:clamp(2.1rem,5.6vw,3.5rem);font-weight:700;max-width:16ch;margin-bottom:1.3rem}
.hero__lead{max-width:60ch;font-size:1.05rem;color:var(--soft);margin-bottom:2.2rem}

/* naziv tvrtke u uvodnoj rečenici — kvadratić, ne samo obojan tekst.
   Podloga je DUBLJA narančasta: bijeli tekst na #f6821f daje 2.6:1. */
.chip{display:inline-block;background:var(--accent);color:#fff;font-weight:600;
  padding:.04em .4em;border-radius:6px;letter-spacing:.005em}
:root[data-theme="dark"] .chip{background:var(--brand);color:var(--on-brand)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem}
.hero__actions--center{justify-content:center;margin-top:2rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.45rem;border-radius:11px;
  font-size:.92rem;font-weight:600;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .2s}
.btn--primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn--ghost{border:1px solid var(--border);background:var(--surface);color:var(--text)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--faint)}

/* ───── klijenti ─────
   Traka je namjerno tiha: mala, monokromatska, bez okvira.
   Visina svih logotipa kontrolira se jednom varijablom.       */
.clients{--logo-h:15px;padding:.5rem 0 3rem;border-bottom:1px solid var(--border)}
.clients__label{font-size:.71rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);opacity:.75;margin-bottom:1.15rem}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}

/* zajedničko za oba oblika: ugrađeni <svg> i vanjski <img src="assets/logos/*.svg"> */
.logos svg,.logos img{height:var(--logo-h);width:auto;opacity:.3;
  transition:opacity .25s var(--ease)}
.logos svg:hover,.logos img:hover{opacity:.62}

/* ugrađeni SVG prati boju teksta preko currentColor */
.logos svg{color:var(--text)}

/* vanjski SVG (službeni logotip klijenta, često u boji) —
   svodi se na jednu boju da traka ostane mirna u obje teme */
.logos img{filter:grayscale(1) brightness(0)}
:root[data-theme="dark"] .logos img{filter:grayscale(1) brightness(0) invert(1)}

/* ───── sekcije ───── */
.section{padding:5.5rem 0}
.section--alt{background:var(--bg-alt)}
.label{font-size:.74rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.title{font-size:clamp(1.6rem,3.6vw,2.15rem);font-weight:700;margin-bottom:.6rem}
.title.big{font-size:clamp(1.9rem,5vw,2.9rem)}
.lead{color:var(--soft);max-width:58ch}
.lead.center{margin-inline:auto}
.head{margin-bottom:2.8rem}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.cols--about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem;align-items:start}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.8rem}
.panel__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
  background:var(--accent-soft);color:var(--accent);margin-bottom:1.1rem}
.panel__icon svg{width:20px;height:20px}
.panel h3{font-size:1.15rem;font-weight:600;margin-bottom:.6rem}
.panel p{font-size:.94rem;color:var(--soft)}
.checks{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.55rem}
.checks li{position:relative;padding-left:1.5rem;font-size:.91rem;color:var(--soft)}
.checks li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:2px;background:var(--brand)}

/* ───── radovi ───── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.35rem;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--faint)}
.card h3{font-size:1.02rem;font-weight:600;margin-bottom:.45rem}
.card p{font-size:.9rem;color:var(--soft);flex:1;margin-bottom:0}
.card--wide{grid-column:span 2;border-color:var(--brand);background:
  linear-gradient(180deg,var(--accent-soft),transparent 60%),var(--surface)}
.badge{align-self:flex-start;font-size:.71rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  border-radius:5px;padding:.2rem .5rem;margin-bottom:.7rem}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:.9rem 0 0}
.tags li{font-size:.76rem;font-weight:500;color:var(--faint);
  border:1px solid var(--border);padding:.18rem .55rem;border-radius:6px}

/* ───── podaci o tvrtki ───── */
.facts{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.facts li{background:var(--bg);padding:.9rem 1rem}
.facts span{display:block;font-size:.71rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.2rem}
.facts b{font-size:.9rem;font-weight:500}

/* ───── kontakt + podnožje ───── */
.section--contact{text-align:center;padding:6rem 0}
/* podaci firme ispod maila — ploča, ne dekoracija */
.facts--contact{text-align:left;max-width:720px;margin:2.6rem auto 0}
.facts--contact b a{border-bottom:1px solid var(--border);transition:color .2s,border-color .2s}
.facts--contact b a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.mail-link{display:inline-block;margin-top:1.8rem;font-size:clamp(1.05rem,3vw,1.55rem);
  font-weight:600;color:var(--accent);border-bottom:2px solid var(--accent-soft);
  padding-bottom:.15rem;word-break:break-word;transition:border-color .25s}
.mail-link:hover{border-bottom-color:var(--accent)}
.footer{border-top:1px solid var(--border);padding:2rem 0}
.footer__inner{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;
  font-size:.83rem;color:var(--faint)}
.footer p{margin:0}

/* ───── karijere ───── */
.section--top{padding-top:9rem}
.job{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.9rem;margin-bottom:1.2rem}
.job h2{font-size:clamp(1.35rem,3.2vw,1.7rem);font-weight:700;margin-top:.55rem}
.job h3{font-size:.79rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  margin:1.9rem 0 .75rem}
.job p{font-size:.95rem;color:var(--soft);max-width:64ch}
.job .btn{margin-top:.6rem}
.job__meta{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:1rem 0 0}
.job__meta li{font-size:.82rem;font-weight:500;color:var(--soft);
  border:1px solid var(--border);padding:.34rem .8rem;border-radius:999px}

/* raspon plaće je glavni podatak oglasa — neka se vidi */
.salary{margin:1.9rem 0 .5rem;padding:1.4rem 1.6rem;background:var(--accent-soft);
  border:1px solid var(--brand);border-radius:12px}
.salary span{display:block;font-size:.71rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.45rem}
.salary b{display:block;font-size:clamp(1.4rem,3.6vw,1.8rem);font-weight:700;
  color:var(--text);letter-spacing:-.025em;line-height:1.2}
.salary p{margin:.85rem 0 0;font-size:.9rem;max-width:56ch}

.panel--quiet{background:none;border-style:dashed}
.panel--quiet h3{font-size:1.05rem;font-weight:600;color:var(--text);
  letter-spacing:-.015em;text-transform:none;margin:0 0 .5rem}
.mail-link--sm{margin-top:1rem;font-size:1rem}
.footer a{border-bottom:1px solid var(--border);transition:color .2s,border-color .2s}
.footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ───── animacije ───── */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.grid .reveal:nth-child(2),.cols .reveal:nth-child(2){transition-delay:.06s}
.grid .reveal:nth-child(3){transition-delay:.12s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ───── mobitel ───── */
@media (max-width:860px){
  .cols--about{grid-template-columns:1fr;gap:1.5rem}
  .card--wide{grid-column:span 1}
  .hero{padding:8rem 0 4rem}
  /* na telefonu kugla ide ispod teksta, ne pokraj njega */
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__globe{justify-self:center;margin-top:2rem}
  .section{padding:4rem 0}
  .nav__burger{display:flex}
  .nav__links{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--border);padding:.7rem 1.25rem 1.2rem;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .25s var(--ease),opacity .25s var(--ease)}
  .nav__links.is-open{transform:none;opacity:1;pointer-events:auto}
  /* dodirne mete: Apple traži najmanje 44px, prije je bilo ~41 */
  .nav__links>a{display:flex;align-items:center;min-height:48px;
    padding:.4rem .5rem;font-size:1rem;border-radius:9px}
  .nav__cta{justify-content:center;margin:.6rem 0 0}
  .nav__burger{width:42px;height:42px}

  /* jezici i tema koje je JS preselio iz zaglavlja u izbornik */
  .nav__mtools{display:flex;align-items:center;gap:.75rem;
    margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--border)}
  .nav__mtools .lang{flex:1}
  .nav__mtools .lang button{flex:1;padding:.55rem 0;font-size:.82rem}
  .nav__mtools .icon-btn{width:44px;height:44px;flex:none}
  .nav__mtools .icon-btn svg{width:19px;height:19px}

  /* dok je izbornik otvoren traka mora biti neprozirna, inače kroz nju
     probija narančasti gradijent heroja i tekst se muti */
  .nav.is-menu-open{background:var(--bg);border-bottom-color:var(--border)}
  .clients{--logo-h:13px}
  .logos{gap:.85rem 1.5rem}

  /* BUG: .section{padding:4rem 0} iznad gasi i padding-top .section--top,
     pa bi sadržaj stranica bez heroja završio ispod fiksne trake. */
  .section--top{padding-top:6.5rem}

  /* okviri su na uskom ekranu trošili pola širine na razmak */
  .job{padding:1.35rem}
  .panel{padding:1.35rem}
  .job h3{margin:1.5rem 0 .65rem}
  .salary{margin:1.5rem 0 .5rem;padding:1.15rem 1.2rem}
  .head{margin-bottom:2rem}
}

/* neparan broj stavki u dva stupca ostavlja praznu ćeliju s obrubom —
   na telefonu ionako je čitljivije jedno ispod drugoga */
@media (max-width:560px){
  .facts{grid-template-columns:1fr}

/* ───── uski telefoni ───── */
@media (max-width:480px){
  .container,.nav__inner{width:min(100% - 2rem,var(--maxw))}
  .brand__word{font-size:.85rem;letter-spacing:.12em}
  .nav__tools{gap:.3rem}
  .lang button{padding:.26rem .36rem;font-size:.64rem}
  /* na mobitelu je jedini gumb u traci hamburger — ostaje dodirljiv */
  .icon-btn{width:42px;height:42px}

  .hero{padding:7rem 0 3.5rem}
  .hero__lead{font-size:1rem}

  /* dva gumba jedan do drugoga se lome ružno — neka budu puni redovi */
  .hero__actions{gap:.55rem}
  .hero__actions .btn,.job .btn{flex:1 1 100%;width:100%;justify-content:center}

  .facts li{padding:.8rem .9rem}
  .footer__inner{flex-direction:column;gap:.35rem}
  .section--top{padding-top:6rem}
}

}

/* ───── vrlo uski (iPhone SE i slični, 320px) ───── */
@media (max-width:340px){
  .brand__word{display:none}
}