*{box-sizing:border-box;margin:0;padding:0}
body{background:#000;color:#fff;font-family:'Inter',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
.page{max-width:1440px;margin:0 auto;position:relative;overflow:hidden}
:root{--pink:#f45cf5;--pill:#4b1590;--ease:cubic-bezier(.16,1,.3,1)}

/* slike koje možete zameniti: ako fajl ne postoji, vidi se rezervna verzija */
.ph .fb{display:none}.ph.noimg .fb{display:flex}.ph.noimg img{display:none}

/* animacije pojavljivanja */
.reveal{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}

.label{display:flex;align-items:center;gap:14px;font-size:26px;font-weight:400;letter-spacing:-.02em}
.label::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--pink)}
.pill{display:inline-block;background:var(--pill);color:#fff;border-radius:22px;font-size:15px;letter-spacing:-.01em;text-transform:uppercase;transition:transform .4s var(--ease),background .4s}
.pill:hover{transform:translateY(-2px);background:#6322b8}

/* header */
header{position:absolute;top:0;left:0;right:0;z-index:5;height:82px;display:flex;align-items:center;padding:0 28px 0 25px;animation:up 1s var(--ease) both}
.logo{font-weight:900;font-size:30px;letter-spacing:-.06em;margin-right:auto;display:flex}
.logo img{height:36px}
nav{display:flex;gap:40px;font-size:16px;margin-right:34px}
nav a{opacity:.92;transition:opacity .3s}nav a:hover{opacity:1}
.hbtn{background:#fff;color:#2a0a4f;border-radius:20px;height:34px;width:152px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}

/* hero */
.hero{position:relative;height:1092px;overflow:hidden;background:#8a2be2}
.hero>img{width:100%;height:100%;object-fit:cover;animation:settle 2.4s var(--ease) both}
.hero .txt{position:absolute;left:27px;top:172px;width:700px}
.hero .label{animation:up 1s .2s var(--ease) both}
.hero h1{font-size:96px;font-weight:500;line-height:1.03;letter-spacing:-.05em;text-transform:uppercase;margin:14px 0 20px;animation:up 1.1s .35s var(--ease) both}
.hero p{width:400px;font-size:17px;line-height:1.3;letter-spacing:-.02em;animation:up 1.1s .5s var(--ease) both}
.hero .pill{margin-top:36px;padding:0 40px;height:64px;line-height:64px;animation:up 1.1s .65s var(--ease) both}

/* usluge */
.services{padding:44px 18px 52px;position:relative}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.card{position:relative;height:340px;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#8a2be2 0,#4b1590 40%,#1a0638 100%);border:1px solid rgba(255,255,255,.1)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card span{position:absolute;left:18px;bottom:16px;font-size:28px;font-weight:300;letter-spacing:-.05em;z-index:2}
.card{transition:transform .6s var(--ease),box-shadow .6s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(140,40,220,.35)}.card:hover img{transform:scale(1.05)}
.services .pill{float:right;margin-top:34px;padding:0 24px;height:38px;line-height:38px;font-size:14px}
.services::after{content:"";display:block;clear:both}

/* proces */
.banner img{width:100%}
.process{background:#000;padding:64px 0 70px}
.process.pl{padding:42px 0 56px}
.process .label{margin:0 0 57px 30px}
.steps{position:relative;height:526px;clip-path:inset(-80px 0 0 0)}
.step{position:absolute;top:0;height:100%;width:330px}
.s1{left:78px}.s2{left:407px}.s3{left:728px}.s4{left:1090px}
.step img{position:absolute;left:0;opacity:0;transform:translateY(28px) scale(.94);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.s1 img,.s3 img{top:0}.s2 img,.s4 img{bottom:0}
.stxt{position:absolute;left:0;width:312px;opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s}
.s1 .stxt{top:330px}.s3 .stxt{top:380px}.s2 .stxt,.s4 .stxt{top:-6px}
.step.on img,.step.on .stxt{opacity:1;transform:none}
.stxt h3{font-size:18px;font-weight:700;margin-bottom:26px;text-transform:uppercase;letter-spacing:-.01em}
.stxt p{font-size:19px;line-height:1.3;letter-spacing:-.02em}

/* recenzije */
.testi{background:#120432;height:674px;position:relative;overflow:hidden}
.testi .label{position:absolute;right:28px;top:26px;z-index:3}
.slides{display:grid;height:100%}
.slide{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transform:translateX(30px);transition:opacity .8s var(--ease),transform .8s var(--ease),visibility .8s}
.slide.on{opacity:1;visibility:visible;transform:none}
.slide .photo{position:absolute;left:35px;top:54px;width:566px;height:566px;border-radius:26px}
.slide .photo img{width:100%;height:100%;border-radius:26px;object-fit:cover}
.slide .words{position:absolute;left:640px;top:4px;width:800px}
.arrow{position:absolute;z-index:4;width:66px;height:66px;border-radius:50%;background:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease)}
.arrow:hover{transform:scale(1.08)}
.testi .arrow{left:1355px;top:284px}

/* klijenti */
.clients{background:#000;height:86px;overflow:hidden}
.track{display:flex;width:max-content;animation:loop 60s linear infinite}
.track img{height:86px;width:auto}
@keyframes loop{to{transform:translateX(-50%)}}

/* blog */
.blog{padding:70px 32px 60px;position:relative}
.bhead{display:flex;align-items:center;justify-content:space-between;position:relative}
.bhead h2{position:absolute;left:50%;transform:translateX(-50%);font-size:22px;font-weight:500;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.bhead .pill{padding:0 24px;height:38px;line-height:38px;font-size:14px}
.btrack{display:flex;gap:52px;margin-top:30px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.btrack::-webkit-scrollbar{display:none}
.bcard{flex:0 0 663px}
.bimg{height:375px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#1a0638,#6a1fc4 60%,#b83cf0)}
.bimg img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.bcard:hover .bimg img{transform:scale(1.04)}
.bcard h3{margin-top:14px;font-size:25px;font-weight:700;line-height:1.1;letter-spacing:-.04em;text-transform:uppercase;width:640px}
.blog .arrow{right:30px;top:218px;width:62px;height:62px}

/* kontakt */
.contact{position:relative;height:665px;background:#000 url(images/kontakt-pozadina.png) no-repeat center bottom/100% 493px}
.form{position:absolute;left:88px;top:0;width:459px;height:290px;background:#fff;color:#111;padding:30px 50px;text-align:center}
.form h2{font-size:21px;font-weight:700;letter-spacing:-.04em;margin-bottom:18px}
.form input{display:block;width:100%;height:50px;border:0;background:#e4e4e4;margin-bottom:9px;padding:0 20px;font:500 14px Inter,Arial;color:#222}
.form button{width:100%;height:50px;border:0;background:#000;color:#fff;font:700 12px Inter,Arial;letter-spacing:.08em;margin-top:8px;cursor:pointer;transition:background .3s}
.form button:hover{background:#3a1070}

/* INDEX + podnožje */
.foot{background:linear-gradient(#e4e4e5 0,#e4e4e5 170px,#fff 560px);color:#7b6d8f}
.index{line-height:0;background:#e4e4e5}
.index img{width:100%;height:auto;display:block}
.fcols{display:grid;grid-template-columns:465px 233px 233px 234px 1fr;padding:80px 0 0 52px}
.bar{width:105px;height:8px;border-radius:2px;background:linear-gradient(90deg,#d77be8,#a85fc8 50%,#7a6fb0);margin-bottom:18px}
.fcols .tag{font-size:23px;font-weight:300;line-height:1.1;letter-spacing:-.04em;width:210px}
.fcols h4{font-size:23px;font-weight:300;letter-spacing:-.04em;margin-bottom:16px;color:#6a3fa0}
.fcols li{list-style:none;font-size:15px;font-weight:300;margin-bottom:12px}
.fcols li.u{text-decoration:underline;color:#6a3fa0}
.fbot{display:flex;justify-content:space-between;padding:70px 115px 56px 52px;font-size:17px;font-weight:300}
.fbot div{display:flex;gap:36px}.fbot u{text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important}
 .reveal,.step img,.stxt{opacity:1!important;transform:none!important}
 .track{animation:none}}

/* stranica usluge */
.label.p::before{background:#8f33e8}
.shero{position:relative;height:1173px;background:#000;overflow:hidden}
.shero>img{width:100%;height:100%;object-fit:cover;animation:settle 2.4s var(--ease) both}
.shero .t{position:absolute;left:20px;top:985px;animation:up 1.1s .3s var(--ease) both}
.shero h1{font-size:92px;font-weight:500;line-height:1;letter-spacing:-.08em;text-transform:uppercase}
.shero p{margin-top:16px;font-size:16.5px;letter-spacing:-.03em;white-space:nowrap}
.shero .pill{position:absolute;right:29px;top:1029px;width:270px;height:61px;line-height:61px;text-align:center;animation:up 1.1s .55s var(--ease) both}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:5px 17px 0;background:#000}
.scards .card{height:337px;background:linear-gradient(180deg,#a23ce0 0,#5a1ba8 45%,#1c0540 100%)}
.scards .card img{inset:auto;left:50%;top:43%;width:auto;height:auto;max-width:72%;max-height:60%;transform:translate(-50%,-50%);object-fit:contain}
.scards .card:hover img{transform:translate(-50%,-50%) scale(1.06)}
.pcar{background:#120432;height:646px;position:relative;overflow:hidden;padding-top:36px}
.ptrack{display:flex;gap:40px;transition:transform .9s var(--ease);will-change:transform}
.ps{flex:0 0 590px;height:590px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#1a0638,#6a1fc4)}
.ps img{width:100%;height:100%;object-fit:cover}
.pcar .arrow{top:322px}.pcar .prev{left:14px}.pcar .next{right:8px}
.contact.sp{height:620px;background:#000 url(images/kontakt-pozadina-2.png) no-repeat center/cover}
.contact.sp .form{top:99px;left:95px}

/* strana Dizajn logotipa */
.hero.lg{height:664px}
.hero.lg .pill{margin-top:47px}
.label a{color:inherit}
.txtsec{background:#000;padding:64px 38px 76px}
.txtsec.b{padding:26px 38px 31px}
.txtsec h2{font-size:22px;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:24px}
.txtsec p{font-size:22px;line-height:1.14;letter-spacing:-.035em;margin-bottom:25px;max-width:1364px}
.txtsec p:last-child{margin-bottom:0}

/* kartice na stranama usluga */
.scards .card.full img{inset:0;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;transform:none;object-fit:cover}
.scards .card.full:hover img{transform:scale(1.05)}
.scards .card.gen{background:linear-gradient(180deg,rgba(18,3,40,0) 50%,rgba(18,3,40,.9) 100%),url(images/gradient.jpg) center/cover}

.hero.lg.l3 .txt{top:128px}
.hero.lg.l3 h1{font-size:88px}