/* home-variant-c.css — Variant C "Mirno otvaranje" home stranice.
 *
 * Source: handoff/source/variant-c-home.jsx <style> blok (linije 138-1449),
 * 1:1 port iz JSX-a u eksterni CSS, sa fix-om duple `}` u JSX-u (linija 496)
 * koja je prouzrokovala da `.vch-section-head` rule curi van scope-a.
 *
 * Učitava se SAMO na home stranici. Inner pages (obuke/zasto-cp/kontakt/usluge)
 * koriste cp-* selektore u layout.css, koji ostaju netaknuti.
 *
 * Klasa prefiks: vch-* ("variant C home"). Nula kolizije sa cp-*.
 */

/* Anchor jump offset — kad korisnik klikne #razgovor (ili slično), scroll lands
 * 80px ispod viewport vrha, dovoljno da compact header (64px) ne pokrije naslov.
 * Postavljeno na sve vch-* sekcije za buduće anchor-e bez dodatne intervencije. */
.vch-conv,
.vch-resources,
.vch-isk,
.vch-diag,
.vch-oblasti,
.vch-podrska {
    scroll-margin-top: 80px;
}

/* Reset globalnog `a { text-decoration: underline }` iz base.css — Variant C
 * dizajn pretpostavlja linkove bez podvlake po default-u; svaka klasa koja
 * treba da ima podvlaku eksplicitno je traži.
 * Pokriveno: vch-top + vch-header* (renderuju se izvan .vch-root wrapper-a
 * od kad je header preselio u shared partial) + .vch-root (body sadržaj). */
.vch-top a,
.vch-header a,
.vch-header-compact a,
.vch-root a {
    text-decoration: none;
}

/* ROOT — paper bg, Inter font sa ss01 stylistic set */
.vch-root {
    background: var(--bg-paper);
    color: var(--fg-light-deep);
    font-family: var(--font-sans);
    font-feature-settings: "ss01";
}
.vch-root .container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* MATICA — element preuzet iz logoa (heksagon spolja, krug iznutra) */
.cp-nut {
    display: inline-block;
    flex-shrink: 0;
    color: currentColor;
    line-height: 0;
}
.cp-nut svg { display: block; width: 100%; height: 100%; }
.cp-nut-xs { width: 8px; height: 8px; }
.cp-nut-sm { width: 12px; height: 12px; }
.cp-nut-md { width: 16px; height: 16px; }
.cp-nut-lg { width: 24px; height: 24px; }
.cp-nut-xl { width: 40px; height: 40px; }
.cp-nut-row { display: inline-flex; align-items: center; gap: 4px; }

/* ====================================================================== */
/* TAMNA INFO TRAKA — spojena sa headerom u jednu strukturu                */
/* Ista bg boja kao header, razdvojena samo tankom crvenom linijom (1px). */
/* CTA "Pošalji upit" je tekstualni link sa strelicom (NE pill dugme).    */
/* ====================================================================== */
.vch-top {
    background: var(--bg-dark);
    border-bottom: 1px solid rgba(155, 25, 25, 0.85);
}
.vch-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-dark-faint);
    letter-spacing: 0.06em;
}
.vch-top-l, .vch-top-r { display: flex; gap: 22px; align-items: center; }
.vch-top-l .sep { opacity: 0.45; }
.vch-top a { color: var(--fg-dark-soft); text-decoration: none; }
.vch-top a:hover { color: var(--brand-light); }

/* CTA — bez border-a, bez bg-a, samo brand-light tekst sa strelicom */
.vch-top .cta {
    color: var(--brand-light);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
}
.vch-top .cta::after { content: " →"; }
.vch-top .cta:hover { color: #fff; }

/* ====================================================================== */
/* HEADER — tamna varijanta, "newsroom" ton                               */
/* Background #08080c (kosmos crno-crn, isti token kao hero) — handoff    */
/* 2026-05-17 FINAL: header + hero čine kontinuum iznad transition band-a;*/
/* transition band je horizont između dva ambijenta (kosmos / warm-graphite */
/* sistem znanja). Ne korisi --bg-dark da ne procuri u druge dark elemente. */
/* ====================================================================== */
.vch-header {
    background: #08080c;
    border-bottom: 1px solid var(--bg-dark-rule);
}
.vch-header .vch-brand { color: var(--brand-light); }
.vch-header .vch-brand-name { color: var(--fg-dark-strong); }
.vch-header .vch-brand-name em { color: var(--fg-dark-strong); }
.vch-header .vch-brand-name .slash { color: var(--brand-light); }
.vch-header .vch-brand-sub { color: var(--fg-dark-faint); }
.vch-header-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    height: 116px;
    gap: 56px;
    transition: height 0.25s ease, gap 0.25s ease;
}

/* Sentinel za sticky compact header — 1px element neposredno ispod pravog headera.
 * IntersectionObserver u home.php toglje body.is-header-compact kad sentinel
 * napusti viewport. Pravi header NIKAD ne menja position — separate overlay
 * (.vch-header-compact ispod) je taj koji se klizne dole. Nema layout reflow-a. */
.vch-header-sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
    visibility: hidden;
}

/* COMPACT HEADER OVERLAY — uvek position: fixed, sakriven van vrha transformom.
 * Aktivira se kad body dobije .is-header-compact (pogledaj JS na dnu home.php).
 * Vizuelno duplikat pravog headera ali manji (logo 36px, bez sub-line, manji nav).
 * Aria-hidden i tabindex=-1 jer screen reader/keyboard ne treba da čita 2 puta. */
.vch-header-compact {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #08080c; /* sinhronizovano sa .vch-header (kosmos kontinuum) */
    border-bottom: 1px solid var(--bg-dark-rule);
    transform: translateY(-100%);
    transition: transform 0.28s ease;
    pointer-events: none;
    visibility: hidden;
    will-change: transform;
}
body.is-header-compact .vch-header-compact {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}
.vch-header-compact-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    height: 64px;
    gap: 32px;
}
.vch-header-compact .vch-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-light);
    text-decoration: none;
}
.vch-header-compact .vch-brand svg { height: 36px; flex-shrink: 0; }
.vch-header-compact .vch-brand-t {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.vch-header-compact .vch-brand-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--fg-dark-strong);
    text-transform: lowercase;
    white-space: nowrap;
}
.vch-header-compact .vch-brand-name .slash {
    color: var(--brand-light);
    font-weight: 500;
    margin: 0 1px;
}
.vch-header-compact .vch-brand-name em {
    font-style: normal;
    font-weight: 600;
    color: var(--fg-dark-strong);
}
.vch-header-compact .vch-nav {
    display: flex;
    gap: 24px;
    justify-self: end;
}
.vch-header-compact .vch-nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-dark-soft);
    padding: 6px 0;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.vch-header-compact .vch-nav a:hover { color: var(--fg-dark-strong); }
.vch-header-compact .vch-nav a.active {
    color: var(--fg-dark-strong);
    border-bottom-color: var(--brand-light);
}

@media (prefers-reduced-motion: reduce) {
    .vch-header-compact { transition: none; }
}
.vch-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--brand);
    text-decoration: none;
}
.vch-brand svg { height: 62px; flex-shrink: 0; }
.vch-brand-t {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--fg-light-deep);
}
.vch-brand-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--fg-light-deep);
    text-transform: lowercase;
    white-space: nowrap;
}
.vch-brand-name .slash {
    color: var(--brand);
    font-weight: 500;
    margin: 0 1px;
}
.vch-brand-name em {
    font-style: normal;
    font-weight: 600;
    color: var(--fg-light-deep);
}
.vch-brand-sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--fg-light-haze);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}
.vch-nav { display: flex; gap: 32px; justify-self: end; }
.vch-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-dark-soft);
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.vch-nav a.active {
    color: var(--fg-dark-strong);
    border-bottom-color: var(--brand-light);
}
.vch-nav a:hover { color: var(--fg-dark-strong); }
.vch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 500;
    background: var(--fg-light-deep);
    color: var(--bg-paper);
    border: 1px solid var(--fg-light-deep);
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
}
.vch-btn:hover { background: var(--brand); border-color: var(--brand); color: var(--bg-paper); }
.vch-btn-ghost {
    background: transparent;
    color: var(--fg-light-deep);
    border-color: var(--border-light);
}
.vch-btn-ghost:hover {
    background: var(--fg-light-deep);
    color: var(--bg-paper);
    border-color: var(--fg-light-deep);
}

/* ====================================================================== */
/* HERO — najvažnije: jedna mirna rečenica                                */
/* ====================================================================== */
.vch-hero {
    padding: 96px 0 72px;
    border-bottom: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}
.vch-honeycomb {
    position: absolute;
    top: -40px;
    right: 0;
    height: auto;
    z-index: 0;
    pointer-events: none;
    max-width: none;
    /* Full-bleed do desne ivice viewport-a; meki fade levo (da ne pređe preko
       hero teksta) i blagi pad opaciteta uz desnu ivicu (mekša silueta). */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, rgba(0,0,0,0.35) 48%, black 70%, black 92%, rgba(0,0,0,0.5) 100%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 30%, rgba(0,0,0,0.35) 48%, black 70%, black 92%, rgba(0,0,0,0.5) 100%);
}
.vch-hero > .container { position: relative; z-index: 1; }
/* Ugaoni markeri hero bloka — vidljivi samo na mobilnom (Designer #04: kadriraju
   kompoziciju, potvrda da je hex motiv namerno sečen). Desktop: skriveni. */
.vch-hero-mark {
    display: none;
    position: absolute;
    width: 14px; height: 14px;
    z-index: 1;
    pointer-events: none;
    border: 1px solid var(--brand);
    opacity: 0.7;
}
.vch-hero-mark.tl { top: 16px;    left: 16px;    border-right: 0; border-bottom: 0; }
.vch-hero-mark.tr { top: 16px;    right: 16px;   border-left: 0;  border-bottom: 0; }
.vch-hero-mark.bl { bottom: 16px; left: 16px;    border-right: 0; border-top: 0; }
.vch-hero-mark.br { bottom: 16px; right: 16px;   border-left: 0;  border-top: 0; }
.vch-hero-side {
    position: relative;
    z-index: 2;
    padding-bottom: 6px;
}
.vch-hero-author {
    background: var(--u-cream);
    border: 1px solid var(--u-stone);
    padding: 22px 24px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg-light-mid);
    border-left: 2px solid var(--brand);
}
.vch-hero-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    align-items: end;
}
.vch-hero-kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brand);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vch-hero h1 {
    font-size: clamp(44px, 5.4vw, 72px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.022em;
    color: var(--fg-light-deep);
    max-width: 18ch;
}
.vch-hero h1 em {
    font-style: normal;
    color: var(--brand);
}
.vch-hero-sub {
    margin-top: 28px;
    font-size: 20px;
    line-height: 1.55;
    color: var(--fg-light-mid);
    max-width: 52ch;
}
.vch-hero-cta {
    margin-top: 40px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.vch-hero-cta-note {
    font-size: 13px;
    color: var(--fg-light-soft);
    margin-left: 4px;
}
.vch-hero-author strong {
    display: block;
    font-weight: 600;
    color: var(--fg-light-deep);
    margin-bottom: 10px;
}
.vch-hero-author span {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(214, 211, 204, 0.8);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-light-haze);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ====================================================================== */
/* VESTI KAJRON — crveni brejk između hero i tamne sekcije                */
/* ====================================================================== */
.vch-news {
    background: var(--brand);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    padding: 14px 0;
}
.vch-news-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
}
.vch-news-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    gap: 10px;
}
.vch-news-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #fff;
    animation: vch-pulse 2s infinite;
}
@keyframes vch-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
/* Marquee viewport — sakriva overflow, gradient maska da edges blago bledne */
.vch-news-track-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 60px), transparent);
            mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 60px), transparent);
}
/* Marquee track — sadržaj je dupliran u markup-u (2× isti niz vesti).
   Pozicija ide kroz JS rAF petlju (vidi inline script u home.php) zbog drag
   podrške (CSS animacija ne dozvoljava manual scrub). Kursor pokazuje da je
   draggable; user-select: none sprečava prevlačenje teksta umesto track-a. */
.vch-news-track {
    display: flex;
    gap: 36px;
    width: max-content;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}
.vch-news-track > * { flex-shrink: 0; -webkit-user-drag: none; user-drag: none; }
.vch-news-track.is-dragging { cursor: grabbing; }
.vch-news-track.is-dragging * { cursor: grabbing; }
.vch-news-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 12px;
    align-items: baseline;
    flex-shrink: 0;
    padding-left: 12px;
    position: relative;
    text-decoration: none;
}
.vch-news-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: var(--cat-color, rgba(255, 255, 255, 0.85));
}
.vch-news-cat {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}
.vch-news-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
}
.vch-news-title {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}
.vch-news-all {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
}
.vch-news-all:hover { color: #fff; }

/* ====================================================================== */
/* RAZGOVOR — naslov + 3 scenarija + CTA, jedan tamni blok                */
/* ====================================================================== */
.vch-conv {
    background: var(--bg-dark);
    color: var(--fg-dark-soft);
    padding: 88px 0 96px;
    border-bottom: 1px solid var(--bg-dark-rule);
}
.vch-conv-inner { display: flex; flex-direction: column; }

.vch-conv-head {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 64px;
    align-items: center;
    padding-bottom: 56px;
}
.vch-conv-kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-light);
    margin-bottom: 18px;
}
.vch-conv-head h2 {
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fg-dark-strong);
    max-width: 14ch;
    margin: 0;
}
.vch-conv-head h2 em {
    font-style: normal;
    color: var(--brand-light);
}

/* HEX BOJANKA — korak 1 */
.vch-conv-hex {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.vch-conv-hex-svg {
    width: 132px;
    height: 132px;
    display: block;
}
.vch-conv-hex-svg .vch-hex-pending {
    stroke: var(--bg-dark-rule);
    opacity: 0.55;
}
.vch-conv-hex-svg .vch-hex-active {
    stroke: var(--brand-light);
}
.vch-conv-hex-svg .vch-hex-num {
    fill: var(--fg-dark-faint);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
}
.vch-conv-hex-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-dark-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
}
.vch-conv-hex-meta strong {
    color: var(--brand-light);
    font-weight: 500;
}

/* SCENARIJI — tri kolone, rule iznad i ispod */
.vch-conv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--bg-dark-rule);
    border-bottom: 1px solid var(--bg-dark-rule);
}
.vch-conv-card {
    padding: 36px 32px 36px 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-right: 1px solid var(--bg-dark-rule);
}
.vch-conv-card:last-child { border-right: 0; padding-right: 0; }
.vch-conv-card:nth-child(n+2) { padding-left: 32px; }
.vch-conv-card-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-dark-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.vch-conv-card-kicker .cp-nut { color: var(--brand-light); }
.vch-conv-card h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--fg-dark-strong);
    margin: 0;
}
.vch-conv-card p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg-dark-soft);
    margin: 0;
}
.vch-conv-card-next {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--bg-dark-rule);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-dark);
}
.vch-conv-card-next strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--brand-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

/* CTA TRAKA — dijagonalno: tekst levo, kontakt dole desno */
.vch-conv-cta {
    padding-top: 56px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 32px;
}
.vch-conv-cta-lead {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dark-faint);
    line-height: 1.5;
    align-self: end;
    padding-bottom: 12px;
}
.vch-conv-cta-lead strong {
    display: block;
    color: var(--fg-dark-strong);
    font-weight: 500;
    font-size: 13px;
    margin-top: 6px;
}
.vch-conv-cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.vch-conv-phone {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(34px, 3.4vw, 44px);
    letter-spacing: -0.02em;
    color: var(--fg-dark-strong);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    line-height: 1;
}
.vch-conv-phone:hover { color: var(--brand-light); }
.vch-conv-phone-mark {
    width: 26px; height: 26px;
    color: var(--brand-light);
    display: inline-block;
    flex-shrink: 0;
}
.vch-conv-phone-mark svg { width: 100%; height: 100%; display: block; }
.vch-conv-phone-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-dark-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.vch-conv-secondary {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.vch-conv-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-dark-strong);
    text-decoration: none;
    padding: 10px 16px;
    border: 1px solid var(--bg-dark-rule);
    letter-spacing: 0.04em;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.vch-conv-btn:hover { border-color: var(--brand-light); color: var(--brand-light); }

/* ====================================================================== */
/* ALATI — besplatno, iz browser-a                                        */
/* ====================================================================== */
.vch-resources {
    padding: 120px 0 110px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-paper);
    position: relative;
    overflow: hidden;
}

/* HEADER alati — kicker + naslov + sub levo, hex bojanka + meta desno.
 * Pattern preuzet iz Razgovor/Iskustvo (vch-conv-head, vch-isk-head).
 * Ispravka iz Sesija 2 MSG#56: stari .vch-rhex watermark zamenjen ovim
 * konzistentnim header pattern-om. */
.vch-rhead {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 28px;
    /* override .vch-section-head defaults — koristimo isti element ali drugi grid */
    padding-bottom: 0;
    border-bottom: 0;
}
.vch-rhead-main { display: block; }
.vch-rhead-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brand);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.vch-rhead-kicker .cp-nut { color: var(--brand); }
.vch-rhead-kicker .cp-nut svg { width: 14px; height: 14px; }
.vch-rhead h2 {
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--fg-light-deep);
    margin: 0;
    max-width: none;
}
.vch-rhead h2 em {
    font-style: normal;
    color: var(--brand);
    position: relative;
}
.vch-rhead h2 em::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px;
    bottom: 0.06em;
    height: 0.18em;
    background: var(--brand);
    opacity: 0.14;
    z-index: -1;
}
.vch-rhead .vch-section-sub {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--fg-light-mid);
    max-width: 56ch;
}
.vch-rhead-hex {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    /* Podignut da gornja ivica hex-a bude na visini "02 · ALATI" kickera levo.
       Negativni margin neutrališe SVG-ov 4px unutrašnji top padding (viewBox 0 0 64 64,
       polygon počinje na y=2) i poravnava gornji vrh heksagona sa baseline-om kickera. */
    margin-top: -8px;
}
.vch-rhead-hex-svg {
    width: 132px;
    height: 132px;
    display: block;
}
.vch-rhead-hex-svg .vch-hex-pending {
    stroke: var(--border-light);
    opacity: 0.85;
}
.vch-rhead-hex-svg .vch-hex-active {
    stroke: var(--brand);
}
.vch-rhead-hex-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fg-light-deep);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
}
.vch-rhead-hex-meta strong {
    color: var(--brand);
    font-weight: 500;
}

.vch-resources .container { position: relative; z-index: 1; }

/* SECTION HEAD — koristi se za Alati, dva kolone (num | naslov + sub) */
.vch-section-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 64px;
    margin-bottom: 56px;
    align-items: end;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}
.vch-section-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brand);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.vch-section-head h2 {
    font-size: clamp(32px, 3.6vw, 46px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--fg-light-deep);
    max-width: 22ch;
}
.vch-section-head .vch-section-sub {
    margin-top: 14px;
    font-size: 17px;
    color: var(--fg-light-mid);
    line-height: 1.5;
    max-width: 56ch;
}

/* Cena beat — fini stamp iznad kartica */
.vch-rstamp {
    margin: 28px 0 36px;
    padding: 18px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-light-mid);
}
.vch-rstamp-lead {
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.vch-rstamp-lead .cp-nut { width: 14px; height: 14px; color: var(--brand); }
.vch-rstamp-lead .cp-nut svg { width: 100%; height: 100%; display: block; }
.vch-rstamp-price {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
}
.vch-rstamp-price s {
    color: var(--fg-light-faint);
    text-decoration: line-through;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 1.5px;
    font-weight: 400;
}
.vch-rstamp-arrow {
    color: var(--brand);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
}
.vch-rstamp-price strong {
    color: var(--brand);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.08em;
}
.vch-rstamp-tag {
    color: var(--fg-light-mid);
    padding-left: 14px;
    border-left: 1px solid var(--border-light);
    font-weight: 400;
}

/* STATUS variant of vch-rstamp — bez borders ima margin-top jer
   sledi odmah ispod price stamp-a. „trenutno u pripremi" je brand-red. */
.vch-rstamp--status {
    margin-top: -28px;
    border-top: none;
}
.vch-rstamp-status-text { color: var(--fg-light-mid); }
.vch-rstamp-status-text strong {
    color: var(--brand);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* PENDING vch-rcard variant — kartica je <div>, ne <a>; bez hover
   transformacija i bez pointer cursor-a (signalizira da nije klikabilna). */
.vch-rcard--pending { cursor: default; }
.vch-rcard--pending:hover { background: transparent; }
.vch-rcard--pending:hover h3 { color: inherit; }
.vch-rcard--pending .vch-rcard-cta {
    color: var(--fg-light-faint);
    font-style: italic;
}

/* H2 prelom u dva reda — em sa highlight ispod */
.vch-h2-line1, .vch-h2-line2 { display: block; }
.vch-section-head h2 em {
    font-style: normal;
    color: var(--brand);
    position: relative;
}
.vch-section-head h2 em::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px;
    bottom: 0.06em;
    height: 0.18em;
    background: var(--brand);
    opacity: 0.14;
    z-index: -1;
}
.vch-sub-emph {
    color: var(--fg-light-deep);
    font-weight: 500;
}

/* GRID 3 alata */
.vch-rgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--border-light);
    border-left: 1px solid var(--border-light);
}
.vch-rcard {
    position: relative;
    padding: 36px 32px 28px;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-light);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background 0.18s;
    text-decoration: none;
}
.vch-rcard:hover { background: var(--bg-paper); }
.vch-rcard:hover .vch-rcard-arrow { transform: translateX(4px); color: var(--brand); }
.vch-rcard:hover h3 { color: var(--brand); }

.vch-rcard-num {
    position: absolute;
    top: 22px;
    right: 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--fg-light-faint);
}

.vch-rcard-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vch-rcard-kicker .cp-nut { width: 12px; height: 12px; color: var(--brand); }
.vch-rcard-kicker .cp-nut svg { width: 100%; height: 100%; display: block; }

.vch-rcard h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.014em;
    color: var(--fg-light-deep);
    margin: 4px 0 0;
    transition: color 0.18s;
}
.vch-rcard p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg-light-mid);
    flex: 1;
    margin: 0;
}

.vch-rcard-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-light-deep);
    letter-spacing: 0.02em;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 16px;
}
.vch-rcard-foot .vch-rcard-cta {
    color: var(--brand);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vch-rcard-arrow {
    display: inline-block;
    transition: transform 0.18s, color 0.18s;
    color: var(--brand);
}

/* ====================================================================== */
/* DIJAGNOSTIČKA TABLA — paper, audit board grid + 6 signala 3×2          */
/* Hex bojanka 4/6 (korak 4 — dijagnoza, ide između Alati i Iskustvo).   */
/* ====================================================================== */
.vch-diag {
    padding: 110px 0 100px;
    background: var(--bg-paper);
    border-bottom: 1px solid var(--border-light);
    position: relative;
}
/* Audit-board grid pozadina (linearni gradient + radial mask) uklonjena
   2026-05-04 po korisnikovoj odluci — paper bg ostaje čist. */
.vch-diag .container { position: relative; z-index: 1; }

/* HEADER */
.vch-diag-head {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 32px;
    align-items: start;
    margin: 0 0 56px;
}
.vch-diag-head-main { max-width: 720px; }
.vch-diag-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brand);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.vch-diag-kicker .cp-nut { width: 14px; height: 14px; color: var(--brand); }
.vch-diag-head h2 {
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--fg-light);
    margin: 0 0 18px;
}
.vch-diag-head h2 em {
    font-style: normal;
    color: var(--brand);
    position: relative;
}
.vch-diag-head h2 em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0.06em;
    height: 4px;
    background: var(--brand);
    opacity: 0.18;
    z-index: -1;
}
.vch-diag-lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--fg-light-mid);
    margin: 0;
    max-width: 56ch;
}

/* HEX BOJANKA */
.vch-diag-hex {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    padding-top: 4px;
}
.vch-diag-hex-svg { width: 132px; height: 132px; display: block; }
.vch-diag-hex-svg .vch-hex-pending { stroke: var(--border-light); opacity: 0.85; }
.vch-diag-hex-svg .vch-hex-active { stroke: var(--brand); }
.vch-diag-hex-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fg-light-mid);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
}
.vch-diag-hex-meta strong { color: var(--brand); font-weight: 500; }

/* GRID — 3 kolone × 2 reda */
.vch-diag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-light);
    border-left: 1px solid var(--border-light);
}
.vch-signal {
    padding: 32px 32px 36px;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vch-signal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.vch-signal-code {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--brand);
    font-weight: 400;
}
.vch-signal-mark {
    width: 8px;
    height: 8px;
    background: var(--brand);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    flex-shrink: 0;
    /* Svaka tačkica dobija različito trajanje I različit delay → faze nikad
       ne usklade, signal deluje stvarno nesinhronizovano (asinhroni "monitori"). */
    animation: vch-signal-pulse 2.3s ease-in-out infinite;
    animation-delay: 0s;
}
.vch-signal:nth-child(2) .vch-signal-mark { animation-duration: 3.7s; animation-delay: 0.6s; }
.vch-signal:nth-child(3) .vch-signal-mark { animation-duration: 2.9s; animation-delay: 1.4s; }
.vch-signal:nth-child(4) .vch-signal-mark { animation-duration: 4.1s; animation-delay: 0.3s; }
.vch-signal:nth-child(5) .vch-signal-mark { animation-duration: 3.1s; animation-delay: 2.2s; }
.vch-signal:nth-child(6) .vch-signal-mark { animation-duration: 2.7s; animation-delay: 1.0s; }
@keyframes vch-signal-pulse {
    0%, 100% { opacity: 0.32; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
    .vch-signal-mark { animation: none; opacity: 0.7; }
}
.vch-signal h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--fg-light);
    margin: 0;
}
.vch-signal p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg-light-mid);
    margin: 0;
}
.vch-signal-diag {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--border-light);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--brand);
    opacity: 0.85;
}

/* FOOT — verdict + CTA */
.vch-diag-foot {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--border-light);
}
.vch-diag-foot-lead {
    font-size: 18px;
    line-height: 1.55;
    color: var(--fg-light);
    margin: 0;
    max-width: 60ch;
}
.vch-diag-foot-lead strong { color: var(--brand); font-weight: 600; }
.vch-diag-cta {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-light);
    background: transparent;
    border: 1px solid var(--fg-light-deep);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vch-diag-cta:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.vch-diag-cta-arrow { display: inline-block; transition: transform 0.15s ease; }
.vch-diag-cta:hover .vch-diag-cta-arrow { transform: translateX(4px); }

/* Responsive — diag */
@media (max-width: 1024px) {
    .vch-diag-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .vch-diag-head { grid-template-columns: 1fr; }
    .vch-diag-hex { justify-self: start; align-items: flex-start; }
    .vch-diag-hex-meta { text-align: left; }
}
@media (max-width: 720px) {
    .vch-diag-grid { grid-template-columns: 1fr; }
    .vch-diag-foot { grid-template-columns: 1fr; gap: 24px; }
    .vch-diag-cta { justify-self: start; }
}

/* ====================================================================== */
/* PET OBLASTI RADA — DARK, korak 5 (rešavanje)                          */
/* 5 numerisanih oblasti u listi sa hover crveni rule levo + broj/tag     */
/* postaju brand-light. CTA "Sve oblasti rada" → /usluge/.               */
/* ====================================================================== */
.vch-oblasti {
    padding: 120px 0 110px;
    background: var(--bg-dark);
    color: var(--fg-dark);
    border-bottom: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden;
}
/* Vertikalna mreža u pozadini ("kolone reda") uklonjena 2026-05-04 po
   korisnikovoj odluci — DARK bg ostaje čist. */
.vch-oblasti .container { position: relative; z-index: 1; }

/* HEADER */
.vch-oblasti-head {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 32px;
    align-items: start;
    margin: 0 0 64px;
}
.vch-oblasti-head-main { max-width: 720px; }
.vch-oblasti-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brand-light);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.vch-oblasti-kicker .cp-nut { width: 14px; height: 14px; color: var(--brand-light); }
.vch-oblasti-head h2 {
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--fg-dark-strong);
    margin: 0 0 18px;
}
.vch-oblasti-head h2 em {
    font-style: normal;
    color: var(--brand-light);
    position: relative;
}
.vch-oblasti-head h2 em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0.06em;
    height: 4px;
    background: var(--brand-light);
    opacity: 0.22;
    z-index: -1;
}
.vch-oblasti-lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--fg-dark-soft);
    margin: 0;
    max-width: 56ch;
}

/* HEX BOJANKA */
.vch-oblasti-hex {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    padding-top: 4px;
}
.vch-oblasti-hex-svg { width: 132px; height: 132px; display: block; }
.vch-oblasti-hex-svg .vch-hex-pending { stroke: var(--bg-dark-rule); opacity: 0.7; }
.vch-oblasti-hex-svg .vch-hex-active { stroke: var(--brand-light); }
.vch-oblasti-hex-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fg-dark-faint);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
}
.vch-oblasti-hex-meta strong { color: var(--brand-light); font-weight: 500; }

/* LISTA — 5 numerisanih oblasti */
.vch-oblasti-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border-dark);
}
.vch-obl {
    display: grid;
    grid-template-columns: 120px 1fr 220px;
    gap: 40px;
    align-items: baseline;
    padding: 32px 0 34px;
    border-bottom: 1px solid var(--border-dark);
    position: relative;
    transition: background 0.2s ease;
}
.vch-obl::before {
    /* tanka crvena linija sa leve strane na hover */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--brand);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease;
}
.vch-obl:hover::before { transform: scaleY(1); }
.vch-obl:hover { background: rgba(255,255,255,0.015); }

.vch-obl-num {
    font-family: var(--font-mono);
    font-size: 56px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--fg-dark-faint);
    line-height: 1;
    padding-left: 16px;
    transition: color 0.25s ease;
}
.vch-obl:hover .vch-obl-num { color: var(--brand-light); }

.vch-obl-body { padding-top: 8px; }
.vch-obl-body h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--fg-dark-strong);
    margin: 0 0 8px;
}
.vch-obl-body p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--fg-dark-soft);
    margin: 0;
    max-width: 60ch;
}
.vch-obl-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--fg-dark-haze);
    text-align: right;
    padding-top: 8px;
    opacity: 0.75;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.vch-obl:hover .vch-obl-tag { color: var(--brand-light); opacity: 1; }

/* FOOT */
.vch-oblasti-foot {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
    flex-wrap: wrap;
}
.vch-oblasti-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.vch-oblasti-cta:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.vch-oblasti-cta-arrow { display: inline-block; transition: transform 0.15s ease; }
.vch-oblasti-cta:hover .vch-oblasti-cta-arrow { transform: translateX(4px); }
.vch-oblasti-foot-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--fg-dark-faint);
    opacity: 0.7;
}

/* Responsive — oblasti */
@media (max-width: 1024px) {
    .vch-obl { grid-template-columns: 88px 1fr; gap: 28px; }
    .vch-obl-tag { display: none; }
    .vch-obl-num { font-size: 44px; }
}
@media (max-width: 720px) {
    .vch-oblasti-head { grid-template-columns: 1fr; }
    .vch-oblasti-hex { justify-self: start; align-items: flex-start; }
    .vch-oblasti-hex-meta { text-align: left; }
    .vch-obl { grid-template-columns: 60px 1fr; gap: 16px; padding: 24px 0; }
    .vch-obl-num { font-size: 32px; padding-left: 8px; }
    .vch-obl-body h3 { font-size: 20px; }
}

/* ====================================================================== */
/* ISKUSTVO — preporuka, treći korak (crvena traka)                       */
/* ====================================================================== */
.vch-isk {
    background: var(--brand);
    color: rgba(255, 244, 240, 0.92);
    padding: 110px 0 96px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.18);
}
.vch-isk::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,0.18), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(0,0,0,0.22), transparent 60%);
    pointer-events: none;
}
.vch-isk .container { position: relative; z-index: 1; }

.vch-isk-head {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    align-items: start;
    gap: 56px;
    padding-bottom: 48px;
    /* border-bottom uklonjen — stats top border ispod već igra ulogu razdelnika
       (bilo dve horizontalne linije stackovane preblizu). */
}
.vch-isk-kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 244, 240, 0.62);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.vch-isk-head h2 {
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: #fff5ef;
    max-width: 22ch;
    margin: 0;
}
.vch-isk-head h2 em {
    font-style: normal;
    color: #ffd9c8;
    border-bottom: 2px solid rgba(255, 217, 200, 0.55);
    padding-bottom: 2px;
}

/* HEX BOJANKA — korak 03 */
.vch-isk-hex {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.vch-isk-hex-svg {
    width: 132px;
    height: 132px;
    display: block;
}
.vch-isk-hex-svg .vch-hex-pending {
    stroke: rgba(255, 244, 240, 0.30);
}
.vch-isk-hex-svg .vch-hex-active {
    stroke: #ffd9c8;
}
.vch-isk-hex-svg .vch-hex-num {
    fill: rgba(255, 244, 240, 0.65);
    font-family: var(--font-mono);
    font-size: 4px;
    letter-spacing: 0.1em;
}
.vch-isk-hex-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 244, 240, 0.58);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
}
.vch-isk-hex-meta strong {
    color: #ffd9c8;
    font-weight: 500;
}

/* STATS ROW — 4 brojki između header-a i body-ja, horizontal divider iznad i ispod */
.vch-isk-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 36px 0;
    margin-top: 48px;
    border-top: 1px solid rgba(255, 244, 240, 0.18);
    border-bottom: 1px solid rgba(255, 244, 240, 0.18);
}
.vch-isk-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 32px;
    border-right: 1px solid rgba(255, 244, 240, 0.18);
}
.vch-isk-stat:first-child { padding-left: 0; }
.vch-isk-stat:last-child  { padding-right: 0; border-right: 0; }
.vch-isk-stat-num {
    font-family: var(--font-sans);
    font-size: clamp(38px, 4.4vw, 60px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff5ef;
}
.vch-isk-stat-plus {
    color: rgba(255, 244, 240, 0.45);
    font-weight: 500;
    margin-left: 2px;
}
.vch-isk-stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 244, 240, 0.55);
}

/* BODY — argument + reference 2x2 grid */
.vch-isk-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    padding: 48px 0 48px;
    border-bottom: 1px solid rgba(255, 244, 240, 0.18);
}
.vch-isk-lead {
    font-size: 19px;
    line-height: 1.65;
    color: rgba(255, 244, 240, 0.94);
    margin: 0;
    max-width: 48ch;
}
.vch-isk-lead strong {
    color: #fff5ef;
    font-weight: 600;
}
.vch-isk-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vch-isk-side-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 244, 240, 0.55);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.vch-isk-side-years {
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255, 244, 240, 0.78);
    letter-spacing: 0.06em;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 244, 240, 0.18);
}
.vch-isk-refs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
    padding: 4px 0 14px;
    border-bottom: 1px solid rgba(255, 244, 240, 0.18);
}
.vch-isk-ref {
    display: inline-flex;
    /* Marker poravnan sa baseline-om teksta — sedi pri dnu tekst linije. */
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: rgba(255, 244, 240, 0.92);
    line-height: 1.4;
}
.vch-isk-ref-marker {
    width: 5px;
    height: 5px;
    /* Ista boja kao "+" znak iz stats brojki — faded cream za vizuelnu povezanost. */
    background: rgba(255, 244, 240, 0.45);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.vch-isk-side-foot {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255, 244, 240, 0.55);
    letter-spacing: 0.04em;
    padding-top: 4px;
}

/* CTA — telefon + email */
.vch-isk-cta {
    padding-top: 48px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: 32px;
}
.vch-isk-cta-lead {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 244, 240, 0.55);
}
.vch-isk-cta-lead strong {
    display: block;
    color: #fff5ef;
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: -0.012em;
    text-transform: none;
    font-weight: 500;
    margin-top: 8px;
    max-width: 28ch;
}
.vch-isk-cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 10px;
}
.vch-isk-phone {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 38px;
    color: #fff5ef;
    letter-spacing: -0.02em;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1;
}
.vch-isk-phone:hover { color: #ffd9c8; }
.vch-isk-phone-mark {
    width: 26px; height: 26px;
    color: #ffd9c8;
    display: inline-flex;
    flex-shrink: 0;
}
.vch-isk-phone-mark svg { width: 100%; height: 100%; display: block; }
.vch-isk-phone-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 244, 240, 0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vch-isk-mail {
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255, 244, 240, 0.85);
    padding: 8px 14px;
    border: 1px solid rgba(255, 244, 240, 0.30);
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-top: 4px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.vch-isk-mail:hover { border-color: #ffd9c8; color: #ffd9c8; }

/* FOOTER — koristi shared cp-footer partial (templates/partials/footer.php +
 * cp-footer* selektori u layout.css). Stari .vch-footer* CSS uklonjen 2026-05-04
 * po korisnikovoj odluci "footer freeze" — drži shared footer dok se ne traži
 * eksplicitna izmena. */

/* ====================================================================== */
/* PODRŠKA — korak 06/06 (DARK, zatvaranje argumenta "podrška, ne proizvod") */
/* Sopstveni .vch-wrap container (max 1100px) umesto .container (1240px). */
/* ====================================================================== */
.vch-podrska {
    padding: 110px 0 120px;
    background: var(--bg-dark);
    color: var(--fg-dark);
    border-bottom: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden;
}
.vch-podrska::before {
    /* dijagonalna patina — sasvim tiha, jedva se vidi (alfa 0.018, NE pojačavati) */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(135deg, rgba(232,232,230,0.018) 0 1px, transparent 1px 14px);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
}
.vch-podrska .vch-wrap {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

/* HEADER — centriran */
.vch-podrska-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 64px;
}
.vch-podrska-hex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}
.vch-podrska-hex-svg {
    width: 72px;
    height: 72px;
    display: block;
}
.vch-podrska-hex-svg .vch-podrska-hex-base {
    stroke: var(--bg-dark-rule);
    opacity: 0.55;
}
.vch-podrska-hex-svg .vch-podrska-hex-active {
    stroke: var(--brand-light);
}
.vch-podrska-hex-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dark-faint);
}

.vch-podrska-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-light);
    margin-bottom: 22px;
}
.vch-podrska-step  { color: var(--fg-dark-strong); font-weight: 500; }
.vch-podrska-dot   { color: var(--fg-dark-faint); }
.vch-podrska-label { color: var(--brand-light); }

.vch-podrska-h {
    font-size: clamp(38px, 4.6vw, 60px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--fg-dark-strong);
    margin: 0 0 22px;
    text-wrap: balance;
}
.vch-podrska-h em {
    font-style: italic;
    color: var(--brand-light);
    font-weight: 600;
}

.vch-podrska-lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--fg-dark-soft);
    margin: 0 auto;
    max-width: 64ch;
}
.vch-podrska-lead em {
    font-style: italic;
    color: var(--fg-dark-strong);
}

/* PILLARS — 3 stuba podrške */
.vch-podrska-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 56px;
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}
.vch-podrska-pillar {
    padding: 36px 32px;
    border-right: 1px solid var(--border-dark);
    position: relative;
}
.vch-podrska-pillar:last-child { border-right: none; }
.vch-podrska-pillar-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--fg-dark-faint);
    margin-bottom: 16px;
}
.vch-podrska-pillar h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--fg-dark-strong);
    margin: 0 0 12px;
}
.vch-podrska-pillar p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-dark-soft);
    margin: 0;
}

/* CTA — crveno dugme + automatska strelica (.btn-arrow::after) */
.vch-podrska-cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.vch-podrska-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 16px 28px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.15s ease;
    cursor: pointer;
}
.vch-podrska-cta .btn:hover { background: var(--brand-hover); color: #fff; }
.vch-podrska-cta .btn-arrow::after {
    content: "→";
    font-family: var(--font-mono);
    display: inline-block;
    transition: transform 0.15s ease;
}
.vch-podrska-cta .btn-arrow:hover::after { transform: translateX(4px); }
.vch-podrska-cta-note {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--fg-dark-faint);
}

/* Responsive — podrška */
@media (max-width: 880px) {
    .vch-podrska { padding: 80px 0 90px; }
    .vch-podrska-head { margin-bottom: 44px; }
    .vch-podrska-pillars { grid-template-columns: 1fr; }
    .vch-podrska-pillar {
        border-right: none;
        border-bottom: 1px solid var(--border-dark);
        padding: 28px 24px;
    }
    .vch-podrska-pillar:last-child { border-bottom: none; }
}

/* ====================================================================== */
/* USLUGE HERO — engineering paper estetika sa SVG tehničkim nacrtom      */
/* (matica koja se step-rotira u ritmu ključa, kotne linije, paper grid). */
/* Source: design_handoff_usluge_hero/source/usluge-hero.html             */
/* ====================================================================== */
.uh {
    padding: 72px 0 90px;
    position: relative;
    overflow: hidden;
    background: var(--bg-paper);
    color: var(--fg-light-deep);
    --uh-cell: 28px;
    --uh-bgx: 0px;
    --uh-bgy: 0px;
}
/* Projektni papir grid — JS poravnava sa SVG nacrtom (vidi inline JS u usluge.php) */
.uh::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(26,26,24,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,26,24,0.025) 1px, transparent 1px);
    background-size: var(--uh-cell) var(--uh-cell);
    background-position: var(--uh-bgx) var(--uh-bgy);
    pointer-events: none;
    z-index: 0;
}

/* Corner markeri — engineering paper convention */
.uh-corner {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--fg-light-haze);
    z-index: 2;
    pointer-events: none;
    text-transform: uppercase;
    line-height: 1.6;
}
.uh-corner.tl { top: 16px; left: 28px; }
.uh-corner.tr { top: 16px; right: 28px; text-align: right; }
.uh-corner.bl { bottom: 16px; left: 28px; }
.uh-corner.br { bottom: 16px; right: 28px; text-align: right; }
.uh-corner.bl::before,
.uh-corner.br::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--fg-light-haze);
    opacity: 0.5;
    margin-bottom: 6px;
}
.uh-corner.br::before { margin-left: auto; }
.uh-corner .v { color: var(--brand); }

/* Inner grid — copy levo, nacrt desno */
.uh-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* LEVI STUB — copy */
.uh-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}
.uh-kicker .nut { width: 14px; height: 14px; color: var(--brand); }
.uh-kicker .sep { color: var(--fg-light-haze); }
.uh h1 {
    font-family: var(--font-sans);
    font-size: clamp(44px, 5.4vw, 72px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 22px;
    text-wrap: balance;
    max-width: 13ch;
    color: var(--fg-light-deep);
}
.uh h1 em {
    font-style: normal;
    color: var(--brand);
}
.uh-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--fg-light-mid);
    max-width: 46ch;
    margin: 0 0 32px;
}
.uh-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.uh-cta .primary {
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    padding: 14px 22px;
    font-size: 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.uh-cta .primary:hover { background: var(--brand-hover); color: #fff; }
.uh-cta .ghost {
    color: var(--fg-light-deep);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--fg-light-deep);
    padding: 6px 0;
}
.uh-cta .ghost:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* DESNI STUB — tehnički nacrt sa animiranom maticom */
.uh-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    width: 100%;
    justify-self: end;
}
.uh-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.uh-stage .lbl {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-light-haze);
}
.uh-stage .lbl-tl { top: 0; left: 0; }
.uh-stage .lbl-tr { top: 0; right: 0; text-align: right; }
.uh-stage .lbl-br { bottom: 0; right: 0; text-align: right; color: var(--brand); }
.uh-stage .lbl strong { color: var(--fg-light-deep); font-weight: 500; }

/* L-uglovi oko stage-a */
.uh-stage .corners::before,
.uh-stage .corners::after,
.uh-stage .corners > i::before,
.uh-stage .corners > i::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--border-light);
}
.uh-stage .corners::before { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.uh-stage .corners::after  { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.uh-stage .corners > i::before { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.uh-stage .corners > i::after  { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }

/* ANIMACIJA — step rotacija matice (6 koraka po 60° = pun krug, 11s ukupno) */
.uh-svg-nut {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: uh-nut-tighten 11s ease-in-out infinite;
}
@keyframes uh-nut-tighten {
    0%      { transform: rotate(0deg); }
    4.1%    { transform: rotate(60deg); }
    16.66%  { transform: rotate(60deg); }
    20.76%  { transform: rotate(120deg); }
    33.33%  { transform: rotate(120deg); }
    37.43%  { transform: rotate(180deg); }
    50%     { transform: rotate(180deg); }
    54.1%   { transform: rotate(240deg); }
    66.66%  { transform: rotate(240deg); }
    70.76%  { transform: rotate(300deg); }
    83.33%  { transform: rotate(300deg); }
    87.43%  { transform: rotate(360deg); }
    100%    { transform: rotate(360deg); }
}

/* Pulse — "primio sam pritisak" posle svakog stezanja */
.uh-svg-pulse {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    opacity: 0;
    animation: uh-pulse 11s ease-out infinite;
}
@keyframes uh-pulse {
    0%, 4.1%       { opacity: 0; transform: scale(1); }
    5%             { opacity: 0.45; transform: scale(1); }
    8%             { opacity: 0; transform: scale(1.06); }
    16.66%, 20.76% { opacity: 0; transform: scale(1); }
    21.66%         { opacity: 0.45; transform: scale(1); }
    24.66%         { opacity: 0; transform: scale(1.06); }
    33.33%, 37.43% { opacity: 0; transform: scale(1); }
    38.43%         { opacity: 0.45; transform: scale(1); }
    41.43%         { opacity: 0; transform: scale(1.06); }
    50%, 54.1%     { opacity: 0; transform: scale(1); }
    55.1%          { opacity: 0.45; transform: scale(1); }
    58.1%          { opacity: 0; transform: scale(1.06); }
    66.66%, 70.76% { opacity: 0; transform: scale(1); }
    71.76%         { opacity: 0.45; transform: scale(1); }
    74.76%         { opacity: 0; transform: scale(1.06); }
    83.33%, 87.43% { opacity: 0; transform: scale(1); }
    88.43%         { opacity: 0.45; transform: scale(1); }
    91.43%         { opacity: 0; transform: scale(1.06); }
    100%           { opacity: 0; transform: scale(1); }
}
/* Cursor pokazuje da je matica draggable; tokom drag-a je grabbing.
   Hover-pause je uklonjen — drag preuzima interakciju (mousedown automatski
   isključuje CSS animaciju i prepušta rotaciju korisniku). Puls neprekidno
   radi i ne staje slučajno kad mišem prelaziš preko stage-a. */
.uh-stage { cursor: grab; }
.uh-stage.is-manual,
.uh-stage.is-manual .uh-svg-nut,
.uh-stage.is-manual .uh-svg-pulse { cursor: grabbing; }
.uh-stage.is-manual .uh-svg-nut,
.uh-stage.is-manual .uh-svg-pulse { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .uh-svg-nut, .uh-svg-pulse { animation: none; }
    .uh-svg-nut { transform: rotate(30deg); }
}

/* Legenda ispod nacrta */
.uh-legend {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-light-mid);
}
.uh-legend-item {
    display: inline-grid;
    grid-template-columns: 14px 1fr auto;
    gap: 10px;
    align-items: center;
}
.uh-legend-swatch {
    width: 14px;
    height: 0;
    border-top: 1.5px solid currentColor;
    position: relative;
}
.uh-legend-swatch::after {
    content: '';
    position: absolute;
    right: -1px; top: -3px;
    border-left: 5px solid currentColor;
    border-top: 2.5px solid transparent;
    border-bottom: 2.5px solid transparent;
}
.uh-legend .swatch-rot { color: #1a1a18; }
.uh-legend .swatch-force { color: var(--brand); }
.uh-legend-val { color: var(--fg-light-haze); letter-spacing: 0.08em; }

/* EPIGRAF traka ispod hero-a */
.uh-epi-band {
    background: var(--bg-dark);
    color: var(--fg-dark-strong);
    padding: 64px 0;
    border-top: 1px solid rgba(155,25,25,0.45);
    border-bottom: 1px solid var(--bg-dark-rule);
    position: relative;
    overflow: hidden;
}
.uh-epi-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 87' fill='none' stroke='%239b1919' stroke-width='1' stroke-linejoin='round'><polygon points='50,2 96,28 96,80 50,106 4,80 4,28'/></svg>");
    background-size: 110px 96px;
    opacity: 0.08;
    -webkit-mask-image: radial-gradient(ellipse at 20% 50%, black 5%, transparent 60%);
            mask-image: radial-gradient(ellipse at 20% 50%, black 5%, transparent 60%);
    pointer-events: none;
}
.uh-epi {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
}
.uh-epi-side {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dark-faint);
    line-height: 1.7;
}
.uh-epi-side strong {
    color: var(--brand-light);
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}
.uh-epi-body {
    max-width: 64ch;
    border-left: 2px solid var(--brand-light);
    padding-left: 24px;
}
.uh-epi-body p {
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
    color: var(--fg-dark-strong);
    text-wrap: balance;
    font-weight: 500;
}
.uh-epi-body p em {
    font-style: normal;
    color: var(--brand-light);
}
.uh-epi-body .foot {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--fg-dark-soft);
    line-height: 1.6;
    /* max-width uklonjen — koristi celu širinu parent-a (.uh-epi-body 64ch
       u 24px body font-u = ~768px). Foot je u mono 12px, pa 145 chars copy
       lepo staje u 2 reda umesto u 3. */
    text-wrap: balance;
}

/* Responsive — Usluge hero */
/* Rotacioni dugmići nacrta — vidljivi samo na mobilnom (na dodir je drag
   isključen, pa rotacija ide korak-po-korak preko dugmića). Stil: engineering,
   svetla strana, brand donji rub + brand glif. */
.uh-rotctl { display: none; }
.uh-rotbtn {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-light-deep);
    background: var(--bg-paper);
    border: 1px solid var(--border-light);
    border-bottom: 2px solid var(--brand);
    padding: 9px 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.uh-rotbtn:active { background: var(--brand); color: #fff; border-color: var(--brand); }
.uh-rotbtn-gl { color: var(--brand); font-size: 14px; line-height: 1; }
.uh-rotbtn:active .uh-rotbtn-gl { color: #fff; }

@media (max-width: 880px) {
    .uh-rotctl { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
    .uh-inner { grid-template-columns: 1fr; gap: 40px; }
    .uh-stage { max-width: 360px; justify-self: start; }
    .uh-epi { grid-template-columns: 1fr; gap: 20px; }

    /* Donji blok-markeri (.uh-corner.bl/br — prognoza Mionica/Beograd) ostaju:
       sad kad legenda pada u flow, oni sede ISPOD nje, po uglovima, i ZATVARAJU
       blok (engineering-paper konvencija — 4 ugla). Razmak daje .uh padding dole. */

    /* Stage corner labele (DIM M12·22mm gore-levo, REV 2026.01 gore-desno)
       sede preko crteža na uskom ekranu — a „REV 2026.01" se i duplira sa
       gornjim blok-markerom. Sakrij na mobilnom; SVG zadržava svoje interne
       oznake (DIN 934, kote, uglovi). */
    .uh-stage .lbl { display: none; }

    /* Legenda (.uh-legend, 4 stavke) je UNUTAR .uh-stage, posle SVG-a. Stage je
       aspect-ratio 1/1 sa SVG height:100% → legenda prelije van kvadrata
       (overflow:visible), ne računa se u flow, pa dodiruje sledeći blok i seče
       se. Na mobilnom: skini aspect-ratio sa stage-a, daj SVG-u kvadrat preko
       sopstvenog aspect-ratio → legenda pada u normalan flow ISPOD crteža. */
    .uh-stage { aspect-ratio: auto; }
    .uh-stage > svg { height: auto; aspect-ratio: 1 / 1; }
    .uh-legend { margin-top: 40px; margin-bottom: 4px; }
    /* dovoljno dna da donji ugaoni markeri (bottom:16px) sednu ISPOD legende */
    .uh { padding-bottom: 88px; }
}

/* ====================================================================== */
/* USLUGE — "Odakle počinjemo" blok (drugi list iz iste tehničke sveske). */
/* Hladniji paper bg (--bg-paper-cool), ređa mreža (40px), 3 orijentira    */
/* sa watermark brojevima i tehničkim simbolima. Kartica 03 ima crvenu     */
/* levu liniju (razlog zbog kog ljudi zovu, ne dekoracija).                */
/* Source: design_handoff_usluge_odakle_pocinjemo/                        */
/* ====================================================================== */
.uo {
    background: var(--bg-paper-cool);
    padding: 110px 0 120px;
    position: relative;
    overflow: hidden;
    color: var(--fg-light-deep);
}
.uo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(26,26,24,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,26,24,0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Engineering corner markeri (kontinuitet sa hero blokom) */
.uo-corner {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--fg-light-haze);
    z-index: 2;
    pointer-events: none;
    text-transform: uppercase;
    line-height: 1.6;
}
.uo-corner.tl { top: 16px; left: 28px; }
.uo-corner.tr { top: 16px; right: 28px; text-align: right; }
/* donji markeri — zatvaraju blok (4 ugla, kao hero) */
.uo-corner.bl { bottom: 16px; left: 28px; }
.uo-corner.br { bottom: 16px; right: 28px; text-align: right; }

.uo-inner { position: relative; z-index: 1; }

/* HEAD — kicker + naslov + intro */
.uo-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.uo-kicker .sep { color: var(--fg-light-haze); }

.uo-head {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 80px;
    align-items: end;
    padding-bottom: 36px;
}
.uo-title {
    font-family: var(--font-sans);
    font-size: clamp(36px, 4.4vw, 60px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fg-light-deep);
    margin: 0;
    max-width: 18ch;
    text-wrap: balance;
}
.uo-title em {
    font-style: normal;
    color: var(--brand);
    font-weight: 600;
}
.uo-intro {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--fg-light-mid);
    margin: 0;
    max-width: 50ch;
    text-wrap: pretty;
}
.uo-intro em {
    font-style: normal;
    color: var(--fg-light-deep);
    font-weight: 500;
}

/* Dimension-line razdelnik (umesto obične crvene linije) */
.uo-rule {
    width: 100%;
    height: 28px;
    margin: 0;
    display: block;
    color: var(--fg-light-deep);
}
.uo-rule .red { stroke: var(--brand); }

/* KARTICE */
.uo-grid {
    list-style: none;
    margin: 0;
    padding: 56px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.uo-card {
    position: relative;
    padding: 36px 36px 40px;
    /* Border-right hairline za vizuelnu razdvojenost.
       Engineering paper ton (#141412 sa alfom) — distinct ali suptilan,
       da ne kompetira sa brand crvenom levom linijom kartice 03 (.is-key)
       koja signalizira "ishod" (razlog zašto ljudi zovu). */
    border-right: 1px solid rgba(20, 20, 18, 0.35);
    min-height: 240px;
}
.uo-card:first-child { padding-left: 0; }
.uo-card:last-child  { border-right: none; padding-right: 0; }

/* Watermark broj — outline tipografija u tehničkom tonu */
.uo-wm {
    position: absolute;
    top: 18px;
    right: 14px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 110px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--border-light);
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.uo-card:last-child .uo-wm { right: 0; }

/* Tehnički simbol levo gore — vokabular iz hero nacrta */
.uo-mark {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 28px;
    color: var(--fg-light-deep);
    margin-bottom: 22px;
}
.uo-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.uo-mark .red { stroke: var(--brand); }

.uo-num {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--brand);
    margin-bottom: 14px;
    text-transform: uppercase;
}
.uo-num::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: var(--brand);
    vertical-align: 4px;
    margin-right: 8px;
}
.uo-h {
    position: relative;
    z-index: 1;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--fg-light-deep);
    margin: 0 0 12px;
    max-width: 18ch;
    text-wrap: balance;
}
.uo-p {
    position: relative;
    z-index: 1;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-light-mid);
    margin: 0;
    max-width: 32ch;
    text-wrap: pretty;
}
.uo-p em {
    font-style: normal;
    color: var(--fg-light-deep);
    font-weight: 500;
}

/* Treća kartica — bez sopstvenog border-left-a. Razlog: linija 02|03
   već dolazi iz card 02 border-right. Ako i kartica 03 ima border-left,
   dve 1px linije se stack-uju (kompoziraju ~0.58 alfa) → debljina razlika
   sa 01|02 koji ima samo jednu. P15.8f: brand red sklonjen, P15.8g: i
   border-left override sklonjen zbog stack-a. */
.uo-card.is-key {
    padding-left: 28px;
    margin-left: 0;
}

/* Engineering fusnota */
.uo-foot {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fg-light-haze);
    text-transform: uppercase;
}
.uo-foot strong {
    color: var(--fg-light-deep);
    font-weight: 500;
    letter-spacing: 0.16em;
}
.uo-foot .pin { color: var(--brand); }

/* Responsive — odakle počinjemo */
@media (max-width: 880px) {
    .uo { padding: 72px 0 80px; }
    .uo-head { grid-template-columns: 1fr; gap: 24px; }
    .uo-grid { grid-template-columns: 1fr; padding-top: 36px; }
    .uo-card {
        padding: 32px 0 28px;
        border-right: none;
        border-bottom: 1px solid var(--border-light-soft);
        min-height: 0;
    }
    .uo-card:first-child { padding-top: 8px; }
    .uo-card:last-child  { padding-bottom: 0; border-bottom: none; }
    .uo-card.is-key { padding-left: 18px; }
    .uo-wm { font-size: 80px; top: 8px; }
    .uo-foot { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ====================================================================== */
/* USLUGE — "Pet oblasti, jedno saće" blok (blueprint negativ).          */
/* Tamna indigo (#0e1019) podloga, light cool stroke linije, hex ćelije   */
/* outline-only, crvene veze između gornji/donji red (semantika).        */
/* Lokalni tokeni (--po-*) scope-ovani na .po, ne u :root.               */
/* Source: design_handoff_usluge_pet_oblasti/                            */
/* ====================================================================== */
.po {
    scroll-margin-top: 80px; /* sticky header offset — CTA "Sve oblasti rada" sa home-a vodi na #cp-usluge-areas */
    /* Lokalni tokeni — blueprint dark indigo paleta */
    --po-bg:         #0e1019;
    --po-grid:       rgba(180, 200, 240, 0.04);
    --po-line:       #c0c8df;
    --po-line-faint: #6a738d;
    --po-line-haze:  #4a526a;
    --po-fg:         #e8eaf0;
    --po-fg-mid:     #a8aec0;
    --po-fg-haze:    #6a738d;

    background: var(--po-bg);
    padding: 120px 0 140px;
    position: relative;
    overflow: hidden;
    color: var(--po-fg);
}
.po::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--po-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--po-grid) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* Engineering corner markeri */
.po-corner {
    position: absolute;
    top: 16px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--po-fg-haze);
    line-height: 1.6;
    z-index: 2;
    pointer-events: none;
    margin: 0;
}
.po-corner.tl { left: 28px; }
.po-corner.tr { right: 28px; text-align: right; }
/* donji markeri — zatvaraju blok (po-corner baza ima top:16px → override) */
.po-corner.bl { top: auto; bottom: 16px; left: 28px; }
.po-corner.br { top: auto; bottom: 16px; right: 28px; text-align: right; }

.po-inner { position: relative; z-index: 1; }

/* HEAD — kicker + naslov + intro */
.po-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-light);
    margin: 0 0 22px;
    display: flex;
    gap: 8px;
}
.po-kicker .sep { color: var(--po-line-haze); }

.po-head {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: end;
    padding-bottom: 56px;
}
.po-title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--po-fg);
    margin: 0;
    max-width: 16ch;
    text-wrap: balance;
}
.po-title em {
    font-style: normal;
    color: var(--brand-light);
    font-weight: 600;
}
.po-intro {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--po-fg-mid);
    margin: 0;
    max-width: 50ch;
}
.po-intro em {
    font-style: normal;
    color: var(--po-fg);
    font-weight: 500;
}

/* SAĆE — 5 hex ćelija u tesselaciji (3 gore, 2 dole) */
.po-comb {
    position: relative;
    width: 100%;
    /* aspect-ratio property (umesto starog padding-bottom hack-a) — daje
       elementu stvarnu height vrednost, pa % na top/left u .po-cell rade ispravno. */
    aspect-ratio: 1100 / 720;
    margin: 12px 0 0;
}
.po-comb svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Tekst ćelije sedi u SVG <foreignObject> (koordinate u SVG sistemu) — DIV
   tako popunjava 200×100 boks, centrirano u ćeliji na osnovu x/y atributa. */
.po-cell {
    width: 100%;
    height: 100%;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.po-num {
    font-family: var(--font-mono);
    font-size: clamp(8px, 0.8vw, 10px);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-light);
    margin: 0;
    line-height: 1;
}
.po-h {
    font-family: var(--font-sans);
    font-size: clamp(15px, 1.55vw, 20px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--po-fg);
    margin: 0;
    text-wrap: balance;
    max-width: 12ch;
}
.po-scope {
    font-family: var(--font-sans);
    font-size: clamp(10.5px, 0.95vw, 12px);
    line-height: 1.35;
    color: var(--po-fg-mid);
    margin: 0;
    text-wrap: balance;
    max-width: 18ch;
}

/* Engineering footnote */
.po-foot {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid var(--po-line-haze);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--po-fg-haze);
}
.po-foot strong {
    color: var(--po-fg);
    font-weight: 500;
    letter-spacing: inherit;
}
.po-foot .pin { color: var(--brand-light); }
.po-foot .po-call {
    color: var(--po-fg);
    text-decoration: none;
    border-bottom: 1px solid var(--brand-light);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.po-foot .po-call:hover { color: var(--brand-light); }

/* Mobilni: uspravljeno saće (.po-comb-v) — desktop .po-comb se sakriva */
.po-comb-v { display: none; }
/* SVG saća se skalira (~0.65×) pa clamp font ispada sitan — krupniji font
   baš za uspravno saće, da se lepo čita u svakoj ćeliji. (renderuje se ≤640) */
.po-comb-v .po-cell { gap: 9px; }
.po-comb-v .po-num { font-size: 13px; }
.po-comb-v .po-h { font-size: 27px; max-width: 11ch; }
.po-comb-v .po-scope { font-size: 17px; line-height: 1.32; max-width: 17ch; }
@media (max-width: 980px) {
    .po-head { grid-template-columns: 1fr; gap: 24px; }
    .po-foot { flex-direction: column; gap: 12px; align-items: flex-start; }
    .po-comb { aspect-ratio: 1100 / 920; }
}
@media (max-width: 640px) {
    .po-comb { display: none; }
    .po-comb-v { display: block; margin: 12px 0 0; }
    .po-comb-v svg { width: 100%; height: auto; display: block; }
}

/* ====================================================================== */
/* RESPONSIVNI BREAKPOINT-I                                                */
/* JSX dizajniran na 1380px referencu; tablet/mobile fallback ovde        */
/* dodajemo (HANDOFF Sekcija 9 ostavila otvoreno).                        */
/* ====================================================================== */

/* Tablet — do 1024px */
@media (max-width: 1024px) {
    .vch-root .container { padding: 0 24px; }

    .vch-honeycomb { display: none; }
    .vch-rhex { display: none; }

    .vch-header-inner { height: 96px; gap: 32px; }
    .vch-nav { gap: 22px; }
    .vch-brand svg { height: 54px; }

    .vch-hero { padding: 72px 0 56px; }
    .vch-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .vch-hero h1 { font-size: clamp(36px, 6vw, 56px); max-width: none; }

    .vch-news-inner { grid-template-columns: 1fr; gap: 12px; }
    .vch-news-track { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vch-news-all { justify-self: end; }

    .vch-conv { padding: 64px 0 72px; }
    .vch-conv-head { grid-template-columns: 1fr; gap: 32px; }
    .vch-conv-hex { justify-self: start; }
    .vch-conv-grid { grid-template-columns: 1fr; }
    .vch-conv-card { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--bg-dark-rule); }
    .vch-conv-card:last-child { border-bottom: 0; }
    .vch-conv-card:nth-child(n+2) { padding-left: 0; }
    .vch-conv-cta { grid-template-columns: 1fr; align-items: start; gap: 24px; }
    .vch-conv-cta-block { align-items: flex-start; }
    .vch-conv-secondary { justify-content: flex-start; }

    .vch-resources { padding: 72px 0; }
    .vch-section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
    .vch-rhead { grid-template-columns: 1fr; gap: 24px; }
    .vch-rhead-hex { justify-self: start; align-items: flex-start; }
    .vch-rhead-hex-meta { text-align: left; }
    .vch-rgrid { grid-template-columns: 1fr; border-left: 0; }
    .vch-rcard { border-right: 0; }

    .vch-isk { padding: 72px 0; }
    .vch-isk-head { grid-template-columns: 1fr; gap: 32px; }
    .vch-isk-hex { justify-self: start; }
    .vch-isk-stats { grid-template-columns: repeat(2, 1fr); padding: 28px 0; margin-top: 36px; }
    .vch-isk-stat { padding: 0 24px; }
    .vch-isk-stat:nth-child(2) { padding-right: 0; border-right: 0; }
    .vch-isk-stat:nth-child(3) { padding-left: 0; }
    .vch-isk-body { grid-template-columns: 1fr; gap: 32px; padding: 36px 0; }
    .vch-isk-cta { grid-template-columns: 1fr; gap: 24px; align-items: start; }
    .vch-isk-cta-block { align-items: flex-start; text-align: left; }
}

/* Mobile — do 640px */
@media (max-width: 640px) {
    .vch-root .container { padding: 0 16px; }

    .vch-top-inner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 0; }
    .vch-top-l, .vch-top-r { gap: 14px; flex-wrap: wrap; }
    /* Sakri tagline + separator na mobilu da traka ne pređe u dva reda */
    .vch-top-l .sep, .vch-top-l span:last-child { display: none; }

    .vch-header-inner { height: auto; padding: 16px 0; }
    .vch-brand svg { height: 44px; }
    .vch-brand-name { font-size: 18px; }
    .vch-nav { display: none; }

    .vch-hero { padding: 48px 0 40px; }
    .vch-hero h1 { font-size: clamp(30px, 8vw, 40px); }
    .vch-hero-sub { font-size: 17px; }
    .vch-hero-cta { gap: 10px; }
    .vch-btn { padding: 10px 14px; font-size: 13px; }

    .vch-news { padding: 12px 0; }
    .vch-news-inner { gap: 8px; }

    .vch-conv-head h2 { font-size: clamp(28px, 7vw, 38px); max-width: none; }
    .vch-conv-card h3 { font-size: 19px; }
    .vch-conv-phone { font-size: clamp(28px, 7vw, 36px); }

    .vch-isk-head h2 { font-size: clamp(28px, 7vw, 38px); max-width: none; }
    .vch-isk-phone { font-size: 28px; }
    .vch-isk-stats { grid-template-columns: 1fr 1fr; }
    .vch-isk-stat-num { font-size: clamp(30px, 9vw, 44px); }
    .vch-isk-refs-grid { grid-template-columns: 1fr; }

    .vch-section-head h2 { font-size: clamp(26px, 7vw, 34px); }
    .vch-rcard h3 { font-size: 20px; }
    .vch-rstamp { gap: 14px; font-size: 11px; }
}

/* ====================================================================== */
/* OBUKE — Hero (graphite, kicker, manifest, kalendar 12 ćelija, ledger)   */
/* P16.0 statika — polazi sa screenshot reference; totem dolazi posle.     */
/* ====================================================================== */

/* Bez crvene hairline između header-a i kosmos hero-a — graphite header
   i graphite Hero su iste pozadine i vizuelno teku jedan u drugi. Crvena
   linija unutar header-a (.vch-top border-bottom) zadržava svoju ulogu
   kao razdelnik info trake. */

/* PRAVI UZROK BELE TRAKE: .vch-header-sentinel je 1px element u flow-u sa
   `visibility: hidden` (mora ostati u flow-u jer je IntersectionObserver
   target za sticky compact header). Sa transparent bg-om, kroz njega se vidi
   body bg (--bg-light = #f4f4f2 svetlo) → 1px svetli liniju ispod headera.
   Fix: na /obuke/ obojimo sentinel u graphite i vratimo visibility — postaje
   1px graphite pixel koji se sliva u header/Hero, neprimetan, IO i dalje radi. */
body.page-obuke .vch-header-sentinel {
    background: var(--bg-dark);
    visibility: visible;
}

/* ──────────────────────────────────────────────────────────────────────────
   /obuke/ — Hero KOSMOS
   Port iz Razvoj/V3/Obuke/design_handoff_obuke_hero/obuke-kosmos-prototip-v3.html.
   Zamenjuje P16.1 TOTEM hero. Sve scoped pod .cp-obuke-hero* — namerna dark
   zona sa cosmos scenom: sunce + 10 orbita + planete + signali, voyager
   sondica, 3 daleka sistema, meteori, plate chrome u uglovima, mission clock.

   Lokalni tokeni — cosmos paleta (gold #ffd9a8, krem #ece9e3) ne pripada
   globalnom token setu sajta.
   ────────────────────────────────────────────────────────────────────────── */
.cp-obuke-hero {
    --gr-bg-deep:   #06060a;
    --gr-bg:        #08080c;
    --gr-fg:        #ece9e3;
    --gr-fg-mid:    #a7a49e;
    --gr-fg-haze:   #6a6760;
    --gr-fg-faint:  #3e3c38;
    --gr-stamp:     #ffd9a8;
    --ob-brand:     var(--brand);          /* #9b1919 — token reference */
    --ob-brand-hi:  var(--brand-light);    /* #c0392b — stamp/pop, za H1 em statičan accent */

    position: relative;
    width: 100%;
    /* overflow: visible + clip-path: inset(0 0 -240px 0) — cosmic afterglow.
       Orbite bleed-uju 240px ispod hero box-a (kroz transition band + gornji
       deo katalog-a). Mask-image na sam radar SVG (vidi .cp-obuke-hero__cosmos
       svg ispod) zatim agresivno fade-uje orbite pre nego što stignu do hex
       strip-a. Clip gore/levo/desno na ivici hero box-a — orbite NIKAD ne
       bleed-uju u header zonu. */
    overflow: visible;
    clip-path: inset(0 0 -240px 0);
    color: var(--gr-fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    /* Pun-bleed background — gradient se prostire do ivica viewport-a tako
       da na 4K/ultrawide ne ostaje vidljiv šav između 1800px design zone i
       body bg-a. Centar gradient-a (82%/65%) ostaje gde je bio na 1800px,
       jer je % računano u odnosu na sam hero element koji je sada širi. */
    background: radial-gradient(ellipse at 82% 65%, #0d0d14 0%, #08080c 55%, #06060a 100%);
    /* Aspect 3:1 sa min/max bounds. Na 2400px viewport: hero 600px tall,
       sa kosmos kompozicijom centriranom u 1800px frame-u, ali bg + zvezde
       teku do ivica viewport-a. */
    aspect-ratio: 3 / 1;
    min-height: 460px;
    max-height: 600px;
}
/* #04 Home hero (Designer): vrati honeycomb kao suptilan half-bleed motiv u
   donjem-desnom uglu (bio display:none ≤1024 → hero bio gola bela površina);
   ugaoni markeri kadriraju; kartica „Prvi korak" već sedi u hero bloku. */
@media (max-width: 720px) {
    /* Doc 06·C: Home = čista vizit-karta. Hex „polje" i ugaoni markeri van
       mobilnog hero-a (papir je čist); tekst startuje visoko, lede uži,
       CTA par vertikalan (palac dohvata). Hex „pečat" gore-desno traži
       svetlo-tema adaptaciju (Designer mock je tamni) — ostavljeno za pregled. */
    .vch-honeycomb { display: none; }
    .vch-hero-mark { display: none; }
    .vch-hero { padding: 28px 0 40px; }
    .vch-hero-grid { gap: 30px; }
    .vch-hero-sub { max-width: 320px; }
    .vch-hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        max-width: 300px;
    }
}

@media (max-width: 720px) {
    .cp-obuke-hero {
        /* 52/71 = 520/710, usklađeno sa mobilnim viewBox-om (obuke.php) da slice
           popuni blok bez kropovanja. P27.54: visina 680→710 (blok ~23px viši
           dole) da orbita „Rast" stane sa vazduhom do dividera (ne seče mu
           gornju liniju); markeri prate jer su bottom:14px od dna bloka. */
        aspect-ratio: 52 / 71;
        min-height: 0;
        max-height: none;   /* desktop max-height:600 ne važi na telefonu */
        /* KRITIČNO: desktop clip-path inset(0 0 -240px 0) (afterglow bleed)
           pravi prazan tamni nastavak ~240px ISPOD bloka na mobilnom → to je
           „crno polje". Ukloni ga na mobilnom; orbite ostaju u kadru (SVG
           cut-bleed clipPath ih drži). Blok se završava na svom dnu. */
        clip-path: none;
        /* Designer #02: radial glow iz re-centriranog radara (~50%/58%) puni
           prazan tamni prostor — signal kroz strukturu, ne text-shadow. */
        background: radial-gradient(ellipse at 50% 58%, rgba(155,25,25,0.13) 0%, #0a0a11 42%, #06060a 100%);
    }
    /* Dekorativne pločice (mono natpisi po uglovima) kolidiraju sa naslovom i
       „POGLEDAJTE TEME" linkom na uskom ekranu — sakrij ih. Kosmos i spill
       ostaju kao atmosferska pozadina; horizontalni bleed reže main overflow-x. */
    .cp-obuke-hero__plate-id,
    .cp-obuke-hero__plate-caption,
    .cp-obuke-hero__plate-foot,
    .cp-obuke-hero__plate-foot-left { display: none; }
    /* Denis: ceo tekstualni sloj (nadnaslov, naslov, podnaslov, CTA) spušten
       8px niže u bloku — fino balansira kompoziciju spram re-centriranog
       radara. translateY, ne menja layout/koliziju. */
    .cp-obuke-hero__text { transform: translateY(8px); }
    /* Denis: planete MORAJU imati imena (kao desktop). Vrati planet-label
       (ime + tag). Leader crtica je sad globalno sakrivena (i desktop — vidi
       dole). Signal tekst ostaje sakriven (pregusto preko paragrafa). Vidljive
       su samo planete u kadru (mobilni viewBox seče van-kadra). */
    /* Donji ugaoni markeri (P27.50): raniji bottom:8px override je postojao
       zbog clip bleed-a -240px (tamni blok vizuelno sezao ispod box-a). P27.48
       je taj bleed uklonio (clip-path:none) → blok se završava na svom dnu, pa
       8px gore vs 14px dole = vidljiva asimetrija (Denis). Override uklonjen →
       baza 14px važi i gore i dole, markeri simetrično kadriraju blok. */
}
/* Leader crtice (pulse→ime) — višak; uklonjene svuda (Denis: i desktop): i
   planet leader i signal (sektor) leader line. IMENA (pulsa i planeta) OSTAJU. */
.cp-obuke-hero__cosmos svg .planet-leader,
.cp-obuke-hero__cosmos #cp-cosmos-signals line { display: none; }

/* Frame: 1800px centrirana design zona u kojoj žive kosmos, plate-id/caption/
   foot i tekstualni sadržaj. Reg-marks i spillover star layer su VAN frame-a
   i prate viewport. */
.cp-obuke-hero__frame {
    position: relative;
    width: 100%;
    max-width: 1800px;
    height: 100%;
    margin: 0 auto;
    z-index: 1;
}

/* Spillover star layer — full-bleed SVG sa razređenim zvezdama van 1800px
   design zone. Sedi ISPOD frame-a (z 0) tako da glavni cosmos ostane vidljiv
   iznad. Bez animacija — čisto atmosferski sloj. */
.cp-obuke-hero__spill {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.cp-obuke-hero__spill svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Cosmos SVG sloj — sad živi unutar frame-a, ne treba mu max-width.
   overflow: visible da signali (radijalni talasi iz centra) mogu da prelaze
   1800px frame ivicu na širim ekranima — kontinuirano teku u spillover zonu
   do viewport ivice gde ih section overflow:hidden konačno kapuje. */
.cp-obuke-hero__cosmos {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}
.cp-obuke-hero__cosmos svg {
    width: 100%;
    height: 100%;
    display: block;
    /* overflow: visible — SVG default je hidden (UA stylesheet). Signali sa
       r > ~450 (u viewBox koord) bi inače bili kapnuti na frame ivici. */
    overflow: visible;
    /* Bez shape-rendering/text-rendering: geometricPrecision — to forsira
       sporu high-precision geometriju. Default auto je UA-optimized i
       merljivo brži; visual razlika je zanemarljiva za ovaj kosmos. */

    /* Mask-image uklonjen (iteracija 3) — pravi regresiju: default mask-size
       100% 100% poklapa SVG bbox (= max-width frame 1800px), pa signali koji
       prirodno prelivaju preko 1800px ka viewport ivici su MASKIRANI (clip
       vertikalnom linijom na desnoj strani). Plus mask je suviše agresivno
       gušio vertikalni bleed. Prirodan opacity fade signala (animiran
       0 → 0.7 → 0 kroz spawnSignal life u obuke-kosmos.js) je dovoljan da
       afterglow prirodno slabi. Cosmic afterglow vizuelno = signali koji
       prelaze hero ivicu sa naturalnim opacity decay-em + clip-path
       inset(0 0 -240px 0) na hero koji dozvoljava vertikalni bleed. */
}
.cp-obuke-hero__cosmos svg .planet { will-change: transform; pointer-events: auto; }

/* Zvezde — natural night-sky twinkle. Samo opacity oscilacija (cheap, GPU
   composite-uje opacity bez paint troška). Pre-refaktor je imao i scale
   transform na ~33 zvezde paralelno — to je smaranje compositor-a sa par
   desetina paralelnih scale layer-a; vraćeno na opacity-only. Selector
   pokriva i glavni kosmos i spillover sloj. */
@keyframes cp-cosmos-twinkle {
    0%, 100% { opacity: 0.28; }
    50%      { opacity: 0.95; }
}
.cp-obuke-hero svg .twinkle {
    animation: cp-cosmos-twinkle ease-in-out infinite;
}
/* Sparkle rays — N-ortogonalna potez (varijabilan po zvezdi: 2/4/6/8 zraka,
   random inicijalni ugao) na peak-u opacity ciklusa. Kraći stroke-opacity
   window (32-68%) znači rays su skriveni najveći deo cikulsa i "puknu" samo
   dok je telo zvezde na vrhu — starlight sparkle, ne stalan krst.

   Rotation: tokom peak-a, zraci se blago zavrte oko centra (--twinkle-rot
   custom property iz JS-a, ±6 do ±20°). Sa varijabilnim brojem zraka,
   inicijalnim uglom i smerom/jačinom rotacije, svaka sparkle epizoda izgleda
   različito — ne mehanički plusić.

   stroke-opacity (ne opacity) jer body koristi fill="currentColor" i ne sme
   da bude dim-ovan zajedno sa rays-ima. transform-origin: 0 0 / transform-box:
   view-box — rotacija ide oko (0,0) u SVG user koordinatama, što je geometrijski
   centar krsta zraka. */
@keyframes cp-cosmos-twinkle-rays {
    0%, 100% { stroke-opacity: 0;    transform: rotate(0deg); }
    32%      { stroke-opacity: 0; }
    50%      { stroke-opacity: 0.85; transform: rotate(var(--twinkle-rot, 12deg)); }
    68%      { stroke-opacity: 0; }
}
.cp-obuke-hero svg .twinkle-rays {
    stroke-opacity: 0;
    /* fill-box + center: origin je centar fill bbox-a zraka. Zraci su
       konstruisani simetrično oko (0,0) u path coords (vidi obuke-kosmos.js),
       pa je fill bbox center = path origin = centar krsta. Time rotacija
       ide oko geometrijskog centra sparkle-a, ne oko viewBox-a. */
    transform-box: fill-box;
    transform-origin: center;
    animation: cp-cosmos-twinkle-rays ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .cp-obuke-hero svg .twinkle      { animation: none; opacity: 0.5; }
    .cp-obuke-hero svg .twinkle-rays { animation: none; stroke-opacity: 0; }
}

/* Registration marks — direktna deca section-a (van frame-a), anchored na
   uglove viewport-a. Time markiraju ceo blok bez obzira na rezoluciju. */
.cp-obuke-hero__reg {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--gr-fg-faint);
    border-style: solid;
    border-width: 0;
    z-index: 3;
    pointer-events: none;
}
.cp-obuke-hero__reg--tl { top: 14px;    left: 14px;  border-top-width: 1px;    border-left-width: 1px; }
.cp-obuke-hero__reg--tr { top: 14px;    right: 14px; border-top-width: 1px;    border-right-width: 1px; }
.cp-obuke-hero__reg--bl { bottom: 14px; left: 14px;  border-bottom-width: 1px; border-left-width: 1px; }
.cp-obuke-hero__reg--br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }

.cp-obuke-hero__plate-id,
.cp-obuke-hero__plate-caption,
.cp-obuke-hero__plate-foot,
.cp-obuke-hero__plate-foot-left {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gr-fg-haze);
}
.cp-obuke-hero__plate-id        { top: 24px;    left: 60px;  }
.cp-obuke-hero__plate-caption   { top: 24px;    right: 60px; text-align: right; }
.cp-obuke-hero__plate-foot      { bottom: 24px; right: 60px; text-align: right; }
.cp-obuke-hero__plate-foot-left { bottom: 24px; left:  60px; text-align: left;  }
.cp-obuke-hero__plate-id b,
.cp-obuke-hero__plate-caption b,
.cp-obuke-hero__plate-foot-left b { color: var(--gr-stamp); font-weight: 500; }
.cp-obuke-hero__plate-id .row,
.cp-obuke-hero__plate-caption .row,
.cp-obuke-hero__plate-foot .row,
.cp-obuke-hero__plate-foot-left .row { display: block; }
.cp-obuke-hero__plate-id .meta,
.cp-obuke-hero__plate-caption .meta,
.cp-obuke-hero__plate-foot-left .meta { color: var(--gr-fg-faint); }
/* Quote ostaje u istom chrome registru kao ostali plate-ovi (mono uppercase
   --gr-fg-haze) — citat se ne ističe bojom ili fontom, samo pozicijom i
   sadržajem. max-width: 360px da uppercase + letter-spacing 0.18em ne iscuri
   preko viewport-a, već wrap-uje u 3 reda. */
/* Desktop (≥1101): citat + potpis u JEDNOJ liniji pri dnu (nowrap, .row
   inline). Time citat postaje tanka traka uz samo dno — više ne ulazi pod
   CTA dugme na sub-FHD širinama (3-redni blok je rastao naviše u CTA zonu).
   Na ≤1100 se vraća višeredni blok (vidi @media max-width:1100px niže). */
.cp-obuke-hero__plate-foot-left {
    max-width: none;
    white-space: nowrap;
}
.cp-obuke-hero__plate-foot-left .row { display: inline; }
.cp-obuke-hero__plate-caption .sun-mini {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -3px;
    margin: 0 4px;
}
.cp-obuke-hero__plate-foot .frame-num {
    color: var(--gr-fg-mid);
    font-variant-numeric: tabular-nums;
}
.cp-obuke-hero__plate-foot .scale {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--gr-fg-faint);
}
.cp-obuke-hero__plate-foot .scale .bar {
    display: inline-block;
    width: 64px;
    border-top: 1px solid var(--gr-fg-faint);
    height: 1px;
}

/* Tekstualni sloj — poravnat sa levom ivicom container-wide sadržaja, ne sa
   frame-om. Cilj: H1 počinje na istoj X koordinati kao logo iznad i
   `Kome je namenjeno` ispod. Formula: content-edge = (viewport-1320)/2 + 48
   (container-wide max 1320, padding 48). Hero padding-left = content-edge
   minus frame-left-edge. Frame is max 1800 centered. Na >=1800 daje 288px
   (stabilno); na 1100..1800 scaling se prirodno (frame full-width, padding
   prati container math). */
.cp-obuke-hero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding-top: 0;
    padding-right: 60px;
    padding-bottom: 0;
    padding-left: calc(max(48px, (100vw - 1224px) / 2) - max(0px, (100vw - 1800px) / 2));
    pointer-events: none;
}
.cp-obuke-hero__content a,
.cp-obuke-hero__content button { pointer-events: auto; }
.cp-obuke-hero__text { max-width: 560px; grid-column: 1; }

.cp-obuke-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gr-fg-haze);
    margin: 0 0 22px;
}
.cp-obuke-hero__eyebrow .dot {
    width: 5px;
    height: 5px;
    background: var(--gr-stamp);
    border-radius: 50%;
    flex: 0 0 auto;
}
.cp-obuke-hero__eyebrow b {
    /* Soft gold — proverb je ambijentalan, ne hero element. Smanjena alpha
       drži zlatni ton (vezuje se za centralni sistem u kosmosu) bez
       dominacije nad H1 naslovom. */
    color: rgba(255, 217, 168, 0.55);
    font-weight: 500;
    letter-spacing: 0.22em;
}

.cp-obuke-hero__title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(38px, 3.8vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.026em;
    color: var(--gr-fg);
    margin: 0 0 18px;
    max-width: 14ch;
    text-wrap: balance;
}
.cp-obuke-hero__title em {
    font-style: normal;
    color: var(--ob-brand-hi);
    font-weight: 600;
}

.cp-obuke-hero__sub {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gr-fg-mid);
    margin: 0 0 26px;
    max-width: 46ch;
}

.cp-obuke-hero__actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.cp-obuke-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid var(--ob-brand);
    background: var(--ob-brand);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.cp-obuke-hero__btn:hover,
.cp-obuke-hero__btn:focus {
    /* Hover ide dublji bordo (--brand-hover #7d1414), ne svetliji — brand
       sistem govori: pritisak/fokus = tamnije. Direktan token reference. */
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
}
.cp-obuke-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gr-fg);
    border-bottom: 1px solid rgba(236, 233, 227, 0.4);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.cp-obuke-hero__link:hover,
.cp-obuke-hero__link:focus {
    color: var(--gr-stamp);
    border-bottom-color: var(--gr-stamp);
}
.cp-obuke-hero__link .arr { color: var(--gr-stamp); font-size: 11px; }

/* Planet hover — dijagram reaguje na pažnju */
.cp-obuke-hero__cosmos svg .planet { cursor: pointer; }
.cp-obuke-hero__cosmos svg .planet .planet-dot,
.cp-obuke-hero__cosmos svg .planet .planet-body,
.cp-obuke-hero__cosmos svg .planet .planet-ring,
.cp-obuke-hero__cosmos svg .planet .planet-reticle,
.cp-obuke-hero__cosmos svg .planet .planet-name,
.cp-obuke-hero__cosmos svg .planet .planet-tag,
.cp-obuke-hero__cosmos svg .planet .planet-leader {
    transition: fill 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease, opacity 0.18s ease;
}
.cp-obuke-hero__cosmos svg .planet:hover .planet-dot    { fill: #ffffff; }
.cp-obuke-hero__cosmos svg .planet:hover .planet-ring   { stroke: rgba(255,255,255,0.95); stroke-width: 0.9; }
.cp-obuke-hero__cosmos svg .planet:hover .planet-leader { stroke: rgba(255,255,255,0.75); }
.cp-obuke-hero__cosmos svg .planet:hover .planet-name   { fill: #ffffff; }
.cp-obuke-hero__cosmos svg .planet:hover .planet-tag    { fill: rgba(236,233,227,0.85); }
.cp-obuke-hero__cosmos svg .planet.accent:hover .planet-body    { fill: #ff5a5a; }
.cp-obuke-hero__cosmos svg .planet.accent:hover .planet-reticle { stroke: rgba(255,210,210,0.95); stroke-width: 0.9; }
.cp-obuke-hero__cosmos svg .planet.accent:hover .planet-leader  { stroke: rgba(255,210,210,0.85); }
.cp-obuke-hero__cosmos svg .planet.accent:hover .planet-name    { fill: #ffe6e6; }
.cp-obuke-hero__cosmos svg .planet.accent:hover .planet-tag     { fill: rgba(255,200,200,0.85); }

/* Responsive: 1100px → single-column tekst, plate ka ivici;
   ≤720px aspect na 4:5 (gornje pravilo) */
@media (max-width: 1100px) {
    .cp-obuke-hero__content { grid-template-columns: 1fr; padding: 0 32px 64px; }
    .cp-obuke-hero__text { grid-column: 1; }
    .cp-obuke-hero__plate-id      { left: 32px;  top: 26px; }
    .cp-obuke-hero__plate-caption { right: 32px; top: 26px; }
    .cp-obuke-hero__plate-foot      { right: 32px; bottom: 24px; }
    .cp-obuke-hero__plate-foot-left { left:  32px; bottom: 24px; }
    /* ≤1100 je jedna kolona — jednolinijski citat bi (nowrap) udario u desni
       plate (T+/ORBITA); vrati višeredni blok. */
    .cp-obuke-hero__plate-foot-left { max-width: 360px; white-space: normal; }
    .cp-obuke-hero__plate-foot-left .row { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════
   /obuke/ — Katalog blok (handoff 2026-05-17, saće layout)
   Port iz Razvoj/V3/Obuke/handoff-obuke-katalog-2026-05-17/hex-strip-preview.html.
   Sub-sekcije:
     1. kat-opener — POGLAVLJE 02 + naslov sa zlatnim signal-om + paragraf
     2. kat-strip-counter — // 3 ČVORA · 3 EMISIJE · MREŽA AKTIVNA
     3. kat-connected (strip + cards, reciprocni hover binding kroz data-orbit)
        3a. kat-konst-wrap — saće strip sa 3 hex čvora (03, 04, 08)
        3b. kat-cards — tri kartice obuka u istom redu kao hex čvorovi
     4. kat-format-footer — IN-HOUSE / ONLINE / HIBRID / 60 min · NA SRPSKOM
     5. kat-compare — ŠTA JE OBUKA, A ŠTA NIJE (OBUKA vs KURS)
     6. kat-ba — PRE / POSLE (kroz sve tri zajedno)
   Paleta: --bg #08080c, --fg #ece9e3, --gold #ffd9a8 (signal). --red i
   --red-bright pokazuju na zvaničke brand tokene iz tokens.css — sve
   crvene su unifikovane sa logo gradient-om (#a51616 → #861010 → #7d1414).
   ══════════════════════════════════════════════════════════════════════════ */
.cp-obuke-katalog {
    /* Lokalni dizajn-tokeni (handoff 2026-05-17 FINAL) — warm-graphite bg
       umesto kosmos crno-crnog (eksplicitan tonski skok od hero #08080c).
       --red i --red-bright kao TOKEN reference (--brand = #9b1919 statična,
       --brand-hover = #7d1414 dublji bordo za hover/active, NE svetliji). */
    --bg:         #161614;
    --fg:         #ece9e3;
    --fg-soft:    #b8b6b0;
    --fg-mid:     #8a8a87;
    --fg-haze:    #6a6a68;
    --fg-faint:   #4a4a48;
    --gold:       #ffd9a8;
    --gold-dim:   #c9a874;
    --red:        var(--brand);        /* #9b1919 — statična, brand */
    --red-bright: var(--brand-hover);  /* #7d1414 — hover/active, tamniji bordo */
    --rule:       rgba(154, 154, 152, 0.18);
    /* Gradient bg umesto opaque var(--bg) — gornjih 48px (visina transition
       band-a) je TRANSPARENT, pa fade u graphite do 140px. Cilj: hero radar
       orbite koje bleed-uju kroz hero clip-path (-240px) vidljive su kroz
       transparent zonu katalog-a (afterglow), pa se prirodno gase pre nego
       što stignu do hex strip-a. Bez ovoga, katalog bg bi prekrio bleed
       odmah ispod hero bottom-a, ukidajući celokupan afterglow efekat. */
    background: linear-gradient(to bottom,
                                transparent 0,
                                transparent 48px,
                                var(--bg) 140px,
                                var(--bg) 100%);
    color: var(--fg);
    font-family: var(--font-sans);
    padding: 0 0 120px;
    position: relative;
    /* overflow visible — gornji deo katalog-a (transparent zona) ne sme
       da clip-uje hero bleed koji se vizuelno preliva tu. */
    overflow: visible;
}

/* ── 0. TRANSITION BAND — horizont između kosmos zone i sistema znanja
   Background TRANSPARENT — radar orbite iz hero kosmosa (koje overflow-uju
   ka dnu hero blok-a) prirodno teku kroz band, ne maskiraju se. Tekst
   „ISPRAVKA KURSA" lebdi iznad još uvek vidljivih radar elemenata kao
   atmosferski sloj koji povezuje. Samo DONJI bordo (--brand-hover #7d1414)
   ostaje kao horizont koji odvaja kosmos od warm-graphite sistema znanja
   ispod. Gornji bordo i opaque background uklonjeni. */
.cp-obuke-katalog .kat-transition-band {
    width: 100%;
    min-height: 48px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* Gornja siva linija — ista hairline (#2e2e2c) kao između header-a i
       kosmos hero-a; donji bordo ostaje brand-hover (atmosferski horizont). */
    border-top: 1px solid var(--bg-dark-rule);
    border-bottom: 2px solid var(--brand-hover);
    margin-bottom: 32px;
    position: relative;
    z-index: 2; /* iznad hero orbita koje bleed-uju ispod (overflow:visible) */
}

/* Mašinski transmisioni log — jedan red:
   > MM:SS:ms :: KONTAKT 02 NEUTVRĐEN :: KURS 180° → POGLAVLJE 02
   Crveni prefix (radio prompt + sat), crveni separator (::), bordo komandni
   glagol (KURS), krem vrednosti, crvena strelica → vektor ka cilju. */
.cp-obuke-katalog .kat-band-log {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fg-soft);
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    z-index: 3;
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 500;
}
.cp-obuke-katalog .kat-log-prefix { color: var(--brand-hover); }
.cp-obuke-katalog .kat-log-clock {
    /* tabular-nums sprečava jitter širine dok sat kuca (sve cifre iste px širine) */
    font-variant-numeric: tabular-nums;
}
.cp-obuke-katalog .kat-log-sep {
    color: rgba(155, 25, 25, 0.55);
    letter-spacing: 0.04em;
}
.cp-obuke-katalog .kat-log-key { color: var(--brand); }
.cp-obuke-katalog .kat-log-val { color: var(--fg); }
.cp-obuke-katalog .kat-log-arrow {
    color: var(--brand-hover);
    margin: 0 2px;
}
/* Band-row wrapperi: display:contents na desktopu → log teče kao jedan inline
   red (deca kao da wrappera nema). Desni „<" chevron je čisto mobilni dekor. */
.cp-obuke-katalog .kat-band-row { display: contents; }
.cp-obuke-katalog .kat-log-chev { display: none; color: var(--brand-hover); }

/* ── 1. OPENER ─────────────────────────────────────────────────────── */
.cp-obuke-katalog .kat-opener {
    max-width: 1200px;
    margin: 0 auto 32px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}
.cp-obuke-katalog .kat-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #9a9a98;
    margin: 0 0 32px;
    line-height: 1.6;
}
.cp-obuke-katalog .kat-eyebrow-dot {
    color: var(--red);
    margin-right: 8px;
    font-size: 14px;
}
.cp-obuke-katalog .kat-h2 {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: var(--fg);
    margin: 0;
    line-height: 1.04;
}
.cp-obuke-katalog .kat-h2-signal {
    color: var(--gold);
    font-style: italic;
    font-weight: 500;
}
/* „Tri obuke. / Tri priče." — jedan red na desktopu, dva reda na mobilnom. */
.cp-obuke-katalog .kat-h2-br { display: none; }
@media (max-width: 720px) { .cp-obuke-katalog .kat-h2-br { display: inline; } }
.cp-obuke-katalog .kat-opener-right p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-mid);
    margin: 0 0 16px;
}
.cp-obuke-katalog .kat-opener-right p em {
    font-style: italic;
    color: var(--fg-soft);
}

/* ── 2. CONNECTED — strip + cards sa reciprocnim hover binding-om ───
   Roditelj svih komponenata sa data-orbit atributom. JS dodaje .has-active
   klasu kad bilo koji hex/kartica/nit dobije hover ili klik. */
.cp-obuke-katalog .kat-connected { position: relative; }

/* 3a. Saće strip */
.cp-obuke-katalog .kat-konst-wrap {
    display: flex;
    justify-content: center;
    padding: 0 24px;
    margin-bottom: 8px;
}
.cp-obuke-katalog .kat-konst-svg {
    max-width: 1440px;
    width: 100%;
    height: auto;
    display: block;
}

/* Mobilna USPRAVNA konstelacija (.kat-konst-v) — render ≤720; horizontalni
   strip (.kat-konst-wrap) se tada sakriva. Tri flat-top hexa vezana uspravno
   (kao saće na /usluge/), čitljiv ORBITA+NAZIV tekst iste veličine kao tamo
   (orb 13px, naziv 27px u SVG koord. → ~17px na ekranu posle slice skale). */
.cp-obuke-katalog .kat-konst-v { display: none; }
.cp-obuke-katalog .kat-konst-v .kat-cell {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    pointer-events: none;
}
.cp-obuke-katalog .kat-konst-v .kat-cell-orb {
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--brand-light); margin: 0; line-height: 1;
}
.cp-obuke-katalog .kat-konst-v .kat-cell-name {
    font-family: var(--font-sans);
    font-size: 27px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--fg);
    margin: 0; line-height: 1.1;
}
@media (max-width: 720px) {
    .cp-obuke-katalog .kat-konst-wrap { display: none; }
    .cp-obuke-katalog .kat-konst-v { display: block; margin: 8px 0 0; }
    .cp-obuke-katalog .kat-konst-v svg { width: 100%; height: auto; display: block; }
}

/* SVG text-ovi koji koriste CSS var(--font-mono) — postavlja se preko
   klase jer SVG presentation atribut font-family ne podržava CSS var()
   a inline style="" je blokiran CSP-om (style-src nonce). */
.cp-obuke-katalog .kat-konst-svg .kat-tech-label,
.cp-obuke-katalog .kat-konst-svg .kat-dim-label,
.cp-obuke-katalog .kat-konst-svg .kat-hex-orbita,
.cp-obuke-katalog .kat-konst-svg .kat-hex-name {
    font-family: var(--font-mono);
}

/* Hex čvor — cursor pointer + Brave/Chrome a11y fix (outline + tap) */
.cp-obuke-katalog .kat-hex-node {
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    pointer-events: bounding-box;
    transition: opacity 0.25s ease;
}
.cp-obuke-katalog .kat-hex-node:focus,
.cp-obuke-katalog .kat-hex-node:focus-visible,
.cp-obuke-katalog .kat-hex-node:active { outline: none; }
.cp-obuke-katalog .kat-hex-node rect { pointer-events: all; }
.cp-obuke-katalog .kat-hex-node polygon,
.cp-obuke-katalog .kat-hex-node circle,
.cp-obuke-katalog .kat-hex-node text {
    transition: stroke-opacity 0.25s ease,
                stroke-width 0.25s ease,
                fill 0.25s ease,
                opacity 0.25s ease,
                stroke 0.25s ease;
}
.cp-obuke-katalog .kat-hex-node:hover .kat-hex-outer,
.cp-obuke-katalog .kat-hex-node.is-active .kat-hex-outer {
    stroke: var(--red-bright) !important;
    stroke-opacity: 0.85 !important;
    stroke-width: 1.8 !important;
}
.cp-obuke-katalog .kat-hex-node:hover .kat-hex-inner,
.cp-obuke-katalog .kat-hex-node.is-active .kat-hex-inner {
    stroke: var(--red-bright) !important;
    stroke-opacity: 0.45 !important;
}

/* Hex stars — treperu unutar hex prozora ("pogled u kosmos"). 5 keyframe
   variacija sa nth-child selektorima daje raznolikost bez sinhronog blinka. */
@keyframes kat-blink-1 { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.7; } }
@keyframes kat-blink-2 { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.15; } }
@keyframes kat-blink-3 { 0%, 100% { opacity: 0.35; } 33% { opacity: 0.7; } 66% { opacity: 0.18; } }
.cp-obuke-katalog .kat-hex-stars circle {
    animation: kat-blink-1 4.5s ease-in-out infinite;
}
.cp-obuke-katalog .kat-hex-stars circle:nth-child(3n) {
    animation: kat-blink-2 5.2s ease-in-out infinite;
    animation-delay: -1.3s;
}
.cp-obuke-katalog .kat-hex-stars circle:nth-child(4n) {
    animation: kat-blink-3 6.8s ease-in-out infinite;
    animation-delay: -2.8s;
}
.cp-obuke-katalog .kat-hex-stars circle:nth-child(5n) {
    animation-delay: -3.7s;
    animation-duration: 5.8s;
}
.cp-obuke-katalog .kat-hex-stars circle:nth-child(7n) {
    animation-delay: -1.9s;
    animation-duration: 7.2s;
}

/* Crvene niti — hover/active pojača, .has-active dim na ne-aktivne */
.cp-obuke-katalog .kat-hex-thread {
    transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease;
}
.cp-obuke-katalog .kat-hex-thread.is-active {
    stroke-opacity: 1 !important;
    stroke-width: 1.6 !important;
}
.cp-obuke-katalog .kat-connected.has-active .kat-hex-node:not(.is-active):not(:hover) {
    opacity: 0.35;
}
.cp-obuke-katalog .kat-connected.has-active .kat-hex-thread:not(.is-active) {
    stroke-opacity: 0.18 !important;
}

/* 2b. Kartice obuka */
.cp-obuke-katalog .kat-cards {
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 0 24px;
    border-top: 2px solid var(--red);
}
.cp-obuke-katalog .kat-card {
    padding: 36px 0 32px;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    transition: background 0.3s ease, opacity 0.3s ease;
    position: relative;
    scroll-margin-top: 120px;
}
.cp-obuke-katalog .kat-connected.has-active .kat-card:not(.is-active) {
    opacity: 0.45;
}
.cp-obuke-katalog .kat-card.is-active {
    /* Hover wash sa --brand-hover RGB (125, 20, 20) — sinhronizovano sa
       tamnijim bordom u brand sistemu (hover = tamniji, ne svetliji). */
    background: linear-gradient(to right,
                                rgba(125, 20, 20, 0.07),
                                transparent 70%);
}
@keyframes kat-card-pulse {
    0%   { box-shadow: inset 0 0 0 0 rgba(255, 217, 168, 0); }
    25%  { box-shadow: inset 4px 0 0 0 rgba(255, 217, 168, 0.7); }
    100% { box-shadow: inset 0 0 0 0 rgba(255, 217, 168, 0); }
}
.cp-obuke-katalog .kat-card.is-pulsing {
    animation: kat-card-pulse 1.2s ease-out;
}

/* minmax(0, 1fr) — bez toga grid se prerasporedjuje zbog dugih nedeljivih
   reči ("provaljuje", "menadžment") i lomi layout (handoff dizajn-sistem). */
.cp-obuke-katalog .kat-card-grid {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Rail (leva kolona, 80px) */
.cp-obuke-katalog .kat-card-rail {
    font-family: var(--font-mono);
    text-align: center;
}
.cp-obuke-katalog .kat-card-rail-label {
    font-size: 9px;
    color: var(--fg-haze);
    letter-spacing: 0.22em;
    margin-bottom: 8px;
    transition: color 0.25s ease;
}
.cp-obuke-katalog .kat-card-rail-num {
    font-size: 28px;
    font-weight: 400;
    color: var(--red);
    line-height: 1;
    letter-spacing: -0.01em;
    transition: color 0.25s ease;
}
.cp-obuke-katalog .kat-card-rail-pulse {
    margin: 16px auto 0;
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, var(--red), transparent);
    opacity: 0.4;
    transition: opacity 0.25s ease, width 0.25s ease;
}
.cp-obuke-katalog .kat-card.is-active .kat-card-rail-num { color: var(--red-bright); }
.cp-obuke-katalog .kat-card.is-active .kat-card-rail-label { color: var(--fg); }
.cp-obuke-katalog .kat-card.is-active .kat-card-rail-pulse {
    opacity: 1;
    width: 2px;
}

/* Main (centralna kolona) */
.cp-obuke-katalog .kat-card-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--fg-haze);
    margin: 0 0 14px;
}
.cp-obuke-katalog .kat-card-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--fg);
    margin: 0 0 12px;
    letter-spacing: -0.015em;
    transition: color 0.25s ease;
}
.cp-obuke-katalog .kat-card.is-active .kat-card-title { color: var(--gold); }
.cp-obuke-katalog .kat-card-pitch {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fg-mid);
    margin: 0 0 14px;
}
.cp-obuke-katalog .kat-card-pitch em {
    font-style: italic;
    color: var(--fg-soft);
}
.cp-obuke-katalog .kat-card-question {
    font-size: 13px;
    font-style: italic;
    color: var(--gold-dim);
    line-height: 1.55;
    border-left: 1px solid var(--gold-dim);
    padding-left: 14px;
    margin: 14px 0 0;
}

/* Aux (desna kolona) */
.cp-obuke-katalog .kat-card-aux {
    display: grid;
    gap: 22px;
}
.cp-obuke-katalog .kat-aux-line {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fg-mid);
    padding: 8px 0;
}
.cp-obuke-katalog .kat-aux-line + .kat-aux-line {
    border-top: 1px solid var(--rule);
    margin-top: 4px;
}
/* Aux label — block na sopstvenom redu (handoff 2026-05-17 FINAL —
   ranija inline varijanta zamenjena block-om radi bolje hijerarhije). */
.cp-obuke-katalog .kat-aux-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--fg-haze);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.cp-obuke-katalog .kat-aux-line b {
    color: var(--fg-soft);
    font-weight: 500;
}
.cp-obuke-katalog .kat-card.is-active .kat-aux-line b { color: var(--gold); }

/* ── 3. FORMAT FOOTER (jedan za sve tri obuke) ─────────────────────── */
.cp-obuke-katalog .kat-format-footer {
    max-width: 1200px;
    margin: 48px auto 0;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
}
.cp-obuke-katalog .kat-footer-label {
    color: var(--fg-haze);
    text-transform: uppercase;
}
.cp-obuke-katalog .kat-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-soft);
    text-transform: uppercase;
}
.cp-obuke-katalog .kat-footer-pill-dot {
    width: 6px;
    height: 6px;
    background: var(--gold);
    display: inline-block;
    transform: rotate(45deg);
}
.cp-obuke-katalog .kat-footer-meta {
    margin-left: auto;
    color: var(--fg-haze);
    text-transform: uppercase;
}
/* Wrapper oko 3 pill-a — na desktopu transparentan (footer ostaje jedan red). */
.cp-obuke-katalog .kat-footer-pills { display: contents; }
/* Mobilni (≤720): footer centriran u 3 reda — label / pills (▸ separator) / meta. */
@media (max-width: 720px) {
    .cp-obuke-katalog .kat-format-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        margin-top: 32px;
    }
    .cp-obuke-katalog .kat-footer-pills {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    /* dijamant-tačka ispred svakog pill-a → zameni „▸" separatorom IZMEĐU pill-ova */
    .cp-obuke-katalog .kat-footer-pill-dot { display: none; }
    .cp-obuke-katalog .kat-footer-pills .kat-footer-pill + .kat-footer-pill::before {
        content: "▸";
        color: var(--gold);
    }
    .cp-obuke-katalog .kat-footer-meta { margin-left: 0; }
}

/* ── 4. COMPARISON — OBUKA i KURS kao ravnopravne kategorije ───────── */
.cp-obuke-katalog .kat-compare {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 24px;
}
.cp-obuke-katalog .kat-compare-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
}
.cp-obuke-katalog .kat-compare-col h4 {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    font-weight: 500;
}
/* Obe kolone ravnopravne — OBUKA zlatna, KURS krem/sand (oba pozitivna,
   različite kategorije proizvoda, ne dobro vs loše). */
.cp-obuke-katalog .kat-compare-col--obuka h4 {
    color: var(--gold);
    border-bottom-color: rgba(255, 217, 168, 0.25);
}
.cp-obuke-katalog .kat-compare-col--kurs h4 {
    color: var(--fg-soft);
    border-bottom-color: var(--rule);
}
.cp-obuke-katalog .kat-compare-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14.5px;
    line-height: 1.7;
}
.cp-obuke-katalog .kat-compare-col ul li {
    padding: 6px 0 6px 26px;
    position: relative;
}
.cp-obuke-katalog .kat-compare-col--obuka ul li { color: var(--fg-soft); }
.cp-obuke-katalog .kat-compare-col--kurs ul li { color: var(--fg-mid); }
.cp-obuke-katalog .kat-compare-col--obuka ul li::before {
    content: '⬡';
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--gold);
    font-size: 11px;
}
.cp-obuke-katalog .kat-compare-col--kurs ul li::before {
    content: '⬡';
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--fg-haze);
    font-size: 11px;
}

/* ── 5. BEFORE / AFTER — kroz sve tri zajedno ──────────────────────── */
.cp-obuke-katalog .kat-ba {
    max-width: 1200px;
    margin: 96px auto 0;
    padding: 0 24px;
}
.cp-obuke-katalog .kat-ba-head {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--fg-haze);
    margin: 0 0 28px;
}
.cp-obuke-katalog .kat-ba-head::before {
    content: '⬡';
    color: var(--gold);
    margin-right: 10px;
    font-size: 14px;
}
.cp-obuke-katalog .kat-ba-head b {
    color: var(--fg);
    font-weight: 500;
}
.cp-obuke-katalog .kat-ba-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.cp-obuke-katalog .kat-ba-col h4 {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--fg-mid);
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.cp-obuke-katalog .kat-ba-col--before h4 { color: var(--fg-haze); }
.cp-obuke-katalog .kat-ba-col--after h4 {
    color: var(--gold);
    border-bottom-color: rgba(255, 217, 168, 0.25);
}
.cp-obuke-katalog .kat-ba-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cp-obuke-katalog .kat-ba-col ul li {
    padding: 11px 0 11px 36px;
    position: relative;
    font-size: 14.5px;
    line-height: 1.55;
    border-top: 1px solid var(--rule);
}
.cp-obuke-katalog .kat-ba-col ul li:first-child { border-top: none; }
.cp-obuke-katalog .kat-ba-col--before ul li { color: var(--fg-faint); }
.cp-obuke-katalog .kat-ba-col--after ul li { color: var(--fg-soft); }
.cp-obuke-katalog .kat-ba-col--after ul li b {
    color: var(--gold);
    font-weight: 500;
}
.cp-obuke-katalog .kat-ba-marker {
    position: absolute;
    left: 0;
    top: 11px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-haze);
    letter-spacing: 0.08em;
}
.cp-obuke-katalog .kat-ba-col--after .kat-ba-marker {
    top: 13px;
    color: var(--gold);
    font-size: 12px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .cp-obuke-katalog { padding: 56px 0 64px; }
    .cp-obuke-katalog .kat-opener {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 32px;
    }
    .cp-obuke-katalog .kat-card-grid {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 24px;
    }
    .cp-obuke-katalog .kat-card-aux {
        grid-column: 1 / -1;
        margin-top: 14px;
    }
    .cp-obuke-katalog .kat-format-footer {
        gap: 14px;
        padding: 18px 24px;
    }
    .cp-obuke-katalog .kat-footer-meta { margin-left: 0; }
    .cp-obuke-katalog .kat-compare-grid,
    .cp-obuke-katalog .kat-ba-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   /obuke/ — Zašto blok (Poglavlje 03, "dublja orbita")
   Port iz Razvoj/V3/Obuke/design_handoff_obuke_zasto/_preview_standalone.html.
   Sinek-inspired filozofski blok — pozadina #0f0f0d (5 nijansi ispod katalog
   #161614) signalizuje da čitalac ulazi u tiša, dublju zonu. 4 sub-sekcije:
     1. zasto-band — full-width divider, 2px crveni borders, gold dijamanti
     2. zasto-opener — 2-kolone (eyebrow + h2 | intro pasusi + cite)
     3. zasto-list — 6 stavki sa hover sparkle animacijom (linija + tačka)
     4. zasto-outro — hex marker + closing line + meta kicker
   Sve scope-ovano pod .cp-obuke-zasto. Lokalni tokeni mirror katalog pattern;
   --zs-bg-deeper je jedini truly nov ton (5 ispod katalog --ob-bg).
   ══════════════════════════════════════════════════════════════════════════ */
.cp-obuke-zasto {
    /* Lokalni tokeni — paleta deli sa katalog-om, ali bg ide korak dublje */
    --zs-bg-deeper: #0f0f0d;
    --zs-fg:        #ece9e3;
    --zs-fg-soft:   #b8b6b0;
    --zs-fg-mid:    #8a8a87;
    --zs-fg-haze:   #6a6a68;
    --zs-fg-faint:  #4a4a48;
    --zs-gold:      #ffd9a8;
    --zs-gold-dim:  #c9a874;
    --zs-red:       #9b1919;
    --zs-rule:      rgba(154, 154, 152, 0.18);

    background: var(--zs-bg-deeper);
    color: var(--zs-fg);
    padding-bottom: 96px;
    position: relative;
    font-family: var(--font-sans);
}

/* ── 1. Divider band — full-width, 2px crveni rubovi, gold dijamanti ── */
.cp-obuke-zasto .zasto-band {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 24px;
    background: var(--zs-bg-deeper);
    border-top: 2px solid var(--zs-red);
    border-bottom: 2px solid var(--zs-red);
    position: relative;
}
.cp-obuke-zasto .zasto-band::before,
.cp-obuke-zasto .zasto-band::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--zs-gold);
    transform: translateY(-50%) rotate(45deg);
}
.cp-obuke-zasto .zasto-band::before { left: 32px; }
.cp-obuke-zasto .zasto-band::after  { right: 32px; }
.cp-obuke-zasto .zasto-tick {
    font-family: var(--font-mono);
    color: var(--zs-red);
    font-size: 14px;
}
.cp-obuke-zasto .zasto-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--zs-fg-soft);
    text-transform: uppercase;
}
.cp-obuke-zasto .zasto-meta--bright { color: var(--zs-fg); }
.cp-obuke-zasto .zasto-sep {
    color: rgba(155, 25, 25, 0.85);
    font-size: 13px;
    font-family: var(--font-mono);
}

/* ── 2. Opener — 2-kolone grid ──────────────────────────────────────── */
.cp-obuke-zasto .zasto-opener {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.cp-obuke-zasto .zasto-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #9a9a98;
    margin: 0 0 28px;
    line-height: 1.6;
    text-transform: uppercase;
}
.cp-obuke-zasto .zasto-eyebrow-dot {
    color: var(--zs-red);
    margin-right: 8px;
    font-size: 14px;
}
.cp-obuke-zasto .zasto-h2 {
    font-family: var(--font-sans);
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: var(--zs-fg);
    margin: 0;
    line-height: 1.06;
}
.cp-obuke-zasto .zasto-h2 em { font-style: normal; }
.cp-obuke-zasto .zasto-signal {
    color: var(--zs-gold);
    font-style: italic;
    font-weight: 500;
}
.cp-obuke-zasto .zasto-opener-right p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--zs-fg-mid);
    margin: 0 0 16px;
}
.cp-obuke-zasto .zasto-opener-right p em {
    font-style: italic;
    color: var(--zs-fg-soft);
    font-weight: 500;
}
.cp-obuke-zasto .zasto-cite {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--zs-fg-haze);
    text-transform: uppercase;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--zs-rule);
    line-height: 1.6;
}
.cp-obuke-zasto .zasto-cite b {
    color: var(--zs-gold-dim);
    font-weight: 500;
    letter-spacing: 0.18em;
}

/* ── 3. Lista — 6 stavki ─────────────────────────────────────────────── */
.cp-obuke-zasto .zasto-list {
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 0 24px;
    border-top: 2px solid var(--zs-red);
}
.cp-obuke-zasto .zasto-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 40px;
    padding: 30px 0;
    border-bottom: 1px solid var(--zs-rule);
    position: relative;
    overflow: hidden;
    transition: opacity 0.35s ease;
}
/* Hover na jednu stavku → ostale se prigušuju. SAMO na uređajima sa mišem —
   na dodiru bi tap „zaglavio" :hover (iOS) i ostavio ostale prigušene. */
@media (hover: hover) {
    .cp-obuke-zasto .zasto-list:has(.zasto-item:hover) .zasto-item:not(:hover) {
        opacity: 0.42;
    }
}
/* Uzvičnik — gornji deo (vertikalna isprekidana linija), rima sa stroke-
   dasharray iz hex strip threads-a u katalog bloku iznad. */
.cp-obuke-zasto .zasto-item::before {
    content: '';
    position: absolute;
    left: 99px;
    top: 24px;
    bottom: 36px;
    width: 2px;
    background-image: linear-gradient(
        to bottom,
        var(--zs-red) 0,
        var(--zs-red) 4px,
        transparent 4px,
        transparent 10px
    );
    background-size: 100% 10px;
    background-repeat: repeat-y;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.35s ease, transform 0.5s ease;
    pointer-events: none;
}
.cp-obuke-zasto .zasto-item:hover::before {
    opacity: 0.9;
    transform: scaleY(1);
}
/* Uzvičnik — donji deo (tačka), ulazi sa kašnjenjem 0.45s, blagi overshoot. */
.cp-obuke-zasto .zasto-item::after {
    content: '';
    position: absolute;
    left: 96.5px;
    bottom: 20px;
    width: 7px;
    height: 7px;
    background: var(--zs-red);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s ease 0.45s,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
    pointer-events: none;
}
.cp-obuke-zasto .zasto-item:hover::after {
    opacity: 1;
    transform: scale(1);
}
.cp-obuke-zasto .zasto-num {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 300;
    color: var(--zs-fg-faint);
    letter-spacing: 0.04em;
    line-height: 1;
    padding-top: 6px;
    transition: color 0.35s ease;
}
.cp-obuke-zasto .zasto-item:hover .zasto-num {
    color: var(--zs-gold-dim);
}
.cp-obuke-zasto .zasto-body {
    position: relative;
    z-index: 2;
    max-width: 760px;
}
.cp-obuke-zasto .zasto-title {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    color: var(--zs-fg);
    margin: 0 0 12px;
    letter-spacing: -0.012em;
    line-height: 1.32;
}
/* Reč „Zašto" — italik gold-dim default, underline se izvlači na hover */
.cp-obuke-zasto .zasto-word {
    font-style: italic;
    color: var(--zs-gold-dim);
    position: relative;
    display: inline-block;
    transition: color 0.4s ease, letter-spacing 0.4s ease;
}
.cp-obuke-zasto .zasto-word::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    height: 1px;
    background: var(--zs-gold);
    transition: right 0.55s ease;
}
.cp-obuke-zasto .zasto-item:hover .zasto-word {
    color: #fff5e1;
    letter-spacing: 0.008em;
}
.cp-obuke-zasto .zasto-item:hover .zasto-word::after {
    right: 0;
}
.cp-obuke-zasto .zasto-desc {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--zs-fg-mid);
    margin: 0;
}

/* ── 4. Bottom — 2-kolone (outro | signature) sa vertikalnim stubom ────
   Outro (hex + tekst) levo, mono potpis desno; stub je border-left na
   signature, ide preko cele visine reda. Top rule nastavlja vizuelni
   jezik border-top-a na .zasto-list. */
.cp-obuke-zasto .zasto-bottom {
    max-width: 1200px;
    margin: 32px auto 0;
    padding: 22px 24px 0;
    border-top: 1px solid var(--zs-rule);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: start;
}
.cp-obuke-zasto .zasto-outro {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
    min-width: 0;
}
.cp-obuke-zasto .zasto-signature {
    margin: 0;
    padding: 0 0 0 48px;
    border-left: 1px solid var(--zs-rule);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--zs-fg-haze);
    text-align: left;
    line-height: 1.75;
    align-self: stretch;
    /* Vertikalni stub se proteže celom visinom reda. Padding-top 2px
       da prvi red potpisa bude vizuelno poravnat sa ⬡ markerom levo. */
    padding-top: 2px;
}
.cp-obuke-zasto .zasto-signature b {
    color: var(--zs-gold-dim);
    font-weight: 500;
    letter-spacing: 0.22em;
}
.cp-obuke-zasto .zasto-outro-icon {
    font-family: var(--font-mono);
    color: var(--zs-gold);
    font-size: 16px;
    line-height: 1.4;
}
.cp-obuke-zasto .zasto-outro-text {
    flex: 1;
    min-width: 280px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.65;
    color: var(--zs-fg-soft);
    max-width: 820px;
}
.cp-obuke-zasto .zasto-outro-text em {
    color: var(--zs-gold-dim);
    font-style: italic;
}
/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .cp-obuke-zasto .zasto-opener {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 56px;
    }
    .cp-obuke-zasto .zasto-h2 {
        font-size: clamp(28px, 6vw, 44px);
        max-width: 24ch;
        text-wrap: balance;
    }
    .cp-obuke-zasto .zasto-list { margin-top: 40px; }
    .cp-obuke-zasto .zasto-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 24px 0;
    }
    /* Mobile: broj iznad naslova, bez hover uzvičnika (touch ne podržava hover). */
    .cp-obuke-zasto .zasto-item::before,
    .cp-obuke-zasto .zasto-item::after { display: none; }
    .cp-obuke-zasto .zasto-num {
        padding-top: 0;
        margin-bottom: 4px;
        font-size: 18px;
    }
    .cp-obuke-zasto .zasto-title { font-size: 19px; }
    .cp-obuke-zasto .zasto-bottom {
        /* Stack u 1-kolonu na mobile — vertikalni stub gubi smisao na uskim
           ekranima, signature ide ispod outro-a sa hairline iznad. */
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cp-obuke-zasto .zasto-outro {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .cp-obuke-zasto .zasto-signature {
        padding: 14px 0 0 0;
        border-left: none;
        border-top: 1px solid var(--zs-rule);
        letter-spacing: 0.18em;
    }
}

@media (max-width: 600px) {
    .cp-obuke-zasto .zasto-band {
        height: auto;
        min-height: 52px;
        padding: 10px 32px;
        flex-wrap: wrap;
        gap: 8px 14px;
    }
    .cp-obuke-zasto .zasto-meta { font-size: 10px; letter-spacing: 0.22em; }
    .cp-obuke-zasto .zasto-band::before,
    .cp-obuke-zasto .zasto-band::after { width: 5px; height: 5px; }
}

/* Reduced motion — uzvičnik bez animacije ucrtavanja, underline trenutan. */
@media (prefers-reduced-motion: reduce) {
    .cp-obuke-zasto .zasto-item,
    .cp-obuke-zasto .zasto-item::before,
    .cp-obuke-zasto .zasto-item::after,
    .cp-obuke-zasto .zasto-num,
    .cp-obuke-zasto .zasto-word,
    .cp-obuke-zasto .zasto-word::after {
        transition: none !important;
        transform: none !important;
    }
    .cp-obuke-zasto .zasto-item:hover::before { opacity: 0.9; }
    .cp-obuke-zasto .zasto-item:hover::after  { opacity: 1; transform: scale(1) !important; }
    .cp-obuke-zasto .zasto-item:hover .zasto-word::after { right: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   /obuke/ — Manevar uspešan (Poglavlje 04, zatvaranje narativa)
   Port iz Razvoj/V3/Obuke/design_handoff_obuke_manevar/_preview_standalone.html.

   Pozadina --bg (povratak iz Zašto dublje orbite). Strukturno deli vizuelni
   jezik sa Zašto-m (band + opener), ali sa drugačijim tonom:
     • brojevi 04.A u --gold-dim (cooler — tehnička strana obuke)
     • brojevi 04.B u --gold (warmer — vrednost obuke)
     • CTA u --red-bright (najtoplije — akcija)
   Temperaturni gradijent vodi oko ka klik-manevru.

   CTA ceremonija — klik ne navigira odmah. JS dodaje .is-activated na
   .manevar-cta-block; CSS izvodi koreografiju (timing tabela u README-u
   handoff-a). Posle 4.2s, JS poziva location.href. Sve transitions
   gracefully se isključuju u prefers-reduced-motion (delay 60ms).
   ══════════════════════════════════════════════════════════════════════════ */
.cp-obuke-manevar {
    --mn-bg:         #161614;
    --mn-fg:         #ece9e3;
    --mn-fg-soft:    #b8b6b0;
    --mn-fg-mid:     #8a8a87;
    --mn-fg-haze:    #6a6a68;
    --mn-fg-faint:   #4a4a48;
    --mn-gold:       #ffd9a8;
    --mn-gold-dim:   #c9a874;
    --mn-red:        #9b1919;
    --mn-red-bright: #c43030;
    --mn-rule:       rgba(154, 154, 152, 0.18);

    background: var(--mn-bg);
    color: var(--mn-fg);
    padding-bottom: 40px;
    position: relative;
    font-family: var(--font-sans);
}

/* ── 1. Band — full-width, identičan ZAŠTO band-u, ali na --mn-bg ──── */
.cp-obuke-manevar .manevar-band {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 24px;
    background: var(--mn-bg);
    border-top: 2px solid var(--mn-red);
    border-bottom: 2px solid var(--mn-red);
    position: relative;
}
.cp-obuke-manevar .manevar-band::before,
.cp-obuke-manevar .manevar-band::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--mn-gold);
    transform: translateY(-50%) rotate(45deg);
}
.cp-obuke-manevar .manevar-band::before { left: 32px; }
.cp-obuke-manevar .manevar-band::after  { right: 32px; }
.cp-obuke-manevar .manevar-tick {
    font-family: var(--font-mono);
    color: var(--mn-red);
    font-size: 14px;
}
.cp-obuke-manevar .manevar-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--mn-fg-soft);
    text-transform: uppercase;
}
.cp-obuke-manevar .manevar-meta--bright { color: var(--mn-fg); }
.cp-obuke-manevar .manevar-sep {
    color: rgba(155, 25, 25, 0.85);
    font-size: 13px;
    font-family: var(--font-mono);
}

/* ── 2. Opener — 2-kolone grid, h2 36px (manji od Zašto 48px) ──────── */
.cp-obuke-manevar .manevar-opener {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.cp-obuke-manevar .manevar-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #9a9a98;
    margin: 0 0 28px;
    line-height: 1.6;
    text-transform: uppercase;
}
.cp-obuke-manevar .manevar-eyebrow-dot {
    color: var(--mn-red);
    margin-right: 8px;
    font-size: 14px;
}
.cp-obuke-manevar .manevar-h2 {
    font-family: var(--font-sans);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: var(--mn-fg);
    margin: 0;
    line-height: 1.18;
}
.cp-obuke-manevar .manevar-signal {
    color: var(--mn-gold);
    font-style: italic;
    font-weight: 500;
}
.cp-obuke-manevar .manevar-opener-right p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--mn-fg-mid);
    margin: 0 0 16px;
}
.cp-obuke-manevar .manevar-opener-right p em {
    font-style: italic;
    color: var(--mn-fg-soft);
    font-weight: 500;
}

/* ── 3. Sub-head — mono kicker pre 04.A i 04.B sekcija ───────────── */
.cp-obuke-manevar .manevar-sub-head {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--mn-fg-haze);
    text-transform: uppercase;
}
.cp-obuke-manevar .manevar-sub-head--gap { margin-top: 100px; }
.cp-obuke-manevar .manevar-sub-head::before {
    content: '⬡';
    color: var(--mn-gold);
    margin-right: 10px;
    font-size: 14px;
}
.cp-obuke-manevar .manevar-sub-head b {
    color: var(--mn-fg);
    font-weight: 500;
    letter-spacing: 0.22em;
}

/* ── 04.A — Sesija (2×2 grid, gold-dim numeri) ─────────────────────── */
.cp-obuke-manevar .manevar-sesija-grid {
    max-width: 1200px;
    margin: 28px auto 0;
    padding: 28px 24px 0;
    border-top: 1px solid var(--mn-rule);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 56px;
}
.cp-obuke-manevar .manevar-sesija-item {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
    align-items: start;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cp-obuke-manevar .manevar-sesija-item:hover { transform: translateX(8px); }
.cp-obuke-manevar .manevar-sesija-item:hover .manevar-sesija-num { color: var(--mn-gold); }
.cp-obuke-manevar .manevar-sesija-num {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 300;
    color: var(--mn-gold-dim);
    letter-spacing: 0.04em;
    line-height: 1;
    padding-top: 4px;
    transition: color 0.4s ease;
}
.cp-obuke-manevar .manevar-sesija-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--mn-fg);
    margin: 0 0 10px;
    letter-spacing: -0.012em;
    line-height: 1.32;
}
.cp-obuke-manevar .manevar-sesija-desc {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--mn-fg-mid);
    margin: 0;
}

/* ── 04.B — Zauvek (vertikalna lista, gold numeri — toplije od 04.A) ── */
.cp-obuke-manevar .manevar-zauvek-list {
    max-width: 1200px;
    margin: 28px auto 0;
    padding: 0 24px;
    border-top: 1px solid var(--mn-rule);
}
.cp-obuke-manevar .manevar-zauvek-item {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid var(--mn-rule);
    align-items: start;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cp-obuke-manevar .manevar-zauvek-item:hover { transform: translateX(8px); }
.cp-obuke-manevar .manevar-zauvek-item:hover .manevar-zauvek-num { color: #fff5e1; }
.cp-obuke-manevar .manevar-zauvek-item:last-child { border-bottom: none; }
.cp-obuke-manevar .manevar-zauvek-num {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 300;
    color: var(--mn-gold);
    letter-spacing: 0.04em;
    line-height: 1;
    padding-top: 4px;
    transition: color 0.4s ease;
}
.cp-obuke-manevar .manevar-zauvek-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--mn-fg);
    margin: 0 0 10px;
    letter-spacing: -0.012em;
    line-height: 1.32;
}
.cp-obuke-manevar .manevar-zauvek-desc {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--mn-fg-mid);
    margin: 0;
    max-width: 820px;
}

/* ── 04.C — CTA blok sa kompasnim emblemom ──────────────────────────── */
.cp-obuke-manevar .manevar-cta-block {
    max-width: 1200px;
    margin: 96px auto 0;
    padding: 56px 24px;
    border-top: 2px solid var(--mn-red);
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 64px;
    align-items: center;
    position: relative;
}
.cp-obuke-manevar .manevar-cta-left { min-width: 0; }
.cp-obuke-manevar .manevar-cta-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--mn-red-bright);
    text-transform: uppercase;
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.cp-obuke-manevar .manevar-cta-eyebrow::before {
    content: '⬡';
    color: var(--mn-red-bright);
    font-size: 14px;
}
.cp-obuke-manevar .manevar-cta-title {
    font-family: var(--font-sans);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: var(--mn-fg);
    margin: 0 0 16px;
    line-height: 1.12;
    max-width: 620px;
}
.cp-obuke-manevar .manevar-cta-desc {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--mn-fg-mid);
    margin: 0 0 32px;
    max-width: 540px;
}
.cp-obuke-manevar .manevar-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 34px;
    background: var(--mn-red);
    border: 1.5px solid var(--mn-red);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    cursor: pointer;
    position: relative;
}
.cp-obuke-manevar .manevar-cta-arrow {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}
.cp-obuke-manevar .manevar-cta-button:hover,
.cp-obuke-manevar .manevar-cta-button:focus-visible {
    background: var(--mn-red-bright);
    border-color: var(--mn-red-bright);
    transform: translateX(4px);
}
.cp-obuke-manevar .manevar-cta-button:hover .manevar-cta-arrow,
.cp-obuke-manevar .manevar-cta-button:focus-visible .manevar-cta-arrow {
    transform: translateX(6px);
}

/* Status indikator — dva stanja u inline-grid stack-u (oba u istoj ćeliji,
   toggle opacity). Default warn vidljiv + pulsira; transport sakriven do
   .is-activated, pa fade in sa delay-em 1.2s. */
.cp-obuke-manevar .manevar-cta-status {
    margin-top: 28px;
    display: block;
}
.cp-obuke-manevar .manevar-status-stack {
    display: inline-grid;
    grid-template-columns: 1fr;
}
.cp-obuke-manevar .manevar-status-state {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.5s ease;
}
.cp-obuke-manevar .manevar-status-state--warn {
    color: var(--mn-red-bright);
    opacity: 1;
}
.cp-obuke-manevar .manevar-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--mn-red-bright);
    border-radius: 50%;
    animation: cp-mn-status-blink 1.6s ease-in-out infinite;
}
@keyframes cp-mn-status-blink {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}
.cp-obuke-manevar .manevar-status-state--transport {
    color: var(--mn-gold-dim);
    opacity: 0;
}
.cp-obuke-manevar .manevar-status-arrow {
    display: inline-block;
    font-size: 13px;
    animation: cp-mn-transport-pulse 1.1s ease-in-out infinite;
}
@keyframes cp-mn-transport-pulse {
    0%, 100% { transform: translateX(0);   opacity: 0.5; }
    50%      { transform: translateX(6px); opacity: 1; }
}
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-status-state--warn { opacity: 0; }
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-status-state--transport {
    opacity: 1;
    transition: opacity 0.5s ease 1.2s;
}

/* ── Compass patch — SVG + caption stack ──────────────────────────── */
.cp-obuke-manevar .manevar-cta-patch {
    position: relative;
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: end;
}
.cp-obuke-manevar .manevar-compass-svg {
    width: 280px;
    height: 280px;
    display: block;
}

/* COMPASS STATE MACHINE — default 0° (sudar neizbežan), .is-activated 30°
   (manevar izvršen). Igla rotira sa overshoot easing (cubic-bezier 0.34,
   1.45, 0.64, 1) preko 0.9s. transform-box: fill-box drži pivot na centru
   simetrije igle (140, 140 u viewBox-u). */
.cp-obuke-manevar .manevar-needle-group {
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.9s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-needle-group {
    transform: rotate(30deg);
}

/* Ghost — stari kurs (dashed line iz centra na sever). Fade-in sa delay
   0.3s da se pojavi tek pošto je igla počela da rotira. */
.cp-obuke-manevar .manevar-ghost {
    stroke-opacity: 0;
    transition: stroke-opacity 0.5s ease 0.3s;
}
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-ghost {
    stroke-opacity: 0.34;
}

/* Manevar luk — ucrtava se od 0° do 30° preko stroke-dashoffset (33→0).
   Trajanje 0.85s, easing ease-out, delay 0.05s. */
.cp-obuke-manevar .manevar-arc {
    stroke-dasharray: 33;
    stroke-dashoffset: 33;
    transition: stroke-dashoffset 0.85s ease-out 0.05s;
}
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-arc {
    stroke-dashoffset: 0;
}

/* 0° tick + label — prominentni u default-u (prošlost je gola, predstoji
   sudar), prituše se u .is-activated (prošlost). */
.cp-obuke-manevar .manevar-tick-0 {
    stroke-opacity: 0.75;
    transition: stroke-opacity 0.5s ease;
}
.cp-obuke-manevar .manevar-label-0 {
    fill: #c9a874;
    opacity: 0.95;
    transition: fill 0.5s ease, opacity 0.5s ease;
}
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-tick-0  { stroke-opacity: 0.3; }
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-label-0 { fill: #6a6a68; opacity: 0.55; }

/* 30° tick + label — prituši u default-u (cilj nije još uspostavljen),
   prominentni u .is-activated (sad je tu). */
.cp-obuke-manevar .manevar-tick-30 {
    stroke-opacity: 0.3;
    transition: stroke-opacity 0.5s ease;
}
.cp-obuke-manevar .manevar-label-30 {
    fill: #6a6a68;
    opacity: 0.7;
    transition: fill 0.5s ease, opacity 0.5s ease;
}
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-tick-30  { stroke-opacity: 0.85; }
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-label-30 { fill: #c9a874; opacity: 0.95; }

/* Sudar marker — crvena tačka pretnje na vrhu hexa. Prituši se na
   .is-activated (pretnja izbegnuta). */
.cp-obuke-manevar .manevar-sudar-marker {
    fill-opacity: 1;
    transition: fill-opacity 0.5s ease;
}
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-sudar-marker {
    fill-opacity: 0.25;
}

/* Caption stack — fade između warn (default) i safe (.is-activated).
   Delay 0.8s pre fade-a, da igla ima vremena da se rotira. */
.cp-obuke-manevar .manevar-patch-caption {
    position: relative;
    margin-top: 16px;
    width: 100%;
    min-height: 94px;
}
.cp-obuke-manevar .manevar-caption-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-mono);
    line-height: 1.55;
    transition: opacity 0.5s ease 0.8s;
}
.cp-obuke-manevar .manevar-caption-state--warn { opacity: 1; }
.cp-obuke-manevar .manevar-caption-state--safe { opacity: 0; }
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-caption-state--warn { opacity: 0; }
.cp-obuke-manevar .manevar-cta-block.is-activated .manevar-caption-state--safe { opacity: 1; }
.cp-obuke-manevar .manevar-caption-delta {
    display: block;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.cp-obuke-manevar .manevar-caption-state--warn .manevar-caption-delta { color: var(--mn-red-bright); }
.cp-obuke-manevar .manevar-caption-state--safe .manevar-caption-delta { color: var(--mn-gold); }
.cp-obuke-manevar .manevar-caption-stamp {
    display: block;
    font-size: 9px;
    letter-spacing: 0.28em;
    color: var(--mn-fg-haze);
    text-transform: uppercase;
}
.cp-obuke-manevar .manevar-caption-stamp + .manevar-caption-stamp { margin-top: 3px; }
.cp-obuke-manevar .manevar-caption-stamp--warn   { color: var(--mn-red-bright); font-weight: 500; }
.cp-obuke-manevar .manevar-caption-stamp--stress { color: var(--mn-gold-dim);   font-weight: 500; }

/* ── Compass motto — Game of Thrones reference ──────────────────────── */
.cp-obuke-manevar .manevar-motto {
    max-width: 720px;
    margin: 72px auto 0;
    padding: 0 24px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: italic;
    color: var(--mn-gold-dim);
    letter-spacing: 0.005em;
    line-height: 1.55;
    position: relative;
}
.cp-obuke-manevar .manevar-motto::before {
    content: '✵';
    display: block;
    color: var(--mn-gold);
    font-size: 14px;
    font-style: normal;
    margin-bottom: 18px;
    opacity: 0.7;
    letter-spacing: 0;
}
.cp-obuke-manevar .manevar-motto em {
    color: var(--mn-gold);
    font-style: italic;
}

/* ── Back to top — mono link sa smooth scroll na #top (body) ────────── */
.cp-obuke-manevar .manevar-back-to-top {
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 18px 24px 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-top: 1px solid var(--mn-rule);
}
.cp-obuke-manevar .manevar-back-to-top a {
    color: var(--mn-fg-haze);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    transition: color 0.3s ease;
}
.cp-obuke-manevar .manevar-back-to-top a:hover,
.cp-obuke-manevar .manevar-back-to-top a:focus-visible {
    color: var(--mn-fg-soft);
}
.cp-obuke-manevar .manevar-back-up {
    display: inline-block;
    transition: transform 0.3s ease;
}
.cp-obuke-manevar .manevar-back-to-top a:hover .manevar-back-up,
.cp-obuke-manevar .manevar-back-to-top a:focus-visible .manevar-back-up {
    transform: translateY(-3px);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .cp-obuke-manevar .manevar-opener {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 56px;
    }
    .cp-obuke-manevar .manevar-h2 {
        font-size: clamp(24px, 5.5vw, 32px);
    }
    .cp-obuke-manevar .manevar-sub-head { margin-top: 56px; }
    .cp-obuke-manevar .manevar-sub-head--gap { margin-top: 80px; }
    .cp-obuke-manevar .manevar-sesija-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .cp-obuke-manevar .manevar-cta-block {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 48px 24px;
    }
    .cp-obuke-manevar .manevar-cta-patch {
        width: 220px;
        justify-self: center;
    }
    .cp-obuke-manevar .manevar-compass-svg {
        width: 220px;
        height: 220px;
    }
    .cp-obuke-manevar .manevar-cta-title { font-size: 26px; }
    .cp-obuke-manevar .manevar-motto { font-size: 14px; }
}

@media (max-width: 600px) {
    .cp-obuke-manevar .manevar-band {
        height: auto;
        min-height: 52px;
        padding: 10px 32px;
        flex-wrap: wrap;
        gap: 8px 14px;
    }
    .cp-obuke-manevar .manevar-meta { font-size: 10px; letter-spacing: 0.22em; }
    .cp-obuke-manevar .manevar-band::before,
    .cp-obuke-manevar .manevar-band::after { width: 5px; height: 5px; }
    .cp-obuke-manevar .manevar-status-state { white-space: normal; }
}

/* Reduced motion — preskoči ceremoniju. Sve transitions/animations
   isključene; .is-activated klasa i dalje aplicira final state instantno.
   JS handler ima sopstvenu reduced detekciju i navigira u 60ms. */
@media (prefers-reduced-motion: reduce) {
    .cp-obuke-manevar .manevar-needle-group,
    .cp-obuke-manevar .manevar-ghost,
    .cp-obuke-manevar .manevar-arc,
    .cp-obuke-manevar .manevar-tick-0,
    .cp-obuke-manevar .manevar-tick-30,
    .cp-obuke-manevar .manevar-label-0,
    .cp-obuke-manevar .manevar-label-30,
    .cp-obuke-manevar .manevar-sudar-marker,
    .cp-obuke-manevar .manevar-caption-state,
    .cp-obuke-manevar .manevar-status-state,
    .cp-obuke-manevar .manevar-status-dot,
    .cp-obuke-manevar .manevar-status-arrow,
    .cp-obuke-manevar .manevar-cta-button,
    .cp-obuke-manevar .manevar-cta-arrow,
    .cp-obuke-manevar .manevar-sesija-item,
    .cp-obuke-manevar .manevar-zauvek-item {
        transition: none !important;
        animation: none !important;
    }
    html { scroll-behavior: auto; }
}

/* Smooth scroll za back-to-top anchor (uključeno globalno za #top target,
   ali samo kad korisnik nema reduced-motion). */
html { scroll-behavior: smooth; }

/* ====================================================================
   Doc 06·B — DIVIDERI TIER 1 na OBUKE chapter trakama (mobilni ≤720px).
   zasto-band i manevar-band imaju isti „alarmni zid" obrazac kao zasto-cp
   (2px crveni borderi gore+dole + zlatni dijamanti) → jedan 1px crveni
   hairline gore + 6px brand tačka na liniji, bez donje linije/dijamanata,
   vazduh gore>dole. kat-transition-band (log traka) samo omekšan
   (2px crveni dole → 1px). Crvena = tačka, ne zid (canon Doc 04).
   ==================================================================== */
@media (max-width: 720px) {
    .cp-obuke-zasto .zasto-band,
    .cp-obuke-manevar .manevar-band {
        height: auto;
        flex-wrap: wrap;
        row-gap: 7px;
        padding: 44px 24px 22px;
        background: none;
        border-top: 1px solid var(--brand);
        border-bottom: 0;
    }
    /* leva dijamant tačka → centriran brand dot na gornjoj liniji; desna skrivena */
    .cp-obuke-zasto .zasto-band::before,
    .cp-obuke-manevar .manevar-band::before {
        left: 50%;
        top: 0;
        width: 6px;
        height: 6px;
        background: var(--brand-bright);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    .cp-obuke-zasto .zasto-band::after,
    .cp-obuke-manevar .manevar-band::after { display: none; }

    /* Bandovi centrirani: ⊢/⊣ ticks van toka (kvarili centriranje i osirotili
       u 2. red); preostali sadržaj (npr. ZAŠTO · DUBLJA ORBITA) centriran. */
    .cp-obuke-zasto .zasto-tick,
    .cp-obuke-manevar .manevar-tick { display: none; }
    .cp-obuke-zasto .zasto-band,
    .cp-obuke-manevar .manevar-band {
        justify-content: center;
        text-align: center;
    }

    /* kat-ba-head u 2 namerna reda (ne lomi se nasred fraze) */
    .cp-obuke-katalog .kat-ba-head-lead { display: block; }
    .cp-obuke-katalog .kat-ba-head-dash { display: none; }
    .cp-obuke-katalog .kat-ba-head b    { display: block; }

    /* Manevar CTA: kompas + caption IZNAD dugmeta; dugme i status centrirani.
       cta-left → display:contents da deca uđu u flex tok bloka, pa order
       interleave-uje kompas (patch) između desc-a i dugmeta. */
    .cp-obuke-manevar .manevar-cta-block {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .cp-obuke-manevar .manevar-cta-left   { display: contents; }
    .cp-obuke-manevar .manevar-cta-eyebrow { order: 1; }
    .cp-obuke-manevar .manevar-cta-title   { order: 2; }
    .cp-obuke-manevar .manevar-cta-desc    { order: 3; }
    .cp-obuke-manevar .manevar-cta-patch   { order: 4; align-self: center; margin: 4px 0 8px; }
    .cp-obuke-manevar .manevar-cta-button  { order: 5; align-self: center; }
    .cp-obuke-manevar .manevar-cta-status  { order: 6; align-self: center; text-align: center; margin-top: 18px; }

    /* „Crno polje" fix (P27.49): na ≤1023 katalog ima padding-top:56px (lin.
       ~4023). Na desktopu/tabletu taj prostor puni hero afterglow (orbite
       bleed-uju -240px kroz hero clip-path u transparentnu transition zonu).
       Na ≤720 je P27.48 ukinuo bleed (clip-path:none) → tih 56px je čista
       crnina između dna radara i prelazne trake. Traka „legne" tačno na dno
       hero bloka (P27.51: 16px→0 — Denis je i tih 16px video kao prazan
       prostor između hero i divider bloka). Band ima svoj padding-top:14px
       pa tekst nije priljubljen uz hairline. Tablet (721–1023) zadržava 56px
       jer tamo afterglow i dalje puni. */
    .cp-obuke-katalog { padding-top: 0; }

    /* kat-transition-band: log traka — omekšaj 2px crveni donji rub */
    .cp-obuke-katalog .kat-transition-band {
        border-bottom-width: 1px;
        margin-bottom: 24px;
        height: auto;
        padding-top: 14px;
        padding-bottom: 14px;
    }
    /* log tekst je bio nowrap → prelivao se van ekrana (sečen levo/desno).
       Na ≤720 traka je namerna 3-redna struktura (Denis): red 1 = sat između
       „>" i „<" (chevroni pokazuju na sat); red 2 = poruka oivičena „::" sa
       obe strane; red 3 = promena kursa. kat-band-row (contents na desktopu)
       ovde postaje flex-red. */
    .cp-obuke-katalog .kat-band-log {
        white-space: normal;
        flex-direction: column;
        align-items: center;
        row-gap: 8px;
        font-size: 10px;
        letter-spacing: 0.1em;
    }
    .cp-obuke-katalog .kat-band-row {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .cp-obuke-katalog .kat-log-chev { display: inline-block; }

    /* Vesti kajron (prvi divider na home-u): desktop je 3-kolona traka
       [label][feed][sve vesti]; stack na mobilnom je razbacao poravnanja
       (izlomljen desktop). Namerna struktura: red 1 = „● Sajber vesti" levo
       + „sve vesti →" desno; red 2 = feed preko cele širine. */
    .vch-news-inner {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 10px 14px;
    }
    .vch-news-label { grid-column: 1; grid-row: 1; justify-self: start; }
    .vch-news-all   { grid-column: 2; grid-row: 1; justify-self: end; }
    .vch-news-track-viewport { grid-column: 1 / -1; grid-row: 2; }
}

/* ====================================================================
   Home hex „step" headeri (Razgovor/Alati/Iskustvo/Dijagnostika/Oblasti):
   na mobilnom su hex + meta-tekst bili forsirani LEVO (justify-self:start),
   pa ostavljali prazan prostor desno. Denis: centriraj HEX + njegov META
   (objašnjenje koraka) da se uklope sa „Podrška" blokom (već centriran).
   Glavni naslov/kicker bloka se NE dira — ostaje kako jeste.
   ==================================================================== */
@media (max-width: 860px) {
    .vch-conv-hex,
    .vch-rhead-hex,
    .vch-isk-hex,
    .vch-diag-hex,
    .vch-oblasti-hex {
        justify-self: center;
        align-items: center;
        order: -1;            /* hex + meta IZNAD naslova (grid item reorder) */
        margin-bottom: 20px;  /* dah do naslova ispod */
    }
    .vch-conv-hex-meta,
    .vch-rhead-hex-meta,
    .vch-isk-hex-meta,
    .vch-diag-hex-meta,
    .vch-oblasti-hex-meta {
        text-align: center;
    }
}