/* ── Space Grotesk, hostan lokalno ───────────────────────────────────────────
   Prije se vukao s fonts.googleapis.com, sto je slalo IP adresu svakog
   posjetitelja Googleu u SAD (GDPR) i trazilo dva dodatna spajanja na vanjske
   posluzitelje. Od Chromea 86 HTTP cache je particioniran po domeni, pa stari
   argument "posjetitelj ga vec ima iz cachea" vise ne vrijedi - lokalno je brze.

   Ovo je varijabilni font: jedna datoteka po podskupu pokriva cijeli raspon
   400-700, pa su sve cetiri tezine koje koristimo u istih 41 KB.
   latin-ext je OBAVEZAN - u njemu su c, c, s, z i d. Bez njega hrvatski
   tekst pada na rezervni font. Vijetnamski podskup namjerno preskacemo. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-ext.woff2?v=79') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2?v=79') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0A0A0A;
  --bg-dark: #0D0D0D;
  --bg-card: #111111;
  --bg-elevated: #161616;
  --orange: #FF4500;
  --orange-dark: #CC3700;
  --orange-darker: #AA2E00;
  --gold: #D4AF37;
  --border: #1E1E1E;
  --border-light: #222222;
  --border-medium: #2A2A2A;
  --text: #ffffff;
  --text-muted1: #888888;
  --text-muted2: #777777;
  --text-muted3: #666666;
  --text-muted4: #555555;
  --text-muted5: #444444;
  --green: #22C55E;

  /* Radius scale */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 9999px;

  /* Shadow scale */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.3);
  --shadow-md: 0 12px 28px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 768px) { main { padding-bottom: 0; } }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Focus visibility (keyboard navigation) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange-dark); }

/* ── Animations ───────────────────────────── */
/* Puls sjaja radi preko prozirnosti sloja s fiksnim box-shadowom, a ne
   animiranjem samog box-shadowa. Box-shadow se ne kompozitira, pa se prije
   svaki frame iznova crtao na main threadu - na 6 gumba po stranici,
   beskonačno, i onda kad su izvan ekrana. Opacity ide na GPU. */
@keyframes glow-fade {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}
@keyframes ring-pulse {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slide-in-bottom {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Udaljenost klizanja je --slide-x, pa se na mobitelu smanji jednim overrideom */
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(calc(-1 * var(--slide-x, 80px))); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(var(--slide-x, 80px)); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Mobilne varijante: prozirnost se odvaja od pomaka i dolazi na 1 već na 30%
   trajanja. Ako prati isti easing kao pomak, tekst je jedva vidljiv dok je
   daleko sa strane, a kad postane vidljiv već je prešao 80% puta - pa se
   klizanje uopće ne primijeti i izgleda kao obično pojavljivanje. */
@keyframes slide-in-left-m {
  from { opacity: 0; transform: translateX(calc(-1 * var(--slide-x, 80px))); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right-m {
  from { opacity: 0; transform: translateX(var(--slide-x, 80px)); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0); }
}

.btn-call {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Osnovni sjaj je statičan; ::after dodaje jači i pulsira prozirnošću. */
  box-shadow: 0 0 20px rgba(255,69,0,0.4), 0 0 40px rgba(255,69,0,0.1);
}
.btn-call::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 40px rgba(255,69,0,0.7), 0 0 80px rgba(255,69,0,0.3);
  animation: glow-fade 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
.btn-call::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: rgba(255,69,0,0.4);
  animation: ring-pulse 2s ease-out infinite;
  z-index: -1;
}

.animate-pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Layout helpers ───────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px)  { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ── NAVBAR ───────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.5s, border-color 0.5s, backdrop-filter 0.5s;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled, .navbar.menu-open {
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(12px);
  border-color: var(--border-medium);
  box-shadow: 0 1px 0 rgba(255,69,0,0.08), 0 8px 24px rgba(0,0,0,0.3);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
@media (min-width: 1024px) { .navbar__inner { height: 80px; } }

.navbar__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.navbar__logo-img {
  height: 38px;
  width: auto;
  mix-blend-mode: screen;
  flex-shrink: 0;
}
@media (min-width: 768px) { .navbar__logo-img { height: 48px; } }
.navbar__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.navbar__logo-main {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text);
  transition: color 0.3s;
}
@media (min-width: 1024px) { .navbar__logo-main { font-size: 1.5rem; } }
.navbar__logo:hover .navbar__logo-main { color: var(--gold); }
.navbar__logo-sub {
  font-size: 9px;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}

.navbar__nav {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) { .navbar__nav { display: flex; } }

.navbar__link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted1);
  transition: color 0.3s;
}
.navbar__link:hover, .navbar__link.active { color: var(--text); }
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  height: 1px;
  width: 0;
  background: var(--orange);
  transition: width 0.3s;
}
.navbar__link.active::after, .navbar__link:hover::after { width: 100%; }

/* ── LANGUAGE SWITCHER ────────────────────── */
.navbar__lang {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 0.75rem;
  border-radius: 4px;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.2s;
}
@media (min-width: 768px) { .navbar__lang { display: inline-flex; } }
.navbar__lang:hover { opacity: 1; transform: scale(1.1); }
.navbar__lang svg { display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }

/* Zastava u traci, lijevo od hamburgera - samo na mobitelu; desktop koristi onu
   u navigaciji. margin-left: auto gura nju i hamburger skupa uz desni rub, jer
   bi ih inace space-between na .navbar__inner razmaknuo po cijeloj sirini. */
.navbar__lang--mobile {
  display: inline-flex;
  margin-left: auto;
  margin-right: 0.25rem;
  padding: 0.5rem;
  opacity: 1;
}
@media (min-width: 768px) { .navbar__lang--mobile { display: none; } }

.navbar__mobile-lang {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted2);
  transition: color 0.3s;
}
.navbar__mobile-lang:hover { color: var(--orange); }
.navbar__mobile-lang svg { display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); flex-shrink: 0; }

.navbar__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}
@media (min-width: 768px) { .navbar__hamburger { display: none; } }

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 9999px;
  transition: all 0.3s;
  transform-origin: center;
}
.navbar__hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(7px); }
.navbar__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(-7px); }

.navbar__mobile-menu {
  display: none;
  overflow: hidden;
  border-top: 1px solid var(--border-medium);
  background: var(--bg);
}
.navbar__mobile-menu.open { display: block; }
@media (min-width: 768px) { .navbar__mobile-menu { display: none !important; } }

.navbar__mobile-nav {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.navbar__mobile-link {
  display: block;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted2);
  border-bottom: 1px solid #1A1A1A;
  transition: color 0.3s;
}
.navbar__mobile-link:hover, .navbar__mobile-link.active { color: var(--orange); }
.navbar__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  background: var(--orange);
  color: var(--text);
  font-weight: 700;
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s;
}
.navbar__mobile-cta:hover { background: var(--orange-dark); }

/* ── FOOTER ───────────────────────────────── */
footer {
  background: var(--bg);
  border-top: 1px solid #1E1E1E;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { footer { padding-bottom: 0; } }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 3.5rem 0;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); gap: 4rem; }
}

.footer__brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text);
}
.footer__brand-sub {
  font-size: 9px;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
  margin-bottom: 1.25rem;
}
.footer__desc {
  color: var(--text-muted3);
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.footer__social-links { display: flex; gap: 0.5rem; }
.footer__social-links a {
  color: var(--text-muted4);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.footer__social-links a:hover { color: var(--text); }

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: #1A1A1A;
  border: 1px solid var(--border);
  color: var(--text-muted4);
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s, filter 0.3s;
}
.social-icon:hover { color: var(--text); border-color: #333; background: #222; }
.social-icon svg { display: block; }

/* Brend boje mreza (9.9.2026) - ikone su bile prigusene sive i gubile su se u
   podnozju. SVG-ovi imaju fill="currentColor", pa je dovoljno postaviti color
   i pozadinu: HTML se ne dira, a promjena vrijedi na svih 12 mjesta odjednom.
   Pravila MORAJU stajati iza .social-icon:hover - specificnost im je ista
   (klasa + atribut naspram klase + pseudoklase), pa odlucuje redoslijed. */
.social-icon[aria-label="Instagram"] {
  color: #fff;
  border-color: transparent;
  /* Sluzbeni Instagram preljev: zuta u donjem lijevom kutu prelazi u ruzicastu
     pa u plavu. Radijalni, a ne linearni - linearni izgleda plosnato. */
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social-icon[aria-label="Facebook"] {
  color: #fff;
  border-color: transparent;
  background: #1877f2;
}

/* Bez ovoga bi ih zajednicki :hover prebojao u sivo. Umjesto promjene boje,
   na prijelaz ide lagano posvjetljenje i podizanje - boja ostaje brendirana. */
.social-icon[aria-label="Instagram"]:hover,
.social-icon[aria-label="Facebook"]:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  filter: brightness(1.12);
}
.social-icon[aria-label="Facebook"]:hover { background: #1877f2; }
.social-icon[aria-label="Instagram"]:hover {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.footer__col-title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer__nav { display: flex; flex-direction: column; gap: 0.625rem; }
.footer__nav a {
  color: var(--text-muted3);
  font-size: 0.875rem;
  transition: color 0.3s;
}
.footer__nav a:hover { color: var(--orange); }

.footer__phone {
  display: block;
  color: var(--orange);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  transition: color 0.3s;
}
.footer__phone:hover { color: var(--orange-dark); }
.footer__available {
  color: var(--text-muted3);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #141414;
  border: 1px solid var(--border-medium);
  border-radius: 9999px;
  padding: 6px 12px;
}
.footer__badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2s ease-in-out infinite;
}
.footer__badge-text {
  color: var(--text-muted1);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.footer__bottom {
  border-top: 1px solid #1A1A1A;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; }
}
.footer__copy { color: var(--text-muted5); font-size: 0.75rem; }

/* ── FLOATING CALL BUTTON ─────────────────── */
#floating-call {
  display: none;
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 50;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--text);
  font-size: 1.5rem;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: background 0.3s, transform 0.2s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
/* Prikazuju se na svim veličinama. Prije su bili samo desktop, a mobitel je
   imao fiksnu narančastu traku preko cijelog dna; traka je maknuta pa te
   ikonice sad preuzimaju njenu ulogu i na telefonu. */
#floating-call.show { display: flex; }
#floating-call:hover { background: var(--orange-dark); transform: scale(1.1); }
#floating-call:active { transform: scale(0.95); }

/* ── FLOATING WHATSAPP BUTTON ─────────────── */
#floating-whatsapp {
  display: none;
  position: fixed;
  bottom: 6.75rem; right: 2rem;
  z-index: 50;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: background 0.3s, transform 0.2s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
#floating-whatsapp svg { width: 26px; height: 26px; }
#floating-whatsapp.show { display: flex; }
#floating-whatsapp:hover { background: #128C7E; transform: scale(1.1); }
#floating-whatsapp:active { transform: scale(0.95); }

/* Na telefonu bliže rubu i nešto manje, uz sigurnu zonu za home indicator. */
@media (max-width: 767px) {
  #floating-call {
    width: 56px; height: 56px;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  #floating-whatsapp {
    width: 52px; height: 52px;
    right: 1.125rem;
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }
}



/* ── COOKIE BANNER ────────────────────────── */
#cookie-banner {
  display: none;
  position: fixed;
  bottom: 84px;
  left: 0.75rem; right: 0.75rem;
  z-index: 40;
  background: #1A1A1A;
  border: 1px solid var(--border-medium);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  animation: slide-in-bottom 0.4s ease;
}
@media (min-width: 768px) {
  #cookie-banner {
    left: auto; right: 1.5rem;
    bottom: 1.5rem;
    max-width: 340px;
  }
}
#cookie-banner.show { display: block; }

.cookie-banner__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.cookie-banner__icon { font-size: 1.5rem; flex-shrink: 0; }
.cookie-banner__title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.cookie-banner__text {
  color: var(--text-muted2);
  font-size: 0.75rem;
  line-height: 1.6;
}
.cookie-banner__btns {
  display: flex;
  gap: 0.5rem;
}
.cookie-banner__accept {
  flex: 1;
  background: var(--orange);
  color: var(--text);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding: 0.625rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.cookie-banner__accept:hover { background: var(--orange-dark); }
.cookie-banner__decline {
  flex: 1;
  background: var(--border-medium);
  color: var(--text-muted2);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.cookie-banner__decline:hover { background: #333; color: var(--text); }

/* ── HERO SECTION ─────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #080808;
}
@media (max-width: 767px) {
  .hero {
    display: block;
    min-height: 0;
  }
}
.hero__bg {
  position: absolute;
  inset: 0;
}
@media (max-width: 767px) {
  .hero__bg {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    inset: auto;
  }
}
.hero__van-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: 0.95;
}
/* Na desktopu je video prigusen jer naslov stoji preko njegove sredine, dok na
   mobitelu tekst pada ispod kadra pa video smije ici na 0.95.
   Vrijednost je 18.8.2026. dignuta s 0.5 na 0.7: izmjereno je da je pri 0.5
   svjetlina iza naslova bila 1.9%, a kontrast bijelog teksta 10.3:1 na
   najsvjetlijem mjestu - visestruko iznad 4.5:1 koliko WCAG AA trazi, dakle
   kadar je bio zatamnjen puno vise nego sto je citljivost trazila.
   Pri 0.7 (uz blazi .hero__gradient ispod) najgore mjesto daje 6.5:1.
   GORNJA GRANICA: 0.8 uz gradijent 0.35/0.38/0.55 jos daje 4.8:1. Iznad toga
   se pada ispod AA i naslov pocinje nestajati u svijetlim kadrovima. */
@media (min-width: 768px) {
  .hero__van-bg {
    object-position: center 50%;
    opacity: 0.7;
  }
}
.hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.015;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
}
/* Zadnji stop MORA ostati rgba(10,10,10,0.97): time se hero stapa s pozadinom
   stranice (#0A0A0A), inace se na spoju vidi vodoravni rub. Gornja tri su
   ublazena zajedno s opacity videa - vidi racun uz .hero__van-bg. */
@media (min-width: 768px) {
  .hero__gradient { background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.42) 40%, rgba(0,0,0,0.58) 70%, rgba(10,10,10,0.97) 100%); }
}
.hero__glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: rgba(255,69,0,0.05);
  filter: blur(100px);
  border-radius: 50%;
}
.hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem 5.5rem;
  text-align: center;
  background: linear-gradient(to bottom, rgba(10,10,10,0.97), #0A0A0A 60%);
}
@media (min-width: 640px) { .hero__content { padding: 6rem 1.5rem 5rem; background: none; } }
@media (min-width: 1024px) { .hero__content { padding-left: 2rem; padding-right: 2rem; } }

.hero__badge {
  /* flex + fit-content, ne inline-flex: bedz sada zivi unutar h1, a inline-flex
     bi sjeo u redak s tekstom naslova i pokupio njegov line-height ispod sebe.
     Ovako je i dalje skupljen oko teksta, ali drzi svoj redak. */
  display: flex;
  width: fit-content;
  text-shadow: none;   /* h1 ima jaku sjenu, bedz je nikad nije imao */
  align-items: center;
  /* Prelamanje ide PO DIJELOVIMA, ne usred recenice. Prije je cijeli tekst bio
     jedan span, pa se na uskom zaslonu lomio u dva reda - a tocka se tada
     centrirala prema oba reda odjednom i ispadala iz ravnine prvog. Sada svaki
     dio ide u svoj red cijel, a align-items centrira tocku unutar SVOG reda. */
  flex-wrap: wrap;
  gap: 0.625rem;
  row-gap: 0.4rem;   /* mora IZA gap - gap je skracenica i inace ga poništi */
  background: rgba(255,69,0,0.1);
  border: 1px solid rgba(255,69,0,0.25);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  /* margin-inline: auto je OBAVEZAN. Dok je bedz bio inline-flex, centrirao ga
     je text-align: center s .hero__content. Blok razine to ne slusa, pa bi bez
     auto margina stajao uz lijevi rub. */
  margin: 0 auto 1.25rem;
  animation: fade-in-up 0.6s ease 0.2s both;
}
.hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
/* Razdjelnik izmedju dijelova. Isti element kao prva tocka, pa je jednake
   debljine - prije je ondje stajao znak · koji je pri ovoj velicini pisma
   ispadao osjetno tanji. Ne pulsira: dvije tocke koje trepere odvlace pogled,
   a prva to radi namjerno. */
.hero__badge-dot--sep {
  animation: none;
}
.hero__badge-text {
  color: #FF6633;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (min-width: 640px) { .hero__badge-text { font-size: 0.875rem; } }
/* Na uskim zaslonima razmak medju slovima od 0.2em razvlaci bedz preko dva
   reda i na 360px. Smanjenje razmaka i pisma vraca ga u jedan red na vecini
   telefona, a da se i dalje cita kao naglasak, ne kao obican tekst. */
@media (max-width: 480px) {
  .hero__badge { padding: 0.45rem 0.85rem; gap: 0.5rem; }
  .hero__badge-text { font-size: 0.6875rem; letter-spacing: 0.1em; }
}
/* Na 360px se i to prelamalo u dva reda, a prelomljena pilula izgleda kao
   pravokutnik s previsokim rubom i drugi red ostaje bez svoje tocke.
   Jos malo manje pismo drzi bedz u jednom redu do najuzih telefona. */
@media (max-width: 380px) {
  .hero__badge { padding: 0.4rem 0.7rem; gap: 0.35rem; }
  .hero__badge-text { font-size: 0.6rem; letter-spacing: 0.03em; }
}

.hero__title {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}
/* Redak 1 uleti slijeva, redak 2 zdesna; animacija je na retcima, ne na h1,
   da se ne sudari s transformom kojim je h1 centriran na mobitelu. */
.hero__title-line1,
.hero__title-line2 {
  display: block;
  --slide-x: 80px;
}
.hero__title-line1 { color: var(--text); }
.hero__title-line2 { color: var(--orange); }
/* Animacija se pali tek kad splash krene nestajati (klasa dolazi iz inline
   skripte na dnu index.html), inače bi se cijela odigrala iza crnog overlaya.
   Bez klase su retci normalno vidljivi, pa tekst ostane čitljiv i ako JS zakaže. */
body.intro-done .hero__title-line1 {
  animation: slide-in-left 0.9s cubic-bezier(0.22,1,0.36,1) 0.45s both;
}
body.intro-done .hero__title-line2 {
  animation: slide-in-right 0.9s cubic-bezier(0.22,1,0.36,1) 0.6s both;
}

.hero__subtitle {
  color: #ffffff;
  font-size: 0.9rem;
  max-width: 42rem;
  margin: 0 auto 1.25rem;
  letter-spacing: 0.05em;
  animation: fade-in-up 0.7s ease 0.55s both;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7);
  font-weight: 600;
}
@media (min-width: 640px) { .hero__subtitle { font-size: 1.25rem; margin-bottom: 2.5rem; } }

.hero__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
  animation: scale-in 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.7s both;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.hero__ctas > *:last-child {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .hero__ctas { display: flex; flex-direction: row; justify-content: center; max-width: none; }
  .hero__ctas > *:last-child { grid-column: auto; }
}

.hero__btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  text-align: center;
  background: var(--orange);
  color: var(--text);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1rem 0.75rem;
  border-radius: 0.75rem;
  transition: background 0.3s;
  box-shadow: 0 0 30px rgba(255,69,0,0.3);
}
@media (min-width: 640px) { .hero__btn-primary { width: auto; font-size: 1.25rem; padding: 1.25rem 2.5rem; border-radius: 1rem; white-space: normal; gap: 0.5rem; } }
.hero__btn-primary:hover { background: var(--orange-dark); }

.hero__btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 1rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
@media (min-width: 640px) { .hero__btn-secondary { width: auto; font-size: 1rem; padding: 1.25rem 2rem; border-radius: 1rem; white-space: normal; } }
.hero__btn-secondary:hover { color: var(--text); border-color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.5); }

.hero__phone {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.1em;
  margin-bottom: 2.5rem;
  transition: color 0.3s;
  animation: fade-in 0.6s ease 0.85s both;
}
@media (min-width: 640px) { .hero__phone { font-size: 1.875rem; } }
.hero__phone:hover { color: var(--orange); }

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(20,20,20,0.8);
  backdrop-filter: blur(4px);
  border: 1px solid #2A2A2A;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  animation: fade-in-up 0.6s ease 1s both;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.hero__rating:hover { border-color: var(--gold); background: rgba(30,30,20,0.9); }
.hero__stars { display: flex; gap: 2px; }
.hero__star { color: var(--gold); font-size: 1rem; }
.hero__rating-num { color: var(--text); font-weight: 700; font-size: 0.875rem; }
.hero__rating-sep { width: 1px; height: 1rem; background: #333; }
.hero__rating-count { color: var(--text-muted2); font-size: 0.75rem; letter-spacing: 0.05em; }

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: fade-in 0.8s ease 1.6s both;
}
.hero__scroll-text {
  color: #333;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hero__scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, #444, transparent);
  animation: bounce-y 1.8s ease-in-out infinite;
}

/* ── VAN SHOWCASE ─────────────────────────── */
.van-showcase {
  padding: 2rem 0 0;
}
.van-showcase__wrap {
  border-radius: 1rem;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.van-showcase__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
}
.van-showcase__wrap:hover .van-showcase__img {
  transform: scale(1.03);
}

/* ── MARQUEE STRIP ────────────────────────── */
.marquee-strip {
  background: #0D0D0D;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 0.9rem 0;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
/* Pauziranje na prelazak misem SAMO na uredajima koji stvarno imaju pokazivac.
   Bez ovog uvjeta traka se na mobitelu znala trajno zaustaviti: na dodirnim
   ekranima :hover se zalijepi nakon dodira i ostane aktivan dok korisnik ne
   dodirne nesto drugo, pa je animacija ostajala pauzirana. */
@media (hover: hover) {
  .marquee-strip:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted2);
  padding: 0 1.5rem;
}
.marquee-sep {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--orange);
  font-size: 1.125rem;
  line-height: 1;
}

/* ── HOW IT WORKS ─────────────────────────── */
.how-it-works {
  padding: 5rem 0;
  background: var(--bg);
  border-top: 1px solid #1A1A1A;
}
@media (min-width: 1024px) { .how-it-works { padding: 7rem 0; } }

.hiw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .hiw-grid {
    grid-template-columns: 1fr 40px 1fr 40px 1fr;
    gap: 0;
    align-items: center;
  }
}

.hiw-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 1.25rem;
  opacity: 0.5;
}
@media (min-width: 768px) { .hiw-arrow { display: flex; } }

.hiw-card {
  background: #111111;
  border: 1px solid #222222;
  border-top: 3px solid var(--orange);
  border-radius: 1rem;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hiw-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,69,0,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.hiw-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,69,0,0.5);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,69,0,0.1);
}

.hiw-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.hiw-card__icon {
  width: 52px; height: 52px;
  background: rgba(255,69,0,0.1);
  border: 1px solid rgba(255,69,0,0.2);
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
  color: var(--orange);
}
.hiw-card__icon svg { width: 1.5rem; height: 1.5rem; }
.hiw-card__num {
  font-size: 3.75rem;
  font-weight: 700;
  color: var(--orange);
  opacity: 0.12;
  line-height: 1;
  letter-spacing: -0.05em;
}

.hiw-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.625rem;
  letter-spacing: -0.01em;
}
.hiw-card__desc {
  color: #575757;
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.hiw-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(255,69,0,0.08);
  border: 1px solid rgba(255,69,0,0.2);
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
}

/* ── STATS SECTION ────────────────────────── */
.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
  padding: 3rem 0;
}
@media (min-width: 1024px) { .stats { padding: 4rem 0; } }

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    divide-x: 1px solid var(--border);
  }
  .stats__item { border-left: 1px solid var(--border); }
  .stats__item:first-child { border-left: none; }
}

.stats__item {
  text-align: center;
  padding: 0.5rem 2rem;
}
.stats__value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) { .stats__value { font-size: 3rem; } }
@media (min-width: 1024px) { .stats__value { font-size: 3.75rem; } }
.stats__label {
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.stats__sub { color: var(--text-muted4); font-size: 0.875rem; }

/* ── SERVICES PREVIEW ─────────────────────── */
.services-preview {
  padding: 5rem 0;
  background: var(--bg);
}
@media (min-width: 1024px) { .services-preview { padding: 7rem 0; } }

.section-label {
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}
.section-label--gold { color: var(--gold); }

.section-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .section-title { font-size: 3rem; } }
.section-desc {
  color: var(--text-muted4);
  max-width: 36rem;
  margin: 0 auto;
  font-size: 1rem;
}
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

.service-card {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card--highlight {
  background: linear-gradient(to bottom, #1A0800, #0F0500);
  border-color: rgba(255,69,0,0.4);
}
.service-card--highlight:hover { border-color: rgba(255,69,0,0.7); }
.service-card:not(.service-card--highlight):hover { border-color: #333; }

.service-card__badge {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;   /* iznad fotografije u .service-card__media */
  background: var(--orange);
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  letter-spacing: 0.1em;
}
/* Fotografija preko cijele širine kartice, umjesto nekadašnje SVG ikonice.
   Negativne margine je izvlače iz paddinga kartice (1.75rem 1.5rem) da slika
   dosegne rub; gornji kutovi prate zaobljenje kartice.
   aspect-ratio drži visinu rezerviranom PRIJE nego se slika učita — bez toga
   sadržaj ispod poskoči kad slika stigne, a to Lighthouse mjeri kao pomak
   rasporeda (CLS). Omjer mora odgovarati CARD_SIZES u tools/grade-photos.js. */
.service-card__media {
  margin: -1.75rem -1.5rem 1.25rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg-elevated);
}
.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.service-card--highlight .service-card__title { color: var(--orange); }
.service-card__desc {
  color: var(--text-muted4);
  font-size: 0.875rem;
  line-height: 1.6;
  transition: color 0.3s;
}
.service-card:hover .service-card__desc { color: var(--text-muted2); }

.services-more {
  text-align: center;
  margin-top: 3rem;
}
.services-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-medium);
  color: var(--text-muted3);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  transition: border-color 0.3s, color 0.3s;
}
.services-more a:hover { border-color: rgba(255,69,0,0.5); color: var(--orange); }

/* ── WHY US SECTION ───────────────────────── */
.why-us {
  padding: 5rem 0;
  background: var(--bg-dark);
}
@media (min-width: 1024px) { .why-us { padding: 7rem 0; } }

.why-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .why-us__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.why-card {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.75rem;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s var(--ease);
}
.why-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,69,0,0.35);
  box-shadow: var(--shadow-lg);
}
.why-card__icon-wrap {
  width: 64px; height: 64px;
  border-radius: 1rem;
  background: #141414;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.875rem;
  margin: 0 auto 1.5rem;
  transition: border-color 0.3s;
  color: var(--orange);
}
.why-card__icon-wrap svg { width: 1.875rem; height: 1.875rem; }
.why-card:hover .why-card__icon-wrap { border-color: rgba(255,69,0,0.3); }
.why-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
}
.why-card__desc { color: var(--text-muted4); font-size: 0.875rem; line-height: 1.7; }

/* ── CTA BANNER ───────────────────────────── */
.cta-banner {
  position: relative;
  padding: 5rem 0;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 1024px) { .cta-banner { padding: 7rem 0; } }
.cta-banner::before, .cta-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
}
.cta-banner::before { top: 0; background: linear-gradient(to right, transparent, rgba(255,69,0,0.3), transparent); }
.cta-banner::after  { bottom: 0; background: linear-gradient(to right, transparent, rgba(255,69,0,0.3), transparent); }

.cta-banner__glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 800px; height: 400px;
  background: rgba(255,69,0,0.04);
  filter: blur(120px);
  border-radius: 50%;
  pointer-events: none;
}
.cta-banner__inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.cta-banner__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 640px) { .cta-banner__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .cta-banner__title { font-size: 4.5rem; } }
.cta-banner__title span { color: var(--orange); }
.cta-banner__desc {
  color: var(--text-muted3);
  font-size: 1rem;
  margin-bottom: 2.5rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
@media (min-width: 640px) { .cta-banner__desc { font-size: 1.125rem; } }

.cta-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--orange);
  color: var(--text);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.25rem 2.5rem;
  border-radius: 1rem;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 60px rgba(255,69,0,0.4);
}
@media (min-width: 640px) { .cta-banner__btn { font-size: 1.25rem; padding: 1.5rem 3.5rem; } }
.cta-banner__btn:hover {
  background: var(--orange-dark);
  box-shadow: 0 0 80px rgba(255,69,0,0.6);
}
.cta-banner__btn-icon { font-size: 1.875rem; }
.cta-banner__btn-label { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.2em; opacity: 0.7; }
.cta-banner__btn-num { display: block; }

/* ── PAGE HEADER ──────────────────────────── */
.page-header {
  position: relative;
  padding: 7rem 1rem 3.5rem;
  background: var(--bg-dark);
  border-bottom: 1px solid #1A1A1A;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(circle, rgba(255,69,0,0.06), transparent 70%);
  pointer-events: none;
}
.page-header__label {
  position: relative;
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}
.page-header__title {
  position: relative;
  font-size: 3rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .page-header__title { font-size: 4.375rem; } }
/* Ključne riječi unutar H1, ali u čitljivoj veličini. H1 je prije bio samo
   "Usluge" / "O nama" / "Kontakt" - Googleu to ne govori nista o cemu je
   stranica, a H1 mu je jedan od signala i kad odlucuje hoce li prepisati
   naslov u rezultatima pretrage. Fraza NE ide u velicini od 4.375rem jer bi
   preplavila stranicu; ovako veliki naslov ostaje nosilac dizajna, a ispod
   njega stoji vidljiv (ne skriven) tekst s pojmovima koje ljudi guglaju. */
.page-header__title-sub {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--text-muted1);
}
@media (min-width: 640px) { .page-header__title-sub { font-size: 1.25rem; } }
.page-header__desc {
  position: relative;
  color: var(--text-muted4);
  font-size: 1.125rem;
  max-width: 42rem;
}

/* ── SCROLL PROGRESS BAR ─────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--orange);
  z-index: 9998;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--orange);
}

/* ── SPLASH SCREEN ───────────────────────── */
/* Gasenje splash-a vodi CSS, ne JS. Prije ga je micala iskljucivo inline
   skripta: da je zakazala (greska u JS-u, blokiran script.js, strogi CSP),
   ovaj crni preklopnik ostao bi zauvijek preko cijele stranice - i posjetitelju
   i crawleru koji renderira stranicu. Ovako se makne i kad JS uopce ne radi. */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ODGODA (1s) MORA biti identična setTimeout-u u js/script.js — traži
     "Splash intro". Ako se raziđu, naslov u herou krene prije ili poslije nego
     preklopnik nestane. Skraćeno s 1.6s: uz 0.7s prelaza to je bilo 2.3s crnog
     ekrana prije nego posjetitelj išta vidi, a ovo je hitna služba — čovjek
     koji stoji uz cestu s puknutom gumom nema strpljenja za uvod. */
  animation: splash-out 0.7s ease 1s forwards;
}
@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}
.splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: splash-in 0.5s ease both;
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.splash__logo {
  width: 160px;
  height: auto;
  mix-blend-mode: screen;
}
.splash__name {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}
.splash__sub {
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
}

/* ── SERVICES PAGE ────────────────────────── */
.service-section {
  padding: 5rem 0;
  border-bottom: 1px solid #1A1A1A;
}
@media (min-width: 1024px) { .service-section { padding: 7rem 0; } }
.service-section--alt { background: var(--bg-dark); }
.service-section--default { background: var(--bg); }

.service-section__header { margin-bottom: 3rem; }
@media (min-width: 1024px) { .service-section__header { margin-bottom: 4rem; } }
.service-section__icon-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.service-section__icon { font-size: 2.5rem; display: inline-flex; align-items: center; color: var(--orange); }
.service-section__icon svg { width: 2.5rem; height: 2.5rem; }
.service-section__badge {
  background: var(--orange);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  letter-spacing: 0.1em;
}
.service-section__sub {
  color: var(--text-muted2);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}
.service-section__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .service-section__title { font-size: 3rem; } }
.service-section__title--orange { color: var(--orange); }
.service-section__desc {
  color: var(--text-muted3);
  max-width: 42rem;
  line-height: 1.7;
}

.service-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) { .service-section__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.service-features__title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.service-features__list { display: flex; flex-direction: column; gap: 0.75rem; }
.service-features__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.service-features__check {
  color: var(--orange);
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,69,0,0.1);
  border: 1px solid rgba(255,69,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 1px;
}
.service-features__text { color: var(--text-muted2); font-size: 0.875rem; line-height: 1.6; }

.service-features__cta {
  margin-top: 2.5rem;
}
.service-features__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--orange);
  color: var(--text);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  transition: background 0.3s;
}
.service-features__btn:hover { background: var(--orange-dark); }

.service-images { display: flex; flex-direction: column; gap: 1rem; }
.service-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 1rem; display: block; }

/* ── O NAMA PAGE ──────────────────────────── */
.about-story {
  padding: 5rem 0;
  background: var(--bg);
}
@media (min-width: 1024px) { .about-story { padding: 7rem 0; } }

.about-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) { .about-story__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.about-story__label {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}
.about-story__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
@media (min-width: 640px) { .about-story__title { font-size: 3rem; } }
.about-story__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text-muted3);
  line-height: 1.7;
}

.values-section {
  padding: 5rem 0;
  background: var(--bg-dark);
  border-top: 1px solid #1A1A1A;
}
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }

.value-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 0.3s;
}
.value-card:hover { border-color: #2A2A2A; }
.value-card__icon { font-size: 1.875rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; color: var(--orange); }
.value-card__icon svg { width: 1.875rem; height: 1.875rem; }
.value-card__title { color: var(--text); font-weight: 700; margin-bottom: 0.5rem; }
.value-card__desc { color: var(--text-muted4); font-size: 0.875rem; line-height: 1.6; }

.equipment-section {
  padding: 5rem 0;
  background: var(--bg);
}
@media (min-width: 1024px) { .equipment-section { padding: 7rem 0; } }
.equipment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) { .equipment-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .equipment-grid { grid-template-columns: repeat(3, 1fr); } }

/* Omjer 3:2, a ne 16:9 kao drugdje na stranici: jedna od tri slike je uspravna
   snimka, u siroki okvir stao bi samo njezin sredisnji dio. */
.equipment-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-lg); display: block; }

.equipment-carousel { position: relative; }
/* Skripta strelice i kopije rubnih slika ubacuje bez obzira na sirinu zaslona;
   ovdje ih se drzi skrivenima svugdje osim na mobitelu, gdje se prikaz vraca
   nize. Na sirem zaslonu u redu tako ostaju tocno tri slike. */
.equipment-nav,
.equipment-clone { display: none; }

/* Slajdanje samo na mobitelu. Od 768px navise sve tri slike ionako stoje jedna
   uz drugu, pa ondje karusel nema sto rijesiti - grid ostaje netaknut, a
   strelice se ne pokazuju. */
@media (max-width: 767px) {
  .equipment-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Traka za pomicanje bi sjekla donji rub slike; prst i strelice su dovoljni. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .equipment-grid::-webkit-scrollbar { display: none; }
  .equipment-grid > .equipment-img {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .equipment-clone { display: block; }
  /* Reveal se oslanja na IntersectionObserver, a slike izvan kadra u vodoravnom
     scrolleru njemu su nevidljive - druga i treca ostale bi prozirne dok se ne
     doslajdaju. Unutar karusela zato bez ulazne animacije. */
  .equipment-grid > .reveal { opacity: 1; transform: none; }

  .equipment-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.25s ease;
  }
  .equipment-nav--prev { left: 0.5rem; }
  .equipment-nav--next { right: 0.5rem; }
}

/* ── KONTAKT PAGE ─────────────────────────── */
.contact-section {
  padding: 5rem 0;
  background: var(--bg);
}
@media (min-width: 1024px) { .contact-section { padding: 7rem 0; } }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.contact__heading {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2rem;
}

.contact__call-box {
  background: linear-gradient(to bottom right, #1A0800, #0F0500);
  border: 1px solid rgba(255,69,0,0.3);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
}
.contact__call-label {
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.75rem;
}
/* Kontakt podaci stoje kao ispisan tekst, bez gumba. Brojevi su i dalje tel:
   poveznice jer je to na mobitelu jedini razuman način da se broj nazove,
   ali nisu stilizirani kao gumb. */
.contact__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact__detail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.contact__detail-icon {
  color: var(--orange);
  display: flex;
  flex-shrink: 0;
}
.contact__detail-value {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: color 0.3s;
  word-break: break-word;
}
@media (min-width: 640px) { .contact__detail-value { font-size: 1.5rem; } }
.contact__detail-value:hover { color: var(--orange); }

.contact__call-note {
  color: var(--text-muted4);
  font-size: 0.875rem;
  margin-top: 1.25rem;
}

.contact__info-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.contact__info-title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.contact__hours-list { display: flex; flex-direction: column; gap: 0; }
.contact__hours-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid #1A1A1A;
  gap: 1rem;
}
.contact__hours-item:last-child { border-bottom: none; }
.contact__hours-label { color: var(--text-muted3); font-size: 0.875rem; }
.contact__hours-value { color: var(--text); font-weight: 600; font-size: 0.875rem; flex-shrink: 0; }
.contact__hours-value--orange { color: var(--orange); }
/* Jedna stavka s više redaka sati: naziv gore lijevo, sati u stupcu desno. */
.contact__hours-item--stack { align-items: flex-start; }
.contact__hours-value--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  text-align: right;
}

.contact__available {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.contact__available-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.contact__available-text { color: var(--green); font-size: 0.875rem; font-weight: 500; }

.contact__address-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.contact__address-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.contact__address-icon { color: var(--orange); margin-top: 2px; }
.contact__address-name { color: var(--text); font-weight: 500; margin-bottom: 0.25rem; }
.contact__address-line { color: var(--text-muted3); font-size: 0.875rem; }
.contact__social {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #1A1A1A;
  display: flex;
  gap: 1rem;
}
.contact__social a {
  color: var(--text-muted4);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.contact__social a:hover { color: var(--text); }

.contact__map { display: flex; flex-direction: column; gap: 0.75rem; }
.contact__map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
/* Slika je već tamna (CARTO Dark Matter), pa nema filtera - prije je invert()
   izvrtao boje cijele karte, uključujući marker i natpise. */
.contact__map-img { display: block; width: 100%; height: auto; }
.contact__map-overlay { position: absolute; inset: 0; cursor: pointer; }

.contact__map-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.contact__map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--orange);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  transition: background 0.3s;
}
.contact__map-btn:hover { background: var(--orange-dark); }
.contact__map-btn svg { flex-shrink: 0; }

.contact__map-link {
  color: var(--orange);
  font-size: 0.85rem;
  text-decoration: underline;
  transition: color 0.3s;
  text-align: right;
}
.contact__map-link:hover { color: var(--orange-dark); }

/* Atribucija je uvjet licence za OSM podatke i CARTO podlogu. */
.contact__map-credit {
  color: var(--text-muted4);
  font-size: 0.7rem;
  margin-top: 0.25rem;
}
.contact__map-credit a { color: inherit; text-decoration: underline; }
.contact__map-credit a:hover { color: var(--orange); }

.contact-bottom {
  padding: 3.5rem 0;
  background: var(--bg-dark);
  border-top: 1px solid #1A1A1A;
  text-align: center;
}
.contact-bottom__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .contact-bottom__title { font-size: 2.25rem; } }
.contact-bottom__desc {
  color: var(--text-muted4);
  margin-bottom: 2rem;
}
.contact-bottom__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--orange);
  color: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.25rem 3rem;
  border-radius: 1rem;
  transition: background 0.3s;
}
.contact-bottom__btn:hover { background: var(--orange-dark); }

/* ── WHATSAPP BUTTON ──────────────────────── */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  border-radius: 1rem;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s;
  white-space: nowrap;
}
.btn-whatsapp:hover { background: #128C7E; transform: translateY(-2px); }
/* hero CTA WhatsApp button — secondary/outline, so it doesn't compete with the primary call CTA */
.hero__btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  text-align: center;
  background: rgba(37,211,102,0.08);
  color: #4ADE80;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(37,211,102,0.4);
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
@media (min-width: 640px) { .hero__btn-whatsapp { width: auto; font-size: 1.25rem; padding: 1.25rem 2rem; border-radius: 1rem; white-space: normal; gap: 0.5rem; } }
.hero__btn-whatsapp:hover { background: rgba(37,211,102,0.18); border-color: #25D366; transform: translateY(-2px); }

/* count-up value size preserve */
.stats__value { min-width: 4rem; display: inline-block; }

/* ── MOBILE HERO ─────────────────────────── */
/* Uses .hero .hero__X selectors (0,2,0 specificity) to guarantee
   override over all base element rules regardless of file position  */
.hero__below { display: none; }
@media (max-width: 767px) {
  /* Stack layout, image takes up space */
  .hero { display: block; min-height: 0; }
  /* Visina se veze uz ekran, ne uz širinu. S aspect-ratio 1/1 je hero bio visok
     koliko i širok (na 390px telefonu 390px = 46% ekrana), pa je izgledao
     prepolovljeno. svh je "mali" viewport - visina dok je adresna traka vidljiva -
     da hero nikad ne bude viši od onoga što se stvarno vidi; vh je zaliha za
     starije preglednike. Video je uspravan (720x1280) pa viši okvir pokazuje
     više kadra, a object-fit: cover se sam pobrine za izrez.

     Ranije je ovdje stajao min(85svh, 100svh - 142px) jer je na dnu ekrana bila
     fiksna narančasta traka s brojem, pa je hero morao ostaviti mjesta da traka
     s ocjenom ispod njega ne završi iza nje. Traka je maknuta (zamijenile su je
     plutajuće ikonice u kutu), pa to ograničenje više ne treba.
     Oduzima se samo sigurna zona, da gumbi na dnu heroa ne padnu pod home
     indicator na iPhoneu.

     PODEŠAVANJE: broj 95 na četiri mjesta - dva ovdje i dva u .hero .hero__content
     ispod. Sve četiri vrijednosti moraju ostati jednake, inače se sadržaj
     razilazi sa slikom. */
  .hero .hero__bg {
    position: relative;
    width: 100%;
    height: calc(95vh - env(safe-area-inset-bottom, 0px));
    height: calc(95svh - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    inset: auto;
  }
  /* Gradient: slight dark top + stronger middle + strong dark bottom */
  .hero .hero__gradient {
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.25) 28%,
      rgba(0,0,0,0.25) 58%,
      rgba(0,0,0,0.88) 100%);
  }
  /* Content overlays the image (hero is position:relative by default) */
  .hero .hero__content {
    position: absolute;
    top: 0; left: 0; right: 0;
    /* mora biti identično .hero .hero__bg iznad */
    height: calc(95vh - env(safe-area-inset-bottom, 0px));
    height: calc(95svh - env(safe-area-inset-bottom, 0px));
    background: none;
    padding: 0;
    max-width: none;
    margin: 0;
    z-index: 10;
  }
  /* Badge i naslov su jedna grupa (.hero__intro) sidrena po donjem rubu na
     37.3% visine heroa - iznad kombija, koji nikad ne seže više od 41.5%.
     Prije su bili dva neovisna apsolutna elementa: badge zalijepljen na 72px
     od vrha, naslov na 37.3%, pa je razmak među njima ovisio o visini ekrana
     (na 390px ekranu 94px, na 360px svega 8px). Ovako badge uvijek stoji tik
     iznad naslova, a razmak drži gap ispod. */
  .hero .hero__intro {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 62.7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  /* Badge unutar grupe - pozicioniranje preuzima flex, ne apsolutne koordinate.
     Prije je bio left: 50% + translateX(-50%). Kod apsolutno pozicioniranog
     elementa bez zadanog right, dostupna širina ide samo od te točke do desnog
     ruba - dakle pola širine ekrana. Badge se zato lomio u tri retka na svakom
     telefonu (na 430px ekranu bio je širok 213px umjesto raspoloživih 398px).
     Zato left/right + margin: 0 auto: containing block je sad pune širine,
     a fit-content ga drži skupljenim oko teksta i centriranim. */
  .hero .hero__badge {
    position: static;
    transform: none;
    width: fit-content;
    max-width: 100%;
    /* Razmak do naslova drzao je gap na .hero__intro dok su badge i h1 bili
       braca. Sad je badge unutar h1, pa ga drzi vlastita margina; auto sa
       strana centrira ga jer je blok razine. */
    margin: 0 auto 0.75rem;
    animation: fade-in 0.5s ease 0.2s both;
    text-align: center;
  }
  .hero .hero__badge .hero__badge-text {
    font-size: 0.68rem;
    letter-spacing: 0.04em;   /* uži razmak slova: s 0.08em se povećani tekst lomio u dva retka */
  }
  /* CTA buttons: bottom edge of image */
  .hero .hero__ctas {
    position: absolute;
    bottom: 1.25rem;
    left: 0; right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.875rem;
    max-width: none;
    margin: 0;
  }
  .hero .hero__ctas .hero__btn-primary,
  .hero .hero__ctas .hero__btn-whatsapp {
    width: auto;
    padding: 0.875rem 1.5rem;
    font-size: 0.85rem;
  }
  /* Hide elements that don't belong on the image */
  .hero .hero__subtitle,
  .hero .hero__rating,
  .hero .hero__scroll { display: none; }
  /* Hero title: centered in the middle of the image */
  /* Naslov ide IZNAD kombija, ne preko njega. Izmjereno na samom videu
     (razlika kadra s kombijem i kadra prazne radionice): kombi kroz cijelu
     animaciju nikad ne seže iznad 41.5% visine kadra. Donji rub grupe je zato
     na 37.3% - vidi .hero__intro iznad, koji drži i naslov i badge. */
  .hero .hero__title {
    display: block;
    position: static;
    transform: none;
    font-size: clamp(1.4rem, 6.6vw, 2.05rem);
    line-height: 1.25;
    margin: 0;
    width: 92%;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0,0,0,0.95), 0 0 40px rgba(0,0,0,0.8);
  }
  /* Put mora rasti s širinom ekrana, inače je pokret prekratak da se pročita
     kao dolazak sa strane i izgleda kao obično pojavljivanje. Višak se odreže
     na .hero (overflow: hidden) pa tekst uleti s ruba slike. */
  .hero .hero__title-line1,
  .hero .hero__title-line2 { --slide-x: clamp(80px, 26vw, 130px); }
  /* Blaži easing i duže trajanje nego na desktopu: expo-out prijeđe ~80% puta
     u prvih 25% vremena, pa na malom ekranu pokret prođe prebrzo da ga oko
     pročita kao klizanje. Ovdje se put raspoređuje ravnomjernije. */
  body.intro-done .hero .hero__title-line1 {
    animation: slide-in-left-m 1.1s cubic-bezier(0.25,0.6,0.3,1) 0.45s both;
  }
  body.intro-done .hero .hero__title-line2 {
    animation: slide-in-right-m 1.1s cubic-bezier(0.25,0.6,0.3,1) 0.6s both;
  }
  /* Below-image section: show rating */
  .hero__below {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem 1.5rem;
    background: #0A0A0A;
  }
  .hero__below .hero__rating { display: inline-flex; }
}

/* Bedz je sada UNUTAR h1, a .hero__title je na mobitelu sirok 92%. Bedz zato
   ima ~302px prostora umjesto 328px koliko je imao kao samostalan element, pa
   se na 360px lomio u dva retka - tocno ono sto je commit dd87be3 rijesio.
   Manje pismo ga vraca u jedan red.

   Ovaj blok MORA stajati IZA mobilnog bloka iznad: ondje `.hero .hero__badge
   .hero__badge-text` ima jednaku tezinu selektora, pa pobjeduje onaj kasniji.
   Isti razlog zbog kojeg stariji blokovi na 480px i 380px vise ne djeluju. */
@media (max-width: 400px) {
  .hero .hero__badge { padding: 0.45rem 0.8rem; gap: 0.45rem; }
  .hero .hero__badge .hero__badge-text { font-size: 0.64rem; letter-spacing: 0.035em; }
}
@media (max-width: 380px) {
  .hero .hero__badge { padding: 0.4rem 0.7rem; gap: 0.35rem; }
  .hero .hero__badge .hero__badge-text { font-size: 0.6rem; letter-spacing: 0.03em; }
}

/* ── PRAVNI TEKST (politika privatnosti) ─────
   Jedini dugi tekstualni blok na stranici. Zasebne klase, a ne posudene od
   .about-story, jer ondje tekst ide u dvostupcanoj mrezi uz sliku, a ovdje
   mora biti jedan uzak stupac: mjera od ~68 znakova po retku je granica preko
   koje oko gubi pocetak sljedeceg retka. */
.legal {
  padding: 3.5rem 0 5rem;
  background: var(--bg);
}
.legal__wrap {
  max-width: 44rem;
}
.legal__meta {
  color: var(--text-muted3);
  font-size: 0.875rem;
  padding-bottom: 1.75rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--border);
}
/* Podaci o voditelju obrade - istaknuti jer ih ljudi traze prve */
.legal__box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.legal__box p { margin: 0.2rem 0; color: var(--text-muted1); }
.legal__box strong { color: var(--text); }

/* Gumb za povlacenje pristanka na kolacice, u politici privatnosti.
   Namjerno prigusen a ne narancast: to je pravna mogucnost koja mora biti
   dostupna, a ne poziv na radnju koji se natjece s gumbima za poziv. */
.btn-secondary {
  background: var(--border-medium);
  color: var(--text-muted2);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover { background: #333; color: var(--text); }
.legal h2 {
  font-size: 1.375rem;
  color: var(--text);
  margin: 2.75rem 0 0.9rem;
  letter-spacing: -0.01em;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-size: 1.0625rem;
  color: var(--text);
  margin: 1.75rem 0 0.6rem;
}
.legal p, .legal li {
  color: var(--text-muted1);
  line-height: 1.75;
  margin-bottom: 0.9rem;
}
.legal ul { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.legal li { margin-bottom: 0.5rem; }
.legal li::marker { color: var(--orange); }
.legal a { color: var(--orange); }
.legal strong { color: var(--text); }
/* Kratki sazetak na vrhu - da se glavno moze procitati bez citanja svega */
.legal__summary {
  background: rgba(255,69,0,0.06);
  border: 1px solid rgba(255,69,0,0.22);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.5rem;
  margin-bottom: 2.75rem;
}
.legal__summary p:last-child { margin-bottom: 0; }