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

/* ── DARK THEME (default) ── */
:root,[data-theme="dark"]{
  --o:#FF6B00;
  --od:rgba(255,107,0,.13);
  --og:rgba(255,107,0,.32);
  --bg:#07070f;
  --bg2:#0b0b18;
  --sf:rgba(255,255,255,.045);
  --sf2:rgba(255,255,255,.08);
  --bd:rgba(255,255,255,.09);
  --tx:#f0f0f8;
  --mu:rgba(240,240,248,.52);
  --nav-bg:rgba(7,7,15,.92);
  --nav-scrolled:rgba(7,7,15,.98);
  --footer-bg:#040409;
  --card-bg:rgba(255,255,255,.045);
  --input-bg:rgba(255,255,255,.06);
  --input-placeholder:rgba(240,240,248,.26);
  --shadow:rgba(0,0,0,.7);
  --noise-opacity:.018;
  --particle-white:rgba(255,255,255,0.16);
  --toggle-bg:rgba(255,255,255,.08);
  --toggle-border:rgba(255,255,255,.09);
}

/* ── LIGHT THEME ── */
[data-theme="light"]{
  --o:#E85A00;
  --od:rgba(232,90,0,.12);
  --og:rgba(232,90,0,.28);
  --bg:#FFF8F3;
  --bg2:#FFF1E8;
  --sf:rgba(232,90,0,.06);
  --sf2:rgba(232,90,0,.10);
  --bd:rgba(180,80,0,.14);
  --tx:#1a0f08;
  --mu:rgba(26,15,8,.58);
  --nav-bg:rgba(232,90,0,1);
  --nav-scrolled:rgba(200,60,0,1);
  --footer-bg:#1a0f08;
  --card-bg:rgba(255,255,255,.85);
  --input-bg:rgba(255,255,255,.9);
  --input-placeholder:rgba(26,15,8,.35);
  --shadow:rgba(180,70,0,.18);
  --noise-opacity:.012;
  --particle-white:rgba(180,70,0,0.22);
  --toggle-bg:rgba(255,255,255,.22);
  --toggle-border:rgba(255,255,255,.35);
}

html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--tx);
  font-family:'Outfit',sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.1;font-weight:700;}
a{text-decoration:none;color:inherit;}

/* ── THEME TOGGLE ── */
.theme-toggle{
  position:relative;
  width:56px;
  height:28px;
  border-radius:50px;
  background:var(--toggle-bg);
  border:1px solid var(--toggle-border);
  cursor:pointer;
  flex-shrink:0;
  transition:all .3s;
  padding:0;
  display:flex;
  align-items:center;
}
.theme-toggle:hover{border-color:rgba(255,107,0,.4);box-shadow:0 0 14px rgba(255,107,0,.2);}
.tt-track{
  position:absolute;
  inset:3px;
  border-radius:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4px;
  pointer-events:none;
}
.tt-icon{font-size:.7rem;line-height:1;z-index:1;transition:opacity .3s;}
.tt-knob{
  position:absolute;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--o);
  box-shadow:0 0 8px var(--og);
  transition:left .3s cubic-bezier(.34,1.56,.64,1), background .3s;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.65rem;
}
[data-theme="light"] .tt-knob{
  left:calc(100% - 23px);
}
[data-theme="light"] .theme-toggle{
  background:rgba(255,255,255,.25);
  border-color:rgba(255,255,255,.4);
}
[data-theme="light"] .theme-toggle:hover{
  border-color:rgba(255,255,255,.7);
  box-shadow:0 0 14px rgba(255,255,255,.3);
}

/* ── NAV ── */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:var(--nav-bg);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd);
  transition:background .3s,padding .3s, border-color .4s;
}
nav.scrolled{background:var(--nav-scrolled);}

[data-theme="light"] nav{
  border-bottom-color:rgba(255,255,255,.15);
  box-shadow:0 2px 20px rgba(180,60,0,.25);
}

.logo{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:2.15rem;
  color:#fff;
  white-space:nowrap;
  flex-shrink:0;
  z-index:220;
}
.logo span{color:#fff;opacity:.7;}
[data-theme="dark"] .logo{color:#fff;}
[data-theme="dark"] .logo span{color:var(--o);opacity:1;}

.nav-links{
  display:none;
  gap:26px;
  list-style:none;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.nav-links a{
  color:rgba(255,255,255,.75);
  font-size:1.2rem;
  font-weight:500;
  transition:color .2s;
  white-space:nowrap;
}
.nav-links a:hover{color:#fff;}
[data-theme="dark"] .nav-links a{color:var(--mu);}
[data-theme="dark"] .nav-links a:hover{color:#fff;}

.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.nav-cta{display:none;}
.lang-t{
  display:none;
  border-radius:50px;
  padding:3px;
  gap:2px;
  flex-shrink:0;
  background:var(--toggle-bg);
  border:1px solid var(--toggle-border);
}
.lb{
  padding:5px 10px;
  border-radius:50px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.7);
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.72rem;
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  gap:4px;
}
.lb.active{background:rgba(255,255,255,.2);color:#fff;box-shadow:0 0 10px rgba(255,255,255,.1);}
[data-theme="dark"] .lb{color:var(--mu);}
[data-theme="dark"] .lb.active{background:var(--o);color:#fff;box-shadow:0 0 10px var(--og);}

.hbg{
  width:44px;height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;padding:0;flex-shrink:0;
}
.hbg span{width:20px;height:2px;background:#fff;border-radius:2px;display:block;}
.hbg:hover{border-color:rgba(255,255,255,.45);}
[data-theme="dark"] .hbg{background:rgba(255,255,255,.04);border-color:var(--bd);}
[data-theme="dark"] .hbg:hover{border-color:rgba(255,107,0,.35);box-shadow:0 0 14px rgba(255,107,0,.15);}

@media(min-width:860px){
  nav{padding:16px 5%;}
  .nav-links{display:flex;}
  .nav-cta{display:inline-flex;}
  .lang-t{display:flex;}
  .hbg{display:none;}
}

/* ── NAV CTA light mode ── */
[data-theme="light"] .nav-cta.btn-o{
  background:#fff;
  color:var(--o);
  box-shadow:0 0 22px rgba(255,255,255,.3);
}
[data-theme="light"] .nav-cta.btn-o:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(255,255,255,.5);
}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:50px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.88rem;cursor:pointer;border:none;transition:all .28s ease;white-space:nowrap;}
.btn-o{background:var(--o);color:#fff;box-shadow:0 0 22px var(--og);}
.btn-o:hover{transform:translateY(-2px);box-shadow:0 0 40px var(--og);}
.btn-g{background:var(--sf2);color:var(--tx);border:1px solid var(--bd);}
.btn-g:hover{background:var(--od);border-color:rgba(255,107,0,.45);color:var(--o);}

[data-theme="light"] .btn-g{
  background:rgba(255,255,255,.8);
  color:var(--tx);
  border-color:rgba(180,80,0,.2);
}
[data-theme="light"] .btn-g:hover{
  background:var(--od);
  border-color:var(--o);
  color:white;
}

/* ── MOBILE MENU ── */
.mob{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;
  padding:90px 24px 32px;gap:8px;
  background:rgba(7,7,15,.98);
  backdrop-filter:blur(24px);
  transform:translateX(100%);
  transition:transform .35s ease;
}
[data-theme="light"] .mob{background:rgba(232,90,0,.97);}
.mob.open{transform:translateX(0);}
.mob a{
  width:100%;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.35rem;
  color:#fff;transition:all .2s;padding:14px 0;display:block;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mob a:hover,.mob a:active{color:rgba(255,255,255,.65);padding-left:8px;}
[data-theme="dark"] .mob a:hover,[data-theme="dark"] .mob a:active{color:var(--o);}
.mob-x{
  position:absolute;top:18px;right:16px;
  width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;
}
.mob-lang{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.mob-lang .lb{font-size:.82rem;padding:8px 16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;}
.mob-lang .lb.active{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5);color:#fff;}
[data-theme="dark"] .mob-lang .lb{background:rgba(255,255,255,.04);border-color:var(--bd);color:var(--mu);}
[data-theme="dark"] .mob-lang .lb.active{background:var(--o);border-color:var(--o);color:#fff;}

/* ── HERO ── */
#hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;}
#cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:1;}
.b1{width:500px;height:500px;top:5%;right:-120px;background:radial-gradient(circle,rgba(255,107,0,.055),transparent 65%);}
.b2{width:350px;height:350px;bottom:10%;left:-90px;background:radial-gradient(circle,rgba(255,107,0,.04),transparent 65%);}
.b3{width:250px;height:250px;top:55%;right:12%;background:radial-gradient(circle,rgba(255,107,0,.07),transparent 65%);}

[data-theme="light"] .b1{background:radial-gradient(circle,rgba(255,120,30,.12),transparent 65%);}
[data-theme="light"] .b2{background:radial-gradient(circle,rgba(255,120,30,.08),transparent 65%);}
[data-theme="light"] .b3{background:radial-gradient(circle,rgba(255,120,30,.14),transparent 65%);}

.hero-in{position:relative;z-index:2;width:100%;padding:110px 20px 80px;}
.badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;
  border-radius:50px;background:var(--od);border:1px solid rgba(255,107,0,.28);
  color:var(--o);font-size:.72rem;font-weight:600;margin-bottom:20px;
  letter-spacing:.08em;text-transform:uppercase;animation:fadeUp .7s ease both;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--o);animation:pulse 2s infinite;flex-shrink:0;}
h1.ht{font-size:clamp(2rem,8vw,4.6rem);font-weight:700;line-height:1.1;margin-bottom:16px;letter-spacing:-.3px;animation:fadeUp .7s .1s ease both;}
h1.ht .ac{color:var(--o);}
h1.ht .ol{-webkit-text-stroke:1.5px rgba(255,107,0,.5);color:transparent;}
[data-theme="light"] h1.ht .ol{-webkit-text-stroke:1.5px var(--o);}
.hs{font-size:clamp(.9rem,2.5vw,1rem);color:var(--mu);max-width:500px;margin-bottom:28px;animation:fadeUp .7s .2s ease both;line-height:1.72;}
[data-theme="light"] .hs{color:rgba(26,15,8,.6);}
.hc{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp .7s .3s ease both;}
.hscr{position:absolute;bottom:26px;left:20px;z-index:2;display:flex;align-items:center;gap:10px;color:var(--mu);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;animation:fadeIn 1s .9s ease both;}
.hscr-l{width:30px;height:1px;background:var(--o);}
.hmock{display:none;}
@media(min-width:860px){
  .hero-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding:140px 5% 90px;max-width:1240px;margin:0 auto;}
  .hmock{display:block;animation:float 6s ease-in-out infinite,fadeIn .9s .4s ease both;opacity:.88;}
  .hscr{left:5%;}
}

/* mock window */
.mwin{background:rgba(11,11,24,.93);border:1px solid rgba(255,107,0,.18);border-radius:16px;box-shadow:0 40px 90px rgba(0,0,0,.7);}
[data-theme="light"] .mwin{background:rgba(255,255,255,.92);border-color:rgba(232,90,0,.2);box-shadow:0 40px 90px rgba(180,70,0,.18);}
.mbar{padding:11px 15px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:6px;}
[data-theme="light"] .mbar{background:rgba(232,90,0,.06);}
.mdot{width:10px;height:10px;border-radius:50%;}
.mbdy{padding:18px;}
.ml{height:8px;border-radius:4px;margin-bottom:9px;}
[data-theme="light"] .ml{background:rgba(26,15,8,.08) !important;}
.mgr{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;}
.mc{height:64px;border-radius:9px;background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.15);display:flex;align-items:center;justify-content:center;}
.mc .b{height:6px;border-radius:3px;background:var(--o);opacity:.6;}
.mst{display:flex;gap:9px;margin-top:12px;}
.sch{flex:1;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--bd);font-size:.64rem;color:var(--mu);}
[data-theme="light"] .sch{background:rgba(232,90,0,.06);border-color:rgba(180,80,0,.15);color:rgba(26,15,8,.55);}
.sv{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:var(--o);display:block;}

/* ── SECTIONS ── */
.sw{width:100%;transition:background .4s;}
.sw.alt{background:var(--bg2);}
section{padding:clamp(54px,8vw,100px) 20px;max-width:1240px;margin:0 auto;}
@media(min-width:600px){section{padding-left:5%;padding-right:5%;}}
.slbl{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--o);margin-bottom:12px;}
.slbl::before{content:'';display:block;width:20px;height:2px;background:var(--o);border-radius:2px;}
.sti{font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:700;margin-bottom:12px;letter-spacing:-.2px;}
.ssu{color:var(--mu);font-size:.95rem;max-width:520px;line-height:1.7;}

/* ── ABOUT ── */
.abg{display:flex;flex-direction:column;gap:30px;margin-top:38px;}
@media(min-width:860px){.abg{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}}
.abt p{color:var(--mu);margin-bottom:13px;font-size:.95rem;line-height:1.75;}
.sts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;}
.sb{
  padding:18px;
  background:var(--card-bg);
  border:1px solid var(--bd);
  border-radius:14px;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.sb:hover{border-color:var(--o);transform:translateY(-3px);box-shadow:0 8px 30px var(--od);}
.sn{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.85rem;color:var(--o);}

.diagram {
  padding: 20px;
}

.flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.step {
  background: rgba(255,107,0,0.1);
  border: 1px solid rgba(255,107,0,0.2);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  color: #ff7a00;
  min-width: 90px;
}

.step span {
  display: block;
  font-size: 12px;
  margin-top: 5px;
}

.arrow {
  color: #ff7a00;
  font-size: 20px;
}
@media(min-width:860px){
  .avi{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
    border-radius:20px;
    overflow:hidden;
    position:relative;

    /* 🔥 TVOJA SLIKA */
    
  }

  /* overlay glow */
  .avi::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,107,0,0.2), transparent 60%);
  }
}
[data-theme="light"] .avi{background:linear-gradient(135deg,rgba(232,90,0,.12),transparent 70%);border-color:rgba(232,90,0,.2);}

/* ── SERVICES ── */
.srvg{display:grid;grid-template-columns:1fr;gap:14px;margin-top:38px;}
@media(min-width:600px){.srvg{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.srvg{grid-template-columns:repeat(3,1fr);}}
.sc{
  padding:26px 22px;
  background:var(--card-bg);
  border:1px solid var(--bd);
  border-radius:18px;
  position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.sc::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,107,0,.08),transparent 70%);opacity:0;transition:opacity .3s;}
.sc:hover{transform:translateY(-6px);border-color:rgba(255,107,0,.3);box-shadow:0 22px 50px var(--shadow);}
.sc:hover::before{opacity:1;}
[data-theme="light"] .sc{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);}
[data-theme="light"] .sc:hover{box-shadow:0 22px 50px rgba(180,70,0,.15);}
.sico{width:50px;height:50px;border-radius:13px;background:var(--od);border:1px solid rgba(255,107,0,.22);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:17px;transition:box-shadow .3s;}
.sc:hover .sico{box-shadow:0 0 20px rgba(255,107,0,.3);}
.sc h3{font-size:1.05rem;font-weight:700;margin-bottom:9px;}
.sc p{color:var(--mu);font-size:.9rem;line-height:1.7;}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;}
.tag{
  padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:500;
  background:rgba(255,255,255,.05);border:1px solid var(--bd);color:var(--mu);
}
[data-theme="light"] .tag{background:rgba(232,90,0,.07);border-color:rgba(180,80,0,.15);color:rgba(26,15,8,.55);}

/* ── PORTFOLIO ── */
.pg{display:grid;grid-template-columns:1fr;gap:14px;margin-top:38px;}
@media(min-width:600px){.pg{grid-template-columns:1fr 1fr;}}
.pi{border-radius:18px;overflow:hidden;position:relative;border:1px solid var(--bd);min-height:200px;cursor:pointer;}
.pi.t{min-height:300px;}
@media(min-width:600px){.pi{min-height:220px;}.pi.t{min-height:340px;}}
.pbg{position:absolute;inset:0;transition:transform .5s ease;}
.pi:hover .pbg{transform:scale(1.05);}
.pdeco{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:clamp(2.8rem,7vw,5rem);opacity:.14;pointer-events:none;filter:drop-shadow(0 0 20px var(--o));transition:opacity .3s,transform .5s;}
.pi:hover .pdeco{opacity:.26;transform:scale(1.05);}
.ptag{position:absolute;top:14px;right:14px;padding:4px 11px;border-radius:20px;background:var(--o);color:#fff;font-size:.65rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;z-index:3;}
.pov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(7,7,15,.96) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;z-index:2;}
[data-theme="light"] .pov{background:linear-gradient(180deg,transparent 20%,rgba(30,10,0,.88) 100%);}
@media(min-width:860px){.pov{opacity:0;transition:opacity .3s;}.pi:hover .pov{opacity:1;}}
.pov h4{font-size:1rem;font-weight:700;margin-bottom:5px;color:#fff;}
.pov p{color:rgba(255,255,255,.65);font-size:.82rem;line-height:1.5;}
.pa{position:absolute;bottom:18px;right:18px;width:34px;height:34px;border-radius:50%;background:var(--o);display:flex;align-items:center;justify-content:center;font-size:.85rem;z-index:3;color:#fff;}
@media(min-width:860px){.pa{transform:scale(0);transition:transform .3s;}.pi:hover .pa{transform:scale(1);}}
.pb1{background:linear-gradient(135deg,#0e0a1e,#1e0f40,#0a1030);}
.pb2{background:linear-gradient(135deg,#0a1e16,#0e2c1a,#162808);}
.pb3{background:linear-gradient(135deg,#1e170a,#2c1e0a,#281008);}
.pb4{background:linear-gradient(135deg,#0a1420,#0e1e30,#180e20);}
.pb1::after,.pb2::after,.pb3::after,.pb4::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 40px);}

/* ── PROCESS ── */
.pst{display:grid;grid-template-columns:1fr 1fr;gap:26px 14px;margin-top:38px;}
@media(min-width:860px){
  .pst{grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
  .pst::before{content:'';position:absolute;top:31px;left:13%;right:13%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,0,.38),transparent);}
}
.ps{text-align:center;padding:0 8px;}
.psn{
  width:62px;height:62px;border-radius:50%;
  background:var(--od);border:1px solid rgba(255,107,0,.3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 15px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:var(--o);
  position:relative;z-index:1;transition:box-shadow .3s,transform .3s;
}
.ps:hover .psn{box-shadow:0 0 26px rgba(255,107,0,.4);transform:scale(1.07);}
.ps h3{font-size:.95rem;font-weight:700;margin-bottom:7px;}
.ps p{color:var(--mu);font-size:.85rem;line-height:1.6;}

/* ── TESTIMONIALS ── */
.tg{display:grid;grid-template-columns:1fr;gap:13px;margin-top:38px;}
@media(min-width:600px){.tg{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.tg{grid-template-columns:repeat(3,1fr);}}
.tc{
  padding:24px;
  background:var(--card-bg);
  border:1px solid var(--bd);
  border-radius:18px;
  transition:transform .28s,border-color .28s,box-shadow .28s;
}
.tc:hover{transform:translateY(-4px);border-color:rgba(255,107,0,.22);box-shadow:0 12px 40px var(--shadow);}
[data-theme="light"] .tc{background:rgba(255,255,255,.8);}
[data-theme="light"] .tc:hover{box-shadow:0 12px 40px rgba(180,70,0,.12);}
.stars{color:var(--o);font-size:.88rem;margin-bottom:11px;letter-spacing:2px;}
.tq{color:var(--mu);font-size:.9rem;line-height:1.75;font-style:italic;}
.tau{display:flex;align-items:center;gap:10px;margin-top:18px;}
.tav{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:.82rem;background:var(--od);border:1px solid rgba(255,107,0,.22);color:var(--o);}
.tai strong{display:block;font-size:.88rem;font-weight:600;}
.tai span{color:var(--mu);font-size:.76rem;}

/* ── CONTACT ── */
.cog{display:flex;flex-direction:column;gap:34px;margin-top:38px;}
@media(min-width:860px){.cog{display:grid;grid-template-columns:1fr 1fr;gap:60px;}}
.ci h3{font-size:clamp(1.25rem,3vw,1.75rem);font-weight:700;margin-bottom:12px;line-height:1.25;}
.ci p{color:var(--mu);margin-bottom:24px;font-size:.93rem;line-height:1.7;}
.cls{display:flex;flex-direction:column;gap:12px;}
.cl{display:flex;align-items:center;gap:12px;color:var(--mu);font-size:.92rem;transition:color .2s;overflow-wrap:anywhere;word-break:break-word;}
.cl:hover{color:var(--o);}
.cli{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  background:var(--card-bg);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:border-color .2s,background .2s;
}
.cl:hover .cli{background:var(--od);border-color:rgba(255,107,0,.3);}
form{display:flex;flex-direction:column;gap:12px;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){.fr{grid-template-columns:1fr;}}
input,textarea{
  width:100%;padding:13px 16px;
  background:var(--input-bg);
  border:1px solid var(--bd);
  border-radius:11px;
  color:var(--tx);
  font-family:'Outfit',sans-serif;font-size:.93rem;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .4s;
  resize:none;-webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--input-placeholder);}
input:focus,textarea:focus{border-color:rgba(255,107,0,.4);box-shadow:0 0 0 3px rgba(255,107,0,.07);}
textarea{height:120px;}

/* ── FOOTER ── */
footer{
  background:var(--footer-bg);
  border-top:1px solid var(--bd);
  padding:22px 20px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  transition:background .4s;
}
@media(min-width:600px){footer{flex-direction:row;justify-content:space-between;padding:22px 5%;text-align:left;}}
.fl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:#fff;}
.fl span{color:var(--o);}
[data-theme="light"] footer{border-top-color:rgba(255,255,255,.12);}
[data-theme="light"] .fl span{color:rgba(255,180,100,1);}
footer p{color:rgba(255,255,255,.45);font-size:.8rem;}

/* ── CURSOR ── */
.cur{position:fixed;width:9px;height:9px;border-radius:50%;background:var(--o);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);display:none;}
.curr{position:fixed;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,107,0,.32);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .26s,height .26s;display:none;}
@media(min-width:860px){.cur{display:block;}.curr{display:block;}}

/* ── NOISE ── */
.noise{position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:var(--noise-opacity);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,0,.5)}50%{box-shadow:0 0 0 6px rgba(255,107,0,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.rev{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease;}
.rev.on{opacity:1;transform:translateY(0);}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}

/* ── MOBILE OPTIMIZATION ── */
@media(max-width:859px){
  .hero-in{padding:110px 16px 70px;}
  .hc{flex-direction:column;align-items:stretch;}
  .hc .btn{width:100%;justify-content:center;}
  .hscr{left:16px;bottom:18px;}
  .badge{font-size:.66rem;}
  h1.ht{font-size:clamp(2rem,11vw,3.1rem);}
  .hs{font-size:.95rem;max-width:100%;}
  .sts{grid-template-columns:1fr 1fr;}
  .fr{grid-template-columns:1fr;}
  .cog,.abg{gap:24px;}
  section{padding-left:16px;padding-right:16px;}
  .cur,.curr{display:none !important;}
}

/* ── LIGHT HERO HEADING COLOR ── */
[data-theme="light"] h1.ht{color:#1a0f08;}

/* light hero badge */
[data-theme="light"] .badge{
  background:rgba(255,255,255,.25);
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
[data-theme="light"] .badge .dot{background:#fff;animation:pulseWhite 2s infinite;}
@keyframes pulseWhite{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}

/* light hero heading white */
[data-theme="light"] h1.ht{color:#fff;}
[data-theme="light"] h1.ht .ac{color:#fff;}
[data-theme="light"] h1.ht .ol{-webkit-text-stroke:2px rgba(255,255,255,.6);color:transparent;}
[data-theme="light"] .hs{color:rgba(255,255,255,.8);}
[data-theme="light"] .hscr{color:rgba(255,255,255,.6);}
[data-theme="light"] .hscr-l{background:rgba(255,255,255,.7);}

/* light hero background */
[data-theme="light"] #hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, rgba(232,90,0,.95) 0%, rgba(200,55,0,.85) 40%, rgba(255,140,50,.7) 100%);
  z-index:1;
}
[data-theme="light"] #cv{opacity:.3;}
[data-theme="light"] .blob{display:none;}

/* hero section wrapper for light */
[data-theme="light"] .hero-in{position:relative;z-index:2;}

/* light stat box */
[data-theme="light"] .sb{background:rgba(255,255,255,.9);border-color:rgba(180,80,0,.15);}

/* light process step */
[data-theme="light"] .psn{background:rgba(232,90,0,.1);border-color:rgba(232,90,0,.3);}
[data-theme="light"] .pst::before{background:linear-gradient(90deg,transparent,rgba(232,90,0,.35),transparent);}
:root {
  --loader-bg: #111111;
  --loader-primary-light: #ffd6a3;
  --loader-primary-mid: #ff9f43;
  --loader-primary-dark: #ff6b00;
  --loader-primary-deep: #a84300;
  --loader-transition: 0.4s;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(6px);
   flex-direction: column;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.microchip {
  display: block;
  width: 130px;
  height: 130px;
  color: var(--loader-primary-dark);
}

.microchip__center,
.microchip__dot,
.microchip__line,
.microchip__lines,
.microchip__spark,
.microchip__wave {
  animation-duration: 5s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-iteration-count: infinite;
}

.microchip__core,
.microchip__dot {
  fill: var(--loader-primary-dark);
  transition: fill var(--loader-transition);
}

.microchip__center,
.microchip__wave {
  transform-origin: 25px 25px;
}

.microchip__center {
  animation-name: center-scale;
}

.microchip__dot--1 { animation-name: dot-scale1; transform-origin: 3px 38px; }
.microchip__dot--2 { animation-name: dot-scale2; transform-origin: 3px 54px; }
.microchip__dot--3 { animation-name: dot-scale3; transform-origin: 3px 70px; }
.microchip__dot--4 { animation-name: dot-scale4; transform-origin: 3px 3px; }
.microchip__dot--5 { animation-name: dot-scale5; transform-origin: 20px 3px; }
.microchip__dot--6 { animation-name: dot-scale6; transform-origin: 3px 30px; }
.microchip__dot--7 { animation-name: dot-scale7; transform-origin: 37px 3px; }
.microchip__dot--8 { animation-name: dot-scale8; transform-origin: 54px 3px; }
.microchip__dot--9 { animation-name: dot-scale9; transform-origin: 71px 3px; }

.microchip__line,
.microchip__spark,
.microchip__wave {
  transition: stroke var(--loader-transition);
}

.microchip__line {
  stroke: var(--loader-primary-dark);
}

.microchip__line--1 { animation-name: line-draw1; }
.microchip__line--2 { animation-name: line-draw2; }
.microchip__line--3 { animation-name: line-draw3; }
.microchip__line--4 { animation-name: line-draw4; }
.microchip__line--5 { animation-name: line-draw5; }
.microchip__line--6 { animation-name: line-draw6; }
.microchip__line--7 { animation-name: line-draw7; }
.microchip__line--8 { animation-name: line-draw8; }
.microchip__line--9 { animation-name: line-draw9; }

.microchip__lines {
  animation-name: lines-scale;
  transform-origin: 54px 54px;
}

.microchip__spark,
.microchip__wave {
  animation-timing-function: linear;
  stroke: var(--loader-primary-mid);
}

.microchip__spark--1 { animation-name: spark1; }
.microchip__spark--2 { animation-name: spark2; }
.microchip__spark--3 { animation-name: spark3; }
.microchip__spark--4 { animation-name: spark4; }
.microchip__spark--5 { animation-name: spark5; }
.microchip__spark--6 { animation-name: spark6; }
.microchip__spark--7 { animation-name: spark7; }
.microchip__spark--8 { animation-name: spark8; }
.microchip__spark--9 { animation-name: spark9; }

.microchip__wave--1 { animation-name: wave-scale1; }
.microchip__wave--2 { animation-name: wave-scale2; }

/* ANIMATIONS */
@keyframes center-scale {
  from, to { transform: scale(0); }
  12.5%, 75% { transform: scale(1); }
}

@keyframes dot-scale1 {
  from, 20%, 81.25%, to { transform: scale(0); }
  32.5%, 68.75% { transform: scale(1); }
}
@keyframes dot-scale2 {
  from, 10.5%, 87.5%, to { transform: scale(0); }
  23%, 75% { transform: scale(1); }
}
@keyframes dot-scale3 {
  from, 20%, 81.25%, to { transform: scale(0); }
  32.5%, 68.75% { transform: scale(1); }
}
@keyframes dot-scale4 {
  from, 20%, 81.25%, to { transform: scale(0); }
  32.5%, 68.75% { transform: scale(1); }
}
@keyframes dot-scale5 {
  from, 11.5%, 87.5%, to { transform: scale(0); }
  24%, 75% { transform: scale(1); }
}
@keyframes dot-scale6 {
  from, 14.5%, 85%, to { transform: scale(0); }
  27%, 72.5% { transform: scale(1); }
}
@keyframes dot-scale7 {
  from, 20%, 81.25%, to { transform: scale(0); }
  32.5%, 68.75% { transform: scale(1); }
}
@keyframes dot-scale8 {
  from, 11%, 87.5%, to { transform: scale(0); }
  23.5%, 75% { transform: scale(1); }
}
@keyframes dot-scale9 {
  from, 20%, 81.25%, to { transform: scale(0); }
  32.5%, 68.75% { transform: scale(1); }
}

@keyframes line-draw1 {
  from, 93.75%, to { stroke-dashoffset: 59; }
  25%, 68.75% { stroke-dashoffset: 17; }
}
@keyframes line-draw2 {
  from, 93.75%, to { stroke-dashoffset: 42; }
  25%, 68.75% { stroke-dashoffset: 0; }
}
@keyframes line-draw3 {
  from, 93.75%, to { stroke-dashoffset: 59; }
  25%, 68.75% { stroke-dashoffset: 17; }
}
@keyframes line-draw4 {
  from, 93.75%, to { stroke-dashoffset: 78; }
  25%, 68.75% { stroke-dashoffset: 18; }
}
@keyframes line-draw5 {
  from, 93.75%, to { stroke-dashoffset: 60; }
  25%, 68.75% { stroke-dashoffset: 0; }
}
@keyframes line-draw6 {
  from, 93.75%, to { stroke-dashoffset: 91; }
  25%, 68.75% { stroke-dashoffset: 31; }
}
@keyframes line-draw7 {
  from, 93.75%, to { stroke-dashoffset: 60; }
  25%, 68.75% { stroke-dashoffset: 17; }
}
@keyframes line-draw8 {
  from, 93.75%, to { stroke-dashoffset: 43; }
  25%, 68.75% { stroke-dashoffset: 0; }
}
@keyframes line-draw9 {
  from, 93.75%, to { stroke-dashoffset: 60; }
  25%, 68.75% { stroke-dashoffset: 17; }
}

@keyframes lines-scale {
  from {
    opacity: 1;
    transform: scale(0);
  }
  12.5%, 75% {
    opacity: 1;
    transform: scale(1);
  }
  93.75%, to {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes spark1 {
  from, 27.5% { stroke-dashoffset: 59; }
  50%, 52.5% { stroke-dashoffset: -25; }
  75%, to { stroke-dashoffset: -109; }
}
@keyframes spark2 {
  from, 27.5% { stroke-dashoffset: 42; }
  50%, 52.5% { stroke-dashoffset: -42; }
  75%, to { stroke-dashoffset: -126; }
}
@keyframes spark3 {
  from, 27.5% { stroke-dashoffset: 59; }
  50%, 52.5% { stroke-dashoffset: -25; }
  75%, to { stroke-dashoffset: -109; }
}
@keyframes spark4 {
  from, 27.5% { stroke-dashoffset: 78; }
  50%, 52.5% { stroke-dashoffset: -42; }
  75%, to { stroke-dashoffset: -162; }
}
@keyframes spark5 {
  from, 27.5% { stroke-dashoffset: 60; }
  50%, 52.5% { stroke-dashoffset: -60; }
  75%, to { stroke-dashoffset: -180; }
}
@keyframes spark6 {
  from, 27.5% { stroke-dashoffset: 91; }
  50%, 52.5% { stroke-dashoffset: -29; }
  75%, to { stroke-dashoffset: -149; }
}
@keyframes spark7 {
  from, 27.5% { stroke-dashoffset: 60; }
  50%, 52.5% { stroke-dashoffset: -26; }
  75%, to { stroke-dashoffset: -112; }
}
@keyframes spark8 {
  from, 27.5% { stroke-dashoffset: 43; }
  50%, 52.5% { stroke-dashoffset: -43; }
  75%, to { stroke-dashoffset: -129; }
}
@keyframes spark9 {
  from, 27.5% { stroke-dashoffset: 60; }
  50%, 52.5% { stroke-dashoffset: -26; }
  75%, to { stroke-dashoffset: -112; }
}

@keyframes wave-scale1 {
  from, 0%, 25%, 50%, 75% {
    stroke-width: 6px;
    transform: scale(1);
  }
  10%, 35%, 60%, 85%, to {
    stroke-width: 0;
    transform: scale(2);
  }
}

@keyframes wave-scale2 {
  from, 5%, 30%, 55%, 80% {
    stroke-width: 6px;
    transform: scale(1);
  }
  15%, 40%, 65%, 90%, to {
    stroke-width: 0;
    transform: scale(2);
  }
}
.loader-text {
  margin-top: 20px;
  color: #ff9f43;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
}
.sico {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(255, 120, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.sico svg {
  width: 28px;
  height: 28px;
  stroke: #ff7a00;
}
.sico {
  transition: all 0.3s ease;
}

.sc:hover .sico {
  background: #ff7a00;
}

.sc:hover .sico svg {
  stroke: white;
}
/* tema za mobitel da se vidi */


@media (max-width: 768px) {
  .nav-cta {
    padding: 8px 12px;
    font-size: 13px;
  }
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none; /* 🔥 ovo je ključno */
  }
}

.mob-theme {
  margin-top: 20px;
  text-align: center;
}

.mob-theme .theme-toggle {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 120, 0, 0.1);
  color: #ff7a00;
  font-size: 16px;
}
.mob {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: #111;
  z-index: 9999;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  padding: 40px 20px;
}

.mob.active {
  right: 0;
}
/* dijagram */
.proc-flow {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px 0 8px;
}
 
.proc-step {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .2s;
}
 
.proc-step:hover {
  border-color: var(--og);
  background: var(--od);
  transform: translateX(4px);
}
 
.proc-connector {
  width: 1px;
  height: 24px;
  background: var(--og);
  margin-left: 62px; /* uitravnano s centrom ikonice */
  opacity: .6;
}
 
.proc-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--o);
  letter-spacing: .08em;
  min-width: 22px;
  opacity: .7;
}
 
.proc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--od);
  border: 1px solid var(--og);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .25s;
}
 
.proc-step:hover .proc-icon {
  background: var(--og);
}
 
.proc-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--o);
}
 
.proc-body {
  flex: 1;
}
 
.proc-title {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.3;
}
 
.proc-desc {
  margin: 0;
  font-size: 12px;
  color: var(--mu);
  line-height: 1.5;
}
 
.proc-arr {
  font-size: 14px;
  color: var(--o);
  opacity: .4;
  transition: opacity .2s, transform .2s;
}
 
.proc-step:hover .proc-arr {
  opacity: 1;
  transform: translate(2px, -2px);
}
 .avi {
  display: flex;          /* vidljivo svugdje */
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.avi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,107,0,0.2), transparent 60%);
}

/* Ako trebaš aspect-ratio samo na desktopu */
@media(min-width: 860px) {
  .avi {
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
  }
}

[data-theme="light"] .avi {
  background: linear-gradient(135deg,rgba(232,90,0,.12),transparent 70%);
  border-color: rgba(232,90,0,.2);
}
.po-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid #ccc;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.po-link:hover { background: rgba(0,0,0,0.04); }

.po-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1D9E75;
  display: inline-block;
}

.po-arrow { opacity: 0.5; font-size: 13px; }

.po-cta {
  margin: 2.5rem auto 0;
  max-width: 480px;
  padding: 1.25rem 1.5rem;
  background: rgba(0,0,0,0.03);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  text-align: left;
}

.po-cta-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 0.4rem;
  opacity: 0.7;
}

.po-cta-sub {
  font-size: 13px;
  margin: 0;
  line-height: 1.6;
  opacity: 0.6;
}