/* ==========================================================================
   site.css — Auto Robert
   Smjer: sunčana zagorska radionica. Svijetla topla podloga, zeleni akcent
   (Castrol zelena s fotki i brda kroz prozore), jedan tamni pojas za DPF i
   H2 Blaster. Glavni motiv: rolo vrata radione u heroju.
   ========================================================================== */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --font-display: "Cabinet Grotesk", "Arial Narrow", Arial, sans-serif;
  --font-text: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --accent-h: 152;
  --accent-c: 0.13;
  --neutral-h: 80;      /* topla žbuka, ne zelenkasta siva */
  --neutral-c: 0.007;

  --bg: var(--n2);
  --header-h: 68px;
  --stick-top: var(--header-h);

  /* rolo vrata — aluminij, hladniji od stranice da se odvoji od zida */
  --rolo-svijetlo: oklch(93.5% 0.004 250);
  --rolo-sredina:  oklch(88.5% 0.006 250);
  --rolo-sjena:    oklch(80% 0.008 250);
  --rolo-utor:     oklch(66% 0.012 250);
  --rolo-odsjaj:   oklch(97.5% 0.002 250);
  --letva:         oklch(70% 0.01 250);
  --guma:          oklch(24% 0.006 250);
  --zid:           oklch(95.5% 0.012 60);    /* žbuka pročelja */
  --kutija:        oklch(76% 0.008 250);

  /* DPF presjek */
  --keramika:   oklch(86% 0.035 75);
  --kanal-cist: oklch(93% 0.025 80);
  --cada:       oklch(23% 0.012 60);
  --pepeo:      oklch(52% 0.012 70);
}

body { background: var(--bg); }
figure { margin: 0; }

/* --- gumbi ------------------------------------------------------------------ */
.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.7em 1.25em;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: var(--type-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms var(--ease-out);
}
.gumb svg { flex: none; }
.gumb:active { transform: scale(0.97); }
.gumb-puni { background: var(--solid); color: var(--on-solid); }
.gumb-tihi { background: var(--surface); color: var(--text); border-color: var(--border); }
.gumb-svijetli { background: var(--n1); color: var(--n12); }
@media (hover: hover) and (pointer: fine) {
  .gumb-puni:hover { background: var(--solid-hover); }
  .gumb-tihi:hover { border-color: var(--border-strong); background: var(--element); }
  .gumb-svijetli:hover { background: var(--a3); }
}

a { color: var(--text-accent); text-underline-offset: 0.18em; }

.poveznica-strelica {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.poveznica-strelica svg { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .poveznica-strelica:hover svg { transform: translateX(3px); }
}

/* --- demo oznaka ------------------------------------------------------------ */
.demo-badge {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--n12);
  color: var(--n1);
  font-size: var(--type-n2);
  font-weight: 700;
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* ==========================================================================
   ZAGLAVLJE
   ========================================================================== */
.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  box-shadow: 0 1px 0 var(--border);
}
.zaglavlje-red {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  height: 100%;
  max-width: calc(var(--content-w) + 12rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.znak {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.znak-ime {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-2);
  letter-spacing: -0.02em;
}
.znak-mjesto { font-size: var(--type-n2); color: var(--text-muted); margin-top: 3px; }

.izbornik { display: flex; gap: var(--space-m); }
.izbornik a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--type-n1);
  padding-block: 6px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .izbornik a:hover { color: var(--text-accent); }
}
.zaglavlje-tel { min-height: 42px; padding: 0.5em 1em; font-size: var(--type-n1); }
.izbornik-gumb { display: none; }

/* Desktop: izbornik je uvijek tu, recept "pop" ne smije ga sakriti. */
@media (min-width: 64.01rem) {
  .izbornik[data-mc] { opacity: 1; transform: none; visibility: visible; transition: none; }
}

@media (max-width: 64rem) {
  .izbornik {
    position: absolute;
    top: calc(100% + 6px);
    right: var(--gutter);
    flex-direction: column;
    gap: 0;
    min-width: 15rem;
    padding: 8px;
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-3), var(--ring);
  }
  .izbornik a { font-size: var(--type-0); padding: 12px 14px; border-radius: 8px; }
  .izbornik a:active { background: var(--element); }
  .izbornik-gumb {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
  }
  .izbornik-gumb:active { transform: scale(0.95); }
  .izbornik-gumb .ikona-x { display: none; }
  .izbornik-gumb[aria-expanded="true"] .ikona-x { display: block; }
  .izbornik-gumb[aria-expanded="true"] .ikona-menu { display: none; }
  .izbornik-gumb > svg { grid-area: 1 / 1; }
}
@media (max-width: 30rem) {
  .zaglavlje-tel { display: none; }
}

/* Mobitel: zaglavlje odlazi sa skrolom, ostaje samo donja traka. */
@media (max-width: 52rem) {
  :root { --stick-top: 0px; }
  .zaglavlje { position: relative; }
}

/* ==========================================================================
   HERO — ROLO VRATA
   ========================================================================== */
.vrata {
  --okvir: clamp(10px, 2.6vw, 40px);
  --kutija-h: clamp(14px, 2.2vw, 30px);
  position: relative;
}
.js-vrata .vrata { height: 240vh; }

.vrata-pozornica {
  position: sticky;
  top: var(--stick-top);
  height: calc(100svh - var(--stick-top));
  min-height: 600px;
  overflow: hidden;
  background: var(--zid);
}
/* kutija u koju se vrata namotaju */
.vrata-pozornica::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(var(--okvir) - 6px);
  right: calc(var(--okvir) - 6px);
  height: var(--kutija-h);
  background: linear-gradient(180deg, var(--rolo-sredina), var(--kutija));
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 10px oklch(30% 0.01 250 / 0.18);
}

.vrata-radiona,
.vrata-otvor {
  position: absolute;
  top: var(--kutija-h);
  right: var(--okvir);
  bottom: 0;
  left: var(--okvir);
  margin: 0;
}
.vrata-radiona { overflow: hidden; background: var(--n11); }
.vrata-radiona img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  transform-origin: 62% 70%;
  will-change: transform;
}
.vrata-opis {
  position: absolute;
  left: var(--space-m);
  bottom: var(--space-m);
  padding: 8px 12px;
  border-radius: 8px;
  background: oklch(20% 0.01 80 / 0.62);
  color: var(--n1);
  font-size: var(--type-n1);
  opacity: 0;
  transition: opacity 400ms ease;
}
.vrata-opis.vidljivo { opacity: 1; }

.vrata-otvor { overflow: hidden; z-index: 2; pointer-events: none; }

.rolo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  will-change: transform;
  /* lamele: svijetli gornji rub, blagi pad, tamni utor, odsjaj */
  background:
    linear-gradient(100deg, oklch(100% 0 0 / 0.22), transparent 38%, transparent 70%, oklch(30% 0.01 250 / 0.06)),
    repeating-linear-gradient(180deg,
      var(--rolo-odsjaj) 0 1px,
      var(--rolo-svijetlo) 1px 9px,
      var(--rolo-sredina) 22px,
      var(--rolo-sjena) 33px,
      var(--rolo-utor) 33px 35px,
      var(--rolo-svijetlo) 35px 36px);
  box-shadow: 0 10px 30px oklch(25% 0.01 250 / 0.25);
}

.rolo-sadrzaj {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: var(--space-s);
  padding: calc(var(--kutija-h) + var(--space-l)) clamp(1rem, 6vw, 6rem) var(--space-l);
  max-width: 60rem;
}
/* natpisna ploča na vratima: tekst ne smije ležati preko utora lamela */
.rolo-ploca {
  --vijak: radial-gradient(circle, var(--rolo-utor) 0 2.5px, transparent 3px);
  align-self: flex-start;
  gap: var(--space-s);
  padding: clamp(1.1rem, 3vw, 2.25rem) clamp(1.1rem, 3.5vw, 2.75rem);
  border-radius: 6px;
  background:
    var(--vijak) top 8px left 8px / 8px 8px no-repeat,
    var(--vijak) top 8px right 8px / 8px 8px no-repeat,
    var(--vijak) bottom 8px left 8px / 8px 8px no-repeat,
    var(--vijak) bottom 8px right 8px / 8px 8px no-repeat,
    linear-gradient(180deg, var(--rolo-odsjaj), var(--rolo-svijetlo));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.7), 0 2px 0 var(--rolo-sjena), 0 8px 20px oklch(30% 0.01 250 / 0.12);
}
.rolo h1 {
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.1rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  max-width: 13ch;
  margin: 0;
  color: var(--n12);
}
.rolo-uvod {
  font-size: var(--type-1);
  line-height: 1.45;
  font-weight: 500;
  max-width: 38ch;
  margin: 0;
  color: var(--n12);
}
.rolo-gumbi { margin-top: var(--space-2xs); }
.rolo-adresa {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  font-size: var(--type-n1);
  font-weight: 500;
  color: var(--n11);
}

/* donja letva s gumenom brtvom; na njoj stanje i ručka */
.rolo-letva {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 64px;
  padding: 10px clamp(1rem, 6vw, 6rem) 14px;
  background: linear-gradient(180deg, var(--rolo-svijetlo), var(--letva));
  border-top: 2px solid var(--rolo-utor);
}
.rolo-letva::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--guma);
}
.rolo-stanje {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  font-size: var(--type-n1);
  font-weight: 700;
  color: var(--n12);
}
.stanje-tocka {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--n8);
  box-shadow: 0 0 0 3px oklch(100% 0 0 / 0.5);
}
.otvoreno .stanje-tocka { background: var(--ok); }

.rolo-rucka {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--guma), oklch(34% 0.008 250));
  color: var(--n4);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 2px 4px oklch(20% 0.01 250 / 0.3);
}
.rolo-rucka:active { transform: translateY(1px); }

/* reduced motion: obična vrata pa fotka ispod, bez skrola koji vuče */
@media (prefers-reduced-motion: reduce) {
  .js-vrata .vrata { height: auto; }
  .vrata-pozornica { position: relative; top: 0; height: auto; min-height: 0; display: grid; padding-top: var(--kutija-h); }
  .vrata-otvor, .vrata-radiona { position: relative; inset: auto; margin-inline: var(--okvir); }
  .vrata-otvor { min-height: calc(100svh - var(--stick-top) - var(--kutija-h)); }
  .rolo { position: relative; min-height: inherit; height: 100%; transform: none !important; }
  .vrata-radiona { aspect-ratio: 16 / 9; margin-top: var(--okvir); order: 2; }
  .vrata-radiona img { transform: none !important; }
  .vrata-opis { opacity: 1; }
}

@media (max-width: 52rem) {
  /* zaglavlje ovdje nije ljepljivo: vrata moraju stati u prvi ekran ispod njega */
  .vrata { background: var(--zid); }
  .vrata-pozornica { height: calc(100svh - var(--header-h)); min-height: 560px; }
  .uvod-izjava { font-size: var(--type-3); }
  .rolo-sadrzaj { padding-block: var(--space-l) var(--space-m); }
  .rolo-uvod { font-size: var(--type-0); }
  .rolo-letva { min-height: 58px; }
}

/* ==========================================================================
   UVOD
   ========================================================================== */
.uvod-izjava {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-4);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 30ch;
  margin: 0 0 var(--space-l);
  text-wrap: balance;
}
.uvod-izjava a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-color: var(--a8);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .uvod-izjava a:hover { color: var(--text-accent); text-decoration-color: var(--a10); }
}
.uvod-dodatak { color: var(--text-muted); max-width: 52ch; margin-left: auto; margin-right: 0; }

/* 30 godina: jedini veliki broj na stranici, uz njega opis koji ga čita do kraja */
.uvod-iskustvo {
  display: flex;
  align-items: flex-end;
  gap: var(--space-s);
  max-width: none;
  margin: 0 0 var(--space-xl);
}
.uvod-broj {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 3rem + 14vw, 15rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: var(--text-accent);
  font-variant-numeric: lining-nums;
  margin-left: -0.06em;
}
.uvod-broj-opis {
  max-width: 13ch;
  padding-bottom: 0.3em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-3);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   POGLAVLJA (usluge)
   ========================================================================== */
.poglavlje h2 { font-weight: 800; }
.poglavlje h3, .tamno h3 { font-weight: 700; font-size: var(--type-2); }

.popis { list-style: none; padding: 0; margin: 0; }
.popis li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.45em;
}
.popis li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 2px;
  background: var(--a9);
  transform: rotate(45deg) scale(0.7);
}
.napomena {
  font-size: var(--type-n1);
  color: var(--text-muted);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
}

.img-frame { border-radius: var(--radius-l); }
.img-frame > figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 8px;
  background: oklch(20% 0.01 80 / 0.62);
  color: var(--n1);
  font-size: var(--type-n2);
  line-height: 1.35;
}

/* 1. servis: dvije slike lijevo, stepenasto; tekst desno */
.poglavlje-servis {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
.servis-slike {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-s);
  align-items: start;
}
.servis-slika-b { margin-top: 28%; }
@media (min-width: 60rem) {
  .poglavlje-servis { grid-template-columns: 7fr 5fr; }
}

/* 2+3. gume: naslov, slika od ruba do ruba, dva stupca */
.poglavlje-gume {
  display: grid;
  padding-block: calc(var(--section-y) * 1.2);
  background: var(--n3);
}
.poglavlje-gume > * { grid-column: content; }
.gume-glava { max-width: 40rem; margin-bottom: var(--space-l); }
.gume-slika {
  grid-column: full;
  aspect-ratio: 21 / 9;
  border-radius: 0;
}
.gume-slika > img { object-position: 50% 42%; }
.gume-stupci {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
@media (min-width: 52rem) {
  .gume-stupci { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 52rem) {
  .gume-slika { aspect-ratio: 4 / 3; }
}
/* poglavlje-gume koristi istu breakout mrežu kao <main> */
main.layout > .poglavlje-gume {
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [feature-start] minmax(0, 6rem)
    [content-start] min(100% - (var(--gutter) * 2), var(--content-w)) [content-end]
    minmax(0, 6rem) [feature-end]
    minmax(var(--gutter), 1fr) [full-end];
}

/* 4. klima: tekst lijevo, uska slika desno */
.poglavlje-klima {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 52rem) {
  .poglavlje-klima { grid-template-columns: 7fr 4fr; }
  .klima-slika { order: 2; }
}

/* ==========================================================================
   TAMNI POJAS: DPF + H2
   ========================================================================== */
.tamno {
  --bg: oklch(19% 0.01 80);
  --surface: oklch(23% 0.01 80);
  --text: oklch(96% 0.005 80);
  --text-muted: oklch(78% 0.008 80);
  --text-accent: oklch(80% 0.11 152);
  --border: oklch(33% 0.01 80);
  background: var(--bg);
  color: var(--text);
  padding-block: calc(var(--section-y) * 1.1);
}
.tamno-unutra {
  max-width: calc(var(--content-w) + 12rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-3xl);
}
.tamno-glava { max-width: 42rem; }
.tamno-glava h2 { font-weight: 800; font-size: var(--type-5); line-height: 1.02; }
.tamno .t-lead { color: var(--text-muted); }
.tamno .popis li::before { background: var(--a7); }
.tamno .img-frame { background: var(--surface); }

.dpf {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 60rem) {
  .dpf { grid-template-columns: 6fr 5fr; }
  .dpf-presjek { position: sticky; top: calc(var(--stick-top) + var(--space-l)); }
}
.dpf-presjek {
  display: grid;
  gap: var(--space-m);
  justify-items: center;
}
.sace { width: min(100%, 30rem); height: auto; }
.sace-kuciste { fill: oklch(42% 0.008 250); stroke: oklch(55% 0.01 250); stroke-width: 2; }
.sace-podloga { fill: var(--keramika); }
#sace-celije rect { transition: fill 140ms ease; }
.c-cist   { fill: var(--kanal-cist); }
.c-cada   { fill: var(--cada); }
.c-pepeo  { fill: var(--pepeo); }

.dpf-kontrola { width: min(100%, 30rem); }
.dpf-oznaka {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-xs);
  align-items: baseline;
  font-size: var(--type-n1);
  color: var(--text-muted);
}
.dpf-stanje {
  text-align: center;
  font-weight: 700;
  color: var(--text);
}
.dpf-klizac {
  width: 100%;
  height: 44px;
  margin: 4px 0 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}
.dpf-klizac:active { cursor: grabbing; }
.dpf-klizac::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--cada), var(--pepeo) 50%, var(--kanal-cist));
}
.dpf-klizac::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--cada), var(--pepeo) 50%, var(--kanal-cist));
}
.dpf-klizac::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--n1);
  border: 3px solid var(--a8);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.4);
  transition: transform 120ms var(--ease-out);
}
.dpf-klizac:active::-webkit-slider-thumb { transform: scale(1.1); }
.dpf-klizac::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--n1);
  border: 3px solid var(--a8);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.4);
}
.dpf-klizac:focus-visible { outline: 2px solid var(--a8); outline-offset: 4px; border-radius: 8px; }
.dpf-pomoc { font-size: var(--type-n1); color: var(--text-muted); text-align: center; margin: var(--space-2xs) auto 0; }

.dpf-prije-poslije { width: min(100%, 30rem); aspect-ratio: 561 / 449; }

/* video (9:16) i fotka stroja (3:4) jedno uz drugo, poravnati dnom */
.dpf-mediji {
  display: grid;
  grid-template-columns: 9fr 10fr;
  gap: var(--space-s);
  align-items: end;
  margin-top: var(--space-m);
}
.dpf-video { aspect-ratio: 9 / 16; background: var(--surface); }
.dpf-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dpf-slika > img { object-position: 50% 45%; }

.h2 {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
.h2-slike {
  display: grid;
  grid-template-columns: 8fr 5fr;
  align-items: end;
}
.h2-slika-a { grid-column: 1 / 2; grid-row: 1; }
.h2-slika-b {
  grid-column: 1 / 3;
  grid-row: 1;
  justify-self: end;
  width: 46%;
  margin-bottom: -8%;
  box-shadow: 0 0 0 6px var(--bg);
}
@media (min-width: 60rem) {
  .h2 { grid-template-columns: 5fr 6fr; }
  .h2-slike { order: 2; }
}

/* ==========================================================================
   O NAMA
   ========================================================================== */
.o-nama {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 60rem) {
  .o-nama { grid-template-columns: 5fr 6fr; }
  .o-nama-slike { order: -1; }
}
.o-nama h2 { font-weight: 800; }
.o-nama-slike {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
  align-items: start;
}
.o-nama-slika-b { margin-top: 22%; }

/* slogan klijenta: njegov pravopis (veliko V), bez navodnika-ukrasa */
.slogan {
  margin: var(--space-m) 0 0;
  padding-left: var(--space-s);
  border-left: 4px solid var(--a9);
}
.slogan p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-4);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text-accent);
}
.slogan footer { margin-top: var(--space-2xs); font-size: var(--type-n1); color: var(--text-muted); }

/* ==========================================================================
   PITANJA
   ========================================================================== */
.pitanja h2 { font-weight: 800; margin-bottom: var(--space-l); }
.pitanja-popis { border-top: 1px solid var(--border); max-width: 48rem; }
.pitanja details { border-bottom: 1px solid var(--border); }
.pitanja summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 56px;
  padding-block: var(--space-xs);
  font-weight: 700;
  font-size: var(--type-1);
}
.pitanja summary svg { flex: none; transition: transform 200ms var(--ease-out); color: var(--text-muted); }
.pitanja details[open] summary svg { transform: rotate(180deg); }
.pitanja details p { color: var(--text-muted); padding-bottom: var(--space-s); margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .pitanja summary:hover { color: var(--text-accent); }
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.kontakt h2 { font-weight: 800; font-size: var(--type-5); line-height: 1.02; max-width: 16ch; }
.kontakt-glava { margin-bottom: var(--space-xl); }
.kontakt-glava .t-lead { color: var(--text-muted); max-width: 46ch; }

.kontakt-mreza {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 60rem) {
  .kontakt-mreza { grid-template-columns: 5fr 6fr; }
}

.kontakt-tel {
  display: grid;
  gap: 4px;
  width: fit-content;
  color: var(--text);
  text-decoration: none;
}
.kontakt-oznaka { font-size: var(--type-n1); color: var(--text-muted); }
.kontakt-broj {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-5);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-accent);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .kontakt-tel:hover .kontakt-broj { color: var(--a10); }
}

.kontakt-popis { display: grid; gap: var(--space-s); margin: 0; }
.kontakt-popis > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-s); }
.kontakt-popis dt { color: var(--text-muted); font-size: var(--type-n1); padding-top: 0.15em; }
.kontakt-popis dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.kontakt-popis dd a:not(.poveznica-strelica) { color: var(--text); }
@media (max-width: 30rem) {
  .kontakt-popis > div { grid-template-columns: 1fr; gap: 2px; }
}

.raspored { max-width: 26rem; }
.raspored th { font-weight: 500; color: var(--text-muted); padding-left: 0; }
.raspored td { text-align: right; font-weight: 700; padding-right: 0; font-variant-numeric: tabular-nums; }
.raspored tr.danas th, .raspored tr.danas td { color: var(--text); }
.raspored tr.danas th::after {
  content: "danas";
  margin-left: 0.6em;
  font-size: var(--type-n2);
  font-weight: 700;
  color: var(--text-accent);
}

.upit {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-2), var(--ring);
}
.upit h3 { font-weight: 800; font-size: var(--type-3); margin-bottom: 0; }
.upit-uvod { color: var(--text-muted); margin-top: var(--space-3xs); }
.polje { display: grid; gap: 6px; }
.polje label { font-weight: 700; font-size: var(--type-n1); }
.polje input, .polje select, .polje textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0.65em 0.85em;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.polje textarea { resize: vertical; min-height: 7.5em; }
.polje input:focus, .polje select:focus, .polje textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
.polje input::placeholder, .polje textarea::placeholder { color: var(--text-subtle); }
.upit-privola { color: var(--text-muted); }
.upit .gumb[type="submit"] { width: 100%; }

.procelje {
  margin-top: var(--space-3xl);
  aspect-ratio: 21 / 9;
}
.procelje > img { object-position: 50% 58%; }
@media (max-width: 52rem) {
  .procelje { aspect-ratio: 4 / 5; }
  .procelje > img { object-position: 50% 50%; }
}

/* ==========================================================================
   PODNOŽJE
   ========================================================================== */
.podnozje {
  background: var(--n3);
  border-top: 1px solid var(--border);
  padding-block: var(--space-2xl) calc(var(--space-2xl) + env(safe-area-inset-bottom));
}
.podnozje-unutra {
  max-width: calc(var(--content-w) + 12rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-s);
}
.podnozje-ime { font-family: var(--font-display); font-weight: 800; font-size: var(--type-3); margin: 0; }
.podnozje-impressum { color: var(--text-muted); font-size: var(--type-n1); }
.podnozje-pravno a { color: var(--text); font-size: var(--type-n1); }
.podnozje-izrada { color: var(--text-muted); font-size: var(--type-n1); margin: 0; }
.podnozje-izrada a { color: inherit; }

/* ==========================================================================
   MOBITEL: donja traka
   ========================================================================== */
.traka { display: none; }
@media (max-width: 52rem) {
  .traka {
    position: fixed;
    z-index: 70;
    left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    box-shadow: 0 -1px 0 var(--border);
    transform: translateY(110%);
    transition: transform 300ms var(--ease-drawer);
  }
  .traka.vidljivo { transform: none; }
  .podnozje { padding-bottom: calc(var(--space-2xl) + 76px + env(safe-area-inset-bottom)); }
  .demo-badge { bottom: auto; top: calc(var(--header-h) + 14px); right: 18px; }
}
/* mobitel: vrata su na startu podignuta ~8%, pa sadržaj kreće ispod tog dijela */
@media (max-width: 52rem) and (min-height: 721px) {
  .rolo-sadrzaj { justify-content: flex-start; padding-inline: 12px; padding-top: calc(var(--kutija-h) + 8svh + var(--space-s)); }
}
/* nizak mobitel (SE, landscape): sve na vratima mora stati iznad letve */
@media (max-width: 52rem) and (max-height: 720px) {
  .rolo h1 { font-size: 2.15rem; }
  .rolo-uvod { font-size: var(--type-n1); }
  .rolo-sadrzaj { gap: var(--space-xs); padding-top: calc(var(--kutija-h) + var(--space-s)); }
  .rolo-ploca { gap: var(--space-xs); padding: 0.9rem 1rem; }
  .rolo .gumb { min-height: 44px; padding-block: 0.55em; }
}
@media (prefers-reduced-transparency: reduce) {
  .traka { backdrop-filter: none; background: var(--surface); }
}