/* ============================================================================
   New Factory — editorial / financial-terminal aesthetic.
   Direction: JetBrains Mono display + tight system-ui body, dense data rows
   with [bracketed] labels, asymmetric editorial grids, Bitcoin-orange used
   surgically as accent for prices/CTAs only. Subtle noise + dotted scanlines
   replace the flat dark vacuum of the previous version.
   ============================================================================ */

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2");
}

:root {
    /* Palette — kept the brand 4 + added editorial neutrals */
    --color-bg: #0a0a0a;
    --color-surface: #161616;
    --color-surface-2: #1f1f1f;
    --color-surface-3: #0e0e0e;
    --color-text: #e8e8e8;
    --color-muted: #8a8a8a;
    --color-dim: #555;
    --color-accent: #FF6600;
    --color-accent-hover: #ffb347;
    --color-accent-dim: rgba(255, 102, 0, 0.16);
    --color-border: #232323;
    --color-border-bold: #2e2e2e;
    --color-success: #4ade80;
    --color-error: #f87171;
    --color-warn: #facc15;

    /* Typography */
    --font-display: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;

    --shell-max: 1320px;
    --shell-gutter: clamp(1.25rem, 4vw, 3.5rem);
    --row-gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.55;
    font-size: 16px;
    font-feature-settings: "ss01", "cv01", "ss02";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Atmospheric backdrop: subtle radial gradient + procedural noise dots.
   Pure CSS — no extra assets, GPU-friendly, doesn't interfere with Victor canvas. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(255, 102, 0, 0.08), transparent 60%),
        radial-gradient(ellipse 80% 50% at 90% 110%, rgba(255, 102, 0, 0.05), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
        var(--color-bg);
}

a { color: var(--color-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--color-accent-hover); }
::selection { background: var(--color-accent); color: #000; }

/* ====== TYPOGRAPHY PRIMITIVES ====== */
.nf-display {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: uppercase;
}
.nf-display--accent { color: var(--color-accent); }
.nf-mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.nf-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--color-accent);
    text-transform: uppercase;
    margin: 0 0 1rem;
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-accent);
    background: var(--color-accent-dim);
}

/* ====== SHELL / HEADER / FOOTER ====== */
.nf-shell {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-gutter);
    position: relative;
}

.nf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: 1rem;
}
.nf-header__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15em;
    font-size: 1.4rem;
    color: var(--color-text);
    letter-spacing: -0.04em;
}
.nf-header__brand:hover { color: var(--color-text); }
.nf-header__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.nf-header__nav a {
    color: var(--color-muted);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    border-bottom: 1px solid transparent;
    padding-bottom: 0.1rem;
    transition: color .15s ease, border-color .15s ease;
}
.nf-header__nav a .nf-mono { color: var(--color-dim); font-size: 0.78rem; margin-right: 0.25rem; }
.nf-header__nav a:hover,
.nf-header__nav a.is-active { color: var(--color-text); border-color: var(--color-accent); }
.nf-header__nav a:hover .nf-mono,
.nf-header__nav a.is-active .nf-mono { color: var(--color-accent); }

.nf-footer {
    margin-top: 6rem;
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}
.nf-footer__meta { color: var(--color-dim); font-size: 0.7rem; letter-spacing: 0.16em; }

/* ====== PAGES — common ====== */
.nf-page { padding: clamp(2.5rem, 5vw, 5rem) 0 2rem; }
.nf-page__intro { max-width: 880px; margin: 0 0 clamp(3rem, 6vw, 5rem); }
.nf-page__title {
    font-size: clamp(3rem, 9vw, 7rem);
    margin: 0 0 1.5rem;
}
.nf-page__lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    border-top: 1px dashed var(--color-border-bold);
    padding-top: 1.5rem;
}
.nf-page__lead > p { color: var(--color-muted); max-width: 60ch; font-size: 1.05rem; margin: 0; }
.nf-page__lead > p strong { color: var(--color-text); font-weight: 600; }
.nf-page__lead > p em { color: var(--color-accent); font-style: normal; }
.nf-page__lead-meta {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
    border-left: 1px solid var(--color-border-bold);
    padding-left: 1.5rem;
}
.nf-page__lead-meta .nf-mono { color: var(--color-accent); font-weight: 700; }
.nf-page__lead-text { color: var(--color-muted); max-width: 60ch; font-size: 1.05rem; }
.nf-page__lead-text strong { color: var(--color-text); }

/* ====== BUTTONS ====== */
.nf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .18s ease;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.nf-btn--primary {
    background: var(--color-accent);
    color: #000;
    border-color: var(--color-accent);
}
.nf-btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #000; }
.nf-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-bold);
}
.nf-btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.nf-btn--xl { padding: 1.1rem 2rem; font-size: 0.95rem; }

/* Backwards-compatible legacy button class (used elsewhere if needed) */
.button, .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; transition: all .2s; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.88rem; }
.button--primary, .btn--primary { background: var(--color-accent); color: #000; border-color: var(--color-accent); }
.button--primary:hover, .btn--primary:hover { background: var(--color-accent-hover); }
.button--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-bold); }
.button--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.button--lg { padding: 1rem 1.75rem; font-size: 0.95rem; }

/* ====== /produkty LIST — vertical machine "index" ====== */
.nf-index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--row-gap); }

.nf-row {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
        "rail heading price"
        "rail hash    price"
        "rail stats   price"
        "rail break   break";
    gap: 2rem;
    align-items: start;
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--color-border-bold);
    border-bottom: 1px solid var(--color-border);
}
.nf-row:first-child { border-top: 2px solid var(--color-accent); }

.nf-row__rail { grid-area: rail; position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.nf-row__index {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    color: var(--color-accent);
    line-height: 0.85;
    -webkit-text-stroke: 1px var(--color-accent);
    color: transparent;
    letter-spacing: -0.06em;
}
.nf-row__badge {
    align-self: flex-start;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.nf-row__badge--fast-track { background: var(--color-accent); color: #000; }
.nf-row__badge--standard { background: var(--color-surface-2); color: var(--color-muted); border: 1px solid var(--color-border-bold); }

.nf-row__heading { grid-area: heading; }
.nf-row__kicker { margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--color-muted); letter-spacing: 0.05em; }
.nf-row__kicker .nf-mono { color: var(--color-text); }
.nf-row__name {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    margin: 0 0 1rem;
}
.nf-row__name a { color: var(--color-text); transition: color .15s ease; }
.nf-row__name a:hover { color: var(--color-accent); }
.nf-row__pitch { color: var(--color-muted); max-width: 56ch; margin: 0; line-height: 1.55; font-size: 0.98rem; }

.nf-row__hash {
    grid-area: hash;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 1.5rem;
    border-top: 1px dashed var(--color-border-bold);
    padding-top: 1.25rem;
}
.nf-row__hash-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--color-muted);
    width: 5.5em;
    flex-shrink: 0;
}
.nf-row__hash-value {
    font-size: clamp(3rem, 7vw, 5rem);
    color: var(--color-accent);
    line-height: 0.9;
}
.nf-row__hash-unit { color: var(--color-muted); font-family: var(--font-mono); font-size: 1rem; font-weight: 600; }

.nf-row__stats {
    grid-area: stats;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px dashed var(--color-border-bold);
}
.nf-row__stats > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px dashed var(--color-border);
}
.nf-row__stats > div:nth-child(even) { padding-left: 1rem; padding-right: 0; border-left: 1px dashed var(--color-border); }
.nf-row__stats dt { margin: 0; color: var(--color-muted); font-size: 0.82rem; }
.nf-row__stats dt small { font-size: 0.7rem; color: var(--color-dim); }
.nf-row__stats dd { margin: 0; font-weight: 700; color: var(--color-text); font-size: 0.92rem; text-align: right; }

.nf-row__price {
    grid-area: price;
    position: relative;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-bold);
    border-radius: var(--radius-md);
    margin-top: 0;
}
.nf-row__price::before {
    content: "[CENA]";
    position: absolute;
    top: -0.6em;
    left: 1rem;
    padding: 0 0.5rem;
    background: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--color-accent);
}
.nf-row__price-eyebrow {
    margin: 0 0 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--color-muted);
    text-transform: uppercase;
}
.nf-row__price-value {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--color-accent);
    margin: 0 0 1rem;
    line-height: 1;
}
.nf-row__price-value small { font-size: 0.4em; font-weight: 600; letter-spacing: 0.02em; }
.nf-row__price-lines { list-style: none; margin: 0 0 0.75rem; padding: 0.75rem 0; border-top: 1px dashed var(--color-border); border-bottom: 1px dashed var(--color-border); }
.nf-row__price-lines li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.2rem 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.nf-row__price-lines li .nf-mono { color: var(--color-text); font-weight: 600; }
.nf-row__price-note { font-size: 0.8rem; color: var(--color-warn); margin: 0 0 1.25rem; }
.nf-row__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.nf-row__actions .nf-btn { width: 100%; }

.nf-row__breakdown { grid-area: break; margin-top: 1.5rem; }
.nf-row__breakdown summary {
    list-style: none;
    cursor: pointer;
    padding: 0.75rem 0;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-family: var(--font-mono);
    border-top: 1px dashed var(--color-border-bold);
}
.nf-row__breakdown summary::-webkit-details-marker { display: none; }
.nf-row__breakdown summary::before { content: "+ "; color: var(--color-accent); font-weight: 700; }
.nf-row__breakdown[open] summary::before { content: "− "; }
.nf-row__breakdown summary:hover { color: var(--color-text); }
.nf-row__breakdown-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 2rem;
}
.nf-row__breakdown-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed var(--color-border);
    color: var(--color-text);
}
.nf-row__breakdown-list li.is-optional { color: var(--color-muted); }
.nf-row__breakdown-list li em { font-style: italic; font-size: 0.7rem; color: var(--color-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 0.25rem; }
.nf-row__breakdown-list li strong { font-weight: 700; white-space: nowrap; }
.nf-row__breakdown-note { color: var(--color-muted); font-size: 0.85rem; margin: 1rem 0 0; }

.nf-row--empty { display: block; padding: 3rem 0; color: var(--color-muted); }

@media (max-width: 1023px) {
    .nf-row {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "rail heading"
            "rail hash"
            "rail stats"
            "rail price"
            "break break";
    }
    .nf-row__rail { position: static; flex-direction: row; align-items: center; gap: 1rem; }
    .nf-row__index { font-size: 3rem; }
}
@media (max-width: 640px) {
    .nf-row {
        grid-template-columns: 1fr;
        grid-template-areas: "rail" "heading" "hash" "stats" "price" "break";
        gap: 1.25rem;
    }
    .nf-row__stats { grid-template-columns: 1fr; }
    .nf-row__stats > div:nth-child(even) { border-left: none; padding-left: 0; padding-right: 0; }
}

/* ====== /produkty/{slug} DETAIL ====== */
.nf-breadcrumb { margin: 0 0 2.5rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-muted); }
.nf-breadcrumb a { color: var(--color-muted); }
.nf-breadcrumb a:hover { color: var(--color-accent); }
.nf-breadcrumb .nf-mono { color: var(--color-dim); }

.nf-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
        "caption  portrait"
        "title    portrait"
        "pitch    portrait"
        "metrics  metrics"
        "cta      cta";
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 2px solid var(--color-accent);
}
.nf-hero__caption { grid-area: caption; display: flex; flex-direction: column; gap: 0.5rem; }
.nf-hero__kicker { margin: 0; font-size: 0.85rem; color: var(--color-muted); letter-spacing: 0.04em; }
.nf-hero__kicker .nf-mono { color: var(--color-text); }
.nf-hero__title {
    grid-area: title;
    font-size: clamp(2.75rem, 8vw, 6rem);
    margin: 0;
    line-height: 0.92;
}
.nf-hero__pitch {
    grid-area: pitch;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.1rem;
    max-width: 60ch;
    line-height: 1.55;
}
.nf-hero__portrait {
    grid-area: portrait;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-bold);
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-3) 100%);
}
.nf-hero__portrait img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.9); }
.nf-hero__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.nf-hero__badge--fast-track { background: var(--color-accent); color: #000; }
.nf-hero__badge--standard { background: rgba(0, 0, 0, 0.65); color: var(--color-text); border: 1px solid var(--color-border-bold); }
.nf-hero__portrait-meta {
    position: absolute;
    bottom: 0.75rem;
    right: 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.6);
    padding: 0.2rem 0.5rem;
}
.nf-hero__cta { grid-area: cta; justify-self: start; margin-top: 1rem; }

.nf-metrics {
    grid-area: metrics;
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 1px;
    background: var(--color-border-bold);
    border: 1px solid var(--color-border-bold);
    margin-top: 1rem;
}
.nf-metric {
    background: var(--color-surface);
    padding: 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}
.nf-metric__label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--color-muted);
    text-transform: uppercase;
}
.nf-metric__value { font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--color-text); line-height: 1; }
.nf-metric__unit { font-size: 0.78rem; color: var(--color-muted); font-family: var(--font-mono); letter-spacing: 0.05em; }
.nf-metric--xl { background: linear-gradient(135deg, rgba(255, 102, 0, 0.18) 0%, rgba(255, 102, 0, 0.04) 100%); }
.nf-metric--xl .nf-metric__value { color: var(--color-accent); font-size: clamp(2.5rem, 6vw, 4rem); }
.nf-metric--xl .nf-metric__label { color: var(--color-accent); }

@media (max-width: 960px) {
    .nf-hero {
        grid-template-columns: 1fr;
        grid-template-areas: "caption" "title" "portrait" "pitch" "metrics" "cta";
    }
    .nf-hero__portrait { aspect-ratio: 16 / 10; }
    .nf-metrics { grid-template-columns: repeat(2, 1fr); }
    .nf-metric--xl { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .nf-metrics { grid-template-columns: 1fr; }
}

/* ====== LEDGER (price breakdown) ====== */
.nf-ledger {
    margin: clamp(3rem, 6vw, 5rem) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.nf-ledger__intro { position: sticky; top: 1rem; }
.nf-ledger__intro h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 1.5rem; line-height: 0.95; }
.nf-ledger__lead { color: var(--color-muted); margin: 0 0 2rem; max-width: 42ch; }
.nf-ledger__lead strong { color: var(--color-text); }
.nf-ledger__totals { display: flex; flex-direction: column; gap: 0; margin: 0; }
.nf-ledger__totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px dashed var(--color-border-bold);
    align-items: baseline;
}
.nf-ledger__totals dt { color: var(--color-muted); font-size: 0.85rem; margin: 0; }
.nf-ledger__totals dd { margin: 0; font-weight: 700; font-size: 1rem; }
.nf-ledger__totals-required { color: var(--color-accent); font-size: 1.15rem !important; }

.nf-ledger__sheet {
    border: 1px solid var(--color-border-bold);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.nf-ledger__sheet-head {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    margin: 0;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border-bold);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--color-muted);
}
.nf-ledger__sheet-head-price { text-align: right; min-width: 110px; }
.nf-ledger__lines { list-style: none; margin: 0; padding: 0; }
.nf-ledger__lines li {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px dashed var(--color-border);
    align-items: baseline;
    font-size: 0.92rem;
}
.nf-ledger__lines li:last-child { border-bottom: none; }
.nf-ledger__lines-num { color: var(--color-dim); font-size: 0.78rem; }
.nf-ledger__lines-name { color: var(--color-text); }
.nf-ledger__lines-type {
    color: var(--color-muted);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-width: 6em;
    text-align: right;
}
.nf-ledger__lines-price { font-weight: 700; min-width: 110px; text-align: right; white-space: nowrap; }
.nf-ledger__lines li.is-optional { background: var(--color-surface-3); }
.nf-ledger__lines li.is-optional .nf-ledger__lines-name,
.nf-ledger__lines li.is-optional .nf-ledger__lines-price { color: var(--color-muted); }
.nf-ledger__lines li.is-required .nf-ledger__lines-type { color: var(--color-accent); }

.nf-ledger__sheet-totals {
    margin: 0;
    padding: 1rem 1.25rem;
    background: var(--color-surface-2);
    border-top: 2px solid var(--color-accent);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.nf-ledger__sheet-totals-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
    color: var(--color-text);
}
.nf-ledger__sheet-totals-allin { color: var(--color-accent); font-size: 1.25rem; font-weight: 800; }
.nf-ledger__sheet-totals-energy { color: var(--color-warn); border-top: 1px dashed var(--color-border-bold); padding-top: 0.5rem; margin-top: 0.25rem; }

@media (max-width: 960px) {
    .nf-ledger { grid-template-columns: 1fr; }
    .nf-ledger__intro { position: static; }
    .nf-ledger__sheet-head,
    .nf-ledger__lines li { grid-template-columns: 40px 1fr auto; }
    .nf-ledger__sheet-head .nf-ledger__sheet-head-price { grid-column: 3; }
    .nf-ledger__lines-type { display: none; }
}

/* ====== SPECS (off-grid mosaic) ====== */
.nf-specs { margin: clamp(3rem, 6vw, 5rem) 0; }
.nf-specs__head { margin: 0 0 2rem; max-width: 600px; }
.nf-specs__head h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; }
.nf-specs__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--color-border-bold);
    border: 1px solid var(--color-border-bold);
}
.nf-specs__cell {
    background: var(--color-surface);
    padding: 1.25rem 1.25rem 1rem;
    margin: 0;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 100px;
}
.nf-specs__cell--big { grid-column: span 3; }
.nf-specs__cell dt { color: var(--color-muted); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-mono); margin: 0; }
.nf-specs__cell dd { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.nf-specs__cell--big dd { font-size: 1.4rem; color: var(--color-accent); }

@media (max-width: 720px) {
    .nf-specs__grid { grid-template-columns: repeat(2, 1fr); }
    .nf-specs__cell, .nf-specs__cell--big { grid-column: span 1; }
}

/* ====== ESSAY ====== */
.nf-essay {
    margin: clamp(3rem, 6vw, 5rem) 0;
    padding: clamp(2rem, 4vw, 3rem) 0;
    border-top: 1px solid var(--color-border-bold);
    border-bottom: 1px solid var(--color-border-bold);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: 1.5rem;
    align-items: start;
}
.nf-essay > .nf-eyebrow { grid-column: 1; }
.nf-essay > h2 { grid-column: 1; font-size: clamp(2rem, 4vw, 3rem); margin: 0; line-height: 0.95; }
.nf-essay__lead { grid-column: 1; color: var(--color-muted); font-size: 1.05rem; max-width: 36ch; margin: 0; line-height: 1.55; }
.nf-essay__list {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nf-essay__list > div {
    border-top: 1px dashed var(--color-border-bold);
    padding: 1.25rem 0;
    display: grid;
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.2fr);
    gap: 1.5rem;
    align-items: baseline;
}
.nf-essay__list > div:first-child { border-top: none; padding-top: 0; }
.nf-essay__list > div:last-child { border-bottom: none; padding-bottom: 0; }
.nf-essay__list dt {
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: uppercase;
}
.nf-essay__list dt .nf-mono { color: var(--color-accent); font-size: 0.8rem; margin-right: 0.4rem; }
.nf-essay__list dd { margin: 0; color: var(--color-muted); font-size: 0.98rem; line-height: 1.55; }

@media (max-width: 960px) {
    .nf-essay { grid-template-columns: 1fr; }
    .nf-essay__list { grid-column: 1; grid-row: auto; }
    .nf-essay__list > div { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ====== CALLOUT (CTA strip on detail) ====== */
.nf-callout {
    margin: clamp(3rem, 6vw, 5rem) 0;
    padding: clamp(2rem, 5vw, 3rem);
    border: 1px solid var(--color-accent);
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.12) 0%, rgba(255, 102, 0, 0.02) 100%);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 2rem;
    align-items: center;
}
.nf-callout__copy h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0.5rem 0 1rem; line-height: 0.95; }
.nf-callout__copy p { color: var(--color-muted); margin: 0; max-width: 50ch; }
@media (max-width: 720px) {
    .nf-callout { grid-template-columns: 1fr; }
    .nf-callout .nf-btn { width: 100%; }
}

/* ====== FAQ ====== */
.nf-faq { margin: clamp(3rem, 6vw, 5rem) 0; }
.nf-faq__head { margin: 0 0 2.5rem; max-width: 720px; }
.nf-faq__head h2 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; line-height: 0.95; }
.nf-faq__list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--color-border-bold); border-bottom: 1px solid var(--color-border-bold); }
.nf-faq__list details { border-bottom: 1px dashed var(--color-border-bold); padding: 1.25rem 0; }
.nf-faq__list details:last-child { border-bottom: none; }
.nf-faq__list summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
    font-size: 1.05rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    transition: color .15s ease;
}
.nf-faq__list summary::-webkit-details-marker { display: none; }
.nf-faq__list summary::after { content: " +"; margin-left: auto; color: var(--color-accent); font-family: var(--font-mono); font-weight: 700; }
.nf-faq__list details[open] summary::after { content: " −"; }
.nf-faq__list summary .nf-mono { color: var(--color-accent); font-size: 0.78rem; flex-shrink: 0; }
.nf-faq__list summary:hover { color: var(--color-accent); }
.nf-faq__list p { color: var(--color-muted); margin: 1rem 0 0 3.25rem; line-height: 1.6; max-width: 70ch; }
@media (max-width: 640px) {
    .nf-faq__list p { margin-left: 0; }
}

.nf-disclaimer { color: var(--color-muted); margin: 2rem 0 0; max-width: 800px; font-size: 0.85rem; line-height: 1.5; }

/* ====== CONTACT FORM ====== */
.nf-page__intro--contact { max-width: 720px; }
.nf-contact__channels {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1rem;
}
.nf-contact__channels li { color: var(--color-muted); }
.nf-contact__channels li .nf-mono { color: var(--color-accent); margin-right: 0.5rem; }
.nf-contact__channels li strong { color: var(--color-text); margin-right: 0.5rem; font-weight: 600; }

.nf-contact__form-wrap {
    max-width: 700px;
    margin: 2rem 0 4rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--color-border-bold);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    position: relative;
}
.nf-contact__form-wrap::before {
    content: "[FORM]";
    position: absolute;
    top: -0.6em;
    left: 1.5rem;
    padding: 0 0.5rem;
    background: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--color-accent);
}
.nf-contact__form { display: grid; gap: 1.25rem; }
.nf-contact__form-eyebrow { margin: 0 0 0.5rem; }
.nf-contact__form label, .nf-contact__form .form-label {
    display: block;
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 600;
}
.nf-contact__form input,
.nf-contact__form textarea,
.nf-contact__form select {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-bold);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color .15s ease, background .15s ease;
}
.nf-contact__form input:focus,
.nf-contact__form textarea:focus,
.nf-contact__form select:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg);
}
.nf-contact__form textarea { min-height: 120px; resize: vertical; }
.nf-contact__form .form-error, .nf-contact__form .help-block, .nf-contact__form .invalid-feedback {
    color: var(--color-error);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

.nf-flash {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    margin: 1rem 0;
    font-size: 0.95rem;
    font-family: var(--font-mono);
}
.nf-flash--success { background: rgba(74, 222, 128, 0.08); color: var(--color-success); border: 1px solid var(--color-success); }
.nf-flash--error { background: rgba(248, 113, 113, 0.08); color: var(--color-error); border: 1px solid var(--color-error); }

/* Legacy fallbacks (kept for any unmigrated templates) */
.flash { padding: 1rem; border-radius: var(--radius-sm); margin: 1rem 0; font-family: var(--font-mono); }
.flash--success { background: rgba(74, 222, 128, 0.08); color: var(--color-success); border: 1px solid var(--color-success); }
.flash--error { background: rgba(248, 113, 113, 0.08); color: var(--color-error); border: 1px solid var(--color-error); }

/* ============================================================================
   Section 1 on Victor SPA (overlay context).
   The SPA serves data-page panels stacked behind the 3D canvas — keep
   tone aligned with /produkty templates but tighter (90vh max-height) and
   slightly more atmospheric since the orange canvas is behind it.
   ============================================================================ */
/* v0.4.3 Section 1 UX fix — Direction A: 3-column at-a-glance triptych.
   Visitor lands on Section 1 and sees all 3 ASICs side-by-side, no scroll
   needed. Full breakdown/services list deferred to /produkty/{slug}. */
.content-section--scrollable { overflow-y: auto; max-height: 90vh; padding: 2rem; }

/* v0.4.5 Section 1 width fix — STROJE long-form editorial slabs need
   ~1200px to render the rail + heading + price-sidebar grid properly
   (same as the standalone /produkty page). Victor's `.content` wrapper
   is `width: 60%; max-width: 1250px` which clamps Section 1 to ~864px
   on a 1440px viewport, squashing the layout. We break out of that
   constraint for `[data-page="1"]` only, leaving Sections 0/2/3/4/5
   untouched.

   `.content` is `position: absolute; left: 50%; transform: translate(-50%,-50%)`
   so we use viewport-relative width + a negative translate to recenter
   under the same anchor. */
.content-section--scrollable.nf-section-stroje[data-page="1"] {
    width: min(1280px, 96vw);
    max-width: 96vw;
    /* Re-center under the parent `.content` (which is anchored at left:50% with
       its own translate). Using calc on left + transform keeps it centered
       in the viewport without changing the parent. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
    align-items: stretch;
    justify-content: flex-start;
}

.nf-section-stroje { text-align: left; display: flex; flex-direction: column; }
.nf-section-stroje__head { max-width: 920px; margin: 0 0 2rem; }
.nf-section-stroje__title { font-size: clamp(2rem, 5.5vw, 4rem); margin: 0 0 1rem; line-height: 0.92; color: var(--color-text); }
.nf-section-stroje__lead { color: var(--color-muted); font-size: 1rem; max-width: 62ch; margin: 0; }
.nf-section-stroje__lead .nf-mono { color: var(--color-text); font-size: 0.9rem; }
.nf-section-stroje__foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--color-border-bold); }

/* Triptych grid — 3 cards side-by-side at >= 1024px, stacks below */
.nf-machines { list-style: none; margin: 0; padding: 0; }
.nf-machines--triptych {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.nf-machine--compact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.25rem 1.5rem;
    border: 1px solid var(--color-border-bold);
    border-top: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: rgba(18, 18, 18, 0.92);
}

.nf-machine__compact-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    border-bottom: 1px dashed var(--color-border-bold);
    padding-bottom: 0.85rem;
}
.nf-machine__index {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 0.85;
    letter-spacing: -0.06em;
    -webkit-text-stroke: 1px var(--color-accent);
    color: transparent;
}
.nf-machine__badge {
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    align-self: center;
}
.nf-machine__badge--fast-track { background: var(--color-accent); color: #000; }
.nf-machine__badge--standard { background: rgba(31, 31, 31, 0.92); color: var(--color-muted); border: 1px solid var(--color-border-bold); }

.nf-machine__heading { }
.nf-machine__kicker { margin: 0 0 0.35rem; font-size: 0.7rem; color: var(--color-muted); letter-spacing: 0.05em; }
.nf-machine__kicker .nf-mono { color: var(--color-text); }
.nf-machine__name {
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    margin: 0;
    color: var(--color-text);
    line-height: 1.05;
}

.nf-machine__hash {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}
.nf-machine__hash-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--color-muted); width: 100%; }
.nf-machine__hash-value { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--color-accent); line-height: 0.9; }
.nf-machine__hash-unit { font-family: var(--font-mono); color: var(--color-muted); font-size: 0.78rem; font-weight: 600; }

.nf-machine__stats--compact {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.nf-machine__stats--compact > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.5rem 0.5rem 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.78rem;
}
.nf-machine__stats--compact > div:nth-child(even) { padding-left: 0.5rem; padding-right: 0; border-left: 1px dashed var(--color-border); }
.nf-machine__stats--compact dt { margin: 0; color: var(--color-muted); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; }
.nf-machine__stats--compact dd { margin: 0; color: var(--color-text); font-weight: 700; }

.nf-machine__price--compact {
    margin-top: auto;
    position: relative;
    padding: 1rem 1rem 1.1rem;
    background: rgba(255, 102, 0, 0.04);
    border: 1px solid var(--color-border-bold);
    border-radius: var(--radius-sm);
}
.nf-machine__price--compact::before {
    content: "[CENA]";
    position: absolute;
    top: -0.65em;
    left: 0.85rem;
    padding: 0 0.4rem;
    background: var(--mainCanvasBackground, #141414);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--color-accent);
}
.nf-machine__price-eyebrow { margin: 0 0 0.2rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--color-muted); text-transform: uppercase; }
.nf-machine__price-value { font-size: clamp(1.4rem, 2.4vw, 1.85rem); color: var(--color-accent); margin: 0 0 0.4rem; line-height: 1; }
.nf-machine__price-value small { font-size: 0.4em; font-weight: 600; letter-spacing: 0.02em; }
.nf-machine__price-note { font-size: 0.68rem; color: var(--color-warn); margin: 0 0 0.7rem; }
.nf-machine__actions { display: flex; flex-direction: column; gap: 0.35rem; }
.nf-machine__actions .nf-btn { font-size: 0.72rem; padding: 0.55rem 0.7rem; text-align: center; }

@media (max-width: 1023px) {
    .nf-machines--triptych { grid-template-columns: 1fr; gap: 1rem; }
    .nf-machine--compact { padding: 1rem; }
}
@media (max-width: 600px) {
    .nf-machine__stats--compact { grid-template-columns: 1fr; }
    .nf-machine__stats--compact > div:nth-child(even) { border-left: none; padding-left: 0; padding-right: 0; }
}

/* v0.4.5 Section 1 long-form `.nf-machine` (NOT compact/triptych) — mirrors
   the `/produkty` `.nf-row` editorial grid: rail (index + badge) on the left,
   heading + hash + stats stacked center, ALL-IN price sidebar on the right,
   breakdown expander beneath spanning rail+center. Scoped to Section 1 via
   the `[data-page="1"]` parent so it can't leak into the Section 2 triptych
   cards. */
.nf-section-stroje[data-page="1"] .nf-machines {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nf-section-stroje[data-page="1"] .nf-machine:not(.nf-machine--compact) {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
        "rail    heading price"
        "rail    hash    price"
        "rail    stats   price"
        "break   break   break";
    column-gap: 2rem;
    row-gap: 0.5rem;
    align-items: start;
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--color-border-bold);
    border-bottom: 1px solid var(--color-border);
}
.nf-section-stroje[data-page="1"] .nf-machine:not(.nf-machine--compact):first-child {
    border-top: 2px solid var(--color-accent);
}

/* Rail cell — `.nf-machine__index` + `.nf-machine__badge` (siblings) stack
   vertically. The existing `.nf-machine__index` has a small font-size for
   the triptych use; bump it for the long-form so it matches the
   `.nf-row__index` "rail number" feel. */
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__index {
    grid-area: rail;
    align-self: start;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 0.85;
    letter-spacing: -0.06em;
    position: sticky;
    top: 1rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__badge {
    grid-area: rail;
    align-self: end;
    justify-self: start;
    margin-top: 0;
    /* Stack below the index using a second grid row inside the rail area
       via inline-block + manual offset; sticky on the parent keeps it in flow. */
    position: relative;
    top: clamp(4.5rem, 7vw, 7rem);
}

.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__heading { grid-area: heading; }
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__heading .nf-machine__kicker {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__heading .nf-machine__name {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    margin: 0;
    line-height: 1;
}

.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__hash {
    grid-area: hash;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--color-border-bold);
    flex-wrap: nowrap;
    gap: 0.85rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__hash .nf-machine__hash-label {
    width: 5.5em;
    flex-shrink: 0;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__hash .nf-machine__hash-value {
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 0.9;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__hash .nf-machine__hash-unit {
    font-size: 1rem;
}

.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__stats {
    grid-area: stats;
    margin: 1.25rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px dashed var(--color-border-bold);
    list-style: none;
    padding: 0;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__stats > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.92rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__stats > div:nth-child(even) {
    padding-left: 1rem;
    padding-right: 0;
    border-left: 1px dashed var(--color-border);
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__stats dt {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__stats dt small {
    font-size: 0.7rem;
    color: var(--color-dim);
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__stats dd {
    margin: 0;
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.92rem;
    text-align: right;
}

.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price {
    grid-area: price;
    position: relative;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-bold);
    border-radius: var(--radius-md);
    margin-top: 0;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price::before {
    content: "[CENA]";
    position: absolute;
    top: -0.6em;
    left: 1rem;
    padding: 0 0.5rem;
    background: var(--mainCanvasBackground, var(--color-bg, #141414));
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--color-accent);
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price .nf-machine__price-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    margin: 0 0 0.25rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price .nf-machine__price-value {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin: 0 0 1rem;
    line-height: 1;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price .nf-machine__price-lines {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px dashed var(--color-border);
    border-bottom: 1px dashed var(--color-border);
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price .nf-machine__price-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price .nf-machine__price-lines li .nf-mono {
    color: var(--color-text);
    font-weight: 600;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price .nf-machine__price-note {
    font-size: 0.8rem;
    margin: 0 0 1.25rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__price .nf-machine__actions .nf-btn {
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    width: 100%;
}

.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown {
    grid-area: break;
    margin-top: 1.5rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown summary {
    list-style: none;
    cursor: pointer;
    padding: 0.75rem 0;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-family: var(--font-mono);
    border-top: 1px dashed var(--color-border-bold);
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown summary::-webkit-details-marker { display: none; }
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown summary::before {
    content: "+ ";
    color: var(--color-accent);
    font-weight: 700;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown[open] summary::before { content: "− "; }
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown summary:hover { color: var(--color-text); }
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown ul {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 2rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown ul li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed var(--color-border);
    color: var(--color-text);
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown ul li.is-optional { color: var(--color-muted); }
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown ul li em {
    font-style: italic;
    font-size: 0.7rem;
    color: var(--color-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 0.25rem;
}
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown ul li strong { font-weight: 700; white-space: nowrap; }
.nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__breakdown .nf-machine__breakdown-note {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 1rem 0 0;
}

/* Tablet — drop sidebar into single column under heading, keep rail compact */
@media (max-width: 1023px) {
    .nf-section-stroje[data-page="1"] .nf-machine:not(.nf-machine--compact) {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "rail heading"
            "rail hash"
            "rail stats"
            "rail price"
            "break break";
    }
    .nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__index {
        position: static;
        font-size: 3rem;
    }
    .nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__badge {
        position: static;
        top: auto;
        align-self: start;
    }
}
@media (max-width: 640px) {
    .nf-section-stroje[data-page="1"] .nf-machine:not(.nf-machine--compact) {
        grid-template-columns: 1fr;
        grid-template-areas:
            "rail"
            "heading"
            "hash"
            "stats"
            "price"
            "break";
        column-gap: 0;
        row-gap: 1rem;
    }
    .nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__stats { grid-template-columns: 1fr; }
    .nf-section-stroje[data-page="1"] .nf-machine > .nf-machine__stats > div:nth-child(even) {
        border-left: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ===== Section 3 benefits — kept light, harmonized with new tokens ===== */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--color-border-bold); margin: 1.5rem 0; text-align: left; border: 1px solid var(--color-border-bold); }
.benefit { background: rgba(22, 22, 22, 0.95); padding: 1.5rem 1.25rem; }
.benefit__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-accent); margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.benefit p { font-size: 0.88rem; color: var(--color-muted); line-height: 1.55; margin: 0; }

/* Suppress legacy machine-card / product-list classes if anything still references them */
.machine-card, .product-list, .product-list__box, .page-list, .page-detail, .site-header, .page-contact { /* unstyled — replaced by nf-* */ }