/* =============================================================================
   ANIĆ-PROJEKT — KOMPONENTE v1
   Sloj iznad tokens.css. Sve komponente koriste ISKLJUČIVO semantičke aliase
   (--bg, --fg, --accent, --line…), pa svaka radi u oba svijeta bez izmjene:
   dovoljno je data-world="tubo" ili data-world="gradevina" na roditelju.

   Redoslijed: header · hero · prednosti · stats · kartice+filtri · proces ·
   partneri · FAQ · forma · chat/AI · footer · pomoćno
   ============================================================================= */

/* =============================================================================
   A1 · HEADER
   ============================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 72px;
}
/* CTA u headeru ne smije prelomiti u dva retka — gumb postane dvostruko visok
   i optički pojede cijelu desnu zonu. */
.site-header__inner .btn { white-space: nowrap; padding-inline: var(--sp-6); }

/* Logo je SVG s fill="currentColor" — nasljeđuje --fg, pa ista datoteka radi
   na bijeloj i na crnoj podlozi. Zato se koristi inline <img> s CSS maskom
   ne treba: dovoljna je currentColor varijanta ubačena inline. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;          /* touch meta — logo je link na naslovnicu */
  color: var(--fg);
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand { gap: var(--sp-3); }
.brand:hover { color: var(--accent); }

/* Znak iz SVG-a + wordmark iz HTML-a.
   Isporučeni lockup ima hairline tekst koji je na 34 px visine jedva čitljiv, a
   na tamnoj podlozi još slabije. Zato naziv ide iz HTML-a u IBM Plex Sans 700 —
   čitljiv i na 34 px i na mobitelu. Kad klijent pošalje deblji rez lockupa,
   ovo se zamjenjuje jednim <img>.

   TEŽINA ZNAKA: inline path-ovi NISU isporučena geometrija nego UI varijanta
   (assets/brand/anic-projekt-znak-ui-currentColor.svg, ondje i cijelo objašnjenje
   s formulom). Original je crtan za veliku mjeru: na 30 px krak je 1,68 px, a
   prečka 0,51 px — tanja od piksela, pa uz wordmark od 700 znak izgleda kao da je
   iz drugog logotipa. UI varijanta ima krak 2,39 px i prečku 1,28 px; vanjski
   obris, nagibi i pozicije su nepromijenjeni, krak raste prema unutra. Iznad
   ~64 px (tisak, veliki prikaz) koristi se isporučeni znak. */
.brand__znak { height: 30px; width: auto; display: block; flex: none; }
.brand--footer .brand__znak { height: 40px; }

.brand__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.brand--footer .brand__word { font-size: 1.25rem; }
.brand__dash { color: var(--accent); }

/* Naziv ostaje i na 360 px — ondje ima mjesta (znak + naziv + hamburger ≈ 250 px).
   Skriva se tek na iznimno uskim ekranima. Brend koji tržište još ne poznaje
   ne smije se u headeru svesti na sam znak. */
@media (max-width: 339px) { .brand__word { display: none; } }

/* --- Navigacija (desktop) --- */
.nav { display: none; align-items: center; gap: var(--sp-1); }
@media (min-width: 1100px) { .nav { display: flex; } }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Građevina je vizualno odvojena — drugi svijet iste kuće */
.nav__sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin-inline: var(--sp-2);
}
/* Drugi svijet se označava separatorom i točkom u akcentu, ne okvirom.
   Okvir oko nav linka je četvrta kutija u istoj traci i konkurira CTA-u. */
.nav__link--world { font-weight: 600; gap: var(--sp-2); }
.nav__link--world::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 32%, transparent);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav__link--world:hover::before { background: var(--accent); }

/* --- A1b · PADAJUĆI IZBORNIK (mega traka pune širine) ----------------------
   Traka ide preko cijele širine ispod headera, ne kao uska kutija ispod stavke.
   Razlog: sedam odredišta u uskoj kutiji daje stupac linkova koji se čita kao
   popis datoteka. Puna širina dopušta da svaka stavka dobije redak objašnjenja,
   pa posjetitelj zna kamo ide PRIJE klika — a to je jedina svrha izbornika.

   Panel je apsolutno pozicioniran prema .site-header (sticky + backdrop-filter
   oboje stvaraju containing block), pa .nav__item ostaje position: static. */

.nav { align-self: stretch; }
.nav__item { display: flex; }

/* Gumb i link u traci moraju biti optički identični — jedina razlika je kvačica.
   Puna visina headera: veća meta za pokazivač i, važnije, donji rub gumba
   poklapa se s donjim rubom headera, pa kvačica ispod njega sjeda točno na
   gornji rub panela. */
.nav__link, .nav__btn { height: 100%; }

.nav__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__btn:hover { color: var(--accent); }
.nav__btn svg { flex: none; transition: transform var(--dur-fast) var(--ease-out); }

.nav__item[data-open="true"] .nav__btn { color: var(--accent); }
.nav__item[data-open="true"] .nav__btn svg { transform: rotate(180deg); }

/* Stup u kojem živi otvorena stranica. aria-current="page" ide na sam link u
   panelu; gumb nije stranica, pa nosi samo vizualnu oznaku. */
.nav__item[data-active="true"] .nav__btn { color: var(--accent); font-weight: 600; }

/* Kvačica koja veže otvorenu stavku s trakom. Bez nje traka pune širine visi
   nepovezano i ne zna se koji ju je stup otvorio. */
.nav__item[data-open="true"] .nav__btn::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1px;
  border: 8px solid transparent;
  border-bottom-color: var(--bg-subtle);
  transform: translateX(-50%);
  z-index: 1;
}

.megamenu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;            /* uklanja iz tab reda dok je zatvoren */
  transform: translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast) var(--ease-out);
}
.nav__item[data-open="true"] .megamenu { opacity: 1; visibility: visible; transform: none; }

.megamenu__grid {
  display: grid;
  gap: var(--sp-2) var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-block: var(--sp-8);
}

.megamenu__link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  border-radius: var(--r-md);
  color: var(--fg);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.megamenu__link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.megamenu__link:hover .megamenu__name { color: var(--accent); }

.megamenu__name {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: color var(--dur-fast) var(--ease-out);
}
.megamenu__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg-muted);
}
.megamenu__link[aria-current="page"] .megamenu__name { color: var(--accent); }

/* Stranica koja još ne postoji nosi oznaku PRIJE klika, ne poruku POSLIJE njega. */
.soon {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  vertical-align: 2px;
}

/* --- Desna zona: telefoni, jezik, CTA --- */
.header__tools { display: flex; align-items: center; gap: var(--sp-2); }

/* Header nosi puno elemenata (brand + 6 nav + 2 broja + jezik + CTA), pa brojevi
   ulaze postupno. Redoslijed ustupanja mjesta: prvo pada ljudski broj, AI broj
   ostaje — on je po ponudi primarni kanal i mora biti vidljiv. Oba su ionako
   u footeru i na stranici kontakta. Prelijevanje nađeno u pregledniku na 1176 px. */
.phone {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding-inline: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.phone:hover { color: var(--accent); }
@media (min-width: 1400px) { .phone { display: inline-flex; } }

/* Broj AI agenta — istaknut bojom i točkom, BEZ okvira i podloge.
   U headeru smije postojati samo jedna teška ploha, a to je primarni CTA.
   Okvir oko telefona + okvir oko jezika + puni gumb = tri konkurentska
   naglaska u 300 px, i nijedan onda ne vodi oko. */
.phone--ai {
  display: none;
  gap: var(--sp-2);
  color: var(--accent);
  padding-inline: var(--sp-2);
}
@media (min-width: 700px) { .phone--ai { display: inline-flex; } }

/* Točka umjesto ikone: signalizira „živo, dostupno" bez dodavanja plohe */
.phone--ai::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.phone--ai:hover { color: var(--accent-hi); }
.phone--ai:hover::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent); }
.phone__badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* --- Jezični switcher HR / EN / DE --- */
.lang { display: none; align-items: center; gap: 2px; }
@media (min-width: 1000px) { .lang { display: flex; } }
/* Od 1100 px u traku ulazi navigacija sa četiri stupa (465 px) i header traži
   1218 px sadržaja — izmjereno u pregledniku, ne procijenjeno. Do 1250 px toliko
   nema, pa netko mora ustupiti mjesto. Ustupa jezik: stranica je hrvatska,
   EN/DE su alternative, a broj i CTA su prodajni kanali. */
@media (min-width: 1100px) and (max-width: 1249px) { .lang { display: none; } }
/* Jezik: čisti tekst, bez okvira i podloge. Aktivan se razlikuje težinom i
   bojom, a ne kutijom. Tanke crtice između razdvajaju bez dodavanja ploha. */
.lang { gap: 0; }
.lang__btn {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.lang__btn + .lang__btn::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 11px; margin-top: -5.5px;
  background: var(--line);
}
.lang__btn:hover { color: var(--fg); }
.lang__btn[aria-pressed="true"] { color: var(--fg); font-weight: 600; }

/* --- Hamburger + mobilni panel --- */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: transparent; color: var(--fg); cursor: pointer;
}
@media (min-width: 1100px) { .burger { display: none; } }

/* Dok je hamburger vidljiv, CTA iz headera se skriva — inače se na 360 px lomi
   u dva retka i pojede cijelu širinu. CTA i telefon su u mobilnom panelu. */
@media (max-width: 1099px) {
  .site-header__inner > .header__tools > .btn { display: none; }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  padding-block: var(--sp-4) var(--sp-8);
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 1100px) { .mobile-nav[data-open="true"] { display: none; } }

.mobile-nav__link {
  display: block;
  min-height: 52px;
  line-height: 52px;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
}
.mobile-nav__link:hover { color: var(--accent); }
.mobile-nav__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* --- Mobilni akordeon: isti četiri stupa kao desktop ------------------------
   <details>, bez ijedne linije JS-a — isti pristup kao FAQ. Panel na mobitelu
   ionako otvara i zatvara hamburger; ugniježđeni JS toggle bio bi drugo stanje
   za istu stvar. */
.mnav__group { border-bottom: 1px solid var(--line); }
.mnav__sum {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.mnav__sum::-webkit-details-marker { display: none; }
.mnav__sum:hover { color: var(--accent); }
.mnav__sign {
  font-family: var(--font-mono); font-size: 1.25rem; color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.mnav__group[open] .mnav__sign { transform: rotate(45deg); }

.mnav__list { list-style: none; margin: 0; padding: 0 0 var(--sp-4); }
.mnav__list a {
  display: flex; align-items: center;
  min-height: 48px;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line);
  font-size: var(--fs-base);
  color: var(--fg-muted);
  text-decoration: none;
}
.mnav__list a:hover { color: var(--accent); border-left-color: var(--accent); }
.mnav__list a[aria-current="page"] { color: var(--accent); font-weight: 600; border-left-color: var(--accent); }

/* =============================================================================
   A3 · HERO (blend efekt — potpis cijelog weba)
   Desktop: fotografija preko cijele širine, tekst lijevo, scrim horizontalno.
   Mobitel: fotografija gore, okomito se stapa u pozadinu, tekst ispod.
   ============================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  display: flex;
  align-items: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--sp-12);
}

.hero__copy { max-width: 38rem; }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(78deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 96%, transparent) 36%,
    color-mix(in srgb, var(--bg) 75%, transparent) 55%,
    color-mix(in srgb, var(--bg) 25%, transparent) 75%,
    transparent 100%);
}

.hero__eyebrow { margin-bottom: var(--sp-4); }
.hero__sub { font-size: var(--fs-lead); color: var(--fg-muted); margin-top: var(--sp-6); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero__trust { margin-top: var(--sp-4); }

.accent-line { color: var(--accent); display: block; }

@media (max-width: 899px) {
  .hero {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
    padding-block: var(--sp-8);
  }
  .hero__media::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--bg) 96%, transparent) 60%,
      var(--bg) 100%);
  }
  .hero__inner { padding-block: 0; }
  .hero__copy { max-width: none; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

/* =============================================================================
   A4 · TRAKA PREDNOSTI (TUBÒ Trust Bar)
   ============================================================================= */

.benefits { background: var(--bg-subtle); border-top: 1px solid var(--line); text-align: center; }
.benefits__grid { display: grid; gap: var(--sp-8); padding-block: var(--sp-12); justify-items: center; }
@media (min-width: 640px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .benefits__grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }
/* Tri tvrdnje u četiri stupca ostave praznu četvrtinu i traka izgleda nedovršeno. */
@media (min-width: 1000px) { .benefits__grid--3 { grid-template-columns: repeat(3, 1fr); } }

.benefit { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-inline: auto; width: 100%; max-width: 280px; }
.benefit__icon { color: var(--accent); margin-bottom: var(--sp-4); margin-inline: auto; }
.benefit h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); text-align: center; margin-inline: auto; }
.benefit p { font-size: var(--fs-sm); color: var(--fg-muted); text-align: center; margin-inline: auto; }

/* =============================================================================
   A5 · STATS PLOHA / Građevina Trust Bar (mirna, bez gradienta)
   ============================================================================= */

.statband { display: grid; gap: var(--sp-8); padding-block: var(--sp-12); margin-inline: auto; font-variant-numeric: tabular-nums; text-align: center; justify-items: center; }
@media (min-width: 640px) { .statband { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .statband { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }
.statband > div { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; }
.statband dt, .statband dd { margin: 0 !important; padding: 0 !important; margin-inline-start: 0 !important; text-align: center !important; width: 100%; }
.statband dt { opacity: 0.72; margin-bottom: var(--sp-2) !important; text-transform: uppercase; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; }
.statband dd { font-size: clamp(1.75rem, 1.4vw + 1.1rem, 2.5rem); font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: var(--ls-display); }

/* =============================================================================
   A6 · KARTICE + FILTRI (proizvodi, projekti, reference)
   ============================================================================= */

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.filter {
  min-height: 48px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.filter:hover { color: var(--fg); border-color: var(--fg-muted); }
.filter[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

.cards { display: grid; gap: var(--sp-6); }
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card[hidden] { display: none; }

.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-subtle); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card__kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.card__title { font-size: var(--fs-h3); }
.card__text { font-size: var(--fs-sm); color: var(--fg-muted); }
.card__meta { margin-top: auto; padding-top: var(--sp-4); font-size: var(--fs-sm); color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* =============================================================================
   A7 · PROCES — numerirani niz
   Brojevi su TIPOGRAFSKI ELEMENT, ne oznaka stavke: veliki, u prigušenoj
   akcentnoj boji, s tankom linijom koja povezuje korake. Sitni mono broj uz
   naslov čita se kao obična numerirana lista i to je najgeneričniji mogući
   prikaz procesa.
   ============================================================================= */

.process { display: grid; gap: var(--sp-10, 2.5rem); list-style: none; padding: 0; margin: 0; }
@media (min-width: 720px) { .process { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); } }
@media (min-width: 1100px) { .process { grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); } }

.process__item { position: relative; padding-top: var(--sp-6); }
/* Tanka linija iznad svakog koraka; kod prvog je puna u akcentu — vizualni start niza */
.process__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line);
}
.process__item:first-child::before { background: var(--accent); height: 2px; }

.process__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 2.4vw + 1.25rem, 3rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 32%, transparent);
  margin-bottom: var(--sp-4);
}
.process__title { font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--sp-2); }
.process__text { font-size: var(--fs-sm); color: var(--fg-muted); }

/* =============================================================================
   NIZ KORAKA — okomiti, s linijom koja spaja
   Za objašnjenje toka (kako sustav radi). Broj sjedi u vlastitom stupcu kroz
   koji prolazi hairline, pa se niz čita kao dijagram, ne kao popis.
   ============================================================================= */

.flow { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }

.flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--sp-5, 1.25rem);
  padding-bottom: var(--sp-8);
}
@media (min-width: 620px) { .flow__item { grid-template-columns: 4.5rem 1fr; gap: var(--sp-8); } }
.flow__item:last-child { padding-bottom: 0; }

/* Linija koja spaja korake — prolazi kroz stupac broja, prekida se na zadnjem */
.flow__item::before {
  content: ""; position: absolute;
  left: 1.55rem; top: 2.6rem; bottom: 0;
  width: 1px; background: var(--line);
}
@media (min-width: 620px) { .flow__item::before { left: 2.1rem; top: 3.1rem; } }
.flow__item:last-child::before { display: none; }

.flow__num {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--bg);          /* prekida liniju iza broja */
  padding-bottom: var(--sp-2);
}
.flow__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.flow__text { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 56ch; }

/* =============================================================================
   A8 · GRID PARTNERA I KOOPERANATA  [SIM]
   Tipografski „logotipi" — pošteniji od izmišljenih znakova i uredniji u gridu.
   ============================================================================= */

.partners { display: grid; gap: var(--sp-6) var(--sp-4); }
@media (min-width: 520px) { .partners { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .partners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .partners { grid-template-columns: repeat(4, 1fr); } }

/* Logotipi kooperanata: SVG marka + wordmark. Monokromatski, s namjernom
   tipografskom raznolikošću — stvarni zid logotipa nikad nije jedan font u jednoj
   težini, pa uniforman set odmah izgleda izmišljeno. */
/* Zid logotipa bez okvira — logotipe drži zajedno mreža i jednak sivi ton,
   ne kutije oko svakog. */
.partner {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 88px;
  padding: var(--sp-4);
  color: var(--fg-muted);
  filter: grayscale(1);
  opacity: 0.6;
  transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.partner:hover { color: var(--fg); opacity: 1; }

.partner__mark { flex: none; width: 30px; height: 30px; }
.partner__word { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.partner__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.partner__sub {
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  white-space: nowrap;
}

/* Tipografske varijante — svaki „brend" ima svoj karakter */
.partner--wide  .partner__name { letter-spacing: 0.08em; font-weight: 600; font-size: 0.875rem; }
.partner--low   .partner__name { text-transform: lowercase; letter-spacing: -0.045em; font-weight: 600; font-size: 1.0625rem; }
.partner--mono  .partner__name { font-family: var(--font-mono); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.02em; }
.partner--tight .partner__name { letter-spacing: -0.05em; font-weight: 700; font-size: 1.0625rem; }
.partner--stack { flex-direction: column; gap: var(--sp-2); }
.partner--stack .partner__word { align-items: center; }

.partners__group { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin: var(--sp-8) 0 var(--sp-4); }
.partners__group:first-child { margin-top: 0; }

/* =============================================================================
   A9 · FAQ — bez JS-a
   ============================================================================= */

.faq { max-width: 46rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 64px;
  padding-block: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
.faq__sign { flex: none; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform var(--dur-base) var(--ease-out); }
.faq__item[open] .faq__sign { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--sp-6); color: var(--fg-muted); }

/* =============================================================================
   A10 · FORMA UPITA
   ============================================================================= */

.form { display: grid; gap: var(--sp-4); max-width: 34rem; }
@media (min-width: 640px) { .form--2col { grid-template-columns: 1fr 1fr; max-width: 44rem; } .form__full { grid-column: 1 / -1; } }

.field { display: grid; gap: var(--sp-2); }
.field > label { font-size: var(--fs-sm); font-weight: 600; }
.field__hint { font-size: var(--fs-sm); color: var(--fg-muted); }

.input, .select, .textarea {
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--accent); }
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: var(--sp-12); }

/* =============================================================================
   A11 · CHAT WIDGET + AI TRAKA
   ============================================================================= */

.chat-fab {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 60;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: 0 var(--sp-6);
  border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab__label { display: none; }
@media (min-width: 640px) { .chat-fab__label { display: inline; } }

.ai-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-6);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--r-lg);
}
.ai-strip__num {
  display: inline-flex; align-items: center;
  min-height: 48px;                      /* touch meta */
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.ai-strip__txt { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }

/* =============================================================================
   CERTIFIKATI — mreža s nazivima
   Sam logotip bez naziva je ukras; certifikat postaje trust signal tek kad
   piše što jamči.
   ============================================================================= */

.certs { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .certs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .certs { grid-template-columns: repeat(4, 1fr); } }

.cert {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5, 1.25rem) 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.cert__img {
  width: 56px; height: 48px; object-fit: contain; object-position: left center;
  filter: grayscale(1); opacity: .8;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.cert:hover .cert__img { filter: none; opacity: 1; }
.cert__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.cert__what { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 4px; }

/* =============================================================================
   A12 · PREUZIMANJA (PDF katalozi)
   ============================================================================= */

.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); max-width: 46rem; }

.download {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 76px;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-base) var(--ease-out);
}
.downloads > li:first-child .download { border-top: 1px solid var(--line); }
.download:hover { color: var(--accent); }
.download:hover .download__meta { color: color-mix(in srgb, var(--accent) 70%, var(--fg-muted)); }

.download__ico {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
}
.download__body { display: grid; gap: 2px; }
.download__title { font-weight: 600; }
.download__meta { font-size: var(--fs-sm); color: var(--fg-muted); }

/* =============================================================================
   A13 · GALERIJA (industrijske reference)
   ============================================================================= */

.gallery { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__item { margin: 0; }
.gallery__item img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.gallery__item figcaption {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--fg-muted);
}

/* =============================================================================
   A2 · FOOTER
   ============================================================================= */

.site-footer { background: var(--bg-subtle); border-top: 1px solid var(--line); }
[data-world="gradevina"] .site-footer { background: var(--grad-surface); }

.footer__grid { display: grid; gap: var(--sp-8); padding-block: var(--sp-16) var(--sp-8); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-12); } }

.footer__title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--sp-4); }
/* Footer poveznice su prava navigacija, ne dekoracija — pune touch mete.
   Razmak u listi smanjen jer visina linka sad nosi razmak. */
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.footer__list a {
  display: inline-flex; align-items: center;
  min-height: 48px;
  font-size: var(--fs-sm); color: var(--fg); text-decoration: none;
}
.footer__list a:hover { color: var(--accent); }
.footer__addr { font-style: normal; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.8; }
.footer__addr strong { color: var(--fg); }

.footer__certs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); padding-block: var(--sp-8); border-top: 1px solid var(--line); }
.footer__certs img { height: 44px; width: auto; filter: grayscale(1); opacity: 0.75; transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.footer__certs img:hover { filter: none; opacity: 1; }

.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-6); padding-block: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--fg-muted); }
.footer__legal a { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-decoration: none; }
.footer__legal a:hover { color: var(--accent); }
.footer__legal p { margin: 0; margin-right: auto; }

/* =============================================================================
   SPLIT — asimetrični dvostupac s namjernim lomom grida
   Skill: „lomi grid na 1–2 mjesta po stranici; lom je naglasak, a naglasak
   svugdje nije naglasak nigdje." Zato offset ide samo na .split--offset.
   ============================================================================= */

.split { display: grid; gap: var(--sp-12); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: 7fr 5fr; gap: var(--sp-16); }
  .split--flip > :first-child { order: 2; }
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--offset > :last-child { transform: translateY(var(--sp-12)); }
}
.split__media { border-radius: var(--r-lg); overflow: hidden; }
.split__media img { width: 100%; height: auto; display: block; }

/* Neke isporučene ilustracije su kvadratne, a motiv sjedi u donjem dijelu —
   prazan gornji rub u layoutu čita se kao rupa, ne kao whitespace.
   Zato se kadrira, umjesto da se prihvati kompozicija iz izvorne datoteke. */
/* `contain` + padding je sliku uklapao UNUTAR okvira, pa je motiv ispao sitan
   i okružen praznim tintom. `cover` popunjava okvir, a object-position miče
   prazan gornji rub izvorne datoteke izvan kadra. */
.split__media--crop { background: var(--bg-subtle); }
.split__media--crop img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 64%;
  transform: scale(1.12);
}

/* Velika brojka koja nosi sekciju — editorial naglasak, jedan po stranici */
.bignum {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.bignum__unit { font-size: 0.4em; letter-spacing: -0.01em; margin-left: 0.1em; }

/* =============================================================================
   TEHNIČKE SPECIFIKACIJE
   ============================================================================= */

.speclist { display: grid; gap: 0; margin: 0; font-variant-numeric: tabular-nums; }
.speclist > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.speclist dt { color: var(--fg-muted); }
.speclist dd { margin: 0; font-weight: 600; text-align: right; }

/* Tablica linija proizvoda */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spectable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
.spectable th, .spectable td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); }
.spectable th { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }
.spectable td:first-child { font-weight: 600; white-space: nowrap; }
.spectable tbody tr:hover { background: var(--bg-subtle); }

/* =============================================================================
   IZJAVE KLIJENATA
   Skill: „jedan konkretan citat vrijedi više od pet generičkih pohvala."
   Zato citat nosi konkretan podatak, a ne pridjev.
   ============================================================================= */

.quotes { display: grid; gap: var(--sp-6); }
/* Luk portreta strši 56 px iznad kartice — sekcija mu mora ostaviti zrak.
   Stepenasti pomak lomi red od tri jednake kutije: bez njega je ovo treći
   grid kartica na istoj stranici i čita se kao šablona, ne kao izbor. */
@media (min-width: 860px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    padding-top: 56px;
  }
  .quotes { row-gap: var(--sp-24); }
  .quotes > :nth-child(3n+2) { margin-top: var(--sp-8); }
  .quotes > :nth-child(3n+3) { margin-top: var(--sp-16); }
}
@media (max-width: 859px) { .quotes { padding-top: 56px; gap: var(--sp-16); } }

/* Osoba stoji u lijevom stupcu, izjava ide desno. <figure> nosi UA margin
   1em 40px — bez `margin: 0` kartica u stupcu od 376 px stisne se na 296 px,
   pa citat ostane bez mjere retka. */
.quote {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "by" "text";
  gap: var(--sp-6);
  margin: 0;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
}
/* Stupac s portretom otvara se samo ako slike ima. Građevina koristi istu
   komponentu bez fotografija i ostaje jednostupčana. */
.quote:has(.quote__figure) {
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas: "face by" "text text";
  column-gap: var(--sp-4);
}

/* LUK, ne kvadratić. Portret izlazi iz kartice prema gore — jedini lom grida
   u sekciji i razlog zašto se red ne čita kao tablica. Bijeli prsten odvaja
   luk od plohe iznad kartice, inače se rub izgubi u tonu trake.
   Kadar svih triju slika sveden je na isto pravilo (glava puni ~94 % širine),
   pa `cover` reže gotovo ništa i glave ostaju jednake veličine. */
.quote__figure {
  grid-area: face;
  width: 92px;
  height: 122px;
  margin-top: -56px;
  border-radius: 46px 46px var(--r-md) var(--r-md);
  overflow: hidden;
  background: var(--bg-subtle);
  box-shadow: 0 0 0 4px var(--bg-raised), inset 0 0 0 1px var(--line);
}
.quote__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

/* Slot bez fotografije. Nije rupa nego stanje sustava: isti luk, ista mjera,
   inicijali mjesta u akcentu. Kad slika stigne, monogram se zamijeni <img>-om
   i ništa drugo se ne dira. */
.quote__figure--mono {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-subtle));
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Potpis stoji uz lice, na vrhu — kao zaglavlje pisma. Citat je ispod, pun
   širine, pa drži mjeru retka. */
.quote figcaption {
  grid-area: by;
  align-self: center;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.quote cite { display: block; font-style: normal; font-weight: 600; color: var(--fg); }

/* --- Portret u krugu, gore desno ---------------------------------------------
   Druga izvedba istog slota, uz .quote__figure (luk lijevo, TUBÒ naslovnica).
   Ovdje krug sjedi u gornjem desnom uglu kartice i uravnotežuje zaglavlje:
   potpis stoji lijevo, lice desno, citat ide punom širinom ispod.

   Slot bez fotografije nije rupa nego stanje sustava — isti krug, ista mjera,
   inicijali mjesta u akcentu, kao i kod .quote__figure--mono. Kad slika stigne:

     <span class="quote__avatar">
       <img src="../assets/foto/investitor-01.jpg" alt="" width="128" height="128"
            loading="lazy" decoding="async">
     </span>

   Monogram se briše, klasa --mono otpada, ništa drugo se ne dira.
   ---------------------------------------------------------------------------- */
.quote__avatar {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-subtle);
  /* Prsten umjesto bordera: ne ulazi u box model, pa krug ostaje točno 64 px. */
  box-shadow: 0 0 0 1px var(--line);
}
.quote__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.quote__avatar--mono {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-subtle));
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Potpis mora stati lijevo od kruga — inače „Investitor, obiteljska kuća
   240 m²" prolazi ispod lica. 64 px kruga + 8 px zraka. */
.quote:has(.quote__avatar) figcaption { padding-right: 72px; }

.quote blockquote { grid-area: text; margin: 0; font-size: var(--fs-base); line-height: 1.55; }
/* Navodnik kao znak, ne kao interpunkcija — otvara blok i drži oko na citatu. */
.quote blockquote::before {
  content: "„";
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.5;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

/* Ispod 480 px potpis ide pod luk — dva stupca ondje ostavljaju ime na 120 px. */
@media (max-width: 479px) {
  .quote:has(.quote__figure) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "face" "by" "text";
    row-gap: var(--sp-4);
  }
  .quote figcaption { align-self: start; }
}

/* =============================================================================
   VERSUS — usporedba s kičmom kriterija u sredini
   Nije <table> nego <dl>: kriterij je pojam, dva opisa su njegove vrijednosti,
   pa je semantika točna i BEZ CSS trikova koji tablici razbiju strukturu za
   čitače ekrana. Uz to se slobodno prelama na mobitelu — tablica bi ondje
   tražila vodoravni skrol, a ovo je glavni vizualni moment stranice.

   Desktop: [ klasični ] [ KRITERIJ ] [ TUBÒ ]   — položaj kroz grid-column,
   pa redoslijed u DOM-u (dt prije dd) ostaje ispravan.
   Mobitel: kriterij pun redak, ispod njega dvije kartice jedna ispod druge.
   ============================================================================= */

.versus { margin: 0; border-top: 1px solid var(--line); }

.versus__row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) {
  .versus__row { grid-template-columns: 1fr minmax(11rem, 13rem) 1fr; }
}

/* Kičma: mono, verzalno, sitno — tehnička oznaka, ne naslov. Ne smije
   konkurirati sadržaju ćelija koje uspoređuje. */
.versus__crit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
@media (min-width: 860px) {
  .versus__crit {
    grid-column: 2; grid-row: 1;
    border-inline: 1px solid var(--line);
    background: none;
  }
}

.versus__old,
.versus__new {
  margin: 0;
  padding: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
@media (min-width: 860px) {
  .versus__old { grid-column: 1; grid-row: 1; }
  .versus__new { grid-column: 3; grid-row: 1; }
}

/* Klasični je prigušen: manji kontrast je ovdje argument, ne propust.
   Ostaje iznad 4.5:1 — provjereno, ink-500 na bijeloj je 7,4:1. */
.versus__old { color: var(--fg-muted); }

/* TUBÒ stupac je jedina ploha u tablici. Ćelije se dodiruju pa se kroz sve
   retke čita kao jedan neprekinut stupac. */
.versus__new {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-weight: 500;
}

.versus__head {
  display: none;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) {
  .versus__head { display: grid; grid-template-columns: 1fr minmax(11rem, 13rem) 1fr; }
}
.versus__label {
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.versus__label--old { color: var(--fg-muted); }
.versus__label--new { background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--accent-hi); }
.versus__label span {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* Na mobitelu se strane moraju imenovati u svakom retku — bez zaglavlja se ne
   zna koja je kartica čija. Na desktopu to preuzima .versus__head. */
.versus__who {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
@media (min-width: 860px) { .versus__who { display: none; } }

/* Mobilni raspored kičme.
   Nađeno u pregledniku na 360 px: kad je kriterij samo centrirana siva traka
   između dviju obojenih kartica, čita se kao podnožje retka IZNAD, a ne kao
   naslov retka ISPOD — pa se ne zna što se s čime uspoređuje. Zato na mobitelu
   kriterij postaje naslov retka: lijevo poravnat, s crtom u akcentu ispod, a
   retci se razmiču umjesto da se dodiruju. */
@media (max-width: 859px) {
  .versus { border-top: 0; }
  .versus__row {
    border-bottom: 0;
    margin-bottom: var(--sp-8);
    gap: var(--sp-2);
  }
  .versus__row:last-child { margin-bottom: 0; }

  .versus__crit {
    justify-content: flex-start;
    background: none;
    color: var(--fg);
    font-size: 0.75rem;
    padding: 0 0 var(--sp-2);
    border-bottom: 2px solid var(--accent);
    margin-bottom: var(--sp-2);
  }

  /* Bez okvira i bez zaobljenih kutija: dvije kartice jedna ispod druge samo
     dodaju šum. Strana se čita iz oznake i iz linije, ne iz kutije. */
  .versus__old,
  .versus__new {
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
    border-left: 2px solid var(--line);
    background: none;
  }
  .versus__new { border-left-color: var(--accent); }
}

.source-note {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

/* =============================================================================
   POMOĆNO
   ============================================================================= */

/* Spacing je hijerarhija, ne konstanta.
   --section-y        novi misaoni blok
   --section-y-tight  nastavak prethodne teme
   .section--cont     sekcija koja dovršava temu iznad: gornji razmak prepolovljen,
                      pa se dvije sekcije čitaju kao jedna cjelina */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--cont { padding-top: var(--section-y-tight); }
.section--close { padding-bottom: var(--section-y-tight); }

.section__head { max-width: 46rem; margin-bottom: var(--sp-12); }
.section__head .eyebrow { margin-bottom: var(--sp-3); }
.section__head p { color: var(--fg-muted); margin-top: var(--sp-4); font-size: var(--fs-lead); }

/* Magazinski uvod: naslov lijevo, uvodni tekst desno u vlastitom stupcu.
   Postoji da svaka sekcija na stranici ne otvara identičnom kombinacijom
   eyebrow + naslov + odlomak pod njim. */
.section__head--split { max-width: none; display: grid; gap: var(--sp-6); align-items: end; }
@media (min-width: 940px) {
  .section__head--split { grid-template-columns: 6fr 5fr; gap: var(--sp-16); margin-bottom: var(--sp-16); }
  .section__head--split p { margin-top: 0; padding-bottom: 6px; }
}

/* Indeksna lista — arhivski format iz skilla, alternativa još jednom gridu kartica */
.index { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
@media (min-width: 780px) { .index { grid-template-columns: 1fr 1fr; column-gap: var(--sp-16); } }

.index__item { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
  align-items: baseline; padding-block: var(--sp-5, 1.25rem);
  border-bottom: 1px solid var(--line); }
.index__name { font-weight: 600; }
/* Kad je stavka indeksa poveznica, ona je na toj stranici glavna navigacija —
   mora imati touch metu, ne samo visinu retka teksta. Mjereno na 360 px: 26 px. */
a.index__name {
  display: inline-flex; align-items: center;
  min-height: 48px;
  color: inherit; text-decoration: none;
}
a.index__name:hover { color: var(--accent); }
.index__desc { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--fg-muted); margin-top: -2px; max-width: 48ch; }
.index__code { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap; }

.sim-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg-muted);
  vertical-align: middle;
}

/* =============================================================================
   A14 · TRAKA REFERENCI (logo cloud)

   Đir je preuzet iz predloška: centriran prigušen naslov s jednom riječi u
   akcentu, ispod njega mreža logotipa. Tri detalja koja komponentu čine tim
   što jest, i sva tri su ovdje:

   1. Vodoravne linije prelaze rub mreže — traka djeluje kao izrez iz šireg
      sustava, a ne kao zatvorena kutija.
   2. Križići „+" na unutarnjim sjecištima. To je jedini ukras i cijeli potpis.
   3. Logotip sam, bez potpisa ispod. Naziv već piše u logotipu.

   Boje su naše: hairline je --line, križići --line, naslov --fg-muted s
   akcentom na drugom dijelu. Ništa se ne preuzima iz tamne teme predloška.
   ============================================================================= */

.refs-head {
  max-width: 44rem;
  margin: 0 auto var(--sp-12);
  text-align: center;
}
.refs-head .eyebrow { margin-bottom: var(--sp-3); }

/* Naslov je namjerno lakši od standardnog h2: ovo je potpis ispod heroja, a ne
   novi misaoni blok. Težina 500 i prigušena boja drže ga u drugom planu, pa
   akcentirani dio nosi cijeli naglasak. */
.refs-title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1vw + 0.9rem, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg-muted);
  text-wrap: balance;
  margin: 0;
}
.refs-title strong { font-weight: 700; color: var(--accent); }

/* Traka nosi vodoravne linije preko pune širine kontejnera; mreža unutar nje
   crta samo okomite. Odatle efekt linije koja „ide dalje" od ćelija. */
.refs-band { border-block: 1px solid var(--line); }

/* minmax(0, 1fr), ne 1fr: `1fr` je minmax(auto, 1fr), a `auto` je min-content,
   pa bi stupac odbio pasti ispod širine najšireg logotipa i mreža bi izgurala
   stranicu u vodoravni skrol. Mjereno na 360 px prije popravka: 487 px. */
.refs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .refs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.refs__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 128px;
  padding: var(--sp-6) var(--sp-4);
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  /* IZNIMKA U SUSTAVU: ovdje logotipi idu U BOJI, iako .partner, .cert i
     .footer__certs drže grayscale. Odluka je Jureova i vrijedi SAMO za traku
     partnera — certifikati i ostatak stranice ostaju kako jesu.
     Razlog zašto to ovdje radi: ova traka je jedini blok na stranici u kojem
     su logotipi sam sadržaj, a ne popratni znak uz tekst. */
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Zadnji stupac i zadnji redak nemaju vanjsku liniju — vodoravne dolaze s
   .refs-band, a desna bi visjela izvan mreže. */
.refs__cell:nth-child(2n) { border-inline-end: 0; }
.refs__cell:nth-last-child(-n+1) { border-block-end: 0; }
@media (min-width: 720px) {
  .refs__cell:nth-child(2n) { border-inline-end: 1px solid var(--line); }
  .refs__cell:nth-child(3n) { border-inline-end: 0; }
  .refs__cell:nth-last-child(-n+3) { border-block-end: 0; }
}

/* Križić na sjecištu. Dvije linije kroz gradient, bez ijednog dodatnog elementa
   u HTML-u. Sjedi na donjem-desnom uglu ćelije i pomiče se pola sebe van, pa
   padne točno na sjecište četiriju ćelija. */
.refs__cell::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  transform: translate(50%, 50%);
  z-index: 2;
  pointer-events: none;
  /* Ne --line: hairline je #DCE7F3 i na bijeloj podlozi križić jednostavno
     nestane — provjereno u pregledniku. Križić je namjeran znak, pa mora biti
     vidljiv; --ink-300 ga drži tihim, ali prisutnim. */
  background:
    linear-gradient(var(--ink-300), var(--ink-300)) center / 1px 11px no-repeat,
    linear-gradient(var(--ink-300), var(--ink-300)) center / 11px 1px no-repeat;
}
/* Križić postoji samo na UNUTARNJIM sjecištima — na rubu bi visio u zraku. */
.refs__cell:nth-child(2n)::after,
.refs__cell:nth-last-child(-n+1)::after { content: none; }
@media (min-width: 720px) {
  .refs__cell:nth-child(2n)::after { content: ""; }
  .refs__cell:nth-child(3n)::after,
  .refs__cell:nth-last-child(-n+3)::after { content: none; }
}

/* Logotip nosi naziv sam po sebi — potpis ispod njega bio bi isto ime dvaput. */
.refs__logo {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 719px) { .refs__logo { height: 28px; } }

/* Naziv ispod logotipa. Neki od ovih znakova su na 34 px teško čitljivi —
   oznaka ih razrješava bez da preuzme prostor. Zato mono, verzalno i sitno:
   čita se kao tehnička oznaka ispod slike, ne kao drugi naslov.
   Verzal ide iz CSS-a, ne iz HTML-a, da čitač ekrana i dalje dobije
   „Sunčani Hvar", a ne „SUNČANI HVAR". */
.refs__name {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  line-height: 1.2;
  margin: 0;
}
@media (max-width: 719px) { .refs__name { font-size: 0.625rem; letter-spacing: 0.08em; } }