/* ============ TOKENI ============
   Paleta izvedena iz T568B standarda za mrežne kablove:
   narandžasti par, plavi par, zeleni par. Boje iz njegovog sveta.
   Tri teme: tamna (podrazumevana), srednja, svetla. */
:root{
  /* --- akcenti, isti u sve tri teme --- */
  --orange:#FF6B2C;
  --orange-dim:rgba(255,107,44,.14);
  --blue:#3D7BFF;
  --blue-dim:rgba(61,123,255,.14);
  --green:#2DD46F;
  --green-dim:rgba(45,212,111,.14);

  --display:'Archivo',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'JetBrains Mono',monospace;

  --maxw:1200px;
  --r:12px;

  /* --- Paleta: grafitno plava --- */
  color-scheme:dark;
  --void:#1A2030;
  --deep:#212939;
  --surface:#2A3344;
  --surface-2:#343E52;
  --line:rgba(255,255,255,.10);
  --line-str:rgba(255,255,255,.19);
  --text:#F1F4FA;
  --text-2:#AEB8CC;
  --text-3:#7C879C;

  --hdr-bg:rgba(26,32,48,.88);
  --tint:rgba(255,255,255,.03);
  --tint-2:rgba(255,255,255,.07);
  --tint-3:rgba(255,255,255,.13);
  --glare:rgba(255,255,255,.09);
  --accent-bg:#33261A;
  --scrim:rgba(12,16,26,.7);
  --glow:.14;
  --shadow-lg:0 26px 60px -24px rgba(0,0,0,.65);
  --shadow-pop:0 36px 90px -30px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.band{padding:110px 0}
@media(max-width:820px){.band{padding:68px 0}}

/* ---- utility ---- */
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--orange)}
.led{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.led.blink{animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 8px var(--green)}50%{opacity:.35;box-shadow:0 0 0 var(--green)}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:8px;border:1px solid transparent;
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn--fill{background:var(--orange);color:#0A0A0A;box-shadow:0 0 0 rgba(255,107,44,0)}
.btn--fill:hover{box-shadow:0 10px 30px -8px rgba(255,107,44,.55)}
.btn--line{border-color:var(--line-str);color:var(--text);background:transparent}
.btn--line:hover{border-color:var(--text);background:var(--tint)}

/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1;transform:none}

/* ============ HEADER ============ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.hdr.stuck{background:var(--hdr-bg);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hdr__in{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:34px}
.brand{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:inherit;
}
.brand__mark{flex:none;display:block}
.brand__rec{
  font-family:var(--display);font-weight:800;font-size:21px;
  letter-spacing:-.04em;line-height:1;white-space:nowrap;color:var(--text);
}
@media(max-width:520px){
  .brand__mark{width:30px;height:31px}
  .brand__rec{font-size:18px}
}
.brand__tacka{color:var(--orange)}
.brand:hover .brand__rec{color:var(--text)}
.hdr nav{margin-left:auto;font-size:14.5px;font-weight:500;color:var(--text-2)}
.hdr nav ul.meni{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.hdr nav a{transition:color .18s;position:relative;display:inline-block}
.hdr nav a:hover{color:var(--text)}
.hdr__right{display:flex;align-items:center;gap:16px}
.statuspill{
  display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;
  border:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--text-2);
  letter-spacing:.06em;white-space:nowrap;
}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:7px;padding:9px;cursor:pointer}
.burger span{display:block;width:17px;height:1.5px;background:var(--text);margin:3.5px 0;transition:.25s}
.burger.x span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:1000px){
  .hdr nav{
    position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;
    background:var(--deep);border-bottom:1px solid var(--line);padding:8px 28px 22px;
    margin-left:0;max-height:0;overflow:hidden;transition:max-height .32s ease;
  }
  .hdr nav.open{max-height:640px;overflow-y:auto}
  .hdr nav ul.meni{flex-direction:column;gap:0}
  .hdr nav a{padding:13px 0;border-bottom:1px solid var(--line);display:block}
  .hdr__in{gap:0;justify-content:space-between}
  .statuspill{display:none}
  .burger{display:block}
  .hdr__right .btn{display:none}
}

/* ============ HERO ============ */
.hero{position:relative;padding:150px 0 0;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 55% at 50% 15%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 15%,#000 20%,transparent 78%);
}
.hero__glow{
  position:absolute;top:-260px;left:50%;transform:translateX(-50%);
  width:900px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,44,var(--glow)),transparent 66%);
  filter:blur(30px);
}
.hero__in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,68px);font-weight:800;margin-bottom:22px}
.hero h1 .hl{color:var(--orange)}
.hero__lead{font-size:18px;color:var(--text-2);max-width:490px;margin-bottom:32px}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap}
.hero__fine{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:20px}
@media(max-width:960px){
  .hero{padding-top:118px}
  .hero__in{grid-template-columns:1fr;gap:44px}
}

/* --- tabla intervencija (signature #1) ---
   Zamenila je konzolu, jer je posetiocima izgledala kao alat za
   programere umesto kao servis. */
.feed{
  background:var(--deep);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.feed__bar{
  display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid var(--line);background:var(--tint);
}
.feed__title{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.feed__note{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.06em}
.dot-live{
  width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  animation:pulseLive 2.4s ease-in-out infinite;
}
@keyframes pulseLive{
  0%,100%{opacity:1;box-shadow:0 0 8px var(--green)}
  50%{opacity:.4;box-shadow:0 0 0 var(--green)}
}

.feed__list{height:326px;overflow:hidden}
.feed__row{
  display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  padding:15px 18px;border-bottom:1px solid var(--line);
  animation:rowIn .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes rowIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.feed__time{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.feed__firm{font-size:14.5px;font-weight:600;line-height:1.25}
.feed__issue{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.35}
.feed__res{text-align:right;white-space:nowrap}
.feed__badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.05em;padding:4px 9px;border-radius:5px;border:1px solid;
}
.feed__badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.feed__badge--tel{color:var(--blue);border-color:rgba(61,123,255,.35);background:rgba(61,123,255,.10)}
.feed__badge--rem{color:var(--green);border-color:rgba(45,212,111,.35);background:rgba(45,212,111,.10)}
.feed__badge--fld{color:var(--orange);border-color:rgba(255,107,44,.35);background:rgba(255,107,44,.10)}
.feed__dur{display:block;font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:6px}
.feed__foot{
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:13px 18px;
  border-top:1px solid var(--line);background:var(--tint);
  font-family:var(--mono);font-size:10.5px;color:var(--text-3);letter-spacing:.05em;
}
.feed__foot span{display:flex;align-items:center;gap:7px}
.feed__foot i{width:6px;height:6px;border-radius:50%;display:block}

@media(max-width:560px){
  .feed__list{height:auto}
  .feed__row{grid-template-columns:44px 1fr;gap:10px;padding:13px 14px}
  .feed__res{grid-column:2;text-align:left;margin-top:6px}
  .feed__dur{display:inline;margin-top:0;margin-left:8px}
}

/* --- patch panel (signature #2) --- */
.panel{
  margin-top:72px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--deep));overflow:hidden;
}
.panel__ports{display:flex;gap:5px;padding:16px 18px;border-bottom:1px solid var(--line);overflow:hidden}
.port{flex:1 1 0;min-width:11px;height:26px;border-radius:3px;background:var(--surface-2);position:relative;border:1px solid var(--tint-2)}
.port::after{
  content:'';position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--tint-3);
}
.port.up::after{background:var(--green);box-shadow:0 0 6px var(--green);animation:flick 3s ease-in-out infinite}
.port.hot::after{background:var(--orange);box-shadow:0 0 6px var(--orange)}
@keyframes flick{0%,100%{opacity:1}44%{opacity:.3}52%{opacity:1}}
.panel__stats{display:flex;flex-wrap:wrap}
.stat{flex:1 1 0;min-width:158px;padding:24px 22px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat__k{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.stat__v{font-family:var(--display);font-size:27px;font-weight:700}
.stat__v .u{font-size:15px;color:var(--text-2);font-weight:500}
@media(max-width:720px){.stat{flex:1 1 50%;border-bottom:1px solid var(--line)}.stat:nth-child(2n){border-right:none}}

/* ============ ZAŠTO MI ============ */
.sec-head{max-width:660px;margin-bottom:56px}
.sec-head h2{font-size:clamp(29px,3.6vw,44px);font-weight:700;margin-bottom:16px}
.sec-head p{color:var(--text-2);font-size:17px}
.sec-head--mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-head--mid .eyebrow::before{display:none}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vs__col{border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;background:var(--surface)}
.vs__col--us{border-color:rgba(255,107,44,.34);background:linear-gradient(160deg,rgba(255,107,44,.07),var(--surface) 55%)}
.vs__tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.vs__col--us .vs__tag{color:var(--orange)}
.vs__col h3{font-size:23px;font-weight:700;margin-bottom:22px}
.vs__col li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--text-2)}
.vs__col li:first-of-type{border-top:none}
.ic{flex:none;width:17px;height:17px;margin-top:3px}
.ic--x{stroke:var(--text-3)}
.ic--v{stroke:var(--green)}
.vs__foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--text-3)}
.vs__col--us .vs__foot{color:var(--orange)}
@media(max-width:820px){.vs{grid-template-columns:1fr}}

/* ============ USLUGE ============ */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc__c{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:var(--surface);
  transition:border-color .25s,transform .25s,background .25s;position:relative;overflow:hidden;
}
.svc__c:hover{border-color:rgba(255,107,44,.4);transform:translateY(-4px);background:var(--surface-2)}
.svc__c::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  opacity:0;transition:opacity .25s;
}
.svc__c:hover::before{opacity:1}
.svc__i{width:40px;height:40px;border-radius:9px;background:var(--orange-dim);display:grid;place-items:center;margin-bottom:18px}
.svc__i svg{width:19px;height:19px;stroke:var(--orange);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc__c h3{font-size:16.5px;font-weight:600;margin-bottom:8px}
.svc__c p{font-size:14px;color:var(--text-2);margin:0}
@media(max-width:900px){.svc{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc{grid-template-columns:1fr}}

/* ============ PAKETI ============ */
.pkg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.pkg__c{
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:34px 28px;display:flex;flex-direction:column;position:relative;
  --rx:0deg;--ry:0deg;--sc:1;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
  transition:border-color .25s,transform .55s cubic-bezier(.2,.75,.3,1),box-shadow .35s;
}
/* dok miš prelazi preko kartice, tranzicija je kratka da prati pokret */
.pkg__c.tilting{transition:border-color .25s,transform .09s linear,box-shadow .35s}
/* odsjaj koji prati kursor */
.pkg__c::after{
  content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),var(--glare),transparent 45%);
  opacity:0;transition:opacity .35s;
}
.pkg__c.tilting::after{opacity:1}
.pkg__c:hover{border-color:var(--line-str)}
.pkg__c--best{
  border-color:var(--orange);
  background:linear-gradient(170deg,rgba(255,107,44,.09),var(--surface) 48%);
  box-shadow:0 24px 60px -22px rgba(255,107,44,.4);
  --sc:1.035;z-index:2;
}
.pkg__c--best.tilting{box-shadow:0 34px 80px -24px rgba(255,107,44,.55)}
.pkg__c--best:hover{border-color:var(--orange)}
.pkg__badge{
  position:absolute;top:-12px;left:28px;background:var(--orange);color:#0A0A0A;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:5px;
}
.pkg__lvl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.pkg__c--best .pkg__lvl{color:var(--orange)}
.pkg__c h3{font-size:26px;font-weight:800;margin-bottom:9px}
.pkg__desc{font-size:14px;color:var(--text-2);margin:0 0 24px;min-height:44px}
.pkg__price{padding:18px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px}
.pkg__amt{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.15}
.pkg__c--best .pkg__amt{color:var(--orange)}
.pkg__per{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:8px;line-height:1.5}
.pkg__sla{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;color:var(--text-2);margin-bottom:20px}
.pkg__sla .led{background:var(--blue)}
.pkg__c--best .pkg__sla .led{background:var(--orange)}
.pkg__list{flex:1;margin-bottom:26px}
.pkg__list li{display:flex;gap:11px;font-size:14px;padding:9px 0;color:var(--text-2)}
.pkg__list li svg{flex:none;width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.pkg__list li.inh{color:var(--text-3);font-style:italic}
.pkg__list li.inh svg{stroke:var(--text-3)}
.pkg__c .btn{width:100%}
.pkg__note{text-align:center;font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:30px}
@media(max-width:940px){
  .pkg{grid-template-columns:1fr;gap:26px}
  .pkg__c--best{--sc:1}
}

/* ============ CLOUD BAND ============ */
.cloud{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:44px 40px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.cloud h2{font-size:31px;font-weight:700;margin-bottom:14px}
.cloud p{color:var(--text-2);margin:0 0 22px}
.cloud__opts{display:grid;gap:14px}
.cloud__o{display:flex;gap:16px;padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--deep)}
.cloud__o b{display:block;font-family:var(--display);font-size:15.5px;margin-bottom:4px}
.cloud__o span{font-size:13.5px;color:var(--text-2)}
.cloud__k{font-family:var(--mono);font-size:11px;color:var(--orange);letter-spacing:.1em;flex:none;padding-top:3px}
@media(max-width:900px){.cloud{grid-template-columns:1fr;padding:34px 26px;gap:30px}}

/* ============ KLIJENTI ============ */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;position:relative}
.mq::before,.mq::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--void),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--void),transparent)}
.mq__t{display:flex;gap:56px;width:max-content;animation:slide 32s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq__i{
  flex:none;display:flex;align-items:center;gap:11px;padding:12px 22px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);
  font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--text-3);
  white-space:nowrap;transition:color .25s,border-color .25s;
}
.mq__i:hover{color:var(--text);border-color:var(--line-str)}
.mq__i i{width:8px;height:8px;border-radius:2px;background:var(--text-3);flex:none}

/* ============ BLOG ============ */
.postovi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:26px 24px;transition:border-color .25s,transform .25s}
.post:hover{border-color:rgba(61,123,255,.4);transform:translateY(-4px)}
.post__k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.post h3{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:10px}
.post p{font-size:14px;color:var(--text-2);margin:0 0 16px}
.post__m{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
@media(max-width:900px){.postovi{grid-template-columns:1fr}}

/* ============ CTA + FOOTER ============ */
.cta{
  border-radius:16px;padding:66px 48px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--accent-bg),var(--surface) 60%);border:1px solid rgba(255,107,44,.3);
}
.cta::before{
  content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:560px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,44,.22),transparent 68%);filter:blur(24px);
}
.cta>*{position:relative}
.cta h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin-bottom:16px}
.cta p{color:var(--text-2);max-width:520px;margin:0 auto 30px}
.cta__row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.cta{padding:44px 24px}}

footer{padding:70px 0 40px;border-top:1px solid var(--line);margin-top:110px}
.f__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:44px}
.f__top h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px;font-weight:500}
.f__top li{padding:6px 0;font-size:14px;color:var(--text-2)}
.f__top li a:hover{color:var(--orange)}
.f__about{font-size:14px;color:var(--text-2);max-width:290px;margin:14px 0 0}
.f__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--text-3)}
@media(max-width:820px){.f__top{grid-template-columns:1fr 1fr}}

/* ============ TOPOLOGIJA (animirani SVG) ============ */
.topo{
  border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--surface),var(--deep));
  padding:26px 20px;overflow:hidden;position:relative;
}
.topo svg{width:100%;height:auto;display:block}
.topo__legend{
  display:flex;gap:26px;flex-wrap:wrap;justify-content:center;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--text-3);letter-spacing:.05em;
}
.topo__legend span{display:flex;align-items:center;gap:8px}
.topo__legend i{width:7px;height:7px;border-radius:50%;display:block}

.t-grid{stroke:var(--line);stroke-width:1;fill:none}
.t-node{fill:var(--surface-2);stroke:var(--line-str);stroke-width:1}
.t-node--hub{fill:rgba(61,123,255,.12);stroke:var(--blue)}
.t-node--us{fill:rgba(255,107,44,.14);stroke:var(--orange)}
.t-lbl{font-family:'JetBrains Mono',monospace;font-size:12px;fill:var(--text-2)}
.t-lbl--w{fill:var(--text);font-family:'Archivo',sans-serif;font-weight:700;font-size:14px}
.t-sub{font-family:'JetBrains Mono',monospace;font-size:10px;fill:var(--text-3)}
.t-line{stroke:var(--line-str);stroke-width:1.2;fill:none}
.t-flow{stroke-width:1.6;fill:none;stroke-dasharray:5 11;stroke-linecap:round;animation:tflow 1.5s linear infinite}
@keyframes tflow{to{stroke-dashoffset:-32}}
.t-ring{fill:none;stroke:var(--orange);transform-box:fill-box;transform-origin:center;animation:tring 3.2s ease-out infinite}
@keyframes tring{0%{transform:scale(.55);opacity:.75}100%{transform:scale(2.3);opacity:0}}
.t-led{animation:blink 2.4s ease-in-out infinite}
@media(max-width:600px){.topo{padding:16px 10px}.topo__legend{gap:16px;font-size:10.5px}}

/* ============ EXIT INTENT POPUP ============ */
.pop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.pop[hidden]{display:none}
.pop__bd{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(6px);animation:popfade .3s ease}
.pop__box{
  position:relative;max-width:520px;width:100%;
  background:linear-gradient(160deg,var(--accent-bg),var(--surface) 58%);
  border:1px solid rgba(255,107,44,.38);border-radius:16px;
  padding:38px 34px;box-shadow:var(--shadow-pop);
  animation:popin .4s cubic-bezier(.2,.8,.3,1);max-height:92vh;overflow:auto;
}
@keyframes popfade{from{opacity:0}}
@keyframes popin{from{opacity:0;transform:translateY(20px) scale(.97)}}
.pop__x{
  position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-3);
  font-size:24px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:7px;transition:color .2s,background .2s;
}
.pop__x:hover{color:var(--text);background:var(--tint-2)}
.pop__box h3{font-size:clamp(22px,3.4vw,27px);font-weight:800;margin-bottom:12px}
.pop__box>p{color:var(--text-2);font-size:15px;margin:0 0 20px}
.pop__ul{margin-bottom:24px}
.pop__ul li{display:flex;gap:11px;font-size:14px;color:var(--text-2);padding:7px 0}
.pop__ul li svg{flex:none;width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.pop__form{display:grid;gap:10px}
.pop__form input{
  background:var(--void);border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;color:var(--text);font-family:var(--body);font-size:14.5px;
  transition:border-color .2s;
}
.pop__form input::placeholder{color:var(--text-3)}
.pop__form input:focus{border-color:var(--orange);outline:none}
.pop__fine{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin:15px 0 0;text-align:center}
.pop__ok{text-align:center;padding:18px 0}
.pop__ok svg{width:44px;height:44px;stroke:var(--green);fill:none;stroke-width:2;margin-bottom:14px}
@media(max-width:520px){.pop__box{padding:30px 22px}}

/* ============ BEZ UGOVORA ============ */
.adhoc{
  margin-top:34px;padding:30px 34px;
  border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--r);background:var(--surface);
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
}
.adhoc__k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:9px;margin-bottom:11px;
}
.adhoc__k .led{background:var(--blue)}
.adhoc h3{font-size:23px;font-weight:700;margin-bottom:10px}
.adhoc p{color:var(--text-2);font-size:15px;margin:0;max-width:620px}
.adhoc__fine{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:14px!important}
.adhoc__cta{display:grid;gap:9px;justify-items:stretch}
@media(max-width:860px){.adhoc{grid-template-columns:1fr;padding:26px 24px}}

/* ============ IZRADA SAJTOVA ============ */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.work__c{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:24px;transition:border-color .25s,transform .25s;display:flex;flex-direction:column;
}
.work__c:hover{border-color:rgba(45,212,111,.4);transform:translateY(-4px)}
.work__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.work__c h3{font-size:18px;font-weight:700;margin-bottom:7px}
.work__c p{font-size:13.5px;color:var(--text-2);margin:0 0 18px;flex:1}
.work__stat{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;margin-bottom:18px;
}
.work__stat b{
  display:block;font-family:var(--display);font-size:21px;font-weight:800;
  color:var(--green);line-height:1.15;margin-bottom:4px;
}
.work__stat span{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.05em}
.work__u{
  font-family:var(--mono);font-size:12.5px;color:var(--text-3);
  display:flex;align-items:center;gap:7px;transition:color .2s;
}
.work__c:hover .work__u{color:var(--green)}
.work__u svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:900px){.work{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  .t-flow{stroke-dasharray:none;opacity:.5}
  .t-ring{display:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   DODACI ZA WORDPRESS
   Blog, logoi klijenata, straničenje, pristupačnost.
   ========================================================= */

/* --- pristupačnost --- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed!important;top:12px;left:12px;z-index:300;
  width:auto;height:auto;clip:auto;margin:0;
  padding:12px 20px;background:var(--orange);color:#0A0A0A;
  font-family:var(--display);font-weight:700;border-radius:8px;
}

/* --- logoi klijenata --- */
.mq__i img{
  max-height:34px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s;
}
.mq__i:hover img{filter:grayscale(0);opacity:1}
.mq__i:has(img){padding:10px 18px}

/* Mirna rešetka, kad je logoa manje od osam */
.klijenti-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px;margin-top:8px;
}
.klijenti-grid .mq__i{
  flex:1 1 auto;justify-content:center;min-height:78px;
}
@media(max-width:600px){
  .klijenti-grid{grid-template-columns:1fr 1fr;gap:10px}
  .mq__i img{max-height:28px}
}

/* --- pojedinačan tekst --- */
.single__head{max-width:760px;margin-bottom:34px}
.single__head h1{font-size:clamp(30px,4.2vw,46px);font-weight:800;margin-bottom:16px}
.single__meta{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;color:var(--text-3);
}
.single__img{margin-bottom:36px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.single__img img{width:100%;height:auto;display:block}

.single__body{max-width:720px;font-size:17px;line-height:1.75;color:var(--text-2)}
.single__body > * + *{margin-top:1.15em}
.single__body h2{
  font-size:27px;font-weight:700;color:var(--text);
  margin-top:2em;margin-bottom:.6em;
}
.single__body h3{
  font-size:20px;font-weight:600;color:var(--text);
  margin-top:1.7em;margin-bottom:.5em;
}
.single__body a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.single__body a:hover{text-decoration-thickness:2px}
.single__body strong{color:var(--text);font-weight:600}
.single__body ul,.single__body ol{padding-left:1.3em}
.single__body li{margin:.5em 0}
.single__body ul li::marker{color:var(--orange)}
.single__body blockquote{
  border-left:3px solid var(--orange);padding:4px 0 4px 22px;
  margin-left:0;color:var(--text);font-size:18px;
}
.single__body img,.single__body figure img{
  border-radius:var(--r);border:1px solid var(--line);height:auto;
}
.single__body figcaption{
  font-family:var(--mono);font-size:12px;color:var(--text-3);
  text-align:center;margin-top:10px;
}
.single__body code{
  font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  padding:2px 6px;border-radius:5px;color:var(--text);
}
.single__body pre{
  background:var(--deep);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;
}
.single__body pre code{background:none;padding:0}
.single__body table{
  width:100%;border-collapse:collapse;font-size:15px;
}
.single__body th,.single__body td{
  padding:11px 14px;border:1px solid var(--line);text-align:left;
}
.single__body th{background:var(--surface-2);color:var(--text);font-weight:600}

/* --- navigacija između tekstova --- */
.single__foot{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:760px;margin-top:52px;padding-top:32px;border-top:1px solid var(--line);
}
.single__nav{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:18px 20px;font-size:14.5px;color:var(--text);
  transition:border-color .25s,transform .25s;
}
.single__nav:hover{border-color:rgba(255,107,44,.4);transform:translateY(-3px)}
.single__nav span{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:7px;
}
.single__nav--r{text-align:right}
@media(max-width:640px){.single__foot{grid-template-columns:1fr}.single__nav--r{text-align:left}}

/* --- straničenje --- */
.paging{margin-top:44px}
.paging .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.paging .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--mono);font-size:13.5px;color:var(--text-2);
  transition:border-color .2s,color .2s;
}
.paging a.page-numbers:hover{border-color:var(--text-3);color:var(--text)}
.paging .page-numbers.current{
  background:var(--orange);border-color:var(--orange);color:#0A0A0A;font-weight:700;
}
.paging .page-numbers.dots{border-color:transparent;background:none}

/* --- sitnice --- */
/* Traka administratora.
   WordPress je drži fiksiranom samo iznad 600 piksela širine.
   Ispod toga ona odskroluje, pa zaglavlje mora da se vrati na vrh,
   inače ostaje providna praznina kroz koju se vidi sadržaj. */
.admin-bar .hdr{top:32px}
@media(max-width:782px){.admin-bar .hdr{top:46px}}
@media(max-width:600px){.admin-bar .hdr{top:0}}

/* Na telefonu zaglavlje uvek ima punu pozadinu.
   Providno zaglavlje preko naslova ima smisla na širokom ekranu,
   ali na uskom se sadržaj provlači ispod njega i smeta čitanju. */
@media(max-width:1000px){
  .hdr{
    background:var(--hdr-bg);backdrop-filter:blur(14px);
    border-bottom-color:var(--line);
  }
}

/* =========================================================
   ZAŠTITA OD ASTRINIH PODRAZUMEVANIH BOJA

   Astrini stilovi se skidaju u functions.php. Ovo je drugi sloj
   odbrane, za slučaj da neki ostatak ipak prođe, recimo iz
   dodatka ili iz keša.
   ========================================================= */
html,
html body,
body #page,
body .site,
body .site-content,
body #content,
body .ast-container,
body .entry-content{
  background-color:var(--void);
  color:var(--text);
}

/* Naslovi, jer ih Astra boji svojom paletom. */
body h1, body h2, body h3, body h4, body h5, body h6,
body .entry-content h1, body .entry-content h2,
body .entry-content h3, body .entry-content h4{
  color:var(--text);
}

/* Dugmad, da Astra ne ubaci svoju boju ivice ili teksta. */
body .btn--fill{background:var(--orange);color:#0A0A0A;border-color:transparent}
body .btn--line{background:transparent;color:var(--text);border-color:var(--line-str)}
body .btn--line:hover{border-color:var(--text);background:var(--tint)}

/* Astrini kontejneri, ako se negde pojave oko sadržaja. */
body .site-content > .ast-container{
  max-width:none;
  padding:0;
  display:block;
}

/* =========================================================
   KARTICE USLUGA KAO LINKOVI I STRANICA USLUGE
   ========================================================= */
.svc__c--link{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
}
.svc__c--link p{flex:1}
.svc__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--text-3);transition:color .25s,gap .25s;
}
.svc__go::after{content:'→'}
.svc__c--link:hover .svc__go{color:var(--orange);gap:11px}

/* zaglavlje stranice usluge */
.usluga__hero{padding:150px 0 0}
.usluga__h1{
  font-size:clamp(32px,4.6vw,52px);font-weight:800;
  max-width:820px;margin-bottom:20px;
}
.usluga__uvod{
  font-size:18px;color:var(--text-2);max-width:640px;margin:0 0 30px;
}
.usluga__body{padding-top:70px}
.usluga__body .single__body{max-width:760px}

/* prvi pasus teksta usluge malo krupniji */
.usluga__body .single__body > p:first-child{
  font-size:19px;color:var(--text);
}

/* --- podmeni u zaglavlju --- */
.hdr nav .menu-item-has-children{position:relative}
.hdr nav .sub-menu{
  position:absolute;top:100%;left:-16px;min-width:250px;
  background:var(--deep);border:1px solid var(--line);border-radius:10px;
  padding:8px;margin-top:12px;list-style:none;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.hdr nav .menu-item-has-children:hover > .sub-menu,
.hdr nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:none;
}
.hdr nav .sub-menu a{
  display:block;padding:10px 13px;border-radius:7px;
  font-size:14px;color:var(--text-2);
}
.hdr nav .sub-menu a:hover{background:var(--tint-2);color:var(--text)}
.hdr nav .menu-item-has-children > a::after{
  content:'';display:inline-block;margin-left:6px;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px);
}
@media(max-width:1000px){
  .hdr nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:none;box-shadow:none;
    padding:0 0 0 16px;margin:0;
  }
  .hdr nav .sub-menu a{padding:10px 0;font-size:13.5px;border-bottom:none}
  .hdr nav .menu-item-has-children > a::after{display:none}
}

/* --- poziv ispod poređenja troškova --- */
.vs__cta{
  margin-top:26px;padding:26px 30px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.vs__cta p{
  margin:0;color:var(--text-2);font-size:15px;max-width:640px;
}
.vs__cta .btn{flex:none}
@media(max-width:760px){
  .vs__cta{padding:22px 20px}
  .vs__cta .btn{width:100%}
}

/* podmeni, sitna doterivanja uz novu strukturu liste */
.hdr nav ul.meni > li{position:relative}
.hdr nav .sub-menu{list-style:none}
.hdr nav .sub-menu li{margin:0}
@media(max-width:1000px){
  .hdr nav ul.meni > li{border-bottom:none}
  .hdr nav .sub-menu{padding-left:14px}
}

/* --- polje za pretragu, na 404 i u rezultatima --- */
.trazi{display:flex;gap:10px;max-width:460px;flex-wrap:wrap}
.trazi input[type=search]{
  flex:1 1 220px;background:var(--deep);border:1px solid var(--line);
  border-radius:8px;padding:13px 16px;color:var(--text);
  font-family:var(--body);font-size:15px;transition:border-color .2s;
}
.trazi input[type=search]::placeholder{color:var(--text-3)}
.trazi input[type=search]:focus{border-color:var(--orange);outline:none}
.trazi .btn{flex:none}