/* ==========================================================================
   Fil 3D Solutions — design tokens
   ========================================================================== */
:root {
  --yellow: #FFD91A;
  --ink: #1b1b19;
  --paper: #f1f0eb;
  --paper-2: #e8e7e0;
  --stage: #ecebe5;
  --grid-line: #dad8d0;
  --rule: #c9c7bf;
  --rule-stage: #d3d1c9;
  --text-2: #4a4944;
  --text-3: #5b5a54;
  --dark-rule: #34332f;
  --dark-field: #232220;
  --dark-border: #45433e;
  --dark-muted: #9d9a91;
  --dark-muted-2: #b9b6ad;
  --dark-muted-3: #8d8a81;
  --dark-dash: #6a685f;

  --sans: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --px: clamp(20px, 4vw, 56px);
  --py: clamp(56px, 7vw, 96px);
  --t: .15s;
}

/* ==========================================================================
   Base
   ========================================================================== */
/* Kursor: mlaznica printera (samo za miš). Na poveznicama i gumbima iz vrha izlazi filament.
   Vrh mlaznice je točka klika (12 21). */
:root { --cursor-base: auto; --cursor-link: pointer; }
@media (pointer: fine) {
  :root {
    --cursor-base: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32"%3E%3Cg stroke="%23f1f0eb" stroke-width="1.5" stroke-linejoin="round"%3E%3Crect x="2" y="1" width="20" height="11" fill="%231b1b19"/%3E%3Cpath d="M6.5 12h11l-4 9h-3z" fill="%231b1b19"/%3E%3C/g%3E%3Cpath d="M4 4.5h16M4 8h16" stroke="%235b5a54" stroke-width="1"/%3E%3Crect x="10.5" y="20" width="3" height="2" fill="%23FFD91A"/%3E%3C/svg%3E') 12 21, auto;
    --cursor-link: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32"%3E%3Cg stroke="%23f1f0eb" stroke-width="1.5" stroke-linejoin="round"%3E%3Crect x="2" y="1" width="20" height="11" fill="%231b1b19"/%3E%3Cpath d="M6.5 12h11l-4 9h-3z" fill="%231b1b19"/%3E%3C/g%3E%3Cpath d="M4 4.5h16M4 8h16" stroke="%235b5a54" stroke-width="1"/%3E%3Crect x="10.5" y="21" width="3" height="9" fill="%23FFD91A" stroke="%231b1b19" stroke-width="1"/%3E%3C/svg%3E') 12 21, pointer;
  }
}
html { cursor: var(--cursor-base); }
a, button, summary, select, label[for] { cursor: var(--cursor-link); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }
main > * { flex-shrink: 0; }
.gallery-page { flex: 1; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }

a { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: #6e5c00; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono-label { font: 500 13px var(--mono); color: var(--text-3); }

.h2 { font-weight: 700; font-size: clamp(36px, 4.4vw, 48px); line-height: 1; letter-spacing: -.03em; }

.section {
  padding: var(--py) var(--px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.section--alt { background: var(--paper-2); }

.section-head { display: flex; flex-direction: column; gap: 14px; }
.section-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  padding: 18px 28px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: var(--cursor-link);
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
/* Primarni gumb: žuti s crnim tekstom; hover se puni crnim. */
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary { --fill: var(--ink); }
.btn--primary:hover { color: var(--yellow); }

.btn--dark { background: var(--ink); color: var(--yellow); }
.btn--dark { --fill: var(--yellow); }
.btn--dark:hover { color: var(--ink); }

.btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 17px 28px; }
.btn--outline { --fill: var(--yellow); }
.btn--outline:hover { color: var(--ink); }

.btn--yellow { background: var(--yellow); color: var(--ink); font-weight: 700; padding: 18px 30px; }
.btn--yellow { --fill: var(--paper); }
.btn--yellow:hover { color: var(--ink); }

.btn--sm { font-size: 15px; padding: 12px 20px; }
/* Pritisak: gumb se fizički spusti za 1px. */
.btn:active, .chip:active, .menu-toggle:active { transform: translateY(1px); }
.btn--outline.btn--md { font-size: 16px; padding: 14px 22px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px var(--px);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink); text-decoration: none;
  transition: opacity var(--t);
}
.brand:hover { color: var(--ink); }
/* Hover: logo se „isprinta“ odozdo prema gore, sloj po sloj, iz praznog. */
.brand-mark { display: block; flex-shrink: 0; }
.brand:hover .brand-mark img { animation: logoPrint .4s steps(8, end); }
@keyframes logoPrint { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.brand img { height: 30px; width: auto; }

.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; white-space: nowrap; min-width: 0; margin: 0 auto; }
/* HR / EN: trenutni jezik tamno, drugi je poveznica. Na mobitelu ostaje u traci uz izbornik. */
.lang-switch { display: flex; align-items: center; gap: 4px; margin-left: auto; font: 500 13px var(--mono); }
.nav + .lang-switch { margin-left: 0; }
.lang-switch [aria-current] { background: var(--ink); color: var(--paper); padding: 3px 6px; }
.lang-switch a { color: var(--text-3); text-decoration: none; padding: 8px 6px; transition: color var(--t); }
.lang-switch a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); }
.nav a { color: var(--text-3); text-decoration: none; transition: color var(--t); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: var(--cursor-link);
  position: relative;
  transition: background var(--t);
}
.menu-toggle:hover { background: var(--yellow); }
.menu-toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 28px; }
.menu-toggle[aria-expanded="true"] { background: var(--ink); }
.menu-toggle[aria-expanded="true"] span { background: var(--yellow); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding: 8px var(--px) 24px;
  display: flex; flex-direction: column;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) {
  display: flex; align-items: baseline; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600; font-size: 24px; letter-spacing: -.01em;
  text-decoration: none; color: var(--ink);
}
.mobile-menu a:not(.btn):hover, .mobile-menu a[aria-current="page"] { text-decoration: underline; }
.mobile-menu .btn { margin-top: 24px; text-align: center; }

@media (max-width: 900px) {
  .site-header .nav, .site-header > .btn { display: none; }
  /* Nav je skriven, pa jezik ide desno, uz gumb izbornika. */
  .site-header .lang-switch { margin-left: auto; margin-right: -8px; }
  .menu-toggle { display: block; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Hero s 3D pločom ispunjava ekran ispod headera (--header-h mjeri js/layout.js). */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  min-height: calc(100vh - var(--header-h, 83px));
  min-height: calc(100svh - var(--header-h, 83px));
  border-bottom: 1px solid var(--rule);
}
.hero-copy {
  padding: clamp(32px, min(6vw, 8vh), 88px) var(--px);
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 5vh, 56px);
}
/* Na širokim ekranima tekst ne raste dalje od naslova; blok se centrira u lijevom stupcu. */
@media (min-width: 960px) {
  .hero-copy {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    align-content: space-between;
  }
}
.hero-copy-top { display: flex; flex-direction: column; gap: 28px; }
.eyebrow { display: flex; gap: 16px; align-items: center; font: 500 13px var(--mono); color: var(--text-3); }
.blink {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--yellow); box-shadow: 0 0 0 1px var(--ink);
  animation: f3dBlink 1.6s infinite;
}
.hero h1 {
  font-weight: 700;
  /* Visina ovisi i o vh: cijela pozornica (sa specifikacijama) mora stati na prvi ekran. */
  font-size: clamp(44px, min(5.6vw, 8.5vh), 80px);
  line-height: .95;
  letter-spacing: -.035em;
}
/* Žuta pozadina prati svaki red teksta (ne širinu bloka kad se naslov prelomi). */
.highlight-line { display: block; margin-top: .12em; line-height: 1.02; }
.highlight {
  /* Inline pozadina pokriva cijelu visinu fonta; sužena je na visinu slova. */
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 58% / 100% .96em;
  padding: 0 .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lead { font-size: 20px; line-height: 1.5; color: var(--text-2); max-width: 500px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* 3D stage */
.stage {
  position: relative;
  min-height: 520px;
  border-left: 1px solid var(--rule);
  background-color: var(--stage);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  overflow: hidden;
}
.stage-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  font: 500 12px var(--mono); color: var(--text-3);
  border-bottom: 1px solid var(--rule-stage);
  background: var(--stage);
}
.stage-bar span { white-space: nowrap; }
.stage-view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage-fit { display: flex; align-items: center; justify-content: center; }
.stage-specs {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  font: 500 12px var(--mono); color: var(--text-3);
  border-top: 1px solid var(--rule-stage);
  background: var(--stage);
}
.stage-specs > div { padding: 14px 20px; display: flex; flex-direction: column; gap: 4px; }
.stage-specs > div + div { border-left: 1px solid var(--rule-stage); }
.stage-specs strong { color: var(--ink); font-size: 14px; font-weight: 500; }

@media (max-width: 991px) {
  .stage { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .stage { min-height: 520px; }
  .stage-specs > div { padding: 12px 14px; }
}

.stage-wrap, .stage-inner {
  display: flex; align-items: center; justify-content: center;
}
/* Perspektiva samo na jednom elementu: ulazna animacija (transform) na istom ili
   ugniježđenom perspective elementu tjera preglednik da svaki frame ponovno slaže 3D scenu. */
.stage-inner { perspective: 1400px; position: relative; }
.stage-wrap { animation: f3dIn .7s cubic-bezier(.2, .7, .2, 1) backwards; }
/* Logo: bez opacity na roditelju 3D scene. Opacity < 1 spljošti cijelu scenu u jednu
   teksturu, a kad dosegne 1 preglednik je vraća u 3D — taj prijelaz je trzaj na početku.
   Konture i rubovi ionako kreću od nule, pa fade nije potreban. */
.stage-wrap.is-logo { animation-name: f3dInMove; }
@keyframes f3dInMove { 0% { transform: translateY(24px) scale(.94) } 100% { transform: none } }
.stage-inner { transition: opacity .6s ease, transform .6s ease, filter .6s ease; }
.stage-inner.is-leaving { opacity: 0; filter: blur(6px); transform: translateY(-16px) scale(1.04); }

/* 3D primitives */
.f3d-solid { position: absolute; inset: 0; opacity: 0; animation: f3dSolidL 8s ease-out infinite; }
/* --len: stvarna duljina konture (logo); zupčanik koristi pathLength="1" pa je zadano 1. */
.f3d-wire { stroke-dasharray: var(--len, 1); stroke-dashoffset: var(--len, 1); animation: f3dWireL 8s ease-in-out infinite; }
.f3d-edge {
  position: absolute; left: 0; top: 0; width: 1px;
  background: var(--ink);
  transform-origin: 0 0;
  transform: var(--t);
  animation: f3dEdge 8s ease-out both;
}
.f3d-face {
  position: absolute;
  border: 1px solid var(--ink);
  background-color: transparent;
  animation: f3dFace 8s ease-out both;
}
.f3d-edge--z { animation-name: f3dEdgeZ; }
/* Grad: stijenke rastu od tla (samo transform), krov se zatvori na vrhu. */
.f3d-side { position: absolute; border: 1px solid var(--ink); overflow: hidden; }
.f3d-fill { background: var(--c); overflow: hidden; }
.f3d-fill > i { background: var(--l); }
.f3d-rise { position: absolute; inset: 0; transform: var(--from); animation-name: f3dRise; animation-timing-function: linear; animation-fill-mode: both; }
.f3d-roof { animation: f3dRoof .2s ease-out both; }
.stage.is-static .f3d-solid { opacity: 1; animation: none; }
.stage.is-static .f3d-edge { animation: none; }
.stage.is-static .stage-wrap { animation: none; }
.stage.is-paused * { animation-play-state: paused !important; }

@keyframes f3dWireL { 0% { stroke-dashoffset: var(--len, 1); opacity: 1 } 30% { stroke-dashoffset: 0; opacity: 1 } 62% { stroke-dashoffset: 0; opacity: 1 } 72%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes f3dSolidL { 0%, 40% { opacity: 0 } 46%, 100% { opacity: 1 } }
/* scaleY(0) daje degeneriranu 3D matricu koju preglednici iscrtavaju nestabilno → .001 */
@keyframes f3dEdge { 0%, 8% { transform: var(--t) scaleY(.001) } 32%, 100% { transform: var(--t) scaleY(1) } }
@keyframes f3dEdgeZ { 0%, 8% { transform: var(--t) scaleX(.001) } 32%, 100% { transform: var(--t) scaleX(1) } }
@keyframes f3dIn { 0% { opacity: 0; transform: translateY(24px) scale(.94) } 100% { opacity: 1; transform: none } }
@keyframes f3dFace { 0%, 36% { background-color: transparent; background-image: none } 50%, 100% { background-color: var(--c); background-image: var(--l) } }
@keyframes f3dRise { to { transform: none } }
@keyframes f3dRoof { from { background-color: transparent } to { background-color: var(--c) } }
@keyframes f3dBlink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* ==========================================================================
   Usluge
   ========================================================================== */
.services {
  padding: var(--py) var(--px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px;
  border-bottom: 1px solid var(--rule);
}
.services > .section-head { position: sticky; top: 32px; align-self: start; }
.services-list { grid-column: span 2; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); min-width: 0; }
.services-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 26px 8px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.services-list h3 { font-weight: 600; font-size: 26px; letter-spacing: -.01em; }
.services-list p { font-size: 17px; line-height: 1.5; color: var(--text-2); }

@media (max-width: 700px) {
  .services-list { grid-column: auto; }
  .services > .section-head { position: static; }
  .services-list li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ==========================================================================
   Materijali
   ========================================================================== */
.materials-intro { font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 62ch; }
.materials-table { background: var(--paper); border: 1px solid var(--ink); }
.materials-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1.2fr) minmax(0, 1fr) 120px 170px;
  gap: 24px;
  padding: 22px 24px;
  align-items: baseline;
  font-size: 17px;
  line-height: 1.45;
}
.materials-row + .materials-row { border-top: 1px solid var(--rule); }
.materials-row--head {
  padding: 14px 24px;
  background: var(--ink); color: var(--paper);
  font: 500 12px var(--mono); letter-spacing: .06em;
}
.materials-name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 22px; }
.materials-name::before { content: ""; width: 10px; height: 10px; background: var(--yellow); box-shadow: 0 0 0 1px var(--ink); flex-shrink: 0; }
.materials-use { color: var(--text-2); }
.materials-num { font: 500 15px var(--mono); white-space: nowrap; }

@media (max-width: 700px) {
  .materials-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px; }
  .materials-row--head { display: none; }
  .materials-row + .materials-row { border-top: 1px solid var(--rule); }
  .materials-name { margin-bottom: 4px; }
  .materials-num { font-size: 14px; }
  .materials-num::before { content: attr(data-label) " "; font-size: 12px; color: var(--text-3); letter-spacing: .06em; }
}

/* ==========================================================================
   Proces
   ========================================================================== */
.steps-wrap { position: relative; }
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.steps li {
  position: relative;
  padding: 28px 40px 0 0;
  display: flex; flex-direction: column; gap: 14px;
}
/* Čvor na putanji, na početku svakog koraka. */
.steps li::before {
  content: ''; position: absolute; left: -5px; top: -5px; z-index: 3;
  width: 9px; height: 9px; background: var(--yellow); border: 1px solid var(--ink);
}
.step-num { align-self: flex-start; font: 500 13px var(--mono); background: var(--yellow); padding: 3px 8px; border: 1px solid var(--ink); }
.steps h3 { font-weight: 600; font-size: 24px; letter-spacing: -.01em; }
.steps p { font-size: 16px; line-height: 1.5; color: var(--text-2); }

/* Putanja mlaznice: vodoravno uz gornji rub koraka; ispod 900px okomito uz lijevi rub. */
.toolpath { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: 2; }
.toolpath-fill { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--ink); transform-origin: left; }
.toolpath-carriage { position: absolute; left: 0; top: 0; width: 100%; height: 0; }
.toolpath-nozzle { position: absolute; right: -8px; bottom: 2px; line-height: 0; }

/* Vožnju animira js/process.js (Web Animations); ovo je početni položaj. */
.steps-wrap.is-idle .toolpath-fill { transform: scaleX(.001); }
.steps-wrap.is-idle .toolpath-carriage { transform: translateX(-100%); }

/* Oznake koraka pale se kad ih mlaznica dosegne; tekst je uvijek čitljiv. */
.steps-wrap.is-idle .steps li::before, .steps-wrap.is-idle .step-num { background: var(--paper); }
.steps-wrap.is-printing .steps li::before,
.steps-wrap.is-printing .step-num { animation: stepLit .24s steps(3, end) var(--at, 0ms) both; }
.steps-wrap.is-paused * { animation-play-state: paused; }
@keyframes stepLit { from { background: var(--paper) } to { background: var(--yellow) } }

@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--rule); }
  .steps li { padding: 0 0 40px 28px; }
  .steps li:last-child { padding-bottom: 0; }
  .toolpath { right: auto; bottom: 0; width: 0; height: auto; }
  .toolpath-fill { left: -1px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform-origin: top; }
  .toolpath-carriage { width: 0; height: 100%; }
  .steps-wrap.is-idle .toolpath-fill { transform: scaleY(.001); }
  .steps-wrap.is-idle .toolpath-carriage { transform: translateY(-100%); }
  .toolpath-nozzle { right: auto; left: -18px; bottom: -10px; transform: rotate(-90deg) scale(.8); }
}

/* ==========================================================================
   Galerija (slike, kartice)
   ========================================================================== */
.work { display: flex; flex-direction: column; gap: 10px; min-height: 0; margin: 0; }
.work-media { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--stage); }
.work-media img { width: 100%; height: 100%; object-fit: cover; }
.work-media button {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.work-media button img { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.work-media button:hover img { transform: scale(1.03); }
.work figcaption, .work-caption {
  display: flex; justify-content: space-between; gap: 12px;
  font: 500 13px var(--mono); color: var(--text-2);
}
/* Natpis uvijek u jednom retku; puni naziv je u title i u lightboxu. */
.work figcaption > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work figcaption > span:last-child { flex-shrink: 0; }

.placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--rule);
  background-color: var(--stage);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  font: 500 12px var(--mono); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.placeholder svg { width: 28px; height: 28px; }

/* 4 stupca: istaknuti rad 2×2 lijevo, dva mala i jedan širok desno. */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  gap: 16px;
}
@media (max-width: 900px) { .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .preview-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 260px; } }
.span-tall { grid-row: span 2; }
.span-wide { grid-column: span 2; }
.span-big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 600px) {
  .span-wide, .span-big { grid-column: auto; }
  .span-big { grid-row: auto; }
}

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  background: var(--ink);
  color: var(--paper);
}
.contact a:hover { color: var(--yellow); }
.contact-info { padding: var(--py) var(--px); display: flex; flex-direction: column; gap: 32px; }
.contact-intro { display: flex; flex-direction: column; gap: 24px; }
.contact h2 { font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: .95; letter-spacing: -.03em; }
.contact-text { font-size: 18px; line-height: 1.5; color: var(--dark-muted-2); max-width: 440px; }
.contact-email {
  color: var(--yellow); font-weight: 600; font-size: 22px;
  text-decoration: none; text-underline-offset: 5px; width: fit-content;
}

.contact-phone { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--dark-rule); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.contact .btn--yellow:hover { color: var(--ink); }
.icon { flex-shrink: 0; display: block; }
.section-head .ig-follow { margin-top: 10px; }
.ig-follow {
  display: flex; align-items: center; gap: 16px;
  width: fit-content;
  color: var(--ink); text-decoration: none;
}
.ig-follow-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
  border: 1px solid var(--ink);
  transition: background var(--t), color var(--t);
}
.ig-follow-icon .icon { width: 22px; height: 22px; }
.ig-follow-text { display: flex; flex-direction: column; gap: 2px; }
.ig-follow-text strong { font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.ig-follow-text small { font: 500 13px var(--mono); color: var(--text-3); transition: color var(--t); }
.ig-follow:hover { color: var(--ink); }
.ig-follow:hover .ig-follow-icon { background: var(--ink); color: var(--yellow); }

.ig-follow:hover small { color: var(--ink); }

.site-footer { align-items: center; }
.footer-links { display: inline-flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; color: var(--dark-muted-2); text-decoration: none; transition: color var(--t); }
.footer-social .icon { width: 18px; height: 18px; }
.footer-social:hover { color: var(--yellow); }

.btn--icon { display: inline-flex; align-items: center; gap: 8px; }
.btn--icon .icon { color: #fff; }
.btn--outline-dark { background: transparent; color: var(--paper); border: 1px solid var(--dark-dash); padding: 11px 20px; }
.btn--outline-dark { --fill: var(--dark-field); }
.contact .btn--outline-dark:hover { border-color: var(--yellow); color: var(--yellow); }

.map { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.map-frame { position: relative; height: 260px; border: 1px solid var(--dark-rule); overflow: hidden; background: #2a2926; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05) brightness(.92); }
.map-badge {
  position: absolute; left: 0; top: 0;
  background: var(--yellow); color: var(--ink);
  font: 500 12px var(--mono); padding: 8px 12px;
  pointer-events: none;
}
.map-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 400 14px var(--mono); color: var(--dark-muted-2); }
.map-meta a { color: var(--yellow); text-decoration: none; }


.contact-form-col { padding: var(--py) var(--px); display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--dark-rule); }
@media (max-width: 880px) {
  .contact-form-col { border-left: 0; border-top: 1px solid var(--dark-rule); }
}

.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field-label { font: 500 12px var(--mono); color: var(--dark-muted); letter-spacing: .06em; }
.input {
  background: var(--dark-field);
  border: 1px solid var(--dark-border);
  border-radius: 0;
  color: var(--paper);
  font: 400 17px/1.5 var(--sans);
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--t);
}
.input::placeholder { color: #7d7a72; }
textarea.input { padding: 16px; resize: vertical; min-height: 120px; }
.input:focus { border-color: var(--yellow); }
.input:focus-visible { box-shadow: none; outline: none; }
.input[aria-invalid="true"] { border-color: var(--yellow); }

.drop {
  border: 1.5px dashed var(--dark-dash);
  padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  cursor: var(--cursor-link);
  transition: border-color var(--t), background var(--t);
}
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--yellow); background: var(--dark-field); }
.drop-title { font-weight: 600; font-size: 18px; }
.drop-hint { font: 400 13px var(--mono); color: var(--dark-muted); }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.thumbs[hidden] { display: none; }
.thumb { position: relative; aspect-ratio: 1; background: #2a2926; border: 1px solid var(--dark-border); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-file {
  height: 100%; padding: 10px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  font: 400 11px var(--mono); color: var(--dark-muted);
}
.thumb-file strong { font: 500 18px var(--mono); color: var(--yellow); }
.thumb-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb button {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); border: 0;
  font-size: 14px; cursor: var(--cursor-link);
  transition: background var(--t), color var(--t);
}
.thumb button:hover { background: var(--yellow); color: var(--ink); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 4px; }
.form-hint { font: 400 13px var(--mono); color: var(--dark-muted); }
.form-hint.is-error { color: var(--yellow); }
.btn[disabled] { opacity: .6; cursor: progress; }

.form-done {
  border: 1px solid var(--yellow);
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.form-done[hidden] { display: none; }
.form-done .mono-label { color: var(--yellow); }
.form-done h3 { font-weight: 700; font-size: 32px; line-height: 1.1; }
.btn-ghost {
  background: transparent; border: 1px solid var(--dark-dash); color: var(--paper);
  padding: 12px 20px; font-weight: 600; cursor: var(--cursor-link);
  transition: border-color var(--t), color var(--t);
}
.btn-ghost { --fill: var(--dark-field); }
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  padding: 22px var(--px);
  background: var(--ink); color: var(--dark-muted-3);
  font: 400 13px var(--mono);
  border-top: 1px solid var(--dark-rule);
}

/* ==========================================================================
   Stranica Galerija
   ========================================================================== */
.gallery-page {
  padding: clamp(48px, 6vw, 80px) var(--px) var(--py);
  display: flex; flex-direction: column; gap: 36px;
}
.breadcrumb { font: 500 13px var(--mono); color: var(--text-3); text-decoration: none; width: fit-content; }
.breadcrumb:hover { color: var(--ink); }
.gallery-page h1 { font-weight: 700; font-size: clamp(48px, 6vw, 80px); line-height: .95; letter-spacing: -.035em; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.chip {
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent; color: var(--ink);
  font-weight: 600; font-size: 15px;
  cursor: var(--cursor-link);
  transition: box-shadow var(--t), background var(--t), color var(--t);
}
.chip { --fill: var(--yellow); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }

/* Fiksni broj stupaca (6 / 4 / 2) i visina reda prema širini stupca, tako da se
   izmjena velikih i malih radova slaže bez rupa na svakoj širini.
   Redoslijed u content.json složen je za te mreže; big = 3×2 (2×2 na užim ekranima). */
.gallery-page { container-type: inline-size; }
.gallery-grid {
  --cols: 6; --gap: 16px;
  --cell: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: calc(var(--cell) * .8 + 28px);
  grid-auto-flow: dense;
  gap: var(--gap);
}
.gallery-grid .span-big { grid-column: span 3; grid-row: span 2; }
@media (max-width: 1000px) {
  .gallery-grid { --cols: 4; }
  .gallery-grid .span-big { grid-column: span 2; }
}
@media (max-width: 600px) {
  .gallery-grid { --cols: 2; --gap: 12px; }
  .gallery-grid .span-big { grid-column: span 2; grid-row: span 2; }
  .gallery-grid .span-wide { grid-column: span 2; }
}
.gallery-grid .work { animation: f3dIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.gallery-empty { font: 500 13px var(--mono); color: var(--text-3); padding: 40px 0; }

.cta-band {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
  padding: 48px var(--px);
  background: var(--yellow);
}
.cta-band h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.02em; line-height: 1.05; }
.cta-band .btn--dark { --fill: var(--paper); }
.cta-band .btn--dark:hover { color: var(--ink); }

/* Lightbox */
.lightbox {
  border: 0; padding: 0; margin: auto;
  max-width: min(1200px, 94vw); max-height: 92vh;
  background: var(--ink); color: var(--paper);
}
.lightbox::backdrop { background: rgba(27, 27, 25, .88); }
.lightbox img { max-width: 100%; max-height: calc(92vh - 56px); object-fit: contain; margin: 0 auto; }
.lightbox-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 0 0 0 16px; height: 56px;
  font: 500 13px var(--mono); color: var(--dark-muted-2);
}
.lightbox-bar button {
  height: 56px; padding: 0 20px; border: 0; background: var(--yellow); color: var(--ink);
  font-weight: 600; cursor: var(--cursor-link);
}

/* Učitavanje / greška */
.load-error { padding: var(--py) var(--px); font: 500 14px var(--mono); color: var(--text-3); }

/* ==========================================================================
   Jezik 3D printa: gumbi i linkovi
   - gumbi imaju skošen kut (chamfer) dolje desno, kao modelirani/obrađeni dio;
   - hover na gumbu puni se odozdo prema gore u 6 koraka, sloj po sloj;
   - linkovi dobivaju žutu liniju koja se „ekstrudira“ slijeva nadesno, u koracima.
   ========================================================================== */
.btn, .chip, .btn-ghost {
  --cut: 10px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  background-image: linear-gradient(var(--fill, transparent), var(--fill, transparent));
  background-repeat: no-repeat;
  /* 1px preko rubova: na necjelobrojnoj visini inače zadnji red piksela ostane tamna pozadina. */
  background-position: 0 calc(100% + 1px);
  background-size: 100% 0%;
  transition: background-size .18s steps(6, end), color 0s .09s, border-color var(--t);
}
.btn--sm, .btn-ghost { --cut: 8px; }

/* Fotografije radova (galerija i izbor na početnoj). */
.work-media {
  --cut: 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

/* Tablica materijala: isti skošeni kut, veći jer je element velik. */
.materials-table {
  --cut: 22px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.chip { --cut: 7px; }
.btn:hover, .btn-ghost:hover { background-size: 100% calc(100% + 2px); }
.chip:hover { background-size: 100% calc(100% + 2px); }
.chip[aria-pressed="true"] { background-size: 100% 0%; }

/* Dijagonala na skošenom kutu kod gumba s obrubom (clip-path reže obrub). */
.btn--outline::after, .btn--outline-dark::after, .btn-ghost::after, .chip::after, .materials-table::after {
  content: "";
  position: absolute;
  left: calc(100% + 1px - var(--cut));
  top: calc(100% + 1px);
  width: calc(var(--cut) * 1.4142);
  height: 2px;
  margin-top: -1px;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: rotate(-45deg);
  pointer-events: none;
}
.btn--outline-dark::after, .btn-ghost::after { background: var(--dark-dash); transition: background var(--t); }
.contact .btn--outline-dark:hover::after, .btn-ghost:hover::after { background: var(--yellow); }

/* clip-path reže vanjski focus prsten — kod gumba ide unutra. */
.btn:focus-visible, .chip:focus-visible, .btn-ghost:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; box-shadow: none; }

/* Linkovi: „ekstrudirana“ linija umjesto podcrtavanja */
.nav a, .contact-email, .map-meta a, .breadcrumb, .footer-social > span, .ig-follow-text strong {
  text-decoration: none;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size .2s steps(8, end), color var(--t);
}
.nav a:hover, .nav a[aria-current="page"], .contact-email:hover, .map-meta a:hover, .breadcrumb:hover,
.footer-social:hover > span, .ig-follow:hover .ig-follow-text strong { background-size: 100% 2px; }
/* Instagram poziv stoji uz žutu ikonu — linija crna, da se odvoji od nje. */
.ig-follow-text strong { background-image: linear-gradient(var(--ink), var(--ink)); }

@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-mark img { animation: none; }
  .btn, .chip, .btn-ghost, .nav a, .contact-email, .map-meta a, .breadcrumb, .footer-social > span, .ig-follow-text strong { transition: none; }
}

/* ==========================================================================
   404: ploča printera na kojoj mlaznica ispisuje „404“ (js/print404.js)
   ========================================================================== */
.nf { flex: 1; border-bottom: 0; }
.nf h1 { font-size: clamp(44px, 5.6vw, 76px); }
.stage--print { min-height: 560px; }
.print-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.print-replay { position: absolute; z-index: 1; left: 20px; bottom: 80px; background-color: var(--paper); animation: f3dIn .35s cubic-bezier(.2, .7, .2, 1) both; }
@media (max-width: 520px) {
  .stage--print { min-height: 440px; }
  .print-replay { left: 14px; bottom: 74px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blink { animation: none; }
  .gallery-grid .work, .print-replay { animation: none; }
  .work-media button img, .stage-inner { transition: none; }
}