/* ═══════════════════════════════════════════════════════════
   MILKUS d.o.o. Pale — 2026
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #07061A;
  --ink-2:    #0C0926;
  --ink-3:    #120E33;
  --purple:   #2D1A70;
  --purple-2: #4B2FB0;
  --yellow:   #FEF102;
  --white:    #FFFEFE;
  --muted:    rgba(255,255,255,.60);
  --muted-2:  rgba(255,255,255,.36);
  --line:     rgba(255,255,255,.10);

  --f-disp: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1440px;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:var(--f-body); font-size:clamp(15px,1.05vw,17px);
  line-height:1.65; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.nav-open{ overflow:hidden; }
img,video,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--yellow); color:var(--ink); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ── type ─────────────────────────────────────────────── */
.h2{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(30px,4.6vw,68px); line-height:1.02;
  letter-spacing:-.025em; margin:.15em 0 .5em;
  text-wrap:balance;
}
.kicker{
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--yellow); margin:0 0 6px;
}
.kicker span{ display:inline-block; }
.lead{ font-size:clamp(16px,1.35vw,20px); line-height:1.6; color:rgba(255,255,255,.86); }
.muted{ color:var(--muted); }

/* split-text char/word wrappers */
.sp-line{ display:block; overflow:hidden; }
.sp-word{ display:inline-block; will-change:transform; }

/* ── buttons ──────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--white); --bd:rgba(255,255,255,.28);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:100px;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-weight:700; font-size:14px; letter-spacing:.02em;
  overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .35s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--yellow);
  transform:translateY(101%); border-radius:100px;
  transition:transform .55s var(--ease);
}
.btn:hover{ color:var(--ink); border-color:var(--yellow); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:scale(.97); }
.btn--yellow{ --bg:var(--yellow); --fg:var(--ink); --bd:var(--yellow); }
.btn--yellow::before{ background:var(--white); }
.btn--yellow:hover{ color:var(--ink); border-color:var(--white); }
.btn--sm{ padding:11px 22px; font-size:13px; }
.link{
  display:inline-flex; gap:8px; align-items:center; font-weight:700; color:var(--yellow);
  border-bottom:1px solid rgba(254,241,2,.3); padding-bottom:2px; width:fit-content;
  transition:gap .35s var(--ease), border-color .35s;
}
.link:hover{ gap:14px; border-color:var(--yellow); }

/* ═════════ PRELOADER ═════════ */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:grid; place-items:center;
}
.preloader__inner{ display:grid; justify-items:center; gap:22px; width:min(280px,60vw); }
.preloader__mark{ width:64px; fill:var(--yellow); }
.preloader__mark path, .preloader__mark rect{ animation:pulse 1.6s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.preloader__bar{ width:100%; height:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0%; background:var(--yellow); }
.preloader__num{ font-family:var(--f-disp); font-size:12px; letter-spacing:.2em; color:var(--muted); }

/* ═════════ NAV ═════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:14px var(--pad) 0;
  transition:transform .6s var(--ease), padding .5s var(--ease);
}
.nav__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:var(--wrap); margin-inline:auto;
  padding:10px 10px 10px 16px; border-radius:100px;
  border:1px solid transparent; background:transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease),
             backdrop-filter .5s, box-shadow .5s var(--ease);
}
.nav.is-stuck{ padding-top:10px; }
.nav.is-stuck .nav__bar{
  background:rgba(10,8,32,.62); border-color:rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 18px 50px -28px rgba(0,0,0,.9);
}
.nav.is-hidden{ transform:translateY(-140%); }

.nav__logo{ display:flex; align-items:center; gap:11px; }
.nav__mark{ width:38px; height:38px; display:block; flex:none; }
.nav__mark canvas{ width:100%; height:100%; display:block; }
.nav__word{ height:15px; width:auto; transition:height .5s var(--ease), opacity .4s; }
.nav.is-stuck .nav__word{ height:14px; }

.nav__links{ position:relative; display:flex; gap:2px; }
.nav__pill{
  position:absolute; top:0; left:0; height:100%; border-radius:100px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
  opacity:0; pointer-events:none;
  transition:transform .5s var(--ease), width .5s var(--ease), opacity .35s;
}
.nav__links a{
  position:relative; z-index:1; padding:10px 17px; border-radius:100px;
  font-size:13.5px; font-weight:600; color:rgba(255,255,255,.7);
  white-space:nowrap; transition:color .3s;
}
.nav__links a:hover, .nav__links a.is-current{ color:#fff; }
.nav__links a.is-current::after{
  content:''; position:absolute; left:50%; bottom:2px; width:4px; height:4px;
  margin-left:-2px; border-radius:50%; background:var(--yellow);
}

.nav__right{ display:flex; align-items:center; gap:12px; }
.langsw{ position:relative; display:flex; padding:3px; border:1px solid var(--line); border-radius:100px; }
.langsw__pill{
  position:absolute; top:3px; left:0; height:calc(100% - 6px); border-radius:100px;
  background:var(--yellow); transition:transform .45s var(--ease), width .45s var(--ease);
}
.langsw a{
  position:relative; z-index:1; display:inline-flex; align-items:center;
  padding:6px 11px; border-radius:100px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--muted-2); transition:color .3s;
}
.langsw a:hover{ color:#fff; }
.langsw a.is-active{ color:var(--ink); }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:100px; position:relative; }
.burger span{
  position:absolute; left:12px; width:18px; height:1.5px; background:#fff; border-radius:2px;
  transition:transform .45s var(--ease), opacity .25s, width .45s var(--ease);
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:20.5px; width:12px; }
.burger span:nth-child(3){ top:26px; }
body.nav-open .burger span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; width:18px; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ═════════ MOBILNI MENI ═════════ */
.mmenu{
  position:fixed; inset:0; z-index:880; display:flex; flex-direction:column;
  justify-content:center; gap:8px; padding:100px var(--pad) 40px;
  background:radial-gradient(120% 90% at 80% 0%, rgba(75,47,176,.4), transparent 60%), rgba(7,6,26,.97);
  backdrop-filter:blur(24px);
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .8s var(--ease);
  pointer-events:none;
}
body.nav-open .mmenu{ clip-path:circle(150% at calc(100% - 44px) 44px); pointer-events:auto; }
.mmenu__nav{ display:flex; flex-direction:column; gap:2px; }
.mmenu__nav a{
  font-family:var(--f-disp); font-weight:800; font-size:clamp(28px,8vw,46px);
  letter-spacing:-.03em; line-height:1.12; padding:6px 0;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
body.nav-open .mmenu__nav a{ opacity:1; transform:none; }
.mmenu__nav a:nth-child(1){ transition-delay:.16s }
.mmenu__nav a:nth-child(2){ transition-delay:.22s }
.mmenu__nav a:nth-child(3){ transition-delay:.28s }
.mmenu__nav a:nth-child(4){ transition-delay:.34s }
.mmenu__nav a:nth-child(5){ transition-delay:.40s }
.mmenu__nav a:nth-child(6){ transition-delay:.46s; color:var(--yellow); }
.mmenu__foot{
  margin-top:auto; padding-top:28px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted);
}

/* ═════════ HERO ═════════ */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; display:flex; align-items:flex-end; }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__vsrc{ position:absolute; width:2px; height:2px; opacity:0; pointer-events:none; }
.hero.no-webgl .hero__vsrc{
  position:absolute; inset:0; width:100%; height:100%; opacity:1;
  object-fit:cover; filter:saturate(.85) contrast(1.05) brightness(.62);
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; 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)' opacity='.35'/%3E%3C/svg%3E");
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,6,26,.72) 0%, rgba(7,6,26,.12) 32%, rgba(7,6,26,.55) 68%, var(--ink) 100%);
}
.hero__inner{
  position:relative; z-index:3; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) clamp(80px,11vh,140px);
}
.hero__eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 22px;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8);
}
.hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 0 rgba(254,241,2,.7); animation:ping 2.4s infinite; }
@keyframes ping{ 70%{ box-shadow:0 0 0 12px rgba(254,241,2,0);} 100%{ box-shadow:0 0 0 0 rgba(254,241,2,0);} }

.hero__title{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(34px,6.4vw,104px); line-height:.96; letter-spacing:-.035em;
  margin:0 0 26px; max-width:16ch;
}
.hero__title em{ font-style:normal; color:var(--yellow); }
.hero__sub{ max-width:56ch; font-size:clamp(15px,1.3vw,19px); color:rgba(255,255,255,.82); margin:0 0 34px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(80px,11vh,140px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  writing-mode:vertical-rl;
}
.hero__scroll i{ display:block; width:1px; height:56px; background:linear-gradient(var(--yellow),transparent); }

/* ═════════ STATEMENT ═════════ */
.stmt{
  position:relative; padding:clamp(56px,8vw,110px) 0;
  border-block:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(45,26,112,.55), transparent 62%),
    var(--ink);
  overflow:hidden;
}
.stmt::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 74px);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.stmt__grid{ position:relative; display:grid; gap:22px; justify-items:center; text-align:center; }
.stmt__meta{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-2);
}
.stmt__line{
  position:relative; margin:0; max-width:22ch;
  font-family:var(--f-disp); font-weight:800; line-height:1.02;
  font-size:clamp(26px,5.2vw,74px); letter-spacing:-.035em; text-wrap:balance;
}
.stmt__base{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.30);
}
.stmt__fill{
  position:absolute; inset:0; color:var(--yellow);
  -webkit-text-stroke:0;
  clip-path:inset(0 100% 0 0);
  will-change:clip-path;
}

/* ═════════ INTRO ═════════ */
.intro{ padding:clamp(80px,12vw,170px) 0 clamp(60px,8vw,110px); }
.intro__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,5vw,90px); align-items:start; }
.intro__left{ position:sticky; top:120px; }
.intro__left .h2{ max-width:14ch; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; padding-top:34px; border-top:1px solid var(--line); }
.stat b{
  display:block; font-family:var(--f-disp); font-weight:800; font-size:clamp(30px,3.4vw,50px);
  line-height:1; color:var(--yellow); letter-spacing:-.03em;
}
.stat span{ display:block; margin-top:9px; font-size:12.5px; color:var(--muted); line-height:1.35; }

/* ═════════ FLOW (3D process) ═════════ */
.flow{ position:relative; height:420vh; }
.flow__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; z-index:0;
}
.flow__sticky{
  position:sticky; top:0; height:100svh; z-index:1; display:flex; flex-direction:column;
  justify-content:space-between; padding-block:clamp(80px,10vh,120px) clamp(40px,6vh,70px);
  overflow:hidden;
}
/* zavjese da tekst uvijek ostane čitljiv preko 3D scene */
.flow__sticky::before,
.flow__sticky::after{
  content:''; position:absolute; left:0; right:0; z-index:1; pointer-events:none;
}
.flow__sticky::before{ top:0; height:42%; background:linear-gradient(180deg,rgba(7,6,26,.94) 8%,rgba(7,6,26,.55) 55%,transparent); }
.flow__sticky::after{ bottom:0; height:46%; background:linear-gradient(0deg,rgba(7,6,26,.96) 34%,rgba(7,6,26,.6) 70%,transparent); }
.flow__head, .flow__steps, .flow__progress{ position:relative; z-index:2; }
.flow__title{ margin:0; max-width:11ch; }
.flow__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,32px); align-items:end; }
.fstep{
  opacity:.22; transition:opacity .6s var(--ease), transform .6s var(--ease);
  transform:translateY(12px); border-top:1px solid var(--line); padding-top:18px;
}
.fstep.is-on{ opacity:1; transform:none; border-top-color:var(--yellow); }
.fstep__n{ font-family:var(--f-disp); font-size:11px; letter-spacing:.2em; color:var(--yellow); }
.fstep h3{ font-family:var(--f-disp); font-weight:600; font-size:clamp(15px,1.5vw,21px); line-height:1.2; margin:12px 0 8px; letter-spacing:-.01em; }
.fstep p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.55; }
.flow__progress{ position:absolute; left:var(--pad); right:var(--pad); bottom:22px; height:1px; background:var(--line); }
.flow__progress i{ display:block; height:100%; width:0; background:var(--yellow); }

/* ═════════ UNITS ═════════ */
.units{ padding:clamp(80px,12vw,160px) 0; background:linear-gradient(180deg,var(--ink),var(--ink-2) 45%,var(--ink)); }
.units__head{ margin-bottom:clamp(32px,4vw,64px); }
.units__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3.5vw,56px); align-items:stretch; }
.units__map{
  position:relative; border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, rgba(75,47,176,.28), transparent 60%), var(--ink-2);
  min-height:clamp(400px,50vw,620px);
}
.units__map canvas{ width:100%; height:100%; display:block; }
.mlabels{ position:absolute; inset:0; pointer-events:none; }
.mlabel{
  position:absolute; top:0; left:0; pointer-events:auto;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 10px; border-radius:100px;
  background:rgba(10,8,32,.72); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  font-family:var(--f-disp); font-weight:600; font-size:11.5px; letter-spacing:.01em;
  color:rgba(255,255,255,.82); white-space:nowrap; opacity:0;
  transition:opacity .4s var(--ease), color .3s, border-color .3s, background .3s;
}
.mlabel i{ width:6px; height:6px; border-radius:50%; background:var(--yellow); flex:none; }
.mlabel.is-hq i{ box-shadow:0 0 0 3px rgba(254,241,2,.22); }
.mlabel:hover{ border-color:rgba(254,241,2,.5); color:#fff; }
.mlabel.is-on{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.mlabel.is-on i{ background:var(--ink); }

.units__hint{
  position:absolute; left:20px; bottom:18px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); pointer-events:none;
}
.units__panel{ position:relative; }
.unit{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:var(--ink-3);
  transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.unit.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.unit__media{
  position:relative; width:100%; height:clamp(180px,21vw,260px); overflow:hidden; flex:none;
}
.unit__v{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.8); }

/* jedinice bez fotografije — tehnički „coordinate" panel */
.unit__media--vec{
  background:
    radial-gradient(110% 120% at 50% 0%, rgba(75,47,176,.42), transparent 66%),
    var(--ink-2);
}
.unit__media--vec::before{
  content:''; position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:15px 15px;
  mask-image:radial-gradient(75% 85% at 50% 45%, #000, transparent);
}
.uvg{ position:absolute; inset:0; width:100%; height:100%; }
.uvg g{ fill:none; stroke-linecap:round; }
.uvg .uvg-topo{ stroke:rgba(255,255,255,.16); stroke-width:1; }
.uvg .uvg-cross{ stroke:rgba(255,255,255,.28); stroke-width:1; stroke-dasharray:3 5; }
.uvg .uvg-pin{ fill:var(--yellow); stroke:none; filter:drop-shadow(0 0 14px rgba(254,241,2,.45)); }
.uvg .uvg-pin .hole{ fill:var(--ink); }
.unit.is-active .uvg .uvg-pin{ animation:pinDrop .9s var(--ease) both; }
@keyframes pinDrop{ 0%{ transform:translateY(-26px); opacity:0 } 60%{ opacity:1 } 100%{ transform:none; opacity:1 } }
.unit__geo{
  position:absolute; left:16px; bottom:12px; z-index:2;
  font-family:var(--f-disp); font-size:10.5px; letter-spacing:.12em;
  color:rgba(255,255,255,.55);
}
.unit__body{ padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; gap:12px; flex:1; }
.unit__tag{
  align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--yellow); padding:5px 11px; border-radius:100px;
}
.unit__body h3{ font-family:var(--f-disp); font-weight:800; font-size:clamp(26px,3vw,42px); margin:0; letter-spacing:-.03em; }
.unit__body p{ margin:0; color:var(--muted); font-size:14.5px; }
.unit__meta{ list-style:none; margin:auto 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 20px; }
.unit__meta a{ font-size:13.5px; font-weight:600; color:rgba(255,255,255,.8); transition:color .3s; }
.unit__meta a:hover{ color:var(--yellow); }

/* ═════════ SERVICES ═════════ */
.svc{ padding:clamp(70px,10vw,150px) 0; }
.svc__head{ margin-bottom:clamp(30px,4vw,60px); }
.svc__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,22px); }

.sc{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:26px; background:var(--ink-2);
  isolation:isolate;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.sc::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(90% 70% at 12% 0%, rgba(75,47,176,.30), transparent 62%);
}
.sc:hover{ border-color:rgba(254,241,2,.32); }

.sc__body{ margin-top:auto; padding:clamp(22px,2.4vw,36px); display:flex; flex-direction:column; gap:10px; }
.sc__n{
  font-family:var(--f-disp); font-size:11px; letter-spacing:.24em; color:var(--yellow);
}
.sc__body h3{
  font-family:var(--f-disp); font-weight:600; font-size:clamp(18px,1.85vw,27px);
  line-height:1.16; letter-spacing:-.02em; margin:0; max-width:19ch;
}
.sc__body p{ margin:0; color:var(--muted); font-size:14px; max-width:44ch; line-height:1.6; }

/* — kartica sa dron snimkom — */
.sc--film{ grid-column:span 7; grid-row:span 2; min-height:clamp(360px,40vw,560px); }
.sc__v{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:saturate(.8) brightness(.56); transform:scale(1.07);
  transition:transform 1.3s var(--ease), filter .8s;
}
.sc--film::after{
  background:linear-gradient(180deg,rgba(7,6,26,.10) 20%,rgba(7,6,26,.92) 88%);
}
.sc--film:hover .sc__v{ transform:scale(1); filter:saturate(1) brightness(.68); }

/* — kartice sa vektorskom grafikom — */
.sc--art{ grid-column:span 5; min-height:clamp(280px,26vw,330px); }
.sc__art{
  position:relative; flex:1; display:grid; place-items:center;
  padding:clamp(18px,2vw,30px) clamp(18px,2vw,30px) 0;
  min-height:130px;
}
.sc__art::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:16px 16px;
  mask-image:radial-gradient(70% 70% at 50% 45%, #000, transparent);
}
.vg{ position:relative; z-index:1; width:100%; height:auto; max-height:100%; overflow:visible; }
.vg g{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.vg .vg-dim{ stroke:rgba(255,255,255,.18); stroke-width:1; stroke-dasharray:4 6; }
.vg .vg-line{ stroke:rgba(255,255,255,.72); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.vg .vg-accent{ stroke:var(--yellow); stroke-width:1.8; fill:var(--yellow); vector-effect:non-scaling-stroke; }
.vg .vg-accent path{ fill:none; }
.vg .d{ stroke-dasharray:var(--len,1400); stroke-dashoffset:var(--len,1400); }
.sc.is-drawn .vg .d{ animation:vgDraw 1.5s var(--ease) forwards; }
.sc.is-drawn .vg-accent{ animation:vgFade .7s var(--ease) 1.05s both; }
.sc.is-drawn .vg-dim{ animation:vgFade .7s var(--ease) .15s both; }
@keyframes vgDraw{ to{ stroke-dashoffset:0; } }
@keyframes vgFade{ from{ opacity:0 } to{ opacity:1 } }
.vg-accent, .vg-dim{ opacity:0; }
.sc--art:hover .vg .vg-line{ stroke:#fff; }
.sc--art:hover .vg .vg-accent{ filter:drop-shadow(0 0 10px rgba(254,241,2,.55)); }

/* — široka traka: autobus — */
.sc--bus{
  grid-column:span 12; flex-direction:row; align-items:center; gap:clamp(20px,3vw,50px);
  background:linear-gradient(110deg, var(--purple) 0%, var(--ink-3) 62%, var(--ink-2) 100%);
  min-height:clamp(240px,24vw,300px);
}
.sc--bus .sc__body{ margin:0; flex:0 0 min(46%,520px); }
.sc--bus .sc__art{ padding:clamp(18px,2vw,34px) clamp(18px,2.4vw,40px); align-self:stretch; }
.sc--bus .sc__art::before{ mask-image:radial-gradient(80% 80% at 60% 50%, #000, transparent); }
.sc--bus .link{ margin-top:6px; }

@media (max-width:1100px){
  .sc--film{ grid-column:span 12; grid-row:span 1; }
  .sc--art{ grid-column:span 6; }
}
@media (max-width:700px){
  .sc--art{ grid-column:span 12; }
  .sc--bus{ flex-direction:column; align-items:stretch; }
  .sc--bus .sc__body{ flex:none; }
  .sc--bus .sc__art{ order:-1; }
}

/* ═════════ QUOTE ═════════ */
.quote{ padding:clamp(60px,9vw,140px) 0; text-align:center; }
.quote__t{
  font-family:var(--f-disp); font-weight:400; font-size:clamp(22px,3.4vw,50px);
  line-height:1.18; letter-spacing:-.03em; margin:0 auto; max-width:20ch; text-wrap:balance;
}
.quote__b{ margin:24px 0 0; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--yellow); }

/* ═════════ PROMO VIDEO ═════════ */
.vid{ padding:0 0 clamp(70px,10vw,150px); }
.vid__head{ margin-bottom:clamp(26px,3vw,48px); }
.vid__head .lead{ margin:clamp(16px,2vw,26px) 0 0; max-width:62ch; }
.vid__box{
  position:relative; margin:0; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
  box-shadow:0 40px 120px -50px rgba(75,47,176,.75);
}
.vid__v{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  background:var(--ink); object-fit:cover;
}
.vid__play{
  position:absolute; left:0; right:0; top:0; bottom:54px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  border:0; cursor:pointer; color:var(--white);
  font-family:var(--f-body); font-size:12px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  background:linear-gradient(0deg, rgba(7,6,26,.62), rgba(7,6,26,.18));
  transition:opacity .45s var(--ease);
}
.vid__play svg{
  width:84px; height:84px; fill:var(--ink); border-radius:50%;
  background:var(--yellow); padding:16px;
  box-shadow:0 0 0 0 rgba(254,241,2,.45);
  transition:transform .45s var(--ease), box-shadow .45s;
}
.vid__play:hover svg{ transform:scale(1.07); box-shadow:0 0 0 18px rgba(254,241,2,.10); }
.vid__play:focus-visible{ outline:2px solid var(--yellow); outline-offset:-4px; }
.vid__box.is-playing .vid__play{ opacity:0; pointer-events:none; }
.vid__meta{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(16px,2vw,28px); border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
}
.vid__sign{ color:var(--yellow); letter-spacing:.14em; }
@media (max-width:640px){
  .vid__play svg{ width:64px; height:64px; padding:13px; }
  .vid__play{ font-size:10px; letter-spacing:.18em; }
}

/* ═════════ GALLERY ═════════ */
.gal{ padding:0 0 clamp(70px,10vw,150px); }
.gal__head{ margin-bottom:clamp(26px,3vw,50px); }
.gal__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(190px,21vw,330px); gap:clamp(10px,1.2vw,18px);
}
.gitem{
  position:relative; overflow:hidden; border-radius:16px; cursor:pointer;
  background:var(--ink-2); border:1px solid var(--line);
}
.gitem img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s; filter:saturate(.85) brightness(.9); }
.gitem:hover img{ transform:scale(1.06); filter:saturate(1.05) brightness(1); }
.gitem::after{
  content:'+'; position:absolute; right:14px; top:10px; font-size:20px; color:var(--yellow);
  opacity:0; transform:translateY(-6px); transition:.4s var(--ease);
}
.gitem:hover::after{ opacity:1; transform:none; }
.g-a{ grid-column:span 7; }
.g-b{ grid-column:span 5; }
.g-c{ grid-column:span 4; }
.g-d{ grid-column:span 8; }
.g-tall{ grid-row:span 2; }

/* ═════════ PARTNERS ═════════ */
.prt{ padding:clamp(60px,9vw,130px) 0; border-top:1px solid var(--line); }
.prt__head{ margin-bottom:clamp(28px,3.4vw,56px); }
.prt__rows{ display:grid; gap:clamp(10px,1.2vw,18px); }
.prt__row{ overflow:hidden; }
.prt__track{ display:flex; gap:clamp(10px,1.2vw,18px); width:max-content; will-change:transform; }
.pchip{
  display:flex; align-items:center; justify-content:center; flex:none;
  min-width:clamp(180px,18vw,260px); height:clamp(86px,8vw,116px);
  padding:0 clamp(22px,2.6vw,40px);
  border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.025);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.pchip img{
  max-height:clamp(26px,3vw,42px); width:auto; max-width:100%;
  filter:brightness(0) invert(1); opacity:.55;
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
.pchip:hover{ border-color:rgba(254,241,2,.35); background:rgba(254,241,2,.04); }
.pchip:hover img{ opacity:1; }

/* fotografija umjesto crteža (autobus) */
.sc__art--photo{ padding:0 !important; align-self:stretch; display:block; position:relative; overflow:hidden; }
.sc__art--photo::before{ display:none; }
.sc__art--photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) brightness(.88);
  transition:transform 1.2s var(--ease), filter .6s;
}
.sc--bus:hover .sc__art--photo img{ transform:scale(1.04); filter:saturate(1) brightness(1); }
@media (max-width:700px){ .sc__art--photo{ height:200px; } }

/* ═════════ FAQ ═════════ */
.faq{ padding:clamp(60px,9vw,130px) 0; border-top:1px solid var(--line); }
.faq__head{ margin-bottom:clamp(24px,3vw,48px); }
.faq__list{ display:grid; gap:10px; }
.faq__item{ max-width:1060px; }
.faq__item{
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.02);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.faq__item[open]{ border-color:rgba(254,241,2,.32); background:rgba(254,241,2,.03); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px);
  cursor:pointer; list-style:none;
  font-family:var(--f-disp); font-weight:600; font-size:clamp(14.5px,1.35vw,19px);
  line-height:1.3; letter-spacing:-.015em; color:rgba(255,255,255,.88);
  transition:color .3s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:#fff; }
.faq__item summary i{
  position:relative; flex:none; width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); transition:.4s var(--ease);
}
.faq__item summary i::before,
.faq__item summary i::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--yellow);
  transform:translate(-50%,-50%); transition:transform .4s var(--ease);
}
.faq__item summary i::before{ width:10px; height:1.5px; }
.faq__item summary i::after{ width:1.5px; height:10px; }
.faq__item[open] summary i{ border-color:var(--yellow); transform:rotate(180deg); }
.faq__item[open] summary i::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__a{ padding:0 clamp(18px,2vw,28px) clamp(18px,2vw,26px); }
.faq__a p{
  margin:0; max-width:72ch; color:var(--muted); font-size:14.5px; line-height:1.65;
  border-top:1px solid var(--line); padding-top:16px;
}

/* ═════════ CONTACT ═════════ */
.ct{ padding:clamp(70px,10vw,150px) 0; background:linear-gradient(180deg,var(--ink),var(--ink-2)); }
.ct__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,90px); align-items:start; }
.ct__cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:44px; padding-top:30px; border-top:1px solid var(--line); }
.ct__col{ display:flex; flex-direction:column; gap:7px; }
.ct__col h4{ margin:0 0 6px; font-family:var(--f-disp); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--yellow); font-weight:600; }
.ct__col h4.mt{ margin-top:20px; }
.ct__col a{ font-size:14px; color:rgba(255,255,255,.78); transition:color .3s, transform .3s; width:fit-content; }
.ct__col a:hover{ color:var(--yellow); }

.ct__form{ display:grid; gap:16px; padding:clamp(24px,3vw,42px); border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.02); }
.ct__form label{ display:grid; gap:7px; }
.ct__form label span{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ct__form select{
  width:100%; padding:13px 16px; border-radius:12px; font:inherit; font-size:15px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:#fff;
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FEF102' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  transition:border-color .3s, background-color .3s;
}
.ct__form select:focus{ outline:none; border-color:var(--yellow); }
.ct__form select option{ background:var(--ink-2); color:#fff; }
.ct__form select.is-flash{ border-color:var(--yellow); background-color:rgba(254,241,2,.08); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ct__status{
  margin:0; font-size:13.5px; line-height:1.5; text-align:center;
  min-height:1.2em; transition:color .3s;
}
.ct__status.is-wait{ color:var(--muted); }
.ct__status.is-ok{ color:var(--yellow); font-weight:600; }
.ct__status.is-err{ color:#ff8f8f; }
.ct__form button[disabled]{ opacity:.6; pointer-events:none; }
.ct__form input,.ct__form textarea{
  width:100%; padding:13px 16px; border-radius:12px; font:inherit; font-size:15px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:#fff; resize:vertical;
  transition:border-color .3s, background .3s;
}
.ct__form input:focus,.ct__form textarea:focus{ outline:none; border-color:var(--yellow); background:rgba(254,241,2,.04); }
.ct__form .btn{ justify-content:center; margin-top:4px; }
.ct__note{ margin:0; font-size:12px; color:var(--muted-2); text-align:center; }

/* ═════════ FOOTER ═════════ */
.ft{ position:relative; overflow:hidden; border-top:1px solid var(--line); background:var(--ink); }
.ft__glow{
  position:absolute; left:50%; top:-30%; width:min(1100px,120vw); aspect-ratio:1;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(75,47,176,.34), transparent 62%);
}
.ft__cta{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-block:clamp(52px,7vw,96px);
  border-bottom:1px solid var(--line);
}
.ft__ctaT{
  margin:0; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(26px,4.2vw,58px); line-height:1.03; letter-spacing:-.03em; max-width:16ch;
}
.ft__cols{
  position:relative; display:grid;
  grid-template-columns:1.5fr .8fr .8fr 1.1fr; gap:clamp(24px,3vw,48px);
  padding-block:clamp(40px,5vw,72px);
}
.ft__col{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.ft__col h4{
  margin:0 0 8px; font-family:var(--f-disp); font-weight:600; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--yellow);
}
.ft__col a{
  position:relative; font-size:14px; color:rgba(255,255,255,.72);
  transition:color .3s var(--ease), padding-left .35s var(--ease);
}
.ft__col a::before{
  content:''; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--yellow); transition:width .35s var(--ease);
}
.ft__col a:hover{ color:#fff; padding-left:16px; }
.ft__col a:hover::before{ width:10px; }
.ft__col--brand p{ margin:14px 0 0; font-size:13.5px; color:var(--muted); max-width:38ch; line-height:1.6; }
.ft__logo{ height:30px; width:auto; }

.ft__word{
  position:relative; display:flex; justify-content:center; overflow:hidden;
  padding-bottom:clamp(6px,1.4vw,18px); margin-top:clamp(10px,2vw,26px);
  mask-image:linear-gradient(180deg,#000 30%,transparent);
}
.ft__word span{
  font-family:var(--f-disp); font-weight:800; line-height:.78;
  font-size:clamp(58px,17vw,250px); letter-spacing:-.045em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.16);
  white-space:nowrap; user-select:none;
}

.f-bot{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem 1.5rem; flex-wrap:wrap; font-size:.76rem; color:var(--muted-2);
  padding-block:22px; border-top:1px solid var(--line); position:relative;
}
.f-sign{ display:inline-flex; align-items:center; gap:.55em; letter-spacing:.02em; }
.f-sign::before{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--purple-2));
}
.f-sign a{
  color:var(--yellow); font-weight:600; letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:1px; transition:.3s;
}
.f-sign a:hover{ color:#fff; border-bottom-color:var(--yellow); }
@media(max-width:620px){ .f-sign::before{ display:none } }

/* ═════════ LIGHTBOX ═════════ */
.lb{
  position:fixed; inset:0; z-index:1000; background:rgba(7,6,26,.94); backdrop-filter:blur(10px);
  display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.lb.is-open{ opacity:1; pointer-events:auto; }
.lb img{ max-width:92vw; max-height:86vh; border-radius:12px; }
.lb button{ position:absolute; color:#fff; font-size:26px; width:52px; height:52px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.3s; }
.lb button:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.lb__x{ top:24px; right:24px; font-size:18px; }
.lb__p{ left:24px; top:50%; margin-top:-26px; }
.lb__n{ right:24px; top:50%; margin-top:-26px; }

/* ═════════ REVEAL ═════════ */
.reveal-up{ opacity:0; transform:translateY(26px); }

/* ═════════ RESPONSIVE ═════════ */
@media (max-width:1100px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .ft__cols{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .ft__col--brand{ grid-column:span 2; }
  .intro__grid, .units__grid, .ct__grid{ grid-template-columns:1fr; }
  .flow{ height:380vh; }
  .flow__steps{ grid-template-columns:repeat(2,1fr); gap:22px 18px; }
  .unit{ position:relative; }
  .gal__grid{ grid-template-columns:repeat(6,1fr); }
  .g-a,.g-d{ grid-column:span 6; }
  .g-b,.g-c{ grid-column:span 3; }
  .g-tall{ grid-row:span 1; }
}
@media (max-width:700px){
  .stats{ grid-template-columns:repeat(2,1fr); gap:24px 16px; }
  .ct__cols{ grid-template-columns:1fr; }
  .flow__steps{ grid-template-columns:1fr; }
  .fstep{ display:none; }
  .fstep.is-on{ display:block; }
  .flow{ height:340vh; }
  .hero__scroll{ display:none; }
  .gal__grid{ grid-template-columns:1fr; }
  .g-a,.g-b,.g-c,.g-d{ grid-column:span 1; }
  .langsw a{ padding:6px 8px; font-size:10px; }
  .nav__cta{ display:none; }
  .ft__cols{ grid-template-columns:1fr; }
  .ft__col--brand{ grid-column:span 1; }
  .ft__cta{ flex-direction:column; align-items:flex-start; }
  .stmt__line{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal-up{ opacity:1; transform:none; }
}