/* layout.css — header, footer, page sekcije.
 *
 * Header i footer su mehanički port iz crvenapilula_sea_hero/src/components/Layout.tsx
 * po docs/SKYWORK_DESIGN_EXTRACTION.md sekciji 3.2.2 i 3.2.3.
 *
 * Page (Markdown stranice) tipografija ostaje stabilizovana — dolazi pravi
 * port u P3 (zasto-cp) i P4 (usluge/obuke/kontakt).
 */

/* ──────────────────────────────────────────────────────────────────────────
   Container varijante
   ────────────────────────────────────────────────────────────────────────── */
.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-7);
}
@media (max-width: 720px) {
    .container-wide { padding: 0 var(--space-5); }
    /* Mobilni horizontalni-scroll guard: dekorativne full-bleed scene (kosmos na
       /obuke/, hex grid, mašinski log-trake) dizajnirane su za 1800px frame i
       bleed-uju preko viewport-a na telefonu → horizontalni scroll. overflow-x:
       clip reže taj bleed bez kreiranja scroll-kontejnera (sticky header je van
       <main> pa ostaje netaknut). Scope: ne dira /vesti/ konzolu. */
    body:not(.page-vesti) main { overflow-x: clip; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   Screw-head marker — hex outer + inner circle, stroke-only
   Wrapper span sa inline SVG (path + circle); veličina/boja/stroke iz CSS-a.
   Dark zone overrides menjaju samo color (currentColor → stroke).
   ────────────────────────────────────────────────────────────────────────── */
.cp-octo-mark {
    width: 18px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9b1919;
    flex: 0 0 auto;
}
.cp-octo-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.cp-octo-mark path,
.cp-octo-mark circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}
.cp-services .cp-octo-mark,
.cp-cta-dark .cp-octo-mark {
    color: #9b3030;
}

/* ──────────────────────────────────────────────────────────────────────────
   Header — fixed top, refinement P3.2
   Source: Layout.tsx 37-286
   ────────────────────────────────────────────────────────────────────────── */

.cp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    height: var(--header-height);
    background: var(--header-bg);
    backdrop-filter: var(--header-blur);
    -webkit-backdrop-filter: var(--header-blur);
    /* Suptilna donja granica koja se gubi u ivicama */
    border-bottom: 1px solid transparent;
    background-image:
        linear-gradient(var(--header-bg), var(--header-bg)),
        linear-gradient(90deg, transparent 0%, var(--bg-light-rule) 30%, var(--bg-light-rule) 70%, transparent 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.cp-header__inner {
    height: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}
@media (max-width: 720px) {
    .cp-header__inner { padding: 0 var(--space-5); }
}

/* Brand blok — logo + 2-redni tekst stack */
.cp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    color: inherit;
}
.cp-brand__logo {
    width: var(--logo-header-w);
    height: var(--logo-header-h);
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    /* P10 mikro-interakcije */
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.4, 1);
    transform-origin: center center;
    will-change: transform;
}

/* Hover tilt — samo desktop pointer, prefers-reduced-motion respect */
@media (hover: hover) and (pointer: fine) {
    .cp-brand:hover .cp-brand__logo,
    .cp-brand:focus-visible .cp-brand__logo {
        transform: rotate(-1.5deg) scale(1.015);
    }
}

/* Signal pulse — disable-ovan u P11.
   Hover tilt ostaje kao jedina mikro-interakcija na logo-u.
   Keyframe ostaje definisan ali se ne primenjuje — može da se vrati
   sa jednom animation deklaracijom ako bude trebao. */
@keyframes cp-logo-pulse {
    0%, 88%, 100% { opacity: 1; }
    93%           { opacity: 0.95; }
    96%           { opacity: 1; }
}

/* Reduced-motion fallback — bez transition, bez animation */
@media (prefers-reduced-motion: reduce) {
    .cp-brand__logo {
        transition: none;
        animation: none;
    }
    .cp-brand:hover .cp-brand__logo,
    .cp-brand:focus-visible .cp-brand__logo {
        transform: none;
    }
}
.cp-brand__stack {
    display: flex;
    flex-direction: column;
    /* P8 polish: tightniji lockup između separatora i teksta + 3px gap između
       imena i URL-a (linije ne lepe, ali ostaju kao jedan blok) */
    gap: 3px;
    padding-left: 10px;
    margin-left: 0;
    border-left: 1px solid var(--brand-faint);
}
.cp-brand__name {
    color: var(--fg-light-strong);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Više vazduha pod glavnim imenom — namerno dizajniran potpis */
    line-height: 1.2;
    font-family: var(--font-sans);
}
.cp-brand__url {
    /* Sekundarna linija: malo veća (12px), tightniji tracking, boja
       fg-light-mid umesto faint da se vidi ali ne nestaje */
    color: var(--fg-light-mid);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Nav — desktop, suptilan stil bez agresivnog tab-bar bordera */
.cp-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cp-nav__link {
    position: relative;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--fg-light-mid);
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: color 0.18s ease;
}
.cp-nav__link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.25rem;
    height: 1px;
    background: var(--brand-faint);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.18s ease 0s;
}
.cp-nav__link:hover,
.cp-nav__link:focus {
    color: var(--fg-light-strong);
}
.cp-nav__link:hover::after,
.cp-nav__link:focus::after {
    transform: scaleX(1);
    transition-duration: 0.22s;
    transition-delay: 0.08s;
}
.cp-nav__link[aria-current="page"] {
    color: var(--brand);
    font-weight: 600;
}
.cp-nav__link[aria-current="page"]::after {
    background: var(--brand-faint);
    transform: scaleX(1);
}
.cp-nav__link.is-external::after {
    content: " ↗";
    position: static;
    background: none;
    height: auto;
    opacity: 0.55;
    font-size: 0.8em;
    margin-left: 0.15em;
}

/* Header CTA — ghost varijanta (P3.1 polish + P7 breathing):
   transparent bg + brand text + 1px brand border na idle.
   Hover popuni brand-faint background sa brand-hover okvirnim okvirom.
   Padding malo veći zbog veće header visine — proporcionalno. */
.cp-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: transparent;
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--brand);
    margin-left: 0.5rem;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
    line-height: 1;
}
.cp-header__cta:hover,
.cp-header__cta:focus {
    background: var(--brand-faint);
    border-color: var(--brand-hover);
    color: var(--brand-hover);
}

/* Mobile menu toggle — sakriven na desktop */
.cp-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-light-strong);
    padding: 0.5rem 0.75rem;
    font-size: 1.5rem;
    line-height: 1;
}
.cp-menu-toggle[aria-expanded="true"] .cp-menu-toggle__icon-open,
.cp-menu-toggle[aria-expanded="false"] .cp-menu-toggle__icon-close {
    display: none;
}

/* Mobile menu panel — sakriven sve dok nije otvoren */
.cp-mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
    z-index: var(--z-mobile-menu);
    flex-direction: column;
}
.cp-mobile-nav__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 3rem;
    border-bottom: 1px solid var(--border-light);
    color: #2a2a28;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}
.cp-mobile-nav__link[aria-current="page"] {
    color: var(--brand);
    background: var(--bg-light-card);
    font-weight: 600;
}
.cp-mobile-nav__cta {
    display: block;
    padding: 1rem 3rem;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

/* Mobile breakpoint — Tailwind lg = ≥1024px, ovde mobilni je <1024px */
@media (max-width: 1023px) {
    .cp-header { height: var(--header-height-mobile); }
    .cp-header__inner { padding: 0 1.5rem; }
    .cp-nav,
    .cp-header__cta { display: none; }
    .cp-menu-toggle { display: block; }
    .cp-brand__logo {
        width: var(--logo-header-w-mobile);
        height: var(--logo-header-h-mobile);
    }
    .cp-header[data-menu-open="true"] .cp-mobile-nav { display: flex; }
}

/* Main offset za fixed header — UKLONJEN 2026-05-04. Stari cp-header je bio
 * position: fixed pa je main morao da kompenzuje. Novi vch-header (Variant C)
 * je u document flow-u, nema fixed pozicioniranja, ne treba padding kompenzacija. */

/* ──────────────────────────────────────────────────────────────────────────
   Footer — paper "povratak kući" sa heks pozadinom (V3, 07-footer-prompt.md)
   Zamena starog cp-footer-a 2026-05-04: sajt počinje na paperu (hero), zatvara
   se na paperu (footer); pauza za oči posle 3 tamne sekcije zaredom.
   Koriste ga svi pages (home + inner) kroz partials/footer.php.
   ────────────────────────────────────────────────────────────────────────── */
.ftA {
    background: var(--bg-paper);
    color: #2a2a28;
    padding: 88px 32px 32px;
    border-top: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

/* SLOJ 1 — tih heksagonski grid u pozadini, gasi se ka ivicama */
.ftA::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.1' stroke-linejoin='round'><polygon points='50,2 96,28 96,80 50,106 4,80 4,28'/></svg>");
    background-size: 96px 84px;
    background-repeat: repeat;
    opacity: 0.08;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center top, black 5%, transparent 65%);
            mask-image: radial-gradient(ellipse at center top, black 5%, transparent 65%);
}

/* SLOJ 2 — dva velika dekorativna heksagona u uglovima */
.ftA::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    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='0.6' stroke-linejoin='round'><polygon points='50,2 96,28 96,80 50,106 4,80 4,28'/></svg>"),
        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='0.6' stroke-linejoin='round'><polygon points='50,2 96,28 96,80 50,106 4,80 4,28'/></svg>");
    background-position: -120px 80%, calc(100% + 120px) 30%;
    background-size: 480px 420px, 360px 312px;
    background-repeat: no-repeat;
    opacity: 0.18;
}

.ftA-inner {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ftA-stamp {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #888583;
    margin-bottom: 38px;
}
.ftA-stamp strong { color: var(--brand); font-weight: 500; }

.ftA-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 56px;
}
.ftA-brand-mark {
    color: var(--brand);
    width: 44px;
    height: 60px;
    display: block;
}

/* WORDMARK — mono, kao u headeru */
.ftA-brand-name {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: #1a1a18;
    display: inline-flex;
    align-items: baseline;
}
.ftA-brand-name .slash { color: var(--brand); font-weight: 500; margin: 0 2px; }
.ftA-brand-name em { font-style: normal; font-weight: 600; }

.ftA-brand-tag {
    font-size: 14px;
    color: #6a6864;
    text-align: center;
    max-width: 52ch;
    line-height: 1.6;
}
.ftA-divider {
    width: 60px;
    height: 1px;
    background: var(--brand);
    opacity: 0.4;
    margin: 12px auto 0;
}

.ftA-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 40px 0;
    border-top: 1px solid var(--border-light);
    position: relative;
    z-index: 1;
    background: rgba(247, 246, 243, 0.6);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}
.ftA-grid h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6a6864;
    margin: 0 0 16px;
    font-weight: 500;
}
.ftA-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ftA-grid a {
    font-size: 14px;
    color: #2a2a28;
    text-decoration: none;
}
.ftA-grid a:hover { color: var(--brand); }

/* ─── nav-pending — "u izgradnji" markeri za stranice koje nisu spreme ─────
   Renderuje se umesto <a> u header.php i footer.php nav petljama (pending=true
   flag). Vizuelno dim, ne klikabilno, "(u izgradnji)" suffix u italiku.
   Specifični kontekst (vch-nav header vs ftA-grid footer) match-uje font-size
   regularnog linka tog konteksta — pending stoji u istom ritmu. */
.nav-pending {
    cursor: default;
    user-select: none;
}
.nav-pending-tag {
    font-style: italic;
    opacity: 0.7;
    margin-left: 4px;
    letter-spacing: 0;
}
/* Header (full) i compact — dim soft text, prati .vch-nav a tipografiju */
.vch-nav .nav-pending {
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-dark-faint);
    padding: 8px 0;
    border-bottom: 2px solid transparent;
}
.vch-nav .nav-pending .nav-pending-tag {
    font-size: 11px;
    color: var(--fg-dark-faintest);
}
.vch-header-compact .vch-nav .nav-pending {
    font-size: 14px;
}
/* Footer — dim text, prati .ftA-grid a tipografiju */
.ftA-grid .nav-pending {
    font-size: 14px;
    color: #8a8a87;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
}
.ftA-grid .nav-pending .nav-pending-tag {
    font-size: 11px;
    color: #a8a8a4;
}

.ftA-cta-col { display: flex; flex-direction: column; gap: 14px; }
.ftA-cta-col .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    align-self: flex-start;
    transition: background 0.15s ease;
}
.ftA-cta-col .btn:hover { background: var(--brand-hover); color: #fff; }
.ftA-cta-col .btn::after { content: "→"; }
.ftA-cta-col .contact-line {
    font-size: 13px;
    color: #4a4a48;
    line-height: 1.6;
}
.ftA-cta-col .contact-line strong { color: #1a1a18; font-weight: 500; }

.ftA-bottom {
    border-top: 1px solid var(--border-light);
    padding: 22px 0 0;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #888583;
}

/* RESPONSIVE */
@media (max-width: 880px) {
    .ftA { padding: 64px 24px 24px; }
    .ftA-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .ftA-bottom {
        flex-direction: column;
        gap: 8px;
    }
}
@media (max-width: 540px) {
    .ftA-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Hero (Home stub) — privremeno, P2 port dolazi
   ────────────────────────────────────────────────────────────────────────── */

.hero {
    padding: var(--space-9) 0 var(--space-8);
    border-bottom: 1px solid var(--bg-light-rule);
}
.hero .display-heading {
    margin-top: var(--space-3);
    border-left: var(--border-accent) solid var(--brand);
    padding-left: var(--space-5);
}
.hero__lead {
    margin-top: var(--space-5);
    max-width: 38rem;
    color: var(--fg-light-muted);
    font-size: 1.125rem;
}
.hero__ctas {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.placeholder {
    padding: var(--space-7) 0;
    border-bottom: 1px solid var(--bg-light-rule);
}
.placeholder p { color: var(--fg-light-muted); }
.placeholder .mono-label { margin-bottom: var(--space-3); }

/* ──────────────────────────────────────────────────────────────────────────
   Page (Markdown stranice) — stabilizovana tipografija, P3 port menjaće
   ────────────────────────────────────────────────────────────────────────── */

.page { padding: var(--space-8) 0 var(--space-7); }
.page-header { margin-bottom: var(--space-8); }
.page-header .mono-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-4);
    color: var(--brand);
}
.page-header .section-heading {
    border-left: var(--border-accent) solid var(--brand);
    padding-left: var(--space-5);
    margin-top: 0;
    max-width: 56rem;
}
.page-lead-primary {
    margin-top: var(--space-5);
    margin-left: var(--space-5);
    padding-left: var(--space-5);
    border-left: 1px solid var(--bg-light-rule);
    max-width: 44rem;
    color: var(--fg-light);
    font-size: 1.25rem;
    line-height: 1.55;
    font-weight: 500;
}
.page-lead-secondary {
    margin-top: var(--space-4);
    margin-left: var(--space-5);
    padding-left: var(--space-5);
    max-width: 44rem;
    color: var(--fg-light-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}
.page-body { color: var(--fg-light); }
.page-body h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--bg-light-rule);
}
.page-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    color: var(--fg-light);
}
.page-body p { margin-bottom: var(--space-4); max-width: 40rem; }
.page-body ul, .page-body ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); max-width: 40rem; }
.page-body li { margin-bottom: var(--space-2); }
.page-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.2em; }
.page-body a:hover, .page-body a:focus { color: var(--brand-hover); }
.page-body strong { font-weight: 700; color: var(--fg-light); }
.page-body blockquote {
    margin: var(--space-5) 0;
    padding: var(--space-3) var(--space-5);
    border-left: var(--border-accent) solid var(--brand);
    background: var(--bg-light-card);
    color: var(--fg-light);
    font-style: italic;
    max-width: 40rem;
}
.page-body code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--bg-light-card);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}
.page-body pre {
    background: var(--bg-light-card);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 0.92em;
    line-height: 1.5;
}
.page-body pre code { background: transparent; padding: 0; }
.page-body hr { border: 0; border-top: 1px solid var(--bg-light-rule); margin: var(--space-7) 0; }
/* Tabela: na mobile-u tabele se ne smeju da preteku ekran.
   Wrapper bi bio idealan, ali Markdown ne pravi wrapper — koristimo
   display: block + overflow-x: auto na samoj tabeli za responsive scroll. */
.page-body table {
    width: 100%;
    max-width: 44rem;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}
.page-body th, .page-body td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--bg-light-rule);
    vertical-align: top;
}
.page-body th {
    font-weight: 600;
    background: var(--bg-light-card);
    border-bottom: 2px solid var(--bg-light-rule);
}
.page-body tr:last-child td { border-bottom: 0; }
.page-meta {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--bg-light-rule);
    color: var(--fg-light-faint);
}

/* ──────────────────────────────────────────────────────────────────────────
   HOME — Hero (P3.3)
   Source: SkyWork Home.tsx 32-202 (bez background watermark logo-a)
   ────────────────────────────────────────────────────────────────────────── */

.cp-hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-light);
    /* Bez ilustracije, predvidljiva visina između 34rem (544px) i 40rem (640px).
       Manje "huge empty" oseaj nego raniji 82vh. */
    min-height: clamp(34rem, calc(60vh - var(--header-height)), 40rem);
    /* Tihi 1px brand-faint rule na dnu — mikro-signal "ovde se prelazi
       u sledeći blok". Bez gradient fade-a, bez magle. */
    border-bottom: 1px solid var(--brand-faint);
}
@media (max-width: 1023px) {
    .cp-hero { min-height: clamp(30rem, calc(60vh - var(--header-height-mobile)), 38rem); }
}

/* ── Hero art slot — placeholder za budući dizajnerski asset ──────────
   Dve varijante kontrolisane data-art atributom:
     no-art     → ne renderuje se (default; čista svetla zona)
     static-art → ovde ide stvarni asset kao background-image
   Slot je već full-bleed pozicioniran tako da kad asset stigne, samo
   promenim data-art atribut bez dodatnog HTML-a. */
.cp-hero__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: none;
}
.cp-hero__art[data-art="static-art"] {
    display: block;
    /* placeholder — kad asset stigne, postavi background-image:url(...) ovde */
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.cp-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: inherit;
    /* Asimetričan padding — više vazduha gore (posle header-a), manje dole
       (hero "leži" na stats sekciji, prelaz je tih) */
    padding-top: var(--space-9);
    padding-bottom: var(--space-8);
}

.cp-hero__content {
    /* P9: prošireno na 56rem da H1 (clamp do 4.6rem) sa dva reda staje
       u dve namerne linije, ne 4 wrap-ovane. Lead ima zaseban max-width
       ispod, ostaje uži (36rem) za bolju čitljivost. */
    max-width: 56rem;
    /* Levi brand bar — kraći, prati visinu samo H1+lead bloka, ne CTA blok.
       Ostvareno padding-left + before pseudoelement umesto border-left celokupno. */
    padding-left: var(--space-5);
    position: relative;
    z-index: 2;
}
.cp-hero__content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    /* Bar pokriva kicker + H1 + lead, staje pre CTA bloka.
       Sa CTA margin-top na var(--space-7), bar bottom je var(--space-8). */
    bottom: var(--space-8);
    width: 3px;
    /* Subtilni gradient — od pune brand boje gore ka brand-light dole.
       Daje modulaciju, ne deluje kao ravan accent line. */
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-light) 100%);
}

.cp-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    /* Šire trakiranje — kicker dobija autoritet, mono labela diše */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    /* Tighter spacing prema H1 — kicker je tag, ne self-standing */
    margin: 0 0 var(--space-3);
    line-height: 1;
}
.cp-hero__kicker-mark {
    flex-shrink: 0;
    display: inline-block;
}
.cp-hero__kicker-prefix {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.cp-hero__kicker-slash {
    color: var(--brand);
}
/* Mobile: prefix (oktagon + //) ispada — kicker ostaje samo tekst.
   Razlog: na uskim ekranima dodatni elementi ne lome ritam, samo tekst je
   čišći. */
@media (max-width: 720px) {
    .cp-hero__kicker-prefix {
        display: none;
    }
}

.cp-hero__title {
    font-family: var(--font-sans);
    /* min 2rem (32px) za uske ekrane — 2.6rem je gušilo 320-360px viewport-e
       gde "Prvo se gubi pregled." prelazi 320px širine. 4.5vw skalira fluidno. */
    font-size: clamp(2rem, 4.5vw + 0.5rem, 4.6rem);
    font-weight: 800;
    /* Vrlo gust ritam — bez ilustracije H1 je glavni vizuelni centar */
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-5);
}
.cp-hero__hline {
    /* Svaki deo naslova je svoj blok — "Prvo se gubi pregled." i
       "Onda kreću incidenti." su namerne dve linije na desktop-u
       umesto wrapping-a kroz <br>. Na mobile-u (uži container)
       sadržaj se može prirodno prelomiti unutar bloka. */
    display: block;
}
.cp-hero__cursor {
    display: inline-block;
    /* P10 cursor — line-box logic, ne optical offset.
       Width 2px = caret feel (ne dekorativna 3px linija).
       Height 0.92em pokriva descender-bottom do cap-top u liniji
       (Inter Bold 800: descender ~0.2em + cap-height ~0.72em ≈ 0.92em).
       vertical-align: text-bottom anchor-uje cursor-ov bottom za
       descender-bottom — top automatski sleže na cap-top zonu. */
    width: 2px;
    height: 0.92em;
    background: var(--brand);
    margin-left: 6px;
    vertical-align: text-bottom;
    /* Sporije + ograničen broj iteracija — kursor blinkne 8 puta (~13s)
       i staje na vidljivom stanju. Daje "system live" mikro-signal pri
       prvom učitavanju, ne smeta čitanju kasnije. */
    animation: cp-blink 1.6s step-end 8;
    animation-fill-mode: forwards;
}
@keyframes cp-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-hero__cursor { animation: none; opacity: 1; }
}

.cp-hero__lead {
    font-size: 1.125rem;
    line-height: 1.78;
    color: var(--fg-light-mid);
    /* Lead ostaje uži od H1 — 36rem za udobnu čitljivost
       čak i kad je H1 u širem 56rem container-u */
    max-width: 36rem;
    margin: 0;
    /* Avoid single-word orphan na poslednjem redu (Chrome 117+, FF 121+, Safari 17.5+) */
    text-wrap: pretty;
}

.cp-hero__ctas {
    /* Sa manjom hero visinom, vazduh pre CTA je manji ali precizan */
    margin-top: var(--space-7);
    display: flex;
    gap: var(--space-6);
    align-items: center;
    flex-wrap: wrap;
}

/* Primary i sekundarni CTA stilovi (zajednički) */
.cp-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    background: var(--brand);
    color: #fff !important;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.2s ease;
    line-height: 1;
}
.cp-cta-primary:hover,
.cp-cta-primary:focus {
    background: var(--brand-hover);
    color: #fff !important;
}

.cp-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    /* P9: blago veći i deblji — sekundarni CTA dobija prisustvo,
       ali ostaje link-style, ne dugme */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-light-mid);
    text-decoration: none;
    transition: color 0.15s ease;
    padding: 0.25rem 0;
}
.cp-cta-link:hover,
.cp-cta-link:focus {
    color: var(--brand);
}

/* ──────────────────────────────────────────────────────────────────────────
   HOME — Stats (Profesionalni trag, P3.5)
   ────────────────────────────────────────────────────────────────────────── */

.cp-stats {
    background: var(--bg-dark);
    color: var(--fg-dark);
}
.cp-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.cp-stats__cell {
    /* Tighter padding — dark blok deluje "weighted", manje dashboard utisak */
    padding: var(--space-7) var(--space-6);
    border-right: 1px solid var(--bg-dark-rule);
    position: relative;
}
.cp-stats__cell:last-child { border-right: none; }

/* Kanonski grid frame — top + bottom rule kao deo jedinstvenog sistema.
   Brand tip je "potpis" sekcije, oslanjao se na top rule, ne na pojedinačnu
   ćeliju (raniji ::before na first cell je bio asimetričan signal). */
.cp-stats__rule {
    position: relative;
    height: 1px;
    background: var(--bg-dark-rule);
}
.cp-stats__tip {
    position: absolute;
    left: 0;
    top: -1px;
    width: 24px;
    height: 2px;
    background: var(--brand);
    display: block;
}
.cp-stats__number {
    font-family: var(--font-sans);
    font-size: clamp(2.6rem, 3.8vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--fg-dark-strong);
    margin-bottom: 0.5rem;
}
.cp-stats__label {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--fg-dark-soft);
    line-height: 1.5;
}
.cp-stats__context {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-dark-mute2);
    margin-top: 0.75rem;
    line-height: 1.55;
}
.cp-stats__note {
    /* Bez border-top-a — bottom rule iznad note-a je sad zaseban grid element.
       Note pripada modulu kao zaseban full-width red, ne kao rub note-a.
       Drop italic — regular sans, fg-dark-mute2 daje čitljivost bez "literarnog"
       tona koji je remetio strukturu. */
    padding: var(--space-6);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--fg-dark-mute2);
    line-height: 1.65;
    max-width: 52rem;
    margin: 0;
}

@media (max-width: 880px) {
    .cp-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .cp-stats__cell:nth-child(2) { border-right: none; }
    .cp-stats__cell:nth-child(-n+2) { border-bottom: 1px solid var(--bg-dark-rule); }
}
@media (max-width: 480px) {
    .cp-stats__grid { grid-template-columns: 1fr; }
    .cp-stats__cell { border-right: none; border-bottom: 1px solid var(--bg-dark-rule); }
    .cp-stats__cell:last-child { border-bottom: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Section heads (zajednički za Signali, Tri stuba)
   ────────────────────────────────────────────────────────────────────────── */

.cp-section__head {
    margin-bottom: var(--space-7);
    max-width: 56rem;
}
.cp-section__head--split {
    display: grid;
    /* auto 1fr — heading shrinks to content, lead je odmah desno (jasna proximity).
       1fr 1fr je pravio "praznu rupu" između heading-a i lead-a kad heading ne
       ispuni 50% širine. */
    grid-template-columns: auto 1fr;
    gap: var(--space-7);
    /* align-items: end aligns box bottoms; last baseline aligns text baselines.
       Različitost line-height heading/lead pravila pomak ~2px box→baseline,
       last baseline taj pomak izjednačava. Browseri pre Chrome 100/FF 100
       padaju na end (graceful). */
    align-items: end;
    align-items: last baseline;
    max-width: none;
}
.cp-section__head--split .cp-section__heading {
    /* U split layout-u h2 i lead se bottom-align-uju kroz align-items: end;
       0.75rem margin-bottom h2-a bi inače gurao heading bottom 12px iznad lead bottom-a. */
    margin-bottom: 0;
}
@media (max-width: 720px) {
    .cp-section__head--split { grid-template-columns: 1fr; }
    .cp-section__head--split .cp-section__heading { margin-bottom: 0.75rem; }
}
.cp-section__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Smiren ton — više nije brand crvena na kicker tekstu, samo na octo_mark.
       Daje vazduha kartici, mark ostaje brand signal. */
    color: var(--fg-light-faint);
    margin: 0 0 0.75rem;
    line-height: 1;
}
.cp-section__kicker-mark { flex-shrink: 0; display: inline-block; }
.cp-section__heading {
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 2.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--fg-light-deep);
    margin: 0 0 0.75rem;
}
.cp-section__lead {
    font-size: 1rem;
    color: var(--fg-light-mid);
    line-height: 1.7;
    max-width: 40rem;
    margin: 0;
    /* Orphan-protection na 2-line wrap-ovima */
    text-wrap: pretty;
}

/* ──────────────────────────────────────────────────────────────────────────
   HOME — Signali (P3.5)
   ────────────────────────────────────────────────────────────────────────── */

.cp-signals {
    background: var(--bg-light);
    padding: var(--space-section) 0;
}

/* P13.3 — diagnostic panel: grid + CTA su jedna zatvorena celina.
   Suptilan hairline border zatvara panel sa svih strana; bottom padding
   sekcije osigurava jasnu vertikalnu pauzu pre Tri stuba. */
.cp-signals__panel {
    border: 1px solid var(--bg-light-rule);
    background: var(--bg-light);
}
.cp-signals__rule + .cp-signals__panel {
    margin-top: 0;
}
.cp-signals__panel .cp-signals__grid {
    margin-top: 0;
}
.cp-signals__grid {
    display: grid;
    /* min(340px, 100%) — na viewport-u <340px ne forsira širinu ćelije
       preko container-a (sprečava horizontal scroll). */
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 1px;
    background: var(--bg-light-rule);
    margin-top: var(--space-7);
}
.cp-signal {
    background: var(--bg-light);
    /* Više vazduha unutar kartice — premium osećaj, ne stisnuto */
    padding: var(--space-7) var(--space-6);
    transition: background 0.15s ease;
}
.cp-signal:hover {
    background: var(--bg-light-card);
}
.cp-signal__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.cp-signal__mark { flex-shrink: 0; }
.cp-signal__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Manje crvenih elemenata po kartici — label u mute tonu, signal mark
       ostaje brand kao jedini crveni indikator. */
    color: var(--fg-light-faint);
    line-height: 1;
}
.cp-signal__title {
    font-family: var(--font-sans);
    /* P10: 17→18px, svaki signal je sistemska oznaka, treba mikro-težinu */
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.cp-signal__consequence {
    /* P10: 14→15px za udobnu čitljivost body teksta */
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    margin: 0;
}

.cp-signals__cta {
    padding: var(--space-5);
    border-top: 2px solid var(--brand);
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.cp-signals__cta p {
    font-size: 1rem;
    color: var(--fg-light);
    line-height: 1.7;
    max-width: 44rem;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   HOME — Tri stuba (P3.5)
   ────────────────────────────────────────────────────────────────────────── */

.cp-pillars {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--border-light-soft);
}
.cp-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--space-7);
}
.cp-pillar {
    padding: var(--space-7) var(--space-6) var(--space-7) 0;
    border-top: 1px solid var(--bg-light-rule);
    /* Vertikalni separator iz brand-faint umesto generic-a — fina veza
       sa crvenim "kapama" prvog pillar-a i hero brand bar-om. */
    border-right: 1px solid var(--brand-faint);
    position: relative;
}
.cp-pillar:nth-child(n+2) { padding-left: var(--space-6); }
.cp-pillar:last-child { border-right: none; padding-right: 0; }
/* "Tip" marker — mali brand-faint vertikalni "rep" na vrhu separatora
   (pravi se kontinuitet sa prvim pillar brand kapom) */
.cp-pillar:not(:last-child)::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 1px;
    height: var(--space-3);
    background: var(--brand);
    opacity: 0.35;
}
.cp-pillar--first {
    border-top-color: var(--brand);
    border-top-width: 2px;
    padding-top: calc(var(--space-7) - 1px);
}
.cp-pillar--first::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--brand);
}
.cp-pillar__number {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Malo prisutniji — "T-01" "L-02" "P-03" su mikro-label-i, ne nestaju */
    color: var(--fg-light-faint);
    margin-bottom: 1.25rem;
    line-height: 1;
}
.cp-pillar__title {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg-light-strong);
    margin: 0 0 1rem;
    line-height: 1.2;
}
.cp-pillar__description {
    font-size: 16px;
    color: var(--fg-light-muted);
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 880px) {
    .cp-pillars__grid { grid-template-columns: 1fr; }
    .cp-pillar {
        padding: var(--space-6) 0 !important;
        border-right: none;
        border-top: 1px solid var(--bg-light-rule);
    }
    .cp-pillar--first { border-top-color: var(--brand); border-top-width: 2px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   HOME — Final Kontakt CTA (zone-dark, P3.5)
   ────────────────────────────────────────────────────────────────────────── */

.cp-cta-dark {
    background: var(--bg-dark);
    color: var(--fg-dark);
    padding: var(--space-9) 0;
    border-top: 2px solid var(--brand);
}
.cp-cta-dark__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-7);
    align-items: center;
}
.cp-cta-dark__content { max-width: 52rem; }
.cp-cta-dark__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-dark-haze);
    margin: 0 0 1rem;
    line-height: 1;
}
.cp-cta-dark__kicker-mark { flex-shrink: 0; }
.cp-cta-dark__heading {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--fg-dark-strong);
    margin: 0 0 1rem;
    line-height: 1.2;
}
.cp-cta-dark__lead {
    font-size: 16px;
    color: var(--fg-dark-mute2);
    line-height: 1.7;
    max-width: 52rem;
    margin: 0;
}
.cp-cta-dark__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border: 1.5px solid rgba(155, 25, 25, 0.7);
    color: var(--fg-dark-strong);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    align-self: center;
}
.cp-cta-dark__action:hover,
.cp-cta-dark__action:focus {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

@media (max-width: 880px) {
    .cp-cta-dark__inner { grid-template-columns: 1fr; }
    .cp-cta-dark__action { justify-self: start; }
}

/* ──────────────────────────────────────────────────────────────────────────
   P11 — Signals canonical frame (rule + tip iznad grid-a)
   Konzistentno sa stats blokom — sekcija deluje kao jedan modul.
   ────────────────────────────────────────────────────────────────────────── */

.cp-signals__rule {
    position: relative;
    height: 1px;
    background: var(--bg-light-rule);
    margin-top: var(--space-7);
}
.cp-signals__tip {
    position: absolute;
    left: 0;
    top: -1px;
    width: 24px;
    height: 2px;
    background: var(--brand);
    display: block;
}

/* ──────────────────────────────────────────────────────────────────────────
   P11 — Pillars rule (brand tip iznad prvog pillar-a, kao section signature)
   ────────────────────────────────────────────────────────────────────────── */

.cp-pillars__rule {
    position: relative;
    height: 1px;
    background: var(--bg-light-rule);
    margin-top: var(--space-7);
}
.cp-pillars__tip {
    position: absolute;
    left: 0;
    top: -1px;
    width: 24px;
    height: 2px;
    background: var(--brand);
    display: block;
}
/* Sad rule iznad pillars__grid radi posao "signature" — uklanjamo
   dupli brand mark sa first pillar-a (border-top: 2px brand → 1px) */
.cp-pillars__rule + .cp-pillars__grid {
    margin-top: 0;
}
.cp-pillars__rule + .cp-pillars__grid .cp-pillar--first {
    border-top: 1px solid var(--bg-light-rule);
    padding-top: var(--space-7);
}
.cp-pillars__rule + .cp-pillars__grid .cp-pillar--first::before {
    display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   P11 — Pet oblasti rada (Kako se uvodi red)
   Dark zone, lista 5 redova. Number + Title + Outcome.
   ────────────────────────────────────────────────────────────────────────── */

.cp-services {
    background: var(--bg-dark-subtle);
    color: var(--fg-dark);
    padding: var(--space-section) 0;
}
.cp-services__head {
    /* align-items se nasleđuje iz .cp-section__head--split (last baseline) */
}
.cp-services__kicker {
    color: var(--brand);
}
.cp-services__heading {
    color: var(--fg-dark-strong);
}
.cp-services__lead {
    color: var(--fg-dark-mute2);
}

.cp-services__rule {
    position: relative;
    height: 1px;
    background: var(--bg-dark-rule);
    margin-top: var(--space-7);
}
.cp-services__tip {
    position: absolute;
    left: 0;
    top: -1px;
    width: 24px;
    height: 2px;
    background: var(--brand);
    display: block;
}

.cp-services__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cp-service {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--space-6);
    align-items: flex-start;
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--bg-dark-rule);
}
.cp-service:last-child {
    border-bottom: 1px solid var(--bg-dark-rule);
}
.cp-service__number {
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 300;
    color: rgba(240, 237, 232, 0.18);
    line-height: 1;
    padding-top: 0.2rem;
    letter-spacing: 0.02em;
}
.cp-service__body {
    max-width: 52rem;
}
.cp-service__title {
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    color: var(--fg-dark-strong);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.cp-service__outcome {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--fg-dark-mute2);
    line-height: 1.7;
    margin: 0;
}

.cp-services__action {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--bg-dark-rule);
}
.cp-cta-primary--dark {
    background: var(--brand);
    color: #fff !important;
    padding: 0.85rem 1.6rem;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.cp-cta-primary--dark:hover,
.cp-cta-primary--dark:focus {
    background: var(--brand-hover);
    color: #fff !important;
}

@media (max-width: 720px) {
    .cp-service { grid-template-columns: 3.5rem 1fr; gap: var(--space-5); }
    .cp-service__number { font-size: 1.4rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   P11 — Resursi i alati (light, 3-col text grid)
   Bez placeholder slika — kicker / title / benefit / cta link.
   ────────────────────────────────────────────────────────────────────────── */

.cp-resources {
    background: var(--bg-light);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-resources__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--bg-light-rule);
    margin-top: var(--space-7);
    border-top: 1px solid var(--bg-light-rule);
    border-bottom: 1px solid var(--bg-light-rule);
}
.cp-resource {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-6);
    background: var(--bg-light);
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease;
}
.cp-resource:hover,
.cp-resource:focus {
    background: var(--bg-light-card);
}
.cp-resource__kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-light-faint);
    line-height: 1;
}
.cp-resource__title {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.cp-resource__benefit {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    margin: 0 0 var(--space-3);
    flex-grow: 1;
}
.cp-resource__cta {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand);
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
}
.cp-resource:hover .cp-resource__cta,
.cp-resource:focus .cp-resource__cta {
    color: var(--brand-hover);
}

@media (max-width: 880px) {
    .cp-resources__grid { grid-template-columns: 1fr; gap: 1px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   P14 — Mobile polish
   Manje agresivni paddings, kompaktnije sekcije, hero ne pojede ekran.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Sekcije: 80px vertikalno → 48px (manje praznine između blokova).
       cp-stats nema sekcijski padding na desktop-u (cell padding nosi posao),
       ali na mobile-u su cell padding-i smanjeni — sekcija dobija svoje vazduh
       da ne deluje sleđena uz hero gore i signale dole. */
    .cp-stats,
    .cp-signals,
    .cp-pillars,
    .cp-services,
    .cp-resources {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }

    /* Hero: tighter inner padding (manje vertikalno trošenje) */
    .cp-hero__inner {
        padding-top: var(--space-7);
        padding-bottom: var(--space-6);
    }
    .cp-hero {
        min-height: clamp(26rem, calc(70vh - var(--header-height-mobile)), 34rem);
    }

    /* Signal kartice: 48×32 → 32×24 padding */
    .cp-signal { padding: var(--space-6) var(--space-5); }

    /* Resource kartice: isto */
    .cp-resource { padding: var(--space-6) var(--space-5); }

    /* Stats ćelije: 48×32 → 32×24 */
    .cp-stats__cell { padding: var(--space-6) var(--space-5); }
    .cp-stats__note { padding: var(--space-5); }

    /* Final CTA dark: 96 → 56 */
    .cp-cta-dark { padding: var(--space-7) 0; }
    .cp-cta-dark__inner { padding: 0 var(--space-5); }

    /* Pillars: tigh padding-top da heading ne odlazi previše visoko */
    .cp-pillar { padding: var(--space-5) 0 !important; }

    /* Service redovi: tighter */
    .cp-service { padding: var(--space-5) 0; }

    /* Signals CTA: stack u kolonu na narrow umesto wrap */
    .cp-signals__cta { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* Smaller still — uži telefoni */
@media (max-width: 480px) {
    .cp-signal { padding: var(--space-5) var(--space-4); }
    .cp-resource { padding: var(--space-5) var(--space-4); }
    .cp-stats__cell { padding: var(--space-5) var(--space-4); }
    .cp-stats__note { padding: var(--space-4); }
}

/* ──────────────────────────────────────────────────────────────────────────
   P14.1 — Inner page (Markdown) mobile polish
   Page-header indent dial-in, lead-primary border tighter, vertical rhythm
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Page-header: 4px brand border + 24px padding-left = 28px indent na 320px.
       Tighter na mobile da H1 ima više prostora. */
    .page-header .section-heading {
        padding-left: var(--space-4);
    }

    /* Lead pasusi: ne treba dupli indent (margin + padding) na mobile */
    .page-lead-primary,
    .page-lead-secondary {
        margin-left: 0;
        padding-left: var(--space-4);
    }

    /* Page body H2: tighter vertical rhythm na mobile */
    .page-body h2 {
        margin-top: var(--space-6);
        padding-top: var(--space-4);
    }

    /* Page hero CTA — primary CTA full-width-ish na mobile (lakše tap) */
    .cp-hero__ctas { gap: var(--space-4); }
    .cp-cta-primary {
        padding: 0.95rem 1.4rem;
        min-height: 44px;
    }

    /* Hero kicker: 11px može da deluje sitno; držimo 11px ali proverimo da
       se reči ne lome — letter-spacing iz 0.14 → 0.1 daje malo respira */
    .cp-hero__kicker {
        letter-spacing: 0.1em;
    }

    /* Footer cols gap tighter — 2.5rem postojeći → manji */
    .cp-footer__cols {
        gap: 2rem;
        padding: var(--space-7) var(--space-5);
    }
    .cp-footer__hero {
        padding: var(--space-7) var(--space-5) var(--space-6);
    }

    /* Diagnostic panel border na mobile dropujemo kompletno; vertikalni gap
       prirodno odvaja celinu i panel border-line na 320px deluje too tight */
    .cp-signals__panel {
        border-left: none;
        border-right: none;
    }
}

/* Touch target minimum: nav i mobile-nav linkovi imaju velike padding-e,
   ali brand link u headeru je 40×54 logo + tekst = ~40px tap area.
   Bolje 44+ za AAA. Padding na cp-brand za tap target. */
@media (max-width: 1023px) {
    .cp-brand {
        padding: 4px;
        margin: -4px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   P14.7 — /obuke/ landing template
   Editorial layout, hairline borders, broj-driven panele, reuse cp-hero +
   cp-cta-dark patterna. Sve klase scope-ovane pod .cp-obuke-* da ne curi
   u home, usluge, zasto-cp.

   P14.7b — color pass: tople pozadine za audience/trainings/memory daju
   ritam i karakter; trainings sekcija je vizuelni centar (sand bg, white
   paneli, brand-red brojevi). Lokalne CSS varijable scope-ovane na
   body.page-obuke da ne procure globalno.
   ────────────────────────────────────────────────────────────────────────── */

body.page-obuke {
    /* P14.7e — brand correction. P14.7c warm wine-charcoal palette odbačena
       jer je vukla ka furniture / restauracija nameštaja registru. Sad:
       cooler neutral palette za light sekcije + reuse existing dark tokena
       (--bg-dark-subtle/--bg-dark-rule) za trainings — vizuelna doslednost
       sa home Pet oblasti rada. Brand red ostaje kao topli signal-akcenat. */
    --cp-obuke-bg-mist:   #eceae3;  /* cool light neutral — audience sekcija */
    --cp-obuke-bg-paper:  #f5f3ed;  /* cooler near-white — paneli */
    /* Body bg kosmos crno-crn — iza katalog gradient bg (koji je transparent
       gornjih 48px za afterglow zonu). Bez ovoga, kroz transparent katalog
       zonu vidi se default beli body bg. Obezbeđuje da hero radar bleed +
       transition band imaju konzistentnu kosmos pozadinu. */
    background: #08080c;
}

/* Hero second lead — manji, smireniji ton, bliže primary lead-u.
   P14.7o: margin-top space-3 → space-4 za bolji ritam između leadova. */
.cp-hero__lead--secondary {
    font-size: 1rem;
    color: var(--fg-light-faint);
    margin-top: var(--space-4);
}

/* Hero H1 na /obuke/ — više vazduha između kicker-a i naslova
   (default cp-hero__kicker margin-bottom je var(--space-3) = 12px;
   na obuke bumpamo na space-5 = 24px da H1 diše od octagona/overline). */
body.page-obuke .cp-hero__kicker {
    margin-bottom: var(--space-5);
}

/* ── 2. Kome je namenjeno ───────────────────────────────────────────────── */
.cp-obuke-audience {
    background: var(--cp-obuke-bg-mist);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-obuke-audience__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(155, 25, 25, 0.18); /* brand-tinted hairline */
    margin-top: var(--space-7);
    border-top: 2px solid var(--brand);
    border-bottom: 1px solid var(--bg-light-rule);
}
/* P14.7q: reading highlight — vrlo blag bg lighten, bez cursor:pointer,
   bez transform. Kartice nisu linkovi, ali oko dobija fini "pratim te"
   feedback. */
.cp-obuke-audience__card {
    background: var(--cp-obuke-bg-paper);
    padding: var(--space-7) var(--space-6);
    transition: background 220ms ease;
}
.cp-obuke-audience__card:hover {
    background: var(--bg-light);
}
.cp-obuke-audience__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--space-4);
    line-height: 1;
}
.cp-obuke-audience__title {
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}
.cp-obuke-audience__description {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    margin: 0;
}

/* ── 3. Šta znaju posle 60 minuta ──────────────────────────────────────── */
.cp-obuke-outcomes {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
}
.cp-obuke-outcomes__list {
    list-style: none;
    margin: var(--space-7) 0 0;
    padding: 0;
    border-top: 1px solid var(--bg-light-rule);
}
/* P14.7q: reading highlight — bg shift na hover plus blagi pomak broja
   ka brand-u; bez cursor:pointer (nije link). Padding ima horizontalni
   prostor za bg da se vidi širim "letvicom" na hover. */
.cp-obuke-outcome {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--space-6);
    align-items: flex-start;
    padding: var(--space-6) var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
    border-bottom: 1px solid var(--bg-light-rule);
    transition: background 220ms ease;
}
.cp-obuke-outcome:hover {
    background: var(--bg-light);
}
.cp-obuke-outcome__num {
    transition: color 220ms ease;
}
.cp-obuke-outcome:hover .cp-obuke-outcome__num {
    color: var(--brand);
}
.cp-obuke-outcome__num {
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 300;
    color: var(--fg-light-haze);
    line-height: 1;
    padding-top: 0.2rem;
    letter-spacing: 0.02em;
}
.cp-obuke-outcome__body {
    max-width: 52rem;
}
.cp-obuke-outcome__title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.cp-obuke-outcome__description {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    margin: 0;
}

/* ── 4. Tri konkretne obuke ─────────────────────────────────────────────── */
/* P14.7e centerpiece: neutral graphite sekcija (reuse --bg-dark-subtle iz
   home Pet oblasti rada — vizuelna doslednost), paper paneli unutra,
   inverted text na graphite section head. Druga obuka (nth-child 2)
   dobija 3px brand inset shadow akcenat — širi cilj publike, najvažnija
   za menadžment. */
.cp-obuke-trainings {
    background: var(--bg-dark-subtle);
    color: var(--fg-dark);
    padding: var(--space-section) 0;
    border-top: 0;
}
.cp-obuke-trainings .cp-section__heading {
    color: var(--fg-dark-strong);
}
.cp-obuke-trainings .cp-section__lead {
    color: var(--fg-dark-mute2);
}
.cp-obuke-trainings__list {
    margin-top: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--bg-dark-rule);
    border-top: 2px solid var(--brand);
}
/* P14.7o: training panel sam nije link (CTA "Razgovarajmo o ovoj obuci"
   unutar je link sa svojim hover state-om). Panel hover bg + number activation
   uklonjeni — panel ne sme da glumi klikabilan. CTA link unutra preuzima
   sav interaktivni rad.
   Drugi panel 3px brand inset uklonjen — copy meta linije već diferencira
   ("Prezentacija za širu publiku · posebno korisna menadžmentu"); inset bez
   jasne semantike je deluvao slučajno. Tri panela jednaka, editorial. */
.cp-obuke-training {
    background: var(--cp-obuke-bg-paper);
    padding: var(--space-7) var(--space-6);
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: var(--space-7);
    align-items: flex-start;
}
.cp-obuke-training__num {
    font-family: var(--font-mono);
    font-size: clamp(2.4rem, 3.6vw, 3rem);
    font-weight: 300;
    color: var(--brand);
    opacity: 0.85;
    line-height: 1;
    letter-spacing: 0.02em;
}
/* Meta na paper bg + octagon prefix — fg-faint je 4.7:1 OK na paper,
   ali fg-mid daje jaču signalnu vrednost meta linije */
.cp-obuke-training__meta {
    color: var(--fg-light-mid);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cp-obuke-training__content {
    max-width: 56rem;
}
.cp-obuke-training__title {
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.cp-obuke-training__meta {
    font-family: var(--font-mono);
    /* P14.7o: 11px → 12px — meta je važna info linija, ne fusnota; bolja
       čitljivost na paper bg-u. */
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-light-faint);
    margin: 0 0 var(--space-5);
    line-height: 1.4;
}
.cp-obuke-training__description {
    font-size: 16px;
    color: var(--fg-light-mid);
    line-height: 1.75;
    margin: 0 0 var(--space-4);
    max-width: 48rem;
}
.cp-obuke-training__description + .cp-obuke-training__description {
    margin-top: 0;
}
.cp-obuke-training__bullets {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cp-obuke-training__bullets li {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.6;
    padding-left: var(--space-5);
    position: relative;
}
.cp-obuke-training__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 14px;
    height: 1px;
    background: var(--brand);
}
/* P14.7q: training CTA dobija pill tretman — 1px hairline border idle,
   brand-faint bg + brand border na hover/focus, plus arrow shift iz P14.7e.
   Više prisustva nego goli tekstualni link, ali ne pretvara se u puno
   crveno dugme (3 takva bi narušila ravnotežu). */
.cp-obuke-training__cta {
    margin-top: var(--space-3);
    padding: 0.65rem 1rem;
    border: 1px solid var(--bg-light-rule);
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.cp-obuke-training__cta:hover,
.cp-obuke-training__cta:focus-visible {
    background: var(--brand-faint);
    border-color: var(--brand);
    color: var(--brand-hover);
}

/* ── 5. Kako izgleda sesija ─────────────────────────────────────────────── */
.cp-obuke-session {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
}
.cp-obuke-session__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--bg-light-rule);
    margin-top: var(--space-7);
    border: 1px solid var(--bg-light-rule);
}
/* P14.7q: reading highlight — blag lighten ka bg-light. Bez cursor:pointer. */
.cp-obuke-session__cell {
    background: var(--bg-light-soft);
    padding: var(--space-6) var(--space-6);
    transition: background 220ms ease;
}
.cp-obuke-session__cell:hover {
    background: var(--bg-light);
}
.cp-obuke-session__title {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.cp-obuke-session__description {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    margin: 0;
}

/* ── 6. Zašto ostaje u pamćenju ────────────────────────────────────────── */
/* Section top: 1px brand red (tanka section start mark).
   Items: uniform 1px gray hairline između (uključujući iznad prvog reda).
   Head: 3px brand vertikalni stub. Brand red u dva orientation-a (jedan
   horizontalan tanak na vrhu, jedan vertikalan jak na head) ne kompetira. */
.cp-obuke-memory {
    background: var(--bg-light);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--brand);
}
.cp-obuke-memory__split {
    display: grid;
    grid-template-columns: minmax(0, 22rem) 1fr;
    gap: var(--space-8);
    align-items: flex-start;
}
.cp-obuke-memory__head {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    padding-left: var(--space-5);
    /* Padding-top usaglašen sa item padding-top (var(--space-5)) tako da
       heading i prvi item title sede u istoj horizontali, plus hover inset
       linije na svim items imaju istu visinu. */
    padding-top: var(--space-5);
    /* Brand red vertikalni stub — jedini brand mark u sekciji. */
    border-left: 3px solid var(--brand);
}
.cp-obuke-memory__items {
    display: flex;
    flex-direction: column;
    /* Gap uklonjen — item padding sad nosi i razmak između, tako da hover bg
       uključuje breathing ispod teksta umesto da staje uz dno. */
}
/* P14.7q + r: reading highlight bg fade + simetričan padding gore/dole tako
   da hover bg ne deluje "nabijeno dole" — tekst diše unutar svetlog rama. */
.cp-obuke-memory__item {
    border-top: 1px solid var(--bg-light-rule);
    padding: var(--space-6) var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
    transition: background 220ms ease;
}
.cp-obuke-memory__item:hover {
    background: var(--cp-obuke-bg-mist);
}
/* First item nasleđuje sve iz base (uključujući 1px gray border-top)
   — uniform hairline ritam preko sva tri item-a. */
.cp-obuke-memory__title {
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.cp-obuke-memory__description {
    font-size: 16px;
    color: var(--fg-light-mid);
    line-height: 1.75;
    margin: 0;
    max-width: 44rem;
}

/* CTA dark email klasa uklonjena u P14.7e — email više nije primarni CTA
   na /obuke/, kontakt forma preuzima posao. */

/* Scoped CTA link arrow shift na obuke — daje "live" signal hover-a bez
   diranja globalnog cp-cta-link rule-a koji se koristi i na home. */
body.page-obuke .cp-cta-link span[aria-hidden="true"] {
    display: inline-block;
    transition: transform 220ms ease;
}
body.page-obuke .cp-cta-link:hover span[aria-hidden="true"],
body.page-obuke .cp-cta-link:focus span[aria-hidden="true"] {
    transform: translateX(4px);
}

/* CTA primary i dark action takođe dobijaju arrow shift na obuke */
body.page-obuke .cp-cta-primary span[aria-hidden="true"],
body.page-obuke .cp-cta-dark__action span[aria-hidden="true"] {
    display: inline-block;
    transition: transform 220ms ease;
}
body.page-obuke .cp-cta-primary:hover span[aria-hidden="true"],
body.page-obuke .cp-cta-primary:focus span[aria-hidden="true"],
body.page-obuke .cp-cta-dark__action:hover span[aria-hidden="true"],
body.page-obuke .cp-cta-dark__action:focus span[aria-hidden="true"] {
    transform: translateX(4px);
}

/* ── Mobile (≤880, ≤720, ≤480) ─────────────────────────────────────────── */
@media (max-width: 880px) {
    .cp-obuke-audience__grid {
        grid-template-columns: 1fr;
    }
    .cp-obuke-session__grid {
        grid-template-columns: 1fr;
    }
    .cp-obuke-memory__split {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .cp-obuke-memory__head {
        position: static;
        padding-left: var(--space-4);
        /* border-left brand stub ostaje — radi i na mobile kao identitetski mark */
    }
}

@media (max-width: 720px) {
    /* Sekcije: padding tighter na mobile (već postoji za druge) */
    .cp-obuke-audience,
    .cp-obuke-outcomes,
    .cp-obuke-trainings,
    .cp-obuke-session,
    .cp-obuke-memory {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }

    .cp-obuke-audience__card { padding: var(--space-6) var(--space-5); }
    .cp-obuke-session__cell { padding: var(--space-5); }

    /* Outcomes: tighter columns na mobile */
    .cp-obuke-outcome {
        grid-template-columns: 3.5rem 1fr;
        gap: var(--space-5);
        padding: var(--space-5) 0;
    }
    .cp-obuke-outcome__num {
        font-size: 1.4rem;
    }

    /* Trainings: stack number iznad content na mobile */
    .cp-obuke-training {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-5);
    }
    .cp-obuke-training__num {
        font-size: 2rem;
    }

    /* Memory: items tighter */
    .cp-obuke-memory__item {
        padding-top: var(--space-4);
    }
}

@media (max-width: 480px) {
    .cp-obuke-audience__card { padding: var(--space-5) var(--space-4); }
    .cp-obuke-session__cell { padding: var(--space-5) var(--space-4); }
    .cp-obuke-training {
        padding: var(--space-5) var(--space-4);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   P14.8 — /zasto-cp/ landing template
   Editorial layout — story → principles → persona → CTA. Reuse cp-hero,
   cp-section__head--split, cp-cta-dark patterna.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Ime i priča ────────────────────────────────────────────────────────── */
.cp-zasto-story {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-zasto-story__body {
    margin-top: var(--space-7);
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.cp-zasto-story__body p {
    font-size: 17px;
    color: var(--fg-light);
    line-height: 1.78;
    margin: 0;
}

/* ── Principi prevedeni u korist ───────────────────────────────────────── */
.cp-zasto-principles {
    background: var(--bg-light);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-zasto-principles__list {
    margin-top: var(--space-7);
    display: flex;
    flex-direction: column;
}
.cp-zasto-principle {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: var(--space-7);
    padding: var(--space-7) 0;
    border-top: 1px solid var(--bg-light-rule);
    align-items: flex-start;
}
.cp-zasto-principle:last-child {
    border-bottom: 1px solid var(--bg-light-rule);
}
.cp-zasto-principle__num {
    font-family: var(--font-mono);
    font-size: clamp(2.4rem, 3.6vw, 3rem);
    font-weight: 300;
    color: var(--brand);
    opacity: 0.85;
    line-height: 1;
    letter-spacing: 0.02em;
}
.cp-zasto-principle__content {
    max-width: 52rem;
}
.cp-zasto-principle__title {
    font-family: var(--font-sans);
    font-size: clamp(1.3rem, 1.8vw, 1.5rem);
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.cp-zasto-principle__quote {
    font-family: var(--font-sans);
    font-size: 18px;
    font-style: italic;
    color: var(--fg-light-deep);
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    border-left: 3px solid var(--brand);
    line-height: 1.6;
}
.cp-zasto-principle__body {
    font-size: 16px;
    color: var(--fg-light-mid);
    line-height: 1.75;
    margin: 0;
}

/* ── Ko stoji iza projekta ─────────────────────────────────────────────── */
.cp-zasto-persona {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-zasto-persona__split {
    margin-top: var(--space-7);
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-8);
    align-items: flex-start;
}
.cp-zasto-persona__bio p {
    font-size: 16px;
    color: var(--fg-light-mid);
    line-height: 1.75;
    margin: 0 0 var(--space-4);
    max-width: 42rem;
}
.cp-zasto-persona__role {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand) !important;
    margin: 0 0 var(--space-5) !important;
    line-height: 1.4 !important;
}
.cp-zasto-persona__experience {
    border-top: 2px solid var(--brand);
    padding-top: var(--space-5);
}
.cp-zasto-persona__experience-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-light-faint);
    margin: 0 0 var(--space-4);
    line-height: 1;
}
.cp-zasto-persona__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.cp-zasto-persona__list li {
    font-size: 15px;
    color: var(--fg-light);
    line-height: 1.6;
    padding-left: var(--space-5);
    position: relative;
}
.cp-zasto-persona__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 14px;
    height: 1px;
    background: var(--brand);
}

/* Mobile (≤880, ≤720) — zasto-cp */
@media (max-width: 880px) {
    .cp-zasto-persona__split {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}
@media (max-width: 720px) {
    .cp-zasto-story,
    .cp-zasto-principles,
    .cp-zasto-persona {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }
    .cp-zasto-principle {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-6) 0;
    }
    .cp-zasto-principle__num {
        font-size: 2rem;
    }
    .cp-zasto-story__body p {
        font-size: 16px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   P14.8 — /kontakt/ landing template
   Hero → form (UI only) → guide → after-send → urgent. Reuse cp-hero,
   cp-section__head--split. Form ima full structural HTML, submit disabled
   dok backend ne bude wired.
   ────────────────────────────────────────────────────────────────────────── */

.cp-contact-hero {
    border-bottom: 1px solid var(--bg-light-rule);
}

/* ── Form sekcija ──────────────────────────────────────────────────────── */
.cp-contact-form-section {
    background: var(--bg-light);
    padding: var(--space-section) 0;
}

.cp-form {
    margin-top: var(--space-7);
    max-width: 44rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.cp-form__notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: var(--space-4);
    background: var(--brand-faint);
    border-left: 3px solid var(--brand);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--brand-hover);
    line-height: 1.55;
    margin: 0;
}
.cp-form__notice .cp-octo-mark {
    margin-top: 1px;
}

.cp-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cp-form__label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-light-strong);
    line-height: 1.4;
}
.cp-form__req {
    color: var(--brand);
    margin-left: 0.15em;
}

.cp-form__input {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--fg-light-strong);
    background: var(--bg-light-soft);
    border: 1px solid var(--bg-light-rule);
    padding: 0.75rem 0.9rem;
    line-height: 1.5;
    transition: border-color 200ms ease, background 200ms ease;
    width: 100%;
}
.cp-form__input:focus,
.cp-form__input:focus-visible {
    outline: none;
    border-color: var(--brand);
    background: var(--bg-light);
}
.cp-form__input::placeholder {
    color: var(--fg-light-faint);
}
.cp-form__input:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.cp-form__textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.6;
}

.cp-form__hint {
    font-size: 13px;
    color: var(--fg-light-faint);
    margin: 0;
    line-height: 1.55;
}

/* Honeypot — pozicioniran van ekrana, nedostupan tabu */
.cp-form__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cp-form__action {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}
.cp-form__action button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}
.cp-form__action-note {
    font-size: 13px;
    color: var(--fg-light-faint);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

/* ── Guide sekcija (P14.8c restruktura — numerisana lista sa Q/A) ────── */
.cp-contact-guide {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-contact-guide__list {
    list-style: none;
    padding: 0;
    margin: var(--space-7) 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 56rem;
}
.cp-contact-guide__item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-5);
    align-items: flex-start;
}
.cp-contact-guide__num {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--brand);
    opacity: 0.85;
    line-height: 1;
    letter-spacing: 0.02em;
    padding-top: 0.1rem;
}
.cp-contact-guide__body {
    max-width: 48rem;
}
.cp-contact-guide__q {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-2);
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.cp-contact-guide__a {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    margin: 0;
}
.cp-contact-guide__footer {
    font-size: 16px;
    color: var(--fg-light-mid);
    line-height: 1.75;
    max-width: 52rem;
    margin: 0;
    font-style: italic;
}

/* ── After-send sekcija ────────────────────────────────────────────────── */
.cp-contact-after {
    background: var(--bg-light);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-contact-after__list {
    list-style: none;
    margin: var(--space-7) 0 var(--space-6);
    padding: 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-contact-after__step {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--bg-light-rule);
    align-items: flex-start;
}
.cp-contact-after__num {
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 300;
    color: var(--fg-light-haze);
    line-height: 1;
    letter-spacing: 0.02em;
    padding-top: 0.2rem;
}
.cp-contact-after__title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.cp-contact-after__description {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    margin: 0;
    max-width: 48rem;
}
.cp-contact-after__footer {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    max-width: 56rem;
    margin: 0;
    font-style: italic;
}

/* ── Urgent panel ──────────────────────────────────────────────────────── */
.cp-contact-urgent {
    background: var(--bg-dark-subtle);
    color: var(--fg-dark);
    padding: var(--space-section) 0;
}
.cp-contact-urgent__panel {
    max-width: 56rem;
    border-left: 4px solid var(--brand);
    padding: var(--space-5) var(--space-6);
}
.cp-contact-urgent__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 var(--space-3);
    line-height: 1;
}
.cp-contact-urgent__heading {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--fg-dark-strong);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.cp-contact-urgent__lead {
    font-size: 16px;
    color: var(--fg-dark-mute2);
    line-height: 1.75;
    margin: 0 0 var(--space-5);
    max-width: 50rem;
}
.cp-contact-urgent__rules {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.cp-contact-urgent__rules li {
    font-size: 15px;
    color: var(--fg-dark-mute2);
    line-height: 1.7;
    padding-left: var(--space-5);
    position: relative;
}
.cp-contact-urgent__rules li strong {
    color: var(--fg-dark-strong);
    font-weight: 600;
}
.cp-contact-urgent__rules li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 14px;
    height: 1px;
    background: var(--brand);
}
.cp-contact-urgent__footer {
    font-size: 15px;
    color: var(--fg-dark-mute2);
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

/* ── P14.8c — form states (success / alert / per-field error) ─────────── */
.cp-form__success {
    margin-top: var(--space-7);
    padding: var(--space-6);
    background: var(--brand-faint);
    border-left: 4px solid var(--brand);
    max-width: 44rem;
}
.cp-form__success-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 var(--space-3);
    line-height: 1;
}
.cp-form__success-body {
    font-size: 16px;
    color: var(--fg-light);
    line-height: 1.75;
    margin: 0;
}
.cp-form__alert {
    padding: var(--space-3) var(--space-4);
    background: rgba(155, 25, 25, 0.08);
    border-left: 3px solid var(--brand);
    color: var(--brand-hover);
    font-size: 14px;
    line-height: 1.55;
    margin: var(--space-7) 0 0;
    max-width: 44rem;
}
.cp-form__row--error .cp-form__input {
    border-color: var(--brand);
    background: rgba(155, 25, 25, 0.04);
}
.cp-form__error {
    font-size: 13px;
    color: var(--brand-hover);
    margin: 0;
    line-height: 1.5;
}

/* ── P14.8c — email alternative panel ─────────────────────────────────── */
.cp-contact-email {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-contact-email__panel {
    margin-top: var(--space-7);
    padding: var(--space-6);
    background: var(--bg-light);
    border-left: 3px solid var(--brand);
    max-width: 44rem;
}
.cp-contact-email__address {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    margin-bottom: var(--space-3);
    transition: color 200ms ease;
}
.cp-contact-email__address:hover,
.cp-contact-email__address:focus-visible {
    color: var(--brand-hover);
}
.cp-contact-email__address span {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.cp-contact-email__assurance {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.65;
    margin: 0;
}

/* ── P14.8c — response times list ─────────────────────────────────────── */
.cp-contact-times {
    background: var(--bg-light);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-contact-times__list {
    list-style: none;
    padding: 0;
    margin: var(--space-7) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 56rem;
}
.cp-contact-times__item {
    font-size: 16px;
    color: var(--fg-light);
    line-height: 1.7;
    padding-left: var(--space-5);
    position: relative;
}
.cp-contact-times__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 16px;
    height: 1px;
    background: var(--brand);
}

/* ── P14.8c — promise (šta se ne dešava) list ─────────────────────────── */
.cp-contact-promise {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-contact-promise__list {
    list-style: none;
    padding: 0;
    margin: var(--space-7) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 56rem;
}
.cp-contact-promise__item {
    font-size: 16px;
    color: var(--fg-light);
    line-height: 1.75;
    padding-left: var(--space-5);
    position: relative;
}
.cp-contact-promise__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 14px;
    height: 1px;
    background: var(--fg-light-haze);
}

/* ── P14.8c — alt razgovor sekcija ─────────────────────────────────────── */
.cp-contact-alt {
    background: var(--bg-light);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-contact-alt__note {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    max-width: 52rem;
    margin: var(--space-5) 0 0;
    font-style: italic;
}

/* ── P14.8c — urgent rules title ──────────────────────────────────────── */
.cp-contact-urgent__rules-title {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-dark-strong);
    margin: 0 0 var(--space-3);
    line-height: 1.4;
}

/* ── P14.8e — urgent phone link ───────────────────────────────────────── */
.cp-contact-urgent__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--brand-light);
    text-decoration: none;
    margin: 0 0 var(--space-5);
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(192, 57, 43, 0.5);
    background: rgba(155, 25, 25, 0.12);
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.cp-contact-urgent__phone:hover,
.cp-contact-urgent__phone:focus-visible {
    background: rgba(192, 57, 43, 0.22);
    border-color: var(--brand-light);
    color: #f0ede8;
}
.cp-contact-urgent__phone span {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* Mobile (≤720) — kontakt */
@media (max-width: 720px) {
    .cp-contact-form-section,
    .cp-contact-email,
    .cp-contact-times,
    .cp-contact-guide,
    .cp-contact-after,
    .cp-contact-urgent,
    .cp-contact-promise,
    .cp-contact-alt {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }
    .cp-contact-after__step {
        grid-template-columns: 3.5rem 1fr;
        gap: var(--space-4);
        padding: var(--space-5) 0;
    }
    .cp-contact-after__num {
        font-size: 1.4rem;
    }
    .cp-contact-urgent__panel {
        padding: var(--space-4) var(--space-5);
    }
    .cp-form__action button {
        width: 100%;
        justify-content: center;
    }
    .cp-contact-guide__item {
        grid-template-columns: 2.5rem 1fr;
        gap: var(--space-4);
    }
    .cp-contact-email__panel {
        padding: var(--space-5);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   P14.9 — /usluge/ landing template
   Sekcije: Hero → Odakle počinjemo (3-up) → Pet oblasti rada (DARK
   centerpiece) → Sat/Dan/Mesec ritam (3-up) → Kada da zovete (2x2)
   → Final CTA dark.
   ────────────────────────────────────────────────────────────────────────── */

body.page-usluge {
    --cp-usluge-bg-paper: #f5f3ed;  /* warm bone — paneli u dark centerpiece */
}

/* ── Odakle počinjemo (3 ishoda iz prvog razgovora) ───────────────────── */
.cp-usluge-start {
    background: var(--bg-light-soft);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--bg-light-rule);
}
.cp-usluge-start__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(155, 25, 25, 0.18);
    margin-top: var(--space-7);
    border-top: 2px solid var(--brand);
    border-bottom: 1px solid var(--bg-light-rule);
}
.cp-usluge-start__card {
    background: var(--bg-light);
    padding: var(--space-7) var(--space-6);
}
.cp-usluge-start__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--space-4);
    line-height: 1;
}
.cp-usluge-start__title {
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}
.cp-usluge-start__body {
    font-size: 15px;
    color: var(--fg-light-mid);
    line-height: 1.7;
    margin: 0;
}

/* ── Pet oblasti rada — DARK CENTERPIECE ───────────────────────────────── */
.cp-usluge-areas {
    background: var(--bg-dark-subtle);
    color: var(--fg-dark);
    padding: var(--space-section) 0;
    border-top: 0;
}
.cp-usluge-areas .cp-section__heading {
    color: var(--fg-dark-strong);
}
.cp-usluge-areas .cp-section__lead {
    color: var(--fg-dark-mute2);
}
.cp-usluge-areas__list {
    margin-top: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--bg-dark-rule);
    border-top: 2px solid var(--brand);
}
.cp-usluge-area {
    background: var(--cp-usluge-bg-paper);
    padding: var(--space-7) var(--space-6);
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: var(--space-7);
    align-items: flex-start;
}
.cp-usluge-area__num {
    font-family: var(--font-mono);
    font-size: clamp(2.4rem, 3.6vw, 3rem);
    font-weight: 300;
    color: var(--brand);
    opacity: 0.85;
    line-height: 1;
    letter-spacing: 0.02em;
}
.cp-usluge-area__content {
    max-width: 56rem;
}
.cp-usluge-area__title {
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 700;
    color: var(--fg-light-strong);
    margin: 0 0 var(--space-5);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.cp-usluge-area__row {
    margin-bottom: var(--space-4);
}
.cp-usluge-area__row:last-child {
    margin-bottom: 0;
}
.cp-usluge-area__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 var(--space-2);
    line-height: 1;
}
.cp-usluge-area__body {
    font-size: 16px;
    color: var(--fg-light-mid);
    line-height: 1.75;
    margin: 0;
}
.cp-usluge-areas__action {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--bg-dark-rule);
}

/* "Kako izgleda rad" rhythm blok obrisan u P15.8 — zamenjen cenovnikom (.vj). */

/* "Kada da zovete" cp-usluge-when blok obrisan u P15.9 — zamenjen
   trijažom (.kz). Ostatak mobile rules ostaje za .cp-usluge-start
   i .cp-usluge-areas koji se i dalje koriste. */

/* Mobile (≤880, ≤720) — usluge (.cp-usluge-start + .cp-usluge-areas) */
@media (max-width: 880px) {
    .cp-usluge-start__grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .cp-usluge-start,
    .cp-usluge-areas {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }
    .cp-usluge-start__card {
        padding: var(--space-5) var(--space-5);
    }
    .cp-usluge-area {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-5);
    }
    .cp-usluge-area__num {
        font-size: 2rem;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   P15.5 — Gesture sef u Hero matici (.uh)
   Sef koristi POSTOJEĆU SVG maticu. CW/CCW povlačenja se prate u JS-u,
   pogodjena kombinacija pretvara unutrašnji hex u "vrata" — tamna pozadina
   + sadržaj (mačka / Leonardo / šubler / kompas / fioka). Anotacije sa
   gesture kombinacijama su jedva primetne mono labele u nacrtu.
   ────────────────────────────────────────────────────────────────────────── */

/* Paper hints — jednačine sa elementima iz legende (D = ↻, L = ↺) plus
   mali pie kružić pored kao indikator količine rotacije. Posle solve-a:
   opacity↑, tekst i outline kruga postaju brand red, "= ?" → "= ✓".
   Pie fill (wedge) je već brand red od početka. */
.uh-paper-hint {
    transition: opacity 240ms ease;
    user-select: none;
    pointer-events: none;
}
.uh-paper-hint.is-solved                       { opacity: 0.82 !important; }
.uh-paper-hint.is-solved text                  { fill: #9b1919; font-weight: 500; }
.uh-paper-hint.is-solved .uh-hint-icon circle  { stroke: #9b1919; }

/* Rotation key glyph u legendi (D / L) — prikazuje ↻ ↺ kao karakter
   umesto color swatch-a iz drugih legend itema. */
.uh-legend-glyph {
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 14px;
    font-family: var(--font-sans);
    color: #1a1a18;
}
.uh-legend-item--rot .uh-legend-val {
    font-weight: 600;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.uh-legend-pie {
    width: 11px !important;
    height: 11px !important;
    color: var(--brand);
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* Sound toggle u .uh-legend redu */
.uh-sound-toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--bg-light-rule);
    color: var(--fg-light-mid);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.uh-sound-toggle:hover,
.uh-sound-toggle:focus-visible {
    color: var(--brand);
    border-color: var(--brand);
    outline: none;
}
.uh-sound-toggle.is-on {
    color: var(--brand);
    border-color: var(--brand);
}
.uh-sound-icon {
    font-size: 13px;
    line-height: 1;
    transform: translateY(-1px);
}

/* Reveal layer — fiksna grupa na vrhu SVG-a (NE rotira sa maticom) */
.uh-reveal-layer { pointer-events: none; }

/* Tamni overlay preko unutrašnjeg hex-a (radius 65) */
.uh-reveal-bg {
    transition: opacity 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sva reveal sadržina hidden po default-u */
.uh-reveal {
    opacity: 0;
    transition: opacity 480ms ease 220ms;
}

/* Aktivan reveal: data-revealing="<kind>" na .uh-stage */
.uh-stage[data-revealing] .uh-reveal-bg { opacity: 0.96; }
.uh-stage[data-revealing="cat"]      .uh-reveal[data-kind="cat"],
.uh-stage[data-revealing="caliper"]  .uh-reveal[data-kind="caliper"],
.uh-stage[data-revealing="compass"]  .uh-reveal[data-kind="compass"],
.uh-stage[data-revealing="leonardo"] .uh-reveal[data-kind="leonardo"],
.uh-stage[data-revealing="secret"]   .uh-reveal[data-kind="secret"] {
    opacity: 1;
}

/* Reduced motion: skidamo transition-e */
@media (prefers-reduced-motion: reduce) {
    .uh-reveal-bg,
    .uh-reveal,
    .uh-paper-hint { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   P15.8 — VREMENSKE JEDINICE / CENOVNIK (.vj)
   Crveni manifesto blok sa tri kolone (Sat / Dan / Mesec). Vokabular linija
   nastavak prethodnih engineering paper blokova (kotne strelice, krstići,
   mono kicker), prebačen u "krem na crvenom" paletu. Tokeni scope-ovani na
   .vj — ne curiju globalno.
   V3 design_handoff_vremenske_jedinice.
   ────────────────────────────────────────────────────────────────────────── */

.vj {
    --vj-bg:           #7a1515;
    --vj-line-mid:     #e6c5b8;
    --vj-line-soft:    rgba(243, 230, 216, 0.18);
    --vj-fg:           #f7eee2;
    --vj-fg-mid:       #e6d0bd;
    --vj-fg-haze:      #c89a8d;
    --vj-fg-faint:     #a87b71;
    --vj-accent:       #ffffff;
    --vj-stamp:        #ffd9a8;

    background: var(--vj-bg);
    color: var(--vj-fg);
    padding: 120px 0 140px;
    position: relative;
    overflow: hidden;
}
.vj-corner {
    position: absolute;
    top: 16px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vj-fg-haze);
    line-height: 1.6;
    z-index: 2;
}
.vj-corner.tl { left: 28px; }
.vj-corner.tr { right: 28px; text-align: right; }
.vj-corner.bl { top: auto; bottom: 16px; left: 28px; }
.vj-corner.br { top: auto; bottom: 16px; right: 28px; text-align: right; }

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

/* Kicker */
.vj-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vj-stamp);
    margin: 0 0 22px;
    display: flex;
    gap: 8px;
}
.vj-kicker .sep { color: var(--vj-fg-faint); }

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

/* Kotni lenjiri */
.vj-rule {
    display: block;
    width: 100%;
    height: 32px;
    color: var(--vj-line-mid);
}
.vj-rule.is-top    { margin: 8px 0 0; }
.vj-rule.is-bottom { margin: 0 0 8px; transform: scaleY(-1); }

.vj-rule-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 4px 0 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vj-fg-haze);
}
.vj-rule-label {
    text-align: center;
    padding: 0 4px;
}
.vj-rule-label.is-accent { color: var(--vj-stamp); }

/* Kolone */
.vj-cols-wrap { position: relative; }
.vj-cols {
    list-style: none;
    margin: 0;
    padding: 24px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    position: relative;
}
.vj-col {
    padding: 36px 36px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.vj-col:first-child { padding-left: 0; }
.vj-col:last-child  { padding-right: 0; }

.vj-pos {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vj-stamp);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vj-pos::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: var(--vj-stamp);
}

.vj-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--vj-fg);
    margin: 0;
}

.vj-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 4px 0 6px;
}
.vj-price-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 84px;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--vj-accent);
}
.vj-price-word {
    font-size: 84px !important;
    letter-spacing: -0.045em;
}
.vj-price-asterisk {
    font-family: var(--font-mono);
    font-size: 28px;
    color: var(--vj-stamp);
    line-height: 1;
    align-self: flex-start;
    margin-top: 8px;
}

.vj-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vj-fg-haze);
    line-height: 1.6;
    margin: 0;
}
.vj-meta strong {
    color: var(--vj-fg);
    font-weight: 500;
}

/* Vremenski merač (gauge) */
.vj-gauge {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 4px;
}
.vj-gauge-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    flex-wrap: wrap;
    min-height: 50px;            /* 2 reda × 22px + gap — poravnava sa Mesec gauge-om */
}
.vj-bar {
    width: 10px;
    height: 22px;
    border: 1px solid var(--vj-fg-haze);
    background: transparent;
    flex-shrink: 0;
}
.vj-bar.is-on,
.vj-bar.is-stamp {
    background: var(--vj-fg);
    border-color: var(--vj-fg);
}
.vj-gauge-cap {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vj-fg-haze);
    line-height: 1;
}
.vj-gauge-cap strong {
    color: var(--vj-fg);
    font-weight: 500;
}

/* Mesec gauge — niz dana sa wrap-om u 2 reda */
.vj-gauge.is-month .vj-gauge-bars {
    gap: 6px 10px;
    max-width: 100%;
}
.vj-day {
    display: flex;
    gap: 3px;
    align-items: flex-end;
}
.vj-dots {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    margin-left: 6px;
    color: var(--vj-fg);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.2em;
}

.vj-desc {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--vj-fg);
    margin: 0;
    max-width: 30ch;
    text-wrap: pretty;
}

.vj-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vj-fg);
    text-decoration: none;
    border-bottom: 1px solid var(--vj-stamp);
    padding: 0 0 4px 0;
    margin-top: auto;
    transition: color 0.15s, gap 0.15s;
}
.vj-cta .arr {
    color: var(--vj-stamp);
    font-size: 14px;
    transition: transform 0.15s;
}
.vj-cta:hover,
.vj-cta:focus-visible {
    color: var(--vj-stamp);
    gap: 14px;
    outline: none;
}
.vj-cta:hover .arr,
.vj-cta:focus-visible .arr { transform: translateX(2px); }

/* Engineering fusnota */
.vj-foot {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--vj-line-soft);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: start;
}
.vj-foot-note {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--vj-fg-mid);
    max-width: 78ch;
    margin: 0;
}
.vj-foot-note .ast {
    color: var(--vj-stamp);
    font-family: var(--font-mono);
    font-weight: 500;
    margin-right: 4px;
}
.vj-foot-note strong {
    color: var(--vj-fg);
    font-weight: 500;
}
.vj-foot-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vj-fg-haze);
    text-align: right;
    line-height: 1.7;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin: 0;
}
.vj-foot-meta .label { white-space: nowrap; }

/* Mobile */
@media (max-width: 880px) {
    .vj { padding: 80px 0 96px; }
    .vj-head { grid-template-columns: 1fr; gap: 24px; }
    .vj-cols {
        grid-template-columns: 1fr;
        padding-top: 32px;
    }
    .vj-col {
        padding: 32px 0 28px;
        border-bottom: 1px solid var(--vj-line-soft);
    }
    .vj-col:last-child { border-bottom: 0; padding-bottom: 0; }
    .vj-price-num { font-size: 64px; }
    .vj-foot { grid-template-columns: 1fr; gap: 24px; }
    .vj-foot-meta { text-align: left; justify-content: flex-start; }
}

/* ──────────────────────────────────────────────────────────────────────────
   P15.9 — TRIJAŽA (.kz) + RAZGOVOR O STANJU (.rs)
   Dva poslednja bloka pred footer. Paper trijaža sa manifesto citatom,
   EKG linijom i 4 stanja (incident/kontrola/obuka/sistem). Ispod graphite
   CTA blok sa asimetričnim grid-om i EKG talasom u pozadini.
   V3 design_handoff_usluge_kada_da_zovete.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Trijaža (.kz) ───────────────────────────────────────────────────── */
.kz {
    --kz-bg:           #f4f4f2;
    --kz-card:         #fafaf8;
    --kz-card-bd:      #e0dedd;
    --kz-rule:         #d6d4ce;
    --kz-rule-soft:    #ece9e3;
    --kz-fg:           #1a1a18;
    --kz-fg-mid:       #4a4a48;
    --kz-fg-haze:      #9a9a98;
    --kz-brand:        #9b1919;
    --kz-stamp:        #c0392b;
    --kz-ekg:          rgba(155, 25, 25, 0.55);
    --kz-ekg-soft:     rgba(155, 25, 25, 0.18);

    background: var(--kz-bg);
    color: var(--kz-fg);
    padding: 120px 0 140px;
    position: relative;
    overflow: hidden;
}
.kz-corner {
    position: absolute;
    top: 16px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kz-fg-haze);
    line-height: 1.6;
    z-index: 2;
}
.kz-corner.tl { left: 28px; }
.kz-corner.tr { right: 28px; text-align: right; }
.kz-corner.bl { top: auto; bottom: 16px; left: 28px; }
.kz-corner.br { top: auto; bottom: 16px; right: 28px; text-align: right; }

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

.kz-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kz-stamp);
    margin: 0 0 22px;
    display: flex;
    gap: 8px;
}

/* Manifesto lede sa citatom */
.kz-lede {
    position: relative;
    padding: 12px 0 48px;
    border-bottom: 1px solid var(--kz-rule-soft);
    margin-bottom: 0;
}
.kz-quote {
    margin: 12px 0 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.22;
    letter-spacing: -0.022em;
    color: var(--kz-fg);
    max-width: 26ch;
    text-wrap: balance;
}
.kz-quote .punch {
    display: block;
    margin-top: 0.35em;
    color: var(--kz-fg);
}
.kz-quote em {
    font-style: normal;
    color: var(--kz-brand);
    font-weight: 600;
}
.kz-lede-meta {
    margin: 28px 0 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.kz-lede-meta p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--kz-fg-mid);
    margin: 0;
    max-width: 56ch;
}
.kz-lede-meta .ref {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kz-fg-haze);
    white-space: nowrap;
}

/* Globalna EKG linija ispod citata, iznad kartica.
   Refaktor (P15.9d): nije više dekorativna ravnomerna linija — svaki
   od 4 segmenta ima morfološki potpis koji odgovara stanju kartice
   ispod (incident spike / kontrola opada / ljudski faktor / sistem
   prekinut). Sweep animacija (kz-sweep) crta brand crveni puls preko
   trace-a, 9s ciklus, dash 240/2160 da se vidi morfologija. Mono osa
   ispod semantički veže EKG za grid kartica. */
@keyframes kz-sweep {
    0%   { stroke-dashoffset: 2400; }
    100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kz-ekg .pulse-walk { animation: none !important; opacity: 0; }
}

.kz-ekg-wrap { position: relative; margin: 28px 0 0; }
.kz-ekg {
    width: 100%;
    height: 96px;
    display: block;
    color: var(--kz-ekg);
    overflow: visible;
}
.kz-ekg .grid-h {
    stroke: var(--kz-rule-soft);
    stroke-width: 0.8;
    fill: none;
}
.kz-ekg .baseline {
    stroke: var(--kz-ekg-soft);
    stroke-width: 1;
    fill: none;
}
.kz-ekg .trace {
    stroke: var(--kz-ekg);
    stroke-width: 1.4;
    fill: none;
    stroke-linejoin: miter;
    stroke-linecap: butt;
}
.kz-ekg .pulse-walk {
    stroke: var(--kz-brand);
    stroke-width: 1.8;
    fill: none;
    opacity: 0.85;
    stroke-dasharray: 240 2160;
    animation: kz-sweep 9s linear infinite;
}
.kz-ekg .marker {
    fill: var(--kz-bg);
    stroke: var(--kz-brand);
    stroke-width: 1.2;
}
.kz-ekg .seg-divider {
    stroke: var(--kz-rule);
    stroke-width: 1;
    stroke-dasharray: 1 3;
    fill: none;
}
.kz-ekg-axis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 6px;
    border-top: 1px solid var(--kz-rule-soft);
    padding-top: 10px;
}
.kz-ekg-axis span {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kz-fg-haze);
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.kz-ekg-axis span b {
    font-weight: 500;
    color: var(--kz-stamp);
    letter-spacing: 0.16em;
}

/* Kartice */
.kz-grid {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--kz-card-bd);
    border: 1px solid var(--kz-card-bd);
}
.kz-card {
    background: var(--kz-card);
    padding: 36px 36px 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 28px;
    row-gap: 14px;
    align-items: start;
    position: relative;
    min-height: 220px;
}
.kz-num {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--kz-brand);
    margin: 0;
}
.kz-vital {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    width: 80px;
    height: 40px;
    color: var(--kz-fg-haze);
    align-self: start;
    margin-top: -2px;
}
.kz-vital .vt-base {
    stroke: var(--kz-rule);
    stroke-width: 1;
    fill: none;
}
.kz-vital .vt-trace {
    stroke: currentColor;
    stroke-width: 1.4;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.kz-vital .vt-spike { stroke: var(--kz-brand); }
.kz-vital .vt-grid line {
    stroke: var(--kz-rule-soft);
    stroke-width: 0.8;
}
.kz-name {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--kz-fg);
    margin: 0;
}
.kz-desc {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--kz-fg-mid);
    max-width: 50ch;
    margin: 0;
    text-wrap: pretty;
}

/* ── Razgovor o stanju (.rs) ────────────────────────────────────────── */
.rs {
    --rs-bg:           #161614;
    --rs-rule:         rgba(232, 232, 230, 0.10);
    --rs-fg:           #ece9e3;
    --rs-fg-mid:       #b0ada8;
    --rs-fg-haze:      #6a6760;
    --rs-stamp:        #ffd9a8;

    background: var(--rs-bg);
    color: var(--rs-fg);
    padding: 110px 0 130px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #9b1919;
}
.rs-corner {
    position: absolute;
    top: 16px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rs-fg-haze);
    line-height: 1.6;
    z-index: 2;
}
.rs-corner.tl { left: 28px; }
.rs-corner.tr { right: 28px; text-align: right; }
.rs-corner.bl { top: auto; bottom: 16px; left: 28px; }
.rs-corner.br { top: auto; bottom: 16px; right: 28px; text-align: right; }

.rs-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: end;
    position: relative;
    z-index: 1;
}
.rs-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rs-stamp);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.rs-kicker .pin {
    width: 10px;
    height: 10px;
    background: #9b1919;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    display: inline-block;
    flex-shrink: 0;
}
.rs-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--rs-fg);
    margin: 0 0 18px;
    max-width: 22ch;
    text-wrap: balance;
}
.rs-title em {
    font-style: normal;
    color: var(--rs-stamp);
}
.rs-sub {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--rs-fg-mid);
    margin: 0;
    max-width: 50ch;
}
.rs-cta-wrap {
    align-self: end;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}
.rs-cta-coord {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rs-fg-haze);
}
.rs-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rs-fg);
    border-bottom: 1px solid var(--rs-stamp);
    padding: 0 0 6px 0;
    transition: color 0.15s, gap 0.15s;
    text-decoration: none;
}
.rs-cta .arr {
    color: var(--rs-stamp);
    font-size: 16px;
    transition: transform 0.15s;
}
.rs-cta:hover,
.rs-cta:focus-visible {
    color: var(--rs-stamp);
    gap: 14px;
    outline: none;
}
.rs-cta:hover .arr,
.rs-cta:focus-visible .arr { transform: translateX(2px); }

/* Pozadinski talas */
.rs-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}
.rs-bg svg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 100%;
    color: var(--rs-rule);
}
.rs-bg .rs-pulse {
    stroke: #9b1919;
    stroke-width: 1.2;
    fill: none;
    opacity: 0.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Mobile */
@media (max-width: 880px) {
    .kz { padding: 80px 0 96px; }
    .kz-lede { padding-bottom: 32px; }
    .kz-grid { grid-template-columns: 1fr; }
    /* Trijaža: vrati EKG puls na mobilnom, umanjen — dinamičan element ostaje. */
    .kz-ekg { display: block; height: 54px; }
    .kz-ekg-wrap { margin-top: 20px; }
    /* crveni EKG „puls" trag sa desktopa — ukloni na mobilnom (talasi ostaju) */
    .rs-bg .rs-pulse { display: none; }
    .kz-card { padding: 28px 24px 32px; min-height: 0; }
    .kz-vital { width: 64px; height: 32px; }

    .rs { padding: 72px 0 88px; }
    .rs-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
    .rs-cta-wrap { align-items: flex-start; }
}