@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: proizvod-djia-cache  →  Bricks Page settings → Custom CSS
   ========================================================================== */
/* TEMPLATE: proizvod  →  Bricks template (single) → Custom CSS, shared by every page of this type */
/* @template:start proizvod */
/* ==========================================================================
   PRODUCT PAGE TEMPLATE (Djia Cache / Builder / Bricks / Filter) — prefix .prd-
   Product UI illustrations — prefix .pmk- (the same block is in proizvodi.css)
   ========================================================================== */
.prd-dot { color: var(--color-primary); }

/* --- Back button (appears while the header is hidden) --- */
.prd-back { position: fixed; z-index: 45; left: max(20px, 5.55vw); top: 12px; display: grid; place-items: center; width: clamp(48px, 4.4vw, 63px); height: clamp(48px, 4.4vw, 63px); border-radius: 50%; background: var(--color-dark); color: var(--color-white); box-shadow: 0 14px 30px -14px rgba(10,33,41,.6); opacity: 0; transform: translateY(-150%); transition: transform .6s var(--ease-io), opacity .4s ease, background var(--transition-base); }
.prd-back--on { opacity: 1; transform: none; }
.prd-back:hover { background: var(--color-primary); color: var(--color-dark); }
.prd-back__icon { width: 1.15rem; height: 1.15rem; transform: rotate(180deg); }

/* --- 1. Hero: crumb, very large name, intro row with chips and actions --- */
.prd-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-bar-height) + clamp(40px, 6.5vw, 120px)) 0 clamp(36px, 4vw, 70px); background: var(--color-background-hero); }
.prd-hero::before { content: ""; position: absolute; z-index: -1; right: -18vw; top: -34vw; width: 72vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(3,226,156,.42) 0, rgba(3,226,156,.1) 38%, transparent 66%); transform: translate3d(calc(var(--mx, 0) * 24px), calc(var(--my, 0) * 24px), 0); pointer-events: none; }
.prd-crumb { display: flex; align-items: center; gap: 10px; color: var(--color-text-muted); font-size: clamp(14px, 12.5px + .26vw, 18px); }
.prd-crumb__link { color: inherit; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.prd-crumb__link:hover { color: var(--color-dark); border-color: currentColor; }
.prd-crumb__sep { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prd-crumb__here { color: var(--color-dark); }
.prd-hero__title { margin: .12em 0 .26em; font-size: clamp(60px, 12vw, 210px); font-weight: 600; line-height: .92; letter-spacing: -.035em; }
.prd-hero__word { display: inline-block; }
.prd-hero__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px clamp(30px, 5vw, 90px); align-items: end; }
.prd-hero__lead { max-width: 40ch; margin: 0; font-size: clamp(18px, 14.4px + .625vw, 26px); line-height: 1.45; letter-spacing: -.02em; }
.prd-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(18px, 2vw, 30px) 0 0; }
.prd-chip { display: inline-flex; align-items: center; gap: 8px; height: clamp(34px, 2.4vw, 42px); padding: 0 clamp(14px, 1.1vw, 20px); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: rgba(255,255,255,.7); font-size: clamp(14px, 12.9px + .2vw, 17px); font-weight: 500; line-height: 1; }
.prd-chip__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px rgba(3,226,156,.18); }
.prd-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- 2. Stage: the product UI on a dark panel that grows while it scrolls in --- */
.prd-stage { padding: 0 0 clamp(60px, 7.6vw, 170px); background: linear-gradient(180deg, var(--color-background-hero) 0, var(--color-background-hero) 40%, var(--color-white) 40%); }
.prd-stage__frame { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(360px, 36vw, 720px); padding: clamp(64px, 6vw, 120px) clamp(20px, 4vw, 80px) clamp(28px, 4vw, 80px); container-type: inline-size; border-radius: var(--radius-xl); background: radial-gradient(ellipse 60% 70% at 78% 108%, rgba(3,226,156,.42), transparent 70%), radial-gradient(ellipse 40% 50% at 8% -10%, rgba(102,255,208,.16), transparent 70%), var(--color-dark); color: var(--color-white); transform: scale(var(--prd-s, 1)); transform-origin: 50% 0; will-change: transform; }
.prd-stage__frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: clamp(36px, 3.4vw, 64px) clamp(36px, 3.4vw, 64px); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 75%); }
.prd-stage__mock { width: min(100%, 64em); font-size: clamp(10px, min(1.3cqi, 2vh), 18px); }
.prd-stage__tag { position: absolute; right: clamp(18px, 2vw, 36px); top: clamp(18px, 2vw, 36px); display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-pill); color: rgba(255,255,255,.82); font-size: 13px; line-height: 1; }

/* --- 3. Facts: big numbers in a row --- */
.prd-facts { padding-top: 0; }
.prd-facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.prd-fact { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: clamp(170px, 14vw, 260px); padding: clamp(20px, 2vw, 34px) clamp(16px, 1.6vw, 30px) 0 0; }
.prd-fact + .prd-fact { padding-left: clamp(16px, 1.6vw, 30px); border-left: 1px solid var(--color-border); }
.prd-fact__value { display: block; font-size: clamp(48px, 2.4rem + 3.4vw, 120px); font-weight: 500; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.prd-fact__unit { color: var(--color-primary-line); font-size: .5em; letter-spacing: -.02em; }
.prd-fact__label { max-width: 26ch; color: var(--color-text-muted); font-size: clamp(15px, 13.9px + .2vw, 18px); line-height: 1.45; }
.prd-facts__note { margin: clamp(18px, 2vw, 28px) 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }

/* --- 4. Say blocks: sticky label, big line, text (optionally a list) --- */
.prd-say__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 110px); align-items: start; }
.prd-say__label { position: sticky; top: clamp(100px, 14vh, 140px); margin: 0; font-size: clamp(18px, 11.5px + .78125vw, 24px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.prd-say__big { max-width: 21ch; margin: 0 0 .6em; font-size: var(--fs-h2); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; }
.prd-say__text { max-width: 56ch; margin: 0; color: var(--color-text-secondary); font-size: clamp(17px, 14.2px + .52vw, 23px); line-height: 1.6; letter-spacing: -.02em; }
.prd-say__text + .prd-say__text { margin-top: 1em; }
.prd-say__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); max-width: 60rem; margin: clamp(24px, 2.6vw, 44px) 0 0; }
.prd-say__item { display: flex; gap: 14px; align-items: baseline; padding: clamp(14px, 1.1vw, 20px) 0; border-top: 1px solid var(--color-border); font-size: clamp(16px, 14.2px + .36vw, 21px); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; }
.prd-say__tick { flex: none; width: 6px; height: 15px; border-radius: 1px; background: var(--color-primary); transform: skewX(-22deg) translateY(1px); }
.prd-say--alt { padding-top: 0; }
.prd-say--muted .prd-say__tick { background: var(--color-text-faint); }

/* --- 5. Features: numbered cards, a glow follows the pointer --- */
.prd-feat__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 24px clamp(30px, 5vw, 100px); align-items: end; margin-bottom: clamp(32px, 4vw, 70px); }
.prd-feat__title { max-width: 16ch; margin: 14px 0 0; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.03em; }
.prd-feat__lead { max-width: 44ch; margin: 0; color: var(--color-text-secondary); font-size: var(--fs-big); line-height: 1.5; }
.prd-feat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); }
.prd-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: clamp(28px, 3vw, 60px); min-height: clamp(280px, 21vw, 400px); padding: clamp(22px, 2.2vw, 40px); border-radius: var(--radius-lg); background: var(--color-gray); transition: transform .6s var(--ease-out), background-color .5s; }
.prd-card::before { content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 0%); width: 34vw; max-width: 600px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(3,226,156,.34) 0, transparent 62%); transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: opacity .5s, transform .8s var(--ease-out); pointer-events: none; }
.prd-card:hover { transform: translateY(-6px); background-color: var(--color-white); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-md); }
.prd-card:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.prd-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.prd-card__num { color: var(--color-text-muted); font-size: 14px; letter-spacing: .06em; transition: color .4s; }
.prd-card:hover .prd-card__num { color: var(--color-primary-ink); }
.prd-card__icon { display: grid; place-items: center; width: clamp(44px, 3.4vw, 60px); height: clamp(44px, 3.4vw, 60px); border-radius: 50%; background: var(--color-dark); color: var(--color-primary); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.prd-card:hover .prd-card__icon { transform: rotate(-12deg) scale(1.06); }
.prd-card__svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.prd-card__body { margin-top: auto; }
.prd-card__title { margin: 0 0 .5em; font-size: clamp(22px, 1rem + 1.15vw, 38px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.prd-card__text { margin: 0; color: var(--color-text-secondary); font-size: clamp(16px, 14.9px + .2vw, 19px); line-height: 1.5; }
.prd-card--dark { background: var(--color-dark); color: var(--color-white); }
.prd-card--dark .prd-card__text, .prd-card--dark .prd-card__num { color: var(--color-text-on-dark-muted); }
.prd-card--dark .prd-card__icon { background: var(--color-primary); color: var(--color-dark); }
.prd-card--dark:hover { background-color: var(--color-dark-surface); box-shadow: none; }

/* --- 6. Specs: definition rows --- */
.prd-spec__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 30px clamp(30px, 5vw, 110px); align-items: start; }
.prd-spec__title { margin: 14px 0 .5em; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.03em; }
.prd-spec__text { max-width: 36ch; margin: 0 0 28px; color: var(--color-text-secondary); font-size: var(--fs-big); line-height: 1.5; }
.prd-spec__list { margin: 0; border-top: 1px solid var(--color-border); }
.prd-spec__row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 20px; padding: clamp(16px, 1.4vw, 26px) 0; border-bottom: 1px solid var(--color-border); }
.prd-spec__dt { color: var(--color-text-muted); font-size: clamp(15px, 13.9px + .2vw, 18px); line-height: 1.4; }
.prd-spec__dd { margin: 0; font-size: clamp(17px, 14.8px + .4vw, 23px); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; }

/* --- 7. Pricing: optional yearly / lifetime switch, plan cards --- */
.prd-price { background: var(--color-gray); }
.prd-price__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 60px); }
.prd-price__title { max-width: 16ch; margin: 14px 0 0; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.03em; }
.prd-switch { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: var(--radius-pill); background: var(--color-white); box-shadow: 0 0 0 1px var(--color-border); }
.prd-switch__btn { position: relative; z-index: 1; height: clamp(40px, 2.83em, 54px); padding: 0 clamp(16px, 1.4vw, 26px); border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-text-muted); font: inherit; font-size: max(14px, 1.06vw); font-weight: 500; cursor: pointer; transition: color .4s; }
.prd-switch__btn[aria-pressed="true"] { color: var(--color-white); }
.prd-switch__pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: var(--radius-pill); background: var(--color-dark); transition: transform .6s var(--ease-io); }
.prd-switch--alt .prd-switch__pill { transform: translateX(100%); }
.prd-price__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(10px, 1.2vw, 20px); }
.prd-price__grid[hidden] { display: none; }
.prd-plan { position: relative; display: flex; flex-direction: column; gap: 20px; min-height: clamp(340px, 26vw, 480px); padding: clamp(22px, 2.2vw, 40px); border-radius: var(--radius-lg); background: var(--color-white); transition: transform .6s var(--ease-out); }
.prd-plan:hover { transform: translateY(-6px); }
.prd-plan--hot { background: var(--color-dark); color: var(--color-white); }
.prd-plan__badge { position: absolute; right: clamp(18px, 1.8vw, 30px); top: clamp(18px, 1.8vw, 30px); padding: 7px 12px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-dark); font-size: 13px; font-weight: 600; line-height: 1; }
.prd-plan__name { margin: 0; font-size: clamp(22px, 1rem + 1vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.prd-plan__sites { color: var(--color-text-muted); font-size: clamp(15px, 13.9px + .2vw, 18px); }
.prd-plan--hot .prd-plan__sites, .prd-plan--hot .prd-plan__per { color: var(--color-text-on-dark-muted); }
.prd-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; }
.prd-plan__from { flex-basis: 100%; color: var(--color-text-muted); font-size: 15px; }
.prd-plan--hot .prd-plan__from { color: var(--color-text-on-dark-muted); }
.prd-plan__amount { font-size: clamp(46px, 2rem + 3vw, 96px); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.prd-plan__per { flex-basis: 100%; color: var(--color-text-muted); font-size: clamp(15px, 13.9px + .2vw, 18px); }
.prd-plan__list { display: grid; gap: 0; margin: 0; padding: 0; }
.prd-plan__li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: clamp(15px, 13.9px + .2vw, 18px); line-height: 1.4; }
.prd-plan--hot .prd-plan__li { border-color: var(--color-border-dark); }
.prd-plan__tick { flex: none; width: 5px; height: 13px; border-radius: 1px; background: var(--color-primary); transform: skewX(-22deg); }
.prd-price__note { max-width: 70ch; margin: clamp(20px, 2vw, 32px) 0 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.55; }
.prd-price__note a { color: var(--color-text); border-bottom: 1px solid currentColor; }

/* --- 8. Other products: cards, the green fill opens from the pointer --- */
.prd-more__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(24px, 3vw, 50px); }
.prd-more__title { margin: 0; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.03em; }
.prd-more__all { font-size: clamp(16px, 15px + .2vw, 19px); border-bottom: 1px solid currentColor; }
.prd-more__all:hover { color: var(--color-primary-ink); }
.prd-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); }
.prd-more__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: clamp(300px, 24vw, 440px); padding: clamp(22px, 2.2vw, 40px); border-radius: var(--radius-lg); background: var(--color-dark); color: var(--color-white); }
.prd-more__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(140deg, var(--color-primary-hover), var(--color-primary-dark)); clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path .8s cubic-bezier(.76, 0, .24, 1); }
.prd-more__card:is(:hover, :focus-within) { color: var(--color-dark); }
.prd-more__card:is(:hover, :focus-within)::before { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
.prd-more__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.prd-more__link:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: -4px; }
.prd-more__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.prd-more__kicker { color: var(--color-text-on-dark-muted); font-size: 14px; transition: color .4s; }
.prd-more__card:is(:hover, :focus-within) .prd-more__kicker { color: rgba(10,33,41,.7); }
.prd-more__arrow { flex: none; display: grid; place-items: center; width: clamp(40px, 3vw, 54px); height: clamp(40px, 3vw, 54px); border-radius: 50%; background: var(--color-primary); color: var(--color-dark); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background .3s; }
.prd-more__card:is(:hover, :focus-within) .prd-more__arrow { background: var(--color-dark); color: var(--color-primary); transform: rotate(-45deg); }
.prd-more__icon { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prd-more__name { margin: 0 0 .3em; font-size: clamp(30px, 1.2rem + 2.2vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.prd-more__name .prd-dot { transition: color .4s; }
.prd-more__card:is(:hover, :focus-within) .prd-more__name .prd-dot { color: var(--color-dark); }
.prd-more__text { max-width: 34ch; margin: 0; color: var(--color-text-on-dark-muted); font-size: clamp(16px, 14.9px + .2vw, 19px); line-height: 1.45; transition: color .4s; }
.prd-more__card:is(:hover, :focus-within) .prd-more__text { color: rgba(10,33,41,.82); }

/* --- Tablet / phone --- */
@media (max-width: 1100px) {
  .prd-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prd-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prd-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prd-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .prd-fact:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 900px) {
  .prd-hero__intro, .prd-say__grid, .prd-feat__head, .prd-spec__grid { grid-template-columns: 1fr; }
  .prd-say__label { position: static; }
  .prd-stage { background: linear-gradient(180deg, var(--color-background-hero) 0, var(--color-background-hero) 25%, var(--color-white) 25%); }
}
@media (max-width: 700px) {
  .prd-feat__grid, .prd-more__grid, .prd-say__list { grid-template-columns: 1fr; }
  .prd-spec__row { grid-template-columns: 1fr; gap: 4px; }
  .prd-card { min-height: 0; }
  .prd-more__card { min-height: 280px; }
}
@media (max-width: 600px) {
  .prd-hero__title { font-size: 19vw; line-height: .95; }
  .prd-hero__word { display: block; }
  .prd-hero__lead { font-size: 20px; }
  .prd-stage__frame { min-height: 0; padding: 64px 14px 18px; }
  .prd-stage__tag { left: 14px; right: 14px; justify-content: center; text-align: center; line-height: 1.3; }
  .prd-fact { min-height: 150px; }
  .prd-fact__value { font-size: 48px; }
  .prd-switch__btn { font-size: 16.8px; }
}
@media (prefers-reduced-motion: reduce) {
  .prd-stage__frame { transform: none; }
  .prd-card, .prd-plan, .prd-card__icon, .prd-more__arrow { transition: none; }
}

/* @pmk:start — product UI illustrations (identical copy in proizvodi.css) */
.pmk { position: relative; color: var(--color-white); font-size: inherit; line-height: 1.3; text-align: left; }
.pmk-win { overflow: hidden; border: 1px solid var(--color-border-dark); border-radius: 1.1em; background: var(--color-dark-surface); box-shadow: 0 3em 6em -3em rgba(0,0,0,.65); }
.pmk-win__bar { display: flex; align-items: center; gap: .5em; padding: .9em 1.1em; border-bottom: 1px solid var(--color-border-dark); }
.pmk-win__dot { flex: none; width: .65em; height: .65em; border-radius: 50%; background: var(--color-text-on-dark-faint); }
.pmk-win__dot:first-child { background: var(--color-primary); }
.pmk-win__url { flex: 1; min-width: 0; margin-left: .7em; padding: .45em 1em; overflow: hidden; border-radius: 99em; background: rgba(255,255,255,.06); color: var(--color-text-on-dark-muted); font-size: .92em; white-space: nowrap; text-overflow: ellipsis; }
.pmk-win__body { padding: 1.6em; }
.pmk-label { color: var(--color-text-on-dark-muted); font-size: .9em; letter-spacing: .02em; }
.pmk-badge { display: inline-flex; align-items: center; gap: .45em; padding: .4em .8em; border-radius: 99em; background: rgba(3,226,156,.14); color: var(--color-primary); font-size: .85em; font-weight: 600; letter-spacing: .04em; }
.pmk-badge__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; animation: pmkBlink 1.6s ease-in-out infinite; animation-play-state: paused; }
.is-live .pmk-badge__dot { animation-play-state: running; }
@keyframes pmkBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pmk-d1 { --d: .25s; } .pmk-d2 { --d: .55s; } .pmk-d3 { --d: .85s; } .pmk-d4 { --d: 1.15s; } .pmk-d5 { --d: 1.45s; }

/* Cache: two TTFB bars + three score rings */
.pmk-cache__head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 1.6em; }
.pmk-cache__rows { display: grid; gap: 1.3em; }
.pmk-cache__row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 4.6em; gap: 1em; align-items: center; }
.pmk-cache__name { font-size: 1.05em; font-weight: 500; }
.pmk-cache__track { position: relative; height: 1.5em; border-radius: 99em; background: rgba(255,255,255,.06); }
.pmk-cache__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: rgba(255,255,255,.26); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-out) .2s; }
.pmk-cache__bar--fast { width: 8.7%; min-width: 1.5em; background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-hover)); box-shadow: 0 0 1.4em rgba(3,226,156,.55); transition-delay: .9s; }
.is-live .pmk-cache__bar { transform: none; }
.pmk-cache__ms { font-size: 1.3em; font-weight: 500; text-align: right; letter-spacing: -.02em; white-space: nowrap; }
.pmk-cache__ms--fast { color: var(--color-primary); }
.pmk-cache__rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin-top: 2em; padding-top: 1.6em; border-top: 1px solid var(--color-border-dark); }
.pmk-ring { display: flex; align-items: center; gap: .9em; }
.pmk-ring__svg { flex: none; width: 4.2em; height: 4.2em; transform: rotate(-90deg); }
.pmk-ring__bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 4; }
.pmk-ring__fg { fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset 1.8s var(--ease-out) 1.1s; }
.is-live .pmk-ring__fg { stroke-dashoffset: 0; }
.pmk-ring__val { display: block; font-size: 1.5em; font-weight: 600; line-height: 1; }
.pmk-ring__name { display: block; margin-top: .3em; color: var(--color-text-on-dark-muted); font-size: .85em; }

/* Builder: structure tree, canvas with a moving selection, style tokens, release bar */
.pmk-build__grid { display: grid; grid-template-columns: 11em minmax(0, 1fr) 10em; min-height: 24em; }
.pmk-build__side { padding: 1.2em; border-right: 1px solid var(--color-border-dark); }
.pmk-build__side--r { border-right: 0; border-left: 1px solid var(--color-border-dark); }
.pmk-build__tree { display: grid; gap: .25em; margin-top: .9em; }
.pmk-build__node { display: flex; align-items: center; gap: .5em; padding: .45em .6em; border-radius: .5em; color: var(--color-text-on-dark-muted); font-size: .92em; white-space: nowrap; animation: pmkNode 6s infinite; animation-play-state: paused; }
.pmk-build__node::before { content: ""; flex: none; width: .55em; height: .55em; border: 1px solid currentColor; border-radius: .15em; }
.pmk-build__node--i1 { padding-left: 1.6em; }
.pmk-build__node--i2 { padding-left: 2.6em; }
.pmk-build__node--a { animation-delay: 0s; }
.pmk-build__node--b { animation-delay: 2s; }
.pmk-build__node--c { animation-delay: 4s; }
.pmk-build__node--still { animation: none; }
@keyframes pmkNode { 0%, 30% { background: rgba(3,226,156,.16); color: var(--color-white); } 34%, 100% { background: transparent; color: var(--color-text-on-dark-muted); } }
.pmk-build__canvas { position: relative; display: grid; align-content: start; gap: 1em; padding: 1.6em; background: rgba(255,255,255,.02); }
.pmk-build__block { position: relative; border-radius: .7em; background: rgba(255,255,255,.06); }
.pmk-build__block::after { content: ""; position: absolute; inset: -.35em; border: 1.5px solid var(--color-primary); border-radius: .9em; opacity: 0; animation: pmkSel 6s infinite; animation-play-state: paused; }
.pmk-build__block--a::after { animation-delay: 0s; }
.pmk-build__block--b::after { animation-delay: 2s; }
.pmk-build__block--c::after { animation-delay: 4s; }
@keyframes pmkSel { 0% { opacity: 0; transform: scale(1.04); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: none; } }
.is-live .pmk-build__node, .is-live .pmk-build__block::after { animation-play-state: running; }
.pmk-build__hero { display: grid; gap: .7em; padding: 1.6em; }
.pmk-build__line { display: block; height: .9em; border-radius: 99em; background: rgba(255,255,255,.22); }
.pmk-build__line--xl { width: 72%; height: 1.6em; background: rgba(255,255,255,.5); }
.pmk-build__line--m { width: 54%; }
.pmk-build__line--s { width: 36%; }
.pmk-build__btns { display: flex; gap: .6em; margin-top: .5em; }
.pmk-build__btn { width: 6.5em; height: 2.2em; border-radius: 99em; background: var(--color-primary); }
.pmk-build__btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.pmk-build__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; background: none; }
.pmk-build__card { height: 6.4em; border-radius: .7em; background: rgba(255,255,255,.06); }
.pmk-build__tokens { display: grid; gap: .8em; margin-top: .9em; }
.pmk-build__sw { display: flex; gap: .4em; }
.pmk-build__swatch { width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--color-primary); }
.pmk-build__swatch--2 { background: var(--color-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.pmk-build__swatch--3 { background: var(--color-gray); }
.pmk-build__swatch--4 { background: var(--color-primary-light); }
.pmk-build__tok { display: flex; justify-content: space-between; gap: .6em; padding-bottom: .55em; border-bottom: 1px solid var(--color-border-dark); color: var(--color-text-on-dark-muted); font-size: .88em; }
.pmk-build__tok b { color: var(--color-white); font-weight: 500; }
.pmk-build__foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .9em 1.2em; border-top: 1px solid var(--color-border-dark); }
.pmk-build__publish { padding: .55em 1.1em; border-radius: 99em; background: var(--color-primary); color: var(--color-dark); font-size: .92em; font-weight: 600; }

/* Bricks: 15 module tiles switch on one after another */
.pmk-bricks__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; margin-bottom: 1.4em; }
.pmk-bricks__count { font-size: 2.6em; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.pmk-bricks__count small { margin-left: .3em; color: var(--color-text-on-dark-muted); font-size: .36em; font-weight: 500; letter-spacing: 0; }
.pmk-bricks__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7em; }
.pmk-mod { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2em; min-height: 5.6em; padding: .85em; border: 1px solid var(--color-border-dark); border-radius: .8em; background: rgba(255,255,255,.03); transition: border-color .5s, background-color .5s; transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.pmk-mod__name { font-size: .92em; font-weight: 500; line-height: 1.2; }
.pmk-mod__sw { position: relative; width: 2.3em; height: 1.3em; border-radius: 99em; background: rgba(255,255,255,.16); transition: background-color .4s; transition-delay: inherit; }
.pmk-mod__sw::after { content: ""; position: absolute; left: .18em; top: .18em; width: .94em; height: .94em; border-radius: 50%; background: var(--color-white); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: inherit; }
.is-live .pmk-mod { border-color: rgba(3,226,156,.45); background-color: rgba(3,226,156,.08); }
.is-live .pmk-mod__sw { background-color: var(--color-primary); }
.is-live .pmk-mod__sw::after { transform: translateX(1em); }
.is-live .pmk-mod--off { border-color: var(--color-border-dark); background-color: rgba(255,255,255,.03); }
.is-live .pmk-mod--off .pmk-mod__sw { background-color: rgba(255,255,255,.16); }
.is-live .pmk-mod--off .pmk-mod__sw::after { transform: none; }
.pmk-bricks__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6em 1em; margin-top: 1.3em; color: var(--color-text-on-dark-muted); font-size: .9em; }

/* Filter: facets get checked, chips appear in the URL and above the results */
.pmk-filter__grid { display: grid; grid-template-columns: 13em minmax(0, 1fr); min-height: 24em; }
.pmk-filter__side { display: grid; align-content: start; gap: 1.3em; padding: 1.3em; border-right: 1px solid var(--color-border-dark); }
.pmk-filter__facet { display: grid; gap: .55em; }
.pmk-filter__opt { display: flex; align-items: center; gap: .6em; font-size: .95em; }
.pmk-filter__box { position: relative; flex: none; width: 1.15em; height: 1.15em; border: 1.5px solid rgba(255,255,255,.4); border-radius: .3em; transition: background-color .3s, border-color .3s; transition-delay: var(--d, 0s); }
.pmk-filter__box::after { content: ""; position: absolute; left: .32em; top: .1em; width: .3em; height: .58em; border: solid var(--color-dark); border-width: 0 .14em .14em 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0s); }
.is-live .pmk-filter__box--on { border-color: var(--color-primary); background-color: var(--color-primary); }
.is-live .pmk-filter__box--on::after { transform: rotate(45deg) scale(1); }
.pmk-filter__count { margin-left: auto; color: var(--color-text-on-dark-muted); font-size: .85em; }
.pmk-filter__range { position: relative; height: .35em; margin: .9em .5em .4em; border-radius: 99em; background: rgba(255,255,255,.14); }
.pmk-filter__fill { position: absolute; left: 30%; right: 40%; top: 0; bottom: 0; border-radius: inherit; background: var(--color-primary); transform: scaleX(.2); transition: transform 1s var(--ease-out) 1.2s; }
.is-live .pmk-filter__fill { transform: none; }
.pmk-filter__knob { position: absolute; top: 50%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; background: var(--color-white); box-shadow: 0 0 0 .25em rgba(3,226,156,.3); transition: left 1s var(--ease-out) 1.2s; }
.pmk-filter__knob--a { left: 44%; }
.pmk-filter__knob--b { left: 52%; }
.is-live .pmk-filter__knob--a { left: 30%; }
.is-live .pmk-filter__knob--b { left: 60%; }
.pmk-filter__main { display: grid; align-content: start; gap: 1.1em; padding: 1.3em; }
.pmk-filter__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; min-height: 2.1em; }
.pmk-filter__chip { display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 99em; background: rgba(3,226,156,.16); color: var(--color-primary); font-size: .9em; font-weight: 500; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0s); }
.pmk-filter__chip::after { content: "×"; color: var(--color-text-on-dark-muted); }
.pmk-filter__chip--reset { background: none; color: var(--color-text-on-dark-muted); text-decoration: underline; }
.pmk-filter__chip--reset::after { content: none; }
.is-live .pmk-filter__chip { opacity: 1; transform: none; }
.pmk-filter__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; }
.pmk-filter__item { display: grid; gap: .5em; padding: .6em; border-radius: .8em; background: rgba(255,255,255,.05); animation: pmkSwap 5s ease-in-out infinite; animation-play-state: paused; animation-delay: calc(var(--i, 0) * 120ms + 1.6s); }
.is-live .pmk-filter__item { animation-play-state: running; }
@keyframes pmkSwap { 0%, 78%, 100% { opacity: 1; transform: none; } 84% { opacity: .15; transform: translateY(.5em); } 90% { opacity: 1; transform: none; } }
.pmk-filter__img { aspect-ratio: 16 / 10; border-radius: .5em; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(3,226,156,.18)); }
.pmk-filter__t { display: block; width: 70%; height: .7em; border-radius: 99em; background: rgba(255,255,255,.3); }
.pmk-filter__p { display: block; width: 36%; height: .7em; border-radius: 99em; background: var(--color-primary); opacity: .8; }

@media (max-width: 760px) {
  .pmk-build__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pmk-build__side { display: none; }
  .pmk-filter__grid { grid-template-columns: 10.5em minmax(0, 1fr); }
  .pmk-filter__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmk-filter__item:nth-child(n+5) { display: none; }
  .pmk-bricks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pmk-mod:nth-child(n+13) { display: none; }
  .pmk-cache__row { grid-template-columns: 6.8em minmax(0, 1fr) 4.2em; }
  .pmk-cache__rings { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .pmk-filter__grid { grid-template-columns: minmax(0, 1fr); }
  .pmk-filter__side { grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--color-border-dark); }
  .pmk-filter__facet--range { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pmk *, .pmk *::before, .pmk *::after { animation: none !important; transition: none !important; }
}
/* @pmk:end */
/* @template:end */
/* @page:start proizvod-djia-cache */}@layer djb.nodes{.djb-jso2gz{display:contents}.djb-fjmrez{display:contents}.djb-x076az{display:contents}.djb-kc168z{display:contents}}