/* =============================================================
   Autoservis MANKi — stilovi
   Industrijski / tehnički izgled: crna pozadina, čelik, plava,
   neon cijan akcenti. Mobile-first.
   ============================================================= */

/* ---------- Fontovi (self-hosted Barlow Condensed) ---------- */
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../assets/fonts/barlow-500-latinext.woff2") 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: "Barlow Condensed"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../assets/fonts/barlow-500-latin.woff2") 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;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../assets/fonts/barlow-600-latinext.woff2") 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: "Barlow Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../assets/fonts/barlow-600-latin.woff2") 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;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../assets/fonts/barlow-700-latinext.woff2") 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: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../assets/fonts/barlow-700-latin.woff2") 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;
}

/* ---------- Tokeni ---------- */
:root {
  --bg:      #06090e;
  --bg-2:    #0b1119;
  --panel:   #0e151e;
  --panel-2: #131c27;
  --steel-1: #eef3f8;
  --steel-2: #aeb9c5;
  --steel-3: #6b7784;
  --blue:      #1f66b8;
  --blue-bright:#3a90e0;
  --blue-deep: #0d3564;
  --cyan:    #37e1ff;
  --cyan-2:  #7af0ff;
  --text:    #dbe4ee;
  --muted:   #8a97a6;
  --line:    rgba(150,170,190,.14);
  --glow-cyan: rgba(55,225,255,.55);

  --f-display: "Barlow Condensed", "Oswald", system-ui, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  /* Stranica se NIKAD ne skrola: gesta skrola (kotačić/prst) virtualno
     pokreće otkrivanje kontakta (--reveal), vidi js/main.js. Nema ni
     scrollbara ni rubber-band efekta na mobitelu. */
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  /* pinch-zoom ostaje dopušten (pristupačnost); panning preuzima JS */
  touch-action: pinch-zoom;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
/* Unutar panela usluga dopusti normalno pomicanje sadržaja */
#services, #services * { touch-action: pan-y; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ---------- Pozadinski slojevi ---------- */
.bg-grid, .bg-glow, .bg-vignette { position: fixed; inset: 0; z-index: -3; pointer-events: none; }
.bg-grid {
  background-image:
    linear-gradient(rgba(90,150,190,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,150,190,.10) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 35%, transparent 88%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 35%, transparent 88%);
  opacity: .5;
}
.bg-glow {
  z-index: -2;
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(31,102,184,.22), transparent 70%),
    radial-gradient(40% 30% at 50% 62%, rgba(55,225,255,.10), transparent 70%);
}
.bg-vignette {
  z-index: -1;
  background: radial-gradient(120% 100% at 50% 30%, transparent 45%, rgba(0,0,0,.75) 100%);
}

/* ---------- Gumbi ---------- */
.btn {
  font-family: var(--f-display);
  font-weight: 600; font-size: 1.05rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .62em 1.15em; border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  white-space: nowrap;
}
.btn:hover { border-color: rgba(55,225,255,.5); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue) 55%, var(--blue-deep));
  color: #fff; border-color: rgba(120,200,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 20px rgba(31,102,184,.45),
              0 0 0 1px rgba(55,225,255,.12);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 26px rgba(55,225,255,.4); }

/* ---------- Gumb za zvuk ---------- */
.mute {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(14,21,30,.7); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--cyan);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.mute svg { width: 22px; height: 22px; }
.mute .mute__off { display: none; }
.mute[data-on="false"] { color: var(--muted); }
.mute[data-on="false"] .mute__on { display: none; }
.mute[data-on="false"] .mute__off { display: block; }

/* =============================================================
   UVOD (garažna vrata)
   ============================================================= */
.intro {
  position: fixed; inset: 0; z-index: 100;
  background: transparent;      /* vrata su pokrivač; iza njih je već stranica */
  overflow: hidden;
}
.intro[hidden] { display: none; }

.intro__door {
  position: absolute; top: 0; height: 100%;
  /* FIKSNO preklapanje od 2px. (Sa 50.5% preklapanje raste sa širinom ekrana pa
     desna vrata, koja se crtaju iznad, "odrežu" zakovicu lijevih vrata uz šav.) */
  width: calc(50% + 1px);
  background: linear-gradient(90deg, #141b24, #2b3743 32%, #37454f 50%, #2b3743 68%, #141b24);
  z-index: 2;
  transition: transform 1.15s cubic-bezier(.72,.02,.2,1);
  will-change: transform;
}
/* Korisnik je kliknuo da preskoči -> vrata se otvaraju brže */
.intro.is-rushed .intro__door { transition-duration: .9s; }
.intro__door span {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 48px, rgba(0,0,0,.55) 48px 51px, rgba(195,215,235,.12) 51px 53px),
    radial-gradient(circle at 26px 26px, rgba(215,230,245,.35) 0 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 26px) 26px, rgba(215,230,245,.35) 0 2.4px, transparent 3px);
  background-size: 100% 100%, 100% 53px, 100% 53px;
}
.intro__door--l { left: 0; border-right: 1px solid rgba(140,170,200,.35);
  box-shadow: inset -16px 0 30px rgba(0,0,0,.6), 2px 0 12px rgba(0,0,0,.5); }
.intro__door--r { right: 0; border-left: 1px solid rgba(140,170,200,.35);
  box-shadow: inset 16px 0 30px rgba(0,0,0,.6), -2px 0 12px rgba(0,0,0,.5); }
.intro.is-opening .intro__door--l { transform: translateX(-101%); }
.intro.is-opening .intro__door--r { transform: translateX(101%); }

/* Pozornica logotipa: ista veličina kao hero zupčanik, a --gx/--gy (iz JS-a)
   je pomaknu točno na njegovu poziciju -> na kraju se bešavno stope. */
.intro__stage {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: clamp(178px, 52vw, 280px); aspect-ratio: 1;
  transform: translate(-50%, -50%) translate(var(--gx, 0px), var(--gy, 0px));
  transition: opacity .38s ease;
}
/* Logo ostaje vidljiv DOK se vrata otvaraju; stopi se tek u primopredaji
   (rotacija gotova, hero zupčanik poravnat ispod njega). */
.intro.is-exiting .intro__stage { opacity: 0; }

.intro__gear { width: 100%; height: 100%; filter: drop-shadow(0 0 34px rgba(55,225,255,.3)); }
.intro__gear .gear-svg { width: 100%; height: 100%; }
/* Ulazak je razdvojen: ZUM je brz (logo odmah naraste), a ROTACIJA spora — pa se
   logo još uvijek vidljivo vrti kad vrata krenu. */
.intro.is-arming .intro__gear { animation: logoSpin 2.6s cubic-bezier(.34, .58, .24, 1) both; }
.intro.is-arming .intro__gear .gear-svg { animation: logoZoom 1.1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes logoSpin {
  from { transform: rotate(-230deg); }
  to   { transform: rotate(0deg); }
}
@keyframes logoZoom {
  0%   { opacity: 0; transform: scale(.14); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* Slogan visi ispod logotipa (unutar .intro__stage) pa se pomiče zajedno s njim */
.intro__slogan {
  position: absolute; top: calc(100% + 22px); left: 50%;
  width: max-content; max-width: min(90vw, 30ch);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1rem, 3.8vw, 1.6rem);
  text-transform: uppercase; letter-spacing: .14em; text-align: center;
  color: var(--cyan); text-shadow: 0 0 14px var(--glow-cyan);
  opacity: 0; transform: translateX(-50%) translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.intro__slogan.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Slogan MORA nestati prije nego se vrata otvore (i kad korisnik preskoči) */
.intro.is-opening .intro__slogan { opacity: 0; transition: opacity .22s ease; }
.intro__skip {
  position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); right: 18px; z-index: 4;
  font-family: var(--f-display); letter-spacing: .1em; text-transform: uppercase;
  font-size: .9rem; color: var(--muted);
  background: rgba(0,0,0,.35); border: 1px solid var(--line);
  padding: .45em .9em; border-radius: 999px;
}
/* (body je uvijek overflow:hidden — klasa .intro-active na body-ju služi
   JS-u kao zastavica "uvod traje" za blokiranje reveal gesti) */
/* Dok traje uvod, umjetnost hero zupčanika je SKRIVENA — uvodni logo je
   njegova pixel-poravnata kopija iznad. Pokazuje se tek u primopredaji
   (kad uvodna rotacija završi na točno 0°), pa se zamjena ne može vidjeti. */
body.intro-active #heroGear .gear__art { visibility: hidden; }

/* =============================================================
   GLAVNO
   ============================================================= */
.hero {
  position: relative; z-index: 1;
  height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  padding: max(10px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

/* Topbar */
.topbar { width: 100%; max-width: 560px; display: flex; justify-content: center; padding-top: 6px; }
.wordmark { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .12em; font-size: 1.05rem; display: flex; gap: .4em; align-items: baseline; opacity: .9; }
.wordmark__a { color: #2f8fe0; font-weight: 700; font-style: italic; }
.wordmark__b { color: #fff; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.5); }

/* ---------- 3D vrtuljak marki ---------- */
.brands { width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brands__stage { position: relative; width: 100%; height: clamp(132px, 21vh, 200px); }
.carousel3d {
  position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 46%;
  touch-action: pan-y; cursor: grab;   /* vodoravno = vrtnja, okomito = skrol stranice */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.carousel3d.is-grabbing { cursor: grabbing; }
/* Kartice ne hvataju dodir — cijeli vrtuljak je jedna površina za povlačenje */
.carousel3d__ring, .brand-card { pointer-events: none; }
.brand-logo, .brand-logo * { -webkit-user-drag: none; pointer-events: none; }
.carousel3d__ring { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; }

.brand-card {
  --w: var(--brand-card-w, 120px);
  position: absolute; top: 0; left: 0;
  width: var(--w); height: calc(var(--w) * .72);
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--w) * .72 / -2);
  /* preserve-3d: lice i poleđina su zasebne plohe u 3D kontekstu — bez toga
     backface-visibility djece ne radi (logo bi se vidio zrcaljen kroz leđa).
     Zato se i prigušenje radi preko --o na plohama, ne opacity na kartici
     (opacity < 1 bi prisilio flatten i opet pokvario poleđinu). */
  transform-style: preserve-3d;
  will-change: transform;
}
/* Poleđina kartice (vidi se kad je kartica okrenuta od gledatelja) —
   puna ploha kao na 3D vrtuljcima, umjesto da kartica jednostavno nestane. */
.brand-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(160deg, #17222e, #0d141d 70%);
  border: 1px solid rgba(150,170,190,.10);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  opacity: var(--o, 1);
}
.brand-card__inner {
  width: 100%; height: 100%; border-radius: 14px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel) 70%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
  backface-visibility: hidden;      /* logo se ne vidi zrcaljen kroz poleđinu */
  opacity: var(--o, 1);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.brand-logo { width: 54%; height: 54%; }
.brand-logo path { fill: #d7e0ea; transition: fill .3s ease; }
.brand-name {
  font-family: var(--f-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  transition: color .3s ease;
}
.brand-card.is-front .brand-card__inner {
  border-color: rgba(55,225,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 30px rgba(55,225,255,.22);
}
.brand-card.is-front .brand-logo { filter: drop-shadow(0 0 8px rgba(55,225,255,.5)); }
.brand-card.is-front .brand-logo path { fill: #fff; }
.brand-card.is-front .brand-name { color: var(--cyan-2); }

.brands__nav { display: flex; align-items: center; gap: 14px; }
.brands__arrow {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  background: rgba(14,21,30,.6); border: 1px solid var(--line); color: var(--steel-2);
  display: grid; place-items: center;
  transition: border-color .2s, color .2s;
}
.brands__arrow svg { display: block; width: 18px; height: 18px; }
.brands__arrow:hover { border-color: var(--cyan); color: var(--cyan); }
.brands__label {
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .12em;
  font-size: .9rem; color: var(--muted);
}

/* ---------- Središnji logo + otkrivanje kontakta (scroll/klik) ---------- */
/* --gw živi na .core (JS ovdje upisuje i --reveal, pa se invalidacija stila
   svake sličice ograniči na ovaj podstablo umjesto na cijeli dokument). */
.core {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 12px; width: 100%;
  --gw: clamp(178px, 52vw, 280px);
}
/* Visina reda je konstantna sama od sebe: panel (viši od zupčanika) ima
   stalnu visinu jer mu se animira samo ŠIRINA — pa reveal ne pomiče layout
   iznad/ispod reda. */
.reveal { display: flex; align-items: center; justify-content: center; width: 100%; }

.gear {
  position: relative; border: 0; background: none; padding: 0;
  flex: 0 0 auto; z-index: 2;
  /* Smanjenje ide kroz ŠIRINU (ne transform): tako se smanjuje i layout,
     pa red zupčanik+panel uvijek stane u ekran (bez vodoravnog preljeva). */
  width: calc(var(--gw) * (1 - var(--reveal, 0) * 0.24));
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.gear::before {
  content: ""; position: absolute; inset: -8%;
  background: radial-gradient(circle, rgba(55,225,255,.26), transparent 62%);
  opacity: calc(.4 + var(--reveal, 0) * .5); z-index: -1;
}
.gear__art, .gear-svg { width: 100%; height: 100%; }
/* Zupčanik MIRUJE na početku; rotira se prema napretku skrola (--reveal) */
.cog { transform-box: fill-box; transform-origin: 50% 50%; }
.gear .cog { transform: rotate(calc(var(--reveal, 0) * 330deg)); }
.emblem-shine { opacity: 0; }

/* Kontakt panel koji "izlazi" udesno iz zupčanika */
.reveal__info {
  flex: 0 0 auto; overflow: hidden;
  --info-w: min(58vw, 300px);
  width: calc(var(--reveal, 0) * var(--info-w));
  margin-left: calc(var(--reveal, 0) * -20px);
}
.reveal__info-inner {
  width: var(--info-w);
  opacity: var(--reveal, 0);
  /* Na niskim ekranima (landscape) panel se interno pomiče umjesto da bude
     odrezan — stranica se i dalje nikad ne skrola. */
  max-height: min(56svh, 470px);
  overflow-y: auto; scrollbar-width: none;
  touch-action: pan-y;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left;
  padding: 14px 14px 14px 26px;
  background: linear-gradient(180deg, rgba(16,24,34,.66), rgba(8,13,19,.5));
  border-left: 2px solid rgba(55,225,255,.55);
  border-radius: 0 14px 14px 0;
  box-shadow: inset 0 0 26px rgba(55,225,255,.08);
}
.reveal__info-inner::-webkit-scrollbar { display: none; }
.reveal__info-inner .brandmark { align-items: flex-start; }
.reveal__phone {
  display: inline-flex; align-items: center; gap: .3em;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 6.5vw, 2rem); letter-spacing: .03em;
}
.reveal__phone-icon { width: .7em; height: .7em; fill: var(--cyan); filter: drop-shadow(0 0 6px var(--glow-cyan)); }
.reveal__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.reveal__actions .btn { width: 100%; }

.gear__hint {
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .12em;
  font-size: .82rem; color: var(--cyan); padding: .3em .9em; border-radius: 999px;
  background: rgba(6,12,18,.7); border: 1px solid rgba(55,225,255,.35);
  box-shadow: 0 0 14px rgba(55,225,255,.22);
  opacity: calc(1 - var(--reveal, 0) * 2); /* nestaje čim krene otkrivanje */
  animation: hintPulse 2.4s ease-in-out infinite;
  pointer-events: none; white-space: nowrap;
}

/* ---------- Brandmark (logo natpis, kao pravi logo) ---------- */
.brandmark { display: inline-flex; flex-direction: column; align-items: center; line-height: .86; }
.brandmark__a {
  font-family: var(--f-display); font-style: italic; font-weight: 700;
  color: #2f8fe0; letter-spacing: .01em; font-size: 1.2rem;
  text-shadow: 0 0 12px rgba(47,143,224,.45); margin-bottom: .02em;
}
.brandmark__b {
  font-family: var(--f-display); font-weight: 800; color: #fff;
  font-size: 2.4rem; letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.brandmark__i {
  position: relative; font-style: normal; text-transform: none; color: var(--cyan);
  text-shadow: 0 0 10px var(--glow-cyan), 0 0 22px rgba(55,225,255,.5);
}
.brandmark__i::after {
  content: "✦"; position: absolute; top: -.34em; right: -.4em; font-size: .44em;
  color: var(--cyan-2); text-shadow: 0 0 8px var(--cyan);
  animation: sparkTwinkle 2.4s ease-in-out infinite;
}
.brandmark--lg .brandmark__a { font-size: clamp(1.1rem, 5vw, 1.5rem); }
.brandmark--lg .brandmark__b { font-size: clamp(2.2rem, 11vw, 3rem); }

/* ---------- Kontakt redovi (adresa / radno vrijeme / email — samo ako su uneseni) ---------- */
.contact-rows { list-style: none; padding: 0; margin: 2px 0; display: grid; gap: 8px; text-align: left; width: 100%; }
.contact-rows[hidden] { display: none; }
.contact-rows li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: .9rem; }
.contact-rows a { color: var(--text); }
.contact-rows svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--cyan); }

/* Neon "iskre" na broju */
.spark span {
  color: var(--cyan-2);
  text-shadow: 0 0 6px var(--cyan), 0 0 16px var(--glow-cyan), 0 0 2px #fff;
  animation: sparkGlow 3.4s infinite steps(1, end);
}

/* =============================================================
   Zupčanik za usluge (pulsira, dolje desno)
   ============================================================= */
.svc-toggle {
  position: fixed; z-index: 40;
  right: max(14px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0;
}
.svc-toggle__cog {
  width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
  color: var(--cyan);
  background: radial-gradient(circle at 40% 35%, #16202c, #0a0f16);
  border: 1px solid rgba(55,225,255,.45);
  box-shadow: 0 0 20px rgba(55,225,255,.3), inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
}
.svc-toggle__cog svg { width: 40px; height: 40px; animation: spin 9s linear infinite; }
.svc-toggle__cog::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(55,225,255,.5); animation: ringPulse 2.4s ease-out infinite;
}
.svc-toggle__label {
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; color: var(--cyan-2);
  background: rgba(6,12,18,.7); padding: .1em .6em; border-radius: 999px;
}
.svc-toggle[aria-expanded="true"] .svc-toggle__cog::after { display: none; }

/* =============================================================
   Panel usluga
   ============================================================= */
.services-backdrop {
  position: fixed; inset: 0; z-index: 70; background: rgba(3,6,10,.72);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.services-backdrop.is-open { opacity: 1; pointer-events: auto; }

.services {
  position: fixed; z-index: 71; left: 0; right: 0; bottom: 0;
  transform: translateY(102%); transition: transform .42s cubic-bezier(.2,.8,.22,1);
  padding: 0 10px calc(12px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}
.services.is-open { transform: translateY(0); }
.services__frame {
  position: relative; width: 100%; max-width: 560px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid rgba(55,225,255,.4); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 22px 18px 20px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.6), 0 0 30px rgba(55,225,255,.15) inset;
  max-height: 86svh; overflow-y: auto;
  scrollbar-width: none;             /* bez vidljivog scrollbara */
}
.services__frame::-webkit-scrollbar { display: none; }
.services__frame::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 4px; border-radius: 999px; background: rgba(150,170,190,.4);
}
.services__close {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 1.3rem; line-height: 1;
}
.services__title {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: 1.5rem; text-align: center; margin: 6px 0 16px; color: var(--steel-1);
}
.services__title::after {
  content: ""; display: block; width: 60px; height: 2px; margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}

.svc-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.svc-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(19,28,39,.9), rgba(11,17,25,.9));
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .12s ease, background .2s ease;
}
.svc-item:hover, .svc-item:focus { border-color: rgba(55,225,255,.5); transform: translateX(3px); outline: none; }
.svc-item__icon {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--cyan); border-radius: 12px;
  background: radial-gradient(circle at 40% 35%, rgba(31,102,184,.25), rgba(5,10,16,.6));
  border: 1px solid rgba(55,225,255,.3);
}
.svc-item__icon svg { width: 30px; height: 30px; }
.svc-item__text { display: flex; flex-direction: column; gap: 2px; }
.svc-item__title { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: .04em; color: var(--steel-1); text-transform: uppercase; }
.svc-item__desc { font-size: .86rem; color: var(--muted); line-height: 1.35; }
.services__cta { width: 100%; margin-top: 16px; }

.noscript { padding: 40px 20px; text-align: center; }

/* =============================================================
   Animacije
   ============================================================= */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
  0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); }
}
/* Samo blagi "poskok" — opacity kontrolira --reveal (hint nestaje pri otkrivanju) */
@keyframes hintPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes ringPulse {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes sparkTwinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: .45; transform: scale(.65) rotate(25deg); }
}
@keyframes shineSweep {
  0% { transform: translateX(-24px); }
  100% { transform: translateX(210px); }
}
/* Metalni odsjaj preleti preko loga tijekom uvoda */
.intro.is-arming .emblem-shine { opacity: 1; animation: shineSweep 1.5s ease-in-out .35s 2; }
@keyframes ledFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; text-shadow: 0 0 10px var(--glow-cyan), 0 0 20px rgba(55,225,255,.4); }
  20%, 24%, 55% { opacity: .35; text-shadow: none; }
  56% { opacity: .8; }
}
@keyframes sparkGlow {
  0%, 100% { text-shadow: 0 0 6px var(--cyan), 0 0 16px var(--glow-cyan), 0 0 2px #fff; }
  47% { text-shadow: 0 0 6px var(--cyan), 0 0 16px var(--glow-cyan), 0 0 2px #fff; }
  48% { text-shadow: 0 0 2px var(--cyan); opacity: .9; }
  49% { text-shadow: 0 0 18px #fff, 0 0 30px var(--cyan); opacity: 1; }
  50% { text-shadow: 0 0 6px var(--cyan); }
  92% { text-shadow: 0 0 6px var(--cyan), 0 0 16px var(--glow-cyan); }
  93% { text-shadow: 0 0 22px #fff, 0 0 34px var(--cyan-2); }
  94% { text-shadow: 0 0 6px var(--cyan), 0 0 16px var(--glow-cyan); }
}

/* =============================================================
   Responzivno
   ============================================================= */
@media (min-width: 700px) {
  .hero { gap: 20px; }
  .svc-list { grid-template-columns: 1fr 1fr; }
  .services__cta { grid-column: 1 / -1; }
  .services { padding-bottom: 24px; }
  .services__frame { border-radius: var(--r-lg); border-bottom: 1px solid rgba(55,225,255,.4); }
  .services { align-items: center; bottom: auto; top: 50%; transform: translateY(-46%) scale(.96); opacity: 0; pointer-events: none; }
  .services.is-open { transform: translateY(-50%) scale(1); opacity: 1; pointer-events: auto; }
}

/* Niži portret ekrani — dodatno smanji da sve stane bez skrola.
   VAŽNO: mijenja se --gw (ne width), a uvodni logo se dimenzionira JS-om
   prema stvarnoj veličini hero zupčanika — pa se uvijek poklapaju. */
@media (max-height: 780px) and (orientation: portrait) {
  .brands__stage { height: clamp(116px, 18vh, 168px); }
  .core { --gw: clamp(160px, 40vh, 250px); }
  .hero { gap: clamp(6px, 1.4vh, 14px); }
  .brand-name { font-size: .74rem; }
}

/* Kratki/landscape ekrani */
@media (max-height: 620px) and (orientation: landscape) {
  .core { --gw: clamp(150px, 32vh, 220px); }
  .brands__stage { height: clamp(120px, 34vh, 170px); }
}

/* Smanjeno gibanje */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .18s !important; }
  .gear { animation: none; }
  .gear .cog, .svc-toggle__cog svg { animation: none; }
  .svc-toggle__cog::after { display: none; }
  .neon-flicker, .spark span, .sign__phone span { animation: none; text-shadow: 0 0 10px var(--glow-cyan); }
}