/* ==========================================================================
   DAL.RS - glavni stil
   Izvučeno iz odobrenog prototipa (dal-proto). Dizajn se NE menja.
   Fontovi: self-host (Google Fonts uklonjen zbog GDPR/brzine).
   Za woff2 fajlove vidi static/fonts/README.md
   ========================================================================== */

  /* latin-ext */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/inter-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/inter-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/inter-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/inter-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

:root{
  --ink:#101315;--ink2:#0B0D0E;--paper:#F4F5F2;--white:#FFFFFF;
  --steel:#697076;--line:#DFE2DD;
  --amb:#FFB000;--amb-d:#C98A00;
  --ledg:#2FD672;--ledr:#E5484D;
  --oct:10px;
  --disp:'Space Grotesk',sans-serif;--body:'Inter',sans-serif;--mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.oct{clip-path:polygon(var(--oct) 0,calc(100% - var(--oct)) 0,100% var(--oct),100% calc(100% - var(--oct)),calc(100% - var(--oct)) 100%,var(--oct) 100%,0 calc(100% - var(--oct)),0 var(--oct))}

/* hazard traka - industrijski potpis */
.hz{height:6px;background:repeating-linear-gradient(-45deg,var(--amb) 0 14px,var(--ink) 14px 28px)}

header{position:sticky;top:0;z-index:50;background:rgba(244,245,242,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:34px;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.5px}
.brand .mark{width:38px;height:38px;flex:none}
.nav ul{display:flex;gap:26px;list-style:none;margin-left:auto}
.nav li{position:relative}
.nav a.top{font-size:15px;font-weight:500;padding:26px 0;color:var(--ink)}
.nav a.top:hover{color:var(--amb-d)}
.dd{position:absolute;top:100%;left:-14px;background:var(--white);border:1px solid var(--line);min-width:250px;padding:8px 0;display:none;box-shadow:0 14px 34px rgba(16,19,21,.10)}
.nav li:hover .dd{display:block}
.dd a{display:block;padding:9px 16px;font-size:14.5px}
.dd a:hover{background:var(--paper);color:var(--amb-d)}
.lang{font-family:var(--mono);font-size:13px;color:var(--steel);border:1px solid var(--line);padding:6px 10px}
.lang b{color:var(--ink)}
.btn{display:inline-block;font-family:var(--disp);font-weight:600;font-size:15px;padding:13px 26px;background:var(--ink);color:var(--white);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .15s,color .15s}
.btn:hover{background:var(--amb);color:var(--ink)}
.btn.led{background:var(--amb);color:var(--ink)}
.btn.led:hover{background:var(--white)}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);clip-path:none}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--amb);color:var(--amb);background:transparent}
.hbtn{margin-left:6px}

/* HERO */
.hero{background:linear-gradient(180deg,var(--ink) 0%,var(--ink2) 100%);color:var(--white);position:relative;overflow:hidden;border-bottom:6px solid var(--amb)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 82% 50%,rgba(255,176,0,.07),transparent 70%)}
.hero::after{content:"";position:absolute;left:0;right:0;top:10%;height:2px;background:linear-gradient(90deg,transparent 5%,rgba(255,176,0,.85) 50%,transparent 95%);filter:drop-shadow(0 0 8px rgba(255,176,0,.7));animation:scan 5.2s ease-in-out infinite;pointer-events:none}
@keyframes scan{0%{top:8%;opacity:0}12%{opacity:1}50%{top:86%}88%{opacity:1}100%{top:8%;opacity:0}}
.hero .fp{position:absolute;right:-120px;top:50%;transform:translateY(-50%);width:640px;height:640px;opacity:.75;pointer-events:none}
.hero .fp circle{animation:draw 2.6s cubic-bezier(.4,0,.2,1) forwards;stroke:var(--amb)}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-in{position:relative;padding:100px 0 110px;max-width:660px}
.hero.sub .hero-in{padding:70px 0 78px}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--amb);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--amb)}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(36px,5vw,62px);line-height:1.04;letter-spacing:-1px}
.hero p.sub{margin-top:22px;font-size:18px;color:#BFC5C9;max-width:560px}
.hero .cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

/* TICKER - log sistema */
.tick{background:var(--ink2);border-bottom:1px solid #22272A;overflow:hidden}
.tick-in{display:flex;gap:0;white-space:nowrap;width:max-content;animation:tick 30s linear infinite;font-family:var(--mono);font-size:12.5px;padding:11px 0}
.tick-in{color:#6b7278}
.tick-in span{padding:0 26px;border-right:1px solid #22272A}
.tick-in b{color:var(--ledg);font-weight:500}
.tick-in i{font-style:normal;color:var(--amb)}
@keyframes tick{to{transform:translateX(-50%)}}

.trust{background:var(--white);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
/* Stavka trake je dugme: klik otvara objašnjenje brojke ispod trake.
   Bez JS-a panel ostaje otvoren (vidi t-panel), pa sadržaj nikad nije nedostupan. */
.t-item{padding:32px 26px;border-left:1px solid var(--line);display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border-top:none;border-right:none;border-bottom:none;cursor:pointer;transition:background-color .15s}
.t-item:first-child{border-left:none}
.t-item:hover{background:var(--paper)}
.t-item:focus-visible{outline:2px solid var(--amb);outline-offset:-2px}
.t-item b{font-family:var(--disp);font-size:34px;font-weight:700;display:block;color:var(--ink)}
.t-item b::after{content:"";display:block;width:34px;height:3px;background:var(--amb);margin:8px 0 6px}
.t-item span{font-size:14px;color:var(--steel)}
.t-more{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink)}
.t-more::after{content:" ↓";color:var(--amb)}
.t-item[aria-expanded="true"]{background:var(--paper)}
.t-item[aria-expanded="true"] .t-more::after{content:" ↑"}
.trust .wrap.t-panels{display:block}
/* Bez JS-a svi paneli su vidljivi (sadržaj dostupan); sa JS-om ih sklapamo. */
.js .t-panel{display:none}
.js .t-panel.open{display:block}
.t-panel{border-top:1px solid var(--line);padding:24px 26px 30px}
.t-panel p{font-size:15px;color:var(--steel);max-width:760px;margin:0}
.t-panel b{color:var(--ink)}

section.blk{padding:88px 0}
section.blk.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(27px,3.2vw,38px);letter-spacing:-.4px;margin-bottom:14px}
.lead{color:var(--steel);font-size:17px;max-width:640px;margin-bottom:44px}
.lead--wide{max-width:900px}
h3{font-family:var(--disp);font-weight:600;font-size:19px;margin-bottom:8px}

.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);padding:30px 26px;position:relative;transition:border-color .15s,transform .15s,box-shadow .15s}
.card::after{content:"";position:absolute;top:18px;right:18px;width:9px;height:9px;border-radius:50%;background:#CDD2CE;transition:background .15s,box-shadow .15s}
.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,19,21,.08)}
.card:hover::after{background:var(--ledg);box-shadow:0 0 10px rgba(47,214,114,.8)}
.card.soon:hover::after{background:var(--amb);box-shadow:0 0 10px rgba(255,176,0,.8)}
.card .ic{width:44px;height:44px;margin-bottom:18px;color:var(--ink)}
.card:hover .ic{color:var(--amb-d)}
.card p{font-size:14.5px;color:var(--steel)}
.card .more{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--amb-d)}
.card.soon .more{color:var(--steel)}
.card .tag{position:absolute;top:14px;right:36px;font-family:var(--mono);font-size:11px;color:var(--steel);border:1px solid var(--line);padding:2px 7px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{padding:26px;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--amb)}
.step::before{counter-increment:s;content:"KORAK " counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--amb-d);display:block;margin-bottom:12px}
.step p{font-size:14.5px;color:var(--steel)}

.partners{display:flex;gap:54px;align-items:center;justify-content:center;padding:10px 0;flex-wrap:wrap}
.pl{font-family:var(--disp);font-weight:700;font-size:22px;color:#AEB4B8;letter-spacing:1px;transition:color .15s}
.pl:hover{color:var(--ink)}

.ph{background:var(--ink);color:#8B9196;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:260px}
.ph .fp2{position:absolute;inset:0;opacity:.4}
.ph .fp2 circle{stroke:#3d4348}
.ph span{position:relative;font-family:var(--mono);font-size:13px;letter-spacing:.1em;border:1px dashed #4A4F55;padding:8px 14px}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
ul.feat{list-style:none;display:grid;gap:12px}
ul.feat li{padding-left:28px;position:relative;font-size:15.5px}
ul.feat li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;background:var(--amb);clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)}
.hw{display:grid;gap:16px}
.hw .item{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--amb);padding:18px 20px}
.hw .item b{font-family:var(--disp)}
.hw .item span{display:block;font-size:14px;color:var(--steel);margin-top:3px}
/* Više kolona za .hw kad se koristi kao mreža sažetaka, a ne kao bočna lista. */
.hw--3{grid-template-columns:repeat(3,1fr)}
.hw--4{grid-template-columns:repeat(4,1fr)}

/* Kartica proizvoda koja je i link - strelica se pomera na hover kao poziv na klik. */
.prodcard{display:block;color:inherit}
.prodcard .more{transition:transform .15s}
.prodcard:hover .more{transform:translateX(4px)}

/* Tabela tehničke specifikacije. Na uskom ekranu se prelama u dva reda po stavci. */
.spectab-wrap{overflow-x:auto;background:var(--white);border:1px solid var(--line)}
.spectab{width:100%;border-collapse:collapse;font-size:15px}
.spectab th,.spectab td{text-align:left;padding:13px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.spectab tr:last-child th,.spectab tr:last-child td{border-bottom:none}
.spectab th{font-family:var(--disp);font-weight:600;color:var(--ink);width:42%;background:var(--paper)}
.spectab td{color:var(--steel);font-family:var(--mono);font-size:14px}

/* Galerija proizvoda - render na beloj podlozi, za razliku od foto carousela. */
.carousel--prod{background:var(--white)}
.carousel--prod .carousel-slide img{aspect-ratio:4/3;object-fit:contain;padding:12px}

/* Natpis preko slajda. Slike su komponovane sa praznim levim delom baš za ovo -
   tekst ostaje u HTML-u, pa je oštar, prevodiv i čitljiv čitaču ekrana. */
.carousel-slide{position:relative}
.slide-cap{position:absolute;left:0;top:0;bottom:0;width:42%;display:flex;flex-direction:column;justify-content:center;padding:0 6%;pointer-events:none}
.slide-cap b{font-family:var(--disp);font-size:clamp(20px,2.4vw,31px);font-weight:700;letter-spacing:-.4px;color:var(--ink);line-height:1.15}
.slide-cap b::after{content:"";display:block;width:34px;height:3px;background:var(--amb);margin:14px 0 12px}
.slide-cap span{font-size:clamp(13px,1.2vw,16px);color:var(--steel);max-width:30ch}
/* Delovi od kojih se instalacija sastoji - da se sa slajda vidi i OD ČEGA, ne samo GDE. */
.cap-parts{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;pointer-events:auto}
.cap-part{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);background:rgba(255,255,255,.82);border:1px solid var(--line);padding:5px 10px;line-height:1.2;transition:border-color .15s,background .15s}
.cap-part .pic{width:15px;height:15px;color:var(--amb-d);flex:none}
a.cap-part{cursor:pointer}
a.cap-part:hover{border-color:var(--ink);background:#fff}
.cap-go{color:var(--amb-d);font-weight:700;margin-left:1px}

/* Nivoi zaštite - 3x2 mreža kartica, svaka se otvara pojedinačno za više teksta
   (details, radi bez JS-a). align-items:start da otvorena kartica ne rasteže red. */
.lvls{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.lvl{background:var(--white);border:1px solid var(--line);margin:0;transition:border-color .15s,box-shadow .15s}
.lvl[open]{border-color:var(--ink);box-shadow:0 10px 26px rgba(16,19,21,.07)}
.lvl summary{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:start;padding:22px 44px 22px 22px;min-height:118px}
.lvl summary::after{top:24px;right:20px}
.lvl-n{grid-row:span 2;font-family:var(--disp);font-size:30px;font-weight:700;color:var(--amb-d);line-height:.9}
.lvl-t{font-family:var(--disp);font-size:17px;font-weight:600;align-self:center}
.lvl-s{font-size:13.5px;font-weight:400;color:var(--steel);font-family:var(--body);line-height:1.4}
.lvl-body{padding:2px 22px 22px 22px;border-top:1px solid var(--line);margin-top:2px}
.lvl-body p{padding:0;margin:14px 0 0;color:var(--steel);font-size:14.5px}
.lvl-gde,.lvl-nap{font-size:14px}
.lvl-nap{border-left:3px solid var(--line);padding-left:12px}
.lvl-nap b,.lvl-gde b{color:var(--ink)}
.lvl-link{margin-top:16px}
.lvl-link .more{font-family:var(--mono);font-size:13px;color:var(--amb-d)}

/* Prikaz ekrana aplikacije. */
.shot{border:1px solid var(--line);background:var(--white)}
.shot img{width:100%;height:auto}

/* Izbor alarma - kompaktni pill-ovi, grupisani. Naziv se vidi, opis je u title. */
.alrm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 28px}
.alrm-grupa h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel);border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:11px}
.alrm-lista{display:flex;flex-wrap:wrap;gap:7px}
.alrm{cursor:pointer}
.alrm input{position:absolute;opacity:0;width:0;height:0}
.alrm-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--steel);background:var(--white);border:1px solid var(--line);padding:6px 12px 6px 10px;line-height:1.2;transition:border-color .15s,background .15s,color .15s}
.alrm-pill::before{content:"";width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line);flex:none;transition:background .15s,border-color .15s}
.alrm:hover .alrm-pill{border-color:var(--ink);color:var(--ink)}
.alrm input:checked+.alrm-pill{border-color:var(--amb-d);color:var(--ink);background:#FFF9EC}
.alrm input:checked+.alrm-pill::before{background:var(--ledg);border-color:var(--ledg);box-shadow:inset 0 0 0 2px #fff}
.alrm input:focus-visible+.alrm-pill{outline:2px solid var(--amb);outline-offset:2px}
.alrm-zbir{margin-top:30px;background:var(--ink);color:#fff;padding:22px 26px;border-left:3px solid var(--amb)}
.alrm-zbir p{margin-bottom:8px}
.alrm-zbir b{font-family:var(--disp);font-size:17px}
.alrm-spisak{font-family:var(--mono);font-size:13px;color:#C7CCC8;line-height:1.8}
.alrm-zbir .srcnote{color:#8B9490;margin-bottom:0}

/* "Šta radi naš softver": leva lista i desna polja iste visine i poravnati. */
.split--even{align-items:stretch}
.feat--soft li{margin-bottom:14px}
.split--even .hw{grid-auto-rows:1fr}

/* Tehnologije identifikacije - collapsible, više prostora za tekst. */
.teh-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
.teh{background:var(--white);border:1px solid var(--line);margin:0;transition:border-color .15s,box-shadow .15s}
.teh[open]{border-color:var(--ink);box-shadow:0 10px 26px rgba(16,19,21,.07)}
.teh summary{padding:20px 48px 20px 22px;position:relative;list-style:none}
.teh summary::-webkit-details-marker{display:none}
.teh summary::after{content:"+";position:absolute;right:20px;top:20px;font-family:var(--mono);font-size:18px;color:var(--amb-d)}
.teh[open] summary::after{content:"−"}
.teh-t{display:block;font-family:var(--disp);font-size:18px;font-weight:600;color:var(--ink)}
.teh-s{display:block;font-size:14px;color:var(--steel);margin-top:4px}
.teh-body{padding:0 22px 22px;border-top:1px solid var(--line);margin-top:2px}
.teh-body p{font-size:15px;color:var(--steel);margin-top:14px}
.teh-body b{color:var(--ink)}

/* Ilustracija na O nama - slika ispunjava desnu kolonu split-a. */
.aboutshot{overflow:hidden;line-height:0}
.aboutshot img{width:100%;height:100%;object-fit:cover;display:block}

/* Konfigurator paketa (evidencija). */
.pkg-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.pkg-preset{text-align:left;background:var(--white);border:1px solid var(--line);padding:18px 20px;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.pkg-preset:hover{border-color:var(--ink)}
.pkg-preset.active{border-color:var(--amb-d);box-shadow:inset 0 0 0 1px var(--amb-d)}
.pkg-preset b{display:block;font-family:var(--disp);font-size:16px;margin-bottom:5px}
.pkg-preset span{font-size:13.5px;color:var(--steel)}
.pkg{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
.pkg-grupa{margin-bottom:22px}
.pkg-grupa h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel);border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:10px}
.pkg-lista{display:grid;gap:8px}
.pkg-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 14px;background:var(--white);border:1px solid var(--line);cursor:pointer;transition:border-color .15s}
.pkg-item:hover{border-color:var(--ink)}
.pkg-item input{position:absolute;opacity:0;width:0;height:0}
.pkg-box{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--line);margin-top:2px;flex:none;position:relative;transition:background .15s,border-color .15s}
.pkg-item input:checked+.pkg-box{background:var(--ledg);border-color:var(--ledg)}
.pkg-item input:checked+.pkg-box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pkg-item input:focus-visible+.pkg-box{outline:2px solid var(--amb);outline-offset:2px}
.pkg-txt b{display:block;font-family:var(--disp);font-size:15px;font-weight:600}
.pkg-txt>span{display:block;font-size:13.5px;color:var(--steel);margin-top:2px}
.pkg-link{align-self:center;font-family:var(--mono);font-size:12px;color:var(--amb-d);white-space:nowrap}
.pkg-zbir{background:var(--ink);color:#fff;padding:24px 26px;border-left:3px solid var(--amb);position:sticky;top:90px}
.pkg-zbir h3{font-family:var(--disp);font-size:17px;margin-bottom:12px}
.pkg-broj{color:#C7CCC8;font-size:14px;margin-bottom:14px}
.pkg-broj b{font-family:var(--disp);font-size:22px;color:var(--amb);margin-right:4px}
.pkg-spisak{list-style:none;display:grid;gap:6px;margin-bottom:20px}
.pkg-spisak li{font-size:14px;padding-left:18px;position:relative}
.pkg-spisak li::before{content:"✓";position:absolute;left:0;color:var(--ledg);font-size:12px}
.pkg-spisak li.pkg-prazno{color:#8B9490}
.pkg-spisak li.pkg-prazno::before{content:""}
.pkg-cta{width:100%;text-align:center;margin-bottom:12px}
.pkg-zbir .srcnote{color:#8B9490;margin:0}
/* bez JS-a: presetska dugmad nemaju efekta, sakrij ih; komponente ostaju upotrebljive */
html:not(.js) .pkg-presets{display:none}
html:not(.js) .pkg-zbir .pkg-broj,html:not(.js) .pkg-zbir .pkg-spisak{display:none}

/* Samo za čitače ekrana. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:14px;background:var(--white);border:1px solid var(--line);padding:8px 14px;transition:border-color .15s}
.chip:hover{border-color:var(--amb)}

details{background:var(--white);border:1px solid var(--line);margin-bottom:10px}
summary{cursor:pointer;padding:16px 20px;font-family:var(--disp);font-weight:600;font-size:15.5px;list-style:none;position:relative}
summary::after{content:"+";position:absolute;right:18px;font-family:var(--mono);color:var(--amb-d)}
details[open] summary::after{content:"-"}
details[open]{border-left:3px solid var(--amb)}
details p{padding:0 20px 16px;color:var(--steel);font-size:15px}

.ctaband{background:linear-gradient(180deg,var(--ink) 0%,var(--ink2) 100%);color:var(--white);position:relative;overflow:hidden;border-top:6px solid var(--amb)}
.ctaband .fp{position:absolute;left:-160px;top:50%;transform:translateY(-50%);width:520px;height:520px;opacity:.5}
.ctaband .fp circle{stroke:var(--amb)}
.ctaband .wrap{position:relative;padding:76px 24px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ctaband h2{margin-bottom:6px}
.ctaband p{color:#BFC5C9}

table{width:100%;border-collapse:collapse;background:var(--white);font-size:14.5px}
th,td{border:1px solid var(--line);padding:12px 14px;text-align:left}
th{font-family:var(--disp);font-size:14px;background:var(--paper)}
td:first-child{font-family:var(--mono);font-size:13.5px;white-space:nowrap;color:var(--amb-d)}

form.contact{display:grid;gap:16px;grid-template-columns:1fr 1fr;background:var(--white);border:1px solid var(--line);padding:34px}
form.contact .full{grid-column:1/-1}
label{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:6px}
input,select,textarea{width:100%;font-family:var(--body);font-size:15px;padding:12px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amb);outline-offset:0;border-color:var(--amb)}
textarea{min-height:130px;resize:vertical}

/* Oblast interesovanja - višestruki izbor kroz pill checkboxove (radi bez JS-a). */
.lbl{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:10px}
.lbl em{font-style:normal;color:var(--amb-d);text-transform:none;letter-spacing:0}
.areapick{border:1px solid var(--line);background:var(--paper);padding:14px 16px}
.areagrp{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:12px 0 7px}
.areagrp:first-child{margin-top:0}
.areawrap{display:flex;flex-wrap:wrap;gap:7px}
.area{display:inline-block;margin:0;cursor:pointer}
.area input{position:absolute;opacity:0;width:0;height:0}
.area-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--steel);background:var(--white);border:1px solid var(--line);padding:6px 12px 6px 10px;line-height:1.25;transition:border-color .15s,background .15s,color .15s}
.area-pill::before{content:"";width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line);flex:none;transition:background .15s,border-color .15s}
.area:hover .area-pill{border-color:var(--ink);color:var(--ink)}
.area input:checked+.area-pill{border-color:var(--amb-d);color:var(--ink);background:#FFF9EC}
.area input:checked+.area-pill::before{background:var(--ledg);border-color:var(--ledg);box-shadow:inset 0 0 0 2px #fff}
.area input:focus-visible+.area-pill{outline:2px solid var(--amb);outline-offset:2px}

footer{background:var(--ink2);color:#AEB4B8}
.f-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:64px 24px 44px}
footer h4{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#787f86;margin-bottom:16px}
footer a{display:block;padding:4px 0;font-size:14.5px}
footer a:hover{color:var(--amb)}
.f-brand{font-family:var(--disp);font-weight:700;color:var(--white);font-size:19px;display:flex;gap:10px;align-items:center;margin-bottom:14px}
.f-brand .mark{width:34px;height:34px}
footer .small{font-size:13.5px;line-height:1.8}
.f-bot{border-top:1px solid #24292C;padding:20px 24px;font-family:var(--mono);font-size:12.5px;color:#787f86;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.crumb{font-family:var(--mono);font-size:12.5px;color:#8B9196;margin-bottom:20px}
.crumb a{color:#8B9196}
.crumb a:hover{color:var(--amb)}

@media(max-width:960px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .hw--3,.hw--4{grid-template-columns:repeat(2,1fr)}
  .alrm-grid{grid-template-columns:repeat(2,1fr)}
  .lvls{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .f-in{grid-template-columns:1fr 1fr}
  .nav ul{display:none}
}
@media(max-width:640px){
  .g2,.g3,.g4,.steps{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:1fr}
  .t-item{border-left:none;border-top:1px solid var(--line)}
  form.contact{grid-template-columns:1fr}
  .lvls,.alrm-grid,.teh-lista{grid-template-columns:1fr}
  .pkg{grid-template-columns:1fr}
  .pkg-presets{grid-template-columns:1fr}
  .pkg-zbir{position:static}
  .hero .fp{opacity:.25}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.hero .fp circle{stroke-dashoffset:0!important}}

/* ==========================================================================
   DODATO PRI PRENOSU (nije bilo u prototipu)
   - hero modifikatori (slike izvučene iz base64 u /static/img)
   - mobilna navigacija (hamburger)
   - pristupačnost (skip-link, vidljiv fokus)
   ========================================================================== */

/* --- HERO: naslovna (horizontalni gradijent + slika desno) --- */
.hero--home{
  background:linear-gradient(90deg,#101315 0%,#101315 34%,rgba(16,19,21,.86) 52%,rgba(16,19,21,.30) 78%,rgba(16,19,21,.15) 100%),
  url('/static/img/hero.webp') right center / cover no-repeat #101315;
}
.hero--home .fp{opacity:.28}

/* --- Podstranice: hero slika kao <img> u .hero-media --- */
.hero-media{width:100%;height:380px;object-fit:cover;display:block}

/* --- Skip link (a11y) --- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--white);font-family:var(--mono);font-size:14px;padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* --- Vidljiv fokus na tastaturi --- */
a:focus-visible,button:focus-visible,summary:focus-visible,.lang a:focus-visible{outline:2px solid var(--amb);outline-offset:3px}

/* --- Mobilna navigacija (hamburger) --- */
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.navtoggle svg{width:22px;height:22px}
.mobnav{display:none}

@media(max-width:960px){
  .navtoggle{display:inline-flex}
  /* desktop meni sakriven na mobilnom (već u prototipu: .nav ul{display:none}) */
  .mobnav{display:none;position:fixed;inset:72px 0 0 0;z-index:49;background:var(--paper);border-top:1px solid var(--line);padding:14px 24px;overflow-y:auto}
  .mobnav.open{display:block}
  body.nav-open{overflow:hidden}
  .mobnav a{display:block;padding:14px 0;font-family:var(--disp);font-weight:600;font-size:18px;border-bottom:1px solid var(--line)}
  .mobnav a.sub{font-family:var(--body);font-weight:500;font-size:15.5px;padding-left:16px;color:var(--steel)}
  .mobnav .grp{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amb-d);margin-top:18px;margin-bottom:2px}
  .mobnav .mlang{margin-top:22px;font-family:var(--mono);font-size:14px}
  .mobnav .btn{margin-top:20px;width:100%;text-align:center}
}

/* --- Kontakt forma: poruke, greške, honeypot --- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.err{display:block;margin-top:6px;font-family:var(--mono);font-size:12.5px;color:var(--ledr)}
input.err,textarea.err{border-color:var(--ledr)}
.formok{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--ledg);padding:28px 26px}
.formok b{font-family:var(--disp);font-size:20px;display:block;margin-bottom:6px}
.formok p{color:var(--steel)}
.formerr{background:#fff;border:1px solid var(--ledr);color:var(--ledr);padding:14px 18px;margin-bottom:16px;font-size:14.5px}

/* --- Mapa (OpenStreetMap embed) --- */
.mapwrap{border:1px solid var(--line);overflow:hidden;line-height:0;background:var(--paper)}
.mapframe{width:100%;height:300px;border:0;display:block}
.maplink{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:13px;color:var(--amb-d)}

/* --- Prikaz proizvoda (slike opreme na beloj podlozi) --- */
.prodshot{background:var(--white);border-bottom:1px solid var(--line);height:210px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:-30px -26px 18px}
.prodshot img{width:100%;height:100%;object-fit:contain;padding:16px}
.card .prodshot+h3{margin-top:0}
.srcnote{font-family:var(--mono);font-size:12px;color:var(--steel);margin-top:22px}

/* --- Carousel (galerija instalacija) --- */
.carousel{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--ink)}
.carousel-viewport{overflow:hidden}
.carousel-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.carousel-slide{min-width:100%}
.carousel-slide img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;background:rgba(16,19,21,.55);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:24px;line-height:1;transition:background .15s,color .15s}
.carousel-btn:hover{background:var(--amb);color:var(--ink);border-color:var(--amb)}
.carousel-prev{left:14px}
.carousel-next{right:14px}
.carousel-dots{position:absolute;bottom:16px;left:0;right:0;display:flex;gap:8px;justify-content:center}
.carousel-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);border:0;cursor:pointer;padding:0;transition:width .2s,background .2s}
.carousel-dot.active{background:var(--amb);width:22px;border-radius:5px}
@media(max-width:640px){
  .carousel-btn{width:38px;height:38px;font-size:20px}
  .slide-cap{position:static;width:auto;padding:16px 18px 20px;background:var(--white);border-top:1px solid var(--line)}
  .slide-cap span{max-width:none}
  .lvl summary{padding:16px 44px 16px 18px}
  .lvl-body{padding:0 18px 18px 18px}
}
@media(prefers-reduced-motion:reduce){.carousel-track{transition:none}}