@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/unbounded-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(/_blob/23c7c14316f94c818e2611213fc8f1cb) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(/_blob/3249da5787c4c64537ec7abf61037ef2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--pink:#E9204F;--pink2:#FF4D73;--ink:#15171C;--ink2:#1E2026;--ink3:#26292F;--paper:#FFFFFF;--mist:#F2F0F3;--line:rgba(255,255,255,.12);--lined:rgba(21,23,28,.12)}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:#fff;font-family:'Unbounded',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.65}
a{color:inherit;text-decoration:none}
h1,h2,h3,.disp{font-family:'Unbounded',sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.06;margin:0}
p{margin:0}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
.eyebrow.white::before{background:#fff}
.eyebrow::before{content:'';width:28px;height:7px;background:var(--pink);clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.bar{display:inline-block;height:10px;width:96px;background:var(--pink);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.zagriz{--z:38px;-webkit-mask:radial-gradient(circle at 100% 0,transparent calc(var(--z) - 1px),#000 var(--z));mask:radial-gradient(circle at 100% 0,transparent calc(var(--z) - 1px),#000 var(--z))}
.zagriz-bl{--z:38px;-webkit-mask:radial-gradient(circle at 0 100%,transparent calc(var(--z) - 1px),#000 var(--z));mask:radial-gradient(circle at 0 100%,transparent calc(var(--z) - 1px),#000 var(--z))}
.zagriz-tl{--z:38px;-webkit-mask:radial-gradient(circle at 0 0,transparent calc(var(--z) - 1px),#000 var(--z));mask:radial-gradient(circle at 0 0,transparent calc(var(--z) - 1px),#000 var(--z))}
.rez{clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 40px) 100%,0 100%)}
.rez-top{clip-path:polygon(40px 0,100% 0,100% 100%,0 100%,0 28px)}
@property --z{syntax:'<length>';inherits:false;initial-value:16px}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--pink);color:#fff;font-family:'Unbounded',sans-serif;font-weight:600;font-size:15px;padding:20px 34px 20px 26px;--z:16px;-webkit-mask:radial-gradient(circle at 100% 0,transparent calc(var(--z) - 1px),#000 var(--z));mask:radial-gradient(circle at 100% 0,transparent calc(var(--z) - 1px),#000 var(--z));transition:--z .25s,background .25s}
.btn:hover{background:var(--pink2);--z:26px}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--pink)}
.btn.ghost.dark{color:var(--ink)}
.btn.ghost:hover{background:var(--pink);color:#fff}
.nav a{font-size:15px;font-weight:500;opacity:.8;position:relative;padding-bottom:6px}
.nav a:hover{opacity:1}
.nav a::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--pink);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);transition:width .25s}
.nav a:hover::after{width:100%}
.ph{display:block;width:100%;height:100%;object-fit:cover}
.frame{position:relative;background:var(--ink2);overflow:hidden}
/* ---------- HERO: originalni znak, gornji dio ulazi, luk klizne i zatim se njiše gore-dolje ---------- */
.hero-mark{width:400px;height:514px;flex:none;overflow:visible}
.hero-mark .top{transform-origin:50% 40%;animation:topin 1.2s cubic-bezier(.2,.8,.2,1) both}
.hero-mark .arc{animation:arcin .8s 1s cubic-bezier(.2,.8,.2,1) both,sway 3.2s 1.9s ease-in-out infinite}
@keyframes topin{from{transform:scale(.7) rotate(-60deg);opacity:0}to{transform:none;opacity:1}}
@keyframes arcin{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes sway{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
.w{display:inline-block;overflow:hidden;vertical-align:bottom}
.w span{display:inline-block;animation:wup .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes wup{from{transform:translateY(110%)}to{transform:none}}
.fade{animation:fade 1s 1.6s both}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.marq{display:flex;gap:56px;white-space:nowrap;animation:marq 34s linear infinite;width:max-content}
@keyframes marq{to{transform:translateX(-50%)}}
/* ---------- scroll-driven pojavljivanje ---------- */
.up{animation:up .9s cubic-bezier(.2,.8,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 35%}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.grow{transform-origin:left;animation:grow .9s cubic-bezier(.2,.8,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 45%}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---------- USLUGE – 4 različite kartice iz dijelova znaka ---------- */
.usl{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:24px}
.k{position:relative;overflow:hidden;padding:40px;display:flex;flex-direction:column;gap:22px;min-height:400px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.k:hover{transform:translateY(-8px)}
.k>*{position:relative;z-index:1}.k .ring,.k .waves,.k .corner,.k .arcbig{z-index:0}
.k h3{font-size:30px;letter-spacing:-.03em;line-height:1.08}
.k p{font-size:16px;line-height:1.6}
.k .ic{color:currentColor}
.k1{grid-column:span 7;background:var(--ink);color:#fff;--z:72px}
.k1 .ring{position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;border:60px solid rgba(255,255,255,.06);transition:transform .6s}
.k1:hover .ring{transform:rotate(25deg) scale(1.05)}
.k2{grid-column:span 5;background:var(--pink);color:#fff}
.k2 .ic{color:#fff}.k2 .ic circle,.k2 .ic path{stroke:#fff}.k2 .ic path[fill]{fill:#fff}
.k2 .arcbig{position:absolute;left:-10%;bottom:-18px;width:120%;opacity:.35}
.k3{grid-column:span 5;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)}
.k3 .corner{position:absolute;right:0;top:0;width:110px;height:110px;background:var(--ink);-webkit-mask:radial-gradient(circle at 100% 0,#000 54px,transparent 55px);mask:radial-gradient(circle at 100% 0,#000 54px,transparent 55px)}
.k4{grid-column:span 7;background:var(--ink2);color:#fff;--z:60px}
.k4 .waves{position:absolute;right:-60px;bottom:-60px;width:280px;height:280px;border-radius:50%;box-shadow:0 0 0 14px var(--pink),0 0 0 36px var(--ink2),0 0 0 50px rgba(233,32,79,.45),0 0 0 72px var(--ink2),0 0 0 86px rgba(233,32,79,.2);transition:transform .6s}
.k4:hover .waves{transform:scale(1.06)}
/* ---------- RADOVI – svaki projekt vlastita kompozicija ---------- */
.rad{display:block;position:relative}
.rad .frame{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rad .ph{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.rad:hover .ph{transform:scale(1.04)}
.rad .baza{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rad:hover .frame{transform:translateY(-10px)}
.rad:hover .baza{transform:translateY(-4px) scaleX(1.05)}
.tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
/* ---------- SLIDER (CSS, radio) ---------- */
.sl{position:relative}
.sl input{position:absolute;opacity:0;pointer-events:none}
.sl .vp{overflow:hidden}
.sl .tr{display:flex;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.sl .sd{flex:0 0 100%;min-width:0}
.sl .ctrl{display:flex;align-items:center;gap:14px;margin-top:36px}
.sl .dot{width:30px;height:8px;background:rgba(255,255,255,.25);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);cursor:pointer;transition:background .3s,width .3s}
.sl.light .dot{background:rgba(21,23,28,.2)}
.sl .ar{width:54px;height:54px;display:inline-flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-size:20px;cursor:pointer;box-shadow:inset 0 0 0 2px var(--pink);--z:12px;-webkit-mask:radial-gradient(circle at 100% 0,transparent calc(var(--z) - 1px),#000 var(--z));mask:radial-gradient(circle at 100% 0,transparent calc(var(--z) - 1px),#000 var(--z));transition:background .25s}
.sl .ar:hover{background:var(--pink);color:#fff}
.sl .ar.prev{display:none}.sl .ar.next{display:none}
.kt{position:relative;transition:transform .45s cubic-bezier(.2,.8,.2,1),--z .45s,background .45s,color .45s;will-change:transform}
.kt::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:8px;background:currentColor;opacity:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transform:translateY(8px);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.kt:hover{transform:translateY(-8px);--z:60px}
.kt:hover::after{opacity:1;transform:none}
.kt-m:hover{background:#fff!important;color:var(--ink)!important}
.kt-t:hover{background:var(--pink)!important;color:#fff!important}
.kt .arr{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.kt:hover .arr{transform:translateX(10px)}
.sl .sd{display:flex}.sl .sd>*{width:100%}
.sl .sd2{flex:0 0 50%;padding-right:40px}
@media (max-width:700px){.sl .sd2{flex:0 0 100%;padding-right:0}}


#rc0:checked~.vp .tr{transform:translateX(-0.0000%)}
@media (max-width:700px){#rc0:checked~.vp .tr{transform:translateX(-0%)}}
#rc0:checked~.ctrl .d0{background:var(--pink);width:54px}
#rc0:checked~.ctrl .p0,#rc0:checked~.ctrl .n0{display:inline-flex}
#rc1:checked~.vp .tr{transform:translateX(-50.0000%)}
@media (max-width:700px){#rc1:checked~.vp .tr{transform:translateX(-100%)}}
#rc1:checked~.ctrl .d1{background:var(--pink);width:54px}
#rc1:checked~.ctrl .p1,#rc1:checked~.ctrl .n1{display:inline-flex}
#rc2:checked~.vp .tr{transform:translateX(-100.0000%)}
@media (max-width:700px){#rc2:checked~.vp .tr{transform:translateX(-200%)}}
#rc2:checked~.ctrl .d2{background:var(--pink);width:54px}
#rc2:checked~.ctrl .p2,#rc2:checked~.ctrl .n2{display:inline-flex}
#rc3:checked~.vp .tr{transform:translateX(-150.0000%)}
@media (max-width:700px){#rc3:checked~.vp .tr{transform:translateX(-300%)}}
#rc3:checked~.ctrl .d3{background:var(--pink);width:54px}
#rc3:checked~.ctrl .p3,#rc3:checked~.ctrl .n3{display:inline-flex}
#rc4:checked~.vp .tr{transform:translateX(-200.0000%)}
@media (max-width:700px){#rc4:checked~.vp .tr{transform:translateX(-400%)}}
#rc4:checked~.ctrl .d4{background:var(--pink);width:54px}
#rc4:checked~.ctrl .p4,#rc4:checked~.ctrl .n4{display:inline-flex}
#rc5:checked~.vp .tr{transform:translateX(-200.0000%)}
@media (max-width:700px){#rc5:checked~.vp .tr{transform:translateX(-500%)}}
#rc5:checked~.ctrl .d5{background:var(--pink);width:54px}
#rc5:checked~.ctrl .p5,#rc5:checked~.ctrl .n5{display:inline-flex}
#bl0:checked~.vp .tr{transform:translateX(-0.0000%)}
@media (max-width:700px){#bl0:checked~.vp .tr{transform:translateX(-0%)}}
#bl0:checked~.ctrl .d0{background:var(--pink);width:54px}
#bl0:checked~.ctrl .p0,#bl0:checked~.ctrl .n0{display:inline-flex}
#bl1:checked~.vp .tr{transform:translateX(-50.0000%)}
@media (max-width:700px){#bl1:checked~.vp .tr{transform:translateX(-100%)}}
#bl1:checked~.ctrl .d1{background:var(--pink);width:54px}
#bl1:checked~.ctrl .p1,#bl1:checked~.ctrl .n1{display:inline-flex}
#bl2:checked~.vp .tr{transform:translateX(-50.0000%)}
@media (max-width:700px){#bl2:checked~.vp .tr{transform:translateX(-200%)}}
#bl2:checked~.ctrl .d2{background:var(--pink);width:54px}
#bl2:checked~.ctrl .p2,#bl2:checked~.ctrl .n2{display:inline-flex}
@media (max-width:980px){
  .wrap{padding:0 24px}
  .h1{font-size:54px!important}.h2{font-size:40px!important}
  .hero{flex-direction:column!important;gap:40px!important}.hero-mark{width:240px!important;height:308px!important;align-self:center}
  .usl>*{grid-column:span 6!important}
  .cols2,.r2,.cta{grid-template-columns:1fr!important}
  .r2>a{margin-top:0!important}
  .nav{display:none!important}
  .num{font-size:64px}
  .ft-grid{grid-template-columns:1fr 1fr!important}
  .tm-img{margin-right:0!important}
  .cta-img{justify-self:center!important}
  .marq{animation-duration:22s}
}
@media (max-width:700px){
  .wrap{padding:0 20px}
  .h1{font-size:38px!important}.h2{font-size:32px!important}
  .hero-mark{display:none!important}
  .usl>*{grid-column:span 12!important;min-height:0}
  .k{padding:30px}
  .stats{grid-template-columns:1fr 1fr!important;gap:28px 16px!important}.num{font-size:52px}
  .sd h3{font-size:26px!important}
  .proj-meta{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  .proj-meta h3{font-size:26px!important}
  .big04{font-size:80px!important}
  .ideja{flex-direction:column!important;align-items:flex-start!important}
  .ft-grid{grid-template-columns:1fr!important}
  .ft-grid>div:first-child{grid-column:1/-1}
  .btn{padding:16px 26px 16px 20px;font-size:14px}
  header .btn{padding:12px 18px 12px 14px!important;font-size:13px!important}
}
.num{font-family:'Unbounded',sans-serif;font-weight:800;font-size:88px;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}

/* ---------- statična stranica: dodaci ---------- */
html{scroll-behavior:smooth}
.wrap{width:100%}
body.light{background:#fff;color:var(--ink)}
.page-head{padding:70px 0 60px}
.page-head .h1{font-size:64px;letter-spacing:-.04em;line-height:1}
.prose{max-width:820px;font-size:18px;line-height:1.7}
.prose p{margin:0 0 22px}
.prose h2{font-size:34px;margin:48px 0 16px}
.prose h3{font-size:24px;margin:40px 0 12px}
.prose h4{font-size:18px;margin:28px 0 8px}
.prose ul{padding-left:22px;margin:0 0 22px}.prose li{margin:6px 0}
.prose a{color:var(--pink);font-weight:600}
.prose a.btn{color:#fff}
.tools img{height:56px!important}
.light .prose{color:#2B2930}
/* mobilni izbornik */
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:6px}
.burger span{display:block;width:26px;height:3px;background:#fff;clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}
#mnav{position:absolute;opacity:0;pointer-events:none}
.mobile-nav{display:none}
@media (max-width:980px){
  .burger{display:flex}
  header .btn{display:none!important}
  .mobile-nav{display:flex;flex-direction:column;gap:0;background:var(--ink2);max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1)}
  .mobile-nav a{padding:18px 24px;font-family:'Unbounded',sans-serif;font-weight:600;font-size:18px;border-top:1px solid var(--line);color:#fff}
  .mobile-nav .btn{margin:18px 24px 24px;align-self:flex-start;display:inline-flex!important}
  #mnav:checked~.mobile-nav{max-height:520px}
  #mnav:checked~header .burger span:nth-child(2){opacity:0}
}
/* usluge – lista */
.usl .k5{grid-column:span 5;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 3px var(--pink)}
.usl .k6{grid-column:span 7;background:var(--pink);color:#fff}
.usl .k6 .ic path,.usl .k6 .ic circle{stroke:#fff}.usl .k6 .ic path[fill]{fill:#fff}
.usl .k6 .arcbig{position:absolute;left:-10%;bottom:-18px;width:120%;opacity:.35}
/* portfolio mreža */
.pf{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.pf a{display:block}
.pf .s4{grid-column:span 4}.pf .s6{grid-column:span 6}.pf .s8{grid-column:span 8}
.pf .frame{aspect-ratio:4/3}
@media (max-width:980px){.pf>a{grid-column:span 6!important}}
@media (max-width:700px){.pf>a{grid-column:span 12!important}}
/* projekt – dugi screenshot u okviru koji se skrola */
.shot{position:relative;background:var(--ink2);box-shadow:inset 0 0 0 3px var(--pink);padding:14px}
.shot .inner{max-height:760px;overflow-y:auto;background:#fff}
.shot .inner img{display:block;width:100%;height:auto}
.shot .inner::-webkit-scrollbar{width:10px}.shot .inner::-webkit-scrollbar-thumb{background:var(--pink)}
.tools{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.tools img{height:44px;width:auto}
/* forma */
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;font-weight:600}
.fld input,.fld textarea{font:inherit;font-size:17px;color:#fff;background:var(--ink2);border:0;border-bottom:3px solid rgba(255,255,255,.18);padding:16px 18px;outline:none;transition:border-color .25s;--z:14px;-webkit-mask:radial-gradient(circle at 100% 0,transparent calc(var(--z) - 1px),#000 var(--z));mask:radial-gradient(circle at 100% 0,transparent calc(var(--z) - 1px),#000 var(--z))}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--pink)}
.fld textarea{min-height:160px;resize:vertical}
.btn.submit{border:0;cursor:pointer;font:inherit;font-family:'Unbounded',sans-serif;font-weight:600}
.cols-serv{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
@media (max-width:980px){.cols-serv,.cols-proj,.form-grid{grid-template-columns:1fr!important}.blog3{grid-template-columns:1fr 1fr!important}.tm-img{margin-right:0!important}.page-head .h1{font-size:46px}}
@media (max-width:700px){.page-head .h1{font-size:34px}.blog3{grid-template-columns:1fr!important}#kontakt-forma{grid-template-columns:1fr!important}.fld[style]{grid-column:auto!important}}