/* Hallmark · macrostructure: Index-First (marketing) + Long Document (content) + Ledger (action)
 * tone: editorial-dark · anchor hue: warm 36° · genre: editorial
 * nav: N6 Masthead · footer: Ft5 Statement · enrichment: none (typography only)
 * theme: brand-locked KAI-SOL palette, OKLCH via tokens.css
 * motion: entrance · rule-draw · spotlight
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 *
 * Sustav zaključan u design.md. Svi headinzi ROMAN, nula eyebrow oznaka,
 * nula lažnog chromea, boje samo preko tokena, ritam sekcija namjerno nejednak.
 * Zamjenjuje base.css + home/usluge/iskustvo/kontakt/o-nama.css na svim
 * redizajniranim stranicama. Legacy CSS ostaje na disku samo za rollback.
 */

/* ============================================================
   1 · Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: var(--space-2xs);
  border-radius: var(--radius-sm);
}

body {
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  position: relative;
}

/* Zrnata tekstura preko cijele stranice: tiskarski osjećaj, ne "tech" */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* ============================================================
   2 · Tipografija
   ============================================================ */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-style: normal;            /* kurzivni naslov = AI trag. Nikad. */
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: var(--track-display);
  line-height: 1.02;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-display-s); }
h3 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: normal; line-height: 1.2; }
h4 { font-size: var(--text-base); font-weight: 500; letter-spacing: normal; }

p { color: var(--color-ink-2); }
strong { color: var(--color-ink); font-weight: 600; }
em { font-style: italic; }        /* samo u tekućem tekstu, nikad u naslovu */

.lede { font-size: var(--text-lg); max-width: 46ch; color: var(--color-ink-2); }
.small { font-size: var(--text-sm); color: var(--color-ink-3); }
.xs { font-size: var(--text-xs); color: var(--color-ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* Naglasak bez kurziva: akcent + nacrtana linija */
.mark { position: relative; color: var(--color-accent); white-space: nowrap; }
.mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.07em;
  height: 2px; background: var(--color-accent); opacity: 0.45;
}

/* Sav display tekst koji nije heading: lomi duge riječi (gate 51) */
.pull, .idx-name, .conf-name, .info-v, .tier-name, .spec-v,
.res-item b, .nf-code, .foot-line, .wordmark {
  overflow-wrap: anywhere; min-width: 0;
}

/* ============================================================
   3 · Layout
   ============================================================ */
.shell { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--page-gutter); }
.band { padding-block: var(--space-3xl); }
.band--tight { padding-block: var(--space-2xl); }
.band--tall { padding-block: var(--space-4xl); }
.band--ruled { border-top: var(--rule-hair) solid var(--color-rule); }
.band--paper2 { background: var(--color-paper-2); }

/* Prvi blok na stranici: donji padding 1.55x gornjeg, da masthead
   sjedne u stranicu umjesto da lebdi (gate 44). */
main > section:first-child.band--tight,
main > section:first-child.band {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.split {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl); align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--doc { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

/* ============================================================
   4 · Masthead (N6) + fullscreen meni
   ============================================================ */
.mast {
  position: sticky; top: 0; z-index: 300;
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.mast-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); min-height: 72px;
}
.wordmark {
  font-family: var(--font-display); font-style: normal; font-weight: 500;
  font-size: var(--text-2xl); letter-spacing: 0.01em; color: var(--color-ink);
  white-space: nowrap; line-height: 1;
}
.wordmark:hover { color: var(--color-accent); }
.wordmark:active { color: var(--color-accent-2); }
.mast-right { display: flex; align-items: center; gap: var(--space-md); }
.mast-mail {
  font-size: var(--text-sm); color: var(--color-ink-3); white-space: nowrap;
}
.mast-mail:hover { color: var(--color-accent); }
.mast-mail:active { color: var(--color-accent-2); }

.menu-btn {
  display: flex; align-items: center; gap: var(--space-sm);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink);
  white-space: nowrap; line-height: 1;
}
.menu-btn:hover { color: var(--color-accent); }
.menu-btn:active { color: var(--color-accent-2); }
.menu-btn-bars { display: grid; gap: var(--space-2xs); width: 24px; }
.menu-btn-bars span {
  display: block; height: 1.5px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.menu-btn[aria-expanded="true"] .menu-btn-bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu-btn .lbl-close, .menu-btn[aria-expanded="true"] .lbl-open { display: none; }
.menu-btn[aria-expanded="true"] .lbl-close { display: inline; }

.menu {
  position: fixed; inset: 0; z-index: 290;
  background: var(--color-paper);
  display: flex; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.menu.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-slow) var(--ease-out); }
.menu-in { display: grid; gap: var(--space-2xl); width: 100%; padding-top: 72px; }
.menu-links { display: grid; gap: var(--space-2xs); }
.menu-links a {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: clamp(1.75rem, 6vw, 4rem); color: var(--color-ink-3);
  transition: color var(--dur-base) var(--ease-out);
  overflow-wrap: anywhere;
}
.menu-links a:hover { color: var(--color-ink); }
.menu-links a:active { color: var(--color-accent-2); }
.menu-links a[aria-current="page"] { color: var(--color-accent); }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
body.menu-open { overflow: hidden; }

/* ============================================================
   5 · Gumbi i linkovi, svih 8 stanja
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); line-height: 1;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  color: var(--color-ink); background: transparent;
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.chip:hover, .chip.is-hover { border-color: var(--color-accent); color: var(--color-accent); }
.chip:focus-visible, .chip.is-focus { outline: var(--rule-thick) solid var(--color-focus); outline-offset: var(--space-2xs); }
.chip:active, .chip.is-active { background: var(--color-paper-3); }
.chip[disabled], .chip.is-disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--color-rule); color: var(--color-ink-3); }
.chip[data-state="loading"] { color: var(--color-ink-3); cursor: progress; }
.chip[data-state="error"] { border-color: var(--color-accent); color: var(--color-accent); }
.chip[data-state="success"] { border-color: var(--color-ok); color: var(--color-ok); }

.chip--solid { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.chip--solid:hover, .chip--solid.is-hover { background: var(--color-accent-2); border-color: var(--color-accent-2); color: var(--color-on-accent); }
.chip--solid:active { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.chip--lg { padding: var(--space-md) var(--space-lg); font-size: var(--text-lg); }

.tlink {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  color: var(--color-ink); white-space: nowrap; display: inline-block;
  border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-bottom: var(--space-2xs);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tlink:hover { color: var(--color-accent); border-color: var(--color-accent); }
.tlink:active { color: var(--color-accent-2); border-color: var(--color-accent-2); }
.tlink[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.assure {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md);
  font-size: var(--text-sm); color: var(--color-ink-3);
}
.assure .sep { color: var(--color-rule-2); }
.assure a { color: var(--color-ink-2); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.assure a:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ============================================================
   6 · Index-First: nosivi popis marketinških stranica
   ============================================================ */
.idx { border-top: var(--rule-hair) solid var(--color-rule); }
.idx-row {
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2xs) var(--space-md); align-items: baseline;
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: inherit;
}
.idx-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: var(--rule-hair); background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.idx-row:hover::after, .idx-row:focus-visible::after { transform: scaleX(1); }
.idx-row:hover .idx-name, .idx-row:focus-visible .idx-name { color: var(--color-accent); }
.idx-row:active .idx-name { color: var(--color-accent-2); }
.idx-row[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.idx-n {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--track-wide); color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}
.idx-name {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: var(--text-4xl); color: var(--color-ink); line-height: 1.05;
  transition: color var(--dur-fast) var(--ease-out);
  overflow-wrap: anywhere;
}
.idx-price {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.idx-desc {
  grid-column: 2 / -1; font-size: var(--text-sm); color: var(--color-ink-3); max-width: 58ch;
}

/* ============================================================
   7 · Long Document: sadržajne stranice
   ============================================================ */
.doc { max-width: 62ch; }
.doc > * + * { margin-top: var(--space-md); }
.doc h2 { margin-top: var(--space-2xl); }
.doc h3 { margin-top: var(--space-lg); color: var(--color-ink); }
.doc ul { display: grid; gap: var(--space-xs); }
.doc ul li { padding-left: var(--space-md); position: relative; }
.doc ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: var(--rule-hair); background: var(--color-accent);
}

.note {
  border-left: var(--rule-thick) solid var(--color-rule-2);
  padding-left: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-3);
}
.note strong { color: var(--color-ink-2); }

.pull {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: var(--text-4xl); line-height: 1.22; color: var(--color-ink);
  max-width: 34ch;
}
.pull-cite {
  display: block; margin-top: var(--space-md); font-style: normal;
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink-3);
}

/* Slučaj: zaglavlje s rednim brojem, pa problem / rješenje / rezultat */
.case { border-top: var(--rule-thick) solid var(--color-rule-2); padding-top: var(--space-lg); }
.case + .case { margin-top: var(--space-3xl); }
.case-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-md);
  font-size: var(--text-xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--color-ink-3); font-weight: 700;
}
.case-meta .live { color: var(--color-accent); }
.case h2 { margin-top: var(--space-sm); }
.case-env { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-3); }
.pr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); }
.pr h4 {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.pr p, .pr ul { font-size: var(--text-base); }
.pr ul { display: grid; gap: var(--space-2xs); margin-top: var(--space-xs); }
.pr ul li { position: relative; padding-left: var(--space-md); color: var(--color-ink-2); }
.pr ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: var(--rule-hair); background: var(--color-rule-2); }

/* Rezultati: prave brojke klijenta, tabularno */
.res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.res-item b {
  display: block; font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: var(--text-4xl); color: var(--color-accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.res-item span { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-3); }

/* ============================================================
   8 · Spec: izmjerene brojke ove stranice
   ============================================================ */
.spec { border-top: var(--rule-hair) solid var(--color-rule); }
.spec-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md);
  align-items: baseline; padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.spec-k { font-size: var(--text-sm); color: var(--color-ink-3); }
.spec-v {
  font-family: var(--font-display); font-style: normal; font-size: var(--text-2xl);
  color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spec-row--hero .spec-v { color: var(--color-accent); }
.spec-note { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.5; }

/* ============================================================
   9 · Redni popisi
   ============================================================ */
.ord { display: grid; gap: var(--space-xl); }
.ord--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ord--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ord--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ord-item { display: grid; gap: var(--space-xs); align-content: start; }
.ord-n {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--track-wide); color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.ord-item p { font-size: var(--text-base); }
.ord-price { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* Cjenovne razine na usluge stranici */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.tier-name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
.tier-price { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); font-variant-numeric: tabular-nums; margin-top: var(--space-2xs); }
.tier ul { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.tier ul li { position: relative; padding-left: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.tier ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: var(--rule-hair); background: var(--color-rule-2); }

/* ============================================================
   10 · Ledger: kontakt stranica
   ============================================================ */
.ledger { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.steps { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.step-n {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--track-wide); color: var(--color-accent);
  font-variant-numeric: tabular-nums; padding-top: 0.35em;
}
.step strong { display: block; color: var(--color-ink); }
.step p { font-size: var(--text-sm); color: var(--color-ink-3); margin-top: var(--space-2xs); }

.info { display: grid; gap: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }
.info-item { display: grid; gap: var(--space-2xs); }
.info-k { font-size: var(--text-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--color-ink-3); font-weight: 700; }
.info-v { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
a.info-v:hover { color: var(--color-accent); }
a.info-v:active { color: var(--color-accent-2); }

/* Forma: sva stanja polja */
.form { display: grid; gap: var(--space-md); border-top: var(--rule-thick) solid var(--color-rule-2); padding-top: var(--space-lg); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.field label small { font-weight: 400; color: var(--color-ink-3); }
.field .req { color: var(--color-accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-ink-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.45; cursor: not-allowed; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-accent); }
.field input:user-valid, .field textarea:user-valid { border-color: var(--color-ok); }
.form-note { font-size: var(--text-xs); color: var(--color-ink-3); }
.form-ok { font-size: var(--text-sm); color: var(--color-ok); }
.form-ok a { border-bottom: var(--rule-hair) solid var(--color-ok); }

/* Konfigurator paketa */
.conf { border-top: var(--rule-thick) solid var(--color-rule-2); padding-top: var(--space-lg); display: grid; gap: var(--space-md); }
.conf-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md);
  align-items: baseline; padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule); cursor: pointer;
}
.conf-opt:hover .conf-name { color: var(--color-accent); }
.conf-opt input { width: 20px; height: 20px; accent-color: var(--color-accent); cursor: pointer; }
.conf-opt input:focus-visible { outline: var(--rule-thick) solid var(--color-focus); outline-offset: 2px; }
.conf-name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); transition: color var(--dur-fast) var(--ease-out); }
.conf-opt em { font-style: normal; font-size: var(--text-sm); color: var(--color-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conf-total { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }
.conf-total span { display: block; font-size: var(--text-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--color-ink-3); font-weight: 700; }
.conf-total b { display: block; margin-top: var(--space-2xs); font-family: var(--font-display); font-weight: 400; font-size: var(--text-4xl); color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* ============================================================
   11 · Ft5 Statement footer
   ============================================================ */
.foot { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-3xl) var(--space-xl); }
.foot-line {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: var(--text-display-s); line-height: 1.02; letter-spacing: var(--track-display);
  color: var(--color-ink); max-width: 26ch; overflow-wrap: anywhere;
}
.foot-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm); color: var(--color-ink-3);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot-meta a { color: var(--color-ink-2); white-space: nowrap; }
.foot-meta a:hover { color: var(--color-accent); }
.foot-meta a:active { color: var(--color-accent-2); }

/* ============================================================
   12 · 404
   ============================================================ */
.nf { min-height: 70svh; display: grid; align-content: center; gap: var(--space-md); }
.nf-code {
  font-family: var(--font-display); font-style: normal; font-size: var(--text-display);
  color: var(--color-accent); line-height: 1; font-variant-numeric: tabular-nums;
}

/* ============================================================
   13 · Gibanje: tri primitiva, ništa više
   ============================================================ */
.enter {
  opacity: 0; transform: translateY(10px);
  animation: enter var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes enter { to { opacity: 1; transform: none; } }

.spotlight {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%),
              var(--color-accent-glow), transparent 70%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.spotlight.active { opacity: 1; }

/* ============================================================
   14 · Responsive: 320 / 375 / 414 / 768
   ============================================================ */
@media (max-width: 64rem) {
  .split, .split--even, .split--doc, .ledger { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers, .ord--3, .ord--4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .pr { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  body { font-size: var(--text-base); }
  .band, .band--tall { padding-block: var(--space-2xl); }
  .ord--2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .res { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .form-row, .conf-total { grid-template-columns: minmax(0, 1fr); }
  .idx-row { grid-template-columns: auto minmax(0, 1fr); }
  .idx-price { grid-column: 2; }
  .idx-desc { grid-column: 1 / -1; }
  .mast-mail { display: none; }   /* nikad dva reda klikabilnog teksta */
  .foot-meta { flex-direction: column; align-items: flex-start; }
  .doc { max-width: none; }
}

/* ============================================================
   15 · prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enter { animation: enter-fade 150ms linear forwards; transform: none; }
  @keyframes enter-fade { to { opacity: 1; } }
  .idx-row::after, .menu-btn-bars span { transition: none; }
  .spotlight { display: none; }
}

/* ============================================================
   16 · Pomoćne klase (da HTML ne nosi inline stilove)
   ============================================================ */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-lg { margin-bottom: var(--space-lg); }
.mw-head { max-width: 22ch; }
.mw-head-wide { max-width: 30ch; }
.stack { display: grid; gap: var(--space-md); align-content: start; }
.stack-lg { display: grid; gap: var(--space-lg); align-content: start; }
.center-col { margin-inline: auto; }

/* ============================================================
   17 · Vrata: poziv prema zasto-nas.html
   Prije je ovdje stajao RGB gumb s glitchem. Poziv je ostao isti,
   samo dizajniran unutar sustava: tipografija, jedna akcentna
   linija koja se izvuce na hover, i posteno upozorenje na zvuk.
   Nema nove animacijske primitive - koristi rule-draw.
   ============================================================ */
.door {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl) var(--space-2xl); align-items: end;
  padding: var(--space-2xl) 0;
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
  color: inherit;
}
.door::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  height: var(--rule-thick); background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.door:hover::before, .door:focus-visible::before { transform: scaleX(1); }
.door:focus-visible { outline: var(--rule-thick) solid var(--color-focus); outline-offset: var(--space-sm); }
.door[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.door-title {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: var(--text-display-s); line-height: 1.02; letter-spacing: var(--track-display);
  color: var(--color-ink); max-width: 20ch; overflow-wrap: anywhere; min-width: 0;
  transition: color var(--dur-base) var(--ease-out);
}
.door:hover .door-title { color: var(--color-accent); }
.door:active .door-title { color: var(--color-accent-2); }
.door-lede { margin-top: var(--space-md); font-size: var(--text-base); color: var(--color-ink-2); max-width: 48ch; }

.door-side { display: grid; gap: var(--space-md); justify-items: start; }
.door-meta { display: grid; gap: var(--space-xs); }
.door-meta li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm);
  font-size: var(--text-sm); color: var(--color-ink-3);
}
.door-meta b {
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
  padding-top: 0.2em;
}
.door-go {
  display: inline-flex; align-items: center; gap: var(--space-sm); line-height: 1;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  color: var(--color-ink); white-space: nowrap;
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

@media (max-width: 64rem) {
  .door { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .door::before { transition: none; }
  .door-title { transition: none; }
}