/* Naslovnica */
.site-main img{display:block;width:100%;height:100%;object-fit:cover}
.site-main picture{display:block;width:100%;height:100%}
.site-main p{margin:0}

.hero{position:relative;height:560px;overflow:hidden;color:#fff;background:#0b0d10}
.hero__slides,.hero__shade{position:absolute;inset:0}
.hero__shade{z-index:3;background:linear-gradient(transparent 38%,#000d 88%)}
.hero__slide{position:absolute;inset:0;opacity:0;animation:hero-fade 25s linear infinite}
.hero__slide img{animation:hero-kb 25s linear infinite}
.hero__slide:nth-of-type(2),.hero__slide:nth-of-type(2) img{animation-delay:5s}
.hero__slide:nth-of-type(3),.hero__slide:nth-of-type(3) img{animation-delay:10s}
.hero__slide:nth-of-type(4),.hero__slide:nth-of-type(4) img{animation-delay:15s}
.hero__slide:nth-of-type(5),.hero__slide:nth-of-type(5) img{animation-delay:20s}
.hero__slide:only-child,.hero__slide:only-child img{animation:none;opacity:1}
.hero__slide:first-child:not(:only-child){opacity:1;animation-name:hero-fade-first}
.hero__slide:first-child:not(:only-child) img{animation-delay:0s}
/* Zaglavlje preko fotografije na naslovnici */
.home .site-header{position:absolute;left:0;right:0;top:0;background:linear-gradient(rgba(0,0,0,.88),rgba(0,0,0,.5) 60%,transparent)}
.home .site-header::after{display:none}
.home .site-header:has(.site-nav.is-open){background:var(--ink)}
.hero__caption{position:absolute;z-index:4;right:32px;bottom:30px;font-size:13px;font-weight:600;background:#000a;padding:6px 11px;border-radius:3px}
.hero__text{position:absolute;z-index:4;left:32px;bottom:30px;max-width:780px;display:flex;flex-direction:column;gap:11px}
.hero__text h1{margin:0;font-size:38px;line-height:1.1;font-weight:800;color:#fff;text-shadow:0 2px 14px #000a}
.hero__text p{font-size:15px;color:#e6e8ea;max-width:660px}
.hero__actions{display:flex;flex-wrap:wrap;gap:8px}
@keyframes hero-fade{0%{opacity:0}4%,20%{opacity:1}24%,100%{opacity:0}}
@keyframes hero-fade-first{0%,20%{opacity:1}24%,100%{opacity:0}}
@keyframes hero-kb{0%{transform:scale(1.01)}24%,100%{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){.hero__slide,.hero__slide img{animation:none}.hero__slide:first-child{opacity:1}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#16181c;color:#bfc3c9;font-size:12px}
.stats div{padding:14px 32px;border-right:1px solid #33373d}
.stats b,.stats span{display:block}
.stats b{font-size:19px;color:#fff}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{position:relative;display:block;height:165px;border-radius:4px;overflow:hidden;color:#fff;text-decoration:none;background:#16181c}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#000d)}
.tile__text{position:absolute;z-index:1;left:14px;right:14px;bottom:10px;font-size:12px}
.tile__text b{display:block;font-size:14px}
.tile:hover img{transform:scale(1.04)}
.tile img{transition:transform .3s}

.prod{background:#101214;color:#fff;display:grid;grid-template-columns:1fr 1.5fr}
.prod__text{padding:40px 32px}
.prod .lbl{color:#ff6b73}
.prod h2{font-size:26px;font-weight:800;margin:6px 0 12px}
.prod p{font-size:14px;color:#c9ccd1;margin-bottom:12px}
.prod ul{margin:0 0 4px;padding-left:18px;font-size:14px;color:#e6e8ea}
.prod li{margin-bottom:6px}
.prod__gallery{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:190px;gap:2px}
.prod__gallery figure{position:relative;overflow:hidden;margin:0}
.prod__gallery figcaption{position:absolute;left:10px;bottom:8px;font-size:12px;font-weight:600;background:#000a;padding:3px 8px;border-radius:3px}

.projects{background:#f3f4f6}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:#fff;border-radius:4px;overflow:hidden;font-size:13px}
.card__img{height:180px}
.card__body{padding:12px 14px 14px}
.card__body b{display:block;font-size:15px;margin-bottom:3px}
.status{display:inline-block;background:#e30613;color:#fff;font-size:10px;padding:2px 6px;border-radius:2px;margin-bottom:5px;font-weight:700}
.status--done{background:#16181c}
.more{font-size:13px;color:#4c525a;margin-top:14px}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 28px}
.why div{font-size:13px;color:#4c525a}
.why b{display:block;font-size:15px;margin-bottom:3px;color:#16181c}

.band{background:#101214;color:#fff;display:grid;grid-template-columns:1fr 1fr}
.band>div{padding:32px}
.band>div+div{border-left:1px solid #33373d}
.band h2{font-size:22px;font-weight:800;margin:6px 0 10px}
.band p{font-size:14px;color:#c9ccd1;margin-bottom:14px}
.band .lbl{color:#ff6b73}

@media (max-width:860px){
.hero__text{padding-top:0}
.hero{height:520px}
.hero__text{left:16px;right:16px;bottom:20px}
.hero__text h1{margin:0;font-size:28px}
.hero__caption{display:none}
.stats{grid-template-columns:1fr 1fr}
.stats div{padding:14px 16px;border-bottom:1px solid #33373d}
.tiles,.cards,.why{grid-template-columns:1fr 1fr}
.prod{grid-template-columns:1fr}
.prod__text{padding:32px 16px}
.band{grid-template-columns:1fr}
.band>div{padding:28px 16px}
.band>div+div{border-left:0;border-top:1px solid #33373d}
}
@media (max-width:560px){
.tiles,.cards,.why{grid-template-columns:1fr}
}