/* ---------- SELF-HOSTED FONTS (bez Google Fonts poziva) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latinext-400.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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latinext-500.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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latinext-600.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:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/sora-latin-600.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/sora-latinext-600.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:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sora-latin-700.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sora-latinext-700.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:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/sora-latin-800.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/sora-latinext-800.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}

/* ==========================================================================
   RAČUNARKO — Design System
   Liquid Glass · Dark/Light · Beograd
   ========================================================================== */

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  background:var(--bg);
  transition:background-color .5s ease;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body{
  min-height:100vh;
  overflow-x:hidden;           /* fix #1 / #16 — nikad horizontalni scroll */
  font-family:var(--font-body);
  background:transparent;      /* pozadinu nosi <html>, da se vidi WebGL platno */
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color .5s ease,color .5s ease;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brand-400);outline-offset:3px;border-radius:6px}
::selection{background:var(--brand-500);color:#00121a}

/* ---------- 2. TOKENS ---------- */
:root{
  --font-display:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;

  /* brand ramp */
  --brand-300:#67e8f9;
  --brand-400:#22d3ee;
  --brand-500:#06b6d4;
  --brand-600:#0891b2;
  --brand-700:#0e7490;
  --brand-900:#164e63;

  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#f43f5e;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  --pad:clamp(1.15rem,4vw,2rem);
  --maxw:1240px;
  --section-y:clamp(3.1rem,5.6vw,5.4rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --hdr-h:72px;
}

/* DARK (default) */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#04080d;
  --bg-2:#070e16;
  --bg-3:#0b141e;
  --text:#e6f3f8;
  --text-2:#8fa8b8;
  --text-3:#5f7686;

  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --glass-hi:rgba(255,255,255,.14);
  --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.16);

  --accent:var(--brand-400);
  --accent-soft:rgba(34,211,238,.13);
  --accent-line:rgba(34,211,238,.35);

  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow:0 18px 50px -18px rgba(0,0,0,.75);
  --shadow-lg:0 40px 100px -30px rgba(0,0,0,.85);
  --glow:0 0 40px -6px rgba(34,211,238,.45);

  --grid-line:rgba(255,255,255,.035);
  --noise-op:.035;
}

/* LIGHT */
[data-theme="light"]{
  color-scheme:light;
  --bg:#eef4f7;
  --bg-2:#f7fbfc;
  --bg-3:#ffffff;
  --text:#07161e;
  /* kontrast: #6b8593 je davao 3.5:1 i obarao Lighthouse.
     #4a6875 = 5.4:1, #3d5b6a = 6.5:1 — oba prolaze WCAG AA. */
  --text-2:#3d5b6a;
  --text-3:#4a6875;

  --glass:rgba(255,255,255,.58);
  --glass-2:rgba(255,255,255,.78);
  --glass-hi:rgba(255,255,255,.95);
  --border:rgba(7,45,62,.10);
  --border-2:rgba(7,45,62,.18);

  /* #0d6c85 umesto #0891b2 — 5.4:1 na svetloj podlozi (WCAG AA).
     Sa #0891b2 je bilo 3.3:1 i „.eyebrow" tekst je padao na testu. */
  --accent:#0d6c85;
  --accent-soft:rgba(13,108,133,.10);
  --accent-line:rgba(13,108,133,.32);

  --shadow-sm:0 2px 10px rgba(11,48,64,.07);
  --shadow:0 18px 44px -20px rgba(11,48,64,.28);
  --shadow-lg:0 40px 90px -34px rgba(11,48,64,.35);
  --glow:0 0 40px -8px rgba(8,145,178,.35);

  --grid-line:rgba(7,45,62,.045);
  --noise-op:.022;
}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1440px}
.wrap-narrow{max-width:860px}
.section{position:relative;padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.2rem,3.8vw,3.4rem)}

.grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g-auto-lg{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center}
.gap-xs{gap:.5rem}.gap-sm{gap:.75rem}.gap{gap:1rem}.gap-md{gap:1.5rem}.gap-lg{gap:2.5rem}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.75rem}.mt-4{margin-top:2.5rem}.mt-5{margin-top:3.5rem}

/* ---------- 4. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
h1,.h1{font-size:clamp(2.35rem,6.2vw,4.6rem);font-weight:800;letter-spacing:-.04em}
h2,.h2{font-size:clamp(1.85rem,4.2vw,3.1rem);letter-spacing:-.035em}
h3,.h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}
h4,.h4{font-size:clamp(1.02rem,1.6vw,1.18rem)}

.lead{font-size:clamp(1.02rem,1.65vw,1.24rem);color:var(--text-2);line-height:1.7;text-wrap:pretty}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.small{font-size:.87rem}
.xsmall{font-size:.78rem}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.up{text-transform:uppercase;letter-spacing:.16em}

.grad-text{
  background:linear-gradient(100deg,var(--brand-300),var(--brand-500) 45%,var(--brand-600));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
[data-theme="light"] .grad-text{background:linear-gradient(100deg,var(--brand-600),var(--brand-500) 50%,var(--brand-700));-webkit-background-clip:text;background-clip:text}

/* section heading block */
.sec-head{max-width:720px;margin-bottom:clamp(1.7rem,3vw,2.5rem)}
.sec-head.center{margin-inline:auto}
.sec-head p{margin-top:1rem}

/* eyebrow chip */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.42rem .95rem;margin-bottom:1.15rem;
  font-family:var(--font-display);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:var(--r-pill);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent);
  animation:pulseDot 2.4s var(--ease-soft) infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

/* ---------- 5. GLASS ---------- */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(22px) saturate(165%);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);
  overflow:hidden;
  isolation:isolate;
}
/* specular sheen */
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(150deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,0) 42%);
  opacity:.9;
}
[data-theme="light"] .glass::before{background:linear-gradient(150deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 55%)}
.glass>*{position:relative;z-index:1}

.glass-soft{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}

/* interactive glass card w/ cursor spotlight */
.card{
  --mx:50%;--my:0%;
  padding:clamp(1.4rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:.85rem;
  transition:transform .55s var(--ease),border-color .45s var(--ease),box-shadow .55s var(--ease);
  will-change:transform;
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--mx) var(--my),var(--accent-soft),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease-soft);
}
.card:hover,.card:focus-within{
  transform:translateY(-6px);
  border-color:var(--border-2);
  box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-hi),var(--glow);
}
.card:hover::after,.card:focus-within::after{opacity:1}
.card__ico{
  width:52px;height:52px;flex:none;
  display:grid;place-items:center;
  border-radius:15px;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  transition:transform .5s var(--spring),box-shadow .5s var(--ease);
}
.card:hover .card__ico{transform:translateY(-3px) rotate(-6deg) scale(1.07);box-shadow:var(--glow)}
.card__ico svg{width:25px;height:25px}
.card h3{font-size:1.14rem}
.card p{color:var(--text-2);font-size:.95rem;line-height:1.65}
.card__link{
  margin-top:auto;padding-top:.6rem;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:600;font-size:.86rem;
  color:var(--accent);
}
.card__link svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.card:hover .card__link svg{transform:translateX(5px)}

/* ---------- 6. BUTTONS ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.86rem 1.55rem;
  font-family:var(--font-display);font-weight:600;font-size:.93rem;line-height:1;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--spring),box-shadow .4s var(--ease),background-color .3s,border-color .3s,color .3s;
  overflow:hidden;isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:active{transform:scale(.965)}

.btn--primary{
  color:#00131a;
  background:linear-gradient(135deg,var(--brand-300),var(--brand-500) 55%,var(--brand-600));
  box-shadow:0 10px 30px -10px rgba(6,182,212,.6),inset 0 1px 0 rgba(255,255,255,.45);
  font-weight:700;
}
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#a5f3fc,var(--brand-400) 55%,var(--brand-500));
  opacity:0;transition:opacity .4s var(--ease);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(6,182,212,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.btn--primary:hover::before{opacity:1}
/* prelaz sjaja — sada na SVIM dugmadima */
.btn::after{
  content:"";position:absolute;top:0;left:0;width:58%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-215%) skewX(-18deg);pointer-events:none;
}
.btn--ghost::after,.btn--outline::after{background:linear-gradient(100deg,transparent,var(--sheen),transparent)}
.btn:hover::after,.btn:focus-visible::after{animation:sweep .85s var(--ease-soft)}
.btn>*{position:relative;z-index:1}
/* animira se transform, ne left — jedino tako sjaj ide na GPU
   i ne tera brauzer da preračunava raspored na svakom kadru */
@keyframes sweep{from{transform:translateX(-215%) skewX(-18deg)}to{transform:translateX(265%) skewX(-18deg)}}

.btn--ghost{
  color:var(--text);
  background:var(--glass);
  border-color:var(--border-2);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.btn--ghost:hover{transform:translateY(-2px);background:var(--glass-2);border-color:var(--accent-line);color:var(--accent)}

.btn--outline{color:var(--accent);border-color:var(--accent-line);background:transparent}
.btn--outline:hover{background:var(--accent-soft);transform:translateY(-2px)}

.btn--wa{color:#fff;background:linear-gradient(135deg,#37d260,#20b455);box-shadow:0 10px 26px -12px rgba(37,211,102,.75)}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(37,211,102,.85)}
.btn--vb{color:#fff;background:linear-gradient(135deg,#8f5bd6,#6d31b8);box-shadow:0 10px 26px -12px rgba(127,66,197,.75)}
.btn--vb:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(127,66,197,.85)}

.btn--sm{padding:.6rem 1.1rem;font-size:.83rem}
.btn--lg{padding:1.05rem 2rem;font-size:1rem}
.btn--block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}

/* ---------- 7. HEADER ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--hdr-h);
  display:flex;align-items:center;
  transition:height .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  height:62px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--border);
  box-shadow:0 10px 34px -22px rgba(0,0,0,.7);
}
.hdr__in{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;gap:1rem}

/* logo — clickable (fix #17) */
.brand{display:inline-flex;align-items:center;gap:.6rem;flex:none;transition:transform .4s var(--spring)}
.brand:hover{transform:scale(1.035)}
.brand__mark{width:38px;height:38px;flex:none;filter:drop-shadow(0 3px 10px rgba(6,182,212,.4));transition:transform .6s var(--spring),filter .4s}
.brand:hover .brand__mark{transform:rotate(-9deg) scale(1.06);filter:drop-shadow(0 5px 16px rgba(6,182,212,.65))}
.brand__word{
  font-family:var(--font-display);font-weight:800;font-size:1.16rem;
  letter-spacing:-.045em;color:var(--text);line-height:1;
}
.brand__word span{color:var(--accent)}
@media(max-width:400px){.brand__word{font-size:1.02rem}.brand__mark{width:34px;height:34px}}

.hdr__spacer{flex:1}

/* desktop nav */
.nav{display:flex;align-items:center;gap:.15rem}
.nav a{
  position:relative;padding:.5rem .78rem;border-radius:var(--r-pill);
  font-size:.88rem;font-weight:500;color:var(--text-2);
  transition:color .3s var(--ease-soft),background-color .3s;
  white-space:nowrap;
}
.nav a:hover{color:var(--text);background:var(--glass)}
.nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
@media(max-width:1080px){.nav{display:none}}

.hdr__cta{display:flex;align-items:center;gap:.5rem}
@media(max-width:560px){.hdr__cta .btn--primary{display:none}}

/* theme + lang controls */
.ctrl{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;border-radius:var(--r-pill);
  color:var(--text-2);
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:color .3s,transform .4s var(--spring),border-color .3s,background-color .3s;
}
.ctrl:hover{color:var(--accent);border-color:var(--accent-line);transform:translateY(-2px)}
.ctrl svg{width:18px;height:18px}
.ctrl__sun,.ctrl__moon{transition:opacity .35s,transform .5s var(--spring);grid-area:1/1}
[data-theme="dark"] .ctrl__sun{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme="light"] .ctrl__moon{opacity:0;transform:rotate(90deg) scale(.4)}

/* language dropdown */
.lang{position:relative;flex:none}
.lang__btn{
  height:38px;padding:0 .7rem;display:inline-flex;align-items:center;gap:.4rem;
  border-radius:var(--r-pill);font-size:.8rem;font-weight:600;font-family:var(--font-display);
  color:var(--text-2);background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:color .3s,border-color .3s,transform .4s var(--spring);
}
.lang__btn:hover{color:var(--accent);border-color:var(--accent-line);transform:translateY(-2px)}
.lang__btn svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.lang.is-open .lang__btn svg.chev{transform:rotate(180deg)}
.lang__menu{
  position:absolute;top:calc(100% + .55rem);right:0;min-width:172px;
  padding:.4rem;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--bg-2) 88%,transparent);
  border:1px solid var(--border-2);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:top right;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
  z-index:20;
}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lang__menu button{
  width:100%;display:flex;align-items:center;gap:.6rem;
  padding:.62rem .7rem;border-radius:10px;font-size:.87rem;text-align:left;color:var(--text-2);
  transition:background-color .25s,color .25s;
}
.lang__menu button:hover{background:var(--glass-2);color:var(--text)}
.lang__menu button[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}
.lang__flag{font-size:1.05rem;line-height:1;flex:none}

/* burger (fix #3) */
.burger{
  display:none;width:40px;height:40px;flex:none;
  border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  place-items:center;
}
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--text);transition:transform .45s var(--ease),opacity .3s}
.burger span+span{margin-top:4.5px}
@media(max-width:1080px){.burger{display:grid}}
body.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0;transform:scaleX(.2)}
body.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer */
.mnav{
  position:fixed;inset:0;z-index:880;
  display:flex;flex-direction:column;
  padding:calc(var(--hdr-h) + 1.4rem) var(--pad) 2rem;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  opacity:0;visibility:hidden;transform:translateY(-1.2rem);
  transition:opacity .45s var(--ease),transform .5s var(--ease),visibility .45s;
  overflow-y:auto;overscroll-behavior:contain;
}
body.nav-open .mnav{opacity:1;visibility:visible;transform:none}
body.nav-open{overflow:hidden}
.mnav__list{display:flex;flex-direction:column;gap:.3rem}
.mnav__list a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.15rem;border-radius:var(--r-md);
  font-family:var(--font-display);font-size:1.12rem;font-weight:600;
  color:var(--text);
  background:var(--glass);border:1px solid var(--border);
  opacity:0;transform:translateY(14px);
  transition:background-color .3s,border-color .3s,color .3s;
}
body.nav-open .mnav__list a{animation:mnavIn .5s var(--ease) forwards;animation-delay:calc(var(--i,0)*.045s + .1s)}
@keyframes mnavIn{to{opacity:1;transform:none}}
.mnav__list a:hover,.mnav__list a[aria-current="page"]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.mnav__list a svg{width:16px;height:16px;opacity:.5;flex:none}
.mnav__foot{margin-top:auto;padding-top:1.75rem;display:flex;flex-direction:column;gap:.65rem}
.mnav__contact{display:flex;flex-direction:column;gap:.35rem;padding-top:1.1rem;border-top:1px solid var(--border);margin-top:1.1rem;font-size:.9rem;color:var(--text-2)}
.mnav__contact a{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem 0;color:var(--text-2);transition:color .3s}
.mnav__contact a:hover{color:var(--accent)}
.mnav__contact svg{width:15px;height:15px;color:var(--accent);flex:none}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:950;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--brand-600),var(--brand-300),var(--brand-500));box-shadow:0 0 12px rgba(34,211,238,.8)}

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;
  min-height:min(100svh,880px);
  display:flex;align-items:center;
  padding-top:calc(var(--hdr-h) + clamp(2.5rem,7vw,5rem));
  padding-bottom:clamp(3.5rem,8vw,6rem);
  overflow:hidden;
}
.hero--sub{min-height:auto;padding-top:calc(var(--hdr-h) + clamp(2.2rem,4.4vw,3.6rem));padding-bottom:clamp(1.6rem,3vw,2.6rem)}
#glcanvas{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.8s var(--ease-soft),filter .6s var(--ease);
}
#glcanvas.is-on{opacity:1}
/* globalni veo preko WebGL platna — čuva čitljivost teksta */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 130% 90% at 50% -10%,transparent 8%,var(--veil-1) 62%,var(--veil-2) 100%),
    linear-gradient(180deg,var(--veil-top) 0%,transparent 22%,transparent 72%,var(--veil-bot) 100%);
}
/* sadržaj iznad WebGL platna — VAŽNO: ovde se NE dira `position`,
   jer su .hdr, .mnav, .progress, .skip i .dock fiksirani */
main,.ftr,.marquee{position:relative;z-index:1}
.hdr{z-index:900}.mnav{z-index:880}.dock{z-index:850}.progress{z-index:950}.skip{z-index:1000}
.hero__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.75;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 35%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 35%,#000 25%,transparent 78%);
}
.hero__in{position:relative;z-index:2;width:100%}
.hero h1{margin-bottom:1.35rem}
.hero .lead{max-width:60ch}
.hero__cta{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.8rem}
.hero__meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.55rem}

.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .95rem;border-radius:var(--r-pill);
  font-size:.79rem;font-weight:500;color:var(--text-2);
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.pill svg{width:14px;height:14px;color:var(--accent);flex:none}

/* live status */
.status{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.42rem .9rem;border-radius:var(--r-pill);
  font-size:.78rem;font-weight:600;color:var(--ok);
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.28);
}
.status__dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.status__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ok);animation:ping 1.9s var(--ease-soft) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* floating glass panel in hero */
.hero__panel{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.hero__panel .term{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.85;color:var(--text-2);
}
.hero__panel .term b{color:var(--accent);font-weight:600}
.hero__panel .term .ok{color:var(--ok)}
.term__bar{display:flex;gap:.35rem;padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--border)}
.term__bar i{width:9px;height:9px;border-radius:50%;background:var(--border-2)}
.term__bar i:first-child{background:#ff5f57}.term__bar i:nth-child(2){background:#febc2e}.term__bar i:nth-child(3){background:#28c840}
.caret{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;background:var(--accent);animation:blink 1.05s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- 9. STATS ---------- */
.stats{display:grid;gap:clamp(.8rem,1.8vw,1.2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr))}
.stat{padding:1.5rem 1.3rem;text-align:center}
.stat__n{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.stat__l{margin-top:.6rem;font-size:.79rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.11em;line-height:1.5}

/* ---------- 10. PROCESS ---------- */
.proc{position:relative;display:grid;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}
/* Linija koja povezuje korake.
   RANIJE je bila jedna linija preko cele grupe (`.proc::before`) — a pošto
   su kartice providne, videla se KROZ njih i izgledala kao da nešto seče
   sadržaj. Sada se crta samo u razmaku IZMEĐU kartica, tako da zaista
   povezuje krugove i nigde ne prelazi preko teksta. */
.proc{--proc-gap:clamp(1rem,2vw,1.4rem);gap:var(--proc-gap)}
/* `.glass` seče sve što izađe iz kartice (overflow:hidden) — a linija
   koja povezuje korake mora da izađe u razmak. Kartica nema drugog
   sadržaja koji bi mogao da iscuri, pa je sečenje ovde nepotrebno. */
.step{position:relative;z-index:1;padding:1.6rem 1.35rem;text-align:center;overflow:visible}
.step::after{
  content:"";position:absolute;
  top:calc(1.6rem + 26px);          /* tačno visina sredine kruga */
  left:100%;width:var(--proc-gap);height:1px;
  background:var(--accent-line);
  pointer-events:none;
}
.step:last-child::after{display:none}
@media(max-width:1020px){.step::after{display:none}}
.step__n{
  width:52px;height:52px;margin:0 auto .95rem;
  display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  color:#00131a;background:linear-gradient(135deg,var(--brand-300),var(--brand-600));
  box-shadow:0 8px 24px -8px rgba(6,182,212,.7),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .5s var(--spring),box-shadow .45s;
}
.step:hover .step__n{transform:scale(1.13) rotate(8deg);box-shadow:0 14px 34px -8px rgba(6,182,212,.85)}
.step h3{font-size:1.03rem;margin-bottom:.45rem}
.step p{font-size:.9rem;color:var(--text-2);line-height:1.6}

/* ---------- 11. BENTO ---------- */
.bento{display:grid;gap:clamp(.85rem,1.8vw,1.25rem);grid-template-columns:repeat(6,1fr)}
.bento>*{grid-column:span 2}
.bento .b-3{grid-column:span 3}
.bento .b-4{grid-column:span 4}
.bento .b-6{grid-column:span 6}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento>*,.bento .b-3,.bento .b-4{grid-column:span 1}.bento .b-6{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento>*,.bento .b-3,.bento .b-4,.bento .b-6{grid-column:span 1}}

/* ---------- 12. WORK / PORTFOLIO ---------- */
.work{display:grid;gap:clamp(1.2rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.work-card{padding:0;display:flex;flex-direction:column}
.work-card__shot{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid var(--border);
  background:linear-gradient(150deg,var(--bg-3),var(--bg-2));
}
.browser{position:absolute;inset:clamp(.9rem,2.4vw,1.5rem);border-radius:12px;overflow:hidden;border:1px solid var(--border-2);box-shadow:var(--shadow-lg);transition:transform .7s var(--ease)}
.work-card:hover .browser{transform:translateY(-6px) scale(1.028)}
.browser__bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .75rem;background:color-mix(in srgb,var(--bg-3) 92%,transparent);border-bottom:1px solid var(--border)}
.browser__bar i{width:8px;height:8px;border-radius:50%;flex:none}
.browser__bar i:nth-child(1){background:#ff5f57}.browser__bar i:nth-child(2){background:#febc2e}.browser__bar i:nth-child(3){background:#28c840}
.browser__url{
  flex:1;margin-left:.5rem;padding:.24rem .65rem;border-radius:var(--r-pill);
  font-size:.68rem;color:var(--text-3);background:var(--glass);border:1px solid var(--border);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.browser__view{position:relative;height:100%;padding:clamp(1rem,2.4vw,1.7rem);display:flex;flex-direction:column;justify-content:center;gap:.6rem;overflow:hidden}
.browser__view::before{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at 25% 15%,var(--accent-soft),transparent 65%)}
.browser__view>*{position:relative}
.browser__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.05rem,2.4vw,1.55rem);letter-spacing:-.03em}
.browser__sub{font-size:.8rem;color:var(--text-2)}
.skeleton{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}
.skeleton i{display:block;height:6px;border-radius:3px;background:var(--border-2)}
.skeleton i:nth-child(1){width:78%}.skeleton i:nth-child(2){width:58%}.skeleton i:nth-child(3){width:66%}
.work-card__body{padding:clamp(1.3rem,2.6vw,1.85rem);display:flex;flex-direction:column;gap:.75rem;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.25rem}
.tag{padding:.28rem .7rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:500;color:var(--text-2);background:var(--glass-2);border:1px solid var(--border)}

/* ---------- 13. MARQUEE ---------- */
.marquee{position:relative;overflow:hidden;padding-block:1.1rem;border-block:1px solid var(--border);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:3.2rem;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
/* staje i kada nije na ekranu — nema svrhe crtati ono što se ne vidi */
.marquee.is-off .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee__item{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--text-3);white-space:nowrap;transition:color .3s}
.marquee__item:hover{color:var(--accent)}
.marquee__item svg{width:17px;height:17px;color:var(--accent);opacity:.75;flex:none}

/* ---------- 14. ACCORDION / FAQ ---------- */
.acc{display:flex;flex-direction:column;gap:.7rem}
.acc__item{overflow:hidden;transition:border-color .35s}
.acc__item.is-open{border-color:var(--accent-line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem;text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--text);
  transition:color .3s;
}
.acc__btn:hover{color:var(--accent)}
.acc__ico{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-2);color:var(--accent);transition:transform .45s var(--ease),background-color .3s}
.acc__item.is-open .acc__ico{transform:rotate(45deg);background:var(--accent-soft)}
.acc__ico svg{width:13px;height:13px}
.acc__panel{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.acc__panel>div{padding:0 1.4rem 1.35rem;color:var(--text-2);font-size:.94rem;line-height:1.75}

/* ---------- 15. TABS ---------- */
.tabs{display:inline-flex;gap:.25rem;padding:.3rem;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  padding:.6rem 1.15rem;border-radius:var(--r-pill);white-space:nowrap;
  font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--text-2);
  transition:color .3s,background-color .35s var(--ease),box-shadow .35s;
}
.tabs button[aria-selected="true"]{color:#00131a;background:linear-gradient(135deg,var(--brand-300),var(--brand-500));box-shadow:0 6px 18px -8px rgba(6,182,212,.7)}
.tabpanel[hidden]{display:none}

/* ---------- 16. FORM ---------- */
.form{display:flex;flex-direction:column;gap:1.05rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.83rem;font-weight:600;font-family:var(--font-display);color:var(--text-2)}
.field label .req{color:var(--brand-400)}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1.05rem;
  font-size:.94rem;color:var(--text);
  background:var(--glass);
  border:1px solid var(--border);border-radius:var(--r-md);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .3s,box-shadow .3s,background-color .3s;
}
.field textarea{min-height:135px;resize:vertical;line-height:1.65}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2306b6d4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--err);box-shadow:0 0 0 3px rgba(244,63,94,.13)}
.field__err{display:none;font-size:.79rem;color:var(--err);align-items:center;gap:.35rem}
.field.has-error .field__err{display:flex;animation:shake .4s var(--ease-soft)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.field__err svg{width:13px;height:13px;flex:none}
.check{display:flex;align-items:flex-start;gap:.65rem;font-size:.83rem;color:var(--text-2);line-height:1.55;cursor:pointer}
.check input{width:17px;height:17px;flex:none;margin-top:.15rem;accent-color:var(--brand-500);cursor:pointer}
.check a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* alerts (fix #12/#13) */
.alert{
  display:none;align-items:flex-start;gap:.75rem;
  padding:1rem 1.15rem;border-radius:var(--r-md);font-size:.9rem;line-height:1.6;
}
.alert.is-on{display:flex;animation:alertIn .5s var(--ease)}
@keyframes alertIn{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
.alert svg{width:19px;height:19px;flex:none;margin-top:.1rem}
.alert--ok{color:#86efac;background:rgba(34,197,94,.11);border:1px solid rgba(34,197,94,.32)}
.alert--err{color:#fda4af;background:rgba(244,63,94,.11);border:1px solid rgba(244,63,94,.32)}
[data-theme="light"] .alert--ok{color:#15803d;background:rgba(34,197,94,.10)}
[data-theme="light"] .alert--err{color:#be123c;background:rgba(244,63,94,.09)}
.alert b{display:block;font-family:var(--font-display);font-weight:700;margin-bottom:.15rem}

/* spinner */
.spin{width:16px;height:16px;border:2px solid rgba(0,0,0,.25);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 17. CONTACT TILES ---------- */
.ctile{
  display:flex;align-items:center;gap:1rem;
  padding:1.2rem 1.35rem;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:transform .4s var(--ease),border-color .35s,box-shadow .4s;
}
.ctile:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow)}
.ctile__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line)}
.ctile__ico svg{width:20px;height:20px}
.ctile>span:last-child{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.ctile__l{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);line-height:1}
.ctile__v{display:block;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--text);word-break:break-word;line-height:1.25}

/* floating dock */
.dock{
  position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);
  z-index:850;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;
}
.dock__items{display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}
.dock__items>a{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem .95rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:.83rem;font-weight:600;color:#fff;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .35s var(--ease),transform .4s var(--spring),visibility .35s;
}
.dock.is-open .dock__items>a{opacity:1;visibility:visible;transform:none}
.dock.is-open .dock__items>a:nth-child(1){transition-delay:.03s}
.dock.is-open .dock__items>a:nth-child(2){transition-delay:.07s}
.dock.is-open .dock__items>a:nth-child(3){transition-delay:.11s}
.dock.is-open .dock__items>a:nth-child(4){transition-delay:.15s}
.dock__items>a svg{width:18px;height:18px;flex:none}
.d-wa{background:linear-gradient(135deg,#37d260,#1faf52)}
.d-vb{background:linear-gradient(135deg,#8f5bd6,#6d31b8)}
.d-tel{background:linear-gradient(135deg,var(--brand-400),var(--brand-600));color:#00131a!important}
.d-mail{background:linear-gradient(135deg,#64748b,#475569)}
.dock__toggle{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  color:#00131a;background:linear-gradient(135deg,var(--brand-300),var(--brand-500) 60%,var(--brand-600));
  box-shadow:0 12px 34px -10px rgba(6,182,212,.8),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .5s var(--spring),box-shadow .4s;
}
.dock__toggle:hover{transform:scale(1.07)}
.dock__toggle svg{width:24px;height:24px;grid-area:1/1;transition:opacity .3s,transform .45s var(--spring)}
.dock.is-open .dock__toggle{transform:rotate(135deg)}
.dock.is-open .dock__toggle .d-open{opacity:0;transform:scale(.4)}
.dock:not(.is-open) .dock__toggle .d-close{opacity:0;transform:scale(.4) rotate(-45deg)}
.dock__toggle::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-400);animation:ping 2.6s var(--ease-soft) infinite;pointer-events:none}
.dock__toggle{position:relative}
.dock.is-open .dock__toggle::after{display:none}

/* ---------- 18. REVIEWS ---------- */
.rev{padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem}
.rev__stars{display:flex;gap:.18rem;color:#fbbf24}
.rev__stars svg{width:16px;height:16px}
.rev__txt{font-size:.95rem;line-height:1.72;color:var(--text-2);flex:1}
.rev__who{display:flex;align-items:center;gap:.7rem;padding-top:.4rem;border-top:1px solid var(--border)}
.rev__av{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.9rem;color:#00131a;background:linear-gradient(135deg,var(--brand-300),var(--brand-600))}
.rev__n{font-family:var(--font-display);font-weight:600;font-size:.9rem}
.rev__d{font-size:.75rem;color:var(--text-3)}
.rev-summary{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;padding:1.2rem 1.5rem;border-radius:var(--r-md)}
.rev-score{font-family:var(--font-display);font-weight:800;font-size:2.3rem;line-height:1;letter-spacing:-.04em}
.g-logo{width:20px;height:20px;flex:none}

/* ---------- 19. FOOTER ---------- */
.ftr{position:relative;margin-top:0;border-top:1px solid var(--border);background:var(--bg-2);overflow:hidden}
.ftr::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-line),transparent)}
.ftr__glow{position:absolute;left:50%;bottom:-45%;width:min(1000px,120%);aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(ellipse at center,var(--accent-soft),transparent 68%);pointer-events:none}
.ftr__in{position:relative;padding-block:clamp(2.4rem,4vw,3.4rem) 1.6rem}
.ftr__grid{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:1.5fr repeat(3,1fr)}
@media(max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr__h{font-size:.79rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);margin-bottom:1.05rem;font-weight:600}
.ftr__links{display:flex;flex-direction:column;gap:.6rem}
.ftr__links a{font-size:.9rem;color:var(--text-2);transition:color .3s,transform .3s var(--ease);display:inline-flex;align-items:center;gap:.5rem;width:fit-content}
.ftr__links a:hover{color:var(--accent);transform:translateX(4px)}
.ftr__links svg{width:14px;height:14px;flex:none;color:var(--accent);opacity:.8}
.ftr__about{max-width:38ch;font-size:.9rem;color:var(--text-2);line-height:1.7;margin-top:1rem}
.socials{display:flex;gap:.55rem;margin-top:1.3rem;flex-wrap:wrap}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill);
  color:var(--text-2);background:var(--glass);border:1px solid var(--border);
  transition:color .3s,transform .4s var(--spring),border-color .3s,box-shadow .35s;
}
.socials a:hover{color:var(--accent);border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--glow)}
.socials svg{width:18px;height:18px}
.ftr__bottom{
  margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.81rem;color:var(--text-3);
}
.ftr__legal{display:flex;flex-wrap:wrap;gap:1.2rem}
.ftr__legal a{transition:color .3s}
.ftr__legal a:hover{color:var(--accent)}
.ftr__biz{margin-top:.5rem;font-size:.78rem;color:var(--text-3);line-height:1.7}

/* ---------- 20. CTA BAND ---------- */
.cta-band{position:relative;padding:clamp(2rem,3.6vw,3rem);text-align:center;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px circle at 50% 0%,var(--accent-soft),transparent 65%);pointer-events:none}
.cta-band>*{position:relative}
.cta-band .row{justify-content:center}

/* ---------- 21. BREADCRUMB ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.8rem;color:var(--text-3);margin-bottom:1.1rem}
.crumb a{transition:color .3s}
.crumb a:hover{color:var(--accent)}
.crumb svg{width:12px;height:12px;opacity:.5}

/* ---------- 22. LIST ---------- */
.ticks{display:flex;flex-direction:column;gap:.7rem}
.ticks li{display:flex;align-items:flex-start;gap:.7rem;font-size:.94rem;color:var(--text-2);line-height:1.65}
.ticks svg{width:19px;height:19px;flex:none;margin-top:.15rem;color:var(--accent)}

/* dt i dd su direktna deca <dl> — bez omotaca u divu.
   HTML dozvoljava i omotac, ali ga alat za pristupacnost ne priznaje. */
.dl{display:grid;grid-template-columns:minmax(140px,max-content) 1fr}
.dl dt,.dl dd{padding-bottom:.85rem;margin-bottom:.85rem;border-bottom:1px solid var(--border)}
.dl dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--text-3);padding-right:1rem;padding-top:.12rem}
.dl dd{font-size:.94rem;color:var(--text)}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
@media(max-width:560px){
  .dl{grid-template-columns:1fr}
  .dl dt{border-bottom:0;margin-bottom:.2rem;padding-bottom:0;padding-right:0}
}

/* ---------- 23. DOWNLOAD ROWS ---------- */
.dlrow{
  display:flex;align-items:center;gap:1rem;
  padding:1.15rem 1.3rem;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;
}
.dlrow:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow)}
.dlrow__ico{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--glass-2);border:1px solid var(--border);color:var(--accent)}
.dlrow__ico svg{width:22px;height:22px}
.dlrow__t{flex:1;min-width:0}
.dlrow__t strong{display:block;font-family:var(--font-display);font-weight:600;font-size:.96rem}
.dlrow__t span{font-size:.82rem;color:var(--text-2)}
.dlrow>svg{width:19px;height:19px;flex:none;color:var(--text-3);transition:transform .4s var(--ease),color .3s}
.dlrow:hover>svg{transform:translateX(4px);color:var(--accent)}

/* ---------- 24. NOTE ---------- */
.note{
  display:flex;gap:.85rem;padding:1.1rem 1.25rem;border-radius:var(--r-md);
  font-size:.87rem;line-height:1.7;color:var(--text-2);
  background:var(--accent-soft);border:1px solid var(--accent-line);
}
.note svg{width:19px;height:19px;flex:none;margin-top:.15rem;color:var(--accent)}

/* ---------- 25. MAP ---------- */
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--bg-3)}
.map iframe{display:block;width:100%;height:clamp(280px,42vw,440px);border:0;filter:grayscale(.35) contrast(1.05)}
[data-theme="dark"] .map iframe{filter:grayscale(.6) invert(.92) hue-rotate(180deg) contrast(.9) brightness(.95)}

/* ---------- 26. 404 ---------- */
.e404{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--hdr-h) + 3rem) var(--pad) 4rem;position:relative;overflow:hidden}
.e404__n{
  font-family:var(--font-display);font-weight:800;line-height:.85;letter-spacing:-.06em;
  font-size:clamp(6rem,26vw,18rem);
}
.e404__mark{width:clamp(72px,14vw,124px);margin:0 auto 1.6rem;animation:floaty 5.5s ease-in-out infinite}

/* ---------- 27. SCROLL REVEAL ---------- */
[data-rv]{opacity:0}
[data-rv="up"]{transform:translateY(30px)}
[data-rv="down"]{transform:translateY(-26px)}
[data-rv="left"]{transform:translateX(-34px)}
[data-rv="right"]{transform:translateX(34px)}
[data-rv="zoom"]{transform:scale(.93)}
[data-rv="blur"]{transform:translateY(20px) scale(.985)}
[data-rv].rv-in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .95s var(--ease)}

/* parallax-ish float */
[data-float]{transition:transform .35s var(--ease-soft)}

/* count-up numbers */
.cnum{display:inline-block;font-variant-numeric:tabular-nums}

/* ---------- 28. UTIL ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:fixed;top:.6rem;left:.6rem;z-index:1000;
  padding:.7rem 1.15rem;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:600;color:#00131a;background:var(--brand-400);
  transform:translateY(-160%);transition:transform .3s var(--ease);
}
.skip:focus{transform:none}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-2),transparent);border:0;margin-block:clamp(2rem,4vw,3rem)}
.nowrap{white-space:nowrap}
.hide-sm{display:initial}
@media(max-width:620px){.hide-sm{display:none}}

/* noise overlay for depth */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;
  opacity:var(--noise-op);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* page-load stagger for hero children */
.pl>*{opacity:0;transform:translateY(22px);animation:plIn .9s var(--ease) forwards}
.pl>*:nth-child(1){animation-delay:.12s}
.pl>*:nth-child(2){animation-delay:.20s}
.pl>*:nth-child(3){animation-delay:.28s}
.pl>*:nth-child(4){animation-delay:.36s}
.pl>*:nth-child(5){animation-delay:.44s}
.pl>*:nth-child(6){animation-delay:.52s}
@keyframes plIn{to{opacity:1;transform:none}}

/* scrollbar */
@media(min-width:900px){
  *::-webkit-scrollbar{width:11px;height:11px}
  *::-webkit-scrollbar-track{background:var(--bg-2)}
  *::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid var(--bg-2)}
  *::-webkit-scrollbar-thumb:hover{background:var(--brand-600)}
}

/* ---------- 29. MOTION / A11Y ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1!important;transform:none!important;filter:none!important}
  .pl>*{opacity:1!important;transform:none!important}
  #glcanvas{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-soft,.btn--ghost,.pill,.ctrl,.lang__btn,.ctile,.dlrow,.tabs{background:var(--bg-3)}
  .hdr.is-stuck,.mnav,.lang__menu{background:var(--bg)}
}

/* ---------- 30. PRINT ---------- */
@media print{
  .hdr,.mnav,.dock,.progress,#glcanvas,.hero__grid,.hero__veil,body::after{display:none!important}
  body{background:#fff;color:#000}
  .glass{border:1px solid #ccc;box-shadow:none;background:#fff}
}


/* ---------- 31. SMALL-SCREEN HEADER FIXES (<=560px) ---------- */
@media(max-width:560px){
  .hdr__in{gap:.5rem}
  .hdr__cta{gap:.35rem}
  .hdr .lang{display:none}          /* prekidač jezika živi u mobilnom meniju */
  .brand__word{font-size:1rem}
  .brand__mark{width:32px;height:32px}
  .ctrl{width:36px;height:36px}
  .burger{width:36px;height:36px}
}
@media(max-width:360px){
  :root{--pad:.9rem}
  .brand__word{font-size:.92rem}
}

/* mobilni prekidač jezika u drawer-u */
.mnav__lang{display:flex;gap:.4rem;margin-top:1rem}
.mnav__lang button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.7rem .5rem;border-radius:var(--r-md);
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  color:var(--text-2);background:var(--glass);border:1px solid var(--border);
  transition:color .3s,border-color .3s,background-color .3s;
}
.mnav__lang button:hover{color:var(--text)}
.mnav__lang button[aria-selected="true"]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}

/* reveal transforms ne smeju da guraju layout */
[data-rv="left"]{transform:translateX(-24px)}
[data-rv="right"]{transform:translateX(24px)}

/* ---------- 32. DUGMAD NA MALIM EKRANIMA ---------- */
.btn{max-width:100%}
@media(max-width:480px){
  .btn--lg{padding:.92rem 1.25rem;font-size:.93rem}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 100%;white-space:normal;text-align:center;line-height:1.25}
  .cta-band .row .btn{flex:1 1 100%;white-space:normal}
  .row.gap-sm>.btn,.row.gap-md>.btn{white-space:normal}
}
@media(max-width:380px){
  .btn{font-size:.88rem;padding:.8rem 1.1rem}
  .pill{font-size:.74rem;padding:.45rem .8rem}
}

/* ---------- 33. TIPOGRAFIJA NA VRLO MALIM EKRANIMA ---------- */
@media(max-width:420px){
  h1,.h1{font-size:2rem;letter-spacing:-.03em}
  h2,.h2{font-size:1.62rem}
  .lead{font-size:.97rem;line-height:1.65}
  .status{font-size:.72rem;padding:.38rem .8rem}
  .eyebrow{font-size:.65rem;padding:.36rem .8rem}
  .hero{min-height:auto;padding-bottom:clamp(2.5rem,8vw,4rem)}
  .hero__meta{gap:.45rem}
  .stat__n{font-size:2.1rem}
  .card{padding:1.25rem}
  .sec-head{margin-bottom:2rem}
}

/* ---------- 34. HERO SPLIT (tekst + panel) ---------- */
.hero-split{
  display:grid;align-items:center;
  gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
}
@media(max-width:980px){.hero-split{grid-template-columns:1fr}}

/* ============================================================
   35. TOKENI ZA VEO I SJAJ (v2)
   ============================================================ */
:root,[data-theme="dark"]{
  --veil-1:rgba(4,8,13,.50);
  --veil-2:rgba(4,8,13,.86);
  --veil-top:rgba(4,8,13,.62);
  --veil-bot:rgba(4,8,13,.90);
  --sheen:rgba(34,211,238,.40);
}
[data-theme="light"]{
  --veil-1:rgba(238,244,247,.58);
  --veil-2:rgba(238,244,247,.90);
  --veil-top:rgba(238,244,247,.68);
  --veil-bot:rgba(238,244,247,.94);
  --sheen:rgba(8,145,178,.28);
}

/* ============================================================
   36. INTRO — logo se „pali" i otvara sajt
   ============================================================ */
html.intro-on,html.intro-on body{overflow:hidden}
html.no-intro .intro{display:none}
body.intro-on{overflow:hidden}
.intro{
  position:fixed;inset:0;z-index:2000;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .6s var(--ease),visibility .6s;
  /* sam sebe gasi — ne ceka ni jedan red JavaScript-a */
  animation:introGone .6s var(--ease) 1.5s forwards;
}
@keyframes introGone{to{opacity:0;visibility:hidden}}
.intro__core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;padding:var(--pad);isolation:isolate}
.intro__logo{
  width:clamp(92px,17vw,150px);height:auto;
  opacity:0;transform:scale(.55);
  filter:grayscale(1) brightness(.45) drop-shadow(0 0 0 rgba(34,211,238,0));
  animation:introLogo 1.05s var(--ease) forwards;
}
@keyframes introLogo{
  0%  {opacity:0;transform:scale(.55) rotate(-12deg);filter:grayscale(1) brightness(.35) drop-shadow(0 0 0 rgba(34,211,238,0))}
  30% {opacity:.85;transform:scale(.86) rotate(-4deg);filter:grayscale(.9) brightness(.5) drop-shadow(0 0 0 rgba(34,211,238,0))}
  52% {opacity:1;transform:scale(.98) rotate(0deg);filter:grayscale(.5) brightness(.8) drop-shadow(0 0 14px rgba(34,211,238,.35))}
  62% {transform:scale(1.14);filter:grayscale(0) brightness(1.5) drop-shadow(0 0 46px rgba(34,211,238,.95))}
  74% {transform:scale(1)}
  100%{opacity:1;transform:scale(1.02);filter:grayscale(0) brightness(1) drop-shadow(0 0 26px rgba(34,211,238,.6))}
}
/* prsten koji izleti u trenutku paljenja */
.intro__ring{
  position:absolute;top:50%;left:50%;z-index:-1;
  width:clamp(92px,17vw,150px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1.5px solid var(--brand-400);border-radius:50%;
  opacity:0;pointer-events:none;
  animation:introRing 1s var(--ease-soft) .58s forwards;
}
.intro__ring:nth-of-type(2){animation-delay:.74s}
@keyframes introRing{
  0%{opacity:.75;transform:translate(-50%,-50%) scale(.55)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.6)}
}
.intro__word{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,4.4vw,2.5rem);letter-spacing:-.04em;line-height:1;
  color:var(--text);
  opacity:0;transform:translateY(14px);
  animation:introWord .5s var(--ease) .62s forwards;
}
.intro__word span{color:var(--accent)}
.intro__tag{
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
  opacity:0;animation:introWord .5s var(--ease) .72s forwards;
}
@keyframes introWord{to{opacity:1;transform:none}}
.intro__bar{
  width:min(230px,52vw);height:2px;border-radius:2px;overflow:hidden;
  background:var(--border-2);
  opacity:0;animation:introWord .4s var(--ease) .78s forwards;
}
.intro__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-600),var(--brand-300));animation:introBar .68s var(--ease-soft) .8s forwards}
@keyframes introBar{to{width:100%}}
.intro__sound{
  margin-top:.4rem;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.15rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:600;font-size:.84rem;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;animation:introWord .45s var(--ease) .84s forwards;
  transition:transform .35s var(--spring),background-color .3s;
}
.intro__sound:hover{transform:translateY(-2px);background:var(--glass-2)}
.intro__sound svg{width:16px;height:16px}
.intro__skip{
  position:absolute;bottom:clamp(1.2rem,4vw,2.2rem);left:50%;transform:translateX(-50%);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  opacity:0;animation:introWord .45s var(--ease) .95s forwards;
}
/* bljesak koji „upali ekran" */
.intro__flash{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.95),var(--brand-300) 18%,transparent 62%);
  opacity:0;
}
.intro.is-out .intro__flash{animation:introFlash .6s var(--ease-soft) forwards}
@keyframes introFlash{0%{opacity:0;transform:scale(.3)}35%{opacity:.85}100%{opacity:0;transform:scale(2.4)}}
.intro.is-out{opacity:0;visibility:hidden}
.intro.is-out .intro__core{animation:introCoreOut .5s var(--ease) forwards}
@keyframes introCoreOut{to{opacity:0;transform:scale(1.25)}}

@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  body.intro-on{overflow:auto}
}

/* ============================================================
   37. DOCK — veliko „Pozovi" dugme (v2)
   ============================================================ */
.dock{
  position:fixed;right:clamp(.9rem,2.5vw,1.7rem);bottom:clamp(.9rem,2.5vw,1.7rem);
  z-index:850;display:flex;flex-direction:column;align-items:flex-end;gap:.65rem;
}
.dock__items{display:flex;flex-direction:column;gap:.55rem;align-items:flex-end}
.dock__items>a{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.66rem 1.05rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:.86rem;font-weight:600;color:#fff;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.88);
  transition:opacity .35s var(--ease),transform .45s var(--spring),visibility .35s;
}
.dock.is-open .dock__items>a{opacity:1;visibility:visible;transform:none}
.dock.is-open .dock__items>a:nth-child(1){transition-delay:.04s}
.dock.is-open .dock__items>a:nth-child(2){transition-delay:.09s}
.dock.is-open .dock__items>a:nth-child(3){transition-delay:.14s}
.dock__items>a svg{width:18px;height:18px;flex:none}

/* glavni segment: veliki „Pozovi" + mali prekidač */
.dock__main{
  display:flex;align-items:stretch;
  border-radius:var(--r-pill);overflow:hidden;
  box-shadow:0 14px 40px -12px rgba(6,182,212,.75),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .4s var(--spring),box-shadow .4s var(--ease);
}
.dock__main:hover{transform:translateY(-3px);box-shadow:0 20px 52px -12px rgba(6,182,212,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.dock__call{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.5rem;
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1;
  color:#00131a;
  background:linear-gradient(135deg,var(--brand-300),var(--brand-500) 55%,var(--brand-600));
  white-space:nowrap;position:relative;overflow:hidden;
}
.dock__call svg{width:21px;height:21px;flex:none;animation:ringing 2.8s var(--ease-soft) infinite}
@keyframes ringing{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(-13deg)}80%{transform:rotate(11deg)}84%{transform:rotate(-8deg)}88%{transform:rotate(6deg)}92%{transform:rotate(0)}}
.dock__call::after{
  content:"";position:absolute;top:0;left:0;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-215%) skewX(-18deg);animation:sweep 3.4s var(--ease-soft) infinite;
}
.dock__more{
  width:48px;display:grid;place-items:center;flex:none;
  color:#00131a;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  border-left:1px solid rgba(0,0,0,.18);
  transition:background-color .3s;
}
.dock__more svg{width:18px;height:18px;transition:transform .45s var(--spring)}
.dock.is-open .dock__more svg{transform:rotate(180deg)}
/* puls koji privlači pažnju */
.dock__main::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-pill);
  border:2px solid var(--brand-400);pointer-events:none;
  animation:ping 3s var(--ease-soft) infinite;
}
.dock__main{position:relative}
.dock.is-open .dock__main::before{display:none}
@media(max-width:520px){
  .dock__call{padding:.88rem 1.15rem;font-size:.95rem}
  .dock__more{width:42px}
}

/* ============================================================
   38. NAVIGACIJA — animirano podvlačenje + sjaj (v2)
   ============================================================ */
.nav a{position:relative;overflow:hidden}
.nav a::before{
  content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-400),var(--brand-600));
  transform:translateX(-50%);
  transition:width .4s var(--ease);
}
.nav a:hover::before,.nav a[aria-current="page"]::before{width:calc(100% - 1.55rem)}
.nav a::after{
  content:"";position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,var(--sheen),transparent);
  transform:translateX(-215%) skewX(-18deg);pointer-events:none;
}
.nav a:hover::after{animation:sweep .8s var(--ease-soft)}
.ctrl,.lang__btn{position:relative;overflow:hidden}
.ctrl::after,.lang__btn::after{
  content:"";position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,var(--sheen),transparent);
  transform:translateX(-215%) skewX(-18deg);pointer-events:none;
}
.ctrl:hover::after,.lang__btn:hover::after{animation:sweep .8s var(--ease-soft)}
.ctrl>*,.lang__btn>*{position:relative;z-index:1}

/* ============================================================
   39. MOBILNI MENI — liquid glass (v2)
   ============================================================ */
.mnav{
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
  padding-top:calc(var(--hdr-h) + .9rem);
}
.mnav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 420px at 85% 6%,var(--accent-soft),transparent 62%),
             radial-gradient(600px 380px at 8% 92%,color-mix(in srgb,var(--brand-600) 16%,transparent),transparent 60%);
}
.mnav>*{position:relative}
.mnav__list{gap:.5rem}
.mnav__list a{
  position:relative;overflow:hidden;
  padding:.95rem 1.1rem;border-radius:18px;
  font-size:1.05rem;
  background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-sm),inset 0 1px 0 var(--glass-hi);
  transform:translateY(18px) scale(.97);
}
.mnav__list a::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.13),transparent 45%);
}
[data-theme="light"] .mnav__list a::before{background:linear-gradient(150deg,rgba(255,255,255,.9),transparent 55%)}
.mnav__list a>span{position:relative;display:flex;align-items:center;gap:.8rem}
.mnav__ico{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
  transition:transform .45s var(--spring),box-shadow .4s;
}
.mnav__ico svg{width:19px;height:19px}
.mnav__list a:active .mnav__ico{transform:scale(.92)}
.mnav__list a[aria-current="page"]{
  border-color:var(--accent-line);
  background:var(--accent-soft);
  box-shadow:var(--glow),inset 0 1px 0 var(--glass-hi);
}
.mnav__list a[aria-current="page"] .mnav__ico{box-shadow:var(--glow)}
.mnav__list a>svg:last-child{width:16px;height:16px;opacity:.45;flex:none;transition:transform .4s var(--ease)}
.mnav__list a:hover>svg:last-child{transform:translateX(5px);opacity:.9}
body.nav-open .mnav__list a{animation:mnavIn .62s var(--spring) forwards;animation-delay:calc(var(--i,0)*.055s + .08s)}
@keyframes mnavIn{to{opacity:1;transform:none}}

.mnav__lang{gap:.5rem;margin-top:1.1rem}
.mnav__lang button{
  padding:.75rem .5rem;border-radius:14px;
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 var(--glass-hi);
  opacity:0;transform:translateY(14px);
  animation:mnavIn .5s var(--ease) forwards;
}
body.nav-open .mnav__lang button:nth-child(1){animation-delay:.5s}
body.nav-open .mnav__lang button:nth-child(2){animation-delay:.56s}
body.nav-open .mnav__lang button:nth-child(3){animation-delay:.62s}
.mnav__foot{gap:.6rem}
.mnav__foot>*{opacity:0;transform:translateY(14px);animation:mnavIn .5s var(--ease) forwards}
body.nav-open .mnav__foot>*:nth-child(1){animation-delay:.68s}
body.nav-open .mnav__foot>*:nth-child(2){animation-delay:.74s}
.mnav__contact{opacity:0;animation:mnavIn .5s var(--ease) .8s forwards}

/* burger — čistiji, glass */
.burger{
  width:42px;height:42px;position:relative;
  background:var(--glass-2);border:1px solid var(--border-2);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:transform .4s var(--spring),border-color .3s,background-color .3s;
}
.burger:hover{transform:scale(1.05);border-color:var(--accent-line)}
.burger span{
  position:absolute;left:50%;top:50%;
  display:block;width:18px;height:2px;margin:0;border-radius:2px;background:var(--text);
  transition:transform .45s var(--spring),opacity .25s,width .35s var(--ease);
}
.burger span:nth-child(1){transform:translate(-50%,calc(-50% - 5.5px))}
.burger span:nth-child(2){transform:translate(-50%,-50%);width:13px}
.burger span:nth-child(3){transform:translate(-50%,calc(-50% + 5.5px))}
body.nav-open .burger{border-color:var(--accent-line);background:var(--accent-soft)}
body.nav-open .burger span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0;width:0}
body.nav-open .burger span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* ============================================================
   40. VIŠE ANIMACIJA (v2)
   ============================================================ */
/* Naslovi: podizanje iz zamućenja.
   VAŽNO: NE koristi se clip-path za skrivanje, jer Chrome tada
   prijavljuje element kao nevidljiv IntersectionObserver-u —
   pa se animacija nikad ne bi ni pokrenula. */
[data-rv="mask"]{opacity:0;transform:translateY(26px)}
[data-rv="mask"].rv-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .85s var(--ease);
}
/* linija koja se izvlači ispod naslova sekcije */
.sec-head h2{position:relative;padding-bottom:.5rem}
.sec-head h2::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--brand-400),var(--brand-600),transparent);
  transition:width 1.1s var(--ease) .25s;
}
.sec-head.center h2::after{left:50%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--brand-400),transparent)}
.sec-head h2.rv-in::after{width:min(180px,42%)}
[data-rv="flip"]{opacity:0;transform:perspective(900px) rotateX(14deg) translateY(26px)}
[data-rv="pop"]{opacity:0;transform:scale(.86)}
[data-rv="pop"].rv-in{transition:opacity .6s var(--ease),transform .7s var(--spring)}

/* prelaz između stranica */
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main{animation:pageIn .55s var(--ease) both}
body.is-leaving main,body.is-leaving .ftr{opacity:0;transform:translateY(-10px);transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft)}
body.is-leaving .hdr{opacity:.4;transition:opacity .3s}

/* kartice se blago naginju ka mišu */
.card,.work-card{transform-style:preserve-3d}

/* prozori (mock browser) plutaju */
.mockup{animation:floaty 7.5s ease-in-out infinite}
.mockup--slow{animation-duration:9.5s}

/* trepćuća tačkica na „live" oznakama */
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulseDot 2s var(--ease-soft) infinite}

/* ============================================================
   41. PREKIDAČ ZVUKA
   ============================================================ */
.snd{position:relative;overflow:hidden}
/* precrtan zvucnik = zvuk je ISKLJUCEN; obican = svira */
.snd .snd__on{display:none}
.snd .snd__off{display:block}
.snd.is-on .snd__on{display:block}
.snd.is-on .snd__off{display:none}
.snd.is-on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.snd__wave{position:absolute;inset:0;border-radius:inherit;border:1px solid var(--accent);opacity:0}
.snd.is-on .snd__wave{animation:ping 2.4s var(--ease-soft) infinite}

/* ============================================================
   42. MOCK PROZORI NA SVIM STRANICAMA
   ============================================================ */
.mockup{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:color-mix(in srgb,var(--bg-3) 72%,transparent);
  border:1px solid var(--border-2);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-hi);
}
.mockup__bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .85rem;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.mockup__bar i{width:9px;height:9px;border-radius:50%;flex:none}
.mockup__bar i:nth-child(1){background:#ff5f57}.mockup__bar i:nth-child(2){background:#febc2e}.mockup__bar i:nth-child(3){background:#28c840}
.mockup__url{flex:1;margin-left:.5rem;padding:.26rem .7rem;border-radius:var(--r-pill);font-size:.7rem;color:var(--text-3);background:var(--glass);border:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mockup__body{padding:clamp(1.1rem,2.4vw,1.7rem);display:flex;flex-direction:column;gap:.85rem}
.mockup__row{display:flex;align-items:center;gap:.75rem;font-size:.84rem;color:var(--text-2)}
.mockup__row .ok{color:var(--ok);flex:none}
.mockup__row svg{width:16px;height:16px;flex:none;color:var(--accent)}
.mockup__grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.mockup__tile{padding:.9rem;border-radius:14px;text-align:center;background:var(--glass);border:1px solid var(--border)}
.mockup__tile b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1;color:var(--accent)}
.mockup__tile span{display:block;margin-top:.3rem;font-size:.72rem;color:var(--text-3)}
.mockup__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.85rem;border-top:1px solid var(--border);font-size:.76rem;color:var(--text-3)}
/* traka koja se puni */
.mockup__bar-fill{height:5px;border-radius:3px;background:var(--border-2);overflow:hidden}
.mockup__bar-fill i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-600),var(--brand-300))}
.rv-in .mockup__bar-fill i,.mockup.rv-in .mockup__bar-fill i{animation:fillBar 1.6s var(--ease) forwards}
@keyframes fillBar{to{width:var(--w,78%)}}
/* linija koja skenira prozor */
.mockup__scan{position:absolute;left:0;right:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--accent-soft),transparent);
  animation:scan 5.5s var(--ease-soft) infinite}
@keyframes scan{0%{transform:translateY(-60%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(280%);opacity:0}}

/* ============================================================
   43. 3D NAGIB + PARALAKSA (koristi promenljive iz fx.js)
   ============================================================ */
.card,.work-card{
  transform:translateY(var(--ty,0)) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),border-color .45s var(--ease),box-shadow .55s var(--ease);
}
.card:hover,.card:focus-within,.work-card:hover{--ty:-6px}
.mockup{
  transform:translateY(var(--py,0)) perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s var(--ease);
  will-change:transform;
}
@media(hover:none){.card,.work-card,.mockup{transform:translateY(var(--ty,0))}}
.hero__panel{transform:translateY(var(--py,0))}


/* ============================================================
   44. TELEFONI — ŠTEDNJA BATERIJE I TEMPERATURE
   ------------------------------------------------------------
   Zašto ovo postoji:
   iPhone se grejao jer su se dve najskuplje stvari na webu
   poklopile na istom ekranu —
     1) WebGL platno preko celog ekrana koje se crta stalno, i
     2) backdrop-filter: blur(...) na desetinama elemenata.
   Kada se platno prekrasi, telefon mora IZNOVA da izračuna
   zamućenje za svaki stakleni element iznad njega. To je na
   Apple GPU-u posao koji troši više struje nego cela igra.
   Rešenje: na telefonu gasimo WebGL (v. bg.js) i ostavljamo
   pravo zamućenje samo na tri elementa koja ne skroluju.
   ============================================================ */
@media (max-width:900px),(pointer:coarse){

  /* ⚠️ NA TELEFONU NEMA NIJEDNOG `backdrop-filter`.
     Ni na zaglavlju, ni na meniju, ni na doku.

     Zašto baš tako: zaglavlje je fiksirano i stoji IZNAD sadržaja koji
     se pomera. Ako ono zamućuje ono što je ispod njega, telefon mora da
     preračuna to zamućenje na SVAKOM kadru skrolovanja. To je, uz živu
     pozadinu, drugi veliki potrošač — i razlog zašto se iPhone grejao
     i kada je pozadina već bila oborena.
     Umesto zamućenja, ovi elementi dobijaju gustu podlogu. Na tamnoj
     temi razlika se golim okom jedva vidi. */
  .hdr,.hdr.is-stuck,.mnav,.dock__items,.dock__panel,
  .glass,.glass-soft,.card,.work-card,.mockup,.tabs,.tab,.note,.alert,
  .eyebrow,.pill,.ctrl,.lang__btn,.lang__menu,.ctile,.dlrow,.faq,.faq__q,
  .stat,.step,.price,.review,.chip,.badge,.hero__panel,.cta-band,
  .btn--ghost,.btn--outline,.socials a,.mnav__list a,.mnav__lang button,
  .mnav__snd,.mnav__track,.intro__sound,.status,.burger,.skip,.progress{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* guste podloge umesto zamućenja */
  .hdr.is-stuck{background:var(--bg)}
  .hdr:not(.is-stuck){background:linear-gradient(180deg,var(--bg) 62%,transparent)}
  .mnav{background:var(--bg)}
  .dock__items{background:none}
  .dock__items>a,.lang__menu{background:var(--bg-2)}
  .glass,.card,.work-card,.mockup,.tabs,.note,.faq,.ctile,.dlrow,
  .stat,.step,.price,.review,.hero__panel,.ctrl,.lang__btn,
  .mnav__snd,.mnav__track,.burger{background:var(--glass-2)}
  .eyebrow{background:var(--accent-soft)}

  /* Beskonačne dekorativne animacije na telefonu ne rade ništa osim
     što drže grafiku budnom. */
  .mockup__scan,.dock__call::after,.dock__main::before,.snd__wave,
  .eyebrow::before,.btn::after,.nav a::after,.ctrl::after,.lang__btn::after{
    animation:none!important;
  }
  .mockup__scan{display:none}

  /* Senke i mešanje slojeva preko celog ekrana su skupi pri skrolovanju. */
  .ftr__glow{display:none}
  body::after{display:none}          /* zrno sa mix-blend-mode */

  /* `will-change` pravi zaseban sloj u memoriji za svaki element —
     na telefonu ih je previše, a nagib se ionako ne koristi bez miša. */
  .card,.work-card,.mockup,.hero__panel{will-change:auto}

}

/* Zamena za WebGL na telefonu: statična slika, crta se JEDNOM.
   Nema petlje, nema GPU troška, a ekran i dalje nije prazan.
   Koristi se samo platno — bez dodatnog elementa u HTML-u. */
#glcanvas.is-static{
  display:block;opacity:1;
  background:
    radial-gradient(58% 42% at 18% 6%,rgba(34,211,238,.17),transparent 70%),
    radial-gradient(52% 38% at 88% 24%,rgba(6,182,212,.14),transparent 72%),
    radial-gradient(74% 52% at 50% 106%,rgba(103,232,249,.11),transparent 70%);
}
[data-theme="light"] #glcanvas.is-static{
  background:
    radial-gradient(58% 42% at 18% 6%,rgba(13,108,133,.11),transparent 70%),
    radial-gradient(52% 38% at 88% 24%,rgba(8,145,178,.09),transparent 72%),
    radial-gradient(74% 52% at 50% 106%,rgba(13,108,133,.08),transparent 70%);
}
/* ako brauzer uopšte nema WebGL i platno nije ni napravljeno */
#glcanvas.is-off{display:none}

/* ============================================================
   45. HERO SE ISCRTAVA ODMAH (Largest Contentful Paint)
   ------------------------------------------------------------
   Naslov u heroju je element po kome Google meri LCP. Ako čeka
   IntersectionObserver, Google to broji kao „render delay" —
   u prošlom testu 3.200 ms. Zato sadržaj prvog ekrana ima svoju
   CSS animaciju koja kreće čim stigne stil, bez ijednog reda JS-a.
   ============================================================ */
.hero [data-rv]{animation:rvNow .62s var(--ease) both}
.hero [data-rv]:nth-of-type(2){animation-delay:.07s}
.hero [data-rv]:nth-of-type(3){animation-delay:.13s}
.hero [data-rv]:nth-of-type(4){animation-delay:.19s}
.hero__cta [data-rv],.hero [data-rv] [data-rv]{animation-delay:.16s}
@keyframes rvNow{from{opacity:0}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero [data-rv]{animation:none;opacity:1;transform:none}
}


/* ============================================================
   46. MUZIKA — prekidač i promena numere
   ------------------------------------------------------------
   Ikonica prati stanje: precrtan zvučnik = muzika NE svira,
   običan zvučnik = muzika svira. Dugme sa brojem se pojavljuje
   tek kada je muzika uključena i prebacuje na sledeću numeru.
   ============================================================ */
.snd-next{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.3rem;
  width:auto;padding-inline:.7rem;
  color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft);
  animation:sndIn .45s var(--spring) both;
}
.snd-next[hidden]{display:none}
.snd-next svg{width:16px;height:16px}
.snd__num{
  font-family:var(--font-display);font-weight:800;font-size:.72rem;line-height:1;
  min-width:1.05em;text-align:center;
}
@keyframes sndIn{from{opacity:0;transform:scale(.6) translateX(-8px)}to{opacity:1;transform:none}}

/* u mobilnom meniju — pun red, isti stakleni jezik kao ostalo */
.mnav__music{display:flex;gap:.6rem;margin-top:1rem}
.mnav__snd,.mnav__track{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem .9rem;border-radius:var(--r-md);
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  color:var(--text-2);background:var(--glass);border:1px solid var(--border);
  transition:transform .3s var(--spring),color .25s;
}
.mnav__snd:active,.mnav__track:active{transform:scale(.97)}
.mnav__snd.is-on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.mnav__snd svg,.mnav__track svg{width:17px;height:17px;flex:none}
.mnav__track[hidden]{display:none}
.mnav__snd .snd__on{display:none}
.mnav__snd .snd__off{display:block}
.mnav__snd.is-on .snd__on{display:block}
.mnav__snd.is-on .snd__off{display:none}

/* Na vrlo uskim ekranima u zaglavlju nema mesta za dugme numere —
   ono ionako postoji u mobilnom meniju, ispod prekidača za muziku. */
@media(max-width:560px){
  .snd-next{display:none}
}

/* ============================================================
   47. TRAKA SA PONUDOM JEZIKA
   ------------------------------------------------------------
   Pojavljuje se samo strancu, i samo jednom. Sajt se NE prebacuje
   sam — jer bi tada Google na srpskoj adresi video engleski tekst
   i po tome te rangirao. Ponuda, ne nametanje.
   ============================================================ */
.langbar{
  position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));
  transform:translate(-50%,140%);
  z-index:940;max-width:min(94vw,540px);
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .8rem .7rem 1rem;
  border-radius:var(--r-pill);
  background:var(--bg-2);border:1px solid var(--border-2);
  box-shadow:var(--shadow-lg);
  font-size:.87rem;color:var(--text);
  opacity:0;transition:transform .5s var(--spring),opacity .35s var(--ease);
}
.langbar.is-on{transform:translate(-50%,0);opacity:1}
.langbar__flag{font-size:1.15rem;line-height:1;flex:none}
.langbar__t{flex:1;min-width:0;line-height:1.35}
.langbar__ok{
  flex:none;padding:.45rem .85rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:700;font-size:.8rem;line-height:1;
  color:#00131a;background:linear-gradient(135deg,var(--brand-300),var(--brand-600));
  transition:transform .3s var(--spring);
}
.langbar__ok:hover{transform:translateY(-1px)}
.langbar__x{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:1.1rem;line-height:1;
  color:var(--text-3);transition:color .25s,background-color .25s;
}
.langbar__x:hover{color:var(--text);background:var(--glass)}
@media(max-width:560px){
  .langbar{bottom:calc(5.2rem + env(safe-area-inset-bottom));flex-wrap:wrap;border-radius:var(--r-md)}
  .langbar__t{flex:1 1 100%;order:1}
  .langbar__flag{order:0}
  .langbar__ok{order:2;margin-left:auto}
  .langbar__x{order:3}
}