/* ============================================================
   BIRO 404 — SIGNAL WEBSITE SYSTEM (R404_SIGNAL_WEBSITE_R01)
   Jedan stylesheet za sve šablone. Tokeni = brand-tokens (R404_BRAND_SIGNAL_R01).
   Svet: mrak + svetlo signala. Archivo (display) + IBM Plex Mono (tehnički sloj).
   ============================================================ */

/* ---------- Fonts (self-hosted, latin + latin-ext) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Archivo-100-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Archivo-100-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens (brand-tokens R404_BRAND_SIGNAL_R01) ---------- */
:root {
  --bg: #050505;
  --bg-2: #0a0a0b;
  --panel: #101011;
  --line: rgba(244, 240, 230, 0.09);
  --line-strong: rgba(244, 240, 230, 0.16);

  --ink: #f4f0e6;
  --muted: #b7b2a6;
  --dim: #8b877b;
  --steel: #2e2d2a;

  --gold: #e9b850;
  --gold-hi: #ffe2a0;
  --gold-deep: #9a712c;
  --yellow: #f2c230;
  --live: #9ecf8e;

  --font-d: 'Archivo', 'Segoe UI', sans-serif;
  --font-m: 'IBM Plex Mono', 'Consolas', monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-lock: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-flash: 180ms;
  --t-activate: 650ms;
  --t-settle: 900ms;
  --t-pulse: 2400ms;
  --t-reveal: 700ms;

  --sig-line-w: 1.5px;
  --sig-glow: drop-shadow(0 0 8px rgba(233, 184, 80, 0.55))
              drop-shadow(0 0 32px rgba(233, 184, 80, 0.18));
  --sig-gradient: linear-gradient(90deg, var(--gold-hi), var(--gold) 40%, var(--gold-deep));

  --z-deep: 0;
  --z-behind: 5;
  --z-content: 10;
  --z-front: 20;
  --z-overlay: 30;

  --pad-x: clamp(20px, 5.2vw, 88px);
  --max-w: 1520px;
}
@media (max-width: 900px) {
  :root { --sig-line-w: 1.25px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #2e2c26 #0a0a0b;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-d);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: rgba(233, 184, 80, 0.28); color: var(--ink); }

.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap-n { /* narrow measure for text-heavy layouts */
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.tag {
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(233, 184, 80, 0.55);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 999px;
  font-family: var(--font-d);
  font-weight: 640;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 17px 12px 17px 26px;
  transition: transform 180ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn .arr {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform 220ms var(--ease-out);
}
.btn .arr svg { width: 14px; height: 14px; }
.btn:active { transform: scale(0.97); }

.btn-gold { background: var(--yellow); color: #131208; }
.btn-gold .arr { background: rgba(19, 18, 8, 0.12); }
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { background: #ffd44d; }
  .btn:hover .arr { transform: translateX(2px); }
}

.btn-ghost {
  background: rgba(244, 240, 230, 0.02);
  border-color: var(--line-strong);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.btn-ghost .arr { background: rgba(244, 240, 230, 0.07); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { border-color: rgba(244, 240, 230, 0.34); background: rgba(244, 240, 230, 0.05); }
}

/* ============================================================
   SIGNAL SYSTEM (canvas + CSS stanja) — vidi SIGNAL_IMPLEMENTATION_SPEC
   ============================================================ */
.sig-host { position: relative; }
.sig-canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  pointer-events: none;
}
.sig-host > .wrap, .sig-host > .wrap-n { position: relative; z-index: var(--z-content); }

/* Cilj signala: rađa se SLAB, signal ga pronađe → FOUND (jednosmerno) */
.sig-target { position: relative; }
.sig-target::after { /* rezidualna bela tačka — trag signala */
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 10px 2px rgba(233, 184, 80, 0.55);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--t-activate) var(--ease-out), transform var(--t-activate) var(--ease-lock);
}
.sig-target.is-found::after { opacity: 1; transform: none; }
.sig-target.is-found::before { /* flash 180ms pri pronalasku */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 226, 160, 0.28), transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: sigFlash var(--t-flash) ease-out 1;
}
@keyframes sigFlash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

/* Veliki broj/simbol kao cilj: čelik → zlatni gradijent + glow */
.sig-num {
  color: var(--steel);
  transition: color var(--t-activate) var(--ease-out), filter var(--t-activate) var(--ease-out);
}
.sig-num.is-found {
  color: transparent;
  background-image: var(--sig-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  filter: var(--sig-glow);
}
@supports not (background-clip: text) {
  .sig-num.is-found { color: var(--gold); background: none; }
}

/* Zlatna linija koja se iscrtava — statična posledica prolaska */
.sig-rule {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--sig-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-settle) var(--ease-io) 150ms;
  box-shadow: 0 0 14px rgba(233, 184, 80, 0.4);
}
.on .sig-rule, .sig-rule.on { transform: scaleX(1); }

/* HUD mono etiketa */
.hud {
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.hud.lit { color: var(--gold); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background-color 320ms ease, border-color 320ms ease, backdrop-filter 320ms ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-in {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 16px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: clamp(132px, 11vw, 158px); height: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 520;
  color: var(--muted);
  transition: color 160ms ease;
  padding: 6px 2px;
  position: relative;
}
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(233, 184, 80, 0.6);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ink); }
}

.nav-cta { padding: 13px 10px 13px 20px; font-size: 14px; }
.nav-cta .arr { width: 26px; height: 26px; }
.nav-cta .arr svg { width: 12px; height: 12px; }

.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.nav-burger span {
  display: block;
  width: 17px;
  height: 1.6px;
  background: var(--ink);
  transition: transform 320ms var(--ease-io), opacity 200ms ease;
}
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(5, 5, 5, 0.9);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad-x);
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms var(--ease-out), visibility 0s 360ms;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity 360ms var(--ease-out); }
.menu a {
  font-size: clamp(28px, 7.6vw, 40px);
  font-weight: 760;
  letter-spacing: -0.01em;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.menu.open a { opacity: 1; transform: none; }
.menu.open a:nth-child(1) { transition-delay: 60ms; }
.menu.open a:nth-child(2) { transition-delay: 105ms; }
.menu.open a:nth-child(3) { transition-delay: 150ms; }
.menu.open a:nth-child(4) { transition-delay: 195ms; }
.menu.open a:nth-child(5) { transition-delay: 240ms; }
.menu.open a:nth-child(6) { transition-delay: 285ms; }
.menu a .tag { display: block; margin-bottom: 4px; }
.menu-foot {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 34px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms var(--ease-out) 320ms, transform 420ms var(--ease-out) 320ms;
}
.menu.open .menu-foot { opacity: 1; transform: none; }
.menu-foot .btn { font-size: 15px; }
.menu-tel {
  font-family: var(--font-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* ============================================================
   HERO — naslovna (scroll-scrub video)
   ============================================================ */
.hero-track { height: 360svh; position: relative; }
.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  background: var(--bg);
}
.hero-media { position: absolute; inset: 0; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.82) 0%, rgba(5,5,5,0.44) 30%, rgba(5,5,5,0) 56%),
    linear-gradient(180deg, rgba(5,5,5,0.58) 0%, rgba(5,5,5,0) 24%, rgba(5,5,5,0) 74%, rgba(5,5,5,0.6) 100%),
    radial-gradient(125% 105% at 50% 46%, transparent 60%, rgba(5,5,5,0.4) 100%);
  pointer-events: none;
}
/* volumetrijski bloom — jača kako signal raste (—hp postavlja hero.js) */
.hero-atmo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 52% at 63% 44%, rgba(233, 184, 80, 0.17), transparent 68%),
    radial-gradient(90% 38% at 56% 98%, rgba(233, 184, 80, 0.1), transparent 72%);
  mix-blend-mode: screen;
  opacity: var(--hp, 0);
  pointer-events: none;
}
.hero-in {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-copy { max-width: 620px; display: grid; gap: 28px; }
.hero h1 {
  font-size: clamp(42px, 5vw, 86px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero h1 .q { color: var(--muted); font-weight: 640; }
.hero h1 .found {
  color: var(--muted);
  font-weight: 640;
  transition: color 900ms ease, text-shadow 900ms ease;
}
.hero h1 .found.lit {
  color: var(--gold-hi);
  text-shadow: 0 0 26px rgba(233, 184, 80, 0.45);
}
.hero-sub {
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 480px;
}
.hero-sub strong { color: var(--ink); font-weight: 620; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero-copy > * {
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn 1100ms var(--ease-out) forwards;
}
.hero-copy > *:nth-child(1) { animation-delay: 300ms; }
.hero-copy > *:nth-child(2) { animation-delay: 480ms; }
.hero-copy > *:nth-child(3) { animation-delay: 680ms; }
.hero-copy > *:nth-child(4) { animation-delay: 880ms; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.hero-signal {
  position: absolute;
  z-index: 3;
  right: var(--pad-x);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--dim);
  transition: color 500ms ease;
  text-shadow: 0 1px 10px rgba(5, 5, 5, 0.9), 0 0 22px rgba(5, 5, 5, 0.7);
}
.hero-signal .bar {
  width: 96px;
  height: 2px;
  background: rgba(244, 240, 230, 0.14);
  overflow: hidden;
}
.hero-signal .bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0);
  box-shadow: 0 0 10px rgba(233, 184, 80, 0.8);
}
.hero-signal.done { color: var(--gold); }

/* scroll cue — A/B/C state machine (mehanika sa starog sajta, SIGNAL jezik).
   Klik pomera scenu za ~45% staze; pri kraju vodi na sledeću sekciju. */
.hero-hint {
  position: absolute;
  z-index: 4;
  left: var(--pad-x);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: 0;
  padding: 10px 4px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  transition: opacity 600ms ease, color 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-hint:hover { color: var(--muted); }
}
.hero-hint .txt { display: block; }
.hero-hint[data-state="b"] .line::after { animation-duration: 1.5s; }
.hero-hint .line {
  width: 52px;
  height: 1px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}
.hero-hint .line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
  animation: hintSweep 2.2s var(--ease-io) infinite;
}
@keyframes hintSweep {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.hero-hint.gone { opacity: 0; pointer-events: none; }

.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  display: none;
}
/* Ušteda podataka / spora veza (§26): bez videa uopšte. Poster „upaljenog 404"
   se pretapa preko početnog kadra po istom --hp progresu — 265 KB umesto
   1.1–8.9 MB, a transformacija koju priča nosi ostaje vidljiva. */
.hero.no-video .hero-video { display: none; }
.hero.no-video .hero-poster { display: block; opacity: var(--hp, 0); }

/* Mobile hero: režirani stage (copy gore u mraku, scena dole — pun 404).
   Kraća staza signala nego na desktopu (§8): 240svh umesto 360svh. */
@media (max-aspect-ratio: 1/1) {
  .hero-track { height: 240svh; }
  .hero-in { justify-content: flex-start; padding-top: max(94px, 12.5svh); }
  .hero-copy { gap: 20px; }
  .hero h1 { font-size: clamp(36px, 10.8vw, 56px); }
  .hero-sub { font-size: 16px; max-width: 34ch; }
  /* na mobilnom je jedan glavni CTA dovoljan — drugi postaje tih link,
     čime se copy blok skraćuje i prestaje da ulazi u 404 scenu */
  .hero-ctas { gap: 16px; align-items: flex-start; }
  .hero-ctas .btn-ghost {
    background: none;
    border: 0;
    backdrop-filter: none;
    padding: 4px 2px;
    font-size: 14.5px;
    color: var(--muted);
    gap: 9px;
  }
  .hero-ctas .btn-ghost .arr {
    width: 22px;
    height: 22px;
    background: none;
    border: 1px solid var(--line-strong);
  }
  .hero-ctas .btn-ghost .arr svg { width: 11px; height: 11px; }

  .hero-media {
    inset: auto 0 0 0;
    height: auto;
    aspect-ratio: 1.067;
    max-height: min(48svh, calc(100svh - 500px));
    overflow: clip;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
  }
  .hero-video, .hero-poster {
    position: absolute;
    inset: 0 0 0 auto;
    height: 100%;
    width: auto;
    max-width: none;
  }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(5,5,5,0.62) 0%, rgba(5,5,5,0.1) 34%, rgba(5,5,5,0) 60%);
  }
  .hero-signal { bottom: 18px; left: var(--pad-x); right: auto; }
  .hero-signal .bar { width: 58px; }
  /* cue ostaje i na mobilnom — tu je staza najduža i poruka najpotrebnija */
  .hero-hint {
    left: auto;
    right: calc(var(--pad-x) - 4px);
    bottom: 12px;
    gap: 10px;
    letter-spacing: 0.18em;
    font-size: 10px;
  }
  .hero-hint .line { width: 30px; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .hero-in { padding-top: 84px; }
  .hero-copy { gap: 14px; }
  .hero h1 { font-size: clamp(27px, 8.4vw, 38px); }
  .hero-sub { font-size: 14px; }
  .btn { padding: 13px 10px 13px 20px; font-size: 14px; }
  .btn .arr { width: 26px; height: 26px; }
}

/* ============================================================
   CHAPTERS (deljeno) + reveal
   ============================================================ */
.chapter { position: relative; padding: clamp(120px, 13vw, 205px) 0; }
.chapter-head { display: grid; gap: 22px; max-width: 760px; margin-bottom: clamp(48px, 6vw, 88px); }
.chapter-head.head-c { justify-items: center; text-align: center; margin-inline: auto; }
.chapter-head.head-c p { margin-inline: auto; }
/* tekst samo za čitače ekrana (broj u sceni je dekorativan) */
.sr-num {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.chapter-head h2 {
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.chapter-head p { color: var(--muted); font-size: clamp(16px, 1.2vw, 18.5px); max-width: 560px; }

.rv {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.rv.on { opacity: 1; transform: none; filter: none; }

/* ============================================================
   NASLOVNA 01 — 54% MONUMENT (signal otkriva podatak)
   ============================================================ */
.stat {
  overflow: clip;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 20%, var(--bg-2) 80%, var(--bg) 100%);
}
.stat-stage {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(20px, 2.4vw, 32px);
}
/* svetlosni snop koji „otkriva“ podatak */
.stat-beam {
  position: absolute;
  inset: -16% -14% auto;
  height: 125%;
  background: radial-gradient(50% 72% at 50% 0%, rgba(233, 184, 80, 0.09), transparent 62%);
  opacity: 0;
  transition: opacity 1400ms var(--ease-out) 200ms;
  pointer-events: none;
}
.stat-stage.on .stat-beam { opacity: 1; }
.stat-num {
  position: relative;
  font-weight: 860;
  font-size: clamp(150px, 24vw, 400px);
  line-height: 0.86;
  letter-spacing: -0.035em;
}
/* SLAB stanje: čelik + treperenje; FOUND: tačkasti zlatni gradijent */
.stat-num.sig-num { color: var(--steel); }
.stat-num.sig-num:not(.is-found) { animation: sigWeak 1.9s ease-in-out infinite; }
@keyframes sigWeak {
  0%, 100% { opacity: 0.9; }
  42% { opacity: 0.68; }
  58% { opacity: 0.85; }
  71% { opacity: 0.62; }
}
.stat-num.sig-num.is-found {
  animation: none;
  color: transparent;
  background-image: radial-gradient(circle, var(--gold) 1.35px, rgba(233, 184, 80, 0.06) 1.75px);
  background-size: 7px 7px;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 32px rgba(233, 184, 80, 0.16));
}
@supports not (background-clip: text) {
  .stat-num.sig-num.is-found { color: var(--gold); background: none; }
}
.stat-stage h2 {
  font-size: clamp(26px, 2.7vw, 44px);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.018em;
  max-width: 640px;
  text-wrap: balance;
  margin-top: clamp(6px, 1vw, 14px);
}
.stat-stage > p { color: var(--muted); max-width: 560px; }
.stat-src {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--dim);
  text-transform: uppercase;
  margin-top: 8px;
}

/* ============================================================
   SIGNAL BREAK — kratki prekid između poglavlja.
   Pravilo §10: svaki break radi SEARCH / FIND / CONNECT. Nikad dekoracija.
   Progres --bp (0..1) postavlja site.js iz skrola; bez JS-a = završno stanje.
   ============================================================ */
.sig-break {
  position: relative;
  overflow: clip;
  --bp: 0;
}
.brk-in {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(52px, 8vh, 96px) var(--pad-x);
  display: grid;
  gap: 18px;
  justify-items: center;
}
/* Tiša varijanta za interne strane — 30–50% gustine naslovne (§20). */
.sig-break--q .brk-in { padding-block: clamp(38px, 5vh, 62px); gap: 14px; }
.sig-break--q .brk-svg { height: 28px; }
.sig-break--q .brk-rail-thin .brk-svg { height: 8px; }
.sig-break--q .brk-flip .brk-code,
.sig-break--q.brk-flip .brk-code { font-size: clamp(21px, 2.2vw, 32px); }
.sig-break--q .brk-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.brk-label {
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 600ms var(--ease-out);
}
.brk-rail { position: relative; display: block; width: 100%; }
.brk-svg { display: block; width: 100%; height: 40px; overflow: visible; }
.brk-rail-thin .brk-svg { height: 8px; }
.brk-svg path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.brk-base { stroke: rgba(244, 240, 230, 0.08); stroke-width: 1px; }
.brk-live {
  stroke: var(--gold);
  stroke-width: var(--sig-line-w);
  /* path nosi pathLength="1" u HTML-u, pa je dashoffset direktno 1-progres */
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--bp));
  filter: drop-shadow(0 0 6px rgba(233, 184, 80, 0.5));
}
/* glava signala klizi po širini prekida */
.brk-dot {
  position: absolute;
  top: 50%;
  left: calc(var(--bp) * 100%);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 10px 2px rgba(233, 184, 80, 0.6);
  opacity: calc(var(--bp) * 4);
}

/* A — TRAŽI: linija na trenutak pronađe novi smer (skretanje u putanji) */
.brk-search .brk-in { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.brk-search .brk-label-r { color: var(--steel); font-weight: 500; }

/* B — 404 → 200: aktivacija koda */
.brk-flip .brk-code {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 22px);
  font-family: var(--font-m);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 46px);
  letter-spacing: 0.06em;
  line-height: 1;
}
.brk-flip .c-off { color: var(--steel); transition: color 500ms var(--ease-out); }
.brk-flip .c-arrow { color: var(--dim); font-size: 0.6em; transform: translateY(-0.1em); }
.brk-flip .c-on {
  color: var(--steel);
  transition: color var(--t-activate) var(--ease-out), text-shadow var(--t-activate) var(--ease-out);
}
.sig-break.is-lit .brk-flip-scope { }
.brk-flip.is-lit .c-on { color: var(--gold-hi); text-shadow: 0 0 30px rgba(233, 184, 80, 0.45); }
.brk-flip.is-lit .brk-label { color: var(--gold); }

/* C — POVEZANO: dva segmenta se spajaju u sredini */
.brk-rail-join { height: 2px; display: block; }
.brk-rail-join .seg {
  position: absolute;
  top: 0;
  height: 1.5px;
  width: 50%;
  background: linear-gradient(90deg, transparent, var(--gold));
  box-shadow: 0 0 12px rgba(233, 184, 80, 0.45);
  transition: transform 820ms var(--ease-io);
}
.brk-rail-join .seg-l { left: 0; transform-origin: right center; transform: scaleX(0); }
.brk-rail-join .seg-r { right: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(270deg, transparent, var(--gold)); }
.brk-join.is-lit .seg-l, .brk-join.is-lit .seg-r { transform: scaleX(1); }
.brk-rail-join .brk-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 14px 3px rgba(233, 184, 80, 0.6);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 420ms var(--ease-out) 700ms, transform 540ms var(--ease-lock) 700ms;
}
.brk-join.is-lit .brk-lock { opacity: 1; transform: none; }
.brk-join.is-lit .brk-label-c { color: var(--gold); }
.brk-join .brk-in { gap: 22px; }

/* ============================================================
   NASLOVNA 02 — DEVICE SHOWROOM (radovi na stvarnim uređajima)
   Mobile: sekvencijalno, jedan glavni fokus po viewportu.
   Desktop: sticky pozornica, dve scene — prva odlazi u dubinu.
   ============================================================ */
.showroom {
  overflow: clip;
  background:
    radial-gradient(72% 44% at 50% 106%, rgba(233, 184, 80, 0.05), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #070708 46%, var(--bg) 100%);
}
/* prostorija: mirne tople svetlosne tačke u dubini */
.showroom .room { position: absolute; inset: 0; z-index: var(--z-deep); pointer-events: none; }
.showroom .room .lp {
  position: absolute;
  width: var(--s, 5px);
  height: var(--s, 5px);
  border-radius: 50%;
  background: var(--gold);
  opacity: var(--o, 0.25);
  filter: blur(1.5px);
  box-shadow: 0 0 18px 4px rgba(233, 184, 80, 0.22);
}

.show-track { position: relative; z-index: var(--z-content); }
.show-stage { position: relative; }
.scene { position: relative; display: grid; }
.scene-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 26px;
}
.scene-tag i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 1px rgba(233, 184, 80, 0.6);
}

/* ---------- uređaj: telo, ekran, odsjaj, etiketa ---------- */
.dev { position: relative; display: block; }
.dev-body {
  position: relative;
  z-index: 2;
  display: block;
  background: linear-gradient(160deg, #1a1a1c, #0b0b0c 60%);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(244, 240, 230, 0.09),
    inset 0 0 0 1px rgba(244, 240, 230, 0.06);
  transition: transform 420ms var(--ease-out);
}
.dev-screen { display: block; overflow: hidden; background: #0d0d0e; }
.dev-screen img { width: 100%; height: auto; display: block; }

/* 27" ekran + stalak */
.dev-27 .dev-body { border-radius: 12px; padding: 10px 10px 12px; }
.dev-27 .dev-screen { border-radius: 4px; }
.dev-stand { position: relative; z-index: 1; display: grid; justify-items: center; }
.dev-stand .neck {
  width: 13%;
  height: clamp(18px, 2.6vw, 40px);
  background: linear-gradient(180deg, #17171a, #0d0d0f);
  box-shadow: inset 1px 0 0 rgba(244, 240, 230, 0.05);
}
.dev-stand .foot {
  width: 34%;
  height: 7px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #17171a, #0a0a0b);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
}

/* laptop: ekran + baza */
.dev-lap .dev-body { border-radius: 11px 11px 3px 3px; padding: 9px 9px 14px; }
.dev-lap .dev-screen { border-radius: 3px; }
.dev-base {
  position: relative;
  z-index: 3;
  display: block;
  width: 108%;
  margin-inline: -4%;
  height: 11px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #202023, #0c0c0e);
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
}
.dev-base::after { /* udubljenje za otvaranje */
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: rgba(0, 0, 0, 0.5);
}

/* tablet */
.dev-tab .dev-body { border-radius: 22px; padding: 13px; }
.dev-tab .dev-screen { border-radius: 11px; }

/* telefon */
.dev-ph .dev-body { border-radius: 28px; padding: 7px; }
.dev-ph .dev-screen { border-radius: 22px; }
.dev-notch {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 5px;
  border-radius: 999px;
  background: rgba(6, 6, 7, 0.9);
}

/* Odsjaj na podu (samo veliki uređaji — na telefonu je trošak bez dobiti).
   Sloj je ISEČEN na malu visinu: bez toga se preliva preko etikete i pravi
   sivu mrlju umesto odsjaja. Maska je „naopaka" jer se slika u lokalnim
   koordinatama PRE scaleY(-1) — zamka iz R02. */
.dev-refl {
  display: block;
  position: relative;
  height: clamp(54px, 6vw, 104px);
  overflow: clip;
  margin-top: 3px;
  pointer-events: none;
}
.dev-refl img {
  position: absolute;
  left: 3%;
  top: 0;
  width: 94%;
  height: auto;
  transform: scaleY(-1);
  border-radius: 8px;
  opacity: 0.22;
  filter: blur(6px) brightness(0.5) saturate(0.75);
  -webkit-mask-image: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.9) 100%);
  mask-image: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.9) 100%);
}
.dev-refl::before { /* toplo svetlo ispod uređaja */
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  top: -18px;
  height: 100%;
  background: radial-gradient(52% 70% at 50% 0%, rgba(233, 184, 80, 0.14), transparent 74%);
  z-index: 1;
}

/* muzejska etiketa */
.dev-cap {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 5px;
  margin-top: 20px;
}
.dev-kind {
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
.dev-cap b { font-weight: 720; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: 0.004em; }
.dev-cap i {
  font-style: normal;
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.ex-status {
  font-family: var(--font-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.ex-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex: none;
}
.ex-status.live { color: var(--live); }
.ex-status.soon { color: var(--gold); }

/* Signal pronašao uređaj. Glow ide preko opacity sloja, ne preko tranzicije
   box-shadow-a: shadow je paint korak, a ovde se pali šest velikih elemenata. */
.dev.sig-target::after { top: 16px; right: 16px; z-index: 5; }
.dev-body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 58px rgba(233, 184, 80, 0.12),
    inset 0 0 0 1px rgba(233, 184, 80, 0.24);
  opacity: 0;
  transition: opacity var(--t-activate) var(--ease-out);
}
.dev.is-found .dev-body::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .dev:hover .dev-body { transform: translateY(-7px); }
  .dev:hover .dev-kind { opacity: 1; }
}

/* ---------- MOBILE (default): sekvencijalno, jedan fokus po viewportu ---------- */
.scene { gap: clamp(58px, 12vw, 84px); margin-bottom: clamp(64px, 14vw, 96px); }
.dev-ph { width: min(232px, 62%); justify-self: center; }
.dev-tab { width: min(330px, 82%); justify-self: center; }
.showroom .works-more { margin-top: clamp(28px, 6vw, 56px); }

/* ---------- TABLET+ : dve kolone unutar scene ---------- */
@media (min-width: 700px) and (max-width: 1023px) {
  .scene { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 48px); align-items: end; }
  .scene-tag { grid-column: 1 / -1; }
  .dev-27, .dev-27b { grid-column: 1 / -1; }
  .dev-ph, .dev-ph2 { width: min(240px, 92%); justify-self: center; }
  .dev-tab { width: min(360px, 96%); justify-self: center; }
}

/* ---------- DESKTOP: sticky pozornica, dve scene, dubina ---------- */
@media (min-width: 1024px) {
  .show-track { height: 240svh; }
  .show-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    overflow: clip;
  }
  .show-stage > .wrap { width: 100%; position: relative; }
  .scene {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    gap: 0;
    margin: 0;
    /* Asimetrično: scena koja odlazi je brža od scene koja dolazi — odlazak je
       sistemski odgovor, dolazak je ono što gledaš. Blur je 2px: veći je skup
       preko šest velikih slika, a razliku ne pravi. */
    transition:
      opacity 620ms var(--ease-out),
      transform 700ms var(--ease-io),
      filter 620ms var(--ease-out);
  }
  .show-track.at-b .scene-b,
  .scene-a {
    transition:
      opacity 900ms var(--ease-out) 120ms,
      transform 1000ms var(--ease-io) 120ms,
      filter 900ms var(--ease-out);
  }
  /* scene-b deli kutiju sa scene-a (inset:0). Bez align-content:end red sa
     etiketom scene ostaje na vrhu — inače isklizne iznad kutije, iza nav-a. */
  .scene-b { position: absolute; inset: 0; }
  .scene .scene-tag { grid-column: 1 / 8; grid-row: 1; align-self: start; margin-bottom: 0; }

  /* SCENA A — 27" pozadi u sredini, laptop levo napred, telefon desno napred */
  .scene-a .dev-27  { grid-column: 6 / 21; grid-row: 2; z-index: 1; }
  .scene-a .dev-lap { grid-column: 1 / 10; grid-row: 2; z-index: 2; align-self: end; margin-bottom: -2%; }
  .scene-a .dev-ph  { grid-column: 20 / 24; grid-row: 2; z-index: 3; width: 100%; align-self: end; margin-bottom: -4%; }

  /* SCENA B — 27" pozadi desno, tablet napred levo, telefon između (preko 27") */
  .scene-b .dev-27b { grid-column: 9 / 25; grid-row: 2; z-index: 1; }
  .scene-b .dev-tab { grid-column: 1 / 7;  grid-row: 2; z-index: 2; width: 100%; align-self: end; margin-bottom: -3%; }
  .scene-b .dev-ph2 { grid-column: 7 / 11; grid-row: 2; z-index: 3; width: 100%; align-self: end; margin-bottom: -6%; }

  /* Etiketa velikog ekrana ide uz DESNU ivicu svoje kolone — inače pada tačno
     preko etikete telefona koji stoji ispred njega. */
  .scene-b .dev-27b .dev-cap { justify-items: end; text-align: right; }
  .scene-a .dev-lap .dev-cap { max-width: 74%; }
  .scene-b .dev-tab .dev-cap { max-width: 96%; }

  /* dubina: scena A se povlači, scena B ulazi */
  .scene-b { opacity: 0; transform: translateY(34px) scale(0.965); pointer-events: none; }
  .show-track.at-b .scene-a {
    opacity: 0;
    transform: translateY(-26px) scale(0.9);
    filter: blur(2px);
    pointer-events: none;
    transition:
      opacity 620ms var(--ease-out),
      transform 700ms var(--ease-io),
      filter 620ms var(--ease-out);
  }
  .show-track.at-b .scene-b { opacity: 1; transform: none; pointer-events: auto; }

  /* na velikoj pozornici etiketa ide ispod uređaja, kompaktnija */
  .scene .dev-cap { margin-top: 16px; gap: 4px; }
  .scene-a .dev-ph .dev-cap, .scene-b .dev-ph2 .dev-cap { margin-top: 12px; }
}

/* ---------- 27" i veće: pozornica izlazi iz --max-w okvira ----------
   Na 2560 px centralna kolona od 1520 px pretvara „27-inčni ekran" u
   sličicu od 570 px. Scena zato dobija sopstvenu, širu meru (§32). */
@media (min-width: 1700px) {
  .show-track { height: 250svh; }
  .show-stage > .wrap { max-width: min(2180px, 94vw); }
  .scene-a .dev-27  { grid-column: 6 / 21; }
  .scene-a .dev-lap { grid-column: 1 / 9;  margin-bottom: -1.5%; }
  .scene-a .dev-ph  { grid-column: 20 / 24; }
  .scene-b .dev-27b { grid-column: 9 / 25; }
  .scene-b .dev-tab { grid-column: 1 / 7; }
  .scene-b .dev-ph2 { grid-column: 7 / 11; }
  .dev-cap b { font-size: 21px; }
  .dev-kind, .ex-status { font-size: 11px; }
  .showroom .chapter-head { max-width: 940px; }
}
/* pun 27" i veći: još vazduha oko scene, ali bez rastezanja teksta */
@media (min-width: 2300px) {
  .show-stage > .wrap { max-width: min(2320px, 92vw); }
  .showroom .chapter-head h2 { font-size: 64px; }
}

/* strelice-kružići (koristi i studija slučaja) */
.works-nav { display: flex; gap: 10px; flex: none; }
.works-nav button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(244, 240, 230, 0.02);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 180ms ease, background-color 180ms ease, transform 160ms var(--ease-out), opacity 180ms ease;
}
.works-nav button svg { width: 17px; height: 17px; }
.works-nav button:active { transform: scale(0.94); }
.works-nav button:disabled { opacity: 0.32; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .works-nav button:not(:disabled):hover { border-color: var(--gold); background: rgba(233, 184, 80, 0.06); }
}

.work-shot {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: #0d0d0e;
}
.work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-status {
  font-family: var(--font-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.work-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.work-status.live { color: var(--live); border-color: rgba(158, 207, 142, 0.32); }
.work-status.soon { color: var(--gold); border-color: rgba(233, 184, 80, 0.36); }

.works-more { display: flex; justify-content: center; margin-top: clamp(20px, 3vw, 36px); }

/* ============================================================
   NASLOVNA 02B — ZA SVAKU DELATNOST (rotator, mehanika R29B sa starog sajta)
   ============================================================ */
.trade {
  overflow: clip;
  padding: clamp(96px, 11vw, 160px) 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 30%, var(--bg-2) 70%, var(--bg) 100%);
}
.trade-band {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(20px, 2.6vw, 32px);
}
.trade-stmt {
  display: grid;
  justify-items: center;
  width: 100%;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.trade-stmt .t-lead,
.trade-stmt .t-tail {
  display: block;
  font-size: clamp(25px, 2.9vw, 48px);
  font-weight: 740;
  color: var(--muted);
}
.trade-stmt .t-tail { margin-top: 0.12em; }
/* maskirana vertikalna smena — fiksna visina, bez CLS-a */
.t-rot {
  position: relative;
  display: block;
  width: 100%;
  height: 1.16em;
  overflow: hidden;
  margin: 0.04em 0;
  font-size: clamp(40px, 7.2vw, 122px);
  font-weight: 850;
  letter-spacing: -0.028em;
}
.t-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--gold-hi);
  text-shadow: 0 0 34px rgba(233, 184, 80, 0.28);
  transform: translateY(112%);
  opacity: 0;
  transition: transform 560ms var(--ease-io), opacity 400ms ease;
}
.t-word.is-active { transform: none; opacity: 1; }
.t-word.is-exit { transform: translateY(-112%); opacity: 0; }
.t-word.no-anim { transition: none; }

/* ============================================================
   NASLOVNA 03 — SISTEM (jedan mehanizam: signal povezuje tri čvora)
   ============================================================ */
.system {
  background:
    radial-gradient(58% 52% at 50% 64%, rgba(233, 184, 80, 0.04), transparent 70%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sys-flow { position: relative; max-width: 1240px; margin-inline: auto; }

/* šina: jedna linija koja fizički povezuje tri čvora */
.sys-rail {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: rgba(244, 240, 230, 0.08);
}
.sys-rail i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sig-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 14px rgba(233, 184, 80, 0.5);
  transition: transform 1600ms var(--ease-io) 150ms;
}
.sys-flow.on .sys-rail i { transform: scaleX(1); }

.sys-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 72px);
}
.sys-node { position: relative; display: grid; gap: 13px; align-content: start; padding-top: 36px; }
.sys-node .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--steel);
  border: 1px solid rgba(244, 240, 230, 0.14);
  transition: background-color 400ms ease, box-shadow 400ms ease, border-color 400ms ease;
}
.sys-flow.on .sys-node .dot {
  background: var(--gold-hi);
  border-color: transparent;
  box-shadow: 0 0 16px 3px rgba(233, 184, 80, 0.55);
}
.sys-node .idx {
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 400ms ease;
}
.sys-flow.on .sys-node .idx { color: var(--gold); }
.sys-flow.on .sys-node:nth-child(1) .dot, .sys-flow.on .sys-node:nth-child(1) .idx { transition-delay: 300ms; }
.sys-flow.on .sys-node:nth-child(2) .dot, .sys-flow.on .sys-node:nth-child(2) .idx { transition-delay: 800ms; }
.sys-flow.on .sys-node:nth-child(3) .dot, .sys-flow.on .sys-node:nth-child(3) .idx { transition-delay: 1300ms; }
.sys-node h3 { font-size: clamp(20px, 1.7vw, 26px); font-weight: 740; letter-spacing: -0.01em; }
.sys-node p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* zaključak mehanizma — sistemski, monumentalno */
.sys-lock {
  margin-top: clamp(60px, 7vw, 100px);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 700ms var(--ease-out) 1750ms, transform 700ms var(--ease-lock) 1750ms;
}
.sys-flow.on .sys-lock { opacity: 1; transform: none; }
.sys-lock .code {
  font-family: var(--font-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--gold);
}
.sys-lock .label {
  font-weight: 820;
  font-size: clamp(34px, 3.8vw, 62px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gold-hi);
  text-shadow: 0 0 38px rgba(233, 184, 80, 0.33);
}
@media (max-width: 860px) {
  .sys-rail { top: 0; bottom: 0; left: 5px; right: auto; width: 1.5px; height: auto; }
  .sys-rail i {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1600ms var(--ease-io) 150ms;
  }
  .sys-flow.on .sys-rail i { transform: scaleY(1); }
  .sys-nodes { grid-template-columns: 1fr; row-gap: 46px; }
  .sys-node { padding-top: 0; padding-left: 36px; }
  .sys-node .dot { top: 3px; }
}

/* ============================================================
   NASLOVNA 04 — DVE BESPLATNE PROVERE (vraćeno sa starog sajta)
   Signal ovde pronalazi DVA cilja — u okviru pravila „max 3 cilja".
   ============================================================ */
.checks {
  overflow: clip;
  padding: clamp(90px, 11vw, 150px) 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 40%, var(--bg) 100%);
}
.checks .chapter-head h2 em {
  font-style: normal;
  color: var(--gold-hi);
  text-shadow: 0 0 30px rgba(233, 184, 80, 0.32);
}
.check-pair {
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  max-width: 1080px;
  margin-inline: auto;
}
.check {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(244, 240, 230, 0.015);
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.4vw, 32px);
  transition: border-color 300ms ease, background-color 300ms ease, transform 380ms var(--ease-out);
}
.ck-idx {
  font-family: var(--font-m);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  color: var(--steel);
  transition: color var(--t-activate) var(--ease-out), text-shadow var(--t-activate) var(--ease-out);
}
.check.is-found { border-color: rgba(233, 184, 80, 0.28); }
.check.is-found .ck-idx { color: var(--gold); text-shadow: 0 0 22px rgba(233, 184, 80, 0.4); }
.ck-body { display: grid; gap: 8px; min-width: 0; }
.ck-body b { font-weight: 720; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -0.008em; }
.ck-txt { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.ck-go {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  transition: color 220ms ease, border-color 220ms ease, transform 260ms var(--ease-out);
}
.ck-go svg { width: 16px; height: 16px; }
.check.is-found .ck-go { color: var(--gold); border-color: rgba(233, 184, 80, 0.34); }
.check.sig-target::after { top: 14px; right: 14px; }
@media (hover: hover) and (pointer: fine) {
  .check:hover { border-color: rgba(233, 184, 80, 0.42); background: rgba(233, 184, 80, 0.035); transform: translateY(-3px); }
  .check:hover .ck-go { transform: translateX(3px); color: var(--gold-hi); }
}
.check-note {
  color: var(--dim);
  font-size: 14px;
  text-align: center;
  margin-top: clamp(22px, 2.6vw, 34px);
}
@media (min-width: 860px) {
  .check-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check { grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: start; }
  .check .ck-go { display: none; }
  .check .ck-idx { align-self: start; }
}
@media (max-width: 480px) {
  .check { grid-template-columns: auto minmax(0, 1fr); }
  .check .ck-go { display: none; }
  .ck-idx { align-self: start; }
}

/* rotator: napomena o landing stranama */
.trade-note { color: var(--dim); font-size: 14.5px; max-width: 560px; margin-top: 6px; }
.trade-note a { color: var(--gold); border-bottom: 1px solid rgba(233, 184, 80, 0.3); }
@media (hover: hover) and (pointer: fine) {
  .trade-note a:hover { color: var(--gold-hi); border-bottom-color: var(--gold-hi); }
}

/* ============================================================
   NASLOVNA 05 — DOKAZ / CENE (editorial, bez kutija)
   ============================================================ */
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(44px, 6vw, 110px);
  align-items: start;
}
.proof-grid > * { min-width: 0; }

.proof-quote {
  position: relative;
  display: grid;
  gap: 30px;
  padding-top: clamp(32px, 3.6vw, 56px);
}
.proof-quote .qmark {
  position: absolute;
  top: -12px;
  left: -10px;
  font-size: clamp(110px, 11vw, 180px);
  line-height: 1;
  font-weight: 860;
  color: rgba(233, 184, 80, 0.15);
  pointer-events: none;
  user-select: none;
}
.proof-quote blockquote {
  position: relative;
  font-size: clamp(18.5px, 1.65vw, 24px);
  line-height: 1.58;
  font-weight: 470;
  color: var(--ink);
  text-wrap: pretty;
}
.quote-who { display: grid; gap: 5px; }
.quote-who .qw-rule { max-width: 84px; margin-bottom: 10px; }
.quote-who .who { font-weight: 700; font-size: 15.5px; }
.quote-who .role {
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.proof-prices {
  display: grid;
  gap: 24px;
  border-left: 1px solid var(--line);
  padding-left: clamp(30px, 3.8vw, 68px);
}
.proof-prices .lead {
  font-weight: 760;
  font-size: clamp(21px, 1.9vw, 28px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.price-rail { display: grid; }
.pr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}
.pr:first-child { border-top: 1px solid var(--line); }
.pr .pn b { display: block; font-weight: 680; font-size: clamp(16px, 1.3vw, 18.5px); }
.pr .pn i {
  font-style: normal;
  display: block;
  margin-top: 6px;
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.pr .pv {
  flex: none;
  font-weight: 850;
  font-size: clamp(40px, 3.8vw, 62px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.pr .pv em { font-style: normal; font-size: 0.44em; font-weight: 640; color: var(--muted); }
.price-note { color: var(--muted); font-size: 14.5px; max-width: 440px; }
.proof-prices .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 960px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-prices {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 36px;
  }
}

/* ============================================================
   FINAL CTA — povratak signala (ZAKLJUČANO)
   ============================================================ */
.final {
  position: relative;
  overflow: clip;
  border-top: 1px solid var(--line);
  padding: clamp(150px, 17vw, 260px) 0;
  text-align: center;
}
/* veliki tihi 404 — stvarna scena iz signala, prisutnija nego pre */
.final-bg {
  position: absolute;
  inset: 0;
  background-image: url('../video/poster-final.jpg');
  background-size: cover;
  background-position: 62% 42%;
  opacity: 0.62;
}
.final-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 56% at 50% 52%, rgba(5, 5, 5, 0.5), transparent 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(5,5,5,0.5) 28%, rgba(5,5,5,0.4) 62%, var(--bg) 100%);
}
.final-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 30px; }
.final h2 {
  font-size: clamp(38px, 4.6vw, 76px);
  font-weight: 820;
  letter-spacing: -0.024em;
  line-height: 1.02;
  max-width: 820px;
  text-wrap: balance;
}
.final h2 em {
  font-style: normal;
  color: var(--gold-hi);
  text-shadow: 0 0 34px rgba(233, 184, 80, 0.4);
  position: relative;
}
/* ZAKLJUČANO: bela tačka + idle puls ±5% */
.final h2 em::after {
  content: '';
  display: inline-block;
  width: 0.09em;
  height: 0.09em;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 14px 3px rgba(233, 184, 80, 0.55);
  margin-left: 0.08em;
  vertical-align: 0.06em;
  animation: sigPulse var(--t-pulse) ease-in-out infinite;
}
@keyframes sigPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.05); }
}
.final p { color: var(--muted); max-width: 520px; font-size: clamp(16px, 1.2vw, 18px); }
.final-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================
   FOOTER (svi šabloni)
   ============================================================ */
.foot { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) 0 34px; background: var(--bg); }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.foot-brand { display: grid; gap: 18px; align-content: start; }
.foot-brand img { width: 168px; height: auto; }
.foot-brand p { color: var(--muted); font-size: 15px; max-width: 340px; }
.foot h4 {
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}
.foot-col ul { display: grid; gap: 10px; }
.foot-col a { color: var(--muted); font-size: 15px; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .foot-col a:hover { color: var(--ink); }
}
.foot-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 26px;
}
.foot-base .tag a { color: var(--muted); }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ============================================================
   INTERNE STRANE — zaglavlje
   ============================================================ */
.page-head {
  padding: clamp(140px, 16vw, 210px) 0 clamp(56px, 7vw, 96px);
  position: relative;
  overflow: clip;
}
/* Trag da je signal prošao ovuda — tih atmosferski sloj, ne efekat.
   Interne strane nose 30–50% gustine naslovne (§20), pa je ovo statično. */
.page-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 78% at 12% 0%, rgba(233, 184, 80, 0.09), transparent 66%),
    radial-gradient(58% 46% at 88% 6%, rgba(233, 184, 80, 0.045), transparent 70%);
}
.page-atmo::after { /* hairline horizont — pod na koji svetlo pada */
  content: '';
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(233, 184, 80, 0.34), rgba(244, 240, 230, 0.05) 42%, transparent 78%);
}
@media (min-width: 1700px) {
  .page-head { padding-top: clamp(190px, 12vw, 250px); }
  .page-atmo { background:
    radial-gradient(38% 74% at 10% 0%, rgba(233, 184, 80, 0.1), transparent 64%),
    radial-gradient(48% 44% at 86% 4%, rgba(233, 184, 80, 0.05), transparent 68%); }
}
.page-head > .wrap, .page-head > .wrap-n { position: relative; z-index: 1; }
.page-head .crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.page-head .crumbs a { color: var(--dim); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .page-head .crumbs a:hover { color: var(--ink); }
}
.page-head .crumbs .sep { color: var(--steel); }
.page-head-in { display: grid; gap: 26px; max-width: 900px; }
.page-head h1 {
  font-size: clamp(38px, 5vw, 82px);
  font-weight: 810;
  line-height: 1.02;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.page-head h1 em { font-style: normal; color: var(--gold-hi); text-shadow: 0 0 30px rgba(233, 184, 80, 0.35); }
.page-head .sub { color: var(--muted); font-size: clamp(16.5px, 1.3vw, 19.5px); max-width: 640px; line-height: 1.65; }
.page-head .page-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.page-head .sig-rule { max-width: 220px; margin-top: 10px; }

/* mono meta red ispod naslova */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.meta-row .sep { color: var(--steel); }

/* CTA band — deljeni završni blok internih strana */
.cta-band {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 50% 115%, rgba(233, 184, 80, 0.1), transparent 60%),
    var(--bg-2);
  padding: clamp(90px, 10vw, 150px) 0;
  text-align: center;
}
.cta-band-in { display: grid; justify-items: center; gap: 26px; }
.cta-band h2 {
  font-size: clamp(30px, 3.4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.05;
  max-width: 760px;
  text-wrap: balance;
}
.cta-band p { color: var(--muted); max-width: 520px; }
.cta-band .final-ctas { margin-top: 4px; }

/* ============================================================
   ŠABLON: USLUGA
   ============================================================ */
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chip::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.svc-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(244, 240, 230, 0.015);
  padding: clamp(24px, 2.6vw, 38px);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: border-color 260ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .svc-item:hover { border-color: rgba(233, 184, 80, 0.3); }
}
.svc-item .idx { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); }
.svc-item h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 740; letter-spacing: -0.01em; }
.svc-item p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 760px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* proces — veliki brojevi kao sidra poglavlja */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); }
.step { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-strong); position: relative; }
.step .num {
  font-weight: 850;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.step h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 740; }
.step p { color: var(--muted); font-size: 15.5px; }
.step .hud { margin-top: 2px; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
}

/* iskrenost — panel sa zlatnom ivicom */
.honest {
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(233, 184, 80, 0.05), transparent 60%);
  padding: clamp(24px, 3vw, 40px);
  border-radius: 0 14px 14px 0;
  max-width: 860px;
}
.honest p { color: var(--muted); font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.7; }
.honest strong { color: var(--ink); font-weight: 640; }

/* vezani paket */
.svc-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  border: 1px solid rgba(233, 184, 80, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(233, 184, 80, 0.09), transparent 55%),
    var(--panel);
  padding: clamp(28px, 3.4vw, 52px);
}
.svc-offer .price {
  font-weight: 850;
  font-size: clamp(48px, 5vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.svc-offer h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 780; letter-spacing: -0.015em; }
.svc-offer .body { display: grid; gap: 14px; }
.svc-offer .body p { color: var(--muted); max-width: 520px; }
.svc-offer .side { display: grid; gap: 18px; justify-items: end; text-align: right; }
@media (max-width: 820px) {
  .svc-offer { grid-template-columns: 1fr; }
  .svc-offer .side { justify-items: start; text-align: left; }
}

/* FAQ — details */
.faq { display: grid; gap: 0; max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-size: clamp(16.5px, 1.35vw, 20px);
  font-weight: 640;
  transition: color 160ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ind {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 18px;
  color: var(--muted);
  transition: transform 300ms var(--ease-out), color 200ms ease, border-color 200ms ease;
}
.faq details[open] summary .ind { transform: rotate(45deg); color: var(--gold); border-color: rgba(233, 184, 80, 0.4); }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--gold-hi); }
}
.faq .faq-a { padding: 0 44px 24px 4px; color: var(--muted); max-width: 720px; }

/* ============================================================
   ŠABLON: STUDIJA SLUČAJA
   ============================================================ */
.case-hero { position: relative; }
.case-shot {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #0d0d0e;
  transition: border-color var(--t-activate) ease, box-shadow var(--t-activate) ease;
}
.case-shot img { width: 100%; height: auto; }
.case-shot.sig-target.is-found {
  border-color: rgba(233, 184, 80, 0.4);
  box-shadow: 0 0 60px rgba(233, 184, 80, 0.1);
}
.case-shot .shot-label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  transition: color var(--t-activate) ease, border-color var(--t-activate) ease;
}
.case-shot.is-found .shot-label { color: var(--gold); border-color: rgba(233, 184, 80, 0.36); }
.case-shot.sig-target::after { top: 16px; right: 16px; width: 7px; height: 7px; }

.case-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(26px, 3vw, 40px) 0;
}
.case-meta div { display: grid; gap: 8px; align-content: start; }
.case-meta .k {
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.case-meta .v { font-size: 15px; font-weight: 560; color: var(--ink); line-height: 1.45; }
@media (max-width: 900px) {
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.case-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.case-col {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(244, 240, 230, 0.015);
  padding: clamp(24px, 2.8vw, 40px);
  display: grid;
  gap: 18px;
  align-content: start;
}
.case-col.plus { border-color: rgba(233, 184, 80, 0.22); }
.case-col h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 740; }
.case-col ul { display: grid; gap: 12px; }
.case-col li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 15.5px;
}
.case-col li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--steel);
}
.case-col.plus li::before { background: var(--gold); box-shadow: 0 0 8px rgba(233, 184, 80, 0.5); }
@media (max-width: 760px) {
  .case-cols { grid-template-columns: 1fr; }
}

/* rezultati — monumentalne stvarne metrike */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.metric {
  border-top: 1px solid var(--line-strong);
  padding-top: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.metric .num {
  font-weight: 850;
  font-size: clamp(52px, 5.6vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.metric .what { font-weight: 640; font-size: 16.5px; }
.metric .how {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
@media (max-width: 760px) {
  .metrics { grid-template-columns: 1fr; gap: 36px; }
}

.case-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: clamp(24px, 3vw, 44px);
  transition: border-color 260ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .case-next:hover { border-color: rgba(233, 184, 80, 0.34); }
}
.case-next .lbl { display: grid; gap: 8px; }
.case-next .lbl .tag { color: var(--gold); }
.case-next .name { font-size: clamp(20px, 2vw, 30px); font-weight: 760; letter-spacing: -0.015em; }

/* ============================================================
   ŠABLON: RADOVI (portfolio grid)
   ============================================================ */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.work-card {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
  transition: border-color 260ms ease, transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .work-card:hover { border-color: rgba(233, 184, 80, 0.42); transform: translateY(-4px); }
  .work-card:hover .work-shot img { transform: scale(1.02); }
}
.work-card .work-shot img { transition: transform 700ms var(--ease-out); }
.work-card-body { padding: clamp(20px, 2.2vw, 32px); display: grid; gap: 12px; }
.work-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.work-card .kind {
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.work-card h3 { font-size: clamp(20px, 1.8vw, 27px); font-weight: 760; letter-spacing: -0.012em; }
.work-card p { color: var(--muted); font-size: 15.5px; }
.work-card .links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.work-card .links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 620;
  font-size: 14.5px;
  color: var(--gold);
  transition: color 160ms ease;
}
.work-card .links a svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  .work-card .links a:hover { color: var(--gold-hi); }
}
@media (max-width: 820px) {
  .works-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ŠABLON: CENE
   ============================================================ */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}
.plan {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(244, 240, 230, 0.015);
  padding: clamp(26px, 2.8vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}
.plan .p-name { font-size: clamp(20px, 1.8vw, 26px); font-weight: 760; letter-spacing: -0.012em; }
.plan .p-for { color: var(--muted); font-size: 15px; min-height: 2.6em; }
.plan .p-price { display: flex; align-items: baseline; gap: 12px; }
.plan .p-price .num {
  font-weight: 850;
  font-size: clamp(46px, 4.4vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.plan .p-price .per {
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.plan ul { display: grid; gap: 11px; }
.plan li { position: relative; padding-left: 24px; color: var(--muted); font-size: 15px; }
.plan li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.reco {
  border-color: rgba(233, 184, 80, 0.38);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(233, 184, 80, 0.09), transparent 60%),
    var(--panel);
  box-shadow: 0 0 60px rgba(233, 184, 80, 0.07);
}
.plan .reco-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #131208;
  background: var(--yellow);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* besplatan pregled — 0 € */
.zero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  padding: clamp(26px, 3vw, 48px);
}
.zero .num {
  font-weight: 850;
  font-size: clamp(64px, 7vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.zero .body { display: grid; gap: 10px; }
.zero h3 { font-size: clamp(20px, 1.9vw, 28px); font-weight: 760; }
.zero p { color: var(--muted); max-width: 520px; }
@media (max-width: 820px) {
  .zero { grid-template-columns: 1fr; }
}

/* veći projekti — mono tabela */
.big-table { border-top: 1px solid var(--line); max-width: 980px; }
.big-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.big-row .n { font-weight: 640; font-size: clamp(16px, 1.3vw, 19px); }
.big-row .d {
  font-family: var(--font-m);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: right;
}
@media (max-width: 640px) {
  .big-row { grid-template-columns: 1fr; gap: 6px; }
  .big-row .d { text-align: left; }
}

.fine {
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 720px;
}

/* šta menja cenu */
.factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; max-width: 980px; }
.factors li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15.5px;
}
.factors li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-family: var(--font-m);
}
@media (max-width: 700px) {
  .factors { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   ŠABLON: KONTAKT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.contact-acts { display: grid; gap: 14px; }
.act {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(244, 240, 230, 0.015);
  padding: clamp(20px, 2vw, 28px);
  transition: border-color 220ms ease, transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .act:hover { border-color: rgba(233, 184, 80, 0.38); transform: translateY(-2px); }
}
.act .ico {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.act .ico svg { width: 19px; height: 19px; }
.act .body { display: grid; gap: 3px; min-width: 0; }
.act .k {
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.act .v { font-weight: 700; font-size: clamp(16.5px, 1.4vw, 20px); letter-spacing: 0.002em; overflow-wrap: anywhere; }
.act .arr2 { margin-left: auto; color: var(--dim); flex: none; transition: color 200ms ease, transform 220ms var(--ease-out); }
.act .arr2 svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .act:hover .arr2 { color: var(--gold); transform: translateX(3px); }
}

.avail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 4px 0;
}
.avail::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 10px rgba(158, 207, 142, 0.7);
  animation: sigPulse var(--t-pulse) ease-in-out infinite;
}

/* forma */
.cform {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: clamp(26px, 3vw, 46px);
  display: grid;
  gap: 20px;
}
.cform .frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 9px; }
.field label {
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.field input, .field textarea, .field select {
  width: 100%;
  background: rgba(244, 240, 230, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-d);
  font-size: 15.5px;
  padding: 14px 16px;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: rgba(233, 184, 80, 0.55);
  background: rgba(244, 240, 230, 0.045);
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.cform-tag {
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cform-tag::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(233, 184, 80, 0.6);
}
.field-hint { color: var(--dim); font-size: 12.5px; line-height: 1.45; }

/* progressive disclosure — sve što nije neophodno stoji sklopljeno */
.cform-more { border-top: 1px solid var(--line); padding-top: 18px; }
.cform-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 620;
  color: var(--muted);
  transition: color 180ms ease;
}
.cform-more summary::-webkit-details-marker { display: none; }
.cform-more summary i { font-style: normal; color: var(--dim); font-weight: 400; font-size: 13px; }
.cform-more summary .ind {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
  transition: transform 300ms var(--ease-out), color 200ms ease, border-color 200ms ease;
}
.cform-more[open] summary .ind { transform: rotate(45deg); color: var(--gold); border-color: rgba(233, 184, 80, 0.4); }
@media (hover: hover) and (pointer: fine) {
  .cform-more summary:hover { color: var(--ink); }
}
.cform-more .frow { margin-top: 20px; }

/* izlaz koji uvek postoji */
.send-panel {
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(233, 184, 80, 0.28);
  padding-top: 22px;
  margin-top: 4px;
}
.send-panel[hidden] { display: none; }
.sp-title {
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.sp-sum {
  width: 100%;
  background: rgba(244, 240, 230, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-m);
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 16px;
  resize: vertical;
}
.sp-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-acts .btn { font-size: 14px; padding: 13px 10px 13px 20px; }
.sp-acts .btn-ghost { padding-right: 20px; }

.cform .consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.5;
}
.cform .consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--yellow); flex: none; }
.cform .btn { justify-self: start; }
.cform .form-note { color: var(--dim); font-size: 13px; }
@media (max-width: 620px) {
  .cform .frow { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ŠABLON: VODIČ / ČLANAK
   ============================================================ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 70;
  background: transparent;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sig-gradient);
  transform-origin: left center;
  transform: scaleX(0);
  box-shadow: 0 0 10px rgba(233, 184, 80, 0.7);
}

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.article { max-width: 720px; }
.article > * + * { margin-top: 26px; }
.article h2 {
  font-size: clamp(25px, 2.3vw, 36px);
  font-weight: 770;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin-top: clamp(52px, 5vw, 76px);
  scroll-margin-top: 110px;
}
/* Chapter marker (§19): broj poglavlja je SLAB dok se do njega ne stigne,
   pa ga „čitalački signal" aktivira. Jednosmerno, kao i svaki FOUND. */
.article h2 .h-idx {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--steel);
  margin-bottom: 12px;
  transition: color var(--t-activate) var(--ease-out);
}
.article h2 .h-idx::after {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width 700ms var(--ease-io), box-shadow var(--t-activate) ease;
}
.article h2.lit .h-idx { color: var(--gold); }
.article h2.lit .h-idx::after { width: 52px; box-shadow: 0 0 10px rgba(233, 184, 80, 0.55); }
.article p { color: var(--muted); font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.75; }
.article p strong, .article li strong { color: var(--ink); font-weight: 640; }
.article .lead-p {
  color: var(--ink);
  font-size: clamp(18px, 1.5vw, 21.5px);
  font-weight: 460;
  line-height: 1.65;
}
.article ul { display: grid; gap: 12px; }
.article ul li { position: relative; padding-left: 26px; color: var(--muted); font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.65; }
.article ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.pull {
  border-left: 2px solid var(--gold);
  padding: 6px 0 6px clamp(20px, 2.4vw, 34px);
  margin-top: clamp(36px, 4vw, 52px);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 620;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.keybox {
  border: 1px solid rgba(233, 184, 80, 0.3);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(233, 184, 80, 0.06), rgba(233, 184, 80, 0.015));
  padding: clamp(22px, 2.6vw, 36px);
  display: grid;
  gap: 14px;
  margin-top: clamp(36px, 4vw, 52px);
}
.keybox .k-title {
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.keybox p { color: var(--ink); font-weight: 500; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.6; }

.toc {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 4px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.toc .t-title {
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.toc a {
  color: var(--dim);
  font-size: 14px;
  line-height: 1.45;
  padding: 6px 0;
  transition: color 180ms ease;
  position: relative;
}
.toc a.cur { color: var(--gold); }
.toc a.cur::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(233, 184, 80, 0.6);
}
@media (hover: hover) and (pointer: fine) {
  .toc a:hover { color: var(--ink); }
}
@media (max-width: 1020px) {
  .article-grid { grid-template-columns: 1fr; }
  .toc { display: none; }
}

/* povezani vodiči */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.rel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(244, 240, 230, 0.015);
  padding: clamp(20px, 2.2vw, 30px);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: border-color 240ms ease, transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rel:hover { border-color: rgba(233, 184, 80, 0.34); transform: translateY(-3px); }
}
.rel .kind { font-family: var(--font-m); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.rel h3 { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.3; letter-spacing: -0.008em; }
.rel p { color: var(--dim); font-size: 13.5px; }
@media (max-width: 760px) {
  .related { grid-template-columns: 1fr; }
}

/* ============================================================
   Sitne zajedničke stvari
   ============================================================ */
.sec { padding: clamp(72px, 8vw, 130px) 0; }
.sec-line { border-top: 1px solid var(--line); }
.sec-tint { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(36px, 4.6vw, 64px); }
.sec-head h2 {
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 780;
  line-height: 1.07;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sec-head p { color: var(--muted); font-size: clamp(15.5px, 1.2vw, 18px); max-width: 600px; }

/* Sićušni ekrani: CTA puna širina */
@media (max-width: 380px) {
  /* hero: samo primarni CTA ide punom širinom — ghost je već tih link */
  .hero-ctas .btn-gold, .final-ctas .btn, .page-ctas .btn, .plan .btn, .cform .btn {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
    text-align: left;
    font-size: 14px;
  }
  .hero-ctas, .final-ctas, .page-ctas { width: 100%; }
}

/* nav collapse */
@media (max-width: 940px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ============================================================
   Reduced motion — pokret nestaje, NAĐENO stanje ostaje
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-track { height: 100svh; }
  .hero { position: relative; }
  .hero-video { display: none; }
  .hero-poster { display: block; }
  .hero-hint .line::after { animation: none; }
  .hero-copy > * { animation-duration: 1ms; animation-delay: 0ms; }
  .hero-atmo { opacity: 0.5; }
  .rv { transition-duration: 1ms; transition-delay: 0ms; transform: none; filter: none; }
  .btn, .ex-shot, .works-nav button, .work-card, .act, .rel { transition: none; }
  .stat-num.sig-num:not(.is-found) { animation: none; }
  .stat-beam, .sys-rail i, .sys-lock, .sys-node .dot, .sys-node .idx {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
  .sig-target::before { animation: none; }
  .final h2 em::after, .avail::before { animation: none; }
  .sig-rule { transition-duration: 250ms; transition-delay: 0ms; }
  .sig-canvas { display: none; }

  /* SIGNAL BREAKS: odmah završno stanje, bez putovanja */
  .sig-break { --bp: 1; }
  .brk-live { filter: none; }
  .brk-dot { display: none; }
  .brk-flip .c-on { color: var(--gold-hi); text-shadow: none; }
  .brk-rail-join .seg-l, .brk-rail-join .seg-r { transform: scaleX(1); transition: none; }
  .brk-rail-join .brk-lock { opacity: 1; transform: none; transition: none; }
  .brk-label, .brk-label-c { color: var(--gold); }
  .brk-search .brk-label-r { color: var(--dim); }

  /* DEVICE SHOWROOM: obe scene čitljive, bez sticky pozornice i bez dubine */
  .show-track { height: auto !important; }
  .show-stage { position: static !important; height: auto !important; display: block !important; overflow: visible !important; }
  .scene { transition: none; }
  .scene-b { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; margin-top: clamp(64px, 9vw, 120px); }
  .show-track.at-b .scene-a { opacity: 1 !important; transform: none !important; filter: none !important; pointer-events: auto !important; }
  .dev-body, .ck-go, .check { transition: none; }

  /* vodič: chapter markeri odmah aktivni, bez čekanja na skrol */
  .article h2 .h-idx { color: var(--gold); transition: none; }
  .article h2 .h-idx::after { width: 52px; transition: none; }
  .cform-more summary .ind { transition: none; }
}

/* ============================================================
   R03 ROLLOUT — dodaci za nove rute (usluge hub, landing, vodiči).
   Mobile-first: podrazumevano je uska režija, širine se dodaju naviše.
   Nema novih boja ni novih senki — samo raspored i stanja postojećih
   komponenti (§30: chrome ostaje tih).
   ============================================================ */

/* ---------- svc-item kao link (hub kartice) ---------- */
a.svc-item { text-decoration: none; color: inherit; }
.svc-item--link {
  transition: border-color 260ms ease, background 260ms ease, transform 260ms var(--ease-out);
}
.svc-item--link .go {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 220ms ease;
}
.svc-item--link .go svg { width: 14px; height: 14px; flex: none; transition: transform 240ms var(--ease-out); }
@media (hover: hover) {
  .svc-item--link:hover {
    border-color: rgba(233, 184, 80, 0.34);
    background: rgba(244, 240, 230, 0.03);
    transform: translateY(-2px);
  }
  .svc-item--link:hover .go { color: var(--gold); }
  .svc-item--link:hover .go svg { transform: translateX(4px); }
}
.svc-item--link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- mapa usluga: pet čvorova umesto tri ---------- */
@media (min-width: 1100px) {
  .sys-nodes-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(20px, 2.2vw, 40px); }
  .sys-nodes-5 .sys-node h3 { font-size: clamp(18px, 1.35vw, 21px); }
  .sys-nodes-5 .sys-node p { font-size: 14.5px; }
}
/* tablet: 5 čvorova u dva reda, šina i dalje ide vodoravno */
@media (min-width: 861px) and (max-width: 1099px) {
  .sys-nodes-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
}
/* pet cvorova u istom vremenskom budzetu kao tri na naslovnoj —
   interna strana ne sme da drzi paznju duze od naslovne (§20) */
.sys-flow--wide.on .sys-node:nth-child(1) .dot, .sys-flow--wide.on .sys-node:nth-child(1) .idx { transition-delay: 260ms; }
.sys-flow--wide.on .sys-node:nth-child(2) .dot, .sys-flow--wide.on .sys-node:nth-child(2) .idx { transition-delay: 560ms; }
.sys-flow--wide.on .sys-node:nth-child(3) .dot, .sys-flow--wide.on .sys-node:nth-child(3) .idx { transition-delay: 860ms; }
.sys-flow--wide.on .sys-node:nth-child(4) .dot, .sys-flow--wide.on .sys-node:nth-child(4) .idx { transition-delay: 1160ms; }
.sys-flow--wide.on .sys-node:nth-child(5) .dot, .sys-flow--wide.on .sys-node:nth-child(5) .idx { transition-delay: 1460ms; }
.sys-flow--wide .sys-lock { transition-delay: 1780ms; }
.sys-flow--wide .sys-rail i { transition-duration: 1600ms; }

/* ---------- četiri koraka (održavanje: tok reakcije) ---------- */
@media (min-width: 761px) {
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(34px, 4vw, 56px); }
}
@media (min-width: 1180px) {
  .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-4 .step .num { font-size: clamp(48px, 4.4vw, 74px); }
}

/* ---------- big-row: druga linija objašnjenja ---------- */
.big-row .sub-n {
  display: block;
  margin-top: 7px;
  font-family: var(--font-m);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.055em;
  line-height: 1.55;
  color: var(--dim);
  text-transform: none;
}

/* ---------- vodič-kartica: vreme čitanja ---------- */
.rel-meta {
  margin-top: 2px;
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ---------- keybox sa listom (checklista u vodiču) ---------- */
.keybox ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.keybox li { position: relative; padding-left: 24px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.keybox li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--gold);
}

/* ---------- chip kao link (404 strana) ---------- */
a.chip { text-decoration: none; transition: color 200ms ease, border-color 200ms ease; }
@media (hover: hover) {
  a.chip:hover { color: var(--text); border-color: rgba(233, 184, 80, 0.4); }
}
a.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- tri kolone u case-cols (usluge: standardno/doplata/individualno) ---------- */
@media (min-width: 1024px) {
  .case-cols:has(> .case-col:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- landing: monument bez pune visine poglavlja ---------- */
.chapter.stat[style*="min-height"] { padding-block: clamp(96px, 10vw, 150px); }

/* ---------- saglasnost: prst, ne miš ----------
   Cela <label class="consent"> je već klikabilna, ali sam kvadratić je bio
   16 px — na 390 px to je ispod ugodnog minimuma. Kutija ide na 20 px, a
   label dobija vertikalni padding da ukupna zona pređe 44 px. */
.cform .consent { padding-block: 6px; }
.cform .consent input { width: 20px; height: 20px; margin-top: 1px; }
.cform .consent span { padding-block: 2px; }

/* ============================================================
   27" I VEĆE — interne strane dobijaju širi prostor (§8, §32).
   Naslovna se NE dira: ona koristi `.chapter` / `.final` i njena
   kompozicija je odobrena u R02. Ovo važi isključivo za `.sec`,
   `.page-head` i `.cta-band`, tj. za interne šablone.

   Mera teksta ostaje ista (`.sec-head` je i dalje 760px) — širi se
   samo mreža, da se dobije prostorni raspon, a ne duži red za čitanje.
   ============================================================ */
@media (min-width: 1900px) {
  /* Tri kartice u redu umesto dve — isti sadržaj, širi prostorni raspon,
     ali unutar postojećeg okvira od 1520px. Probano je i širenje samog
     `.wrap` na 1760px: naslov i mreža se rašire, ali `.big-table` i
     `.factors` moraju ostati uski zbog dužine reda — pa nastane velika
     praznina desno. Gore nego pre. Zato širina okvira ostaje. */
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-item { padding: clamp(26px, 2vw, 34px); }

  /* Uski blokovi (tabela, lista faktora) ostaju uz LEVU ivicu, poravnati sa
     naslovom sekcije. Probano je i centriranje — ali onda naslov počinje na
     jednoj, a tabela na drugoj vertikali; dve leve ivice u istoj sekciji su
     gore od praznine desno. */
}

/* ============================================================
   R404_SIGNAL_ASSET_INTEGRATION_R01 — SLOJ ZA VIZUELNE ASSETE

   Pravilo runde: slika nosi atmosferu, HTML nosi činjenice.
   Zato su svi asseti iseckani na jezgro bez teksta i brojeva —
   naslov, broj, izvor i CTA su uvek HTML iznad/pored slike.
   Isti crop rešava i istinitost i mobilnu čitljivost: tekst upečen
   u sliku od 1672 px na 360 px ionako nije upotrebljiv.

   Motion (emil-design-eng): otkrivanje ide clip-path-om odozdo
   naviše — to je isti gest koji SIGNAL već koristi (signal otkriva
   podatak), a ne još jedan generički fade. Jednokratno, kroz
   IntersectionObserver, bez scroll-linked računa na telefonu.
   ============================================================ */

/* ---------- Zajednički okvir za asset ---------- */
.sig-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 3px;
}
.sig-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Zlatni rub signala — tanka linija koja povezuje sliku sa sistemom */
.sig-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(5, 5, 5, 0.55);
}

/* Otkrivanje: clip odozdo naviše. */
.sig-shot.rv {
  opacity: 1;
  filter: none;
  transform: none;
}
/* Zaklonjeno stanje postoji SAMO ako skript može da ga otkloni. Bez JS-a
   slika se vidi odmah — nikad se ne dešava da asset ostane nevidljiv zato
   što observer nije stigao. (Ostatak `.rv` sistema ovu zaštitu nema; to je
   zatečeno stanje iz R03 i zapisano je kao nalaz, nije menjano ovde.) */
@media (scripting: enabled) {
  .sig-shot.rv {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--t-reveal) var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .sig-shot.rv.on { clip-path: inset(0 0 0 0); }
}

/* ---------- A. Podeljeni blok: slika + tekst ---------- */
.asset-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.asset-split.is-flipped .asset-split-media { order: 2; }
.asset-split-body { display: grid; gap: 18px; align-content: center; }
.asset-split-body h2,
.asset-split-body h3 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.asset-split-body h2 em,
.asset-split-body h3 em {
  font-style: normal;
  color: var(--gold-hi);
  text-shadow: 0 0 30px rgba(233, 184, 80, 0.3);
}
.asset-split-body p { color: var(--muted); max-width: 54ch; line-height: 1.7; }
.asset-split-media { position: relative; }

/* Uspravni asseti (mapa, otisak, koverta, klipbord) — portret na desktopu */
.asset-split-media .sig-shot { aspect-ratio: 1 / 1; }
.asset-split-media.is-tall .sig-shot { aspect-ratio: 4 / 5; }

/* Lista dokaza uz sliku — činjenice, ne dekoracija */
.asset-points { display: grid; gap: 12px; margin-top: 4px; }
.asset-points li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  line-height: 1.6;
}
.asset-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 16px;
  height: var(--sig-line-w);
  background: var(--sig-gradient);
  filter: var(--sig-glow);
}
.asset-points b { color: var(--ink); font-weight: 500; }

/* ---------- B. Traka: široki tanki kadar ---------- */
.asset-band { position: relative; }
.asset-band .sig-shot {
  aspect-ratio: 1672 / 440;
  border-inline: 0;
  border-radius: 0;
}
.asset-band.is-thin .sig-shot { aspect-ratio: 1672 / 340; }
/* Traka se stapa sa pozadinom levo i desno — ne sme da izgleda kao nalepljena slika */
.asset-band .sig-shot::after {
  background: linear-gradient(90deg, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
  box-shadow: none;
}

/* ---------- C. Scena: asset kao pozadina sekcije ---------- */
.scene-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: var(--z-deep);
}
.scene-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  opacity: 0.55;
}
.scene-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 60% at 50% 52%, rgba(5, 5, 5, 0.42), transparent 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(5, 5, 5, 0.45) 26%, rgba(5, 5, 5, 0.4) 64%, var(--bg) 100%);
}

/* ============================================================
   MOBILNI (≤ 760 px) — asseti dobijaju sopstvenu režiju.
   Nije umanjeni desktop: uspravni kadrovi se seku u pejzaž da ne
   pojedu ekran, a subjekt se drži u kadru preko object-position.
   ============================================================ */
@media (max-width: 760px) {
  .asset-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .asset-split.is-flipped .asset-split-media { order: 0; }

  /* 16:10 prozor umesto punog portreta — slika ostaje kadar, ne poster */
  .asset-split-media .sig-shot,
  .asset-split-media.is-tall .sig-shot { aspect-ratio: 16 / 10; }
  .asset-split-media .sig-shot img { object-position: center 42%; }

  /* Mapa Srbije: centar zemlje je vizuelno iznad geometrijskog centra */
  .asset-split-media.m-map .sig-shot img { object-position: center 38%; }
  /* Otisak i koverta: subjekt je centriran, ali donja trećina je odsjaj */
  .asset-split-media.m-object .sig-shot img { object-position: center 40%; }
  /* Klipbord: gornje kvačice nose poruku */
  .asset-split-media.m-doc .sig-shot img { object-position: center 30%; }

  /* Traka sa ikonicama se NE seče na telefonu: tri kruga su raspoređena
     po širini, pa bi crop pojeo dva od tri. Ostaje prirodan odnos i
     samo se smanji — na 360 px to je ~95 px visine, sasvim čitljivo. */
  .asset-band .sig-shot img { object-fit: contain; }

  /* Apstraktni talas sme da se seče — nema šta da se izgubi. */
  .asset-band.is-thin .sig-shot { aspect-ratio: 2 / 1; }
  .asset-band.is-thin .sig-shot img { object-fit: cover; }

  /* Na telefonu `cover` seče 16:9 kadar na uzak srednji pojas, a centralni
     radijalni scrim gasi baš prolaz — scena je izgledala kao mrko platno.
     Kadar se spušta da prolaz sedne ISPOD naslova, u zonu gde je scrim
     najslabiji, i pojačava se. Naslov i dalje stoji na punoj tami. */
  .scene-bg img { object-position: center 60%; opacity: 0.72; }
  .scene-bg::after {
    background:
      radial-gradient(64% 32% at 50% 20%, rgba(5, 5, 5, 0.66), transparent 100%),
      linear-gradient(180deg, var(--bg) 0%, rgba(5, 5, 5, 0.64) 22%, rgba(5, 5, 5, 0.28) 62%, var(--bg) 100%);
  }
  /* Napomena: `.scene-bg--head` i `.scene-bg--band` imaju istu specifičnost,
     a definisani su kasnije u fajlu — pa svoje vrednosti zadržavaju i ovde.
     Ovo pravilo se odnosi samo na pune scene (finale, 404). */
}

/* Vrlo uski telefoni (360) — kadar se još malo spljošti da naslov ostane u prvom ekranu */
@media (max-width: 400px) {
  .asset-split-media .sig-shot,
  .asset-split-media.is-tall .sig-shot { aspect-ratio: 16 / 11; }
}

/* ---------- 27" i veće ---------- */
@media (min-width: 1900px) {
  .asset-split { gap: clamp(64px, 5vw, 96px); }
}

/* ---------- Pristupačnost ---------- */
@media (prefers-reduced-motion: reduce) {
  .sig-shot.rv { clip-path: none; transition: none; }
}

/* ---------- Legenda ispod trake sa čvorovima ----------
   Tri imena stoje ispod tri kruga. Slika je simbol, imena su HTML —
   isto pravilo kao svuda u ovoj rundi. */
.node-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  text-align: center;
}
.node-legend li { display: grid; gap: 4px; }
.node-legend b {
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink);
}
.node-legend span {
  font-family: var(--font-m);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}
@media (max-width: 520px) {
  .node-legend { gap: 10px; }
  .node-legend b { font-size: 13.5px; line-height: 1.25; }
  .node-legend span { font-size: 10px; letter-spacing: 0.06em; }
}

/* ---------- Znak potvrde (/hvala/) ----------
   Koverta stoji iznad naslova kao pečat na poslatoj poruci.
   Namerno mala: potvrda treba da smiri, ne da zauzme ekran. */
.success-mark {
  display: block;
  width: clamp(150px, 22vw, 240px);
  margin-inline: auto;
  margin-bottom: 6px;
}
.success-mark img {
  width: 100%;
  height: auto;
  /* Asset je sjaj na crnoj podlozi, pa mu se vidi pravougaonik preko
     scene iza njega. `mix-blend-mode: screen` ovde ne pomaže jer
     `.final-in` ima z-index i pravi sopstveni stacking context — blend
     nema sa čim da se meša. Zato ivica ide u masku: kadar se stapa u
     pozadinu i nema šava. */
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,0.35) 78%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,0.35) 78%, transparent 100%);
  filter: drop-shadow(0 0 40px rgba(233, 184, 80, 0.18));
}

/* ---------- CTA traka sa scenom ----------
   Talas sedi pri dnu trake i stapa se sa pozadinom: dodaje pokret
   kadru koji je do sada bio samo gradijent. Ne sme da se čita kao
   slika nalepljena iza teksta, zato je nisko i prigušeno. */
.cta-band.has-scene { position: relative; overflow: clip; }
.cta-band.has-scene .cta-band-in { position: relative; z-index: 2; }
.scene-bg--band { top: auto; height: 62%; }
.scene-bg--band img {
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.5;
}
.scene-bg--band::after {
  background: linear-gradient(180deg, var(--bg-2) 0%, rgba(10, 10, 11, 0.55) 40%, rgba(10, 10, 11, 0.2) 100%);
}

/* ---------- Uslovi (plaćanje, izmene) ---------- */
.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  max-width: 1080px;
}
.term {
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 3px;
}
.term h3 {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  margin-bottom: 12px;
}
.term p { color: var(--muted); line-height: 1.7; font-size: 15.5px; }
@media (max-width: 760px) {
  .terms { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   POMOĆNIK ZA IZBOR PAKETA (/cene/)
   Dva pitanja, jedan predlog. Radio dugmad su prava radio dugmad —
   tastatura i čitač ekrana rade bez ijedne linije dodatnog koda.
   ============================================================ */
.picker {
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(233, 184, 80, 0.06), transparent 62%),
    var(--panel);
  border-radius: 4px;
  padding: clamp(24px, 3.4vw, 48px);
  max-width: 1080px;
}
.picker-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 36px); }
.picker-head h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300;
  letter-spacing: -0.015em;
}
.picker-head p { color: var(--muted); font-size: 15.5px; max-width: 56ch; }

.picker-qs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.pq { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.pq legend {
  font-family: var(--font-m);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0;
  margin-bottom: 6px;
}
.pq label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1.5;
  font-size: 15px;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
  /* 44 px minimalna dodirna zona na telefonu */
  min-height: 46px;
}
@media (hover: hover) and (pointer: fine) {
  .pq label:hover { border-color: var(--line-strong); color: var(--ink); }
}
.pq input {
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--steel);
  border-radius: 50%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.pq input:checked {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 4px var(--gold);
}
.pq label:has(input:checked) {
  border-color: rgba(233, 184, 80, 0.42);
  background: rgba(233, 184, 80, 0.05);
  color: var(--ink);
}
.pq input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Rezultat */
.picker-out {
  display: block;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
}
.po-idle { color: var(--dim); font-size: 15px; }
.picker-out.has-result { display: grid; justify-items: start; gap: 8px; }
.po-lead {
  font-family: var(--font-m);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.po-name {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.po-price {
  font-family: var(--font-m);
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--gold-hi);
  text-shadow: 0 0 26px rgba(233, 184, 80, 0.3);
}
.po-why { color: var(--muted); max-width: 54ch; line-height: 1.7; margin-top: 4px; font-size: 15.5px; }
.picker-out .btn { margin-top: 12px; }
.picker-fine { margin-top: 20px; color: var(--dim); font-size: 13px; line-height: 1.6; }

@media (max-width: 760px) {
  .picker-qs { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .picker-out .btn { width: 100%; justify-content: center; }
}

/* ---------- Pejzažni kadar u podeljenom bloku ----------
   Za stvarne snimke sajtova (16:9). Portretni crop bi im odsekao
   pola ekrana, a upravo je ceo kadar ono što se pokazuje. */
.asset-split-media.is-wide .sig-shot { aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  .asset-split-media.is-wide .sig-shot { aspect-ratio: 16 / 10; }
  .asset-split-media.is-wide .sig-shot img { object-position: center top; }
}

/* Kadar koji vodi negde — dobija ponašanje linka */
a.sig-shot { display: block; transition: border-color 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.sig-shot:hover { border-color: rgba(233, 184, 80, 0.4); }
  a.sig-shot:hover::after { box-shadow: inset 0 0 60px rgba(5, 5, 5, 0.35); }
}
a.sig-shot::after { transition: box-shadow 220ms var(--ease-out); }

/* ---------- Talas u zaglavlju strane (/kontakt/) ----------
   Sedi u donjoj polovini zaglavlja, ispod linije naslova, da ne
   pravi šum iza teksta. Prigušen jer ovo nije hero — samo prizvuk. */
.scene-bg--head { top: auto; height: 58%; }
.scene-bg--head img {
  object-position: center 62%;
  opacity: 0.3;
}
.scene-bg--head::after {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(5, 5, 5, 0.45) 46%, rgba(5, 5, 5, 0.72) 100%);
}
@media (max-width: 760px) {
  /* Na telefonu naslov zauzima skoro celo zaglavlje — talas se povlači
     još niže i dodatno stiša, da tekst nema šta da ga nadglasava. */
  .scene-bg--head { height: 46%; }
  /* 0.22 je na telefonu bio praktično nevidljiv — asset koji se ne vidi
     nema razlog da se učitava. 0.32 je i dalje prizvuk, ali se čita. */
  .scene-bg--head img { opacity: 0.32; }
}

/* ============================================================
   FINALNA SCENA NA TELEFONU — sopstvena režija, ne umanjen desktop

   Problem: `.final` je na 390 px visok ~700 px, a kadar je 16:9.
   `cover` tada pokazuje uzak srednji pojas — prolaz se pretvori u
   mrlju svetla i priča se izgubi. Probano je i spuštanje kadra i
   slabljenje scrima: bolje, ali i dalje mutno.

   Rešenje: na telefonu scena prestaje da bude pozadina i postaje
   kadar pri vrhu sekcije. Prolaz se vidi ceo, tekst stoji ispod
   njega na čistoj tami, i ništa se ne bori za istu površinu.
   ============================================================ */
@media (max-width: 760px) {
  .final { padding-top: clamp(230px, 62vw, 330px); }
  .final .scene-bg {
    bottom: auto;
    height: clamp(200px, 54vw, 290px);
  }
  .final .scene-bg img {
    object-fit: cover;
    object-position: center 44%;
    opacity: 0.92;
  }
  .final .scene-bg::after {
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.12) 46%, rgba(5, 5, 5, 0.86) 84%, var(--bg) 100%);
  }
}

/* ============================================================
   R05 · CONTENT PARITY — komponente za migrirani produkcijski sadržaj
   Mobile-first: sve što je na desktopu tabela, na telefonu je niz kartica.
   Nijedna od ovih komponenti ne sme proizvesti horizontalni scroll (§39).
   ============================================================ */

/* ---------- .dtable — podatkovna tabela koja se na telefonu raspada u kartice ---------- */
.dtable { border-top: 1px solid var(--line); max-width: 980px; margin: 30px 0 6px; }
.dtable-row {
  display: grid;
  gap: 6px 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.dtable-row .c-h {
  font: 500 11.5px/1.4 var(--font-m);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}
.dtable-row .c-v { font-size: clamp(14.5px, 1.15vw, 16.5px); color: var(--muted); line-height: 1.55; }
.dtable-row .c-v strong, .dtable-row .c-v b { color: var(--ink); font-weight: 620; }
.dtable-row.is-head { display: none; }

/* telefon: svaka ćelija je red „labela / vrednost", kartica po stavci */
@media (max-width: 759px) {
  .dtable-row { padding: 18px 4px 20px; }
  .dtable-row .c-cell { display: grid; gap: 3px; padding: 7px 0; }
  .dtable-row .c-cell:first-child .c-v { color: var(--ink); font-weight: 620; font-size: 16.5px; }
}

/* desktop: prava tabela */
@media (min-width: 760px) {
  .dtable-row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 22px; }
  .dtable-row.is-head { display: grid; padding: 0 4px 12px; border-bottom-color: var(--line-strong); }
  .dtable-row .c-cell .c-h { display: none; }
  .dtable-row.is-head .c-cell .c-h { display: block; }
  .dtable--2 .dtable-row { grid-auto-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .dtable--wide .dtable-row:not(.is-head) .c-cell:first-child .c-v { color: var(--ink); font-weight: 620; }
}

/* ---------- .fillrow — polje koje korisnik sam popunjava (tabela za poređenje ponuda) ---------- */
.fill { color: var(--dim); font-style: italic; }

/* ---------- .srcnote — izvor ispod bloka podataka (§32: source + datum) ---------- */
.srcnote {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 780px;
}
.srcnote a { color: var(--muted); }

/* ---------- .grouprow — podnaslov unutar .dtable ---------- */
.dtable-group {
  padding: 26px 4px 10px;
  border-bottom: 1px solid var(--line);
  font: 500 11.5px/1.4 var(--font-m);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- .article dodaci za dugačke migrirane tekstove ---------- */
.article .note {
  margin: 26px 0;
  padding: 18px 20px;
  border-left: 2px solid var(--line-strong);
  background: rgba(244, 240, 230, 0.022);
  font-size: clamp(14.5px, 1.15vw, 16px);
  color: var(--muted);
  line-height: 1.65;
}
.article .note strong { color: var(--ink); }

/* ---------- .srcs — lista izvora na dnu vodiča ---------- */
.srcs { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.srcs li { font-size: 14px; color: var(--muted); line-height: 1.6; padding-left: 18px; position: relative; }
.srcs li::before { content: "↗"; position: absolute; left: 0; color: var(--dim); font-size: 12px; top: 2px; }

/* Široke tabele (4 kolone) probijaju uzanu kolonu teksta na velikim ekranima —
   inače svaka ćelija prelama na 3–4 reda i tabela postaje nečitljiva. */
@media (min-width: 1180px) {
  .article .dtable:not(.dtable--2) {
    width: calc(100% + 150px);
    max-width: none;
    margin-left: -75px;
    margin-right: -75px;
  }
}
@media (min-width: 1500px) {
  .article .dtable:not(.dtable--2) {
    width: calc(100% + 280px);
    margin-left: -140px;
    margin-right: -140px;
  }
}

/* ---------- .soc-grid — primeri formata za društvene mreže (kvadratni kadrovi) ---------- */
.soc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  margin-top: 34px;
}
.soc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); max-width: 780px; }
.soc-card { margin: 0; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.soc-card img { display: block; width: 100%; height: auto; }
.soc-reel { margin-top: 30px; max-width: 340px; border: 1px solid var(--line); background: var(--panel); }
.soc-reel video { display: block; width: 100%; height: auto; }

/* ---------- .app-status — status traka poslovnih aplikacija / AI pilota ---------- */
.app-status {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid rgba(233, 184, 80, 0.22);
  background: rgba(233, 184, 80, 0.045);
  max-width: 880px;
}
.app-status .tag { flex: none; color: var(--gold); border: 1px solid rgba(233,184,80,.35); padding: 5px 10px; }
.app-status p { margin: 0; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.6; color: var(--muted); }
.app-status p strong { color: var(--ink); }

/* ---------- .app-grid / .app-card — četiri poslovne aplikacije ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.app-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 220ms ease, background 220ms ease;
}
.app-card:hover { border-color: var(--line-strong); }
.app-card .idx { font: 500 11px/1 var(--font-m); letter-spacing: .22em; color: var(--dim); }
.app-card .kind { font: 500 11px/1 var(--font-m); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.app-card h3 { margin: 4px 0 0; font-size: clamp(19px, 1.6vw, 23px); }
.app-card p { margin: 0; color: var(--muted); font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.6; flex: 1; }
.app-card-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.app-card-acts .btn { font-size: 14px; padding: 11px 16px; }

/* ---------- .shot-grid — stvarni snimci ekrana aplikacije ---------- */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  margin-top: 34px;
}
.shot-item { margin: 0; display: grid; gap: 10px; }
.shot-item img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--panel); }
.shot-item figcaption { font-size: 13.5px; line-height: 1.55; color: var(--dim); }

/* ============================================================
   R05 · NAVIGACIJA ZA 12 USLUGA (§37)
   Desktop: „Usluge" otvara panel na hover/fokus. Traka ostaje pet stavki.
   Mobilni: fioka nosi razgranatu listu — nema hover-a, pa nema ni panela.
   ============================================================ */
.nav-has-panel { position: relative; display: inline-flex; align-items: center; }
.nav-has-panel > a { display: inline-flex; align-items: center; gap: 7px; }
.nav-has-panel .cx {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .5;
  transition: transform 240ms var(--ease-out), opacity 200ms ease;
}

.svc-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(92vw, 940px);
  background: #0b0b0c;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 260ms var(--ease-out), visibility 0s linear 260ms;
  z-index: 60;
}
/* nevidljivi most do panela — da kursor ne "propadne" u razmaku */
.svc-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }

.nav-has-panel:hover .svc-panel,
.nav-has-panel:focus-within .svc-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.nav-has-panel:hover .cx,
.nav-has-panel:focus-within .cx { transform: rotate(225deg) translate(-2px, -2px); opacity: .9; }

.svcp-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.svcp-col { padding: 26px 22px; border-right: 1px solid var(--line); }
.svcp-col:last-child { border-right: 0; }
.svcp-h {
  display: block;
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}
.svcp-col a {
  display: block;
  padding: 9px 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.svcp-col a b {
  display: block;
  font-size: 15px;
  font-weight: 620;
  color: var(--ink);
  transition: color 160ms ease;
}
.svcp-col a span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--dim); margin-top: 2px; }
.svcp-col a:hover b { color: var(--gold); }
.svcp-col a.is-accent b { color: var(--gold); }

.svcp-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: rgba(244, 240, 230, .02);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.svcp-all:hover { color: var(--gold); }
.svcp-all .arr { width: 17px; height: 17px; display: inline-flex; }
.svcp-all .arr svg { width: 100%; height: 100%; }

/* ---------- mobilna fioka: grupe usluga ---------- */
.menu-grp { padding: 4px 0 10px 0; }
.menu-grp-h {
  display: block;
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 12px 0 8px;
}
.menu-grp a {
  display: flex !important;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px !important;
  font-weight: 560 !important;
  padding: 11px 0 !important;
  padding-left: 16px !important;
  border-bottom: 1px solid var(--line) !important;
}
.menu-grp a em {
  font-style: normal;
  font-size: 12px;
  color: var(--dim);
  font-family: var(--font-m);
  letter-spacing: .04em;
}
.menu-grp a.is-accent { color: var(--gold); }

/* panel nikad na malim ekranima — tamo radi fioka */
@media (max-width: 1023px) {
  .svc-panel { display: none; }
  .nav-has-panel .cx { display: none; }
}
/* grupe u fioci nikad na desktopu — tamo radi panel */
@media (min-width: 1024px) {
  .menu-grp { display: none; }
}

/* ============================================================
   R05 · CALCULATOR V2
   Mobile-first: sve je jedna kolona do 900px. Radio dugmad su kartice
   sa tap-metom preko cele površine (§38).
   ============================================================ */
.calc { max-width: 1080px; }
.calc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-strong); margin-bottom: 34px; flex-wrap: wrap; }
.calc-tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 14px 20px; margin-bottom: -1px;
  font: 600 14.5px/1 inherit; color: var(--dim);
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
  min-height: 48px;
}
.calc-tabs button:hover { color: var(--muted); }
.calc-tabs button.is-on { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- QUICK ---------- */
.calc-quick { display: grid; gap: 34px; }
@media (min-width: 900px) { .calc-quick { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: start; } }
.calc-qs { display: grid; gap: 30px; }
.cq { border: 0; padding: 0; margin: 0; }
.cq legend {
  display: flex; align-items: baseline; gap: 12px;
  font-size: clamp(16.5px, 1.4vw, 19px); font-weight: 640; color: var(--ink);
  margin-bottom: 14px; padding: 0;
}
.cq-n { font: 500 11px/1 var(--font-m); letter-spacing: .18em; color: var(--gold); }
.cq-opts { display: grid; gap: 8px; }
.cq-opt, .cf-opt {
  position: relative; display: block; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--line); background: var(--panel);
  transition: border-color 180ms ease, background 180ms ease;
  min-height: 48px;
}
.cq-opt input, .cf-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cq-opt span { font-size: 15px; color: var(--muted); }
.cq-opt:hover, .cf-opt:hover { border-color: var(--line-strong); }
.cq-opt.is-on, .cf-opt.is-on { border-color: var(--gold); background: rgba(233, 184, 80, .06); }
.cq-opt.is-on span { color: var(--ink); }
.cq-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 4px; }

.calc-side { position: sticky; top: 96px; }
@media (max-width: 899px) { .calc-side { position: static; } }
.cres, .cres--idle {
  border: 1px solid var(--line-strong); background: #0b0b0c; padding: 28px 26px;
}
.cres--idle p { color: var(--dim); font-size: 15px; line-height: 1.6; margin: 12px 0 0; }
.cres h3 { margin: 14px 0 6px; font-size: clamp(22px, 2vw, 28px); }
.cres-price { font: 700 clamp(30px, 3.4vw, 44px)/1 inherit; color: var(--gold); letter-spacing: -.02em; margin-bottom: 14px; }
.cres-why { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.cres-add { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.cres-add strong { color: var(--ink); }
.cres-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.cres-acts .btn { font-size: 14px; padding: 12px 18px; }

/* ---------- FULL ---------- */
.calc-full { display: grid; gap: 42px; }
.cf-sec h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(18px, 1.6vw, 22px); margin: 0 0 18px;
}
.cf-sec h3 em { font-style: normal; font-weight: 400; color: var(--dim); font-size: .82em; }
.cf-i {
  flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); font: 500 12px/1 var(--font-m); color: var(--gold);
}
.cf-opts { display: grid; gap: 8px; }
@media (min-width: 760px) { .cf-opts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } }
.cf-opt b { display: block; font-size: 15.5px; font-weight: 640; color: var(--ink); }
.cf-badge {
  font-style: normal; font-size: 10.5px; font-family: var(--font-m); letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-left: 8px;
}
.cf-price { display: block; font: 600 15px/1 var(--font-m); color: var(--gold); margin-top: 6px; }
.cf-per { display: block; font-size: 12.5px; line-height: 1.45; color: var(--dim); margin-top: 4px; }
.cf-sub { margin-top: 18px; padding-left: 2px; display: grid; gap: 6px; max-width: 620px; }
.cf-sub label { font-size: 13px; color: var(--muted); font-family: var(--font-m); letter-spacing: .04em; }
.cf-sub select, .cf-sub input[type="number"] {
  appearance: none; width: 100%; max-width: 320px;
  padding: 12px 14px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong); font: 400 15px/1.2 inherit;
  min-height: 46px;
}
.cf-sub select:focus-visible, .cf-sub input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cf-note { font-size: 12.5px; line-height: 1.55; color: var(--dim); margin: 2px 0 12px; }
.cf-check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); cursor: pointer; min-height: 44px; }
.cf-check input { width: 18px; height: 18px; accent-color: var(--gold); }

/* ---------- REKAPITULACIJA ---------- */
.crecap { margin-top: 48px; border: 1px solid var(--line-strong); background: #0b0b0c; padding: 30px 26px; }
.crecap-total { padding: 18px 0; border-bottom: 1px solid var(--line); }
.crecap-lbl { display: block; font: 500 11px/1 var(--font-m); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.crecap-num { display: block; font: 700 clamp(30px, 4vw, 52px)/1 inherit; letter-spacing: -.025em; color: var(--gold); }
.crecap-total.is-quote .crecap-num { font-size: clamp(20px, 2.6vw, 32px); color: var(--ink); }
.crecap-total.is-quote p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 12px 0 0; max-width: 640px; }
.crecap-sub { display: block; font-size: 12.5px; color: var(--dim); margin-top: 8px; }
.crecap-lines { margin: 22px 0; }
.crecap-line { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.crecap-line .n { color: var(--muted); }
.crecap-line .v { color: var(--ink); font-weight: 600; text-align: right; white-space: nowrap; }
.crecap-line .v.is-quote { color: var(--gold); white-space: normal; font-weight: 500; }
.crecap-cols { display: grid; gap: 22px; margin: 26px 0; }
@media (min-width: 700px) { .crecap-cols { grid-template-columns: 1fr 1fr; gap: 30px; } }
.crecap-col h4, .crecap-open h4 {
  font: 500 11px/1 var(--font-m); letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 12px;
}
.crecap-col.is-out h4 { color: var(--gold); }
.crecap-col ul, .crecap-open ul, .crecap-rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.crecap-col li, .crecap-open li { font-size: 14px; line-height: 1.55; color: var(--muted); padding-left: 16px; position: relative; }
.crecap-col li::before, .crecap-open li::before { content: "\00B7"; position: absolute; left: 3px; color: var(--dim); }
.crecap-open { padding-top: 20px; border-top: 1px solid var(--line); }
.crecap-open em { font-style: normal; color: var(--dim); }
.crecap-rules { margin-top: 20px; }
.crecap-rules li { font-size: 13px; color: var(--dim); line-height: 1.55; }
.crecap-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 16px; }
.crecap-acts .btn { font-size: 14px; padding: 12px 18px; }

@media print {
  .nav, .menu, .foot, .cta-band, .calc-tabs, .crecap-acts, .sig-break, .page-atmo { display: none !important; }
  .crecap { border-color: #999; }
  body { background: #fff !important; color: #111 !important; }
  .crecap-num, .crecap-col.is-out h4 { color: #111 !important; }
}

/* ---------- .gfact — DATA/PROOF moment unutar vodiča (§30) ---------- */
.gfact {
  display: grid;
  gap: 14px;
  margin: 32px 0;
  padding: 26px 24px;
  border: 1px solid rgba(233, 184, 80, .2);
  background: rgba(233, 184, 80, .04);
}
@media (min-width: 700px) { .gfact { grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: start; } }
.gfact-num {
  font: 700 clamp(22px, 2.6vw, 34px)/1.05 inherit;
  letter-spacing: -.02em;
  color: var(--gold);
  white-space: nowrap;
}
.gfact-body p { margin: 0; color: var(--muted); font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.65; }
.gfact-body p strong { color: var(--ink); }
.gfact-src { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--dim); }

/* uži razmak za korake unutar članka */
.steps--tight { gap: 14px; margin: 28px 0; }
.steps--tight .step { padding: 20px 20px 18px; }
.steps--tight .step h3 { font-size: clamp(16px, 1.35vw, 18.5px); }
.steps--tight .step p { font-size: 14.5px; }

/* ---------- .ckgrp / .cklist — grupisana checklista u vodiču ---------- */
.ckgrp { margin: 30px 0; }
.ckgrp h3 {
  font: 500 11.5px/1.4 var(--font-m);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.ckgrp-sub { font-size: 13.5px; color: var(--dim); margin: 0 0 14px; }
.cklist { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--line); }
.cklist li {
  display: grid;
  gap: 4px;
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cklist li::before {
  content: "";
  position: absolute;
  left: 2px; top: 17px;
  width: 15px; height: 15px;
  border: 1px solid var(--line-strong);
}
.cklist li b { font-size: 15.5px; font-weight: 620; color: var(--ink); line-height: 1.45; }
.cklist li span { font-size: 13.5px; line-height: 1.55; color: var(--dim); }

/* ============================================================
   R05 · STUDIJE SLUČAJA — realni snimci (§33)
   Desktop i telefon jedan pored drugog. Na mobilnom idu jedan ispod
   drugog, telefon prvi — jer je to kadar koji čitalac i sam gleda.
   ============================================================ */
.cs-shots { display: grid; gap: 20px; }
@media (min-width: 860px) {
  .cs-shots { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 26px; align-items: start; }
}
.cs-shot { margin: 0; position: relative; display: grid; gap: 10px; }
.cs-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line);
  background: var(--panel);
}
.cs-shot figcaption { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.cs-shot figcaption strong { color: var(--muted); }
@media (max-width: 859px) {
  .cs-shot--m { order: -1; max-width: 300px; }
}

/* PRE / POSLE */
.cs-ba { display: grid; gap: 22px; margin-top: 34px; }
@media (min-width: 860px) { .cs-ba { grid-template-columns: 1fr 1fr; gap: 26px; } }
.cs-ba-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font: 500 11px/1 var(--font-m); letter-spacing: .2em;
  padding: 7px 11px;
  background: rgba(5, 5, 5, .82);
  border: 1px solid var(--line-strong);
}
.cs-ba-tag.is-pre { color: var(--dim); }
.cs-ba-tag.is-posle { color: var(--gold); border-color: rgba(233, 184, 80, .4); }

/* chip koji je link */
.chip--link { text-decoration: none; transition: border-color 180ms ease, color 180ms ease; }
.chip--link:hover { color: var(--gold); border-color: rgba(233, 184, 80, .45); }

/* status rada u zaglavlju studije slučaja — zasebna klasa, da ne nasledi
   `.work-status` sa kartica u hub-u (koje su pilule sa sopstvenim okvirom) */
.cs-status { margin-top: 26px; }
.cs-status .tag {
  display: inline-block;
  color: var(--gold);
  border: 1px solid rgba(233, 184, 80, .35);
  padding: 7px 13px;
}

/* citat klijenta */
.proof-quote { max-width: 820px; border-left: 2px solid var(--gold); padding: 4px 0 4px 26px; }
.proof-quote blockquote { margin: 0; padding: 0; border: 0; }
.proof-quote blockquote p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
}
.quote-who { display: block; margin-top: 8px; font: 500 12.5px/1.4 var(--font-m); letter-spacing: .08em; color: var(--dim); }
.quote-who em { font-style: normal; color: var(--muted); }
/* R06:CSS:START */

/* ============================================================
   R06 · IA, LINKOVANJE I RAZLIKOVANJE STRANA
   R404_SIGNAL_IA_LINKING_POLISH_R06

   Problem koji ovo resava: posle R05 sajt ima 48 ruta, a vlasnik
   sam nije znao da postoje katalog, prodavnica, poslovne aplikacije
   i demo. Struktura je postojala, ali se nije videla.
   ============================================================ */

/* ---------- 1 · TRAKA: sest stavki, jedna vodeca (§3) ---------- */
.nav-links a.nav-lead {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px 1px rgba(233, 184, 80, .5);
  flex: none;
  transition: box-shadow 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-lead:hover .nav-dot { box-shadow: 0 0 14px 3px rgba(233, 184, 80, .75); }
}
/* Sest stavki trazi nesto uzi razmak nego pet. */
.nav-links { gap: clamp(15px, 1.9vw, 32px); }

/* Traka i panel se sada pale na istom pragu (1024). Do R05 je izmedju
   941 i 1023 px postojala traka BEZ panela — na tim sirinama je cela
   dubina ponude bila nedostupna. Ovo prosiruje raniji prag sa 940 na
   1023; sest stavki ionako trazi vise mesta od pet. */
@media (max-width: 1023px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ---------- 2 · MEGA PANEL (§5, §34) ---------------------------
   Fiksno pozicioniran i centriran na ekran, ne na stavku: pri 1024 px
   je apsolutna varijanta izlazila levo van ekrana, a na 2560 px je
   ostajala uska traka u sredini. */
.svc-panel {
  position: fixed;
  top: 88px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-8px);
  /* Poravnat sa sadrzajem trake, ne sa stavkom koja ga otvara: na 2560 px
     panel pocinje ispod logotipa i zavrsava ispod CTA dugmeta, pa cita kao
     deo zaglavlja umesto kao uska kutija koja pluta u sredini (§34). */
  width: min(calc(100vw - 2 * var(--pad-x)), calc(var(--max-w) - 2 * var(--pad-x)));
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-has-panel:hover .svc-panel,
.nav-has-panel:focus-within .svc-panel { transform: translateX(-50%) translateY(0); }
/* most do panela mora da pokrije razmak ispod trake */
.svc-panel::before { top: -40px; height: 40px; }

.svcp-in {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2.55fr);
  gap: 0;
}

/* istaknuta ponuda */
.svcp-lead {
  display: grid;
  /* CTA pada na dno kolone — na sirokim ekranima je istaknuta kolona
     inace kraca od ostalih i ispod nje ostane prazan pravougaonik. */
  grid-template-rows: auto auto 1fr auto;
  align-content: stretch;
  gap: 10px;
  padding: 28px 26px 26px;
  border-right: 1px solid var(--line-strong);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(233, 184, 80, .07), transparent 62%),
    rgba(233, 184, 80, .022);
  transition: background-color 240ms ease;
}
.svcp-lead-eye {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.svcp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px 1px rgba(233, 184, 80, .55);
}
.svcp-lead b {
  font-size: 21px; font-weight: 760; letter-spacing: -.015em; color: var(--ink);
  transition: color 160ms ease;
}
.svcp-lead-p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.svcp-lead-go {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 4px; font-size: 13px; font-weight: 620; color: var(--gold);
}
.svcp-lead-go .arr { width: 16px; height: 16px; display: inline-flex; }
.svcp-lead-go .arr svg { width: 100%; height: 100%; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svcp-lead:hover { background-color: rgba(233, 184, 80, .05); }
  .svcp-lead:hover .arr svg { transform: translateX(4px); }
}

/* Tri kartice u mrezi od dve kolone ostavljale su praznu polovinu reda
   na /usluge/. Grupa „Pronadju vas" ide u tri kolone kad ima mesta. */
@media (min-width: 1000px) {
  .svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* cetiri lake kolone — redovi teksta, ne kartice (§5) */
.svcp-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svcp-col { padding: 28px 20px; }
.svcp-col:last-child { border-right: 0; }

/* ---------- 3 · MOBILNA FIOKA: akordeon (§4) -------------------
   Nativni <details> — bez JS-a, radi tastatura, citac ekrana zna
   stanje. R05 fioka je bila ravna lista od ~20 redova sa naslovima
   od 40 px; na 360 px se videlo prvih pet. */
.menu {
  justify-content: flex-start;
  padding: 0;
  gap: 0;
}
.menu-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 92px var(--pad-x) 8px;
  display: grid;
  align-content: start;
  gap: 2px;
}
/* stagger iz R05 je bio vezan za :nth-child na .menu > a — sada je
   sadrzaj ugnezden, pa se otvaranje animira na nivou grupa. */
.menu .mnav, .menu .macc {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.menu.open .mnav, .menu.open .macc { opacity: 1; transform: none; }
.menu.open .mnav-lead { transition-delay: 50ms; }
.menu.open .macc:nth-of-type(1) { transition-delay: 100ms; }
.menu.open .macc:nth-of-type(2) { transition-delay: 140ms; }
.menu.open .macc:nth-of-type(3) { transition-delay: 180ms; }
.menu.open .mnav-base { transition-delay: 220ms; }

.mnav { display: grid; }
.mnav-h {
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  padding: 4px 0 12px;
}
/* Tap meta 52 px — iznad minimuma od 44 px, sa razmakom izmedju redova. */
.menu .mnav a,
.menu .macc-in a {
  display: grid;
  gap: 2px;
  min-height: 52px;
  align-content: center;
  padding: 9px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.005em;
  border-bottom: 1px solid var(--line);
  opacity: 1;
  transform: none;
  transition: color 160ms ease;
}
.menu .mnav a em,
.menu .macc-in a em {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--dim);
  font-family: var(--font-m);
  letter-spacing: .03em;
}
.menu .mnav a.is-lead { font-size: 22px; font-weight: 740; color: var(--ink); }
.menu .mnav a.is-lead em { color: var(--gold); }
.menu .mnav a.is-accent { color: var(--gold); }
.mnav-base { margin-top: 22px; border-top: 1px solid var(--line-strong); padding-top: 6px; }
.menu .mnav-base a { font-size: 19px; font-weight: 680; }
.menu .mnav-base a:last-child { border-bottom: 0; }

.macc { border-bottom: 1px solid var(--line); }
.macc summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 620;
  color: var(--muted);
}
.macc summary::-webkit-details-marker { display: none; }
.macc-n {
  font: 500 11px/1 var(--font-m);
  color: var(--dim);
  font-style: normal;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 8px;
}
.macc-cx {
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--dim);
  border-bottom: 1.6px solid var(--dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 260ms var(--ease-out);
}
.macc[open] summary { color: var(--ink); }
.macc[open] .macc-cx { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--gold); }
.macc-in { padding: 0 0 12px 14px; border-left: 1px solid var(--line); margin-left: 3px; }
.macc-in a:last-child { border-bottom: 0; }

/* Nasledjeno `.menu a { font-size: clamp(28px, 7.6vw, 40px) }` je jace
   od `.menu-tel` po specificnosti, pa je telefon u dnu fioke bio ispisan
   naslovnom velicinom i lomio se u dva reda. */
.menu .menu-tel {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  white-space: nowrap;
  border-bottom: 0;
  padding: 0;
  min-height: 0;
}

.menu-foot {
  flex: none;
  margin: 0;
  padding: 16px var(--pad-x) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-strong);
  background: rgba(5, 5, 5, .82);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  opacity: 0;
  transform: none;
}
.menu.open .menu-foot { opacity: 1; }

/* ---------- 4 · FOOTER KAO SLOJ ZA OTKRIVANJE (§13) ------------
   Pet grupa, 21 link — ne sitemap od 48. Posle R06 svaka service
   ruta ima footer put, sto R05 nije imao. */
.foot-grid {
  grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 40px);
}
@media (max-width: 1180px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot h4 { margin-bottom: 12px; }
  .foot-col a { font-size: 14.5px; }
}

/* ---------- 5 · "NASTAVITE" — sina, ne jos jedan red kartica ----
   Sajt vec ima tri mreze kartica sa okvirom (.related, .svc-grid,
   .cards). Cetvrta bi bila ista strana po 48. put (§15), pa je ovo
   sina: hairline podeoci, uloga iznad naslova, strelica koja klizi. */
.nx-sec { padding: clamp(56px, 6vw, 92px) 0; border-top: 1px solid var(--line); }
.nx-head { margin-bottom: clamp(26px, 3vw, 40px); }
.nx-head h2 { font-size: clamp(22px, 2.2vw, 32px); }

.nx-grid {
  display: grid;
  grid-template-columns: repeat(var(--nxc, 3), minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.nx-grid--2 { --nxc: 2; }
.nx-grid--3 { --nxc: 3; }
.nx-grid--4 { --nxc: 4; }

.nx {
  position: relative;
  display: grid;
  /* strelica pada na dno: opisi imaju razlicit broj redova, pa bi inace
     cetiri strelice stajale na cetiri razlicite visine */
  grid-template-rows: auto auto 1fr auto;
  gap: 9px;
  padding: 24px 26px 30px 0;
  border-right: 1px solid var(--line);
  transition: background-color 240ms ease;
}
.nx:last-child { border-right: 0; }
.nx:not(:first-child) { padding-left: 26px; }
/* zlatna nit koja se pali odozgo — ista gramatika kao signal linija */
.nx::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.nx-role {
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 200ms ease;
}
/* usluga je ponuda — jedina uloga koja stoji zlatna i bez hovera */
.nx-role--usluga { color: var(--gold); }
.nx h3 {
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--ink);
}
.nx p { font-size: 13.5px; line-height: 1.5; color: var(--dim); max-width: 34ch; }
.nx-go {
  width: 18px; height: 18px;
  display: inline-flex;
  color: var(--dim);
  margin-top: 2px;
  transition: color 200ms ease, transform 260ms var(--ease-out);
}
.nx-go svg { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  .nx:hover { background-color: rgba(244, 240, 230, .022); }
  .nx:hover::before { transform: scaleX(1); }
  .nx:hover .nx-role { color: var(--gold); }
  .nx:hover .nx-go { color: var(--gold); transform: translateX(5px); }
}
.nx:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.nx-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 3vw, 42px);
  font: 500 12px/1 var(--font-m);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 180ms ease;
}
.nx-back i {
  width: 7px; height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nx-back:hover { color: var(--gold); }
  .nx-back:hover i { transform: rotate(45deg) translate(-2px, 2px); }
}

@media (max-width: 900px) {
  .nx-grid { grid-template-columns: 1fr; }
  .nx {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px 0 22px;
  }
  .nx:not(:first-child) { padding-left: 0; }
  .nx:last-child { border-bottom: 0; }
  .nx p { max-width: none; }
}

/* ---------- 6 · /usluge/ HUB: mapa ponude (§6) ------------------
   Do R05 su katalog, prodavnica, visejezicni sajtovi, aplikacije,
   demo, kalkulator i AI asistenti stajali na hub-u kao OBICAN TEKST
   bez linka. Postojale su strane, ali se do njih nije moglo doci.
   Sada je svaka stavka link, a grupe su iste kao u panelu i fioci. */

/* istaknuta usluga u grupi — jedna po grupi, ne sest kartica */
.svc-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  border: 1px solid rgba(233, 184, 80, .28);
  border-radius: 16px;
  background:
    radial-gradient(110% 150% at 100% 0%, rgba(233, 184, 80, .08), transparent 58%),
    var(--panel);
  padding: clamp(26px, 3.2vw, 46px);
  margin-bottom: clamp(18px, 2.2vw, 30px);
  transition: border-color 260ms ease;
}
.svc-lead-b { display: grid; gap: 12px; }
.svc-lead .idx { font-family: var(--font-m); font-size: 11px; letter-spacing: .2em; color: var(--gold); }
.svc-lead h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.svc-lead p { color: var(--muted); font-size: clamp(15.5px, 1.2vw, 17.5px); max-width: 58ch; }
.svc-lead .svc-lead-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.svc-lead .svc-lead-tags span {
  font: 500 11px/1 var(--font-m); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 11px;
}
.svc-lead .go {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 660; color: var(--gold); white-space: nowrap;
}
.svc-lead .go .arr { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(233, 184, 80, .4); border-radius: 999px; }
.svc-lead .go .arr svg { width: 15px; height: 15px; transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svc-lead:hover { border-color: rgba(233, 184, 80, .55); }
  .svc-lead:hover .go .arr svg { transform: translateX(4px); }
}
@media (max-width: 820px) {
  .svc-lead { grid-template-columns: 1fr; align-items: start; }
}

/* lake stavke — redovi sa hairline podeocima, ne jos jedna mreza kartica */
.svc-rows { display: grid; border-top: 1px solid var(--line-strong); }
.svc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(18px, 1.9vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color 220ms ease, padding-left 260ms var(--ease-out);
}
.svc-row .idx { font: 500 11px/1.6 var(--font-m); letter-spacing: .2em; color: var(--dim); }
.svc-row-b { display: grid; gap: 5px; }
.svc-row h3 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 720; letter-spacing: -.012em; }
.svc-row p { color: var(--muted); font-size: 15px; max-width: 62ch; }
.svc-row .go { width: 18px; height: 18px; display: inline-flex; color: var(--dim); align-self: center;
  transition: color 200ms ease, transform 260ms var(--ease-out); }
.svc-row .go svg { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  a.svc-row:hover { background-color: rgba(244, 240, 230, .022); padding-left: 12px; }
  a.svc-row:hover h3 { color: var(--gold); }
  a.svc-row:hover .go { color: var(--gold); transform: translateX(4px); }
}
a.svc-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 620px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-row .idx { grid-column: 1 / -1; }
}

/* mapa ponude: cetiri cvora (bila su pet i nisu se poklapala
   ni sa panelom ni sa sekcijama ispod) */
.sys-nodes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
@media (min-width: 1100px) {
  .sys-nodes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 2.6vw, 48px); row-gap: 0; }
  .sys-nodes-4 .sys-node h3 { font-size: clamp(18px, 1.4vw, 22px); }
  .sys-nodes-4 .sys-node p { font-size: 14.5px; }
}
@media (max-width: 620px) {
  .sys-nodes-4 { grid-template-columns: 1fr; row-gap: 34px; }
}
/* cetiri cvora se zakljucavaju ranije nego pet */
.sys-flow--wide .sys-nodes-4 ~ .sys-lock { transition-delay: 1480ms; }

/* fiksna traka ne sme da pokrije metu sidra */
[id="visejezicni"],
#pronadju-vas, #predstavite-se, #vodite-posao, #odrzite-zamah { scroll-margin-top: 104px; }

/* ---------- 7 · FLAGSHIP: traka isporucenih radova (§18) --------
   /izrada-sajtova/ je najvaznija interna strana i ne sme da izgleda
   kao bilo koja druga service strana. Ovo je jedini blok ovog oblika
   na sajtu: cetiri stvarna snimka u nizu, bez okvira kartice, sa
   opsegom posla i istinitim statusom ispod svakog. */
/* Treci ton sekcije. Do R05 je sajt imao tacno dva: `sec` i
   `sec sec-tint`, koji se mehanicki smenjuju kroz 170 sekcija — to je
   glavni nalaz audita ponavljanja (§15). `sec-deep` se koristi retko i
   namerno, tamo gde jedna sekcija treba da bude zaseban takt. */
.sec-deep {
  position: relative;
  background: #08080a;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.sec-deep::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: clamp(80px, 12vw, 190px);
  height: 1px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(233, 184, 80, .5);
}

.fsw {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.fsw-i { display: grid; gap: 0; align-content: start; }
.fsw-shot {
  display: block;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 260ms ease;
}
.fsw-shot img { display: block; width: 100%; height: auto; transition: transform 600ms var(--ease-out); }
.fsw-meta {
  display: grid;
  gap: 7px;
  padding: 16px 2px 0;
  border-top: 1px solid transparent;
  margin-top: -1px;
}
.fsw-scope {
  font: 500 10.5px/1.5 var(--font-m);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.fsw-n {
  display: flex; align-items: center; gap: 9px;
  font-size: clamp(16px, 1.3vw, 19px); font-weight: 720; letter-spacing: -.01em; color: var(--ink);
}
.fsw-n .arr { width: 15px; height: 15px; display: inline-flex; color: var(--dim);
  transition: color 200ms ease, transform 260ms var(--ease-out); }
.fsw-n .arr svg { width: 100%; height: 100%; }
.fsw-st { font: 500 11px/1.4 var(--font-m); letter-spacing: .1em; color: var(--dim); }
.fsw-st.is-live { color: var(--live); }
@media (hover: hover) and (pointer: fine) {
  .fsw-i:hover .fsw-shot { border-color: rgba(233, 184, 80, .42); }
  .fsw-i:hover .fsw-shot img { transform: scale(1.035); }
  .fsw-i:hover .fsw-n .arr { color: var(--gold); transform: translateX(4px); }
}
.fsw-i:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 1099px) {
  .fsw { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 560px) {
  .fsw { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- 8 · NOVA SIGNAL STANJA (§23) -----------------------
   `404 → 200` je stajao na osam ruta, ukljucujuci strane o procesu i
   poredjenju gde ta recenica nije tacna. Dva nova stanja koriste isti
   mehanizam (--bp progres + .is-lit), bez nove skripte. */

/* D — TOK: tri cvora se pale dok signal prolazi */
.brk-node {
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px 2px rgba(233, 184, 80, .45);
  opacity: clamp(0, calc((var(--bp, 0) - var(--at)) * 9), 1);
  transform: scale(clamp(.4, calc(.4 + (var(--bp, 0) - var(--at)) * 6), 1));
}
.brk-flow .brk-in { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.brk-flow .brk-label-r { color: var(--steel); font-weight: 500; }
.brk-flow.is-lit .brk-label-r { color: var(--gold); }

/* E — OTKRIVENO: traka se siri iz sredine ka ivicama */
.brk-rail-rev { height: 2px; display: block; }
.rev-base, .rev-live {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1.5px;
}
.rev-base { background: rgba(244, 240, 230, .08); }
.rev-live {
  background: var(--sig-gradient);
  box-shadow: 0 0 14px rgba(233, 184, 80, .45);
  transform: scaleX(var(--bp, 0));
  transform-origin: center;
}
.brk-reveal .brk-in { gap: 20px; }
.brk-reveal.is-lit .brk-label-c { color: var(--gold); }

/* ---------- 9 · OPSEG POSLA NA KARTICI RADA (§20) ---------------
   Kartica je do R05 imala vrstu posla i opis, ali ne i sta je BIRO
   konkretno uradio — pa je razlog za klik bio „procitaj jos". Opseg
   je iskljucivo verifikovan iz same studije slucaja. Filtera nema
   namerno: sa sedam radova jedna kategorija bi bila prazna, a druga
   bi sadrzala sve (§19). */
.work-scope {
  display: block;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 500 11px/1.5 var(--font-m);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- 10 · NASLOV VIDLJIV SAMO CITACU EKRANA --------------
   Osam ruta je islo h1 → h3 bez h2 izmedju: kartice i cvorovi
   legitimno nose h3, ali sekcija u kojoj stoje nije imala naslov, pa
   je citac ekrana gubio nivo. Naslov se dodaje, izgled se ne menja. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 11 · reduced motion i stampa za R06 elemente -------- */
@media (prefers-reduced-motion: reduce) {
  .menu .mnav, .menu .macc { opacity: 1; transform: none; transition: none; }
  .macc-cx, .nx::before, .nx-go, .nx-back i, .svcp-lead-go .arr svg,
  .svc-row, .svc-row .go, .svc-lead .go .arr svg,
  .fsw-shot img, .fsw-n .arr { transition: none; }
  .svc-panel { transition: opacity 1ms linear, visibility 1ms linear; }
}
@media print {
  .nx-sec, .menu-scroll { display: none !important; }
}
/* R06:CSS:END */
/* R06B:CSS:START */

/* ============================================================
   R06B · DISCOVERY & ANSWER ENGINE
   R404_SIGNAL_DISCOVERY_ANSWER_ENGINE_R06B

   Sloj ide POSLE r06.css i sme da ga pregazi.
   ============================================================ */

/* ---------- P0 · MEGA PANEL MORA DA SE DOHVATI (§2) -----------
   Merenje pre popravke (_qa/menu-probe.before.json):
     okidac „Usluge"  y 25,4 – 60,6 · sirina 64 px
     panel            y 88   – 461  · sirina 1224–1344 px
     ::before most    y 48   – 88   ali ga `overflow-y:auto` panela
                                     iseca iz hit-testa
   Rezultat: pojas od 27,4 px u kome pokazivac nije ni na okidacu ni
   na panelu, a `pointer-events` se odmah prebaci na `none`. Panel je
   umirao na 3. od 22 koraka poteza; 0/6 meta dohvatljivo.

   Popravka ima tri dela:
     1. most je PRAVI element — overflow ga ne moze isteci;
     2. panel se otvara i na `[data-open]`, sto JS drzi jos 240 ms
        posle izlaska pokazivaca (§2: dozvoljeno 150–300 ms);
     3. panel i most vise ne racunaju visinu trake kao 88 px nego je
        mere (`--nav-h`), pa se pojas ne moze vratiti kad se traka
        promeni. ---------------------------------------------------- */
.svc-bridge {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--svc-bridge-top, 59px);
  height: var(--svc-bridge-h, 29px);
  z-index: 59;
  /* Ziv samo dok je ponuda otvorena — inace bi presekao vrh hero-a. */
  pointer-events: none;
}
.nav-has-panel:hover .svc-bridge,
.nav-has-panel:focus-within .svc-bridge,
.nav-has-panel[data-open="1"] .svc-bridge { pointer-events: auto; }

/* Atribut `data-open` postoji SAMO ako je skripta proradila. Dok ga
   nema, radi `:hover` iz r06.css (uz pravi most gore) — meni je
   upotrebljiv i bez JS-a. Cim se pojavi, on je jedini izvor istine:
   `="0"` gasi i `:hover` i `:focus-within`, pa Escape moze da zatvori
   panel iako fokus ostaje na okidacu. */
.nav-has-panel[data-open="0"] .svc-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
}
.nav-has-panel[data-open="0"] .svc-bridge { pointer-events: none; }
.nav-has-panel[data-open="0"] .cx { transform: rotate(45deg) translate(-2px, -2px); opacity: .5; }

.nav-has-panel[data-open="1"] .svc-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.nav-has-panel[data-open="1"] .cx { transform: rotate(225deg) translate(-2px, -2px); opacity: .9; }

.svc-panel {
  top: var(--svc-panel-top, 88px);
  max-height: calc(100vh - var(--svc-panel-top, 88px) - 24px);
}

/* Okidac dobija nesto veci prihvat po visini — potez ka panelu krece
   iz sire zone, pa dijagonala ne ispada odmah na prvom pikselu. */
.nav-has-panel > a { padding-block: 10px; }

@media (max-width: 1023px) {
  .svc-bridge { display: none; }
}

/* ---------- P0b · MOBILNA FIOKA (§3) --------------------------
   Sest osnovnih usluga je izašlo iz akordeona u otvorenu grupu, pa
   je lista duza — redovi smeju da budu nesto zbijeniji, ali meta za
   prst nigde ne sme ispod 44 px. Mereno pre: najmanja meta u fioci
   bila je 19 px (broj telefona u podnozju fioke). */
/* r06.css je ovde morao da spusti `min-height` na 0 da bi ubio
   nasledjenu naslovnu velicinu; posledica je meta od 19 px za broj
   telefona — a to je na mobilnom jedna od dve prave konverzije.
   Ista specificnost, kasniji sloj: velicina slova ostaje, meta raste. */
.menu .menu-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
}
/* „Cene" je u osnovnoj traci fioke jedina komercijalna meta — dobija
   zlatni ton da se ne izgubi medju „Radovi / Vodici / Kontakt". */
.mnav-base a.is-accent { color: var(--gold); }

/* `.macc` zavrsava linijom, `.mnav-base` pocinje linijom, a izmedju je
   bilo 22 px praznog — u kracoj R06 fioci je to bio razmak, u duzoj
   R06B fioci izgleda kao red koji nedostaje. */
.mnav-base { margin-top: 10px; }

/* ---------- 1 · TRI KORAKA (§5) -------------------------------
   Naslovna i `/usluge/` dele isti mentalni model: problem -> resenje
   -> cena. Ne kartice u mrezi — tri koraka sa vidljivim redosledom.

   NAMERNO se ne zove `.steps/.step`: to je postojeca SIGNAL komponenta
   (tri kolone, `site.css:1947`) koja se koristi na deset ruta. Isto
   ime bi ih sve razbilo. */
.jrn { display: grid; gap: 0; }
.jrn-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  padding: clamp(26px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--line);
}
.jrn-row:last-child { border-bottom: 1px solid var(--line); }
.jrn-n {
  font: 700 clamp(30px, 4.2vw, 58px)/1 var(--font-m);
  color: var(--line-strong);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  padding-top: .08em;
}
.jrn-b h3 {
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 720;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.jrn-b > p { color: var(--muted); max-width: 62ch; margin: 0 0 18px; line-height: 1.62; }

/* Pitanja korisnika — recenice, ne oznake usluga. */
.qlist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qlist a, .qchip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, .012);
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.qlist a::before, .qchip::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-strong);
  flex: none;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .qlist a:hover {
    border-color: rgba(233, 184, 80, .42);
    color: var(--ink);
    background: rgba(233, 184, 80, .035);
  }
  .qlist a:hover::before { background: var(--gold); box-shadow: 0 0 8px 1px rgba(233, 184, 80, .55); }
}
.qlist a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- 2 · BIRAC CILJA na /usluge/ (§8) -------------------
   Prvo sto se vidi nije katalog od 15 usluga nego pet ciljeva.
   Redovi, ne kartice: cilj se cita levo, resenje desno.

   Red NIJE jedan veliki <a>: skoro svaki cilj ima dva legitimna
   odgovora (Google profil I lokalni SEO, katalog I prodavnica), a
   ugnezdeni linkovi u linku nisu ispravan HTML. Zato je red obican
   blok, a odgovori su izricite mete. */
.goals { border-top: 1px solid var(--line); }
.goal {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(14px, 2.4vw, 40px);
  padding: clamp(22px, 2.6vw, 32px) clamp(2px, 0.8vw, 10px);
  border-bottom: 1px solid var(--line);
}
.goal-q {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 640;
  letter-spacing: -.018em;
  line-height: 1.3;
  color: var(--ink);
}
.goal-q em { color: var(--gold); font-style: normal; }
.goal-note { display: block; margin-top: 7px; font-size: 14px; font-weight: 400; color: var(--dim); line-height: 1.5; }
.goal-a { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
@media (max-width: 760px) {
  .goal { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---------- 3 · ODGOVOR PRVO (§16) ----------------------------
   Prvo recenica koja odgovara, pa tek onda razrada. Odgovor nosi
   levu signal liniju — oko ga nadje pre nego sto pocne da cita. */
.ans {
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px clamp(16px, 1.8vw, 26px);
  margin: 0 0 clamp(18px, 2vw, 26px);
  max-width: 68ch;
}
.ans p { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; color: var(--ink); margin: 0; }
.ans p + p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.ans-src {
  display: block;
  margin-top: 12px;
  font: 500 11.5px/1.5 var(--font-m);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Jedan blok pitanje–odgovor. Razmak medju njima je veci od razmaka
   unutar bloka, pa se pitanja citaju kao lista i kad ih ima sest. */
.qa { padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--line); }
.qa:first-of-type { border-top: 0; padding-top: 0; }
.qa > .qlist { margin-top: 4px; }

/* Pitanje kao naslov — vece i tise od obicnog H2. */
.qh {
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 32ch;
}

/* ---------- 4 · SIDRA U STRANI (§9, §21) ----------------------
   „Sta zelite da saznate?" — skokovi u odeljke, ne pretraga. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.jump-h {
  width: 100%;
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}

/* ---------- 5 · TABELA POREDJENJA (§17) ----------------------- */
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th {
  font: 500 11px/1 var(--font-m);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom-color: var(--line-strong);
}
.cmp td:first-child { color: var(--ink); font-weight: 560; }
.cmp td { color: var(--muted); line-height: 1.55; }
.cmp-wrap { overflow-x: auto; }
/* R06B:CSS:END */
/* R06C:CSS:START */

/* ============================================================
   R06C · SIGNAL BIBLIOTEKA VIZUELNIH PREDAHA
   R404_SIGNAL_FLAGSHIP_VISUAL_R06C

   Sloj ide POSLE r06b.css.

   Problem koji resava: cetiri flagship strane imale su 85 kutija,
   od cega 25 sadrzajnih `.svc-item` kartica koje nose proces,
   korist i objasnjenje — nista od toga ne treba pravougaonik.
   Mereno u `_qa/cardcount.before.json`.

   Imena su namerno nova i nepostojeca u `site.css`: u R06B su
   `.steps/.step` umalo razbile deset ruta. Provereno pre pisanja.

   Motion politika (emil-design-eng, §27):
     · nikad `transition: all`
     · ulaz uvek `ease-out`, izlaz brzi od ulaza
     · UI ispod 300 ms; pripovedni potezi do 900 ms i samo jednom
     · nikad ulaz iz `scale(0)`
     · hover iza `@media (hover:hover) and (pointer:fine)`
     · `prefers-reduced-motion` gasi KRETANJE, ne informaciju
   ============================================================ */

/* ---------- 0 · ZAJEDNICKO ------------------------------------ */

/* Puna sirina van `.wrap`, bez horizontalnog preloma.
   `100vw` bi na Windows-u dodao sirinu skrolera — zato `100%`
   plus negativne margine do ivice viewport-a. */
.bleed {
  width: auto;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--pad-x), calc(50vw - var(--max-w) / 2));
}
@supports (width: 100dvw) {
  .bleed { margin-inline: calc(50% - 50dvw); padding-inline: max(var(--pad-x), calc(50dvw - var(--max-w) / 2)); }
}

/* „Tisina" — odeljak koji NAMERNO nema sadrzaj osim jedne linije.
   Bez ovoga ritam iz §8 ne postoji: kontrast pravi vrednost. */
.hush {
  padding-block: clamp(56px, 9vw, 132px);
  display: grid;
  place-items: center;
}
.hush i {
  display: block;
  width: min(340px, 46%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}

/* Oznaka „ovo je objasnjenje, ne dokaz" (§15, §17).
   Stoji uz svaku scenu koja ilustruje, da se ne procita kao merenje. */
.illus-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font: 500 10.5px/1.4 var(--font-m);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.illus-note::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--steel);
  flex: none;
}

/* ---------- A · DATA MONUMENT (§9A) ---------------------------
   Jedan meren podatak drzi ceo kadar. Cinjenica je u HTML-u sa
   izvorom i datumom — nikad upecena u sliku. */
.dmon {
  padding-block: clamp(48px, 7vw, 104px);
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}
.dmon-eye {
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dmon-eye::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px 1px rgba(233, 184, 80, .55);
}
.dmon-row {
  display: flex;
  align-items: baseline;
  /* Ne sme da se prelomi: strelica izmedju dva broja nosi znacenje,
     a u dva reda ispada da pokazuje nikuda. */
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(10px, 1.4vw, 20px);
  font-family: var(--font-m);
  font-variant-numeric: tabular-nums;
}
.dmon-from,
.dmon-to {
  font-size: clamp(22px, 2.9vw, 42px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}
.dmon-from { color: var(--steel); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dmon-to { color: var(--ink); }
.dmon-arrow {
  width: clamp(22px, 2.4vw, 40px);
  height: 2px;
  background: var(--sig-gradient);
  position: relative;
  align-self: center;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 620ms var(--ease-out) 120ms;
}
.dmon-arrow::after {
  content: "";
  position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity 200ms ease 640ms;
}
.dmon.on .dmon-arrow { transform: scaleX(1); }
.dmon.on .dmon-arrow::after { opacity: 1; }

/* Dominanta: procenat je najveci element u kadru. */
.dmon-big {
  font: 760 clamp(64px, 15vw, 210px)/0.86 var(--font-d);
  letter-spacing: -.045em;
  color: var(--ink);
  display: block;
  margin-block: clamp(4px, 1vw, 14px);
  filter: var(--sig-glow);
}
.dmon-what {
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.6;
}
.dmon-what b { color: var(--ink); font-weight: 620; }
.dmon-src {
  font: 500 11px/1.6 var(--font-m);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.dmon-src a { color: var(--gold); border-bottom: 1px solid rgba(233, 184, 80, .3); }
.dmon-fine {
  font-size: 14px;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.dmon-fine span { display: inline-flex; align-items: center; gap: 8px; }
.dmon-fine span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--live); flex: none;
}
@media (min-width: 1000px) {
  .dmon { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: clamp(40px, 6vw, 96px); }
  .dmon-head { grid-column: 1; }
  .dmon-side { grid-column: 2; grid-row: 1; padding-bottom: clamp(8px, 1.4vw, 22px); display: grid; gap: 16px; }
}

/* ---------- B · QUESTION MONUMENT (§9B) -----------------------
   Stvarno pitanje kupca je vizuelni dogadjaj. Odgovor odmah ispod,
   nikad ispod 400 reci uvoda (§16). */
.qmon { padding-block: clamp(44px, 6.5vw, 96px); }
.qmon-q {
  font: 740 clamp(30px, 6vw, 76px)/1.04 var(--font-d);
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  max-width: 17ch;
}
.qmon-q em {
  font-style: normal;
  color: var(--gold);
  filter: var(--sig-glow);
}
.qmon-a {
  border-left: 2px solid var(--gold);
  padding-left: clamp(18px, 2vw, 28px);
  max-width: 62ch;
}
.qmon-a p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink); margin: 0; }
.qmon-a p + p { margin-top: 12px; font-size: 15.5px; color: var(--muted); }
@media (min-width: 1100px) {
  .qmon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
  .qmon-q { margin-bottom: 0; }
}

/* ---------- C · TRANSFORMACIJA (§9F) --------------------------
   PRE → SIGNAL → POSLE, na stvarnim snimcima. Slika nosi atmosferu,
   HTML nosi tvrdnju. */
.xform { padding-block: clamp(34px, 5vw, 70px); }
.xform-grid { display: grid; gap: clamp(16px, 2.4vw, 30px); }
/* `figure` nosi podrazumevanu marginu `1em 40px` — bez reseta se
   raspored razilazi i oznaka „Pre" izadje van kadra. */
.xform-shot { position: relative; display: block; margin: 0; }
.xform-shot img {
  display: block;
  width: 100%;
  height: auto;
  /* rezervisana visina — bez ovoga uredjivacki raspored obara CLS */
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
}
.xform-shot--pre img { filter: grayscale(.72) contrast(.9) brightness(.72); }
.xform-tag {
  position: absolute;
  top: 0; left: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .2em;
  text-transform: uppercase;
  background: rgba(5, 5, 5, .88);
  backdrop-filter: blur(6px);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  z-index: 2;
}
.xform-shot--posle .xform-tag { color: var(--gold); border-color: rgba(233, 184, 80, .28); }
.xform-shot--posle .xform-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 9px 1px rgba(233, 184, 80, .6);
}
.xform-note {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 46ch;
}
.xform-note b { color: var(--ink); font-weight: 620; }

@media (min-width: 900px) {
  .xform-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  /* Jedno polje dominira (princip 3): POSLE je krupniji i ide napred. */
  .xform-shot--pre { transform: scale(.92); transform-origin: right center; }
  .xform-shot--posle { z-index: 2; }
  .xform-shot--posle img { box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
}

/* Signal koji spaja dva stanja — vertikalno na telefonu, horizontalno gore. */
.xform-link { position: relative; display: grid; place-items: center; }
.xform-link i {
  display: block;
  background: var(--sig-gradient);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out);
}
@media (max-width: 899px) {
  .xform-link { padding-block: 6px; }
  .xform-link i { width: 2px; height: 46px; transform-origin: top center; transform: scaleY(0); }
  .xform.on .xform-link i { transform: scaleY(1); }
}
@media (min-width: 900px) {
  .xform-link i { width: clamp(34px, 4vw, 70px); height: 2px; }
  .xform.on .xform-link i { transform: scaleX(1); }
}

/* ---------- D · SEKVENCA GLAGOLA (§12) ------------------------
   Osam kartica „zasto sajt" postaje cetiri glagola. Linija prolazi
   kroz njih i pali ih redom — jedan motion dogadjaj, ne osam. */
.verbs { padding-block: clamp(40px, 6vw, 92px); position: relative; }

/* Linija sedi TACNO na vrhu reda glagola, a tacke se centriraju na nju.
   Ranije su bile racunate od `.verbs`, pa su padale na same reci. */
.verbs-line {
  position: absolute;
  left: 0; right: 0;
  top: clamp(40px, 6vw, 92px);
  height: 1px;
  background: var(--line-strong);
  overflow: hidden;
}
.verbs-line i {
  position: absolute; inset: 0;
  background: var(--sig-gradient);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-out);
}
.verbs.on .verbs-line i { transform: scaleX(1); }
.verbs-row {
  display: grid;
  gap: clamp(22px, 3vw, 44px);
  position: relative;
}
.verb { position: relative; padding-top: clamp(30px, 3.6vw, 46px); }
.verb::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--steel);
  transition: background-color 260ms ease, box-shadow 260ms ease;
}
.verbs.on .verb::before { background: var(--gold); box-shadow: 0 0 12px 2px rgba(233, 184, 80, .5); }
.verbs.on .verb:nth-child(1)::before { transition-delay: 180ms; }
.verbs.on .verb:nth-child(2)::before { transition-delay: 430ms; }
.verbs.on .verb:nth-child(3)::before { transition-delay: 680ms; }
.verbs.on .verb:nth-child(4)::before { transition-delay: 930ms; }
.verb b {
  display: block;
  font: 780 clamp(30px, 4.6vw, 60px)/0.98 var(--font-d);
  letter-spacing: -.04em;
  color: var(--ink);
}
.verb span {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30ch;
}
@media (min-width: 860px) {
  .verbs-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  /* Mobilni: linija ide levom ivicom, ne vrhom (§28 — drugi kadar). */
  .verbs { padding-block: clamp(28px, 7vw, 48px); }
  .verbs-line { top: 0; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
  .verbs-line i { transform-origin: top center; transform: scaleY(0); }
  .verbs.on .verbs-line i { transform: scaleY(1); }
  .verbs-row { padding-left: 32px; gap: clamp(26px, 6vw, 38px); }
  .verb { padding-top: 0; }
  .verb::before { top: 12px; left: -32px; }
}

/* ---------- E · SCENA: UPIT → PIN (§13) -----------------------
   Objasnjenje, ne dokaz. Nema laznog SERP-a, nema rangiranja. */
.findscene {
  padding-block: clamp(40px, 6vw, 88px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 940px) { .findscene { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }

/* polje pretrage sa stvarnim srpskim upitom */
.fs-query {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 24px);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .02);
  max-width: 30ch;
}
.fs-query i {
  width: 15px; height: 15px; flex: none;
  border: 1.6px solid var(--dim);
  border-radius: 50%;
  position: relative;
}
.fs-query i::after {
  content: ""; position: absolute;
  right: -6px; bottom: -6px;
  width: 7px; height: 1.6px;
  background: var(--dim);
  transform: rotate(45deg);
}
.fs-query b {
  font: 500 clamp(15px, 1.5vw, 19px)/1 var(--font-m);
  color: var(--ink);
  letter-spacing: -.01em;
}
/* kursor koji trepce — jedini „kuca se" signal, bez animacije slova */
.fs-query em {
  display: inline-block;
  width: 1.5px; height: 1.1em;
  background: var(--gold);
  margin-left: 1px;
  animation: fs-caret 1.15s steps(1) infinite;
}
@keyframes fs-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* signal koji spusta od upita do pina */
.fs-drop { position: relative; height: clamp(60px, 8vw, 104px); margin-left: 26px; }
.fs-drop i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(233, 184, 80, 0));
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 700ms var(--ease-out);
}
.findscene.on .fs-drop i { transform: scaleY(1); }

/* pin sastavljen od prstenova — nije uvecana ikonica (§11) */
.fs-pin {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  /* 88% umesto 100%: ulazni `scale` prstena ne pomera raspored, ali
     pomera oslikanu povrsinu i pravi horizontalni prelom na telefonu.
     Mereno: 412 px unutar kolone od 350 px na 390 px sirine. */
  width: min(88%, 420px);
  margin-inline: auto;
}
.fs-ring {
  position: absolute;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 520ms var(--ease-out), transform 720ms var(--ease-out);
}
.fs-ring:nth-child(1) { inset: 0; }
.fs-ring:nth-child(2) { inset: 14%; }
.fs-ring:nth-child(3) { inset: 28%; border-color: rgba(233, 184, 80, .3); }
.findscene.on .fs-ring { opacity: 1; transform: scale(1); }
.findscene.on .fs-ring:nth-child(1) { transition-delay: 520ms; }
.findscene.on .fs-ring:nth-child(2) { transition-delay: 640ms; }
.findscene.on .fs-ring:nth-child(3) { transition-delay: 760ms; }
.fs-dot {
  width: 18px; height: 18px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) scale(.6);
  background: var(--gold);
  box-shadow: 0 0 22px 4px rgba(233, 184, 80, .45);
  opacity: 0;
  transition: opacity 300ms var(--ease-out) 820ms, transform 420ms var(--ease-out) 820ms;
}
.findscene.on .fs-dot { opacity: 1; transform: rotate(-45deg) scale(1); }
/* Pin se koristi i van `.findscene` (anatomija profila), gde nema
   aktivacije — tada prstenovi moraju da stoje vidljivi od pocetka. */
.fs-pin--static .fs-ring { opacity: 1; transform: none; transition: none; }
.fs-pin--static .fs-dot { opacity: 1; transform: rotate(-45deg); transition: none; }

.fs-cap {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 500 11px/1 var(--font-m);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- F · ANATOMIJA (§15) -------------------------------
   Sest kartica → jedan objekat sa numerisanim izvodima. */
.anat { padding-block: clamp(36px, 5vw, 78px); display: grid; gap: clamp(26px, 3.4vw, 48px); }
@media (min-width: 960px) { .anat { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; } }
.anat-list { display: grid; gap: 0; counter-reset: anat; }
.anat-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.anat-item:last-child { border-bottom: 1px solid var(--line); }
.anat-item::before {
  counter-increment: anat;
  content: counter(anat, decimal-leading-zero);
  font: 500 12px/1.6 var(--font-m);
  letter-spacing: .1em;
  color: var(--gold);
  padding-top: 3px;
}
.anat-item b { display: block; font-size: clamp(16px, 1.35vw, 18.5px); font-weight: 660; color: var(--ink); letter-spacing: -.01em; }
.anat-item span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
/* Linkovi u anatomiji su se stapali sa telom teksta — u listi bez
   kutija to je jedini nagovestaj da negde vodi. */
.anat-item a { color: var(--gold); border-bottom: 1px solid rgba(233, 184, 80, .28); }
@media (hover: hover) and (pointer: fine) {
  .anat-item a:hover { border-bottom-color: var(--gold); }
}
.anat-list { list-style: none; padding: 0; margin: 0; }
.citynet-wrap { display: grid; align-content: center; }

/* Shematski profil — DRUGI simbol na strani, da se pin ne ponavlja
   dvaput. Nije snimak i ne sme se procitati kao dokaz (§15): nema
   naziva firme, nema ocene, nema teksta osim dugmeta. */
.pcard {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .008));
  max-width: 340px;
}
.pcard-top { display: flex; align-items: center; gap: 12px; }
.pcard-mark {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(233, 184, 80, .1);
}
.pcard-name { display: block; height: 11px; width: 62%; background: var(--steel); border-radius: 2px; }
.pcard-stars { display: flex; gap: 5px; }
.pcard-stars i {
  width: 9px; height: 9px; flex: none;
  background: var(--gold);
  opacity: .85;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pcard-stars i:last-child { opacity: .3; }
.pcard-line { display: block; height: 8px; width: var(--w, 70%); background: var(--steel); border-radius: 2px; }
.pcard-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.pcard-photos i {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
}
.pcard-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font: 500 11px/1 var(--font-m);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  justify-self: start;
}

/* ---------- G · GRAD KAO MREZA (§17) --------------------------
   Objasnjenje: upit ulazi, mreza je grad, jedan cvor se pali. */
.citynet {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.citynet svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cn-mesh { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.cn-node { fill: var(--steel); transition: fill 300ms ease; }
.cn-path {
  stroke: var(--gold);
  stroke-width: 1.8;
  fill: none;
  filter: var(--sig-glow);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1200ms var(--ease-out);
}
.citynet.on .cn-path { stroke-dashoffset: 0; }
.cn-hit {
  fill: var(--gold);
  opacity: 0;
  transition: opacity 300ms ease 1080ms;
}
.citynet.on .cn-hit { opacity: 1; }
.cn-halo {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
  transition: opacity 620ms ease 1120ms, transform 900ms var(--ease-out) 1120ms;
}
.citynet.on .cn-halo { opacity: .45; transform: scale(1); }
.cn-label {
  font: 500 10px var(--font-m);
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--dim);
}
.citynet.on .cn-label--hit { fill: var(--gold); }

/* ---------- H · GRANANJE ODLUKE (§18) -------------------------
   Jedna linija ulazi, pet krakova izlazi. Katalog ostaje ispod. */
.branchmap { position: relative; padding-block: clamp(10px, 2vw, 24px); }
.bm-list { display: grid; gap: 0; position: relative; }
.bm-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(14px, 2.2vw, 34px);
  align-items: center;
  padding: clamp(20px, 2.5vw, 30px) 0 clamp(20px, 2.5vw, 30px) clamp(34px, 4vw, 62px);
  border-bottom: 1px solid var(--line);
}
.bm-item:first-child { border-top: 1px solid var(--line); }

/* stablo: uspravna linija levo + kratki krak ka svakoj odluci */
.bm-list::before {
  content: "";
  position: absolute;
  left: clamp(9px, 1.1vw, 16px);
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--line-strong);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 900ms var(--ease-out);
}
.branchmap.on .bm-list::before { transform: scaleY(1); }
.bm-item::before {
  content: "";
  position: absolute;
  left: clamp(9px, 1.1vw, 16px);
  top: 50%;
  width: clamp(18px, 2.4vw, 38px);
  height: 1px;
  background: var(--line-strong);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 420ms var(--ease-out), background-color 240ms ease;
}
.branchmap.on .bm-item::before { transform: scaleX(1); }
.branchmap.on .bm-item:nth-child(1)::before { transition-delay: 260ms; }
.branchmap.on .bm-item:nth-child(2)::before { transition-delay: 380ms; }
.branchmap.on .bm-item:nth-child(3)::before { transition-delay: 500ms; }
.branchmap.on .bm-item:nth-child(4)::before { transition-delay: 620ms; }
.branchmap.on .bm-item:nth-child(5)::before { transition-delay: 740ms; }
.bm-dot {
  position: absolute;
  left: clamp(5px, .75vw, 12px);
  top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--steel);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.bm-q {
  grid-column: 2;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 680;
  letter-spacing: -.025em;
  line-height: 1.18;
  color: var(--ink);
}
.bm-q span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dim);
  letter-spacing: 0;
}
.bm-a { grid-column: 3; display: flex; flex-wrap: wrap; gap: 8px; }
@media (hover: hover) and (pointer: fine) {
  .bm-item:hover .bm-dot { background: var(--gold); box-shadow: 0 0 12px 2px rgba(233, 184, 80, .5); }
  .bm-item:hover::before { background: var(--gold); }
  .bm-item:hover .bm-q { color: var(--gold-hi); }
}
@media (max-width: 860px) {
  /* §19: jedna odluka po ekranu, ne umanjen dijagram. */
  .bm-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-block: clamp(24px, 6vw, 34px);
  }
  .bm-q, .bm-a { grid-column: 1; }
  .bm-q { font-size: clamp(21px, 6vw, 26px); }
}

/* ---------- I · PROCESNI TRAG (§9E) ---------------------------
   Pet koraka kao jedna neprekidna putanja, ne pet kutija. */
.trace { padding-block: clamp(30px, 4vw, 56px); position: relative; }
.trace-list { display: grid; gap: 0; position: relative; counter-reset: tr; }
.trace-step {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px) 0 clamp(20px, 2.4vw, 28px) clamp(52px, 5.4vw, 84px);
  border-top: 1px solid var(--line);
}
.trace-step:last-child { border-bottom: 1px solid var(--line); }
.trace-list::before {
  content: "";
  position: absolute;
  left: clamp(28px, 3vw, 46px);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-strong);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1000ms var(--ease-out);
}
.trace.on .trace-list::before { transform: scaleY(1); }
.trace-step::before {
  counter-increment: tr;
  content: counter(tr, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: clamp(20px, 2.4vw, 28px);
  font: 500 11.5px/1.4 var(--font-m);
  letter-spacing: .12em;
  color: var(--dim);
}
.trace-step::after {
  content: "";
  position: absolute;
  left: clamp(24px, 3vw, 42px);
  top: calc(clamp(20px, 2.4vw, 28px) + 3px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--steel);
  transition: background-color 300ms ease;
}
.trace.on .trace-step::after { background: var(--gold); box-shadow: 0 0 10px 1px rgba(233, 184, 80, .45); }
.trace.on .trace-step:nth-child(1)::after { transition-delay: 200ms; }
.trace.on .trace-step:nth-child(2)::after { transition-delay: 340ms; }
.trace.on .trace-step:nth-child(3)::after { transition-delay: 480ms; }
.trace.on .trace-step:nth-child(4)::after { transition-delay: 620ms; }
.trace.on .trace-step:nth-child(5)::after { transition-delay: 760ms; }
.trace.on .trace-step:nth-child(6)::after { transition-delay: 900ms; }
.trace-step b { display: block; font-size: clamp(17px, 1.5vw, 21px); font-weight: 680; color: var(--ink); letter-spacing: -.015em; }
.trace-step p { margin: 8px 0 0; font-size: 15px; line-height: 1.62; color: var(--muted); max-width: 64ch; }
.trace-step em {
  display: inline-block;
  margin-top: 10px;
  font: 500 10.5px/1 var(--font-m);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--gold);
}

/* ---------- P0 · TROKOLONSKA TABELA U VODICU -------------------
   `.article` je 720 px — tacna mera za citanje, preuska za poredjenje
   u tri kolone. Tabela sme da izadje iz tela teksta, ali samo ona i
   samo kad ima mesta; pasusi ostaju na 720. */
@media (min-width: 1120px) {
  .article .dtable--3 {
    width: min(1040px, calc(100vw - 2 * var(--pad-x)));
    max-width: none;
    margin-left: calc((720px - min(1040px, calc(100vw - 2 * var(--pad-x)))) / 2);
  }
}

/* ---------- 2560 (§29) ----------------------------------------
   Pozornica sme da se siri; telo teksta ostaje kontrolisano. */
@media (min-width: 1800px) {
  .xform-grid { max-width: 2200px; margin-inline: auto; }
  /* §29: pozornica sme da izadje iz kontejnera od 1344 px, inace na
     27 inca ceo monument pluta u levoj trecini ekrana. Telo teksta
     ostaje na svojoj meri — siri se scena, ne recenica. */
  /* R07 · POPRAVKA NASLEĐENE GREŠKE — nije uvedena u R07, nađena je
     merenjem širina u R07 QA prolazu.

     Bilo je: `width: min(1900px, 100vw - 2*pad); margin-inline: auto`.
     `auto` centrira unutar RODITELJA (`.wrap`, sadržaj 1344 px), a ne
     unutar ekrana. Kad je izračunata širina veća od roditelja, element
     počne na levoj ivici roditelja i ceo višak ode UDESNO.

     Mereno na 1920: `.qmon` širok 1700 px, leva ivica 288 px → desna
     1988 px → 68 px horizontalnog preliva strane. Na 2560 se nije
     videlo (1700 px staje unutar ekrana), pa je greška preživela.

     Sada se negativna margina računa eksplicitno, pa je proširenje
     simetrično oko sredine ekrana na svakoj širini. */
  .dmon {
    --r07-w: min(1900px, calc(100vw - 2 * var(--pad-x)));
    width: var(--r07-w);
    margin-inline: calc(50% - 0.5 * var(--r07-w));
    column-gap: clamp(60px, 8vw, 180px);
  }
  .dmon-big { font-size: clamp(180px, 11vw, 260px); }
  .dmon-what, .qmon-a { max-width: 56ch; }
  .qmon {
    --r07-w: min(1700px, calc(100vw - 2 * var(--pad-x)));
    width: var(--r07-w);
    margin-inline: calc(50% - 0.5 * var(--r07-w));
  }
  .qmon-q { font-size: clamp(76px, 4.4vw, 104px); }
  .findscene { gap: clamp(56px, 5vw, 110px); }
  .fs-pin { max-width: 520px; }
  .citynet { max-width: 760px; }
}

/* ---------- REDUCED MOTION (§27) ------------------------------
   Gasi se KRETANJE, ne informacija: sve sto bi se animiralo stoji
   u konacnom stanju od prvog kadra. */
@media (prefers-reduced-motion: reduce) {
  .dmon-arrow, .xform-link i, .verbs-line i, .fs-drop i,
  .branchmap .bm-list::before, .branchmap .bm-item::before, .trace-list::before {
    transform: none !important;
    transition: none !important;
  }
  .dmon-arrow::after, .fs-ring, .fs-dot, .cn-hit, .cn-halo { opacity: 1 !important; transition: none !important; }
  .fs-ring, .fs-dot { transform: none !important; }
  .fs-dot { transform: rotate(-45deg) !important; }
  .cn-path { stroke-dashoffset: 0 !important; transition: none !important; }
  .verb::before, .trace-step::after { background: var(--gold) !important; transition: none !important; }
  .fs-query em { animation: none; opacity: 1; }
}
/* R06C:CSS:END */
/* R07:CSS:START */
/* ============================================================
   R07 — ASSET ROLLOUT: hero scene po strani + biblioteka predaha
   Ide POSLE r06c.css. Ne menja tokene, samo dodaje sloj.

   Motion pravila (emil-design-eng):
   · nikad `transition: all` — uvek imenovano svojstvo
   · ulazak = ease-out; nikad ease-in
   · UI interakcija ispod 300 ms; paljenje hero-a je izuzetak
     jer se vidi JEDNOM po poseti (red „retko" u tabeli učestalosti)
   · nikad iz scale(0)
   · reduced-motion = MANJE kretanja, ne prazan ekran
   ============================================================ */

:root {
  --r07-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --r07-scene-max: 1180px;
}

/* ============================================================
   1 · IGNITION HERO — naslovna
   Grad pali 404. Video se pušta JEDNOM i ostaje upaljen.
   Nema `loop`: kadar ima kraj i taj kraj je poenta.
   Nema scroll-scruba: 360svh prazne trake pre prvog sadržaja
   je bila najskuplja stvar na naslovnoj.
   ============================================================ */
.ihero {
  position: relative;
  min-height: 92svh;
  overflow: clip;
  background: var(--bg);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.ihero-media { position: absolute; inset: 0; z-index: 0; }
.ihero-poster,
.ihero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 52%;
}
/* Poster je prvi kadar samog videa, pa je zamena neprimetna.
   Video se pojavljuje tek kad ume da svira — nema crnog bljeska. */
.ihero-video { opacity: 0; transition: opacity 420ms var(--r07-ease); }
.ihero.is-playing .ihero-video { opacity: 1; }

.ihero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.62) 34%, rgba(5,5,5,0) 62%),
    linear-gradient(180deg, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0) 26%, rgba(5,5,5,0) 66%, rgba(5,5,5,0.78) 100%);
}
/* Bloom raste kad se znak upali — jedan prelaz, bez petlje. */
.ihero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1600ms ease;
  background: radial-gradient(46% 40% at 72% 40%, rgba(233,184,80,0.2), transparent 70%);
}
.ihero.is-lit .ihero-glow { opacity: 1; }

.ihero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 128px var(--pad-x) 96px;
}
.ihero-copy { max-width: 610px; display: grid; gap: 26px; }
.ihero h1 {
  font-size: clamp(40px, 4.9vw, 82px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.023em;
  text-wrap: balance;
  margin: 0;
}
.ihero h1 .q { color: var(--muted); font-weight: 640; }
.ihero h1 .found {
  color: var(--muted);
  font-weight: 640;
  transition: color 1100ms ease, text-shadow 1100ms ease;
}
.ihero.is-lit h1 .found {
  color: var(--gold-hi);
  text-shadow: 0 0 30px rgba(233,184,80,0.42);
}
.ihero-sub {
  font-size: clamp(16.5px, 1.2vw, 19px);
  line-height: 1.66;
  color: var(--muted);
  max-width: 470px;
  margin: 0;
}
.ihero-sub strong { color: var(--ink); font-weight: 620; }
.ihero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Jedna linija ispod CTA: šta strana obećava, bez još jednog pasusa. */
.ihero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
  font-family: var(--font-m);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.ihero-facts li { display: flex; align-items: center; gap: 8px; }
.ihero-facts li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-deep);
  flex: none;
}

.ihero-copy > * {
  opacity: 0;
  transform: translateY(16px);
  animation: r07In 900ms var(--r07-ease) forwards;
}
.ihero-copy > *:nth-child(1) { animation-delay: 120ms; }
.ihero-copy > *:nth-child(2) { animation-delay: 260ms; }
.ihero-copy > *:nth-child(3) { animation-delay: 400ms; }
.ihero-copy > *:nth-child(4) { animation-delay: 520ms; }
.ihero-copy > *:nth-child(5) { animation-delay: 620ms; }
@keyframes r07In { to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  /* Mobilni kadar je portret: znak je gore, tekst ide DOLE u tamnu
     trećinu brda.

     Prva verzija ovoga nije radila. `align-items: flex-end` nema efekta
     ako je blok teksta viši od raspoloživog prostora — a bio je: naslov,
     tri reda pasusa, dva dugmeta preko cele širine i tri činjenice
     zajedno su gurnuli tekst preko samog znaka i scena se izgubila.
     Zato je ovde tekst SKRAĆEN po visini, a ne samo pomeren:
     manji naslov, uži pasus, drugo dugme nije puna širina. */
  /* NE pun ekran: 92svh ostavlja ivicu sledeće sekcije vidljivom, pa
     se i bez znaka za skrol vidi da strana ide dalje. */
  .ihero { min-height: 92svh; align-items: flex-end; }
  /* Portretni izvor je uži od telefona, pa `cover` seče po širini a
     ne po visini — `object-position` po Y tu skoro ništa ne radi.
     Zato se kadar podiže uvećanjem i pomerajem: gornja trećina praznog
     neba se odseca, znak dolazi više, tekst dobija tamnu podlogu. */
  .ihero-poster, .ihero-video { object-position: 52% 50%; transform: scale(1.24) translateY(-14%); }
  .ihero-scrim {
    background:
      linear-gradient(180deg, rgba(5,5,5,0.58) 0%, rgba(5,5,5,0.04) 18%, rgba(5,5,5,0.34) 44%, rgba(5,5,5,0.9) 68%, rgba(5,5,5,0.98) 88%);
  }
  .ihero-in { padding: 84px var(--pad-x) 34px; }
  .ihero-copy { gap: 17px; }
  .ihero h1 { font-size: clamp(29px, 8.3vw, 42px); line-height: 1.08; }
  .ihero-sub { font-size: 15.5px; line-height: 1.55; max-width: 33ch; }
  .ihero-ctas { gap: 10px; }
  .ihero-ctas .btn:first-child { width: 100%; justify-content: space-between; }
  .ihero-ctas .btn + .btn { width: auto; }
  .ihero-facts { gap: 5px 16px; font-size: 10.5px; letter-spacing: 0.05em; }
}

/* ---- ZNAK DA SADRŽAJ IDE DALJE ----------------------------------
   Sa starim scroll-scrub hero-om otišao je i njegov `.hero-hint`
   („Skrolujte — signal počinje"). Ostao je hero preko celog ekrana
   BEZ ijednog nagoveštaja da ispod ima još — a to je isti problem
   zbog kog smo pravili most između činova, samo na vrhu strane.

   Dva leka rade zajedno:
   1. ovaj znak — linija kroz koju putuje tačka, plus reč;
   2. hero na mobilnom više NIJE pun ekran (90svh), pa se ivica
      sledeće sekcije vidi. Oko tako sazna da strana ide dalje i
      pre nego što pročita znak.                                     */
.ihero-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 9px;
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 200ms ease;
}
.ihero-cue i {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, rgba(233,184,80,0) 0%, var(--gold-deep) 100%);
  position: relative;
  overflow: hidden;
}
.ihero-cue i::after {
  content: '';
  position: absolute;
  left: -1px;
  width: 3px; height: 11px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(233,184,80,0.8);
  animation: cueDrop 2.1s var(--r07-ease) infinite;
}
@keyframes cueDrop {
  0%   { top: -12px; opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { top: 42px; opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .ihero-cue:hover { color: var(--muted); }
}
.ihero-cue:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 860px) {
  /* Na mobilnom reč se izostavlja — znak nosi linija, a mesta nema. */
  .ihero-cue { bottom: 12px; gap: 0; font-size: 0; padding: 4px 8px; }
  .ihero-cue i { height: 30px; }
  @keyframes cueDrop { 0% { top: -10px; opacity: 0; } 22% { opacity: 1; } 78% { opacity: 1; } 100% { top: 30px; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .ihero-cue i::after { animation: none; top: 16px; opacity: 1; }
}

/* ============================================================
   1b · SCRUB HERO — SAMO NASLOVNA  (R07 dopuna)

   Skrol vozi video. Sticky scena od 100svh unutar kratke trake.

   Traka je namerno KRATKA. Stari hero je bio 360svh — tri i po ekrana
   praznog hoda. Ovde 158svh znači 58svh (oko 520 px na 900) stvarnog
   pokreta da se pređe cela scena: jedan prirodan potez točkića, ne
   putovanje.

   Ovo je jedini scrub na sajtu. Ostali hero-i su `data-ignite`.
   ============================================================ */
.ihero-track {
  position: relative;
  height: 158svh;
}
.ihero--scrub {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  align-items: center;
}
/* Video se pokazuje tek kad ume da premotava — do tada nosi poster.
   Bez ovoga se na prvom kadru vidi crn pravougaonik. */
.ihero--scrub .ihero-video { opacity: 0; }
.ihero--scrub.is-ready .ihero-video { opacity: 1; }
.ihero--scrub.is-static .ihero-video { display: none; }
.ihero-track.is-static { height: auto; }
.ihero-track.is-static .ihero--scrub { position: relative; height: auto; min-height: 92svh; }

/* Bloom prati skrol umesto da se pali jednom. */
.ihero--scrub .ihero-glow { opacity: var(--hp, 0); transition: none; }
.ihero--scrub.is-static .ihero-glow { opacity: 1; }

/* Naslov se pali pred kraj scene, kao i ranije. */
.ihero--scrub h1 .found { transition: color 700ms ease, text-shadow 700ms ease; }

/* Linija koja vodi naniže pojavljuje se TEK kad je scena gotova —
   dok traje scrub bila bi zalepljena za dno ekrana bez razloga. */
.ihero--scrub::before { opacity: 0; transition: opacity 420ms ease; }
.ihero--scrub.is-lit::before { opacity: 1; }

/* ---- Sitni SIGNAL elementi koji prate skrol (§7) ---------------- */
.scrub-sig {
  position: absolute;
  z-index: 3;
  right: var(--pad-x);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
  pointer-events: none;
}
.scrub-sig .bar {
  display: block;
  width: 92px;
  height: 1px;
  background: rgba(244, 240, 230, 0.14);
  overflow: hidden;
}
.scrub-sig .bar i {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ihero--scrub.is-lit .scrub-sig { color: var(--gold); }

/* Znak za skrol nestaje čim scena krene. */
.ihero-cue { transition: color 200ms ease, opacity 260ms ease; }
.ihero-cue.is-gone { opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  .ihero-track { height: 142svh; }
  .ihero--scrub { align-items: flex-end; }
  .scrub-sig { bottom: 14px; right: var(--pad-x); font-size: 9.5px; letter-spacing: 0.1em; }
  .scrub-sig .bar { width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .ihero-track { height: auto; }
  .ihero--scrub { position: relative; height: auto; min-height: 92svh; }
  .ihero--scrub .ihero-video { display: none; }
  .scrub-sig { display: none; }
}

/* Varijanta za unutrašnju stranu: niža, sa putanjom, kadar centriran
   na uređaje umesto na 404 znak. */
.ihero--page { min-height: 76svh; }
.ihero--page .ihero-in { padding: 112px var(--pad-x) 74px; }
.ihero--page .crumbs { position: relative; z-index: 2; margin-bottom: 28px; }
.ihero--page h1 { font-size: clamp(33px, 4.1vw, 64px); }
.ihero--page .ihero-poster,
.ihero--page .ihero-video { object-position: 64% 50%; }
.ihero--page .ihero-glow { background: radial-gradient(44% 42% at 68% 52%, rgba(233,184,80,0.17), transparent 70%); }
@media (max-width: 860px) {
  /* Na mobilnom ova scena NE ide preko cele pozadine — dobija svoj okvir.

     Zašto: naslovna ima tamnu scenu (noćni grad), pa tekst preko nje
     radi. Ovde je u kadru monitor sa dnevnom fotografijom polja —
     svetla površina na kojoj se beo naslov ne čita, koliko god zastor
     bio jak. Testirano: i sa zastorom od 88 % naslov je stajao na
     svetlom polju, a putanja se gubila.

     Rešenje nije jači zastor nego druga režija: scena u okviru 4:5
     odmah ispod trake, pa tekst na čistom crnom ispod nje. Scena
     ostaje scena, tekst ostaje čitljiv, i mobilni i dalje NIJE
     „uži desktop". */
  .ihero--page {
    min-height: 0;
    display: block;
    background: var(--bg);
  }
  .ihero--page .ihero-media {
    position: relative;
    inset: auto;
    margin: 76px var(--pad-x) 0;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .ihero--page .ihero-poster,
  .ihero--page .ihero-video { object-position: 56% 48%; transform: none; }
  .ihero--page .ihero-scrim { display: none; }
  .ihero--page .ihero-glow { inset: 0 0 auto; height: 62svh; opacity: 0; }
  .ihero--page.is-lit .ihero-glow { opacity: 0.55; }
  .ihero--page .ihero-in { padding: 26px var(--pad-x) 8px; }
  .ihero--page .crumbs { margin-bottom: 16px; }
  .ihero--page h1 { font-size: clamp(28px, 7.8vw, 40px); }
  .ihero--page .ihero-sub { font-size: 15.5px; line-height: 1.58; max-width: none; }
}

/* ============================================================
   2 · SCENE HERO — unutrašnje strane
   Jedna scena, jedan naslov, mnogo praznog prostora.
   Varijante se razlikuju KADROM, ne samo bojom.
   ============================================================ */
.shero {
  position: relative;
  overflow: clip;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.shero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
.shero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.94) 0%, rgba(5,5,5,0.68) 40%, rgba(5,5,5,0.12) 78%),
    linear-gradient(180deg, rgba(5,5,5,0.86) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,0) 62%, rgba(5,5,5,0.9) 100%);
}
.shero-in {
  position: relative; z-index: 2;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 118px var(--pad-x) 82px;
}
.shero .crumbs { margin-bottom: 30px; }
.shero-copy { max-width: 640px; display: grid; gap: 22px; }
.shero h1 {
  font-size: clamp(34px, 3.9vw, 62px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.shero h1 em { font-style: normal; color: var(--gold); }
.shero-sub {
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.68;
  color: var(--muted);
  max-width: 52ch;
  margin: 0;
}
.shero-ctas { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }

/* Split varijanta: copy levo, živa scena desno. */
.shero--split .shero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 56px;
  align-items: center;
}
.shero--split .crumbs { grid-column: 1 / -1; }
.shero--split .shero-copy { max-width: 560px; }
.shero-stage { position: relative; min-width: 0; }
/* Kad scena NIJE u split rasporedu, ide punom širinom ispod teksta i
   traži sopstveni razmak — inače se zalepi za dugmad. */
.shero:not(.shero--split) .shero-stage { margin-top: 52px; }
@media (max-width: 860px) { .shero:not(.shero--split) .shero-stage { margin-top: 38px; } }

/* Gradska varijanta: izvor je skoro kvadratan (1600×1354), pa kadar
   mora da se namesti na osvetljen izlog gore-desno, inače pun rez
   pokaže prazan asfalt. */
.shero--city { min-height: 76svh; display: flex; align-items: center; }
.shero--city .shero-bg { object-position: 62% 30%; opacity: 0.86; }
.shero--city .shero-in { width: 100%; }
.shero--city .shero-scrim {
  background:
    linear-gradient(90deg, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.78) 38%, rgba(5,5,5,0.06) 82%),
    linear-gradient(180deg, rgba(5,5,5,0.8) 0%, rgba(5,5,5,0) 28%, rgba(5,5,5,0) 60%, rgba(5,5,5,0.85) 100%);
}
@media (max-width: 860px) {
  .shero--city { min-height: 72svh; }
  .shero--city .shero-bg { object-position: 58% 24%; opacity: 0.6; }
  .shero--city .shero-scrim {
    background: linear-gradient(180deg, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.36) 26%, rgba(5,5,5,0.9) 62%, rgba(5,5,5,0.97) 100%);
  }
}

@media (max-width: 980px) {
  .shero--split .shero-in { grid-template-columns: 1fr; gap: 40px; }
  .shero--split .shero-copy { max-width: none; }
}
@media (max-width: 860px) {
  .shero-in { padding: 96px var(--pad-x) 60px; }
  .shero .crumbs { margin-bottom: 22px; }
  .shero-scrim {
    background: linear-gradient(180deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.55) 40%, rgba(5,5,5,0.92) 100%);
  }
  .shero-bg { opacity: 0.5; }
  .shero-ctas .btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   3 · ŽIVO POLJE PRETRAGE
   Upit je HTML tekst, ne piksel u slici. Razlog: jezik pretrage
   se menja (REAL_QUERY_RESEARCH.md), a slika ne.
   ============================================================ */
.qfield {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(10,10,11,0.72);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 15.5px;
}
.qfield svg { width: 17px; height: 17px; flex: none; color: var(--dim); }
.qfield .qtxt { min-width: 0; }
.qfield .qcur {
  display: inline-block;
  width: 1.5px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--gold);
  animation: qBlink 1.1s steps(1, end) infinite;
}
@keyframes qBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.qnote {
  margin: 12px 0 0;
  font-family: var(--font-m);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dim);
}

/* ============================================================
   4 · SCENA: UPIT → MAPA → PROFIL  (/google-profil/)
   ============================================================ */
.gpscene { position: relative; }
.gpscene-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.gpscene-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.gpscene-steps li { list-style: none; padding: 14px 16px; background: var(--bg-2); }
.gpscene-steps b {
  display: block;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
  font-weight: 500;
}
.gpscene-steps span { font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 560px) {
  .gpscene-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   5 · BRANCH MAP — jedan signal, pet pravaca  (/usluge/)
   Grane su LINKOVI, ne slika. Slika iza nosi samo dubinu.
   ============================================================ */
.bmap { position: relative; }
/* Scena iza je NAMERNO tiha (0.14). Prva verzija je bila 0.42 i imala
   je sopstveni čvor grananja u sredini kadra — dva sistema grananja u
   suprotnim smerovima na istom mestu, i mapa se nije čitala.
   Sada slika daje samo dubinu i maglu pri tlu; grananje nose SVG luk i
   šina levo, koji stvarno prate stavke. */
.bmap-bg {
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  width: 108%; height: 116%;
  object-fit: cover;
  opacity: 0.14;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 6%, #000 46%, #000 84%, transparent 100%);
}
.bmap-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
}
/* Šina iz koje grane izlaze — jedan signal koji ulazi. */
.bmap-in::before {
  content: '';
  position: absolute;
  left: 100px;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-deep) 16%, var(--gold) 50%, var(--gold-deep) 84%, transparent);
  pointer-events: none;
}
.bmap-src {
  align-self: center;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: center;
  padding: 14px 0;
  border-left: 1px solid var(--gold-deep);
  padding-left: 12px;
}
.bmap-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bmap-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 16px;
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease, padding-left 180ms var(--r07-ease);
  border-radius: 8px;
}
.bmap-item:last-child { border-bottom: 0; }
/* Grana: kratka kriva od zajedničke ose do stavke. */
.bmap-branch { width: 46px; height: 26px; overflow: visible; color: var(--gold-deep); }
.bmap-branch path { fill: none; stroke: currentColor; stroke-width: 1.25; }
.bmap-b { min-width: 0; }
.bmap-b b { display: block; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.012em; }
.bmap-b span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.bmap-item .go { color: var(--dim); display: flex; transition: transform 180ms var(--r07-ease), color 180ms ease; }
.bmap-item .go svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .bmap-item:hover { background: rgba(233,184,80,0.05); padding-left: 8px; }
  .bmap-item:hover .bmap-branch { color: var(--gold); }
  .bmap-item:hover .go { color: var(--gold); transform: translateX(3px); }
}
.bmap-item:active { transform: scale(0.995); }
.bmap-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 700px) {
  .bmap-in::before { display: none; }
  .bmap-in { grid-template-columns: 1fr; }
  .bmap-src {
    writing-mode: horizontal-tb;
    transform: none;
    border-left: 0;
    border-top: 1px solid var(--gold-deep);
    padding: 10px 0 0;
    justify-self: start;
    margin-bottom: 6px;
  }
  .bmap-item { grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 12px; }
  .bmap-branch { width: 26px; }
}

/* ============================================================
   6 · CENOVNI MONUMENT  (/cene/)
   Bez videa. Broj je događaj. Tri nivoa se razlikuju TEŽINOM,
   a četvrti slučaj namerno nije kartica — nije uporediva stavka.
   ============================================================ */
.pmon { position: relative; overflow: clip; background: var(--bg); border-bottom: 1px solid var(--line); }
/* Trag se drži DESNE polovine: levo su naslov i brojevi, a broj mora
   da bude najsvetlija stvar na strani. Maska ga gasi pre nego što
   stigne do „250". */
.pmon-trail {
  position: absolute;
  left: 56%; top: 40%;
  z-index: 0;
  width: 116%;
  max-width: 1700px;
  transform: translate(-50%, -50%);
  opacity: 0.62;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 26%, #000 58%, #000 88%, transparent 100%);
}
.pmon-in { position: relative; z-index: 1; max-width: var(--max-w); margin-inline: auto; padding: 116px var(--pad-x) 76px; }
.pmon .crumbs { margin-bottom: 30px; }
.pmon h1 {
  font-size: clamp(32px, 3.5vw, 55px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 20ch;
}
.pmon h1 em { font-style: normal; color: var(--gold); }
.pmon-sub { margin: 20px 0 0; max-width: 54ch; font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.68; color: var(--muted); }

.pnums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 54px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}
.pnum {
  display: block;
  padding: 30px 24px 26px 0;
  border-right: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease;
}
.pnum:last-child { border-right: 0; }
.pnum:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pnum:hover { background: rgba(233,184,80,0.045); }
  .pnum:hover .pnum-n { color: var(--gold-hi); }
}
.pnum-k {
  display: block;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}
.pnum-n {
  display: block;
  font-size: clamp(46px, 6.6vw, 104px);
  font-weight: 200;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease;
}
.pnum-n i { font-style: normal; font-size: 0.42em; font-weight: 400; margin-left: 0.12em; vertical-align: 0.42em; color: var(--dim); }
.pnum-p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.56; color: var(--muted); max-width: 26ch; }
/* Sredina je najčešći izbor — jedina dobija punu težinu i zlatnu nit. */
.pnum--lead .pnum-n { font-weight: 320; color: var(--gold-hi); }
.pnum--lead .pnum-k { color: var(--gold); }
.pnum--lead { box-shadow: inset 0 2px 0 var(--gold); }

/* Četvrti slučaj: red, ne kartica. */
.pcustom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin-top: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line-strong);
}
.pcustom b { font-size: clamp(19px, 1.9vw, 26px); font-weight: 640; letter-spacing: -0.015em; }
.pcustom span { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.pcustom a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-deep);
  transition: text-decoration-color 160ms ease;
  white-space: nowrap;
}
.pcustom a:hover { text-decoration-color: var(--gold); }
.pcustom a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 780px) {
  .pnums { grid-template-columns: 1fr; border-top: 0; }
  .pnum { border-right: 0; border-top: 1px solid var(--line); padding: 22px 0 20px; }
  .pnum--lead { box-shadow: none; border-top-color: var(--gold-deep); }
  .pnum-n { font-size: clamp(44px, 15vw, 72px); }
  .pnum-p { max-width: none; }
  .pmon-in { padding: 96px var(--pad-x) 56px; }
}

/* ============================================================
   7 · TOK — jedan potez, ne red kutija
   /online-prodavnice/: proizvod → korpa → plaćanje → porudžbina
   /poslovne-aplikacije/: upit → termin/nalog/status
   ============================================================ */
.ftrace { position: relative; }
.ftrace-line {
  position: absolute;
  left: 0; right: 0; top: 27px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 8%, var(--gold-deep) 92%, transparent);
  z-index: 0;
}
.ftrace-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ftrace--3 .ftrace-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ftrace-steps > li { min-width: 0; }
.ftrace-node {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--gold);
  margin-bottom: 20px;
}
.ftrace-node svg { width: 22px; height: 22px; }
.ftrace-steps h3 { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; letter-spacing: -0.012em; margin: 0 0 8px; }
.ftrace-steps p { margin: 0; font-size: 14.8px; line-height: 1.6; color: var(--muted); }
.ftrace-steps .ftrace-o {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-m);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
@media (max-width: 900px) {
  .ftrace-steps, .ftrace--3 .ftrace-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
  .ftrace-line { display: none; }
}
@media (max-width: 520px) {
  .ftrace-steps, .ftrace--3 .ftrace-steps { grid-template-columns: 1fr; gap: 26px; }
  .ftrace-node { width: 46px; height: 46px; margin-bottom: 14px; }
}

/* ============================================================
   7b · SCENA APLIKACIJA  (/poslovne-aplikacije/)
   Nije stock i nije mockup: ovo su snimci NAŠIH demo aplikacija,
   snimljeni sa žive rute (`_qa/capture-demo.js`). Zato scena sme da
   nosi tvrdnju „ovo možete odmah da probate" — jer stvarno može.
   ============================================================ */
.appscene { position: relative; padding-bottom: 30px; }
.appscene-trail {
  position: absolute;
  left: -16%; right: -16%; bottom: -18%;
  width: 132%;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}
.appscene-win {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 32px 70px -28px rgba(0,0,0,0.9);
  overflow: hidden;
}
.appscene-win img { display: block; width: 100%; height: auto; }
.appscene-ph {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 25%;
  min-width: 116px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 54px -20px rgba(0,0,0,0.95);
  overflow: hidden;
}
.appscene-ph img { display: block; width: 100%; height: auto; }
.appscene-note {
  position: relative;
  z-index: 3;
  margin: 20px 0 0;
  max-width: 62%;
  font-family: var(--font-m);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--dim);
}
.appscene-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .appscene-ph { width: 32%; right: -1%; }
  .appscene-note { max-width: none; }
}

/* Snimak ekrana u kartici aplikacije — kartica prestaje da bude
   „naslov + pasus" i postaje prikaz onoga što se zaista otvara. */
.app-shot {
  display: block;
  margin: 14px 0 18px;
  border-radius: 9px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg);
  line-height: 0;
}
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform 260ms var(--r07-ease), opacity 200ms ease;
  opacity: 0.92;
}
@media (hover: hover) and (pointer: fine) {
  .app-card:hover .app-shot img { transform: scale(1.02); opacity: 1; }
}

/* ============================================================
   8 · TRAG SIGNALA — predah između poglavlja
   Pravi asset sa ispravljenom alfom, ne CSS gradijent.
   ============================================================ */
.tband {
  position: relative;
  overflow: clip;
  padding: 74px 0;
  background: var(--bg);
}
.tband-img {
  position: absolute;
  left: 50%; top: 50%;
  width: 132%;
  max-width: 1800px;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}
.tband-in {
  position: relative; z-index: 1;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  text-align: center;
}
.tband p {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(19px, 2.1vw, 30px);
  font-weight: 300;
  line-height: 1.34;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}
.tband p em { font-style: normal; color: var(--gold-hi); font-weight: 500; }
.tband .tband-k {
  display: block;
  margin: 0 0 18px;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
@media (max-width: 860px) { .tband { padding: 54px 0; } .tband-img { width: 190%; opacity: 0.42; } }

/* ============================================================
   9 · 404 PLOČA — brend predah pred kraj naslovne
   ============================================================ */
.p404 {
  position: relative;
  overflow: clip;
  min-height: 62svh;
  display: flex;
  align-items: flex-end;
  background: var(--bg);
}
.p404-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; z-index: 0; }
.p404-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.4) 44%, rgba(5,5,5,0) 70%),
    linear-gradient(180deg, rgba(5,5,5,0.7) 0%, rgba(5,5,5,0) 34%, rgba(5,5,5,0.92) 100%);
}
.p404-in {
  position: relative; z-index: 2;
  max-width: var(--max-w);
  margin-inline: auto;
  width: 100%;
  padding: 120px var(--pad-x) 64px;
}
.p404-in p {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(26px, 3.2vw, 50px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.p404-in p b { font-weight: 700; color: var(--gold-hi); }
.p404-k {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 860px) {
  .p404 { min-height: 54svh; }
  .p404-img { object-position: 58% 40%; }
  .p404-in { padding: 96px var(--pad-x) 44px; }
}

/* ============================================================
   10 · DVA EKRANA — showcase predah (naslovna, /izrada-sajtova/)
   Scena nosi atmosferu; činjenice ispod nosi HTML.
   ============================================================ */
.twoscreen { position: relative; overflow: clip; background: var(--bg-2); border-block: 1px solid var(--line); }
.twoscreen-in {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 84px var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 52px;
  align-items: center;
}
.twoscreen-img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.twoscreen h2 { font-size: clamp(25px, 2.5vw, 38px); font-weight: 700; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: balance; }
.twoscreen h2 em { font-style: normal; color: var(--gold); }
.twoscreen p { margin: 0; font-size: 16px; line-height: 1.68; color: var(--muted); max-width: 46ch; }
.twoscreen .ts-note {
  margin-top: 18px;
  font-family: var(--font-m);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--dim);
  text-transform: uppercase;
}
@media (max-width: 940px) {
  .twoscreen-in { grid-template-columns: 1fr; gap: 34px; padding: 62px var(--pad-x); }
  .twoscreen p { max-width: none; }
}

/* ============================================================
   14 · STUDIJA SLUČAJA — hero sa stvarnim snimkom  (R07 · dopuna)

   Studije slučaja su bile jedine strane sa tekstualnim zaglavljem,
   iako imaju najbolji mogući materijal — snimak žive klijentske
   adrese. Sada taj snimak stoji U HERO-u, a ne tri ekrana niže.

   Nema novog assetа: koristi se `works/<id>-desktop.webp` koji već
   postoji i koji je proveren kao aktuelan (`_qa/works-freshness.js`).
   ============================================================ */
.cs-hero-shot { margin: 0; }
.cs-hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 64px -26px rgba(0,0,0,0.9);
}
.cs-hero-shot figcaption {
  margin-top: 12px;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}
/* Telefonski snimak sada stoji sam — ne sme da se razvuče preko
   cele širine, jer je izvor visok 780×1688. */
.cs-shots--m { display: flex; justify-content: flex-start; }
.cs-shots--m .cs-shot--m { max-width: 300px; }
@media (max-width: 860px) {
  .cs-shots--m .cs-shot--m { max-width: 220px; margin-inline: auto; }
}

/* ============================================================
   13 · POZORNICA RADOVA — kraća traka  (R07 · dopuna)

   Mereno na naslovnoj, 1440×900: sekcija `#radovi` je bila
   **2 914 px = 21 % cele strane = 3,2 ekrana**, ubedljivo najveći blok.

   Uzrok je isti obrazac koji smo izbacili iz hero-a: `.show-track` je
   visok 240svh sa `sticky` pozornicom od 100svh unutra. Znači 140svh
   (1 260 px) čistog skrola služi samo da se dve scene zamene jednom.
   Šest snimaka uređaja košta 2,4 ekrana listanja.

   Pozornica ostaje — ona radi i lepa je. Skraćuje se samo PRAZAN HOD:
   sa 140svh na 58svh putanje za istu zamenu. Nijedan snimak nije
   uklonjen, nijedna scena nije spojena.
   ============================================================ */
@media (min-width: 1024px) {
  .show-track { height: 158svh; }
}
@media (min-width: 1440px) {
  .show-track { height: 165svh; }
}

/* ============================================================
   12 · MOST IZMEĐU ČINOVA  (R07 · dopuna)

   Problem koji ovo rešava: veliki hero / showcase blok se završavao
   TVRDIM REZOM. Video ili scena bi stali na ravnoj liniji, ispod bi
   došla crna praznina, pa nova sekcija — i skrol je čitao kao
   „stranica je gotova, sad počinje neka druga".

   Tri uzroka, tri leka:

   1. `border-bottom: 1px` na `.shero`/`.pmon` je bio doslovna crta
      preseka. Uklonjen.
   2. Zastor se gasio na 0.78 crne, pa se donja ivica medija VIDELA
      kao rez. Sada scena tone u pozadinu do kraja (`::after`).
   3. Sledeća sekcija je počinjala iz ravnog crnog, bez ijednog traga
      prethodnog kadra. Sada nasleđuje toplu izmaglicu i signal liniju
      koja se nastavlja preko šava.

   Sve je čista pozadina i 1px linija — bez novog JS-a, bez parallax
   biblioteke, bez animacije koja se vrti.
   ============================================================ */

/* Crta preseka više ne postoji. */
.shero, .pmon { border-bottom: 0; }
.twoscreen { border-block: 0; }

/* --- 12a · scena tone, ne seče se ---------------------------------- */
/* Obe strane šava moraju da se sretnu na ISTOJ boji, inače se dobije
   stepenik umesto prelaza. Prva verzija je gasila hero u `--bg`
   (#050505), a sledeću sekciju otvarala toplom izmaglicom koja je
   SVETLIJA od toga — pa je na šavu ostajala vidljiva linija, samo
   obrnutog smera nego pre. Zato jedna zajednička vrednost: */
:root { --r07-seam: rgba(14, 12, 9, 1); }

.ihero::after,
.shero::after,
.pmon::after,
.p404::after,
.twoscreen::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 210px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,12,9,0) 0%, rgba(14,12,9,0.62) 48%, var(--r07-seam) 96%);
}
/* Sadržaj mora da ostane iznad tog gašenja. */
.ihero-in, .shero-in, .pmon-in, .p404-in, .twoscreen-in { z-index: 2; }

/* --- 12b · signal se nastavlja preko šava -------------------------- */
/* gornja polovina linije — u samom hero bloku */
.ihero::before,
.shero::before,
.pmon::before,
.p404::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 1px; height: 88px;
  z-index: 3;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(233,184,80,0) 0%, var(--gold-deep) 70%, var(--gold) 100%);
  pointer-events: none;
}

/* donja polovina + izmaglica — u sekciji KOJA SLEDI */
.ihero + *,
.ihero-track + *,
.shero + *,
.pmon + *,
.p404 + *,
.twoscreen + * { position: relative; }

.ihero + *::before,
.ihero-track + *::before,
.shero + *::before,
.pmon + *::before,
.p404 + *::before,
.twoscreen + *::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  /* Namerno nisko (170px): neke sekcije koje slede su kratke — npr.
     traka pitanja na `/google-profil/` ima ~120px. Viša izmaglica bi
     bila presečena pozadinom sledeće sekcije i ostavila bi PRAVOUGAONU
     ivicu na dnu, što je gore od šava koji smo krenuli da uklonimo. */
  height: 170px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(233,184,80,0.05) 0%, rgba(233,184,80,0.012) 30%, transparent 56%),
    linear-gradient(180deg, var(--r07-seam) 0%, rgba(14,12,9,0.38) 18%, rgba(14,12,9,0) 54%);
}

.ihero + *::after,
.ihero-track + *::after,
.shero + *::after,
.pmon + *::after,
.p404 + *::after {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: 72px;
  z-index: 1;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 32%, rgba(233,184,80,0) 100%);
  pointer-events: none;
}

/* Sadržaj sledeće sekcije iznad izmaglice. */
.ihero + * > *,
.ihero-track + * > *,
.shero + * > *,
.pmon + * > *,
.p404 + * > *,
.twoscreen + * > * { position: relative; z-index: 2; }

/* --- 12c · manji mrtav prostor oko šava ---------------------------- */
.ihero-in { padding-bottom: 78px; }
.ihero--page .ihero-in { padding-bottom: 64px; }
.shero-in { padding-bottom: 70px; }
.pmon-in { padding-bottom: 64px; }
.p404-in { padding-bottom: 56px; }

@media (max-width: 860px) {
  .ihero::after, .shero::after, .pmon::after, .p404::after, .twoscreen::after { height: 130px; }
  .ihero::before, .shero::before, .pmon::before, .p404::before { height: 56px; }
  .ihero + *::before, .ihero-track + *::before, .shero + *::before, .pmon + *::before,
  .p404 + *::before, .twoscreen + *::before { height: 120px; }
  .ihero + *::after, .ihero-track + *::after, .shero + *::after, .pmon + *::after, .p404 + *::after { height: 46px; }
  /* Na mobilnom `/izrada-sajtova/` scena je u okviru, pa se ne gasi
     u pozadinu — gašenje bi pojelo donju ivicu okvira. */
  .ihero--page::after, .ihero--page::before { display: none; }
}

/* ============================================================
   11 · Dostupnost i uzdržanost
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Manje kretanja, ne prazan ekran: poster ostaje, prelaz boje ostaje. */
  .ihero-video { display: none; }
  .ihero-copy > * { animation: none; opacity: 1; transform: none; }
  .qfield .qcur { animation: none; opacity: 1; }
  .bmap-item,
  .bmap-item .go,
  .pnum,
  .ihero-glow { transition-duration: 1ms; }
}
/* R07:CSS:END */
/* R08B:CSS:START */
/* ============================================================
   R08B · PRE-LAUNCH REMEDIATION — CSS sloj
   Ide POSLEDNJI (posle R06/R06B/R06C/R07), pa sme da pregazi zatečeno.
   Ništa ovde nije novi dizajn: svaka celina zatvara imenovan nalaz iz R08.
   ============================================================ */

/* ------------------------------------------------------------
   B-3 · BEZ SKRIPTE STRANA MORA DA SE VIDI
   ------------------------------------------------------------
   Zatečeno: `.rv { opacity: 0 }` (site.css:729) bez ijedne zaštite, pa
   H1 i telo strane nestanu na svih 15 merenih ruta ako skripta ne radi.
   Isti fajl je tu zaštitu VEĆ imao na `.sig-shot.rv` (:3055) — obrazac je
   poznat, samo nije primenjen na osnovnu klasu.

   Zašto ne samo `@media (scripting: enabled)`: to hvata isključen JS, ali
   NE hvata slučaj koji je u reviziji izričito naveden — skripta je
   dozvoljena, a `site.js` je blokiran (proxy, adblock, mrežna greška) ili
   je pukao. Zato klasu `js-rv` postavlja inline skripta u <head>, a skida
   je nadzornik ako se `site.js` ne javi do DOMContentLoaded.

   Star pregledač koji ne zna `:not()` sa klasom nikad neće ni dobiti
   `js-rv`, pa i tu sadržaj ostaje vidljiv. Otkaz je uvek u smeru „vidi se". */
html:not(.js-rv) .rv {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
html:not(.js-rv) .sig-shot.rv { clip-path: none; }

/* Isti razlog za CSS aktivacije: „neupaljeno" stanje sme da postoji samo
   ako ima ko da ga upali. Bez toga cena „480 €" ostaje `--steel` na crnom
   (1,38 : 1) — nalaz iz ACCESSIBILITY_AUDIT_R08 §1. */
html:not(.js-rv) .sig-num,
html:not(.js-rv) .sig-target { color: var(--gold); }
html:not(.js-rv) [data-activate] { opacity: 1; }

/* ------------------------------------------------------------
   B-2 · MOBILNA FIOKA — SADRŽAJ ISPOD PREGIBA
   ------------------------------------------------------------
   Mereno na 390×757: `.menu-scroll` je 670 px visok, a sadržaj 936 px.
   266 px liste stoji ispod vidljivog dela, a `.menu-foot` (87 px) zauzima
   pojas odmah ispod — pa `elementFromPoint` nad tih 11 linkova vraća
   `div.menu-foot` i meni deluje mrtvo.

   Dokazano zasebnim merenjem (`_audit/menu-reach.js`): fioka SE skroluje i
   posle skrola svih 20 linkova prolazi i hit-test i stvaran klik. Dakle
   linkovi nisu mrtvi — nego nevidljivi i bez ijednog znaka da ih ima još.
   Zato se ovde ne dira z-index ni pointer-events (nisu uzrok), nego:
     1) sadržaj se stisne da na uobičajenom telefonu stane bez skrola,
     2) tamo gde ipak ne stane, rub se vidi da je odsečen. */
.menu-scroll {
  padding-top: 76px;              /* traka je 60–64 px; 92 px je bilo viška */
  padding-bottom: 14px;
  /* Odsečen rub umesto čistog reza — red koji se nastavlja mora da izgleda
     kao red koji se nastavlja. Maska se gasi kad se dođe do dna. */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%);
}
.menu-scroll.is-end {
  -webkit-mask-image: none;
          mask-image: none;
}
.mnav-h { padding: 2px 0 8px; }
.menu .mnav a,
.menu .macc-in a {
  min-height: 48px;               /* WCAG 2.5.8 traži 24; 48 je i dalje udobno */
  padding: 7px 0;
}
.macc summary { min-height: 50px; padding: 8px 0; }
.mnav-base { margin-top: 12px; padding-top: 4px; }

/* Podnožje fioke je traka, ne kraj liste — sada to i izgleda tako, pa se
   odsečena lista iznad njega čita kao „ima još", a ne kao „to je sve". */
.menu-foot {
  margin-top: 0;
  padding: 12px var(--pad-x) calc(12px + env(safe-area-inset-bottom, 0px));
  margin-left: calc(var(--pad-x) * -1);
  margin-right: calc(var(--pad-x) * -1);
  border-top: 1px solid var(--line-strong);
  background: rgba(5, 5, 5, .92);
  gap: 12px;
}

/* ------------------------------------------------------------
   B-5 · KALKULATOR — VIDLJIV FOKUS
   ------------------------------------------------------------
   `input` je `opacity: 0`, a jedino pravilo za prsten cilja `input + span`
   (brzi režim). Estimator ima `input + <b>`, pa u njemu fokus nije postojao
   nigde na ekranu. Prsten se ovde veže na SAM okvir, pa ne zavisi od toga
   koji je element sledeći. */
.cq-opt:has(input:focus-visible),
.cf-opt:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Pregledači bez `:has()` — zadržavamo i stari, uži oblik, plus `+ b`. */
.cq-opt input:focus-visible + span,
.cf-opt input:focus-visible + b { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Radio više nije `pointer-events: none` bez potrebe: mišem se i dalje klika
   na ceo okvir (`<label>`), ali sada i sam input prima fokus i klik. */
.cq-opt input, .cf-opt input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* ------------------------------------------------------------
   B-4 · KALKULATOR — KAD PROCENA IZAĐE IZ TIPIČNOG OPSEGA
   ------------------------------------------------------------
   F-043 ne kaže „nikad preko 3.000 €" — kaže „iznad 3.000 € → uvek owner
   review". Cifra se zato ne obara; obavezno se OBJAŠNJAVA. */
.crecap-flag {
  display: block;
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  border-left-width: 3px;
  background: rgba(233, 184, 80, .07);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink);
}
.crecap-flag b { color: var(--gold); font-weight: 640; }
.crecap-flag span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13.5px;
}
/* Izvedena stavka („tako se od osnovne cene dođe do zbira") ne sme da
   izgleda kao još jedna stavka cenovnika. */
.crecap-line.is-derived .n { color: var(--dim); }
.crecap-line.is-derived .v { color: var(--muted); }

/* ------------------------------------------------------------
   P1 · KONTRAST — ono što se nikad ne upali
   ------------------------------------------------------------
   `--steel #2e2d2a` je boja „neupaljenog" stanja i legitimna je za elemente
   koje skripta pali. Ovi je nikad ne napuste, pa ostaju trajno ispod praga.
   Mereno u ACCESSIBILITY_AUDIT_R08 §1. */
.rel-meta { color: var(--dim); }            /* 1,44 : 1 → 5,8 : 1, na 24 rute */
.brk-label-r { color: var(--dim); }         /* 1,48 : 1 → 5,8 : 1 */
.brk-flip .c-off { color: var(--dim); }     /* 1,48 : 1 → 5,8 : 1 (31,7 px) */

/* ------------------------------------------------------------
   P1 · MERE ZA DODIR U FOOTERU (WCAG 2.2 · 2.5.8)
   ------------------------------------------------------------
   `.foot-col a` je inline, pa je meta bila visoka 16 px — uključujući
   telefon, e-mail i WhatsApp, tj. tri od četiri kontakt izlaza na telefonu. */
.foot-col li { margin: 0; }
.foot-col a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 0;
}

/* ------------------------------------------------------------
   P1 · SKIP LINK + <main>
   ------------------------------------------------------------
   Bez njih korisnik tastature prolazi kroz traku od 6 stavki i mega meni
   na svakoj strani pre nego što stigne do sadržaja. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--gold);
  color: #12100b;
  font: 600 14px/1.2 var(--font-m);
  letter-spacing: .04em;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   P1 · MAINTENANCE STANJE KALKULATORA (P2-12 „curenje režima")
   ------------------------------------------------------------
   Rekapitulacija se prepisuje cela; dok traje prepis, stara vrednost sme
   da stoji, ali ne sme da izgleda kao sveža. */
.crecap[data-stale="1"] { opacity: .55; transition: opacity 120ms linear; }

/* Vidljivo samo čitaču ekrana — nosilac žive oblasti kalkulatora. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* R08B:CSS:END */