/* zasto-cp.css — Stranica "Zašto Crvena pilula" (P22.1).
 *
 * Port iz Razvoj/V3/Zašto CP/design_handoff_zasto_cp/_preview_standalone.html.
 * Sve klase scope-ovane pod body.page-zasto-cp — nula kolizije sa drugim
 * stranicama (cp-* / vch-* / mn-* selektori netaknuti).
 *
 * Lokalne CSS varijable (--zc-*) duplikat tokens iz handoff-a; postojeći CP
 * --bg-dark/--fg-dark imaju različite shade (#161614 vs #161614 OK ali --bg-deeper
 * #0f0f0d nije u tokens.css). Zasebne vars zadržavaju tačan handoff target.
 *
 * P22.1 obim: skela + statike (Hero text, Priča, Principi, Poziv CTA + 4-hex SVG).
 * Hex animacija (kapilare, krvotok, birth keyframes) dolazi u P22.2+ — sad samo
 * hex-grid placeholder kontejner sa fade mask.
 */

body.page-zasto-cp {
    /* Lokalne tokens — match handoff source */
    --zc-bg:           #161614;
    --zc-bg-deeper:    #0f0f0d;
    --zc-fg:           #ece9e3;
    --zc-fg-soft:      #b8b6b0;
    --zc-fg-mid:       #8a8a87;
    --zc-fg-haze:      #6a6a68;
    --zc-fg-faint:     #4a4a48;
    --zc-gold:         #ffd9a8;
    --zc-gold-dim:     #c9a874;
    --zc-red:          #9b1919;
    --zc-red-bright:   #c43030;
    --zc-rule:         rgba(154, 154, 152, 0.18);

    background: var(--zc-bg);
    color: var(--zc-fg);
}

/* NE postavljaj broad `body.page-zasto-cp a` rule — footer je shared partial
   i ulazi pod isti body class. Override-uj samo unutar Zašto CP sekcija ako
   se ikad pojavi inline link u copy-ju. Trenutno samo .poziv-buttons .btn
   ima linkove, i oni imaju sopstvene .primary/.ghost styling. */

/* ================================================================
   POGLAVLJE 01 · HERO — full-bleed sekcija sa hex mrežom u backdrop-u
   ================================================================ */
body.page-zasto-cp .hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background: var(--zc-bg);
    border-bottom: 2px solid var(--zc-red);
}

/* Hex grid — full-bleed (ne max-width). Tekst je u svom max-width hero-inner-u;
   mreža popunjava ceo viewport bez fade mask-a — kompozicija dolazi iz aktivnih
   hex klastera (preset + spreading) na obe strane teksta, ne iz fade-out-a. */
body.page-zasto-cp .hex-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
body.page-zasto-cp .hex-grid-canvas {
    position: relative;
    width: 100%;
    height: 100%;
}
body.page-zasto-cp .hex-grid svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ================================================================
   HEX MREŽA — pojedinačni heksagoni (klase JS-om dodate na <polygon>)
   ================================================================
   Default: prazan outline (stroke-opacity 0 → "off"), .visible aktivira.
   .is-far: hexovi u "never" zoni (van operativne zone gde tekst diše).
   .client / .ispostava / .dobavljac: klijent tipovi (filled hex).
   Origin hex: Crvena pilula sama, fiksna pozicija, breathing pulse. */
body.page-zasto-cp .hex {
    fill: transparent;
    stroke: rgba(184, 182, 176, 0.22);
    stroke-width: 0.5;
    stroke-linejoin: round;
    /* Hex outlines vidljivi ODMAH (stroke-opacity 1 default) — ranije je
       bio 0 sa 1.4s fade-in transition na .visible klasu, što je izazivalo
       judder pri masovnom dodavanju klase na 1100+ hexova istovremeno. */
    stroke-opacity: 1;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
    transition: fill 1.6s ease,
                stroke 1.2s ease,
                stroke-width 0.6s ease,
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* .visible klasa ostaje (JS je i dalje dodaje na 250ms) ali je sad no-op
   pošto je default već 1 — nema fade transition-a, nema judder-a. */
body.page-zasto-cp .hex.visible { stroke-opacity: 1; }
body.page-zasto-cp .hex.is-far  { stroke: rgba(184, 182, 176, 0.10); }

/* Klijent — opaque fill (blokira pulse ispod), gold stroke */
body.page-zasto-cp .hex.client {
    fill: #494135;
    stroke: #ecc99c;
    stroke-width: 1.3;
    transition: fill 2.4s ease, stroke 2.4s ease, stroke-width 1.0s ease;
}
/* Stručnjak — ista spoljna ivica kao klijent, razlikuje se po zelenoj matici */
body.page-zasto-cp .hex.ispostava {
    fill: #494135;
    stroke: #ffd9a8;
    stroke-width: 1.3;
    transition: fill 1.6s ease, stroke 1.6s ease, stroke-width 1.0s ease;
}
body.page-zasto-cp .ispostava-inner {
    fill: rgba(85, 130, 75, 0.78);
    stroke: rgba(140, 195, 120, 0.88);
    stroke-width: 0.9;
    stroke-linejoin: round;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}
/* Dobavljač — ista spoljna ivica, teal matica */
body.page-zasto-cp .hex.dobavljac {
    fill: #494135;
    stroke: #ffd9a8;
    stroke-width: 1.3;
    transition: fill 1.6s ease, stroke 1.6s ease, stroke-width 1.0s ease;
}
body.page-zasto-cp .dobavljac-inner {
    fill: rgba(40, 95, 105, 0.78);
    stroke: rgba(150, 210, 220, 0.88);
    stroke-width: 0.9;
    stroke-linejoin: round;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

/* Birth animacije — outer fade-in + scale, inner scale-from-zero */
@keyframes zc-clientBirth {
    0% {
        fill: rgba(73, 65, 53, 0);
        stroke: rgba(236, 201, 156, 0);
        stroke-width: 0.5;
        transform: scale(0.8);
    }
    100% {
        fill: #494135;
        stroke: #ecc99c;
        stroke-width: 1.3;
        transform: scale(1);
    }
}
body.page-zasto-cp .hex.client-born {
    animation: zc-clientBirth 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes zc-hexInnerBirth {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
body.page-zasto-cp .ispostava-inner.born,
body.page-zasto-cp .dobavljac-inner.born {
    animation: zc-hexInnerBirth 2.0s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kapilare — crvene linije, stroke-dashoffset draw */
body.page-zasto-cp .capillary {
    fill: none;
    stroke: rgba(155, 25, 25, 0.62);
    stroke-width: 0.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
body.page-zasto-cp .capillary.thin {
    stroke: rgba(155, 25, 25, 0.45);
    stroke-width: 0.65;
}
/* Zlatne tačke na kraju kapilara */
body.page-zasto-cp .cap-tip {
    fill: rgba(255, 217, 168, 0.95);
    pointer-events: none;
}

/* Krvotok — pulse koji "teče" kroz kapilare (animira stroke-dashoffset preko rAF-a) */
body.page-zasto-cp .capillary-pulse {
    fill: none;
    stroke: rgba(220, 60, 60, 0.95);
    stroke-width: 1.6;
    stroke-linecap: round;
    pointer-events: none;
    opacity: 1;
}

/* Origin hex — Crvena pilula sama, fiksna pozicija (SVG transform JS-om) */
body.page-zasto-cp .hex-origin-outer {
    fill: #3E1716;
    stroke: #ffd9a8;
    stroke-width: 1.3;
    stroke-linejoin: round;
    animation: zc-originPulse 3.6s ease-in-out infinite;
}
body.page-zasto-cp .hex-origin-inner {
    fill: rgba(15, 15, 13, 0.78);
    stroke: rgba(201, 168, 116, 0.85);
    stroke-width: 0.8;
    stroke-linejoin: round;
}
body.page-zasto-cp .hex-origin-dot {
    fill: rgba(255, 217, 168, 0.95);
    animation: zc-originDotPulse 2.8s ease-in-out infinite;
}
@keyframes zc-originPulse {
    0%, 100% { stroke-opacity: 0.65; }
    50%      { stroke-opacity: 1; }
}
@keyframes zc-originDotPulse {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

/* Reduced motion — sve u finalnom stanju */
@media (prefers-reduced-motion: reduce) {
    body.page-zasto-cp .hex { transition: none; }
    body.page-zasto-cp .hex-origin-outer,
    body.page-zasto-cp .hex-origin-dot { animation: none !important; }
    body.page-zasto-cp .hex.client-born,
    body.page-zasto-cp .ispostava-inner.born,
    body.page-zasto-cp .dobavljac-inner.born { animation: none !important; }
}

/* Hero band-ovi — gornji + donji (48px, monospace metadata) */
body.page-zasto-cp .hero-band-top,
body.page-zasto-cp .hero-band-bot {
    position: absolute;
    left: 0; right: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--zc-fg-haze);
    text-transform: uppercase;
    z-index: 3;
    pointer-events: none;
}
body.page-zasto-cp .hero-band-top { top: 0;    border-bottom: 1px solid var(--zc-rule); }
body.page-zasto-cp .hero-band-bot { bottom: 0; border-top:    1px solid var(--zc-rule); }
body.page-zasto-cp .hero-band-top .tick,
body.page-zasto-cp .hero-band-bot .tick {
    color: var(--zc-red);
    font-size: 13px;
    margin: 0 12px;
}
body.page-zasto-cp .hero-band-top .meta,
body.page-zasto-cp .hero-band-bot .meta { color: var(--zc-fg-mid); }
body.page-zasto-cp .hero-band-top .meta.bright,
body.page-zasto-cp .hero-band-bot .meta.bright { color: var(--zc-fg); }
body.page-zasto-cp .hero-band-top .sep,
body.page-zasto-cp .hero-band-bot .sep {
    color: rgba(155, 25, 25, 0.7);
    margin: 0 14px;
}

/* Band legenda — inline horizontalni stack 4 hex tipa u donjem band-u */
body.page-zasto-cp .band-legend {
    display: inline-flex;
    align-items: center;
    gap: 22px;
}
body.page-zasto-cp .band-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.page-zasto-cp .band-legend .legend-hex {
    width: 14px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}
body.page-zasto-cp .band-legend .legend-label {
    color: var(--zc-fg-soft);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
}

/* Hero sadržaj — 2-kolone grid (vis-side prazna, hero-text desno) */
body.page-zasto-cp .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 140px 32px 130px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
}
body.page-zasto-cp .hero-vis-side {
    position: relative;
    min-height: 420px;
    height: 100%;
}

/* Hero text (desna kolona) — eyebrow + h1 + sub + trinity.
   Pseudo-element ::before je tamniji blurovan frame iza teksta — krvotok i
   kapilare iz SVG mreže ispod se NAZIRU kroz blur, ali tekst je iznad i čist.
   Time se izbegava da pathfinder/krvotok mora da "izbegava" tekst zonu u
   JS-u — sve se rešava na vizuelnom sloju. */
body.page-zasto-cp .hero-text {
    align-self: center;
    position: relative;
}
body.page-zasto-cp .hero-text::before {
    content: '';
    position: absolute;
    /* Desno: 0 — pseudo se završava NA desnoj ivici hero-text bounds-a
       (poklapa se sa virtuelnim stubom sadržaja stranice). Levo: -44 za blagi
       padding osećaj. Top/bottom: -36 da pokriva eyebrow + trinity stamp. */
    inset: -36px 0 -36px -44px;
    background: rgba(11, 11, 9, 0.55);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    z-index: -1;
    pointer-events: none;
    /* Tanak crveni rim na donjoj ivici — implikacija "tekst sedi na ploči" */
    border-bottom: 1px solid rgba(155, 25, 25, 0.18);
}
body.page-zasto-cp .hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #9a9a98;
    margin-bottom: 28px;
    line-height: 1.6;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 14px;
}
body.page-zasto-cp .hero-eyebrow .dot {
    width: 7px; height: 7px;
    background: var(--zc-red);
    display: inline-block;
    transform: rotate(45deg);
}
body.page-zasto-cp .hero-eyebrow .num { color: var(--zc-red-bright); }
body.page-zasto-cp .hero-eyebrow .lbl { color: var(--zc-fg); letter-spacing: 0.24em; }

body.page-zasto-cp .hero h1 {
    font-family: var(--font-sans);
    font-size: clamp(44px, 4.4vw, 76px);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.02;
    color: var(--zc-fg);
    margin: 0 0 36px;
    max-width: 560px;
}
body.page-zasto-cp .hero h1 .signal {
    color: var(--zc-gold);
    font-style: italic;
    font-weight: 500;
}
body.page-zasto-cp .hero h1 .red {
    color: var(--zc-red-bright);
    font-style: italic;
    font-weight: 500;
}

body.page-zasto-cp .hero-sub {
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.65;
    color: var(--zc-fg-soft);
    max-width: 480px;
    margin: 0 0 38px;
}
body.page-zasto-cp .hero-sub em {
    font-style: italic;
    color: var(--zc-gold-dim);
}

/* Trinity stamp — TEHNOLOGIJA · PROCESI · LJUDI — RAVNOTEŽA */
body.page-zasto-cp .trinity {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 14px 22px;
    border: 1px solid rgba(155, 25, 25, 0.32);
    background: rgba(15, 15, 13, 0.65);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--zc-fg-soft);
    text-transform: uppercase;
}
body.page-zasto-cp .trinity .word {
    color: rgba(255, 248, 232, 1);
    padding: 0 14px;
    position: relative;
}
body.page-zasto-cp .trinity .word:first-child { padding-left: 0; }
body.page-zasto-cp .trinity .sep {
    margin: 0 2px;
    transform: rotate(45deg);
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--zc-red-bright);
}
body.page-zasto-cp .trinity .balance {
    color: var(--zc-gold);
    padding-left: 22px;
    margin-left: 8px;
    border-left: 1px solid rgba(255, 217, 168, 0.55);
    letter-spacing: 0.24em;
}

/* ================================================================
   CHAPTER BAND — deljeno između Poglavlja 02 / 03 / 04
   ================================================================ */
body.page-zasto-cp .chapter-band {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 24px;
    background: var(--zc-bg-deeper);
    border-top: 2px solid var(--zc-red);
    border-bottom: 2px solid var(--zc-red);
    position: relative;
}
/* Band varijanta na svetlijoj pozadini (Principi sekcija) */
body.page-zasto-cp .chapter-band.on-bg { background: var(--zc-bg); }
/* Zlatni dijamanti u uglovima */
body.page-zasto-cp .chapter-band::before,
body.page-zasto-cp .chapter-band::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--zc-gold);
    transform: translateY(-50%) rotate(45deg);
}
body.page-zasto-cp .chapter-band::before { left: 32px; }
body.page-zasto-cp .chapter-band::after  { right: 32px; }
body.page-zasto-cp .chapter-band .tick {
    font-family: var(--font-mono);
    color: var(--zc-red);
    font-size: 14px;
}
body.page-zasto-cp .chapter-band .meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--zc-fg-soft);
    text-transform: uppercase;
}
body.page-zasto-cp .chapter-band .meta.bright { color: var(--zc-fg); }
body.page-zasto-cp .chapter-band .sep {
    color: rgba(155, 25, 25, 0.85);
    font-size: 13px;
    font-family: var(--font-mono);
}

/* ================================================================
   POGLAVLJE 02 · PRIČA — Razgovor sa Stevanom (na --bg-deeper)
   ================================================================ */
body.page-zasto-cp .prica-section {
    background: var(--zc-bg-deeper);
    padding-bottom: 120px;
    position: relative;
}

/* Chapter opener — 2-kolone grid (eyebrow+h2 | 2 pasusa intro) */
body.page-zasto-cp .chapter-opener {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
body.page-zasto-cp .chapter-opener .eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #9a9a98;
    margin-bottom: 28px;
    line-height: 1.6;
}
body.page-zasto-cp .chapter-opener .eyebrow .dot {
    color: var(--zc-red);
    margin-right: 8px;
    font-size: 14px;
}
body.page-zasto-cp .chapter-opener h2 {
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: var(--zc-fg);
    margin: 0;
    line-height: 1.08;
}
body.page-zasto-cp .chapter-opener h2 .signal {
    color: var(--zc-gold);
    font-style: italic;
    font-weight: 500;
}
body.page-zasto-cp .chapter-opener p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--zc-fg-mid);
    margin: 0 0 16px;
}
body.page-zasto-cp .chapter-opener p em {
    font-style: italic;
    color: var(--zc-fg-soft);
    font-weight: 500;
}
body.page-zasto-cp .chapter-opener p:last-child { margin-bottom: 0; }

/* Dijalog sa Stevanom — 200px label + 1fr replike, top/bottom border */
body.page-zasto-cp .dialog {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 36px 24px 32px;
    border-top: 1px solid var(--zc-rule);
    border-bottom: 1px solid var(--zc-rule);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 56px;
    align-items: start;
}
body.page-zasto-cp .dialog-head {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--zc-fg-haze);
    text-transform: uppercase;
    line-height: 1.7;
}
body.page-zasto-cp .dialog-head .stamp {
    color: var(--zc-gold-dim);
    margin-bottom: 8px;
    display: block;
}
body.page-zasto-cp .dialog-head b {
    color: var(--zc-fg);
    font-weight: 500;
}
body.page-zasto-cp .dialog-lines {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--zc-fg-soft);
    font-style: italic;
}
body.page-zasto-cp .dialog-lines p {
    margin: 0 0 14px;
    padding-left: 26px;
    position: relative;
}
body.page-zasto-cp .dialog-lines p::before {
    content: '—';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--zc-red);
    font-style: normal;
    font-weight: 400;
}
body.page-zasto-cp .dialog-lines p:last-child { margin-bottom: 0; }

/* Fusnota ispod dijaloga — pojašnjenje Matrix/Neo veze */
body.page-zasto-cp .dialog-footnote {
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 56px;
    align-items: start;
}
body.page-zasto-cp .dialog-footnote .label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--zc-fg-haze);
    text-transform: uppercase;
    line-height: 1.7;
    padding-top: 4px;
}
body.page-zasto-cp .dialog-footnote .label .arrow { color: var(--zc-gold-dim); }
body.page-zasto-cp .dialog-footnote .body {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--zc-fg-mid);
    max-width: 760px;
}
body.page-zasto-cp .dialog-footnote .body em {
    font-style: italic;
    color: var(--zc-fg-soft);
}

/* Stevanov citat — sivi blok sa crvenom levom ivicom, crveni navodnici */
body.page-zasto-cp .quote-block {
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 32px 36px;
    background: rgba(155, 25, 25, 0.05);
    border-left: 3px solid var(--zc-red);
    position: relative;
}
body.page-zasto-cp .quote-block p {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--zc-fg-soft);
    margin: 0;
    font-style: italic;
}
body.page-zasto-cp .quote-block p::before {
    content: '„';
    color: var(--zc-red);
    font-size: 28px;
    line-height: 0;
    position: relative;
    top: 4px;
    margin-right: 4px;
    font-style: normal;
}
body.page-zasto-cp .quote-block p::after {
    content: '"';
    color: var(--zc-red);
    font-size: 28px;
    line-height: 0;
    position: relative;
    top: 6px;
    margin-left: 2px;
    font-style: normal;
}
body.page-zasto-cp .quote-block .attribution {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--zc-gold-dim);
    text-transform: uppercase;
}

/* Refleksija — 5 pasusa posle citata, marker stamp levo */
body.page-zasto-cp .reflection {
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 56px;
    align-items: start;
}
body.page-zasto-cp .reflection-marker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--zc-gold-dim);
    text-transform: uppercase;
    padding-top: 6px;
    line-height: 1.7;
}
body.page-zasto-cp .reflection-marker b {
    color: var(--zc-fg);
    font-weight: 500;
    display: block;
    margin-top: 4px;
}
body.page-zasto-cp .reflection-body p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--zc-fg-mid);
    margin: 0 0 18px;
    max-width: 820px;
}
body.page-zasto-cp .reflection-body p em {
    font-style: italic;
    color: var(--zc-fg-soft);
}
body.page-zasto-cp .reflection-body p strong {
    font-weight: 500;
    color: var(--zc-gold-dim);
    font-style: italic;
}
body.page-zasto-cp .reflection-body p:last-child { margin-bottom: 0; }

/* Signoff — flex space-between, gold ikona + right marker */
body.page-zasto-cp .prica-signoff {
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 28px 24px 0;
    border-top: 1px solid var(--zc-rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
body.page-zasto-cp .prica-signoff .icon {
    color: var(--zc-gold);
    font-size: 16px;
    line-height: 1.4;
    font-family: var(--font-mono);
}
body.page-zasto-cp .prica-signoff .right {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--zc-fg-haze);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.7;
}
body.page-zasto-cp .prica-signoff .right b {
    color: var(--zc-fg-soft);
    font-weight: 500;
}

/* ================================================================
   POGLAVLJE 03 · PRINCIPI — Tri principa (na --bg)
   ================================================================ */
body.page-zasto-cp .principi-section {
    background: var(--zc-bg);
    padding-bottom: 120px;
    position: relative;
}

body.page-zasto-cp .principi-list {
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 0 24px;
    border-top: 2px solid var(--zc-red);
}
body.page-zasto-cp .principi-item {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 48px;
    padding: 44px 0;
    border-bottom: 1px solid var(--zc-rule);
    align-items: start;
    transition: opacity 0.35s ease;
}
/* Hover-bump: hover na jedan item prituši ostale. SAMO na hover uređajima —
   na dodiru (iOS) bi tap zaglavio :hover i ostavio ostale prigušene. */
@media (hover: hover) {
    body.page-zasto-cp .principi-list:has(.principi-item:hover) .principi-item:not(:hover) {
        opacity: 0.42;
    }
}
body.page-zasto-cp .principi-item:last-child { border-bottom: none; }

body.page-zasto-cp .principi-num {
    font-family: var(--font-mono);
    font-size: 56px;
    font-weight: 300;
    color: var(--zc-fg-faint);
    letter-spacing: -0.02em;
    line-height: 0.9;
    transition: color 0.4s ease;
}
body.page-zasto-cp .principi-item:hover .principi-num {
    color: var(--zc-gold);
}
body.page-zasto-cp .principi-num .sub {
    display: block;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--zc-fg-haze);
    margin-top: 14px;
    text-transform: uppercase;
    line-height: 1.6;
}

body.page-zasto-cp .principi-head h3 {
    font-size: 26px;
    font-weight: 500;
    color: var(--zc-fg);
    margin: 0 0 16px;
    letter-spacing: -0.014em;
    line-height: 1.18;
    max-width: 380px;
}
body.page-zasto-cp .principi-head h3 em {
    color: var(--zc-gold);
    font-style: italic;
    font-weight: 500;
}
body.page-zasto-cp .principi-head .anti {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--zc-red-bright);
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid rgba(155, 25, 25, 0.35);
    display: inline-block;
}

body.page-zasto-cp .principi-body p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--zc-fg-mid);
    margin: 0 0 14px;
}
body.page-zasto-cp .principi-body p em {
    font-style: italic;
    color: var(--zc-fg-soft);
}
body.page-zasto-cp .principi-body p:last-child { margin-bottom: 0; }
body.page-zasto-cp .principi-body .key {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 217, 168, 0.2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--zc-gold-dim);
    text-transform: uppercase;
    line-height: 1.7;
}
body.page-zasto-cp .principi-body .key b {
    color: var(--zc-gold);
    font-weight: 500;
}

/* ================================================================
   POGLAVLJE 04 · POZIV — CTA (na --bg-deeper)
   ================================================================ */
body.page-zasto-cp .poziv-section {
    background: var(--zc-bg-deeper);
    padding-bottom: 60px;
    position: relative;
}

body.page-zasto-cp .poziv-block {
    max-width: 1200px;
    margin: 88px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 80px;
    align-items: center;
}
body.page-zasto-cp .poziv-left { min-width: 0; }
body.page-zasto-cp .poziv-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--zc-red-bright);
    text-transform: uppercase;
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.page-zasto-cp .poziv-eyebrow::before {
    content: '⬡';
    color: var(--zc-red-bright);
    font-size: 14px;
}
body.page-zasto-cp .poziv-title {
    font-size: 42px;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: var(--zc-fg);
    margin: 0 0 22px;
    line-height: 1.08;
    max-width: 640px;
}
body.page-zasto-cp .poziv-title em {
    color: var(--zc-gold);
    font-style: italic;
    font-weight: 500;
}
body.page-zasto-cp .poziv-desc {
    font-size: 16px;
    line-height: 1.65;
    color: var(--zc-fg-soft);
    margin: 0 0 36px;
    max-width: 580px;
}
body.page-zasto-cp .poziv-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
body.page-zasto-cp .btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 32px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.35s ease, border-color 0.35s ease,
                color 0.35s ease, transform 0.35s ease;
    cursor: pointer;
}
body.page-zasto-cp .btn .arrow {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}
body.page-zasto-cp .btn.primary {
    background: var(--zc-red);
    border: 1.5px solid var(--zc-red);
    color: #fff;
}
body.page-zasto-cp .btn.primary:hover,
body.page-zasto-cp .btn.primary:focus-visible {
    background: var(--zc-red-bright);
    border-color: var(--zc-red-bright);
    transform: translateX(4px);
    text-decoration: none;
}
body.page-zasto-cp .btn.primary:hover .arrow,
body.page-zasto-cp .btn.primary:focus-visible .arrow { transform: translateX(6px); }
body.page-zasto-cp .btn.ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 217, 168, 0.35);
    color: var(--zc-gold);
}
body.page-zasto-cp .btn.ghost:hover,
body.page-zasto-cp .btn.ghost:focus-visible {
    border-color: var(--zc-gold);
    background: rgba(255, 217, 168, 0.06);
    transform: translateX(4px);
    text-decoration: none;
}
body.page-zasto-cp .btn.ghost:hover .arrow,
body.page-zasto-cp .btn.ghost:focus-visible .arrow { transform: translateX(6px); }

/* Desna kolona — "matica" pečat sa 4-hex SVG (Korisnik/Stručnjak/Dobavljač/CP) */
body.page-zasto-cp .poziv-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
body.page-zasto-cp .poziv-patch {
    width: 240px;
    text-align: center;
}
body.page-zasto-cp .poziv-patch svg {
    width: 220px;
    height: 220px;
    display: block;
    margin: 0 auto 18px;
}
body.page-zasto-cp .poziv-patch .pl-stamp {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--zc-fg-haze);
    text-transform: uppercase;
    line-height: 1.7;
}
body.page-zasto-cp .poziv-patch .pl-stamp b {
    display: block;
    color: var(--zc-gold);
    font-weight: 500;
    margin-bottom: 4px;
}

body.page-zasto-cp .poziv-foot {
    max-width: 1200px;
    margin: 88px auto 0;
    padding: 24px 24px 0;
    border-top: 1px solid var(--zc-rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--zc-fg-haze);
    text-transform: uppercase;
}
body.page-zasto-cp .poziv-foot b {
    color: var(--zc-fg-soft);
    font-weight: 500;
}
body.page-zasto-cp .poziv-foot .sep {
    color: rgba(155, 25, 25, 0.7);
    margin: 0 12px;
}
body.page-zasto-cp .poziv-foot .tick {
    color: var(--zc-red);
    font-family: var(--font-mono);
    font-size: 13px;
}
/* Poslednji „marker" blok na ≤720: samo dve centrirane linije — „ZAŠTO CRVENA
   PILULA" i „NEKOME KAO REŠENJE · SVIMA KAO POZIV". ⊢, CP.STR.04 i POGLAVLJA
   01—04 se sklanjaju (Denis). */
@media (max-width: 720px) {
    body.page-zasto-cp .poziv-foot {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
        line-height: 1.6;
    }
    body.page-zasto-cp .poziv-foot .tick,
    body.page-zasto-cp .poziv-foot .pf-code,
    body.page-zasto-cp .poziv-foot .pf-extra { display: none; }
}

/* ================================================================
   RESPONSIVE — <920px stack u 1 kolonu
   ================================================================ */
@media (max-width: 920px) {
    body.page-zasto-cp .hero-inner {
        /* minmax(0,1fr) umesto 1fr: 1fr ima auto (min-content) minimum, pa ga
           nepreloman .trinity red gura na ~454px → tekst se seče na telefonu.
           minmax(0,…) dozvoljava koloni da padne ispod min-content i stane u
           viewport, a .trinity se prelama (vidi ispod). */
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        /* Top je bio 130px (desktop osećaj) → na mobilnom je ostavljao veliki
           prazan hex jaz ispod banda. 88px tek raščišćava ~60px band + dah. */
        padding: 88px 24px 80px;
    }
    /* prazna leva (vizuelna) kolona — bez svrhe kad je grid stack-ovan */
    body.page-zasto-cp .hero-vis-side { display: none; }
    /* Tamni panel iza teksta: na desktopu desno=0 (poklapa stub), levo -44
       (bleed). Na mobilnom to gura panel desno (asimetrično) → simetričan
       full-bleed do obe ivice (hero-inner ima 24px padding). */
    body.page-zasto-cp .hero-text::before { inset: -24px -24px -24px -24px; }
    /* trinity pilula (Tehnologije/Procesi/Ljudi) — prelomi u više redova umesto
       da gura širinu preko viewport-a */
    body.page-zasto-cp .trinity { flex-wrap: wrap; row-gap: 8px; }
    /* RAVNOTEŽA u 2. red: bez viseće leve crte/uvlačenja — čist red, zlatna. */
    body.page-zasto-cp .trinity .balance {
        flex-basis: 100%;
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
        margin-top: 7px;
    }
    body.page-zasto-cp .hero h1 { font-size: 44px; }
    body.page-zasto-cp .chapter-opener {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    body.page-zasto-cp .chapter-opener h2 { font-size: 32px; }
    body.page-zasto-cp .dialog,
    body.page-zasto-cp .dialog-footnote,
    body.page-zasto-cp .reflection {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    body.page-zasto-cp .principi-item {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 32px 0;
    }
    body.page-zasto-cp .principi-num { font-size: 40px; }
    body.page-zasto-cp .poziv-block {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    /* POZIV blok (Poglavlje 04, pred footer) — svi elementi centrirani na
       uskoj koloni (Denis): eyebrow, naslov, opis, „Javite se" dugme i hex
       pečat po sredini. */
    body.page-zasto-cp .poziv-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    body.page-zasto-cp .poziv-buttons { justify-content: center; }
    body.page-zasto-cp .poziv-right { justify-content: center; }
    body.page-zasto-cp .poziv-title { font-size: 32px; }
    body.page-zasto-cp .band-legend { gap: 14px; }
    body.page-zasto-cp .hero-band-bot .band-legend .legend-label {
        display: none;
    }
}
@media (max-width: 560px) {
    /* 44px hero naslov se ne uklapa u uski ekran ("Nekome kao rešenje" se seklo);
       clamp ga skalira sa viewport-om (≈32px na 375px). */
    body.page-zasto-cp .hero h1 { font-size: clamp(28px, 8.5vw, 40px); }
    body.page-zasto-cp .chapter-opener h2 { font-size: clamp(24px, 7vw, 32px); }
}

/* ================================================================
   DIVIDER SISTEM — mobilni (Designer C.1 Title varijanta)
   chapter-band je dizajniran kao JEDAN red (height 60px); na uskoj
   koloni naslov se prelamao u 3-4 reda → namerni DVORED:
   red 1 = eyebrow (POGLAVLJE NN · KATEGORIJA, mono mali),
   red 2 = naslov (isti tekst, veći/svetliji, dominantan).
   ================================================================ */
@media (max-width: 720px) {
    /* Divider TIER 1 (Doc 06·B): poglavlje = vazduh + marker, ne alarmni zid.
       Jedna 1px crvena linija GORE + 6px brand tačka na njoj; bez donje linije,
       bez ploče; više vazduha gore (44) nego dole (22). Crvena = tačka, ne zid. */
    body.page-zasto-cp .chapter-band,
    body.page-zasto-cp .chapter-band.on-bg {
        height: auto;
        flex-wrap: wrap;
        gap: 0 9px;
        row-gap: 7px;
        padding: 44px 24px 22px;
        background: none;
        border-top: 1px solid var(--zc-red);
        border-bottom: 0;
    }
    /* 6px brand tačka centrirana na gornjoj liniji (marker poglavlja) */
    body.page-zasto-cp .chapter-band::before {
        display: block;
        content: '';
        left: 50%;
        top: 0;
        width: 6px;
        height: 6px;
        background: var(--zc-red-bright);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    body.page-zasto-cp .chapter-band::after { display: none; }
    /* tick markeri (⊢⊣) — sakrij */
    body.page-zasto-cp .chapter-band .tick { display: none; }
    /* sep posle kategorije (pred naslovom) — sakrij da eyebrow nema rep "·" */
    body.page-zasto-cp .chapter-band .meta.bright + .sep { display: none; }
    /* naslov (meta posle 2. sep) → svoj red, dominantan, centriran */
    body.page-zasto-cp .chapter-band .meta.bright + .sep + .meta {
        flex-basis: 100%;
        font-size: 16px;
        letter-spacing: 0.1em;
        color: var(--zc-fg);
        text-align: center;
    }

    /* ============================================================
       Doc 06 · A — ZAŠTO CP hero, mobile-native (telefon = primarni).
       Tekst diše i startuje visoko; hex je tiha tekstura; bande
       (CP.STR.04 + legenda) se izostavljaju iz hero kadra na telefonu.
       Desktop netaknut (sve je u ≤720px).
       ============================================================ */

    /* hero-frame bande (gornja CP.STR.04 + donja legenda „MREŽA U RASTU")
       — van mobilnog hero kadra; kompozicija je čist vertikalni tekst. */
    body.page-zasto-cp .hero-band-top,
    body.page-zasto-cp .hero-band-bot { display: none; }

    /* hero: ukini desktop min-height (760px) — na telefonu je pravio ~360px
       praznog hexa gore/dole; hero sad prati visinu sadržaja. + tanka
       neutralna donja granica umesto crvene band-linije. */
    body.page-zasto-cp .hero { min-height: auto; border-bottom: 1px solid var(--zc-fg-faint); }

    /* eyebrow odmah ispod hedera (~18px), 22px bočne margine, dah dole */
    body.page-zasto-cp .hero-inner { padding: 18px 22px 36px; gap: 0; }

    /* bez tamne ploče iza teksta — hex je dovoljno tih (vidi dole) */
    body.page-zasto-cp .hero-text::before { display: none; }

    /* Prirodan redosled: eyebrow → naslov → body → trinity (pečat sa
       ravnotežom). Naš sub je objašnjenje h1 — drži se uz njega; trinity
       je završni „stamp", kako ga i desktop zove. */
    body.page-zasto-cp .hero-eyebrow { margin: 0 0 16px; }   /* eyebrow→naslov tesno */
    body.page-zasto-cp .hero h1      { margin: 0 0 18px; }   /* naslov→body */

    /* TRINITY → mono traka: tri ravnopravna pojma, dotted sredina, hairline
       gore/dole; bez okvira/blur-a. RAVNOTEŽA pada u sopstveni red. */
    body.page-zasto-cp .trinity {
        margin-top: 24px;               /* body→trinity otvoreno (pečat) */
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        gap: 0;
        padding: 9px 0;
        border: 0;
        border-top: 1px solid var(--zc-rule);
        border-bottom: 1px solid var(--zc-rule);
        background: none;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }
    body.page-zasto-cp .trinity .sep { display: none; }       /* dijamanti van mobilnog */
    body.page-zasto-cp .trinity .word { text-align: center; padding: 0 4px; }
    body.page-zasto-cp .trinity .word:nth-child(3) {          /* Procesi (sredina) */
        border-left: 1px dotted var(--zc-rule);
        border-right: 1px dotted var(--zc-rule);
    }
    body.page-zasto-cp .trinity .balance {
        grid-column: 1 / -1;            /* sopstveni red, pun */
        text-align: center;
        margin: 12px 0 0;               /* trinity→ravnoteža tesno */
        padding: 0;
        border-left: 0;
        color: var(--zc-gold);
    }
    /* bez ⟶ markera ispred reči — strelica je gurala „RAVNOTEŽA" desno od
       sredine; reč treba da bude stvarno centrirana (u ravnoteži). */

    /* BODY uži od kolone — „ne lepi ivicu" (najviše menja osećaj nabijenosti) */
    body.page-zasto-cp .hero-sub { max-width: 300px; margin: 0; }

    /* HEX podloga = tiha tekstura (Designer: 0.12–0.18), bez crvenog washa */
    body.page-zasto-cp .hex-grid svg { opacity: 0.15; }
}