/* ===================== FONTS ===================== */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/big-shoulders-display-900-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;}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/big-shoulders-display-900-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/public-sans-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;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/public-sans-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;}

@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/public-sans-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;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/public-sans-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/public-sans-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;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/public-sans-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;}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(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;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(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;}

/* ===================== TOKENS ===================== */
:root{
  color-scheme: light;
  --ink:#20180f;
  --ink-soft:#4a3f30;
  --paper:#eee6d2;
  --paper-high:#f7f2e4;
  --paper-line: rgba(32,24,15,.14);
  --surface:#ffffff;
  --honey:#dc9a1c;
  --honey-deep:#a86a12;
  --honey-ink:#3a2a08;
  --charcoal:#1c1710;
  --charcoal-2:#2a2317;
  --moss:#5b6a3d;
  --danger:#b3401f;

  --bg:var(--paper);
  --bg-elevated:var(--paper-high);
  --surface-1:var(--surface);
  --text:var(--ink);
  --text-muted:var(--ink-soft);
  --line:var(--paper-line);
  --accent:var(--honey);
  --accent-deep:var(--honey-deep);
  --accent-ink:var(--honey-ink);
  --on-accent:#20180f;
  --header-bg: rgba(238,230,210,.82);
  --shadow: 0 1px 2px rgba(28,20,10,.06), 0 8px 24px -12px rgba(28,20,10,.18);

  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  --space-1: .4rem;
  --space-2: .8rem;
  --space-3: 1.3rem;
  --space-4: 2.1rem;
  --space-5: 3.4rem;
  --space-6: 5.5rem;
  --space-7: 8.9rem;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
  --container: 1180px;
  --dur-1: 160ms;
  --dur-2: 280ms;
  --ease: cubic-bezier(.3,.7,.2,1);
  --spring: cubic-bezier(.22,1.28,.36,1);
  --spring-soft: cubic-bezier(.24,1.08,.4,1);
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:var(--charcoal);
    --bg-elevated:var(--charcoal-2);
    --surface-1:var(--charcoal-2);
    --text:#f1e9d6;
    --text-muted:#b8a98c;
    --line: rgba(241,233,214,.14);
    --accent:var(--honey);
    --accent-deep:#f0b73f;
    --accent-ink:#1a1204;
    --on-accent:#1a1204;
    --header-bg: rgba(28,23,16,.78);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:var(--charcoal);
  --bg-elevated:var(--charcoal-2);
  --surface-1:var(--charcoal-2);
  --text:#f1e9d6;
  --text-muted:#b8a98c;
  --line: rgba(241,233,214,.14);
  --accent:var(--honey);
  --accent-deep:#f0b73f;
  --accent-ink:#1a1204;
  --on-accent:#1a1204;
  --header-bg: rgba(28,23,16,.78);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:var(--paper);
  --bg-elevated:var(--paper-high);
  --surface-1:var(--surface);
  --text:var(--ink);
  --text-muted:var(--ink-soft);
  --line:var(--paper-line);
  --accent:var(--honey);
  --accent-deep:var(--honey-deep);
  --accent-ink:var(--honey-ink);
  --on-accent:#20180f;
  --header-bg: rgba(238,230,210,.82);
  --shadow: 0 1px 2px rgba(28,20,10,.06), 0 8px 24px -12px rgba(28,20,10,.18);
}

/* ===================== RESET / BASE ===================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:900;}
p{margin:0;}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;}
::selection{background:var(--accent);color:var(--on-accent);}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
html{scroll-behavior:smooth;}
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:200;background:var(--accent);color:var(--on-accent);
  padding:.7rem 1.1rem;border-radius:var(--radius-s);font-weight:700;transition:top var(--dur-1) var(--ease);
}
.skip-link:focus{top:1rem;}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.5rem);}

.eyebrow{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);display:inline-flex;align-items:center;gap:.6em;font-weight:500;
}
.eyebrow::before{content:"";width:1.6em;height:1.5px;background:currentColor;display:block;}

.hexline{
  height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M7 0 L21 0 L28 7 L21 14 L7 14 L0 7 Z' fill='none' stroke='%23dc9a1c' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:28px 14px;opacity:.6;
}

/* ===================== HEADER ===================== */
header.site{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
header.site.is-scrolled{box-shadow:var(--shadow);}
.nav{display:flex;align-items:stretch;padding-block:.9rem;padding-right:1rem;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:1;min-width:0;}
.wordmark{
  font-family:var(--display);font-weight:900;font-size:1.6rem;letter-spacing:.01em;line-height:1;
  display:flex;align-items:baseline;gap:.35em;text-decoration:none;white-space:nowrap;
}
.brand-logo{
  display:block;height:30px;aspect-ratio:4470/1820;flex:none;
  background-color:var(--text);
  -webkit-mask-image:url('SMSVaga-logo-maska.png');mask-image:url('SMSVaga-logo-maska.png');
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color var(--dur-1) var(--ease);
}
.wordmark:hover .brand-logo{background-color:var(--accent-deep);}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2rem);list-style:none;margin:0;padding:0;}
.nav-links a{
  text-decoration:none;font-weight:600;font-size:.95rem;color:var(--text-muted);
  padding-block:.3rem;border-bottom:2px solid transparent;transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav-links a:hover{color:var(--text);border-color:var(--accent);}
.nav-actions{display:flex;align-items:center;gap:.9rem;}
.btn{
  --btn-bg:var(--accent);--btn-fg:var(--on-accent);
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;
  padding:.72rem 1.3rem;border-radius:999px;border:1px solid transparent;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:transform .45s var(--spring), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  touch-action:manipulation;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(180,120,10,.55);}
.btn:active{transform:translateY(0) scale(.96);transition-duration:.15s;}
.btn.ghost{--btn-bg:transparent;--btn-fg:var(--text);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--accent);box-shadow:none;}
.btn.ghost.on-dark{--btn-fg:#f4ecd8;border-color:rgba(244,236,216,.3);}
.btn.ghost.on-dark:hover{border-color:var(--accent);}
.btn svg{width:1.1em;height:1.1em;flex:none;}
.btn.shop{
  --btn-bg:var(--charcoal);--btn-fg:#f4ecd8;
  border-color:rgba(220,154,28,.4);
  font-weight:800;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;
}
.btn.shop:hover{--btn-bg:var(--charcoal-2);}
.btn.shop svg{color:var(--accent);}
.btn.shop.nav-edge{
  align-self:center;
}
.burger{
  display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-s);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;
}
.burger svg{width:22px;height:22px;}

.mobile-panel{
  display:none;flex-direction:column;gap:.2rem;padding:.5rem clamp(1.2rem,4vw,2.5rem) 1.2rem;
  border-bottom:1px solid var(--line);background:var(--bg-elevated);
}
.mobile-panel a{
  text-decoration:none;color:var(--text);font-weight:600;padding:.85rem .2rem;border-bottom:1px solid var(--line);
}
.mobile-panel a:last-child{border-bottom:none;}
body.nav-open .mobile-panel{display:flex;}

@media (max-width:860px){
  .nav-links{display:none;}
  .burger{display:inline-flex;}
  .nav-actions .btn.ghost:not(.nav-call){display:none;}
}
@media (max-width:560px){
  .nav-actions{gap:.5rem;}
  .nav-actions .btn{padding:.65rem;gap:0;}
  .nav-actions .btn .btn-label{display:none;}
  .nav-actions .btn svg{width:1.3em;height:1.3em;}
  .btn.shop.nav-edge{padding-inline:.9rem;gap:0;}
  .btn.shop.nav-edge .btn-label{display:none;}
  .btn.shop.nav-edge svg{width:1.3em;height:1.3em;}
}

/* ===================== HERO ===================== */
.hero{position:relative;overflow:clip;background:var(--charcoal);color:#f4ecd8;}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;min-height:min(88vh,780px);
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);
  padding:var(--space-6) clamp(1.2rem,4vw,3rem) var(--space-6) clamp(1.2rem,4vw,2.5rem);
  position:relative;z-index:3;
}
.hero-copy .eyebrow{color:var(--accent);}
.hero h1{
  font-family:var(--display);font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:.96;
  text-transform:uppercase;letter-spacing:.005em;color:#fbf3df;
}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-lead{max-width:46ch;font-size:clamp(1.02rem,1.6vw,1.18rem);color:#d9cbab;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.4rem;}
.hero-phones{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.6rem;font-family:var(--mono);font-size:.92rem;color:#c9b990;}
.hero-phones a{text-decoration:none;color:inherit;border-bottom:1px dotted rgba(255,255,255,.35);}
.hero-phones a:hover{color:#fbf3df;border-color:currentColor;}
/* Traka sa brojkama vise ne stoji u heroju. Hero nosi jednu poruku i jednu
   akciju; dokazi dolaze odmah ispod, kao zasebna traka na pozadini stranice. */
.stat-band{border-bottom:1px solid var(--line);background:var(--bg-elevated);}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  padding-block:var(--space-3);
}
.hstat{display:flex;flex-direction:column;gap:.15rem;}
.hstat-num{font-family:var(--mono);font-size:1.35rem;color:var(--accent-deep);font-weight:500;font-variant-numeric:tabular-nums;}
.hstat-lbl{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
@media (max-width:720px){
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:1.1rem;}
}

.hero-media{position:relative;}
.hero-media img,.hero-media video{
  width:100%;height:100%;object-fit:cover;object-position:70% 38%;
  filter:saturate(1.02) contrast(1.03);
  will-change:transform;
}
.hero-media::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, var(--charcoal) 0%, rgba(28,23,16,.35) 30%, rgba(28,23,16,0) 55%);
  z-index:2;
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(28,23,16,.55), rgba(28,23,16,0) 34%);
  z-index:2;
}

.signal-card{
  position:absolute;left:clamp(-40px,-2vw,-10px);bottom:clamp(1.4rem,4vw,3rem);z-index:4;
  /* Card sits on the dark hero and is always light: pin its own tokens so it
     never inherits the dark-theme text color onto a cream surface. */
  --text:#20180f;
  --text-muted:#4a3f30;
  --line:rgba(32,24,15,.14);
  --accent-deep:#a86a12;
  background:#fffdf7;color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius-m);box-shadow:var(--shadow);
  padding:1.1rem 1.3rem;min-width:250px;
}
.signal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;}
.signal-head .live{
  display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--moss);
}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:#6f8a3f;position:relative;flex:none;}
.pulse-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #6f8a3f;
  animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:.9;}100%{transform:scale(1.9);opacity:0;}}
.signal-rows{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.signal-rows .full{grid-column:1/-1;}
.signal-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);}
.signal-value{font-family:var(--mono);font-size:1.2rem;font-weight:500;}
.signal-note{
  margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line);
  font-size:.82rem;color:var(--text-muted);display:flex;gap:.5em;align-items:flex-start;
}
.signal-note svg{width:1.1em;height:1.1em;flex:none;margin-top:.1em;color:var(--accent-deep);}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;min-height:auto;}
  .hero-copy{padding:var(--space-5) clamp(1.2rem,4vw,2.5rem) var(--space-4);}
  .hero-media{min-height:340px;}
  .signal-card{position:relative;left:0;bottom:0;margin:-3rem 1rem 0;min-width:0;}
}
@media (max-width:420px){
  .signal-rows{grid-template-columns:1fr 1fr;}
  .signal-card{margin-inline:.6rem;}
}

/* ===================== SECTION SCAFFOLD ===================== */
section{padding-block:var(--space-6);position:relative;}
.section-head{max-width:64ch;margin-bottom:var(--space-5);}
.section-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.02;margin-top:.5rem;}
.section-head p{margin-top:.9rem;color:var(--text-muted);font-size:1.05rem;max-width:56ch;}
.reveal{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .6s var(--ease), transform .8s var(--spring);}
.reveal.in{opacity:1;transform:none;}

/* ===================== WHY / PAIN-SOLUTION ===================== */
.why{background:var(--bg);}
/* Obe kolone nose po cetiri stavke koje se poklapaju jedna-na-jednu
   (vožnja↔stiže samo, krađa↔alarm, zima↔zima, Wi-Fi↔GSM). Kolone se
   razvlace na istu visinu, a liste su mreze sa cetiri jednaka reda, pa
   se parovi poravnaju u istoj liniji umesto da desna kolona zavrsi vise
   i ostavi prazninu ispod sebe. */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:stretch;}
.why-col{display:flex;flex-direction:column;}
.why-col .why-list{flex:1;}
.why-col h3{font-family:var(--display);text-transform:uppercase;font-size:1.5rem;margin-bottom:.6rem;}
.why-col.old{color:var(--text-muted);}
.why-col.old h3{color:var(--text-muted);}
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;gap:.85rem;align-content:start;}
.why-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;}
.why-list svg{width:1.3rem;height:1.3rem;flex:none;margin-top:.15rem;}
.why-col.old svg{color:var(--danger);}
.why-col.new svg{color:var(--moss);}
.why-col.new h3{color:var(--text);}
@media (max-width:760px){
  .why-grid{grid-template-columns:1fr;gap:var(--space-4);}
  /* Jedna ispod druge — poravnanje redova vise nema smisla. */
  .why-list{grid-auto-rows:auto;}
}

/* ===================== DEVICE / PRODUCT ===================== */
.device{background:var(--bg-elevated);border-block:1px solid var(--line);}
.device-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-5);align-items:start;}
.device-photo{position:relative;}
.device-photo .frame{
  border-radius:var(--radius-l);overflow:hidden;background:var(--bg-elevated);border:1px solid var(--line);box-shadow:var(--shadow);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:1.6rem;
}
.device-photo img{width:100%;height:100%;object-fit:contain;transition:opacity .25s var(--ease);}
.finish-picker{display:flex;width:100%;gap:.6rem;margin-top:1.1rem;}
.finish-btn{
  flex:1;text-align:center;
  font-family:var(--body);font-size:.85rem;font-weight:600;padding:.5rem .6rem;border-radius:999px;
  border:1px solid var(--line);background:var(--bg-elevated);color:var(--text-muted);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.finish-btn:hover{border-color:var(--accent-deep);color:var(--text);}
.finish-btn.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.angle-picker{display:flex;justify-content:center;gap:.7rem;margin-top:.8rem;}
.angle-btn{
  width:2rem;height:2rem;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--bg-elevated);
  color:var(--text-muted);font-family:var(--mono);font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.angle-btn:hover{border-color:var(--accent-deep);color:var(--text);}
.angle-btn.is-active{background:var(--charcoal);border-color:var(--charcoal);color:var(--accent);}
.gen-tag{
  position:absolute;top:-14px;left:20px;background:var(--charcoal);color:var(--accent);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;padding:.4rem .8rem;border-radius:999px;
  border:1px solid rgba(220,154,28,.5);
}
.spec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;}
.spec-list li{
  display:grid;grid-template-columns:28px 1fr;gap:.8rem;padding-block:.75rem;border-top:1px solid var(--line);
}
.spec-list li:first-child{border-top:none;}
.spec-list svg{width:22px;height:22px;color:var(--accent-deep);}
.spec-list strong{display:block;font-size:1rem;margin-bottom:.15rem;}
.spec-list span{color:var(--text-muted);font-size:.94rem;}
.badge-chip{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.78rem;
  padding:.45rem .8rem;border:1px solid var(--line);border-radius:999px;color:var(--text-muted);
}
.badge-chip svg{width:1rem;height:1rem;}
@media (max-width:860px){.device-grid{grid-template-columns:1fr;}}

/* ===================== SPECS TABLE ===================== */
.specs{background:var(--bg);}
.specs-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-5);align-items:start;}
.specs-layout>div{min-width:0;}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg-elevated);}
.spec-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px;}
.spec-table caption{text-align:left;padding:1rem 1.1rem 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.spec-table th,.spec-table td{padding:.55rem 1.1rem;text-align:left;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;}
.spec-table thead th{border-top:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600;}
.spec-table tbody th{font-weight:700;font-family:var(--body);white-space:nowrap;}
/* Jedanaest redova sa linijom ispod svakog je najlenja moguca tabela.
   Redovi su grupisani u tri celine; linija stoji samo iznad naslova grupe,
   a redovi se razdvajaju razmakom. */
.spec-facts-wrap{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-3);}
.spec-group + .spec-group{margin-top:var(--space-2);}
.spec-group-title{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--accent-deep);margin:0 0 .5rem;padding-top:.7rem;border-top:1px solid var(--line);
}
.spec-group:first-child .spec-group-title{border-top:none;padding-top:0;}
.spec-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;}
.spec-facts li{display:grid;grid-template-columns:1fr auto;gap:1rem;padding-block:.2rem;align-items:baseline;}
.spec-facts .fk{color:var(--text-muted);font-size:.92rem;}
.spec-facts .fv{font-family:var(--mono);font-weight:500;text-align:right;font-variant-numeric:tabular-nums;}
@media (max-width:860px){.specs-layout{grid-template-columns:1fr;}}

/* ===================== ALARM / ZAŠTITA ===================== */
.alarm{background:var(--bg-elevated);border-block:1px solid var(--line);}
.alarm-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:start;}
.alarm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.alarm-list li{display:flex;gap:.9rem;align-items:flex-start;}
.alarm-list .ai{width:2.3rem;height:2.3rem;border-radius:9px;background:color-mix(in srgb, var(--danger) 14%, transparent);color:var(--danger);display:flex;align-items:center;justify-content:center;flex:none;}
.alarm-list .ai svg{width:1.2rem;height:1.2rem;}
.alarm-list strong{display:block;font-size:1rem;margin-bottom:.15rem;}
.alarm-list span{color:var(--text-muted);font-size:.94rem;}
.sms-card-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-top:var(--space-4);}
.sms-card-row .sms-card{flex:1 1 380px;max-width:420px;}
.sms-card{
  background:var(--charcoal);color:#e7dcc0;border-radius:var(--radius-m);padding:1.3rem 1.4rem;
  font-family:var(--mono);font-size:.86rem;line-height:1.65;box-shadow:var(--shadow);
}
.sms-card .sms-head{display:flex;align-items:center;gap:.5em;color:#8fae55;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem;}
.sms-card .sms-head svg{width:1rem;height:1rem;}
.sms-card .sms-line{white-space:pre-wrap;}
.sms-card .sms-warn{color:#e2a15a;margin-top:.8rem;padding-top:.8rem;border-top:1px dashed rgba(231,220,192,.15);}
@media (max-width:860px){.alarm-grid{grid-template-columns:1fr;gap:var(--space-4);}}

/* ===================== HOW IT WORKS ===================== */
.how{background:var(--bg);}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);counter-reset:step;}
.step{position:relative;padding:var(--space-4) var(--space-3) var(--space-3);background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-m);}
.step-num{
  font-family:var(--display);font-size:3.4rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.4px var(--accent-deep);opacity:.55;position:absolute;top:.5rem;right:1rem;
}
.step h3{font-family:var(--display);text-transform:uppercase;font-size:1.35rem;margin:.3rem 0 .6rem;position:relative;z-index:1;}
.step p{color:var(--text-muted);font-size:.96rem;position:relative;z-index:1;}
.step-icon{width:2.6rem;height:2.6rem;border-radius:10px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;}
.step-icon svg{width:1.4rem;height:1.4rem;}
.step-connector{
  display:none;
}
@media (min-width:861px){
  .how-grid{position:relative;}
}
@media (max-width:860px){.how-grid{grid-template-columns:1fr;}}
.how-note{
  display:flex;gap:.8rem;align-items:flex-start;margin-top:var(--space-4);
  padding:1.1rem 1.3rem;background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid var(--line);border-radius:var(--radius-m);
}
.how-note svg{width:1.3rem;height:1.3rem;flex:none;margin-top:.15rem;color:var(--accent-deep);}
.how-note p{color:var(--text-muted);font-size:.95rem;}
.how-note strong{color:var(--text);}

/* ===================== APP MOCKUP ===================== */
.app{background:var(--charcoal);color:#f4ecd8;overflow:clip;position:relative;}
.app::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='72' viewBox='0 0 84 72'%3E%3Cpath d='M21 0 L63 0 L84 36 L63 72 L21 72 L0 36 Z' fill='none' stroke='%23f4ecd8' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  background-size:84px 72px;
}
.app .wrap{position:relative;z-index:1;}
.app-grid{display:grid;grid-template-columns:1fr .82fr;gap:var(--space-5);align-items:center;}
.app-copy .eyebrow{color:var(--accent);}
.app-copy h2{color:#fbf3df;}
.app-copy p{color:#d9cbab;margin-top:1rem;max-width:48ch;}
.app-points{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.app-points li{display:flex;gap:.7rem;align-items:flex-start;color:#e7dcc0;font-size:.98rem;}
.app-points svg{width:1.25rem;height:1.25rem;flex:none;margin-top:.15rem;color:var(--accent);}
.app-caption{margin-top:1.4rem;font-family:var(--mono);font-size:.78rem;color:#a4936c;}
.app-novosti{margin-top:1rem;font-size:.88rem;}
.app-novosti a{color:#a4936c;text-decoration:underline;text-underline-offset:3px;}
.app-novosti a:hover{color:var(--honey,#dc9a1c);}

.store-cards{display:flex;flex-wrap:wrap;gap:1.8rem;margin-top:1.8rem;justify-content:center;}
.store-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:1.5rem 1.3rem;width:200px;flex:none;
  border:1px solid rgba(244,236,216,.16);border-radius:var(--radius-m);
  background:rgba(244,236,216,.04);
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.store-card:hover{border-color:var(--accent);background:rgba(244,236,216,.07);}
.store-card-head{display:flex;flex-direction:column;align-items:center;gap:.6rem;}
.store-icon{width:2.8rem;height:2.8rem;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.store-icon svg{width:1.4rem;height:1.4rem;}
.store-icon--android{background:rgba(61,220,132,.16);color:#3ddc84;}
.store-icon--ios{background:rgba(244,236,216,.12);color:#f4ecd8;}
.store-card-head strong{display:block;font-size:.94rem;font-weight:700;color:#f4ecd8;letter-spacing:.01em;}
.store-card-head span{display:block;font-size:.74rem;color:#a4936c;margin-top:.1rem;}
.qr-box{width:100%;aspect-ratio:1;background:#f4ecd8;border-radius:10px;padding:8px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}
.qr-box svg{width:100%;height:100%;display:block;}
.store-card-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-size:.82rem;font-weight:700;color:#f4ecd8;text-decoration:none;text-align:center;
  padding:.6rem .8rem;border-radius:999px;border:1px solid rgba(244,236,216,.25);
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.store-card-link:hover{border-color:var(--accent);background:rgba(244,236,216,.08);}
@media (max-width:480px){.store-cards{flex-direction:column;}.store-card{width:100%;}}

/* ===================== DOCS ===================== */
.proba-traka{background:var(--charcoal);color:#f4ecd8;border-radius:22px;padding:clamp(1.3rem,3vw,2rem);margin:0 0 2.2rem;box-shadow:0 18px 40px -22px rgba(28,23,16,.6);}
.proba-glava{margin-bottom:1.2rem;}
.proba-oznaka{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--honey);margin-bottom:.45rem;}
.proba-glava p{margin:0;max-width:62ch;color:rgba(244,236,216,.82);font-size:1rem;line-height:1.55;}
.proba-plocice{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.proba-plocica{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem 1.25rem;border-radius:16px;background:var(--charcoal-2);border:1px solid rgba(220,154,28,.35);color:inherit;text-decoration:none;transition:transform .25s,border-color .25s,background .25s;}
.proba-plocica:hover{transform:translateY(-3px);border-color:var(--honey);background:#332a1b;}
.proba-ikona{width:52px;height:52px;border-radius:14px;background:var(--honey);color:var(--charcoal);display:grid;place-items:center;flex:none;}
.proba-ikona svg{width:30px;height:30px;}
.proba-tekst h3{font-size:1.2rem;margin:0 0 .25rem;color:#fff;}
.proba-tekst p{margin:0;color:rgba(244,236,216,.75);font-size:.93rem;line-height:1.5;}
.proba-dugme{margin-top:auto;display:inline-flex;width:max-content;max-width:100%;align-items:center;justify-content:center;gap:.5em;align-self:flex-start;background:var(--honey);color:var(--on-accent);font-weight:800;padding:.75em 1.3em;border-radius:999px;font-size:.98rem;white-space:nowrap;line-height:1.2;}
.proba-dugme svg{width:1.1em;height:1.1em;}
.proba-vodic{display:inline-block;margin-top:1.1rem;color:var(--honey);font-weight:700;font-size:.95rem;text-underline-offset:3px;}
.docs-podnaslov{font-size:1.05rem;margin:0 0 1rem;color:var(--text-muted);font-weight:700;letter-spacing:.02em;}
@media (max-width:760px){.proba-plocice{grid-template-columns:1fr;}.proba-dugme{align-self:stretch;}}
.novo-mreza{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.novo-stavka{background:var(--surface-1);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.25rem;}
.novo-stavka h3{font-size:1.08rem;margin:.45rem 0 .35rem;}
.novo-stavka p{margin:0;font-size:.93rem;line-height:1.55;color:var(--text-muted);}
.novo-oznaka{display:inline-block;font-size:.72rem;font-weight:700;color:var(--accent-deep);background:rgba(220,154,28,.12);padding:.2em .6em;border-radius:6px;}
.novo-napomena{margin:1rem 0 0;font-size:.88rem;color:var(--text-muted);}
.novo-napomena a{color:var(--accent-deep);font-weight:700;}
@media (max-width:960px){.novo-mreza{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.novo-mreza{grid-template-columns:1fr;}}
.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;}
.doc-card{
  display:flex;flex-direction:column;gap:.9rem;padding:1.7rem;
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-m);
  text-decoration:none;color:var(--text);
  transition:transform .45s var(--spring), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.doc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-deep);}
.doc-icon{width:2.8rem;height:2.8rem;border-radius:10px;background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:none;}
.doc-icon svg{width:1.5rem;height:1.5rem;}
.doc-body h3{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;}
.doc-body p{color:var(--text-muted);font-size:.92rem;margin-top:.4rem;}
.doc-cta{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.9rem;color:var(--accent-deep);margin-top:auto;}
.doc-cta svg{width:1.1em;height:1.1em;}
@media (max-width:760px){.docs-grid{grid-template-columns:1fr;}}

.phone{
  width:min(300px,78vw);margin-inline:auto;border-radius:38px;background:#0f0c07;
  border:6px solid #0f0c07;box-shadow:0 30px 70px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;position:relative;
}
.phone-notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);width:38%;height:22px;
  background:#0f0c07;border-radius:0 0 14px 14px;z-index:5;
}
.phone-screen{background:#211a10;padding:2.4rem 1.1rem 1.3rem;min-height:520px;display:flex;flex-direction:column;gap:1rem;}
.phone-topbar{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.7rem;color:#cbb98d;}
.phone-topbar .icons{display:flex;gap:.4rem;align-items:center;}
.phone-topbar svg{width:14px;height:14px;}
.phone-card{background:#2a2115;border:1px solid rgba(244,236,216,.09);border-radius:16px;padding:1rem 1.1rem;}
.phone-card h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#a4936c;font-weight:600;margin:0 0 .5rem;}
.phone-weight{display:flex;align-items:baseline;gap:.5rem;}
.phone-weight .num{font-family:var(--mono);font-size:2.1rem;color:#fbf3df;font-weight:500;}
.phone-weight .unit{font-family:var(--mono);font-size:.95rem;color:#a4936c;}
.phone-delta{display:inline-flex;align-items:center;gap:.3em;font-family:var(--mono);font-size:.78rem;color:#8fae55;margin-top:.35rem;}
.phone-delta svg{width:12px;height:12px;}
.phone-spark{margin-top:.7rem;}
.phone-metrics{display:grid;grid-template-columns:1fr;gap:.55rem;}
.phone-metric{display:flex;align-items:center;gap:.55rem;}
.phone-metric>span{min-width:0;}
.phone-metric svg{width:1.1rem;height:1.1rem;color:var(--accent);flex:none;}
.phone-metric .v{font-family:var(--mono);font-size:.8rem;color:#f1e9d6;display:block;overflow-wrap:break-word;}
.phone-metric .l{font-size:.66rem;color:#a4936c;text-transform:uppercase;letter-spacing:.06em;}
.phone-metric-goal{margin-left:auto;flex:none;}
.phone-feed{display:flex;flex-direction:column;gap:.55rem;}
.phone-feed .row{display:flex;justify-content:space-between;gap:.6rem;font-size:.78rem;padding-block:.4rem;border-top:1px dashed rgba(244,236,216,.1);}
.phone-feed .row:first-child{border-top:none;}
.phone-feed .row span:first-child{color:#e7dcc0;}
.phone-feed .row span:last-child{color:#8a7c5c;font-family:var(--mono);font-size:.72rem;white-space:nowrap;}
@media (max-width:860px){.app-grid{grid-template-columns:1fr;}.app-copy{order:2;}}

/* ===================== FEATURES ===================== */
.features{background:var(--bg);}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;}
.feature-card{
  padding:1.7rem 1.6rem;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg-elevated);
  transition:transform .5s var(--spring), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--accent-deep);}
.feature-card:active{transform:translateY(-1px) scale(.99);transition-duration:.15s;}
.feature-icon{width:2.6rem;height:2.6rem;border-radius:10px;background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.feature-icon svg{width:1.4rem;height:1.4rem;}
.feature-card h3{font-size:1.15rem;font-weight:700;margin-bottom:.4rem;font-family:var(--body);text-transform:none;}
.feature-card p{color:var(--text-muted);font-size:.94rem;}
.feature-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;}
.feature-tag{
  font-family:var(--mono);font-size:.76rem;padding:.35rem .7rem;border-radius:999px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--accent-deep);
}
@media (max-width:760px){.feature-grid{grid-template-columns:1fr;}}

/* ===================== TEAM / ABOUT ===================== */
.team{background:var(--bg-elevated);border-block:1px solid var(--line);}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:start;}
.team-copy p{color:var(--text-muted);font-size:1rem;margin-top:1rem;}
.team-copy p:first-of-type{margin-top:0;}
.diff-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem;}
.diff-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;color:var(--text-muted);}
.diff-list svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.15rem;color:var(--accent-deep);}
.diff-list strong{color:var(--text);}
@media (max-width:480px){.diff-list{grid-template-columns:1fr;}}
.team-stats{display:flex;flex-wrap:wrap;gap:2rem;margin-top:1.7rem;padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.tstat{display:flex;flex-direction:column;gap:.2rem;}
.tstat-num{font-family:var(--mono);font-size:1.6rem;font-weight:500;color:var(--accent-deep);line-height:1;font-variant-numeric:tabular-nums;}
.tstat-lbl{font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.warranty-list{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.8rem;}
.warranty-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.96rem;}
.warranty-list svg{width:1.2rem;height:1.2rem;flex:none;margin-top:.15rem;color:var(--accent-deep);}
.cert-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.timeline li{
  display:grid;grid-template-columns:64px 1fr;gap:1rem;padding-block:1rem;border-top:1px solid var(--line);position:relative;
}
.timeline li:first-child{border-top:none;padding-top:0;}
.timeline-year{font-family:var(--mono);color:var(--accent-deep);font-weight:500;font-variant-numeric:tabular-nums;}
.timeline-text strong{display:block;font-size:.98rem;margin-bottom:.1rem;}
.timeline-text span{color:var(--text-muted);font-size:.9rem;}
@media (max-width:860px){.team-grid{grid-template-columns:1fr;gap:var(--space-4);}}

/* ===================== RESOURCES (VIDEO / AWARDS) ===================== */
.resources-sub{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;margin:0 0 1.2rem;}
.resources-sub:not(:first-of-type){margin-top:var(--space-4);}
.video-cta{
  display:flex;align-items:center;gap:1.1rem;padding:1.4rem 1.6rem;
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-m);
  text-decoration:none;color:var(--text);
  transition:transform .45s var(--spring), border-color var(--dur-1) var(--ease);
}
.video-cta:hover{transform:translateY(-2px);border-color:var(--accent-deep);}
.video-cta-icon{width:3rem;height:3rem;border-radius:12px;flex:none;background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;}
.video-cta-icon svg{width:1.5rem;height:1.5rem;}
.video-cta-body{flex:1;min-width:0;}
.video-cta-body strong{display:block;font-size:1.02rem;}
.video-cta-body span{display:block;color:var(--text-muted);font-size:.9rem;margin-top:.2rem;}
.video-cta-arrow{flex:none;color:var(--accent-deep);}
.video-cta-arrow svg{width:1.4rem;height:1.4rem;}
@media (max-width:600px){.video-cta{flex-wrap:wrap;}.video-cta-arrow{display:none;}}

.award-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;}
.award-card{display:flex;flex-direction:column;gap:.6rem;margin:0;}
.award-thumb{
  aspect-ratio:4/3;border-radius:var(--radius-m);background:var(--bg-elevated);
  border:1px solid var(--line);display:block;padding:0;overflow:hidden;cursor:zoom-in;
  transition:transform .45s var(--spring), border-color var(--dur-1) var(--ease);
}
.award-thumb:hover{transform:translateY(-3px);border-color:var(--accent-deep);}
.award-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.award-card figcaption{font-size:.74rem;color:var(--text-muted);text-align:center;line-height:1.4;}
@media (max-width:760px){.award-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:480px){.award-grid{grid-template-columns:repeat(2,1fr);}}

.ref-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.ref-timeline li{
  display:grid;grid-template-columns:56px 1fr;gap:1rem;padding-block:.85rem;border-top:1px solid var(--line);
}
.ref-timeline li:first-child{border-top:none;padding-top:0;}
/* Nagrade se na stranici pojavljuju vec dva puta (osa i galerija). Puna
   hronologija od 16 redova je treci put i previse — stoji sklopljena i
   otvara se na klik. Sadrzaj ostaje u HTML-u, pa ga pretraga i dalje vidi. */
.ref-more{margin-top:var(--space-4);border-top:1px solid var(--line);padding-top:var(--space-3);}
.ref-more > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em;
  color:var(--text);
}
.ref-more > summary::-webkit-details-marker{display:none;}
.ref-more > summary::after{
  content:"";width:.5em;height:.5em;border-right:2px solid var(--accent-deep);
  border-bottom:2px solid var(--accent-deep);transform:rotate(45deg) translateY(-.1em);
  transition:transform var(--dur-1) var(--ease);
}
.ref-more[open] > summary::after{transform:rotate(-135deg) translateY(-.1em);}
.ref-more > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.ref-more .ref-timeline{margin-top:var(--space-3);}
.ref-timeline .ref-year{font-family:var(--mono);color:var(--accent-deep);font-weight:500;font-variant-numeric:tabular-nums;font-size:.92rem;}
.ref-timeline .ref-text{font-size:.92rem;color:var(--text-muted);line-height:1.5;}
@media (max-width:600px){.ref-timeline li{grid-template-columns:1fr;gap:.2rem;}}

.lightbox{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(10,7,3,.88);padding:2.5rem 1.2rem;
}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:min(900px,100%);max-height:88vh;border-radius:var(--radius-s);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);}
.lightbox-close{
  position:absolute;top:1.2rem;right:1.4rem;width:44px;height:44px;border-radius:50%;
  background:rgba(244,236,216,.12);border:1px solid rgba(244,236,216,.3);color:#f4ecd8;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.lightbox-close svg{width:1.3rem;height:1.3rem;}
@media (max-width:480px){.award-grid{grid-template-columns:repeat(2,1fr);}}

/* ===================== CONTACT / CTA ===================== */
.contact{
  background:linear-gradient(160deg, var(--honey) 0%, var(--honey-deep) 100%);
  color:var(--accent-ink);border-radius:var(--radius-l);
  margin-inline:clamp(1.2rem,4vw,2.5rem);
  padding:var(--space-6) clamp(1.4rem,5vw,3.5rem);
  position:relative;overflow:clip;
}
.contact::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='72' viewBox='0 0 84 72'%3E%3Cpath d='M21 0 L63 0 L84 36 L63 72 L21 72 L0 36 Z' fill='none' stroke='%2320180f' stroke-width='1'/%3E%3C/svg%3E");
  background-size:84px 72px;
}
.contact-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-4);align-items:center;}
.contact h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1;}
.contact p{margin-top:.9rem;max-width:44ch;font-size:1.05rem;opacity:.86;}
.contact-calls{display:flex;flex-direction:column;gap:.9rem;}
.call-btn{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(32,24,15,.9);color:#fbf3df;text-decoration:none;
  padding:1.05rem 1.3rem;border-radius:var(--radius-m);font-family:var(--mono);font-size:1.15rem;
  transition:transform .45s var(--spring);
}
.call-btn:hover{transform:translateY(-2px);}
.call-btn:active{transform:scale(.97);transition-duration:.15s;}
.call-btn svg{width:1.3rem;height:1.3rem;color:var(--accent);flex:none;}
.call-btn .lbl{font-family:var(--body);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#c9b990;display:block;margin-bottom:.15rem;}
.contact-person{display:flex;flex-direction:column;gap:.4rem;}
.contact-person .lbl{font-family:var(--body);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink);opacity:.7;font-weight:600;}
.contact-email{
  font-family:var(--mono);font-size:.82rem;color:var(--accent-ink);opacity:.75;text-decoration:none;
  align-self:flex-start;border-bottom:1px dotted currentColor;
}
.contact-email:hover{opacity:1;}
.contact-company{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(32,24,15,.16);
  font-size:.86rem;color:var(--accent-ink);opacity:.75;line-height:1.7;
}
/* Devizni racun. IBAN + BIC je dovoljno za uplate iz SEPA podrucja (Srbija je
   u SEPA sistemu od 2026); posrednicka banka se navodi samo za uplate izvan
   SEPA ili u drugim valutama, pa stoji sitnije. */
.contact-bank{
  margin-top:.9rem;font-size:.86rem;color:var(--accent-ink);opacity:.75;line-height:1.7;
}
.contact-bank strong{opacity:1;font-weight:600;}
.contact-bank .bank-iban{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.02em;white-space:nowrap;
}
.contact-bank .bank-note{display:block;margin-top:.5rem;font-size:.8rem;opacity:.8;}

@media (max-width:860px){.contact-inner{grid-template-columns:1fr;}}

/* ===================== CONTACT FORM ===================== */
.contact-form{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:1.1rem;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.contact-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--text);}
.contact-form input[type=text],.contact-form textarea{
  font:inherit;font-size:.95rem;font-weight:400;padding:.8rem 1rem;border-radius:var(--radius-s);
  border:1px solid var(--line);background:var(--bg-elevated);color:var(--text);
  transition:border-color var(--dur-1) var(--ease);
}
.contact-form input[type=text]:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent-deep);}
.contact-form textarea{resize:vertical;min-height:120px;}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.cf-captcha{max-width:220px;}
.contact-form button{align-self:flex-start;border:none;cursor:pointer;}
.contact-form button:disabled{opacity:.6;cursor:default;}
.cf-status{font-size:.9rem;}
.cf-status.ok{color:var(--moss);}
.cf-status.err{color:var(--danger);}
@media (max-width:600px){.cf-row{grid-template-columns:1fr;}}

/* ===================== FOOTER ===================== */
footer.site{padding-block:var(--space-5) var(--space-4);border-top:1px solid var(--line);margin-top:var(--space-6);}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;}
.footer-brand .brand-logo{height:30px;}
.footer-brand p{color:var(--text-muted);margin-top:.5rem;font-size:.9rem;max-width:none;line-height:1.5;}
/* Tri kolone: veza levo, potpis tacno na sredini, desna kolona prazna —
   tako potpis stoji u sredini bez obzira na duzinu veze. */
.footer-bottom{margin-top:var(--space-4);padding-top:1.2rem;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;font-size:.82rem;color:var(--text-muted);}
.footer-bottom .potpis{text-align:center;}
@media (max-width:640px){
  .footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;}
}
/* Napomena o podacima uz obrazac za poruku */
.cf-privatnost{margin:.2rem 0 0;font-size:.82rem;color:var(--text-muted);line-height:1.5;}

/* ===================== PREKIDAC JEZIKA =====================
   Zastavica sa oznakom ispod nje. Sve tri su pune boje — nijedna
   nije zatamnjena, jer izbledela zastavica deluje kao da je nesto
   iskljuceno. Tekuci jezik se poznaje po zlatnom okviru i po
   izrazenijoj oznaci, ne po tome sto su ostali utisani. */
.lang-switch{display:flex;align-items:flex-start;gap:.55rem;}
/* Zastavice stoje izmedju dugmeta „Pozovite nas" i dugmeta PRODAVNICA.
   Automatske margine dele slobodan prostor sa obe strane, pa se grupa
   sama namesti na sredinu tog razmaka, na svakoj sirini ekrana. */
.nav > .lang-switch{align-self:center;margin-inline:auto;}
.lang-switch a{
  display:flex;flex-direction:column;align-items:center;gap:.22rem;
  text-decoration:none;line-height:1;
}
.lang-switch .flag{
  display:block;width:28px;height:19px;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.lang-switch .flag svg{width:100%;height:100%;display:block;}
.lang-switch .lbl{
  font-size:.64rem;font-weight:700;letter-spacing:.08em;
  color:var(--text-muted);transition:color var(--dur-1) var(--ease);
}
.lang-switch a:hover .flag,
.lang-switch a:focus-visible .flag{transform:translateY(-2px);}
.lang-switch a:hover .lbl{color:var(--text);}
.lang-switch a.is-active .flag{box-shadow:0 0 0 2px var(--accent);}
.lang-switch a.is-active .lbl{color:var(--accent-deep);}

/* Zaglavlje: nazivi u meniju i na dugmadi ne smeju da se prelome u dva reda.
   „Uređaj" i „Pozovite nas" su se lomili cim je red postao tesan. */
.nav-links a,
.nav-actions .btn,
.btn.portal,
.btn.shop.nav-edge{white-space:nowrap;}

/* ---------- DUGME ZA WEB PORTAL ----------
   Vodi na portal.smsvaga.com, gde su merenja prikazana grafikonima —
   otuda ikonica sa linijom koja raste.

   Boja je mahovinasto zelena iz palete stranice. Dovoljno je drugacija
   od zlatnog „Pozovite nas" i od tamne PRODAVNICE da je oko odmah nadje,
   a ostaje u istom tonu kao ostatak sajta. Ikonica je zlatna, kao i na
   dugmetu prodavnice, pa se dva istaknuta dugmeta drze zajedno. */
.btn.portal{
  /* Portal je zasebna web aplikacija za postojece korisnike, a ne prodajni
     poziv na akciju. Zato je tiho dugme sa obrisom: ostaje lako nadjeno,
     ali ne takmici se sa PRODAVNICOM. Time na sajtu ostaje samo jedna
     akcentna boja — zlatna. */
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
  font-weight: 700;
  letter-spacing: .02em;
  align-self: center;

  /* Levo od dugmeta stoji i unutrasnja margina trake sa menijem, a desno
     ne stoji nista — zbog toga je dugme delovalo pomereno ka zastavama.
     Ista ta vrednost se dodaje sa desne strane, pa su razmaci jednaki. */
  margin-right: clamp(1.2rem, 4vw, 2.5rem);
}
.btn.portal:hover{
  border-color: var(--accent);
  box-shadow: none;
}
/* Ikonica je puna, ne linijska. Tanka linija se na 15 piksela gubi;
   pune kockice se vide i na telefonu i s druge strane sobe. */
.btn.portal svg{ color: var(--accent); width: 1.2em; height: 1.2em; }

/* Kad red postane tesan, natpis se sklanja i ostaje samo grafikon. */
@media (max-width:1360px){
  .btn.portal .btn-label{ display: none; }
  .btn.portal{ padding-inline: .9rem; gap: 0; }
  .btn.portal svg{ width: 1.4em; height: 1.4em; }
}

/* Meni se nikada ne prelama u dva reda — kad ponestane mesta, prvo se
   skupljaju razmaci izmedju stavki. Nemacki nazivi su duzi od srpskih
   („Technische Daten" naspram „Specifikacije"), pa se skupljanje
   uklljucuje ranije nego sto bi srpskoj verziji bilo potrebno. */
.nav-links{flex-wrap:nowrap;}

@media (max-width:1400px){
  .nav-links{gap:clamp(.6rem,1.4vw,1.15rem);}
  .nav-actions{gap:.7rem;}
}

@media (max-width:520px){
  .lang-switch{gap:.4rem;}
  .lang-switch .flag{width:24px;height:16px;}
  .lang-switch .lbl{font-size:.58rem;}
}

/* ---------- ZAGLAVLJE NA TELEFONU: DVA REDA ----------
   Na uskim ekranima se u jedan red guralo previse: logo, „Pozovite nas“,
   hamburger, dugme za portal, tri zastavice i PRODAVNICA — pa su se
   preklapali. Ispod 860px traka se prelama u dva reda: gore logo,
   telefon i hamburger, dole portal, jezici i prodavnica, ravnomerno
   raspodeljeni po sirini. */
@media (max-width:860px){
  .nav{
    flex-wrap:wrap;
    align-items:center;
    row-gap:.55rem;
    padding-right:clamp(1.2rem,4vw,2.5rem);
    padding-left:clamp(1.2rem,4vw,2.5rem);
    justify-content:space-between;
  }
  /* Prvi red uzima celu sirinu, pa ostalo pada ispod. Unutrasnji razmak
     dolazi vec od .nav, zato ga .nav-inner ovde ne dodaje jos jednom. */
  .nav-inner{flex:0 0 100%;padding-inline:0;}
  .nav > .btn.portal{margin-right:0;}
  .nav > .lang-switch{margin-inline:0;align-self:center;}
  .nav > .btn.portal,
  .nav > .lang-switch,
  .nav > .btn.shop.nav-edge{flex:0 0 auto;}
  /* U svom redu ima mesta, pa natpisi na dugmadi mogu da se vrate. */
  .nav > .btn.portal .btn-label{display:inline;}
  .nav > .btn.portal{padding-inline:1.1rem;gap:.5em;}
}

/* Na najuzim telefonima natpisi ipak odlaze, ostaju same ikonice. */
@media (max-width:430px){
  .nav > .btn.portal .btn-label,
  .nav > .btn.shop.nav-edge .btn-label{display:none;}
  .nav > .btn.portal,
  .nav > .btn.shop.nav-edge{padding-inline:.95rem;gap:0;}
  .nav{row-gap:.45rem;}
}

/* ---------------------------------------------------------------
   Društvene mreže — tri ikonice uz levu ivicu.

   Ostaje na ekranu dok se lista, ali ne stoji zakucano: pri listanju
   blago klizne u smeru kretanja pa se vrati na mesto, tako da prati
   stranu umesto da deluje zalepljeno. Pomeranje radi skripta pri dnu
   strane; ako je u sistemu uključeno smanjeno kretanje, izostaje.

   Pločica je uokvirena medenom bojom sajta, a podloga joj je tamna i
   providna sa zamućenjem — tako se vidi i preko crnog hero odeljka i
   preko svetlih odeljaka niže, bez presvlačenja u pola strane.

   Strana se nigde ne sužava zbog njih: ikonice lebde iznad sadržaja, a
   jedino hero tekst dobija nešto veći levi razmak da mu ne stanu preko
   slova. Ispod 960 px se sklanjaju — tamo bi odnele previše širine.
--------------------------------------------------------------- */

.mreze{
  position:fixed; left:10px; z-index:120;
  /* Gornja ivica pločice pada u ravan sa dugmetom „Pozovite nas" u herou.
     Vrednost je u procentima visine ekrana, pa prati i niže i više prozore. */
  top:72%;
  transform:translateY(0);
  display:flex; flex-direction:column; gap:.3rem;
  padding:.45rem .4rem;
  border:2px solid var(--accent);
  border-radius:22px;
  background:rgba(28,23,16,.34);
  backdrop-filter:blur(3px) saturate(125%);
  will-change:transform;
}

.mreze a{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:16px; color:var(--accent); text-decoration:none;
  /* Crni okvir i tamna podloga oko svake ikonice — bez toga bi se medena
     boja gubila kad pločica pređe preko svetlih odeljaka strane. */
  border:2px solid var(--charcoal);
  background:rgba(28,23,16,.55);
  transition:background .18s ease, color .18s ease, border-color .18s ease, scale .18s ease;
}
.mreze a:hover,.mreze a:focus-visible{
  background:var(--accent); color:#20180f; border-color:var(--charcoal); scale:1.06;
}
.mreze svg{ width:34px; height:34px; fill:currentColor; display:block; }

@media (max-width:960px){ .mreze{ display:none; } }

/* Hero tekst kreće tek posle ikonica, da mu ne stanu preko slova. */
@media (min-width:961px){
  .hero-copy{ padding-left:clamp(5.4rem,6.5vw,6.4rem); }
}

/* ---------------------------------------------------------------
   Pojam sa objašnjenjem (oblačić na prelazak mišem).

   Reč je označena isprekidanom linijom i pokazivačem „pomoć". Oblačić
   se pravi jednom i seli se ispod reči preko koje se stoji; radi i na
   tastaturi (fokus) i na dodir (tap).
--------------------------------------------------------------- */
.pojam{
  border-bottom:1px dotted currentColor;
  cursor:help;
}
.pojam:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

.pojam-oblacic{
  position:fixed; z-index:300; max-width:min(380px,86vw);
  background:var(--charcoal); color:#f4ecd8;
  padding:.72rem .9rem; border-radius:12px;
  font-size:.9rem; line-height:1.5;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  opacity:0; transform:translateY(5px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.pojam-oblacic.vidljiv{ opacity:1; transform:none; }
.pojam-oblacic b{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  .pojam-oblacic{ transition:none; }
}

/* ---------- PRIJAVA NA VESTI (Brevo) ---------- */
.vesti-prijava{padding-block:var(--space-5);}
.vesti-kutija{
  display:grid;grid-template-columns:1.1fr 1fr;gap:2.4rem;align-items:center;
  background:var(--bg-elevated);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:2.2rem 2.4rem;
}
.vesti-tekst h2{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;margin:.4rem 0 .7rem;
}
.vesti-tekst p{color:var(--text-muted);margin:0;}
.vesti-labela{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:.4rem;
}
/* Polje i dugme jedno uz drugo; na telefonu se lome jedno pod drugo. */
.vesti-red{display:flex;gap:.6rem;}
.vesti-forma input[type=email]{
  flex:1;min-width:0;font-family:inherit;
  font-size:1rem;                 /* 16px — iOS inace zumira stranu pri fokusu */
  padding:.7rem .9rem;color:var(--text);background:var(--surface-1);
  border:1px solid var(--line);border-radius:10px;
}
.vesti-forma input[type=email]:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(220,154,28,.25);
}
.vesti-forma .btn{flex:none;white-space:nowrap;}
/* Mamac za robote — sklonjen sa ekrana, ali ne preko `display:none`,
   jer neki roboti preskacu polja koja su tako sakrivena. */
.vesti-mamac{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;}
/* reCAPTCHA — Google je crta u iframe-u fiksne sirine (304px); na uskom
   telefonu bi virila iz kutije, pa se smanjuje razmerom. */
.vesti-robot{margin-top:.9rem;}
@media (max-width:360px){
  .vesti-robot{transform:scale(.88);transform-origin:0 0;height:70px;}
}
.vesti-sitno{font-size:.82rem;line-height:1.5;color:var(--text-muted);margin:.9rem 0 0;}
.vesti-sitno a{color:var(--accent-deep);}
.vesti-status{font-size:.9rem;line-height:1.5;margin:.8rem 0 0;}
.vesti-status.ok{color:var(--moss);}
.vesti-status.err{color:var(--danger);}
@media (max-width:860px){
  .vesti-kutija{grid-template-columns:1fr;gap:1.5rem;padding:1.6rem 1.4rem;}
}
@media (max-width:560px){
  .vesti-red{flex-direction:column;}
  .vesti-forma .btn{width:100%;min-height:48px;}
}