@font-face { font-family: "Caveat"; src: url("../assets/fonts/Caveat-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* ==========================================================================
   Case study šablon (tamni). Učitava se posle notes.css (tokeni, font,
   gornja traka, meni, pristupačnost).
   Sklop: hero → priče na skrol (levo tekst zakucan, desno se menja prikaz) → zaključak → sledeće.
   Priča (.sc): visina = broj koraka; unutra zakucan ekran sa tekstom i prikazom.
   JS postavlja data-step na .sc, a CSS na osnovu njega menja delove prikaza.
   ========================================================================== */
.cs {
  /* Tailwind Slate: tamna podloga usklađena sa projektom (slate UI portala i CMS-a) */
  --cs-bg: #FFFFFF; --cs-card: #F8FAFC; --cs-raise: #E2E8F0; --cs-line: #E2E8F0;
  --cs-text: #0F172A; --cs-text-2: #334155; --cs-muted: #64748B; --cs-dim: #64748B;
  --cs-shadow: 0 1px 2px rgba(15,23,42,.06), 0 24px 48px -16px rgba(15,23,42,.20);
  color-scheme: light;
}
body.cs { background: var(--cs-bg); color: var(--cs-text); }
body.cs::before { display: none; }
.cs :focus-visible { outline-color: var(--ink); }
.cs-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- hero ---------- */
.cs-hero { padding-top: calc(128px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(72px, 9vw, 120px); }
/* povratak: isti oblik kao "All field notes" i dugme Field notes u traci */
.cs-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 40px; padding: 8px 14px 8px 10px; border-radius: var(--r-btn, 8px); background: #fff; box-shadow: inset 0 0 0 1px var(--cs-line); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; transition: transform .2s ease; }
.cs-back:hover { transform: translateY(-1px); }
.cs-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cs-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--cs-muted); }
.cs-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cs-hero h1 { margin: 0 0 28px; font-size: clamp(44px, 6.6vw, 100px); line-height: .94; font-weight: 700; letter-spacing: -0.05em; max-width: 15ch; text-wrap: balance; }
.cs-hero h1 span { color: var(--cs-dim); }
.cs-lead { margin: 0; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; color: var(--cs-text-2); max-width: 40ch; }

/* ---------- priča na skrol ---------- */
.sc { position: relative; height: calc(var(--n, 4) * 70vh + 100vh); }   /* isti grid kao naslovna */
.sc__step { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.sc__step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sc__step h2 { margin: 0 0 20px; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; }
.sc__step h2 span { color: var(--cs-dim); }
.sc__step p { margin: 0 0 14px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--cs-text-2); max-width: 36ch; }
.sc__dots { position: absolute; left: 0; bottom: -56px; display: flex; gap: 6px; }
.sc__dots i { width: 22px; height: 3px; border-radius: 3px; background: var(--cs-raise); transition: background .3s ease, width .3s ease; }
.sc__dots i.is-on { width: 36px; background: var(--accent); }

/* ---------- raspored priča: tekst levo ili desno, ili veliki ekran u sredini ---------- */
.part { padding-top: clamp(96px, 12vw, 160px); padding-bottom: clamp(24px, 3vw, 40px); }   /* samo vertikalno, bočni razmak dolazi od .cs-wrap */
.part__label { margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-muted); }
.part__label b { color: var(--accent-ink, #4D7C0F); margin-right: 8px; }
.part h2 { margin: 0; max-width: 18ch; font-size: clamp(40px, 5.4vw, 80px); line-height: .96; font-weight: 700; letter-spacing: -0.05em; text-wrap: balance; }
.part h2 span { color: var(--cs-dim); }
.part p { margin: 22px 0 0; max-width: 52ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--cs-text-2); }

/* ---------- scena: slojevi realnih komponenti koji se preklapaju ---------- */

/* ---------- shadcn/ui stil (realne komponente) ---------- */
.ui {
  --u-bg: #FFFFFF; --u-fg: #09090B; --u-muted: #F4F4F5; --u-muted-fg: #52525B; --u-border: #E4E4E7; --u-primary: #0F172A; --u-primary-fg: #FAFAFA;
  --u-ring: #A1A1AA; --u-radius: 10px; --c1: #E76E50; --c2: #2A9D90; --c3: #274754; --c4: #E8C468; --c5: #F4A462;
  background: var(--u-bg); color: var(--u-fg); border: 1px solid var(--u-border); border-radius: calc(var(--u-radius) + 4px);
  box-shadow: var(--cs-shadow); font-size: 12px; line-height: 1.4; overflow: hidden;
}

/* bočna navigacija */

/* komandna paleta */

/* telefon */

/* grafikoni */

/* ---------- CMS: jedan veliki ekran, stranice se smenjuju kao da se klikće ---------- */
.screen { position: relative; width: 100%; height: min(560px, 60vh); }
.screen > .ui { position: absolute; inset: 0; }
/* kursor koji klikće */
.cursor { position: absolute; z-index: 5; left: var(--cx, 10%); top: var(--cy, 20%); width: 20px; height: 20px; pointer-events: none; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.cursor svg { width: 20px; height: 20px; }
.cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.4); }
.cursor.click::after { animation: cs-click .6s ease-out; }
@keyframes cs-click { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }

/* ---------- biblioteka: stranica znanja ---------- */
.paper { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; padding: 10px; }

/* ---------- temelj koji se skalira: račvanje u stilu Journey timeline-a ---------- */
.tree { position: relative; margin-top: 64px; padding-top: 0; }
.tree__core { position: relative; z-index: 1; width: fit-content; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--cs-card); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--cs-line)); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; box-shadow: var(--cs-shadow); }
.tree__spark { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
.tree__lines { display: block; width: 100%; height: 170px; margin-top: -2px; overflow: visible; }
.tree__road { fill: none; stroke: #E2E8F0; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tree__ink { fill: none; stroke: #94A3B8; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.tree__ink--a { stroke: var(--accent); stroke-width: 2; }
.tree.is-in .tree__ink { stroke-dashoffset: 0; }
.tree__ink:nth-of-type(7) { transition-delay: .12s; } .tree__ink:nth-of-type(8) { transition-delay: .24s; } .tree__ink:nth-of-type(9) { transition-delay: .36s; } .tree__ink:nth-of-type(10) { transition-delay: .48s; }
.tree__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }   /* bez razmaka, da centri kolona padnu tačno na krajeve linija */
.tree__items li { position: relative; padding: 24px 14px 0; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(1s + var(--d) * 140ms); }
.tree.is-in .tree__items li { opacity: 1; transform: none; }
.tree__items i { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--cs-bg); box-shadow: inset 0 0 0 2px #94A3B8; }
.tree__items li:first-child i { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
.tree__kicker { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-muted); }
.tree__items li:first-child .tree__kicker { color: var(--accent-ink, #4D7C0F); }
.tree__items b { display: block; font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.02em; }
.tree__items span { display: block; margin: 8px auto 0; max-width: 24ch; font-size: 15px; line-height: 1.5; color: var(--cs-text-2); }

/* ---------- zaključak i kraj ---------- */
.cs-close { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(48px, 6vw, 80px); text-align: center; }
.cs-close h2 { margin: 0 auto; max-width: 15ch; font-size: clamp(44px, 6.4vw, 96px); line-height: .94; font-weight: 700; letter-spacing: -0.05em; text-wrap: balance; }
.cs-close h2 span { color: var(--cs-dim); }
.cs-close p { margin: 22px auto 0; max-width: 44ch; font-size: 19px; line-height: 1.5; color: var(--cs-text-2); }
.cs-todo { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 72px); display: grid; gap: 10px; }
.cs-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: clamp(64px, 8vw, 96px); }
.cs-next__card { display: block; padding: 26px; border-radius: 22px; background: var(--cs-card); border: 1px solid var(--cs-line); color: var(--cs-text); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
a.cs-next__card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--cs-line)); transform: translateY(-2px); }
.cs-next__label { margin: 0 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--cs-muted); }
.cs-next__title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; }
.cs-next__card--accent { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.cs-next__card--accent .cs-next__label { color: rgba(10,10,10,.75); }
.cs-next__card.is-soon .cs-next__title { color: var(--cs-muted); }

/* ---------- manji ekrani: prikaz gore, tekst dole, i dalje na skrol ---------- */
@media (max-width: 900px) {
  .sc { height: calc(var(--n, 4) * 85vh + 100vh); }
  .sc__step h2 { font-size: clamp(26px, 7vw, 36px); margin-bottom: 10px; }
  .sc__step p { font-size: 15px; }
  .sc__dots { position: static; margin-top: 10px; }
  .screen { height: 46vh; }
  .paper { grid-template-columns: 110px 1fr; }
  .tree__lines { display: none; }
  .tree__items { grid-template-columns: 1fr; gap: 0; margin-top: 18px; border-left: 1.5px solid #E2E8F0; margin-left: 6px; }
  .tree__items li { text-align: left; padding: 0 0 26px 24px; }
  .tree__items i { left: -7.5px; top: 4px; margin-left: 0; }
  .tree__items span { margin-left: 0; }
  .tree__core { margin: 0; }
  .cs-next { grid-template-columns: 1fr; }
  .cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc__step, .tree__items li, .tree__ink, .cursor { transition: none !important; }
  .cursor.click::after { animation: none; }
}

/* ---------- realni ekrani kao slojevi ---------- */

/* CMS ekran: kursor se postavlja u jedinicama širine ekrana, da pogađa stavke menija na snimku */

/* case study nema navigaciju sajta: samo logo i povratak */
.cs .topbar { grid-template-columns: 1fr auto; }
.cs .topbar__back { gap: 8px; }
@media (max-width: 860px) { .cs .topbar__back { display: inline-flex; height: 38px; padding: 0 14px; } }

/* ==========================================================================
   Part two: komponente portala kao žive mini kartice (princip kao na Mind2B sajtu).
   Vrednosti prate prototip: Google Sans, slate skala, radijus kartice 12 px, polja 10 px,
   narandžasta skala umesto plave (#FF3D00 za površine i grafikone, #D93400 za tekst i dugmad).
   ========================================================================== */
.kit { --k-ink: #0F172A; --k-2: #334155; --k-mut: #64748B; --k-line: #E2E8F0; --k-soft: #F1F5F9; --k-brand: #FF3D00; --k-brand-ink: #D93400; --k-brand-soft: #FFF4F0; --k-pos: #16A34A; --k-neg: #DC2626; }
.krow { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 56px) 0; }
.krow--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.krow--flip .kpanel { order: 2; }
.krow__k { margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-muted); }
.krow__k b { color: var(--accent-ink, #4D7C0F); margin-right: 8px; }
.krow h3 { margin: 0 0 16px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.06; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.krow h3 span { color: var(--cs-dim); }
.krow p:not(.krow__k) { margin: 0; font-size: 17px; line-height: 1.55; color: var(--cs-text-2); max-width: 42ch; }
.kpanel { position: relative; display: grid; place-items: center; min-height: 440px; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: #F1F5F9; overflow: hidden; }
.kpanel::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,61,0,.10), rgba(255,61,0,0)); filter: blur(10px); animation: k-breathe 4s ease-in-out infinite; }
@keyframes k-breathe { 50% { transform: scale(1.06); opacity: .8; } }
.k-stack { position: relative; width: 100%; max-width: 480px; display: grid; gap: 12px; }
.k-stack--narrow { max-width: 400px; }
.k-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.k-row2--side { grid-template-columns: 1fr 64px; align-items: start; }
.k-row2--tight { gap: 10px; }
.k-card { position: relative; background: #fff; border: 1px solid var(--k-line); border-radius: 12px; color: var(--k-ink); font-size: 13px; line-height: 1.35; box-shadow: 0 20px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.08); }
.k-ic { width: 16px; height: 16px; flex: none; }
.k-ic--s { width: 13px; height: 13px; }
.k-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.k-title { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.k-title--l { font-size: 14px; }
.k-meta, .k-lbl { display: block; font-size: 11.5px; color: var(--k-mut); }
.k-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--k-brand-ink); }
.k-pos { color: var(--k-pos); } .k-neg { color: var(--k-neg); }
.k-pos, .k-neg, .k-delta { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
/* stat i metrika */
.k-stat { padding: 14px 16px; }
.k-big { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.k-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto 112px 16px; align-items: center; gap: 14px; padding: 14px 16px; }
.k-metric__v { display: grid; justify-items: end; gap: 2px; }
.k-metric__v b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.k-metric__v i { font-style: normal; font-size: 11px; color: var(--k-mut); }
.k-delta { font-size: 11.5px; color: var(--k-2); }
.k-spark { width: 112px; height: 24px; }
.k-spark path { fill: none; stroke: var(--k-brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-chev { color: var(--k-mut); display: grid; }
.k-fresh { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; font-size: 11.5px; color: var(--k-mut); }
.k-fresh b { color: var(--k-ink); font-weight: 500; }
.k-okc { display: inline-flex; align-items: center; gap: 4px; color: var(--k-pos); }
/* kartica tržišta */
.k-market { display: grid; gap: 12px; padding: 14px 0 6px; }
.k-market > .k-between, .k-market > .k-seg, .k-market > .k-area { margin: 0 14px; }
.k-select { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--k-line); border-radius: 8px; font-size: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.k-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 10px; background: var(--k-soft); }
.k-seg span { padding: 6px 10px; border-radius: 7px; text-align: center; font-size: 12px; font-weight: 500; color: var(--k-mut); transition: background .3s ease, color .3s ease, box-shadow .3s ease; white-space: nowrap; }
.k-seg span.is-on { background: #fff; color: var(--k-ink); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 1px 1px rgba(15,23,42,.04); }
.k-seg--s { display: inline-grid; grid-auto-columns: auto; }
.k-seg--s span { padding: 5px 10px; font-size: 11.5px; }
.k-area { width: calc(100% - 28px); height: 110px; display: block; }
.k-area__line { fill: none; stroke: var(--k-brand); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.k-area__fill { fill: url(#kGrad); }
.k-tbl { border-top: 1px solid var(--k-line); }
.k-tr { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--k-line); font-size: 12px; font-variant-numeric: tabular-nums; }
.k-tr > :not(:first-child) { justify-self: end; }
.k-th { border-top: 0; color: var(--k-mut); font-size: 11px; }
/* zaglavlje i navigacija */
.k-header { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.k-ai { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #E9D5FF; background: #FAF5FF; color: #7E22CE; font-size: 12px; font-weight: 500; }
.k-lang { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--k-mut); }
.k-bell, .k-iconbtn { position: relative; display: grid; color: var(--k-2); }
.k-sep { width: 1px; height: 20px; background: var(--k-line); }
.k-user { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12.5px; font-weight: 500; }
.k-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--k-brand-soft); color: #B82C00; font-style: normal; font-size: 10px; font-weight: 600; }
.k-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 999px; background: var(--k-brand-ink); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 600; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.k-count--abs { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; font-size: 10px; }
.k-count.pop { transform: scale(1.35); }
.k-side { padding: 12px 8px; }
.k-side__brand { padding: 0 8px 10px; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--k-line); margin-bottom: 10px; }
.k-side__clock { display: flex; align-items: baseline; gap: 6px; margin: 0 4px 10px; padding: 7px 10px; border: 1px solid var(--k-line); border-radius: 9px; background: #F8FAFC; font-size: 11px; color: var(--k-mut); }
.k-side__clock b { margin-left: auto; font-size: 13px; color: var(--k-ink); }
.k-side__clock i { font-style: normal; }
.k-side__grp { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 6px; font-size: 11px; color: var(--k-mut); }
.k-nav { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--k-2); font-size: 12.5px; transition: background .3s ease, color .3s ease; }
.k-nav.is-on { background: var(--k-brand-soft); color: #B82C00; font-weight: 500; }
.k-rail { display: grid; justify-items: center; gap: 4px; padding: 10px 0; }
.k-rail__i { position: relative; display: grid; place-items: center; width: 40px; height: 34px; border-radius: 8px; color: var(--k-2); transition: background .3s ease, color .3s ease; }
.k-rail__i.is-on { background: var(--k-brand-soft); color: #B82C00; }
.k-rail__i--top { border-bottom: 1px solid var(--k-line); border-radius: 0; margin-bottom: 4px; }
.k-rail > div { display: grid; gap: 4px; }
.k-dot { position: absolute; top: 6px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--k-brand-ink); box-shadow: 0 0 0 2px #fff; }
/* obaveštenja */
.k-pop__h { padding: 14px 16px 12px; border-bottom: 1px solid var(--k-line); }
.k-note { display: grid; grid-template-columns: 32px minmax(0, 1fr) 8px; gap: 12px; align-items: start; padding: 10px 16px; }
.k-note b { display: block; font-size: 12.5px; font-weight: 500; color: var(--k-mut); transition: color .4s ease, font-weight .4s ease; }
.k-note.is-unread b { color: var(--k-ink); font-weight: 600; }
.k-note span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--k-mut); }
.k-tile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.k-tile--l { width: 34px; height: 34px; }
.k-tile--ok { background: #F0FDF4; color: var(--k-pos); } .k-tile--mut { background: var(--k-soft); color: var(--k-2); } .k-tile--brand { background: var(--k-brand-soft); color: var(--k-brand-ink); }
.k-unread { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: transparent; transition: background .4s ease; }
.k-note.is-unread .k-unread, .k-unread--on { background: var(--k-brand-ink); }
.k-pop.is-read .k-note.is-unread .k-unread { background: transparent; }
.k-pop.is-read .k-note.is-unread b { color: var(--k-mut); font-weight: 500; }
.k-pop__f { padding: 10px 16px 12px; border-top: 1px solid var(--k-line); }
.k-inbox { display: grid; gap: 10px; padding: 12px; }
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--k-brand-ink); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; justify-self: start; }
.k-btn--l { height: 34px; padding: 0 14px; font-size: 12.5px; }
.k-btn--ghost { background: #fff; color: var(--k-ink); border: 1px solid var(--k-line); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.k-msg { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--k-line); border-radius: 10px; }
.k-msg b { display: block; font-size: 12.5px; font-weight: 600; }
.k-msg span { font-size: 11.5px; color: var(--k-mut); }
/* forme */
.k-form, .k-set { display: grid; gap: 12px; padding: 14px 16px; }
.k-field { display: grid; gap: 6px; font-size: 12px; font-weight: 500; }
.k-input { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 400; color: var(--k-2); overflow: hidden; white-space: nowrap; }
.k-input--sel { justify-content: space-between; }
.k-caret { width: 1px; height: 15px; background: var(--k-ink); animation: k-blink 1s steps(1) infinite; }
@keyframes k-blink { 50% { opacity: 0; } }
.k-checks { display: flex; flex-wrap: wrap; gap: 14px; font-weight: 400; font-size: 12.5px; }
.k-checks span { display: inline-flex; align-items: center; gap: 7px; }
.k-cb { position: relative; width: 16px; height: 16px; border-radius: 4px; border: 1px solid #CBD5E1; background: #fff; transition: background .25s ease, border-color .25s ease; }
.k-cb.on { background: var(--k-brand-ink); border-color: var(--k-brand-ink); }
.k-cb.on::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.k-setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--k-line); font-size: 12.5px; }
.k-stepper { display: inline-flex; align-items: center; gap: 10px; }
.k-stepper b { min-width: 40px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.k-sbtn { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--k-line); border-radius: 8px; color: var(--k-2); }
.k-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #CBD5E1; transition: background .3s ease; }
.k-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .3s ease; }
.k-switch.on { background: var(--k-brand-ink); }
.k-switch.on::after { transform: translateX(14px); }
/* kartice i liste */
.k-port { display: grid; gap: 12px; padding: 14px 16px; }
.k-hrow { display: inline-flex; align-items: center; gap: 10px; }
.k-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px dashed #CBD5E1; border-radius: 10px; font-size: 12.5px; color: var(--k-mut); }
.k-links { display: grid; gap: 8px; padding: 14px 10px 10px; }
.k-links > b { padding: 0 6px; }
.k-links > div { display: grid; gap: 2px; }
.k-lnk { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px; border-radius: 8px; font-size: 12.5px; color: var(--k-ink); transition: background .3s ease, color .3s ease; }
.k-lnk .k-ic { width: 14px; height: 14px; color: var(--k-mut); transition: color .3s ease; }
.k-lnk.is-on { background: var(--k-soft); color: var(--k-brand-ink); }
.k-lnk.is-on .k-ic { color: var(--k-brand-ink); }
.k-fund { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.k-dots { display: flex; gap: 5px; }
.k-dots i { width: 14px; height: 8px; border-radius: 999px; background: var(--k-soft); transition: width .35s ease, background .35s ease; }
.k-dots i.is-on { width: 24px; background: var(--k-brand); }
@media (max-width: 900px) {
  .krow, .krow--flip { grid-template-columns: minmax(0, 1fr); }
  .krow--flip .kpanel { order: 0; }
  .kpanel { min-height: 0; padding: 20px 14px; }
  .k-metric { grid-template-columns: minmax(0, 1fr) auto; }
  .k-spark, .k-chev { display: none; }
  .k-header { flex-wrap: wrap; }
  .k-user { margin-left: 0; }
  .k-big { font-size: 16px; }
  .k-row2--tight { grid-template-columns: 1fr; }
  .k-stat { padding: 12px; }
  .k-tr { grid-template-columns: 1.2fr 1fr .9fr 1fr; padding: 8px 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .kpanel::before, .k-caret { animation: none; } }

/* Part one: proces (privremeno, bez grafike) */

/* Part one: tabla razmišljanja na tačkastoj površini (kao Field notes) */
.board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: 40px; padding: clamp(28px, 4vw, 48px); border-radius: 24px; border: 1px solid var(--line, #E5E5E5); background: var(--dots), #FAFAFA; }
.board__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.board__lines path { fill: none; stroke: #A3A3A3; stroke-width: 1.5; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.board__lines path.to-s { stroke: var(--accent); stroke-width: 2; }
.board.is-in .board__lines path { stroke-dashoffset: 0; }
.board__col { position: relative; z-index: 1; display: grid; align-content: start; gap: 18px; }
.board__h { margin: 0 0 4px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-muted); }
.bn { position: relative; padding: 12px 14px; border-radius: 8px; background: #fff; border: 1px solid #E5E5E5; font-size: 13.5px; line-height: 1.4; color: var(--cs-text-2); box-shadow: 0 10px 18px -12px rgba(10,10,10,.3); transform: rotate(var(--r, 0deg)) translateY(10px); opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.bn b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--cs-text); }
.bn--lime { background: var(--accent); border-color: transparent; color: #0A0A0A; font-weight: 500; }
.bn--ink { background: #0A0A0A; border-color: transparent; color: #A3A3A3; }
.bn--ink b { color: #fff; font-size: 16px; }
.board.is-in .bn { opacity: 1; transform: rotate(var(--r, 0deg)); }
.board__hand { position: relative; font: 500 22px/1.05 "Caveat", "Segoe Print", cursive; color: var(--accent-ink, #4D7C0F); transform: rotate(-3deg); opacity: 0; transition: opacity .6s ease 2.6s; }
.board.is-in .board__hand { opacity: 1; }
@media (max-width: 900px) {
  .board { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .board__lines { display: none; }
  .board__col + .board__col::before { content: "↓"; position: absolute; top: -26px; left: 50%; color: #A3A3A3; }
}
@media (prefers-reduced-motion: reduce) { .bn, .board__lines path, .board__hand { transition: none; } }

/* ---------- Part three: Central system komponente ---------- */
.k-btn--block { justify-self: stretch; }
.k-otp, .k-access { display: grid; gap: 8px; padding: 16px; }
.k-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 6px 0 4px; }
.k-code i { display: grid; place-items: center; height: 40px; border: 1px solid #CBD5E1; border-radius: 10px; font-style: normal; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .2s ease, box-shadow .2s ease; }
.k-code i.on { border-color: var(--k-brand); box-shadow: 0 0 0 3px rgba(255,61,0,.15); }
.k-otp .k-btn { opacity: .55; transition: opacity .3s ease; }
.k-otp .k-btn.on { opacity: 1; }
.k-chip { justify-self: start; padding: 3px 8px; border: 1px solid var(--k-line); border-radius: 6px; font-size: 11.5px; font-weight: 500; }
.k-li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; color: var(--k-2); }
.k-li .k-ic { color: var(--k-mut); } .k-li--ok .k-ic { color: var(--k-pos); }
.k-stabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.k-stabs span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--k-mut); transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.k-stabs span i { font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--k-soft); font-size: 10.5px; text-align: center; color: var(--k-2); }
.k-stabs span.is-on { background: #fff; color: var(--k-ink); box-shadow: 0 1px 2px rgba(15,23,42,.1), inset 0 0 0 1px var(--k-line); }
.k-stabs span.is-on i { background: var(--k-brand-ink); color: #fff; }
.k-flow { display: grid; gap: 14px; padding: 14px 16px; }
.k-chain { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); font-size: 10.5px; color: var(--k-mut); }
.k-chain::before { content: ""; position: absolute; left: 6px; right: 12%; top: 5px; height: 2px; background: var(--k-line); }
.k-chain span { position: relative; display: grid; gap: 6px; transition: color .3s ease; }
.k-chain span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #CBD5E1; transition: background .3s ease, box-shadow .3s ease; }
.k-chain span.done::before { background: var(--k-brand-ink); box-shadow: none; }
.k-chain span.cur { color: var(--k-ink); font-weight: 600; }
.k-chain span.cur::before { box-shadow: inset 0 0 0 2px var(--k-brand-ink), 0 0 0 4px rgba(255,61,0,.15); }
.k-badges, .k-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.k-badges { padding: 12px 16px; }
.k-badge { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 6px; font-style: normal; font-size: 11.5px; font-weight: 500; background: var(--k-soft); color: var(--k-2); white-space: nowrap; }
.k-badge--ok { background: #F0FDF4; color: #15803D; } .k-badge--neg { background: #FEF2F2; color: #B91C1C; } .k-badge--warn { background: #FFFBEB; color: #B45309; } .k-badge--info { background: #F1F5F9; color: #1E293B; box-shadow: inset 0 0 0 1px #CBD5E1; }
.k-badge--brand { background: var(--k-brand-soft); color: #B82C00; } .k-badge--mut { background: var(--k-soft); color: var(--k-mut); } .k-badge--out { background: #fff; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-ink); }
.k-row2--roles { grid-template-columns: 1.1fr 1fr; align-items: start; }
.k-stack--in { gap: 10px; max-width: none; }
.k-roles { padding: 6px; }
.k-role { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; transition: background .3s ease; }
.k-role b { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.k-role i { display: block; font-style: normal; font-size: 10.5px; color: var(--k-mut); }
.k-role em { font-style: normal; font-size: 11px; color: var(--k-mut); }
.k-role.is-on { background: var(--k-brand-soft); }
.k-priv { color: #D97706; }
.k-alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; background: var(--k-brand-soft); border-color: #FFC4AE; color: #962400; font-size: 11.5px; line-height: 1.4; box-shadow: none; }
.k-alert .k-ic { margin-top: 1px; }
.k-privrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; box-shadow: none; }
.k-privrow b { display: block; font-size: 12px; } .k-privrow span i { display: block; font-style: normal; font-size: 10.5px; color: var(--k-mut); }
.k-matrix { padding: 4px 0; }
.k-mrow { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); align-items: center; padding: 8px 14px; border-top: 1px solid var(--k-line); font-size: 11.5px; }
.k-mrow > :not(:first-child) { justify-self: center; }
.k-mh { border-top: 0; color: var(--k-mut); font-size: 10.5px; }
.k-cell { display: block; width: 8px; height: 8px; border-radius: 50%; background: #E2E8F0; transition: background .25s ease, transform .25s cubic-bezier(.3,1.6,.5,1); }
.k-cell.yes.on { background: var(--k-ink); transform: scale(1.15); }
.k-tree { padding: 8px; }
.k-tn { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; font-size: 12.5px; color: var(--k-2); }
.k-tn em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--k-mut); }
.k-tn .k-badge { margin-left: auto; height: 20px; font-size: 10.5px; }
.k-tn.is-sel { background: var(--k-brand-soft); color: #B82C00; font-weight: 500; }
.k-tn--c { padding-left: 30px; }
.k-tchev { transition: transform .35s ease; color: var(--k-mut); }
.k-tgrp.open .k-tn--p .k-tchev { transform: rotate(90deg); }
.k-tgrp.open .k-tn--p { color: var(--k-ink); font-weight: 500; }
.k-tkids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.k-tkids > * { overflow: hidden; min-height: 0; }
.k-tgrp.open .k-tkids { grid-template-rows: 1fr; }
.k-tkids { display: block; max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.2,.7,.2,1); }
.k-tgrp.open .k-tkids { max-height: 160px; }
.k-page { display: grid; gap: 12px; padding: 14px 16px; }
.k-kv span { display: block; font-size: 11px; color: var(--k-mut); } .k-kv b { font-size: 12.5px; font-weight: 500; }
.k-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.k-mini { padding: 12px; } .k-mini b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } .k-mini span { font-size: 11px; color: var(--k-mut); }
.k-audit { padding: 2px 0; }
.k-arow { display: grid; grid-template-columns: 54px 1fr 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--k-line); font-size: 12px; }
.k-arow b { font-weight: 500; }
.k-ah { border-top: 0; color: var(--k-mut); font-size: 10.5px; }
/* ---------- Part four: biblioteka ---------- */
.k-reg { padding: 4px 0; font-size: 12px; }
.k-rg { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 10px; align-items: center; padding: 7px 14px; border-top: 1px solid var(--k-line); }
.k-rgh { border-top: 0; color: var(--k-mut); font-size: 10.5px; }
.k-rg code { font: 500 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #B82C00; }
.k-rg > span:nth-child(2) { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.k-sw { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.12); }
.k-rgf { background: #F8FAFC; }
.k-themes { display: grid; gap: 14px; padding: 14px 16px; }
.k-swgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.k-swc i { display: block; height: 52px; border-radius: 10px; background: var(--l); box-shadow: inset 0 0 0 1px rgba(15,23,42,.1); transition: background .6s ease; }
.k-swgrid[data-theme="dark"] .k-swc i { background: var(--d); }
.k-swgrid[data-theme="contrast"] .k-swc i { background: var(--c); box-shadow: inset 0 0 0 1px #94A3B8; }
.k-swc b { display: block; margin-top: 6px; font: 500 10.5px/1.2 ui-monospace, "SF Mono", Menlo, monospace; }
.k-swc span { display: none; font: 400 10.5px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--k-mut); }
.k-swgrid[data-theme="light"] .v-l, .k-swgrid[data-theme="dark"] .v-d, .k-swgrid[data-theme="contrast"] .v-c { display: block; }
.k-elev { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.k-el { display: grid; gap: 4px; padding: 18px 16px; border-color: #E2E8F0; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.k-el b { font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; } .k-el span { font-size: 11.5px; color: var(--k-mut); }
.k-el--xs { box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.k-el--sm { box-shadow: 0 1px 3px rgba(15,23,42,.1), 0 1px 2px -1px rgba(15,23,42,.1); }
.k-el--md { box-shadow: 0 4px 6px -1px rgba(15,23,42,.1), 0 2px 4px -2px rgba(15,23,42,.1); }
.k-el--lg { box-shadow: 0 10px 15px -3px rgba(15,23,42,.1), 0 4px 6px -4px rgba(15,23,42,.1); }
.k-el.up { transform: translateY(-6px); border-color: #FFC4AE; }
.k-comp, .k-anat { display: grid; gap: 10px; padding: 14px 16px; }
.k-clabel { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-mut); }
.k-btnrow .k-btn { transition: box-shadow .3s ease; }
.k-btn.focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--k-brand); }
.k-btn--text { background: transparent; color: var(--k-ink); }
.k-btn--danger { background: #DC2626; }
.k-anat__card { display: grid; border: 1px solid var(--k-line); border-radius: 12px; overflow: hidden; }
.k-anat__z { position: relative; display: grid; gap: 4px; padding: 10px 12px; border-top: 1px dashed #FFC4AE; }
.k-anat__z:first-child { border-top: 0; }
.k-anat__z > i { position: absolute; right: 8px; top: 8px; font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #D93400; }
.k-skel { display: block; height: 8px; border-radius: 4px; background: #E2E8F0; width: 70%; }
.k-skel--s { width: 45%; } .k-skel--t { width: 110px; height: 10px; background: #CBD5E1; margin-bottom: 5px; }
.k-crud { position: relative; overflow: hidden; display: grid; padding: 0; }
.k-cz { padding: 12px 14px; border-top: 1px solid var(--k-line); }
.k-cz--h { display: flex; justify-content: space-between; align-items: center; border-top: 0; }
.k-cz--f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #F8FAFC; }
.k-fchip { padding: 4px 9px; border: 1px solid var(--k-line); border-radius: 7px; background: #fff; font-size: 11px; }
.k-input--s { height: 26px; margin-left: auto; width: 100px; font-size: 11px; }
.k-cz--t { padding: 0; }
.k-crow { display: grid; grid-template-columns: 1fr .8fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--k-line); }
.k-crow:first-child { border-top: 0; }
.k-crow.is-sel { background: var(--k-brand-soft); }
.k-cz--p { display: flex; justify-content: space-between; align-items: center; }
.k-pages { display: flex; gap: 4px; } .k-pages i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-style: normal; font-size: 11px; border: 1px solid var(--k-line); } .k-pages i.is-on { background: var(--k-ink); color: #fff; border-color: var(--k-ink); }
.k-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; display: grid; align-content: start; gap: 12px; padding: 16px; background: #fff; border-left: 1px solid var(--k-line); box-shadow: -10px 0 15px -3px rgba(15,23,42,.1); transform: translateX(105%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.k-crud.open .k-drawer { transform: none; }
.k-type { display: grid; gap: 16px; padding: 16px; }
.k-ag { position: relative; height: 168px; }
.k-ag__g { position: absolute; left: 12px; top: 0; font: 400 128px/1 "Google Sans Flex", var(--sans); letter-spacing: -0.04em; color: var(--k-ink); }
.k-scale { display: grid; gap: 10px; }
.k-scale > div { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--k-line); }
.k-scale b { font-weight: 600; letter-spacing: -0.01em; }
.paper-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin: 24px 0 0; padding: 24px 28px; border-radius: 20px; background: #0A0A0A; color: #A3A3A3; }
.paper-note i { display: grid; place-items: center; width: 52px; height: 64px; border-radius: 6px; background: #fff; color: #0A0A0A; font-style: normal; font-size: 11px; font-weight: 700; box-shadow: 4px 4px 0 var(--accent); }
.paper-note b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.paper-note span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) {
  .k-row2--roles, .k-row4 { grid-template-columns: 1fr 1fr; }
  .k-swgrid { grid-template-columns: repeat(2, 1fr); }
  .k-arow { grid-template-columns: 44px 1fr auto; } .k-arow > :nth-child(3) { display: none; }
  .k-mrow { grid-template-columns: 1.4fr repeat(5, 1fr); padding: 7px 10px; font-size: 10.5px; }
  .k-rg { grid-template-columns: 1.2fr 1fr; } .k-rg > :nth-child(3) { display: none; }
}

.k-ag__ln { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #FF9D7A; font-style: normal; transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.4,0,.2,1); }
.k-ag__ln:nth-of-type(2) { transition-delay: .15s; } .k-ag__ln:nth-of-type(3) { transition-delay: .3s; } .k-ag__ln:nth-of-type(4) { transition-delay: .45s; }
.k-ag.open .k-ag__ln { transform: none; }
.k-ag__ln em { position: absolute; right: 0; bottom: 3px; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #D93400; }
@media (prefers-reduced-motion: reduce) { .k-ag__ln { transform: none; } }

/* Part one, verzija sa skicama: istraživanje odozgo, odluke u sredini, sistem dole */
.board--down { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.board--down .board__h { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 16px; margin: 10px 0 0; }
.board--down .board__h .board__hand { font-size: 21px; text-transform: none; letter-spacing: 0; }
.board__sk { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.sk { margin: 0; padding: 10px 12px 6px; border-radius: 10px; background: #fff; border: 1px solid #E5E5E5; }
.sk figcaption { font: 500 22px/1 "Caveat", "Segoe Print", cursive; color: #0A0A0A; }
.sk svg { display: block; width: 100%; height: auto; overflow: visible; }
.sk path { fill: none; stroke: #262626; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); transition-delay: var(--d, 0s); }
.sk path.dsh { stroke-dasharray: 2 5; stroke-dashoffset: 0; stroke: #A3A3A3; opacity: 0; transition: opacity .8s ease; transition-delay: calc(var(--d, 0s) + .6s); }
.sk path.ln { stroke: #D93400; stroke-width: 1.8; }
.sk text { font-family: "Caveat", "Segoe Print", cursive; font-weight: 500; fill: #404040; opacity: 0; transition: opacity .6s ease; transition-delay: calc(var(--d, 0s) + .7s); }
.board.is-in .sk path { stroke-dashoffset: 0; }
.board.is-in .sk path.dsh, .board.is-in .sk text { opacity: 1; }
.board__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
.board__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 75%; margin: 0 auto; width: 100%; }
.board--down .board__lines path { stroke: #737373; stroke-width: 1.2; }
@media (max-width: 900px) {
  .board__sk, .board__row, .board__row--3 { grid-template-columns: minmax(0, 1fr); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .sk path, .sk text { transition: none; stroke-dashoffset: 0; opacity: 1; } }

/* tabla sa skicama: niža i mirnija */
.board--down { gap: 12px; padding: clamp(22px, 3vw, 36px); }
.board--down .board__h { margin: 4px 0 0; }
.board__sk { gap: 14px 18px; }
.sk { padding: 4px 8px 2px; }
.sk svg { max-height: 168px; }
.board__row { gap: 12px 18px; }
.board--down .bn { padding: 9px 12px; font-size: 13px; line-height: 1.35; box-shadow: none; }
.board--down .bn--lime { background: var(--tag-bg, #F7FEE7); border: 1px solid var(--tag-border, #A3E635); color: var(--tag-text, #3F6212); font-weight: 500; }
.board--down .bn--ink { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #D4D4D4; color: #737373; font-size: 12px; }
.board--down .bn--ink b { display: inline; margin: 0; font-size: 14px; color: #0A0A0A; }
.board--down .board__row--3 { max-width: 70%; }

/* tabla: bez okvira, tačkasta površina ide preko cele širine ekrana, sadržaj ostaje u gridu */
html:has(body.cs), body.cs { overflow-x: clip; }
.board--down { border: 0; border-radius: 0; background: none; padding: clamp(40px, 5vw, 64px) 0; isolation: isolate; }
.board--down::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--dots), #FAFAFA; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED; }
.board--down .board__h--hand { margin: 2px 0 -4px; }

/* sve oznake iznad naslova u istom obliku kao oznaka u heroju: zelena tačka, pa tekst;
   prvi deo podebljan, pa tačka razdvajanja, pa naziv (npr. PART ONE · PROCESS) */
.part__label, .krow__k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--cs-muted); }
.part__label::before, .krow__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.part__label b, .krow__k b { margin: 0; font-weight: 700; color: var(--cs-muted); }
.part__label b::after, .krow__k b::after { content: "·"; margin-left: 8px; font-weight: 500; }
.tree__items li:first-child .tree__kicker { color: var(--cs-text-2); font-weight: 700; }
.part .part__label { margin: 0 0 14px; font-size: 12px; line-height: 1.4; max-width: none; color: var(--cs-muted); }
.part .krow__k { margin: 0 0 14px; font-size: 12px; line-height: 1.4; max-width: none; color: var(--cs-muted); }

/* case study nosi boju projekta: narandžasta zamenjuje zelenu brenda sajta na celoj stranici */
.cs {
  --accent: #FF3D00; --accent-hover: #FF6E42; --accent-ink: #D93400; --on-accent: #0A0A0A;
  --tag-bg: #FFF4F0; --tag-border: #FFC4AE; --tag-text: #962400;
}
.cs-next__card--accent { background: #0A0A0A; color: #fff; }
.cs-next__card--accent .cs-next__label { color: #A3A3A3; }
.cs-next__card--accent .cs-next__title span { color: var(--accent); }
a.cs-next__card--accent:hover { border-color: transparent; background: #171717; }
.board--down .board__lines path.to-s { stroke: #737373; }

/* grananje: nadnaslovi u skladu sa ostalim oznakama, naslovi u jednom redu, svaka grana svoj karakter */
.part .tree__kicker { margin: 0 0 8px; max-width: none; font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-muted); }
.part .tree__items li:first-child .tree__kicker { font-weight: 700; color: var(--cs-muted); }
.tree__items b { line-height: 1.15; }
.tree__items span { line-height: 1.45; }
.tree__ink--2 { stroke: #0A0A0A; }
.tree__ink--3 { stroke: #94A3B8; stroke-dasharray: 4 5; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s ease .5s; }
.tree__ink--4 { stroke: #94A3B8; }
.tree__ink--5 { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 5; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s ease .7s; }
.tree.is-in .tree__ink--3, .tree.is-in .tree__ink--5 { opacity: 1; }
.tree__road--3, .tree__road--5 { stroke: transparent; }
.tree__items li:nth-child(2) i { background: #0A0A0A; box-shadow: 0 0 0 4px rgba(10,10,10,.08); }
.tree__items li:nth-child(3) i { width: 10px; height: 10px; margin-left: -5px; top: -5px; border-radius: 1px; background: var(--cs-bg); box-shadow: inset 0 0 0 2px #94A3B8; transform: rotate(45deg); }
.tree__items li:nth-child(4) i { background: #94A3B8; box-shadow: none; }
.tree__items li:nth-child(5) i { width: 20px; height: 20px; margin-left: -10px; top: -10px; display: grid; place-items: center; background: var(--cs-bg); box-shadow: none; color: var(--accent); }
.tree__items li:nth-child(5) i svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .tree__items li:nth-child(3) i { left: -5.5px; margin-left: 0; }
  .tree__items li:nth-child(5) i { left: -10.5px; margin-left: 0; }
}
.tree__ink--3, .tree__ink--5 { stroke-dasharray: .012 .016; }
.tree__items li { padding-left: 8px; padding-right: 8px; }
.tree__items b { font-size: clamp(18px, 1.6vw, 22px); white-space: nowrap; }
@media (max-width: 900px) { .tree__items b { white-space: normal; } }

/* hero u dve kolone: tekst levo, žive komponente koje lebde oko jednog izvora desno */
.cs-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cs-hero h1 { max-width: none; font-size: clamp(40px, 4.4vw, 66px); line-height: .98; }
.cs-lead { max-width: 50ch; font-size: clamp(18px, 1.5vw, 21px); }
.part h2 { max-width: 24ch; }
.hero-art { position: relative; height: clamp(380px, 34vw, 480px); font-family: var(--sans); --k-ink: #0F172A; --k-2: #334155; --k-mut: #64748B; --k-line: #E2E8F0; --k-soft: #F1F5F9; --k-brand: #FF3D00; --k-brand-ink: #D93400; --k-brand-soft: #FFF4F0; --k-pos: #16A34A; --k-neg: #DC2626; }
.hero-art__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed #FFC4AE; transform: translate(-50%, -50%); }
.hero-art__ring--1 { width: 56%; aspect-ratio: 1; }
.hero-art__ring--2 { width: 92%; aspect-ratio: 1; border-color: #FFE4D9; }
.hero-art__glow { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,61,0,.14), rgba(255,61,0,0)); filter: blur(16px); animation: k-breathe 4s ease-in-out infinite; }
.hero-art__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-color: #FFC4AE; z-index: 2; }
.hero-art__core b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.hero-art__core code { font: 500 11px/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: #B82C00; }
.hero-art__dot { width: 12px; height: 12px; border-radius: 50%; background: #FF3D00; box-shadow: 0 0 0 5px rgba(255,61,0,.18); flex: none; }
.hero-f { position: absolute; z-index: 1; animation: hero-float 4.2s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes hero-float { 50% { transform: translateY(-8px); } }
.hero-art .k-stat { padding: 12px 14px; }
.hero-art .k-big { font-size: 18px; }
.hero-art__tabs { padding: 4px; }
.hero-art__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 12px; }
.hero-art__badges { display: flex; gap: 6px; padding: 10px; }
.hero-art__bell { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
@media (max-width: 900px) {
  .cs-hero { grid-template-columns: minmax(0, 1fr); }
  .cs-hero h1 { font-size: clamp(40px, 11vw, 56px); }
  .hero-art { height: 360px; margin: 0 6px; }
  .hero-art .k-card, .hero-art .k-btn { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .hero-f, .hero-art__glow { animation: none; } }
.k-seg span { color: #475569; }
.hero-art__core b, .hero-art__core code { white-space: nowrap; }

.board__lines path { transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }

/* logo na case study stranici nosi boju projekta (--accent); svaki case study postavlja svoj --accent */
.cs .topbar__logo { color: var(--accent); }

/* hero kao glavni, tamni blok preko cele širine; na njemu stoje logo i povratak */
.cs-hero { position: relative; isolation: isolate; color: #FAFAFA; padding-bottom: clamp(80px, 9vw, 128px); }
.cs-hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: #0A0A0A; }
.cs-hero h1 { color: #FAFAFA; }
.cs-hero h1 span { color: #737373; }
.cs-hero .cs-eyebrow { color: #A3A3A3; }
.cs-hero .cs-lead { color: #D4D4D4; }
.cs-hero ::selection { background: var(--accent); color: #0A0A0A; }
.hero-art__ring { border-color: rgba(255,61,0,.35); }
.hero-art__ring--2 { border-color: rgba(255,61,0,.18); }
.hero-art__glow { background: radial-gradient(closest-side, rgba(255,61,0,.28), rgba(255,61,0,0)); }
.hero-art .k-card { border-color: rgba(255,255,255,.08); box-shadow: 0 24px 48px -16px rgba(0,0,0,.7); }
.hero-art__core { border-color: rgba(255,61,0,.6) !important; box-shadow: 0 0 0 6px rgba(255,61,0,.12), 0 24px 48px -16px rgba(0,0,0,.7) !important; }
.hero-art .k-btn { box-shadow: 0 24px 48px -16px rgba(0,0,0,.7); }
.part h2 { max-width: none; }

/* Part one, revizija: proces u četiri koraka koji se otkriva dok skroluješ (traka napreduje, koraci se pale redom) */
.pr { position: relative; isolation: isolate; margin-top: 40px; padding: clamp(44px, 5vw, 64px) 0; }
.pr::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--dots), #FAFAFA; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED; }
.pr__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.pr__rail { position: absolute; left: 6px; right: calc(25% - 6px); top: calc(clamp(44px, 5vw, 64px) + 5px); height: 2px; background: #E5E5E5; }
.pr__rail i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.pr__step { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 30px; }
.pr__node { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #FAFAFA; box-shadow: inset 0 0 0 2px #CBD5E1; transition: background .4s ease, box-shadow .4s ease; }
.pr__step.is-on .pr__node { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.cs .pr .pr__k { display: inline-flex; gap: 8px; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-muted); max-width: none; line-height: 1.4; }
.pr__k b { font-weight: 700; } .pr__k b::after { content: "·"; margin-left: 8px; font-weight: 500; }
.cs .pr .pr__t { margin: 0; max-width: none; font-size: 15px; line-height: 1.5; color: var(--cs-text-2); }
.pr__body { display: grid; gap: 10px; margin-top: 6px; }
.pr__step > :not(.pr__node) { opacity: .18; transform: translateY(10px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.pr__step.is-on > :not(.pr__node) { opacity: 1; transform: none; }
.pr__step.is-on .pr__t { transition-delay: .08s; } .pr__step.is-on .pr__body { transition-delay: .16s; }
.pr .sk { padding: 6px 8px; background: #fff; }
.pr .sk svg { max-height: 190px; }
.pr__step.is-on .sk path { stroke-dashoffset: 0; } .pr__step.is-on .sk path.dsh, .pr__step.is-on .sk text { opacity: 1; }
.pr .sk path, .pr .sk text { transition-delay: .2s; }
.pr .bn { padding: 9px 12px; font-size: 13px; line-height: 1.35; box-shadow: none; opacity: 1; transform: rotate(var(--r, 0deg)); }
.pr .bn--lime { background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--tag-text); font-weight: 500; }
.pr .bn--ink { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #D4D4D4; color: #737373; font-size: 12px; transform: none; }
.pr .bn--ink b { display: inline; margin: 0; font-size: 14px; color: #0A0A0A; }
.pr .board__hand { opacity: 1; font-size: 21px; margin-top: 2px; transition: none; }
@media (max-width: 900px) {
  .pr__steps { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-left: 26px; }
  .pr__rail { left: 5px; right: auto; width: 2px; height: auto; top: calc(clamp(44px, 5vw, 64px) + 6px); bottom: clamp(44px, 5vw, 64px); }
  .pr__rail i { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .pr__step { padding-top: 0; }
  .pr__node { left: -26px; top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .pr__step > :not(.pr__node) { opacity: 1; transform: none; transition: none; } }

/* Part one: horizontalni skrol. Na desktopu se sekcija zakuca, a vertikalni skrol pomera traku sa koracima ulevo;
   na telefonu je to obična horizontalna traka sa prevlačenjem i zaustavljanjem na svakom koraku. */
.hs { position: relative; isolation: isolate; margin-top: 40px; height: var(--hs-h, 300vh); }
.hs::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--dots), #FAFAFA; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED; }
.hs__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); }
.hs__track { position: relative; padding: 0 max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); will-change: transform; transform: translateX(var(--x, 0px)); }
.hs__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(48px, 6vw, 96px); }
.hs__rail { position: absolute; left: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); top: 5px; height: 2px; width: var(--rail-w, 100%); background: #E5E5E5; }
.hs__rail i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hs__f { position: relative; flex: none; width: clamp(300px, 34vw, 480px); display: grid; align-content: start; gap: 12px; padding-top: 34px; }
.hs__node { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #FAFAFA; box-shadow: inset 0 0 0 2px #CBD5E1; transition: background .4s ease, box-shadow .4s ease; }
.hs__f.is-on .hs__node { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.cs .hs .pr__k { display: inline-flex; gap: 8px; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-muted); max-width: none; line-height: 1.4; }
.cs .hs .hs__t { margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: var(--cs-text-2); }
.hs__f > :not(.hs__node) { opacity: .2; transition: opacity .6s ease; }
.hs__f.is-on > :not(.hs__node) { opacity: 1; }
.hs__sk { margin: 8px 0 0; }
.hs__sk svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs__sk path { fill: none; stroke: #262626; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .15s; }
.hs__sk path.dsh { stroke-dasharray: 2 5; stroke-dashoffset: 0; stroke: #A3A3A3; opacity: 0; transition: opacity .8s ease .7s; }
.hs__sk path.ln { stroke: var(--accent); stroke-width: 2; }
.hs__sk text { font-family: "Caveat", "Segoe Print", cursive; font-weight: 500; fill: #404040; opacity: 0; transition: opacity .6s ease .8s; }
.hs__f.is-on .hs__sk path { stroke-dashoffset: 0; } .hs__f.is-on .hs__sk path.dsh, .hs__f.is-on .hs__sk text { opacity: 1; }
.hs__notes, .hs__sys { display: grid; gap: 10px; margin-top: 8px; }
.hs .bn { padding: 11px 14px; font-size: 14.5px; line-height: 1.35; box-shadow: none; opacity: 1; transform: rotate(var(--r, 0deg)); border-radius: 8px; }
.hs .bn--lime { background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--tag-text); font-weight: 500; }
.hs .bn--ink { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #D4D4D4; color: #737373; font-size: 13px; transform: none; }
.hs .bn--ink b { display: inline; margin: 0; font-size: 16px; color: #0A0A0A; }
.hs .board__hand { opacity: 1; font-size: 23px; transition: none; margin-top: 4px; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hs { height: auto !important; padding: 40px 0; }
  .hs__pin { position: relative; height: auto; display: block; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hs__pin::-webkit-scrollbar { display: none; }
  .hs__track { transform: none !important; width: max-content; padding-bottom: 8px; }
  .hs__f { width: min(76vw, 360px); scroll-snap-align: start; scroll-margin-left: var(--pad); }
  .hs__list { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .hs__f > :not(.hs__node) { opacity: 1; } .hs__sk path, .hs__sk text { transition: none; stroke-dashoffset: 0; opacity: 1; } }

/* Part one: naslov pripada tački: tačkasta površina počinje iznad oznake, bez linija gore i dole;
   naslov stoji u zakucanom delu, iznad trake sa koracima */
.part--process { padding-top: 0; padding-bottom: 0; margin-top: clamp(0px, 0vw, 0px); }
.hs { margin-top: 0; }
.hs::before { border: 0; }
.hs__pin { flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(28px, 4vh, 48px); }
.hs__intro { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); box-sizing: border-box; }
.hs__intro .part__label { margin-bottom: 14px; }
.hs__intro h2 { margin: 0; font-size: clamp(36px, 4.6vw, 72px); line-height: .98; font-weight: 700; letter-spacing: -0.05em; text-wrap: balance; }
.hs__intro h2 span { color: var(--cs-dim); }
.cs .hs__intro > p:not(.part__label) { margin: 18px 0 0; max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--cs-text-2); }
.hs__track { width: max-content; }
@media (max-height: 820px) and (min-width: 901px) { .hs__intro h2 { font-size: clamp(32px, 3.6vw, 56px); } .cs .hs__intro > p:not(.part__label) { display: none; } .hs__sk svg { max-height: 300px; } }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hs { padding-top: clamp(64px, 12vw, 96px); }
  .hs__intro { padding: 0 var(--pad) 32px; }
}

/* prekidač se ne sme skupiti kad je tekst pored njega dug */
.k-switch { flex: none; }
/* tačkice su zakucane za ekran: sadržaj klizi preko njih */
.hs::before { background-attachment: fixed; }

/* hero kao uvod: bez grafike, sve centrirano */
.cs-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-top: calc(160px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(96px, 11vw, 160px); }
.cs-hero__text { display: grid; justify-items: center; }
.cs-hero h1 { max-width: 16ch; font-size: clamp(44px, 6.4vw, 96px); line-height: .96; margin-left: auto; margin-right: auto; text-wrap: balance; }
.cs-hero .cs-lead { max-width: 54ch; margin-left: auto; margin-right: auto; }
.cs-hero .cs-eyebrow { justify-content: center; }
@media (max-width: 900px) { .cs-hero { padding-top: calc(120px + env(safe-area-inset-top, 0px)); } .cs-hero .cs-eyebrow { flex-wrap: wrap; } }
.hs__pin:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.cs-hero .cs-eyebrow { display: block; max-width: 40ch; margin-left: auto; margin-right: auto; line-height: 1.7; }
.cs-hero .cs-eyebrow::before { display: inline-block; margin-right: 8px; vertical-align: 1px; }

/* skice kao olovka: tanji, grafitni potezi, blago ponovljeni, sa zrnom papira */
.hs__sk svg { filter: url(#pencil); }
.hs__sk path { stroke: #3A3A3A; stroke-width: 1.05; }
.hs__sk path.re { stroke-width: .7; opacity: .45; }
.hs__sk path.ln { stroke-width: 1.4; }
.hs__sk path.ln.re { stroke-width: .9; opacity: .5; }
.hs__sk path.dsh { stroke-width: .9; }
.hs__sk text { fill: #4A4A4A; }
.hs__sk path { stroke: #222; stroke-width: 1.1; }
.hs__sk path.re { opacity: .55; }
.hs__sk text { fill: #2E2E2E; }
/* uvod: šire, da naslov stane u tri reda, a oznaka u jedan */
.cs-hero h1 { max-width: 22ch; }
.cs-hero .cs-eyebrow { max-width: none; }
.cs-hero .cs-lead { max-width: 62ch; }

/* rotirajuća reč u naslovu, isti obrazac kao na naslovnoj; marker je u boji projekta */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-hero h1 .cs-dimw { color: #737373; }
.rot { display: inline-block; position: relative; text-align: left; white-space: nowrap; vertical-align: bottom; transition: width .5s cubic-bezier(.2,.7,.2,1); color: inherit;
  background: linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent) 45%, transparent)) 0 78% / 100% .34em no-repeat; }
.rot__w { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(.3em); filter: blur(6px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.rot__w.on { position: relative; opacity: 1; transform: none; filter: none; }
.rot__w.out { opacity: 0; transform: translateY(-.3em); filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .rot__w, .rot { transition: none; } }
.cs-hero h1 > span[aria-hidden] { color: #FAFAFA; }
.cs-hero h1 .cs-dimw, .cs-hero h1 .cs-dimw .rot { color: #737373; }
.cs-hero .rot { background-image: linear-gradient(color-mix(in srgb, var(--accent) 62%, transparent), color-mix(in srgb, var(--accent) 62%, transparent)); }
.cs-hero .rot__w { color: #A3A3A3; }
/* "the" i rotirajuća reč su beli; narandžasti marker leži preko reči, poluprovidan, kao flomaster */
.cs-hero h1 .cs-dimw .cs-the, .cs-hero h1 .cs-dimw .rot, .cs-hero .rot__w { color: #FAFAFA; }
.cs-hero .rot { background: none; }
.cs-hero .rot::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 56%; height: .34em; background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 2px; pointer-events: none; }

/* kruna dela o biblioteci: dva bloka (instanca za učenje i whitepaper) i rukom pisana beleška kao lični pečat */
.crown { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 72px; }
.crown .paper-note { margin: 0; align-items: start; }
.crown .paper-note i { font-size: 10px; letter-spacing: .04em; }
.crown__note { position: absolute; right: 2%; top: -74px; display: flex; align-items: flex-end; gap: 4px; pointer-events: none; }
.crown__note span { font: 500 24px/1.02 "Caveat", "Segoe Print", cursive; color: var(--accent-ink); transform: rotate(-4deg); text-align: right; opacity: 0; transition: opacity .5s ease .6s; }
.crown__note svg { width: 74px; height: 50px; overflow: visible; transform: translateY(26px); }
.crown__note path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1); }
.crown__note path + path { transition-delay: .8s; transition-duration: .3s; }
.crown.is-in .crown__note path { stroke-dashoffset: 0; } .crown.is-in .crown__note span { opacity: 1; }
@media (max-width: 900px) { .crown { grid-template-columns: 1fr; margin-top: 84px; } .crown__note { right: 0; top: -80px; } }
@media (prefers-reduced-motion: reduce) { .crown__note path { transition: none; stroke-dashoffset: 0; } .crown__note span { opacity: 1; transition: none; } }

/* ostali case study-ji: boja projekta za logo, tačke i marker preko reči u naslovu */
.cs--studios { --accent: #1447E6; --accent-hover: #3B6BF0; --accent-ink: #1447E6; --tag-bg: #EEF3FE; --tag-border: #B9CCF8; --tag-text: #0F3BB8; }
.cs--agremo { --accent: #008236; --accent-hover: #00A043; --accent-ink: #00702E; --tag-bg: #EAF6EF; --tag-border: #A8D8BB; --tag-text: #005A25; }
.cs--cr { --accent: #0A0A0A; --accent-hover: #262626; --accent-ink: #0A0A0A; --tag-bg: #F5F5F5; --tag-border: #D4D4D4; --tag-text: #0A0A0A; }
.cs-hero h1 .cs-mark { position: relative; white-space: nowrap; color: #FAFAFA; }
.cs-hero h1 .cs-mark::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 56%; height: .34em; background: color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 2px; pointer-events: none; }
/* Conference Republic: svetao uvod, jer je boja projekta crna (crn logo i crn marker na beloj) */
.cs--light .cs-hero { color: #0A0A0A; }
.cs--light .cs-hero::before { background: #FAFAFA; border-bottom: 1px solid #EDEDED; }
.cs--light .cs-hero h1, .cs--light .cs-hero h1 .cs-mark, .cs--light .cs-hero h1 > span[aria-hidden] { color: #0A0A0A; }
.cs--light .cs-hero h1 .cs-dimw { color: #737373; }
.cs--light .cs-hero .cs-eyebrow { color: #525252; }
.cs--light .cs-hero .cs-lead { color: #404040; }
.cs--light .cs-hero h1 .cs-mark::after { background: rgba(10,10,10,.22); }
.cs--light .topbar__back { background: #0A0A0A; color: #fff; border-color: #0A0A0A; }
/* privremeni blok dok se case study piše */
.cs-soon { padding: clamp(64px, 8vw, 112px) var(--pad, 24px) clamp(80px, 9vw, 128px); }
.cs-soon h2 { margin: 0 0 18px; font-size: clamp(32px, 4.2vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -0.045em; }
.cs-soon h2 span { color: var(--cs-dim); }
.cs .cs-soon > p:not(.part__label) { margin: 0 0 40px; max-width: 56ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--cs-text-2); }
.cs .cs-soon .part__label { margin: 0 0 14px; font-size: 12px; line-height: 1.4; max-width: none; color: var(--cs-muted); }
/* Conference Republic: isti crni uvod kao ostali; logo se sam prilagođava podlozi (beo na crnom, crn na belom), marker je svetao preko reči */
.cs--cr .topbar__logo { color: #FFFFFF; mix-blend-mode: difference; }
.cs--cr .cs-hero h1 .cs-mark::after { background: rgba(255,255,255,.3); }
.cs--cr .cs-hero .cs-eyebrow::before { background: #FAFAFA; }
/* rotirajuće reči u naslovima ostalih case study-ja: marker u boji projekta, za Conference Republic svetao */
.cs--cr .cs-hero .rot::after { background: rgba(255,255,255,.3) !important; }

/* slike u studijama slučaja */
.cs-fig { margin: clamp(32px, 4vw, 56px) 0 0; }
.cs-fig img { display: block; width: 100%; height: auto; border-radius: 18px; background: #F2F4F3; }
.cs-fig figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--cs-muted); }
.cs-figs { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(12px, 2vw, 24px); align-items: start; }
.cs-figs .cs-fig { margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 720px) { .cs-figs { grid-template-columns: 1fr; } .cs-figs .cs-fig + .cs-fig { margin-top: 20px; } }
.outcome .cs-next { margin-top: clamp(40px, 5vw, 64px); }
/* kartice "Read next" unutar sekcije: ne nasleđuju stil pasusa iz .part */
.part .cs-next p { max-width: none; }
.part .cs-next .cs-next__label { margin: 0 0 10px; font-size: 12px; color: var(--cs-muted); }
.part .cs-next .cs-next__title { margin: 0; font-size: 24px; line-height: 1.2; color: var(--cs-text, #0A0A0A); }
.part .cs-next__card--accent .cs-next__title { color: #fff; }
.part .cs-next__card--accent .cs-next__label { color: rgba(255,255,255,.72); }

/* Agremo: kompozicije slika */
.ag-banner { margin: clamp(32px,4vw,56px) 0 0; }
.ag-banner img { display: block; width: 100%; height: auto; border-radius: 22px; }
.ag-icons { list-style: none; margin: clamp(32px,4vw,56px) 0 0; padding: clamp(24px,3vw,40px); display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(20px,2.6vw,36px) 12px; border-radius: 22px; background: #F4F7F5; }
.ag-icons li { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ag-icons img { width: clamp(56px, 6vw, 84px); height: auto; }
.ag-icons span { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--cs-text-2); }
.ag-bento { margin: clamp(32px,4vw,56px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.6vw,20px); padding: clamp(14px,2vw,28px); border-radius: 22px; background: linear-gradient(160deg, #0F3D3A, #0A2B33); }
.shot { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -22px rgba(0,0,0,.6); }
.shot__bar { display: flex; gap: 5px; padding: 8px 10px; background: #EEF1F0; }
.shot__bar i { width: 7px; height: 7px; border-radius: 50%; background: #CBD3D0; }
.shot img { display: block; width: 100%; height: auto; }
.shot--hero { grid-column: 1 / 3; grid-row: 1 / 3; }
.ag-wide { margin: clamp(20px,2.4vw,32px) 0 0; padding: clamp(14px,2vw,28px); border-radius: 22px; background: #F4F7F5; }
.ag-wide img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ag-wide figcaption { margin-top: 12px; font-size: 14px; color: var(--cs-muted); }
.ag-shelf { list-style: none; margin: clamp(32px,4vw,56px) 0 0; padding: clamp(32px,4vw,56px) clamp(16px,3vw,48px); display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px,1.6vw,22px); border-radius: 22px; background: linear-gradient(180deg, #1F9D4C, #157A3C); }
.ag-shelf li { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ag-shelf li:nth-child(odd) { transform: rotate(-2.2deg) translateY(6px); }
.ag-shelf li:nth-child(even) { transform: rotate(1.8deg) translateY(-6px); }
.ag-shelf li:hover { transform: rotate(0) translateY(-10px); }
.ag-shelf img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 20px 34px -18px rgba(0,0,0,.55); }
.ag-pair { margin: clamp(12px,1.6vw,20px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,1.6vw,20px); }
.ag-pair figure { margin: 0; border-radius: 22px; overflow: hidden; }
.ag-pair img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .ag-icons { grid-template-columns: repeat(3, 1fr); }
  .ag-bento { grid-template-columns: 1fr 1fr; }
  .shot--hero { grid-column: 1 / -1; grid-row: auto; }
  .ag-shelf { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 40px; }
  .ag-shelf li { scroll-snap-align: center; }
  .ag-pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ag-shelf li { transition: none; } }
.ag-shelf-wrap:focus-visible, .ag-icons-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 22px; }
@media (max-width: 860px) { .ag-shelf-wrap { overflow-x: auto; border-radius: 22px; } .ag-shelf { overflow: visible; width: max-content; grid-template-columns: repeat(5, 220px); } }
.ag-wide figcaption { color: #4B5563; }

/* ===== Agremo v2: brend, registar, ikonice od skice do znaka, žive komponente (ravne ivice) ===== */
.cs--agremo { --ag-green:#20B849; --ag-ink:#002F43; --ag-petrol:#175668; --ag-teal:#00A87F; --ag-mint:#E9FEEF; --ag-line:#D9E2E5; }
.ag-brandrow { margin-top: clamp(32px,4vw,56px); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(16px,2vw,24px); align-items: stretch; }
.ag-logo { margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: clamp(32px,4vw,56px); border: 1px solid var(--ag-line); background: #fff; }
.ag-logo img { width: min(360px, 80%); height: auto; }
.ag-logo figcaption, .ag-build figcaption { font-size: 13px; color: #4B5563; }
.ag-reg { padding: 18px 20px; border: 1px solid var(--ag-line); background: #fff; }
.ag-reg__t { margin: 0 0 10px !important; font-size: 12px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #4B5563 !important; }
.ag-reg table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ag-reg td { padding: 5px 0; border-top: 1px solid #EEF2F3; color: #1F2937; }
.ag-reg td:last-child { text-align: right; color: #4B5563; }
.ag-reg code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ag-sw { display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ag-build { margin-top: clamp(16px,2vw,24px); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(16px,2vw,24px); }
.ag-build figure { margin: 0; padding: clamp(20px,2.6vw,32px); border: 1px solid var(--ag-line); background: #fff; display: flex; flex-direction: column; gap: 14px; }
.ag-sk { width: 100%; height: auto; }
.ag-sk__note text { font-family: "Caveat", "Segoe Print", cursive; font-weight: 500; fill: #374151; }
.ag-build__done ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 12px; flex: 1; align-content: center; }
.ag-build__done li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ag-build__done img { width: clamp(56px, 5.4vw, 76px); height: auto; }
.ag-build__done span { font-size: 12.5px; font-weight: 600; color: #374151; }

.ag-row { margin-top: clamp(48px,6vw,88px); display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px,4vw,64px); align-items: center; }
.ag-row--flip .ag-row__comp { order: 2; }
.ag-row__text h3 { margin: 0 0 12px; font-size: clamp(24px,2.4vw,34px); line-height: 1.1; letter-spacing: -0.03em; }
.part .ag-row__text p { margin: 0; }

.agc { --c-ink:#002F43; font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif; background: #fff; border: 1px solid var(--ag-line); color: #1F2937; border-radius: 0; box-shadow: 0 24px 50px -32px rgba(0,47,67,.45); }
.agc * { border-radius: 0 !important; }
.agc-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #EEF2F3; font-size: 15px; color: var(--c-ink); }
.agc-chip { font-size: 12px; padding: 4px 8px; background: var(--ag-mint); color: #0B6B33; }
.agc-x { font-size: 20px; color: #6B7280; }
.agc-grid { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.agc-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid #EEF2F3; transition: background .3s, border-color .3s, transform .3s; }
.agc-tile img { width: 36px; height: 36px; }
.agc-tile span { font-size: 11px; text-align: center; line-height: 1.2; color: #374151; }
.agc-tile.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); transform: translateY(-2px); }
.agc-foot, .agc-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #EEF2F3; font-size: 13px; }
.agc-actions { justify-content: stretch; }
.agc-actions .agc-btn { flex: 1; text-align: center; }
.agc-btn { padding: 10px 14px; font-size: 13px; font-weight: 600; background: #fff; color: #0B6B33; border: 1px solid var(--ag-green); }
.agc-btn--solid, .agc-foot .agc-btn { background: var(--ag-green); color: #fff; border-color: var(--ag-green); }
.agc-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 12px 18px; background: var(--ag-mint); font-size: 12.5px; }
.agc-meta span { color: #4B5563; }
.agc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding: 16px 18px; }
.agc-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #4B5563; border-bottom: 1px solid #D1D5DB; padding-bottom: 6px; }
.agc-fields output { min-height: 20px; font-size: 15px; color: #111827; opacity: .25; transition: opacity .3s; }
.agc-fields output.is-on { opacity: 1; }
.agc-yield { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 18px 14px; background: #F9FAFC; border: 1px solid #EEF2F3; }
.agc-yield div { padding: 12px 8px; text-align: center; }
.agc-yield span { display: block; font-size: 12px; color: #4B5563; }
.agc-yield b { font-size: 22px; font-variant-numeric: tabular-nums; color: #111827; }
.agc-yield .is-avg b { color: #C2410C; }
.agc-yield em { position: absolute; right: 8px; top: 6px; font-size: 11px; font-style: normal; color: #6B7280; }
.agc-band { display: flex; justify-content: space-between; padding: 14px 18px; background: #F69301; color: #fff; font-size: 15px; }
.agc-big { padding: 22px 18px 10px; text-align: center; }
.agc-big b { display: block; font-size: clamp(40px,4.6vw,58px); line-height: 1; color: #128A38; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.agc-big span { font-size: 15px; color: #374151; }
.agc-bar { position: relative; height: 10px; margin: 8px 18px 0; background: #EEF2F3; }
.agc-bar i { display: block; height: 100%; width: var(--p); background: var(--ag-green); transition: width 1.6s cubic-bezier(.2,.7,.2,1); }
.agc-mark { position: absolute; top: -4px; left: calc(var(--p) - 2px); width: 2px; height: 18px; background: var(--c-ink); }
.agc-note { margin: 10px 18px 0 !important; font-size: 13px !important; color: #374151 !important; text-align: center; max-width: none !important; }
.agc-note b { color: #B91C3C; }
.agc-rows { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px 18px; font-size: 13px; }
.agc-rows span { color: #4B5563; } .agc-ok { color: #128A38; }
.agc-vrt { display: grid; grid-template-columns: 1.15fr 1fr; }
.agc-map { display: grid; grid-template-columns: repeat(16, 1fr); gap: 1px; padding: 14px; background: #2F4F2C; align-content: center; }
.agc-map i { aspect-ratio: 1; background: #175668; transition: background .9s ease; }
.agc-zones { border-left: 1px solid #EEF2F3; display: flex; flex-direction: column; }
.agc-zones table { width: 100%; border-collapse: collapse; font-size: 12.5px; flex: 1; }
.agc-zones th { text-align: left; font-weight: 600; color: #4B5563; padding: 10px 14px; border-bottom: 1px solid #EEF2F3; }
.agc-zones td { padding: 9px 14px; border-bottom: 1px solid #F3F4F6; }
.agc-zones td i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--c); }
.agc-zones tr { transition: background .4s; } .agc-zones tr.is-on { background: color-mix(in srgb, var(--c) 14%, #fff); }

.ag-print { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.ag-covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px,1.4vw,16px); }
.ag-covers li { transform: none !important; }
.ag-covers img { display: block; width: 100%; height: auto; box-shadow: 0 16px 30px -18px rgba(0,47,67,.5); }
.ag-print__text h2 { margin: 0 0 6px; }

@media (max-width: 960px) {
  .ag-brandrow, .ag-build, .ag-row, .ag-print { grid-template-columns: 1fr; }
  .ag-row--flip .ag-row__comp { order: 0; }
  .agc-vrt { grid-template-columns: 1fr; } .agc-zones { border-left: 0; border-top: 1px solid #EEF2F3; }
  .agc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .agc-tile, .agc-bar i, .agc-map i, .agc-zones tr, .agc-fields output { transition: none; } }
/* kontrast u komponentama: tamnija zelena za puna dugmad i tekst, tamna slova na narandžastoj */
.agc-btn--solid, .agc-foot .agc-btn { background: #0F7F33; border-color: #0F7F33; }
.agc-ok, .agc-big b { color: #0F7F33; }
.agc-band { color: #002F43; }
.agc-fields output, .agc-fields output.is-on { opacity: 1; }
.agc-vrt { grid-template-columns: 1.55fr 1fr; }
.agc-map { grid-auto-rows: 1fr; align-content: stretch; min-height: 100%; aspect-ratio: auto; }
.agc-map i { aspect-ratio: auto; min-height: 14px; }
.agc-zones table { min-width: 0; } .agc-zones td, .agc-zones th { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.ag-print__text h2 { font-size: clamp(32px, 3.4vw, 52px); max-width: 14ch; }
.ag-row { grid-template-columns: 1.4fr 1fr; }
@media (min-width: 961px) { .ag-row--flip { grid-template-columns: 1fr 1.4fr; } }
@media (max-width: 960px) { .ag-row, .ag-row--flip { grid-template-columns: 1fr; } .agc-vrt { grid-template-columns: 1fr; } .agc-map { min-height: 200px; } }
/* Agremo strana: bez zaobljenih ivica nigde */
.cs--agremo .ag-banner img, .cs--agremo .ag-wide, .cs--agremo .ag-wide img, .cs--agremo .ag-pair figure, .cs--agremo .ag-covers img { border-radius: 0; }

/* ===== Agremo v3: mali delovi aplikacije u priči (kao u prvoj studiji), ravne ivice ===== */
.ag-row { grid-template-columns: 1fr 1fr !important; gap: clamp(28px,5vw,80px); }
.ag-row--flip .ag-panel { order: 2; }
.ag-panel { aspect-ratio: 1 / .92; display: grid; place-items: center; padding: clamp(24px,4vw,56px); background: #F1F5F4; }
.ag-kicker { margin: 0 0 14px !important; font-size: 13px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4B5563 !important; display: flex; align-items: center; gap: 10px; }
.ag-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ag-kicker b { color: #111827; } .ag-kicker b::after { content: "·"; margin-left: 10px; color: #9CA3AF; }
.ag-row__text h3 { font-size: clamp(30px,3.2vw,48px) !important; line-height: 1.02 !important; letter-spacing: -0.045em !important; font-weight: 700; max-width: 15ch; }
.ag-row__text h3 span { color: var(--cs-dim); }
.agp-stack { width: min(100%, 440px); display: grid; gap: 12px; font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif; color: #1F2937; }
.agp-card { background: #fff; border: 1px solid #E3E9EA; box-shadow: 0 10px 24px -18px rgba(0,47,67,.45); padding: 14px 16px; font-size: 14px; }
.agp-card small { display: block; font-size: 12px; color: #4B5563; }
.agp-field { display: flex; gap: 12px; align-items: center; } .agp-field b { font-size: 16px; color: #002F43; }
.agp-pin { width: 14px; height: 14px; background: #20B849; clip-path: polygon(50% 100%, 0 35%, 15% 0, 85% 0, 100% 35%); flex: none; }
.agp-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; padding: 10px; }
.agp-steps span { padding: 8px 4px; text-align: center; font-size: 12px; color: #6B7280; background: #F3F6F6; transition: background .4s, color .4s; }
.agp-steps span.is-done { background: #E9FEEF; color: #0F7F33; }
.agp-steps span.is-now { background: #0F7F33; color: #fff; }
.agp-row2 { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; } .agp-row2 b { font-weight: 600; color: #002F43; }
.agp-select { display: flex; align-items: center; gap: 10px; background: #1E525F; color: #fff; border-color: #1E525F; font-weight: 600; }
.agp-dots { width: 12px; height: 12px; background: radial-gradient(circle, #FFC854 1.6px, transparent 2px) 0 0 / 4px 4px; }
.agp-caret { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-3px); }
.agp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.agp-chip { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 13px; border: 1px solid #EEF2F3; transition: border-color .3s, background .3s; }
.agp-chip img { width: 26px; height: 26px; }
.agp-chip.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.agp-legend { display: flex; align-items: center; gap: 6px; } .agp-legend i { width: 14px; height: 14px; } .agp-legend small { margin-left: 8px; }
.agp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.agp-stat b { display: block; margin-top: 6px; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #002F43; }
.agp-stat .agp-neg { color: #B4233A; }
.agp-sent p { margin: 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: #374151 !important; max-width: none !important; }
.agp-sent b { color: #002F43; }
.agp-bar { margin-top: 10px; height: 6px; background: #EEF2F3; }
.agp-bar i { display: block; height: 100%; width: 0; background: #20B849; }
.agp-bar i.is-on { width: 86%; transition: width 1.6s cubic-bezier(.2,.7,.2,1); }
.agp-ok { display: flex; align-items: center; gap: 10px; color: #0F7F33; font-weight: 600; }
.agp-tick { width: 16px; height: 16px; border: 1.5px solid #0F7F33; border-radius: 50%; position: relative; }
.agp-tick::after { content: ""; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px; border-right: 1.5px solid #0F7F33; border-bottom: 1.5px solid #0F7F33; transform: rotate(45deg); }
.agp-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 2px; padding: 10px; background: #2F4F2C; border-color: #2F4F2C; }
.agp-grid i { aspect-ratio: 1; background: #175668; transition: background .9s ease; }
.agp-zones { display: grid; gap: 4px; padding: 8px; }
.agp-zones span { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 13px; transition: background .4s; }
.agp-zones i { width: 12px; height: 12px; background: var(--c); } .agp-zones b { margin-left: auto; font-weight: 600; color: #002F43; }
.agp-zones span.is-on { background: color-mix(in srgb, var(--c) 14%, #fff); }
.agp-export { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agp-export em { font-style: normal; font-size: 12.5px; padding: 4px 8px; background: #F3F6F6; color: #002F43; }
.agp-go { margin-left: auto; padding: 7px 14px; background: #0F7F33; color: #fff; font-weight: 600; font-size: 13px; }
@media (max-width: 960px) { .ag-row, .ag-row--flip { grid-template-columns: 1fr !important; } .ag-row--flip .ag-panel { order: 0; } .ag-panel { aspect-ratio: auto; } }
@media (prefers-reduced-motion: reduce) { .agp-steps span, .agp-chip, .agp-bar i, .agp-grid i, .agp-zones span { transition: none !important; } }
.agp-steps span { color: #4B5563; }

/* Agremo: red logotipa i standard boja (ravne ivice) */
.ag-logos { margin-top: clamp(32px,4vw,56px); display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ag-line); background: #fff; }
.ag-logos figure { margin: 0; padding: clamp(22px,3vw,40px) clamp(16px,2vw,28px) 18px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; min-height: 190px; }
.ag-logos figure + figure { border-left: 1px solid var(--ag-line); }
.ag-logos img { width: min(170px, 92%); height: auto; margin: auto 0; }
.ag-logos img.is-black { filter: brightness(0); }
.ag-logos img.is-mark { width: 64px; }
.ag-logos figcaption { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #4B5563; }
.ag-logos__guide { position: relative; width: min(170px, 92%); margin: auto 0; }
.ag-logos__guide img { width: 100%; margin: 0; filter: grayscale(1) opacity(.28); }
.ag-logos__guide svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ag-logos__note text { font-family: "Caveat", "Segoe Print", cursive; font-size: 9px; fill: #374151; }
.ag-colour { margin-top: clamp(40px,5vw,72px); }
.ag-colour__head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px clamp(24px,4vw,64px); align-items: end; }
.ag-colour__head .ag-kicker { grid-column: 1 / -1; margin: 0 !important; }
.ag-colour__head h3 { margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: clamp(34px,4.4vw,64px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: #111827; }
.ag-colour__head h3 span { color: var(--cs-dim); }
.part .ag-colour__head p:last-child { margin: 0; }
.ag-cols { margin-top: clamp(24px,3vw,40px); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.ag-col { position: relative; display: flex; flex-direction: column; min-height: clamp(300px,30vw,420px); padding: clamp(18px,2.4vw,32px); color: #fff; }
.ag-col--primary { background: #20B849; color: #002F43; }
.ag-col--ink { background: #002F43; }
.ag-col--light { background: #F9FAFC; color: #002F43; border: 1px solid var(--ag-line); }
.ag-col__top { display: flex; justify-content: space-between; font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.ag-col h4 { margin: clamp(18px,2.4vw,32px) 0 18px; font-size: clamp(24px,2.4vw,34px); letter-spacing: -0.03em; line-height: 1.05; }
.ag-col dl { display: flex; gap: 32px; margin: 0; font-family: ui-monospace, Menlo, monospace; }
.ag-col dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ag-col dd { margin: 4px 0 0; font-size: 15px; }
.ag-col > span { display: none; }
.ag-col--primary { padding-bottom: clamp(18px,2.4vw,32px); }
.ag-col--primary > span { display: block; }
.ag-col--primary { --tint-gap: 0; }
.ag-col--primary span[style] { position: relative; }
.ag-col--primary .ag-tints { display: none; }
.ag-col--primary > span[style] { display: none; }
.ag-col__logo { margin-top: auto; width: 120px; height: auto; }
.ag-col__logo.is-white { filter: brightness(0) invert(1); }
.ag-col--primary .ag-col__logo { filter: brightness(0) saturate(100%); opacity: .9; }
.ag-accents { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 18px; border: 1px solid var(--ag-line); background: #fff; }
.part .ag-accents > p { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #4B5563; max-width: none; }
.ag-accents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ag-accents li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ag-accents i { width: 18px; height: 18px; } .ag-accents b { font-weight: 600; color: #111827; } .ag-accents code { font-size: 12px; color: #4B5563; }
@media (max-width: 960px) {
  .ag-logos { grid-template-columns: 1fr 1fr; } .ag-logos figure:nth-child(3) { border-left: 0; } .ag-logos figure:nth-child(n+3) { border-top: 1px solid var(--ag-line); }
  .ag-colour__head { grid-template-columns: 1fr; } .ag-cols { grid-template-columns: 1fr; } .ag-col { min-height: 240px; } .ag-accents { grid-template-columns: 1fr; }
}
.ag-col--primary .ag-tints { display: grid !important; grid-template-columns: repeat(5, 1fr); margin: auto calc(-1 * clamp(18px,2.4vw,32px)) 22px; }
.ag-tints span { display: block !important; height: 46px; position: relative; }
.ag-tints em { position: absolute; left: 10px; bottom: calc(100% + 6px); font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #002F43; }
.ag-col--primary .ag-col__logo { margin-top: 0; }
.ag-col--primary dt { opacity: 1; }
.ag-colour__head { grid-template-columns: 1.5fr 1fr; }
.ag-colour__head h3 { font-size: clamp(30px,3.6vw,54px); white-space: nowrap; }
.ag-col dl { flex-wrap: wrap; gap: 10px 22px; } .ag-col dd { white-space: nowrap; }
.ag-logos__guide img { filter: grayscale(1) opacity(.45); }
.ag-logos__guide svg g { stroke: #374151; }
@media (max-width: 960px) { .ag-colour__head h3 { white-space: normal; } }
/* Agremo: sezona u delovima (umesto velikog kalendara) */
.agp-strip { margin-top: 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.agp-strip span { padding: 7px 0; text-align: center; font-size: 12px; font-weight: 600; background: #F3F6F6; color: #4B5563; transition: background .4s, color .4s; }
.agp-strip span.is-past { background: #E9FEEF; color: #0F7F33; }
.agp-strip span.is-now { background: #0F7F33; color: #fff; }
.agp-report b { color: #002F43; font-size: 15px; }
.agp-report ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.agp-report li { font-size: 12.5px; padding: 4px 8px; background: #E9FEEF; color: #0B5F27; }
.agp-windows { position: relative; display: grid; gap: 8px; }
.agp-win { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 12.5px; }
.agp-win i { height: 10px; background: linear-gradient(90deg, transparent var(--a), var(--c) var(--a), var(--c) var(--b), transparent var(--b)), #F3F6F6; }
.agp-now { position: absolute; top: 8px; bottom: 8px; width: 2px; background: #002F43; left: 6%; margin-left: 120px; transform: translateX(calc(-1 * (120px * var(--k, 0)))); transition: left .8s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .agp-strip span, .agp-now { transition: none; } }
.agp-now { left: calc(136px + (100% - 152px) * var(--f, 0)); margin-left: 0; transform: none; transition: left .8s cubic-bezier(.2,.7,.2,1); }
/* Agremo: bez sive podloge iza delova aplikacije */
.ag-panel { background: none; padding: 0; aspect-ratio: auto; place-items: center start; }
.ag-row--flip .ag-panel { place-items: center end; }
@media (max-width: 960px) { .ag-panel, .ag-row--flip .ag-panel { place-items: center; } }
.ag-colour__head h3 { font-family: inherit; white-space: normal; font-size: clamp(30px,3.2vw,48px); line-height: 1.02; letter-spacing: -0.045em; max-width: 16ch; }
/* naslov i tekst jedan ispod drugog, kao na ostatku sajta */
.ag-colour__head { display: block; }
.ag-colour__head .ag-kicker { margin: 0 0 14px !important; }
.ag-colour__head h3 { max-width: 18ch; }
.part .ag-colour__head p:last-child { margin: 22px 0 0; max-width: 52ch; }
/* Agremo: tri kvadrata spojena u jednu traku */
.ag-tri { margin-top: clamp(32px,4vw,56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ag-tri img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
/* Agremo: boje analiza kao skale sa ključevima, bez rama; ikonice bez rama */
.ag-accents { display: block; margin-top: clamp(28px,3vw,40px); padding: 0; border: 0; background: none; }
.part .ag-accents__t { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4B5563; max-width: none; }
.ag-accents ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; }
.ag-accents li { display: block; }
.part .ag-accents li > p { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #111827; max-width: none; }
.ag-scale { display: grid; grid-template-columns: repeat(5, 1fr); }
.ag-scale span { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 58px; padding: 6px 8px; font-family: ui-monospace, Menlo, monospace; }
.ag-scale em { font-style: normal; font-size: 12px; font-weight: 600; }
.ag-scale small { font-size: 10px; opacity: .9; }
.ag-scale__dot { position: absolute; top: 8px; left: 8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ag-build figure { border: 0; padding-left: 0; padding-right: 0; }
@media (max-width: 960px) { .ag-accents ul { grid-template-columns: 1fr; } }
.ag-scale small { opacity: 1; }

/* ===== Agremo v4: komponente (blago zaobljene, sa senkom) ===== */
.agp-card { border-radius: 10px; border-color: #E5ECEC; box-shadow: 0 1px 2px rgba(0,47,67,.06), 0 12px 28px -14px rgba(0,47,67,.28); }
.agp-steps span, .agp-strip span, .agp-chip, .agp-export em, .agp-report li, .agp-zones span { border-radius: 6px; }
.agp-go, .agb { border-radius: 8px; }
.agp-grid i { border-radius: 2px; } .agp-grid { border-radius: 10px; }
.agp-select { border-radius: 10px; }
.agp-legend i, .agp-zones i { border-radius: 3px; }
.agp-bar, .agp-bar i { border-radius: 99px; }
.agp-chip { box-shadow: 0 1px 2px rgba(0,47,67,.05); }
.agp-chip.is-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.agp-steps span.is-now, .agp-strip span.is-now { box-shadow: 0 6px 14px -6px rgba(15,127,51,.6); }
/* alati */
.agp-stack--tools { width: min(100%, 440px); }
.agt-wrap { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.agt-rail { display: grid; gap: 4px; padding: 6px; }
.agt-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: #1E525F; transition: background .3s, color .3s; }
.agt-btn svg { width: 20px; height: 20px; }
.agt-btn.is-on { background: #1E525F; color: #fff; box-shadow: 0 6px 14px -6px rgba(30,82,95,.7); }
.agt-side { display: grid; gap: 12px; }
.agt-tip__t { display: block; font-weight: 600; color: #002F43; font-size: 15px; }
.agt-layers { display: grid; gap: 10px; }
.agt-layers label { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.agt-sw { position: relative; width: 34px; height: 20px; border-radius: 99px; background: #D5DEDF; transition: background .3s; }
.agt-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s; }
.agt-sw.is-on { background: #0F7F33; } .agt-sw.is-on::after { transform: translateX(14px); }
.agt-zoom { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: 18px; color: #1E525F; }
.agt-zoom b { font-size: 13px; font-weight: 600; color: #002F43; }
/* drawer */
.agd { overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid #E5ECEC; box-shadow: 0 1px 2px rgba(0,47,67,.06), 0 24px 48px -20px rgba(0,47,67,.35); transform: translateX(24px); opacity: .0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.agd.is-open { transform: none; opacity: 1; }
.agd-band { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #F69301; color: #002F43; }
.agd-band svg { width: 18px; height: 18px; } .agd-band b { font-size: 15px; } .agd-x { margin-left: auto; font-size: 20px; line-height: 1; }
.agd-body { padding: 16px; display: grid; gap: 14px; font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif; }
.agd-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; } .agd-meta span { color: #4B5563; } .agd-meta b { font-weight: 600; color: #002F43; }
.agd-big { text-align: center; } .agd-big b { display: block; font-size: 44px; line-height: 1; color: #0F7F33; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .agd-big span { font-size: 14px; color: #374151; }
.agd-note { padding: 12px; border-radius: 8px; background: #F6F8F8; font-size: 13.5px; color: #374151; text-align: center; } .agd-note b { color: #B4233A; }
.agd-actions { display: grid; gap: 8px; }
.agb { display: block; padding: 10px; text-align: center; font-weight: 600; font-size: 13.5px; background: #0F7F33; color: #fff; box-shadow: 0 6px 14px -8px rgba(15,127,51,.7); }
.agb--line { background: #fff; color: #0B6B33; border: 1px solid #20B849; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .agd { transform: none; opacity: 1; transition: none; } .agt-btn, .agt-sw, .agt-sw::after { transition: none; } }
/* boje analiza: pune skale 50–900, dve po redu, bez natpisa; ključ i HEX na hover */
.ag-accents ul { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
.part .ag-accents li > p { display: flex; gap: 10px; align-items: baseline; }
.ag-accents li > p code { font-size: 12px; font-weight: 400; color: #4B5563; }
.ag-scale { grid-template-columns: repeat(10, 1fr); }
.ag-scale span { height: 40px; padding: 0; position: relative; cursor: default; transition: transform .15s; }
.ag-scale span.is-base { box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.ag-scale span:hover { transform: scaleY(1.12); z-index: 2; }
.ag-scale span:hover::after { content: attr(data-k) " · " attr(data-hex); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; padding: 5px 8px; border-radius: 6px; background: #111827; color: #fff; font: 600 11px/1 ui-monospace, Menlo, monospace; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); pointer-events: none; }
@media (max-width: 960px) { .ag-accents ul { grid-template-columns: 1fr; } }
/* Agremo: logo u Deep Field boji na zelenoj kartici */
.ag-col--primary .ag-col__logo.is-ink { filter: none; opacity: 1; }
/* Agremo: ikonografija kao posebna sekcija */
.ag-iconsec { margin-top: clamp(32px,4vw,56px); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px,4vw,64px); align-items: start; }
.ag-iconsec figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ag-iconsec figcaption { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #4B5563; }
.ag-sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ag-sk-grid .ag-sk { width: 100%; height: auto; }
.ag-sk .ag-sk__note { font-family: "Caveat", "Segoe Print", cursive; font-size: 22px; fill: #374151; }
.ag-iconsec__done ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 10px; }
.ag-iconsec__done li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ag-iconsec__done img { width: clamp(58px, 5.4vw, 80px); height: auto; }
.ag-iconsec__done span { font-size: 12.5px; font-weight: 600; color: #374151; line-height: 1.25; }
@media (max-width: 960px) { .ag-iconsec { grid-template-columns: 1fr; } .ag-iconsec__done ul { grid-template-columns: repeat(3, 1fr); } }
.ag-iconsec { align-items: center; }
/* logo na mreži: tačne konstrukcione linije preko logotipa */
.ag-logos__guide { position: relative; width: min(200px, 94%); }
.ag-logos__guide img { width: 100%; display: block; filter: none; opacity: .55; }
.ag-logos__guide svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ag-logos__guide svg g[stroke] { stroke: #0D73D5; }
.ag-logos__note text { font-family: "Caveat", "Segoe Print", cursive; font-size: 7.5px; fill: #0D5BA8; }
.ag-logos__guide { width: min(230px, 96%); }
.ag-logos__guide img { filter: grayscale(1); opacity: .32; }
.ag-logos__note text { font-size: 10.5px; }
/* Agremo: mobilni ekrani, naslagani, bez okvira telefona */
.ag-row--mobile .ag-panel { place-items: center; }
.agm { position: relative; width: min(100%, 460px); height: 520px; font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif; color: #1F2937; }
.agm-s { position: absolute; top: 50%; width: 240px; height: 500px; border-radius: 28px; background: #fff; overflow: hidden; border: 1px solid #E5ECEC; box-shadow: 0 2px 4px rgba(0,47,67,.06), 0 30px 60px -24px rgba(0,47,67,.45); display: flex; flex-direction: column; }
.agm-s--1 { right: 0; transform: translateY(-50%); z-index: 3; }
.agm-s--2 { right: 112px; transform: translateY(-50%) scale(.88); transform-origin: right center; z-index: 2; filter: saturate(.9); }
.agm-s--3 { right: 210px; transform: translateY(-50%) scale(.76); transform-origin: right center; z-index: 1; filter: saturate(.85); }
.agm-s::before { content: ""; display: block; height: 22px; flex: none; background: linear-gradient(#fff,#fff); }
.agm-s::after { content: ""; position: absolute; bottom: 8px; left: 50%; width: 80px; height: 4px; margin-left: -40px; border-radius: 99px; background: #CBD5D6; }
.agm-top { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 16px 12px; border-bottom: 1px solid #EEF2F3; }
.agm-top b { font-size: 16px; color: #002F43; } .agm-top span { font-size: 12px; color: #4B5563; }
.agm-top--brand { background: #1E525F; border-bottom: 0; margin-top: -22px; padding-top: 28px; } .agm-top--brand b, .agm-top--brand span { color: #fff; }
.agm-s--1::before { background: #1E525F; }
.agm-hero { padding: 16px; text-align: center; } .agm-hero small { display: block; font-size: 12px; color: #4B5563; }
.agm-hero b { display: block; margin: 4px 0; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: #0F7F33; font-variant-numeric: tabular-nums; }
.agm-neg { display: inline-block; padding: 3px 8px; border-radius: 99px; background: #FDECEE; color: #B4233A; font-size: 12px; font-weight: 600; }
.agm-mini { display: grid; grid-template-columns: repeat(6,1fr); gap: 2px; margin: 0 16px; padding: 6px; border-radius: 10px; background: #2F4F2C; }
.agm-mini i, .agm-map i { aspect-ratio: 1; border-radius: 2px; background: #175668; transition: background .9s; }
.agm-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 16px; font-size: 13px; } .agm-dl dt { color: #4B5563; } .agm-dl dd { margin: 0; text-align: right; font-weight: 600; color: #002F43; }
.agm-btn { display: block; margin: auto 16px 22px; padding: 11px; border-radius: 10px; text-align: center; font-weight: 600; font-size: 14px; background: #0F7F33; color: #fff; box-shadow: 0 8px 16px -8px rgba(15,127,51,.7); }
.agm-list { list-style: none; margin: 0; padding: 6px 10px; display: grid; gap: 4px; }
.agm-list li { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid #F1F4F4; }
.agm-list img { width: 32px; height: 32px; } .agm-list b { display: block; font-size: 14px; color: #002F43; } .agm-list small { font-size: 12px; color: #4B5563; }
.agm-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.agm-map { display: grid; grid-template-columns: repeat(8,1fr); gap: 2px; padding: 8px; background: #2F4F2C; flex: 1; align-content: start; }
.agm-sheet { margin-top: -18px; padding: 14px 16px 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -8px 20px -10px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 4px; }
.agm-sheet b { color: #002F43; } .agm-sheet small { color: #4B5563; font-size: 12px; } .agm-sheet .agm-btn { margin: 10px 0 22px; }
@media (max-width: 960px) { .agm { width: 100%; height: 480px; } .agm-s { width: 210px; height: 440px; } .agm-s--2 { right: 92px; } .agm-s--3 { right: 170px; } }
@media (max-width: 420px) { .agm-s--3 { display: none; } .agm-s--2 { right: 110px; } }
@media (prefers-reduced-motion: reduce) { .agm-mini i, .agm-map i { transition: none; } }
@media (max-width: 960px) { .agm-dl { display: none; } .agm-s--1 .agm-btn { margin-top: 16px; } }
.agm-s--img::before { height: 18px; background: #fff; }
.agm-s--img img { display: block; width: 100%; height: auto; flex: none; }
.agm-s--img { overflow: hidden; }
.k-big.k-good { color: #15803D; }

/* ===== Conference Republic: obim i događaji po grupama ===== */
.cr-scope { list-style: none; margin: clamp(28px,3vw,40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid #E5E5E5; }
.cr-scope li { padding: 18px 14px 0 0; font-size: clamp(15px,1.3vw,18px); font-weight: 600; letter-spacing: -0.01em; color: #0A0A0A; }
.cr-scope b { display: block; margin-bottom: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 500; color: #737373; }
.cr-events { margin-top: clamp(24px,3vw,36px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cr-events--one { grid-template-columns: 1fr; }
.cr-ev { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px,2.4vw,32px); border: 1px solid #E5E5E5; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -28px rgba(0,0,0,.25); }
.cr-ev--feat { background: #0A0A0A; border-color: #0A0A0A; color: #FAFAFA; padding: clamp(28px,3.6vw,48px); }
.cr-ev__meta { margin: 0 !important; font-family: ui-monospace, Menlo, monospace; font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; color: #525252 !important; }
.cr-ev--feat .cr-ev__meta { color: #A3A3A3 !important; }
.cr-ev h3 { margin: 0; font-size: clamp(24px,2.4vw,34px); line-height: 1.05; letter-spacing: -0.03em; }
.cr-ev--feat h3 { font-size: clamp(34px,4vw,56px); }
.part .cr-ev p:not(.cr-ev__meta) { margin: 0; max-width: 62ch; }
.part .cr-ev--feat p:not(.cr-ev__meta) { color: #D4D4D4; }
.cr-ev__chips { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cr-ev__chips li { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #F5F5F5; color: #262626; }
.cr-ev--feat .cr-ev__chips li { background: #262626; color: #F5F5F5; }
@media (max-width: 960px) { .cr-events { grid-template-columns: 1fr; } .cr-scope { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } }
@media (max-width: 480px) { .cr-scope { grid-template-columns: repeat(2, 1fr); } }

/* Conference Republic: tok događaja kroz godine */
.cr-flow { margin-top: clamp(28px,4vw,56px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cr-flow svg { display: block; width: 100%; min-width: 820px; height: auto; overflow: visible; }
.cr-flow__axis line { stroke: #D4D4D4; stroke-width: 1; }
.cr-flow__years text { font: 500 12px/1 ui-monospace, Menlo, monospace; fill: #A3A3A3; text-anchor: middle; }
.cr-flow__years text.is-key { fill: #404040; }
.cr-lane { stroke: #0A0A0A; stroke-width: 2; stroke-linecap: round; }
.cr-flow__nodes circle { fill: #0A0A0A; }
.cr-mark { opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.cr-mark.is-on { opacity: 1; transform: none; }
.cr-flow__name { font: 700 22px/1 "Google Sans Flex", system-ui, sans-serif; letter-spacing: -0.02em; fill: #0A0A0A; }
.cr-flow__sub { font: 600 15px/1 "Google Sans Flex", system-ui, sans-serif; fill: #404040; }
.cr-end { opacity: 0; transition: opacity .5s ease; } .cr-end.is-on { opacity: 1; }
.cr-end circle:not(.cr-end__halo) { fill: #64DD17; }
.cr-end__halo { fill: #64DD17; opacity: .25; transform-box: fill-box; transform-origin: center; animation: crPulse 2s ease-out infinite; }
@keyframes crPulse { from { transform: scale(.6); opacity: .45; } to { transform: scale(1.8); opacity: 0; } }
.cr-flow__today { font: 500 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; fill: #404040; text-anchor: middle; opacity: 0; transition: opacity .5s; }
.cr-flow.is-done .cr-flow__today { opacity: 1; }
.cr-flow__sparks circle { fill: #64DD17; opacity: 0; filter: drop-shadow(0 0 6px rgba(100,221,23,.9)); }
@media (prefers-reduced-motion: reduce) { .cr-mark, .cr-end, .cr-flow__today { transition: none; } .cr-end__halo { animation: none; } }
/* tok: sve godine, boje brendova, isprekidana budućnost */
.cr-flow__years text { fill: #737373; }
.cr-flow__years text.is-key { fill: #0A0A0A; font-weight: 700; }
.cr-flow__years text.is-now { fill: #0A0A0A; font-weight: 700; }
.cr-flow__years text.is-next { fill: #A3A3A3; }
.cr-flow__years text.is-far { fill: #D4D4D4; }
.cr-flow__axis line.is-far { stroke: #EDEDED; }
.cr-lane { stroke-width: 2.5; }
.cr-fut { stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0; transition: opacity .8s ease .2s; }
.cr-flow.is-done .cr-fut { opacity: 1; }
.cr-flow__now { stroke: #D4D4D4; stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .5s; }
.cr-flow.is-done .cr-flow__now { opacity: 1; }
.cr-flow__today, .cr-flow__next { font: 500 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; opacity: 0; transition: opacity .5s; }
.cr-flow__today { fill: #404040; } .cr-flow__next { fill: #A3A3A3; }
.cr-flow.is-done .cr-flow__today, .cr-flow.is-done .cr-flow__next { opacity: 1; }
.cr-flow__sparks circle { filter: drop-shadow(0 0 6px var(--glow)); }
.cr-flow__today[text-anchor="end"] { text-anchor: end; } .cr-flow__next { text-anchor: start; }
/* Conference Republic: kartice u bojama brendova */
.cr-ev--crs, .cr-ev--ms, .cr-ev--gdi { border: 0; }
.cr-ev--crs { background: #571C9A; color: #fff; }
.cr-ev--ms { background: #0A0A0A; color: #fff; }
.cr-ev--gdi { background: #00ADEE; color: #04121A; }
.cr-ev--crs .cr-ev__meta, .cr-ev--ms .cr-ev__meta { color: rgba(255,255,255,.75) !important; }
.part .cr-ev--crs p:not(.cr-ev__meta), .part .cr-ev--ms p:not(.cr-ev__meta) { color: rgba(255,255,255,.88); }
.cr-ev--gdi .cr-ev__meta { color: #04121A !important; opacity: .8; }
.part .cr-ev--gdi p:not(.cr-ev__meta) { color: #04121A; }
.cr-ev--crs .cr-ev__chips li { background: rgba(255,255,255,.16); color: #fff; }
.cr-ev--ms .cr-ev__chips li { background: #262626; color: #F5F5F5; }
.cr-ev--gdi .cr-ev__chips li { background: rgba(4,18,26,.12); color: #04121A; }
/* GDi kartica: bela slova po GDi standardu */
.cr-ev--gdi { color: #fff; }
.cr-ev--gdi .cr-ev__meta { color: #fff !important; opacity: .9; }
.part .cr-ev--gdi p:not(.cr-ev__meta) { color: #fff; }
.cr-ev--gdi .cr-ev__chips li { background: rgba(255,255,255,.22); color: #fff; }
/* okviri logotipa kao deo toka: linija se razdvaja oko logotipa i ponovo spaja */
.cr-frame path { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.4,.1,.2,1); }
.cr-mark { opacity: 1; transform: none; }
.cr-mark.is-on .cr-frame path { stroke-dashoffset: 0; }
.cr-mark__in { opacity: 0; transition: opacity .5s ease .45s; }
.cr-mark.is-on .cr-mark__in { opacity: 1; }
.cr-mark > rect { opacity: 0; transition: opacity .3s; } .cr-mark.is-on > rect { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cr-frame path, .cr-mark__in, .cr-mark > rect { transition: none; } }
.cr-mark > .cr-mark__bg { opacity: 0; transition: opacity .3s; } .cr-mark.is-on > .cr-mark__bg { opacity: 1; }
/* tanje linije, više prostora oko logotipa */
.cr-lane, .cr-frame path, .cr-fut { stroke-width: 1.5; }
.cr-flow__sparks circle { r: 3.2; }

/* ===== Conference Republic v2: tamna strana, više brend nego web ===== */
.cs--cr { --cs-bg: #0A0A0A; --cs-card: #141414; --cs-raise: #262626; --cs-line: #262626; --cs-text: #F5F5F5; --cs-text-2: #C7C7C7; --cs-muted: #A3A3A3; --cs-dim: #8A8A8A; --cs-shadow: 0 24px 48px -24px rgba(0,0,0,.8); }
.cs--cr .part__label b { color: #F5F5F5; }
.cs--cr .cs-next__card { background: #141414; }
.cr-hero { min-height: 86vh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 120px 24px 40px; text-align: center; background: radial-gradient(60% 50% at 50% 45%, rgba(203,58,62,.32), transparent 70%), #0A0A0A; }
.cr-hero__logo { width: min(440px, 70vw); height: auto; filter: brightness(0) invert(1); }
.cr-hero__k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #A3A3A3; }
.cr-intro { padding: clamp(80px,12vw,160px) 0 clamp(40px,6vw,80px); text-align: center; }
.cr-intro p { margin: 0 auto; max-width: 26ch; font-size: clamp(28px,3.6vw,52px); line-height: 1.12; letter-spacing: -0.035em; font-weight: 500; color: #F5F5F5; text-wrap: balance; }
.cr-intro span { color: #7A7A7A; }
/* šest stubova */
.cr-pillars { list-style: none; margin: clamp(32px,4vw,56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cr-pill { position: relative; padding: 26px 24px 28px; min-height: 220px; border-radius: 18px; background: #141414; border: 1px solid #262626; display: flex; flex-direction: column; gap: 10px; transition: transform .3s ease, border-color .3s; }
.cr-pill:hover { transform: translateY(-3px); border-color: #3A3A3A; }
.cr-pill b { font: 500 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: #8A8A8A; }
.cr-pill h3 { margin: auto 0 0; font-size: clamp(22px,2vw,28px); letter-spacing: -0.03em; line-height: 1.05; }
.part .cr-pill p { margin: 0; font-size: 15px; line-height: 1.5; color: #A3A3A3; }
/* timeline na tamnom */
.cs--cr .cr-flow__axis line { stroke: #333; }
.cs--cr .cr-flow__years text { fill: #6B6B6B; } .cs--cr .cr-flow__years text.is-key, .cs--cr .cr-flow__years text.is-now { fill: #F5F5F5; }
.cs--cr .cr-flow__years text.is-next { fill: #555; } .cs--cr .cr-flow__years text.is-far { fill: #333; }
.cs--cr .cr-flow__now { stroke: #3A3A3A; } .cs--cr .cr-flow__today { fill: #C7C7C7; } .cs--cr .cr-flow__next { fill: #6B6B6B; }
.cs--cr .cr-lane[style*="120F24"], .cs--cr .cr-frame[style*="120F24"] { stroke: #E5E5E5 !important; }
.cs--cr .cr-flow__nodes circle[style*="120F24"], .cs--cr .cr-end circle[style*="120F24"], .cs--cr .cr-flow__sparks circle[style*="120F24"] { fill: #E5E5E5 !important; --glow: #fff; }
.cs--cr .cr-fut[stroke="url(#crg-sin)"] { stroke: #8A8A8A; }
/* ritam: projekti i arhetipi */
.cr-rhythm__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px,5vw,80px); align-items: start; }
.cr-beats { list-style: none; margin: 0; padding: 0; position: sticky; top: 20vh; }
.cr-beat { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 16px; padding: 6px 0; font-size: clamp(24px,2.8vw,40px); line-height: 1.12; letter-spacing: -0.035em; font-weight: 600; color: #4A4A4A; cursor: default; transition: color .4s; }
.cr-beat__a { font-weight: 400; }
.cr-beat.is-on .cr-beat__n { color: #F5F5F5; } .cr-beat.is-on .cr-beat__a { color: #CB3A3E; }
.cr-rhythm__side { position: sticky; top: 14vh; display: grid; gap: 18px; }
.cr-beat__ds { position: relative; min-height: 4.5em; }
.cr-beat__d { position: absolute; inset: 0 auto auto 0; margin: 0 !important; opacity: 0; transition: opacity .4s; font-size: 16px !important; color: #C7C7C7 !important; }
.cr-beat__d.is-on { opacity: 1; }
.cr-rhythm { padding-bottom: 30vh; }
/* placeholder za grafike koje stižu */
.cr-ph { position: relative; width: 100%; border-radius: 18px; background: repeating-linear-gradient(135deg, #141414 0 14px, #171717 14px 28px); border: 1px dashed #333; display: grid; place-items: center; }
.cr-ph span { font: 500 12px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: #6B6B6B; text-align: center; padding: 0 16px; }
/* geometrija: tri znaka, menjaju se pri skrolu */
.cr-geo { height: 320vh; margin-top: clamp(40px,6vw,80px); }
.cr-geo__sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,5vw,80px); align-items: center; }
.cr-geo__stage { position: relative; aspect-ratio: 1; width: 100%; max-height: 78vh; justify-self: end; }
.cr-geo__card { position: absolute; inset: 0; margin: 0; border-radius: 22px; background: #141414; border: 1px solid #262626; display: grid; place-items: center; opacity: 0; transform: scale(.97); transition: opacity .6s ease, transform .6s ease; }
.cr-geo__card.is-on { opacity: 1; transform: none; }
.cr-geo__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-geo__grid g { stroke: #2E2E2E; stroke-width: 1; }
.cr-geo__card img { position: relative; height: auto; filter: brightness(0) invert(1); }
.cr-geo__card figcaption { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #A3A3A3; }
.cr-geo__card figcaption b { color: #F5F5F5; font-size: 15px; }
/* tipografija */
.cr-type__spec { margin-top: clamp(28px,4vw,48px); display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px 48px; align-items: end; }
.part .cr-type__name { grid-column: 1 / -1; margin: 0; font-size: 15px; color: #A3A3A3; }
.part .cr-type__glyphs { margin: 0; max-width: none; font-size: clamp(30px,4.2vw,64px); line-height: 1.08; letter-spacing: -0.02em; color: #F5F5F5; word-break: break-all; }
.part .cr-type__note { margin: 0; padding: 18px 20px; border-radius: 14px; background: #141414; border: 1px solid #262626; font-size: 15px; }
/* palete */
.cr-pal { margin-top: clamp(28px,4vw,48px); display: grid; gap: 14px; }
.cr-pal__row { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: stretch; }
.part .cr-pal__b { margin: 0; align-self: center; font-size: 15px; font-weight: 600; color: #F5F5F5; }
.cr-pal__bars { display: flex; min-height: 120px; border-radius: 16px; overflow: hidden; }
.cr-sw { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 16px; font-size: 13px; }
.cr-sw b { font-weight: 600; } .cr-sw span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; opacity: .85; }
/* galerija: parovi se menjaju po brendu */
.cr-gal { height: 400vh; }
.cr-gal__sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr; gap: 20px; padding-top: 12vh; padding-bottom: 6vh; }
.cr-gal__tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cr-gal__tabs li { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #8A8A8A; border: 1px solid #262626; transition: color .3s, background .3s; }
.cr-gal__tabs li.is-on { color: #0A0A0A; background: #F5F5F5; border-color: #F5F5F5; }
.cr-gal__stage { position: relative; min-height: 0; }
.cr-pair { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.cr-pair.is-on { opacity: 1; transform: none; }
.cr-pair .cr-ph { aspect-ratio: auto !important; height: 100%; }
.cr-big { padding-top: 0; }
.cr-close { padding: clamp(100px,14vw,200px) 0 40px; text-align: center; }
.cr-close h2 { margin: 0 auto 56px; max-width: 22ch; font-size: clamp(30px,3.8vw,56px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 500; text-wrap: balance; }
.cr-close h2 span { color: #7A7A7A; }
.cr-close .cs-next { text-align: left; }
@media (max-width: 960px) {
  .cr-pillars { grid-template-columns: 1fr 1fr; }
  .cr-rhythm__grid, .cr-geo__sticky, .cr-type__spec { grid-template-columns: 1fr; }
  .cr-beats, .cr-rhythm__side { position: static; }
  .cr-geo { height: auto; } .cr-geo__sticky { position: static; height: auto; padding: 40px 0; }
  .cr-geo__stage { position: static; aspect-ratio: auto; max-height: none; display: grid; gap: 14px; }
  .cr-geo__card { position: relative; inset: auto; aspect-ratio: 1; opacity: 1; transform: none; }
  .cr-gal { height: auto; } .cr-gal__sticky { position: static; height: auto; padding: 0 0 40px; }
  .cr-gal__tabs { display: none; } .cr-gal__stage { display: grid; gap: 14px; }
  .cr-pair { position: static; opacity: 1; transform: none; } .cr-pair .cr-ph { aspect-ratio: 4 / 5 !important; height: auto; }
  .cr-pal__row { grid-template-columns: 1fr; gap: 8px; }
  .cr-beat__ds { min-height: 0; } .cr-beat__d { position: static; display: none; } .cr-beat__d.is-on { display: block; }
}
@media (max-width: 560px) { .cr-pillars { grid-template-columns: 1fr; } .cr-beat { font-size: 22px; } .cr-sw b { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .cr-geo__card, .cr-pair, .cr-beat, .cr-beat__d { transition: none; } }
.cr-geo h2 { margin: 0; max-width: 16ch; font-size: clamp(36px,4.6vw,68px); line-height: .98; font-weight: 700; letter-spacing: -0.05em; text-wrap: balance; }
.cr-geo h2 span { color: var(--cs-dim); }
.cr-geo__text p:not(.part__label) { margin: 22px 0 0; max-width: 40ch; font-size: clamp(17px,1.4vw,20px); line-height: 1.55; color: var(--cs-text-2); }
.cr-rhythm__grid { grid-template-columns: 1.45fr 1fr; }
.cr-beat { font-size: clamp(22px,2.4vw,34px); color: #7E7E7E; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.cr-intro span, .cr-close h2 span { color: #8C8C8C; }
.cr-ph span { color: #8A8A8A; }
.cs--cr { --cs-dim: #8C8C8C; }
/* hero: tekst kao u prvoj verziji, na tamnom */
.cr-hero2 { padding-top: clamp(120px,14vw,180px); }
.cs--cr .cs-hero h1 { color: #F5F5F5; }
.cs--cr .cs-dimw { color: #8C8C8C; }
/* šest stubova kao složen špil kartica */
.cr-deck { list-style: none; position: relative; margin: clamp(36px,5vw,64px) 0 0; padding: 0; height: clamp(360px,38vw,480px); }
.cr-card { position: absolute; bottom: 0; left: calc(var(--k) * 15%); width: 25%; height: calc(62% + var(--k) * 7.6%); padding: 22px 22px 24px; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: -18px 0 40px -18px rgba(0,0,0,.85); background: hsl(0 0% calc(9% + var(--k) * 2.2%)); border: 1px solid hsl(0 0% calc(16% + var(--k) * 2%)); outline: none; opacity: 0; transform: translateX(-30px); transition: opacity .6s ease calc(var(--k) * .09s), transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--k) * .09s), translate .3s ease; }
.cr-deck.is-in .cr-card { opacity: 1; transform: none; }
.cr-card:last-child { background: #CB3A3E; border-color: #CB3A3E; }
.cr-card b { font: 500 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: #A3A3A3; }
.cr-card:last-child b { color: rgba(255,255,255,.85); }
.cr-card h3 { margin: auto 0 0; font-size: clamp(18px,1.7vw,24px); line-height: 1.05; letter-spacing: -0.03em; color: #F5F5F5; }
.part .cr-card p { margin: 0; font-size: 14px; line-height: 1.45; color: #B5B5B5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .3s ease; }
.part .cr-card:last-child p, .cr-card:hover p, .cr-card:focus-visible p { max-height: 6em; opacity: 1; }
.part .cr-card:last-child p { color: rgba(255,255,255,.9); }
.cr-card:hover, .cr-card:focus-visible { translate: 0 -14px; }
.cr-card:focus-visible { box-shadow: 0 0 0 2px #F5F5F5; }
@media (max-width: 760px) {
  .cr-deck { height: auto; display: grid; gap: 10px; }
  .cr-card { position: relative; left: auto; width: auto; height: auto; min-height: 120px; opacity: 1; transform: none; }
  .part .cr-card p { max-height: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cr-card { transition: none; opacity: 1; transform: none; } }
.cr-card:last-child b { color: #fff; } .cr-card:last-child { background: #B8302F; border-color: #B8302F; }
.cr-card { left: calc(var(--k) * 15.5%); width: 22.5%; }
.cr-card h3 { font-size: clamp(16px,1.45vw,21px); max-width: 9ch; }
.cr-card:hover, .cr-card:focus-visible { z-index: 10; }
.cr-card:last-child h3 { max-width: none; }
.cr-gal__sticky { grid-template-rows: 1fr; padding-top: 10vh; }
/* timeline na tamnom: svetle linije, tamna polja iza logotipa, beli logotipi */
.cr-logo-w { filter: brightness(0) invert(1); }
.cs--cr .cr-flow__sub { fill: #E5E5E5; }
.cs--cr .cr-flow__sparks circle { filter: drop-shadow(0 0 6px var(--glow)); }
/* šest stubova: kartice po tri, na hover jaka boja */
.cr-pgrid { list-style: none; margin: clamp(36px,5vw,64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,2.4vw,40px); }
.cr-pc { aspect-ratio: 5 / 6; display: flex; flex-direction: column; padding: clamp(24px,3vw,44px); background: #141414; color: #F5F5F5; outline: none; transition: background .35s ease, color .35s ease; }
.cr-pc__n { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #A3A3A3; transition: color .35s; }
.cr-pc__chip { align-self: flex-start; margin-top: clamp(40px,6vw,88px); padding: 6px 14px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cr-pc h3 { margin: 22px 0 0; font-size: clamp(28px,2.9vw,44px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; }
.part .cr-pc p { margin: auto 0 0; padding-top: 20px; font-size: 15px; line-height: 1.5; color: #A3A3A3; max-width: 30ch; transition: color .35s; }
@media (max-width: 960px) { .cr-pgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cr-pgrid { grid-template-columns: 1fr; } .cr-pc { aspect-ratio: auto; min-height: 280px; } }
@media (prefers-reduced-motion: reduce) { .cr-pc, .cr-pc * { transition: none; } }
.cr-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .cr-pc { min-width: 0; } @media (max-width: 960px) { .cr-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .cr-pgrid { grid-template-columns: 1fr; } }
/* partneri: puna širina, levo brend, desno arhetip */
.cr-archlist { list-style: none; margin: clamp(24px,3vw,40px) 0 0; padding: 0; border-bottom: 1px solid #262626; }
.cr-arch { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; padding: clamp(14px,2vw,28px) 0; border-top: 1px solid #262626; }
.cr-arch__b { display: flex; align-items: center; gap: 12px; font: 400 clamp(12px,1vw,14px)/1.3 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: #C7C7C7; }
.cr-arch__b i { width: 10px; height: 10px; background: var(--c); flex: none; }
.cr-arch__a { display: flex; align-items: center; gap: clamp(14px,2vw,28px); font-size: clamp(44px,8.4vw,128px); line-height: .95; letter-spacing: -0.045em; font-weight: 500; color: #F5F5F5; white-space: nowrap; }
.cr-arch__a em { display: grid; place-items: center; width: clamp(28px,3vw,44px); height: clamp(28px,3vw,44px); border-radius: 8px; background: #1C1C1C; }
.cr-arch__a em i { width: 30%; height: 30%; background: var(--c); }
.cr-arch { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.cr-arch.is-in { opacity: 1; transform: none; }
@media (max-width: 760px) { .cr-arch { grid-template-columns: 1fr; gap: 10px; } .cr-arch__a { font-size: clamp(40px,12vw,64px); white-space: normal; } .cr-arch__a em { display: none; } }
@media (prefers-reduced-motion: reduce) { .cr-arch { opacity: 1; transform: none; transition: none; } }
/* partneri: bez kvadrata, manja slova, redom pri učitavanju, prevrtanje reči na hover */
.cr-arch__a { font-size: clamp(36px,6.2vw,96px); }
.cr-arch { transition-delay: calc(var(--i, 0) * 120ms); cursor: default; }
.cr-roll { display: inline-block; position: relative; overflow: hidden; height: 1.02em; line-height: 1.02; }
.cr-roll > span { display: block; transition: transform .55s cubic-bezier(.7,0,.2,1); }
.cr-roll > span + span { position: absolute; left: 0; top: 100%; color: var(--c); }
.cr-arch:hover .cr-roll > span { transform: translateY(-100%); }
.cr-arch__b { transition: color .3s; } .cr-arch:hover .cr-arch__b { color: #F5F5F5; }
@media (prefers-reduced-motion: reduce) { .cr-roll > span { transition: none; } }
/* stubovi: sve kartice iste visine na svakoj veličini */
.cr-pgrid { grid-auto-rows: 1fr; }
.cr-pc { aspect-ratio: auto; min-height: clamp(300px,34vw,440px); height: 100%; }
@media (max-width: 560px) { .cr-pc { min-height: 300px; } }
.cr-roll { height: 1.2em; line-height: 1.2; margin: -0.1em 0; }

/* broj izdanja: klizač i brojač koji se kotrlja */
.cr-count { margin-top: clamp(48px,7vw,96px); display: grid; justify-items: center; gap: clamp(20px,3vw,36px); text-align: center; }
.cr-count__num { margin: 0 !important; display: flex; align-items: flex-end; gap: 14px; max-width: none !important; }
.cr-odo { display: inline-flex; font-size: clamp(120px,20vw,280px); line-height: 1; font-weight: 700; letter-spacing: -0.06em; color: #F5F5F5; font-variant-numeric: tabular-nums; }
.cr-odo__d { display: inline-block; height: 1em; overflow: hidden; }
.cr-odo__d.is-off { display: none; }
.cr-odo__col { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cr-odo__col span { height: 1em; display: block; }
.cr-count__unit { margin-bottom: .9em; font-size: clamp(16px,1.6vw,22px); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #A3A3A3; }
.cr-count__slider { position: relative; width: min(100%, 720px); padding-top: 48px; }
.cr-count__bubble { position: absolute; top: 0; left: calc(var(--p, 1) * (100% - 28px) + 14px); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #CB3A3E; color: #fff; font-size: 16px; font-weight: 600; white-space: nowrap; }
.cr-count input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.cr-count input[type=range]::-webkit-slider-runnable-track { height: 28px; border-radius: 999px; background: linear-gradient(90deg, #CB3A3E calc(var(--p, 1) * 100%), #262626 0); }
.cr-count input[type=range]::-moz-range-track { height: 28px; border-radius: 999px; background: #262626; }
.cr-count input[type=range]::-moz-range-progress { height: 28px; border-radius: 999px; background: #CB3A3E; }
.cr-count input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 4px solid #CB3A3E; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.cr-count input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid #CB3A3E; }
.cr-count input[type=range]:focus-visible { outline: 2px solid #F5F5F5; outline-offset: 6px; border-radius: 999px; }
.part .cr-count__cap { margin: 0; max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 16px; color: #A3A3A3; }
.cr-count__cap span { display: inline-flex; align-items: center; gap: 8px; } .cr-count__cap span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cr-count__cap b { color: #F5F5F5; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .cr-odo__col { transition: none; } }

/* tipografija Science Fund: srebrna ploča, mreža, Segoe UI preko celog grida */
.cr-type__panel { position: relative; margin-top: clamp(28px,4vw,48px); aspect-ratio: 1000 / 480; border-radius: 6px; overflow: hidden; background: linear-gradient(115deg, #B9BEC2 0%, #A7ACB0 40%, #C6CACC 75%, #D6D9DA 100%); font-family: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, sans-serif; color: #111; container-type: inline-size; }
.cr-type__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-type__panel p { position: absolute; margin: 0 !important; max-width: none !important; color: #111 !important; font-weight: 700; font-size: clamp(11px, 2.05cqw, 26px); line-height: 1.12; letter-spacing: -0.02em; }
.cr-type__a { left: 2.6%; top: 4.6%; } .cr-type__b { left: 38.7%; top: 4.6%; } .cr-type__c { left: 74.2%; top: 4.6%; }
.cr-type__d { left: 38.7%; bottom: 4.6%; } .cr-type__e { left: 74.2%; bottom: 4.6%; }
.cr-type__panel .cr-type__big { left: 2.2%; right: 2%; top: 50%; transform: translateY(-58%); color: #fff !important; font-weight: 400; font-size: 17.6cqw; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; }
.part .cr-type__lede { margin-top: 22px; }
.cr-count__cap .cr-count__by::before { display: none; }
.cr-type__panel .cr-type__big { font-size: 20.4cqw; letter-spacing: -0.045em; }
/* partneri: bez linija, ulazak kroz zamućenje, glitch na hover */
.cr-archlist { border-bottom: 0; }
.cr-arch { border-top: 0; padding: clamp(6px,1vw,14px) 0; filter: blur(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; transition-delay: calc(var(--i, 0) * 140ms); }
.cr-arch.is-in { filter: none; }
.cr-gl { position: relative; display: inline-block; }
.cr-gl::before, .cr-gl::after { content: attr(data-t); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cr-gl::before { color: var(--c); }
.cr-gl::after { color: #00E5FF; }
.cr-arch:hover .cr-gl { animation: crBlur 1.2s steps(1) infinite; }
.cr-arch:hover .cr-gl::before { opacity: .9; animation: crGlA 1.2s steps(1) infinite; mix-blend-mode: screen; }
.cr-arch:hover .cr-gl::after { opacity: .75; animation: crGlB 1.2s steps(1) infinite; mix-blend-mode: screen; }
@keyframes crGlA { 0% { transform: translate(-4px,0); clip-path: inset(10% 0 62% 0); } 15% { transform: translate(5px,-2px); clip-path: inset(55% 0 20% 0); } 30% { transform: translate(-2px,1px); clip-path: inset(30% 0 45% 0); } 45% { transform: translate(3px,0); clip-path: inset(70% 0 5% 0); } 60% { transform: translate(-5px,2px); clip-path: inset(5% 0 80% 0); } 75% { transform: translate(2px,0); clip-path: inset(40% 0 35% 0); } 100% { transform: translate(-3px,0); clip-path: inset(20% 0 60% 0); } }
@keyframes crGlB { 0% { transform: translate(4px,0); clip-path: inset(65% 0 10% 0); } 20% { transform: translate(-3px,1px); clip-path: inset(15% 0 60% 0); } 40% { transform: translate(2px,-1px); clip-path: inset(45% 0 30% 0); } 60% { transform: translate(-4px,0); clip-path: inset(80% 0 2% 0); } 80% { transform: translate(5px,1px); clip-path: inset(25% 0 50% 0); } 100% { transform: translate(-2px,0); clip-path: inset(50% 0 25% 0); } }
@keyframes crBlur { 0%, 100% { filter: none; } 18% { filter: blur(1.5px); } 22% { filter: none; } 63% { filter: blur(2.5px); } 66% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .cr-arch { filter: none; } .cr-arch:hover .cr-gl, .cr-arch:hover .cr-gl::before, .cr-arch:hover .cr-gl::after { animation: none; opacity: 0; } }
/* geometrija: znak na boji brenda, vektorska konstrukciona mreža */
.cr-geo__card { border: 0; }
.cr-geo__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-geo__fine { stroke: rgba(255,255,255,.14); stroke-width: .6; }
.cr-geo__cons { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1; }
.cr-geo__cons .is-dash { stroke-dasharray: .012 .012; stroke-opacity: .55; }
.cr-geo__cons > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1); }
.cr-geo__cons > .is-dash { stroke-dasharray: .012 .012; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s ease .9s; }
.cr-geo__card.is-on .cr-geo__cons > * { stroke-dashoffset: 0; }
.cr-geo__card.is-on .cr-geo__cons > .is-dash { opacity: 1; }
.cr-geo__mark { opacity: 0; transition: opacity .8s ease .8s; }
.cr-geo__card.is-on .cr-geo__mark { opacity: 1; }
.cr-geo__card figcaption { color: rgba(255,255,255,.85); } .cr-geo__card figcaption b { color: #fff; }
@media (max-width: 960px) { .cr-geo__cons > *, .cr-geo__mark { stroke-dashoffset: 0 !important; opacity: 1 !important; } }
@media (prefers-reduced-motion: reduce) { .cr-geo__cons > *, .cr-geo__mark { transition: none; stroke-dashoffset: 0; opacity: 1; } }
.cr-geo__cons { mix-blend-mode: difference; stroke: rgba(255,255,255,.75); }
.cr-geo__cons { mix-blend-mode: normal; stroke: rgba(255,255,255,.75); }
.cr-geo__card[style*="00ADEE"] .cr-geo__cons { stroke: rgba(4,40,84,.75); }
.cr-geo__card[style*="00ADEE"] .cr-geo__fine { stroke: rgba(4,40,84,.16); }
/* uvod: bela ploča u gridu, crna slova, reč pod mišem dobija FF1744 marker */
.cr-intro { margin: clamp(56px,8vw,112px) 0 clamp(24px,4vw,56px); padding: clamp(56px,8vw,120px) clamp(24px,5vw,80px); background: #FFFFFF; border-radius: 22px; }
.cr-intro p { color: #0A0A0A; }
.cr-intro .cr-intro__dim { color: #6B6B6B; }
.cr-w { border-radius: 4px; background: linear-gradient(transparent 0, transparent 100%); transition: background-color .2s ease, color .2s ease; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cr-w:hover { background-color: rgba(236,0,63,.32); color: #0A0A0A; }
/* uvod: boje reči i marker kao na ostatku sajta (poluprovidan, preko donje polovine reči, uvlači se sleva) */
.cr-intro .cr-w { position: relative; color: inherit; background: none; border-radius: 0; }
.cr-intro > p > .cr-w { color: #0A0A0A; }
.cr-intro .cr-intro__dim, .cr-intro .cr-intro__dim .cr-w { color: #6B6B6B; }
.cr-intro .cr-w::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .36em; background: rgba(236,0,63,.45); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); pointer-events: none; z-index: -1; }
.cr-intro p { position: relative; z-index: 0; }
.cr-intro .cr-w:hover { background: none; color: #0A0A0A; }
.cr-intro .cr-w:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .cr-intro .cr-w::after { transition: none; } }
/* stubovi: odmah u bojama, bez hover-a */
.cr-pc, .cr-pc .cr-pc__n, .part .cr-pc p { color: #0A0A0A; }
.part .cr-pc p { opacity: .82; }
.part .cr-pc p { opacity: 1; }
/* stubovi: nadnaslov bez okvira, krupniji i deblji naslovi */
.cr-pc__chip { padding: 0; border: 0; border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.cr-pc h3 { margin-top: 12px; font-size: clamp(34px,3.6vw,56px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
/* timeline na telefonu: kompaktna verzija koja staje cela */
.cr-fm { display: none; }
@media (max-width: 760px) {
  .cr-flow { display: none; }
  .cr-fm { display: block; margin-top: 28px; }
  .cr-fm ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
  .part .cr-fm__name { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; max-width: none; font-size: 13px; color: #C7C7C7; padding-left: var(--s); }
  .cr-fm__name img { height: 22px; width: auto; }
  .cr-fm li:first-child .cr-fm__name { padding-left: 0; }
  .cr-fm__bar { position: relative; height: 10px; }
  .cr-fm__bar::before { content: ""; position: absolute; top: 4px; left: var(--now); right: 0; height: 0; border-top: 2px dotted var(--c); opacity: .45; }
  .cr-fm__bar i { position: absolute; top: 4px; left: var(--s); width: calc(var(--now) - var(--s)); height: 2px; background: var(--c); }
  .cr-fm__bar i::before, .cr-fm__bar i::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
  .cr-fm__bar i::before { left: -4px; } .cr-fm__bar i::after { right: -4px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 25%, transparent); }
  .cr-fm__axis { position: relative; height: 28px; margin-top: 20px; border-top: 1px solid #333; }
  .cr-fm__axis span { position: absolute; top: 8px; transform: translateX(-50%); font: 600 11px/1 ui-monospace, Menlo, monospace; color: #F5F5F5; }
  .cr-fm__axis span:first-child { transform: none; } .cr-fm__axis .is-far { color: #555; transform: translateX(-100%); }
}
/* klizač izdanja: manji, crno-beli */
.cr-odo { font-size: clamp(80px,12vw,168px); }
.cr-count__unit { color: #8C8C8C; }
.cr-count__slider { width: min(100%, 560px); padding-top: 40px; }
.cr-count__bubble { background: #F5F5F5; color: #0A0A0A; font-size: 13px; padding: 4px 10px; }
.cr-count input[type=range] { height: 18px; }
.cr-count input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #F5F5F5 calc(var(--p, 1) * 100%), #2E2E2E 0); }
.cr-count input[type=range]::-moz-range-track { height: 4px; background: #2E2E2E; }
.cr-count input[type=range]::-moz-range-progress { height: 4px; background: #F5F5F5; }
.cr-count input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border: 0; background: #F5F5F5; box-shadow: 0 0 0 4px #0A0A0A, 0 0 0 5px #3A3A3A; }
.cr-count input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; background: #F5F5F5; }
.cr-count__bubble { left: calc(var(--p, 1) * (100% - 18px) + 9px); }
.cr-count__cap span::before { background: #8C8C8C; }
/* klizač: traka iscrtana na samom polju, kružić tačno u sredini u svim pregledačima */
.cr-count input[type=range] { height: 18px; background: linear-gradient(90deg, #F5F5F5 0 calc(var(--p, 1) * 100%), #2E2E2E calc(var(--p, 1) * 100%) 100%) center / 100% 4px no-repeat; border-radius: 999px; }
.cr-count input[type=range]::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.cr-count input[type=range]::-moz-range-track { height: 18px; background: transparent; }
.cr-count input[type=range]::-moz-range-progress { background: transparent; }
.cr-count input[type=range]::-webkit-slider-thumb { margin-top: 0; }
/* veliki broj: bez sečenja sa strane */
.cr-odo { letter-spacing: -0.02em; }
.cr-odo__d { overflow: visible; clip-path: inset(0 -0.3em); padding: 0 .02em; }
/* stubovi: kvadratne kartice */
.cr-pc { aspect-ratio: 1; min-height: 0; height: auto; }
.cr-pc__chip { margin-top: auto; }
.cr-pc h3 { font-size: clamp(26px,2.7vw,42px); }
.part .cr-pc p { margin-top: 0; padding-top: 14px; font-size: 14px; }
@media (max-width: 960px) { .cr-pc h3 { font-size: clamp(24px,3.6vw,34px); } }
@media (max-width: 560px) { .cr-pc { aspect-ratio: 1; min-height: 0; } .cr-pc h3 { font-size: 30px; } }
.cr-pc__chip { margin-top: clamp(20px,2.6vw,36px); } .part .cr-pc p { margin-top: auto; }
.cs--cr .cs-lead { margin: 0 auto; color: #C7C7C7; text-align: center; }
/* geometrija na crnom: bez boje pozadine, ključne linije u boji brenda (poluprovidne) */
.cr-geo__card, .cr-geo__card[style] { background: #111111 !important; border: 1px solid #222; }
.cr-geo__card .cr-geo__fine, .cr-geo__card[style*="00ADEE"] .cr-geo__fine { stroke: rgba(255,255,255,.08); }
.cr-geo__card .cr-geo__cons, .cr-geo__card[style*="00ADEE"] .cr-geo__cons { stroke: rgba(255,255,255,.42); }
.cr-geo__cons [data-b] { stroke: var(--bc); stroke-opacity: .75; stroke-width: 1.4; }
.cr-geo__card figcaption { color: #A3A3A3; } .cr-geo__card figcaption b { color: #F5F5F5; }
.cr-geo__card, .cr-geo__card[style] { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.cr-geo__cons [data-b] { stroke-opacity: .85; stroke-width: 1.6; }
.cr-geo__fine, .cr-geo__card .cr-geo__fine, .cr-geo__card[style*="00ADEE"] .cr-geo__fine { stroke: rgba(255,255,255,.28); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }
/* geometrija kao crtež: tačkasta mreža, znak šrafiran sa tankom konturom, hairline konstrukcija */
.cr-geo__fine, .cr-geo__card .cr-geo__fine, .cr-geo__card[style*="00ADEE"] .cr-geo__fine { stroke: none; stroke-dasharray: none; fill: rgba(255,255,255,.22); }
.cr-geo__card .cr-geo__cons, .cr-geo__card[style*="00ADEE"] .cr-geo__cons { stroke: rgba(255,255,255,.38); stroke-width: .6; }
.cr-geo__cons [data-b] { stroke-width: .9; stroke-opacity: .9; }
.cr-hatch * { vector-effect: non-scaling-stroke; }
.cr-geo { height: 230vh; }
/* partneri: aurora preliv kroz slova na hover (umesto glitch-a) */
.cr-archs { --ink-2: #FF4FD8; --ink-3: #4FF8FF; }
.cr-arch:hover .cr-gl, .cr-arch:hover .cr-gl::before, .cr-arch:hover .cr-gl::after { animation: none; }
.cr-gl::before, .cr-gl::after, .cr-arch:hover .cr-gl::before, .cr-arch:hover .cr-gl::after { display: none; }
.cr-arch:hover .cr-gl {
  background: linear-gradient(115deg, var(--ink-2), var(--ink-3), var(--ink-2), var(--ink-3)) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: crAurora 7s linear infinite;
}
@keyframes crAurora { 0% { background-position: 0% 50%; filter: hue-rotate(0deg); } 100% { background-position: 300% 50%; filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cr-arch:hover .cr-gl { animation: none; } }
.cr-gl { padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.cr-arch:hover .cr-gl { animation-delay: var(--d, 0s); }
/* Part two: posterski naslov preko cele širine */
.part h2.cr-poster { max-width: none; margin: clamp(8px,2vw,24px) 0 0; font-size: clamp(64px, 15.5vw, 236px); line-height: .84; font-weight: 800; letter-spacing: -0.065em; text-wrap: nowrap; }
.cr-poster span { display: block; color: #F5F5F5; }
.cr-poster__l2 { padding-left: 18%; }
.cr-poster__l3, .cr-poster__l4 { color: #8C8C8C !important; }
.cr-poster__l3 { text-align: right; }
.cr-poster__l4 { padding-left: 4%; }
@media (max-width: 760px) { .part h2.cr-poster { font-size: clamp(54px, 17vw, 120px); } .cr-poster__l2 { padding-left: 10%; } }
.part h2.cr-poster { font-size: clamp(60px, 14.4vw, 220px); letter-spacing: -0.06em; }
.part h2.cr-poster .cr-poster__l1, .part h2.cr-poster .cr-poster__l2 { color: #F5F5F5; }
.part h2.cr-poster .cr-poster__l3, .part h2.cr-poster .cr-poster__l4 { color: #8C8C8C; }
.part h2.cr-poster { letter-spacing: -0.045em; font-size: clamp(56px, 13.6vw, 208px); }
.part h2.cr-poster span { padding-left: 0 !important; text-align: left !important; }
.part h2.cr-poster span, .part h2.cr-poster .cr-poster__l3, .part h2.cr-poster .cr-poster__l4 { color: #F5F5F5 !important; }
.part h2.cr-poster { letter-spacing: 0; font-size: clamp(50px, 12.2vw, 186px); }
.part h2.cr-poster { font-size: clamp(50px, 16vw, 222px); }
/* Part two: posterska kompozicija, reči razlomljene po gridu, sitan tekst u prazninama */
.cr-pst { margin-top: clamp(16px,2vw,28px); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(8px,1.4vw,20px); align-items: end; }
.cr-pst__w { display: block; font-size: clamp(76px, 21vw, 300px); line-height: .78; font-weight: 800; letter-spacing: 0; color: #F5F5F5; white-space: nowrap; text-transform: lowercase; }
.part .cr-pst__s { margin: 0; max-width: 22ch; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.25; font-weight: 700; color: #F5F5F5; letter-spacing: -0.005em; }
@media (max-width: 760px) { .cr-pst__w { font-size: clamp(64px, 23vw, 160px); } .part .cr-pst__s { font-size: 11px; max-width: 18ch; } }
@media (max-width: 760px) {
  .cr-pst { grid-template-columns: 1fr; row-gap: 0; }
  .cr-pst > * { grid-area: auto !important; }
  .part .cr-pst__s { max-width: 30ch; font-size: 12px; margin: 10px 0 14px; align-self: start !important; }
  .cr-pst__w { font-size: clamp(72px, 27vw, 160px); }
}
/* Part five: HELVETICA otkrivena traku po traku (po uzoru na posterski efekat) */
@property --v { syntax: '<number>'; inherits: true; initial-value: 0; }
.cr-art { margin-top: clamp(28px,4vw,48px); padding: clamp(28px,4vw,56px); background: #000; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.cr-art__stack { display: flex; flex-direction: column; }
.cr-art__r { display: block; font-weight: 700; font-size: clamp(40px, 10.6vw, 152px); line-height: .9; letter-spacing: .02em; white-space: nowrap;
  --v: 0; --s: .14em;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--v) * var(--s)), transparent calc(var(--v) * var(--s)) var(--s));
          mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--v) * var(--s)), transparent calc(var(--v) * var(--s)) var(--s));
  transition: --v 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms); }
.cr-art.is-in .cr-art__r { --v: var(--t); }
.cr-art__r:last-child { -webkit-mask-image: none; mask-image: none; }
.cr-art__foot { margin-top: clamp(28px,4vw,56px); display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; align-items: end; }
.part .cr-art__foot p { margin: 0; max-width: none; font-family: inherit; font-weight: 700; font-size: clamp(16px,1.8vw,26px); line-height: 1.05; color: #fff; }
.part .cr-art__foot .cr-art__small { font-size: 13px; font-weight: 600; line-height: 1.3; color: #fff; }
@media (max-width: 760px) { .cr-art__foot { grid-template-columns: 1fr 1fr; } .cr-art__small { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .cr-art__r { transition: none; } }
.cr-art__r { line-height: .82; } .part .cr-art__foot .cr-art__small { hyphens: manual; }
/* HELVETICA: bez crne ploče, preko celog grida, slova se raspadaju po komadima */
.cr-art { padding: 0; background: none; container-type: inline-size; }
.cr-art__r { font-size: 17.1cqw; line-height: .84; letter-spacing: .01em; -webkit-mask-image: none !important; mask-image: none !important; transition: none; display: flex; opacity: 0; transform: translateY(14px); transition: opacity .7s ease calc(var(--i) * 90ms), transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms); }
.cr-art__r > span { display: inline-block; }
.cr-art.is-in .cr-art__r { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cr-art__r { opacity: 1; transform: none; transition: none; } }
.cr-pst__w { text-transform: uppercase; font-weight: 600; font-size: clamp(60px, 16.4vw, 236px); line-height: .82; }
/* stubovi: statične kartice, bez ikakvog hover stanja */
.cr-pc { background: var(--hc); color: var(--tc, #0A0A0A); transition: none; cursor: default; }
.cr-pc .cr-pc__n, .part .cr-pc p, .cr-pc h3, .cr-pc__chip { color: var(--tc, #0A0A0A); transition: none; }
/* DEADLINE: reflektor prelazi preko inače ugašenih slova */
.cr-spot { --ink: #F5F5F5;
  background: radial-gradient(3.5ch 100% at 50% 50%, var(--ink) 20%, color-mix(in srgb, var(--ink) 14%, transparent) 75%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: crSpot 3.4s ease-in-out infinite alternate; }
.cr-spot--b { animation-delay: -1.7s; }
@keyframes crSpot { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .cr-spot { animation: none; background: none; color: #F5F5F5; } }
.part .cr-pst__s { font-weight: 400; }
.part .cr-art__foot .cr-art__small { font-weight: 400; }
.cs--cr .part__label::before, .cs--cr .cs-eyebrow::before { background: #EC003F; }
.cs--cr .cs-hero .rot::after { background: rgba(236,0,63,.55) !important; }
.cs--cr .cs-hero .cs-eyebrow::before { background: #EC003F; }
/* performanse: beskonačne animacije pauzirane van ekrana */
.cr-spot, .cr-end__halo { animation-play-state: paused; }
.cr-pst.is-vis .cr-spot, [data-crflow].is-vis .cr-end__halo { animation-play-state: running; }
.cr-arch { will-change: auto; }
.cr-geo__sticky, .cr-gal__sticky { contain: layout paint; }
/* partneri: preliv iz boja svakog brenda (bez promene nijanse, da boje ostanu svoje) */
.cr-arch:hover .cr-gl { background: linear-gradient(115deg, var(--g)) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: crBrandFlow 6s linear infinite; }
@keyframes crBrandFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@media (prefers-reduced-motion: reduce) { .cr-arch:hover .cr-gl { animation: none; } }
.cr-arch__a { font-weight: 700; letter-spacing: -0.045em; }
.cr-pal__bars, .cr-sw { border-radius: 0; }
.cs--cr .cs-next__card--accent .cs-next__title span { color: #EC003F; }
/* geometrija: samo konstrukcija iz koje je znak stvarno izveden, bez generičkih osa i dijagonala */
.cr-geo__card .cr-geo__cons, .cr-geo__card[style*="00ADEE"] .cr-geo__cons { stroke: rgba(255,255,255,.32); stroke-width: .6; }
.cr-geo__fine, .cr-geo__card .cr-geo__fine { fill: rgba(255,255,255,.16); }
/* geometrija na beloj ploči: sivi tehnički crtež */
.cr-geo__card, .cr-geo__card[style] { background: #FFFFFF !important; border: 0 !important; border-radius: 0 !important; }
.cr-geo__card .cr-geo__fine { fill: rgba(17,24,39,.22); }
.cr-geo__card .cr-geo__cons, .cr-geo__card[style*="00ADEE"] .cr-geo__cons { stroke: rgba(17,24,39,.38); stroke-width: .6; }
.cr-geo__cons [data-b] { stroke-opacity: 1; stroke-width: 1; }
.cr-geo__card .cr-hatch { stroke: #4B5563; }
.cr-geo__card pattern line { stroke: #6B7280; stroke-opacity: .8; }
/* Part seven: prošlost, sadašnjost, budućnost + pločice iz oblika znakova */
.part h2.cr-ppf__words { max-width: none; margin: 8px 0 0; font-size: clamp(56px, 12vw, 176px); line-height: .9; letter-spacing: .04em; text-transform: uppercase; }
.cr-ppf__words span { display: block; }
.part h2.cr-ppf__words .is-past { color: #6E6E6E; font-weight: 400; }
.part h2.cr-ppf__words .is-present { color: #F5F5F5; font-weight: 800; }
.part h2.cr-ppf__words .is-future { color: #8C8C8C; font-weight: 400; }
.cr-ppf__tiles { display: block; width: 100%; height: auto; margin-top: clamp(48px,7vw,96px); }
.cr-tile { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .5s ease var(--d), transform .6s cubic-bezier(.2,.7,.2,1) var(--d); }
.cr-ppf.is-in .cr-tile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cr-tile { opacity: 1; transform: none; transition: none; } }
/* Part seven: trake kao tok kroz vreme (prošlost siva, sadašnjost bela, budućnost isprekidana) */
.cr-seg { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); opacity: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1) var(--d), opacity .4s ease var(--d); }
.cr-ppf.is-in .cr-seg { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cr-seg { transform: none; opacity: 1; transition: none; } }
/* FUTURE razlomljeno: delovi slova, okrenuti i odsečeni ivicama, rečenice uspravno i vodoravno */
.cr-brk { position: relative; margin-top: clamp(8px,1vw,16px); aspect-ratio: 10 / 7; overflow: hidden; container-type: inline-size; }
.cr-brk__l { position: absolute; font-size: 34cqw; line-height: .8; font-weight: 400; text-transform: uppercase; transform: rotate(var(--r)); transform-origin: center; opacity: 0; transition: opacity .8s ease calc(var(--i) * 110ms), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 110ms); transform: rotate(calc(var(--r) + 12deg)) translateY(4%); }
.cr-brk.is-in .cr-brk__l { opacity: 1; transform: rotate(var(--r)); }
.part .cr-brk__s { position: absolute; margin: 0; max-width: 26ch; font-size: clamp(10px, 1.05cqw, 13px); line-height: 1.3; color: #C7C7C7; transform: rotate(var(--r)); transform-origin: left top; white-space: normal; }
.part .cr-brk__s[style*="--r:90deg"], .part .cr-brk__s[style*="--r:-90deg"] { white-space: nowrap; max-width: none; }
.part .cr-brk__s[style*="--r:-90deg"] { transform-origin: left bottom; }
@media (max-width: 760px) { .cr-brk { aspect-ratio: 4 / 5; } .cr-brk__l { font-size: 44cqw; } .part .cr-brk__s { font-size: 10px; max-width: 20ch; } }
@media (prefers-reduced-motion: reduce) { .cr-brk__l { opacity: 1; transform: rotate(var(--r)); transition: none; } }
@media (max-width: 760px) {
  .cr-brk { aspect-ratio: auto; overflow: visible; }
  .cr-brk__letters { position: relative; aspect-ratio: 1 / 1; overflow: hidden; container-type: inline-size; }
  .cr-brk__l { font-size: 40cqw; }
  .part .cr-brk__s { position: static; transform: none; white-space: normal !important; max-width: 34ch !important; font-size: 13px; margin: 12px 0 0; }
}
/* FUTURE: viši prostor, čitljiv redosled slova, tanke linije i sitni elementi kao na posteru */
.cr-brk { aspect-ratio: 10 / 13; }
.cr-brk__letters { position: absolute; inset: 0; }
.cr-brk__l { font-size: 36cqw; font-weight: 400; }
.cr-brk__deco { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.cr-brk__m { position: absolute; font: 500 clamp(9px,1cqw,12px)/1.2 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: #A3A3A3; white-space: nowrap; }
@media (max-width: 760px) {
  .cr-brk { aspect-ratio: auto; }
  .cr-brk__letters { position: relative; inset: auto; aspect-ratio: 10 / 13; }
  .cr-brk__l { font-size: 36cqw; }
  .cr-brk__m { font-size: 9px; }
}
@media (max-width: 760px) { .cr-brk__m[style*="top:97%"] { left: auto !important; right: 4%; } }
/* FUTURE podebljano */
.cr-brk__l { font-weight: 700; }
/* završni naslov kao na ostalim studijama */
.cr-close { text-align: left; }
.cr-close h2 { margin: 0 0 56px; max-width: 18ch; font-size: clamp(40px, 5.4vw, 80px); line-height: .96; font-weight: 700; letter-spacing: -0.05em; }
.cr-close h2 span { color: var(--cs-dim); }
.cr-fm__axis .is-far { color: #8A8A8A !important; }

/* jezička navigacija: kompaktan padajući meni */
.topbar__end { display: flex; align-items: center; gap: 8px; justify-self: end; }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; color: #0A0A0A; font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -14px rgba(0,0,0,.25); user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang summary i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.lang[open] summary i { transform: translateY(1px) rotate(-135deg); }
.lang summary:focus-visible { outline: 2px solid var(--accent, #64DD17); outline-offset: 2px; }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 150px; margin: 0; padding: 6px; list-style: none; background: #FFFFFF; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 40px -16px rgba(0,0,0,.35); }
.lang ul a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; color: #0A0A0A; text-decoration: none; }
.lang ul a b { width: 22px; font-size: 11px; letter-spacing: .06em; color: #6B6B6B; font-weight: 600; }
.lang ul a:hover, .lang ul a:focus-visible { background: #F2F2F2; outline: none; }
.lang ul a[aria-current="true"] { font-weight: 600; }
.lang ul a[aria-current="true"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #64DD17); }
.nav-sheet .lang { margin-top: 12px; align-self: flex-start; }
.nav-sheet .lang ul { left: 0; right: auto; top: auto; bottom: calc(100% + 6px); }
@media (max-width: 900px) { .topbar__end .lang { display: none; } }
.cs .topbar__end .lang { display: block; }
.cs .lang summary { height: 40px; }
@media (max-width: 480px) { .cs .topbar__back { font-size: 0; gap: 0; padding: 0 14px; } .cs .topbar__back span { font-size: 15px; } }