/* =========================================================
   REDLINE ECU — stylesheet
   ========================================================= */

:root{
  --bg: #0a0c0e;
  --panel: #14171a;
  --panel-2: #1c2024;
  --text: #e9e7e2;
  --text-dim: #b8b8b8;
  --accent: #ff6a1f;   /* boost / tuning orange */
  --accent-2: #29d9c2; /* diagnostic cyan */
  --line: rgba(255,255,255,0.09);
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Film grain, generated inline — no extra request, no library.
     feColorMatrix desaturates it: coloured noise reads as a broken JPEG,
     monochrome noise reads as film. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Shared grain layer. Plain alpha rather than overlay/soft-light: against a
   near-black backdrop those blend modes resolve to almost no change. */
.hero::after,
.about::after,
.contact::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.16;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; text-wrap: balance; }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* Browser chrome carries the design too */
::selection{ background: var(--accent); color: var(--bg); }

/* Scrollbar. Chrome 121+ lets the standard `scrollbar-color` win over the
   ::-webkit-scrollbar pseudo-elements, so both paths must say the same thing
   or the WebKit rules silently become dead code. */
html{
  scrollbar-color: var(--accent-2) var(--bg);
}
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{
  background: var(--accent-2); border: 3px solid var(--bg); border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover{ background: #5ce8d6; }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--bg);
  padding: 10px 16px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.82rem;
  transition: top .2s ease;
}
.skip-link:focus{ top: 12px; }

/* ---------- ENTRY ---------- */
/* No loading screen: the page paints immediately and the hero copy settles in
   under 400ms. Guarded by .js so a blocked script never leaves it hidden. */
.js .nav,
.js .hero-text > *,
.js .notfound-text > *,
.js .scroll-hint{
  opacity: 0;
}
.js .hero-text > *,
.js .notfound-text > *{ transform: translateY(14px); }

.hero.is-entered .hero-text > *,
.notfound.is-entered .notfound-text > *,
.scroll-hint.is-entered{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .455s ease-out, transform .455s cubic-bezier(.16,1,.3,1);
}
/* The nav fades only — it must NEVER get a transform. Any transform (even an
   identity translateY(0)) turns .nav into the containing block for its
   position:fixed descendants, which collapses the full-screen mobile drawer
   into the 84px header box and lets the page show through it. */
.nav.is-entered{
  opacity: 1;
  transition: opacity .455s ease-out;
}
/* Staggered so the eye reads headline → copy → actions in that order.
   Last item lands at 195 + 455 = 650ms. */
.hero.is-entered .hero-text > *:nth-child(1),
.notfound.is-entered .notfound-text > *:nth-child(1){ transition-delay: 0ms; }
.hero.is-entered .hero-text > *:nth-child(2),
.notfound.is-entered .notfound-text > *:nth-child(2){ transition-delay: 65ms; }
.hero.is-entered .hero-text > *:nth-child(3),
.notfound.is-entered .notfound-text > *:nth-child(3){ transition-delay: 130ms; }
.scroll-hint.is-entered,
.notfound.is-entered .notfound-text > *:nth-child(4){ transition-delay: 195ms; }

@media (prefers-reduced-motion: reduce){
  .js .nav,
  .js .hero-text > *,
  .js .notfound-text > *,
  .js .scroll-hint{ opacity: 1; transform: none; }
  .hero.is-entered .hero-text > *,
  .notfound.is-entered .notfound-text > *,
  .nav.is-entered,
  .scroll-hint.is-entered{ transition: none; transition-delay: 0s; }
}

/* ---------- NAV ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 64px);
  transition: background .25s ease, backdrop-filter .25s ease;
}
.nav.is-scrolled{
  background: rgba(10,12,14,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo{ display:flex; align-items:center; }
.logo img{ height: 26px; width: auto; display:block; }
.nav-links{ display:flex; gap: 32px; align-items:center; }
.nav-links a{
  font-size: 0.88rem; color: var(--text-dim);
  transition: color .2s ease;
}
.nav-links a:hover{ color: var(--text); }
/* `a.nav-cta` (not `.nav-cta`) so it outranks `.nav-links a`, which would
   otherwise replace this transition list with its own colour-only one. */
a.nav-cta{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 9px 18px;
  border-radius: 2px;
  letter-spacing: 0.05em;
  transition: background .2s ease, color .2s ease, transform .16s cubic-bezier(.23,1,.32,1);
}
a.nav-cta:hover{ background: var(--accent); color: var(--bg); }
a.nav-cta:active{ transform: scale(0.97); }

.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap: 5px; width: 44px; height: 44px; padding:0;
  background:transparent; border:0; cursor:pointer; z-index:110;
}
.nav-toggle-bar{
  display:block; width: 22px; height: 2px; background: var(--text);
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px){
  .nav-toggle{ display:flex; }

  .nav-links{
    position:fixed; inset:0;
    background: rgba(10,12,14,0.98);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    flex-direction:column; align-items:stretch; justify-content:center;
    gap: 4px; padding: 32px clamp(24px, 10vw, 56px);
    opacity:0; visibility:hidden; transform: translateY(-10px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility .25s;
  }
  .nav-links.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav-links a{
    font-family: var(--font-display); font-size: 1.5rem; font-weight:500;
    color: var(--text); padding: 14px 2px; border-bottom: 1px solid var(--line);
  }
  .nav-links a.nav-cta{
    font-family: var(--font-mono); font-size: 0.95rem;
    margin-top: 20px; text-align:center; border: 1px solid var(--accent); border-radius:2px;
    padding: 16px 18px;
  }
  body.nav-open{ overflow:hidden; }
}

@media (prefers-reduced-motion: reduce){
  .nav-links{ transition: opacity .15s ease, visibility .15s; }
  .nav-toggle-bar{ transition: opacity .15s ease; }
}

/* ---------- HERO ---------- */
.hero{
  position: relative; min-height: 92vh; overflow: hidden;
  display:flex; align-items:center;
  background: var(--bg);
}
/* The art lives on its own layer so scroll parallax can move it without
   dragging the copy along. Oversized by --parallax so the drift never
   uncovers an edge; the scrim rides with it (it is near-horizontal, so
   vertical travel does not shift where the copy is protected). */
.hero-bg{
  --parallax: 0.17;
  position:absolute; left:0; right:0;
  top: calc(var(--parallax) * -100% - 2px);
  height: calc(100% + var(--parallax) * 100% + 4px);
  z-index: 0;
  background-image:
    linear-gradient(100deg, rgba(10,12,14,0.97) 0%, rgba(10,12,14,0.86) 34%, rgba(10,12,14,0.45) 62%, rgba(10,12,14,0.72) 100%),
    url("assets/img/hero-taillight-flipped.jpg");
  background-size: cover;
  background-position: 62% center;
  background-repeat: no-repeat;
  will-change: transform;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse 95% 185% at 0% 0%, rgba(255,106,31,0.28), transparent 60%);
}
/* Hero grain sits above the glow but below the text (content is z-index 2). */
.hero::after{ z-index: 1; }
@media (max-width: 860px){
  .hero-bg{
    background-image:
      linear-gradient(180deg, rgba(10,12,14,0.68) 0%, rgba(10,12,14,0.66) 32%, rgba(10,12,14,0.94) 62%, rgba(10,12,14,0.97) 100%),
      url("assets/img/hero-taillight-flipped.jpg");
    background-position: 70% center;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg{ transform: none !important; }
}

.grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  opacity: 0.4;
}

.road-line{
  position:absolute; left:0; right:0; bottom:14%;
  height:1px; background: var(--line);
}

.hero-inner{
  position: relative; z-index: 2; width: 100%;
  padding: 150px clamp(20px, 6vw, 80px) 130px;
}

.hero-text{ max-width: 620px; }
.hero-text .eyebrow{ display:block; margin-bottom: 14px; }
.hero-text h1{ font-size: clamp(2.1rem, 5.3vw, 4.2rem); line-height: 1.06; }
.hero-text p{ color: var(--text-dim); margin: 18px 0 30px; max-width: 44ch; line-height: 1.6; }
.hero-cta-row{ display:flex; flex-wrap: wrap; gap: 16px; align-items:center; }
.hero-cta-row .btn-ghost{
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-dim);
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
  display: inline-block; position: relative;
  transition: color .2s ease, border-color .2s ease, transform .16s ease-out;
}
/* Expand the tap target to 44px without moving the underline off the text. */
.hero-cta-row .btn-ghost::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height: 44px; transform: translateY(-50%);
}
.hero-cta-row .btn-ghost:hover{ color: var(--text); border-color: var(--text-dim); }
.hero-cta-row .btn-ghost:active{ transform: scale(0.97); }

.scroll-hint{
  position:absolute; left: clamp(20px,6vw,80px); bottom: 6%; z-index:2;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim);
  display:flex; align-items:center; gap:10px;
}
.scroll-hint .bar{ width:1px; height:34px; background: var(--line); position:relative; overflow:hidden; }
.scroll-hint .bar::after{
  content:''; position:absolute; top:0; left:0; width:100%; height:30%;
  background: var(--accent); animation: scrolldown 1.6s ease-in-out infinite;
}
@keyframes scrolldown{ 0%{ top:-30%; } 100%{ top:100%; } }

/* ---------- SECTION HEAD (shared) ---------- */
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; }
.section-head p{ color: var(--text-dim); margin-top: 14px; line-height: 1.6; }

/* ---------- SERVICES ---------- */
.services{
  padding: 120px clamp(20px, 6vw, 80px) 100px;
  position: relative; z-index: 2; background: var(--bg);
}
.cards{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  grid-template-areas:
    "feature feature ecu ecu"
    "feature feature kodiranje retrofit"
    "provera softverska softverska softverska";
}
.card--feature{ grid-area: feature; }
.card--ecu{ grid-area: ecu; }
.card--kodiranje{ grid-area: kodiranje; }
.card--retrofit{ grid-area: retrofit; }
.card--provera{ grid-area: provera; }
.card--softverska{ grid-area: softverska; }

@media (max-width: 900px){
  .cards{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "feature feature"
      "ecu ecu"
      "kodiranje retrofit"
      "provera provera"
      "softverska softverska";
  }
}
@media (max-width: 620px){
  .cards{
    grid-template-columns: 1fr;
    grid-template-areas:
      "feature" "ecu" "kodiranje" "retrofit" "provera" "softverska";
  }
}

.card{
  background: var(--panel); padding: 36px 32px; border: 1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
}
.service-icon{
  width: 28px; height: 28px; flex-shrink:0;
  background-color: var(--accent-2);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  opacity: 0.9;
}
.service-icon--chiptuning{ -webkit-mask-image:url("assets/img/ikonica-chiptuning-usluga.png"); mask-image:url("assets/img/ikonica-chiptuning-usluga.png"); }
.service-icon--dijagnostika{ -webkit-mask-image:url("assets/img/ikonica-ecu-dijagnostika-usluga.png"); mask-image:url("assets/img/ikonica-ecu-dijagnostika-usluga.png"); }
.service-icon--kodiranje{ -webkit-mask-image:url("assets/img/ikonica-kodiranje-azuriranje-mapa.png"); mask-image:url("assets/img/ikonica-kodiranje-azuriranje-mapa.png"); }
.service-icon--retrofit{ -webkit-mask-image:url("assets/img/ikonica-retrofit-usluga.png"); mask-image:url("assets/img/ikonica-retrofit-usluga.png"); }
.service-icon--provera{ -webkit-mask-image:url("assets/img/ikonica-provera-vozila-pre-kupovine.png"); mask-image:url("assets/img/ikonica-provera-vozila-pre-kupovine.png"); }
.service-icon--softverska{ -webkit-mask-image:url("assets/img/ikonica-softverska-resenja-dpf-egr.png"); mask-image:url("assets/img/ikonica-softverska-resenja-dpf-egr.png"); }
.card h3{ font-size: 1.25rem; }
.card p{ color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; }
.card ul{ list-style:none; margin-top: 6px; display:flex; flex-direction:column; gap:8px; }
.card ul li{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); padding-left: 14px; position:relative; }
.card ul li::before{ content:'—'; position:absolute; left:0; color: var(--accent); }
.card ul li strong{ color: var(--text); font-weight: 600; }

/* Feature tile: photo-led, spans the top-left 2x2 of the bento grid */
.card--feature{
  position: relative; overflow: hidden; padding: 0;
  min-height: 460px;
}
.card--feature .card-photo{ position:absolute; inset:0; z-index:0; }
.card--feature .card-photo img{
  width:100%; height:100%; object-fit:cover;
  object-position: 70% 42%;
  opacity: 0.8;
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}
.card--feature:hover .card-photo img{ transform: scale(1.05); }
.card--feature::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,12,14,0.1) 20%, rgba(10,12,14,0.94) 92%);
}
.card--feature .card-body{
  position:relative; z-index:2; display:flex; flex-direction:column; gap:14px;
  padding: 36px; margin-top:auto;
}
.card--feature .service-icon{ background-color: var(--accent); }
.card--feature h3{ font-size: 1.7rem; }

/* Softverska: wide bottom tile, bullets laid out as a 2x2 grid to use the width */
.card ul.card-list-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
}
@media (max-width: 480px){ .card ul.card-list-grid{ grid-template-columns: 1fr; } }

/* ---------- SHOWCASE (photo triptych) ---------- */
.showcase{ display:flex; height: 420px; }
.showcase-panel{
  position:relative; flex:1; overflow:hidden;
  display:flex; align-items:flex-end; padding: 26px;
}
.showcase-img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}
.showcase-panel:hover .showcase-img{ transform: scale(1.05); }
.showcase-img--startstop{ object-position: 37% 44%; }
.showcase-panel::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,12,14,0.05) 35%, rgba(10,12,14,0.88) 100%);
}
.showcase-caption{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap: 12px;
}
.showcase-label{
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text);
  border-left: 2px solid var(--accent); padding-left: 10px;
}

/* One panel of the three carries a claim; the badge alone marks it. */
.showcase-tag{
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(255,106,31,0.35); background: rgba(255,106,31,0.10);
  padding: 5px 10px; border-radius: 2px;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}

@media (max-width: 760px){
  .showcase{ flex-direction:column; height:auto; }
  .showcase-panel{ height: 220px; }
}

/* ---------- CODING EXAMPLE (Audi A6 full paket) ---------- */
.coding-example{
  padding: 100px clamp(20px, 6vw, 80px);
  background: var(--bg);
}
.coding-grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px); align-items:stretch;
}
@media (max-width: 900px){ .coding-grid{ grid-template-columns: 1fr; align-items:start; } }
/* Stretches to the list's height so the row reads as one block rather than a
   short photo with a hole under it. */
.coding-photo{
  border: 1px solid var(--line); border-radius: 2px; overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,106,31,0.06), 0 22px 48px -26px rgba(255,106,31,0.45);
  min-height: 260px;
}
.coding-photo img{
  width:100%; height:100%; display:block;
  object-fit: cover; object-position: center 38%;
}

/* Placed AFTER the base rule on purpose — same specificity, so it must come
   later to win. min-height has to go: with aspect-ratio the box derives its
   WIDTH from the height (260 x 16/9 = 462px) and overflows narrow screens.
   body has overflow-x:hidden so it is clipped, but it still widens the
   document — which is what produced the dead band beside the page on phones. */
@media (max-width: 900px){
  .coding-photo{ aspect-ratio: 16 / 9; min-height: 0; width: 100%; }
}

.coding-list{ list-style:none; display:grid; gap: 12px; }
.coding-list li{
  position:relative; padding-left: 26px;
  font-size: 0.95rem; line-height: 1.5; color: var(--text);
}
/* Drawn tick, not a Unicode glyph — keeps one icon language across the page. */
.coding-list li::before{
  content:''; position:absolute; left:0; top:0.42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.coding-note{
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--text-dim); font-size: 0.82rem; line-height: 1.6; max-width: 52ch;
}
.coding-cta{ margin-top: 22px; }

/* ---------- ABOUT (O nama) ---------- */
.about{
  position: relative; overflow: hidden;
  padding: 120px clamp(20px, 6vw, 80px); background: var(--panel);
  border-top: 1px solid var(--line);
}
/* Same accent wash as the contact section, mirrored to enter from the right. */
.about::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 100% 35%, rgba(255,106,31,0.07), transparent 55%);
}
.about-grid{
  position: relative; z-index: 1;
  display:grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items:start;
}
@media (max-width: 860px){ .about-grid{ grid-template-columns: 1fr; gap: 28px; } }
.about-text h2{
  font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15;
}
.about-body{ display:flex; flex-direction:column; gap: 20px; max-width: 60ch; }
.about-body p{ color: var(--text-dim); line-height: 1.75; font-size: 1rem; }

/* ---------- STAGE EXAMPLE (static Stage 1 sample, between O nama and Naši radovi) ---------- */
.stage-example{
  padding: 72px clamp(20px, 6vw, 80px);
  background: var(--panel);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* Wide screens: pair the heading with the card instead of leaving half the
   row empty next to a 720px box. */
@media (min-width: 1040px){
  .stage-example{
    display:grid; grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 72px); align-items:center;
  }
  .stage-example .section-head{ margin-bottom: 0; }
  .stage-example .spec-box{ max-width: none; }
}
.stage-example-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 16px;
  margin-bottom: 28px;
}
.stage-example-model{ font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.stage-example-model span{
  display:block; font-family: var(--font-mono); font-weight: 400;
  font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 6px;
}
.stage-example .spec-box{
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.stage-example.is-revealed .spec-box{ opacity: 1; transform: translateY(0); }
.stage-example.is-revealed .spec-bar-fill{ transform: scaleX(var(--target)); }
@media (prefers-reduced-motion: reduce){
  .stage-example .spec-box{ transition: none; opacity: 1; transform: none; }
}

/* ---------- STATEMENT (brand divider, sits right after Usluge) ---------- */
.statement{
  position: relative; overflow: hidden;
  padding: 48px clamp(20px, 6vw, 80px);
  background: var(--panel);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.statement .grid-bg{ opacity: 0.25; }
.statement::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 50% 120% at 100% 50%, rgba(255,106,31,0.16), transparent 70%);
}
.statement-inner{ position:relative; z-index:1; max-width: 880px; }
.statement-text{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.3;
  letter-spacing: 0.005em;
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.statement.is-revealed .statement-text{ opacity: 1; transform: translateY(0); }
@media (max-width: 640px){
  .statement{ padding: 40px clamp(20px, 6vw, 80px); }
}
@media (prefers-reduced-motion: reduce){
  .statement-text{ transition: none; opacity: 1; transform: none; }
}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow: hidden; position: relative;
  padding: 30px 0; background: var(--bg);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track{
  display:flex; width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track:hover{ animation-play-state: paused; }
.marquee-group{ display:flex; align-items:center; flex-shrink:0; }
.marquee-item{
  font-family: var(--font-display); font-weight:600; font-size: 1.15rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
  white-space: nowrap; padding: 0 16px;
  transition: color .2s ease;
}
.marquee-item:hover{ color: var(--text); }
.marquee-sep{
  display:inline-block; width: 6px; height: 6px;
  border: 1px solid var(--accent); background: transparent;
  opacity: 0.7; vertical-align: middle; flex-shrink: 0;
  margin: 0 6px;
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-25%); }
}

/* ---------- PROJECTS (Naši radovi) ---------- */
.projects{ padding: 100px clamp(20px, 6vw, 80px) 100px; background: var(--panel); }
.accent-text{ color: var(--accent); }
.nowrap{ white-space: nowrap; }
.projects-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 1000px){ .projects-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .projects-grid{ grid-template-columns: 1fr; } }
.project-card{
  background: var(--bg); border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; display:flex; flex-direction:column;
  box-shadow: 0 0 0 1px rgba(255,106,31,0.06), 0 18px 36px -22px rgba(255,106,31,0.45);
  transition: box-shadow .3s cubic-bezier(.23,1,.32,1), border-color .3s cubic-bezier(.23,1,.32,1);
}
/* These cards are not links — the hover reads as "alive", not "clickable",
   so the border stays neutral instead of turning into the CTA accent. */
.project-card:hover{
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 1px rgba(255,106,31,0.10), 0 22px 44px -18px rgba(255,106,31,0.55);
}
.project-img{ aspect-ratio: 4 / 3; overflow:hidden; }
.project-img img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}
.project-card:hover .project-img img{ transform: scale(1.05); }
.project-body{ padding: 26px 26px 30px; display:flex; flex-direction:column; gap: 10px; flex: 1; }
.project-tag{
  align-self:flex-start;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(255,106,31,0.35); background: rgba(255,106,31,0.08);
  padding: 5px 10px; border-radius: 2px;
}
.project-body h3{ font-size: 1.1rem; line-height:1.3; }
/* Dot marker, matching the accent dot used elsewhere in this section. */
.project-list{ list-style:none; display:flex; flex-direction:column; gap: 7px; }
.project-list li{
  font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.45;
  color: var(--text-dim); padding-left: 14px; position:relative;
}
.project-list li::before{
  content:'●'; position:absolute; left:1px; top:0.72em;
  transform: translateY(-50%);
  color: var(--accent); font-size: 0.55rem; line-height:1;
}
.project-body p{ color: var(--text-dim); font-size: 0.92rem; line-height:1.6; }

/* ---------- TOOLS STRIP ---------- */
.tools-strip{
  display:flex; align-items:center; flex-wrap: wrap; gap: 24px;
  padding: 30px clamp(20px, 6vw, 80px);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.tools-label{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim); margin-right: 4px;
}
.tool-logo{
  height: 34px; width: auto; opacity: 0.8; filter: grayscale(0.15);
  transition: opacity .2s ease;
}
/* Optical sizing, not mechanical: "AUTEL" fills its whole artwork height,
   while "MAGIC" is only the top 69% of a two-line lockup. Matching the box
   heights would make Magic read ~1.45x smaller, so the heights differ to
   make the two wordmarks look the same size. */
.tool-logo--autel{ height: 26px; }
.tool-logo--magic{ height: 38px; }
.tool-logo:hover{ opacity: 1; }

/* ---------- FAQ ---------- */
.faq{ padding: 120px clamp(20px, 6vw, 80px); background: var(--bg); }
.faq-list{ max-width: 800px; }
.faq-item{
  border-top: 1px solid var(--line);
}
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  cursor: pointer; list-style: none;
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding: 22px 4px;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color: var(--accent); }
.faq-item summary .plus{
  font-family: var(--font-mono); color: var(--accent);
  font-size: 1.1rem; flex-shrink:0; transition: transform .2s ease;
}
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item .faq-answer{
  color: var(--text-dim); font-size: 0.94rem; line-height: 1.65;
  padding: 0 4px 24px; max-width: 62ch;
}

/* ---------- CONTACT ---------- */
.contact{
  padding: 120px clamp(20px, 6vw, 80px);
  position: relative; overflow:hidden; background: var(--panel);
}
.contact::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 15% 0%, rgba(255,106,31,0.10), transparent 55%);
}
.contact-grid{
  position:relative; z-index: 1;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px;
}
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; gap: 48px; } }

.contact-map{
  position:relative; height: 160px;
  border: 1px solid var(--line); border-radius: 2px;
  overflow:hidden; background: var(--panel-2);
  box-shadow: 0 0 0 1px rgba(41,217,194,0.08), 0 0 28px rgba(41,217,194,0.18);
}
.contact-map iframe{
  display:block; width:100%; height:100%; border:0;
  filter: invert(92%) hue-rotate(180deg) contrast(90%) brightness(95%);
}

.contact-main h2{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; }
.contact-main p{ color: var(--text-dim); margin: 18px 0 30px; line-height:1.6; max-width: 46ch; }

.btn-primary{
  display:inline-block; background: var(--accent); color: var(--bg);
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em;
  padding: 15px 30px; border-radius: 2px;
  transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s cubic-bezier(.23,1,.32,1);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,106,31,0.25); }
.btn-primary:active{ transform: translateY(-1px) scale(0.97); box-shadow: 0 4px 14px rgba(255,106,31,0.25); }

/* The row shrinks to its widest child, then both stretch to it — so the two
   buttons stay equal width whatever the labels say, with no hardcoded value. */
.contact-cta-row{
  display:flex; flex-direction:column; align-items:stretch;
  width: fit-content; gap: 14px;
}
.contact-cta-row .btn-primary{ text-align:center; }
/* In the CTA stack the row's gap handles the spacing. */
.contact-cta-row .contact-wa{ margin-top: 0; justify-content:center; }

.contact-details{
  display:flex; flex-direction:column; gap: 26px;
}
.contact-detail{ border-top: 1px solid var(--line); padding-top: 18px; }
.contact-detail .label{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-2); display:block; margin-bottom: 8px;
}
.contact-detail .value{ font-size: 1rem; line-height: 1.5; }
.contact-detail .value a{ position: relative; transition: color .2s ease; }
/* Phone and e-mail are the primary mobile actions — give them a real tap target. */
.contact-detail .value a::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height: 44px; transform: translateY(-50%);
}
.contact-detail .value a:hover{ color: var(--accent); }

/* WhatsApp action, sized as a secondary control under the phone number. */
.contact-wa{
  display:inline-flex; align-items:center; gap: 8px;
  margin-top: 12px; padding: 0 16px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em;
  color: var(--text);
  transition: border-color .2s ease, color .2s ease, background .2s ease,
              transform .16s cubic-bezier(.23,1,.32,1);
}
.contact-wa-icon{
  width: 15px; height: 15px; flex-shrink: 0;
  fill: currentColor;
}
.contact-wa:hover{
  border-color: rgba(37,211,102,0.55);
  background: rgba(37,211,102,0.08);
  color: #4ee287;
}
.contact-wa:active{ transform: scale(0.97); }

footer{
  border-top: 1px solid var(--line);
  padding: 32px clamp(20px, 6vw, 80px);
  display:flex; flex-wrap:wrap; gap: 16px; justify-content:space-between; align-items:center;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim);
  background: var(--bg);
}
footer a:hover{ color: var(--text); }

/* ---------- STAGE CARD (shared shell + stat bars) ---------- */
.spec-box{
  background: var(--bg); border: 1px solid var(--line); border-radius: 2px;
  padding: clamp(24px, 4vw, 48px); max-width: 720px;
  box-shadow: 0 0 0 1px rgba(255,106,31,0.08), 0 24px 60px -20px rgba(255,106,31,0.4);
}
.spec-stage-tag{
  display:inline-block; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; color: var(--accent);
  border: 1px solid rgba(255,106,31,0.35); background: rgba(255,106,31,0.08);
  padding: 5px 10px; border-radius: 2px; margin-bottom: 24px;
}
.spec-stat{ margin-bottom: 30px; }
.spec-stat-head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 14px;
}
.spec-stat-head > span:first-child{ font-family: var(--font-display); font-size: 1.05rem; }
.spec-stat-diff{
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent-2);
}
.spec-bar-row{
  display:grid; grid-template-columns: 62px 1fr 90px; align-items:center; gap: 12px;
  margin-bottom: 8px;
}
/* Narrow screens: give the bar itself the width instead of the label gutters. */
@media (max-width: 560px){
  .spec-bar-row{ grid-template-columns: 54px 1fr 46px; gap: 10px; }
  .spec-bar-value{ font-size: 0.8rem; }
}
.spec-bar-label{
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--text-dim);
}
.spec-bar-label--accent{ color: var(--accent); }
.spec-bar-track{
  position: relative; height: 10px; background: var(--panel-2);
  border-radius: 5px; overflow: hidden;
}
.spec-bar-fill{
  position:absolute; left:0; top:0; bottom:0; width: 100%;
  border-radius: 5px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
/* Not text: this bar borrows the dim colour but must stay clearly weaker than
   the accent bar next to it, so its alpha is tuned separately from the token. */
.spec-bar-fill--stock{ background: var(--text-dim); opacity: 0.42; }
.spec-bar-fill--tuned{ background: linear-gradient(90deg, var(--accent), #ff8a4d); }
.spec-bar-value{
  font-family: var(--font-mono); font-size: 0.85rem; text-align: right;
}
.spec-disclaimer{
  color: var(--text-dim); font-size: 0.8rem; line-height: 1.6;
  margin: 6px 0 24px; max-width: 56ch;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .scroll-hint .bar::after{ animation: none; }
  .marquee-track{ animation: none; }
  .spec-bar-fill{ transition: none; }
}

/* ---------- 404 ---------- */
/* Sticky footer: the 404 is short, so without this the footer floats mid-screen. */
body.is-404{ min-height: 100dvh; display:flex; flex-direction:column; }
body.is-404 main{ flex: 1; display:flex; }
.notfound{
  position: relative; flex: 1;
  display:flex; align-items:center;
  background: var(--bg); overflow: hidden;
}
.notfound::before{
  content:''; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at 78% 12%, rgba(255,106,31,0.10), transparent 58%);
}
.notfound::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image: var(--grain); background-size: 180px 180px; opacity: 0.16;
}
.notfound-inner{
  position:relative; z-index:2; width:100%;
  padding: 140px clamp(20px, 6vw, 80px) 110px;
}
.notfound-text{ max-width: 620px; }
.notfound-text .eyebrow{ display:block; margin-bottom: 14px; }
.notfound-text h1{ font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; }
.notfound-text p{ color: var(--text-dim); margin: 18px 0 30px; max-width: 46ch; line-height: 1.6; }
.notfound-links{
  display:flex; flex-wrap:wrap; gap: 8px 26px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
}
.notfound-links a{
  position: relative;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim);
  transition: color .2s ease;
}
.notfound-links a:hover{ color: var(--accent); }
/* Expand the tap target to 44px without shifting the text. */
.notfound-links a::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height: 44px; transform: translateY(-50%);
}