/* Petar — dodatni efekti i dorade (primenjuje se na svaki update) */

/* Claude i ChatGPT u traci sa alatima — isti stil kao ostali nazivi */
.tool-logo-claude span,.tool-logo-chatgpt span{font-family:"PP Sans",Arial,sans-serif}

/* Select Concept: ilustracija desno, tekst levo — bez preklapanja */
.service-story-inner p{max-width:46%}
.service-story-art{width:46%;right:0}
.service-story-sheen{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:600/374;z-index:-1;pointer-events:none;
  opacity:calc(var(--service-open,1)*.9);
  -webkit-mask:var(--sheen-art) no-repeat right bottom/100% 100%;mask:var(--sheen-art) no-repeat right bottom/100% 100%;
  background:linear-gradient(105deg,transparent 0 38%,rgba(255,255,255,.08) 43%,rgba(205,214,255,.55) 50%,rgba(255,255,255,.08) 57%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;
  background-position:calc(var(--sheen,0)*100%) 0;
  transform:translate3d(0,var(--service-shift,0px),0);mix-blend-mode:screen}
@media(max-width:1024px){.service-story-inner p{max-width:52%}.service-story-art,.service-story-sheen{width:46%}}
@media(max-width:760px){
  .service-story{padding-bottom:calc(27px + var(--service-open,1)*(62.3vw - 22px))}
  .service-story-inner p{max-width:100%}
  .service-story-art,.service-story-sheen{width:100%;right:0;bottom:0}
  .service-story-art{opacity:var(--service-open,1)}
}
@media(prefers-reduced-motion:reduce){.service-story-sheen{display:none}}

/* Elasticne linije: plutajuci sloj koji zamenjuje liniju dok je mis iznad nje */
.pp-elastic{position:fixed;left:0;top:0;height:160px;pointer-events:none;z-index:40;overflow:visible}
.pp-elastic path{fill:none;vector-effect:non-scaling-stroke}

/* Okrugli meni: vidljiv i preko tamnih povrsina */
.menu-toggle.pp-on-dark{background:var(--accent,#455ce9)}
.menu-toggle.pp-on-dark:before{background:#3044b5}

/* ---------- Simboli "Who we work with": prva dva se okrecu, treci se spaja u krug ---------- */
.web-stage-symbol-1 .web-stage-icon,.web-stage-symbol-2 .web-stage-icon{animation:ppTurn 16s linear infinite;animation-play-state:paused}
.web-stage-symbol-1 .web-stage-icon{animation-duration:12s}
.web-audience-row.is-visible .web-stage-symbol-1 .web-stage-icon,.web-audience-row.is-visible .web-stage-symbol-2 .web-stage-icon{animation-play-state:running}
.web-stage-symbol-3 .web-stage-icon{animation:none}
@keyframes ppTurn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.web-stage-symbol .web-stage-icon{animation:none!important}}

/* ---------- Who I work with: zivi simboli, ulazak pri skrolu, put rasta i red koji reaguje na mis ---------- */
.web-audience{position:relative}
.web-audience-row{position:relative;isolation:isolate}
.web-stage-symbol{position:relative;z-index:0;transition:color .5s ease}
.web-stage-symbol::before{content:"";position:absolute;inset:-16px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(124,140,255,.26),rgba(124,140,255,0));opacity:0;transition:opacity .6s ease;pointer-events:none}
.web-stage-symbol::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid rgba(108,124,255,.75);opacity:0;pointer-events:none}
.pp-live-sym{overflow:visible;animation:none!important}
.pp-live-sym .pp-orig{display:none}
.pp-live-sym .pp-back{stroke-width:1.3;opacity:.3}
.pp-live-sym .pp-glint{stroke:#8d9dff;stroke-width:3.2;stroke-dasharray:.1 .9;animation:ppGlint 2.8s linear infinite}
.pp-live-sym .pp-echo{stroke:#8d9dff;stroke-width:1.2}
.pp-live-sym .pp-orbit{fill:none;stroke:#8d9dff;stroke-width:1;stroke-dasharray:1.5 3.5}
.pp-live-sym .pp-dot{fill:#6f80ff;stroke:none}
@keyframes ppGlint{to{stroke-dashoffset:-1}}
/* dosegnut na putu rasta: ikona postaje plava, tiho svetlo iza nje i jedan talas */
.pp-reach .web-stage-symbol{color:#455ce9}
.pp-reach .web-stage-symbol::before{opacity:1}
.pp-reach .web-stage-symbol::after{animation:ppReach 1.3s cubic-bezier(.2,.7,.2,1)}
.pp-reach .pp-glint{stroke:#c3cbff}
@keyframes ppReach{0%{opacity:.95;transform:scale(.55)}100%{opacity:0;transform:scale(1.6)}}
/* ulazak: linija se iscrta sleva nadesno, pa ikona (crta se), natpis i tekst red po red */
.pp-aud-rule svg{transform:scaleX(0);transform-origin:0 50%}
.pp-aud-rule.pp-in svg{transform:none;transition:transform 1.3s cubic-bezier(.65,0,.35,1) var(--d,0s)}
.pp-aud .web-stage-symbol{opacity:0;transform:scale(.6) rotate(-25deg)}
.pp-aud h3{opacity:0;transform:translateX(-18px)}
.pp-aud.pp-in .web-stage-symbol{opacity:1;transform:none;transition:opacity .9s ease calc(var(--d,0s) + .15s),transform 1.3s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .15s),color .5s ease}
.pp-aud.pp-in h3{opacity:1;transform:none;transition:opacity .8s ease calc(var(--d,0s) + .32s),transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .32s),color .4s ease}
.pp-aud.pp-done .web-stage-symbol{transition:transform .6s cubic-bezier(.2,.8,.2,1),color .5s ease}
.pp-aud.pp-done h3{transition:transform .6s cubic-bezier(.2,.8,.2,1),color .4s ease}
.pp-aud .pp-dr{stroke-dasharray:1 1;stroke-dashoffset:1}
.pp-aud.pp-in .pp-dr{stroke-dashoffset:0;transition:stroke-dashoffset 1.7s cubic-bezier(.65,0,.35,1) calc(var(--d,0s) + .2s)}
.pp-aud.pp-done .pp-dr{stroke-dasharray:none}
/* put rasta: isprekidana staza, plavo punjenje i svetla tacka (sakriveni ispod ikona) */
.pp-grow{position:absolute;left:var(--x,0);top:var(--y,0);height:var(--h,0);width:44px;margin-left:-22px;pointer-events:none;opacity:0;transition:opacity 1s ease .5s;-webkit-mask-image:var(--m);mask-image:var(--m)}
.pp-grow-on .pp-grow{opacity:1}
.pp-grow-track{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:repeating-linear-gradient(to bottom,rgba(28,29,32,.32) 0 3px,rgba(28,29,32,0) 3px 8px)}
.pp-grow-fill{position:absolute;left:50%;top:0;height:100%;width:2px;margin-left:-1px;border-radius:2px;background:linear-gradient(to bottom,#a6b1ff,#455ce9);transform:scaleY(0);transform-origin:50% 0;will-change:transform}
.pp-grow-dot{position:absolute;left:50%;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#455ce9;box-shadow:0 0 0 3px rgba(108,124,255,.2),0 0 14px 2px rgba(108,124,255,.6);will-change:transform}
.pp-grow-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(108,124,255,.6);animation:ppDotPulse 2.2s ease-out infinite}
.pp-grow:not(.pp-vis) .pp-grow-dot::after{animation-play-state:paused}
@keyframes ppDotPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.7);opacity:0}}
/* linija ispod reda se puni plavom bojom (mis iznad reda) */
.web-audience .web-rule{position:relative}
.pp-rule-fill{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,#455ce9,#7c8cff 60%,#b3bcff);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .web-audience-row::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:36%;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(50% 50% at 50% 50%,rgba(124,140,255,.17),rgba(124,140,255,.07) 55%,rgba(124,140,255,0) 100%)}
  .web-audience-row:hover::before{animation:ppRowSweep 1.3s cubic-bezier(.45,.05,.25,1) forwards}
  .web-audience-row::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(40% 45% at 14% 45%,rgba(124,140,255,.1),rgba(124,140,255,0) 100%)}
  .web-audience-row:hover::after{opacity:1}
  .web-audience-row:hover .web-stage-symbol{transform:scale(1.14);color:#455ce9}
  .web-audience-row:hover .web-stage-symbol::before{opacity:1}
  .web-audience-row:hover .pp-glint{stroke:#c3cbff}
  .web-audience-row:hover h3{transform:translateX(12px);color:#455ce9}
  .web-audience-row:hover + .web-rule .pp-rule-fill{transform:scaleX(1)}
}
@keyframes ppRowSweep{0%{opacity:0;transform:translateX(-20%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(200%)}}
@media(prefers-reduced-motion:reduce){.pp-aud .web-stage-symbol,.pp-aud h3{opacity:1;transform:none}.pp-aud-rule svg{transform:none}.pp-aud .pp-dr{stroke-dasharray:none}.pp-grow{display:none}}

/* ---------- Who I work with: nova ikona za velike sisteme (slojevi postaju svetlo lavanda kad su dosegnuti) ---------- */
.pp-stack .pp-fill{fill:#fff;transition:fill .5s ease}
.pp-reach .pp-stack .pp-fill{fill:#eef0ff}
@media(hover:hover) and (pointer:fine){.web-audience-row:hover .pp-stack .pp-fill{fill:#eef0ff}}

/* ---------- Typical timelines: kratka plava crtica sa razmakom umesto spojene (2–3), + u plavoj ---------- */
.web-duration .pp-dash{display:inline-block;position:relative;overflow:hidden;width:.44em;height:.7em;margin:0 .08em;vertical-align:baseline;-webkit-text-fill-color:transparent}
.web-duration .pp-dash::before{content:"";position:absolute;left:.07em;right:.07em;bottom:.3em;height:.07em;border-radius:.04em;background:#455ce9;transform-origin:0 50%}
.web-duration .pp-dash::after{content:"";position:absolute;left:0;bottom:.3em;width:.2em;height:.07em;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));transform:translateX(-.25em);opacity:0}
.web-duration .pp-plus{color:#455ce9;margin-left:.05em}
.pp-dash-armed .pp-dash::before{transform:scaleX(0)}
.pp-dash-armed.pp-on .pp-dash::before{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1) .25s}
.pp-dash-armed.pp-on.pp-vis .pp-dash::after{opacity:1;animation:ppDashShine 3.4s ease-in-out 1.2s infinite}
@keyframes ppDashShine{0%{transform:translateX(-.25em)}45%,100%{transform:translateX(.5em)}}
@media(prefers-reduced-motion:reduce){.web-duration .pp-dash::after{display:none}.pp-dash-armed .pp-dash::before{transform:none}}

/* ---------- Desktop: kompaktnije stranice usluga (kao Brand Identity) ---------- */
@media(min-width:1001px){
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .product-opening{padding-top:clamp(105px,8vw,160px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .product-opening h1{font-size:clamp(52px,6.4vw,118px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .product-lead{margin-top:40px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .product-lead p{font-size:clamp(24px,2.2vw,36px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-detail-shell{width:76%;max-width:1160px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-section-title{font-size:clamp(36px,4.6vw,68px);line-height:1.08;font-weight:450;margin-bottom:clamp(32px,4vw,58px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-build-grid,
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-capabilities-grid,
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-timeline-grid{gap:14px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-offer{border-radius:18px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-offer-copy{padding:clamp(24px,2.5vw,36px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-offer h3{font-size:clamp(24px,2.3vw,36px);margin-bottom:14px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-offer p{font-size:clamp(17px,1.4vw,22px);line-height:1.45}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-offer-art{height:clamp(200px,20vw,320px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-offer:nth-child(2) .web-offer-art,
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-offer:nth-child(3) .web-offer-art{height:clamp(180px,16vw,260px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) :is(.web-capabilities,.web-timelines,.web-audience){padding-top:clamp(75px,8vw,120px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-capability{padding:clamp(24px,2.5vw,36px);border-radius:18px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-capability h3{font-size:clamp(22px,1.9vw,29px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-capability p{font-size:clamp(16px,1.3vw,19px);line-height:1.45;margin-top:14px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-icon{width:30px;height:30px;margin-bottom:22px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-timeline{padding:clamp(24px,2.5vw,36px);border-radius:18px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-timeline h3{font-size:clamp(21px,1.9vw,29px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-duration{font-size:clamp(52px,5.7vw,84px);margin:22px 0 10px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-time-unit{font-size:12px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-timeline-note{font-size:clamp(16px,1.3vw,19px);margin-top:28px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-audience{padding-bottom:clamp(80px,8vw,130px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-audience .web-section-title{margin-bottom:45px}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-audience-row.product-stage{min-height:170px;padding:18px 0 50px;grid-template-columns:1fr 140px minmax(0,1.3fr)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-audience-row.product-stage p{font-size:clamp(19px,1.7vw,26px)}
  :is([data-page="product-design"],[data-page="web-design-development"],[data-page="ux-ui-design"]) .web-stage-symbol{width:52px;height:52px}
}

/* ---------- Our capabilities: kartice dolaze iz centra na svoje mesto ---------- */
.pp-gather .web-capability{will-change:transform,opacity;transition:none!important}

/* ---------- Desktop: uvodni deo na pocetnoj — kompaktno, bez praznog prostora ---------- */
.intro-line{display:none}
@media(min-width:1001px){
  .introduction.section-shell{padding:clamp(95px,8vw,140px) 0 clamp(90px,7.5vw,130px)}
  .introduction .intro-grid{width:min(70vw,1240px);margin:0 auto;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:clamp(48px,5vw,96px);row-gap:0;align-items:end;position:relative}
  .introduction .intro-grid h2{grid-column:1;grid-row:1;font-size:clamp(44px,4.3vw,80px);line-height:1.12}
  .introduction .intro-aside{display:contents}
  .introduction .intro-aside p{grid-column:2;grid-row:1;max-width:460px;font-size:clamp(17px,1.3vw,22px);line-height:1.6;padding:0 0 .35em}
  .introduction .intro-line{display:block;grid-column:1/-1;grid-row:2;align-self:end;height:1px;background:var(--line,#d5d5d2);margin:0 0 79px}
  .introduction .intro-aside .circle-button{grid-column:1/-1;grid-row:2;justify-self:end;margin:clamp(48px,4.5vw,72px) 8% 0 0;position:relative;z-index:1}
}

/* ---------- Desktop: Brand Identity naslov malo vise ---------- */
@media(min-width:1001px){
  [data-page="brand-identity"] .product-opening{padding-top:clamp(105px,8vw,160px)}
  [data-page="brand-identity"] .product-opening h1{font-size:clamp(52px,6.4vw,118px)}
  [data-page="brand-identity"] .product-lead{margin-top:40px}
}

/* ---------- Stranice usluga: najbolji moguci prikaz slika i kartica ---------- */
.service-detail .web-offer-art img,.service-detail .brand-card-art img{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.service-detail img.pp-native{width:auto!important;height:auto!important;max-width:min(100%,var(--pp-nw));max-height:min(100%,var(--pp-nh));margin:auto}
.service-detail .web-offer{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.service-detail .web-capability{transition:background-color .4s}
@media(hover:hover) and (pointer:fine){
  .service-detail .web-offer:hover{transform:translate3d(0,-4px,0);box-shadow:0 18px 40px -22px rgba(28,29,32,.35)}
  .service-detail .web-capability:hover{background-color:#e9ebf8}
}
@media(prefers-reduced-motion:reduce){.service-detail .web-offer,.service-detail .web-offer:hover{transform:none;transition:none}}

/* ---------- Desktop: About — vidljiviji sitni tekst ---------- */
@media(min-width:1001px){
  [data-page="about"] .about-opening>.eyebrow,[data-page="about"] .approach>.eyebrow{font-size:12px}
  [data-page="about"] .story-arrow{font-size:44px}
  [data-page="about"] .about-story p{font-size:clamp(21px,1.6vw,28px);line-height:1.55}
  [data-page="about"] .about-story .story-note{font-size:clamp(16px,1.2vw,20px);line-height:1.6}
  [data-page="about"] .type-art>span{font-size:clamp(12px,.95vw,15px)}
  [data-page="about"] .capability-grid article>span{font-size:13px}
  [data-page="about"] .capability-grid h3{font-size:clamp(36px,2.9vw,46px)}
  [data-page="about"] .capability-grid p{font-size:clamp(17px,1.3vw,21px);line-height:1.7}
  [data-page="about"] .capability-grid small{font-size:clamp(12px,.9vw,14px)}
  [data-page="about"] .approach>div p{font-size:clamp(20px,1.55vw,27px);line-height:1.65}
  [data-page="about"] .approach .text-link{font-size:15px}
}

/* Originalne vektorske ilustracije: bez filtera, uvek ostre */
.service-detail img.pp-art{filter:none!important;image-rendering:auto}

/* ---------- Desktop: Contact — vidljiviji kontakt podaci ---------- */
@media(min-width:1001px){
  [data-page="contact"] .contact-details .eyebrow{font-size:11px;margin-bottom:18px}
  [data-page="contact"] .contact-details a,[data-page="contact"] .contact-details p{font-size:clamp(17px,1.25vw,20px);line-height:1.75}
  [data-page="contact"] .contact-avatar{width:124px;height:124px}
}

/* Meni: bez okvira oko linkova; fokus sa tastature se vidi kao blago plava boja i tanka podvlaka */
.menu-panel a:focus-visible,.menu-panel button:focus-visible{outline:none}
.menu-panel nav a:focus-visible span,.menu-panel .menu-socials a:focus-visible{color:#b3bcff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.menu-panel [data-language]:focus-visible{background-color:rgba(124,140,255,.28)}
.menu-panel.pp-mouse a:focus-visible span,.menu-panel.pp-mouse .menu-socials a:focus-visible{color:inherit;text-decoration:none}
.menu-panel.pp-mouse [data-language]:focus-visible{background-color:transparent}

/* ---------- Pocetna: studijsko svetlo iza Petra, 3D dubina i spori zum (Ken Burns) ---------- */
/* spori zum: 10 sitnih koraka u sekundi (oko trecine piksela) — oku izgleda glatko, a racunar crta mnogo manje */
.pp-photo{transform-origin:41% 30%;animation:ppKen 26s steps(65,jump-none) infinite alternate}
@keyframes ppKen{0%{scale:1.035}25%{scale:1.0405}50%{scale:1.06}75%{scale:1.0795}100%{scale:1.085}}
@media(max-width:760px){.pp-photo{transform-origin:49% 30%}}
.pp-photo-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:inherit}
.pp-studio{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pp-cut{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:inherit;pointer-events:none}
/* racunar: svetlo je izmedju fotografije i isecka Petra (bez maske — najlaksi rad za graficku); pali se kad se isecak ucita */
@media(min-width:761px){.pp-studio{opacity:0;transition:opacity 1.4s ease}.pp-photo.pp-lit .pp-studio{opacity:1}}
/* telefon: umesto isecka maska od 9 KB (svetlo pada samo na sivu pozadinu) */
@media(max-width:760px){.pp-cut{display:none}.pp-studio{-webkit-mask:url(/assets/hero-mask-v1.webp) 36% 50%/cover no-repeat;mask:url(/assets/hero-mask-v1.webp) 36% 50%/cover no-repeat}}
.pp-studio-light{position:absolute;left:51%;top:30%;width:min(78vw,1140px);aspect-ratio:1;translate:-50% -50%;will-change:transform}
.pp-studio-light::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(250,251,255,0.6200) 0%,rgba(250,251,255,0.6043) 8.3%,rgba(250,251,255,0.5593) 16.7%,rgba(250,251,255,0.4916) 25%,rgba(250,251,255,0.4099) 33.3%,rgba(250,251,255,0.3238) 41.7%,rgba(250,251,255,0.2417) 50%,rgba(250,251,255,0.1698) 58.3%,rgba(250,251,255,0.1113) 66.7%,rgba(250,251,255,0.0667) 75%,rgba(250,251,255,0.0349) 83.3%,rgba(250,251,255,0.0135) 91.7%,rgba(250,251,255,0.0000) 100%)}
@keyframes ppBreath{0%,100%{transform:scale(.93);opacity:.8}50%{transform:scale(1.05);opacity:1}}
.pp-studio.pp-track .pp-studio-light{left:0;top:0;animation:none}
.hero.pp-depth .name-marquee{will-change:transform}
@media(max-width:760px){.pp-studio-light{left:24%;top:31%;width:135vw}}
@media(hover:none),(pointer:coarse){.pp-studio-light{animation:ppDrift 18s ease-in-out infinite alternate}.pp-studio-light::before{animation:ppBreath 7s ease-in-out infinite}}
@keyframes ppDrift{0%{transform:translate3d(-7vw,-2svh,0)}50%{transform:translate3d(3vw,3svh,0)}100%{transform:translate3d(8vw,-1svh,0)}}
.hero:not(.is-motion-visible) .pp-photo,.hero:not(.is-motion-visible) .pp-studio-light,.hero:not(.is-motion-visible) .pp-studio-light::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.pp-photo,.pp-studio-light,.pp-studio-light::before{animation:none!important}.pp-photo{scale:none;translate:none}}

/* ---------- Bele strane: traka napretka skrola ---------- */
.pp-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:48;pointer-events:none;opacity:0;transition:opacity .45s ease}
.pp-progress.on{opacity:1}
.pp-progress i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#455ce9,#6f80ff 55%,#a6b1ff);box-shadow:0 0 10px rgba(108,124,255,.55);will-change:transform}
body:has(.menu-panel.open) .pp-progress,body.page-changing .pp-progress,body.intro-active .pp-progress{opacity:0}

/* ---------- Bele strane: blago lavanda svetlo prati mis (iza sadrzaja; tamne sekcije ga prekrivaju) ---------- */
.pp-wlight{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pp-wlight i{position:absolute;left:0;top:0;width:1000px;height:1000px;margin:-500px 0 0 -500px;border-radius:50%;opacity:0;transition:opacity .9s ease;will-change:transform,opacity;background:radial-gradient(closest-side,rgba(124,140,255,0.1200) 0%,rgba(124,140,255,0.1165) 8.3%,rgba(124,140,255,0.1066) 16.7%,rgba(124,140,255,0.0919) 25%,rgba(124,140,255,0.0746) 33.3%,rgba(124,140,255,0.0569) 41.7%,rgba(124,140,255,0.0408) 50%,rgba(124,140,255,0.0274) 58.3%,rgba(124,140,255,0.0170) 66.7%,rgba(124,140,255,0.0096) 75%,rgba(124,140,255,0.0048) 83.3%,rgba(124,140,255,0.0017) 91.7%,rgba(124,140,255,0.0000) 100%)}
.pp-wlight.on i{opacity:1}
body:has(.menu-panel.open) .pp-wlight i,body[data-route="contact"] .pp-wlight i{opacity:0}

/* ---------- Bele strane: naslovi se otkrivaju red po red ---------- */
.pp-hl:not(.pp-hl-split){opacity:0}
.pp-lns{display:flex;flex-direction:column}
.pp-ln{display:block;overflow:hidden;padding:.14em .06em .17em;margin:-.14em -.06em -.17em}
.pp-lt{display:block;white-space:nowrap;transform:translate3d(0,118%,0);opacity:0;transition:transform 1.1s cubic-bezier(.33,1,.68,1),opacity .9s ease;transition-delay:var(--d,0s)}
.pp-hl-go .pp-lt{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.pp-hl:not(.pp-hl-split){opacity:1}.pp-lt{transform:none;opacity:1;transition:none}}
@media print{.pp-hl:not(.pp-hl-split){opacity:1}.pp-lt{transform:none;opacity:1}.pp-progress,.pp-wlight{display:none}}

/* ---------- My capabilities: ikone se nacrtaju, a zatim svaka ima malu petlju po svom znacenju ---------- */
.pp-ic{--icl:calc(1.7s + var(--ici,0) * .42s)}
.pp-cap .pp-x{opacity:0;fill:none}
.pp-cap g{transform-box:view-box}
.pp-cap .pp-pa,.pp-cap .pp-pb,.pp-cap .pp-play,.pp-cap .pp-ring,.pp-cap .pp-head,.pp-cap .pp-sun,.pp-cap .pp-bub{transform-box:fill-box;transform-origin:center}
.pp-ic .pp-cap .pp-s{stroke-dasharray:1 1;stroke-dashoffset:1}
.pp-ic-in .pp-cap .pp-s{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1) calc(.15s + var(--ici,0) * .09s)}
.pp-ic-done .pp-cap .pp-s:not(.pp-keep){stroke-dasharray:none}
/* tok: svetla crtica putuje po liniji (ruta, hijerarhija, planine) */
.pp-cap .pp-flow{stroke:#6f80ff;stroke-width:2.6;stroke-dasharray:.16 2;stroke-dashoffset:.16}
.pp-ic-on .pp-cap-route .pp-flow,.pp-ic-on .pp-cap-tree .pp-flow{animation:ppIcFlow 3.4s cubic-bezier(.45,0,.3,1) var(--icl) infinite}
@keyframes ppIcFlow{0%{stroke-dashoffset:.16;opacity:0}8%{opacity:1}62%{stroke-dashoffset:-.84;opacity:1}72%,100%{stroke-dashoffset:-.84;opacity:0}}
.pp-ic-on .pp-cap-route .pp-pa{animation:ppIcDepart 3.4s ease var(--icl) infinite}
.pp-ic-on .pp-cap-route .pp-pb{animation:ppIcArrive 3.4s ease var(--icl) infinite}
@keyframes ppIcDepart{0%{transform:scale(1)}6%{transform:scale(.78)}16%,100%{transform:scale(1)}}
@keyframes ppIcArrive{0%,56%{transform:scale(1)}65%{transform:scale(1.32)}78%,100%{transform:scale(1)}}
.pp-cap-tree .pp-boxt,.pp-cap-tree .pp-boxb{fill:#7c8cff;fill-opacity:0}
.pp-ic-on .pp-cap-tree .pp-boxt{animation:ppIcSend 3.4s ease var(--icl) infinite}
.pp-ic-on .pp-cap-tree .pp-boxb{animation:ppIcRecv 3.4s ease var(--icl) infinite}
@keyframes ppIcSend{0%{fill-opacity:.45}14%,100%{fill-opacity:0}}
@keyframes ppIcRecv{0%,58%{fill-opacity:0}68%{fill-opacity:.45}86%,100%{fill-opacity:0}}
/* lupa trazi, preko stakla prodje odsjaj */
.pp-ic-on .pp-cap-search .pp-g-mag{animation:ppIcSearch 4.6s ease-in-out var(--icl) infinite}
@keyframes ppIcSearch{0%,100%{transform:translate(0,0)}22%{transform:translate(-1.6px,-.9px)}48%{transform:translate(.4px,-1.9px)}74%{transform:translate(1.6px,-.4px)}}
.pp-cap .pp-shine{stroke:#9aa8ff;stroke-width:1.8}
.pp-ic-on .pp-cap-search .pp-shine{animation:ppIcShine 4.6s ease var(--icl) infinite}
@keyframes ppIcShine{0%,30%{opacity:0}45%{opacity:1}62%,100%{opacity:0}}
/* zupcanik se okrece, centar svetli */
.pp-cap-gear .pp-g-gear{transform-origin:16px 15.5px}
.pp-ic-on .pp-cap-gear .pp-g-gear{animation:ppIcSpin 14s linear var(--icl) infinite}
@keyframes ppIcSpin{to{transform:rotate(360deg)}}
.pp-cap .pp-hub,.pp-cap .pp-bull{fill:#6f80ff;stroke:none}
.pp-ic-on .pp-cap-gear .pp-hub{animation:ppIcGlow 2.8s ease-in-out var(--icl) infinite}
@keyframes ppIcGlow{0%,100%{opacity:0}50%{opacity:.85}}
/* ekran: play pulsira, traka napretka tece */
.pp-ic-on .pp-cap-screen .pp-play{animation:ppIcPlay 3.6s ease var(--icl) infinite}
@keyframes ppIcPlay{0%,100%{transform:scale(1)}7%{transform:scale(1.2)}15%{transform:scale(1)}}
.pp-cap .pp-prog{stroke:#6f80ff;stroke-width:2.2;stroke-dasharray:1 1;stroke-dashoffset:1}
.pp-ic-on .pp-cap-screen .pp-prog{animation:ppIcProg 3.6s linear var(--icl) infinite}
@keyframes ppIcProg{0%{stroke-dashoffset:1;opacity:1}82%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
/* cetkica zamahne i "umoci se" u boju */
.pp-cap-brush .pp-g-brush{transform-origin:27px 5px}
.pp-ic-on .pp-cap-brush .pp-g-brush{animation:ppIcBrush 3.8s ease-in-out var(--icl) infinite}
@keyframes ppIcBrush{0%,100%{transform:rotate(0)}18%{transform:rotate(-8deg)}38%{transform:rotate(5deg)}56%{transform:rotate(-3deg)}72%{transform:rotate(0)}}
.pp-cap-brush .pp-paint{fill:#7c8cff;fill-opacity:0}
.pp-ic-on .pp-cap-brush .pp-paint{animation:ppIcPaint 3.8s ease var(--icl) infinite}
@keyframes ppIcPaint{0%,10%{fill-opacity:0}30%{fill-opacity:.5}60%,100%{fill-opacity:0}}
/* olovka klizi uz lenjir */
.pp-ic-on .pp-cap-pencil .pp-g-pen{animation:ppIcPen 3.6s ease-in-out var(--icl) infinite}
@keyframes ppIcPen{0%,100%{transform:translate(0,0)}35%{transform:translate(-1.8px,1.8px)}62%{transform:translate(1px,-1px)}}
/* kod: zagrade disu, kosa crta trepce kao kursor */
.pp-ic-on .pp-cap-code .pp-g-cl{animation:ppIcBrL 3s ease-in-out var(--icl) infinite}
.pp-ic-on .pp-cap-code .pp-g-cr{animation:ppIcBrR 3s ease-in-out var(--icl) infinite}
@keyframes ppIcBrL{0%,100%{transform:translateX(0)}50%{transform:translateX(-1.6px)}}
@keyframes ppIcBrR{0%,100%{transform:translateX(0)}50%{transform:translateX(1.6px)}}
.pp-ic-on .pp-cap-code .pp-caret{animation:ppIcCaret 1.1s steps(1) var(--icl) infinite}
@keyframes ppIcCaret{0%{stroke:currentColor;opacity:1}50%{stroke:#6f80ff;opacity:.35}}
/* tekst se iznova kuca / skicira (zicani okvir, oblacic, sistem, knjiga) */
.pp-ic-on .pp-cap .pp-t1{animation:ppIcType 4.6s ease var(--icl) infinite}
.pp-ic-on .pp-cap .pp-t2{animation:ppIcType 4.6s ease calc(var(--icl) + .22s) infinite}
.pp-ic-on .pp-cap .pp-t3{animation:ppIcType 4.6s ease calc(var(--icl) + .44s) infinite}
.pp-ic-on .pp-cap .pp-t4{animation:ppIcType 4.6s ease calc(var(--icl) + .66s) infinite}
@keyframes ppIcType{0%,6%{stroke-dashoffset:0}16%{stroke-dashoffset:1}34%,100%{stroke-dashoffset:0}}
.pp-ic-on .pp-cap-bubble .pp-bub{animation:ppIcBub 4.6s ease var(--icl) infinite}
@keyframes ppIcBub{0%,100%{transform:scale(1)}8%{transform:scale(.94)}18%{transform:scale(1.03)}28%{transform:scale(1)}}
.pp-cap .pp-nav{fill:#7c8cff;stroke:none}
.pp-ic-on .pp-cap-ui .pp-nav{animation:ppIcNav 4.6s ease var(--icl) infinite}
@keyframes ppIcNav{0%,100%{opacity:0}12%{opacity:.4}30%{opacity:0}}
/* meta: strela se ispali iz centra, unutrasnji krug zatreperi */
.pp-ic-on .pp-cap-target .pp-arrow{animation:ppIcShoot 3.6s cubic-bezier(.5,0,.2,1) var(--icl) infinite}
@keyframes ppIcShoot{0%,8%{stroke-dashoffset:0}22%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}
.pp-ic-on .pp-cap-target .pp-head{animation:ppIcHead 3.6s ease var(--icl) infinite}
@keyframes ppIcHead{0%,8%{opacity:1;transform:none}20%{opacity:0;transform:translate(-3px,3px)}38%{opacity:1;transform:translate(1px,-1px)}46%,100%{opacity:1;transform:none}}
.pp-ic-on .pp-cap-target .pp-ring{animation:ppIcRing 3.6s ease var(--icl) infinite}
@keyframes ppIcRing{0%,36%{transform:scale(1)}44%{transform:scale(1.18)}56%,100%{transform:scale(1)}}
.pp-ic-on .pp-cap-target .pp-bull{animation:ppIcBull 3.6s ease var(--icl) infinite}
@keyframes ppIcBull{0%,36%{opacity:0}44%{opacity:.9}70%,100%{opacity:0}}
/* logo: odsjaj obilazi romb */
.pp-cap .pp-glint{stroke:#9aa8ff;stroke-width:2.6;stroke-dasharray:.14 .86}
.pp-ic-on .pp-cap-logo .pp-glint{animation:ppIcLap 3.4s linear var(--icl) infinite}
@keyframes ppIcLap{0%{stroke-dashoffset:0;opacity:0}8%,92%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
/* slika: sunce se podigne i zasvetli, odsjaj preko planina */
.pp-cap-image .pp-sun{fill:#7c8cff;fill-opacity:0}
.pp-ic-on .pp-cap-image .pp-sun{animation:ppIcSun 4.4s ease-in-out var(--icl) infinite}
@keyframes ppIcSun{0%,100%{transform:translateY(0);fill-opacity:0}40%{transform:translateY(-1.8px);fill-opacity:.7}70%{transform:translateY(0);fill-opacity:0}}
.pp-cap .pp-ridge{stroke:#9aa8ff;stroke-width:2.4;stroke-dasharray:.16 2;stroke-dashoffset:.16}
.pp-ic-on .pp-cap-image .pp-ridge{animation:ppIcFlow 4.4s ease-in-out calc(var(--icl) + .6s) infinite}
/* pokret: trougao krene napred, linije iza trepere kao trag */
.pp-ic-on .pp-cap-motion .pp-g-tri{animation:ppIcTri 2.8s cubic-bezier(.5,0,.2,1) var(--icl) infinite}
@keyframes ppIcTri{0%,100%{transform:translateX(0)}30%{transform:translateX(2.2px)}60%{transform:translateX(0)}}
.pp-ic-on .pp-cap-motion .pp-b1{animation:ppIcTrail 2.8s ease var(--icl) infinite}
.pp-ic-on .pp-cap-motion .pp-b2{animation:ppIcTrail 2.8s ease calc(var(--icl) + .12s) infinite}
@keyframes ppIcTrail{0%,100%{opacity:1}22%{opacity:.25}48%{opacity:1}}
/* kartice: prednja se podigne i nagne */
.pp-cap-cards .pp-g-card{transform-origin:11px 25px}
.pp-ic-on .pp-cap-cards .pp-g-card{animation:ppIcCard 3.8s cubic-bezier(.4,0,.2,1) var(--icl) infinite}
@keyframes ppIcCard{0%,100%{transform:none}28%{transform:translate(-1px,-1.4px) rotate(-7deg)}58%{transform:none}}
@media(prefers-reduced-motion:reduce){.pp-cap *{animation:none!important}.pp-ic .pp-cap .pp-s{stroke-dasharray:none}}
/* ===== Work (stranica sa linka) + boje i animacije sajta ===== */
html body[data-route="work"] .mobile-menu-label{color:var(--work-ink)}
body[data-route="work"] .footer-curve:before{background:var(--work-bg)}
body[data-route="work"]:not(.work-light) .pp-wlight i{opacity:0}
/* crno/belo: nova boja se razlije iz kliknutog dugmeta (bez preklapanja sa prelazom boje sa linka) */
html.pp-vt body,html.pp-vt .work-view,html.pp-vt .work-theme-button{transition:none!important}
html.pp-vt::view-transition-old(root),html.pp-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* crni i beli krug tiho pulsiraju (talas kao na dugmadima "Get in touch" i "About Me"), naizmenicno */
.work-theme-button::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(141,157,255,.6);opacity:0;pointer-events:none;animation:ppThemePulse 4.4s cubic-bezier(.2,.6,.3,1) infinite}
.work-theme-button[data-work-color="light"]::before{animation-delay:-2.2s}
@keyframes ppThemePulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
@media(prefers-reduced-motion:reduce){.work-theme-button::before{animation:none;display:none}}
/* ===== Otvoren rad (prozor projekta): bez bele i bez pozadine — providno zamuceno, vidi se samo tekst ===== */
.project-dialog{--pg-ink:#f5f6f8;--pg-dim:rgba(245,246,248,.58);--pg-line:rgba(255,255,255,.18);--pg-chip:rgba(255,255,255,.12);
  color:var(--pg-ink);background:rgba(14,15,18,.3);border:1px solid rgba(255,255,255,.16);border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.07);scrollbar-color:rgba(255,255,255,.32) transparent}
/* zamucuje se sve iza prozora (sam prozor nema svoj filter: tako tekst pri skrolu ostaje unutar ivica) */
.project-dialog::backdrop{background:rgba(6,7,10,.3);-webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15)}
.project-dialog .dialog-bar{color:inherit;background:transparent;border-bottom-color:var(--pg-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.project-dialog .eyebrow,.project-dialog .dialog-bar .eyebrow,.project-dialog .project-description>.eyebrow,.project-dialog .project-details .eyebrow{color:var(--pg-dim)}
.project-dialog .close-button{color:inherit;background:var(--pg-chip);box-shadow:inset 0 0 0 1px var(--pg-line)}
.project-dialog .close-button:hover{background:rgba(255,255,255,.22)}
.project-dialog .project-stage,.project-dialog .stage-forma,.project-dialog .stage-studio,.project-dialog .stage-frame,.project-dialog .stage-signal{background:transparent;color:inherit}
.project-dialog .studio-nav{border-bottom-color:var(--pg-line)}
.project-dialog .signal-foot{border-top-color:var(--pg-line)}
.project-dialog .studio-foot b{color:inherit;background:var(--pg-chip);box-shadow:inset 0 0 0 1px var(--pg-line)}
.project-dialog .frame-timeline{background:repeating-linear-gradient(90deg,var(--pg-line) 0 32px,transparent 32px 37px)}
.project-dialog .frame-timeline:after{background:var(--pg-ink)}
.project-dialog .motion-toggle{color:inherit;border-color:var(--pg-dim)}
.project-dialog .project-details,.project-dialog .text-link{border-color:var(--pg-line)}
.project-dialog .next-project{color:inherit}
.project-dialog .next-project:hover{color:#aab6ff}
/* bela pozadina (Work na belom i pocetna strana): isto providno, samo svetlije staklo i tamni tekst */
body.work-light .project-dialog,body:not([data-route="work"]) .project-dialog{--pg-ink:#1c1d20;--pg-dim:#6f706c;--pg-line:rgba(28,29,32,.16);--pg-chip:rgba(28,29,32,.07);
  background:rgba(255,255,255,.5);border-color:rgba(28,29,32,.1);box-shadow:0 30px 90px rgba(28,29,32,.16),inset 0 1px rgba(255,255,255,.55);scrollbar-color:rgba(28,29,32,.3) transparent}
body.work-light .project-dialog::backdrop,body:not([data-route="work"]) .project-dialog::backdrop{background:rgba(255,255,255,.42)}
body.work-light .project-dialog .close-button:hover,body:not([data-route="work"]) .project-dialog .close-button:hover{background:rgba(28,29,32,.14)}
body.work-light .project-dialog .next-project:hover,body:not([data-route="work"]) .project-dialog .next-project:hover{color:#455ce9}
@media(max-width:760px){.project-dialog{border-radius:16px}.project-dialog::backdrop{-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.project-dialog{background:rgba(18,19,23,.94)}body.work-light .project-dialog,body:not([data-route="work"]) .project-dialog{background:rgba(255,255,255,.95)}}
/* ===== Pocetna: umesto dve trake sa konceptima — ista filmska traka radova kao na stranici Work (samo traka) ===== */
.work-gallery.pp-home-strip{padding:clamp(12px,1.5vw,24px) 0 clamp(50px,7vw,100px);overflow:hidden}
.pp-home-strip .work-progress{display:none}
@media(max-width:760px){.work-gallery.pp-home-strip{padding:12px 0 56px}}
/* About: stranica pocinje malo vise (manje praznog prostora ispod zaglavlja) */
[data-page="about"] .about-opening{padding-top:clamp(140px,11vw,170px)}
@media(max-width:760px){[data-page="about"] .about-opening{padding-top:132px}}

/* ---------- About: portret sa pocetne (isto studijsko svetlo, spori zum i dubina; bez teksta) ---------- */
[data-page="about"] .type-art.pp-ap{position:relative;display:block;padding:0;min-height:0;aspect-ratio:3/2;background:#8b8d91;isolation:isolate;overflow:hidden}
.pp-ap-zoom{position:absolute;inset:0;transform-origin:50% 40%;animation:ppKen 26s steps(65,jump-none) infinite alternate}
.pp-ap-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pp-ap-studio{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:url(/assets/hero-mask-v1.webp) 50% 30%/cover no-repeat;mask:url(/assets/hero-mask-v1.webp) 50% 30%/cover no-repeat}
.pp-ap-light{position:absolute;left:53%;top:30%;width:96%;aspect-ratio:1;translate:-50% -50%;will-change:transform;animation:ppApDrift 16s ease-in-out infinite alternate}
.pp-ap-light::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(250,251,255,0.6200) 0%,rgba(250,251,255,0.6043) 8.3%,rgba(250,251,255,0.5593) 16.7%,rgba(250,251,255,0.4916) 25%,rgba(250,251,255,0.4099) 33.3%,rgba(250,251,255,0.3238) 41.7%,rgba(250,251,255,0.2417) 50%,rgba(250,251,255,0.1698) 58.3%,rgba(250,251,255,0.1113) 66.7%,rgba(250,251,255,0.0667) 75%,rgba(250,251,255,0.0349) 83.3%,rgba(250,251,255,0.0135) 91.7%,rgba(250,251,255,0.0000) 100%);animation:ppBreath 7s ease-in-out infinite}
.pp-ap.pp-ap-track .pp-ap-light{left:0;top:0;animation:none}
.pp-ap.pp-ap-track .pp-ap-light::before{animation:none}
@keyframes ppApDrift{0%{transform:translate3d(-16%,-4%,0)}50%{transform:translate3d(4%,7%,0)}100%{transform:translate3d(18%,-3%,0)}}
.pp-ap:not(.pp-ap-on) .pp-ap-zoom,.pp-ap:not(.pp-ap-on) .pp-ap-light,.pp-ap:not(.pp-ap-on) .pp-ap-light::before{animation-play-state:paused}
@media(max-width:760px){[data-page="about"] .type-art.pp-ap{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.pp-ap-zoom,.pp-ap-light,.pp-ap-light::before{animation:none!important}.pp-ap-zoom{translate:none}}

/* ---------- About: "How I can help you." isto kao Who I work with (bez brojeva 01/02/03; alati ispod teksta) ---------- */
[data-page="about"] .pp-help>h2{margin-bottom:clamp(30px,3.4vw,50px)}
.pp-help .web-audience-row.product-stage small{grid-column:3;margin-top:-22px;font-size:clamp(12px,.9vw,14px);color:var(--muted)}
.pp-help .pp-aud small{opacity:0;transform:translateY(8px)}
.pp-help .pp-aud.pp-in small{opacity:1;transform:none;transition:opacity .8s ease calc(var(--d,0s) + 1s),transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + 1s)}
@media(min-width:1001px){
  [data-page="about"] .pp-help .web-audience-row.product-stage{min-height:170px;padding:18px 0 50px;grid-template-columns:1fr 140px minmax(0,1.3fr)}
  [data-page="about"] .pp-help .web-audience-row.product-stage p{font-size:clamp(19px,1.7vw,26px)}
  [data-page="about"] .pp-help .web-stage-symbol{width:52px;height:52px}
}
@media(max-width:1000px){.pp-help .web-audience-row.product-stage small{grid-column:2;margin-top:-10px}}
@media(prefers-reduced-motion:reduce){.pp-help .pp-aud small{opacity:1;transform:none}}

/* ---------- About: naslov "From the first what if" se ispisuje slovo po slovo (plavi sjaj kao kad put rasta dodirne ikonu) ---------- */
.pp-write.pp-w-wait{opacity:0}
.pp-write .pp-ww{display:inline-block;white-space:nowrap}
.pp-write.pp-w-split .pp-wc{display:inline-block;opacity:0;transform:translate3d(0,.34em,0);color:#455ce9;text-shadow:0 0 .32em rgba(124,140,255,.85)}
.pp-write.pp-w-go .pp-wc{opacity:1;transform:none;color:inherit;text-shadow:0 0 0 rgba(124,140,255,0);transition:opacity .45s ease,transform .8s cubic-bezier(.33,1,.68,1),color 1s ease,text-shadow 1.1s ease;transition-delay:calc(var(--i)*34ms),calc(var(--i)*34ms),calc(var(--i)*34ms + .35s),calc(var(--i)*34ms + .25s)}
@media(prefers-reduced-motion:reduce){.pp-write.pp-w-wait{opacity:1}}

/* ===== izmene 26: 3D interaktivni sajtovi (novitet) ===== */
.pp-new{display:inline-flex;align-items:center;position:relative;top:-.12em;vertical-align:middle;margin-left:.5em;padding:.5em .85em .45em;border-radius:999px;background:#455ce9;color:#fff;font-size:clamp(10px,.19em,13px);font-weight:500;line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:0 0 0 0 rgba(69,92,233,.45);animation:ppNew 2.8s ease-out infinite}
@keyframes ppNew{0%{box-shadow:0 0 0 0 rgba(69,92,233,.45)}70%,100%{box-shadow:0 0 0 10px rgba(69,92,233,0)}}
.web-offer-copy>.pp-new{top:0;margin:0 0 18px;font-size:12px}
.web-offer.pp-offer-3d .web-offer-art{position:relative;align-items:stretch;background:#0b0b0c}
.web-offer.pp-offer-3d video{display:block;width:100%;height:100%;object-fit:cover}
.pp-3d-tag{position:absolute;left:16px;bottom:14px;padding:7px 12px;border-radius:999px;background:rgba(10,10,12,.62);color:#ecebe8;border:1px solid rgba(255,255,255,.18);font-size:12px;line-height:1;letter-spacing:.05em}
.pp-3d-link{display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding:16px 24px;border-radius:999px;background:#455ce9;color:#fff;font-size:16px;line-height:1;text-decoration:none;transition:background .3s}
.pp-3d-link:hover,.pp-3d-link:focus-visible{background:#2f45d6}
.pp-3d-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pp-3d-links .pp-3d-link{margin-top:0}
.pp-3d-link.pp-3d-alt{background:transparent;color:#1c1d20;box-shadow:inset 0 0 0 1px rgba(28,29,32,.35)}
.pp-3d-link.pp-3d-alt:hover,.pp-3d-link.pp-3d-alt:focus-visible{background:#1c1d20;color:#fff}
@media(min-width:761px){
  .web-build-grid .web-offer.pp-offer-3d{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch}
  .web-offer.pp-offer-3d .web-offer-art{height:auto;min-height:clamp(320px,31vw,520px)}
  .web-offer.pp-offer-3d .web-offer-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
}
@media(max-width:760px){.web-offer.pp-offer-3d .web-offer-art{height:auto;aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.pp-new{animation:none}}
.pp-off .pp-new{animation-play-state:paused}

/* ===== Animirane ilustracije na stranicama usluga (generisano: make_art.py) ===== */
.pp-stage{position:relative;width:100%;height:100%;transform:translate3d(0,var(--web-art-shift,var(--brand-art-y,0px)),0) perspective(1300px) rotateX(calc(var(--py,0)*-3.2deg)) rotateY(calc(var(--px,0)*4.4deg));transition:transform .9s cubic-bezier(.2,.8,.2,1),scale .8s var(--ease)}
.web-offer-art .pp-stage{display:block}
.web-offer:hover .pp-stage{scale:1.02}
.brand-card-art .pp-stage{padding:20px;box-sizing:border-box;max-height:600px}
@media(max-width:1000px){.brand-card-art .pp-stage{padding:14px;max-height:440px}}
@media(max-width:760px){.brand-card-art .pp-stage{padding:12px}}
.pp-stage::before,.pp-stage::after{content:"";position:absolute;pointer-events:none;border-radius:50%;z-index:0;background:radial-gradient(closest-side,rgba(108,124,244,.28),rgba(108,124,244,.08) 55%,rgba(108,124,244,0));animation:ppAur 14s ease-in-out infinite;will-change:transform,opacity}
.pp-stage::before{left:20%;top:6%;width:60%;height:88%}
.pp-stage::after{left:4%;top:34%;width:36%;height:62%;animation-delay:-6s;opacity:.8}
.brand-card-art .pp-stage::before,.brand-card-art .pp-stage::after{background:radial-gradient(closest-side,rgba(116,134,255,.34),rgba(116,134,255,.1) 55%,rgba(116,134,255,0))}
.brand-card-art .pp-stage::after{left:60%;top:30%}
.pp-stage.pp-off::before,.pp-stage.pp-off::after{animation-play-state:paused}
.pp-stage>svg{position:relative;z-index:1}
.pp-live{display:block;width:100%;height:100%;overflow:visible}
.pp-live *{transform-box:fill-box;transform-origin:50% 50%}
.pp-live [transform],.pp-live .so{transform-box:view-box;transform-origin:0 0}
.pp-live .z1,.pp-live .z2,.pp-live .z3{transform-box:view-box;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.pp-live .z1{transform:translate(calc(var(--px,0)*-14px),calc(var(--py,0)*-10px))}
.pp-live .z2{transform:translate(calc(var(--px,0)*10px),calc(var(--py,0)*8px))}
.pp-live .z3{transform:translate(calc(var(--px,0)*26px),calc(var(--py,0)*19px))}
/* svetlo koje prati kursor preko kartice */
.service-detail .web-offer,.service-detail .brand-stack-card{position:relative}
.service-detail .web-offer::before,.service-detail .brand-stack-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--so,0);transition:opacity .6s ease}
.service-detail .web-offer::before{z-index:-1;background:radial-gradient(540px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.85),rgba(255,255,255,0) 62%)}
.service-detail .brand-stack-card::after{z-index:2;mix-blend-mode:screen;background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(141,157,255,.17),rgba(141,157,255,0) 60%)}
/* Select Concept (pocetna): zive ilustracije desno, svetlo i ivica koji prate kursor */
svg.service-story-art.pp-live{width:46%;height:auto;aspect-ratio:600/374;overflow:hidden;transform:translate3d(0,var(--service-shift,0px),0) perspective(1200px) rotateY(calc(var(--px,0)*4deg)) rotateX(calc(var(--py,0)*-2.5deg));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
@media(max-width:760px){svg.service-story-art.pp-live{width:100%}}
.service-story::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:calc(var(--so,0)*var(--service-open,1));transition:opacity .6s ease;background:radial-gradient(640px circle at var(--mx,50%) var(--my,50%),rgba(131,146,255,.32),rgba(131,146,255,.09) 38%,rgba(131,146,255,0) 64%)}
.service-story::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:1.5px;opacity:var(--so,0);transition:opacity .6s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(196,204,255,.9),rgba(196,204,255,0) 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* Footer „Let's work together“: ziva ilustracija, svetlo koje prati kursor, energija kroz liniju do dugmeta */
.pp-foot{position:absolute;z-index:-1;pointer-events:none;right:0;top:0;width:80%;height:100%}
.site-footer.pp-fade .pp-foot{opacity:0;transition:opacity 1.6s ease}
.site-footer.pp-fade.pp-seen .pp-foot{opacity:1}
@media(max-width:720px){.pp-foot{width:100%;height:64%}}
/* svetlo koje prati kursor (footer, kontakt, meni) — pomera se samo transform, bez ponovnog iscrtavanja */
.pp-spot-wrap{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;border-radius:inherit}
.pp-spot{position:absolute;left:0;top:0;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;opacity:0;transition:opacity .7s ease;will-change:transform,opacity;background:radial-gradient(closest-side,rgba(124,140,255,.15),rgba(124,140,255,.045) 52%,rgba(124,140,255,0))}
.pp-spot.on{opacity:1}
.pp-spot-soft .pp-spot{width:900px;height:900px;margin:-450px 0 0 -450px;background:radial-gradient(closest-side,rgba(124,140,255,.075),rgba(124,140,255,.022) 52%,rgba(124,140,255,0))}
.contact-page{position:relative;isolation:isolate}
.footer-rule::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(160,172,255,0),rgba(196,205,255,.95),rgba(160,172,255,0)) no-repeat;background-size:24% 100%;background-position:-40% 0;animation:ppRule 4.6s cubic-bezier(.45,0,.3,1) infinite;transition:opacity .2s}
.footer-rule[style*="transparent"]::after{opacity:0}
@keyframes ppRule{0%{background-position:-40% 0}72%,100%{background-position:140% 0}}
.pp-cta-pulse{position:absolute;z-index:1;top:50%;right:calc(var(--footer-round,10em)*.5);width:var(--footer-round,10em);height:var(--footer-round,10em);transform:translate3d(var(--footer-cta-x,0px),-50%,0);pointer-events:none}
.pp-cta-pulse::before,.pp-cta-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(141,157,255,.7);animation:ppCtaPulse 3.4s cubic-bezier(.2,.6,.3,1) infinite}
.pp-cta-pulse::after{animation-delay:-1.7s}
@keyframes ppCtaPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media(max-width:720px){.pp-cta-pulse{right:calc(var(--footer-round,10em)*.2)}}
.pp-cta-dial{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pp-cta-dial .pp-live{width:100%;height:100%}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .site-footer .footer-heading>span:last-child{background:linear-gradient(100deg,#fff 0 42%,#c3caff 50%,#fff 58% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ppHeadSheen 8s ease-in-out infinite}
}
@keyframes ppHeadSheen{0%,52%{background-position:100% 0}86%,100%{background-position:0% 0}}
.site-footer .footer-title-line img{animation:ppAvail 3.4s ease-out infinite}
@keyframes ppAvail{0%{box-shadow:0 0 0 0 rgba(141,157,255,.6)}70%,100%{box-shadow:0 0 0 .2em rgba(141,157,255,0)}}
.site-footer.pp-off .footer-rule::after,.site-footer.pp-off .pp-cta-pulse::before,.site-footer.pp-off .pp-cta-pulse::after,.site-footer.pp-off .footer-heading>span:last-child,.site-footer.pp-off .footer-title-line img{animation-play-state:paused}
/* Pocetna: „About Me“ krug pulsira kao „Get in touch“ */
.intro-aside .circle-button.magnetic:not(:focus-visible){animation:ppAboutPulse 3.4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ppAboutPulse{0%{outline:1.5px solid rgba(69,92,233,.75);outline-offset:0;box-shadow:0 0 0 0 rgba(69,92,233,.2)}70%,100%{outline:1.5px solid rgba(69,92,233,0);outline-offset:44px;box-shadow:0 0 0 72px rgba(69,92,233,0)}}
/* Traka sa alatima: futuristicki skener — alati zasvetle kad prodju kroz soc (soc prati kursor) */
.tools-roster{background:#080808 repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px);box-shadow:inset 0 1px 0 rgba(141,157,255,.16),inset 0 -1px 0 rgba(141,157,255,.16)}
.tools-roster>.roster-track .tool-logo{opacity:.4}
.pp-roster-lit{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:1;-webkit-mask:linear-gradient(90deg,transparent calc(var(--lx,50%) - 200px),#000 calc(var(--lx,50%) - 85px),#000 calc(var(--lx,50%) + 85px),transparent calc(var(--lx,50%) + 200px));mask:linear-gradient(90deg,transparent calc(var(--lx,50%) - 200px),#000 calc(var(--lx,50%) - 85px),#000 calc(var(--lx,50%) + 85px),transparent calc(var(--lx,50%) + 200px))}
.pp-roster-lit .tool-logo{opacity:1;filter:drop-shadow(0 0 10px rgba(141,157,255,.9)) brightness(1.2)}
.pp-roster-glow{position:absolute;top:0;bottom:0;left:var(--lx,50%);width:clamp(300px,26vw,440px);transform:translateX(-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(108,124,244,.32),rgba(108,124,244,.08) 55%,rgba(108,124,244,0))}
.pp-roster-run{position:absolute;left:0;right:0;height:1px;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(160,172,255,0),rgba(200,208,255,.9),rgba(160,172,255,0)) no-repeat;background-size:18% 100%;animation:ppRule 6s cubic-bezier(.45,0,.3,1) infinite}
.pp-roster-run.top{top:0}.pp-roster-run.bottom{bottom:0;animation-direction:reverse;animation-delay:-3s}
.tools-roster::before,.tools-roster::after{content:"";position:absolute;top:0;bottom:0;width:11vw;z-index:2;pointer-events:none}
.tools-roster::before{left:0;background:linear-gradient(90deg,#080808,rgba(8,8,8,0))}
.tools-roster::after{right:0;background:linear-gradient(270deg,#080808,rgba(8,8,8,0))}
.tools-roster:not(.is-visible) .pp-roster-run{animation-play-state:paused}
@media(max-width:760px){.pp-roster-lit{-webkit-mask:linear-gradient(90deg,transparent calc(var(--lx,50%) - 140px),#000 calc(var(--lx,50%) - 60px),#000 calc(var(--lx,50%) + 60px),transparent calc(var(--lx,50%) + 140px));mask:linear-gradient(90deg,transparent calc(var(--lx,50%) - 140px),#000 calc(var(--lx,50%) - 60px),#000 calc(var(--lx,50%) + 60px),transparent calc(var(--lx,50%) + 140px))}}
/* Kontakt: slicica pulsira kao na „Let's work together“ */
.contact-details .contact-avatar{animation:ppAvailL 3.4s ease-out infinite}
@keyframes ppAvailL{0%{box-shadow:0 0 0 0 rgba(141,157,255,.6)}70%,100%{box-shadow:0 0 0 20px rgba(141,157,255,0)}}
/* ulaz (kad kartica udje u ekran) */
.pp-armed .e{opacity:0}
.pp-in .e{animation:ppPop 1s cubic-bezier(.18,.95,.3,1.22) both}
.pp-in .e.rise{animation-name:ppRise;animation-duration:1.1s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.pp-in .e.fade{animation-name:ppFade;animation-duration:1.2s;animation-timing-function:ease}
.pp-in .e1{animation-delay:.08s}.pp-in .e2{animation-delay:.16s}.pp-in .e3{animation-delay:.24s}.pp-in .e4{animation-delay:.32s}.pp-in .e5{animation-delay:.4s}.pp-in .e6{animation-delay:.48s}.pp-in .e7{animation-delay:.56s}.pp-in .e8{animation-delay:.64s}.pp-in .e9{animation-delay:.72s}.pp-in .e10{animation-delay:.8s}.pp-in .e11{animation-delay:.88s}.pp-in .e12{animation-delay:.96s}
@keyframes ppPop{0%{opacity:0;transform:translateY(34px) scale(.62)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ppRise{0%{opacity:0;transform:translateY(70px)}100%{opacity:1;transform:none}}
@keyframes ppFade{0%{opacity:0}100%{opacity:1}}
/* petlje */
.pp-live .fa{animation:ppFa 6s ease-in-out infinite}
.pp-live .fb{animation:ppFb 7.5s ease-in-out infinite}
.pp-live .fc{animation:ppFc 10s ease-in-out infinite}
.pp-live .fs{animation:ppFs 6s ease-in-out infinite}
.pp-live .fsb{animation:ppFs 7.5s ease-in-out infinite}
@keyframes ppFa{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes ppFb{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-17px) rotate(-1.2deg)}}
@keyframes ppFc{0%,100%{transform:translate(0,0)}33%{transform:translate(9px,-10px)}66%{transform:translate(-7px,-5px)}}
@keyframes ppFs{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.62}}
.pp-live .aur{animation:ppAur 14s ease-in-out infinite}
@keyframes ppAur{0%,100%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(26px,-18px) scale(1.14);opacity:1}}
.pp-live .sheen{animation:ppSheen 7s cubic-bezier(.45,0,.2,1) infinite}
@keyframes ppSheen{0%,8%{transform:translateX(0)}42%,100%{transform:translateX(520px)}}
.pp-live .spin{animation:ppSpin 16s linear infinite}
.pp-live .spinf{animation:ppSpin 5s linear infinite}
.pp-live .spinr{animation:ppSpin 34s linear infinite reverse}
@keyframes ppSpin{to{transform:rotate(360deg)}}
.pp-live .pulse{animation:ppPulse 2.6s ease-in-out infinite}
@keyframes ppPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.pp-live .ripple{animation:ppRipple 2.6s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes ppRipple{0%{transform:scale(.35);opacity:.75}70%,100%{transform:scale(2);opacity:0}}
.pp-live .tw{animation:ppTw 3.6s ease-in-out infinite}
@keyframes ppTw{0%,100%{transform:scale(0) rotate(0);opacity:0}40%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.45) rotate(90deg);opacity:.25}}
.pp-live .twk{animation:ppTwk 4s ease-in-out infinite}
@keyframes ppTwk{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.1) rotate(8deg)}60%{transform:scale(.96) rotate(-3deg)}}
.pp-live .glow{animation:ppGlow 4s ease-in-out infinite}
@keyframes ppGlow{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.pp-live .flow{animation:ppFlow 1.6s linear infinite}
@keyframes ppFlow{to{stroke-dashoffset:-32}}
.pp-live .draw{stroke-dasharray:1 3;stroke-dashoffset:1.05;animation:ppDraw 5s cubic-bezier(.6,0,.2,1) infinite}
@keyframes ppDraw{0%,8%{stroke-dashoffset:1.05;opacity:1}38%,82%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.05;opacity:0}}
.pp-live .bar{transform-origin:50% 100%;animation:ppBar 3.4s ease-in-out infinite}
@keyframes ppBar{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
.pp-live .shim{animation:ppShim 2.6s ease-in-out infinite}
@keyframes ppShim{0%,100%{opacity:.5}50%{opacity:1}}
.pp-live .blink{animation:ppBlink 1.1s steps(1) infinite}
@keyframes ppBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.pp-live .clk{animation:ppClk 2.6s cubic-bezier(.3,0,.2,1) infinite}
@keyframes ppClk{0%,100%{transform:scale(1)}8%{transform:scale(.86)}18%{transform:scale(1)}}
.pp-live .gseq{animation:ppGseq 4s ease-in-out infinite}
.pp-live .g1{animation-delay:1s}.pp-live .g2{animation-delay:2s}.pp-live .g3{animation-delay:3s}
@keyframes ppGseq{0%,100%{opacity:1}12%{opacity:.42}28%{opacity:1}}
.pp-live .lay{animation:ppLay 4.4s ease-in-out infinite}
.pp-live .lay.y0{--ly:12px}.pp-live .lay.y1{--ly:0px}.pp-live .lay.y2{--ly:-12px}
@keyframes ppLay{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--ly))}}
.pp-live .puz{animation:ppPuz 5s cubic-bezier(.5,0,.2,1.2) infinite}
@keyframes ppPuz{0%,15%{transform:translate(24px,22px) rotate(10deg);opacity:0}40%,85%{transform:none;opacity:1}100%{transform:translate(24px,22px) rotate(10deg);opacity:0}}
.pp-live .upl{animation:ppUpl 2.4s ease-in infinite}
@keyframes ppUpl{0%{transform:translateY(10px);opacity:0}30%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.pp-live .wig{animation:ppWig 6s ease-in-out infinite}
@keyframes ppWig{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-7deg)}82%{transform:rotate(6deg)}88%{transform:rotate(-3deg)}}
.pp-live .sun{animation:ppSun 6s ease-in-out infinite}
@keyframes ppSun{0%,100%{transform:translateY(16px);opacity:.55}50%{transform:translateY(0);opacity:1}}
.pp-live .orb{animation:ppOrb 6s ease-in-out infinite}
@keyframes ppOrb{0%,100%{transform:translate(0,0)}25%{transform:translate(8px,-6px)}50%{transform:translate(0,-10px)}75%{transform:translate(-8px,-4px)}}
.pp-live .lit{animation:ppLit 4.6s ease-in-out infinite}
@keyframes ppLit{0%,100%{opacity:.35}45%,60%{opacity:1}}
.pp-live .heat{animation:ppHeat 3.2s ease-in-out infinite}
@keyframes ppHeat{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.12);opacity:1}}
/* pauza van ekrana i za smanjen pokret */
.pp-off *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.pp-live *,.pp-stage::before,.pp-stage::after{animation:none!important}.pp-stage{transform:none!important}.pp-live .mv{display:none}svg.service-story-art.pp-live{transform:none!important}.intro-aside .circle-button.magnetic,.contact-details .contact-avatar{animation:none!important}.pp-roster-lit,.pp-roster-run{display:none}.footer-rule::after,.pp-cta-pulse,.pp-spot-wrap{display:none}.site-footer .footer-heading>span:last-child,.site-footer .footer-title-line img{animation:none!important}.pp-live .draw,.pp-live .drw{stroke-dashoffset:0!important;opacity:1!important}.service-detail .web-offer::before,.service-detail .brand-stack-card::after{display:none}}

@keyframes product-mobile-ringk{0%{stroke-dasharray:1 1;stroke-dashoffset:.82}45%{stroke-dashoffset:.28}70%{stroke-dashoffset:.28}100%{stroke-dasharray:1 1;stroke-dashoffset:.82}}
.pp-live .product-mobile-ring{stroke-dasharray:1 1;animation:product-mobile-ringk 6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes product-mobile-scrollk{0%{transform:translateY(0)}22%{transform:translateY(0)}33%{transform:translateY(-68px)}55%{transform:translateY(-68px)}66%{transform:translateY(-136px)}88%{transform:translateY(-136px)}100%{transform:translateY(-204px)}}
.pp-live .product-mobile-scroll{animation:product-mobile-scrollk 9s cubic-bezier(.65,0,.25,1) infinite}
@keyframes product-mobile-tabk{0%{transform:translateX(0)}20%{transform:translateX(0)}25%{transform:translateX(52px)}45%{transform:translateX(52px)}50%{transform:translateX(104px)}70%{transform:translateX(104px)}75%{transform:translateX(156px)}95%{transform:translateX(156px)}100%{transform:translateX(0)}}
.pp-live .product-mobile-tab{animation:product-mobile-tabk 8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes product-mobile-toastk{0%{transform:translateX(-80px) scale(.9);opacity:0}10%{transform:translateX(-80px) scale(.9);opacity:0}18%{transform:none;opacity:1}52%{transform:none;opacity:1}62%{transform:translate(16px,-18px) scale(.96);opacity:0}100%{transform:translate(16px,-18px);opacity:0}}
.pp-live .product-mobile-toast{animation:product-mobile-toastk 7s cubic-bezier(.2,.9,.3,1.15) infinite}
@keyframes product-mobile-heartk{0%{transform:translate(0,0) scale(.4);opacity:0}10%{opacity:1}60%{transform:translate(-26px,-120px) scale(1.1);opacity:.9}100%{transform:translate(-40px,-190px) scale(.8);opacity:0}}
.pp-live .product-mobile-heart{animation:product-mobile-heartk 4.2s ease-out infinite}
@keyframes product-mvp-orbk{0%{transform:translate(446px,425px);opacity:0}8%{opacity:0}10.0%{transform:translate(446px,425px)}12%{opacity:1}12.5%{transform:translate(466px,423.2px)}15.0%{transform:translate(482.5px,418.1px)}17.5%{transform:translate(496.3px,410.2px)}20.0%{transform:translate(507.7px,400.2px)}22.5%{transform:translate(517.6px,388.6px)}25.0%{transform:translate(526.3px,375.8px)}27.5%{transform:translate(534.5px,362.5px)}30.0%{transform:translate(542.8px,349.2px)}32.5%{transform:translate(551.7px,336.4px)}35.0%{transform:translate(561.8px,324.8px)}37.5%{transform:translate(573.7px,314.8px)}40.0%{transform:translate(588px,306.9px)}42.5%{transform:translate(605.2px,301.8px)}43%{opacity:1}45.0%{transform:translate(626px,300px)}47%{opacity:0}100%{transform:translate(626px,300px);opacity:0}}
.pp-live .product-mvp-orb2{animation:product-mvp-orbk 6s linear infinite}
@keyframes product-mvp-sak{0%{opacity:1;transform:none}44%{opacity:1;transform:none}54%{opacity:0;transform:translateX(-30px)}92%{opacity:0;transform:translateX(-30px)}100%{opacity:1;transform:none}}
.pp-live .product-mvp-sa{animation:product-mvp-sak 6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes product-mvp-sbk{0%{opacity:0;transform:translateX(70px)}45%{opacity:0;transform:translateX(70px)}57%{opacity:1;transform:none}90%{opacity:1;transform:none}98%{opacity:0;transform:none}100%{opacity:0;transform:translateX(70px)}}
.pp-live .product-mvp-sb{animation:product-mvp-sbk 6s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes product-mvp-dartk{0%{transform:translate(190px,-170px);opacity:0}52%{transform:translate(190px,-170px);opacity:0}56%{opacity:1}66%{transform:translate(0,0);opacity:1}68%{transform:translate(-4px,4px)}70%{transform:translate(0,0)}90%{transform:translate(0,0);opacity:1}96%{opacity:0}100%{transform:translate(0,0);opacity:0}}
.pp-live .product-mvp-dart{animation:product-mvp-dartk 6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes product-mvp-hitk{0%{transform:scale(.3);opacity:0}65%{transform:scale(.3);opacity:0}67%{opacity:.9}85%{transform:scale(2.1);opacity:0}100%{transform:scale(2.1);opacity:0}}
.pp-live .product-mvp-hit{animation:product-mvp-hitk 6s ease-out infinite}
@keyframes product-mvp-curk{0%{transform:translate(330px,330px)}18%{transform:translate(330px,330px)}32%{transform:translate(420px,430px)}52%{transform:translate(420px,430px)}68%{transform:translate(300px,520px)}84%{transform:translate(300px,520px)}100%{transform:translate(330px,330px)}}
.pp-live .product-mvp-cur{animation:product-mvp-curk 9s cubic-bezier(.6,0,.2,1) infinite}
@keyframes web-saas-curk{0%{transform:translate(800px,600px);opacity:0}6%{opacity:1}32%{transform:translate(432px,380px)}36%{transform:translate(432px,380px) scale(.88)}40%{transform:translate(432px,380px) scale(1)}56%{transform:translate(432px,380px);opacity:1}80%{transform:translate(740px,620px);opacity:1}92%{opacity:0}100%{transform:translate(800px,600px);opacity:0}}
.pp-live .web-saas-cur{animation:web-saas-curk 8s cubic-bezier(.6,0,.25,1) infinite}
@keyframes web-saas-pressk{0%{transform:scale(1)}35%{transform:scale(1)}38%{transform:scale(.93)}43%{transform:scale(1)}100%{transform:scale(1)}}
.pp-live .web-saas-press{animation:web-saas-pressk 8s ease-out infinite}
@keyframes web-saas-ripk{0%{transform:scale(.3);opacity:0}36%{transform:scale(.3);opacity:0}38%{opacity:.8}58%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
.pp-live .web-saas-rip{animation:web-saas-ripk 8s ease-out infinite}
@keyframes web-saas-ctak{0%{transform:scale(1);opacity:0}60%{transform:scale(1);opacity:0}66%{opacity:.7}90%{transform:scale(1.18);opacity:0}100%{transform:scale(1.18);opacity:0}}
.pp-live .web-saas-cta{animation:web-saas-ctak 8s ease-out infinite}
@keyframes web-saas-toastk{0%{transform:translateY(30px) scale(.9);opacity:0}40%{transform:translateY(30px) scale(.9);opacity:0}47%{transform:none;opacity:1}84%{transform:none;opacity:1}92%{transform:translateY(-12px);opacity:0}100%{transform:translateY(-12px);opacity:0}}
.pp-live .web-saas-toast{animation:web-saas-toastk 8s cubic-bezier(.2,.9,.3,1.2) infinite}
@keyframes web-corporate-cloudk{0%{transform:translateX(-26px)}50%{transform:translateX(30px)}100%{transform:translateX(-26px)}}
.pp-live .web-corporate-cloud{animation:web-corporate-cloudk 18s ease-in-out infinite}
@keyframes web-campaign-cark{0%{transform:translateX(0)}25%{transform:translateX(0)}33%{transform:translateX(-416px)}58%{transform:translateX(-416px)}66%{transform:translateX(-832px)}91%{transform:translateX(-832px)}100%{transform:translateX(-1248px)}}
.pp-live .web-campaign-car{animation:web-campaign-cark 12s cubic-bezier(.7,0,.2,1) infinite}
@keyframes web-campaign-dotk{0%{transform:translateX(0)}25%{transform:translateX(0)}33%{transform:translateX(22px)}58%{transform:translateX(22px)}66%{transform:translateX(44px)}91%{transform:translateX(44px)}100%{transform:translateX(0)}}
.pp-live .web-campaign-dot{animation:web-campaign-dotk 12s cubic-bezier(.7,0,.2,1) infinite}
@keyframes web-campaign-cfk{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.pp-live .web-campaign-cf{animation:web-campaign-cfk 4.6s cubic-bezier(.3,.1,.6,1) infinite}.pp-live .web-campaign-cf.c0{--dx:-150px;--dy:300px;--r:260deg;animation-delay:-0.0s}.pp-live .web-campaign-cf.c1{--dx:-90px;--dy:340px;--r:-200deg;animation-delay:-0.5s}.pp-live .web-campaign-cf.c2{--dx:-40px;--dy:280px;--r:320deg;animation-delay:-1.0s}.pp-live .web-campaign-cf.c3{--dx:-200px;--dy:260px;--r:-280deg;animation-delay:-1.5s}.pp-live .web-campaign-cf.c4{--dx:-120px;--dy:360px;--r:200deg;animation-delay:-2.0s}.pp-live .web-campaign-cf.c5{--dx:-60px;--dy:320px;--r:-340deg;animation-delay:-2.5s}.pp-live .web-campaign-cf.c6{--dx:-230px;--dy:330px;--r:240deg;animation-delay:-3.0s}.pp-live .web-campaign-cf.c7{--dx:-170px;--dy:280px;--r:-160deg;animation-delay:-3.5s}.pp-live .web-campaign-cf.c8{--dx:-20px;--dy:350px;--r:280deg;animation-delay:-4.0s}
@keyframes web-redesign-magk{0.0%{transform:translate(286px,462px);opacity:0}6.25%{transform:translate(304.6px,485.8px)}12%{opacity:1}12.5%{transform:translate(325px,505.6px)}18.75%{transform:translate(347px,521.5px)}25.0%{transform:translate(370.5px,533.7px)}31.25%{transform:translate(395.2px,542.2px)}37.5%{transform:translate(420.9px,547.3px)}43.75%{transform:translate(447.4px,549.1px)}50.0%{transform:translate(474.5px,547.8px)}56.25%{transform:translate(502.1px,543.4px)}62.5%{transform:translate(529.8px,536.1px)}68.75%{transform:translate(557.6px,526.1px)}75.0%{transform:translate(585.2px,513.5px)}80%{opacity:1}81.25%{transform:translate(612.5px,498.4px)}87.5%{transform:translate(639.2px,481.1px)}93.75%{transform:translate(665.1px,461.5px)}100.0%{transform:translate(690px,440px);opacity:0}}
.pp-live .web-redesign-mag{animation:web-redesign-magk 3.2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes web-redesign-bk{0%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}14%{transform:none;opacity:1}86%{transform:none;opacity:1}94%{transform:none;opacity:0}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.pp-live .web-redesign-b{animation:web-redesign-bk 10s cubic-bezier(.2,.9,.3,1.15) infinite}.pp-live .web-redesign-b.b0{--dx:0px;--dy:-60px;--r:-4deg;animation-delay:-0.60s}.pp-live .web-redesign-b.b1{--dx:-70px;--dy:0px;--r:3deg;animation-delay:-0.48s}.pp-live .web-redesign-b.b2{--dx:60px;--dy:40px;--r:6deg;animation-delay:-0.36s}.pp-live .web-redesign-b.b3{--dx:0px;--dy:70px;--r:-6deg;animation-delay:-0.24s}.pp-live .web-redesign-b.b4{--dx:70px;--dy:50px;--r:5deg;animation-delay:-0.12s}
@keyframes ux-research-lensk{0%{transform:translate(282px,540px)}10%{transform:translate(408px,250px)}26%{transform:translate(408px,250px)}36%{transform:translate(548px,278px)}54%{transform:translate(548px,278px)}64%{transform:translate(748px,384px)}82%{transform:translate(748px,384px)}100%{transform:translate(282px,540px)}}
.pp-live .ux-research-lens{animation:ux-research-lensk 10s cubic-bezier(.65,0,.3,1) infinite}
@keyframes ux-research-n1k{0%{transform:translateY(16px) scale(.9);opacity:0}11%{transform:translateY(16px) scale(.9);opacity:0}15%{transform:none;opacity:1}31%{transform:none;opacity:1}35%{transform:translateY(-10px);opacity:0}100%{transform:translateY(-10px);opacity:0}}
.pp-live .ux-research-n1{animation:ux-research-n1k 10s cubic-bezier(.2,.9,.3,1.2) infinite}
@keyframes ux-research-n2k{0%{transform:translateY(16px) scale(.9);opacity:0}37%{transform:translateY(16px) scale(.9);opacity:0}41%{transform:none;opacity:1}57%{transform:none;opacity:1}61%{transform:translateY(-10px);opacity:0}100%{transform:translateY(-10px);opacity:0}}
.pp-live .ux-research-n2{animation:ux-research-n2k 10s cubic-bezier(.2,.9,.3,1.2) infinite}
@keyframes ux-research-n3k{0%{transform:translateY(16px) scale(.9);opacity:0}65%{transform:translateY(16px) scale(.9);opacity:0}69%{transform:none;opacity:1}85%{transform:none;opacity:1}89%{transform:translateY(-10px);opacity:0}100%{transform:translateY(-10px);opacity:0}}
.pp-live .ux-research-n3{animation:ux-research-n3k 10s cubic-bezier(.2,.9,.3,1.2) infinite}
@keyframes ux-journeys-orbk{0%{transform:translate(290px,440px);opacity:1}6%{transform:translate(390px,440px)}8.0%{transform:translate(404px,437.6px)}10.0%{transform:translate(415.5px,431.1px)}12.0%{transform:translate(424.9px,421.2px)}14.0%{transform:translate(432.7px,408.9px)}16.0%{transform:translate(439.5px,394.9px)}18.0%{transform:translate(445.8px,380px)}20.0%{transform:translate(451.9px,365.1px)}22.0%{transform:translate(458.6px,351.1px)}24.0%{transform:translate(466.2px,338.8px)}26.0%{transform:translate(475.3px,328.9px)}28.0%{transform:translate(486.4px,322.4px)}30.0%{transform:translate(500px,320px)}42%{transform:translate(700px,320px)}44.0%{transform:translate(713.6px,322.4px)}46.0%{transform:translate(724.7px,328.9px)}48.0%{transform:translate(733.8px,338.8px)}50.0%{transform:translate(741.4px,351.1px)}52.0%{transform:translate(748.1px,365.1px)}54.0%{transform:translate(754.2px,380px)}56.0%{transform:translate(760.5px,394.9px)}58.0%{transform:translate(767.3px,408.9px)}60.0%{transform:translate(775.1px,421.2px)}62.0%{transform:translate(784.5px,431.1px)}64.0%{transform:translate(796px,437.6px)}66.0%{transform:translate(810px,440px)}72%{transform:translate(910px,440px);opacity:1}76%{opacity:0}98%{opacity:0}100%{transform:translate(910px,440px)}}
.pp-live .ux-journeys-orb{animation:ux-journeys-orbk 6s linear infinite}
@keyframes ux-journeys-pAk{0%{transform:none}2%{transform:none}5%{transform:scale(1.06)}11%{transform:none}100%{transform:none}}
.pp-live .ux-journeys-pA{animation:ux-journeys-pAk 6s cubic-bezier(.3,0,.2,1) infinite}
@keyframes ux-journeys-pBk{0%{transform:none}36%{transform:none}39%{transform:scale(1.06)}45%{transform:none}100%{transform:none}}
.pp-live .ux-journeys-pB{animation:ux-journeys-pBk 6s cubic-bezier(.3,0,.2,1) infinite}
@keyframes ux-journeys-pCk{0%{transform:none}70%{transform:none}73%{transform:scale(1.06)}79%{transform:none}100%{transform:none}}
.pp-live .ux-journeys-pC{animation:ux-journeys-pCk 6s cubic-bezier(.3,0,.2,1) infinite}
@keyframes ux-journeys-rA2k{0%{transform:scale(.6);opacity:0}3%{transform:scale(.6);opacity:0}4%{opacity:.85}19%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.pp-live .ux-journeys-rA2{animation:ux-journeys-rA2k 6s ease-out infinite}
@keyframes ux-journeys-rBk{0%{transform:scale(.6);opacity:0}36%{transform:scale(.6);opacity:0}37%{opacity:.85}52%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.pp-live .ux-journeys-rB{animation:ux-journeys-rBk 6s ease-out infinite}
@keyframes ux-journeys-rCk{0%{transform:scale(.6);opacity:0}71%{transform:scale(.6);opacity:0}72%{opacity:.85}87%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.pp-live .ux-journeys-rC{animation:ux-journeys-rCk 6s ease-out infinite}
@keyframes ux-journeys-rAk{0%{transform:scale(.4);opacity:0}1%{opacity:.9}14%{transform:scale(2.2);opacity:0}100%{transform:scale(2.2);opacity:0}}
.pp-live .ux-journeys-rA{animation:ux-journeys-rAk 6s ease-out infinite}
@keyframes ux-journeys-gqk{0%{opacity:1}34%{opacity:.45}38%{opacity:1}100%{opacity:1}}
.pp-live .ux-journeys-gq{animation:ux-journeys-gqk 6s ease-in-out infinite}.pp-live .ux-journeys-gq.q0{animation-delay:0.00s}.pp-live .ux-journeys-gq.q1{animation-delay:0.12s}.pp-live .ux-journeys-gq.q2{animation-delay:0.24s}.pp-live .ux-journeys-gq.q3{animation-delay:0.36s}
@keyframes ux-journeys-ckk{0%{stroke-dashoffset:1.05;opacity:1}70%{stroke-dashoffset:1.05}80%{stroke-dashoffset:0}95%{stroke-dashoffset:0;opacity:1}99%{opacity:0}100%{stroke-dashoffset:1.05;opacity:0}}
.pp-live .ux-journeys-ck{stroke-dasharray:1 3;stroke-dashoffset:1.05;animation:ux-journeys-ckk 6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes ux-journeys-progk{0%{transform:scaleX(0)}4%{transform:scaleX(0)}72%{transform:scaleX(1)}92%{transform:scaleX(1);opacity:1}99%{opacity:0}100%{transform:scaleX(0);opacity:0}}
.pp-live .ux-journeys-prog{transform-origin:0 50%;animation:ux-journeys-progk 6s cubic-bezier(.45,0,.4,1) infinite}
@keyframes ux-journeys-s0k{0%{transform:scale(0)}4%{transform:scale(0)}8%{transform:scale(1.3)}11%{transform:scale(1)}95%{transform:scale(1)}100%{transform:scale(0)}}
.pp-live .ux-journeys-st.s0{animation:ux-journeys-s0k 6s ease-out infinite}
@keyframes ux-journeys-s1k{0%{transform:scale(0)}38%{transform:scale(0)}42%{transform:scale(1.3)}45%{transform:scale(1)}95%{transform:scale(1)}100%{transform:scale(0)}}
.pp-live .ux-journeys-st.s1{animation:ux-journeys-s1k 6s ease-out infinite}
@keyframes ux-journeys-s2k{0%{transform:scale(0)}72%{transform:scale(0)}76%{transform:scale(1.3)}79%{transform:scale(1)}95%{transform:scale(1)}100%{transform:scale(0)}}
.pp-live .ux-journeys-st.s2{animation:ux-journeys-s2k 6s ease-out infinite}
@keyframes ux-scale-nk{0%{transform:scale(.5);opacity:0}16%{transform:scale(.5);opacity:0}24%{transform:scale(1.06);opacity:1}28%{transform:scale(1)}82%{transform:scale(1);opacity:1}90%{transform:scale(.92);opacity:0}100%{transform:scale(.5);opacity:0}}
.pp-live .ux-scale-n{animation:ux-scale-nk 8s cubic-bezier(.2,.9,.3,1.2) infinite}.pp-live .ux-scale-n.n1{animation-delay:-.9s}
@keyframes brand-launch-upk{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(0,-150px) scale(1.1);opacity:0}}
.pp-live .brand-launch-up{animation:brand-launch-upk 3.2s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes brand-distinct-tracek{0%{stroke-dasharray:.2 .8;stroke-dashoffset:0}100%{stroke-dasharray:.2 .8;stroke-dashoffset:-1}}
.pp-live .brand-distinct-trace{stroke-dasharray:.2 .8;animation:brand-distinct-tracek 3.6s linear infinite}
@keyframes brand-consistent-plk{0%{transform:scale(.6);opacity:0}2%{opacity:.9}22%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
.pp-live .brand-consistent-pl{animation:brand-consistent-plk 5s ease-out infinite}.pp-live .brand-consistent-pl.c2{animation-delay:.8s}.pp-live .brand-consistent-pl.c3{animation-delay:1.6s}
@keyframes svc-panels-pnk{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}.pp-live .svc-panels-pn{animation:svc-panels-pnk 6.4s cubic-bezier(.45,0,.55,1) infinite}.pp-live .svc-panels-pn.p0{animation-delay:-0.00s}.pp-live .svc-panels-pn.p1{animation-delay:-0.42s}.pp-live .svc-panels-pn.p2{animation-delay:-0.84s}.pp-live .svc-panels-pn.p3{animation-delay:-1.26s}.pp-live .svc-panels-pn.p4{animation-delay:-1.68s}.pp-live .svc-panels-pn.p5{animation-delay:-2.10s}.pp-live .svc-panels-pn.p6{animation-delay:-2.52s}
@keyframes svc-panels-swk{0%,8%{transform:translateX(0)}62%,100%{transform:translateX(820px)}}.pp-live .svc-panels-sw{animation:svc-panels-swk 7.5s cubic-bezier(.45,0,.25,1) infinite}
@keyframes svc-panels-mok{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(-14px,-320px);opacity:0}}.pp-live .svc-panels-mo{animation:svc-panels-mok 6s linear infinite}
@keyframes svc-triangles-trk{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}.pp-live .svc-triangles-tr{transform-origin:50% 100%;animation:svc-triangles-trk 7s ease-in-out infinite}.pp-live .svc-triangles-tr.t0{animation-delay:-2.20s}.pp-live .svc-triangles-tr.t1{animation-delay:-1.65s}.pp-live .svc-triangles-tr.t2{animation-delay:-1.10s}.pp-live .svc-triangles-tr.t3{animation-delay:-0.55s}.pp-live .svc-triangles-tr.t4{animation-delay:-0.00s}
@keyframes svc-triangles-tck{to{stroke-dashoffset:-1}}.pp-live .svc-triangles-tc{stroke-dasharray:.07 .93;animation:svc-triangles-tck 8s linear infinite}.pp-live .svc-triangles-tc.c2{animation-duration:6.5s;animation-delay:-2s}.pp-live .svc-triangles-tc.c4{animation-duration:5s;animation-delay:-1s}
@keyframes svc-circles-sok{0%{transform:scale(1);opacity:.8}100%{transform:scale(4.3);opacity:0}}.pp-live .svc-circles-so{animation:svc-circles-sok 6s cubic-bezier(.2,.6,.3,1) infinite}.pp-live .svc-circles-so.s1{animation-delay:-2s}.pp-live .svc-circles-so.s2{animation-delay:-4s}
@keyframes svc-tiles-lyk{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--d))}}.pp-live .svc-tiles-ly{animation:svc-tiles-lyk 6s cubic-bezier(.45,0,.55,1) infinite}.pp-live .svc-tiles-ly.y0{--d:-16px}.pp-live .svc-tiles-ly.y1{--d:-7px}.pp-live .svc-tiles-ly.y2{--d:2px}.pp-live .svc-tiles-ly.y3{--d:11px}.pp-live .svc-tiles-ly.y4{--d:20px}
@keyframes svc-tiles-swk{0%,10%{transform:translateX(0)}60%,100%{transform:translateX(980px)}}.pp-live .svc-tiles-sw{animation:svc-tiles-swk 8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes svc-rays-rotk{to{transform:rotate(360deg)}}.pp-live .svc-rays-rot{animation:svc-rays-rotk 60s linear infinite}
@keyframes svc-rays-ptk{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}.pp-live .svc-rays-pt{animation:svc-rays-ptk 5s ease-in-out infinite}.pp-live .svc-rays-pt.q0{animation-delay:-0.00s}.pp-live .svc-rays-pt.q1{animation-delay:-0.83s}.pp-live .svc-rays-pt.q2{animation-delay:-1.66s}.pp-live .svc-rays-pt.q3{animation-delay:-2.49s}.pp-live .svc-rays-pt.q4{animation-delay:-3.32s}.pp-live .svc-rays-pt.q5{animation-delay:-4.15s}
@keyframes svc-hosting-ledk{0%,100%{opacity:.4}8%{opacity:1}16%{opacity:.45}24%{opacity:1}60%{opacity:.85}}.pp-live .svc-hosting-led,.pp-live .svc-hosting-halo{animation:svc-hosting-ledk 2.8s steps(1,end) infinite}.pp-live .h0.svc-hosting-led,.pp-live .h0.svc-hosting-halo{animation-delay:-0.0s}.pp-live .h1.svc-hosting-led,.pp-live .h1.svc-hosting-halo{animation-delay:-0.9s}.pp-live .h2.svc-hosting-led,.pp-live .h2.svc-hosting-halo{animation-delay:-1.8s}.pp-live .h3.svc-hosting-led,.pp-live .h3.svc-hosting-halo{animation-delay:-2.7s}
@keyframes svc-hosting-dtk{0%{stroke-dashoffset:.24}100%{stroke-dashoffset:-1}}.pp-live .svc-hosting-dt{stroke-dasharray:.24 .76;animation:svc-hosting-dtk 2.4s linear infinite}.pp-live .svc-hosting-dt.d0{animation-delay:-0.00s;animation-duration:2.10s}.pp-live .svc-hosting-dt.d1{animation-delay:-0.65s;animation-duration:2.45s}.pp-live .svc-hosting-dt.d2{animation-delay:-1.30s;animation-duration:2.80s}.pp-live .svc-hosting-dt.d3{animation-delay:-1.95s;animation-duration:3.15s}
@keyframes svc-hosting-unk{0%,72%,100%{transform:translateX(0)}80%{transform:translateX(-16px)}90%{transform:translateX(0)}}.pp-live .svc-hosting-un{animation:svc-hosting-unk 8s cubic-bezier(.4,0,.2,1) infinite}.pp-live .svc-hosting-un.u0{animation-delay:-0s}.pp-live .svc-hosting-un.u1{animation-delay:-2s}.pp-live .svc-hosting-un.u2{animation-delay:-4s}.pp-live .svc-hosting-un.u3{animation-delay:-6s}
@keyframes svc-hosting-pkk{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(270px);opacity:0}}.pp-live .svc-hosting-pk{animation:svc-hosting-pkk 3.6s cubic-bezier(.5,0,.5,1) infinite}
.pp-live .svc-3d-ar{transform-box:view-box;transform-origin:404px 182px;opacity:0;animation:svc-3d-ark 10s linear infinite}@keyframes svc-3d-ark{0%{transform:scale(0.1400);opacity:0.000}5%{transform:scale(0.1469);opacity:0.237}10%{transform:scale(0.1546);opacity:0.475}15%{transform:scale(0.1631);opacity:0.712}20%{transform:scale(0.1726);opacity:0.950}25%{transform:scale(0.1832);opacity:0.950}30%{transform:scale(0.1953);opacity:0.950}35%{transform:scale(0.2091);opacity:0.950}40%{transform:scale(0.2249);opacity:0.950}45%{transform:scale(0.2434);opacity:0.950}50%{transform:scale(0.2652);opacity:0.950}55%{transform:scale(0.2912);opacity:0.950}60%{transform:scale(0.3229);opacity:0.950}65%{transform:scale(0.3623);opacity:0.950}70%{transform:scale(0.4127);opacity:0.950}75%{transform:scale(0.4795);opacity:0.792}80%{transform:scale(0.5719);opacity:0.633}85%{transform:scale(0.7085);opacity:0.475}90%{transform:scale(0.9309);opacity:0.317}95%{transform:scale(1.3566);opacity:0.158}100%{transform:scale(2.5000);opacity:-0.000}}.pp-live .svc-3d-ar.a0{animation-delay:-0s}.pp-live .svc-3d-ar.a1{animation-delay:-2s}.pp-live .svc-3d-ar.a2{animation-delay:-4s}.pp-live .svc-3d-ar.a3{animation-delay:-6s}.pp-live .svc-3d-ar.a4{animation-delay:-8s}
@keyframes svc-3d-gmk{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}.pp-live .svc-3d-gm{animation:svc-3d-gmk 5.5s ease-in-out infinite}
@keyframes svc-3d-pok{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.18);opacity:.85}}.pp-live .svc-3d-po{animation:svc-3d-pok 4s ease-in-out infinite}
.pp-stars i{position:absolute;display:block;border-radius:50%;background:#eceeff;opacity:0;box-shadow:0 0 6px rgba(200,208,255,.75);animation:ppStar 8s ease-in-out infinite}@keyframes ppStar{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:var(--pk,.8);transform:scale(1)}}.site-footer.pp-off .pp-stars i{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.pp-stars i{animation:none;opacity:calc(var(--pk,.8)*.6)}}.pp-stars i:nth-child(1){left:67.1%;top:55.6%;width:2px;height:2px;--pk:0.7;animation-duration:9.1s;animation-delay:-1.7s}.pp-stars i:nth-child(2){left:61.1%;top:62.2%;width:2px;height:2px;--pk:0.6;animation-duration:5.6s;animation-delay:-4.5s}.pp-stars i:nth-child(3){left:41.4%;top:6.9%;width:1.5px;height:1.5px;--pk:0.57;animation-duration:9.3s;animation-delay:-1.5s}.pp-stars i:nth-child(4){left:99.7%;top:52.7%;width:3px;height:3px;--pk:0.55;animation-duration:6.7s;animation-delay:-0.2s}.pp-stars i:nth-child(5){left:66.0%;top:44.4%;width:2px;height:2px;--pk:0.77;animation-duration:8.5s;animation-delay:-5.6s}.pp-stars i:nth-child(6){left:66.6%;top:29.1%;width:1.5px;height:1.5px;--pk:0.87;animation-duration:10.0s;animation-delay:-3.2s}.pp-stars i:nth-child(7){left:86.8%;top:30.2%;width:3px;height:3px;--pk:0.83;animation-duration:7.8s;animation-delay:-6.6s}.pp-stars i:nth-child(8){left:73.4%;top:93.1%;width:2px;height:2px;--pk:0.55;animation-duration:11.4s;animation-delay:-5.4s}.pp-stars i:nth-child(9){left:6.5%;top:40.4%;width:3px;height:3px;--pk:0.27;animation-duration:10.4s;animation-delay:-2.8s}.pp-stars i:nth-child(10){left:96.4%;top:34.3%;width:1.5px;height:1.5px;--pk:0.51;animation-duration:6.7s;animation-delay:-0.7s}.pp-stars i:nth-child(11){left:97.9%;top:77.9%;width:3px;height:3px;--pk:0.73;animation-duration:8.1s;animation-delay:-1.5s}.pp-stars i:nth-child(12){left:37.0%;top:15.3%;width:2px;height:2px;--pk:0.44;animation-duration:6.5s;animation-delay:-1.8s}.pp-stars i:nth-child(13){left:7.7%;top:78.5%;width:1.5px;height:1.5px;--pk:0.19;animation-duration:7.8s;animation-delay:-6.7s}.pp-stars i:nth-child(14){left:47.2%;top:12.4%;width:2px;height:2px;--pk:0.48;animation-duration:10.4s;animation-delay:-3.4s}.pp-stars i:nth-child(15){left:81.4%;top:9.9%;width:3px;height:3px;--pk:0.74;animation-duration:6.7s;animation-delay:-4.0s}.pp-stars i:nth-child(16){left:74.8%;top:45.6%;width:2px;height:2px;--pk:0.74;animation-duration:11.1s;animation-delay:-2.0s}.pp-stars i:nth-child(17){left:92.3%;top:88.4%;width:2px;height:2px;--pk:0.54;animation-duration:10.2s;animation-delay:-9.6s}.pp-stars i:nth-child(18){left:89.3%;top:92.3%;width:1.5px;height:1.5px;--pk:0.66;animation-duration:5.7s;animation-delay:-0.2s}.pp-stars i:nth-child(19){left:8.8%;top:25.4%;width:2px;height:2px;--pk:0.3;animation-duration:9.2s;animation-delay:-2.7s}.pp-stars i:nth-child(20){left:90.8%;top:70.7%;width:3px;height:3px;--pk:0.56;animation-duration:8.9s;animation-delay:-7.6s}.pp-stars i:nth-child(21){left:50.3%;top:29.3%;width:2px;height:2px;--pk:0.4;animation-duration:6.9s;animation-delay:-3.1s}.pp-stars i:nth-child(22){left:97.8%;top:19.6%;width:2px;height:2px;--pk:0.52;animation-duration:7.5s;animation-delay:-6.7s}.pp-stars i:nth-child(23){left:6.5%;top:64.8%;width:2px;height:2px;--pk:0.18;animation-duration:5.2s;animation-delay:-0.1s}.pp-stars i:nth-child(24){left:15.4%;top:68.9%;width:2px;height:2px;--pk:0.27;animation-duration:8.4s;animation-delay:-6.1s}.pp-stars i:nth-child(25){left:79.5%;top:96.9%;width:3px;height:3px;--pk:0.72;animation-duration:10.2s;animation-delay:-9.2s}.pp-stars i:nth-child(26){left:36.4%;top:69.1%;width:1.5px;height:1.5px;--pk:0.41;animation-duration:9.8s;animation-delay:-8.8s}.pp-stars i:nth-child(27){left:20.3%;top:42.2%;width:1.5px;height:1.5px;--pk:0.29;animation-duration:9.4s;animation-delay:-3.6s}.pp-stars i:nth-child(28){left:53.7%;top:60.2%;width:3px;height:3px;--pk:0.72;animation-duration:12.0s;animation-delay:-10.6s}.pp-stars i:nth-child(29){left:37.4%;top:39.5%;width:2px;height:2px;--pk:0.45;animation-duration:10.9s;animation-delay:-0.9s}.pp-stars i:nth-child(30){left:34.9%;top:5.8%;width:2px;height:2px;--pk:0.35;animation-duration:9.9s;animation-delay:-4.9s}.pp-stars i:nth-child(31){left:50.3%;top:89.5%;width:2px;height:2px;--pk:0.52;animation-duration:9.7s;animation-delay:-2.0s}.pp-stars i:nth-child(32){left:91.2%;top:88.1%;width:2px;height:2px;--pk:0.9;animation-duration:7.3s;animation-delay:-4.9s}.pp-stars i:nth-child(33){left:89.2%;top:43.5%;width:1.5px;height:1.5px;--pk:0.89;animation-duration:7.7s;animation-delay:-4.5s}.pp-stars i:nth-child(34){left:79.7%;top:15.8%;width:1.5px;height:1.5px;--pk:0.87;animation-duration:10.0s;animation-delay:-9.5s}.pp-stars i:nth-child(35){left:83.0%;top:18.9%;width:2px;height:2px;--pk:0.56;animation-duration:7.9s;animation-delay:-4.9s}.pp-stars i:nth-child(36){left:63.0%;top:32.6%;width:1.5px;height:1.5px;--pk:0.68;animation-duration:5.5s;animation-delay:-0.2s}.pp-stars i:nth-child(37){left:20.1%;top:6.9%;width:2px;height:2px;--pk:0.23;animation-duration:10.5s;animation-delay:-0.2s}.pp-stars i:nth-child(38){left:93.5%;top:45.8%;width:3px;height:3px;--pk:0.86;animation-duration:6.7s;animation-delay:-0.9s}.pp-stars i:nth-child(39){left:98.5%;top:62.1%;width:1.5px;height:1.5px;--pk:0.78;animation-duration:10.7s;animation-delay:-10.3s}.pp-stars i:nth-child(40){left:42.5%;top:21.7%;width:2px;height:2px;--pk:0.34;animation-duration:8.3s;animation-delay:-5.9s}.pp-stars i:nth-child(41){left:90.6%;top:28.6%;width:1.5px;height:1.5px;--pk:0.71;animation-duration:9.3s;animation-delay:-7.0s}.pp-stars i:nth-child(42){left:72.7%;top:77.4%;width:2px;height:2px;--pk:0.92;animation-duration:10.1s;animation-delay:-1.3s}.pp-stars i:nth-child(43){left:67.0%;top:61.8%;width:2px;height:2px;--pk:0.73;animation-duration:11.2s;animation-delay:-8.9s}.pp-stars i:nth-child(44){left:11.2%;top:46.6%;width:2px;height:2px;--pk:0.28;animation-duration:10.7s;animation-delay:-6.9s}.pp-stars i:nth-child(45){left:38.7%;top:23.0%;width:1.5px;height:1.5px;--pk:0.64;animation-duration:8.8s;animation-delay:-7.0s}.pp-stars i:nth-child(46){left:79.3%;top:88.5%;width:2px;height:2px;--pk:0.49;animation-duration:8.1s;animation-delay:-4.5s}
@keyframes foot-dial-cmk{to{transform:rotate(360deg)}}.pp-live .foot-dial-cm{animation:foot-dial-cmk 4.5s linear infinite}
@keyframes about-dial-cmk{to{transform:rotate(360deg)}}.pp-live .about-dial-cm{animation:about-dial-cmk 4.5s linear infinite}
/* faze petlji (posle svih pravila) */
.pp-live .l1{animation-delay:-.7s}.pp-live .l2{animation-delay:-1.4s}.pp-live .l3{animation-delay:-2.1s}.pp-live .l4{animation-delay:-2.8s}.pp-live .l5{animation-delay:-3.5s}.pp-live .l6{animation-delay:-4.2s}.pp-live .l7{animation-delay:-4.9s}.pp-live .l8{animation-delay:-5.6s}.pp-live .l9{animation-delay:-6.3s}

/* ===== Work (izmene 21): The Testing Agency kao na linku, koncepti sajtova i prazna polja ===== */
.project-dialog .project-stage.stage-shot{min-height:0;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.22)}
.project-dialog .stage-shot img{display:block;width:100%;height:100%;object-fit:cover}
.project-dialog .project-stage.stage-image{display:flex;justify-content:center;align-items:flex-start;min-height:0;padding:0;background:transparent;border:0;border-radius:16px;overflow:hidden;-webkit-backdrop-filter:none;backdrop-filter:none}
.project-dialog .stage-image img{display:block;width:100%;height:auto;object-fit:contain;filter:none;opacity:1}
.project-credit{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;font-size:12px;line-height:1.5;color:rgba(247,248,251,.7)}
.project-credit[hidden]{display:none}
.project-credit a{flex-shrink:0;padding:11px 17px;border:1px solid rgba(255,255,255,.3);border-radius:30px;color:#fff;text-decoration:none;transition:background .25s,border-color .25s}
.project-credit a:hover,.project-credit a:focus-visible{background:#455ce9;border-color:#455ce9}
.work-slice.is-soon{cursor:default;background:linear-gradient(160deg,#202227,#131417);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.work-slice.is-soon:after{display:none}
.work-slice.is-soon .work-slice-title,.work-slice.is-soon .work-slice-type,.work-slice.is-soon .work-slice-index{text-shadow:none;color:rgba(255,255,255,.72)}
.work-soon-mark{position:absolute;left:50%;top:42%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px dashed rgba(255,255,255,.4);display:grid;place-items:center;font-size:20px;color:rgba(255,255,255,.7)}
.work-slice.is-empty{background:linear-gradient(160deg,#1a1b1f,#111215);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.work-slice.is-soon.is-empty .work-slice-index{color:rgba(255,255,255,.34)}
.work-slice.is-empty,.work-slice.is-empty:hover,.work-slice.is-empty:focus-visible{transform:none;cursor:default}
body.work-light .work-slice.is-soon{background:linear-gradient(160deg,#ececea,#dfdfdb);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
body.work-light .work-slice.is-soon .work-slice-title,body.work-light .work-slice.is-soon .work-slice-type,body.work-light .work-slice.is-soon .work-slice-index{color:rgba(20,20,22,.7)}
body.work-light .work-soon-mark{border-color:rgba(20,20,22,.35);color:rgba(20,20,22,.6)}
body.work-light .work-slice.is-empty{background:linear-gradient(160deg,#f1f1ef,#e6e6e2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
body.work-light .work-slice.is-soon.is-empty .work-slice-index{color:rgba(20,20,22,.36)}
@media(max-width:760px){.project-credit{align-items:flex-start;flex-direction:column}}
/* radovi za drustvene mreze: galerija snimaka i slika u prozoru projekta */
.project-dialog .project-stage.stage-media{min-height:0;padding:0;background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.media-grid{display:grid;gap:14px;align-items:start}
.media-grid.mg-1{grid-template-columns:minmax(0,420px);justify-content:center}
.media-grid.mg-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.media-grid.mg-3,.media-grid.mg-5{grid-template-columns:repeat(3,minmax(0,1fr))}
.media-grid.mg-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.media-item{margin:0;border-radius:14px;overflow:hidden;background:#0d0d10;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.media-item img,.media-item video{display:block;width:100%;height:auto;background:#0d0d10}
@media(max-width:760px){.media-grid{gap:10px}.media-grid.mg-2,.media-grid.mg-3,.media-grid.mg-4,.media-grid.mg-5{grid-template-columns:repeat(2,minmax(0,1fr))}.media-item{border-radius:10px}}
/* Fashion Visualizer: dva horizontalna snimka levo, vertikalni desno (iste visine) */
.media-grid.mg-viz{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.media-grid.mg-viz .media-item:nth-child(3){grid-column:2;grid-row:1/span 2;align-self:stretch;position:relative}
.media-grid.mg-viz .media-item:nth-child(3) video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.media-grid.mg-viz{grid-template-columns:minmax(0,1fr)}.media-grid.mg-viz .media-item:nth-child(3){grid-column:auto;grid-row:auto;justify-self:center;width:min(100%,340px);aspect-ratio:9/16}}
/* 3D sajt (izmene 26): snimak setnje preko cele sirine prozora, ispod slika na racunaru i telefonu */
.media-grid.mg-wide{grid-template-columns:minmax(0,1fr)}
.media-grid.mg-wide .media-item video{aspect-ratio:16/10;object-fit:cover}
@media(max-width:760px){.media-grid.mg-wide{grid-template-columns:minmax(0,1fr)}}
/* izmene 28: novi 3D sajtovi na traci — plava oznaka NEW; NOIR (glavni) ima ivicu koja svetli */
.work-slice-new{position:absolute;z-index:3;left:10px;top:34px;padding:5px 8px 4px;border-radius:999px;background:#455ce9;color:#fff;font-size:9.5px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;box-shadow:0 0 0 0 rgba(69,92,233,.6);animation:ppSliceNew 2.6s ease-out infinite}
@keyframes ppSliceNew{0%{box-shadow:0 0 0 0 rgba(69,92,233,.6)}70%,100%{box-shadow:0 0 0 9px rgba(69,92,233,0)}}
.work-slice.is-feature{box-shadow:inset 0 0 0 1px rgba(110,128,255,.45)}
.work-slice.is-feature::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(150,165,255,.7),inset 0 0 26px rgba(90,110,255,.35),inset 0 0 70px rgba(90,110,255,.14);opacity:.35;animation:ppEdgeGlow 4.2s ease-in-out infinite}
.work-slice-edge{position:absolute;inset:0;z-index:2;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--pp-edge),rgba(120,140,255,0) 0deg,rgba(120,140,255,0) 250deg,rgba(160,175,255,.95) 312deg,rgba(120,140,255,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ppEdgeRun 6s linear infinite}
body.work-light .work-slice.is-feature::before{box-shadow:inset 0 0 0 1px rgba(69,92,233,.75),inset 0 0 26px rgba(69,92,233,.3),inset 0 0 70px rgba(69,92,233,.1)}
@media(prefers-reduced-motion:reduce){.work-slice-new{animation:none}.work-slice.is-feature::before{animation:none;opacity:.8}.work-slice-edge{animation:none}}
/* prazna polja: suptilan natpis "Coming soon" (prvo polje: "Something fashion") */
.work-empty-note{position:absolute;z-index:1;left:clamp(10px,1.1vw,18px);right:8px;bottom:clamp(18px,2.1vw,30px);display:flex;flex-direction:column;gap:7px;pointer-events:none}
.work-empty-note b{font-weight:400;font-size:clamp(12px,1.05vw,16px);line-height:1.12;letter-spacing:-.02em;color:rgba(255,255,255,.5)}
.work-empty-note small{font-size:clamp(8px,.62vw,10px);line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.work-empty-note.has-title small{color:rgba(255,255,255,.36)}
body.work-light .work-empty-note b{color:rgba(20,20,22,.5)}
body.work-light .work-empty-note small{color:rgba(20,20,22,.34)}
/* "Something fashion": natpis uspravno (cita se odozdo nagore) i ivice koje blago sijaju */
.work-empty-note.has-title{display:block;right:auto;left:clamp(12px,1.25vw,20px);bottom:clamp(16px,1.9vw,28px);writing-mode:vertical-rl;transform:rotate(180deg)}
.work-empty-note.has-title b{display:block;font-size:clamp(15px,1.3vw,20px);letter-spacing:.01em;white-space:nowrap;color:rgba(255,255,255,.66)}
.work-empty-note.has-title small{display:block;margin-block-start:clamp(6px,.55vw,9px);font-size:clamp(8px,.6vw,10px);letter-spacing:.24em;white-space:nowrap;color:rgba(255,255,255,.42)}
.work-slice.is-empty.is-glow{box-shadow:inset 0 0 0 1px rgba(150,162,255,.22)}
.work-slice.is-empty.is-glow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(170,180,255,.55),inset 0 0 22px rgba(124,140,255,.32),inset 0 0 64px rgba(124,140,255,.12),0 0 18px rgba(124,140,255,.16);opacity:.3;animation:ppEdgeGlow 4.2s ease-in-out infinite}
@property --pp-edge{syntax:'<angle>';inherits:false;initial-value:0deg}
.work-slice.is-empty.is-glow::after{display:block;content:"";position:absolute;inset:0;z-index:0;padding:1.5px;border-radius:inherit;pointer-events:none;opacity:.85;background:conic-gradient(from var(--pp-edge),rgba(190,198,255,0) 0deg,rgba(190,198,255,0) 250deg,rgba(205,212,255,.95) 312deg,rgba(190,198,255,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ppEdgeRun 7s linear infinite}
@keyframes ppEdgeGlow{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes ppEdgeRun{to{--pp-edge:360deg}}
body.work-light .work-empty-note.has-title b{color:rgba(20,20,22,.56)}
body.work-light .work-empty-note.has-title small{color:rgba(20,20,22,.4)}
body.work-light .work-slice.is-empty.is-glow::before{box-shadow:inset 0 0 0 1px rgba(90,106,240,.38),inset 0 0 22px rgba(108,124,255,.22),inset 0 0 64px rgba(108,124,255,.08),0 0 18px rgba(108,124,255,.14)}
body.work-light .work-slice.is-empty.is-glow::after{background:conic-gradient(from var(--pp-edge),rgba(80,96,235,0) 0deg,rgba(80,96,235,0) 250deg,rgba(80,96,235,.75) 312deg,rgba(80,96,235,0) 360deg)}
@media(prefers-reduced-motion:reduce){.work-slice.is-empty.is-glow::before{animation:none;opacity:.7}.work-slice.is-empty.is-glow::after{animation:none}}
/* Work: pri otvaranju stranice rad 10/20 je odmah u sredini trake (bez animacije sirenja) */
.work-ribbon.pp-no-anim .work-slice,.work-ribbon.pp-no-anim .work-slice img,.work-ribbon.pp-no-anim .work-slice video,.work-ribbon.pp-no-anim .work-slice-title,.work-ribbon.pp-no-anim .work-slice-type{transition:none!important}
/* mali snimak na traci (ispod naslova rada, iznad slike) */
.work-slice video.work-slice-video{display:block}
/* pocetna: naslov iznad trake, traka se stalno pomera, manje praznog prostora do "Let's work together" */
.concept-intro.pp-some-work{padding-top:0;margin-top:clamp(-40px,-2.6vw,-16px);margin-bottom:clamp(8px,1.2vw,18px)}
.work-gallery.pp-home-strip{padding-bottom:clamp(20px,2.6vw,40px)}
.pp-home-strip .work-ribbon{scroll-snap-type:none!important;scroll-behavior:auto}
@media(max-width:760px){.work-gallery.pp-home-strip{padding-bottom:22px}}
body[data-route="home"] .site-footer .footer-content{padding-top:calc(var(--footer-section)*.72)}