/* O nama (page 1766) → red */
body.page-id-1766{
  --service-about:#FF2E43;
  --accent:#FF2E43; --accent-strong:#FF5061; --accent-soft:rgba(255,46,67,.14);
  --glow-accent:0 0 24px rgba(255,46,67,.35);
}
body.page-id-1766 .page-hero{ --bloom-a:#FF2E43 !important; --bloom-b:#FF7A6E !important; }

/* Kontakt (page 1771) → yellow */
body.page-id-1771{
  --accent:#FDE11E; --accent-strong:#FFD400; --accent-soft:rgba(253,225,30,.16);
  --glow-accent:0 0 24px rgba(253,225,30,.32);
}
body.page-id-1771 .page-hero{ --bloom-a:#FDE11E !important; --bloom-b:#FFA94D !important; }


/* --- section palettes: override the spectrum walk with each page's two tones --- */
body.page-id-1768 .band{ --sa:#FC03FB; --sb:#FF3EA0; }  /* Dizajn rasvjete : magenta + pink */
body.page-id-1770 .band{ --sa:#00E8FF; --sb:#4FA8FF; }  /* Programiranje   : cyan + blue */
body.page-id-1769 .band{ --sa:#48F06E; --sb:#00E8FF; }  /* Laser show      : green + cyan */
body.page-id-1767 .band{ --sa:#B44BF8; --sb:#4FA8FF; }  /* Projekti        : violet + blue */
body.page-id-1766 .band{ --sa:#FF2E43; --sb:#FF7A6E; }  /* O nama          : red + coral */
body.page-id-1771 .band{ --sa:#FDE11E; --sb:#FFA94D; }  /* Kontakt         : yellow + amber */

/* keep each hero's bloom pair in step with its sections (o-nama/kontakt in ll-recolor-pages) */
body.page-id-1768 .page-hero{ --bloom-a:#FC03FB !important; --bloom-b:#FF3EA0 !important; }
body.page-id-1770 .page-hero{ --bloom-a:#00E8FF !important; --bloom-b:#4FA8FF !important; }
body.page-id-1769 .page-hero{ --bloom-a:#48F06E !important; --bloom-b:#00E8FF !important; }
body.page-id-1767 .page-hero{ --bloom-a:#B44BF8 !important; --bloom-b:#4FA8FF !important; }

/* --- crowd-LED fix: the .crowd-canvas ([data-crowdfx]) has no animator anywhere (blank).
       Re-enable the section-field aurora so the section reads as a proper background. --- */
.crowd-band::before{ display:block !important; }
.crowd-band{ min-height:clamp(420px,52vh,620px) !important; }


.eyebrow::before,
.pdx .pdx-eye::before,
.thx .thx-eye::before,
.tlx .tlx-eye::before,
.container:has(.work-feature) .eyebrow::before{
  content:"" !important;
  width:40px !important; height:12px !important; border-radius:0 !important;
  --lle-a:var(--sa, var(--page-a, var(--cyan,#00E8FF)));
  --lle-b:var(--sb, var(--page-b, var(--magenta,#FC03FB)));
  background:
    radial-gradient(circle at 4px 50%, #fff 0 1.4px, var(--lle-a) 1.8px 3.4px, transparent 4.3px),
    linear-gradient(90deg, var(--lle-a), var(--lle-b) 96%, transparent) !important;
  background-size:40px 12px, 30px 2px !important;
  background-position:left center, 9px center !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--lle-a) 58%, transparent)) !important;
  animation:lle-pulse 3.2s ease-in-out infinite !important;
}
@keyframes lle-pulse{
  0%,100%{ filter:drop-shadow(0 0 4px color-mix(in srgb, var(--lle-a) 40%, transparent)); }
  50%{ filter:drop-shadow(0 0 9px color-mix(in srgb, var(--lle-a) 80%, transparent)); }
}
@media (prefers-reduced-motion:reduce){
  .eyebrow::before,.pdx .pdx-eye::before,.thx .thx-eye::before,.tlx .tlx-eye::before,
  .container:has(.work-feature) .eyebrow::before{ animation:none !important; }
}


/* ---------- resting state (in the page, under the hero) ---------- */
nav.subnav{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  z-index:150 !important;
  background:linear-gradient(180deg, rgba(10,10,16,.50), rgba(8,8,12,.44)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.45);
  backdrop-filter:blur(20px) saturate(1.45) !important;
  border-top:1px solid rgba(255,255,255,.05) !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
/* The fullscreen menu owns the entire viewport. Keep the quicklinks in the
   document flow, but remove their painted layer and hit area while it is open. */
body.menu-open nav.subnav{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
nav.subnav::after{
  content:"";
  position:absolute; bottom:-1px; left:50%; transform:translateX(-50%);
  height:1.5px; width:34%;
  background:var(--gradient-spectrum, linear-gradient(90deg,#00E8FF,#48F06E,#B44BF8,#FC03FB,#FDE11E));
  opacity:.35;
  transition:width .55s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  pointer-events:none;
}

.subnav-inner{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  padding-block:11px !important;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.subnav-inner::-webkit-scrollbar{display:none}

.subnav-label{
  flex:0 0 auto;
  white-space:nowrap;
  overflow:hidden;
  transition:max-width .5s cubic-bezier(.22,1,.36,1), opacity .3s ease, margin .5s ease;
}

/* ---------- docked state: second tier of the menu bar ---------- */
nav.subnav.is-stuck{
  position:fixed !important;
  top:calc(var(--ll-top-h, 64px) + 8px) !important;
  left:50% !important; right:auto !important;
  width:max-content !important;
  max-width:calc(100% - 24px) !important;
  transform:translateX(-50%) !important;
  z-index:190 !important;               /* under .site-top (200) — slides out from beneath it */
  background:linear-gradient(180deg, rgba(5,7,10,.94), rgba(3,4,7,.9)) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.22);
  backdrop-filter:blur(14px) saturate(1.22) !important;
  border:0 !important;
  border-radius:999px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.025) !important;
  isolation:isolate;
  animation:lsn-drop .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lsn-drop{
  from{ transform:translate(-50%,-6px) scale(.985); opacity:0 }
  55% { opacity:1 }
  to  { transform:translate(-50%,0); opacity:1 }
}
/* Full capsule emitter: the same travelling brand spectrum as the menu tape,
   rendered as a precise one-pixel ring without bloom or blur. */
nav.subnav.is-stuck::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
  background-image:linear-gradient(90deg,
    #00E8FF 0%,#48F06E 12%,#B44BF8 25%,#FC03FB 37%,#FDE11E 50%,
    #FC03FB 63%,#B44BF8 75%,#48F06E 88%,#00E8FF 100%);
  background-size:2200px 100%;
  background-repeat:repeat-x;
  animation:lltg-flow 36s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.82;
}
nav.subnav.is-stuck::after{ display:none !important; }

/* docked: drop the "on this page" label so the pills read as a menu row */
nav.subnav.is-stuck .subnav-label{
  max-width:0 !important;
  opacity:0 !important;
  margin:0 !important;
  padding:0 !important;
}
nav.subnav.is-stuck .subnav-inner{
  gap:3px !important;
  padding:4px 6px !important;
  justify-content:center !important;
}
@media(max-width:900px){
  nav.subnav.is-stuck .subnav-inner{ justify-content:flex-start !important; }
}

/* ---------- pills: same language as the site-wide button system ----------
   Michroma uppercase label, 11px radius, page-accent spectral hairline ring
   drawn with a masked ::before (identical construction to .btn in ll-buttons).
   Deliberate deviation from .btn: no full-spectrum hover flood — in a row of
   four adjacent items that reads as a rainbow flicker, so hover simply lifts
   the ring to full strength. */
.subnav a{
  position:relative;
  z-index:1;
  isolation:isolate;
  flex:0 0 auto;
  padding:5px 10px !important;
  border-radius:999px !important;
  border:0 !important;
  background:transparent !important;
  font-family:var(--font-display, 'Michroma', sans-serif) !important;
  font-size:8.5px !important;
  font-weight:400 !important;
  line-height:1.15 !important;
  letter-spacing:.085em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  color:var(--gray-4,#B4B4B4) !important;
  text-decoration:none !important;
  transition:color .3s ease, transform .3s ease, background .3s ease;
}
.subnav a::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,
      var(--page-a, var(--cyan,#00E8FF)),
      var(--page-b, var(--magenta,#FC03FB)));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.subnav a:hover{
  color:#fff !important;
  transform:none;
  background:rgba(255,255,255,.045) !important;
}
.subnav a:hover::before{ opacity:0; }
.subnav a.is-active{
  color:#fff !important;
  background:transparent !important;      /* the sliding puck supplies the fill */
}
.subnav a.is-active::before{ opacity:0; }
/* the active pill sits directly on top of the sliding puck — lifting it on
   hover would slide the two out of register and read as a doubled outline */
.subnav a.is-active:hover{ transform:none !important; }

@media(max-width:900px){
  nav.subnav.is-stuck{max-width:calc(100% - 16px) !important;}
  .subnav a{ font-size:8px !important; padding:5px 9px !important; letter-spacing:.075em !important; }
}

/* sliding indicator — subtly lit, squared to match the pill */
.subnav-ind{
  position:absolute;
  top:50%;
  left:0;
  height:22px;
  margin-top:-11px;
  z-index:0;
  opacity:0;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--page-a, var(--cyan,#00E8FF)) 24%, transparent),
    color-mix(in srgb, var(--page-b, var(--magenta,#FC03FB)) 20%, transparent));
  /* fill + halo only — NO inset hairline. The pill's own ::before already draws
     the ring; a second ring here shows as a doubled outline the moment the two
     are even a pixel out of register. */
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--page-a, var(--cyan,#00E8FF)) 12%, transparent);
  transition:transform .5s cubic-bezier(.22,1,.36,1), width .5s cubic-bezier(.22,1,.36,1), opacity .34s ease;
}

/* flow placeholder that keeps the page from jumping when the bar docks */
.subnav-ph{ display:block; width:100%; margin:0; padding:0; }

/* anchored jumps clear both tiers of the bar */
.band[id], section[id]{
  scroll-margin-top:calc(var(--ll-top-h, 64px) + var(--ll-sub-h, 52px) + 14px);
}

@media(prefers-reduced-motion:reduce){
  nav.subnav.is-stuck{ animation:none !important; }
  .subnav-ind{ transition:opacity .2s ease !important; }
}


/* shared spectrum tile — deliberately wider than a desktop viewport, so at any
   moment you see two or three brand hues blending, never the whole rainbow */
.ll-spill, .ll-spill.b{
  /* background-IMAGE, never the `background` shorthand. The shorthand also sets
     background-position, and an !important declaration BEATS a CSS animation —
     so writing it that way silently froze lltg-flow and the band sat still. */
  background-image:linear-gradient(90deg,
      #00E8FF 0%,  #48F06E 12%, #B44BF8 25%, #FC03FB 37%, #FDE11E 50%,
      #FC03FB 63%, #B44BF8 75%, #48F06E 88%, #00E8FF 100%) !important;
  background-size:2200px 100% !important;
  background-repeat:repeat-x !important;
  animation:lltg-flow 36s linear infinite !important;
  will-change:background-position;
}

/* the bloom: soft, dim, fading down and out at both ends */
.ll-spill{
  height:46px !important;
  filter:blur(17px) saturate(.92) !important;
  opacity:.32 !important;
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
  mask-composite:intersect;
  transition:opacity .6s ease, height .55s cubic-bezier(.22,1,.36,1), filter .55s ease;
}

/* the emitter: a hairline on the strip's own edge. Same tile, same speed, so its
   colour always matches the bloom directly beneath it */
.ll-spill.b{
  height:1px !important;
  filter:none !important;
  opacity:.5 !important;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
  transition:opacity .6s ease;
}

/* colours travel across the bar at ~61px/s — a slow drift, not a chase. The loop
   is seamless because the gradient starts and ends on the same brand cyan and
   scrolls exactly one tile width. */
@keyframes lltg-flow{
  from{ background-position:0 0 }
  to  { background-position:-2200px 0 }
}

/* docked quicklinks: the bloom would wash over the pills, so it retreats to a
   faint halo and the hairline carries the colour */
body.ll-sub-stuck .ll-spill:not(.b){ height:1px !important; opacity:0 !important; filter:none !important; }
body.ll-sub-stuck .ll-spill.b{ height:1px !important; opacity:.72 !important; filter:none !important; }

/* calmer once the hero is behind us, so the menu bar stays readable */
body.ll-past-hero .ll-spill{   opacity:.17 !important; }
body.ll-past-hero .ll-spill.b{ opacity:.4 !important; }
/* Docked quicklinks always win over the generic past-hero state: one crisp,
   synchronized emitter remains on the menu edge and the bloom stays off. */
body.ll-past-hero.ll-sub-stuck .ll-spill:not(.b){ height:1px !important; opacity:0 !important; filter:none !important; }
body.ll-past-hero.ll-sub-stuck .ll-spill.b{ height:1px !important; opacity:.72 !important; filter:none !important; }

@media(max-width:700px){
  .ll-spill{ height:32px !important; filter:blur(13px) saturate(.92) !important; }
}

@media(prefers-reduced-motion:reduce){
  .ll-spill, .ll-spill.b{ animation:none !important; }
}


.site-top{
  background:linear-gradient(180deg, rgba(9,9,14,.62), rgba(9,9,14,.40)) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  backdrop-filter:blur(22px) saturate(1.3) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
/* pinned only after JS has measured the original flow position */
body.ll-topfix .site-top{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  width:100% !important;
}
body.ll-past-hero .site-top{
  background:linear-gradient(180deg, rgba(6,6,9,.80), rgba(6,6,9,.62)) !important;
  border-bottom-color:rgba(255,255,255,.09) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.34) !important;
}
.ll-top-spacer{display:block;width:100%;pointer-events:none}


/* default mid stop = exact midpoint of the pair, so 3-stop == 2-stop visually */
body{ --page-c: color-mix(in srgb, var(--page-a, var(--cyan,#00E8FF)) 50%, var(--page-b, var(--magenta,#FC03FB))); }

/* --- per-page accent pairs (hr / en / de ids), matching ll-page-palettes --- */
body.page-id-1766, body.page-id-1783, body.page-id-1784{  /* O nama        : red + coral   */
  --page-a:#FF2E43 !important; --page-b:#FF7A6E !important; }
body.page-id-1767, body.page-id-1785, body.page-id-1786{  /* Projekti      : violet + blue */
  --page-a:#B44BF8 !important; --page-b:#4FA8FF !important; }
body.page-id-1768, body.page-id-1787, body.page-id-1788{  /* Dizajn        : magenta + pink*/
  --page-a:#FC03FB !important; --page-b:#FF3EA0 !important; }
body.page-id-1770, body.page-id-1791, body.page-id-1792{  /* Programiranje : cyan + blue   */
  --page-a:#00E8FF !important; --page-b:#4FA8FF !important; }
body.page-id-1771, body.page-id-1793, body.page-id-1794{  /* Kontakt       : yellow + amber*/
  --page-a:#FDE11E !important; --page-b:#FFA94D !important; }

/* Laser show — the three-tone page: cyan -> blue -> green.
   a/b are the two ends, so the project-tile wash reads cyan->green as briefed;
   c supplies the blue that only the multi-stop gradients (subnav) pick up. */
body.page-id-1769, body.page-id-1789, body.page-id-1790{
  --page-a:#00E8FF !important; --page-c:#4FA8FF !important; --page-b:#48F06E !important; }

/* --- subnav quicklinks: three stops so the mid tone actually shows --- */
.subnav a::before{
  background:linear-gradient(135deg,
      var(--page-a, var(--cyan,#00E8FF)) 0%,
      var(--page-c, var(--page-b, var(--magenta,#FC03FB))) 50%,
      var(--page-b, var(--magenta,#FC03FB)) 100%) !important;
}
.subnav-ind{
  background:linear-gradient(90deg,
      color-mix(in srgb, var(--page-a, var(--cyan,#00E8FF)) 24%, transparent),
      color-mix(in srgb, var(--page-c, var(--page-b, var(--magenta,#FC03FB))) 22%, transparent),
      color-mix(in srgb, var(--page-b, var(--magenta,#FC03FB)) 20%, transparent)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--page-c, var(--page-a, var(--cyan,#00E8FF))) 14%, transparent) !important;
}


/* Denser tiles for the laser band only. .ll-laser-work exists nowhere else, and
   the two-class prefix outranks styles.css's single-class rules without
   !important, media query or not. */
.ll-laser-work .work-grid{
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--space-4,16px);
}
@media (max-width:1240px){
  .ll-laser-work .work-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:900px){
  .ll-laser-work .work-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ll-laser-work .work-grid{ gap:var(--space-3,12px); }
}
/* Phones stay two-up. One column x 12 tiles measured 4655px of scroll at 560px
   wide - a wall nobody reaches the end of. Two 3/2 tiles per row on a 390px
   screen are ~183px each, still readable, and cut the band to a third. */
@media (max-width:560px){
  .ll-laser-work .work-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3,12px); }
}

/* shorter crop: 3/2 instead of 4/3 takes ~11% off every row's height */
.ll-laser-work .work-card img{ aspect-ratio:3 / 2; }

/* chrome scaled to the smaller tile so the caption never crowds the crop */
.ll-laser-work .work-card,
.ll-laser-work .work-card::after{ border-radius:13px; }
.ll-laser-work .work-card .work-card-info{
  padding:var(--space-5,24px) var(--space-4,16px) var(--space-3,12px);
  gap:2px;
}
.ll-laser-work .work-card h3{ font-size:var(--text-base,15px); line-height:1.28; }
.ll-laser-work .work-card .meta{ font-size:10px; letter-spacing:0.06em; }
.ll-laser-work .work-card::before{
  inset:10px auto auto 12px;
  font-size:9.5px;
  letter-spacing:0.16em;
  padding:3px 7px;
  border-radius:14px;
}
/* two-up phone tiles are the smallest the band ever gets - shrink the caption
   and the counter with them so neither eats the crop */
@media (max-width:560px){
  .ll-laser-work .work-card,
  .ll-laser-work .work-card::after{ border-radius:11px; }
  .ll-laser-work .work-card .work-card-info{
    padding:var(--space-4,16px) var(--space-3,12px) var(--space-2,8px);
  }
  .ll-laser-work .work-card h3{ font-size:var(--text-sm,13px); line-height:1.24; }
  .ll-laser-work .work-card .meta{ font-size:9px; letter-spacing:0.05em; }
  .ll-laser-work .work-card::before{
    inset:8px auto auto 9px;
    font-size:8.5px;
    padding:2px 6px;
  }
}


/* (A) sane pre-JS puck default: the pills are 28.07px tall, not 33px. No
   !important — the inline styles written by ll-subnav.php and by the sync
   script below must still win. */
.subnav-ind{ height:28px; margin-top:-14px; }

/* (B) one hairline, not two — see the header comment. Dropping the border and
   adding its 1px to the padding leaves every box metric identical while making
   the padding box (which ::before's inset:0 resolves against) equal to the
   border box, so the masked ring sits exactly on the button's outline and
   border-radius:inherit is finally the right curve. */
.btn{
  border:0 !important;
  padding:16px 27px !important;
  box-shadow:0 6px 22px rgba(0,0,0,.32),
             inset 0 1px 0 rgba(255,255,255,.06),
             inset 0 0 0 1px rgba(245,245,245,.14) !important;
}


@media(max-width:980px){
  body:not(.home) .llsc-media{ min-height:clamp(240px,46vw,340px) !important; }
}
@media(max-width:700px){
  body:not(.home) .llsc{ padding-block:clamp(34px,9vw,52px) !important; }
  body:not(.home) .llsc-console{ border-radius:14px !important; }
  body:not(.home) .llsc-media{
    min-height:0 !important;
    height:clamp(150px,44vw,210px) !important;
    aspect-ratio:16/9 !important;
  }
  body:not(.home) .llsc-head{ padding:11px 14px !important; }
  body:not(.home) .llsc-kick{ font-size:9.5px !important; letter-spacing:.14em !important; }
  /* short, glanceable cue list rather than a full programme */
  body:not(.home) .llsc-cue{
    padding:9px 14px !important;
    font-size:11px !important;
    grid-template-columns:26px 14px 1fr auto !important;
    gap:8px !important;
  }
  body:not(.home) .llsc-cue:nth-child(n+6){ display:none !important; }
}
@media(max-width:430px){
  body:not(.home) .llsc-media{ height:clamp(130px,40vw,170px) !important; }
  body:not(.home) .llsc-cue:nth-child(n+5){ display:none !important; }
}