:root{
  --red:#C8000A;--red-b:#E8000D;
  --white:#F4F2ED;--off:#C6C2BA;--off-dim:#8B8780;
  --black:#080808;--b2:#0E0E0E;--b3:#161616;
  --border:rgba(200,0,10,0.15);
  --sans:"Inter",-apple-system,sans-serif;
  --display:"Inter",-apple-system,sans-serif;
  --mono:"Fira Code",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Puna crna traka preko zone statusne trake / Dynamic Island-a (iPhone).
   Sadržaj stranice ide ispod nje (viewport-fit=cover), pa bez ovoga tekst
   "viri" oko ostrva. Na uređajima bez ureza visina je 0 → nevidljiva. */
html::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:#000;z-index:10002;pointer-events:none}
/* ── GLOBALNA POZADINA: mreža linija + tačke (kao iza hero/3D sekcije) ──
   Šablon je direktno u body pozadini (bez fiksnog sloja i z-indexa —
   pouzdano na svim mobilnim browserima). Vidi se svuda gde je stranica
   "gola crna"; sekcije sa svojom pozadinom je normalno prekrivaju. */
body{color:var(--white);font-family:var(--sans);overflow-x:hidden;
  background:
    radial-gradient(circle,rgba(232,0,13,0.13) 1px,transparent 1.6px),
    linear-gradient(rgba(200,0,10,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,0,10,0.045) 1px,transparent 1px),
    var(--black);
  background-size:60px 60px,60px 60px,60px 60px,auto}
.page{display:none;opacity:0;transition:opacity .4s}.page.active{display:block;opacity:1}
body::before{content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.015) 2px,rgba(0,0,0,0.015) 4px)}
/* CURSOR */
.cur{position:fixed;top:0;left:0;pointer-events:none;z-index:9998}
.cur-dot{width:6px;height:6px;background:var(--red-b);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}
.cur-ring{width:32px;height:32px;border:1px solid rgba(200,0,10,0.45);border-radius:50%;position:absolute;transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s}
.cur-ring.hov{width:46px;height:46px;border-color:var(--red-b)}
@media(max-width:768px){.cur{display:none}body{cursor:auto}}
#svc-kodiranje,#svc-mapiranje,#svc-konverzija{scroll-margin-top:84px}
/* NAV */
/* padding gore uključuje env(safe-area-inset-top) da pozadina nava pokrije
   urez/statusnu traku (iPhone) — bez toga sadržaj viri iznad logoa */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) 14px calc(24px + env(safe-area-inset-left,0px));background:rgba(8,8,8,0.97);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);transition:padding .3s}
nav.scrolled{padding:calc(10px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) 10px calc(24px + env(safe-area-inset-left,0px))}
.nl{display:flex;align-items:center;gap:9px;cursor:pointer}
.nl img{height:34px;width:auto;max-width:50px;border-radius:6px;object-fit:contain;background:#000;border:1px solid rgba(200,0,10,0.25);transition:border-color .3s}
.nl:hover img{border-color:var(--red-b)}
.nlt{display:flex;flex-direction:column;line-height:1}
.nln{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:1.5px;color:var(--white);text-transform:uppercase}
.nln em{font-style:italic;color:var(--red-b)}
.nls{font-family:var(--sans);font-size:6px;font-weight:300;letter-spacing:3px;color:var(--off-dim);text-transform:uppercase;margin-top:2px}
/* birač jezika */
.lang{position:relative;margin-left:16px}
.lang-btn{display:flex;align-items:center;gap:6px;background:rgba(200,0,10,0.09);border:1px solid rgba(232,0,13,0.45);border-radius:999px;color:var(--white);padding:6px 12px;cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.5px;transition:border-color .25s,color .25s,background .25s}
.lang-btn svg{width:14px;height:14px;color:var(--red-b)}
.lang-btn:hover{border-color:var(--red-b);color:#fff;background:rgba(200,0,10,0.18)}
.lang-btn:hover svg{color:#fff}
.lang-dd{position:absolute;top:calc(100% + 10px);right:0;min-width:136px;background:rgba(10,10,10,0.98);border:1px solid var(--border);border-radius:10px;padding:5px;display:none;flex-direction:column;z-index:200;box-shadow:0 14px 34px rgba(0,0,0,0.55)}
.lang-dd.open{display:flex}
.lang-dd a{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--off);text-decoration:none;padding:8px 10px;border-radius:7px;cursor:pointer;transition:background .2s,color .2s;text-transform:uppercase;white-space:nowrap}
.lang-dd a:hover{background:rgba(200,0,10,0.12);color:#fff}
.lang-dd a.active{color:var(--red-b)}
@media(max-width:480px){.lang{margin-left:13px}.lang-btn{padding:5px 8px}.nls{display:none}.nln{font-size:12px}}
.nav-links{display:none;gap:32px;list-style:none;align-items:center}
/* razmak linkova od logoa na desktopu (BOOK NOW je gurnut desno pa bi se
   inače zalepili uz logo) */
@media(min-width:768px){.nav-links{display:flex;margin-left:54px}}
@media(min-width:768px) and (max-width:1000px){.nav-links{margin-left:22px}}
/* na tabletu je 32px razmak pretesan pa se linkovi lome u dva reda */
@media(min-width:768px) and (max-width:1000px){.nav-links{gap:18px}}
.nav-links a{white-space:nowrap}
.nav-links a{font-family:var(--sans);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--off);text-decoration:none;cursor:pointer;transition:color .2s;position:relative;padding-bottom:2px}
.nav-links a::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--red-b);transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--white);background:var(--red);border:none;padding:9px 13px;cursor:pointer;transition:all .25s;overflow:hidden;position:relative}
.nav-cta::before{content:"";position:absolute;inset:0;background:var(--red-b);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-cta span{position:relative;z-index:1}
.nav-cta:hover::before{transform:scaleX(1)}
/* na desktopu gurni "Book Now" skroz desno, uz dugme za jezik (nav-links
   ostaju levo uz logo). Ne važi na telefonu (<768) pa mobilni ostaje isti. */
@media(min-width:768px){.nav-cta{margin-left:auto}}
.hb{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:4px;margin-left:14px}
@media(min-width:768px){.hb{display:none}}
.hb span{display:block;width:22px;height:1px;background:var(--white);transition:all .3s}
.hb.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hb.open span:nth-child(2){opacity:0}
.hb.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* height:100dvh (uz 100vh fallback) pokriva tačno vidljivi ekran na iOS,
   bez virenja sadržaja dole; padding safe-area drži sadržaj u bezbednoj zoni */
.mm{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;background:radial-gradient(ellipse at 50% -10%,rgba(200,0,10,0.1) 0%,transparent 55%),var(--black);z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateX(100%);transition:transform .5s cubic-bezier(.77,0,.175,1)}
.mm.open{transform:translateX(0)}
/* dok je MENI otvoren: zaključaj skrol pozadine i skloni plutajuće elemente
   (WhatsApp dugme, toast) da ne vire preko menija */
body.menu-open{overflow:hidden}
body.menu-open .wa,body.menu-open .toast{display:none!important}
.mm-eb{font-family:var(--mono);font-size:9px;letter-spacing:6px;text-transform:uppercase;color:var(--red-b);margin-bottom:30px;opacity:0;transition:opacity .4s .12s}
.mm.open .mm-eb{opacity:1}
.mm>a{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-0.02em;color:var(--white);text-decoration:none;cursor:pointer;padding:15px 0;width:76%;display:flex;align-items:center;justify-content:center;gap:16px;border-bottom:1px solid rgba(200,0,10,0.12);transform:translateX(40px);opacity:0;transition:color .3s,transform .5s,opacity .5s}
.mm-n{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:1px;color:var(--red-b);opacity:.85}
.mm.open>a:nth-of-type(1){transform:translateX(0);opacity:1;transition-delay:.12s}
.mm.open>a:nth-of-type(2){transform:translateX(0);opacity:1;transition-delay:.2s}
.mm.open>a:nth-of-type(3){transform:translateX(0);opacity:1;transition-delay:.28s}
.mm.open>a:nth-of-type(4){transform:translateX(0);opacity:1;transition-delay:.36s}
.mm.open>a:nth-of-type(5){transform:translateX(0);opacity:1;transition-delay:.44s}
.mm>a:nth-of-type(5){border-bottom:none}
.mm>a:hover{color:var(--red-b)}
.mm-foot{margin-top:36px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;opacity:0;transition:opacity .5s .48s}
.mm.open .mm-foot{opacity:1}
.mm-foot a{font-family:var(--mono);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--off);text-decoration:none;transition:color .2s}
.mm-foot a:hover{color:var(--red-b)}
.mm-social{width:100%;display:flex;justify-content:center;gap:12px;margin-top:8px}
.mm-soc{width:38px;height:38px;border-radius:50%;border:1px solid rgba(240,238,232,0.16);display:flex;align-items:center;justify-content:center;color:var(--off);transition:all .25s}
.mm-soc svg{width:15px;height:15px}
.mm-soc:hover{border-color:var(--red-b);color:#fff}
/* HERO */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 24px 52px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 8%,rgba(200,0,10,0.1) 0%,transparent 50%),var(--black)}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(200,0,10,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,0,10,0.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,0.7) 0%,transparent 65%);animation:gridMove 25s linear infinite}
@keyframes gridMove{from{background-position:0 0}to{background-position:60px 60px}}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.p{position:absolute;border-radius:50%;animation:floatP linear infinite;opacity:0}
@keyframes floatP{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:.4}90%{opacity:.1}100%{transform:translateY(-10vh) translateX(var(--tx));opacity:0}}
.hlabel{font-family:var(--sans);font-size:8.5px;letter-spacing:5px;text-transform:uppercase;color:var(--red-b);display:flex;align-items:center;gap:12px;margin-bottom:18px;position:relative;z-index:2;opacity:0;animation:fU .9s .3s forwards}
.hlabel::before{content:"";width:28px;height:1px;background:var(--red-b)}
.htitle{font-family:var(--display);font-weight:800;font-size:clamp(38px,9vw,68px);line-height:1.05;letter-spacing:-0.03em;position:relative;z-index:2;opacity:0;animation:fU .9s .5s forwards}
.htitle em{font-style:italic;color:var(--white)}
.htitle strong{font-weight:600;color:var(--red-b)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-g);position:absolute;top:0;left:0;width:100%;height:100%;opacity:.7}
.glitch::before{color:var(--red-b);animation:g1 6s infinite;clip-path:polygon(0 0,100% 0,100% 30%,0 30%)}
.glitch::after{color:rgba(255,255,255,0.5);animation:g2 6s infinite;clip-path:polygon(0 70%,100% 70%,100% 100%,0 100%)}
@keyframes g1{0%,85%,100%{transform:translate(0)}87%{transform:translate(-3px,1px)}90%{transform:translate(3px,-1px)}93%{transform:translate(0)}}
@keyframes g2{0%,85%,100%{transform:translate(0)}87%{transform:translate(3px,-1px)}90%{transform:translate(-3px,1px)}93%{transform:translate(0)}}
.hrule{width:52px;height:1px;background:linear-gradient(to right,var(--red-b),transparent);margin:22px 0;position:relative;z-index:2;opacity:0;animation:fU .9s .65s forwards}
.hsub{font-family:var(--sans);font-size:12.5px;font-weight:300;color:var(--off);max-width:340px;line-height:1.85;position:relative;z-index:2;opacity:0;animation:fU .9s .75s forwards}
.hbtns{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:2;opacity:0;animation:fU .9s .9s forwards}
/* društvene mreže u hero sekciji — ispod dugmadi, iznad marquee trake */
.hsocial{display:flex;align-items:center;gap:12px;margin-top:26px;position:relative;z-index:2;opacity:0;animation:fU .9s 1.05s forwards}
.hsoc{width:40px;height:40px;border-radius:50%;border:1px solid rgba(240,238,232,0.18);background:rgba(8,8,8,0.4);display:flex;align-items:center;justify-content:center;color:var(--off);text-decoration:none;transition:all .25s}
.hsoc svg{width:17px;height:17px}
.hsoc:hover{border-color:var(--red-b);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(200,0,10,0.25)}
.btn-r{font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--white);background:var(--red);border:none;padding:15px 28px;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-block;position:relative;overflow:hidden}
.btn-r::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);transition:left .4s}
.btn-r:hover{background:var(--red-b);box-shadow:0 6px 28px rgba(200,0,10,0.5);transform:translateY(-2px)}
.btn-r:hover::before{left:100%}
.btn-o{font-family:var(--sans);font-size:8.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--white);background:transparent;border:1px solid rgba(240,238,232,0.25);padding:15px 28px;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-block}
.btn-o:hover{border-color:var(--red-b);color:var(--red-b)}
.hbadge{position:absolute;top:50%;right:24px;transform:translateY(-50%);z-index:2;text-align:right;opacity:0;animation:fI 1s 1.2s forwards}
@media(max-width:500px){.hbadge{display:none}}
.bfrom{font-family:var(--sans);font-size:12px;font-style:italic;color:var(--off);margin-bottom:4px}
.bprice{font-family:var(--display);font-size:54px;font-weight:400;line-height:1;color:var(--white)}
.bprice sup{font-size:20px;color:var(--red-b);vertical-align:super}
.blabel{font-family:var(--sans);font-size:7px;letter-spacing:3px;color:var(--off-dim);text-transform:uppercase;margin-top:4px}
.hscroll{position:absolute;bottom:24px;right:24px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fI 1s 1.8s forwards}
@media(max-width:500px){.hscroll{display:none}}
.stxt{font-family:var(--sans);font-size:7px;letter-spacing:4px;color:var(--off-dim);writing-mode:vertical-rl;text-transform:uppercase}
.sline{width:1px;height:44px;background:linear-gradient(to bottom,var(--red-b),transparent);animation:sP 2.2s ease-in-out infinite}
@keyframes sP{0%,100%{transform:scaleY(1);opacity:.8}50%{transform:scaleY(.4);opacity:.2}}
/* MARQUEE */
.mqw{overflow:hidden;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--b2);position:relative}
.mqw::before,.mqw::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:1}
.mqw::before{left:0;background:linear-gradient(to right,var(--b2),transparent)}
.mqw::after{right:0;background:linear-gradient(to left,var(--b2),transparent)}
.mqt{display:flex;gap:52px;animation:mq 22s linear infinite;width:max-content}
.mqi{font-family:var(--sans);font-size:8.5px;letter-spacing:5px;text-transform:uppercase;color:var(--off-dim);white-space:nowrap;display:flex;align-items:center;gap:52px}
.mqi::after{content:"\25C6";color:var(--red-b);font-size:5px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 3D VIEWER — transparentan da se globalna mreža sa tačkama vidi iza modela */
.viewer-section{background:transparent;position:relative}
.viewer-header{padding:56px 24px 24px;text-align:center}
.viewer-eb{font-family:var(--sans);font-size:8px;letter-spacing:5px;text-transform:uppercase;color:var(--red-b);display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.viewer-eb::before,.viewer-eb::after{content:"";width:20px;height:1px;background:var(--red-b)}
.viewer-title{font-family:var(--display);font-weight:700;font-size:clamp(22px,5vw,34px);letter-spacing:-0.02em;line-height:1.1;margin-bottom:10px;color:var(--white)}
.viewer-title em{font-style:italic;color:var(--red-b)}
.viewer-sub{font-family:var(--sans);font-size:11px;font-weight:300;color:var(--off);max-width:380px;margin:0 auto;line-height:1.7}
/* CANVAS — full width */
#bmw-canvas-wrap{width:100%;height:clamp(320px,65vw,580px);position:relative;overflow:hidden;cursor:grab;background:radial-gradient(ellipse at 50% 85%,rgba(200,0,10,0.06) 0%,transparent 65%)}
#bmw-canvas-wrap:active{cursor:grabbing}
#bmw-canvas-wrap canvas{width:100%!important;height:100%!important;display:block}
/* bočni "kanali" za skrol na dodir: neaktivni podrazumevano (miš rotira svuda),
   a na dodirnim uređajima hvataju prevlačenje sa strane i puštaju skrol
   stranice (touch-action:pan-y), dok centar (platno) rotira model.
   z-index 4: iznad platna, ispod tačkica (z5) — tačkice ostaju klikabilne. */
.viewer-gutter{position:absolute;top:0;bottom:0;width:17%;max-width:90px;z-index:4;pointer-events:none;touch-action:pan-y;background:transparent}
.vg-left{left:0}.vg-right{right:0}
@media(hover:none) and (pointer:coarse){.viewer-gutter{pointer-events:auto}}
#model-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:10;pointer-events:none;transition:opacity .6s}
.loader-bar-wrap{width:200px;height:1px;background:rgba(200,0,10,0.15);overflow:hidden}
.loader-bar{height:100%;background:var(--red-b);width:0%;transition:width .3s}
.loader-txt{font-family:var(--sans);font-size:9px;letter-spacing:3px;color:var(--off);text-transform:uppercase}
#hotspot-overlay{position:absolute;inset:0;pointer-events:none;z-index:5}
/* HOTSPOTS */
#hotspot-overlay{position:absolute;inset:0;pointer-events:none;z-index:5}
.hs{position:absolute;pointer-events:all;transform:translate(-50%,-50%);cursor:pointer;transition:opacity .3s}
.hs-dot{width:16px;height:16px;border-radius:50%;background:var(--red-b);border:2px solid rgba(255,255,255,0.8);transition:transform .2s,box-shadow .2s;position:relative;display:flex;align-items:center;justify-content:center}
.hs-dot::after{content:"";width:5px;height:5px;background:#fff;border-radius:50%}
.hs-pulse{position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid rgba(200,0,10,0.6);animation:hsPulse 2.2s ease-out infinite;top:0;left:0}
.hs:hover .hs-dot,.hs.active .hs-dot{transform:scale(1.4);box-shadow:0 0 0 5px rgba(200,0,10,0.2)}
@keyframes hsPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3);opacity:0}}
.hs-label{position:absolute;left:22px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--white);background:rgba(8,8,8,0.9);border:1px solid var(--border);padding:4px 10px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;backdrop-filter:blur(4px)}
.hs:hover .hs-label{opacity:1}
/* tačke u kabini (vode u enterijer) — beli prsten oko tačke + strelica u labeli */
.hs-int .hs-dot{box-shadow:0 0 0 3px rgba(244,242,237,0.35)}
.hs-go{font-style:normal;color:var(--red-b);margin-left:6px;font-weight:700}
.hs.active .hs-label{opacity:0}
.hs.active .hs-dot{transform:scale(1.5);box-shadow:0 0 0 6px rgba(200,0,10,0.25)}
/* HOTSPOT FLYOUT POPUP */
/* max-height + skrol: bez ovoga se najviši opisi seku o ivicu 3D prozora
   (koji je na telefonu svega ~320px visok) */
.hs-popup{position:absolute;z-index:8;width:236px;max-width:64vw;max-height:calc(100% - 12px);overflow-y:auto;overscroll-behavior:contain;background:rgba(10,10,10,0.94);border:1px solid var(--border);border-left:2px solid var(--red-b);padding:14px 16px 13px;backdrop-filter:blur(10px);box-shadow:0 14px 44px rgba(0,0,0,0.6);pointer-events:none;visibility:hidden;opacity:0;transform:translate(-10px,-50%) scale(.9);transform-origin:left center;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.hs-popup.show{visibility:visible;opacity:1;pointer-events:auto;transform:translate(0,-50%) scale(1)}
.hs-popup.flip{transform-origin:right center;border-left:1px solid var(--border);border-right:2px solid var(--red-b);transform:translate(10px,-50%) scale(.9)}
.hs-popup.flip.show{transform:translate(0,-50%) scale(1)}
.hsp-close{position:absolute;top:5px;right:8px;width:18px;height:18px;border:none;background:transparent;color:var(--off-dim);font-size:16px;line-height:1;cursor:pointer;transition:color .2s;padding:0}
.hsp-close:hover{color:var(--red-b)}
.hsp-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-right:14px}
.hsp-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--sans);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}
.hsp-title{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--white);line-height:1.15}
.hsp-desc{font-family:var(--sans);font-size:10.5px;font-weight:300;line-height:1.7;color:var(--off);margin-bottom:10px}
.hsp-tags{display:flex;flex-wrap:wrap;gap:5px}
.hsp-tag{font-family:var(--sans);font-size:7.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--off);border:1px solid rgba(240,238,232,0.14);padding:3px 8px}
/* dugme u opisu tačke koje vodi na prikaz enterijera (samo za tačke u kabini) */
.hsp-cta{display:block;width:100%;margin-top:9px;font-family:var(--mono);font-size:7.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;color:#fff;background:var(--red);border:none;border-radius:999px;padding:8px 8px;cursor:pointer;transition:background .25s,box-shadow .25s}
.hsp-cta:hover{background:var(--red-b);box-shadow:0 5px 18px rgba(200,0,10,0.45)}
.hsp-cta[hidden]{display:none}
@media(max-width:600px){.hs-popup{width:198px}.hsp-title{font-size:14px}.hsp-desc{font-size:10px;line-height:1.55;margin-bottom:8px}.hsp-tags{gap:4px}.hsp-tag{font-size:7px;padding:2px 6px}}
/* INFO PANEL */
.svc-info-panel{margin:0;padding:20px 24px;background:var(--b2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:none;animation:fI .3s ease}
.svc-info-panel.show{display:block}
.sip-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sip-num{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sip-title{font-family:var(--sans);font-size:20px;font-weight:400;color:var(--white)}
.sip-desc{font-family:var(--sans);font-size:11.5px;font-weight:300;color:var(--off);line-height:1.8;margin-bottom:12px}
.sip-tags{display:flex;flex-wrap:wrap;gap:6px}
.sip-tag{font-family:var(--sans);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--off);border:1px solid rgba(240,238,232,0.15);padding:4px 10px;transition:all .2s}
.sip-tag:hover{border-color:var(--red-b);color:var(--white)}
/* VIEW CONTROLS */
.view-controls{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 16px;flex-wrap:wrap}
.vc-btn{font-family:var(--sans);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--off);background:transparent;border:1px solid rgba(240,238,232,0.1);padding:7px 14px;cursor:pointer;transition:all .2s}
.vc-btn:hover,.vc-btn.active{border-color:var(--red-b);color:var(--white)}
.vc-hint{font-family:var(--sans);font-size:9px;color:var(--off-dim);text-align:center;padding:0 0 16px;opacity:.7}
.vc-int{border-color:rgba(200,0,10,0.45)!important;color:var(--white)!important}
.vc-int:hover{background:rgba(200,0,10,0.14)}
/* INTERIOR OVERLAY */
.interior-view{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;background:linear-gradient(180deg,#050507 0%,#0a0a0c 100%)}
.interior-view.show{display:flex;animation:fI .4s ease}
.int-topbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(8,8,8,0.85);border-bottom:1px solid var(--border);backdrop-filter:blur(6px);z-index:3}
.int-tag{font-family:var(--sans);font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--red-b)}
.int-back{font-family:var(--sans);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--off);background:transparent;border:1px solid rgba(240,238,232,0.15);padding:6px 12px;cursor:pointer;transition:all .2s}
.int-back:hover{border-color:var(--red-b);color:#fff}
.int-stage{position:relative;flex:1;overflow:hidden}
.int-hint{font-family:var(--sans);font-size:9px;letter-spacing:1px;color:var(--off-dim);text-align:center;padding:9px;background:rgba(8,8,8,0.8);z-index:3}
.int-hint b{color:var(--off)}
.int-windshield{position:absolute;left:0;right:0;top:0;height:58%;background:radial-gradient(ellipse at 50% 130%,rgba(42,46,54,0.45),rgba(8,8,10,0.96) 68%)}
.int-ambient{position:absolute;left:0;right:0;bottom:0;height:62%;background:radial-gradient(ellipse at 50% 105%,rgba(200,0,10,0.13),transparent 62%);pointer-events:none}
.int-dash{position:absolute;left:-6%;right:-6%;bottom:-3%;height:56%;background:linear-gradient(180deg,#1b1b1f 0%,#0d0d0f 52%,#070708 100%);border-radius:50% 50% 0 0/26% 26% 0 0;box-shadow:inset 0 2px 0 rgba(255,255,255,0.05),0 -22px 55px rgba(0,0,0,0.6)}
.int-trim{position:absolute;left:14%;right:14%;top:8px;height:2px;background:linear-gradient(90deg,transparent,var(--red-b),transparent);opacity:.55;filter:blur(.4px)}
.int-vents{position:absolute;top:16%;right:16%;display:flex;gap:6px}
.int-vents span{width:30px;height:7px;border-radius:4px;background:linear-gradient(180deg,#000,#1d1d20);box-shadow:inset 0 1px 1px rgba(255,255,255,0.06)}
.int-cluster{position:absolute;left:8%;top:31%;width:21%;height:23%;background:linear-gradient(180deg,#151517,#0a0a0b);border:1px solid rgba(255,255,255,0.06);border-radius:10px;box-shadow:inset 0 0 26px rgba(0,0,0,.85),0 6px 22px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;gap:9%}
.int-cluster .dial{width:38%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(200,0,10,0.4);box-shadow:inset 0 0 16px rgba(200,0,10,0.16)}
.int-wheel{position:absolute;left:3%;bottom:-20%;width:40%;aspect-ratio:1;border-radius:50%;border:17px solid #141416;background:radial-gradient(circle,#0b0b0c 41%,transparent 43%);box-shadow:inset 0 0 34px rgba(0,0,0,.9),0 0 44px rgba(0,0,0,.55)}
.int-wheel .hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24%;height:24%;border-radius:50%;background:radial-gradient(circle,#1a1a1d,#0a0a0b);border:1px solid rgba(200,0,10,0.3)}
.int-screen{position:absolute;left:50%;top:29%;transform:translateX(-50%);width:39%;height:37%;min-width:240px;cursor:pointer;border-radius:11px;background:#050506;box-shadow:0 12px 44px rgba(0,0,0,.72),inset 0 0 0 6px #0c0c0e,inset 0 0 0 7px rgba(255,255,255,0.04);transition:box-shadow .3s;z-index:2}
.int-screen:hover{box-shadow:0 12px 54px rgba(200,0,10,0.28),inset 0 0 0 6px #0c0c0e,inset 0 0 0 7px rgba(200,0,10,0.25)}
.iscr{position:absolute;inset:7px;border-radius:6px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#0b0d13,#050506)}
.iscr::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0.06) 0%,transparent 30%);pointer-events:none}
.iscr-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;transition:opacity .35s}
.iscr-power{font-size:27px;color:var(--red-b);animation:isoPulse 2s ease-in-out infinite}
.iscr-prompt{font-family:var(--sans);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--off)}
@keyframes isoPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.iscr-on{position:absolute;inset:0;display:none;flex-direction:column}
.int-screen.on .iscr-off{opacity:0;pointer-events:none}
.int-screen.on .iscr-on{display:flex;animation:fI .35s ease}
.iscr-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 11px;border-bottom:1px solid rgba(255,255,255,0.07)}
.iscr-logo{font-family:var(--sans);font-size:13px;font-weight:600;color:#fff;letter-spacing:1px}
.iscr-logo em{font-style:italic;color:var(--red-b)}
.iscr-sub{font-family:var(--sans);font-size:7px;letter-spacing:2px;text-transform:uppercase;color:var(--off-dim)}
.iscr-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:5px;padding:7px;overflow:auto}
.iscr-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:9px;padding:6px 3px;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}
.iscr-tile:hover{border-color:var(--red-b);background:rgba(200,0,10,0.09);transform:translateY(-2px)}
.tile-ic{width:22px;height:22px;color:var(--red-b);display:flex}
.tile-ic svg{width:100%;height:100%}
.tile-n{font-family:var(--sans);font-size:8px;font-weight:500;letter-spacing:.3px;color:#fff;text-align:center;line-height:1.25}
.tile-s{font-family:var(--sans);font-size:6.5px;letter-spacing:1px;text-transform:uppercase;color:var(--off-dim)}
/* demo usluge na ekranu: klik na pločicu → animirani prikaz + opis ispod table */
.iscr-demo{position:absolute;inset:0;display:none;flex-direction:column;background:radial-gradient(ellipse at 50% 38%,#0b0d13,#050506)}
.int-screen.demo .iscr-demo{display:flex;animation:fI .35s ease}
.int-screen.demo .iscr-on{display:none}
.int-screen.demo .iscr-off{opacity:0;pointer-events:none}
.iscr-demo-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 9px;border-bottom:1px solid rgba(255,255,255,0.07)}
.iscr-back{background:none;border:1px solid rgba(255,255,255,0.16);color:var(--off);font-family:var(--mono);font-size:7.5px;letter-spacing:1px;text-transform:uppercase;border-radius:5px;padding:3px 8px;cursor:pointer;transition:border-color .2s,color .2s}
.iscr-back:hover{border-color:var(--red-b);color:#fff}
.iscr-demo-t{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:1.5px;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iscr-demo-stage{flex:1;position:relative}
.iscr-demo-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.int-caption{display:none;padding:11px 16px;text-align:center;background:rgba(8,8,8,0.86);border-top:1px solid rgba(200,0,10,0.3)}
.int-caption.show{display:block;animation:fI .3s ease}
.int-cap-n{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--red-b);margin-bottom:5px}
.int-cap-d{font-family:var(--sans);font-size:12px;font-weight:300;color:var(--off);line-height:1.65;max-width:560px;margin:0 auto}
.interior-view.demo .int-hint{display:none}
@media(max-width:640px){.int-screen{width:86%;height:66%;top:14%;min-width:0}.iscr-grid{grid-template-columns:repeat(2,1fr)}.int-cluster,.int-wheel,.int-vents{display:none}.int-windshield{height:40%}.int-cap-d{font-size:10.5px}}
/* FAQ PAGE */
.faq-page{max-width:760px;margin:0 auto}
.faq-page>.secsub{text-align:center;margin:0 auto 48px;max-width:560px}
.faq-group{margin-bottom:44px}
.faq-gh{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--white);display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.faq-gn{color:var(--red-b)}
/* prozracniji akordeon na FAQ strani */
.faq-page .svc-cats{gap:10px}
.faq-page .svc-cat{border-radius:12px;border-color:rgba(240,238,232,0.07)}
.faq-page .svc-cat-header{padding:18px 22px}
.faq-page .svc-cat-name{font-size:clamp(15px,2.3vw,17.5px);font-weight:600;padding-right:14px;line-height:1.4}
.faq-page .faq-a{font-size:13px;line-height:1.75;padding:0 22px 20px;font-weight:400}
@media(max-width:640px){
  .faq-group{margin-bottom:36px}
  .faq-page .svc-cat-header{padding:15px 16px}
  .faq-page .svc-cat-name{font-size:14.5px}
  .faq-page .faq-a{padding:0 16px 17px;font-size:13px}
}
.faq-cta{text-align:center;margin-top:8px;padding:36px 22px;background:var(--b2);border:1px solid var(--border);border-radius:16px}
.faq-cta-t{font-family:var(--display);font-weight:700;font-size:22px;color:var(--white);margin-bottom:9px}
.faq-cta-x{font-size:12.5px;color:var(--off);max-width:430px;margin:0 auto 20px;line-height:1.7}
.faq-cta-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.faq-cta{padding:28px 16px}.faq-cta-b .btn-r,.faq-cta-b .btn-o{width:100%;max-width:280px}}
/* SECTIONS */
.sec{padding:72px 24px}
.eb{font-family:var(--sans);font-size:8px;letter-spacing:5px;text-transform:uppercase;color:var(--red-b);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eb::before{content:"";width:20px;height:1px;background:var(--red-b)}
.hd{font-family:var(--display);font-weight:700;font-size:clamp(26px,6.5vw,42px);letter-spacing:-0.02em;line-height:1.1;margin-bottom:40px;color:var(--white);position:relative}
.hd::after{content:"";position:absolute;left:2px;bottom:-13px;width:0;height:1px;background:linear-gradient(90deg,var(--red-b),transparent);transition:width 1.1s cubic-bezier(.22,1,.36,1) .3s}
.hd.visible::after{width:130px}
.hd em{font-style:italic}
.hd strong{font-weight:600;color:var(--red-b)}
.secsub{font-family:var(--sans);font-size:12.5px;font-weight:300;color:var(--off);line-height:1.85;max-width:540px;margin-top:-18px;margin-bottom:36px}
.secsub strong{color:var(--white);font-weight:600}
/* ENGINE MAPPING ESTIMATOR */
.estw{background:var(--b2);border:1px solid var(--border);padding:32px 24px;max-width:640px}
.est-head{margin-bottom:24px}
.est-eb{font-family:var(--sans);font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--red-b);margin-bottom:8px}
.est-title{font-family:var(--sans);font-size:19px;font-weight:600;color:var(--white)}
.est-title em{font-style:italic;color:var(--red-b);font-weight:400}
.est-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.est-f-full{grid-column:1/-1}
.est-hint{font-family:var(--sans);font-size:11px;line-height:1.6;color:var(--off-dim);text-align:center;margin-bottom:18px}
@media(max-width:480px){.est-form{grid-template-columns:1fr}}
.est-f{display:flex;flex-direction:column;gap:6px}
.est-f label{font-family:var(--sans);font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--off-dim)}
.est-f select,.est-f input{background:var(--b3);border:1px solid rgba(240,238,232,0.1);color:var(--white);font-family:var(--sans);font-size:13px;font-weight:300;padding:11px 12px;outline:none;transition:border-color .25s}
.est-f select:focus,.est-f input:focus{border-color:var(--red-b)}
.est-f input::placeholder{color:var(--off-dim)}
/* meni motora sa oznakama goriva (kao lightcode): oznaka goriva je suptilna,
   sitna i siva — ne krupan podebljan naslov. Motori su normalni redovi. */
.est-f select optgroup{font-family:var(--mono);font-weight:400;font-style:normal;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--off-dim);background:var(--b3)}
.est-f select option{font-family:var(--sans);font-weight:300;font-size:13px;color:var(--white);background:var(--b3)}
.est-btn{width:100%;text-align:center;margin-bottom:0}
.est-result{margin-top:26px;padding-top:22px;border-top:1px solid var(--border);display:none}
.est-result.show{display:block;animation:fI .4s ease}
.est-grid{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:12px 12px;align-items:center;margin-bottom:6px}
.est-lbl{font-family:var(--sans);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--off-dim)}
.est-ch{font-family:var(--mono);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--off-dim);text-align:center}
.est-ch1{color:var(--off)}
.est-ch2{color:var(--red-b)}
.est-before{font-family:var(--display);font-size:18px;font-weight:600;color:var(--off-dim);text-align:center}
.est-after{font-family:var(--display);font-weight:700;letter-spacing:-0.01em;text-align:center}
.est-a1{font-size:23px;color:var(--white)}
.est-a2{font-size:20px;color:var(--red-b)}
@media(max-width:480px){
  .est-grid{gap:9px 7px}
  .est-lbl{font-size:8px;letter-spacing:1px}
  .est-before{font-size:14px}
  .est-a1{font-size:17px}.est-a2{font-size:15px}
  .est-ch{font-size:7px;letter-spacing:1px}
}
.est-note{font-family:var(--sans);font-size:9.5px;font-weight:300;color:var(--off-dim);line-height:1.7;margin-top:8px}
/* 3D MICRO-SCENES */
.anim3d-wrap{display:flex;justify-content:center;margin-bottom:36px}
.anim3d-wrap canvas{display:block}
/* SCROLL PROGRESS */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--red),var(--red-b));z-index:10001;pointer-events:none;box-shadow:0 0 8px rgba(232,0,13,0.6)}
/* PAGE SWEEP */
.page-sweep{position:fixed;top:0;bottom:0;left:0;width:135%;z-index:9995;pointer-events:none;visibility:hidden;transform:translateX(-120%) skewX(-6deg);background:linear-gradient(90deg,#0B0B0B 0%,#0B0B0B 90%,#7A0006 97%,#E8000D 100%)}
.page-sweep.go{visibility:visible;animation:sweepX .85s cubic-bezier(.77,0,.175,1) forwards}
@keyframes sweepX{from{transform:translateX(-120%) skewX(-6deg)}to{transform:translateX(115%) skewX(-6deg)}}
/* POPUP */
.pop-ov{position:fixed;inset:0;z-index:9990;background:rgba(4,4,4,0.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.pop-ov.show{opacity:1;visibility:visible}
.pop{position:relative;width:min(430px,92vw);max-height:86vh;overflow-y:auto;background:linear-gradient(160deg,#111 0%,#0A0A0A 100%);border:1px solid var(--border);border-top:2px solid var(--red-b);padding:34px 30px 30px;box-shadow:0 30px 80px rgba(0,0,0,0.7),0 0 60px rgba(200,0,10,0.08);transform:translateY(26px) scale(.96);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pop-ov.show .pop{transform:translateY(0) scale(1)}
.pop-x{position:absolute;top:10px;right:13px;width:22px;height:22px;background:transparent;border:none;color:var(--off-dim);font-size:19px;line-height:1;cursor:pointer;transition:color .2s;padding:0}
.pop-x:hover{color:var(--red-b)}
.pop-eb{font-family:var(--sans);font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--red-b);margin-bottom:12px}
.pop-title{font-family:var(--display);font-size:clamp(24px,6vw,30px);font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:var(--white);margin-bottom:14px}
.pop-title em{font-style:italic;color:var(--red-b)}
.pop-title strong{font-weight:600;color:var(--red-b)}
.pop-txt{font-family:var(--sans);font-size:12px;font-weight:300;color:var(--off);line-height:1.8;margin-bottom:18px}
.pop-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.pop-tags span{font-family:var(--sans);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--off);border:1px solid rgba(240,238,232,0.14);padding:5px 10px}
.pop-cta{display:block;text-align:center;font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--white);background:var(--red);padding:14px 20px;cursor:pointer;text-decoration:none;transition:background .25s,box-shadow .25s}
.pop-cta:hover{background:var(--red-b);box-shadow:0 6px 24px rgba(200,0,10,0.45)}
.pop-alt{display:block;text-align:center;font-family:var(--sans);font-size:10px;font-weight:300;color:var(--off-dim);margin-top:13px;cursor:pointer;transition:color .2s}
.pop-alt:hover{color:var(--white)}
/* TOAST */
.toast{position:fixed;left:18px;bottom:18px;z-index:9985;width:min(300px,calc(100vw - 96px));background:linear-gradient(160deg,#121212,#0A0A0A);border:1px solid var(--border);border-left:2px solid var(--red-b);padding:15px 38px 14px 16px;box-shadow:0 18px 50px rgba(0,0,0,0.6);transform:translateY(18px);opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s,visibility .45s}
.toast.show{transform:none;opacity:1;visibility:visible}
.toast b{display:block;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--white);margin-bottom:5px}
.toast span{display:block;font-family:var(--sans);font-size:10.5px;font-weight:300;color:var(--off);line-height:1.6;margin-bottom:10px}
.toast a{font-family:var(--sans);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--red-b);text-decoration:none;font-weight:600}
.toast-x{position:absolute;top:6px;right:9px;background:none;border:none;color:var(--off-dim);font-size:15px;line-height:1;cursor:pointer;padding:0;transition:color .2s}
.toast-x:hover{color:var(--red-b)}
/* ESTIMATOR GAUGE + BRAND CHIPS */
.est-gauge-wrap{display:flex;justify-content:center;margin-bottom:18px}
.est-gauge-wrap canvas{max-width:100%;height:auto}
.brnd-click{cursor:pointer!important}
.brnd-click:hover{border-color:var(--red-b);color:var(--white)}
.brnds-hint{font-family:var(--sans);font-size:9px;font-style:italic;letter-spacing:1px;color:var(--off-dim);text-align:center;margin-top:16px}
/* FAQ ANSWER */
.faq-a{font-family:var(--sans);font-size:12px;font-weight:300;color:var(--off);line-height:1.8;padding:0 22px 20px}
/* SERVICE BLOCKS (dominanz-style cards, animated canvas icons) */
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-row .hd{margin-bottom:18px}
.chip-side canvas{display:block}
.chip-side,.dyno-side{margin-left:auto}
.dyno-side canvas{display:block;width:220px;height:160px}
.svc-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.svc-grid{grid-template-columns:1fr 1fr 1fr}}
.svcb{background:var(--b2);border:1px solid rgba(240,238,232,0.05);padding:22px 20px 18px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.svcb::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--red-b);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.svcb:hover{border-color:rgba(200,0,10,0.25);transform:translateY(-3px)}
.svcb:hover::after{transform:scaleX(1)}
.svcb-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.svcb-ic{width:76px;height:76px;flex-shrink:0}
.svcb-t{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--white);margin-bottom:6px}
.svcb-x{font-family:var(--sans);font-size:10.5px;font-weight:300;color:var(--off-dim);line-height:1.6}
.svcb-list{list-style:none;display:flex;flex-direction:column}
.svcb-list li{font-family:var(--sans);font-size:11.5px;font-weight:300;color:var(--off);padding:6px 0 6px 14px;position:relative;border-top:1px solid rgba(240,238,232,0.04)}
.svcb-list li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--red-b)}
.svcb-more{display:none;margin-top:12px;font-family:var(--sans);font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--red-b);background:transparent;border:1px solid rgba(200,0,10,0.3);padding:8px 14px;cursor:pointer;transition:all .2s}
.svcb-more:hover{background:rgba(200,0,10,0.12)}
@media(max-width:640px){
  .svcb{padding:18px 16px 16px}
  .svcb-list li:nth-child(n+6){display:none}
  .svcb.many .svcb-more{display:inline-block}
  .chip-side canvas{width:132px!important;height:132px!important}
  .dyno-side canvas{width:176px;height:128px}
}
/* SERVICE ACCORDION */
.svc-cats{display:flex;flex-direction:column;gap:2px}
.svc-cat{background:var(--b2);border:1px solid rgba(240,238,232,0.05);overflow:hidden;transition:border-color .3s}
.svc-cat:hover{border-color:rgba(200,0,10,0.15)}
.svc-cat-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;cursor:pointer;position:relative;overflow:hidden;transition:background .2s}
.svc-cat-header::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red-b);transform:scaleY(0);transition:transform .3s;transform-origin:bottom}
.svc-cat.open .svc-cat-header::before{transform:scaleY(1)}
.svc-cat-header:hover{background:rgba(200,0,10,0.02)}
.svc-cat-left{display:flex;align-items:center;gap:14px}
.svc-cat-icon{font-size:18px;min-width:22px}
.svc-cat-name{font-family:var(--sans);font-size:clamp(18px,4vw,24px);font-weight:600;color:var(--white)}
.svc-cat-count{font-family:var(--sans);font-size:8px;letter-spacing:2px;color:var(--off-dim);border:1px solid rgba(240,238,232,0.1);padding:2px 8px;margin-left:8px}
.svc-cat-arrow{font-size:16px;color:var(--off-dim);transition:transform .3s,color .3s}
.svc-cat.open .svc-cat-arrow{transform:rotate(90deg);color:var(--red-b)}
.svc-cat-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.25,.46,.45,.94)}
.svc-cat.open .svc-cat-body{max-height:1000px}
.svc-items{padding:4px 22px 20px;display:flex;flex-direction:column;gap:1px}
.svc-item{display:flex;align-items:center;gap:10px;padding:9px 12px;transition:all .2s;cursor:default}
.svc-item:hover{background:rgba(200,0,10,0.03);padding-left:18px}
.svc-item-dot{width:4px;height:4px;border-radius:50%;background:var(--red-b);flex-shrink:0}
.svc-item-name{font-family:var(--sans);font-size:12px;font-weight:300;color:var(--off);transition:color .2s}
.svc-item:hover .svc-item-name{color:var(--white)}
/* BRANDS */
.brnds{padding:48px 24px;background:var(--b2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.brnds-lb{font-family:var(--sans);font-size:8px;letter-spacing:5px;text-transform:uppercase;color:var(--off-dim);text-align:center;margin-bottom:28px}
.brnds-g{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:720px;margin:0 auto}
/* staggered chip entrance — animation (not transition) so hover stays snappy */
.brnds.reveal:not(.visible) .brnd{opacity:0}
.brnds.reveal.visible .brnd{animation:bIn .5s both}
.brnds.reveal.visible .brnd:nth-child(2){animation-delay:.05s}
.brnds.reveal.visible .brnd:nth-child(3){animation-delay:.1s}
.brnds.reveal.visible .brnd:nth-child(4){animation-delay:.15s}
.brnds.reveal.visible .brnd:nth-child(5){animation-delay:.2s}
.brnds.reveal.visible .brnd:nth-child(6){animation-delay:.25s}
.brnds.reveal.visible .brnd:nth-child(7){animation-delay:.3s}
.brnds.reveal.visible .brnd:nth-child(8){animation-delay:.35s}
.brnds.reveal.visible .brnd:nth-child(9){animation-delay:.4s}
@keyframes bIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.brnd{display:inline-flex;align-items:center;gap:9px;background:var(--b2);border:1px solid rgba(240,238,232,0.09);border-radius:999px;padding:9px 17px;cursor:pointer;transition:border-color .3s,transform .3s,background .3s,box-shadow .3s}
.brnd:hover{border-color:var(--red-b);transform:translateY(-2px);background:#131313;box-shadow:0 8px 22px rgba(0,0,0,0.4)}
/* logo via CSS mask: the background color IS the icon color, so it can
   transition to red on hover */
.brnd-lg{width:17px;height:17px;flex-shrink:0;background:var(--off);-webkit-mask:var(--lg) center/contain no-repeat;mask:var(--lg) center/contain no-repeat;transition:background .3s,transform .3s}
.brnd:hover .brnd-lg{background:var(--red-b);transform:scale(1.15)}
.brnd-name{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--off);position:relative;padding-bottom:2px;transition:color .3s}
.brnd:hover .brnd-name{color:var(--white)}
.brnd-name::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--red-b);transition:width .3s,left .3s}
.brnd:hover .brnd-name::after{width:100%;left:0}
.brnd-more{cursor:default;border-style:dashed;border-color:rgba(240,238,232,0.16);background:transparent}
.brnd-more:hover{transform:none;border-color:rgba(232,0,13,0.5);background:transparent;box-shadow:none}
.brnd-more .brnd-name{font-style:italic;text-transform:none;letter-spacing:1px;color:var(--off-dim);font-size:9px}
.brnd-more:hover .brnd-name{color:var(--off)}
.brnd-more .brnd-name::after{display:none}
.brnd:hover{border-color:var(--red-b);color:var(--white)}
/* STATS */
.statsb{padding:60px 24px;background:var(--b2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.statsg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.stati{text-align:center;padding:32px 10px;background:var(--b3);border:1px solid rgba(240,238,232,0.04);transition:border-color .3s;position:relative;overflow:hidden}
.stati::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--red-b);transform:scaleX(0);transition:transform .4s}
.stati:hover{border-color:rgba(200,0,10,0.2)}.stati:hover::after{transform:scaleX(1)}
.statn{font-family:var(--display);font-weight:700;font-size:clamp(30px,7vw,44px);letter-spacing:-0.02em;line-height:1;color:var(--white)}
.statn em{font-style:normal;color:var(--red-b)}
.statl{font-family:var(--sans);font-size:7.5px;letter-spacing:3px;text-transform:uppercase;color:var(--off);margin-top:8px}
/* WHY */
.whyg{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.whyc{background:var(--b2);padding:28px 20px;border:1px solid rgba(240,238,232,0.04);transition:border-color .3s;position:relative;overflow:hidden}
.whyc::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--red-b);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.whyc:hover{border-color:rgba(200,0,10,0.15)}.whyc:hover::after{transform:scaleX(1)}
.wi{margin-bottom:14px;color:var(--red-b);line-height:0}
.wi svg{width:30px;height:30px;display:block}
.wt{font-family:var(--sans);font-size:19px;font-weight:600;color:var(--white);margin-bottom:7px}
.wxt{font-family:var(--sans);font-size:11.5px;color:var(--off);line-height:1.75;font-weight:300}
/* PAGE HERO */
.ph{min-height:40svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 24px 48px;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.phbg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(200,0,10,0.1) 0%,transparent 55%),var(--black)}
.phln{position:absolute;inset:0;background-image:linear-gradient(rgba(200,0,10,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(200,0,10,0.03) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,0.6) 0%,transparent 70%)}
.ph-photo{position:absolute;inset:0;background:var(--pi) center 30%/cover no-repeat;opacity:.26;filter:grayscale(30%) contrast(1.06);mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,0.75) 60%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,0.75) 60%,transparent 100%)}
.peb{font-family:var(--sans);font-size:8px;letter-spacing:5px;color:var(--red-b);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:14px;position:relative;z-index:2}
.peb::before{content:"";width:20px;height:1px;background:var(--red-b)}
.ptitle{font-family:var(--display);font-weight:800;font-size:clamp(36px,9vw,64px);letter-spacing:-0.03em;line-height:1.02;position:relative;z-index:2;color:var(--white)}
.ptitle em{font-style:italic}.ptitle strong{font-weight:600;color:var(--red-b)}
/* ABOUT */
.aw{padding:64px 24px;display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
@media(min-width:840px){.aw{grid-template-columns:1.5fr 1fr}}
.aw-side{display:flex;justify-content:center}
.ai{font-family:var(--display);font-weight:600;font-size:clamp(20px,5vw,30px);letter-spacing:-0.02em;line-height:1.35;margin-bottom:36px;border-left:2px solid var(--red-b);padding-left:20px;color:var(--white)}
.ai em{font-style:italic;color:var(--off)}
.ab{font-family:var(--sans);font-size:12.5px;font-weight:300;color:var(--off);line-height:1.95}
.ab p+p{margin-top:16px}
/* TIM / OSNIVAČ (kartica sa okruglom slikom) */
.team{padding:8px 24px 8px}
.team-grid{display:grid;grid-template-columns:1fr;margin-top:8px}
.tm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;background:var(--b2);border:1px solid var(--border);border-radius:18px;max-width:760px;margin:0 auto;width:100%;padding:38px 28px}
@media(min-width:760px){.tm{flex-direction:row;text-align:left;align-items:center;gap:36px;padding:40px 44px}}
.tm-photo{width:210px;height:210px;flex-shrink:0;border-radius:50%;position:relative}
.tm-photo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;filter:grayscale(10%) contrast(1.04);border:3px solid rgba(232,0,13,0.95);position:relative;z-index:2;animation:tmHalo 2.2s ease-in-out infinite;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.tm:hover .tm-photo img{transform:scale(1.05)}
/* deblji, zasićen crveni okvir (~28px): pun crven uz sliku, drži jak crven
   pa tek na kraju bledi ka providnom; jasno "diše" (fade), ali ni pri udisaju
   ne postane bled. Sinhroni glow pojačava efekat. Držimo i uz Reduce Motion. */
.tm-photo::before{content:"";position:absolute;inset:-28px;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle at center,rgba(232,0,13,0) 0,rgba(232,0,13,0) calc(50% - 28px),rgba(232,0,13,1) calc(50% - 28px),rgba(232,0,13,0.95) calc(50% - 14px),rgba(232,0,13,0) 50%);animation:tmGlow 2.2s ease-in-out infinite}
@keyframes tmGlow{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes tmHalo{0%,100%{box-shadow:0 12px 34px rgba(0,0,0,0.55),0 0 46px rgba(232,0,13,0.8),0 0 18px rgba(232,0,13,0.6)}50%{box-shadow:0 12px 34px rgba(0,0,0,0.55),0 0 26px rgba(232,0,13,0.4),0 0 12px rgba(232,0,13,0.25)}}
.tm-info{display:flex;flex-direction:column;align-items:center}
@media(min-width:760px){.tm-info{align-items:flex-start}}
.tm-eb{font-family:var(--mono);font-size:8px;letter-spacing:5px;text-transform:uppercase;color:var(--red-b);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.tm-eb::before{content:"";width:20px;height:1px;background:var(--red-b)}
.tm-name{font-family:var(--display);font-weight:800;font-size:clamp(26px,5vw,36px);letter-spacing:-0.02em;line-height:1.05;color:var(--white)}
.tm-name em{font-style:italic;color:var(--red-b)}
.tm-role{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--off);margin-top:10px;padding-bottom:16px;border-bottom:1px solid rgba(240,238,232,0.08);width:100%}
.tm-bio{font-family:var(--sans);font-size:12.5px;font-weight:300;color:var(--off);line-height:1.9;margin-top:16px}
.tm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;justify-content:center}
@media(min-width:760px){.tm-tags{justify-content:flex-start}}
.tm-tags span{font-family:var(--mono);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--off);border:1px solid rgba(240,238,232,0.14);border-radius:999px;padding:5px 11px}
@media(max-width:640px){.team{padding:4px 18px}.tm{padding:30px 22px}.tm-photo{width:170px;height:170px}}
.valg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0 24px 64px}
.valc{background:var(--b2);padding:28px 20px;border-bottom:2px solid transparent;transition:all .3s;position:relative;overflow:hidden}
.valc:hover{border-color:var(--red-b);transform:translateY(-3px);background:#131313;box-shadow:0 14px 34px rgba(0,0,0,0.45)}
/* diagonal shine sweep on hover (shared with .whyc) */
.valc::before,.whyc::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(200,0,10,0.14),transparent);transform:skewX(-14deg);transition:left .55s ease;pointer-events:none}
.valc:hover::before,.whyc:hover::before{left:140%}
.valc:hover .valt,.whyc:hover .wt{color:var(--red-b)}
.valt,.wt{transition:color .3s}
.valt{font-family:var(--sans);font-size:20px;font-weight:600;color:var(--white);margin-bottom:8px}
.valx{font-family:var(--sans);font-size:11.5px;color:var(--off);line-height:1.7;font-weight:300}
/* CONTACT */
.cw{padding:56px 24px}
.ci{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid rgba(240,238,232,0.07);transition:padding .3s}
.ci:hover{padding-left:8px}.ci:last-child{border-bottom:none}
.cii{font-size:18px;min-width:24px;padding-top:2px}
.cil{font-family:var(--sans);font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--red-b);margin-bottom:5px}
.civ{font-family:var(--sans);font-size:14px;font-weight:300;color:var(--white)}
.civ a{color:var(--white);text-decoration:none;transition:color .2s}.civ a:hover{color:var(--red-b)}
.clog{display:flex;align-items:center;gap:14px;margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--border)}
.clog img{width:70px;height:70px;border-radius:12px;object-fit:contain;background:#000;border:1px solid rgba(200,0,10,0.2);transition:all .3s}
.clog:hover img{border-color:var(--red-b);transform:scale(1.05)}
.clogt{font-family:var(--sans);font-size:20px;font-weight:600;color:var(--white);letter-spacing:1px}
.clogt em{font-style:italic;color:var(--red-b)}
.cf{margin-top:48px;display:flex;flex-direction:column;gap:2px}
.ff{display:flex;flex-direction:column}
.fl{font-family:var(--sans);font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--red-b);padding:14px 14px 0;background:var(--b2)}
.fi,.fta{background:var(--b2);border:none;border-bottom:1px solid rgba(240,238,232,0.08);color:var(--white);font-family:var(--sans);font-size:13px;font-weight:300;padding:8px 14px 16px;outline:none;resize:none;transition:all .25s}
.fi:focus,.fta:focus{border-color:var(--red-b);background:rgba(200,0,10,0.02)}
.fi::placeholder,.fta::placeholder{color:var(--off-dim)}
.fta{min-height:120px}
.fs{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--white);background:var(--red);border:none;padding:18px;cursor:pointer;margin-top:10px;transition:all .3s;width:100%}
.fs:hover{background:var(--red-b);box-shadow:0 8px 32px rgba(200,0,10,0.45)}
.success-msg{display:none;text-align:center;padding:28px;background:rgba(200,0,10,0.04);border:1px solid var(--border)}
.success-msg.show{display:block;animation:fI .6s}
.success-msg p{font-family:var(--sans);font-size:20px;font-weight:600;font-style:italic;color:var(--white)}
.success-msg small{font-family:var(--sans);font-size:9px;letter-spacing:3px;color:var(--off);text-transform:uppercase;margin-top:8px;display:block}
/* WA */
.wa{position:fixed;bottom:24px;right:22px;z-index:200;background:#25D366;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;text-decoration:none;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:transform .3s}
.wa:hover{transform:scale(1.12) rotate(-5deg)}
/* FOOTER */
footer{padding:58px 24px 26px;border-top:1px solid var(--border);position:relative;overflow:hidden;background:var(--b2)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--red-b),transparent)}
.fgrid{display:grid;grid-template-columns:1fr;gap:40px;margin-bottom:40px}
@media(min-width:760px){.fgrid{grid-template-columns:1.3fr 1fr 1fr;gap:24px}}
.fbrand{display:flex;flex-direction:column;gap:18px}
.ftop{display:flex;align-items:center;gap:14px}
.ftop img{width:46px;height:46px;border-radius:9px;object-fit:contain;background:#000;border:1px solid var(--border);transition:all .3s}
.ftop:hover img{border-color:var(--red-b)}
.fname{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--white)}
.fname em{font-style:italic;color:var(--red-b)}
.ftag{font-family:var(--sans);font-size:11px;font-weight:300;color:var(--off);line-height:1.85;max-width:300px}
.fsocial{display:flex;gap:10px}
.fsoc{width:36px;height:36px;border-radius:50%;border:1px solid rgba(240,238,232,0.14);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--off);text-decoration:none;transition:all .25s}
.fsoc svg{width:15px;height:15px}
.fsoc:hover{border-color:var(--red-b);background:rgba(200,0,10,0.1);color:#fff;transform:translateY(-3px)}
.fcol-h{font-family:var(--sans);font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--red-b);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.fcol-h::before{content:"";width:14px;height:1px;background:var(--red-b)}
.fcol{display:flex;flex-direction:column;gap:12px}
.fcol a,.fcol span{font-family:var(--sans);font-size:11.5px;font-weight:300;color:var(--off);text-decoration:none;cursor:pointer;transition:color .2s;width:fit-content}
.fcol a:hover{color:var(--red-b)}
.fbottom{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;padding-top:22px;border-top:1px solid rgba(240,238,232,0.06)}
.fcopy{font-family:var(--sans);font-size:8px;color:rgba(154,150,144,.4);letter-spacing:1px;line-height:1.6}
/* suptilan potpis programera */
.fdev a{color:rgba(198,194,186,.62);text-decoration:none;transition:color .2s}
.fdev a:hover{color:var(--red-b)}
.dvd{display:flex;align-items:center;gap:16px;padding:0 24px;margin:4px 0}
.dvd::before,.dvd::after{content:"";flex:1;height:1px;background:var(--border)}
/* REVEAL */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-22px);transition:opacity .7s ease,transform .7s ease}
.reveal-l.visible{opacity:1;transform:translateX(0)}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}.rd4{transition-delay:.4s}
@keyframes fU{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fI{from{opacity:0}to{opacity:1}}
/* ── DOMINANZ-STYLE SKIN ──
   Fira Code for the small uppercase tech labels, rounded cards, pill
   buttons/chips, brighter secondary text for legibility. */
.eb,.hlabel,.peb,.viewer-eb,.est-eb,.pop-eb,.nav-links a,.statl,.blabel,.brnds-lb,.fcol-h,.cil,.stxt,.mqi,.nls,.fl,.int-tag,.est-f label,.svcb-more,.vc-btn,.pop-tags span,.hsp-tag,.sip-tag,.hs-label,.iscr-sub,.tile-s,.fcopy,.brnds-hint,.svc-cat-count,.int-back,.loader-txt{font-family:var(--mono)}
.svcb,.estw,.whyc,.valc,.stati,.svc-cat{border-radius:16px}
.pop{border-radius:18px}
.toast{border-radius:14px}
.hs-popup{border-radius:12px}
.btn-r,.btn-o,.nav-cta,.fs,.pop-cta,.est-btn,.svcb-more,.vc-btn,.int-back{border-radius:999px}
.pop-tags span,.hsp-tag,.sip-tag,.svc-cat-count{border-radius:999px}
.est-f select,.est-f input,.fi,.fta{border-radius:10px}
.fsoc{border-radius:50%}
.svcb-list li{font-size:12.5px;font-weight:400;color:#CFCBC4}
.svcb-x{font-size:11.5px;color:var(--off)}
.faq-a{font-size:12.5px;font-weight:400}
.pop-txt{font-size:12.5px;font-weight:400}
/* SERVICE SHOWCASE (homepage image cards) */
.svc-showcase{padding:0;border-top:1px solid var(--border)}
.svch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
@media(max-width:1024px) and (min-width:769px){.svch-grid{grid-template-columns:1fr;gap:2px}.svch,.svch-cnt{min-height:420px}}
.svch{position:relative;overflow:hidden;cursor:pointer;min-height:520px}
.svch-bg{position:absolute;inset:0;background:var(--bg,linear-gradient(135deg,#151515 0%,#0a0a0a 100%)) var(--pos,center)/var(--size,cover) no-repeat;transition:transform .75s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.svch:hover .svch-bg{transform:scale(1.05)}
.svch-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,0.94) 0%,rgba(8,8,8,0.52) 50%,rgba(8,8,8,0.18) 100%);transition:background .45s;z-index:1}
.svch:hover .svch-ov{background:linear-gradient(to top,rgba(8,8,8,0.98) 0%,rgba(8,8,8,0.65) 50%,rgba(8,8,8,0.28) 100%)}
.svch-cnt{position:relative;z-index:2;padding:40px 30px;display:flex;flex-direction:column;justify-content:flex-end;min-height:520px}
.svch-num{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--red-b);margin-bottom:9px;display:block}
.svch-sep{opacity:0.35;margin:0 3px}
.svch-eb{font-family:var(--mono);font-size:8.5px;letter-spacing:3px;text-transform:uppercase;color:var(--off-dim);margin-bottom:13px;display:block}
.svch-t{font-family:var(--sans);font-weight:800;font-size:clamp(1.6rem,2.8vw,2.4rem);color:var(--white);line-height:1.15;margin-bottom:14px}
.svch-t em{color:var(--red-b);font-style:normal}
.svch-x{font-size:.9rem;color:var(--off);line-height:1.72;margin-bottom:26px;max-width:360px}
.svch-cta{font-family:var(--mono);font-size:.78rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--red-b);display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid rgba(200,0,10,0.3);padding-bottom:4px;transition:gap .35s,color .35s,border-color .35s}
.svch:hover .svch-cta{gap:16px;color:var(--white);border-color:rgba(244,242,237,0.3)}
@media(max-width:768px){
  .svch-grid{grid-template-columns:1fr;gap:2px}
  .svch,.svch-cnt{min-height:360px}
  .svch-cnt{padding:28px 22px}
  .svch-x{max-width:100%;font-size:.85rem}
}
/* ── MOBILE COMPACTION — tighter rhythm, less scrolling on phones ── */
@media(max-width:640px){
  .hero{min-height:0;justify-content:flex-start;padding:112px 20px 46px}
  .hbadge{position:static;transform:none;text-align:left;margin-top:26px;animation:fU .9s 1.15s forwards}
  .hscroll{display:none}
  .sec{padding:46px 18px}
  .hd{margin-bottom:28px}
  .secsub{margin-top:-14px;margin-bottom:26px}
  .viewer-header{padding:38px 18px 16px}
  .vc-btn{padding:6px 10px;font-size:7.5px}
  .brnds{padding:34px 18px}
  .statsb{padding:30px 18px}
  .stati{padding:20px 8px}
  .whyc,.valc{padding:20px 14px}
  .valg{padding:0 18px 44px}
  .ph{min-height:0;padding:96px 18px 32px}
  .aw{padding:42px 18px}
  .ai{margin-bottom:24px}
  .cw{padding:38px 18px}
  footer{padding:38px 18px 18px}
  .fgrid{gap:26px;margin-bottom:26px}
  .anim3d-wrap{margin-bottom:20px}
  /* !important: the WebGL renderer writes inline width/height when created */
  .anim3d-wrap canvas{width:170px!important;height:170px!important}
  .svc-cat-header{padding:15px 14px}
  .svc-items{padding:2px 14px 14px}
  .faq-a{padding:0 14px 16px}
  .estw{padding:24px 16px}
  .est-form{gap:12px;margin-bottom:16px}
}
/* ── DESKTOP LAYOUT — centrirana kolona sadržaja, popunjen raspored ──
   Ista gustina utiska kao na telefonu: sadržaj ograničen na kolonu
   (--content) u sredini, sekcije koje su bile polu-prazne šire se u
   više kolona (4 kartice u redu, kalkulator merač+forma, kontakt 2 kolone). */
:root{--content:1192px}
.sec{max-width:calc(var(--content) + 48px);margin-left:auto;margin-right:auto}
@media(min-width:900px){
  .sec{padding:84px 24px}
  .hero,.ph,.brnds,.statsb,footer,.aw,.valg,.cw,.dvd{
    padding-left:max(24px,calc((100% - var(--content))/2));
    padding-right:max(24px,calc((100% - var(--content))/2))}
  .hbadge{right:max(24px,calc((100% - var(--content))/2))}
  .hscroll{right:max(24px,calc((100% - var(--content))/2))}
  .hsub{max-width:430px;font-size:13px}
  .whyg{grid-template-columns:repeat(4,1fr)}
  .valg{grid-template-columns:repeat(4,1fr)}
  .brnds-g{max-width:900px}
  /* kalkulator: merač levo, forma desno — bez praznog prostora */
  .estw{max-width:none;display:grid;grid-template-columns:370px 1fr;gap:10px 48px;align-items:center;
    grid-template-areas:"head head" "gauge form" "gauge hint" "gauge btn" "result result";padding:38px 44px}
  .est-head{grid-area:head;margin-bottom:12px}
  .est-gauge-wrap{grid-area:gauge;margin:0}
  .est-form{grid-area:form;margin-bottom:0}
  .est-hint{grid-area:hint;text-align:left;margin-bottom:4px}
  .est-btn{grid-area:btn;width:auto;justify-self:start;padding:15px 46px}
  .est-result{grid-area:result}
  /* kontakt: podaci levo, forma desno */
  .cw{display:grid;grid-template-columns:1fr 1.15fr;gap:0 64px;align-items:start}
  .clog{grid-column:1/-1}
  .cf{margin-top:0}
  .success-msg{grid-column:2}
}
/* ── PRISTUPAČNOST: bez dekorativnih animacija ako korisnik tako želi ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-grid,.mqt,.p,.hs-pulse,.sline{animation:none!important}
}

/* ── PLEXUS — animirana mreza tacaka i linija u pozadini sekcija ── */
.plx-host{position:relative}
.plx-host>*:not(.plx){position:relative;z-index:1}
.plx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}