/* ===================== IT TECH — STYLE v3.4 (header fix) ===================== */
:root{
  --bg:#0a0a0f; --bg-2:#101016; --card:#0f0f18; --text:#fff;
  --muted:rgba(255,255,255,.84); --muted2:rgba(255,255,255,.66); --border:rgba(136,100,182,.26);
  --primary:#29058e; --accent:#8864b6; --accent2:#29058e;
  --s-1:6px; --s-2:10px; --s-3:14px; --s-4:18px; --s-5:24px; --s-6:32px; --s-7:44px; --s-8:56px; --s-9:72px; --s-10:92px;
  --radius:20px; --radius-lg:26px; --shadow:0 10px 30px rgba(0,0,0,.35); --glow:0 0 18px rgba(136,100,182,.55);
  --container-w:min(1200px, 92vw); --container-pad:clamp(18px,3.4vw,42px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Exo 2',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.03em;line-height:1.6;overflow-x:hidden
}

.container{width:var(--container-w);margin-inline:auto;padding-inline:var(--container-pad)}
.center{text-align:center}.normalcase{text-transform:none!important;letter-spacing:.02em}
.lead{font-size:1.08rem;color:var(--muted)}
.reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s ease,transform .6s ease}
.reveal.reveal-in{opacity:1;transform:none}
.section{scroll-margin-top:88px;isolation:isolate;padding:clamp(54px,6.6vw,92px) 0;position:relative}
.section:first-of-type{padding-top:clamp(36px,4.8vw,68px)}
.scanline{position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 2px,transparent 4px)}
#particles{position:fixed;inset:0;z-index:-1;display:block}

h1,h2,h3,h4{letter-spacing:.06em;margin:0 0 var(--s-3)}
h1{font-size:clamp(2rem,3.5vw + .6rem,3.1rem);font-weight:800;line-height:1.12}
h2{font-size:clamp(1.6rem,2.2vw + .5rem,2.2rem);font-weight:800;line-height:1.15}
h3{font-size:clamp(1.2rem,1.3vw + .4rem,1.4rem);font-weight:800;line-height:1.18}
p{margin:0 0 var(--s-3);color:var(--muted)}
a{color:var(--text);text-decoration:none}

.gradient-text{
  background:linear-gradient(90deg,#fff,var(--accent),var(--primary));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:textShine 5s ease-in-out infinite alternate
}
@keyframes textShine{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.glow{text-shadow:0 0 10px var(--accent),0 0 20px var(--accent)}
.glow-secondary{text-shadow:0 0 10px var(--primary),0 0 20px var(--primary)}

/* ===================== Header ===================== */
.site-header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(10,10,15,.60);
  border-bottom:1px solid rgba(136,100,182,.20);
  transition:all .28s ease;
}
.site-header.scrolled{
  padding-block:6px!important;box-shadow:0 6px 24px rgba(41,5,142,.25);
  background:rgba(10,10,15,.94);border-bottom:1px solid rgba(136,100,182,.25)
}

/* Header traka (logo | nav | CTA) */
.header-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;gap:var(--s-4);
}

/* Logo – jedinstveno pravilo (bez konflikata) */
.site-header .logo{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.12em;font-size:1.12rem}
.site-header .logo span{background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.site-header .logo img{max-height:42px;width:auto;display:block;object-fit:contain}
@media (max-width:680px){.site-header .logo img{max-height:36px}}

/* Navigacija */
.main-nav{flex:1;display:flex;align-items:center;justify-content:flex-end;position:relative}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:10px;background:#0d0d15;color:#fff;align-items:center;justify-content:center;margin-left:auto}
.nav-toggle .bar{display:block;width:22px;height:2px;background:#fff;margin:3px auto}

/* NAV lista – mobile-first (skrivena dok se ne otvori) */
.nav-list{
  list-style:none;margin:0;padding:0;gap:var(--s-3);align-items:center;
  display:none;
  position:absolute;right:0;top:calc(100% + 10px);
  background:#0d0d15;border:1px solid var(--border);border-radius:14px;
  padding:10px;flex-direction:column;min-width:220px;z-index:2000
}
.nav-list.open{display:flex}
.nav-list a{display:inline-block;padding:8px 12px;border-radius:999px;color:#fff;transition:all .22s ease;font-weight:700;white-space:nowrap}
.nav-list a:hover{color:var(--accent);text-shadow:0 0 10px var(--accent)}
.nav-list a.active{border:1px solid var(--border);background:rgba(136,100,182,.10)}

/* CTA kontrola (bez dupliranja) */
.only-mobile{display:none}
.header-cta{flex-shrink:0}

/* Desktop reset: meni u liniji, CTA vidljiv, mobile CTA skriven */
@media (min-width:901px){
  .nav-toggle{display:none}
  .main-nav{position:static}
  .nav-list{
    display:flex !important;position:static;background:transparent;border:0;padding:0;
    flex-direction:row;min-width:auto;z-index:auto
  }
  .nav-list li.only-mobile{display:none !important}
  .header-cta{display:inline-flex !important}
}

/* Mobile: burger + dropdown, desktop CTA skriven, mobile CTA u meniju */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .header-cta{display:none !important}
  .nav-list li.only-mobile{display:block !important}
}

/* ===================== Buttons ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--border);color:#fff;background:#0d0d15;letter-spacing:.06em;font-weight:800;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;max-width:100%;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 22px rgba(136,100,182,.18);border-color:var(--accent)}
.btn-small{padding:8px 12px;font-size:.9rem}
.btn-lg{padding:14px 22px;font-size:1.02rem}
.btn-xl{padding:16px 26px;font-size:1.08rem}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-ghost:hover{background:rgba(136,100,182,.10)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;position:relative;overflow:hidden}
.btn-accent::before{content:"";position:absolute;top:-50%;left:-60%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.22),transparent);transform:rotate(45deg);animation:shine 2.4s linear infinite;opacity:.65;pointer-events:none}
@keyframes shine{0%{left:-60%}100%{left:110%}}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:flex-start;margin-top:var(--s-4)}
.cta-row .btn{min-width:220px}
@media (max-width:520px){.cta-row{justify-content:center}.cta-row .btn{min-width:unset;width:100%}}
.pulse{animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(136,100,182,.6)}70%{box-shadow:0 0 0 18px rgba(136,100,182,0)}100%{box-shadow:0 0 0 0 rgba(136,100,182,0)}}

/* ===================== Hero (centriran) ===================== */
.hero{min-height:clamp(72vh,86vh,92vh);display:grid;place-items:center;overflow:hidden;padding:clamp(40px,6vw,68px) 0 var(--s-8)}
.hero-inner{width:100%}
@media (min-width:1100px){
  .hero-inner{display:flex;align-items:center;justify-content:center;gap:clamp(32px,6vw,72px)}
  .hero-copy{flex:0 1 560px}
  .hero-visual{flex:0 1 520px}
}
@media (max-width:1099.98px){
  .hero-inner{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
  .hero-visual{order:-1;display:grid;place-items:center}
}
.hero-copy{position:relative;z-index:2;max-width:720px}
.hero-visual{position:relative;z-index:1}
.trust-row{margin-top:var(--s-4);display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:flex-end}
.trust-item{display:flex;flex-direction:column;align-items:flex-start}
.trust-item .count{font-size:1.6rem;font-weight:800;letter-spacing:.06em}
.trust-item small{color:var(--muted2);margin-top:2px}
.trust-item .label{border:1px solid var(--border);padding:4px 10px;border-radius:999px;font-weight:800}

.parallax{position:absolute;inset:0;pointer-events:none;z-index:0}
.p-layer{position:absolute;width:40vmax;height:40vmax;filter:blur(40px);opacity:.22;border-radius:999px}
.p1{top:-10vmax;left:-10vmax;background:radial-gradient(circle,rgba(136,100,182,.6),transparent 60%)}
.p2{bottom:-12vmax;right:-8vmax;background:radial-gradient(circle,rgba(41,5,142,.7),transparent 60%)}
.p3{top:10vmax;right:35%;width:28vmax;height:28vmax;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 60%)}

/* Orb + spori sateliti */
.orb{position:relative;width:min(420px,80vw);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),rgba(136,100,182,.10) 60%,transparent 70%);border:1px solid var(--border);box-shadow:var(--glow)}
.lottie-hero{position:absolute;inset:0}
.core{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,.2));box-shadow:0 0 40px rgba(255,255,255,.35),0 0 80px rgba(136,100,182,.35) inset}
.orb-glow{position:absolute;inset:-18px;border-radius:inherit;pointer-events:none;box-shadow:0 0 60px rgba(136,100,182,.25),inset 0 0 90px rgba(136,100,182,.25)}
.rings .ring{fill:none;stroke:rgba(136,100,182,.35);stroke-width:1.5;transform-origin:110px 110px;animation:spin 20s linear infinite}
.rings .ring:nth-child(2){animation-duration:16s;opacity:.7}
.rings .ring:nth-child(3){animation-duration:12s;opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}

/* sateliti — ultra spori */
.orb .satellite{position:absolute;top:50%;left:50%;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#ffffff,rgba(255,255,255,.25));filter:drop-shadow(0 0 12px rgba(136,100,182,.45));opacity:.9;pointer-events:none;z-index:3}
.orb .s1{animation:orbit1 180s linear infinite}
.orb .s2{width:14px;height:14px;opacity:.75;animation:orbit2 300s linear infinite reverse}
@keyframes orbit1{from{transform:translate(-50%,-50%) rotate(0) translateX(120px)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(120px)}}
@keyframes orbit2{from{transform:translate(-50%,-50%) rotate(0) translateX(70px)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(70px)}}

/* ===================== Grids & Cards ===================== */
.grid{display:grid;gap:clamp(var(--s-3),2.2vw,var(--s-5))}
.services{grid-template-columns:repeat(4,1fr);margin-bottom:var(--s-7)}
.why-grid{grid-template-columns:repeat(3,1fr)}
.ai-grid{grid-template-columns:repeat(3,1fr)}
.cases{grid-template-columns:repeat(3,1fr)}

.card,.ai-card,.case,.why-card{
  position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:clamp(var(--s-4),2.2vw,var(--s-5));
  box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease
}
.neon{box-shadow:var(--shadow),0 0 0 1px rgba(136,100,182,.08),0 0 20px rgba(136,100,182,.18)}
.card.fx,.ai-card.fx,.case.fx-box{background:rgba(25,25,35,.60);border:1px solid rgba(136,100,182,.22);backdrop-filter:blur(2px)}
.card.fx::before,.ai-card.fx::before,.case.fx-box::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(41,5,142,.10),rgba(136,100,182,.10));opacity:0;transition:opacity .3s ease}
.card.fx:hover::before,.ai-card.fx:hover::before,.case.fx-box:hover::before{opacity:1}
.card.fx:hover,.ai-card.fx:hover,.case.fx-box:hover{transform:translateY(-10px) scale(1.02) rotate(.6deg);border-color:var(--accent);box-shadow:0 16px 40px rgba(41,5,142,.28)}
@media (max-width:1100px){.card.fx:hover,.ai-card.fx:hover,.case.fx-box:hover{transform:translateY(-6px) scale(1.01)}}
@media (max-width:680px){.card.fx:hover,.ai-card.fx:hover,.case.fx-box:hover{transform:none}}

.icon{width:46px;height:46px;border-radius:12px;margin-bottom:var(--s-3);background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.2) 40%,rgba(136,100,182,.35) 70%,transparent 72%),linear-gradient(135deg,rgba(41,5,142,.8),rgba(136,100,182,.8));box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .3s ease,filter .3s ease}
.card:hover .icon,.ai-card:hover .icon{transform:scale(1.12) rotate(10deg);filter:drop-shadow(0 0 12px rgba(136,100,182,.45))}

/* Slika u kartici */
.thumb{
  margin-bottom:clamp(12px,1.5vw,18px);
  padding:clamp(10px,1.2vw,14px);
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(20,20,30,.78);
  box-shadow:inset 0 0 0 1px rgba(136,100,182,.10);
}
.thumb-media{display:block;width:100%;height:clamp(170px,26vw,240px);border-radius:10px;object-fit:cover}

.case-body{margin-top:var(--s-3)}
.badge-new::after{content:"NOVA";position:absolute;top:12px;right:12px;font-size:.7rem;font-weight:900;letter-spacing:.12em;padding:4px 8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--primary));box-shadow:var(--glow)}
.btn-chip{background:rgba(136,100,182,.10);border:1px solid rgba(136,100,182,.35);padding:8px 12px;font-size:.9rem;border-radius:999px}
.btn-chip:hover{background:rgba(136,100,182,.18)}
.btn-stack{margin-top:var(--s-6);position:relative;z-index:2}
.fx-box{border:1px solid rgba(136,100,182,.22)!important}
.fx-box:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 12px 32px rgba(41,5,142,.24)}
.section-head{margin-bottom:clamp(var(--s-4),2.2vw,var(--s-6))}
.section-head p{color:var(--muted)}

/* ===================== Timeline ===================== */
.timeline{position:relative;padding:var(--s-2) 0 0}
.timeline .line{--progress:0;position:absolute;left:18px;top:0;bottom:0;width:2px;border-radius:2px;background:linear-gradient(to bottom,var(--accent) 0,var(--accent) calc(var(--progress)*100%),rgba(136,100,182,.15) calc(var(--progress)*100%))}
.timeline .steps{margin-left:44px;display:grid;gap:var(--s-3)}
.timeline .step{position:relative;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:14px;color:var(--muted);transition:all .25s ease}
.timeline .step span{position:absolute;left:-38px;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--primary));box-shadow:var(--glow)}
.timeline .step.active{border-color:var(--accent);color:#fff}

/* ===================== AI section ===================== */
.section-ai{position:relative;overflow:hidden}
.ai-wrap{position:relative;z-index:1}
.section-ai .section-head{margin-bottom:var(--s-4)}
.lottie-ai{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:min(880px,96%);opacity:.45;filter:drop-shadow(0 0 18px rgba(136,100,182,.35));pointer-events:none;z-index:0}
.ai-grid{position:relative;z-index:1;grid-template-columns:repeat(3,1fr)}
.ai-features{position:relative;z-index:1;margin-top:var(--s-4);display:grid;gap:var(--s-3);grid-template-columns:repeat(3,minmax(0,1fr))}
.ai-feature{padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:#0f0f18;color:var(--muted);text-align:center}
.ai-cta{margin-top:var(--s-5);text-align:center}
.ai-cta-text{font-size:1.05rem;color:#fff;margin-bottom:var(--s-3)}

/* ===================== CTA full ===================== */
.cta-full{background:radial-gradient(circle at 50% 0%,rgba(136,100,182,.18),transparent 60%)}

/* ===================== Footer ===================== */
.site-footer{background:rgba(10,10,15,.95);border-top:1px solid rgba(136,100,182,.2)}
.footer-grid{display:grid;grid-template-columns:1.1fr .6fr .8fr;gap:clamp(var(--s-3),2.2vw,var(--s-5));padding:var(--s-4) 0}
.footer-copy{color:var(--muted2)}
.footer-nav,.footer-contact{list-style:none;padding:0;margin:0}
.footer-nav li,.footer-contact li{margin:8px 0}
.footer-nav a:hover{color:var(--accent);text-shadow:0 0 10px var(--accent)}
.logo-footer{display:inline-block;margin-bottom:6px}
.footer-bottom{border-top:1px solid rgba(136,100,182,.2);padding:10px 0 24px;color:var(--muted2);text-align:center}

/* ===================== Forms ===================== */
input,textarea,select{background:#0f0f18;color:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(136,100,182,.2)}

/* ===================== Responsive grids ===================== */
@media (max-width:1100px){
  .services{grid-template-columns:repeat(3,1fr)}
  .why-grid,.cases{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .ai-grid{grid-template-columns:repeat(2,1fr)}
  .ai-features{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .services,.why-grid,.cases{grid-template-columns:1fr}
  .ai-grid{grid-template-columns:1fr}
  .ai-features{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}







/* ================= Cookie Consent ================= */
.cc-banner[hidden], .cc-modal[hidden]{ display:none !important; }

.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:4000;
  background:rgba(10,10,15,.96); border-top:1px solid var(--border);
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.cc-banner .cc-inner{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4);
  padding:clamp(14px,2.2vw,18px) var(--container-pad);
}
.cc-banner h4{ margin:0 0 6px; }
.cc-banner p{ margin:0; color:var(--muted); }
.cc-banner .cc-actions{ display:flex; gap:var(--s-3); flex-shrink:0; }

@media (max-width:820px){
  .cc-banner .cc-inner{ flex-direction:column; align-items:stretch; }
  .cc-banner .cc-actions{ justify-content:flex-end; flex-wrap:wrap; }
}

/* Modal */
.cc-modal{
  position:fixed; inset:0; z-index:5000; display:grid; place-items:center;
}
.cc-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
}
.cc-modal-card{
  position:relative; width:min(780px,94vw); max-height:88vh; overflow:auto;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.cc-modal-head, .cc-modal-foot{
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.cc-modal-foot{ border-bottom:0; border-top:1px solid var(--border); display:flex; gap:var(--s-3); justify-content:flex-end; }
.cc-modal-body{ padding:18px; }
.cc-close{
  background:transparent; color:#fff; border:1px solid var(--border); border-radius:10px;
  width:36px; height:36px; font-size:20px; line-height:1; cursor:pointer;
}

.cc-group{ display:grid; gap:var(--s-3); }
.cc-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(20,20,30,.6);
}
.cc-row p{ margin:6px 0 0; }

/* Switch */
.cc-switch{ position:relative; display:inline-block; width:54px; height:30px; }
.cc-switch input{ opacity:0; width:0; height:0; }
.cc-slider{
  position:absolute; cursor:pointer; inset:0; background:#555; border-radius:30px; transition:.2s;
  box-shadow:inset 0 0 0 1px rgba(136,100,182,.15);
}
.cc-slider:before{
  position:absolute; content:""; height:22px; width:22px; left:4px; top:4px;
  background:#fff; border-radius:50%; transition:.2s;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.cc-switch input:checked + .cc-slider{ background:linear-gradient(135deg,var(--accent),var(--primary)); }
.cc-switch input:checked + .cc-slider:before{ transform:translateX(24px); }




/* Zabrani scroll dok je cookie modal otvoren */
.cc-lock{ overflow: hidden; }





/* === Cookie: forsiraj POPUP mod, sakrij bottom banner === */
.cc-banner{ display:none !important; }
.cc-modal[hidden]{ display:none !important; }         /* sigurnost */
.cc-modal{
  position:fixed; inset:0; z-index:5000;              /* popup u sredini */
  display:grid; place-items:center;
}
.cc-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
}
.cc-lock{ overflow:hidden; }                           /* zabrani scroll dok je modal otvoren */