/* =========================================================================
   ENERGOTOK — homepage stylesheet
   Mobile-first. Base styles target ~360px and scale up via min-width queries.
   All color/type/scale is driven by tokens declared in :root.
   ========================================================================= */

/* -----------------------------  TOKENS  --------------------------------- */
:root{
  /* Brand */
  --ink:        #0D3F56;
  --ink-900:    #08222F;
  --ink-700:    #103A4C;
  --red:        #C42625;
  --red-700:    #9A292D;

  /* Neutrals — cool steel, never warm cream */
  --paper:      #F4F6F7;
  --surface:    #FFFFFF;
  --steel-300:  #C9D2D6;
  --steel-500:  #5B6B73;

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Fluid scale */
  --step--1: clamp(.82rem, .8rem + .2vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-1:  clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --step-3:  clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4rem);  /* hero headline — shrunk so it wraps to ~2 lines */

  --maxw: 1200px;
  --radius: 4px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --header-h: 64px;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  --shadow-soft: 0 1px 0 var(--steel-300), 0 14px 32px -22px rgba(8,34,47,.18);
}


/* ------------------------------  RESET  --------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; border:0; background:transparent; color:inherit; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
hr{ border:0; height:1px; background:var(--steel-300); }

/* Focus ring — visible, brand red, never removed */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection{ background: var(--red); color: #fff; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:8px; top:8px;
  background:var(--ink-900); color:#fff;
  padding:.5rem .75rem; border-radius:var(--radius);
  transform: translateY(-150%); transition: transform .15s;
  z-index: 1000; font-family: var(--font-mono); font-size:.8rem;
}
.skip-link:focus{ transform: translateY(0); }


/* ---------------------------  LAYOUT  ----------------------------------- */
.container{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{
  padding-block: var(--section-y);
}


/* ------------------------  TYPOGRAPHY  ---------------------------------- */
.h-display{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink-900);
}
.h-display em{
  font-style: normal;
  color: var(--red);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: 1rem;
}
.eyebrow-light{ color: rgba(255,255,255,.7); }
.eyebrow-rule{
  width: 28px; height: 1px;
  background: currentColor; opacity: .6;
  display: inline-block;
}

.mono{
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .06em;
}
.micro{
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel-500);
}

.link-arrow{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid currentColor;
  padding-bottom: 2px; transition: color .15s, gap .2s;
}
.link-arrow:hover{ color: var(--red); gap: .85rem; }


/* ----------------------------  BUTTONS  --------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding: .9rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  letter-spacing: .04em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  white-space: nowrap;
}
.btn-sm{ padding: .65rem 1rem; font-size: .82rem; }
.btn-block{ width: 100%; }

.btn-primary{ background: var(--red); color:#fff; }
.btn-primary:hover{ background: var(--red-700); }
.btn-primary:active{ transform: translateY(1px); }

.btn-ghost-light{
  background: transparent; color:#fff;
  border-color: rgba(255,255,255,.45);
}
.btn-ghost-light:hover{ background: rgba(255,255,255,.08); border-color:#fff; }

.btn-on-dark{
  background:#fff; color: var(--ink-900);
}
.btn-on-dark:hover{ background: var(--red); color:#fff; }


/* ----------------------------  HEADER  ---------------------------------- */
.site-header{
  position: sticky; top: 0; left: 0; right: 0;
  z-index: 50;
  /* Smooth transition of every visual property that changes between
     transparent and solid states — so the cross-over from hero backdrop
     to white sticky header is a gentle fade, never a snap. */
  transition:
    background-color .32s ease,
    box-shadow       .32s ease,
    border-color     .32s ease,
    color            .32s ease,
    backdrop-filter  .32s ease;
  background: transparent;
  color: #fff;
  border-bottom: 1px solid transparent;
}
.site-header[data-state="solid"]{
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.1) blur(6px);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  color: var(--ink-900);
  border-bottom-color: var(--steel-300);
  box-shadow: 0 10px 24px -22px rgba(8,34,47,.25);
}
/* The brand-mark already transitions color+filter; matching the header
   transition duration so both pieces resolve together. */
.brand-mark{ transition: color .32s ease, filter .32s ease; }

.header-inner{
  display: flex; align-items: center; gap: 1rem;
  height: var(--header-h);
}
.brand{ display: inline-flex; align-items: center; }
/* Inline-SVG brand mark. currentColor handles navy parts so the same SVG
   reads on dark hero (white) and on solid white header (navy). Wordmark
   stays brand-red. Subtle drop-shadow lifts it off the photo on hero. */
.brand-mark{
  display: block;
  height: 44px; width: auto;       /* base; ≥768 + ≥1024 bump it further */
  color: #fff;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.18))
          drop-shadow(0 2px 14px rgba(0,0,0,.22));
  transition: color .25s ease, filter .25s ease;
}
.site-header[data-state="solid"] .brand-mark{
  color: var(--ink-900);           /* navy parts → navy on solid header */
  filter: none;                    /* no shadow needed on white surface */
}

.nav-desktop{ display: none; margin-left: auto; }
.nav-desktop > ul{ display:flex; gap: 1.8rem; }
.nav-desktop > ul > li{ position: relative; }
.nav-desktop > ul > li > a{
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem;
  letter-spacing: .01em;
  padding: .5rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.nav-desktop > ul > li > a:hover{ border-bottom-color: var(--red); color: var(--red); }
.nav-desktop > ul > li > a[aria-current="page"]{
  border-bottom-color: var(--red);
}

/* Caret icon inside the Proizvodi toggle */
.dropdown-caret{
  width: 10px; height: 7px;
  transition: transform .2s ease;
}
.has-dropdown[data-open="true"] .dropdown-caret{ transform: rotate(180deg); }

/* Desktop dropdown panel — navy card, hairline, red hover accent */
.nav-dropdown{
  position: absolute;
  top: 100%; left: 0;
  min-width: 240px;
  margin-top: .35rem;
  padding: .35rem 0;
  background: var(--ink-900);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 24px 42px -18px rgba(8,34,47,.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.site-header[data-state="solid"] .nav-dropdown{
  /* Panel stays navy for contrast against the white header */
  background: var(--ink-900);
  color: #fff;
}
.has-dropdown[data-open="true"] .nav-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a{
  display: block;
  padding: .7rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .01em;
  color: rgba(255,255,255,.85);
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible{
  color: #fff;
  background: rgba(255,255,255,.05);
  border-left-color: var(--red);
  outline: none;
}

/* CTA "Zatražite ponudu" — bigger when shown in the header (≥1024) */
.nav-cta{ display: none; }
.nav-cta.btn-sm{
  padding: .85rem 1.35rem;
  font-size: .98rem;
  letter-spacing: .03em;
}

.nav-toggle{
  margin-left: auto;
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
}
.nav-toggle-bar{
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
  transform: translateY(5.5px) 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(-5.5px) rotate(-45deg);
}

/* Mobile overlay menu */
.mobile-menu{
  position: fixed; inset: 0;
  background: var(--ink-900);
  color: #fff;
  z-index: 90;                 /* above header (50), above floating UI (60) */
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[data-open="true"]{ opacity: 1; pointer-events: auto; }
.mobile-menu[hidden]{ display: block; }  /* let opacity handle it */

/* Head bar inside the overlay: logo top-left, close button top-right */
.mobile-menu-head{
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  min-height: 64px;
  padding-block: 0;
}
.mobile-menu-brand{ color: #fff; }
.mobile-menu-brand .brand-mark{
  height: 40px;
  color: #fff;
  filter: none;
}
.mobile-menu-close{
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  transition: background .15s, border-color .15s;
}
.mobile-menu-close:hover{ background: rgba(255,255,255,.06); border-color: #fff; }

.mobile-menu-inner{
  padding-top: clamp(3rem, 10vh, 5.5rem);   /* shift list DOWN from head */
  padding-bottom: 2rem;
  display: flex; flex-direction: column; gap: 2rem;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
}
.mobile-menu > ul,
.mobile-menu-inner > nav > ul{ display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu a{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.5vw, 1.55rem);   /* smaller than before */
  letter-spacing: -.005em;
}
.mobile-menu a:hover{ color: var(--red); }

/* Mobile accordion — split row: LABEL is a real <a> that navigates
   to the page (usluge.html / proizvodi.html), CARET is a separate
   <button> that toggles the panel and does NOT navigate. Both have
   ≥44px tap targets. */
.mobile-acc-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  min-height: 44px;
}
.mobile-acc-label{
  flex: 1 1 auto;
  padding: .35rem 0;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.5vw, 1.55rem);
  letter-spacing: -.005em;
  text-decoration: none;
}
.mobile-acc-label:hover{ color: var(--red); }
.mobile-acc-caret{
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.mobile-acc-caret:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.35);
  color: var(--red);
}
.mobile-acc-caret:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.mobile-acc-caret .dropdown-caret{
  width: 14px; height: 10px;
  transition: transform .2s ease;
  opacity: .8;
}
.mobile-acc-caret[aria-expanded="true"] .dropdown-caret{
  transform: rotate(180deg);
  opacity: 1;
  color: var(--red);
}
.mobile-acc-caret[aria-expanded="true"]{
  border-color: rgba(196,38,37,.6);
}
.mobile-acc-panel{
  padding: .5rem 0 .25rem .75rem;
  border-left: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column;
  gap: .55rem;
  margin-top: .5rem;
  /* Simple collapse: hidden attr toggles display. Smooth enough at
     mobile speeds without measuring height. Caret rotation carries
     the visual affordance. */
  animation: mobile-acc-open .18s ease-out both;
}
.mobile-acc-panel[hidden]{ display: none; }
@keyframes mobile-acc-open{
  from{ opacity: 0; transform: translateY(-4px); }
  to  { opacity: 1; transform: translateY(0); }
}
.mobile-acc-panel a{
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
}
.mobile-acc-panel a:hover{ color: var(--red); }

.mobile-menu-meta{
  margin-top: auto;
  padding-top: 1.5rem;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
}
.mobile-menu-meta .mono{ color: rgba(255,255,255,.75); font-size: .68rem; }

/* Part E: while the mobile menu is open, hide the AI launcher + back-to-top
   so they never poke through the overlay. */
body[data-menu-open="true"] .ai-assistant,
body[data-menu-open="true"] .back-to-top{
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}


/* ------------------------------  HERO  ---------------------------------- */
.hero{
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1); /* slide under transparent header */
  padding-top: calc(var(--header-h) + 2rem);
  /* Reserve bottom space so hero CTAs never collide with the AI launcher */
  padding-bottom: max(
    clamp(2.5rem, 6vw, 4.5rem),
    calc(var(--float-size) + var(--float-offset) + 1.5rem)
  );
  color: #fff;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;   /* dvh kills the mobile address-bar jump */
  display: flex; align-items: center;
}
.hero-bg{
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(196,38,37,.18) 0%, transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-900) 70%);
  overflow: hidden;
}

/* Crossfade slider — each slide is absolutely stacked, opacity-toggled.
   z-index layering inside .hero-bg:
     slider  : 0  (behind everything else)
     overlay : 1  (navy scrim)
     flow-ln : 2  (signature motif sits on top of scrim) */
.hero-slider{
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-slide{
  position: absolute; inset: 0;
  opacity: 0;
  /* Longer eased crossfade. The cubic easing keeps the curve smooth at both
     ends so adjacent slides hand off without a dead frame in the middle. */
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
}
.hero-slide.is-active{ opacity: 1; }
.hero-slide.is-broken{ display: none; }
.hero-slide img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Photos render in NATURAL color — legibility comes from the darken-only
     scrim in .hero-bg-overlay. A tiny contrast bump keeps the industrial
     tones punchy without desaturating them. */
  filter: contrast(1.04) saturate(1.02);
  /* Initial transform; JS drives the Ken Burns via inline transition so the
     outgoing slide keeps its scale during the crossfade (no snap-back). */
  transform: scale(1);
  will-change: transform, opacity;
}

/* Darken-only scrim. NO grayscale, NO duotone — the photo shows its
   natural color. Layering (bottom-up):
     1) A very light navy multiply-feel wash (~15% ink) for brand cohesion —
        just enough to nudge cool tones, not enough to gray the image.
     2) A softer bottom darken so the slide label + controls sit on a
        legible baseline.
     3) A localized DARK radial anchored to the bottom-left where the H1,
        tagline and CTAs live — heavy at the anchor, transparent by ~85%.
     4) A diagonal darken running heavier on the left → almost clear on
        the right so the right side of every slide reads at natural
        brightness. */
.hero-bg-overlay{
  position: absolute; inset: 0;
  z-index: 1;
  /* Each scrim layer bumped ~+0.10 for a moodier, higher-contrast read
     without turning into a flat gray grade. The photo still shows through
     on the right side; the H1/CTA corner is meaningfully darker. */
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.66) 0%,
      rgba(0,0,0,.45) 40%,
      rgba(0,0,0,.18) 75%,
      rgba(0,0,0,.05) 100%),
    radial-gradient(110% 85% at 16% 78%,
      rgba(0,0,0,.66) 0%,
      rgba(0,0,0,.40) 32%,
      rgba(0,0,0,.14) 62%,
      rgba(0,0,0,0)   85%),
    linear-gradient(180deg,
      rgba(0,0,0,0)   50%,
      rgba(0,0,0,.45) 100%),
    linear-gradient(180deg,
      rgba(13,63,86,.20) 0%,
      rgba(13,63,86,.20) 100%);
  pointer-events: none;
}
/* Make sure the flow-line SVG sits above the overlay inside .hero-bg */
.hero-bg .flow-line-hero{ z-index: 2; }
/* Hero content sits above .hero-bg */
.hero > .container{ position: relative; z-index: 3; }
/* Slider controls + slide label already declare their own z-index: 3 */

/* Prev / next arrows — brand navy glass, vertically centered near the edges.
   Hidden by default; JS toggles .is-visible on mousemove inside .hero and
   removes it after ~2s idle. On coarse-pointer devices (touch), we skip the
   hover-hide logic entirely (see @media below) so users can always tap them. */
.hero-slide-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(.94);
  z-index: 3;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(13,63,86,.55);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease,
              background .18s ease, border-color .18s ease, color .18s ease;
}
.hero-slide-arrow-prev{ left: clamp(.75rem, 2vw, 1.75rem); }
.hero-slide-arrow-next{ right: clamp(.75rem, 2vw, 1.75rem); }
.hero-slide-arrow svg{ width: 20px; height: 20px; display: block; }
.hero-slide-arrow:hover{
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.hero-slide-arrow:active{ transform: translateY(-50%) scale(.9); }
.hero-slide-arrow:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.hero .hero-slide-arrow.is-visible,
.hero-slide-arrow:focus-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
/* Touch / coarse pointer: no hover — keep arrows visible constantly so they
   remain tappable, but a swipe still works (see JS). */
@media (hover: none), (pointer: coarse){
  .hero-slide-arrow{
    opacity: .9;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
    width: 42px; height: 42px;
  }
}

/* Branded slider controls — steel ticks + red active bar + mono counter.
   Sits bottom-right of the hero (kept away from the launcher on the left). */
.hero-slide-controls{
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--float-size) + var(--float-offset) + .25rem);
  display: inline-flex; align-items: center; gap: 1rem;
  z-index: 3;
}
.hero-slide-ticks{
  display: inline-flex; align-items: center; gap: .5rem;
}
.hero-slide-tick{
  width: 22px; height: 2px;
  background: rgba(201,210,214,.45);   /* steel hairline */
  border: 0; padding: 0; cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.hero-slide-tick:hover{ background: rgba(255,255,255,.65); }
.hero-slide-tick.is-active{
  width: 34px;
  background: var(--red);
}
.hero-slide-tick:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.hero-slide-counter{
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,.85);
  font-feature-settings: "tnum";
}
.hero-slide-counter-sep{
  opacity: .35;
  margin: 0 .35rem;
}

/* Per-slide work label — bottom-left of the hero, sits above the AI launcher.
   Frames each photo as "this is the company's own work". */
.hero-slide-label{
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--float-size) + var(--float-offset) + .5rem);
  display: inline-flex; align-items: center; gap: .65rem;
  z-index: 3;
  margin: 0;
  pointer-events: none;
}
.hero-slide-label-rule{
  width: 24px; height: 1px;
  background: var(--red);
  opacity: .9;
}
.hero-slide-label .mono{
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(255,255,255,.85);
  transition: opacity .35s ease;
}
.hero-slide-label.is-swapping .mono{ opacity: 0; }

/* Flow-line SVG: signature animated motif */
.flow-line{
  position: absolute; left: 0; right: 0;
  width: 100%; height: 100%;
  top: 0;
}
.flow-line-hero{
  bottom: 0;
  pointer-events: none;
}
.flow-path-front{
  stroke-dasharray: 80 60;
  stroke-dashoffset: 0;
}
.motion-on .flow-path-front{
  animation: flow-dash 7s linear infinite;
}
.motion-on .flow-path-second{
  animation: flow-dash 11s linear infinite reverse;
  stroke-dasharray: 4 8;
}
@keyframes flow-dash{
  to{ stroke-dashoffset: -280; }
}

.hero-grid{
  position: relative;
  display: grid; gap: 2.5rem;
}
.hero-copy{ max-width: 34rem; }
.hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: .85rem;
  color: #fff;
  max-width: 17ch;          /* wraps to ~2 lines on phones, ~1 line on desktop */
  text-wrap: balance;
}
.hero-title .line{ display: block; }
/* Tagline lives directly under the H1 — same brand voice, half the weight */
.hero-tagline{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .55vw, 1.5rem);
  line-height: 1.25;
  color: rgba(255,255,255,.92);
  letter-spacing: -.005em;
  margin-bottom: 1.4rem;
  max-width: 30ch;
}
.hero-tagline em{
  font-style: normal;
  color: #fff;
  background: linear-gradient(90deg, var(--red), #e85c2a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.hero-sub{
  font-size: var(--step-0);
  color: rgba(255,255,255,.78);
  max-width: 36rem;
  margin-bottom: 1.75rem;
  text-wrap: pretty;
}
.hero-actions{
  display: flex; flex-wrap: wrap; gap: .75rem;
}
/* Small phones: stack CTAs full-width so they're easier to tap */
@media (max-width: 479px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
}

.hero-visual{ display: block; }
.hero-card{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(13,63,86,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: var(--radius);
  color: #fff;
  max-width: 360px;
}
.hero-card .micro{ color: rgba(255,255,255,.55); }
.hero-card-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: .5rem 0 1.25rem;
}
.hero-card-list{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem 1rem;
  padding-block: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.hero-card-list .mono{
  font-size: .7rem;
  color: rgba(255,255,255,.85);
  letter-spacing: .14em;
}
.hero-card-foot{ margin-top: 1rem; }

/* Hero text paints on first frame — no hidden initial state, no preloader gate.
   The micro fade-up is a CSS keyframe so it runs the moment the element renders;
   if JS never loads, the noscript override locks opacity at 1 and the animation
   becomes a no-op (text stays visible). */
.hero-title .line{ display: block; }

@keyframes hero-fade-up{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}
.hero [data-reveal]{
  animation: hero-fade-up .22s ease-out both;
}
.hero [data-reveal="eyebrow"]{ animation-delay:   0ms; }
.hero [data-reveal="title"]  { animation-delay:  40ms; }
.hero [data-reveal="tagline"]{ animation-delay:  90ms; }
.hero [data-reveal="sub"]    { animation-delay: 130ms; }
.hero [data-reveal="actions"]{ animation-delay: 170ms; }


/* ----------------------------  TRUST STRIP  ----------------------------- */
.trust{
  background: var(--surface);
  border-top: 1px solid var(--steel-300);
  border-bottom: 1px solid var(--steel-300);
  padding-block: 1.25rem;
}
.trust-row{
  display: flex; flex-wrap: wrap;
  gap: .5rem 1.75rem;
  justify-content: flex-start;
}
.trust-row li{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--ink-900);
  position: relative;
  padding-left: 1rem;
}
.trust-row li::before{
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px;
  background: var(--red);
  transform: translateY(-50%) rotate(45deg);
}
.trust-note{
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--steel-500);
}


/* ----------------------------  O NAMA  ---------------------------------- */
.section-about{ background: var(--paper); }
.about-grid{
  display: grid; gap: 2rem;
}
.about-body p + p{ margin-top: 1rem; }
.about-body p{ color: var(--ink-900); font-size: var(--step-1); line-height: 1.55; }
.about-todo{
  font-family: var(--font-body);
  color: var(--steel-500) !important;
  font-size: var(--step-0) !important;
  border-left: 2px solid var(--red);
  padding: .5rem .75rem;
  background: rgba(196,38,37,.04);
}
.about-todo .mono{ color: var(--red); font-size: .72rem; }
.about-body .link-arrow{ margin-top: 1.25rem; }


/* ---------------------  FLOW-LINE DIVIDERS  ---------------------------- */
.flow-divider{
  height: 40px;
  width: 100%;
  opacity: .8;
}
.flow-divider svg{ width: 100%; height: 100%; }
.flow-divider-tight{ height: 28px; margin-top: 2.5rem; }


/* ----------------------------  SECTION HEAD  ---------------------------- */
.section-head{
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-lead{
  margin-top: 1rem;
  color: var(--steel-500);
  font-size: var(--step-0);
  line-height: 1.55;
  text-wrap: pretty;
}
.section-lead .mono{ color: var(--red); }


/* ----------------------------  USLUGE  ---------------------------------- */
.section-services{ background: var(--surface); }
.service-grid{
  display: grid; gap: 1rem;
}
.service-card{
  background: var(--surface);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
}
.service-card::before{
  content: "";
  position: absolute; top: 0; left: 0;
  width: 40px; height: 2px;
  background: var(--red);
  transition: width .25s ease;
}
.service-card:hover{
  transform: translateY(-3px);
  border-color: var(--red);
  box-shadow: var(--shadow-soft);
}
.service-card:hover::before{ width: 80px; }
.category-tag{
  font-size: .68rem;
  color: var(--steel-500);
  letter-spacing: .2em;
  margin-bottom: 1rem;
  display: inline-block;
}
.service-card h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: .75rem;
  color: var(--ink-900);
}
.service-card p{
  color: var(--steel-500);
  margin-bottom: 1.25rem;
  font-size: var(--step-0);
}


/* -------------------------  KAKO RADIMO  -------------------------------- */
.section-capabilities{ background: var(--paper); }
.cap-row{
  display: grid; gap: 2rem;
}
.cap-step{
  position: relative;
  padding-top: 1rem;
  border-top: 1px solid var(--steel-300);
}
.cap-num{
  font-size: .9rem;
  color: var(--red);
  letter-spacing: .2em;
  display: block;
  margin-bottom: .5rem;
}
.cap-step h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: .5rem;
  color: var(--ink-900);
}
.cap-step p{
  color: var(--steel-500);
  font-size: var(--step-0);
}


/* ----------------------------  PROIZVODI  ------------------------------- */
.section-products{ background: var(--surface); }
.product-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--steel-300); /* hairline grid via gap */
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
}
.product-tile{
  background: var(--surface);
  padding: 1.5rem 1rem;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1rem;
  transition: background .2s, color .2s;
}
.product-tile:hover{
  background: var(--ink);
  color: #fff;
}
.product-tile:hover h3{ color: #fff; }
.product-icon{
  display: inline-flex;
  width: 44px; height: 44px;
  color: var(--ink);
  transition: color .2s, transform .25s;
}
.product-tile:hover .product-icon{
  color: var(--red);
  transform: translateY(-2px);
}
.product-icon svg{ width: 100%; height: 100%; }
.product-tile h3{
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem;
  line-height: 1.2;
  color: var(--ink-900);
  transition: color .2s;
}


/* ----------------------------  REFERENCE  ------------------------------- */
.section-references{
  background: var(--ink-700);
  color: #fff;
}
.section-references .eyebrow{ margin-bottom: 2rem; }
.ref-feature{
  padding-block: 1rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 2.5rem;
}
.ref-client{
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,.7);
  margin-bottom: 1rem;
}
.ref-project{
  color: #fff;
  font-size: var(--step-3);
  margin-bottom: 1.25rem;
  max-width: 30ch;
}
.ref-caption{
  font-size: .72rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.55);
}
.ref-clients .micro{ color: rgba(255,255,255,.6); }
.ref-clients-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ref-clients-list li{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: rgba(255,255,255,.9);
}
.ref-clients-list li .mono{
  color: rgba(255,255,255,.35);
  font-size: .72rem;
  font-weight: 400;
}


/* ----------------------------  STATS  ----------------------------------- */
.section-stats{ background: var(--paper); }
.stat-row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  border-top: 1px solid var(--steel-300);
  border-bottom: 1px solid var(--steel-300);
}
.stat-cell{
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--steel-300);
  position: relative;
}
.stat-cell:nth-child(odd)::after{
  content: "";
  position: absolute; right: 0; top: 1rem; bottom: 1rem;
  width: 1px; background: var(--steel-300);
}
.stat-cell:nth-last-child(-n+2){ border-bottom: 0; }
.stat-cell dt{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--steel-500);
  margin-bottom: .5rem;
}
.stat-cell dd{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--ink-900);
  letter-spacing: -.02em;
}


/* ----------------------------  CTA BAND  -------------------------------- */
.cta-band{
  background: var(--ink-900);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}
.cta-band::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 0% 50%, rgba(196,38,37,.25), transparent 60%);
  pointer-events: none;
}
.cta-inner{
  display: grid; gap: 1.5rem;
  position: relative;
}
.cta-inner .h-display{
  color: #fff;
  max-width: 22ch;
}
.cta-inner .btn{ justify-self: start; }


/* ----------------------------  FOOTER  ---------------------------------- */
.site-footer{
  background: var(--ink-900);
  color: rgba(255,255,255,.8);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer-grid{
  display: grid; gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-brand-link{
  display: inline-flex;
  margin-bottom: 1rem;
}
.footer-logo{
  height: 52px;                    /* +30% over the prior 40px */
  width: auto;
  color: #fff;                     /* navy parts → white on dark footer */
}
.footer-tag{
  font-size: .7rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 1rem;
}
.footer-blurb{
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  max-width: 32ch;
}
.footer-h{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-address{
  font-style: normal;
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(255,255,255,.8);
}
.footer-address a{ border-bottom: 1px solid rgba(255,255,255,.2); }
.footer-address a:hover{ color: #fff; border-bottom-color: #fff; }

.footer-nav{
  display: flex; flex-direction: column; gap: .65rem;
  font-size: .92rem;
}
.footer-nav a{
  color: rgba(255,255,255,.75);
  transition: color .15s;
}
.footer-nav a:hover{ color: var(--red); }

.footer-form{
  display: flex; flex-direction: column;
  gap: .6rem;
}
.footer-form input,
.footer-form textarea{
  font: inherit;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  color: #fff;
  padding: .7rem .85rem;
  font-size: max(16px, .92rem); /* iOS focus-zoom floor */
}
.footer-form input::placeholder,
.footer-form textarea::placeholder{ color: rgba(255,255,255,.4); }
.footer-form input:focus,
.footer-form textarea:focus{
  outline: none;
  border-color: var(--red);
  background: rgba(255,255,255,.08);
}
.footer-form textarea{ resize: vertical; min-height: 84px; }
.footer-form-note{
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  min-height: 1.2em;
}

/* Footer trust block — certifications list, hairline dividers, mono labels */
.footer-trust-col{ min-width: 0; }
.footer-trust-list{
  display: flex; flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer-trust-list li{
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .25rem;
}
.footer-trust-list .mono{
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--red);
  filter: brightness(1.15) saturate(.9);
}
.footer-trust-list p{
  font-size: .84rem;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
}
.footer-trust-cta{
  display: inline-flex;
  margin-top: 1.1rem;
  color: rgba(255,255,255,.85);
  border-bottom-color: rgba(255,255,255,.35);
}
.footer-trust-cta:hover{
  color: #fff;
  border-bottom-color: var(--red);
}


/* ============================================================
   PAGE HEADER — slim hero for o-nama, kontakt, etc.
   ~48vh, darkened photo (same darken-only treatment as index),
   eyebrow + title. NO slider, NO Ken Burns.
   ============================================================ */
.page-header{
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  min-height: 46vh;
  min-height: 46dvh;
  color: #fff;
  overflow: hidden;
  display: flex; align-items: end;
}
.page-header-bg{
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(196,38,37,.15) 0%, transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-900) 70%);
}
.page-header-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: contrast(1.04) saturate(1.02);
}
.page-header-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.40) 40%,
      rgba(0,0,0,.15) 75%,
      rgba(0,0,0,0)   100%),
    linear-gradient(180deg,
      rgba(0,0,0,0)   40%,
      rgba(0,0,0,.45) 100%),
    linear-gradient(180deg,
      rgba(13,63,86,.18) 0%,
      rgba(13,63,86,.18) 100%);
  pointer-events: none;
}
.page-header-copy{
  position: relative; z-index: 1;
  padding-bottom: .5rem;
}
.page-header-title{
  color: #fff;
  max-width: 22ch;
  text-wrap: balance;
  margin-top: .5rem;
}
.page-header-lead{
  color: rgba(255,255,255,.85);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.5;
  max-width: 52ch;
  margin-top: .9rem;
  text-wrap: pretty;
}


/* ============================================================
   LOCATIONS grid (o-nama)
   ============================================================ */
.section-locations{ background: var(--surface); }
.location-grid{
  display: grid; gap: 1.25rem;
}
.location-card{
  background: var(--paper);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  position: relative;
}
.location-card::before{
  content: "";
  position: absolute; top: 0; left: 0;
  width: 44px; height: 2px;
  background: var(--red);
}
.location-card h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 1rem 0 .35rem;
  color: var(--ink-900);
}
.location-card p{ color: var(--steel-500); }
.location-meta{
  margin-top: 1rem;
  font-size: .9rem;
}
.location-meta a{
  color: var(--ink);
  border-bottom: 1px solid var(--steel-300);
  transition: color .15s, border-color .15s;
}
.location-meta a:hover{ color: var(--red); border-bottom-color: var(--red); }


/* ============================================================
   CONTACT — split (kontakt.html)
   ============================================================ */
.section-contact{ background: var(--paper); }
.contact-grid{
  display: grid; gap: 2.5rem;
}
.contact-details .h-display{
  margin: .75rem 0 1.5rem;
  max-width: 22ch;
}
.contact-list{
  display: grid; gap: 1.25rem;
  margin-top: .5rem;
  border-top: 1px solid var(--steel-300);
  padding-top: 1.25rem;
}
.contact-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--steel-300);
}
.contact-item:last-child{ border-bottom: 0; padding-bottom: 0; }
.contact-item .category-tag{ color: var(--red); margin-bottom: .1rem; }
.contact-item p{ color: var(--ink-900); font-size: 1rem; line-height: 1.5; }
.contact-item .micro{ color: var(--steel-500); display: block; margin-top: .35rem; }
.contact-item a{
  color: var(--ink);
  border-bottom: 1px solid var(--steel-300);
  transition: color .15s, border-color .15s;
}
.contact-item a:hover{ color: var(--red); border-bottom-color: var(--red); }

/* Inquiry card */
.inquiry-card{
  background: var(--surface);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 24px 44px -28px rgba(8,34,47,.22);
}
.inquiry-title{
  font-size: var(--step-2);
  margin: .5rem 0 1.5rem;
  max-width: 26ch;
  text-wrap: balance;
}

/* Inquiry form fields */
.inquiry-form{
  display: grid; gap: 1rem;
}
.field{
  display: grid;
  gap: .3rem;
}
.field-label{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.field-label > span[aria-hidden]{ color: var(--red); }
.field input,
.field textarea{
  font: inherit;
  font-size: max(16px, 1rem);   /* iOS focus-zoom floor */
  padding: .75rem .9rem;
  background: var(--paper);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  color: var(--ink-900);
  transition: border-color .15s, background .15s;
}
.field input:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--red);
  background: var(--surface);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field-row{
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
.inquiry-note{
  font-size: .85rem;
  color: var(--steel-500);
  min-height: 1.2em;
}
.inquiry-form.is-sent .inquiry-note{ color: #2f7d3e; }
.inquiry-form.is-error .inquiry-note{ color: var(--red-700); }


/* ============================================================
   MAP (kontakt.html)
   ============================================================ */
.section-map{ background: var(--surface); }
.map-frame{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--steel-300);
  box-shadow: 0 24px 44px -28px rgba(8,34,47,.22);
}
.map-frame iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(15%) contrast(1.02);
}


/* ============================================================
   PRODUCTS OVERVIEW (proizvodi.html) — 6 category cards
   Cards use a darkened-photo header (same treatment as hero),
   mono tag, title, one-line desc, and "Detaljnije →" link-arrow.
   ============================================================ */
.page-lead{
  color: rgba(255,255,255,.85);
  max-width: 62ch;
  margin-top: 1rem;
  font-size: var(--step-0);
  text-wrap: pretty;
}

.section-products-grid{ background: var(--paper); }
.product-cards{
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
.product-card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover{
  transform: translateY(-3px);
  border-color: var(--red);
  box-shadow: var(--shadow-soft);
}
.product-card-media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-900);
}
.product-card-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.02);
  transition: transform .6s ease;
}
.product-card:hover .product-card-media img{ transform: scale(1.04); }
.product-card-media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.35) 55%,
      rgba(0,0,0,.65) 100%),
    linear-gradient(180deg, rgba(13,63,86,.14), rgba(13,63,86,.14));
  pointer-events: none;
}
.product-card-body{
  padding: 1.25rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; gap: .55rem;
  flex: 1;
}
.product-card-body h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.product-card-body p{ color: var(--steel-500); font-size: var(--step-0); }
.product-card-body .link-arrow{ margin-top: auto; padding-top: .5rem; }


/* ============================================================
   PRODUCT DETAIL PAGES (proizvod-*.html)
   ============================================================ */
.breadcrumb{
  padding-block: 1rem 0;
  color: var(--steel-500);
}
.breadcrumb ol{
  display: flex; flex-wrap: wrap;
  gap: .35rem .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.breadcrumb li{ display: inline-flex; align-items: center; }
.breadcrumb li + li::before{
  content: "/";
  margin-right: .5rem;
  color: var(--steel-300);
}
.breadcrumb a{
  color: var(--steel-500);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.breadcrumb a:hover{ color: var(--red); border-bottom-color: var(--red); }
.breadcrumb [aria-current="page"]{ color: var(--ink-900); }

.section-product-body{ background: var(--paper); }
.product-layout{
  display: grid; gap: 3rem;
}
.product-primary{ min-width: 0; }
.product-primary .h-display{ margin-bottom: 1rem; max-width: 22ch; }
.product-desc{
  font-size: var(--step-1);
  color: var(--ink-900);
  line-height: 1.55;
  max-width: 62ch;
  text-wrap: pretty;
  margin-bottom: 2rem;
}

.product-block{
  padding: 1.5rem 0;
  border-top: 1px solid var(--steel-300);
}
.product-block h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
  color: var(--ink-900);
}
.product-block p{ color: var(--ink-900); font-size: var(--step-0); line-height: 1.6; max-width: 62ch; }

.application-list{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}
.application-list li{
  position: relative;
  padding: .4rem 0 .4rem 1.25rem;
  color: var(--ink-900);
  font-size: var(--step-0);
  line-height: 1.5;
  border-bottom: 1px solid var(--steel-300);
}
.application-list li:last-child{ border-bottom: 0; }
.application-list li::before{
  content: "";
  position: absolute; left: 0; top: .95em;
  width: 8px; height: 1px;
  background: var(--red);
}

.standards-note,
.specs-todo{
  padding: 1.1rem 1.25rem;
  border-left: 2px solid var(--red);
  background: rgba(196,38,37,.04);
  color: var(--ink-900);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 62ch;
}
.specs-todo .mono{
  color: var(--red);
  font-size: .68rem;
  letter-spacing: .2em;
  display: inline-block;
  margin-bottom: .3rem;
}

.product-side{ min-width: 0; }
.product-callout{
  background: var(--surface);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: 0 24px 44px -28px rgba(8,34,47,.22);
}
.product-callout .mono{
  color: var(--red);
  font-size: .68rem;
  letter-spacing: .2em;
}
.product-callout h4{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  margin: .5rem 0 1rem;
  color: var(--ink-900);
}
.product-callout p{ color: var(--steel-500); margin-bottom: 1.25rem; }

/* Gallery strip */
.section-product-gallery{ background: var(--surface); }
.product-gallery{
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.product-gallery figure{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-900);
  margin: 0;
}
.product-gallery img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.02);
}
.product-gallery figure::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 40%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, rgba(13,63,86,.14), rgba(13,63,86,.14));
  pointer-events: none;
}

/* Related products */
.section-related{ background: var(--paper); }
.related-cards{
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}


/* ============================================================
   REFERENCE PAGE — reference.html
   Featured card (real client) sits above a grid of reference
   items. Placeholder items are visibly muted so the layout is
   complete without fabricating client names.
   ============================================================ */
.reference-feature{
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(13,63,86,.03), rgba(13,63,86,.06)),
    var(--surface);
  margin-block: 1.5rem 3rem;
  display: grid; gap: .5rem;
}
.reference-feature .mono{
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--red);
}
.reference-feature .ref-client{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.reference-feature .ref-project{
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink-900);
  margin: .35rem 0 .5rem;
  text-wrap: balance;
}

.reference-grid{
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.reference-item{
  position: relative;
  padding: 1.15rem 1.3rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.reference-item:hover{
  border-color: var(--red);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.reference-item .mono{
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--steel-500);
}
.reference-item .ref-client-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink-900);
  margin: .5rem 0 .35rem;
}
.reference-item p{ color: var(--steel-500); font-size: .92rem; }
.reference-item .ref-meta{
  display: flex; gap: .5rem 1rem; flex-wrap: wrap;
  margin-top: .75rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--steel-500);
  text-transform: uppercase;
}

/* Placeholder state — visibly muted so it never reads as a real reference.
   Real card fills in when the client's list arrives. */
.reference-item[data-placeholder]{
  border-style: dashed;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(13,63,86,.02) 0,
      rgba(13,63,86,.02) 8px,
      transparent 8px,
      transparent 16px);
}
.reference-item[data-placeholder]:hover{
  border-color: var(--steel-500);
  transform: none;
  box-shadow: none;
}
.reference-item[data-placeholder] .ref-client-name{
  color: var(--steel-500);
  font-weight: 500;
}
.reference-placeholder-label{
  display: inline-block;
  padding: .18rem .5rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel-500);
  border: 1px dashed var(--steel-300);
  border-radius: 4px;
  margin-bottom: .55rem;
}

/* Optional logo wall — kept skeleton-only until client provides logos. */
.reference-logos{
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--steel-300);
  border-radius: var(--radius);
  text-align: center;
  color: var(--steel-500);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}


/* Service cards on usluge.html re-use .product-cards markup. Extra
   visual: coloured category tag chip inside the card body so it reads
   as service-oriented, not product-oriented. */
.section-services-list{ background: var(--paper); }

.footer-base{
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.25rem;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
}
.footer-base-inner{
  display: flex; flex-direction: column; gap: .5rem;
  justify-content: space-between;
}
.footer-base .mono{
  color: rgba(255,255,255,.4);
  font-size: .7rem;
  letter-spacing: .2em;
}
.footer-credit{
  color: rgba(255,255,255,.55);
  font-size: .78rem;
}
.footer-credit a{
  color: rgba(255,255,255,.75);
  border-bottom: 1px dotted rgba(255,255,255,.3);
  transition: color .15s, border-color .15s;
}
.footer-credit a:hover{
  color: #fff;
  border-bottom-color: var(--red);
}


/* ============================================================
   FLOATING UI — AI assistant + back-to-top
   Stacking system: launcher bottom-left, back-to-top bottom-right.
   Same --float-offset baseline so they sit on one line.
   AI panel attaches above launcher; on mobile becomes a bottom sheet.
   ============================================================ */
:root{
  --float-offset: 16px;
  --float-size: 52px;
  --ai-z: 60;       /* above header (50), below skip-link (1000) */
}

/* ----- AI assistant ----- */
.ai-assistant{
  position: fixed;
  left: var(--float-offset);
  bottom: var(--float-offset);
  z-index: var(--ai-z);
}
.ai-launcher{
  display: inline-flex; align-items: center; gap: .55rem;
  height: var(--float-size);
  padding: 0 1.1rem 0 .85rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-900) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 36px -16px rgba(8,34,47,.55),
    0 0 0 0 rgba(196,38,37,.0);
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  letter-spacing: .02em;
  cursor: pointer;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ai-launcher:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 22px 40px -16px rgba(8,34,47,.65),
    0 0 0 4px rgba(196,38,37,.18);
}
.ai-launcher:active{ transform: translateY(0); }
.ai-launcher[aria-expanded="true"]{
  background: linear-gradient(180deg, var(--ink-900) 0%, #061821 100%);
}
.ai-launcher-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  flex: none;
}
.ai-launcher-icon svg{ width: 18px; height: 18px; }
.ai-launcher-label{ white-space: nowrap; }

/* Subtle pulse ring on the icon */
.ai-launcher-pulse{
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(196,38,37,.55);
  pointer-events: none;
}
.motion-on .ai-launcher-pulse{
  animation: ai-pulse 2.6s ease-out infinite;
}
@keyframes ai-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(196,38,37,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(196,38,37,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,38,37,0); }
}

/* ----- Panel ----- */
.ai-panel{
  position: absolute;
  left: 0;
  bottom: calc(var(--float-size) + 12px);
  width: min(360px, calc(100vw - calc(var(--float-offset) * 2)));
  max-height: min(560px, 75vh);
  display: flex; flex-direction: column;
  background: var(--surface);
  color: var(--ink-900);
  border: 1px solid var(--steel-300);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(8,34,47,.4),
              0 6px 18px -8px rgba(8,34,47,.25);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transform-origin: bottom left;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.ai-panel[hidden]{ display: none; }
.ai-panel.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ai-panel-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem;
  background: var(--ink-900);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ai-panel-title{
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem;
  line-height: 1;
}
.ai-panel-sub{
  font-size: .62rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.55);
  margin-top: .3rem;
}
.ai-panel-sub::before{
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2bbf6a;
  margin-right: .5rem;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(43,191,106,.5);
}
.ai-close{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  color: rgba(255,255,255,.7);
  transition: background .15s, color .15s;
}
.ai-close:hover{ background: rgba(255,255,255,.08); color: #fff; }

/* Messages */
.ai-messages{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: .65rem;
  background: var(--paper);
  scroll-behavior: smooth;
}
.ai-msg{
  max-width: 85%;
  padding: .65rem .85rem;
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ai-msg-bot{
  background: var(--surface);
  border: 1px solid var(--steel-300);
  border-bottom-left-radius: 4px;
  color: var(--ink-900);
  align-self: flex-start;
}
.ai-msg-user{
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.ai-msg-error{
  background: rgba(196,38,37,.08);
  border: 1px solid rgba(196,38,37,.3);
  color: var(--red-700);
  align-self: stretch;
  font-size: .82rem;
}

/* Typing dots */
.ai-typing{
  display: inline-flex; gap: 3px; align-items: center;
  padding: .8rem .9rem;
}
.ai-typing span{
  width: 6px; height: 6px;
  background: var(--steel-500);
  border-radius: 50%;
  opacity: .4;
}
.motion-on .ai-typing span{
  animation: ai-typing 1.2s ease-in-out infinite;
}
.motion-on .ai-typing span:nth-child(2){ animation-delay: .15s; }
.motion-on .ai-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes ai-typing{
  0%, 60%, 100%{ opacity: .35; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(-3px); }
}

/* Suggestion chips */
.ai-suggestions{
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .75rem 1rem 0;
  border-top: 1px solid var(--steel-300);
  background: var(--surface);
}
.ai-suggestions[hidden]{ display: none; }
.ai-chip{
  font-family: var(--font-body);
  font-size: .78rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-900);
  border: 1px solid var(--steel-300);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1.2;
}
.ai-chip:hover{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Form */
.ai-form{
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem 1rem;
  background: var(--surface);
}
.ai-form input{
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: max(16px, .92rem); /* 16px floor to prevent iOS focus-zoom */
  padding: .65rem .85rem;
  background: var(--paper);
  border: 1px solid var(--steel-300);
  border-radius: 8px;
  color: var(--ink-900);
}
.ai-form input::placeholder{ color: var(--steel-500); }
.ai-form input:focus{
  outline: none;
  border-color: var(--red);
  background: var(--surface);
}
.ai-send{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  transition: background .15s, transform .15s;
  flex: none;
}
.ai-send:hover{ background: var(--red-700); }
.ai-send:active{ transform: translateY(1px); }
.ai-send:disabled{
  background: var(--steel-300);
  cursor: not-allowed;
}


/* ----- Back-to-top ----- */
.back-to-top{
  position: fixed;
  right: var(--float-offset);
  bottom: var(--float-offset);
  z-index: var(--ai-z);
  width: var(--float-size);
  height: var(--float-size);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-900);
  border: 1px solid var(--steel-300);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 30px -16px rgba(8,34,47,.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
  cursor: pointer;
}
.back-to-top[hidden]{ display: none; }
.back-to-top.is-visible{
  opacity: 1; transform: translateY(0);
}
.back-to-top:hover{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ----- Stacking rules: never overlap on small screens ----- */

/* When AI panel is open, hide back-to-top so they don't overlap */
body[data-ai-open="true"] .back-to-top{
  opacity: 0; pointer-events: none; transform: translateY(8px);
}


/* ============================================================
   SCROLL PROGRESS — thin red line at the top of the viewport
   (tok motif), fills left→right as the page scrolls.
   ============================================================ */
.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 70;            /* above header (50), below skip-link */
  pointer-events: none;
}
.scroll-progress-bar{
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red), #e85c2a 75%, #f0a85f);
  transform-origin: left center;
  transition: width .08s linear;
}


/* ============================================================
   PRELOADER — fast navy intro with mark + flow line drawing.
   ============================================================ */
.preloader{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-900);
  z-index: 1100;
  opacity: 1;
  transition: opacity .22s ease;
}
.preloader.is-out{
  opacity: 0;
  pointer-events: none;
}
.preloader-mark{
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: #fff;
}
/* Default state is "visible" so a JS failure can't leave a blank screen.
   When motion is allowed, JS adds .motion-on and we run the pop-in. */
.preloader-mark{ gap: .75rem; }
.preloader-mark .brand-mark{
  height: clamp(72px, 12vw, 110px);  /* much more presence during intro */
  filter: none;
}
.preloader-flow{
  width: clamp(220px, 26vw, 320px);
  height: 18px;
}
.motion-on .preloader-mark .brand-mark{
  opacity: 0; transform: translateY(6px);
  animation: preloader-pop .25s ease-out 0s forwards;
}
.motion-on .preloader-flow{
  opacity: 0;
  animation: preloader-pop .25s ease-out .12s forwards;
}
.preloader-flow-path{
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.motion-on .preloader-flow-path{
  animation: preloader-draw .45s ease-out .15s forwards;
}
@keyframes preloader-pop{
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes preloader-draw{
  to{ stroke-dashoffset: 0; }
}
/* Under reduced motion the preloader never shows — page renders immediately */
@media (prefers-reduced-motion: reduce){
  .preloader{ display: none !important; }
}


/* Mobile bottom-sheet style for the AI panel (≤599px) */
@media (max-width: 599px){
  .ai-panel{
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(var(--float-size) + var(--float-offset) + 8px);
    width: auto;
    max-width: none;
    max-height: 70vh;
    transform-origin: bottom center;
  }
  .ai-launcher-label{
    /* Keep label, but tighten so it always fits next to back-to-top */
    font-size: .85rem;
  }
  .ai-launcher{
    padding-right: .9rem;
  }
}

/* Extra-small screens: collapse launcher to icon-only to guarantee back-to-top fits */
@media (max-width: 359px){
  .ai-launcher-label{ display: none; }
  .ai-launcher{ padding: 0; width: var(--float-size); justify-content: center; }
  .ai-launcher-icon{ background: transparent; width: 100%; height: 100%; }
}

/* Slider controls + label: tighten so they don't collide on small phones.
   - <600px: drop the "/ 03" total so the right side stays compact
   - <480px: drop the counter entirely; just ticks + label */
@media (max-width: 599px){
  .hero-slide-counter-sep,
  [data-slide-total]{ display: none; }
  .hero-slide-label .mono{ font-size: .62rem; letter-spacing: .18em; }
}
@media (max-width: 479px){
  .hero-slide-counter{ display: none; }
  .hero-slide-tick{ width: 16px; }
  .hero-slide-tick.is-active{ width: 26px; }
}


/* ============================================================
   PART A — MOBILE HERO (≤767px only, does not affect ≥768).
   Hero fills the viewport, the Delatnost card is hidden, and the
   copy block is anchored to the lower half above the slider
   controls / slide label / AI launcher.
   ============================================================ */
@media (max-width: 767px){
  /* Hide the DELATNOST card entirely on phones — the trust strip
     immediately below the hero already carries the same signal. */
  .hero-visual{ display: none; }

  /* Pin hero copy to the lower half of the viewport. .hero is a flex
     column via the .hero-grid child; using flex-end + a taller bottom
     padding pushes the H1 + CTAs into the lower-middle while still
     leaving room above the slide controls + label + AI launcher.
     min-height stays 100dvh (already declared at base). */
  .hero{
    align-items: flex-end;
    padding-bottom: max(
      clamp(4.5rem, 22vh, 9rem),
      calc(var(--float-size) + var(--float-offset) + 3.75rem)
    );
  }
  /* Optional: tighten grid gap on mobile since the card is gone */
  .hero-grid{ gap: 1.75rem; }
}


/* ============================================================
   RESPONSIVE — mobile-first enhancements
   ============================================================ */

/* ≥480 */
@media (min-width: 480px){
  .footer-base-inner{ flex-direction: row; align-items: center; }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ≥768 */
@media (min-width: 768px){
  :root{
    --header-h: 84px;             /* +12px to host the bigger logo */
    --float-offset: 24px;
    --float-size: 56px;
  }
  .brand-mark{ height: 54px; }

  .location-grid{ grid-template-columns: repeat(2, 1fr); }
  .field-row{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 5fr 6fr; gap: 3rem; align-items: start; }
  .page-header{ min-height: 48vh; min-height: 48dvh; }

  .product-cards{ grid-template-columns: repeat(2, 1fr); }
  .related-cards{ grid-template-columns: repeat(3, 1fr); }
  .product-layout{ grid-template-columns: 7fr 4fr; }
  .application-list{ grid-template-columns: 1fr 1fr; }
  .product-gallery{ grid-template-columns: repeat(3, 1fr); }
  .reference-grid{ grid-template-columns: repeat(2, 1fr); }

  /* Hero stays single-column at this size; card stacks below the text.
     Note: NO max-width override — let .container's --maxw + --gutter
     keep the text column aligned to the same x as the header logo. */
  .hero-grid{
    grid-template-columns: 1fr;
  }

  .about-grid{
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: start;
  }

  .service-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  .cap-row{
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  .product-grid{ grid-template-columns: repeat(3, 1fr); }

  .ref-clients-list{ grid-template-columns: repeat(3, 1fr); }

  .stat-row{ grid-template-columns: repeat(4, 1fr); }
  .stat-cell{ border-bottom: 0 !important; }
  .stat-cell::after{ top: 1rem !important; bottom: 1rem !important; }
  .stat-cell:not(:last-child)::after{
    content: ""; position: absolute; right: 0; top: 1rem; bottom: 1rem;
    width: 1px; background: var(--steel-300);
  }
  .stat-cell:last-child::after{ display: none; }

  .cta-inner{
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
  }
  .cta-inner .btn{ justify-self: end; }

  .footer-grid{
    grid-template-columns: 1.4fr .9fr .9fr 1.2fr;
    gap: 3rem;
  }
}

/* ≥1024 */
@media (min-width: 1024px){
  /* ≥1024: show the desktop nav + CTA. Stays in flex (right-aligned) here
     because the bigger logo + 1.05rem links would otherwise overflow on a
     1024px viewport. Centered 3-zone grid activates at ≥1200. */
  .nav-desktop{ display: block; margin-left: auto; }
  .nav-desktop ul{ gap: 1.5rem; }
  .nav-desktop a{ font-size: 1rem; }
  .nav-cta{
    display: inline-flex;
    margin-left: 1.25rem;
  }
  .nav-cta.btn-sm{
    padding: .75rem 1.15rem;
    font-size: .92rem;
  }
  .nav-toggle{ display: none; }

  /* Hero becomes 2-column at desktop: text left, Delatnost card right.
     .container still constrains to --maxw so the H1 lines up with the logo. */
  .hero-grid{
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 4rem;
  }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-cards{ grid-template-columns: repeat(3, 1fr); }
  .ref-clients-list{ grid-template-columns: repeat(6, 1fr); }
  .reference-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ≥1200 — enough horizontal room to activate the centered 3-zone header
   grid with the bigger logo + 1.05rem links + larger CTA button. */
@media (min-width: 1200px){
  .header-inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
  }
  .brand{ justify-self: start; }
  .nav-desktop{
    margin-left: 0;
    justify-self: center;
  }
  .nav-desktop ul{ gap: 1.8rem; }
  .nav-desktop a{ font-size: 1.05rem; }
  .nav-cta{
    margin-left: 0;
    justify-self: end;
  }
  .nav-cta.btn-sm{
    padding: .85rem 1.35rem;
    font-size: .98rem;
  }
}

/* ≥1280 */
@media (min-width: 1280px){
  /* Larger gutter so the hero text feels deliberately indented from the edge,
     not flush to the window. The hero copy is anchored to the container, so
     this also nudges the H1 inward. */
  :root{ --gutter: clamp(3rem, 5vw, 5.5rem); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   REVEAL — initial states for ScrollTrigger. Only active when
   the JS layer flags the document with .motion-on (i.e. when
   user does NOT prefer reduced motion). Otherwise everything
   renders in its final state — no surprises, no jumps.
   ============================================================ */
.motion-on [data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
/* HERO content is excluded — it must paint on first frame, not on scroll.
   JS runs a tiny ~0.22s fade-up immediately, no preloader gate. */
.motion-on .hero [data-reveal]{
  opacity: 1;
  transform: none;
  will-change: auto;
}


/* ============================================================
   REDUCED MOTION — kill all animation
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .flow-path-front, .flow-path-second{ animation: none !important; }
}