/* ==========================================================================
   CREO-HN INŽENJERING — style.css
   Mobile-first · statični sajt · bez build sistema
   ========================================================================== */

:root {
  /* Boje iz logoa */
  --ink: #0A0816;
  --ink-2: #110E24;
  --ink-3: #19153A;
  --indigo: #382060;
  --indigo-2: #4B3A9A;
  --blue: #6F86DA;
  --sky: #98C0F0;
  --sky-2: #C9DCF7;
  --steel: #C3CAD8;
  --steel-2: #8C93A8;
  --paper: #EEF1F8;
  --paper-2: #E2E7F2;
  --white: #FFFFFF;

  --text: #E8ECF6;
  --text-dim: #A2A9C2;
  --text-mute: #6F7591;
  --line: rgba(152, 192, 240, 0.14);
  --line-2: rgba(152, 192, 240, 0.28);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: 20px;
  --maxw: 1320px;
  --radius: 14px;
  --radius-sm: 8px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --fab: 56px;
  --fab-gap: 18px;
}

@media (min-width: 768px) { :root { --gutter: 36px; --header-h: 78px; --fab-gap: 26px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--sky); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 1000; background: var(--sky); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: 96px 0; }
@media (min-width: 1024px) { .section { padding: 140px 0; } }
.section--paper { background: var(--paper); color: #17142C; }
.section--paper .eyebrow { color: var(--indigo-2); }
.section--paper .lead { color: #4A4E66; }
.section--deep { background: var(--ink-2); }

/* Blueprint mreža */
.grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
  opacity: .55;
}
.section--paper .grid-bg { background-image: linear-gradient(rgba(56,32,96,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(56,32,96,.08) 1px, transparent 1px); opacity: 1; }
.section > .container { position: relative; z-index: 1; }

/* Grain */
.grain { position: fixed; inset: -50%; z-index: 900; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- Tipografija ---------- */
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow .idx { opacity: .55; }
.h-display { font-size: clamp(44px, min(10.5vw, 13vh), 116px); line-height: .92; font-weight: 800; letter-spacing: -.035em; font-variation-settings: "wdth" 88; }
.h1 { font-size: clamp(38px, 7.4vw, 96px); line-height: .96; font-weight: 800; letter-spacing: -.03em; font-variation-settings: "wdth" 90; }
.h2 { font-size: clamp(32px, 5.4vw, 68px); line-height: 1; font-weight: 750; letter-spacing: -.028em; font-variation-settings: "wdth" 92; }
.h3 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--text-dim); max-width: 60ch; }
.mono { font-family: var(--font-mono); }
.accent { color: var(--sky); }
.steel-text { background: linear-gradient(100deg, #8C93A8 0%, #FFFFFF 30%, #9DB0D8 52%, #FFFFFF 70%, #8C93A8 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s linear infinite; }
@keyframes sheen { to { background-position: -220% 0; } }
.outline-text { -webkit-text-stroke: 1.2px var(--sky); color: transparent; }

.sec-head { display: grid; gap: 22px; margin-bottom: 56px; }
@media (min-width: 1024px) { .sec-head { grid-template-columns: 1.1fr 1fr; align-items: end; margin-bottom: 80px; } .sec-head .lead { justify-self: end; } }

/* ---------- Dugmad ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 650; font-size: 15px; letter-spacing: .01em; overflow: hidden; isolation: isolate; transition: color .4s var(--ease), border-color .4s, transform .3s var(--ease); white-space: nowrap; }
.btn .btn__arrow { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px) rotate(-45deg); }
.btn--primary { background: var(--sky); color: var(--ink); }
.btn--primary::before { content: ""; position: absolute; inset: 0; background: var(--white); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; border-radius: inherit; }
.btn--primary:hover::before { transform: translateY(0); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--text); }
.btn--ghost::before { content: ""; position: absolute; inset: 0; background: var(--sky); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); z-index: -1; }
.btn--ghost:hover { color: var(--ink); border-color: var(--sky); }
.btn--ghost:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark::before { content: ""; position: absolute; inset: 0; background: var(--indigo-2); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.btn--dark:hover::before { transform: translateY(0); }
.link-u { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(.25); transform-origin: left; transition: transform .5s var(--ease); }
.link-u:hover::after { transform: scaleX(1); }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader { position: fixed; inset: 0; z-index: 2000; background: var(--ink); display: grid; place-items: center; transition: clip-path 1s var(--ease-io), visibility 0s 1s; clip-path: inset(0 0 0 0); }
.preloader.is-done { clip-path: inset(0 0 100% 0); visibility: hidden; }
.preloader__inner { width: min(340px, 78vw); display: grid; gap: 28px; }
.preloader__logo { width: 100%; }
.preloader__logo .pl-band { transform-origin: center; transform: scaleX(0); animation: plBand 1s .15s var(--ease) forwards; }
.preloader__logo .pl-pill { stroke-dasharray: 760; stroke-dashoffset: 760; fill-opacity: 0; animation: plDraw 1.2s .5s var(--ease) forwards, plFill .6s 1.3s forwards; }
.preloader__logo .pl-word { opacity: 0; animation: plFade .6s 1.25s forwards; }
.preloader__logo .pl-sub { opacity: 0; letter-spacing: 16px; animation: plSub .9s 1.35s var(--ease) forwards; }
@keyframes plBand { to { transform: scaleX(1); } }
@keyframes plDraw { to { stroke-dashoffset: 0; } }
@keyframes plFill { to { fill-opacity: 1; } }
@keyframes plFade { to { opacity: 1; } }
@keyframes plSub { to { opacity: 1; letter-spacing: 7px; } }
.preloader__meter { display: grid; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: .1em; }
.preloader__bar { position: relative; height: 1px; background: var(--line-2); }
.preloader__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--sky); box-shadow: 0 0 12px var(--sky); }
.preloader__ticks { display: flex; justify-content: space-between; }
.preloader__ticks i { width: 1px; height: 6px; background: var(--line-2); }
.preloader__ticks i:nth-child(5n+1) { height: 10px; background: var(--steel-2); }
.preloader__row { display: flex; justify-content: space-between; }
.preloader__count { color: var(--sky); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--header-h); transition: transform .5s var(--ease), background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.header.is-scrolled { background: rgba(10, 8, 22, .72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: var(--line); }
.header.is-hidden { transform: translateY(-100%); }
.header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand svg { width: 132px; height: auto; }
@media (min-width: 768px) { .brand svg { width: 150px; } }
.brand .logo-sub { fill: var(--text); }
.nav { display: none; }
.nav__list { display: flex; gap: 6px; }
.nav__link { position: relative; padding: 10px 14px; font-size: 14.5px; font-weight: 550; color: var(--text-dim); transition: color .3s; border-radius: 999px; }
.nav__link:hover, .nav__link.is-active { color: var(--text); }
.nav__link.is-active::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sky); }
.header__actions { display: flex; align-items: center; gap: 10px; }
.header__cta { display: none; height: 44px; padding: 0 20px; font-size: 14px; }
.header__tel { display: none; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); letter-spacing: .04em; }
.header__tel:hover { color: var(--sky); }
@media (min-width: 1080px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .burger { display: none !important; }
}
@media (min-width: 1280px) { .header__tel { display: inline; } }

.burger { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; z-index: 620; }
.burger span { position: absolute; width: 18px; height: 1.5px; background: var(--text); transition: transform .5s var(--ease), opacity .3s; }
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(2) { transform: translateY(4px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

.mnav { position: fixed; inset: 0; z-index: 600; background: var(--ink); display: flex; flex-direction: column; padding: calc(var(--header-h) + 30px) var(--gutter) 30px; clip-path: circle(0 at calc(100% - 44px) 34px); transition: clip-path .8s var(--ease-io); visibility: hidden; overflow-y: auto; }
.mnav.is-open { clip-path: circle(150% at calc(100% - 44px) 34px); visibility: visible; }
.mnav .grid-bg { opacity: .35; }
.mnav__list { position: relative; display: grid; gap: 4px; }
.mnav__link { display: flex; align-items: baseline; gap: 16px; font-size: clamp(36px, 10vw, 60px); font-weight: 750; letter-spacing: -.03em; line-height: 1.12; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .7s var(--ease), color .3s; }
.mnav__link small { font-family: var(--font-mono); font-size: 12px; color: var(--sky); letter-spacing: .1em; font-weight: 400; }
.mnav__link:hover, .mnav__link.is-active { color: var(--sky); }
.mnav.is-open .mnav__link { opacity: 1; transform: none; }
.mnav.is-open li:nth-child(1) .mnav__link { transition-delay: .25s; }
.mnav.is-open li:nth-child(2) .mnav__link { transition-delay: .3s; }
.mnav.is-open li:nth-child(3) .mnav__link { transition-delay: .35s; }
.mnav.is-open li:nth-child(4) .mnav__link { transition-delay: .4s; }
.mnav.is-open li:nth-child(5) .mnav__link { transition-delay: .45s; }
.mnav__foot { position: relative; margin-top: auto; padding-top: 40px; display: grid; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); opacity: 0; transition: opacity .6s .55s; }
.mnav.is-open .mnav__foot { opacity: 1; }
.mnav__foot a:hover { color: var(--sky); }

/* Scroll progres */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 700; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--indigo-2), var(--sky)); pointer-events: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--header-h) + 40px) 0 0; overflow: hidden; isolation: isolate; }
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 50% at 75% 40%, rgba(75, 58, 154, .45), transparent 70%),
  radial-gradient(40% 40% at 15% 90%, rgba(56, 32, 96, .6), transparent 70%), var(--ink); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; background: linear-gradient(transparent, var(--ink)); pointer-events: none; }
.hero__content { position: relative; display: grid; gap: 28px; padding-bottom: 40px; }
.hero__title { max-width: 14ch; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease); }
.is-ready .hero__title .line > span { transform: none; }
.is-ready .hero__title .line:nth-child(2) > span { transition-delay: .1s; }
.is-ready .hero__title .line:nth-child(3) > span { transition-delay: .2s; }
.hero__sub { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__fade { opacity: 0; transform: translateY(20px); transition: opacity 1s .5s, transform 1s .5s var(--ease); }
.is-ready .hero__fade { opacity: 1; transform: none; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute); letter-spacing: .08em; text-transform: uppercase; }
.hero__meta b { color: var(--sky); font-weight: 500; }

.hero__specbar { position: relative; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, 1fr); background: rgba(10, 8, 22, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.spec { padding: 18px var(--gutter); border-right: 1px solid var(--line); display: grid; gap: 4px; }
.spec:nth-child(2n) { border-right: 0; }
.spec:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.spec__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.spec__v { font-size: 17px; font-weight: 650; }
@media (min-width: 900px) {
  .hero__specbar { grid-template-columns: repeat(4, 1fr); }
  .spec { border-bottom: 0 !important; border-right: 1px solid var(--line) !important; padding: 24px var(--gutter); }
  .spec:last-child { border-right: 0 !important; }
}
@media (min-width: 1024px) { .hero__content { padding-bottom: 72px; } }

.hero__annot { position: absolute; z-index: 1; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--sky); display: none; pointer-events: none; }
.hero__annot::before { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--sky); border-radius: 50%; left: -16px; top: 3px; }
@media (min-width: 1024px) { .hero__annot { display: block; } }
.hero__scroll { position: absolute; right: var(--gutter); bottom: 140px; display: none; writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--text-mute); align-items: center; gap: 14px; }
.hero__scroll::after { content: ""; width: 1px; height: 70px; background: linear-gradient(var(--sky), transparent); animation: scrollLine 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes scrollLine { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 1024px) { .hero__scroll { display: flex; } }

/* Page hero (podstranice) */
.phero { position: relative; padding: calc(var(--header-h) + 80px) 0 70px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 85% 10%, rgba(75, 58, 154, .45), transparent 70%), var(--ink); }
.phero__crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); letter-spacing: .08em; display: flex; gap: 10px; margin-bottom: 26px; }
.phero__crumbs a:hover { color: var(--sky); }
.phero .h1 { max-width: 14ch; position: relative; }
.phero .lead { margin-top: 24px; }
.phero__draw { position: absolute; right: -20px; top: 110px; width: 440px; opacity: .38; z-index: -1; display: none; }
@media (min-width: 900px) { .phero { padding: calc(var(--header-h) + 120px) 0 100px; } .phero__draw { display: block; } }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 22px 0; background: var(--ink); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(22px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variation-settings: "wdth" 85; }
.marquee__item:nth-child(even) { -webkit-text-stroke: 1px var(--steel-2); color: transparent; }
.marquee__item svg { width: 22px; height: 22px; color: var(--sky); flex-shrink: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   O NAMA / BROJKE
   ========================================================================== */
.about { display: grid; gap: 50px; }
@media (min-width: 1024px) { .about { grid-template-columns: 1.05fr 1fr; gap: 90px; align-items: start; } }
.about__big { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.18; font-weight: 600; letter-spacing: -.02em; }
.about__big .w { opacity: .18; transition: opacity .3s; }
.about__big .w.is-on { opacity: 1; }
.about__text { display: grid; gap: 18px; color: var(--text-dim); }
.stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-top: 20px; }
.stat { padding: 26px 0 26px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.stat:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line); }
.stat:nth-child(even) { padding-left: 22px; }
.stat__v { font-size: clamp(40px, 5.6vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variation-settings: "wdth" 80; }
.stat__v sup { font-size: .4em; color: var(--sky); margin-left: 4px; vertical-align: top; position: relative; top: .3em; }
.stat__k { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute); letter-spacing: .08em; text-transform: uppercase; }

/* Tehnički crtež (about vizual) */
.drawing { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(25, 21, 58, .6), rgba(10, 8, 22, .6)); overflow: hidden; aspect-ratio: 4 / 3.4; }
.drawing canvas { width: 100%; height: 100%; }
.drawing__label { position: absolute; left: 16px; top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-mute); }
.drawing__stamp { position: absolute; right: 0; bottom: 0; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); display: grid; grid-template-columns: auto auto; }
.drawing__stamp span { padding: 6px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.drawing__stamp span:nth-child(2n) { border-right: 0; color: var(--sky); }

/* ==========================================================================
   PROIZVODNI PROGRAM — KARTICE
   ========================================================================== */
.cards { display: grid; gap: 14px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.card { --mx: 50%; --my: 50%; position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); padding: 26px; display: flex; flex-direction: column; gap: 18px; min-height: 380px; overflow: hidden; isolation: isolate; transition: border-color .4s, transform .6s var(--ease); transform-style: preserve-3d; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(152, 192, 240, .14), transparent 45%); opacity: 0; transition: opacity .4s; }
.card:hover { border-color: var(--line-2); }
.card:hover::before { opacity: 1; }
.card__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: .1em; }
.card__top .tag { padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--sky); }
.card__art { position: relative; height: 170px; margin: 4px -6px 0; color: var(--sky); }
.card__art svg { width: 100%; height: 100%; overflow: visible; }
.card__art .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.8s var(--ease); }
.card.is-in .card__art .draw, .is-in .draw { stroke-dashoffset: 0; }
.card__art .dim { opacity: 0; transition: opacity .8s 1s; }
.card.is-in .card__art .dim { opacity: 1; }
.card h3 { margin-top: auto; }
.card p { color: var(--text-dim); font-size: 15px; }
.card__list { display: flex; flex-wrap: wrap; gap: 6px; }
.card__list li { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); padding: 5px 9px; background: rgba(152, 192, 240, .06); border-radius: 6px; }
.card__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--sky); }
.card__more svg { width: 16px; transition: transform .4s var(--ease); }
.card:hover .card__more svg { transform: translateX(5px); }
.card--feature { background: linear-gradient(150deg, var(--indigo) 0%, #241650 60%, var(--ink-2) 100%); border-color: rgba(152, 192, 240, .25); }

/* ==========================================================================
   PROCES — horizontalni skrol
   ========================================================================== */
.process { position: relative; }
.process__pin { position: relative; }
.process__track { display: grid; gap: 14px; }
.step { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; background: rgba(17, 14, 36, .7); display: grid; gap: 14px; min-height: 300px; align-content: start; }
.step__n { font-family: var(--font-mono); font-size: 12px; color: var(--sky); letter-spacing: .12em; display: flex; justify-content: space-between; }
.step__big { font-size: 92px; line-height: .8; font-weight: 800; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--line-2); font-variation-settings: "wdth" 75; }
.step p { color: var(--text-dim); font-size: 15px; }
.step__icon { width: 44px; height: 44px; color: var(--sky); }
.process__rail { display: none; }
@media (min-width: 1024px) {
  .process--h .process__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .process--h .process__track { display: flex; gap: 20px; width: max-content; padding: 0 var(--gutter); will-change: transform; }
  .process--h .step { width: 380px; min-height: 360px; padding: 30px 30px; }
  .process--h .step__big { font-size: 76px; }
  .process--h .sec-head { margin-bottom: 40px; padding-top: 70px !important; }
  .process--h .h2 { font-size: clamp(32px, 4.2vw, 60px); }
  .process__rail { display: block; position: relative; margin: 44px var(--gutter) 0; height: 1px; background: var(--line); }
  .process__rail span { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--sky); transform-origin: left; transform: scaleX(0); }
}

/* ==========================================================================
   MATERIJALI / SPEC TABELA
   ========================================================================== */
.spec-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .spec-grid { grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; } }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; padding: 16px 0; border-bottom: 1px solid rgba(56, 32, 96, .14); vertical-align: top; }
.table th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #6A6E88; font-weight: 500; width: 38%; padding-right: 16px; }
.table td { font-weight: 550; }
.table tr { transition: background .3s; }
.table tr:hover { background: rgba(56, 32, 96, .04); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip { font-family: var(--font-mono); font-size: 12px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(56, 32, 96, .2); color: var(--indigo); }

.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.swatch { border-radius: 10px; aspect-ratio: 1 / 1.1; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 10px; font-family: var(--font-mono); font-size: 10.5px; color: #1A1830; letter-spacing: .06em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.swatch--2b { background: linear-gradient(135deg, #cfd4dc, #eef0f4 45%, #b9bfca); }
.swatch--brushed { background: repeating-linear-gradient(90deg, #c8ced8 0 1px, #dfe3ea 1px 3px, #cfd5de 3px 4px), linear-gradient(135deg, #cbd0d9, #f2f4f8); background-blend-mode: multiply; }
.swatch--mirror { background: linear-gradient(160deg, #6d7487 0%, #f6f8fc 35%, #9aa3b8 55%, #ffffff 70%, #7c8396 100%); }
.swatch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); transform: translateX(-100%); transition: transform 1.1s var(--ease); }
.swatch:hover::after { transform: translateX(100%); }

/* ==========================================================================
   INDUSTRIJE
   ========================================================================== */
.ind { border-top: 1px solid var(--line); }
.ind__row { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.ind__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(75, 58, 154, .5), rgba(152, 192, 240, .08)); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.ind__row:hover::before { transform: scaleY(1); }
.ind__n { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); }
.ind__t { font-size: clamp(24px, 4vw, 48px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; transition: transform .6s var(--ease); }
.ind__row:hover .ind__t { transform: translateX(14px); }
.ind__d { display: none; color: var(--text-dim); font-size: 14.5px; max-width: 36ch; }
.ind__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--sky); transition: transform .5s var(--ease), background .4s, color .4s; }
.ind__arrow svg { width: 16px; }
.ind__row:hover .ind__arrow { transform: rotate(-45deg); background: var(--sky); color: var(--ink); }
@media (min-width: 900px) { .ind__row { grid-template-columns: 70px 1fr 1fr auto; padding: 34px 0; } .ind__d { display: block; } }

/* ==========================================================================
   GALERIJA / PROJEKTI
   ========================================================================== */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.filter { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 550; color: var(--text-dim); transition: all .3s; }
.filter:hover { color: var(--text); border-color: var(--sky); }
.filter.is-active { background: var(--sky); color: var(--ink); border-color: var(--sky); }
.filter sup { font-family: var(--font-mono); font-size: 10px; margin-left: 4px; opacity: .6; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 800px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1200px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gitem { position: relative; border-radius: 12px; overflow: hidden; background: var(--ink-3); aspect-ratio: 4 / 3; border: 1px solid var(--line); cursor: zoom-in; transition: opacity .4s, transform .5s var(--ease); }
.gitem.is-hidden { display: none; }
.gitem:nth-child(5n+1) { grid-row: span 1; }
@media (min-width: 800px) { .gallery--masonry .gitem:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } }
.gitem img, .gitem .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.85) contrast(1.05); }
.gitem:hover img { transform: scale(1.06); filter: saturate(1) contrast(1.05); }
.gitem .ph { display: grid; place-items: center; color: var(--sky); background: radial-gradient(circle at 70% 20%, rgba(75, 58, 154, .5), transparent 60%), var(--ink-3); }
.gitem .ph svg { width: 70%; height: 70%; opacity: .75; }
.gitem__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; background: linear-gradient(transparent, rgba(10, 8, 22, .92)); display: grid; gap: 2px; transform: translateY(8px); opacity: .92; transition: transform .5s var(--ease), opacity .4s; }
.gitem:hover .gitem__cap { transform: none; opacity: 1; }
.gitem__cap b { font-size: 14px; font-weight: 650; line-height: 1.25; }
.gitem__cap span { font-family: var(--font-mono); font-size: 10.5px; color: var(--sky); letter-spacing: .08em; text-transform: uppercase; }
.gitem::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(152, 192, 240, .0); border-radius: 6px; transition: border-color .5s, inset .5s var(--ease); pointer-events: none; }
.gitem:hover::after { border-color: rgba(152, 192, 240, .5); inset: 8px; }

.lightbox { position: fixed; inset: 0; z-index: 1500; background: rgba(6, 5, 14, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; padding: 60px 16px 90px; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .4s; }
.lightbox__fig { position: relative; max-width: min(1100px, 100%); width: 100%; display: grid; gap: 14px; transform: scale(.96); transition: transform .5s var(--ease); }
.lightbox.is-open .lightbox__fig { transform: none; }
.lightbox__media { position: relative; aspect-ratio: 4 / 3; max-height: 72vh; border-radius: 12px; overflow: hidden; background: var(--ink-3); border: 1px solid var(--line); }
.lightbox__media img, .lightbox__media .ph { width: 100%; height: 100%; object-fit: contain; }
.lightbox__media .ph { display: grid; place-items: center; color: var(--sky); }
.lightbox__media .ph svg { width: 60%; height: 60%; }
.lightbox__cap { display: flex; justify-content: space-between; gap: 20px; font-size: 15px; }
.lightbox__cap span { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); }
.lightbox__btn { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; background: rgba(10, 8, 22, .6); transition: background .3s, color .3s; }
.lightbox__btn:hover { background: var(--sky); color: var(--ink); }
.lightbox__btn svg { width: 18px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { bottom: 24px; left: calc(50% - 60px); }
.lightbox__next { bottom: 24px; left: calc(50% + 10px); }
@media (min-width: 900px) { .lightbox__prev { left: 24px; top: 50%; bottom: auto; transform: translateY(-50%); } .lightbox__next { right: 24px; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); } }

/* ==========================================================================
   ZAŠTO MI / FEATURE LISTA
   ========================================================================== */
.why { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .why { grid-template-columns: repeat(4, 1fr); } }
.why__item { background: var(--ink); padding: 30px 26px; display: grid; gap: 14px; align-content: start; min-height: 260px; transition: background .5s; }
.why__item:hover { background: var(--ink-2); }
.why__icon { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--sky); }
.why__icon svg { width: 22px; height: 22px; }
.why__item p { color: var(--text-dim); font-size: 15px; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 60px 26px; background: linear-gradient(135deg, var(--indigo) 0%, #2A1A5E 45%, #4B3A9A 100%); display: grid; gap: 30px; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(120deg, transparent 20%, #000 80%); -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000 80%); }
.cta__ring { position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(152, 192, 240, .3); z-index: -1; }
.cta__ring::before, .cta__ring::after { content: ""; position: absolute; inset: 50px; border-radius: 50%; border: 1px dashed rgba(152, 192, 240, .25); animation: spin 40s linear infinite; }
.cta__ring::after { inset: 110px; border-style: solid; animation-duration: 25s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta .lead { color: rgba(232, 236, 246, .8); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .cta { padding: 90px 70px; grid-template-columns: 1.4fr 1fr; align-items: end; } .cta__actions { justify-content: flex-end; } }

/* ==========================================================================
   KONTAKT / FORMA
   ========================================================================== */
.contact { display: grid; gap: 50px; }
@media (min-width: 1024px) { .contact { grid-template-columns: .9fr 1.1fr; gap: 80px; } }
.cinfo { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cinfo__row { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cinfo__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.cinfo__v { font-size: clamp(18px, 2vw, 22px); font-weight: 600; }
.cinfo__v a { transition: color .3s; }
.cinfo__v a:hover { color: var(--sky); }
.form { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--ink-2); }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; padding: 36px; } .form .full { grid-column: 1 / -1; } }
.field { position: relative; display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.field input, .field select, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 10px 0 12px; font-size: 16px; color: var(--text); transition: border-color .3s; border-radius: 0; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2398C0F0' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; }
.field select option { background: var(--ink-2); color: var(--text); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sky); }
.field::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.form__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 8px; }
.form__note { font-size: 13px; color: var(--text-mute); max-width: 40ch; }
.form__status { font-family: var(--font-mono); font-size: 13px; min-height: 20px; }
.form__status.ok { color: #7FE0B0; }
.form__status.err { color: #FF9C9C; }
.hp { position: absolute; left: -9999px; }
.map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; margin-top: 30px; background: var(--ink-3); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) hue-rotate(200deg) contrast(.9); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; border-top: 1px solid var(--line); padding: 80px 0 0; overflow: hidden; background: var(--ink); }
.footer__top { display: grid; gap: 44px; padding-bottom: 60px; }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; } }
.footer__brand svg { width: 190px; }
.footer__brand .logo-sub { fill: var(--text); }
.footer__brand p { margin-top: 20px; color: var(--text-dim); font-size: 15px; max-width: 34ch; }
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 18px; }
.footer ul { display: grid; gap: 10px; }
.footer li a, .footer li { color: var(--text-dim); font-size: 15px; transition: color .3s; }
.footer li a:hover { color: var(--sky); }
.footer__legal { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); line-height: 1.9; }
.footer__mega { font-size: clamp(64px, 19vw, 300px); font-weight: 800; letter-spacing: -.05em; line-height: .78; font-variation-settings: "wdth" 80; color: transparent; -webkit-text-stroke: 1px rgba(152, 192, 240, .22); white-space: nowrap; user-select: none; margin: 0 0 -.06em; text-align: center; transition: -webkit-text-stroke-color .6s; }
.footer__mega:hover { -webkit-text-stroke-color: rgba(152, 192, 240, .55); }
.footer__bottom { border-top: 1px solid var(--line); padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute); padding-right: calc(var(--fab) + var(--fab-gap)); padding-left: calc(var(--fab) + var(--fab-gap)); }

/* ==========================================================================
   FAB — AI asistent (levo) + Back to top (desno), u istoj liniji
   ========================================================================== */
.fab { position: fixed; bottom: var(--fab-gap); z-index: 800; width: var(--fab); height: var(--fab); border-radius: 50%; display: grid; place-items: center; }
.ai-fab { left: var(--fab-gap); background: linear-gradient(135deg, var(--indigo-2), var(--indigo)); color: var(--white); box-shadow: 0 10px 30px rgba(56, 32, 96, .55), inset 0 0 0 1px rgba(152, 192, 240, .35); transition: transform .4s var(--ease); }
.ai-fab:hover { transform: scale(1.06); }
.ai-fab svg { width: 24px; height: 24px; transition: transform .4s var(--ease), opacity .3s; }
.ai-fab .ic-close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.ai-fab[aria-expanded="true"] .ic-chat { opacity: 0; transform: rotate(90deg); }
.ai-fab[aria-expanded="true"] .ic-close { opacity: 1; transform: none; }
.ai-fab__pulse { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--sky); animation: pulse 2.6s var(--ease) infinite; pointer-events: none; }
.ai-fab__pulse:nth-child(2) { animation-delay: 1.3s; }
.ai-fab[aria-expanded="true"] .ai-fab__pulse { display: none; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.ai-fab__badge { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: #7FE0B0; border: 2px solid var(--ink); }
.ai-fab__hint { position: absolute; left: calc(100% + 12px); white-space: nowrap; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
.ai-fab__hint::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: var(--white); transform: translateY(-50%) rotate(45deg); }
.ai-fab__hint.is-show { opacity: 1; transform: none; }

.totop { right: var(--fab-gap); background: rgba(17, 14, 36, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); border: 1px solid var(--line-2); opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: opacity .4s, transform .5s var(--ease), background .3s, color .3s; }
.totop.is-show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--sky); color: var(--ink); }
.totop svg.arr { width: 18px; height: 18px; position: relative; z-index: 1; transition: transform .4s var(--ease); }
.totop:hover svg.arr { transform: translateY(-3px); }
.totop__ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); }
.totop__ring circle { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; }
.totop:hover .totop__ring circle { stroke: var(--ink); }

/* Panel asistenta */
.ai { position: fixed; left: var(--fab-gap); bottom: calc(var(--fab-gap) + var(--fab) + 14px); z-index: 810; width: min(400px, calc(100vw - 2 * var(--fab-gap))); height: min(600px, calc(100svh - var(--fab) - 2 * var(--fab-gap) - 30px)); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgba(13, 11, 28, .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transform-origin: bottom left; transform: scale(.85) translateY(20px); opacity: 0; visibility: hidden; transition: transform .5s var(--ease), opacity .35s, visibility 0s .5s; }
.ai.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .5s var(--ease), opacity .35s; }
.ai__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, rgba(56, 32, 96, .7), rgba(17, 14, 36, .2)); }
.ai__avatar { position: relative; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--indigo-2), var(--indigo)); display: grid; place-items: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(152, 192, 240, .35); }
.ai__avatar svg { width: 22px; height: 22px; color: var(--sky); }
.ai__avatar::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: #7FE0B0; border: 2px solid #15122d; }
.ai__title { display: grid; line-height: 1.25; }
.ai__title b { font-size: 15px; }
.ai__title span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); letter-spacing: .06em; }
.ai__x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text-dim); transition: background .3s, color .3s; }
.ai__x:hover { background: rgba(152, 192, 240, .1); color: var(--text); }
.ai__x svg { width: 16px; }
.ai__body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; overscroll-behavior: contain; }
.ai__body::-webkit-scrollbar { width: 6px; }
.ai__body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; animation: msgIn .45s var(--ease) both; }
.msg a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.msg ul { margin-top: 6px; display: grid; gap: 4px; }
.msg li { padding-left: 14px; position: relative; }
.msg li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 1px; background: var(--sky); }
.msg--bot { background: rgba(152, 192, 240, .07); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg--me { background: var(--sky); color: var(--ink); border-bottom-right-radius: 4px; align-self: flex-end; font-weight: 550; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
.ai__chips { display: flex; gap: 6px; padding: 0 18px 12px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.ai__chips::-webkit-scrollbar { display: none; }
.ai__chip { flex-shrink: 0; font-size: 12.5px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-dim); transition: all .3s; }
.ai__chip:hover { border-color: var(--sky); color: var(--text); background: rgba(152, 192, 240, .08); }
.ai__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.ai__input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(10, 8, 22, .8); font-size: 15px; }
.ai__input:focus { outline: none; border-color: var(--sky); }
.ai__send { width: 46px; height: 46px; border-radius: 12px; background: var(--sky); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; transition: transform .3s var(--ease), background .3s; }
.ai__send:hover { background: var(--white); transform: rotate(-12deg); }
.ai__send svg { width: 18px; }
.ai__foot { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); padding: 0 0 10px; letter-spacing: .06em; }

/* ==========================================================================
   KURSOR (samo precizni pokazivači)
   ========================================================================== */
.cursor { display: none; }
@media (pointer: fine) and (min-width: 1024px) {
  .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 1900; pointer-events: none; mix-blend-mode: difference; }
  .cursor__dot { position: fixed; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
  .cursor__ring { position: fixed; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), border-radius .35s, background .3s; }
  .cursor__ring::before, .cursor__ring::after { content: ""; position: absolute; background: rgba(255, 255, 255, .7); transition: opacity .3s; }
  .cursor__ring::before { left: 50%; top: -7px; bottom: -7px; width: 1px; margin-left: -.5px; -webkit-mask: linear-gradient(#000 0 6px, transparent 6px calc(100% - 6px), #000 calc(100% - 6px)); mask: linear-gradient(#000 0 6px, transparent 6px calc(100% - 6px), #000 calc(100% - 6px)); }
  .cursor__ring::after { top: 50%; left: -7px; right: -7px; height: 1px; margin-top: -.5px; -webkit-mask: linear-gradient(90deg, #000 0 6px, transparent 6px calc(100% - 6px), #000 calc(100% - 6px)); mask: linear-gradient(90deg, #000 0 6px, transparent 6px calc(100% - 6px), #000 calc(100% - 6px)); }
  .cursor.is-hover .cursor__ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(255, 255, 255, .1); }
  .cursor.is-hover .cursor__ring::before, .cursor.is-hover .cursor__ring::after { opacity: 0; }
  .cursor__xy { position: fixed; font-family: var(--font-mono); font-size: 10px; color: #fff; letter-spacing: .06em; transform: translate(18px, 16px); opacity: .7; white-space: nowrap; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  body.has-cursor input, body.has-cursor textarea, body.has-cursor select { cursor: text; }
}

/* ==========================================================================
   REVEAL ANIMACIJE
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.split .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .word > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 40ms); }
.split.is-in .word > span { transform: none; }

/* Dimenzione linije koje se crtaju */
.dimline { position: relative; height: 18px; margin: 28px 0; color: var(--sky); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; }
.dimline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; opacity: .5; transform: scaleX(0); transition: transform 1.4s var(--ease); }
.dimline::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% - 0px); border-left: 1px solid currentColor; border-right: 1px solid currentColor; opacity: 0; transition: opacity .6s .8s; }
.dimline.is-in::before { transform: scaleX(1); }
.dimline.is-in::after { opacity: .6; }
.dimline span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ink); padding: 0 10px; opacity: 0; transition: opacity .6s 1s; }
.section--paper .dimline span { background: var(--paper); }
.section--deep .dimline span { background: var(--ink-2); }
.dimline.is-in span { opacity: 1; }

/* Detalji proizvoda (oprema.html) */
.prod { display: grid; gap: 34px; padding: 70px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 10px); }
.prod:first-of-type { border-top: 0; }
@media (min-width: 1024px) { .prod { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 110px 0; } .prod:nth-of-type(even) .prod__art { order: 2; } }
.prod__art { position: relative; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 5 / 4; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 70% 20%, rgba(75, 58, 154, .35), transparent 60%), var(--ink-2); color: var(--sky); overflow: hidden; }
.prod__art svg { width: 100%; height: 100%; overflow: visible; }
.prod__art .corner { position: absolute; width: 16px; height: 16px; border-color: var(--sky); border-style: solid; opacity: .6; }
.prod__art .c1 { left: 12px; top: 12px; border-width: 1px 0 0 1px; }
.prod__art .c2 { right: 12px; top: 12px; border-width: 1px 1px 0 0; }
.prod__art .c3 { left: 12px; bottom: 12px; border-width: 0 0 1px 1px; }
.prod__art .c4 { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
.prod__art .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 2.2s var(--ease); }
.prod__art.is-in .draw { stroke-dashoffset: 0; }
.prod__art .dim { opacity: 0; transition: opacity 1s 1.2s; }
.prod__art.is-in .dim { opacity: 1; }
.prod__body { display: grid; gap: 20px; }
.prod__body .lead { font-size: 17px; }
.prod__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.prod__list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.prod__list li::before { content: attr(data-n); font-family: var(--font-mono); font-size: 11px; color: var(--sky); padding-top: 4px; min-width: 22px; }

.subnav { position: sticky; top: var(--header-h); z-index: 50; background: rgba(10, 8, 22, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: top .5s var(--ease); }
.header.is-hidden ~ main .subnav { top: 0; }
.subnav__in { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a { flex-shrink: 0; font-size: 13px; font-weight: 550; padding: 8px 14px; border-radius: 999px; color: var(--text-dim); border: 1px solid transparent; transition: all .3s; }
.subnav a:hover { color: var(--text); }
.subnav a.is-active { border-color: var(--line-2); color: var(--sky); }

/* Timeline (o-nama) */
.timeline { position: relative; display: grid; gap: 0; border-left: 1px solid var(--line-2); margin-left: 8px; }
.tl { position: relative; padding: 0 0 46px 34px; }
.tl::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1px solid var(--sky); transition: background .5s; }
.tl.is-in::before { background: var(--sky); box-shadow: 0 0 0 6px rgba(152, 192, 240, .12); }
.tl__y { font-family: var(--font-mono); font-size: 13px; color: var(--sky); letter-spacing: .1em; }
.tl h3 { margin: 6px 0 8px; }
.tl p { color: var(--text-dim); max-width: 56ch; }

.values { display: grid; gap: 14px; }
@media (min-width: 800px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value { padding: 30px; border-radius: var(--radius); background: #fff; border: 1px solid rgba(56, 32, 96, .1); display: grid; gap: 12px; transition: transform .6s var(--ease), box-shadow .6s; }
.value:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(56, 32, 96, .12); }
.value__n { font-family: var(--font-mono); font-size: 12px; color: var(--indigo-2); }
.value p { color: #555A72; font-size: 15px; }

.company-card { border: 1px solid rgba(56, 32, 96, .15); border-radius: var(--radius); background: #fff; overflow: hidden; }
.company-card .table th, .company-card .table td { padding: 14px 22px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], .split .word > span, .hero__title .line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .grain { display: none; }
}

/* Mala visina / landscape telefon */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 560px; }
}

/* ---------- Dopune ---------- */
.draw { --len: 1000; }
.gitem img { opacity: 0; transition: opacity .6s, transform 1.2s var(--ease), filter .6s; z-index: 1; }
.gitem img.is-loaded { opacity: 1; }
.gitem__cap { z-index: 2; }
.gitem__no { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-dim); background: rgba(10, 8, 22, .6); padding: 4px 8px; border-radius: 6px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: clamp(17px, 2vw, 21px); font-weight: 650; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .5s var(--ease), background .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--sky); transition: transform .4s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { transform: rotate(180deg); background: rgba(152, 192, 240, .08); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { padding: 0 0 26px; color: var(--text-dim); max-width: 70ch; animation: msgIn .5s var(--ease); }

/* Sticky info kolona */
@media (min-width: 1024px) { .sticky-col { position: sticky; top: calc(var(--header-h) + 30px); } }

/* Mobile: FAB-ovi ne prekrivaju sadržaj na dnu */
body { padding-bottom: 0; }
@media (max-width: 899px) { .footer { padding-bottom: calc(var(--fab) + var(--fab-gap)); } .footer__bottom { padding-left: var(--gutter); padding-right: var(--gutter); } }
svg.art text { fill: currentColor; stroke: none; letter-spacing: .06em; }
.dim { color: var(--white); opacity: .75; }
.card__art .dim, .prod__art .dim { color: inherit; }
[data-draw] .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.6s var(--ease); }
[data-draw].is-in .draw { stroke-dashoffset: 0; }
[data-draw] .dim { opacity: 0; transition: opacity 1s 1.4s; }
[data-draw].is-in .dim { opacity: .75; }
.card__art .draw:nth-child(3n+2), .prod__art .draw:nth-child(3n+2), [data-draw] .draw:nth-child(3n+2) { transition-delay: .15s; }
.card__art .draw:nth-child(3n), .prod__art .draw:nth-child(3n), [data-draw] .draw:nth-child(3n) { transition-delay: .3s; }
/* Meni otvoren: header (logo + X) iznad overlay-a */
body.menu-open .header { z-index: 650; transform: none; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-open .header__cta, body.menu-open .header__tel { visibility: hidden; }