@layer djb.reset,djb.base,djb.theme,djb.elements,djb.classes,djb.global,djb.nodes,djb.custom;@layer djb.base{.djb-button:where(:not(.djb-button--plain)){display:inline-flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;text-decoration:none;border:0;font:inherit;line-height:1.2}.djb-button--sm{padding:.5em 1em;font-size:.875em}.djb-button--md{padding:.75em 1.5em}.djb-button--lg{padding:1em 2em;font-size:1.125em}
.djb-button__icon{flex-shrink:0;width:1em;height:1em}.djb-image{display:block;max-width:100%;height:auto}figure.djb-image{margin:0}figure.djb-image img{display:block;width:100%;height:auto}
figure.djb-image img,a.djb-image img{border-radius:inherit;aspect-ratio:inherit;object-fit:inherit;object-position:inherit}.djb-svg{max-width:100%}
.djb-svg:where(svg):not([height]),.djb-svg__svg:not([height]){height:auto}
.djb-svg--link{display:inline-block;line-height:0;color:inherit}
.djb-svg--link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.djb-svg--empty{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:8px;background:repeating-linear-gradient(45deg,#f3f1f7,#f3f1f7 10px,#eeebf4 10px,#eeebf4 20px);color:#9a93ad}}@layer djb.global{/* ==========================================================================
   PAGE: projekat-alteo  →  Bricks Page settings → Custom CSS
   ========================================================================== */
/* TEMPLATE: projekat  →  Bricks template (single) → Custom CSS, shared by every page of this type */
/* @template:start projekat */
/* --- Project pages (shared by /radovi/<slug>/) — measured against MK /projecten/<slug>/ at 390, 1440 and 1920 --- */

/* page glow: soft drifting blobs behind everything; mint tint while intro, concepts and responsive are centred (MK .pj-glow) */
.case-glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background-color: rgba(3,226,156,0); transition: background-color 1.2s cubic-bezier(.4,0,.2,1); }
.case-glow--tint { background-color: rgba(3,226,156,.09); }
.case-glow::before, .case-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.case-glow::before { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle, rgba(190,206,222,.55), transparent 62%); animation: caseGlowA 26s ease-in-out infinite alternate; }
.case-glow::after { width: 52vmax; height: 52vmax; right: -16vmax; top: 30vh; background: radial-gradient(circle, rgba(3,226,156,.16), transparent 62%); animation: caseGlowB 32s ease-in-out infinite alternate; }
@keyframes caseGlowA { to { transform: translate(14vw, 18vh) scale(1.15); } }
@keyframes caseGlowB { to { transform: translate(-18vw, -10vh) scale(.9); } }

/* back button: takes over when the header slides away */
.case-back { position: fixed; z-index: 45; top: 14px; left: 20px; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-dark); color: var(--color-white); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-140%); pointer-events: none; transition: opacity .5s var(--ease-io), transform .6s var(--ease-io), background var(--transition-base); }
@media (min-width: 1024px) { .case-back { left: 5.55vw; } }
.case-back--on { opacity: 1; transform: none; pointer-events: auto; }
.case-back:hover { background: var(--color-primary); color: var(--color-dark); }
.case-back__icon { font-size: 1.35rem; transform: rotate(180deg); }

/* hero: one media card (viewport-tall), copy over the bottom, three tabs that open upwards */
.case-hero { position: relative; padding-top: calc(var(--header-bar-height) + 2px); }
.case-hero__card { position: relative; height: min(calc(100svh - var(--header-bar-height) - clamp(12px, 1.6vw, 24px)), 84svh); min-height: 420px; max-height: 980px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-gray); }
.case-hero__media { position: absolute; inset: 0 0 40px; overflow: hidden; }
.case-hero__image { position: absolute; inset: -6% 0 0; width: 100%; height: 106%; object-fit: cover; transform: translateY(var(--case-py, 0px)) scale(1.04); }
.case-hero__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none; background: linear-gradient(180deg, rgba(10,33,41,0), rgba(10,33,41,.55) 55%, rgba(10,33,41,.88)); }
.case-hero__copy { position: absolute; left: 0; right: 0; bottom: clamp(60px, 5vw, 76px); z-index: 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 80px); align-items: end; padding: clamp(24px, 3.4vw, 60px); color: var(--color-white); }
.case-hero__title { font-size: clamp(2.875rem, 5.63vw, 7.5rem); line-height: 1.15; letter-spacing: -.02em; }
.case-hero__lede { justify-self: end; max-width: 40ch; font-size: clamp(18px, 16.875px + .1953vw, 20px); line-height: 1.5; color: rgba(255,255,255,.88); }

.case-tabs { position: absolute; left: -1px; right: -1px; bottom: -1px; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.case-tab { position: relative; border-left: 1px solid rgba(255,255,255,.1); transition: box-shadow .5s; }
.case-tab:first-child { border-left: 0; }
.case-tab--light { background: var(--color-white); color: var(--color-dark); border-left-color: rgba(10,33,41,.1); }
.case-tab--green { background: var(--color-primary); color: var(--color-dark); border-left-color: rgba(10,33,41,.12); }
.case-tab--dark { background: var(--color-dark); color: var(--color-white); }
.case-tab__x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out); }
.case-tab__xi { min-height: 0; overflow: hidden; padding: 0 clamp(16px, 1.6vw, 26px); opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .7s var(--ease-out); }
.case-tab__kicker { display: block; padding-top: clamp(18px, 2vw, 30px); font-size: 14px; opacity: .7; }
.case-tab__heading { margin: .15em 0 .35em; font-size: clamp(28px, 3vw, 54px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.case-tab__text { max-width: 46ch; margin-bottom: 14px; font-size: 15px; line-height: 1.5; opacity: .8; }
.case-tab__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.case-tab__tag { padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(10,33,41,.1); font-size: 16px; line-height: 1.5; }
.case-tab--dark .case-tab__tag { background: rgba(255,255,255,.12); }
.case-tab__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: clamp(16px, 1.5vw, 24px) clamp(18px, 1.8vw, 30px); border: 0; background: none; color: inherit; font: inherit; font-size: clamp(17px, 1.4vw, 24px); font-weight: 500; line-height: 1.5; letter-spacing: -.02em; text-align: left; cursor: pointer; }
.case-tab__arrow { flex: 0 0 auto; width: 20px; height: 20px; transition: transform .6s var(--ease-out); }
.case-tab--open .case-tab__x, .case-tab:has(:focus-visible) .case-tab__x { grid-template-rows: 1fr; }
.case-tab--open .case-tab__xi, .case-tab:has(:focus-visible) .case-tab__xi { opacity: 1; transform: none; transition-delay: .08s; }
.case-tab--open .case-tab__arrow, .case-tab:has(:focus-visible) .case-tab__arrow { transform: rotate(180deg); }
.case-tab--light.case-tab--open, .case-tab--light:has(:focus-visible) { box-shadow: inset 0 0 0 100vmax rgba(10,33,41,.04); }
.case-tab--green.case-tab--open, .case-tab--green:has(:focus-visible) { box-shadow: inset 0 0 0 100vmax rgba(255,255,255,.1); }
.case-tab--dark.case-tab--open, .case-tab--dark:has(:focus-visible) { box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.12); }
@media (hover: hover) and (pointer: fine) {
  .case-tab:hover .case-tab__x { grid-template-rows: 1fr; }
  .case-tab:hover .case-tab__xi { opacity: 1; transform: none; transition-delay: .08s; }
  .case-tab:hover .case-tab__arrow { transform: rotate(180deg); }
  .case-tab--light:hover { box-shadow: inset 0 0 0 100vmax rgba(10,33,41,.04); }
  .case-tab--green:hover { box-shadow: inset 0 0 0 100vmax rgba(255,255,255,.1); }
  .case-tab--dark:hover { box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.12); }
}
@media (max-width: 700px) {
  .case-hero__card { height: auto; min-height: 0; max-height: none; overflow: visible; background: none; border-radius: 0; }
  .case-hero__media { position: relative; inset: auto; height: max(50svh, 280px); border-radius: var(--radius-md); background: var(--color-gray); }
  .case-hero__shade { height: 45%; }
  .case-hero__copy { position: static; display: block; padding: 0; color: inherit; }
  .case-hero__head { position: absolute; z-index: 2; left: 0; right: 0; top: max(50svh, 280px); transform: translateY(-100%); padding: 0 18px 20px; color: var(--color-white); }
  .case-hero__title { font-size: clamp(36px, 10.5vw, 52px); }
  .case-hero__lede { max-width: none; padding: 22px 6px 0; font-size: 20px; color: var(--color-dark); }
  .case-tabs { display: none; }
}

/* facts row */
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(18px, 3vw, 56px); margin-top: clamp(28px, 3vw, 48px); padding: clamp(4px, 1vw, 12px) 0 clamp(20px, 4vw, 60px); border-top: 1px solid rgba(10,33,41,.12); }
.case-facts__item { min-width: 0; }
.case-facts__label { margin-bottom: 10px; font-size: 13px; letter-spacing: .02em; color: var(--color-text-muted); }
.case-facts__value { font-size: clamp(16px, 1.15vw, 19px); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.case-facts__value--list { display: grid; }
@media (max-width: 700px) {
  .case-facts { grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 40px; padding-bottom: 20px; }
  .case-facts__item:last-child { grid-column: 1 / -1; }
  .case-facts__value { font-size: 16px; }
}

/* review + delivered */
.case-proof { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 36px); align-items: stretch; margin-top: clamp(28px, 3.4vw, 52px); }
@media (max-width: 760px) { .case-proof { grid-template-columns: 1fr; } }
.case-review { position: relative; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); padding: clamp(24px, 2.8vw, 42px); border-radius: var(--radius-md); overflow: hidden; background: var(--color-dark); color: var(--color-white); }
.case-review::before { content: ""; position: absolute; right: -8%; top: -40%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(3,226,156,.28), transparent); pointer-events: none; }
.case-review > * { position: relative; }
.case-review__stars { display: flex; gap: 6px; }
.case-review__star { width: 14px; height: 14px; fill: var(--color-primary); }
.case-review__quote { font-size: clamp(20px, 1.9vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
.case-review__author { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 15px; color: rgba(255,255,255,.75); }
.case-review__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: var(--color-dark); font-weight: 600; }
.case-review__note { font-size: .78rem; opacity: .7; }
.case-delivered { padding: clamp(22px, 2.6vw, 38px); border-radius: var(--radius-md); border: 1px solid rgba(10,33,41,.08); background: color-mix(in srgb, var(--color-primary-soft) 60%, var(--color-white)); }
.case-delivered__label { display: block; margin-bottom: 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.case-delivered__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.case-delivered__pill { display: inline-block; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(10,33,41,.18); background: rgba(255,255,255,.64); font-size: 16px; line-height: 1.5; }

/* shared kicker + lead sizes (MK .kicker / .lead) */
.case-intro__label, .case-impact__kicker { display: block; font-size: clamp(16px, 11.5px + .78125vw, 24px); line-height: 1.4; color: rgba(10,33,41,.55); }
.case-intro__text, .case-impact__text { font-size: clamp(18px, 16.875px + .1953vw, 20px); line-height: 1.5; }

/* intro */
.case-intro__grid { display: grid; gap: 30px; }
@media (min-width: 1024px) { .case-intro__grid { grid-template-columns: 44fr 56fr; gap: 0; } }
.case-intro__text { max-width: 46rem; margin-top: clamp(20px, 2.4vw, 34px); }

/* first concepts: two marquee rows running in opposite directions (MK .pj-row) */
.case-concepts { overflow: hidden; }
.case-concepts__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(26px, 4vh, 50px); }
.case-concepts__note { max-width: 30ch; font-size: 16px; text-align: right; color: var(--color-text-muted); }
@media (max-width: 900px) { .case-concepts__head { flex-direction: column; align-items: flex-start; } .case-concepts__note { text-align: left; } }
.case-concepts__row { overflow: hidden; margin-top: clamp(10px, 1.2vw, 18px); }
.case-concepts__track { display: flex; gap: clamp(10px, 1.2vw, 18px); width: max-content; animation: caseMarquee 60s linear infinite; }
.case-concepts__row--rev .case-concepts__track { animation-direction: reverse; }
.case-concepts__row:hover .case-concepts__track { animation-play-state: paused; }
.case-concepts__card { flex: 0 0 auto; width: clamp(320px, 40vw, 680px); aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--color-gray-2); box-shadow: 0 14px 40px -24px rgba(10,33,41,.4); }
.case-concepts__image { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.case-concepts__card:hover .case-concepts__image { transform: scale(1.05); }
@keyframes caseMarquee { to { transform: translateX(-50%); } }

/* crops: one project image, several framings (swap for real screenshots) */
.case-crop--a { scale: 1.35; transform-origin: 18% 22%; }
.case-crop--b { scale: 1.45; transform-origin: 82% 20%; }
.case-crop--c { scale: 1.4; transform-origin: 50% 85%; }
.case-crop--d { scale: 1.5; transform-origin: 15% 80%; }

/* impact */
.case-impact__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
@media (max-width: 900px) { .case-impact__head { grid-template-columns: 1fr; } }
.case-impact__kicker { margin-bottom: 1rem; }
.case-impact__grid { display: grid; gap: clamp(12px, 1.4vw, 24px); margin-top: clamp(40px, 5vw, 80px); }
@media (min-width: 800px) { .case-impact__grid { grid-template-columns: 1fr 1fr; } }

/* gallery image: clip reveal, then a slow parallax inside the frame (MK .img-reveal.px-on) */
.case-shot { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--color-gray); clip-path: inset(12% 6% 0 6% round 10px); transition: clip-path 1.3s var(--ease-out); }
@media (min-width: 800px) { .case-shot--full { grid-column: 1 / -1; } }
.case-shot--in { clip-path: inset(0 0 0 0 round 10px); }
.case-shot__image { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--case-shot-py, 0%), 0) scale(1.18); transition: transform .9s cubic-bezier(.22,1,.36,1); }
@media (max-width: 900px), (hover: none) {
  .case-shot { clip-path: none; opacity: 0; scale: .8; transition: opacity 1.2s cubic-bezier(.22,1,.36,1), scale 1.3s cubic-bezier(.22,1,.36,1); }
  .case-shot--in { opacity: 1; scale: 1; }
}

/* responsive */
.case-resp__title { margin-bottom: clamp(26px, 4vh, 50px); }
.case-resp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); }
@media (max-width: 700px) { .case-resp__grid { grid-template-columns: 1fr; } }
.case-resp__shot { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: rgba(10,33,41,.05); }
.case-resp__image { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.case-resp__shot:hover .case-resp__image { transform: scale(1.04); }

/* breakout: a 3x3 grid of screen-sized images, seen from far away, zooms in until the middle one fills the screen (MK .cb-breakout) */
.case-breakout { position: relative; height: calc(100vh + max(140vh, 1080px)); margin-top: clamp(24px, 3vw, 52px); background: var(--color-white); overflow-x: clip; }
.case-breakout__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.case-breakout__grid { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: repeat(3, 100vw); gap: 8vw; transform: translate3d(-50%, -50%, 0) scale(var(--bo-s, .31)); transform-origin: 50% 50%; will-change: transform; }
.case-breakout__cell { width: 100vw; height: 100vh; border-radius: 40px; overflow: hidden; background: var(--color-gray-2); }
.case-breakout__image { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .case-breakout { height: calc(100svh + max(168svh, 1180px)); }
  .case-breakout__pin { height: 100svh; }
  .case-breakout__grid { gap: 6vw; transform: translate3d(-50%, -50%, 0) scale(var(--bo-s, .29)); }
  .case-breakout__cell { height: 100svh; }
}

/* results */
.case-results__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767px) { .case-results__grid { grid-template-columns: 1fr; } }
.case-stat { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-height: clamp(240px, 22vw, 320px); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 34px) clamp(24px, 2.2vw, 32px); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-dark); }
@media (max-width: 767px) { .case-stat { min-height: 200px; padding: 32px 26px 26px; } }
.case-stat__value { flex: 1 1 0%; font-size: clamp(72px, 9vw, 130px); font-weight: 700; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.case-stat__label { margin-top: 24px; font-size: clamp(16px, 1.25vw, 18px); font-weight: 500; line-height: 1.6; }
.case-results__actions { margin-top: clamp(28px, 3.4vw, 52px); }

/* next project: the card grows to full screen, % counts up, then the next page opens (MK .mk-pnext) */
.case-next { --case-pu: calc(80vw / 1440); position: relative; height: 220vh; margin-bottom: 20px; background: var(--color-dark); color: var(--color-white); }
.case-next__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.case-next__card { position: absolute; inset: calc((1 - var(--n, 0)) * 14vh) calc((1 - var(--n, 0)) * 4vw); border-radius: calc((1 - var(--n, 0)) * 24px); overflow: hidden; background: var(--color-dark-surface); color: var(--color-white); }
.case-next__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-next__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,33,41,0) 45%, rgba(10,33,41,.75) 100%); }
.case-next__info { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(30 * var(--case-pu)); padding: 0 calc(40 * var(--case-pu)) calc(34 * var(--case-pu)); }
.case-next__label { display: block; margin-bottom: calc(6 * var(--case-pu)); font-size: clamp(14px, calc(18 * var(--case-pu)), 20px); opacity: .75; }
.case-next__title { font-size: var(--fs-h2); line-height: 1.4; }
.case-next__pct { font-size: clamp(40px, calc(96 * var(--case-pu)), 130px); font-weight: 500; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case-next__bar { position: absolute; z-index: 4; left: calc(4vw - var(--n, 0) * 2vw); right: calc(4vw - var(--n, 0) * 2vw); bottom: calc(6vh - var(--n, 0) * 3vh); height: max(8px, calc(14 * var(--case-pu))); border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.case-next__fill { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: inherit; background: var(--color-primary); }
@media (max-width: 767px) {
  .case-next { --case-pu: calc(100vw / 440); }
  .case-next__info { flex-direction: column; align-items: flex-start; gap: 8px; bottom: 0; padding: 0 calc(18 * var(--case-pu)) calc(20 * var(--case-pu) + var(--n, 0) * (6vh + 14px)); }
  .case-next__pct { font-size: calc(30 * var(--case-pu)); }
}

@media (prefers-reduced-motion: reduce) {
  .case-glow::before, .case-glow::after, .case-concepts__track { animation: none; }
  .case-shot { clip-path: none; opacity: 1; scale: 1; transition: none; }
  .case-shot__image { transform: scale(1.18); transition: none; }
  .case-tab__x, .case-tab__xi { transition: none; }
  .case-breakout, .case-breakout__pin { height: 100vh; }
}
/* @template:end */
/* @page:start projekat-alteo */}