/* ==========================================================================
   NØIISE — world + panels
   A persistent 3D world in the background, pages open as panels above it.
   ========================================================================== */

:root {
  --bg: #060a10;
  --bg-2: #0b111a;
  --bg-3: #111a26;
  --line: rgba(232, 236, 241, .12);
  --line-strong: rgba(232, 236, 241, .26);
  --text: #eef1f5;
  --text-2: #a9b2bf;
  --text-3: #7e8896;
  --copper: #e8692a;
  --ember: #ff7a2f;
  --glow: rgba(255, 106, 31, .35);

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(3rem, 6.4vw, 6.6rem);
  --fs-title: clamp(2.4rem, 5vw, 4.8rem);
  --fs-label: .68rem;
  --track: .3em;

  --gutter: clamp(1rem, 3.5vw, 4rem);
  --nav-h: clamp(5rem, 13.2vh, 8rem);
  --panel-w: 920px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--bg); color: var(--text);
  font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-weight: 300; }
ul, ol { list-style: none; margin: 0; padding: 0; }
::selection { background: rgba(238, 241, 245, .22); color: inherit; }
:focus-visible { outline: 1px solid rgba(238, 241, 245, .75); outline-offset: 5px; border-radius: 2px; }   /* visible for keyboard users, light, never an orange box */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 300; background: var(--text); color: var(--bg); padding: .7rem 1rem; font-size: .85rem; }
.skip-link:focus { top: 1rem; }

.display { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; line-height: 1.02; }
.display em { font-style: italic; color: var(--copper); }
.label { font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); font-weight: 500; }

/* Text roll on hover: two stacked copies slide up */
.roll { display: inline-grid; overflow: hidden; line-height: 1.2; }
.roll > span { grid-area: 1 / 1; transition: transform .55s var(--ease-out); }
.roll > span:last-child { transform: translateY(105%); }
a:hover .roll > span:first-child, a:focus-visible .roll > span:first-child, button:hover .roll > span:first-child { transform: translateY(-105%); }
a:hover .roll > span:last-child, a:focus-visible .roll > span:last-child, button:hover .roll > span:last-child { transform: none; }

.todo { display: none; }
.show-todo .todo {
  display: inline-block; margin: .3em .4em; padding: .15em .5em; border-radius: 2px; vertical-align: middle;
  font: 600 .6rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #111; background: #ffd23f;
}

/* ==========================================================================
   Gate
   ========================================================================== */
.gate { display: none; }
.js.gate-open .gate {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: #000;
  transition: opacity 1.1s var(--ease-io), visibility 1.1s;
}
.gate.is-leaving { opacity: 0; visibility: hidden; }
.gate__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gate__inner { position: relative; width: min(44vw, 440px); text-align: center; pointer-events: none; }
.gate__mark { width: 100%; height: auto; overflow: visible; }
.gate__mark path {
  fill: none; stroke: var(--text); stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: .85;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-io) forwards; animation-delay: calc(.2s + var(--i) * .07s);
}
.gate__mark .gate__blade { stroke: var(--ember); opacity: 1; filter: drop-shadow(0 0 6px var(--glow)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.gate__tag { margin-top: 2rem; font-size: clamp(.55rem, 1.1vw, .72rem); letter-spacing: .55em; text-transform: uppercase; color: var(--copper); opacity: 0; animation: fade 1.2s 1.4s forwards; }
.gate__tag span { margin: 0 .6em; }
.gate__tag { max-width: 92vw; text-align: center; letter-spacing: .42em; }   /* two pairs: a bullet never starts a line */
.gate__pair { font-weight: inherit; white-space: nowrap; }
@media (max-width: 760px) { .gate__sep { display: none; } .gate__pair { display: block; } .gate__pair + .gate__pair { margin-top: .7em; } }
@keyframes fade { to { opacity: 1; } }

.gate__enter {
  position: absolute; left: 50%; bottom: clamp(2.5rem, 9vh, 5.5rem); transform: translateX(-50%);
  display: grid; place-items: center; min-width: 15rem; height: 3.3rem; padding: 0 1.6rem;
  border: 1px solid var(--line-strong); font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  overflow: hidden; transition: border-color .4s;
}
.gate__enter > * { grid-area: 1 / 1; }
.gate__enter-label { opacity: 0; transition: opacity .5s; }
.gate__enter.is-ready .gate__enter-label { opacity: 1; }
.gate__enter.is-ready:hover { border-color: var(--copper); }
.gate__progress { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .5s; }
.gate__progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 1%); background: rgba(232, 105, 42, .14); transition: width .3s; }
.gate__progress-n { position: relative; color: var(--text-2); }
.gate__enter.is-ready .gate__progress { opacity: 0; }

/* ==========================================================================
   World
   ========================================================================== */
.world { position: fixed; inset: 0; z-index: 0; }
.world__canvas { width: 100%; height: 100%; touch-action: none; cursor: grab; transition: filter 1.2s var(--ease-io); }
.world__canvas.is-dragging { cursor: grabbing; }
.world__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.no-webgl .world__fallback { display: block; }
.no-webgl .world__canvas { display: none; }
.world__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(6, 10, 16, 0) 55%, rgba(6, 10, 16, .55) 100%),
    linear-gradient(0deg, rgba(6, 10, 16, .55) 0%, rgba(6, 10, 16, 0) 24%),
    linear-gradient(180deg, rgba(6, 10, 16, .5) 0%, rgba(6, 10, 16, 0) 18%);
  transition: background-color 1.2s var(--ease-io);
}
body:not([data-view="home"]) .world__canvas,
body:not([data-view="home"]) .world__fallback { filter: blur(14px) brightness(.4) saturate(.8); }
body:not([data-view="home"]) .world__shade { background-color: rgba(6, 10, 16, .35); }

/* Markers — HTML buttons projected onto 3D positions (keyboard + screen-reader friendly) */
.markers { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
body:not([data-view="home"]) .markers, .gate-open .markers { visibility: hidden; }
.marker {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; align-items: center; gap: .7rem;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0); will-change: transform;
}
.marker__dot {                                   /* hit area over the light already in the picture */
  position: relative; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; border-radius: 50%;
  border: 1px solid transparent; transition: transform .4s var(--ease-out), border-color .4s;
}
.marker__dot::after { content: none; }
.marker__dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255, 140, 70, .35); animation: ping 2.6s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.marker__label {
  position: absolute; left: 1.2rem; top: 0; display: grid; gap: .3rem; min-width: 9.5rem; padding: .6rem 2.2rem .65rem .8rem; white-space: nowrap;
  background: rgba(6, 10, 16, .62); border: 1px solid rgba(232, 236, 241, .12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translate(-6px, -50%); transition: opacity .35s, transform .45s var(--ease-out); pointer-events: none;
}
.marker__label strong { font: 500 .64rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.marker__label small { font-size: .52rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.marker__label i { position: absolute; right: .75rem; top: .5rem; font-style: normal; font-size: .95rem; color: rgba(255, 170, 110, .9); }
.marker:hover .marker__dot, .marker:focus-visible .marker__dot { transform: scale(1.25); background: rgba(255, 106, 31, .3); }
.marker:hover .marker__label, .marker:focus-visible .marker__label { opacity: 1; transform: translate(0, -50%); }
.marker.is-behind { visibility: hidden; }
.marker.is-left .marker__label { left: auto; right: 1.2rem; transform: translate(6px, -50%); }
.marker.is-left:hover .marker__label, .marker.is-left:focus-visible .marker__label { transform: translate(0, -50%); }
.marker.is-active .marker__dot { border-color: rgba(255, 220, 190, .7); }
.marker.is-active .marker__label { display: none; }
.marker__dot::before { border-color: transparent; animation: none; }
.marker:hover .marker__dot::before, .marker:focus-visible .marker__dot::before { border-color: rgba(255, 220, 190, .35); animation: ping 2.6s var(--ease-out) infinite; }
.marker:hover .marker__dot, .marker:focus-visible .marker__dot { background: transparent; }
body[data-view="home"] .world__shade { opacity: 0; }

/* Arrival title — appears centred when the camera reaches a beacon */
.reveal {
  position: absolute; left: 50%; bottom: clamp(5.5rem, 17vh, 10rem); z-index: 20; width: min(90vw, 760px);
  transform: translateX(-50%); text-align: center; display: grid; justify-items: center; gap: .7rem;
  pointer-events: none; text-shadow: 0 2px 24px rgba(6, 10, 16, .55);
}
.reveal > * { opacity: 0; transform: translateY(14px); filter: blur(8px); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.reveal.is-on { pointer-events: auto; }
.reveal.is-on > * { opacity: 1; transform: none; filter: none; }
.reveal.is-on > :nth-child(2) { transition-delay: .08s; }
.reveal.is-on > :nth-child(3) { transition-delay: .18s; }
.reveal__kind { font-size: .7rem; letter-spacing: .2em; color: var(--text-2); }
.reveal__title { font: 300 clamp(2.4rem, 5vw, 4.4rem)/1 var(--serif); letter-spacing: -.02em; }
.reveal__link { margin-top: 1rem; font-size: .62rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; padding: .6rem .2rem; border-bottom: 1px solid var(--copper); }

/* The headline stays as in the approved layout; it only dims a little while you travel into the world */
.home__title { opacity: calc(1 - var(--away, 0) * .35); }
/* Dragging the world must never select page text (that painted orange selection boxes behind the nav and title) */
body[data-view="home"] { -webkit-user-select: none; user-select: none; }
.world__canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__brand { justify-self: start; padding: .5rem 0; }
.nav__mark { width: clamp(118px, 10.3vw, 190px); height: auto; aspect-ratio: 1760 / 370; fill: none; stroke: var(--text); stroke-width: 22; stroke-linecap: square; }
.nav__brand:hover .nav__mark { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)); }
.nav__links { display: flex; gap: clamp(2rem, 4.3vw, 5rem); transform: translateX(3.8vw); }
.nav__links a { font-size: .66rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: rgba(238, 241, 245, .92); transition: color .3s, opacity .3s; display: block; padding: .6rem 0; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: #fff; }
@media (min-width: 901px) { .nav .menu-btn { display: none; } }   /* desktop: logo + links, and the speaker on the right */
.nav__right { justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
/* v43: the speaker on every page — a click crosses it out (the music plays on, silent), a click again lifts the slash */
.sound {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--text); transition: border-color .3s, color .3s;
  background: rgba(6, 10, 16, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sound:hover, .sound:focus-visible { border-color: var(--copper); }
.sound__ico { width: 18px; height: 18px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sound__wave { transition: opacity .35s; }
.sound__slash { stroke: var(--ember); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s var(--ease-out); }
.sound[aria-pressed="true"] .sound__wave--2 { animation: soundWave 2.8s var(--ease-io) infinite; }
.sound[aria-pressed="false"] { color: var(--text-2); }
.sound[aria-pressed="false"] .sound__wave { opacity: .4; }
.sound[aria-pressed="false"] .sound__slash { stroke-dashoffset: 0; }
@keyframes soundWave { 50% { opacity: .3; } }
.menu-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: border-color .3s;
  background: rgba(6, 10, 16, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.menu-btn:hover { border-color: var(--copper); }
.menu-btn__lines { display: grid; gap: 5px; }
.menu-btn__lines i { display: block; width: 14px; height: 1px; background: var(--text); transition: transform .4s var(--ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child { transform: translateY(-3px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90; background: rgba(6, 10, 16, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 3rem) var(--gutter) 2.5rem;
  animation: menuIn .6s var(--ease-out);
}
.menu[hidden] { display: none; }
@keyframes menuIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.menu__list { display: grid; gap: .3rem; }
.menu__list a { display: flex; align-items: baseline; gap: 1.1rem; font: 300 clamp(2.6rem, 8vw, 5.5rem)/1.1 var(--serif); letter-spacing: -.02em; transition: color .3s, padding .5s var(--ease-out); }
.menu__list a:hover { color: var(--copper); padding-left: .5rem; }
.menu__list a span { font: 500 .66rem var(--sans); letter-spacing: .2em; color: var(--copper); }
.menu__foot { display: flex; flex-wrap: wrap; gap: .5rem 2rem; color: var(--text-2); }

/* ==========================================================================
   Views
   ========================================================================== */
main { position: relative; z-index: 10; }
.view[hidden] { display: none; }

/* Home: the world is the page */
.view--home { position: fixed; inset: 0; pointer-events: none; }
.view--home > * { pointer-events: auto; }
.home__title {
  position: absolute; left: 10.3vw; top: 24.6vh;
  font-size: clamp(2rem, 2.5vw, 3.4rem); font-weight: 400; line-height: 1.04; letter-spacing: -.012em; pointer-events: none; text-shadow: 0 2px 24px rgba(6, 10, 16, .55);
}
.home__title:focus { outline: none; }
.home__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.home__title .line > span { display: block; transform: translateY(105%); transition: transform 1.3s var(--ease-out); }
.home__title .line:nth-child(2) > span { transition-delay: .1s; }
.is-entered [data-view="home"] .home__title .line > span, .is-entered body[data-view="home"] .home__title .line > span { transform: none; }
.home__title em { color: var(--ember); text-shadow: 0 0 40px rgba(255, 106, 31, .4); }

.explore {
  position: absolute; left: 3.6vw; bottom: 5.1vh; height: 2.4rem; min-width: 13.1rem;
  display: flex; align-items: center; border: 1px solid rgba(238, 241, 245, .42); background: rgba(6, 10, 16, .18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .3s;
}
.explore:hover { border-color: var(--copper); }
.explore__icon { width: 2.6rem; height: 100%; display: grid; place-items: center; flex: none; }
.explore__icon svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.3; }
.explore__label {
  max-width: 14rem; overflow: hidden; white-space: nowrap; padding-right: 1.3rem;
  font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  transition: max-width .7s var(--ease-out), padding .7s var(--ease-out), opacity .4s;
}
.home__hint { position: absolute; right: 5vw; bottom: 5.6vh; text-align: left; font-size: .78rem; line-height: 1.45; color: rgba(238, 241, 245, .9); transition: opacity .8s; }
.home__hint.is-hidden { opacity: 0; }
.hint-touch { display: none; }
@media (hover: none) { .hint-desktop { display: none; } .hint-touch { display: inline; } }

/* Panels */
.view--panel { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.panel { width: min(100% - 2 * var(--gutter), var(--panel-w)); margin: 0 auto; padding: calc(var(--nav-h) + clamp(3rem, 10vh, 7rem)) 0 9rem; }
.panel--center { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 7rem; }
.view.is-entering .panel { animation: panelIn 1.1s var(--ease-out) both; }
.view.is-leaving { animation: viewOut .5s var(--ease-io) both; pointer-events: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes viewOut { to { opacity: 0; } }
.view--home.is-entering .home__hint, .view--home.is-entering .explore { animation: fadeUp .9s .3s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }

.page-head { display: grid; gap: 1.5rem; margin-bottom: clamp(3.5rem, 9vh, 6rem); }
.page-title { font-size: var(--fs-title); max-width: 17ch; }
.page-title:focus { outline: none; }
.page-lead { font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--text-2); max-width: 48ch; }

/* Footer controls */
.foot { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 1.6rem; z-index: 60; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.foot > * { pointer-events: auto; }
body[data-view="home"] .foot { display: none; }
.back {
  display: flex; align-items: center; gap: .7rem; height: 2.9rem; padding: 0 1.2rem 0 .9rem;
  border: 1px solid var(--line-strong); background: rgba(6, 10, 16, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; transition: border-color .3s;
}
.back:hover { border-color: var(--copper); }
.back svg { width: 14px; height: 14px; fill: none; stroke: var(--copper); stroke-width: 1.4; }
.foot__copy { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Projects list ---------- */
.work-list { border-top: 1px solid var(--line); }
.work-item { position: relative; border-bottom: 1px solid var(--line); }
.work-item__link {
  display: grid; grid-template-columns: 5rem 1fr auto; align-items: baseline; gap: 1.5rem;
  padding: 1.6rem 0; transition: padding .6s var(--ease-out);
}
.work-item__year { font-size: .7rem; letter-spacing: .2em; color: var(--text-3); }
.work-item__title { font: 300 clamp(1.8rem, 3.6vw, 3rem)/1.1 var(--serif); letter-spacing: -.015em; transition: color .3s; }
.work-item__client { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); padding-right: 7.5rem; }
.work-item:hover .work-item__link { padding-left: .8rem; }
.work-item:hover .work-item__title { color: var(--copper); }
.work-item__reel {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: .5rem; height: 2.2rem; padding: 0 .9rem;
  border: 1px solid var(--line-strong); font-size: .6rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; transition: border-color .3s;
}
.work-item__reel:hover { border-color: var(--copper); }
.work-item__reel svg { width: 10px; height: 10px; fill: var(--copper); }
.work-item--cta .work-item__title { color: var(--text-2); font-style: italic; }
.work-preview {
  position: fixed; left: 0; top: 0; z-index: 4; width: 22rem; aspect-ratio: 4 / 3; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .4s; transform: translate3d(var(--px, 0), var(--py, 0), 0);
}
.work-preview.is-on { opacity: 1; }
.work-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Project detail ---------- */
.project-head { display: grid; gap: 1.6rem; margin-bottom: 4rem; }
.project-head .todo, .page-head .todo { justify-self: start; }
.project-title { font-size: clamp(3rem, 8vw, 7rem); line-height: .95; }
.project-summary { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--text-2); max-width: 44ch; }
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.meta dt { font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-3); margin-bottom: .5rem; }
.meta dd { margin: 0; color: var(--text); font-size: .95rem; }
.meta dd ul { display: grid; gap: .1rem; }
.cover { margin-bottom: 4.5rem; overflow: hidden; }
.cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.disciplines { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; margin-bottom: 4.5rem; }
.disciplines h2 { font: 400 1.5rem/1.2 var(--serif); margin-bottom: .6rem; }
.disciplines p { color: var(--text-2); font-size: .97rem; }
.media-item { margin-bottom: 3rem; }
.media-item img { width: 100%; }
.media-item figcaption { margin-top: .9rem; font-size: .82rem; color: var(--text-3); }
.project-link { display: inline-flex; gap: .6rem; margin-bottom: 4rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--copper); }
.next { display: block; padding: 3rem 0; border-top: 1px solid var(--line); }
.next small { display: block; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-3); margin-bottom: .8rem; }
.next strong { font: 300 clamp(2.4rem, 6vw, 5rem)/1 var(--serif); transition: color .3s; }
.next:hover strong { color: var(--copper); }

/* ---------- Studio ---------- */
.block { margin-bottom: clamp(4.5rem, 12vh, 8rem); }
.block > .label { display: block; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 3.5rem; }
.service__title, .point__title { font: 400 1.6rem/1.2 var(--serif); margin-bottom: .8rem; }
.service p, .points p { color: var(--text-2); font-size: .97rem; }
.service:target .service__title { color: var(--copper); }
.wide-media { margin-bottom: 3rem; overflow: hidden; }
.wide-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:first-child { border-top: 1px solid var(--line); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 0; cursor: pointer; list-style: none; font: 400 1.35rem/1.2 var(--serif); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary i { position: relative; width: 14px; height: 14px; }
.accordion summary i::before, .accordion summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--copper); transition: transform .4s var(--ease-out); }
.accordion summary i::after { transform: rotate(90deg); }
.accordion details[open] summary i::after { transform: rotate(0); }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; padding: 0 0 1.6rem; color: var(--text-2); font-size: .95rem; }
.spec li::before { content: ""; display: inline-block; width: .9em; height: 1px; margin-right: .7em; vertical-align: middle; background: var(--copper); transform: rotate(-45deg); }

/* ---------- Contact ---------- */
.contact-links { display: grid; gap: .4rem; margin-bottom: 2.5rem; }
.contact-big { font: 300 clamp(2.2rem, 6vw, 5rem)/1.1 var(--serif); letter-spacing: -.02em; width: fit-content;
  background: linear-gradient(var(--copper), var(--copper)) 0 100% / 0 1px no-repeat; transition: background-size .8s var(--ease-out), color .3s; }
.contact-big:hover, .contact-big:focus-visible { color: var(--ember); background-size: 100% 1px; }
.contact-big--small { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.contact-person { color: var(--text-3); font-size: .9rem; margin-bottom: 1.5rem; }

/* ---------- Reel dialog ---------- */
.reel { width: min(92vw, 1200px); max-height: 90vh; padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.reel::backdrop { background: rgba(6, 10, 16, .86); backdrop-filter: blur(6px); }
.reel[open] { animation: reelIn .6s var(--ease-out); }
@keyframes reelIn { from { opacity: 0; transform: scale(.97); } }
.reel__stage img, .reel__stage video { width: 100%; max-height: 82vh; object-fit: contain; background: #000; }
.reel__stage p { padding: .9rem 1.1rem; font-size: .82rem; color: var(--text-3); }
.reel__close { position: absolute; right: .6rem; top: .6rem; z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(6, 10, 16, .7); font-size: 1.4rem; line-height: 1; border: 1px solid var(--line-strong); }

/* Grain */
.grain {
  position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .services, .points, .disciplines { grid-template-columns: 1fr; gap: 2.5rem; }
  .meta { grid-template-columns: 1fr 1fr; }
  .work-item__link { grid-template-columns: 1fr; gap: .4rem; padding: 1.4rem 0; }
  .work-item__client { padding-right: 6rem; }
  .work-item__reel { top: auto; bottom: 1.4rem; transform: none; }
  .work-preview { display: none; }
}
@media (max-width: 600px) {
  :root { --nav-h: 4.5rem; }
  .nav__mark { width: 96px; height: 21px; }
  .home__title { left: var(--gutter); top: 6.5rem; font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .home__hint { bottom: 6rem; }
  .reveal { bottom: 7.5rem; }
  .spec { grid-template-columns: 1fr; }
  .foot__copy { display: none; }
  .gate__enter { bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .grain { animation: none; }
  .gate__mark path { stroke-dashoffset: 0; }
}

/* craters: the theme icon sits in the fire; no rings — the hologram the fire projects is the only response.
   The hit area stays 3 rem (touch), the keyboard focus shows as a soft glow in the crater's colour, not a circle. */
.marker__dot { display: grid; place-items: center; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border: 0; }
.marker__dot::before, .marker__dot::after { content: none; animation: none; }
.marker__dot svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); transition: transform .4s var(--ease-out); }
.marker:hover .marker__dot, .marker:focus-visible .marker__dot, .marker.is-active .marker__dot { transform: none; background: transparent; border: 0; }
.marker:hover .marker__dot svg, .marker:focus-visible .marker__dot svg { transform: scale(1.15); }
.marker__label { display: none; }
.marker:focus-visible { outline: none; }
.marker:focus-visible .marker__dot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, #ff6a1f) 55%, transparent), 0 0 18px 4px color-mix(in srgb, var(--c, #ff6a1f) 35%, transparent); border-radius: 50%; }

/* ==========================================================================
   Hologram — projected by the crater's fire (holo.js). Three depth layers: the cone of light and its particles,
   the emblem, the name and subtitle in front. No frame, no card: a faint pane that vanishes toward its edges.
   Entry: the fire pulses, the cone unfolds from the fire, the emblem draws itself, a sweep of light reveals the
   name, then the subtitle and the arrow. Exit (base rules): the name goes first, the strokes fade toward the fire,
   the cone folds back. Toggling .is-open reverses whatever is in flight — the transitions run from the current values.
   ========================================================================== */
.holo {
  position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; will-change: transform;   /* under the craters: the light never blocks another fire */
  --s: 1; --px: 0; --py: 0; --c: #ff6a1f;
  --e-out: cubic-bezier(.2, .7, .2, 1); --e-in: cubic-bezier(.5, 0, .75, .3);
}
.holo[hidden] { display: none; }
.holo > * { position: absolute; left: 0; top: 0; }
.holo svg { max-width: none; }
/* the cone of light: unfolds from the fire along the projection; breathes once open */
.holo__cone { overflow: visible; transform-origin: var(--ox, 0%) var(--oy, 50%); opacity: 0; transform: scaleX(.02) scaleY(.6);
  transition: transform .3s .1s var(--e-in), opacity .3s .1s; }
.holo.is-open .holo__cone { opacity: 1; transform: none; transition: transform .26s .07s var(--e-out), opacity .22s .07s; }
.holo.is-open .holo__cone-fill { animation: holoBreath 5s 1s ease-in-out infinite; }   /* the breath lives on the fill, so removing it never snaps the cone's own fade */
.holo__cone-fill { fill: url(#holo-cone-g); filter: blur(7px); pointer-events: auto; }   /* the cone belongs to the hover area: fire → light → name is one surface */                       /* soft edges: the light dissolves into the air */
.holo__cone-halo { fill: url(#holo-cone-g); opacity: .45; filter: blur(16px); }
.holo__ray { fill: none; stroke: url(#holo-ray-g); stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; transition: stroke-dashoffset .22s var(--e-in); }
.holo.is-open .holo__ray { stroke-dashoffset: 0; transition: stroke-dashoffset .3s calc(.1s + var(--n) * .02s) var(--e-out); }
.holo__flash { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.holo.is-open .holo__flash { animation: holoFlash .32s var(--e-out) both; }
@keyframes holoFlash { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(34); opacity: 0; } }
@keyframes holoBreath { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
.holo__particles i { position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px var(--c); opacity: 0; }
.holo.is-open .holo__particles i { animation: holoParticle var(--d, 3s) var(--delay, 0s) linear infinite; }
@keyframes holoParticle { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 18% { opacity: .9; } 100% { transform: translate(var(--ax), var(--ay)) scale(1); opacity: 0; } }
/* the pane: barely there, fades out at its edges, never a frame */
.holo__glass {
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 10%, rgba(10, 16, 26, .14)), rgba(12, 20, 32, .18) 55%, rgba(12, 20, 32, 0));
  -webkit-mask-image: radial-gradient(70% 70% at 45% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 45% 50%, #000 30%, transparent 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto;
  opacity: 0; transition: opacity .3s .05s; transform: translate(calc(var(--px) * 2px), calc(var(--py) * 2px)) rotate(calc(var(--py) * .6deg));
}
.holo.is-open .holo__glass { opacity: 1; transition: opacity .45s .15s; }
/* layer 2: the emblem, drawn stroke by stroke (main motif, then its companions, then the links) */
.holo__emblem { transform: translate(calc(var(--px) * 4px), calc(var(--py) * 3px)) rotate(calc(var(--px) * 1deg)); transition: transform .35s var(--ease-out); }
.holo__emblem-svg { width: 100%; height: 100%; overflow: visible; }
.holo__node-ring, .holo__sym *, .holo__edge { fill: none; stroke: #fff; stroke-width: 1.25px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.holo__node-ring { stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s calc(.06s + (2 - var(--n)) * .03s) var(--e-in); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 60%, transparent)); }
.holo__node-fill { fill: color-mix(in srgb, var(--c) 55%, #fff); opacity: 0; transition: opacity .18s var(--e-in); }
.holo__sym * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s calc(.03s + (2 - var(--n)) * .03s) var(--e-in); }
.holo__sym { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .45)); }
.holo__edge { stroke: color-mix(in srgb, var(--c) 75%, #fff); stroke-width: 1px; stroke-dasharray: .018 .03; stroke-dashoffset: 1.02; opacity: .9; transition: stroke-dashoffset .18s var(--e-in); }
.holo.is-open .holo__node-ring { stroke-dashoffset: 0; transition: stroke-dashoffset .26s calc(.18s + var(--n) * .07s) var(--e-out); }
.holo.is-open .holo__sym * { stroke-dashoffset: 0; transition: stroke-dashoffset .24s calc(.24s + var(--n) * .07s) var(--e-out); }
.holo.is-open .holo__node-fill { opacity: .13; transition: opacity .3s calc(.26s + var(--n) * .07s); }
.holo.is-open .holo__edge { stroke-dashoffset: 0; transition: stroke-dashoffset .2s calc(.36s + var(--n) * .04s) var(--e-out); }
.holo__pulse { fill: none; stroke: #fff; stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 9 400; stroke-dashoffset: 9; opacity: 0; }
.holo.is-open .holo__pulse { animation: holoPulse 4.8s calc(.5s + var(--n) * 1.6s) linear infinite; }
@keyframes holoPulse { 0% { stroke-dashoffset: 9; opacity: 0; } 4% { opacity: .9; } 22% { stroke-dashoffset: -100; opacity: .9; } 26%, 100% { stroke-dashoffset: -100; opacity: 0; } }
.holo__live-dot { fill: #fff; filter: drop-shadow(0 0 3px var(--c)); opacity: 0; }
.holo__live-ring { fill: none; stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.holo__live-glow { fill: color-mix(in srgb, var(--c) 40%, #fff); filter: blur(4px); }
.holo__live-stroke { fill: none; stroke: #fff; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--c)); }
/* layer 3: the name (wordmark lettering), the subtitle, the arrow — stable, readable, in front */
.holo__link { pointer-events: auto; display: block; color: #fff; text-decoration: none; transform: translate(calc(var(--px) * 2px), calc(var(--py) * 1.5px)); transition: transform .35s var(--ease-out); outline-offset: 10px; border-radius: 4px; }
.holo__link.is-left { text-align: right; }
.holo__link.is-centre { text-align: center; }
.holo[data-dir="stack"] .holo__cone { transform: scaleY(.02) scaleX(.6); }
.holo[data-dir="stack"].is-open .holo__cone { transform: none; }
.holo__title { position: relative; display: inline-block; vertical-align: top;
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%); mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  filter: blur(2.5px); opacity: 0; transition: -webkit-mask-position .14s var(--e-in), mask-position .14s var(--e-in), filter .14s, opacity .14s; }
.holo.is-open .holo__title { -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(0); opacity: 1; transition: -webkit-mask-position .32s .26s var(--e-out), mask-position .32s .26s var(--e-out), filter .3s .3s, opacity .12s .26s; }
.holo__title-svg { overflow: visible; fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: square; stroke-linejoin: miter; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .28)) drop-shadow(0 0 12px color-mix(in srgb, var(--c) 35%, transparent)); }
.holo__sweep { position: absolute; top: -8%; bottom: -8%; left: 0; width: 14%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); mix-blend-mode: screen; }
.holo.is-open .holo__sweep { animation: holoSweep .38s .25s var(--e-out) both; }
@keyframes holoSweep { 0% { transform: translateX(-40%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(760%); opacity: 0; } }
.holo__sub { display: block; margin-top: calc(.36rem * var(--s)); font: 500 calc(.6rem * var(--s)) / 1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: rgba(238, 241, 245, .92); text-shadow: 0 0 10px rgba(6, 10, 16, .8), 0 0 18px color-mix(in srgb, var(--c) 30%, transparent);
  opacity: 0; transform: translateY(5px); transition: opacity .13s var(--e-in), transform .13s var(--e-in); }
.holo.is-open .holo__sub { opacity: 1; transform: none; transition: opacity .3s .4s var(--e-out), transform .34s .4s var(--e-out); }
.holo__arrow { position: absolute; right: 0; top: calc(.1rem * var(--s)); width: calc(26px * var(--s)); height: calc(26px * var(--s)); opacity: 0; transform: translate(-6px, 6px);
  transition: opacity .12s var(--e-in), transform .12s var(--e-in); }
.holo__link.is-left .holo__arrow { right: auto; left: 0; }
.holo__arrow svg { width: 100%; height: 100%; fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: square; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 60%, transparent)); transition: transform .35s var(--ease-out); }
.holo.is-open .holo__arrow { opacity: 1; transform: none; transition: opacity .3s .46s var(--e-out), transform .36s .46s var(--e-out); }
.holo__link:hover .holo__arrow svg, .holo__link:focus-visible .holo__arrow svg { transform: translate(2px, -2px); }
.holo__link:focus-visible { outline: 1px solid rgba(238, 241, 245, .7); }
.holo.is-paused *, .holo.is-paused *::before { animation-play-state: paused !important; }
.holo.is-receiving .holo__sym, .holo.is-receiving .holo__node-ring, .holo.is-receiving .holo__node-fill { opacity: 0 !important; transition: none !important; }
@media (hover: none) { .holo__link { padding: .2rem 0 .6rem; } }
@media (prefers-reduced-motion: reduce) {
  .holo__cone, .holo__cone-fill, .holo__glass, .holo__emblem, .holo__link { transform: none !important; animation: none !important; }
  .holo__title { -webkit-mask-image: none; mask-image: none; filter: none; }
  .holo__sweep, .holo__pulse, .holo__particles, .holo__flash { display: none; }
  .holo__node-ring, .holo__sym *, .holo__edge, .holo__ray { stroke-dasharray: none; }
  .holo__edge { stroke-dasharray: .018 .03; }
  .holo > *, .holo .holo__sub, .holo .holo__arrow, .holo .holo__title { transition: opacity .18s !important; }
}

/* ==========================================================================
   Panels, premium pass — the pages above the world: an atmosphere in the area's colour, hairline rails and
   numerals, glass strips for facts, covers that bleed into the dark, and content that arrives as you scroll.
   ========================================================================== */
.view--panel { --c: var(--copper); }
.view--panel::before {                                   /* a soft breath of the area's colour at the top of the page */
  content: ""; position: absolute; left: 50%; top: -22vh; width: min(100%, 1500px);   /* never wider than the page: a phone must not scroll sideways */ height: 70vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 60% at 50% 40%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); opacity: .9;
}
.panel { position: relative; }
.page-head, .project-head { position: relative; }
.page-head::before, .project-head::before {              /* the hairline rail beside the page's head */
  content: ""; position: absolute; left: calc(-1 * clamp(1.2rem, 3vw, 3rem)); top: .4rem; bottom: 0; width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, transparent), transparent);
}
.page-title em, .project-title em { color: var(--c); }
.label-dot { display: inline-block; width: 7px; height: 7px; margin: 0 .7em 0 0; border-radius: 50%; vertical-align: middle; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
.page-lead { text-wrap: pretty; }

/* content arrives as you scroll (IntersectionObserver adds .is-in) */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.rise.is-in { opacity: 1; transform: none; }
.rise:nth-child(2n) { transition-delay: .06s; }

/* projects list: the area's colour on every row, the title answers the hover, the kind keeps clear of the preview button */
.work-item { --c: var(--copper); }
.work-item__title { position: relative; padding-left: 1.3rem; }
.work-item__title::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); opacity: .85; transition: transform .5s var(--ease-out); }
.work-item:hover .work-item__title::before { transform: scale(1.5); }
.work-item:hover .work-item__title { color: color-mix(in srgb, var(--c) 80%, #fff); }
.work-item__link::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--c); transition: width .7s var(--ease-out); }
.work-item:hover .work-item__link::after { width: 100%; }
.work-item__client { padding-right: 9.5rem; }
.work-item__year { color: var(--text-3); transition: color .3s; }
.work-item:hover .work-item__year { color: var(--c); }
.work-item--cta .work-item__title::before { display: none; }
.work-item--cta .work-item__title { padding-left: 0; }

/* the area page: a cover that bleeds into the dark, a glass strip of facts, numbered steps, a closing invitation */
.cover--hero { position: relative; margin-bottom: 3rem; }
.cover--hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); transform-origin: 50% 40%; animation: slowZoom 24s linear both; }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.cover__num { position: absolute; right: 0; top: -1.6rem; font-size: var(--fs-label); letter-spacing: var(--track); color: var(--text-3); text-transform: uppercase; }
.meta--glass { position: relative; gap: 2rem; padding: 1.6rem 1.8rem; border: 1px solid var(--line); border-radius: 2px; margin-bottom: 4.5rem;
  background: linear-gradient(120deg, rgba(238, 241, 245, .035), rgba(238, 241, 245, .012)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.meta--glass::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--c), transparent); }
.meta--glass dt { color: var(--text-3); }
.disciplines--steps { gap: 0; margin-bottom: 4.5rem; border-top: 1px solid var(--line); }
.disciplines--steps > div { position: relative; padding: 2.2rem 0 2.2rem 3.4rem; border-bottom: 1px solid var(--line); }
.disciplines--steps > div:nth-child(odd) { padding-right: 2rem; }
.disciplines--steps .step-n { position: absolute; left: 0; top: 2.35rem; font: 500 .66rem/1 var(--sans); letter-spacing: .2em; color: var(--c); }
.disciplines--steps h2 { font-size: 1.45rem; }
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 4rem; padding: 1.8rem 2rem; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%); }
.cta-band p { font: 300 1.35rem/1.3 var(--serif); }
.btn-pill { display: inline-flex; align-items: center; gap: .7rem; height: 2.9rem; padding: 0 1.4rem; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 999px;
  font-size: .62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; transition: border-color .3s, background-color .3s, transform .5s var(--ease-out); }
.btn-pill:hover, .btn-pill:focus-visible { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); transform: translateX(3px); }
.btn-pill span { color: var(--c); transition: transform .4s var(--ease-out); }
.btn-pill:hover span { transform: translateX(4px); }
.next { position: relative; }
.next::after { content: "\2192"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 300 2rem/1 var(--serif); color: var(--c); opacity: 0; transition: opacity .4s, transform .6s var(--ease-out); }
.next:hover::after { opacity: 1; transform: translate(6px, -50%); }

/* studio: numbered services in hairline cells, the two points with big numerals */
.services { gap: 0; }
.service { position: relative; padding: 2rem 2rem 2.2rem 0; border-top: 1px solid var(--line); }
.service:nth-child(even) { padding-left: 2.5rem; border-left: 1px solid var(--line); }
.service__n { display: block; margin-bottom: 1rem; font: 500 .62rem/1 var(--sans); letter-spacing: .24em; color: var(--copper); }
.service:hover .service__title { color: #fff; }
.points { counter-reset: point; }
.points article { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.points article::before { content: counter(point, decimal-leading-zero); counter-increment: point; position: absolute; right: 0; top: 1rem; font: 300 3.4rem/1 var(--serif); color: rgba(238, 241, 245, .12); }
.wide-media img { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }

/* contact: the two big lines, and beside them how a project starts */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem 4rem; align-items: start; }
.contact-steps { counter-reset: cstep; padding-top: .8rem; display: grid; gap: 1.3rem; }
.contact-steps li { position: relative; padding-left: 2.6rem; color: var(--text-2); font-size: .95rem; }
.contact-steps li strong { display: block; color: var(--text); font: 400 1.2rem/1.3 var(--serif); margin-bottom: .2rem; }
.contact-steps li::before { content: counter(cstep, decimal-leading-zero); counter-increment: cstep; position: absolute; left: 0; top: .35rem; font: 500 .62rem/1 var(--sans); letter-spacing: .2em; color: var(--copper); }
.contact-steps li::after { content: ""; position: absolute; left: .55rem; top: 1.6rem; bottom: -1.1rem; width: 1px; background: var(--line); }
.contact-steps li:last-child::after { display: none; }
.contact-note { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--text-3); font-size: .85rem; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .service:nth-child(even) { padding-left: 0; border-left: 0; }
  .disciplines--steps > div:nth-child(odd) { padding-right: 0; }
  .page-head::before, .project-head::before { display: none; }
  .cta-band { padding: 1.4rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } .cover--hero img { animation: none; } }



/* ==========================================================================
   Area pages as 3D storytelling: the world stays readable behind the page and its camera travels as you scroll
   (plate.js story()); each chapter carries a light-stroke symbol of the area that draws itself in; marketing pages
   add the campaign loop and the customer path. No pinned stock images.
   ========================================================================== */
body[data-view="project"] .world__canvas, body[data-view="project"] .world__fallback { filter: blur(5px) brightness(.5) saturate(.9); }
body[data-view="project"] .world__shade { background-color: rgba(6, 10, 16, .22); }
.view--project .panel { text-shadow: 0 1px 18px rgba(6, 10, 16, .7); }
.story__hint { margin: -2rem 0 2.5rem; color: var(--text-3); font-size: .6rem; }
.story__hint::before { content: "\2193"; margin-right: .6em; color: var(--c); }
.story { display: grid; gap: clamp(3rem, 9vh, 6rem); margin-bottom: 5rem; }
.story__chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem 3.5rem; align-items: center; min-height: 46vh; }
.story__chapter.is-flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.story__chapter.is-flip .story__art { order: 2; }
.story__art { display: grid; place-items: center; }
.story__svg { width: clamp(150px, 22vw, 240px); height: auto; overflow: visible; fill: none; stroke: #fff; stroke-width: .22; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 55%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--c) 30%, transparent)); }
.story__ring { stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-width: .16; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.story__sym * { stroke-width: .24; stroke-dasharray: 1; stroke-dashoffset: 1; }
.story__chapter.is-in .story__ring { animation: drawOn 1.4s .1s var(--ease-out) forwards; }
.story__chapter.is-in .story__sym * { animation: drawOn 1.1s .5s var(--ease-out) forwards; }
@keyframes drawOn { to { stroke-dashoffset: 0; } }
.story__text .step-n { display: block; margin-bottom: 1rem; font: 500 .66rem/1 var(--sans); letter-spacing: .2em; color: var(--c); }
.story__text h2 { font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.15 var(--serif); margin-bottom: .9rem; }
.story__text p { color: var(--text-2); font-size: 1.02rem; max-width: 40ch; }

/* marketing: the campaign loop, the channels, the customer path */
.mk { margin-bottom: 5rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.mk__head { display: grid; gap: .8rem; margin-bottom: 2rem; }
.mk__head p { color: var(--text-2); max-width: 46ch; }
.mk__svg { width: min(100%, 520px); height: auto; margin: 0 auto 2rem; overflow: visible; fill: none; stroke: #fff; stroke-width: .8; }
.mk__ring { stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-dasharray: .012 .02; opacity: .9; }
.mk__pulse { stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 8 400; stroke-dashoffset: 8; opacity: .9; animation: holoPulse 7s linear infinite; }
.mk__node circle { stroke: color-mix(in srgb, var(--c) 75%, #fff); fill: color-mix(in srgb, var(--c) 10%, transparent); opacity: 0; transition: opacity .9s calc(.2s + var(--n) * .12s); }   /* (a dash-draw on these circles renders scale-dependent in Chrome; they fade in instead) */
.mk.is-in .mk__node circle { opacity: 1; }
.mk__node text { fill: var(--text); stroke: none; font: 500 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.mk__dot { fill: #fff; stroke: none; filter: drop-shadow(0 0 5px var(--c)); }
.mk__chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.5rem; }
.mk__chips li { padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); transition: border-color .3s, color .3s; }
.mk__chips li:hover { border-color: var(--c); color: var(--text); }
.mk__funnel { display: grid; gap: .5rem; justify-items: center; }
.mk__step { width: var(--w); padding: .75rem 1rem; text-align: center; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 12%, transparent), transparent);
  font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .7s calc(var(--n) * .12s) var(--ease-out), transform .9s calc(var(--n) * .12s) var(--ease-out); }
.mk.is-in .mk__step { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .story__chapter, .story__chapter.is-flip { grid-template-columns: 1fr; min-height: 0; gap: 1.2rem; }
  .story__chapter.is-flip .story__art { order: 0; }
  .story__art { justify-items: start; }
  .story__svg { width: 120px; }
  .mk__node text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .story__ring, .story__sym * { stroke-dashoffset: 0 !important; animation: none !important; }
  .mk__node circle { opacity: 1; }
  .mk__pulse, .mk__dot { display: none; }
  .mk__step { opacity: 1; transform: none; }
}


/* ==========================================================================
   Area pages — the interactive displays (modules.js): thin light strokes in the area's colour, a pointer tilt on
   every stage, and a small story on each: a page assembling, systems linking, the emblem in 3D, results rising, a
   content rhythm, a story's reach, readiness on five axes. Design otherwise unchanged.
   ========================================================================== */
.mod { margin-bottom: 5rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.mod__head { display: grid; gap: .8rem; margin-bottom: 2rem; }
.mod__head p { color: var(--text-2); max-width: 50ch; }
.mod__stage { position: relative; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out); transform-style: preserve-3d; }
.mod__stage::before { content: ""; position: absolute; inset: -2rem; pointer-events: none; background: radial-gradient(40% 40% at var(--mx) var(--my), color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); opacity: 0; transition: opacity .5s; }
.mod__stage:hover::before { opacity: 1; }
.story__art, .meta--glass { --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out), opacity .9s var(--ease-out); }
.mod__caption { margin-top: 1rem; min-height: 1.6em; font-size: .85rem; color: var(--text-2); text-align: center; transition: color .3s; }
.mod__note { grid-column: 1 / -1; margin-top: .4rem; font-size: .78rem; color: var(--text-3); text-align: center; }
.mod svg text { fill: var(--text); stroke: none; font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.6rem; }
.chips li, .chips button { padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); transition: border-color .3s, color .3s, background-color .3s; }
.chips button:hover, .chips button:focus-visible { border-color: var(--c); color: var(--text); background: color-mix(in srgb, var(--c) 12%, transparent); }
.seg { display: inline-flex; gap: .2rem; margin-top: 1.4rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; }
.seg button { padding: .5rem 1rem; border-radius: 999px; font: 500 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); transition: background-color .3s, color .3s; }
.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--text); }

/* a page that assembles */
.web__stage { display: grid; justify-items: center; }
.web__frame { position: relative; width: 340px; max-width: 100%; height: 196px; display: grid; place-items: center; }
.web__wire { position: absolute; width: var(--w); max-width: 100%; height: 196px; overflow: visible; fill: none; stroke: #fff; stroke-width: 1; opacity: 0; transform: scale(.96); transition: opacity .45s, transform .6s var(--ease-out); pointer-events: none; }
.web__frame[data-dev="desktop"] .web__wire[data-dev="desktop"], .web__frame[data-dev="tablet"] .web__wire[data-dev="tablet"], .web__frame[data-dev="phone"] .web__wire[data-dev="phone"] { opacity: 1; transform: none; }
.web__wire rect { stroke-dasharray: 1; stroke-dashoffset: 1; fill: color-mix(in srgb, var(--c) 6%, transparent); }
.web__wire .w-cta { stroke: var(--c); fill: color-mix(in srgb, var(--c) 25%, transparent); }
.mod--web.is-in .web__wire rect { animation: drawOn 1.1s var(--ease-out) forwards; }
.mod--web.is-in .web__wire rect:nth-child(2) { animation-delay: .15s; } .mod--web.is-in .web__wire rect:nth-child(3) { animation-delay: .3s; } .mod--web.is-in .web__wire rect:nth-child(4) { animation-delay: .4s; } .mod--web.is-in .web__wire rect:nth-child(5) { animation-delay: .5s; } .mod--web.is-in .web__wire rect:nth-child(6) { animation-delay: .6s; } .mod--web.is-in .web__wire rect:nth-child(7) { animation-delay: .75s; }
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.ring { position: relative; display: grid; justify-items: center; gap: .3rem; }
.ring svg { width: 92px; height: 92px; fill: none; transform: rotate(-90deg); }
.ring__bg { stroke: var(--line); stroke-width: 2; }
.ring__fg { stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s calc(var(--n) * .15s) var(--ease-out); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); }
.mod--web.is-in .ring__fg { stroke-dashoffset: calc(100 - var(--v)); }
.ring strong { position: absolute; top: 30px; font: 300 1.5rem/1 var(--serif); }
.ring span { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }

/* connected systems, reach, readiness: node pickers */
.sys__svg, .reach__svg, .ready__svg { width: min(100%, 520px); height: auto; margin: 0 auto; overflow: visible; fill: none; stroke: #fff; stroke-width: .8; display: block; }
.sys__edge, .ready__axis, .ready__grid { stroke: color-mix(in srgb, var(--c) 55%, #fff); stroke-width: .8; opacity: .45; transition: opacity .3s, stroke-width .3s; }
.sys__edge { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mod--sys.is-in .sys__edge { animation: drawOn 1.2s .2s var(--ease-out) forwards; }
.sys__edge.is-lit { opacity: 1; stroke-width: 1.6; }
.sys__node, .reach__node, .ready__node { cursor: pointer; outline: none; }
.sys__node circle, .reach__node circle, .ready__node circle { stroke: color-mix(in srgb, var(--c) 75%, #fff); fill: color-mix(in srgb, var(--c) 8%, transparent); transition: fill .3s, stroke-width .3s; }
.sys__node.is-core circle { stroke-width: 1.4; fill: color-mix(in srgb, var(--c) 16%, transparent); }
.sys__node.is-picked circle, .reach__node.is-picked circle, .ready__node.is-picked circle, .sys__node:focus-visible circle, .reach__node:focus-visible circle, .ready__node:focus-visible circle { fill: color-mix(in srgb, var(--c) 35%, transparent); stroke-width: 1.6; }
.sys__dot, .reach__lit { fill: #fff; stroke: none; filter: drop-shadow(0 0 4px var(--c)); }
.reach__wave { stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-width: .8; }
.reach__core { stroke: var(--c); stroke-width: 1.4; fill: color-mix(in srgb, var(--c) 30%, transparent); }
.reach__label { font-size: 9px !important; }
.reach__lit { fill: color-mix(in srgb, var(--c) 60%, #fff); }
.ready__fill { fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: var(--c); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform 1.3s .3s var(--ease-out), opacity .6s .3s; }
.mod--ready.is-in .ready__fill { transform: none; opacity: 1; }

/* the emblem in 3D */
.emblem3d { height: 340px; display: grid; place-items: center; cursor: grab; touch-action: pan-y; }
.emblem3d:active { cursor: grabbing; }
.emblem3d canvas { width: 100%; height: 300px; display: block; opacity: 0; transition: opacity 1s; }
.emblem3d.is-ready canvas { opacity: 1; }
.emblem3d.is-off canvas { display: none; }
.emblem3d .mod__caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }

/* results rising */
.seo__stage { max-width: 560px; margin: 0 auto; }
.seo__bar { display: flex; align-items: center; height: 2.6rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .9rem; color: var(--text); }
.seo__bar i { margin-left: auto; width: 14px; height: 14px; border: 1.3px solid var(--c); border-radius: 50%; position: relative; }
.seo__bar i::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 1.3px; background: var(--c); transform: rotate(45deg); }
.seo__list { position: relative; height: calc(5 * 3.1rem); margin-top: 1rem; }
.seo__row { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 1rem; height: 2.7rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 2px; transform: translateY(calc(var(--from) * 3.1rem)); transition: transform 1.2s calc(.2s + var(--from) * .05s) var(--ease-out), border-color .4s, background-color .4s; font-size: .85rem; }
.seo__list.is-in .seo__row { transform: translateY(calc(var(--to) * 3.1rem)); }
.seo__pos { font: 500 .62rem var(--sans); letter-spacing: .2em; color: var(--text-3); }
.seo__url { font-size: .72rem; color: var(--text-3); }
.seo__row.is-you { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.seo__row.is-you .seo__pos { color: var(--c); }

/* the rhythm of content */
.rhythm { max-width: 640px; margin: 0 auto; display: grid; gap: .45rem; }
.rhythm__days, .rhythm__row { display: grid; grid-template-columns: 7rem repeat(7, 1fr); gap: .45rem; align-items: center; }
.rhythm__days span { font: 500 .6rem var(--sans); letter-spacing: .2em; color: var(--text-3); text-align: center; }
.rhythm__ch { text-align: left; font: 500 .62rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); padding: .3rem 0; transition: color .3s; }
.rhythm__ch[aria-pressed="true"], .rhythm__ch:hover { color: var(--text); }
.cell { display: block; height: 1.5rem; border: 1px solid var(--line); border-radius: 2px; background: transparent; transition: background-color .5s calc(var(--n) * .02s), border-color .5s calc(var(--n) * .02s), transform .4s; }
.mod--rhythm.is-in .cell.is-on { background: color-mix(in srgb, var(--c) 28%, transparent); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.rhythm__row.is-picked .cell.is-on { background: color-mix(in srgb, var(--c) 60%, transparent); transform: scale(1.08); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
.rhythm__row.is-picked .rhythm__ch { color: var(--c); }

@media (max-width: 900px) {
  .rings { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .rhythm__days, .rhythm__row { grid-template-columns: 5rem repeat(7, 1fr); gap: .3rem; }
  .emblem3d { height: 280px; } .emblem3d canvas { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .mod__stage, .story__art, .meta--glass { transform: none !important; }
  .web__wire rect, .sys__edge { stroke-dashoffset: 0 !important; animation: none !important; }
  .ring__fg, .seo__row, .ready__fill, .cell { transition: none !important; }
  .sys__dot, .reach__lit, .reach__wave { display: none; }
}


/* the chapters' symbols: a holographic scan sweeps across each once it has drawn itself, and a hairline beam
   drops from it toward the world (the symbol is a projection, not an icon) */
.story__art { position: relative; }
.story__art::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, transparent), transparent); transition: height 1.2s .6s var(--ease-out); pointer-events: none; }
.story__chapter.is-in .story__art::after { height: clamp(40px, 8vh, 90px); }
.story__svg { position: relative; }
.story__chapter.is-in .story__svg { animation: holoScan 2.4s 1.2s var(--ease-out) 1; }
@keyframes holoScan { 0% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 55%, transparent)) brightness(1); } 35% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 90%, transparent)) brightness(1.5); } 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 55%, transparent)) brightness(1); } }
@media (prefers-reduced-motion: reduce) { .story__chapter.is-in .story__svg { animation: none; } .story__art::after { transition: none; } }
@media (max-width: 900px) { .story__art { width: fit-content; } }   /* the beam under the symbol stays under the symbol */


/* ==========================================================================
   v17 — content, interactivity, enquiries (direction sheets A–K)
   ========================================================================== */
/* A · the hero's new copy flows in one column under the approved title (kicker above it), so it never depends on how
   many lines the title takes; the landscape stays the page */
.view--home { display: flex; flex-direction: column; align-items: flex-start; padding: calc(24.6vh - 2.1rem) 0 0 10.3vw; }
.view--home > .home__title { position: relative; left: auto; top: auto; }
.home__kicker { margin-bottom: .9rem; color: rgba(238, 241, 245, .78); text-shadow: 0 2px 18px rgba(6, 10, 16, .6); pointer-events: none; }
.home__lead { margin-top: 1.3rem; max-width: max(15.5vw, 12rem);   /* ends left of the Studio crater (≈ 28 % of the width) */
  font-size: clamp(.92rem, 1.05vw, 1.08rem); line-height: 1.55; color: rgba(238, 241, 245, .88); text-shadow: 0 2px 18px rgba(6, 10, 16, .75); pointer-events: none; text-wrap: pretty; }
.home__pillars { margin-top: 1rem; max-width: max(15.5vw, 12rem); display: flex; flex-wrap: wrap; gap: .35rem .55rem; font: 500 .62rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(238, 241, 245, .72); pointer-events: none; }
.home__pillars i { color: var(--ember); font-style: normal; }
.home__cta { margin-top: 1.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }   /* stacked: clear of the Marketing crater below-right */
.home__kicker, .home__lead, .home__pillars, .home__cta { opacity: calc(1 - var(--away, 0) * 1.4); transition: opacity .6s; }
.btn-solid, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.75rem; padding: 0 1.3rem; border-radius: 999px; font: 500 .64rem var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--ease-out); white-space: nowrap; }
.btn-solid { background: var(--ember); color: #14100c; border: 1px solid var(--ember); box-shadow: 0 0 24px rgba(255, 106, 31, .28); }
.btn-solid:hover, .btn-solid:focus-visible { background: #ff8d4a; border-color: #ff8d4a; transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(238, 241, 245, .4); color: var(--text); background: rgba(6, 10, 16, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--ember); color: #fff; }
.btn-solid:focus-visible, .btn-ghost:focus-visible, .btn-pill:focus-visible, .link-btn:focus-visible, .seg button:focus-visible, .goal:focus-visible, .kontakt [role="tab"]:focus-visible, .nav__cta:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.nav__cta { padding: .45rem 1rem; border: 1px solid rgba(238, 241, 245, .35); border-radius: 999px; font: 500 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: border-color .3s, color .3s; }
.nav__cta:hover { border-color: var(--ember); color: #fff; }
.link-btn { display: inline; padding: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--c, var(--copper)) 70%, transparent); font: inherit; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); transition: color .3s, border-color .3s; }
.link-btn:hover { color: var(--text); border-color: var(--c, var(--copper)); }
.link-btn[hidden] { display: none; }
.btn-pill:disabled, .link-btn:disabled { opacity: .35; pointer-events: none; }

/* B · the goal picker and K · the contact panel: one dialog family, the reel's glass */
.picker, .kontakt { width: min(92vw, 760px); max-height: min(92vh, 900px); padding: clamp(1.6rem, 4vw, 3rem); border: 1px solid var(--line-strong); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 20, 29, .98), rgba(8, 12, 18, .98)); color: var(--text); overflow: auto; scrollbar-width: thin; }
.picker::backdrop, .kontakt::backdrop { background: rgba(6, 10, 16, .78); backdrop-filter: blur(8px); }
.picker[open], .kontakt[open] { animation: reelIn .5s var(--ease-out); }
.kontakt { background: linear-gradient(180deg, rgba(10, 15, 22, .86), rgba(8, 12, 18, .98) 42%), url("/assets/img/fx/material-grafit.jpg") center top / cover, var(--bg); }   /* HF-01: the graphite material, faint, under the head */
.dlg__close { position: absolute; right: 1rem; top: .8rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; font: 300 1.6rem/1 var(--serif); color: var(--text-2); transition: color .3s, background-color .3s; }
.dlg__close:hover, .dlg__close:focus-visible { color: var(--text); background: rgba(238, 241, 245, .08); }
.picker__title, .kontakt__title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .8rem; padding-right: 2.5rem; }
.picker__lead, .kontakt__lead { color: var(--text-2); max-width: 50ch; margin-bottom: 1.8rem; }
.kontakt__head .label { display: block; margin-bottom: .9rem; }
.picker__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.goal { position: relative; display: grid; grid-template-columns: 1.1rem 1fr; gap: .2rem .8rem; align-items: start; text-align: left; padding: 1rem 1.1rem 1rem .9rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(238, 241, 245, .03); transition: border-color .3s, background-color .3s, transform .4s var(--ease-out); }
.goal:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.goal[aria-pressed="true"] { border-color: var(--ember); background: rgba(255, 122, 47, .08); }
.goal__check { width: 1rem; height: 1rem; margin-top: .3rem; border: 1px solid var(--line-strong); border-radius: 50%; grid-row: 1 / 3; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.goal[aria-pressed="true"] .goal__check { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 12px rgba(255, 122, 47, .6); }
.goal__t { font: 400 1.05rem/1.3 var(--serif); }
.goal__s { font-size: .8rem; color: var(--text-3); }
.goal--unsure { grid-column: 1 / -1; }
.picker__foot { margin-top: 1.6rem; display: grid; gap: 1rem; }
.picker__summary { min-height: 1.6em; font-size: .9rem; color: var(--text-2); text-wrap: pretty; }
.picker__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.picker__actions [hidden] { display: none; }
.kontakt__tabs { display: flex; flex-wrap: wrap; gap: .3rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; width: fit-content; margin-bottom: 1.4rem; background: rgba(6, 10, 16, .5); }
.kontakt [role="tab"] { min-height: 2.5rem; padding: .55rem 1rem; border-radius: 999px; font: 500 .62rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); transition: background-color .3s, color .3s; }
.kontakt [role="tab"][aria-selected="true"] { background: rgba(255, 122, 47, .18); color: var(--text); }
.kontakt__intent { display: grid; gap: .6rem; margin-bottom: 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 2px solid var(--ember); border-radius: 2px; background: rgba(6, 10, 16, .5); }
.kontakt__intent[hidden], .kontakt__pane[hidden] { display: none; }
.intent { display: flex; flex-wrap: wrap; gap: .5rem; }
.intent li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .3rem .3rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .8rem; color: var(--text); }
.intent li button { width: 1.8rem; height: 1.8rem; border-radius: 50%; font: 300 1rem/1 var(--serif); color: var(--text-3); transition: color .3s, background-color .3s; }
.intent li button:hover, .intent li button:focus-visible { color: var(--text); background: rgba(238, 241, 245, .1); }
.kform { display: grid; gap: 1.1rem; }
.kform__intro { color: var(--text-2); font-size: .92rem; }
.kform__row { display: grid; gap: .4rem; }
.kform__row label { font: 500 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.kform input, .kform textarea { width: 100%; min-height: 2.75rem; padding: .75rem .9rem; border: 1px solid var(--line-strong); border-radius: 2px; background: rgba(6, 10, 16, .6); color: var(--text); font: inherit; transition: border-color .3s, box-shadow .3s; }
.kform textarea { resize: vertical; min-height: 6rem; }
.kform input:focus-visible, .kform textarea:focus-visible { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255, 122, 47, .18); }
.kform [aria-invalid="true"] { border-color: #ff6b6b; }
.kform__err { font-size: .8rem; color: #ff8a8a; }
.kform__err[hidden] { display: none; }
.kform__help { font-size: .8rem; color: var(--text-3); }
.kform__more summary { cursor: pointer; font-size: .82rem; color: var(--text-2); }
.kform__more[open] summary { margin-bottom: .8rem; }
.kform__more .kform__row + .kform__row { margin-top: .8rem; }
.kform__note { font-size: .8rem; color: var(--text-3); text-wrap: pretty; }
.kform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.kform__status { min-height: 1.5em; font-size: .88rem; color: var(--text); }
.kform__status:empty { display: none; }
.kform.is-busy button[type="submit"] { opacity: .6; pointer-events: none; }
.kcopy { font-size: .8rem; color: var(--ember); }
.kontakt__pane .contact-big { display: block; margin: .4rem 0 1.2rem; font-size: clamp(1.8rem, 5vw, 3rem); }

/* the contact page: three ways + FAQ */
.contact-ways { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2.4rem; }
.faq { display: grid; border-top: 1px solid var(--line); margin: 1.2rem 0 1.5rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: .95rem 2rem .95rem 0; cursor: pointer; list-style: none; font: 400 1.02rem/1.35 var(--serif); transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .8rem; font: 300 1.4rem/1 var(--serif); color: var(--copper); transition: transform .4s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--copper); }
.faq details p { padding: 0 2rem 1.1rem 0; color: var(--text-2); font-size: .92rem; }

/* J · the collaboration frame */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-bottom: 1.6rem; }
.steps__step { display: grid; gap: .4rem; text-align: left; padding: .2rem 0 1rem; color: var(--text-3); transition: color .3s; }
.steps__step[aria-expanded="true"], .steps__step:hover { color: var(--text); }
.steps__n { font: 500 .62rem var(--sans); letter-spacing: .2em; color: var(--copper); }
.steps__t { font: 300 clamp(1.1rem, 1.6vw, 1.4rem)/1.2 var(--serif); }
.steps__path { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; width: 100%; }
.steps__line { stroke: var(--line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.steps__lit { stroke: var(--copper); stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: .75; transition: stroke-dashoffset .9s var(--ease-out); }
.steps__text { min-height: 4.2em; margin-top: 1.4rem; color: var(--text-2); max-width: 60ch; }
.steps__text p[hidden] { display: none; }
.steps__note { margin-top: 1.6rem; font-size: .85rem; color: var(--text-3); }

/* I · the references */
.refs { margin-bottom: clamp(4rem, 10vh, 7rem); }
.refs > .label { display: block; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem 3rem; align-items: start; padding: 2.4rem 0; border-bottom: 1px solid var(--line); --c: #4fd2ff; }
.ref[data-ref="mcc"] { --c: #58f0c8; }
.ref__text { display: grid; gap: .9rem; }
.ref__text p { color: var(--text-2); font-size: .95rem; text-wrap: pretty; }
.ref__text p.label { color: var(--c); font-size: var(--fs-label); }
.ref__title { font: 300 clamp(1.9rem, 3.5vw, 2.8rem)/1.05 var(--serif); letter-spacing: -.015em; color: var(--text); }
.ref__text p.ref__role { font-size: .82rem; color: var(--text-3); }
.ref .seg { margin-top: .4rem; width: fit-content; }
.ref__text p.ref__cap { min-height: 1.5em; font-size: .85rem; }
.ref__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: .4rem; }
.ref__stage { position: relative; min-height: 220px; margin-top: 0; }
.ref__shot { display: none; margin: 0; }
.ref__shot img { width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ref__shot figcaption { margin-top: .6rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-align: center; }
.ref__shot--phone img { width: min(240px, 60%); margin: 0 auto; border-radius: 18px; }
.ref__stage[data-view="namizje"] [data-shot="namizje"], .ref__stage[data-view="telefon"] [data-shot="telefon"], .ref__stage[data-view="trgovina"] [data-shot="trgovina"], .ref__stage[data-view="admin"] [data-shot="admin"], .ref__stage[data-view="wms"] [data-shot="wms"] { display: block; animation: shotIn .5s var(--ease-out); }
@keyframes shotIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.recon { display: grid; border: 1px solid var(--line-strong); border-radius: 3px; background: linear-gradient(180deg, rgba(10, 15, 22, .92), rgba(8, 12, 18, .96)), url("/assets/img/fx/material-grafit.jpg") center / cover; overflow: hidden; font-size: .85rem; }
.recon__bar { display: flex; flex-wrap: wrap; gap: 1.2rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: rgba(238, 241, 245, .04); color: var(--text-3); font: 500 .62rem var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.recon__bar b { color: var(--c); font-weight: 500; }
.recon__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--line); color: var(--text-2); }
.recon__row--h { color: var(--text-3); font: 500 .6rem var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.recon__row:last-child { border-bottom: 0; }
.recon i, .auto__row i { font-style: normal; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--line-strong); width: fit-content; }
.recon .is-done, .auto__row .is-done { color: #58f0c8; border-color: rgba(88, 240, 200, .5); }
.recon .is-open, .auto__row .is-open { color: #4fd2ff; border-color: rgba(79, 210, 255, .5); }
.recon .is-wait, .auto__row .is-wait { color: #ffa03a; border-color: rgba(255, 160, 58, .5); }

/* the scenes share one stage language: a framed glass stage, a quiet "demo" tag, controls under it */
.mod--brand .mod__stage, .mod--web .mod__stage, .mod--growth .mod__stage, .mod--ai .mod__stage, .mod--auto .mod__stage, .mod--wms .mod__stage { padding: 2.6rem clamp(1rem, 2.5vw, 1.8rem) 1.6rem; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(10, 15, 22, .9), rgba(8, 12, 18, .97) 60%), url("/assets/img/fx/material-grafit.jpg") center / cover; transform: none; }
.demo-tag { position: absolute; right: 1rem; top: .9rem; font: 500 .58rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); z-index: 2; }
.demo-tag::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: .5em; border-radius: 50%; background: var(--c); vertical-align: middle; box-shadow: 0 0 8px var(--c); }
.ai__res .demo-tag { position: static; }
.mod__stage > .seg { margin-top: 0; max-width: 100%; flex-wrap: wrap; border-radius: 22px; }
.mod__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: 1.2rem; justify-content: center; }
.ai__ctl, .webp__ctl, .wms__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: 1.4rem; }
.mod__cta { margin-top: 1.8rem; }
.mod__details { margin-top: 1.6rem; }
.mod__details summary { cursor: pointer; font-size: .82rem; color: var(--text-2); margin-bottom: .8rem; }
.mod--brand .mod__caption, .mod--web .mod__caption, .mod--ai .mod__caption, .mod--auto .mod__caption, .mod--wms .mod__caption { text-align: left; }
.mod .mod__note { text-align: left; }
.mod .mod__note a { color: var(--text-2); border-bottom: 1px solid var(--line-strong); }

/* C · the brand on its touchpoints */
.brand__space { position: relative; height: 320px; margin-top: 1.4rem; }
.brand__obj { position: absolute; border: 1px solid var(--line); border-radius: 4px; background: rgba(8, 12, 18, .86); opacity: .42; transform: scale(.9); transition: opacity .5s, transform .6s var(--ease-out), border-color .5s, box-shadow .5s; padding: .9rem; }
.brand[data-sel="web"] .brand__obj--web, .brand[data-sel="print"] .brand__obj--print, .brand[data-sel="social"] .brand__obj--social { opacity: 1; transform: scale(1); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 40px -10px color-mix(in srgb, var(--c) 30%, transparent); z-index: 2; }
.brand__mark { height: 14px; width: auto; aspect-ratio: 1760 / 370; fill: none; stroke: var(--text); stroke-width: 26; stroke-linecap: square; }
.brand__obj--web { left: 2%; top: 8%; width: 52%; height: 78%; display: grid; grid-template-rows: auto 1fr auto; gap: .8rem; }
.brand__nav { display: flex; align-items: center; gap: .8rem; } .brand__nav i { width: 1.6rem; height: 3px; background: var(--line-strong); border-radius: 2px; } .brand__nav i:first-of-type { margin-left: auto; }
.brand__hero { display: grid; gap: .5rem; align-content: center; } .brand__hero b { display: block; height: 10px; border-radius: 2px; background: var(--text); opacity: .8; width: 70%; } .brand__hero b:last-child { width: 45%; background: var(--c); opacity: 1; }
.brand__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .brand__cards i { height: 2rem; border: 1px solid var(--line); border-radius: 2px; }
.brand__obj--print { right: 3%; top: 4%; width: 38%; aspect-ratio: 1.7; display: grid; align-content: space-between; background: #0f151e; }
.brand__obj--print small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); } .brand__obj--print em { font-style: normal; font-size: .7rem; color: var(--c); }
.brand__obj--social { right: 10%; bottom: 4%; width: 25%; aspect-ratio: 1; display: grid; grid-template-rows: 1fr auto auto; gap: .5rem; }
.brand__post { border-radius: 2px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%); display: grid; gap: .3rem; align-content: end; padding: .5rem; } .brand__post b { display: block; height: 5px; border-radius: 2px; background: var(--text); width: 60%; } .brand__post b:last-child { width: 35%; }
.brand__obj--social i { height: 3px; width: 50%; background: var(--line-strong); border-radius: 2px; }
.brand__link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.brand__rule { fill: none; stroke: var(--c); stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.brand__rule.is-drawn { animation: ruleDraw .28s var(--ease-out) forwards; }
@keyframes ruleDraw { from { stroke-dashoffset: 1; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
.brand__tag { position: absolute; left: 50%; bottom: -.4rem; transform: translateX(-50%); font: 500 .6rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c); z-index: 3; }

/* D · the web: from a look to an action */
.webp__space { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 1.2rem; align-items: end; margin-top: 1.4rem; }
.webp__frame { border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(8, 12, 18, .9); overflow: hidden; min-height: 270px; display: grid; grid-template-rows: auto 1fr; }
.webp__bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: rgba(238, 241, 245, .04); } .webp__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .webp__bar span { margin-left: .6rem; font-size: .7rem; color: var(--text-3); letter-spacing: .08em; }
.webp__page { position: relative; padding: 1.3rem 1.4rem; }
.webp__page[hidden] { display: none; }
.webp__view { display: none; }
.webp[data-state="preview"] .webp__view--preview, .webp[data-state="action"] .webp__view--action, .webp[data-state="result"] .webp__view--result { display: grid; gap: .8rem; animation: shotIn .45s var(--ease-out); }
.webp__view h3 { font: 300 1.4rem/1.2 var(--serif); } .webp__view p { color: var(--text-2); font-size: .9rem; }
.webp__view--result h3 { color: var(--c); }
.webp__pick label { display: grid; gap: .35rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.webp__pick select { width: fit-content; min-height: 2.5rem; padding: .5rem .8rem; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--bg-2); color: var(--text); font: inherit; text-transform: none; letter-spacing: 0; }
.webp__field { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); } .webp__field span { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); align-self: center; } .webp__field b { font-weight: 400; color: var(--text); }
.webp__cal, .webp__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.webp__cal button, .webp__item { min-height: 2.75rem; padding: .6rem .5rem; border: 1px solid var(--line); border-radius: 2px; font-size: .8rem; color: var(--text-2); transition: border-color .3s, color .3s, background-color .3s; display: grid; gap: .4rem; justify-items: center; }
.webp__cal button[aria-pressed="true"], .webp__item[aria-pressed="true"] { border-color: var(--c); color: var(--text); background: color-mix(in srgb, var(--c) 12%, transparent); }
.webp__items { grid-template-columns: 1fr 1fr; } .webp__item i { width: 100%; height: 3rem; border-radius: 2px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent), transparent); }
.webp__phone { height: 160px; border: 1px solid var(--line-strong); border-radius: 14px; padding: .6rem .5rem; display: grid; gap: .4rem; align-content: start; background: rgba(8, 12, 18, .9); } .webp__phone i { height: 22px; border-radius: 2px; background: color-mix(in srgb, var(--c) 25%, transparent); transition: background-color .5s; } .webp__phone b { height: 5px; border-radius: 2px; background: var(--line-strong); } .webp__phone b:nth-of-type(2) { width: 70%; }
.webp[data-state="action"] .webp__phone b:last-child, .webp[data-state="result"] .webp__phone i { background: var(--c); }

/* E · content, campaign, review */
.growth__space { position: relative; margin-top: 1.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; align-items: stretch; min-height: 190px; }
.growth__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.growth__link { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .4s; } .growth__link.is-lit { stroke: var(--c); }
.growth__dot { fill: var(--c); opacity: 0; transition: opacity .2s; }
.growth__panel { position: relative; z-index: 1; display: grid; gap: .8rem; align-content: start; padding: 1rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(8, 12, 18, .88); opacity: .5; transition: opacity .4s, border-color .4s, transform .5s var(--ease-out); }
.growth[data-sel="content"] [data-panel="content"], .growth[data-sel="campaign"] [data-panel="campaign"], .growth[data-sel="review"] [data-panel="review"] { opacity: 1; border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-4px); }
.growth__post { display: grid; gap: .4rem; } .growth__post b { display: block; height: 6px; border-radius: 2px; background: var(--text); opacity: .75; } .growth__post b:first-child { height: 2.6rem; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, transparent), transparent); opacity: 1; } .growth__post b:last-child { width: 55%; }
.growth__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .growth__chips li { padding: .3rem .55rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.growth__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; align-items: end; height: 3.4rem; } .growth__bars i { height: var(--h); border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--c) 45%, transparent); }
.growth__panel small { font-size: .62rem; color: var(--text-3); letter-spacing: .06em; }
.growth__goal { margin-top: 1.6rem; display: grid; gap: .2rem; justify-items: center; }
.growth__goal .chips { margin-top: .6rem; }
.chips button.is-on { border-color: var(--c); color: var(--text); background: color-mix(in srgb, var(--c) 14%, transparent); }
.mod--growth .mod__stage > .seg { display: flex; width: fit-content; margin: 1.4rem auto 0; }

/* F · the AI assistant */
.ai__space { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "req res" "src review"; gap: 1rem 4rem; margin-top: 1.4rem; }
.ai__req, .ai__src, .ai__res, .ai__review { position: relative; z-index: 1; display: grid; gap: .5rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(8, 12, 18, .9); opacity: .35; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease-out), border-color .4s; font-size: .9rem; color: var(--text-2); }
.ai__req { grid-area: req; } .ai__src { grid-area: src; } .ai__res { grid-area: res; } .ai__review { grid-area: review; }
.ai__req p, .ai__res p { color: var(--text); }
.ai__src small, .auto__mod small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ai mark, .auto mark { background: color-mix(in srgb, var(--c) 24%, transparent); color: var(--text); padding: 0 .15em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ai .ai__source { display: block; font-size: .74rem; text-transform: none; letter-spacing: 0; color: var(--text-3); }
.ai__res ul, .ai__src ul { display: grid; gap: .3rem; } .ai__src li::before { content: "— "; color: var(--c); }
.ai__core { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); z-index: 2; color: var(--c); opacity: .3; transition: opacity .3s, filter .3s; } .ai__core svg { width: 100%; height: 100%; fill: rgba(8, 12, 18, .9); stroke: currentColor; stroke-width: 1.4; }
.ai__link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ai__wire { fill: none; stroke: var(--c); stroke-width: .3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ai .ai__req { opacity: 1; transform: none; }
.ai[data-phase="src"] .ai__src, .ai[data-phase="wire"] .ai__src, .ai[data-phase="res"] .ai__src, .ai[data-phase="done"] .ai__src { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.ai[data-phase="wire"] .ai__core, .ai[data-phase="res"] .ai__core, .ai[data-phase="done"] .ai__core { opacity: 1; filter: drop-shadow(0 0 10px var(--c)); }
.ai[data-phase="wire"] [data-wire="src"], .ai[data-phase="res"] .ai__wire, .ai[data-phase="done"] .ai__wire { animation: ruleDraw .3s var(--ease-out) forwards; }
.ai[data-phase="res"] .ai__res, .ai[data-phase="done"] .ai__res { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ai[data-phase="done"] .ai__review { opacity: 1; transform: none; }
.ai__voice { margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 3px; display: grid; gap: .7rem; background: rgba(8, 12, 18, .9); } .ai__voice[hidden] { display: none; } .ai__voice > p:first-child { font: 300 1.15rem/1.3 var(--serif); }
.ai__wave { display: flex; gap: 3px; align-items: center; height: 22px; } .ai__wave i { width: 3px; height: 4px; border-radius: 2px; background: var(--c); }
.ai__voice.is-live .ai__wave i { animation: wave .9s calc(var(--i) * .05s) var(--ease-io) 1; }
@keyframes wave { 0%, 100% { height: 4px; } 50% { height: 20px; } }

/* G · automation */
.auto__space { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; position: relative; }
.auto { position: relative; }
.auto__mod { display: grid; gap: .6rem; align-content: start; padding: 1rem 1.1rem; min-height: 180px; border: 1px solid var(--line); border-radius: 3px; background: rgba(8, 12, 18, .9); font-size: .88rem; color: var(--text-2); opacity: .4; transition: opacity .35s, border-color .4s, box-shadow .4s; }
.auto__mod p { color: var(--text-2); }
.auto__fields { display: grid; gap: .35rem; } .auto__fields li { display: grid; grid-template-columns: 5.5rem 1fr; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--line); } .auto__fields span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); align-self: center; } .auto__fields b { font-weight: 400; color: var(--text); min-height: 1.3em; }
.auto [data-m="in"] { opacity: 1; }
.auto[data-phase="move"] [data-m="task"], .auto[data-phase="task"] [data-m="task"], .auto[data-phase="out"] [data-m="task"], .auto[data-phase="confirmed"] [data-m="task"] { opacity: 1; border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.auto[data-phase="out"] [data-m="out"], .auto[data-phase="confirmed"] [data-m="out"] { opacity: 1; border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.auto[data-phase="confirmed"] [data-m="out"] { box-shadow: 0 0 30px -10px color-mix(in srgb, var(--c) 50%, transparent); }
.auto__fly { position: absolute; z-index: 3; padding: 0 .15em; border-radius: 2px; background: color-mix(in srgb, var(--c) 30%, var(--bg)); color: var(--text); font-size: .88rem; white-space: nowrap; pointer-events: none; transition: transform .6s var(--ease-io); }
.auto__app { margin-top: 2.2rem; display: grid; gap: .8rem; }
.auto__screen { border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; background: rgba(8, 12, 18, .9); font-size: .85rem; }
.auto__row { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 1rem; align-items: center; padding: .65rem 1rem; border-bottom: 1px solid var(--line); color: var(--text-2); } .auto__row:first-child { color: var(--text-3); font: 500 .6rem var(--sans); letter-spacing: .16em; text-transform: uppercase; background: rgba(238, 241, 245, .04); } .auto__row b { font-weight: 500; } .auto__row:last-child { border-bottom: 0; }
.auto__app .mod__caption { text-align: left; margin-top: 0; }

/* H · the WMS mini-app */
.wms { position: relative; }
.wms__space { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 6rem; margin-top: 1.4rem; align-items: stretch; }
.wms__loc, .wms__order { position: relative; display: grid; gap: .7rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(8, 12, 18, .9); min-height: 140px; }
.wms__name { font: 500 .62rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); padding-right: 3rem; }
.wms__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; align-content: start; min-height: 2rem; } .wms__grid i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--c) 42%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.wms__n { position: absolute; right: 1rem; top: .8rem; font: 300 1.7rem/1 var(--serif); color: var(--text); }
.wms__order { grid-column: 1 / -1; border-style: dashed; } .wms__order .wms__grid { grid-template-columns: repeat(16, 1fr); } .wms__order .wms__grid i { background: color-mix(in srgb, var(--c) 20%, transparent); }
.wms__path { position: absolute; left: 42%; width: 16%; top: 30px; height: 60px; pointer-events: none; } .wms__path path { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.wms__fly { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; pointer-events: none; z-index: 4; will-change: transform; }
.wms__card { position: absolute; left: 50%; top: 70px; transform: translate(-50%, 0); z-index: 2; display: grid; gap: .25rem; justify-items: center; padding: .6rem .7rem; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--bg-2); opacity: .55; transition: opacity .3s, border-color .3s; overflow: hidden; } .wms__card span { font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .wms__card svg { width: 64px; height: 20px; fill: var(--text); } .wms__card b { font-weight: 400; font-size: .82rem; color: var(--text); }
.wms.is-item .wms__card { opacity: 1; border-color: var(--c); }
.wms__beam { position: absolute; left: .4rem; right: .4rem; top: 50%; height: 1px; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: 0; } .wms__card.is-scan .wms__beam { animation: scan .5s var(--ease-io) 1; }
@keyframes scan { 0% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(14px); } }
.wms.is-item .wms__loc .wms__grid i:first-child { outline: 1px solid #fff; outline-offset: 1px; }
.wms__table { width: 100%; margin-top: 1.4rem; border-collapse: collapse; font-size: .92rem; } .wms__table th { font: 500 .58rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line-strong); vertical-align: bottom; } .wms__table td { padding: .6rem; border-bottom: 1px solid var(--line); font: 300 1.4rem/1 var(--serif); color: var(--text); font-variant-numeric: tabular-nums; }
.wms__qty { display: inline-flex; align-items: center; gap: .6rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .wms__qty input { width: 4.4rem; min-height: 2.5rem; padding: .45rem .6rem; border: 1px solid var(--line-strong); border-radius: 2px; background: rgba(6, 10, 16, .6); color: var(--text); font: inherit; }
.wms__qty input[aria-invalid="true"] { border-color: #ff6b6b; }
.wms__ctl .kform__err { flex-basis: 100%; }
.wms__log { margin-top: 1.4rem; display: grid; gap: .6rem; } .wms__log ol { display: grid; gap: .3rem; font-size: .85rem; color: var(--text-2); counter-reset: mv; } .wms__log li { padding-left: 1.8rem; position: relative; } .wms__log li::before { counter-increment: mv; content: counter(mv, decimal-leading-zero); position: absolute; left: 0; top: .25em; font: 500 .6rem var(--sans); letter-spacing: .1em; color: var(--c); } .wms__log li.is-empty { color: var(--text-3); } .wms__log li.is-empty::before { content: "—"; }

@media (max-width: 900px) {
  .picker__grid, .ai__space, .auto__space, .ref { grid-template-columns: 1fr; }
  .ai__space { grid-template-areas: "req" "src" "res" "review"; } .ai__core, .ai__link { display: none; }
  .steps { grid-template-columns: 1fr 1fr; } .steps__path { display: none; }
  .webp__space { grid-template-columns: 1fr; } .webp__phone { display: none; }
  .growth__space { grid-template-columns: 1fr; gap: .8rem; } .growth__links { display: none; }
  .brand__space { height: 280px; }
  .wms__space { gap: 1rem 2rem; } .wms__path, .wms__card { display: none; }
}
@media (max-width: 600px) {
  .home__kicker { display: none; }
  .view--home { padding: 6.5rem var(--gutter) 0; }
  .home__lead { margin-top: .9rem; max-width: none; font-size: .9rem; }
  .home__pillars { margin-top: .8rem; max-width: none; }
  .home__cta { margin-top: 1rem; flex-direction: row; flex-wrap: wrap; }
  .home__hint { display: none; }
  .picker, .kontakt { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; margin: 0; padding: 1.4rem var(--gutter) 2rem; }
  .wms__space { grid-template-columns: 1fr; } .wms__grid { grid-template-columns: repeat(12, 1fr); }
  .wms__table th { font-size: .5rem; letter-spacing: .08em; padding: .4rem .3rem; } .wms__table td { font-size: 1.15rem; padding: .5rem .3rem; }
  .brand__space { height: 230px; } .brand__obj--print, .brand__obj--social { display: none; } .brand__obj--web { left: 0; width: 100%; height: 92%; top: 0; } .brand__link { display: none; }
  .webp__cal { grid-template-columns: 1fr 1fr; } .webp__field { grid-template-columns: 1fr; gap: .2rem; }
  .recon__row, .auto__row { grid-template-columns: 1fr 1fr; } .recon__row > :last-child, .auto__row > :last-child { display: none; }
  .steps { grid-template-columns: 1fr; gap: .2rem; }
  .kontakt__tabs { width: 100%; border-radius: 8px; } .kontakt [role="tab"] { flex: 1 1 100%; text-align: center; }
  .contact-ways .btn-solid, .contact-ways .btn-ghost { flex: 1 1 100%; }
  .mod__stage > .seg { display: flex; }
  .mod__stage > .seg button { flex: 1 1 auto; }
  .demo-tag { position: static; display: block; margin-bottom: .8rem; }
  .mod--brand .mod__stage, .mod--web .mod__stage, .mod--growth .mod__stage, .mod--ai .mod__stage, .mod--auto .mod__stage, .mod--wms .mod__stage { padding-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand__rule, .ai__wire { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
  .wms__fly, .auto__fly { display: none; }
  .ai__voice.is-live .ai__wave i { animation: none; height: 10px; }
  .steps__lit { transition: none; }
}
/* phones: the stage's hover glow and the reference tabs stay inside the page */
.ref > * { min-width: 0; }
.ref .seg { flex-wrap: wrap; border-radius: 20px; }
@media (max-width: 900px) { .mod__stage::before { inset: 0; } }
@media (max-width: 600px) { .ref .seg button { padding: .5rem .7rem; letter-spacing: .14em; } }
.btn-pill[hidden], .btn-solid[hidden], .btn-ghost[hidden] { display: none; }   /* a hidden control stays hidden whatever its display */
.holo-on .home__lead, .holo-on .home__pillars, .holo-on .home__cta, .holo-on .home__kicker { opacity: .12; pointer-events: none; transition: opacity .35s; }


/* the goal picker opens on a window into the world: a calm Higgsfield loop (mist and the copper ridge move, the dunes stay) */
.picker__stage { position: relative; height: clamp(120px, 21vw, 190px); margin: calc(-1 * clamp(1.6rem, 4vw, 3rem)) calc(-1 * clamp(1.6rem, 4vw, 3rem)) 1.4rem; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.picker__stage video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; opacity: .9; }
@media (max-width: 600px) { .picker__stage { margin: -1.4rem calc(-1 * var(--gutter)) 1.2rem; height: 130px; } }
.nav__links .nav__cta { display: inline-block; padding: .5rem 1.15rem; letter-spacing: .26em; margin-top: -.05rem; }   /* the one quiet contact entry */
.home__pillars { flex-direction: column; gap: .45rem; }   /* two pairs: a dot never starts a line */
.home__pillars b { font-weight: inherit; white-space: nowrap; }
.home__pillars i { margin: 0 .35em; }
.home__sep { display: none; }
@media (max-width: 600px) { .home__pillars { flex-direction: row; gap: 0; } .home__sep { display: inline; } }


/* ==========================================================================
   v19 — inner contents of the existing demo surfaces (layout of the pages unchanged)
   ========================================================================== */
/* M01 · the brand as a system: four uses in one deck; the chosen one comes to the front in ~750 ms */
.bd { position: relative; height: clamp(290px, 32vw, 370px); margin: 1.2rem 0 .4rem; perspective: 1400px; }
.bd__item { position: absolute; left: 50%; top: 50%; width: min(58%, 540px); aspect-ratio: 16 / 10; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(8, 12, 18, .95); overflow: hidden;
  transform: translate(-50%, -50%) translateX(var(--x, 0%)) rotateY(var(--ry, 0deg)) scale(var(--s, 1)); opacity: var(--o, 1);
  transition: transform .75s var(--ease-out), opacity .6s var(--ease-out), border-color .6s, box-shadow .6s; }
.bd__item[data-slot="front"] { --x: 0%; --s: 1; --o: 1; --ry: 0deg; z-index: 4; border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.bd__item[data-slot="right"] { --x: 50%; --s: .56; --o: .5; --ry: -18deg; z-index: 2; }
.bd__item[data-slot="left"] { --x: -50%; --s: .56; --o: .5; --ry: 18deg; z-index: 2; }
.bd__item[data-slot="back"] { --x: 0%; --s: .45; --o: 0; z-index: 1; }
.bd__item--rules { display: grid; align-content: center; gap: 1rem; padding: 1.3rem 1.5rem; }
.bd__mark { width: 58%; height: auto; fill: none; stroke: var(--text); stroke-width: 22; stroke-linecap: square; }
.bd__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.bd__swatches span { display: grid; gap: .15rem; font-size: .62rem; color: var(--text-2); }
.bd__swatches i { height: 1.9rem; border-radius: 2px; background: var(--sw); border: 1px solid var(--line); }
.bd__swatches b { font-weight: 500; color: var(--text); }
.bd__swatches small { font-size: .55rem; letter-spacing: .06em; color: var(--text-3); }
.bd__type { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: .4rem .7rem; }
.bd__serif { font: 300 2rem/1 var(--serif); } .bd__sans { font: 500 1.55rem/1 var(--sans); } .bd__type small { font-size: .6rem; color: var(--text-3); }
.bd__item--web, .bd__item--social { border-color: transparent !important; background: none; box-shadow: none !important; overflow: visible; }
.bd__browser { position: absolute; inset: 0 19% 0 0; border: 1px solid var(--line-strong); border-radius: 6px; background: #0b1018; overflow: hidden; }
.bd__bar { display: flex; gap: .3rem; padding: .45rem .6rem; border-bottom: 1px solid var(--line); } .bd__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.bd__site { padding: .9rem 1rem; display: grid; gap: .6rem; align-content: start; }
.bd__navmark { width: 34%; height: auto; fill: none; stroke: var(--text); stroke-width: 26; stroke-linecap: square; }
.bd__h { font: 300 clamp(1rem, 2vw, 1.5rem)/1.1 var(--serif); color: var(--text); }
.bd__btn { justify-self: start; padding: .35rem .7rem; border-radius: 999px; background: var(--copper); color: #14100c; font: 500 .5rem var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.bd__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .2rem; } .bd__cards i { height: 2.1rem; border: 1px solid var(--line); border-radius: 2px; }
.bd__phone { position: absolute; right: 0; bottom: -3%; width: 25%; aspect-ratio: 9 / 18; border: 1px solid var(--line-strong); border-radius: 14px; background: #0b1018; overflow: hidden; }
.bd__phone .bd__site { padding: .7rem .55rem; gap: .45rem; } .bd__phone .bd__navmark { width: 72%; } .bd__phone .bd__h { font-size: .82rem; }
.bd__photo { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 1344 / 752; }
.bd__photo img { width: 100%; height: 100%; display: block; }
.bd__on { position: absolute; display: grid; place-items: center; }
.bd__on--card { left: 9.2%; top: 38.5%; width: 18.2%; height: 19.5%; }
.bd__on--cat { left: 34%; top: 12.8%; width: 28.5%; height: 69.7%; grid-template-rows: 1fr auto; padding-bottom: 9%; }
.bd__on--box { left: 70.5%; top: 32.5%; width: 18.8%; height: 34%; }
.bd__ink { width: 70%; height: auto; fill: none; stroke: #15171c; stroke-width: 26; stroke-linecap: square; }
.bd__on--card .bd__ink { mix-blend-mode: multiply; }
.bd__ink--light { stroke: rgba(238, 241, 245, .85); }
.bd__on--cat .bd__cu { width: 48%; } .bd__on--cat .bd__ink { width: 64%; stroke-width: 30; }
.bd__on--box .bd__ink { width: 44%; stroke-width: 18; }
.bd__cu { width: 40%; height: auto; fill: none; stroke: var(--copper); stroke-width: 16; stroke-linecap: square; }
.bd__post { position: absolute; left: 4%; top: 6%; height: 88%; aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--line-strong); overflow: hidden; padding: 1rem; display: grid; align-content: space-between;
  background: radial-gradient(80% 80% at 75% 15%, color-mix(in srgb, var(--copper) 32%, transparent), transparent 62%), #0b1018; }
.bd__post .bd__cu { position: absolute; right: -12%; top: -10%; width: 72%; opacity: .9; }
.bd__post .bd__h { position: relative; align-self: end; font-size: clamp(1.1rem, 2.2vw, 1.6rem); }
.bd__post .bd__navmark { position: relative; width: 38%; }
.bd__story { position: absolute; right: 4%; top: 0; height: 100%; aspect-ratio: 9 / 16; border-radius: 10px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, #0b1018, #141b26); display: grid; place-items: center; align-content: center; gap: .6rem; }
.bd__story .bd__cu { width: 52%; } .bd__story .bd__h { font-size: .9rem; }
@media (max-width: 600px) {
  .bd { height: 230px; overflow: hidden; } .bd__item { width: 90%; }   /* the hidden side cards never widen a phone page */
  .bd__item[data-slot="left"], .bd__item[data-slot="right"] { --o: 0; }
  .bd__item--rules { padding: .9rem 1rem; gap: .6rem; } .bd__swatches i { height: 1.3rem; } .bd__serif { font-size: 1.4rem; } .bd__sans { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .bd__item { transition: opacity .2s; } }

/* M02 · the sample site on the phone shows the same page; the visitor's own project type */
.webp__phone em { font: 300 .78rem/1.15 var(--serif); font-style: normal; color: var(--text); }
.webp__phone i { display: grid; place-items: center; font: 500 .45rem var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.webp[data-state="result"] .webp__phone i { color: #0b0f15; }
.webp__own { margin-top: 1rem; display: grid; gap: .2rem; justify-items: start; }
.webp__own .chips { justify-content: flex-start; margin-top: .4rem; }

/* M04 · one example: two creative variants, the channel, the landing page and the goal */
.growth > .growth__goal { margin: 0 0 1.2rem; }
.growth__var { display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem; align-items: center; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 2px; font-size: .8rem; color: var(--text); }
.growth__var b { font: 500 .6rem var(--sans); color: var(--c); letter-spacing: .1em; }
.growth__chips li { transition: border-color .3s, color .3s, background-color .3s; }
.growth__chips li.is-on { border-color: var(--c); color: var(--text); background: color-mix(in srgb, var(--c) 14%, transparent); }
.growth__line { font-size: .82rem; color: var(--text); padding: .35rem 0; border-bottom: 1px solid var(--line); }

/* M05/M10/M11 · what each step produces */
.doc { margin: 1rem auto 0; max-width: 540px; padding: .9rem 1.1rem; border: 1px solid var(--line); border-left: 2px solid var(--c); border-radius: 2px; background: rgba(8, 12, 18, .6); display: grid; gap: .35rem; text-align: left; }
.doc p { font-size: .88rem; color: var(--text); } .doc small { font-size: .68rem; color: var(--text-3); }
.ready__back { stroke-dasharray: 3 3; }
.seo__row.is-you { transition: border-color .3s, background-color .3s; }

/* M06 · one idea, four formats */
.fmt { display: grid; grid-template-columns: 1fr .56fr 1.6fr .75fr; gap: .6rem; align-items: end; margin-bottom: 1.4rem; }
.fmt__tile { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #0b1018; transition: border-color .4s, transform .5s var(--ease-out), opacity .4s; }
.fmt__tile--post { aspect-ratio: 1; } .fmt__tile--video { aspect-ratio: 9 / 16; } .fmt__tile--mail { aspect-ratio: 16 / 9; } .fmt__tile--print { aspect-ratio: 3 / 4; }
.fmt__tile img, .fmt__tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fmt__tile--print img { object-position: 62% 50%; } .fmt__tile--post img { object-position: 60% 50%; } .fmt__tile--video video, .fmt__tile--video img { object-position: 62% 50%; }
.fmt__tile figcaption { position: absolute; left: .6rem; right: .6rem; bottom: .55rem; display: grid; gap: .1rem; }
.fmt__tile figcaption b { font: 300 clamp(.78rem, 1.25vw, 1.05rem)/1.1 var(--serif); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.fmt__tile figcaption small { font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(238, 241, 245, .75); }
.fmt__tag { position: absolute; left: .45rem; top: .4rem; font: 500 .48rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 241, 245, .85); background: rgba(6, 10, 16, .6); padding: .15rem .35rem; border-radius: 2px; }
.fmt__tile.is-on { border-color: var(--c); transform: translateY(-4px); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--c) 60%, transparent); }
.fmt:has(.is-on) .fmt__tile:not(.is-on) { opacity: .45; }
@media (max-width: 600px) { .fmt { grid-template-columns: 1fr .62fr; } .fmt__tile--mail { grid-column: 1 / -1; } }

/* M03 · the emblem can be turned with the keyboard */
.emblem3d:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.mod--3d > .seg { display: flex; width: fit-content; margin: 1rem auto 0; flex-wrap: wrap; }
.fmt__tile--video figcaption b, .fmt__tile--print figcaption b { font-size: clamp(.7rem, .95vw, .85rem); }
.fmt__tile--video figcaption small, .fmt__tile--print figcaption small { font-size: .46rem; letter-spacing: .08em; }

/* v20 · the front is the world: no copy over it; v24 · a fire's hologram shows its name and three keywords (no lists) */

/* ==========================================================================
   v20 — area pages: name → one sentence → main presentation → three delivery lines → details → one invitation
   ========================================================================== */
.project-head { margin-bottom: 2.4rem; }
.mod--show { border-top: 0; padding-top: 0; margin-bottom: 1.4rem; }
.mod--show .mod__head { margin-bottom: 1rem; }
.deliver { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 0 0 2.6rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.deliver li { position: relative; padding-left: 1.1rem; font: 500 .66rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.deliver li::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.area__more { margin: 0 0 3rem; }
.area__more > summary { font: 500 .66rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); padding: .9rem 0; border-bottom: 1px solid var(--line); }
.area__more[open] > summary { margin-bottom: 1.4rem; color: var(--text); }
.area__for { color: var(--text-2); margin-bottom: 1rem; max-width: 60ch; }
.area__more .mod { margin-top: 2.4rem; }

/* the presentation stage */
.sh { padding: 2.4rem clamp(.8rem, 2vw, 1.4rem) 1.2rem; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(10, 15, 22, .9), rgba(8, 12, 18, .97) 60%), url("/assets/img/fx/material-grafit.jpg") center / cover; transform: none !important; }
.sh::before { display: none; }
.sh__space { position: relative; aspect-ratio: 16 / 9; }
.sh__shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out), visibility 0s .8s; }
.sh__shot.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease-out), transform 1s var(--ease-out), visibility 0s; }
.sh__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; margin-top: 1rem; }
.sh__bar .seg { margin-top: 0; flex-wrap: wrap; border-radius: 22px; }
.sh__ctl { display: flex; gap: 1.2rem; }
.sh__ctl [hidden] { display: none; }
.sh__cap { text-align: left; min-height: 1.6em; }
.sh__note { position: absolute; left: .6rem; bottom: .5rem; font: 500 .52rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(238, 241, 245, .8); background: rgba(6, 10, 16, .6); padding: .2rem .45rem; border-radius: 2px; z-index: 3; }
.sh__links { display: flex; gap: 1.4rem; margin-top: .4rem; }
.sh__card { border: 1px solid var(--line-strong); border-radius: 4px; background: rgba(8, 12, 18, .94); padding: 1.1rem 1.2rem; display: grid; gap: .5rem; align-content: start; font-size: .88rem; color: var(--text-2); }
.sh__card > small { font: 500 .56rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.sh__card .sh__h { font: 300 clamp(1.05rem, 1.9vw, 1.45rem)/1.2 var(--serif); color: var(--text); }
.sh__shot > .sh__card { position: absolute; left: 50%; top: 50%; width: min(560px, 82%); transform: translate(-50%, -50%); }
.sh__three { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: center; }
.sh__three > .sh__card, .sh__three > .auto__screen { height: auto; }
.sh__fan > :nth-child(1) { transform: rotate(-1.4deg); } .sh__fan > :nth-child(3) { transform: rotate(1.2deg); }

/* brand */
.sh .bd__photo { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.sh__print video, .sh__print img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh__print .bd__on { z-index: 2; }
.sh__kitphone { right: 3%; bottom: 4%; width: 15%; z-index: 3; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); }
.sh__zoom { transform-origin: 30% 50%; }
.sh__shot.is-on .sh__zoom { animation: shZoom 6s var(--ease-out) both; }
@keyframes shZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.sh__detailmark { position: absolute; left: 6%; top: 34%; width: 48%; z-index: 2; }
.sh__detailmark .bd__ink { width: 100%; stroke-width: 14; mix-blend-mode: multiply; }
.sh__swatch { position: absolute; right: 4%; bottom: 7%; display: flex; gap: .4rem; align-items: center; z-index: 2; }
.sh__swatch i { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--sw); border: 1px solid var(--line-strong); }
.sh__swatch small { margin-left: .4rem; font-size: .62rem; letter-spacing: .1em; color: var(--text-2); }
.sh__digital { position: absolute; inset: 0; }
.sh__digital .bd__browser { inset: 4% 40% 4% 0; }
.sh__digital .bd__phone { right: 27%; bottom: 0; width: 17%; }
.sh__digital .bd__post { left: auto; right: 0; top: 14%; height: 70%; }
.sh__group { position: absolute; inset: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: .9rem; align-items: center; }
.sh__group .bd__photo { position: relative; top: auto; transform: none; }
.sh__groupside { position: relative; height: 100%; }
.sh__groupside .bd__browser { inset: 4% 0 46% 0; }
.sh__groupside .bd__post { left: auto; right: 0; top: auto; bottom: 2%; height: 40%; }

/* web: real screens */
.sh__screen { position: absolute; inset: 0; margin: 0; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: #0b1018; }
.sh__screen img { width: 100%; height: auto; display: block; }
.sh__shot.is-on .sh__pan { animation: shPan 3.2s var(--ease-io) both; }
@keyframes shPan { from { transform: translateY(0); } to { transform: translateY(-4%); } }
.sh__screen figcaption, .sh__phoneshot figcaption { position: absolute; left: .6rem; bottom: .5rem; font: 500 .52rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(238, 241, 245, .85); background: rgba(6, 10, 16, .65); padding: .2rem .45rem; border-radius: 2px; }
.sh__screen--dim { opacity: .35; }
.sh__phoneshot { position: absolute; right: 8%; top: 2%; bottom: 2%; aspect-ratio: 390 / 844; margin: 0; border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.sh__phoneshot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sh__pair { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: center; }
.sh__pair figure { margin: 0; display: grid; gap: .4rem; }
.sh__pair figcaption { font: 500 .56rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.sh__grid4 { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .6rem; }
.sh__grid4 figure { position: relative; margin: 0; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: #0b1018; }
.sh__grid4 img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sh__grid4 figcaption { position: absolute; left: .5rem; bottom: .4rem; font: 500 .5rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 241, 245, .85); background: rgba(6, 10, 16, .65); padding: .15rem .4rem; border-radius: 2px; }
.sh__g-phone { display: grid; place-items: center; background: linear-gradient(180deg, #0b1018, #121a26) !important; }
.sh__g-phone img { width: auto; height: 92%; aspect-ratio: 390 / 844; border-radius: 12px; border: 1px solid var(--line-strong); }
.sh__g-admin .recon { height: 100%; font-size: .72rem; border: 0; }

/* campaign */
.sh__copy { position: absolute; z-index: 2; display: grid; gap: .45rem; }
.sh__h { font: 300 clamp(1.1rem, 2.4vw, 2rem)/1.08 var(--serif); color: #fff; }
.sh__s { font-size: .82rem; color: rgba(238, 241, 245, .85); }
.sh__brand { font: 500 .5rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(238, 241, 245, .7); }
.sh__ad, .sh__vert, .sh__square, .sh__landing { position: absolute; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: #0b1018; }
.sh__ad { inset: 0; }
.sh__ad .sh__copy { left: 6%; top: 50%; transform: translateY(-50%); max-width: 42%; justify-items: start; }
.sh__vert { left: 50%; top: 0; bottom: 0; aspect-ratio: 9 / 16; transform: translateX(-50%); }
.sh__vert .sh__copy, .sh__square .sh__copy { left: 7%; right: 7%; bottom: 7%; }
.sh__vert .sh__h, .sh__square .sh__h { font-size: clamp(.95rem, 1.6vw, 1.3rem); text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.sh__square { left: 50%; top: 4%; bottom: 4%; aspect-ratio: 1; transform: translateX(-50%); }
.sh__square .sh__media { object-position: 60% 50%; }
.sh__landing { inset: 3% 8%; display: grid; grid-template-rows: auto 1fr auto; }
.sh__landing .bd__bar span { margin-left: .5rem; font-size: .6rem; color: var(--text-3); }
.sh__lhero { position: relative; overflow: hidden; }
.sh__lhero .sh__copy { left: 5%; top: 50%; transform: translateY(-50%); max-width: 45%; }
.sh__lform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .7rem .9rem; border-top: 1px solid var(--line); }
.sh__lform span { flex: 1 1 8rem; padding: .45rem .6rem; border: 1px solid var(--line-strong); border-radius: 2px; font-size: .7rem; color: var(--text-3); }
.sh__lform .bd__btn { flex: none; }
.sh__kit { position: absolute; inset: 0; display: grid; grid-template-columns: 1.55fr .6fr .95fr; grid-template-rows: 1fr 1fr; gap: .7rem; align-items: center; }
.sh__kit > * { position: relative !important; inset: auto !important; transform: none !important; width: 100%; }
.sh__kit .sh__ad { grid-column: 1; grid-row: 1; height: 100%; } .sh__kit .sh__ad .sh__copy { max-width: 60%; } .sh__kit .sh__ad .sh__h { font-size: clamp(.85rem, 1.5vw, 1.2rem); }
.sh__kit .sh__landing { grid-column: 1; grid-row: 2; height: 100%; grid-template-rows: auto 1fr; } .sh__kit .sh__landing .sh__lform { display: none; } .sh__kit .sh__lhero .sh__h { font-size: .85rem; } .sh__kit .sh__lhero .sh__s { display: none; }
.sh__kit .sh__vert { grid-column: 2; grid-row: 1 / 3; aspect-ratio: 9 / 16; height: auto; }
.sh__kit .sh__square { grid-column: 3; grid-row: 1 / 3; aspect-ratio: 1; height: auto; }
.sh__kit .sh__vert .sh__h, .sh__kit .sh__square .sh__h { font-size: .8rem; }
.sh__kit .sh__copy .sh__s, .sh__kit .sh__brand { display: none; }

/* seo, ai, apps, pr, reputation cards */
.sh__serp .sh__link, .sh__local .sh__link { font: 400 1.05rem/1.3 var(--sans); color: #8ab4ff; }
.sh__serp ul { display: flex; flex-wrap: wrap; gap: .4rem; } .sh__serp li { padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; }
.sh__map { height: 4.2rem; border-radius: 3px; background: repeating-linear-gradient(35deg, rgba(238, 241, 245, .05) 0 2px, transparent 2px 14px), linear-gradient(135deg, #101826, #0b1018); position: relative; }
.sh__map i { position: absolute; left: 48%; top: 30%; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); box-shadow: 0 0 10px var(--c); }
.sh__outline ol { display: grid; gap: .25rem; padding-left: 1.1rem; list-style: decimal; color: var(--text); font-size: .82rem; }
.sh__chip { justify-self: start; padding: .25rem .6rem; border: 1px solid var(--c); border-radius: 999px; font-size: .66rem; color: var(--text); }
.sh__ref { font-size: .74rem; color: var(--c); }
.sh__source mark { background: color-mix(in srgb, var(--c) 26%, transparent); color: var(--text); padding: 0 .15em; border-radius: 2px; }
.sh__app { position: absolute; left: 50%; top: 50%; width: min(620px, 92%); transform: translate(-50%, -50%); }
.sh__three--apps { grid-template-columns: 1.3fr 1fr 1fr; }
.sh__three--apps .sh__app { position: static; width: auto; transform: none; font-size: .72rem; }
.sh__lines { display: grid; gap: .35rem; } .sh__lines i { height: 5px; border-radius: 2px; background: var(--line-strong); } .sh__lines i:last-child { width: 60%; }
.sh__quote .sh__h { font-style: italic; }
.sh__checks { display: grid; gap: .4rem; } .sh__checks li { padding-left: 1.4rem; position: relative; color: var(--text-2); } .sh__checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: .9rem; height: .9rem; border: 1px solid var(--line-strong); border-radius: 2px; } .sh__checks li.is-ok { color: var(--text); } .sh__checks li.is-ok::before { background: var(--c); border-color: var(--c); }

/* wms, pictures only */
.sh__wms { position: absolute; inset: 0 0 34% 0; display: grid; grid-template-columns: 1fr 1fr .8fr; gap: .8rem; }
.sh__shot .wms__table { position: absolute; left: 0; right: 0; bottom: 4%; margin: 0; }
.sh__loc { position: relative; border: 1px solid var(--line); border-radius: 3px; background: rgba(8, 12, 18, .9); padding: .8rem; display: grid; gap: .5rem; align-content: start; }
.sh__loc--order { border-style: dashed; }
.sh__loc .wms__n { position: absolute; right: .7rem; top: .5rem; }
.sh__boxes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; } .sh__boxes i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--c) 42%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.sh__wms .sh__note { bottom: auto; top: auto; left: 0; position: absolute; bottom: -1.8rem; background: none; padding: 0; color: var(--text-2); letter-spacing: .1em; }
.sh__fly { position: absolute; display: flex; gap: 4px; z-index: 3; }
.sh__fly i { width: 14px; height: 14px; border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.sh__fly--move { left: 22%; top: 40%; } .sh__fly--issue { left: 55%; top: 40%; }
.sh__shot.is-on .sh__fly--move { animation: shFly 1.6s var(--ease-io) .3s both; } .sh__shot.is-on .sh__fly--issue { animation: shFly 1.6s var(--ease-io) .3s both; }
@keyframes shFly { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(14vw, -2.2rem); } 85% { opacity: 1; } 100% { transform: translate(min(28vw, 330px), 0); opacity: 0; } }
.sh__trail { position: absolute; right: 0; top: 0; display: none; }

@media (max-width: 760px) {
  .sh__space { aspect-ratio: 4 / 5; }
  .sh__three, .sh__pair, .sh__three--apps { grid-template-columns: 1fr; align-content: start; overflow: hidden; gap: .5rem; }
  .sh__three > :nth-child(n+3), .sh__three--apps > :nth-child(n+2) { display: none; }
  .sh__fan > * { transform: none !important; }
  .sh__digital .bd__browser { inset: 0 0 45% 0; } .sh__digital .bd__phone { right: auto; left: 4%; width: 34%; } .sh__digital .bd__post { top: auto; bottom: 0; height: 42%; }
  .sh__group { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .sh__groupside .bd__browser { inset: 0 40% 0 0; } .sh__groupside .bd__post { height: 90%; bottom: 5%; }
  .sh__kitphone { width: 26%; }
  .sh__detailmark { top: 38%; }
  .sh__ad .sh__copy { max-width: 70%; } .sh__ad .sh__media { object-position: 70% 50%; }
  .sh__landing { inset: 0; } .sh__lhero .sh__copy { max-width: 80%; } .sh__lhero .sh__media { object-position: 72% 50%; }
  .sh__kit { grid-template-columns: .6fr 1fr; grid-template-rows: auto auto; align-content: center; } .sh__kit .sh__ad { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; height: auto; } .sh__kit .sh__vert { grid-column: 1; grid-row: 2; } .sh__kit .sh__square { grid-column: 2; grid-row: 2; } .sh__kit .sh__landing { display: none; }
  .sh__screen img { height: 100%; object-fit: cover; object-position: top left; }
  .sh__phoneshot { right: 50%; transform: translateX(50%); }
  .sh__grid4 .sh__g-admin .recon { font-size: .56rem; }
  .sh__wms { inset: 0 0 40% 0; grid-template-columns: 1fr 1fr; } .sh__wms .sh__loc--order { grid-column: 1 / -1; } .sh__boxes { grid-template-columns: repeat(6, 1fr); }
  .sh__shot .wms__table th { font-size: .48rem; letter-spacing: .06em; padding: .3rem .2rem; } .sh__shot .wms__table td { font-size: 1rem; padding: .35rem .2rem; }
  .sh__shot > .sh__card { width: 94%; }
  .sh__bar { flex-direction: column; align-items: stretch; } .sh__bar .seg { display: flex; } .sh__bar .seg button { flex: 1 1 auto; padding: .5rem .6rem; }
  .deliver { flex-direction: column; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sh__shot, .sh__shot.is-on { transition: none; transform: none; }
  .sh__shot.is-on .sh__zoom, .sh__shot.is-on .sh__pan, .sh__shot.is-on .sh__fly--move, .sh__shot.is-on .sh__fly--issue { animation: none; }
  .sh__fly { display: none; }
}
/* v20 brand framing fixes: the phone beside the print kit, the digital set without overlaps */
.sh__shot[data-id="kit"] .sh__print { right: 17%; }
.sh__kitphone { right: 1.5%; bottom: 8%; width: 14%; }
.sh__digital .bd__browser { inset: 6% 50% 24% 0; }
.sh__digital .bd__cards i { height: 3.2rem; }
.sh__digital .bd__phone { right: auto; left: 41%; bottom: 0; width: 15%; z-index: 2; }
.sh__digital .bd__post { right: 0; top: 10%; height: 72%; z-index: 1; }
@media (max-width: 760px) {
  .sh__shot[data-id="kit"] .sh__print { right: 0; top: 30%; }
  .sh__kitphone { width: 24%; bottom: 2%; }
  .sh__digital .bd__browser { inset: 0 0 48% 0; } .sh__digital .bd__phone { left: 2%; width: 30%; } .sh__digital .bd__post { top: auto; bottom: 0; height: 44%; }
}
/* v20 wms presentation: compact locations, the table below, the note between */
.sh__wms { inset: 2% 0 auto 0; align-items: start; }
.sh__loc { min-height: 8.5rem; }
.sh__wms .sh__note { position: static; grid-column: 1 / -1; margin-top: .2rem; }
.sh__shot .wms__table { bottom: 2%; }
.sh__shot .sh__trail { display: flex; position: absolute; left: 0; right: 0; bottom: 30%; gap: 1.4rem; font-size: .78rem; color: var(--text-2); list-style: none; padding: 0; counter-reset: tr; }
.sh__trail li::before { counter-increment: tr; content: counter(tr, decimal-leading-zero) " "; color: var(--c); font: 500 .6rem var(--sans); }
@media (max-width: 760px) { .sh__shot .sh__trail { display: none; } }
.sh--vsebine .sh__space { aspect-ratio: auto; }
.sh--vsebine .fmt { margin: 0; grid-template-columns: 1.1fr .62fr 1.7fr .82fr; }
@media (max-width: 760px) { .sh__grid4 { grid-template-rows: 1fr 1fr; } .sh__grid4 .sh__g-admin { display: none; } .sh__grid4 .sh__g-phone { grid-column: 1 / -1; } }


/* v21 · one playing state: a paused presentation freezes its CSS motion too */
.sh.is-paused, .sh.is-paused * { animation-play-state: paused !important; }
.sh__shot.is-on .sh__fly--move, .sh__shot.is-on .sh__fly--issue { animation: none; }
.sh__fly { left: 0; top: 0; opacity: 0; }
.sh__shot.is-on .sh__fly.is-going { animation: shFly2 1.6s var(--ease-io) .3s both; }
@keyframes shFly2 { 0% { transform: translate(var(--x0), var(--y0)); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(calc((var(--x0) + var(--x1)) / 2), var(--ym)); } 85% { opacity: 1; } 100% { transform: translate(var(--x1), var(--y1)); opacity: 0; } }
.sh__zoomwrap { position: absolute; inset: 0; transform-origin: 30% 50%; }
.bd__cards--done .bd__tile { display: grid; align-items: end; height: 3.2rem; padding: .25rem .4rem; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--img) center / cover; }
.bd__cards--done .bd__tile small { font: 500 .45rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.bd__cards--done .bd__tile--mark { background: radial-gradient(70% 70% at 70% 30%, color-mix(in srgb, var(--copper) 30%, transparent), transparent 70%), #0b1018; place-items: center; grid-template-rows: 1fr auto; }
.bd__cards--done .bd__tile--mark .bd__cu { width: 1.3rem; }
.sh__card mark { background: color-mix(in srgb, var(--c) 24%, transparent); color: var(--text); padding: 0 .15em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sh__aside { font-size: .74rem; color: var(--text-3); }
.sh__pressimg { width: 100%; height: 5.4rem; object-fit: cover; border-radius: 2px; }
.sh__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.sh__thumbs figure { margin: 0; display: grid; gap: .2rem; } .sh__thumbs img { width: 100%; height: 3.8rem; object-fit: cover; border-radius: 2px; } .sh__thumbs figcaption { font-size: .6rem; color: var(--text-3); }
/* the chosen view is marked by shape too, not only by colour */
.sh__bar .seg button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(238, 241, 245, .7); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.sh__ctl .link-btn:disabled { opacity: .35; }
/* the mobile menu button carries a short visible label */
.menu-btn { width: auto; min-width: 2.75rem; padding: 0 .95rem 0 1rem; gap: .55rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.menu-btn__label { font: 500 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
@media (max-width: 760px) {
  .sh__bar .seg button, .mod--3d .seg button { font-size: 13px; letter-spacing: .06em; min-height: 44px; min-width: 44px; padding: .55rem .7rem; white-space: normal; line-height: 1.2; text-align: center; }
  .sh__ctl { flex-wrap: wrap; gap: .4rem 1.4rem; }
  .sh__ctl .link-btn { font-size: 13px; letter-spacing: .06em; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .sh__cap { font-size: .9rem; }
  .menu-btn__label { font-size: 13px; letter-spacing: .1em; }
  .menu-btn { min-height: 44px; }
}

/* ==========================================================================
   v22 — entering a page: after the flight to the fire the page assembles in order —
   the rail draws down, then the area, the name, the sentence, the main presentation and the deliverables
   ========================================================================== */
.view--panel.is-entering .project-head::before, .view--panel.is-entering .page-head::before { transform-origin: 50% 0; animation: railDraw 1.3s .3s var(--ease-out) both; }
@keyframes railDraw { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.view--panel.is-entering .project-head > *, .view--panel.is-entering .page-head > * { animation: headIn 1s var(--ease-out) both; }
.view--panel.is-entering .project-head > :nth-child(1), .view--panel.is-entering .page-head > :nth-child(1) { animation-delay: .35s; }
.view--panel.is-entering .project-head > :nth-child(2), .view--panel.is-entering .page-head > :nth-child(2) { animation-delay: .48s; }
.view--panel.is-entering .project-head > :nth-child(3), .view--panel.is-entering .page-head > :nth-child(3) { animation-delay: .64s; }
.view--panel.is-entering .project-head > :nth-child(n+4), .view--panel.is-entering .page-head > :nth-child(n+4) { animation-delay: .76s; }
@keyframes headIn { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.view--panel.is-entering .label-dot { animation: dotIn 1.4s .35s var(--ease-out) both; }
@keyframes dotIn { 0% { transform: scale(0); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 80%, transparent); } 55% { transform: scale(1.6); box-shadow: 0 0 22px 6px color-mix(in srgb, var(--c) 60%, transparent); } 100% { transform: none; } }
.view--project.is-entering .project-head + * { animation: showIn 1.3s .8s var(--ease-out) both; }
@keyframes showIn { from { opacity: 0; transform: translateY(34px) scale(.975); clip-path: inset(0 0 22% 0 round 14px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); } }
.view--project.is-entering .deliver li { animation: headIn .8s var(--ease-out) both; }
.view--project.is-entering .deliver li:nth-child(1) { animation-delay: 1.15s; }
.view--project.is-entering .deliver li:nth-child(2) { animation-delay: 1.25s; }
.view--project.is-entering .deliver li:nth-child(3) { animation-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) {
  .view--panel.is-entering .project-head::before, .view--panel.is-entering .page-head::before, .view--panel.is-entering .project-head > *, .view--panel.is-entering .page-head > *,
  .view--panel.is-entering .label-dot, .view--project.is-entering .project-head + *, .view--project.is-entering .deliver li { animation: none; }
}
/* the arrival title takes clicks only while it is shown: empty, it must never cover a fire or a hologram */
.view--home > .reveal:not(.is-on) { pointer-events: none; }
.project-title:focus { outline: none; }   /* the heading is where focus lands on entry (as .page-title), not a control */

/* ==========================================================================
   v23 — the whole flame takes the pointer (not only the crater under it); sizes come from the world's projection
   ========================================================================== */
.marker::before { content: ""; position: absolute; left: calc(var(--fw, 24px) * -1); top: calc(var(--fh, 56px) * -1); width: calc(var(--fw, 24px) * 2); height: calc(var(--fh, 56px) + 24px); border-radius: 40% 40% 50% 50%; }

/* ==========================================================================
   v23 — Naši projekti: two clients side by side, compact cards with a small window onto the work
   (about half the earlier size); MCC has a phone view like VG Invest. The services list is its own page part.
   ========================================================================== */
.refs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.4rem); align-items: start; }
.refs .ref { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; padding: clamp(1.2rem, 2vw, 1.8rem); border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 6%, rgba(14, 20, 30, .72)), rgba(10, 14, 22, .6)); }
.refs .ref__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.refs .ref__text { gap: .6rem; }
.refs .ref__text p { font-size: .9rem; }
.refs .ref__stage { width: min(100%, 340px); min-height: 0; aspect-ratio: 16 / 11; display: grid; place-items: center; }
.refs .ref__shot { width: 100%; }
.refs .ref__shot img { border-radius: 0 0 6px 6px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85); }
.ref__win { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 6px 6px 0 0; background: rgba(20, 26, 36, .95); }
.ref__win i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.ref__win b { margin-left: 6px; font: 500 .56rem/1 var(--sans); letter-spacing: .06em; color: var(--text-3); }
.refs .ref__shot--phone { width: auto; }
.refs .ref__shot--phone img { width: auto; max-width: none; height: clamp(190px, 17vw, 236px); margin: 0 auto; border-radius: 14px; border: 3px solid rgba(255, 255, 255, .12); }
.refs .ref__shot--recon { width: 100%; }
.refs .ref__shot--recon .recon { font-size: .72rem; }
.refs .ref__text p.ref__cap, .refs .ref__cap { min-height: 1.4em; margin: -.3rem 0 0; font-size: .74rem; color: var(--text-3); }
.refs .seg { margin: 0; }
.ref__stage[data-view="namizje"] [data-shot="namizje"], .ref__stage[data-view="telefon"] [data-shot="telefon"] { display: block; animation: shotIn .5s var(--ease-out); }
@media (max-width: 820px) { .refs__grid { grid-template-columns: minmax(0, 1fr); } .refs .ref__stage { width: min(100%, 360px); } }
/* the work page shows one part at a time: Storitve (the list) or Naši projekti (the references) */
.view--work[data-part="refs"] .work-list, .view--work[data-part="refs"] .svc-all, .view--work[data-part="services"] .refs { display: none; }

/* ==========================================================================
   v23 — the header is a pane of real glass: logo left, menu right, and whatever scrolls under it is frosted
   (blur + a touch of saturation), lit along its top edge, with a soft shadow beneath and a faint sheen
   ========================================================================== */
.nav::before, .nav::after {
  content: ""; position: absolute; left: max(10px, calc(var(--gutter) * .5)); right: max(10px, calc(var(--gutter) * .5)); top: 50%;
  height: clamp(56px, 8.6vh, 80px); transform: translateY(-50%); border-radius: 20px; pointer-events: none; z-index: -1;
}
.nav::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035) 42%, rgba(255, 255, 255, .015) 100%),
    rgba(9, 14, 22, .42);
  -webkit-backdrop-filter: blur(20px) saturate(170%) brightness(1.04); backdrop-filter: blur(20px) saturate(170%) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),            /* the lit top edge of the glass */
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    inset 0 0 22px rgba(255, 255, 255, .025),
    0 22px 44px -22px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .28);
}
.nav::after {                                          /* a faint diagonal sheen across the pane */
  background: linear-gradient(104deg, transparent 18%, rgba(255, 255, 255, .05) 30%, transparent 42%, transparent 64%, rgba(255, 255, 255, .03) 72%, transparent 80%);
}   /* no blend mode here: it would isolate the header and the glass would have nothing to frost */
.nav__brand { margin-left: clamp(.4rem, 1vw, 1rem); }
.nav__right { margin-right: clamp(.2rem, .6vw, .6rem); }
@media (min-width: 901px) { .nav__links { margin-right: clamp(.4rem, 1vw, 1rem); } }
/* on the glass the round buttons need no frosting of their own */
.nav .sound, .nav .menu-btn { background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav::before { background: rgba(10, 15, 24, .9); } }
.view--work[data-part="refs"] .refs > .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the page title already says it */
.refs .seg { flex-wrap: nowrap; }
.refs .seg button { padding-inline: clamp(.55rem, .9vw, .9rem); letter-spacing: .14em; white-space: nowrap; }
@media (max-width: 1100px) { .refs .seg { flex-wrap: wrap; } }
/* the glass hangs from the top edge (nothing can show above it); its lit edge is the lower one */
.nav::before, .nav::after { top: 0; transform: none; height: calc(var(--nav-h) / 2 + clamp(28px, 4.3vh, 40px)); border-radius: 0 0 22px 22px; }
.nav::before {
  border-top: 0;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .26),
    inset 0 1px 0 rgba(255, 255, 255, .04),
    inset 0 0 22px rgba(255, 255, 255, .025),
    0 22px 44px -22px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .28);
}

/* v26 · the hologram's end dissolves: the light thins out smoothly to nothing; the pane fades out inside its own box
   (its mask reaches zero before every edge), so no straight edge shows anywhere */
.holo__glass { -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 40%, rgba(0, 0, 0, .5) 70%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 50%, #000 40%, rgba(0, 0, 0, .5) 70%, transparent 100%); }

/* ==========================================================================
   v28 — Marketing page: the area's emblem draws itself in before the title (rings, symbols, links, then its signal)
   ========================================================================== */
.area-emblem { display: inline-block; width: 1.02em; height: 1.02em; margin: 0 .2em 0 -.04em; vertical-align: -.16em; }
.area-emblem svg { width: 100%; height: 100%; overflow: visible; }
.area-emblem .holo__node-ring, .area-emblem .holo__sym *, .area-emblem .holo__edge { stroke-width: 1.4px; }
.area-emblem .holo__node-ring { transition: none; animation: drawOn 1.1s calc(.7s + var(--n) * .22s) var(--ease-out) forwards; }
.area-emblem .holo__sym * { transition: none; animation: drawOn 1s calc(1.15s + var(--n) * .22s) var(--ease-out) forwards; }
.area-emblem .holo__edge { transition: none; animation: drawOn .8s calc(1.75s + var(--n) * .12s) var(--ease-out) forwards; }
.area-emblem .holo__node-fill { transition: none; animation: emblemFill .9s calc(1.5s + var(--n) * .15s) var(--ease-out) forwards; }
@keyframes emblemFill { to { opacity: .13; } }
.area-emblem .holo__pulse { animation: holoPulse 4.5s calc(2.6s + var(--n) * 1.4s) linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .area-emblem .holo__node-ring, .area-emblem .holo__sym *, .area-emblem .holo__edge { animation: none; stroke-dashoffset: 0; }
  .area-emblem .holo__node-fill { animation: none; opacity: .13; }
}

/* v29 · the pop-ups (enquiry, needs picker) still scroll when needed, but show no scrollbar */
.picker, .kontakt { scrollbar-width: none; -ms-overflow-style: none; }
.picker::-webkit-scrollbar, .kontakt::-webkit-scrollbar, .kontakt *::-webkit-scrollbar { width: 0; height: 0; display: none; }
.kontakt * { scrollbar-width: none; }
/* v29 · the campaign's fourth format: the service's website in a browser window (same frame as the other formats) */
.sh__site { grid-template-rows: auto auto 1fr auto; }
.sh__snav { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.4rem); padding: .55rem .9rem; border-bottom: 1px solid var(--line); font: 500 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.sh__snav b { margin-right: auto; font: 400 .95rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--text); }
.sh__site .sh__lhero .sh__copy { max-width: 48%; }
.sh__stiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .7rem .9rem; border-top: 1px solid var(--line); }
.sh__stiles span { display: grid; gap: .15rem; padding: .5rem .6rem; border: 1px solid var(--line-strong); border-radius: 3px; font-size: .66rem; color: var(--text-3); }
.sh__stiles b { font-weight: 500; font-size: .74rem; color: var(--text); }
@media (max-width: 760px) { .sh__snav span { display: none; } .sh__stiles { grid-template-columns: 1fr; } .sh__stiles span:nth-child(n+2) { display: none; } }

/* ==========================================================================
   v30 — brand presentation: three logos, the colour structure, web and posts with a quiet new-age edge
   ========================================================================== */
.sh__tag { color: var(--text); font-weight: 600; }
/* three logos */
.lg { position: absolute; inset: 6% 3%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.2rem); }
.lg__card { position: relative; margin: 0; display: grid; place-items: center; align-content: center; gap: .9rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong);
  opacity: 0; transform: translateY(14px); }
.sh__shot.is-on .lg__card { animation: lgIn .9s var(--ease-out) both; }
.sh__shot.is-on .lg__card:nth-child(2) { animation-delay: .25s; } .sh__shot.is-on .lg__card:nth-child(3) { animation-delay: .5s; }
@keyframes lgIn { to { opacity: 1; transform: none; } }
.lg__card--night { background: radial-gradient(120% 90% at 30% 20%, #18202b, #070b11 70%); color: #EEF1F5; --ink: #EEF1F5; --acc: #E8692A; }
.lg__card--paper { background: linear-gradient(160deg, #f4f1ea, #e4ded3); color: #0b0f15; --ink: #0b0f15; --acc: #E8692A; }
.lg__card--copper { background: linear-gradient(150deg, #f08a4f, #c9541d 70%); color: #160c06; --ink: #160c06; --acc: #fff3ea; }
.lg__mark { width: 38%; height: auto; overflow: visible; }
.lg__s { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lg__acc { stroke: var(--acc); }
.sh__shot.is-on .lg__s { animation: drawOn 1.3s var(--ease-out) forwards; }
.sh__shot.is-on .lg__card:nth-child(1) .lg__s { animation-delay: calc(.5s + var(--d, 0s)); }
.sh__shot.is-on .lg__card:nth-child(2) .lg__s { animation-delay: 1.05s; }
.sh__shot.is-on .lg__card:nth-child(3) .lg__s { animation-delay: 1.3s; }
.sh__shot.is-on .lg__card:nth-child(1) .lg__s:nth-child(2) { --d: .15s; } .sh__shot.is-on .lg__card:nth-child(1) .lg__s:nth-child(3) { --d: .3s; } .sh__shot.is-on .lg__card:nth-child(1) .lg__s:nth-child(4) { --d: .45s; }
.lg__fill { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; }
.sh__shot.is-on .lg__fill { animation: lgFill .9s .7s var(--ease-out) forwards; } .sh__shot.is-on .lg__fill--b { animation-delay: .85s; }
@keyframes lgFill { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.lg__dot { fill: var(--ink); opacity: 0; } .sh__shot.is-on .lg__dot { animation: fade .5s 2.2s forwards; }
.lg__word { margin: 0; color: var(--ink); opacity: 0; transform: translateY(6px); }
.sh__shot.is-on .lg__word { animation: lgIn .8s 1.5s var(--ease-out) forwards; }
.lg__word--serif { font: italic 300 clamp(1.4rem, 2.6vw, 2.3rem)/1 var(--serif); letter-spacing: .01em; }
.lg__word--wide { font: 650 clamp(.8rem, 1.35vw, 1.1rem)/1 var(--sans); letter-spacing: .42em; padding-left: .42em; }
.lg__word--thin { font: 300 clamp(.75rem, 1.2vw, 1rem)/1 var(--sans); letter-spacing: .5em; padding-left: .5em; }
.lg__card figcaption { position: absolute; left: .8rem; bottom: .6rem; font: 500 .56rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity: .62; }
.lg__card figcaption b { margin-right: .35rem; color: var(--acc); }
/* the colour structure */
.bc { position: absolute; inset: 5% 3%; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: clamp(.6rem, 1.4vw, 1rem); }
.bc__bar { grid-column: 1 / -1; display: flex; height: clamp(1.9rem, 3.6vw, 2.8rem); border-radius: 6px; overflow: hidden; border: 1px solid var(--line-strong); }
.bc__bar i { position: relative; flex: 0 0 0%; background: var(--sw); }
.bc__bar i:first-child { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sh__shot.is-on .bc__bar i { animation: bcGrow 1s calc(1.5s + var(--k) * .22s) var(--ease-out) forwards; }
@keyframes bcGrow { to { flex-basis: var(--w); } }
.bc__bar span { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); font: 500 .58rem var(--sans); letter-spacing: .12em; color: #fff; mix-blend-mode: difference; opacity: 0; white-space: nowrap; }
.sh__shot.is-on .bc__bar span { animation: fade .4s calc(2.3s + var(--k) * .22s) forwards; }
.bc__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.4rem, 1vw, .8rem); }
.bc__col { display: grid; align-content: start; gap: .3rem; padding: .8rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, .015); opacity: 0; transform: translateY(12px); }
.sh__shot.is-on .bc__col { animation: lgIn .7s calc(.2s + var(--k) * .12s) var(--ease-out) forwards; }
.bc__dot { width: clamp(1.8rem, 3.4vw, 2.8rem); aspect-ratio: 1; border-radius: 50%; background: var(--sw); border: 1px solid var(--line-strong); transform: scale(0); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sw) 60%, transparent); }
.sh__shot.is-on .bc__dot { animation: bcDot 1s calc(.5s + var(--k) * .14s) var(--ease-out) forwards; }
@keyframes bcDot { 0% { transform: scale(0); } 60% { transform: scale(1.1); box-shadow: 0 0 0 8px color-mix(in srgb, var(--sw) 25%, transparent); } 100% { transform: none; box-shadow: 0 0 0 0 transparent; } }
.bc__col b { margin-top: .35rem; font: 400 clamp(.9rem, 1.3vw, 1.1rem)/1 var(--serif); color: var(--text); }
.bc__role { font: 500 .52rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.bc__col code { font: 500 .62rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text-2); clip-path: inset(0 100% 0 0); }
.sh__shot.is-on .bc__col code { animation: bcType .8s calc(1s + var(--k) * .14s) steps(9) forwards; }
.bc__rgb { font-size: .55rem !important; color: var(--text-3) !important; }
@keyframes bcType { to { clip-path: inset(0 0 0 0); } }
.bc__ramp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: .35rem; }
.bc__ramp i { height: .7rem; border-radius: 2px; background: color-mix(in srgb, var(--sw) var(--t), #0b1018); opacity: 0; transform: scaleX(.2); transform-origin: left; }
.bc__col:nth-child(1) .bc__ramp i { background: color-mix(in srgb, #EEF1F5 calc(100% - var(--t) - 8%), var(--sw)); }
.sh__shot.is-on .bc__ramp i { animation: bcRamp .45s calc(2.4s + var(--k) * .1s + var(--r) * .06s) var(--ease-out) forwards; }
@keyframes bcRamp { to { opacity: 1; transform: none; } }
.bc__use { position: relative; grid-column: 2; grid-row: 2; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); opacity: 0; }
.sh__shot.is-on .bc__use { animation: fade .6s 3s forwards; }
.bc__app { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .6rem; opacity: 0; }
.bc__o { width: 30%; height: auto; fill: none; stroke-width: 22; stroke-linecap: square; }
.bc__wm { width: 62%; height: auto; fill: none; stroke-width: 24; stroke-linecap: square; }
.bc__app--1 { background: #060A10; } .bc__app--1 .bc__o { stroke: #E8692A; } .bc__app--1 .bc__wm { stroke: #EEF1F5; }
.bc__app--2 { background: #EEF1F5; } .bc__app--2 .bc__o { stroke: #E8692A; } .bc__app--2 .bc__wm { stroke: #060A10; }
.bc__app--3 { background: #E8692A; } .bc__app--3 .bc__o { stroke: #060A10; } .bc__app--3 .bc__wm { stroke: #060A10; }
.sh__shot.is-on .bc__app { animation: bcApp 3.6s 3.2s linear infinite; }
.sh__shot.is-on .bc__app--2 { animation-delay: 4.4s; } .sh__shot.is-on .bc__app--3 { animation-delay: 5.6s; }
@keyframes bcApp { 0% { opacity: 0; } 8%, 33% { opacity: 1; } 41%, 100% { opacity: 0; } }
/* web and posts: the same three pieces with a restrained new-age edge (fine grid, lit gradient rims, one light sweep) */
.sh__digital--neo::before { content: ""; position: absolute; inset: -4% -2%; pointer-events: none; opacity: .5;
  background: linear-gradient(rgba(79, 210, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(232, 105, 42, .05) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 85%); }
.sh__digital--neo .bd__browser, .sh__digital--neo .bd__phone, .sh__digital--neo .bd__post { border-color: transparent;
  background: linear-gradient(#0b1018, #0b1018) padding-box, linear-gradient(135deg, rgba(232, 105, 42, .75), rgba(79, 210, 255, .35) 45%, rgba(217, 139, 255, .3) 70%, rgba(232, 105, 42, .5)) border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 18px 50px -24px rgba(232, 105, 42, .35), 0 0 32px -12px rgba(79, 210, 255, .18); }
.sh__digital--neo .bd__post { background: radial-gradient(90% 80% at 80% 10%, rgba(232, 105, 42, .22), transparent 60%) padding-box, linear-gradient(#0b1018, #0b1018) padding-box, linear-gradient(135deg, rgba(232, 105, 42, .75), rgba(79, 210, 255, .35) 45%, rgba(217, 139, 255, .3) 70%, rgba(232, 105, 42, .5)) border-box; }
.sh__digital--neo .bd__post .bd__cu { filter: drop-shadow(1.5px 0 0 rgba(79, 210, 255, .45)) drop-shadow(-1.5px 0 0 rgba(232, 105, 42, .5)); }
.sh__digital--neo .bd__btn { box-shadow: 0 0 18px -2px rgba(232, 105, 42, .6); }
.sh__digital--neo .bd__browser::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .07) 48%, rgba(79, 210, 255, .06) 52%, transparent 65%); transform: translateX(-120%); }
.sh__shot.is-on .sh__digital--neo .bd__browser::after { animation: neoSweep 2.4s 1s var(--ease-io) both; }
@keyframes neoSweep { to { transform: translateX(120%); } }
@media (max-width: 760px) {
  .lg { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); inset: 3% 4%; }
  .lg__card { grid-template-columns: auto 1fr; justify-items: start; padding: 0 1rem; gap: .8rem; } .lg__mark { width: 3.6rem; }
  .bc { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; inset: 3% 3%; } .bc__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bc__use { grid-column: 1; grid-row: 3; height: 5.5rem; }
  .bc__col { padding: .5rem; } .bc__rgb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg__card, .lg__word, .bc__col, .bc__use, .lg__dot { opacity: 1 !important; transform: none !important; animation: none !important; }
  .lg__s { stroke-dashoffset: 0; animation: none !important; } .lg__fill { opacity: 1; animation: none !important; }
  .bc__bar i { flex-basis: var(--w); animation: none !important; } .bc__bar span, .bc__ramp i { opacity: 1; transform: none; animation: none !important; }
  .bc__dot { transform: none; animation: none !important; } .bc__col code { clip-path: none; animation: none !important; }
  .bc__app--1 { opacity: 1; animation: none !important; } .bc__app--2, .bc__app--3 { animation: none !important; }
}
/* v30 · colour structure, refined: readable proportion labels, tints that show for every colour, a contrast row */
.bc__bar span { mix-blend-mode: normal; color: var(--tc); }
.bc__cols { align-items: stretch; }
.bc__col { align-content: start; gap: .35rem; padding: clamp(.7rem, 1.2vw, 1rem); }
.bc__dot { width: clamp(2.2rem, 4vw, 3.4rem); }
.bc__ramp { gap: 3px; margin-top: .5rem; }
.bc__ramp i { height: clamp(1rem, 1.9vw, 1.5rem); border-radius: 3px; background: color-mix(in srgb, var(--sw) calc(100% - var(--r) * 19%), #0b1018); }
.bc__col:nth-child(1) .bc__ramp i { background: color-mix(in srgb, #EEF1F5 calc(8% + var(--r) * 17%), #060A10); }
.bc__col:nth-child(1) .bc__ramp i:first-child { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.bc__ratio { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); font: 500 .58rem var(--sans); letter-spacing: .08em; color: var(--text-3); opacity: 0; }
.bc__ratio b { color: var(--text); font-weight: 600; letter-spacing: .02em; }
.sh__shot.is-on .bc__ratio { animation: fade .6s calc(2.8s + var(--k) * .12s) forwards; }
.bc__col { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .bc__ratio { opacity: 1; animation: none !important; } }
.bc__ratio { white-space: nowrap; } .bc__ratio b { margin: 0 0 0 .25rem; font: 600 .7rem var(--sans); letter-spacing: .02em; color: var(--text); }
@media (max-width: 760px) {   /* a phone: the four colours and their proportion fill the stage; the logo card stays for wider screens */
  .bc { grid-template-rows: auto 1fr; } .bc__use { display: none; }
  .bc__col { gap: .2rem; padding: .55rem .6rem; } .bc__dot { width: 1.9rem; } .bc__ramp i { height: .85rem; } .bc__ratio { padding-top: .4rem; }
}

/* ==========================================================================
   v31 — Logotip & emblem: three logotypes, each with its own emblem taken from it (labelled; a line shows the link)
   ========================================================================== */
.lg__card { grid-template-rows: auto 1fr auto auto auto; place-items: center; align-content: stretch; gap: 0; padding: clamp(.8rem, 1.6vw, 1.3rem) clamp(.6rem, 1.4vw, 1.1rem) clamp(1.8rem, 3vw, 2.4rem); }
.lg__mark, .lg__word { display: none; }
.lg__lbl { font: 500 .5rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); opacity: 0; }
.sh__shot.is-on .lg__lbl { animation: lgLbl .6s calc(.4s + var(--k) * .3s) forwards; } .sh__shot.is-on .lg__lbl:last-of-type { animation-delay: calc(2.4s + var(--k) * .3s); }
@keyframes lgLbl { to { opacity: .55; } }
.lg__logo { width: 86%; display: grid; place-items: center; }
.lg__logo svg { width: 100%; height: auto; overflow: visible; }
.lg__wire { width: 1px; height: clamp(1rem, 3.2vw, 2.4rem); margin: .3rem 0 .5rem; background: linear-gradient(var(--acc), transparent); transform: scaleY(0); transform-origin: top; }
.sh__shot.is-on .lg__wire { animation: lgWire .6s calc(1.7s + var(--k) * .3s) var(--ease-out) forwards; }
@keyframes lgWire { to { transform: none; } }
.lg__emb { width: clamp(3.4rem, 8vw, 6rem); aspect-ratio: 1; margin-bottom: .45rem; }
.lg__emb svg { width: 100%; height: 100%; overflow: visible; }
/* A — Orbita */
.lgA path, .lgA circle:not(.lg__dot) { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lgA .lg__acc { stroke: var(--acc); }
.lgA .lg__ring { stroke-width: 1.6; opacity: .45; }
.sh__shot.is-on .lg__logo .lgA path, .sh__shot.is-on .lg__logo .lgA circle:not(.lg__dot) { animation: drawOn 1s .6s var(--ease-out) forwards; }
.sh__shot.is-on .lg__logo .lgA :nth-child(2) { animation-delay: .72s; } .sh__shot.is-on .lg__logo .lgA :nth-child(3) { animation-delay: .9s; } .sh__shot.is-on .lg__logo .lgA :nth-child(4) { animation-delay: 1s; }
.sh__shot.is-on .lg__logo .lgA :nth-child(5) { animation-delay: 1.08s; } .sh__shot.is-on .lg__logo .lgA :nth-child(6) { animation-delay: 1.16s; } .sh__shot.is-on .lg__logo .lgA :nth-child(7) { animation-delay: 1.26s; }
.sh__shot.is-on .lg__emb .lgA path, .sh__shot.is-on .lg__emb .lgA circle:not(.lg__dot) { animation: drawOn 1.1s 2.2s var(--ease-out) forwards; }
.lgA .lg__dot { fill: var(--acc); opacity: 0; transform-box: fill-box; transform-origin: center; }
.sh__shot.is-on .lgA .lg__dot { animation: lgDot .5s 1.5s var(--ease-out) forwards; } .sh__shot.is-on .lg__emb .lgA .lg__dot { animation-delay: 2.9s; }
@keyframes lgDot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
/* B — Rez */
.lgB__ink * { fill: none; stroke: var(--ink); stroke-width: 20; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 3; }
.lg__logo .lgB { clip-path: inset(0 100% 0 0); }
.sh__shot.is-on .lg__logo .lgB { animation: lgWipe 1.1s .9s var(--ease-io) forwards; }
@keyframes lgWipe { to { clip-path: inset(0 0 0 0); } }
.lgB__blade { fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.sh__shot.is-on .lgB__blade { animation: lgBlade 1.6s 1.9s var(--ease-out) forwards; }
@keyframes lgBlade { 0% { opacity: 1; stroke-dashoffset: 1; } 45% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
.lgB__block { fill: var(--ink); }
.lg__emb .lgB { transform: scale(.6) rotate(-8deg); opacity: 0; }
.sh__shot.is-on .lg__emb .lgB { animation: lgStamp .7s 2.5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes lgStamp { to { transform: none; opacity: 1; } }
/* C — Serif */
.lgC { margin: 0; display: flex; align-items: baseline; gap: .2em; font: 300 clamp(1.5rem, 3.1vw, 2.7rem)/1 var(--serif); color: var(--ink); letter-spacing: 0; }
.lgC span { opacity: 0; transform: translateY(.25em); filter: blur(4px); }
.sh__shot.is-on .lgC span { animation: lgLetter .9s var(--ease-out) forwards; }
.sh__shot.is-on .lgC span:nth-child(1) { animation-delay: 1.1s; } .sh__shot.is-on .lgC span:nth-child(2) { animation-delay: 1.2s; } .sh__shot.is-on .lgC span:nth-child(3) { animation-delay: 1.3s; }
.sh__shot.is-on .lgC span:nth-child(4) { animation-delay: 1.38s; } .sh__shot.is-on .lgC span:nth-child(5) { animation-delay: 1.46s; } .sh__shot.is-on .lgC span:nth-child(6) { animation-delay: 1.54s; }
@keyframes lgLetter { to { opacity: 1; transform: none; filter: none; } }
.lgC__o { position: relative; }
.lgC__o i { position: absolute; left: 50%; top: -.28em; width: 1.5px; height: 1.42em; background: var(--acc); transform-origin: 50% 100%; transform: rotate(38deg) scaleY(0); }
.sh__shot.is-on .lgC__o i { animation: lgHair .9s 1.9s var(--ease-out) forwards; }
@keyframes lgHair { to { transform: rotate(38deg) scaleY(1); } }
.lgC--e .lg__ring { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lgC--e .lg__ring--in { stroke-width: .8; opacity: .6; }
.sh__shot.is-on .lgC--e .lg__ring { animation: drawOn 1.1s 2.6s var(--ease-out) forwards; }
.lgC__n { font: 300 58px var(--serif); fill: var(--ink); opacity: 0; }
.sh__shot.is-on .lgC__n { animation: fade .8s 3s forwards; }
.lgC__hair { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sh__shot.is-on .lgC__hair { animation: drawOn .9s 3.3s var(--ease-out) forwards; }
.lg__card--copper { --acc: #fff3ea; }
.lg__card figcaption { left: 50%; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 760px) {
  .lg__card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr; padding: .6rem 1rem 1.4rem; column-gap: 1rem; }
  .lg__lbl, .lg__wire { display: none; } .lg__logo { width: 100%; } .lg__emb { width: 3.2rem; margin: 0; }
  .lgC { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lg__lbl { opacity: .55; animation: none !important; } .lg__wire { transform: none; animation: none !important; }
  .lgA path, .lgA circle, .lgC--e .lg__ring, .lgC__hair { stroke-dashoffset: 0 !important; animation: none !important; } .lgA .lg__dot, .lgC__n { opacity: 1; animation: none !important; }
  .lg__logo .lgB { clip-path: none; animation: none !important; } .lg__emb .lgB { transform: none; opacity: 1; animation: none !important; }
  .lgC span { opacity: 1; transform: none; filter: none; animation: none !important; } .lgC__o i { transform: rotate(38deg); animation: none !important; }
}
/* v31 · colour structure: the three colourways of the mark change slowly (3 s each, soft crossfades) */
.sh__shot.is-on .bc__app { animation: bcApp 9s 3.4s linear infinite; }
.sh__shot.is-on .bc__app--2 { animation-delay: 6.4s; } .sh__shot.is-on .bc__app--3 { animation-delay: 9.4s; }
@keyframes bcApp { 0% { opacity: 0; } 10%, 33% { opacity: 1; } 43%, 100% { opacity: 0; } }
.mod svg text.lgC__n { font: 300 64px var(--serif); letter-spacing: 0; text-transform: none; fill: var(--ink); }   /* over the modules' small SVG labels */
.lgA circle.lg__ring { stroke-width: 1.6; opacity: .45; }
.lgC__o i { top: 54%; height: 1.5em; margin-top: -.75em; transform-origin: 50% 50%; transform: rotate(38deg) scaleY(0); }

/* ==========================================================================
   v31 — Vizitke in ostali tisk: pre-press → plates in register → the finished print (base state = finished)
   ========================================================================== */
.kt { overflow: hidden; border-radius: 4px; }
.kt img { filter: none; }
.kt__dim { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, rgba(8, 22, 38, .55), rgba(4, 10, 18, .8)); opacity: 0; pointer-events: none; }
.kt__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.kt__marks path { fill: none; stroke: #9fd8ff; stroke-width: 1.1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.kt__bleed { fill: none; stroke: rgba(232, 105, 42, .75); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.kt__item { position: absolute; display: grid; place-items: center; }
.kt__ink, .kt__plates { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6%; }
.kt__plates { opacity: 0; }
.kt__plate { position: absolute; inset: 0; display: grid; place-items: center; }
.kt__mk { height: auto; fill: none; stroke-linecap: square; }
.kt__mk--word { width: 72%; stroke: #15171c; stroke-width: 26; mix-blend-mode: multiply; }
.kt__mk--o { width: 42%; stroke-width: 22; }
.kt__mk--light { stroke: rgba(238, 241, 245, .9); mix-blend-mode: normal; }
.kt__mk--cu { stroke: var(--copper); }
.kt__item--cat .kt__ink { align-content: end; padding-bottom: 16%; } .kt__item--cat .kt__mk--o { width: 46%; } .kt__item--cat .kt__mk--word { width: 66%; stroke-width: 30; }
.kt__item--tee .kt__ink, .kt__item--tee .kt__plates { inset: 40% 34% 30%; } .kt__item--tee .kt__mk--o { width: 62%; stroke-width: 26; }
.kt__item--box .kt__mk--o { width: 46%; }
.kt__plate--c .kt__mk { stroke: #00aeef; } .kt__plate--m .kt__mk { stroke: #ec008c; } .kt__plate--y .kt__mk { stroke: #ffe600; }
.kt__item:not(.kt__item--card) .kt__plate .kt__mk { mix-blend-mode: screen; }
.kt__item--card .kt__plate .kt__mk { mix-blend-mode: multiply; }
.kt__plate--c { --dx: -9%; --dy: -12%; } .kt__plate--m { --dx: 8%; --dy: 6%; } .kt__plate--y { --dx: -4%; --dy: 13%; }
.kt__label { position: absolute; display: grid; gap: .15rem; font: 500 clamp(.44rem, .7vw, .6rem)/1.25 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; color: #9fd8ff; white-space: nowrap; opacity: 0; pointer-events: none; }
.kt__label b { font: 600 clamp(.5rem, .8vw, .68rem) var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.kt__bar { position: absolute; right: 2.4%; top: 4%; display: flex; gap: 3px; align-items: center; opacity: 0; }
.kt__bar i { width: clamp(.6rem, 1.1vw, .9rem); aspect-ratio: 1; } .kt__bar .c { background: #00aeef; } .kt__bar .m { background: #ec008c; } .kt__bar .y { background: #ffe600; } .kt__bar .k { background: #111; outline: 1px solid rgba(255, 255, 255, .25); }
.kt__bar svg { width: clamp(.9rem, 1.5vw, 1.2rem); margin-left: .4rem; fill: none; stroke: #9fd8ff; stroke-width: 1.2; }
.kt__ok { position: absolute; left: 2.4%; bottom: 5%; display: flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(8, 12, 18, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 500 clamp(.48rem, .75vw, .62rem) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.kt__ok svg { width: .9rem; fill: none; stroke: #6fe3a8; stroke-width: 2; }
.kt__sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 214, .16) 49%, rgba(255, 255, 255, .06) 53%, transparent 62%); transform: translateX(-130%); }
/* the sequence (7 s): 0.2 pre-press — 1.6 plates slide into register — 3.2 the finished print, a light sweep, the file standard */
.sh__shot.is-on .kt__dim { animation: ktDim 3.9s .15s var(--ease-io) both; }
@keyframes ktDim { 0% { opacity: 0; } 12%, 76% { opacity: 1; } 100% { opacity: 0; } }
.sh__shot.is-on .kt__marks { animation: ktShow 3.7s .3s linear both; }
.sh__shot.is-on .kt__marks path { animation: ktDraw .8s .35s var(--ease-out) both; }
@keyframes ktDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ktShow { 0% { opacity: 0; } 6%, 80% { opacity: 1; } 100% { opacity: 0; } }
.sh__shot.is-on .kt__label { animation: ktShow 3.1s .9s linear both; }
.sh__shot.is-on .kt__label:nth-of-type(n) { animation-delay: .9s; }
.sh__shot.is-on .kt__bar { animation: ktShow 3.3s .5s linear both; }
.sh__shot.is-on .kt__ink { animation: ktInk 3.4s 0s linear both; }
@keyframes ktInk { 0%, 78% { opacity: 0; } 100% { opacity: 1; } }
.sh__shot.is-on .kt__plates { animation: ktPlates 3.4s 0s linear both; }
@keyframes ktPlates { 0%, 44% { opacity: 0; } 50%, 80% { opacity: 1; } 100% { opacity: 0; } }
.sh__shot.is-on .kt__plate { animation: ktReg 1.5s 1.6s cubic-bezier(.16, .84, .3, 1) both; }
@keyframes ktReg { from { transform: translate(var(--dx), var(--dy)); } to { transform: none; } }
.sh__shot.is-on .kt__sweep { animation: ktSweep 1.8s 3.3s var(--ease-io) both; }
@keyframes ktSweep { to { transform: translateX(130%); } }
.sh__shot.is-on .kt__ok { animation: ktOk .8s 3.9s var(--ease-out) both; }
@keyframes ktOk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .kt__label { display: none; } .kt__ok { font-size: .46rem; padding: .3rem .55rem; } }
@media (prefers-reduced-motion: reduce) { .kt__dim, .kt__marks, .kt__label, .kt__bar, .kt__plates, .kt__sweep { display: none; } .kt__ink, .kt__ok { animation: none !important; opacity: 1; } }

/* ==========================================================================
   v31 — Splet in objave: one language travels across three surfaces (entrance in depth, a living link, a lit floor)
   ========================================================================== */
.sh__digital--neo { perspective: 1400px; perspective-origin: 50% 40%; }
.sh__digital--neo::before { display: none; }
.neo__floor { position: absolute; left: -12%; right: -12%; bottom: -14%; height: 62%; pointer-events: none; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; opacity: .5;
  background: linear-gradient(rgba(79, 210, 255, .16) 1px, transparent 1px) 0 0 / 100% 34px, linear-gradient(90deg, rgba(232, 105, 42, .14) 1px, transparent 1px) 0 0 / 46px 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 90%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 90%); }
.sh__shot.is-on .neo__floor { animation: neoFloorIn 1.4s var(--ease-out) both, neoFloor 6s 1.4s linear infinite; }
@keyframes neoFloorIn { from { opacity: 0; } to { opacity: .5; } }
@keyframes neoFloor { to { background-position: 0 34px, 0 0; } }
.neo__link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.neo__path { fill: none; stroke: url(#neo-g); stroke-width: 1.3px; vector-effect: non-scaling-stroke; opacity: .55; stroke-dasharray: 100; stroke-dashoffset: 100; }
.neo__pulse { fill: none; stroke: #fff; stroke-width: 2.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 105; opacity: 0; filter: drop-shadow(0 0 4px #4fd2ff); }
.neo__node { fill: #0b1018; stroke: #fff; stroke-width: 1.4px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sh__shot.is-on .neo__path { animation: ktDrawL 1.6s 2.3s var(--ease-io) forwards; }
@keyframes ktDrawL { to { stroke-dashoffset: 0; } }
.sh__shot.is-on .neo__pulse { animation: neoPulse 2.6s 3.6s linear infinite; }
@keyframes neoPulse { 0% { stroke-dashoffset: 105; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } }
.sh__shot.is-on .neo__node { animation: lgDot .5s 2.3s var(--ease-out) forwards; }
.sh__shot.is-on .neo__node:nth-of-type(2) { animation-delay: 3s; } .sh__shot.is-on .neo__node:nth-of-type(3) { animation-delay: 3.6s; }
/* the three surfaces arrive in depth, then float gently (translate is separate from the entrance transform) */
.sh__shot.is-on .sh__digital--neo .bd__browser { animation: neoBrowser 1.2s .15s cubic-bezier(.16, .84, .3, 1) both, neoFloat 8s 2s ease-in-out infinite; }
.sh__shot.is-on .sh__digital--neo .bd__phone { animation: neoPhone 1.2s .9s cubic-bezier(.16, .84, .3, 1) both, neoFloat 7s 2.4s ease-in-out infinite reverse; }
.sh__shot.is-on .sh__digital--neo .bd__post { animation: neoPost 1.2s 1.4s cubic-bezier(.16, .84, .3, 1) both, neoFloat 9s 2.8s ease-in-out infinite; }
@keyframes neoBrowser { from { opacity: 0; transform: rotateY(18deg) rotateX(4deg) translate3d(-5%, 2%, -120px); } to { opacity: 1; transform: none; } }
@keyframes neoPhone { from { opacity: 0; transform: rotateX(32deg) translate3d(0, 34%, -80px); } to { opacity: 1; transform: none; } }
@keyframes neoPost { from { opacity: 0; transform: rotateY(-62deg) translate3d(12%, 0, -60px); } to { opacity: 1; transform: none; } }
@keyframes neoFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* what is on them builds up */
.sh__digital--neo .bd__site > * { animation: none; }
.sh__shot.is-on .sh__digital--neo .bd__navmark { stroke-dasharray: 700; animation: neoMark 1.4s 1s var(--ease-out) both; }
@keyframes neoMark { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
.sh__shot.is-on .sh__digital--neo .bd__phone .bd__navmark { animation-delay: 1.8s; } .sh__shot.is-on .sh__digital--neo .bd__post .bd__navmark { animation-delay: 2.4s; }
.sh__shot.is-on .sh__digital--neo .bd__h { animation: neoType 1s 1.3s steps(24) both; }
@keyframes neoType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sh__shot.is-on .sh__digital--neo .bd__phone .bd__h { animation-delay: 2s; } .sh__shot.is-on .sh__digital--neo .bd__post .bd__h { animation: neoRise .9s 2.2s var(--ease-out) both; }
@keyframes neoRise { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.sh__shot.is-on .sh__digital--neo .bd__btn { animation: neoBtn .7s 1.9s cubic-bezier(.16,1,.3,1) both, neoGlow 3.2s 3s ease-in-out infinite; }
.sh__shot.is-on .sh__digital--neo .bd__phone .bd__btn { animation-delay: 2.5s, 3.4s; }
@keyframes neoBtn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes neoGlow { 0%, 100% { box-shadow: 0 0 14px -2px rgba(232, 105, 42, .45); } 50% { box-shadow: 0 0 26px 2px rgba(232, 105, 42, .75); } }
.sh__digital--neo .bd__cards { perspective: 600px; }
.sh__shot.is-on .sh__digital--neo .bd__tile { animation: neoTile .8s cubic-bezier(.16, .84, .3, 1) both; transform-origin: 50% 0; }
.sh__shot.is-on .sh__digital--neo .bd__tile:nth-child(1) { animation-delay: 2.1s; } .sh__shot.is-on .sh__digital--neo .bd__tile:nth-child(2) { animation-delay: 2.25s; } .sh__shot.is-on .sh__digital--neo .bd__tile:nth-child(3) { animation-delay: 2.4s; }
@keyframes neoTile { from { opacity: 0; transform: rotateX(-80deg); } to { opacity: 1; transform: none; } }
.sh__shot.is-on .sh__digital--neo .bd__post .bd__cu { stroke-dasharray: 1400; animation: neoO 1.6s 1.9s var(--ease-out) both; }
@keyframes neoO { from { stroke-dashoffset: 1400; opacity: .3; } to { stroke-dashoffset: 0; opacity: .9; } }
.sh__digital--neo .bd__phone::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none; background: linear-gradient(transparent, rgba(79, 210, 255, .12), transparent); transform: translateY(-100%); }
.sh__shot.is-on .sh__digital--neo .bd__phone::after { animation: neoScan 1.6s 1.7s var(--ease-io) both; }
@keyframes neoScan { to { transform: translateY(340%); } }
.sh__shot.is-on .sh__digital--neo .bd__browser::after { animation: neoSweep 2.4s 3.2s var(--ease-io) both; }
@media (max-width: 760px) { .neo__link { display: none; } .neo__floor { height: 40%; } }
@media (prefers-reduced-motion: reduce) {
  .neo__floor, .sh__digital--neo .bd__browser, .sh__digital--neo .bd__phone, .sh__digital--neo .bd__post, .sh__digital--neo .bd__navmark, .sh__digital--neo .bd__h, .sh__digital--neo .bd__btn, .sh__digital--neo .bd__tile, .sh__digital--neo .bd__cu { animation: none !important; }
  .neo__link { display: none; }
}
.neo__floor { background: linear-gradient(rgba(79, 210, 255, .3) 1px, transparent 1px) 0 0 / 100% 34px, linear-gradient(90deg, rgba(232, 105, 42, .26) 1px, transparent 1px) 0 0 / 46px 100%; }
@keyframes neoFloorIn { from { opacity: 0; } to { opacity: .55; } }
.neo__floor { left: 0; right: 0; }   /* the floor stays inside the stage (a phone must not scroll sideways) */

/* ==========================================================================
   v32 — the WMS story: a drawn animation from the warehouse to the customer and the office, with the phone app,
   the office dashboard and a phase stepper (Zaloga · Prenos · Izdaja · Servis · Pregled)
   ========================================================================== */
.ws { position: relative; --c: #58f0c8; }
.ws .demo-tag { position: absolute; right: .9rem; top: .7rem; z-index: 5; }
/* v49: over a 3D film the tag sits on a quiet glass plate (it read into the shop's sign and over the café's bright window) */
.ws.has-film .demo-tag { padding: .34em .75em; border-radius: 99px; background: rgba(8, 12, 18, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #c3ccd8; }
@media (max-width: 600px) { .ws.has-film .demo-tag { font-size: .44rem; letter-spacing: .12em; padding: .26em .6em; top: .45rem; right: .45rem; } }   /* v49e: on a phone it covered the split screen's first window */
.ws__stage { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: #070b11; }
.ws__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* v46 · the 3D film under the story's real screens (the drawing stays as the fallback if the film cannot play) */
.ws__film { position: absolute; inset: 0; width: 100%; height: 100%; display: none; object-fit: cover; background: #070b11; pointer-events: none; }
.ws.has-film .ws__film { display: block; } .ws.has-film .ws__svg { visibility: hidden; }
.ws.has-film .ws__stage::before { opacity: .55; }
/* v46 · a film under its drawing's overlay (AI: the assistant's hologram over the filmed office); what the film shows
   (the drawn room, floor and people) is marked .ws-fb and drops out */
.ws.has-film.film-over .ws__svg { visibility: visible; z-index: 1; } .ws.has-film.film-over .ws-fb { display: none; }
/* v44: one grade over the drawn scenes — calmer colour, a touch more contrast (the screens and photos stay true) */
.ws--wms .ws__svg, .ws--b2b .ws__svg, .ws--ai .ws__svg, .ws--web .ws__svg, .ws--shop .ws__svg { filter: saturate(.8) contrast(1.05); }
.ws .ws-scene#ws-sB, .ws .ws-scene#ws-sD { opacity: 0; }
.ws #ws-pb2, .ws #ws-stackB { opacity: 0; }
.ws .ws-glow, .ws .ws-tool { opacity: 0; }
.ws .ws-txt { font: 600 17px var(--sans); letter-spacing: .08em; text-transform: none; fill: #2a3646; stroke: none; }
.ws .ws-txt--van2 { font: 500 11px var(--sans); letter-spacing: .14em; fill: #5a6676; }
.ws .ws-txt--sign { font: 600 26px var(--sans); letter-spacing: .5em; fill: #ffdcae; }
.ws .ws-cone { animation: wsCone 7s ease-in-out infinite; }
@keyframes wsCone { 50% { opacity: .78; } }
.ws .ws-ripple { animation: wsRipple 6s ease-in-out infinite alternate; } .ws .ws-ripple:nth-child(3n) { animation-duration: 8s; } .ws .ws-ripple:nth-child(2n) { animation-direction: alternate-reverse; }
@keyframes wsRipple { to { transform: translateX(26px); } }
.ws .ws-blink { animation: wsBlink 3.4s steps(1) infinite; } @keyframes wsBlink { 50% { opacity: .1; } }
.ws .ws-steam { animation: wsSteam 3s ease-in-out infinite; } @keyframes wsSteam { 50% { transform: translate(3px, -6px); opacity: .2; } }
.ws.is-paused .ws__svg *, .ws.is-paused .ws__live i, .ws.is-paused .ws__scanline { animation-play-state: paused !important; }
/* the phone app */
.ws__phone { --fx: -16%; --fs: 1.06; position: absolute; right: 2.2%; top: 5%; height: 90%; aspect-ratio: 9 / 19.5; z-index: 3; display: flex; flex-direction: column; gap: .5em; padding: .9em .75em;
  font-size: clamp(7px, .82vw, 11.5px); color: #e9eef4; border-radius: 1.9em; border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(170deg, rgba(20, 30, 44, .94), rgba(8, 13, 20, .96)); box-shadow: 0 0 0 4px #0a0f16, 0 0 0 5px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 50px -18px rgba(88, 240, 200, .35);
  opacity: 0; }
.ws__ph-status { display: flex; justify-content: space-between; font: 600 .82em var(--sans); color: #aab6c4; padding: 0 .5em; }
.ws__ph-ico { display: flex; gap: 2px; align-items: flex-end; } .ws__ph-ico i { width: 3px; background: #aab6c4; border-radius: 1px; } .ws__ph-ico i:nth-child(1) { height: 4px; } .ws__ph-ico i:nth-child(2) { height: 6px; } .ws__ph-ico i:nth-child(3) { height: 8px; }
.ws__ph-app { display: flex; justify-content: space-between; align-items: center; padding: .2em .3em; }
.ws__ph-app b { font: 700 1.25em var(--sans); letter-spacing: .14em; color: var(--c); }
.ws__role { padding: .25em .7em; border-radius: 999px; background: rgba(88, 240, 200, .12); border: 1px solid rgba(88, 240, 200, .35); font: 600 .78em var(--sans); letter-spacing: .08em; color: #c8fff0; }
.ws__stock { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; }
.ws__stock div { display: grid; gap: .1em; padding: .45em .35em; border-radius: .7em; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); text-align: center; }
.ws__stock small { font: 500 .7em var(--sans); letter-spacing: .06em; color: #93a1b2; white-space: nowrap; }
.ws__stock b { font: 700 1.55em/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; }
.ws__stock b.is-tick { animation: wsTick .9s var(--ease-out); }
@keyframes wsTick { 0% { color: var(--c); transform: scale(1.35); text-shadow: 0 0 12px var(--c); } 100% { color: #fff; transform: none; } }
.ws__scr { display: none; flex-direction: column; gap: .55em; flex: 1; min-height: 0; }
.ws__phone[data-scr="scan"] .ws__scr--scan, .ws__phone[data-scr="move"] .ws__scr--move, .ws__phone[data-scr="accept"] .ws__scr--accept, .ws__phone[data-scr="issue"] .ws__scr--issue, .ws__phone[data-scr="service"] .ws__scr--service { display: flex; animation: wsScr .45s var(--ease-out); }
@keyframes wsScr { from { opacity: 0; transform: translateX(10px); } }
.ws__h { margin: .2em 0 0; font: 600 1.15em var(--sans); color: #fff; }
.ws__sub { margin: -.2em 0 0; font-size: .85em; color: #93a1b2; } .ws__time b { color: #fff; }
.ws__finder { position: relative; display: grid; place-items: center; height: 6.5em; border-radius: .8em; background: rgba(0, 0, 0, .35); overflow: hidden; }
.ws__finder::before, .ws__finder::after, .ws__finder > i::before, .ws__finder > i::after { content: ""; position: absolute; width: 1.2em; height: 1.2em; border: 2px solid var(--c); }
.ws__finder::before { left: .6em; top: .6em; border-right: 0; border-bottom: 0; } .ws__finder::after { right: .6em; bottom: .6em; border-left: 0; border-top: 0; }
.ws__finder > i::before { right: .6em; top: .6em; border-left: 0; border-bottom: 0; } .ws__finder > i::after { left: .6em; bottom: .6em; border-right: 0; border-top: 0; }
.ws__finder svg { width: 70%; fill: #e9eef4; }
.ws__scanline { position: absolute; left: 10%; right: 10%; top: 20%; height: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); animation: wsScan 1.6s ease-in-out infinite alternate; }
@keyframes wsScan { to { top: 78%; } }
.ws__card { display: grid; gap: .2em; padding: .65em .75em; border-radius: .8em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-size: .88em; color: #b9c4d1; }
.ws__card b { font-size: 1.25em; color: #fff; } .ws__card em { font-style: normal; color: var(--c); font-weight: 700; }
.ws__card--res { opacity: 0; }
.ws__form { display: grid; grid-template-columns: auto 1fr; gap: .35em .7em; margin: 0; padding: .65em .75em; border-radius: .8em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-size: .88em; }
.ws__form dt { color: #8d9aab; } .ws__form dd { margin: 0; color: #fff; font-weight: 600; text-align: right; }
.ws__btn { position: relative; overflow: hidden; display: grid; place-items: center; margin-top: auto; padding: .75em; border-radius: .8em; background: var(--c); color: #04130f; font: 700 .95em var(--sans); letter-spacing: .04em; }
.ws__tap { position: absolute; left: 50%; top: 50%; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; border-radius: 50%; background: #fff; opacity: 0; }
.ws__ok { display: none; margin: 0; padding: .6em .7em; border-radius: .8em; background: rgba(88, 240, 200, .14); border: 1px solid rgba(88, 240, 200, .4); color: #c8fff0; font: 600 .88em var(--sans); }
.ws__ok::before { content: "\2713  "; color: var(--c); }
.ws__phone[data-ok="move"] .ws__scr--move .ws__ok, .ws__phone[data-ok="accept"] .ws__scr--accept .ws__ok, .ws__phone[data-ok="issue"] .ws__scr--issue .ws__ok, .ws__phone[data-ok="service"] .ws__scr--service .ws__ok { display: block; animation: wsScr .4s var(--ease-out); }
.ws__phone[data-ok="move"] .ws__scr--move .ws__btn, .ws__phone[data-ok="accept"] .ws__scr--accept .ws__btn { display: none; }
.ws__pad { display: grid; gap: .2em; padding: .5em .6em .2em; border-radius: .8em; background: #f2f4f7; }
.ws__pad small { font: 600 .72em var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6a7685; }
.ws__sig { width: 100%; height: auto; } .ws__sig path { fill: none; stroke: #13305e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ws__check { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; font-size: .9em; }
.ws__check li { position: relative; display: flex; align-items: center; gap: .55em; padding: .45em .6em; border-radius: .7em; background: rgba(255, 255, 255, .045); }
.ws__check li::before { content: ""; position: absolute; left: .6em; top: 50%; width: 1.2em; height: 1.2em; margin-top: -.6em; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); box-sizing: border-box; }
.ws__tick { position: relative; z-index: 1; flex: none; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--c); opacity: 0; box-shadow: 0 0 10px rgba(88, 240, 200, .6); }
.ws__tick::after { content: ""; position: absolute; left: .4em; top: .2em; width: .28em; height: .56em; border: solid #04130f; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* the office dashboard on the monitor */
.ws__dash { position: absolute; left: 27.9%; top: 34%; width: 39.5%; height: 31.6%; z-index: 2; display: grid; grid-template-rows: auto auto 1fr; gap: .55em; padding: .8em 1em; box-sizing: border-box;
  font-size: clamp(6px, .68vw, 10px); color: #e9eef4; background: linear-gradient(160deg, #0d1828, #091220); opacity: 0; }
.ws__dash-head { display: flex; justify-content: space-between; align-items: center; } .ws__dash-head b { font: 600 1.3em var(--sans); }
.ws__live { display: flex; align-items: center; gap: .45em; font: 700 .9em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6fe3a8; }
.ws__live i { width: .7em; height: .7em; border-radius: 50%; background: #6fe3a8; box-shadow: 0 0 0 0 rgba(111, 227, 168, .7); animation: wsLive 1.8s ease-out infinite; }
@keyframes wsLive { 70% { box-shadow: 0 0 0 .6em rgba(111, 227, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 227, 168, 0); } }
.ws__kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; opacity: 0; }
.ws__kpi div { display: grid; gap: .15em; padding: .55em .65em; border-radius: .6em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.ws__kpi small { font-size: .78em; color: #93a1b2; } .ws__kpi b { font: 700 1.7em/1 var(--sans); color: #fff; } .ws__kpi em { font-style: normal; font-size: .5em; font-weight: 600; color: var(--c); }
.ws__log { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: .3em; }
.ws__log li { display: grid; grid-template-columns: 4em 1fr auto; gap: .8em; align-items: center; padding: .4em .6em; border-radius: .5em; background: rgba(255, 255, 255, .035); border-left: 2px solid var(--c); opacity: 0; }
.ws__log time { font: 600 1em ui-monospace, Consolas, monospace; color: var(--c); } .ws__log span { font-size: 1.05em; } .ws__log em { font-style: normal; font-size: .85em; color: #93a1b2; }
/* the phase stepper */
.ws__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.ws__steps button { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem .7rem; min-height: 3.4rem; padding: .7rem .9rem 1rem; border-radius: 12px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)); color: var(--text-2); transition: border-color .35s, background .35s, color .35s, transform .35s var(--ease-out); }
.ws__steps button:hover { border-color: rgba(88, 240, 200, .35); color: var(--text); transform: translateY(-2px); }
.ws__num { font: 500 .62rem ui-monospace, Consolas, monospace; letter-spacing: .1em; color: var(--text-3); }
.ws__lbl { font: 600 .74rem var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ws__bar { position: absolute; left: .9rem; right: .9rem; bottom: .55rem; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ws__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--c), #a8ffe9); transform-origin: left; transform: scaleX(var(--p, 0)); }
.ws__steps button.is-past .ws__bar i { transform: scaleX(1); opacity: .45; }
.ws__steps button[aria-pressed="true"] { border-color: rgba(88, 240, 200, .55); background: linear-gradient(160deg, rgba(88, 240, 200, .14), rgba(88, 240, 200, .03)); color: #fff; box-shadow: 0 10px 30px -14px rgba(88, 240, 200, .55), inset 0 1px 0 rgba(255, 255, 255, .08); }
.ws__steps button[aria-pressed="true"] .ws__num { color: var(--c); }
.ws__steps button:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.ws__cap { margin-top: .9rem; }
@media (max-width: 760px) {
  .ws__stage { aspect-ratio: auto; display: grid; } .ws__svg { position: relative; aspect-ratio: 16 / 9; height: auto; }
  .ws__film { position: relative; aspect-ratio: 16 / 9; height: auto; } .ws.has-film .ws__svg { display: none; }
  .ws.has-film.film-over .ws__svg { display: block; grid-area: 1 / 1; } .ws.has-film.film-over .ws__film { grid-area: 1 / 1; }
  .ws__phone { --fx: 0%; --fs: 1; position: relative; right: auto; top: auto; height: auto; aspect-ratio: auto; margin: .7rem; font-size: 12px; border-radius: 1.2em; min-height: 19em; }
  .ws__dash { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 0 .7rem .7rem; font-size: 11px; border-radius: .8em; display: none; }
  .ws[data-shot="pregled"] .ws__dash { display: grid; } .ws[data-shot="pregled"] .ws__phone { display: none; }
  .ws__kpi { grid-template-columns: repeat(2, 1fr); }
  .ws__steps { gap: .3rem; } .ws__steps button { grid-template-columns: 1fr; padding: .55rem .3rem 1rem; min-height: 44px; text-align: center; }
  .ws__num { display: none; } .ws__lbl { font-size: .6rem; letter-spacing: .04em; } .ws__bar { left: .4rem; right: .4rem; }
}
.ws .ws-ring { opacity: 0; transform-box: fill-box; transform-origin: center; } .ws .ws-ring circle { fill: none; stroke: #58f0c8; stroke-width: 1.2; opacity: .75; } .ws .ws-ring circle:nth-child(2) { opacity: .4; } .ws .ws-ring circle:nth-child(3) { opacity: .16; }
.ws .ws-headbeam { opacity: 0; }

/* ==========================================================================
   v32 — Naši projekti: client logos, a LIVE mark on live snapshots, new-age buttons, MCC admin and WMS as small apps
   ========================================================================== */
.refs .ref__title { line-height: 0; }
.ref__logo { display: block; width: auto; height: clamp(2.1rem, 3.2vw, 2.8rem); max-width: 70%; object-fit: contain; object-position: left center; }
.ref__logo--mcc { height: clamp(3rem, 4.6vw, 4rem); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.live { display: inline-flex; align-items: center; gap: .4rem; margin-right: .6rem; padding: .18rem .5rem; border-radius: 999px; background: rgba(66, 214, 120, .1); border: 1px solid rgba(66, 214, 120, .35);
  font: 700 .56rem/1 var(--sans); letter-spacing: .2em; color: #5ee08e; vertical-align: .08em; }
.live i { width: .45rem; height: .45rem; border-radius: 50%; background: #3ee07a; box-shadow: 0 0 0 0 rgba(62, 224, 122, .7); animation: liveDot 1.6s ease-out infinite; }
@keyframes liveDot { 70% { box-shadow: 0 0 0 .45rem rgba(62, 224, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 224, 122, 0); } }
.refs .ref__cap:empty { display: none; }
/* the new-age button: a pill with a travelling light on its rim, a glass body and an arrow chip that swaps on hover */
@property --neo-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-neo { --bc: #4fd2ff; position: relative; display: inline-flex; align-items: center; gap: .95rem; padding: .42rem .42rem .42rem 1.35rem; border-radius: 999px; overflow: hidden; isolation: isolate;
  color: #fff; font: 600 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(20, 30, 44, .96), rgba(9, 14, 22, .96)) padding-box,
              conic-gradient(from var(--neo-a), transparent 0 52%, color-mix(in srgb, var(--bc) 70%, transparent) 66%, #fff 72%, var(--bc) 78%, transparent 92%) border-box,
              linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 34px -16px color-mix(in srgb, var(--bc) 70%, transparent);
  animation: neoRim 3.6s linear infinite; transition: box-shadow .4s, transform .4s var(--ease-out); }
@keyframes neoRim { to { --neo-a: 360deg; } }
.btn-neo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(80% 140% at 0% 50%, color-mix(in srgb, var(--bc) 22%, transparent), transparent 60%); opacity: .7; transition: opacity .4s; }
.btn-neo::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); transform: skewX(-18deg); transition: left .7s var(--ease-out); }
.btn-neo:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 44px -14px color-mix(in srgb, var(--bc) 90%, transparent), 0 0 0 4px color-mix(in srgb, var(--bc) 12%, transparent); }
.btn-neo:hover::before { opacity: 1; } .btn-neo:hover::after { left: 110%; }
.btn-neo__go { position: relative; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #fff, var(--bc) 55%); color: #04121a; box-shadow: 0 0 18px -2px var(--bc); }
.btn-neo__go svg { position: absolute; width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
.btn-neo__go svg:last-child { transform: translate(-150%, 150%); }
.btn-neo:hover .btn-neo__go svg:first-child { transform: translate(150%, -150%); } .btn-neo:hover .btn-neo__go svg:last-child { transform: none; }
.btn-neo:focus-visible { outline: 2px solid var(--bc); outline-offset: 4px; }
.btn-neo--mcc { --bc: #58f0c8; }
@media (prefers-reduced-motion: reduce) { .btn-neo { animation: none; } }
.ref__talk { display: grid; gap: .25rem; text-align: left; background: none; border: 0; padding: .2rem 0; cursor: pointer; color: var(--text-2); font: 400 .82rem/1.3 var(--serif); }
.ref__talk b { font: 600 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); background: linear-gradient(var(--c), var(--c)) 0 100% / 0 1px no-repeat; padding-bottom: .2rem; transition: background-size .45s var(--ease-out); justify-self: start; }
.ref__talk b i { font-style: normal; display: inline-block; transition: transform .35s var(--ease-out); }
.ref__talk:hover b { background-size: 100% 1px; } .ref__talk:hover b i { transform: translateX(4px); }
.ref__wms { font: 600 .62rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c); text-decoration: none; }
.ref__wms i { font-style: normal; display: inline-block; transition: transform .35s var(--ease-out); } .ref__wms:hover i { transform: translateX(4px); }
.refs .ref__acts { gap: 1rem 1.4rem; }
/* MCC — the admin and the WMS as small, living apps */
.ref__shot--app { width: 100%; height: 100%; }
.ref__stage[data-view="admin"] [data-shot="admin"], .ref__stage[data-view="wms"] [data-shot="wms"] { display: block; animation: shotIn .5s var(--ease-out); }
.mapp { --c: #58f0c8; display: flex; flex-direction: column; width: 100%; aspect-ratio: 16 / 11; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); font-size: clamp(8px, .75vw, 10.5px); color: #e9eef4;
  background: linear-gradient(160deg, #0f1a26, #080e16); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85), 0 0 40px -20px rgba(88, 240, 200, .35); }
.mapp__bar { display: flex; align-items: center; gap: .7em; padding: .55em .8em; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.mapp__dots { display: flex; gap: 3px; } .mapp__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.mapp__bar b { font: 600 1em var(--sans); letter-spacing: .04em; } .mapp__tag { margin-left: auto; font: 500 .78em var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8796a8; }
.mapp__body { flex: 1; display: grid; grid-template-columns: 2.2em 1fr; min-height: 0; }
.mapp__nav { display: grid; align-content: start; gap: .7em; padding: .8em .55em; border-right: 1px solid rgba(255, 255, 255, .06); }
.mapp__nav i { height: 1.1em; border-radius: .3em; background: rgba(255, 255, 255, .1); } .mapp__nav i.is-on { background: var(--c); box-shadow: 0 0 10px var(--c); }
.mapp__main { display: grid; grid-template-rows: auto auto 1fr; gap: .6em; padding: .7em .8em; min-height: 0; }
.mapp__kpis, .mapp__locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.mapp__kpis div, .mloc { position: relative; display: grid; gap: .15em; padding: .5em .6em; border-radius: .6em; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); }
.mapp__kpis small, .mloc small { font-size: .82em; color: #93a1b2; white-space: nowrap; } .mapp__kpis b, .mloc b { font: 700 1.6em/1 var(--sans); font-variant-numeric: tabular-nums; }
.mapp__flip { display: grid; } .mapp__flip span { grid-area: 1 / 1; } .mapp__flip span + span { opacity: 0; color: var(--c); }
.mapp__chart { width: 100%; height: 3.2em; } .mapp__chart rect { fill: color-mix(in srgb, var(--c) 55%, #1b2a38); transform-box: fill-box; transform-origin: bottom; }
.mapp__rows { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: .35em; }
.mapp__rows li { display: grid; grid-template-columns: 4em 1fr auto; gap: .6em; align-items: center; padding: .42em .6em; border-radius: .5em; background: rgba(255, 255, 255, .035); }
.mapp__rows li > span:first-child { font: 600 1em ui-monospace, Consolas, monospace; color: #b8c4d2; }
.st { display: grid; padding: .2em .6em; border-radius: 999px; font: 600 .85em var(--sans); font-style: normal; } .st span { grid-area: 1 / 1; }
.st--prep { color: #ffcf8f; } .st--done { color: #6fe3a8; } .st--wait { color: #c7b4ff; }
.st.st--done { background: rgba(111, 227, 168, .12); } .st.st--wait { background: rgba(199, 180, 255, .12); } .st--flip { background: rgba(255, 207, 143, .12); }
.st--flip .st--done { opacity: 0; }
.mapp__locs { position: relative; padding: .7em .8em .3em; }
.mloc__bar { height: .35em; border-radius: .2em; background: rgba(255, 255, 255, .08); overflow: hidden; } .mloc__bar i { display: block; height: 100%; width: calc(var(--a) * 100%); background: var(--c); }
.mloc--van { border-color: rgba(88, 240, 200, .3); }
.mloc__fly { position: absolute; left: 22%; top: 52%; display: flex; gap: 2px; opacity: 0; } .mloc__fly i { width: .8em; height: .65em; border-radius: 2px; background: #b08a60; }
.mapp__log { list-style: none; margin: 0; padding: .4em .8em .8em; display: grid; gap: .3em; }
.mapp__log li { display: grid; grid-template-columns: 3.6em 1fr; gap: .6em; padding: .4em .6em; border-radius: .5em; background: rgba(255, 255, 255, .035); border-left: 2px solid var(--c); font-size: .95em; }
.mapp__log time { font: 600 1em ui-monospace, Consolas, monospace; color: var(--c); }
/* they come alive when shown */
.ref__stage[data-view="admin"] .mapp__kpis div, .ref__stage[data-view="wms"] .mloc { animation: mIn .5s var(--ease-out) both; }
.ref__stage[data-view="admin"] .mapp__kpis div:nth-child(2), .ref__stage[data-view="wms"] .mloc:nth-child(2) { animation-delay: .08s; } .ref__stage[data-view="admin"] .mapp__kpis div:nth-child(3), .ref__stage[data-view="wms"] .mloc:nth-child(3) { animation-delay: .16s; }
@keyframes mIn { from { opacity: 0; transform: translateY(6px); } }
.ref__stage[data-view="admin"] .mapp__chart rect { animation: mBar .7s calc(.25s + var(--k) * .06s) var(--ease-out) both; } @keyframes mBar { from { transform: scaleY(0); } }
.ref__stage[data-view="admin"] .mapp__rows li, .ref__stage[data-view="wms"] .mapp__log li { animation: mRow .5s var(--ease-out) both; }
.ref__stage[data-view="admin"] .mapp__rows li:nth-child(1), .ref__stage[data-view="wms"] .mapp__log li:nth-child(1) { animation-delay: .5s; } .ref__stage[data-view="admin"] .mapp__rows li:nth-child(2), .ref__stage[data-view="wms"] .mapp__log li:nth-child(2) { animation-delay: .62s; } .ref__stage[data-view="admin"] .mapp__rows li:nth-child(3), .ref__stage[data-view="wms"] .mapp__log li:nth-child(3) { animation-delay: .74s; }
@keyframes mRow { from { opacity: 0; transform: translateX(-8px); } }
.ref__stage[data-view="admin"] .st--flip .st--prep, .ref__stage[data-view="admin"] .mapp__kpis .mapp__flip span:first-child { animation: mOut .4s 1.8s forwards; }
.ref__stage[data-view="admin"] .st--flip .st--done, .ref__stage[data-view="admin"] .mapp__kpis .mapp__flip span + span { animation: mSwap .5s 2s forwards; }
.ref__stage[data-view="admin"] .st--flip { animation: mPill .5s 2s forwards; }
@keyframes mOut { to { opacity: 0; transform: translateY(-4px); } } @keyframes mSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes mPill { to { background: rgba(111, 227, 168, .12); } }
.ref__stage[data-view="wms"] .mloc__fly { animation: mFly 1.3s 1s cubic-bezier(.45, 0, .25, 1) both; } @keyframes mFly { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; transform: translate(9em, -1.4em); } 100% { opacity: 0; transform: translate(9.6em, 0); } }
.ref__stage[data-view="wms"] .mloc .mapp__flip span:first-child { animation: mOut .3s 2.1s forwards; } .ref__stage[data-view="wms"] .mloc .mapp__flip span + span { animation: mSwap .4s 2.2s forwards; }
.ref__stage[data-view="wms"] .mloc .mapp__flip--late span:first-child { animation-delay: 2.9s; } .ref__stage[data-view="wms"] .mloc .mapp__flip--late span + span { animation-delay: 3s; }
.ref__stage[data-view="wms"] .mloc__bar i { animation: mFill .6s 2.2s var(--ease-out) forwards; } @keyframes mFill { to { width: calc(var(--b) * 100%); } }
@media (prefers-reduced-motion: reduce) { .mapp *, .mapp { animation: none !important; } .mapp__flip span:first-child, .st--flip .st--prep { opacity: 0; } .mapp__flip span + span, .st--flip .st--done { opacity: 1; } }
.ref[data-ref="mcc"] .seg { max-width: 100%; } .ref[data-ref="mcc"] .seg button { padding-inline: clamp(.45rem, .8vw, .8rem); letter-spacing: .1em; }
@media (max-width: 1300px) and (min-width: 821px) { .ref[data-ref="mcc"] .seg { flex-wrap: wrap; } }
/* v32b · the button ends in a sleek arrow behind a fine glowing divider (no ball); a larger WMS link; MCC's contact line as VG's */
.btn-neo { gap: 0; padding: 0; }
.btn-neo > span { padding: .95rem 1.15rem .95rem 1.35rem; }
.btn-neo__go { width: 2.9rem; height: auto; align-self: stretch; border-radius: 0; background: none; box-shadow: none; color: var(--bc); }
.btn-neo__go::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(transparent, color-mix(in srgb, var(--bc) 80%, transparent), transparent); box-shadow: 0 0 8px var(--bc); }
.btn-neo__go svg { width: .95rem; height: .95rem; stroke-width: 1.8; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--bc) 80%, transparent)); }
.btn-neo:hover .btn-neo__go { background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 14%, transparent), transparent); }
.ref__wms { font-size: .76rem; letter-spacing: .14em; }
.ref__talk:not(:has(span)) { align-self: center; }
/* v32c · the open buttons lose the pill: a cut-corner glass plate whose 1px rim (drawn as its own layer, so it follows the
   chamfers) still carries the travelling light; the glow is a drop-shadow, so it hugs the cut shape; snapshot captions keep only LIVE */
.btn-neo { --cut: .8rem; border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; animation: none;
  filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--bc) 30%, transparent)); transition: filter .4s, transform .4s var(--ease-out); }
.btn-neo:hover { box-shadow: none; filter: drop-shadow(0 16px 26px color-mix(in srgb, var(--bc) 50%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--bc) 35%, transparent)); }
.btn-neo::before, .btn-neo:hover::before { inset: 0; border-radius: 0; opacity: 1; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: conic-gradient(from var(--neo-a), transparent 0 52%, color-mix(in srgb, var(--bc) 70%, transparent) 66%, #fff 72%, var(--bc) 78%, transparent 92%),
              linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
  animation: neoRim 3.6s linear infinite; }
.btn-neo::after, .btn-neo:hover::after { inset: 1px; width: auto; transform: none; --ci: calc(var(--cut) - .59px);
  clip-path: polygon(var(--ci) 0, 100% 0, 100% calc(100% - var(--ci)), calc(100% - var(--ci)) 100%, 0 100%, 0 var(--ci));
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .15) 50%, transparent 62%) 110% 0 / 260% 100% no-repeat,
              radial-gradient(80% 140% at 0% 50%, color-mix(in srgb, var(--bc) 20%, transparent), transparent 60%),
              linear-gradient(180deg, rgba(20, 30, 44, .97), rgba(9, 14, 22, .97));
  transition: background-position .8s var(--ease-out); }
.btn-neo:hover::after { background-position: -10% 0, 0 0, 0 0; }
.btn-neo > span::after { content: ""; position: absolute; left: calc(var(--cut) + .35rem); top: -1px; width: 1.4rem; height: 2px; background: var(--bc); box-shadow: 0 0 8px var(--bc); }
.btn-neo:focus-visible { outline-offset: 5px; }
.refs .ref__cap .live { margin-right: 0; }
@media (prefers-reduced-motion: reduce) { .btn-neo::before { animation: none; } }
.btn-neo__go svg { transition: transform .45s var(--ease-out), opacity .3s; }
.btn-neo__go svg:last-child { transform: translate(-220%, 220%); opacity: 0; }
.btn-neo:hover .btn-neo__go svg:first-child { transform: translate(220%, -220%); opacity: 0; } .btn-neo:hover .btn-neo__go svg:last-child { opacity: 1; }
/* v33 · a hologram belongs to the home world only: never over an open page */
body:not([data-view="home"]) .holo { visibility: hidden; }

/* ==========================================================================
   v33 — Digitalizacija v praksi: three drawn stories on one stage (WMS · B2B portal · AI integrations), the solution
   tabs over them, and what the stories share (each in its own colour: WMS teal, B2B blue, AI violet)
   ========================================================================== */
.ws--b2b { --c: #6cc4ff; } .ws--ai { --c: #b99cff; }
.ws:not(.ws--wms) .ws-ring circle { stroke: var(--c); }
.ws:not(.ws--wms) .ws__role { background: color-mix(in srgb, var(--c) 12%, transparent); border-color: color-mix(in srgb, var(--c) 40%, transparent); color: color-mix(in srgb, var(--c) 30%, #fff); }
.ws:not(.ws--wms) .ws__btn { color: #061019; }
.ws:not(.ws--wms) .ws__ok { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); color: color-mix(in srgb, var(--c) 25%, #fff); }
.ws:not(.ws--wms) .ws__phone { box-shadow: 0 0 0 4px #0a0f16, 0 0 0 5px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 50px -18px color-mix(in srgb, var(--c) 45%, transparent); }
.ws:not(.ws--wms) .ws__steps button:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.ws:not(.ws--wms) .ws__steps button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 15%, transparent), color-mix(in srgb, var(--c) 3%, transparent));
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--c) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.ws:not(.ws--wms) .ws__bar i { background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff)); }
.ws:not(.ws--wms) .ws__tick { box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.ws [data-bb].is-tick, .ws [data-ai].is-tick { display: inline-block; animation: wsTick .9s var(--ease-out); }
/* drawn text and parts the new scenes add */
.ws .ws-txt.ws-sign { font: 700 15px var(--sans); letter-spacing: .22em; fill: #e8b45a; }
.ws .ws-txt.ws-tag { font: 700 10px var(--sans); letter-spacing: .04em; fill: #fff; }
.ws .ws-txt.ws-neon { font: 600 24px var(--sans); letter-spacing: .32em; fill: color-mix(in srgb, var(--c) 55%, #fff); filter: drop-shadow(0 0 6px var(--c)); }
.ws .ws-txt.ws-door { font: 700 11px var(--sans); letter-spacing: .2em; fill: #e8b45a; }
.ws .ws-txt.ws-rack { font: 800 15px var(--sans); letter-spacing: .06em; fill: #1a1f27; }
.ws .ws-txt.ws-doc__t { font: 800 11px var(--sans); letter-spacing: .14em; }
.ws .ws-doc { opacity: 0; }
.ws .ws-wire { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px var(--c)); }
/* the phone's screens in the new stories */
.ws__phone[data-scr="home"] .ws__scr--home, .ws__phone[data-scr="product"] .ws__scr--product, .ws__phone[data-scr="cart"] .ws__scr--cart, .ws__phone[data-scr="pick"] .ws__scr--pick, .ws__phone[data-scr="alert"] .ws__scr--alert,
.ws__phone[data-scr="load"] .ws__scr--load, .ws__phone[data-scr="sign"] .ws__scr--sign, .ws__phone[data-scr="track"] .ws__scr--track { display: flex; animation: wsScr .45s var(--ease-out); }
.ws__phone[data-ok="cart"] .ws__scr--cart .ws__ok, .ws__phone[data-ok="pick"] .ws__scr--pick .ws__ok, .ws__phone[data-ok="alert"] .ws__scr--alert .ws__ok, .ws__phone[data-ok="load"] .ws__scr--load .ws__ok, .ws__phone[data-ok="sign"] .ws__scr--sign .ws__ok { display: block; animation: wsScr .4s var(--ease-out); }
.ws__phone[data-ok="cart"] .ws__scr--cart .ws__btn, .ws__phone[data-ok="load"] .ws__scr--load .ws__btn { display: none; }

/* ---------- B2B: initial states of the drawing */
.ws #bb-sS, .ws #bb-sW, .ws #bb-pd2, .ws #bb-stackD, .ws #bb-fill > g, .ws #bb-tag1 { opacity: 0; }
/* the portal on the phone */
.bb__brand { margin: .1em 0 0; font: 700 1.05em var(--sans); color: #fff; }
.bb__search { display: flex; align-items: center; gap: .5em; min-height: 1.3em; padding: .6em .7em; border-radius: .8em; background: rgba(255, 255, 255, .06); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font: 600 1em var(--sans); color: #fff; }
.bb__search svg { width: 1em; height: 1em; flex: none; fill: none; stroke: #93a1b2; stroke-width: 2; stroke-linecap: round; }
.bb__caret { width: 1px; height: 1.1em; background: var(--c); animation: bbCaret 1s steps(1) infinite; } @keyframes bbCaret { 50% { opacity: 0; } }
.bb__lbl { margin: .4em 0 0; font: 600 .72em var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #8d9aab; }
.bb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; font-size: .86em; }
.bb__list li { display: grid; grid-template-columns: auto 1fr auto; gap: .6em; align-items: center; padding: .5em .6em; border-radius: .7em; background: rgba(255, 255, 255, .045); color: #b9c4d1; }
.bb__list b { color: #fff; } .bb__list em { font-style: normal; font-weight: 600; font-size: .9em; color: #6fe3a8; }
.bb__prod { display: flex; gap: .7em; align-items: center; padding: .6em; border-radius: .8em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.bb__can { width: 2.6em; height: auto; flex: none; } .bb__prod b { display: block; font-size: 1.2em; color: #fff; } .bb__prod span { font-size: .85em; color: #b9c4d1; }
.bb__qty { display: grid; grid-template-columns: 2.4em 1fr 2.4em; align-items: center; gap: .4em; text-align: center; }
.bb__qty b { font: 700 1.6em/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; }
.bb__qbtn { position: relative; overflow: hidden; display: grid; place-items: center; height: 2.4em; border-radius: .7em; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font: 600 1.2em var(--sans); color: #fff; }
.bb__state { display: flex; align-items: center; gap: .5em; margin: -.1em 0 0; font: 700 1.05em var(--sans); color: #6fe3a8; }
.bb__state i { width: .65em; height: .65em; border-radius: 50%; background: #6fe3a8; box-shadow: 0 0 10px #6fe3a8; }
.bb__tl { list-style: none; margin: 0; padding: 0 0 0 .2em; display: grid; font-size: .86em; }
.bb__tl li { position: relative; display: grid; grid-template-columns: 3.3em 1fr; gap: .5em; padding: .42em 0 .42em 1.6em; color: #6f7c8c; transition: color .4s; }
.bb__tl li::before { content: ""; position: absolute; left: .2em; top: .66em; width: .8em; height: .8em; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); box-sizing: border-box; }
.bb__tl li::after { content: ""; position: absolute; left: .58em; top: 1.6em; bottom: -.3em; width: 1px; background: rgba(255, 255, 255, .12); } .bb__tl li:last-child::after { display: none; }
.bb__tl time { font: 600 .95em ui-monospace, Consolas, monospace; }
.bb__tl li.is-done { color: #e9eef4; } .bb__tl li.is-done time { color: var(--c); }
.bb__tl li.is-done::before { background: var(--c); border-color: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); animation: bbDot .5s var(--ease-out); }
@keyframes bbDot { from { transform: scale(.3); } }
/* the supplier's screen (a monitor on its stand) and its live window */
.bb__mon, .bb__win { z-index: 3; color: #e9eef4; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(165deg, rgba(18, 28, 42, .97), rgba(8, 13, 20, .98)); opacity: 0; }
.bb__mon { position: absolute; right: 2.2%; top: 7%; width: 40%; height: 64%; display: grid; grid-template-rows: auto 1fr; font-size: clamp(6px, .66vw, 10px); border-radius: .9em;
  box-shadow: 0 0 0 .5em #0a0f16, 0 0 0 calc(.5em + 1px) rgba(255, 255, 255, .08), 0 40px 70px -24px rgba(0, 0, 0, .85), 0 0 60px -22px color-mix(in srgb, var(--c) 50%, transparent); }
.bb__mon::before { content: ""; position: absolute; left: 45%; right: 45%; top: calc(100% + .5em); height: 3.4em; background: linear-gradient(#1a222e, #0f151d); }
.bb__mon::after { content: ""; position: absolute; left: 35%; right: 35%; top: calc(100% + 3.9em); height: .8em; border-radius: .4em; background: #1a222e; }
.bb__bar { display: flex; align-items: center; gap: .8em; padding: .7em 1em; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 600 1.05em var(--sans); }
.bb__bar > span:last-child { margin-left: auto; font: 600 .95em ui-monospace, Consolas, monospace; color: #93a1b2; }
.bb__bar .ws__live { font: 700 .82em var(--sans); }
.bb__dots { display: flex; gap: .35em; } .bb__dots i { width: .6em; height: .6em; border-radius: 50%; background: #39445a; }
.bb__dots i:first-child { background: #e0675a; } .bb__dots i:nth-child(2) { background: #e8b45a; } .bb__dots i:nth-child(3) { background: #4fd08a; }
.bb__body { display: grid; grid-template-columns: 2.6em 1fr; min-height: 0; }
.bb__nav { display: grid; align-content: start; gap: .8em; padding: 1em .7em; border-right: 1px solid rgba(255, 255, 255, .06); }
.bb__nav i { height: 1.2em; border-radius: .35em; background: rgba(255, 255, 255, .08); } .bb__nav i.is-on { background: color-mix(in srgb, var(--c) 55%, transparent); }
.bb__main { display: grid; align-content: start; gap: .8em; padding: .9em 1.1em; min-height: 0; overflow: hidden; }
.bb__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; }
.bb__row { display: grid; grid-template-columns: 5.4em 1fr 6.2em 6.6em; gap: .8em; align-items: center; padding: .55em .7em; border-radius: .55em; background: rgba(255, 255, 255, .035); font-size: 1.02em; color: #b9c4d1; }
.bb__row b { color: #fff; } .bb__row > span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.bb__row--h { background: none; padding-block: .1em; font: 600 .78em var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6f7c8c; }
.bb__row--new { display: none; }
.bb__mon.m1 .bb__row--new { display: grid; animation: bbIn .5s var(--ease-out); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
@keyframes bbIn { from { opacity: 0; transform: translateY(-.6em); } }
.bb__st { display: inline-grid; justify-self: start; padding: .2em .7em; border-radius: 999px; font: 600 .85em var(--sans); font-style: normal; white-space: nowrap; }
.bb__st--new { color: #061019; background: var(--c); animation: bbPulse 1.4s ease-in-out infinite; } @keyframes bbPulse { 50% { box-shadow: 0 0 12px var(--c); } }
.bb__st--ok { color: #6fe3a8; background: rgba(111, 227, 168, .12); } .bb__st--wait { color: #ffcf8f; background: rgba(255, 207, 143, .12); }
.bb__row--new .bb__st--ok, .bb__mon.m3 .bb__row--new .bb__st--new { display: none; } .bb__mon.m3 .bb__row--new .bb__st--ok { display: inline-grid; animation: bbIn .4s var(--ease-out); }
.bb__detail { display: none; gap: .6em; padding: .8em 1em; border-radius: .7em; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); }
.bb__mon.m2 .bb__detail { display: grid; animation: bbIn .45s var(--ease-out); }
.bb__dh { display: grid; gap: .2em; margin: 0; } .bb__dh b { font-size: 1.15em; } .bb__dh span { color: #93a1b2; }
.bb__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.bb__checks li { padding: .3em .7em; border-radius: 999px; background: rgba(111, 227, 168, .1); color: #bff3d7; font-size: .92em; opacity: 0; } .bb__checks li::before { content: "\2713  "; color: #6fe3a8; }
.bb__go { justify-self: start; margin-top: .1em; padding: .6em 1.4em; }
.bb__done { display: none; margin: 0; font: 600 1em var(--sans); color: #6fe3a8; } .bb__done::before { content: "\2713  "; }
.bb__mon.m3 .bb__go { display: none; } .bb__mon.m3 .bb__done { display: block; animation: bbIn .4s var(--ease-out); }
.bb__route { display: none; grid-template-columns: 1fr 1fr; gap: .6em; } .bb__mon.m4 .bb__route { display: grid; animation: bbIn .45s var(--ease-out); }
.bb__to { position: relative; display: grid; gap: .2em; padding: .7em .8em; border-radius: .7em; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; transition: border-color .4s; }
.bb__to small { font: 600 .78em var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8d9aab; } .bb__to b { font-size: 1.02em; }
.bb__to em { font-style: normal; font-weight: 600; color: #8d9aab; } .bb__to .bb__ok2 { display: none; color: #6fe3a8; } .bb__to .bb__ok2::before { content: "\2713  "; }
.bb__to::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--c); transform-origin: left; animation: bbLoad 2.1s linear both; } @keyframes bbLoad { from { transform: scaleX(0); } }
.bb__mon.m5 .bb__to--inv .bb__pend, .bb__mon.m6 .bb__to--pick .bb__pend { display: none; } .bb__mon.m5 .bb__to--inv .bb__ok2, .bb__mon.m6 .bb__to--pick .bb__ok2 { display: block; }
.bb__mon.m5 .bb__to--inv, .bb__mon.m6 .bb__to--pick { border-color: rgba(111, 227, 168, .45); }
.bb__to--pick::after { animation-delay: .9s; }
.bb__win { position: absolute; left: 37%; top: 5%; width: 27%; display: grid; gap: .55em; padding-bottom: .9em; font-size: clamp(6px, .64vw, 9.5px); border-radius: .8em; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8), 0 0 40px -16px color-mix(in srgb, var(--c) 50%, transparent); }
.bb__wrow { display: grid; grid-template-columns: auto 1fr auto; gap: .7em; align-items: center; margin: 0 1em; padding: .6em .7em; border-radius: .6em; background: rgba(111, 227, 168, .07); box-shadow: inset 0 0 0 1px rgba(111, 227, 168, .35); font-size: 1.05em; } .bb__wrow span { color: #b9c4d1; }
.bb__wlist { list-style: none; margin: 0 1em; padding: 0; display: grid; gap: .3em; font-size: .95em; color: #b9c4d1; } .bb__wlist li { opacity: 0; } .bb__wlist li::before { content: "\2713  "; color: #6fe3a8; }

/* ---------- the trio: three solution tabs over one stage */
.trio__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.trio__tabs button { --tc: #58f0c8; position: relative; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1rem 1.1rem 1.3rem; border-radius: 14px; text-align: left; cursor: pointer; overflow: hidden; color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)); transition: border-color .35s, background .35s, color .35s, transform .35s var(--ease-out), box-shadow .35s; }
.trio__tabs button:nth-child(2) { --tc: #6cc4ff; } .trio__tabs button:nth-child(3) { --tc: #b99cff; }
.trio__tabs button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tc) 40%, transparent); color: var(--text); }
.trio__tabs button[aria-selected="true"] { color: #fff; border-color: color-mix(in srgb, var(--tc) 60%, transparent);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tc) 16%, transparent), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--tc) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.trio__ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); background: color-mix(in srgb, var(--tc) 8%, transparent); color: var(--tc); transition: box-shadow .35s; }
.trio__ico svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trio__tabs button[aria-selected="true"] .trio__ico { box-shadow: 0 0 18px -4px var(--tc); }
.trio__txt { display: grid; gap: .2rem; min-width: 0; }
.trio__name { font: 700 1.05rem var(--sans); letter-spacing: .18em; color: inherit; }
.trio__full { font: 600 .6rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.trio__tag { margin-top: .3rem; font: 400 .92rem/1.35 var(--serif); color: var(--text-2); }
.trio__bar { position: absolute; left: 1.1rem; right: 1.1rem; bottom: .6rem; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.trio__bar i { position: absolute; inset: 0; background: var(--tc); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 8px var(--tc); }
.trio__tabs button:focus-visible { outline: 2px solid var(--tc); outline-offset: 3px; }
.trio__panel[hidden] { display: none; }
.trio__panel { animation: trioIn .5s var(--ease-out); } @keyframes trioIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .trio__panel { animation: none; } }

@media (max-width: 760px) {
  .bb__mon { position: relative; right: auto; top: auto; width: auto; height: auto; margin: .7rem; font-size: 11px; display: none; }
  .bb__mon::before, .bb__mon::after { display: none; }
  .ws--b2b[data-shot="obdelava"] .bb__mon { display: grid; } .ws--b2b[data-shot="obdelava"] .bb__phone { display: none; }
  .bb__row { grid-template-columns: 4.6em 1fr auto; } .bb__row > span:nth-child(3) { display: none; }
  .bb__route { grid-template-columns: 1fr; }
  .bb__win { position: relative; left: auto; top: auto; width: auto; margin: 0 .7rem .7rem; font-size: 11px; display: none; }
  .ws--b2b[data-shot="prejeto"] .bb__win { display: grid; }
  .trio__tabs { gap: .35rem; } .trio__tabs button { grid-template-columns: 1fr; justify-items: center; gap: .4rem; padding: .7rem .4rem 1rem; text-align: center; }
  .trio__full, .trio__tag { display: none; } .trio__ico { width: 2.2rem; height: 2.2rem; } .trio__name { font-size: .9rem; } .trio__bar { left: .6rem; right: .6rem; }
  /* v54 · the chosen solution's line (its kind and its sentence), which the desktop tabs carry themselves */
  .trio .trio__now { display: grid; align-content: start; gap: .3rem; margin: -.3rem .2rem 1.05rem; text-align: center; }
  .trio__now b { font: 600 .6rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
  .trio__now span { font: 400 .98rem/1.4 var(--serif); color: var(--text-2); text-wrap: balance; }
}
.trio__now { display: none; margin: 0; }
.bb__mon.m2 .bb__row:not(.bb__row--new):not(.bb__row--h) { display: none; }   /* the opened order takes the room of the older ones */

/* ---------- AI: initial states and the drawn hub (the assistant's core, the inbox, the firm's programs) */
.ws #ai-sK, .ws .ai-tag, .ws .ai-scan, .ws .ai-in, .ws #ai-bubble, .ws #ai-wms, .ws .ai-st, .ws #ai-tag1, .ws #ai-fill > g { opacity: 0; }
.ws #ai-pulse, .ws #ai-pulse2 { transform-box: fill-box; transform-origin: center; }
.ws .ai-spin, .ws .ai-orbit { transform-box: fill-box; transform-origin: center; animation: aiSpin 26s linear infinite; }
.ws .ai-spin--rev { animation-duration: 17s; animation-direction: reverse; } .ws .ai-orbit { animation-duration: 12s; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ws .ai-node { animation: aiNode 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); } @keyframes aiNode { 50% { opacity: .35; } }
.ws .ai-wire0 { fill: none; stroke: #1f2c42; stroke-width: 2; }
.ws .ai-wire--ok { stroke: #4fe08a; filter: drop-shadow(0 0 6px #4fe08a); }
.ws .ai-sysico { color: var(--c); }
.ws .ws-txt.ai-sys { font: 700 17px var(--sans); letter-spacing: .16em; fill: #e9eef4; }
.ws .ws-txt.ai-sub { font: 500 12px var(--sans); letter-spacing: .08em; fill: #8d9aab; }
.ws .ws-txt.ai-tagt { font: 800 10.5px var(--sans); letter-spacing: .12em; fill: #160a2a; }
.ws .ws-txt.ai-pdf { font: 800 7px var(--sans); letter-spacing: .02em; fill: #c0802a; }
.ws .ws-txt.ai-label { font: 600 13px var(--sans); letter-spacing: .42em; fill: color-mix(in srgb, var(--c) 60%, #fff); }
.ws .ws-txt.ai-st { font: 600 11px var(--sans); letter-spacing: .06em; } .ws .ws-txt.ai-st--a { fill: #ffb347; } .ws .ws-txt.ai-st--g { fill: #4fe08a; }
.ws .ws-txt.ai-wms { font: 600 11.5px var(--sans); letter-spacing: .04em; fill: #4fe08a; }
.ws .ws-txt.ai-bub { font: 700 15px var(--sans); letter-spacing: .02em; fill: #fff; } .ws .ws-txt.ai-bub2 { font: 500 12px var(--sans); fill: #b9c4d1; }
/* the assistant's app */
.ws__phone[data-scr="inbox"] .ws__scr--inbox, .ws__phone[data-scr="read"] .ws__scr--read, .ws__phone[data-scr="draft"] .ws__scr--draft,
.ws__phone[data-scr="approve"] .ws__scr--approve, .ws__phone[data-scr="stats"] .ws__scr--stats { display: flex; animation: wsScr .45s var(--ease-out); }
.ws__phone[data-ok="approve"] .ws__scr--approve .ws__ok { display: block; animation: wsScr .4s var(--ease-out); }
.ai__mails { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; }
.ai__mail { --mc: #5aa8ff; display: none; grid-template-columns: auto 1fr auto; gap: .6em; align-items: center; padding: .55em .6em; border-radius: .7em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); font-size: .86em; }
.ai__mail--pdf { --mc: #e8b45a; } .ai__mail--photo { --mc: #ff7a6b; } .ai__mail--b2b { --mc: #2fd3a6; } .ai__mail--wms { --mc: #4fe08a; }   /* v49d: the B2B portal and the WMS come into the same inbox */
/* v49e · Rezultat as a split screen (cyberpunk): window tabs, the waiting and received lines, the command packets */
.ws .ws-txt.ai-cy { font: 700 11px var(--sans); letter-spacing: .16em; fill: #bff8ff; }
.ws .ws-txt.ai-cy2 { font: 600 12px var(--sans); letter-spacing: .14em; fill: #6f8aa0; }
.ws .ws-txt.ai-cy3 { font: 700 13.5px var(--sans); letter-spacing: .02em; fill: #9dffcf; }
.ws .ws-txt.ai-cyp { font: 800 11px var(--sans); letter-spacing: .12em; fill: #ffd6f3; }
.ws #ai-phring { transform-box: fill-box; transform-origin: center; }
/* v49f · the message each confirmation writes (typed lines, the attachment, the send bar), the done state, the lock screen */
.ws .ws-txt.ai-mt { font: 800 14px var(--sans); letter-spacing: .1em; fill: #eaf6ff; }
.ws .ws-txt.ai-eurt { font: 700 20px var(--sans); fill: #ffe3a1; }   /* v51: the euro emblems over his phone at the end */
.ws .ws-txt.ai-mid { font: 700 12.5px var(--sans); letter-spacing: .05em; fill: #3ef0ff; }
.ws .ws-txt.ai-mr { font: 600 12px var(--sans); letter-spacing: .04em; fill: #9fd8ff; }
.ws .ws-txt.ai-mc { font: 800 10.5px var(--sans); letter-spacing: .08em; fill: #ffd6f3; }
.ws .ws-txt.ai-mgo { font: 800 10px var(--sans); letter-spacing: .16em; fill: #ff8ad8; }
.ws .ai-mline, .ws .ai-mbar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.ws__phone[data-scr="lock"] .ws__scr--lock { display: flex; animation: wsScr .45s var(--ease-out); }
.ws__phone[data-scr="lock"] .ws__ph-app { visibility: hidden; }
.ai__lt { margin: 1.4em 0 0; text-align: center; font: 300 3.3em/1 var(--sans); letter-spacing: .02em; color: #f2f5f9; }
.ai__ld { margin: .3em 0 1.3em; text-align: center; font: 500 .9em var(--sans); color: #9aa6b6; }
.ai__note { display: none; grid-template-columns: auto 1fr; gap: .6em; align-items: center; padding: .65em .7em; border-radius: 1em; background: rgba(235, 240, 248, .13); border: 1px solid rgba(255, 255, 255, .16); }
.ws__phone[data-note="1"] .ai__note { display: grid; animation: aiNote .5s var(--ease-out); }
@keyframes aiNote { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.ai__note > i { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .6em; background: var(--c); color: #160a2a; font: 800 .8em var(--sans); font-style: normal; letter-spacing: .06em; }
.ai__note span { display: grid; gap: .15em; min-width: 0; } .ai__note b { font-size: .85em; color: #fff; } .ai__note small { font-size: .8em; color: #c9d2de; }
.ws--ai .ai__ap:not(.is-in) { display: none; } .ws--ai .ai__ap.is-in { animation: wsScr .45s var(--ease-out); }
.ai__mail.is-in { display: grid; animation: bbIn .45s var(--ease-out); }
.ai__mail > i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .6em; color: var(--mc); background: color-mix(in srgb, var(--mc) 15%, transparent); }
.ai__mail > i svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ai__mail span { display: grid; gap: .1em; min-width: 0; } .ai__mail b { color: #fff; } .ai__mail small { color: #93a1b2; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai__mail time { font: 600 .9em ui-monospace, Consolas, monospace; color: #93a1b2; }
.ai__hint { display: flex; align-items: center; gap: .5em; margin: auto 0 0; font: 600 .82em var(--sans); color: color-mix(in srgb, var(--c) 60%, #fff); }
.ai__hint i { width: .6em; height: .6em; border-radius: 50%; background: var(--c); animation: aiNode 1.4s ease-in-out infinite; }
.ai__read { display: none; flex-direction: column; gap: .55em; } .ai__read.is-on { display: flex; animation: wsScr .45s var(--ease-out); }
.ai__type { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin: .2em 0 0; }
.ai__type b { padding: .3em .8em; border-radius: 999px; background: var(--c); color: #160a2a; font: 700 .95em var(--sans); letter-spacing: .04em; }
.ai__type em { font: 600 .8em var(--sans); font-style: normal; color: #93a1b2; }
.ai__fields { display: grid; gap: .4em; margin: 0; }
.ai__fields div { position: relative; display: grid; gap: .15em; padding: .5em .65em; border-radius: .7em; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); overflow: hidden; }
.ai__fields dt { font: 600 .72em var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8d9aab; } .ai__fields dd { margin: 0; font-weight: 600; font-size: .95em; color: #fff; }
.ai__fields div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 32%, transparent), transparent); transform-origin: left; transform: scaleX(0); }
.ai__read.is-on .ai__fields div { animation: wsScr .4s var(--ease-out) both; } .ai__read.is-on .ai__fields div::after { animation: aiMark 1s var(--ease-out) both; }
.ai__read.is-on .ai__fields div:nth-child(2), .ai__read.is-on .ai__fields div:nth-child(2)::after { animation-delay: .25s; }
.ai__read.is-on .ai__fields div:nth-child(3), .ai__read.is-on .ai__fields div:nth-child(3)::after { animation-delay: .5s; }
.ai__read.is-on .ai__fields div:nth-child(4), .ai__read.is-on .ai__fields div:nth-child(4)::after { animation-delay: .75s; }
@keyframes aiMark { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.ai__mailbody { display: grid; gap: .45em; padding: .7em .8em; border-radius: .8em; background: #f2f4f7; color: #1b2430; font-size: .86em; line-height: 1.35; }
.ai__mailbody p { margin: 0; opacity: 0; } .ai__mailbody b { color: #160a2a; }
.ai__chips { display: flex; flex-wrap: wrap; gap: .35em; margin: 0; }
.ai__chips span { padding: .3em .7em; border-radius: 999px; background: rgba(111, 227, 168, .12); color: #bff3d7; font: 600 .8em var(--sans); opacity: 0; } .ai__chips span::before { content: "\2713  "; color: #6fe3a8; }
.ai__aps { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; }
.ai__ap { display: grid; grid-template-columns: 1fr auto; gap: .5em; align-items: center; padding: .55em .6em; border-radius: .8em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .4s, background .4s; }
.ai__ap > span:first-child { display: grid; gap: .1em; min-width: 0; } .ai__ap b { font-size: .92em; color: #fff; } .ai__ap small { font-size: .78em; color: #93a1b2; }
.ai__apbtn { margin: 0; padding: .45em .8em; font-size: .82em; }
.ai__ap em { display: none; font: 700 .82em var(--sans); font-style: normal; color: #6fe3a8; } .ai__ap em::before { content: "\2713  "; }
.ai__ap.is-done { border-color: rgba(111, 227, 168, .45); background: rgba(111, 227, 168, .07); } .ai__ap.is-done .ai__apbtn { display: none; } .ai__ap.is-done em { display: block; animation: wsScr .35s var(--ease-out); }
.ai__kpi { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.ai__kpi div { display: grid; gap: .15em; padding: .55em .6em; border-radius: .7em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); opacity: 0; }
.ai__kpi small { font-size: .74em; color: #93a1b2; } .ai__kpi b { font: 700 1.45em/1 var(--sans); color: #fff; } .ai__kpi div:nth-child(4) b { color: color-mix(in srgb, var(--c) 50%, #fff); }
.ai__bars { width: 100%; height: 3.2em; } .ai__bars rect { fill: color-mix(in srgb, var(--c) 70%, transparent); transform-box: fill-box; transform-origin: bottom; }
.ws__phone[data-scr="stats"] .ai__bars rect { animation: aiBar .7s calc(.5s + var(--k) * .08s) var(--ease-out) both; } @keyframes aiBar { from { transform: scaleY(0); } }
.ai__log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; font-size: .82em; }
.ai__log li { display: grid; grid-template-columns: 3.3em 1fr; gap: .4em; padding: .4em .55em; border-radius: .55em; background: rgba(255, 255, 255, .035); border-left: 2px solid var(--c); color: #e9eef4; opacity: 0; }
.ai__log time { font: 600 .95em ui-monospace, Consolas, monospace; color: var(--c); }
/* v49 · AI: part 1 (the B2B portal and the WMS linked by themselves) and part 2 (the mail sorted to the departments) */
.ws .ws-txt.ai-chip { font: 700 12px var(--sans); letter-spacing: .03em; fill: #c9f7dd; }
.ws .ws-txt.ai-det { font: 500 11.5px var(--sans); letter-spacing: .03em; fill: #b9c4d1; }
.ws .ws-txt.ai-sys--s { font-size: 14px; letter-spacing: .1em; }
.ws .ws-txt.ai-st--n { fill: color-mix(in srgb, var(--c) 55%, #fff); }
.ws__phone[data-scr="link"] .ws__scr--link { display: flex; animation: wsScr .45s var(--ease-out); }
.ai__flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; font-size: .8em; }
.ai__flow li { display: none; grid-template-columns: 3.1em 1fr auto; gap: .4em; align-items: center; padding: .42em .55em; border-radius: .55em; background: rgba(79, 224, 138, .06); border-left: 2px solid #4fe08a; color: #e9eef4; }
.ai__flow li::after { content: "\2713"; color: #6fe3a8; font-weight: 800; }
.ai__flow li.is-in { display: grid; animation: bbIn .45s var(--ease-out); }
.ai__flow time { font: 600 .95em ui-monospace, Consolas, monospace; color: #6fe3a8; }
.ai__hint b { color: #fff; }
.ai__to { display: none; padding: .15em .55em; border-radius: 999px; background: color-mix(in srgb, var(--c) 28%, transparent); color: #fff; font: 700 .74em var(--sans); font-style: normal; white-space: nowrap; }
.ai__mail.is-sorted time { display: none; } .ai__mail.is-sorted .ai__to { display: block; animation: wsScr .35s var(--ease-out); }
.ws .ws-txt.ai-done-d { font: 700 12px var(--sans); letter-spacing: .14em; fill: #4fe08a; }   /* v49b: the café's confirmations, carried out in the office */

/* v33b · B2B: the accounting desk is signed; Prejeto shows the confirmation at both firms — the supplier's window and the
   customer's phone, each named, each with the same green confirmation, a live link between them */
.ws .ws-txt.ws-acc { font: 700 12px var(--sans); letter-spacing: .22em; fill: #e8b45a; }
.bb__who { align-self: flex-start; justify-self: start; margin: 0; padding: .3em .8em; border-radius: 999px; font: 700 .8em var(--sans); letter-spacing: .03em; color: #061019; background: var(--c); }
.bb__conf { position: relative; display: grid; gap: .15em; padding: .6em .8em .6em 2.9em; border-radius: .75em; background: rgba(79, 224, 138, .12); box-shadow: inset 0 0 0 1px rgba(111, 227, 168, .5); }
.bb__conf::before { content: "\2713"; position: absolute; left: .75em; top: 50%; display: grid; place-items: center; width: 1.6em; height: 1.6em; margin-top: -.8em; border-radius: 50%; background: #4fe08a; color: #06140c; font: 800 .95em/1 var(--sans); box-shadow: 0 0 12px rgba(79, 224, 138, .6); }
.bb__conf b { font: 700 1.12em var(--sans); color: #c9f7dd; } .bb__conf span { font-size: .84em; color: #9fb0c0; }
.bb__win { width: 29%; } .bb__win .bb__who, .bb__win .bb__conf { margin: 0 1em; }
.ws__scr--track .bb__conf { opacity: 0; }
.bb__link { position: absolute; left: 100%; top: 7.1em; width: 29%; height: 2px; background: linear-gradient(90deg, #4fe08a, var(--c)); box-shadow: 0 0 8px #4fe08a; transform-origin: left; transform: scaleX(0); }
.bb__link::before, .bb__link::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e9fff2; box-shadow: 0 0 8px #4fe08a; animation: bbSync 1.6s linear infinite; }
.bb__link::after { animation-direction: reverse; animation-delay: -.8s; }
@keyframes bbSync { from { left: -4px; } to { left: calc(100% - 4px); } }
@media (max-width: 760px) { .bb__link { display: none; } .bb__win { width: auto; } }

/* ==========================================================================
   v33c — polish of the drawn stories (looks only): a lens on the stage (vignette, fine grain, a lit edge), dust and
   rising light that drift by themselves, glass device frames (the phone's island and sheen, the monitor's glare,
   a frosted live window). Nothing here changes timing or what happens.
   ========================================================================== */
.ws__stage { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px -40px rgba(0, 0, 0, .9); }
.ws__stage::before, .ws__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; }
.ws__stage::before { background: radial-gradient(125% 95% at 50% 42%, transparent 58%, rgba(2, 4, 8, .42) 100%), linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 18%); }
.ws__stage::after { opacity: .07; background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@media (max-width: 760px) { .ws__stage::before, .ws__stage::after { bottom: auto; aspect-ratio: 16 / 9; border-radius: 10px 10px 0 0; } }
/* drifting dust in the light, light rising in the AI core's beam */
.ws .ws-mote { opacity: 0; animation: wsMote 9s ease-in-out infinite; animation-delay: var(--d); }
@keyframes wsMote { 0%, 100% { transform: translate(0, 0); opacity: 0; } 25% { opacity: .5; } 50% { transform: translate(7px, -16px); opacity: .38; } 80% { opacity: .14; } }
.ws .ai-rise { opacity: 0; animation: aiRise 4.2s linear infinite; animation-delay: var(--d); }
@keyframes aiRise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .85; } 100% { transform: translateY(-130px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ws .ws-mote, .ws .ai-rise { animation: none; opacity: .25; } }
/* the phone: an island at the top, a sheen across the glass */
.ws__phone::before { content: ""; position: absolute; left: 50%; top: .6em; width: 5.4em; height: 1.4em; margin-left: -2.7em; border-radius: 1em; background: #04070b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.ws__phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .075), transparent 30%, transparent 72%, rgba(255, 255, 255, .03)); }
@media (max-width: 760px) { .ws__phone::before { display: none; } }
/* the monitor and the office dashboard: a glare on the glass */
.bb__mon { background: linear-gradient(118deg, rgba(255, 255, 255, .055), transparent 32%), linear-gradient(165deg, rgba(18, 28, 42, .97), rgba(8, 13, 20, .98)); }
.bb__mon::before { background: linear-gradient(90deg, #121921, #232d3b 50%, #121921); }
.bb__mon::after { background: linear-gradient(180deg, #242f3e, #141b25); box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .7); }
.ws__dash { background: linear-gradient(118deg, rgba(255, 255, 255, .05), transparent 34%), linear-gradient(160deg, #0d1828, #091220); }
/* the supplier's live window: frosted glass over the workshop */
.bb__win { background: linear-gradient(118deg, rgba(255, 255, 255, .07), transparent 34%), linear-gradient(165deg, rgba(18, 28, 42, .8), rgba(8, 13, 20, .86)); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }

/* ==========================================================================
   v35 — Digitalni razvoj, told as three short films: STRAN (an idea → the studio → the new site, full screen → live),
   TRGOVINA (an empty shop → the studio → the online shop, full screen → orders on his own counter → the courier) and
   PRENOVA (one big before/after line over the old and the new site: drag it, and try each side by hand).
   The camera: the drawing and the screens over it move as one; inside a screen 1em is 1% of the stage's width.
   ========================================================================== */
.ws--web { --c: #4fd2ff; } .ws--shop { --c: #6fe3a8; } .ws--ren { --c: #ff8a4a; }
.rz .ws__stage { container-type: inline-size; }
.rz .rz-cam, .rz__cam { transform-origin: 0 0; }
.rz__cam { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .rz__mon { position: absolute; inset: 0; }
.rz__screen { position: absolute; left: 67.5%; top: 41.1111%; width: 100%; height: 100%; transform: scale(.25); transform-origin: 0 0; overflow: hidden; container-type: size;
  font-size: 1cqw; line-height: 1.35; background: #05080c; pointer-events: none; }
.rz.is-full .rz__screen { pointer-events: auto; }
.rz__ov { position: absolute; inset: 0; z-index: 4; pointer-events: none; font-size: 1cqw; }
.rz .ws__svg { z-index: 0; }
/* drawn words */
.rz .ws-txt.rz-brand { font: 500 46px var(--sans); letter-spacing: .3em; fill: #dcefe9; filter: drop-shadow(0 0 5px rgba(88, 240, 200, .35)); }
.rz .ws-txt.rz-brand2 { font: 600 12px var(--sans); letter-spacing: .5em; fill: #58f0c8; opacity: .8; }
.rz .ws-txt.rz-cafe { font: 500 30px var(--serif); letter-spacing: .42em; fill: #f1e3cf; }
.rz .ws-txt.rz-open { font: 800 13px var(--sans); letter-spacing: .16em; fill: #2f6b3e; }
.rz .ws-txt.rz-chalk { font: 700 17px var(--sans); letter-spacing: .14em; fill: #eef0ea; } .rz .ws-txt.rz-chalk--s { font-size: 11px; fill: #e9b46a; }
.rz .ws-txt.rz-q { font: 800 18px var(--sans); fill: #9fd8ff; }
.rz .ws-txt.rz-think__t { font: 500 21px var(--sans); letter-spacing: 0; fill: #1b2430; }
.rz .ws-txt.rz-say__t { font: 500 22px var(--sans); letter-spacing: 0; }
.rz .ws-txt.rz-shop { font: 800 30px var(--sans); letter-spacing: .32em; fill: #f1e3cf; } .rz .ws-txt.rz-shop--big { font-size: 38px; fill: #ffcf8f; filter: drop-shadow(0 0 6px rgba(255, 180, 90, .6)); }
.rz .ws-txt.rz-sticker { font: 600 15px var(--sans); letter-spacing: .02em; fill: #f2efe9; }
.rz .ws-txt.rz-z { font: 800 26px var(--sans); fill: #c8d2de; opacity: 0; }
/* an idea, a thought, a word */
.rz .rz-bulb { opacity: 0; transform-origin: 0px 0px; }   /* v44: a glass disc, a line-drawn bulb, hairline rings */
.rz .rz-bulb__disc { fill: rgba(9, 14, 21, .82); stroke: rgba(255, 231, 184, .5); stroke-width: 1.1; }
.rz .rz-bulb__ico { fill: none; stroke: #ffe7b8; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rz .rz-rays circle { fill: none; stroke: #ffe7b8; stroke-width: 1; } .rz .rz-rays circle + circle { opacity: .45; } .rz .rz-rays { opacity: 0; transform-origin: 0px 0px; }
.rz .rz-think { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; } .rz .rz-think__c { fill: #f2efe9; } .rz .rz-think__rim { fill: none; stroke: rgba(0, 0, 0, .08); stroke-width: 1.2; }
.rz .rz-say { opacity: 0; }
.rz .rz-say__b { fill: #f2efe9; } .rz .rz-say__rim { fill: none; stroke: rgba(0, 0, 0, .08); stroke-width: 1.2; }
.rz .rz-say__lead { fill: none; stroke: rgba(242, 239, 233, .55); stroke-width: 1.3; } .rz .rz-say__dot { fill: #f2efe9; }
.rz .rz-say__p { fill: none; stroke: color-mix(in srgb, var(--c) 50%, #0b1220); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rz .rz-say--a .rz-say__t { fill: #1b2430; }
.rz .rz-say--n .rz-say__b { fill: #0c131c; } .rz .rz-say--n .rz-say__rim { stroke: #58f0c8; stroke-opacity: .4; } .rz .rz-say--n .rz-say__t { fill: #e9fff8; } .rz .rz-say--n .rz-say__p { stroke: #58f0c8; }
.rz .rz-say--n .rz-say__lead { stroke: rgba(88, 240, 200, .5); } .rz .rz-say--n .rz-say__dot { fill: #58f0c8; }
.rz .rz-pile { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.rz .rz-fly { animation: rzFly 2.6s linear infinite; } @keyframes rzFly { 0% { transform: rotate(0deg) translate(26px) rotate(0deg); } 100% { transform: rotate(360deg) translate(26px) rotate(-360deg); } }
.ws.is-paused .rz-fly { animation-play-state: paused; }
/* the cursor inside a screen, and its click */
.rz__cur { position: absolute; left: 0; top: 0; z-index: 30; width: 2.1em; height: 2.1em; opacity: 0; pointer-events: none; }
.rz__cur svg { position: relative; z-index: 1; width: 100%; height: 100%; fill: #fff; stroke: #10151c; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 .2em .4em rgba(0, 0, 0, .45)); }
.rz__cur i { position: absolute; left: -.6em; top: -.6em; width: 1.6em; height: 1.6em; border-radius: 50%; border: .18em solid var(--c); background: color-mix(in srgb, var(--c) 25%, transparent); opacity: 0; }
.rz__cur.is-wait svg { opacity: 0; }
.rz__cur.is-wait::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h12v5l-4 5 4 5v5H6v-5l4-5-4-5z' fill='%23fff' stroke='%23000' stroke-width='1.5'/><path d='M8 4h8v2.6l-4 4.4-4-4.4zM8 20l4-4.5 4 4.5z' fill='%23c9a14a'/></svg>") center / 80% no-repeat; animation: rzHg 1s steps(2) infinite; }
@keyframes rzHg { 50% { transform: rotate(180deg); } }
/* confetti: bits fly out when the parent shows */
.rz__conf { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.rz__conf i { position: absolute; left: -.06em; top: -.45em; width: .12em; height: .9em; border-radius: .06em; background: rgba(255, 255, 255, .8); opacity: 0; }   /* v44: hairlines of light, no confetti */
.rz .is-burst .rz__conf i, .kx[data-pub="3"] .kx__pub .rz__conf i, .sx.is-done .s-done .rz__conf i, .rn[data-np="2"] .n-paid .rz__conf i { animation: rzConf calc(var(--d) * .9s) cubic-bezier(.16,1,.3,1) both; }
@keyframes rzConf { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-1.2em) scaleY(.3); } 25% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-3em * var(--d))) scaleY(1); } }
/* a browser's bar (in the screens) */
.rz__bar { display: flex; align-items: center; gap: 1em; padding: .65em 1.2em; background: linear-gradient(180deg, #19222f, #121923); border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 1em; }
.rz__url { display: flex; align-items: center; gap: .5em; flex: 1; max-width: 30em; margin: 0 auto; padding: .35em 1em; border-radius: 999px; background: #0a0f17; font: 600 1em ui-monospace, Consolas, monospace; color: #8593a5; white-space: nowrap; overflow: hidden; }
.rz__url svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rz__live { display: flex; align-items: center; gap: .45em; font: 700 .85em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6fe3a8; opacity: 0; }
.rz__live i { width: .65em; height: .65em; border-radius: 50%; background: #6fe3a8; animation: wsLive 1.8s ease-out infinite; }
.is-live .rz__url { color: #e9eef4; } .is-live .rz__url svg { color: #6fe3a8; }
.rz__bar .bb__dots { display: flex; gap: .4em; order: -2; } .rz__bar .rz__live { order: -1; } .rz__bar .bb__dots i { width: .7em; height: .7em; border-radius: 50%; background: #3a4556; }

/* ---------------------------------------------------------------- STRAN: the café's new site */
.kx { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; background: #0f0c0a; color: #f4ede4; font-family: var(--sans); }
.kx__view { position: relative; overflow: hidden; }
.kx__page { position: absolute; left: 0; right: 0; top: 0; height: 400%; }
.k-s { position: relative; height: 25%; overflow: hidden; }
.k-logo { font: italic 500 1.9em var(--serif); letter-spacing: -.01em; color: inherit; } .k-logo i { font-style: normal; color: #e9b46a; }
.k-btn { display: inline-flex; align-items: center; justify-content: center; padding: .85em 1.7em; border: 1px solid transparent; border-radius: 999px; background: #c4602e; color: #fff; font: 600 1.12em var(--sans); font-style: normal; letter-spacing: .01em; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s; }
.k-btn:hover { transform: translateY(-2px); box-shadow: 0 .8em 1.6em -.6em rgba(196, 96, 46, .9); }
.k-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .45); } .k-btn--sm { padding: .6em 1.2em; font-size: 1em; }
.k-kick { font: 700 .95em var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #e9b46a; }
/* hero */
.k-heroimg, .k-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 8, 6, .9) 0%, rgba(12, 8, 6, .62) 38%, rgba(12, 8, 6, 0) 66%), linear-gradient(0deg, rgba(12, 8, 6, .55), transparent 30%); }
.k-nav { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 2.4em; padding: 1.6em 4em; font: 500 1.05em var(--sans); color: rgba(244, 237, 228, .85); }
.k-nav .k-logo { margin-right: auto; color: #fff; } .k-nav .k-btn { margin-left: .4em; }
.k-copy { position: absolute; left: 4em; top: 24%; z-index: 2; display: grid; gap: 1.2em; max-width: 46em; }
.k-h1 { margin: 0; font: 300 6.6em/.98 var(--serif); letter-spacing: -.025em; color: #fff; }
.k-h1 span { display: block; overflow: hidden; padding-bottom: .04em; } .k-h1 b { display: inline-block; font-weight: 300; }
.k-h1 span:nth-child(3) b { font-style: italic; color: #f0c08e; }
.k-lead { margin: 0; max-width: 28em; font-size: 1.35em; line-height: 1.5; color: rgba(244, 237, 228, .8); }
.k-acts { display: flex; gap: 1em; margin: .4em 0 0; }
.k-rate { position: absolute; right: 4em; bottom: 3.6em; z-index: 2; display: grid; grid-template-columns: auto auto; align-items: center; gap: .1em .6em; margin: 0; padding: 1em 1.4em; border-radius: 1.2em; background: rgba(20, 14, 10, .45); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.k-rate svg { grid-row: span 2; width: 2.4em; height: 2.4em; fill: #f0c08e; } .k-rate b { font: 300 2.4em/1 var(--serif); color: #fff; } .k-rate small { font-size: .9em; color: rgba(244, 237, 228, .7); }
/* menu */
.k-menu { background: #f4ede4; color: #1b1410; }
.k-marq { display: flex; overflow: hidden; padding: 1.1em 0; background: #1b1410; color: #f0c08e; font: italic 400 1.6em var(--serif); white-space: nowrap; }
.k-marq p { margin: 0; padding-right: 2em; animation: rzMarq 22s linear infinite; } @keyframes rzMarq { to { transform: translateX(-100%); } }
.ws.is-paused .k-marq p, .ws.is-paused .o-marq span { animation-play-state: paused; }
.k-head { display: flex; align-items: baseline; gap: 2em; padding: 3em 5em 2em; } .k-head small { font: 700 .95em var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #c4602e; }
.k-h2 { margin: 0; font: 300 4.2em/1 var(--serif); letter-spacing: -.02em; }
.k-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2em; padding: 0 5em; }
.k-card { margin: 0; overflow: hidden; border-radius: 1.4em; background: #fff; box-shadow: 0 1em 2em -1.4em rgba(60, 30, 10, .35); transition: transform .35s, box-shadow .35s; }
.k-card:hover { transform: translateY(-4%) scale(1.03); box-shadow: 0 2.4em 3em -1.6em rgba(0, 0, 0, .55); }
.k-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.k-card figcaption { display: grid; grid-template-columns: 1fr auto; gap: .2em 1em; padding: 1.1em 1.3em 1.3em; }
.k-card b { font: 600 1.4em var(--sans); } .k-card span { grid-row: 2; font-size: 1em; color: #7a6a5c; } .k-card em { grid-row: span 2; align-self: center; font: italic 500 1.7em var(--serif); color: #c4602e; }
/* the room */
.k-spimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-space::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 8, 6, .82), rgba(12, 8, 6, .1) 55%); }
.k-quote { position: absolute; left: 4em; bottom: 4em; z-index: 2; display: grid; gap: .6em; max-width: 34em; padding: 1.8em 2em; border-radius: 1.4em; background: rgba(20, 14, 10, .5); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.k-stars { display: flex; gap: .2em; } .k-stars svg { width: 1.3em; height: 1.3em; fill: #f0c08e; }
.k-quote p { margin: 0; font: italic 300 2em/1.25 var(--serif); color: #fff; } .k-quote small { color: rgba(244, 237, 228, .7); }
.k-facts { position: absolute; right: 4em; bottom: 4.4em; z-index: 2; display: flex; gap: 2.6em; }
.k-facts p { display: grid; margin: 0; } .k-facts b { font: 300 4em/1 var(--serif); color: #fff; } .k-facts small { color: rgba(244, 237, 228, .75); }
/* booking */
.k-book { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4em; padding: 0 5em 4em; background: #15100d; }
.k-bookl { display: grid; gap: 1em; } .k-bookl p:last-child { margin: 0; max-width: 24em; font-size: 1.3em; color: rgba(244, 237, 228, .75); }
.k-widget { position: relative; display: grid; gap: .55em; padding: 2em 2.2em; border-radius: 1.6em; background: #f4ede4; color: #1b1410; box-shadow: 0 2em 4em -2em rgba(0, 0, 0, .8); }
.k-lbl { margin: .5em 0 0; font: 700 .85em var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #8a7a6c; }
.k-chips { display: flex; flex-wrap: wrap; gap: .6em; margin: 0; }
.k-chips button { padding: .6em 1.2em; border: 1px solid #d9cbbb; border-radius: 999px; background: #fff; color: #1b1410; font: 600 1.1em var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.k-chips button:hover { border-color: #c4602e; transform: translateY(-1px); } .k-chips button.is-on { background: #1b1410; border-color: #1b1410; color: #fff; }
.k-go { margin-top: 1em; padding: 1em; font-size: 1.2em; }
.k-ok { position: absolute; left: 2.2em; right: 2.2em; bottom: 2em; display: none; grid-template-columns: auto 1fr; align-items: center; gap: .1em 1em; margin: 0; padding: 1em 1.2em; border-radius: 1em; background: #1f6b4a; color: #fff; opacity: 0; }
.kx.is-booked .k-ok { display: grid; }
.k-ok i { grid-row: span 2; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #6fe3a8; } .k-ok svg { width: 1.6em; height: 1.6em; fill: none; stroke: #0b2a1c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.k-ok b { font-size: 1.3em; } .k-ok small { color: #cdeedd; }
.k-foot { position: absolute; left: 5em; right: 26em; bottom: 1.6em; display: flex; align-items: baseline; gap: 2.4em; padding-top: 1.2em; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 1em; color: rgba(244, 237, 228, .6); } .k-foot .k-logo { margin-right: auto; font-size: 1.5em; color: #fff; }
/* the studio's screens over the site: idle, the wireframe, the code, the publish bar */
.kx__idle { position: absolute; inset: 3.2em 0 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 1em; background: radial-gradient(60% 70% at 50% 45%, #10283a, #070b11); }
.kx__idle b { font: 600 7em var(--sans); letter-spacing: .3em; color: #c8fff0; text-shadow: 0 0 .4em rgba(88, 240, 200, .6); animation: rzBreath 4s ease-in-out infinite; } .kx__idle small { font: 600 1.6em var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #58f0c8; }
@keyframes rzBreath { 50% { opacity: .75; } }
.kx__wire { position: absolute; inset: 3.2em 0 0; z-index: 4; background: #0c1219; pointer-events: none; }
.kx__wire i { position: absolute; border: .18em dashed rgba(79, 210, 255, .65); border-radius: .6em; background: rgba(79, 210, 255, .07); opacity: 0; }
.kx__wire .w-nav { left: 3%; top: 3%; width: 94%; height: 7%; } .kx__wire .w-h1 { left: 4%; top: 25%; width: 40%; height: 12%; } .kx__wire .w-h1b { left: 4%; top: 39%; width: 30%; height: 12%; }
.kx__wire .w-p { left: 4%; top: 55%; width: 32%; height: 6%; } .kx__wire .w-btn { left: 4%; top: 66%; width: 13%; height: 7.5%; border-radius: 99px; } .kx__wire .w-btn2 { left: 19%; top: 66%; width: 13%; height: 7.5%; border-radius: 99px; }
.kx__wire .w-img { left: 52%; top: 14%; width: 44%; height: 66%; } .kx__wire .w-rate { left: 80%; top: 84%; width: 16%; height: 10%; }
.kx__page { clip-path: inset(0 0% 0 0); }
.kx__code { position: absolute; right: 2.4%; top: 12%; z-index: 6; display: grid; align-content: start; gap: .35em; width: 46%; padding: 1.4em 1.6em; border-radius: 1em; background: rgba(9, 14, 22, .94); border: 1px solid rgba(79, 210, 255, .3); box-shadow: 0 2em 4em -1em rgba(0, 0, 0, .8); opacity: 0; }
.kx__file { margin: 0 0 .5em; font: 600 .95em var(--sans); letter-spacing: .08em; color: #8593a5; }
.kx__code code { font: 500 1.05em/1.5 ui-monospace, Consolas, monospace; color: #c8d2de; white-space: pre; opacity: 0; }
.kx__code .c-t { color: #ff8a6a; } .kx__code .c-a { color: #9fd8ff; } .kx__code .c-s { color: #b5e48c; } .kx__code .c-k { color: #c792ea; } .kx__code .c-n { color: #ffd84a; } .kx__code .c-m { color: #6b7a8c; }
.kx__pub { position: absolute; left: 0; right: 0; bottom: 2.4em; z-index: 7; width: fit-content; margin: 0 auto; display: flex; align-items: center; gap: 1.4em; padding: .9em .9em .9em 1.6em; border-radius: 999px; background: rgba(8, 13, 20, .9); border: 1px solid rgba(88, 240, 200, .4); box-shadow: 0 1.6em 3em -1em rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 1.15em; transform: translateY(260%); }
.kx__pubi { font: 600 1em var(--sans); color: #8593a5; } .kx__pubi b { letter-spacing: .2em; color: #58f0c8; } .kx__pubu { font: 600 1.05em ui-monospace, Consolas, monospace; color: #fff; }
.kx__prog { position: relative; width: 9em; height: .4em; overflow: hidden; border-radius: 1em; background: rgba(255, 255, 255, .1); } .kx__prog i { position: absolute; inset: 0; background: linear-gradient(90deg, #4fd2ff, #58f0c8); transform: scaleX(0); transform-origin: 0 50%; }
.kx__go, .kx__done { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.4em; border-radius: 999px; font: 700 1em var(--sans); font-style: normal; }
.kx__go { background: #58f0c8; color: #04130f; } .kx__done { display: none; background: rgba(111, 227, 168, .16); color: #6fe3a8; } .kx__done svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 3; }
.kx[data-pub="3"] .kx__go { display: none; } .kx[data-pub="3"] .kx__done { display: inline-flex; } .kx[data-pub="3"] .kx__prog { display: none; }
.kx__pub .rz__conf { left: 80%; top: 0; }
/* the café on a phone (beside the presentation; alone below a small stage) */
.k-m { position: absolute; right: 4%; top: 7%; height: 86%; aspect-ratio: 9 / 19.5; z-index: 5; display: grid; pointer-events: none; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 2.2em; background: #0f0c0a; color: #f4ede4; font-size: .78em; opacity: 0;
  box-shadow: 0 0 0 .5em #070a0f, 0 0 0 calc(.5em + 1px) rgba(255, 255, 255, .14), 0 3em 5em -1.5em rgba(0, 0, 0, .9), 0 0 4em -1.4em rgba(79, 210, 255, .5); }
.k-m__st { display: flex; justify-content: space-between; padding: .9em 1.6em .4em; font: 700 .95em var(--sans); } .k-m__st .ws__ph-ico i { background: #f4ede4; }
.k-m__scr { position: relative; overflow: hidden; } .k-m__page { position: absolute; inset: 0 0 auto; height: 400%; transition: transform .8s cubic-bezier(.65,0,.25,1); }
.k-m__s { position: relative; height: 25%; overflow: hidden; display: flex; flex-direction: column; gap: .9em; padding: 1.2em; box-sizing: border-box; }
.k-m__hero { justify-content: flex-end; padding-bottom: 2.4em; } .k-m__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .k-m__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 8, 6, .9), rgba(12, 8, 6, .1)); }
.k-m__hero > *:not(img) { position: relative; z-index: 1; } .k-m__nav { position: absolute !important; left: 1.2em; right: 1.2em; top: 1em; display: flex; justify-content: space-between; align-items: center; margin: 0; }
.k-m__burger { display: grid; gap: .3em; } .k-m__burger i { width: 1.6em; height: 2px; background: #fff; }
.k-m__h { margin: 0; font: 300 2.8em/1 var(--serif); color: #fff; } .k-m .k-btn { padding: .9em; font-size: 1.15em; }
.k-m__menu { background: #f4ede4; color: #1b1410; justify-content: center; } .k-m__row { display: grid; grid-template-columns: 4.4em 1fr auto; align-items: center; gap: .9em; margin: 0; padding: .6em; border-radius: 1em; background: #fff; }
.k-m__row img { width: 4.4em; height: 4.4em; border-radius: .7em; object-fit: cover; } .k-m__row b { font-size: 1.15em; } .k-m__row em { font: italic 500 1.3em var(--serif); color: #c4602e; }
.k-m__space { padding: 0; justify-content: flex-end; } .k-m__space img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .k-m__q { position: relative; margin: 1.2em; padding: 1em; border-radius: 1em; background: rgba(20, 14, 10, .6); font-size: 1.2em; } .k-m__q svg { width: 1em; height: 1em; fill: #f0c08e; vertical-align: -.1em; }
.k-m__book { justify-content: center; background: #15100d; } .k-m__h2 { margin: 0; font: 300 2.4em var(--serif); } .k-m__pick { display: flex; gap: .5em; margin: 0; } .k-m__pick span { flex: 1; padding: .7em .4em; border-radius: .8em; background: #f4ede4; color: #1b1410; text-align: center; font-weight: 700; }
.k-m__note { position: absolute; left: .8em; right: .8em; top: 2.6em; z-index: 3; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8em; margin: 0; padding: .9em 1em; border-radius: 1.2em; background: rgba(244, 237, 228, .94); color: #1b1410; box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .7); opacity: 0; }
.k-m__note i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .8em; background: #c4602e; } .k-m__note svg { width: 1.5em; height: 1.5em; fill: none; stroke: #fff; stroke-width: 2; }
.k-m__note b { display: block; font-size: 1.1em; } .k-m__note small { color: #6b5a4c; }
.rz__ov[data-sec="1"] .k-m__page { transform: translateY(-25%); } .rz__ov[data-sec="2"] .k-m__page { transform: translateY(-50%); } .rz__ov[data-sec="3"] .k-m__page { transform: translateY(-75%); }
/* the owner's word, and the visitor's choice of view */
.rz__react { position: absolute; left: 2.6%; top: 9%; z-index: 6; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1em; margin: 0; padding: 1em 1.6em 1em 1em; border-radius: 1.4em; background: rgba(244, 237, 228, .95); color: #1b1410; box-shadow: 0 1.6em 3em -1em rgba(0, 0, 0, .7); opacity: 0; pointer-events: none !important; }
.rz__react i { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: #ff5a7a; } .rz__react svg { width: 1.6em; height: 1.6em; fill: #fff; }
.rz__react small { display: block; font: 700 .85em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8a7a6c; } .rz__react b { font: 600 1.45em var(--sans); }
.rz__dev { position: absolute; left: 12em; top: .32em; z-index: 7; display: flex; gap: .3em; margin: 0; padding: .2em; font-size: .78em; border-radius: 999px; background: rgba(8, 13, 20, .78); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none !important; transition: opacity .4s; }
.rz__ov.is-full .rz__dev { opacity: 1; pointer-events: auto !important; }
.rz__dev button { display: inline-flex; align-items: center; gap: .5em; padding: .4em 1em; border: 0; border-radius: 999px; background: transparent; color: #c8d2de; font: 600 1.05em var(--sans); cursor: pointer; }
.rz__dev svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; } .rz__dev button[aria-pressed="true"] { background: var(--c); color: #061019; }
.rz__ov[data-dev="phone"]::before { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(4, 7, 12, .7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rz__ov[data-dev="phone"] .k-m { right: auto; left: 50%; opacity: 1 !important; transform: translateX(-50%) !important; pointer-events: auto; }

/* ---------------------------------------------------------------- TRGOVINA: the online shop and the shop's own orders */
.rz__screen[data-scr="off"] .sx, .rz__screen[data-scr="off"] .ax, .rz__screen[data-scr="shop"] .ax { display: none; }
.rz__off { position: absolute; inset: 0; z-index: 9; background: radial-gradient(70% 70% at 30% 20%, #10161e, #030507); display: none; } .rz__screen[data-scr="off"] .rz__off { display: block; }
.sx { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; background: #f6f4f0; color: #18202a; font-family: var(--sans); }
.sx__view { position: relative; overflow: hidden; }
.s-logo { font: 800 1.7em var(--sans); letter-spacing: -.02em; } .s-logo i { font-style: normal; color: #1f9d6b; }
.s-nav { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 2.2em; padding: 1.4em 3.6em; font: 600 1.05em var(--sans); color: #18202a; background: rgba(246, 244, 240, .92); border-bottom: 1px solid #e4dfd6; }
.sx[data-v="home"]:not(.is-scrolled) .s-nav { background: transparent; border-color: transparent; color: #fff; } .s-nav { transition: background .4s, color .4s; }
.s-nav .s-logo { margin-right: auto; } .s-ico { position: relative; display: grid; place-items: center; width: 2.4em; height: 2.4em; } .s-ico svg { width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-cart em { position: absolute; right: -.3em; top: -.3em; display: grid; place-items: center; min-width: 1.5em; height: 1.5em; border-radius: 1em; background: #1f9d6b; color: #fff; font: 700 .8em var(--sans); font-style: normal; }
.s-cart em.is-tick { animation: wsTick .9s var(--ease-out); }
.s-v { position: absolute; inset: 0; display: none; }
.sx[data-v="home"] .s-home, .sx[data-v="prod"] .s-prod, .sx[data-v="pay"] .s-pay { display: block; animation: rzView .5s cubic-bezier(.2,.8,.3,1); }
@keyframes rzView { from { opacity: 0; transform: translateY(1.5%); } }
.s-btn { display: inline-flex; align-items: center; justify-content: center; padding: .9em 1.8em; border: 1px solid transparent; border-radius: 999px; background: #18202a; color: #fff; font: 700 1.1em var(--sans); font-style: normal; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.s-btn:hover { transform: translateY(-2px); box-shadow: 0 .8em 1.6em -.7em rgba(0, 0, 0, .6); }
.s-btn--ghost { background: transparent; border-color: currentColor; }
.s-page { position: absolute; left: 0; right: 0; top: 0; height: 200%; } .s-sec { position: relative; height: 50%; overflow: hidden; }
.s-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .s-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 14, 20, .82), rgba(10, 14, 20, .35) 45%, rgba(10, 14, 20, 0) 70%); }
.s-copy { position: absolute; left: 3.6em; top: 26%; z-index: 2; display: grid; gap: 1.2em; color: #fff; }
.s-copy small { font: 700 .95em var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6fe3a8; }
.s-h1 { margin: 0; font: 800 5.4em/.98 var(--sans); letter-spacing: -.035em; } .s-lead { margin: 0; max-width: 26em; font-size: 1.35em; color: rgba(255, 255, 255, .82); }
.s-acts { display: flex; gap: 1em; margin: .4em 0 0; } .s-hero .s-btn { background: #fff; color: #18202a; } .s-hero .s-btn--ghost { background: transparent; color: #fff; }
.s-grid { display: grid; align-content: start; gap: 2em; padding: 8em 3.6em 2em; }
.s-h2 { margin: 0; font: 800 2.6em var(--sans); letter-spacing: -.02em; }
.s-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em; }
.s-card { position: relative; margin: 0; overflow: hidden; border-radius: 1.2em; background: #fff; box-shadow: 0 1em 2em -1.4em rgba(0, 0, 0, .3); transition: transform .3s, box-shadow .3s; }
.s-card:hover { transform: translateY(-3%) scale(1.03); box-shadow: 0 2em 3em -1.6em rgba(0, 0, 0, .45); }
.s-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.s-card figcaption { display: flex; justify-content: space-between; padding: 1em 1.2em 1.2em; font-size: 1.15em; } .s-card span { font-weight: 700; color: #1f9d6b; }
.s-tag { position: absolute; left: 1em; top: 1em; padding: .35em .8em; border-radius: 999px; background: #fff; font: 800 .85em var(--sans); font-style: normal; letter-spacing: .04em; }
/* product */
.s-prod { padding: 7em 3.6em 2.4em; } .s-prod.s-v { display: none; } .sx[data-v="prod"] .s-prod { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.6em; }
.s-pics { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 1em; min-height: 0; }
.s-pic { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; border-radius: 1.4em; object-fit: cover; background: #1e2430; opacity: 0; transition: opacity .45s; }
.sx[data-col="0"] .s-pic--0, .sx[data-col="1"] .s-pic--1, .sx[data-col="2"] .s-pic--2 { opacity: 1; }
.s-thumbs { display: flex; gap: .8em; margin: 0; } .s-thumbs img { width: 5em; height: 5em; border-radius: .8em; object-fit: cover; opacity: .55; }
.sx[data-col="0"] .s-thumbs img:nth-child(1), .sx[data-col="1"] .s-thumbs img:nth-child(2), .sx[data-col="2"] .s-thumbs img:nth-child(3) { opacity: 1; outline: 2px solid #18202a; outline-offset: 2px; }
.s-info { display: grid; align-content: center; gap: .7em; }
.s-crumb { font: 600 .95em var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8a929c; } .s-name { margin: 0; font: 800 3.2em/1 var(--sans); letter-spacing: -.03em; }
.s-stars { display: flex; align-items: center; gap: .15em; margin: 0; } .s-stars svg { width: 1.2em; height: 1.2em; fill: #f5a524; } .s-stars span { margin-left: .6em; color: #6b7480; }
.s-price { margin: .2em 0; font: 800 2.4em var(--sans); } .s-lbl { margin: .6em 0 0; font-size: 1.05em; color: #6b7480; } .s-lbl b { color: #18202a; }
.s-sw { display: flex; gap: .8em; margin: 0; } .s-sw button { width: 2.6em; height: 2.6em; border: 0; border-radius: 50%; background: var(--k); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.s-sw button:hover { transform: scale(1.1); } .s-sw button.is-on { box-shadow: 0 0 0 .2em #f6f4f0, 0 0 0 .38em #18202a; }
.s-sizes { display: flex; gap: .6em; margin: 0; } .s-sizes span { display: grid; place-items: center; width: 3em; height: 2.6em; border: 1px solid #d9d4cb; border-radius: .7em; font-weight: 700; } .s-sizes .is-on { background: #18202a; border-color: #18202a; color: #fff; }
.s-stock { display: flex; align-items: center; gap: .6em; margin: .4em 0 0; font-weight: 600; color: #1f7a54; } .s-stock i { width: .7em; height: .7em; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 .3em rgba(31, 157, 107, .2); }
.s-add { width: 100%; margin-top: .6em; padding: 1.1em; font-size: 1.25em; border: 0; }
.s-perks { display: flex; gap: 1.6em; margin: .4em 0 0; font-size: .95em; color: #6b7480; }
.s-fly { position: absolute; left: 17%; top: calc(48.8% - 10cqw); z-index: 6; width: 20%; height: auto; border-radius: 1em; opacity: 0; pointer-events: none; }
/* the cart */
.s-cartbox { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; display: grid; align-content: start; gap: 1.1em; width: 32%; padding: 7em 2.4em 2.4em; background: #fff; box-shadow: -2em 0 4em -1em rgba(0, 0, 0, .25); transform: translateX(105%); }
.s-ch { margin: 0; font: 800 1.8em var(--sans); } .s-ch span { color: #8a929c; font-weight: 600; }
.s-line { display: grid; grid-template-columns: 4.6em 1fr auto; align-items: center; gap: 1em; margin: 0; padding: .7em; border-radius: 1em; background: #f6f4f0; }
.s-line img { width: 4.6em; height: 4.6em; border-radius: .8em; object-fit: cover; } .s-line b { display: block; font-size: 1.1em; } .s-line small { color: #6b7480; } .s-line em { font: 800 1.1em var(--sans); font-style: normal; }
.s-line--up { border: 1px dashed #1f9d6b; background: #f0fbf6; } .s-plus { padding: .5em 1em; border-radius: 999px; background: #1f9d6b; color: #fff !important; } .s-added { display: none; }
.sx.is-up .s-plus { display: none; } .sx.is-up .s-added { display: inline; } .sx.is-up .s-line--up { border-style: solid; }
.s-free { display: grid; gap: .5em; margin: .4em 0 0; } .s-free small { font-weight: 600; color: #1f7a54; } .s-free span { height: .5em; border-radius: 1em; background: #e6e2da; overflow: hidden; }
.s-free i { display: block; width: 88%; height: 100%; background: #1f9d6b; transition: width .6s cubic-bezier(.2,.8,.3,1); } .sx.is-up .s-free i { width: 100%; }
.s-total { display: flex; justify-content: space-between; margin: .4em 0 0; font-size: 1.3em; } .s-total b { font-weight: 800; }
.s-go { width: 100%; padding: 1em; box-sizing: border-box; }
/* checkout */
.s-pay { padding: 7.6em 3.6em 2.4em; } .sx[data-v="pay"] .s-pay { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3em; align-items: start; }
.s-form { display: grid; gap: .9em; } .s-opt { display: flex; justify-content: space-between; margin: 0; padding: 1.1em 1.3em; border: 1px solid #d9d4cb; border-radius: 1em; font-size: 1.15em; } .s-opt span { color: #6b7480; }
.s-opt.is-on { border: 2px solid #18202a; } .s-addr { margin: 0; padding: 1em 1.3em; border-radius: 1em; background: #fff; font-size: 1.1em; color: #4a535e; }
.s-sum { display: grid; gap: 1em; padding: 1.8em; border-radius: 1.4em; background: #fff; box-shadow: 0 1.4em 3em -2em rgba(0, 0, 0, .4); }
.s-paybtn { width: 100%; padding: 1.1em; box-sizing: border-box; background: #1f9d6b; font-size: 1.3em; }
.s-done { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: .6em; background: rgba(246, 244, 240, .97); text-align: center; opacity: 0; }
.sx:not(.is-done) .s-done { visibility: hidden; }
.s-done > i { display: grid; place-items: center; width: 7em; height: 7em; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 1.2em rgba(31, 157, 107, .15); } .s-done svg { width: 4em; height: 4em; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.s-done p { margin: 0; font-size: 1.4em; } .s-done .s-h2 { font-size: 3em; } .s-done small { font-size: 1.05em; color: #6b7480; }
/* the shop's own orders (legible also small, on his counter) */
.ax { position: absolute; inset: 0; z-index: 8; display: grid; grid-template-columns: 17em 1fr; background: #0b1118; color: #e9eef4; font-family: var(--sans); opacity: 0; }
.ax__side { display: grid; align-content: start; gap: 3em; padding: 2.4em 2em; background: #070b10; border-right: 1px solid rgba(255, 255, 255, .06); } .ax__side .s-logo { color: #fff; } .ax__side .s-logo i { color: #6fe3a8; }
.ax__side p { display: grid; gap: .5em; margin: 0; } .ax__side span { display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-radius: .8em; font: 600 1.15em var(--sans); color: #8593a5; }
.ax__side svg { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .ax__side .is-on { background: rgba(111, 227, 168, .12); color: #6fe3a8; }
.ax__main { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 2em; padding: 2.4em 3em; min-height: 0; }
.ax__h { display: flex; align-items: center; justify-content: space-between; margin: 0; } .ax__h b { font: 800 2.6em var(--sans); letter-spacing: -.02em; }
.ax__live { display: flex; align-items: center; gap: .6em; font: 700 1.2em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6fe3a8; } .ax__live i { width: .8em; height: .8em; border-radius: 50%; background: #6fe3a8; animation: wsLive 1.8s ease-out infinite; }
.ax__kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.ax__kpi p { display: grid; gap: .3em; margin: 0; padding: 1.4em 1.8em; border-radius: 1.2em; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.ax__kpi small { font: 600 1.15em var(--sans); color: #8593a5; } .ax__kpi b { font: 800 4.6em/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .ax__kpi p:first-child b { color: #6fe3a8; }
.ax__kpi b.is-tick { display: inline-block; animation: wsTick .9s var(--ease-out); }
.ax__body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.8em; min-height: 0; }
.ax__list { list-style: none; display: grid; align-content: start; gap: .55em; margin: 0; padding: 0; overflow: hidden; }
.ax__list li { display: grid; grid-template-columns: 5.4em 9.6em 1fr 7.4em 8.2em; align-items: center; gap: .8em; padding: .85em 1.2em; border-radius: .9em; background: rgba(255, 255, 255, .04); font-size: 1.12em; color: #b9c4d1; }
.ax__list li.is-new { background: rgba(111, 227, 168, .12); box-shadow: inset 0 0 0 1px rgba(111, 227, 168, .45); animation: rzRow .6s cubic-bezier(.16,1,.3,1); }
@keyframes rzRow { from { opacity: 0; transform: translateY(-60%) scale(.96); } }
.ax__list b { color: #fff; } .ax__list span:nth-of-type(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ax__list em { font-style: normal; font-weight: 700; color: #fff; text-align: right; }
.ax__list i { justify-self: end; padding: .3em .8em; border-radius: 999px; background: rgba(255, 216, 74, .14); color: #ffd84a; font: 700 .8em var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.ax__list li:first-child i, .ax__list li:nth-child(2) i { background: rgba(111, 227, 168, .16); color: #6fe3a8; }
.ax__map { position: relative; display: grid; align-content: start; margin: 0; padding: 1.6em; border-radius: 1.2em; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.ax__map svg { width: 100%; height: auto; } .ax__map path { fill: rgba(111, 227, 168, .07); stroke: rgba(111, 227, 168, .55); stroke-width: .6; stroke-linejoin: round; }
.ax__map figcaption { margin-top: .8em; font: 600 1.05em var(--sans); color: #8593a5; }
.ax__pin { position: absolute; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; background: #6fe3a8; box-shadow: 0 0 .8em #6fe3a8; opacity: 0; transform: scale(0); transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.ax__geo { position: relative; }
.ax__pin.is-on { opacity: 1; transform: scale(1); } .ax__pin.is-new { background: #ffd84a; box-shadow: 0 0 0 .5em rgba(255, 216, 74, .25), 0 0 1.4em #ffd84a; }
.ax__toast { position: absolute; right: 3em; top: 2.2em; z-index: 3; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1em; margin: 0; padding: 1em 1.6em 1em 1em; border-radius: 1.2em; background: #f4f1ec; color: #18202a; box-shadow: 0 1.4em 3em -1em rgba(0, 0, 0, .8); opacity: 0; }
.ax__toast i { display: grid; place-items: center; width: 3em; height: 3em; border-radius: .9em; background: #1f9d6b; } .ax__toast svg { width: 1.6em; height: 1.6em; fill: none; stroke: #fff; stroke-width: 2; }
.ax__toast b { display: block; font-size: 1.35em; } .ax__toast small { font-size: 1.05em; color: #4a535e; }
/* the visitor's own order */
.rz__try { position: absolute; right: 2.4%; bottom: 7%; z-index: 6; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9em; padding: .8em 1.6em .8em .8em; border: 1px solid rgba(111, 227, 168, .5); border-radius: 999px; background: rgba(8, 13, 20, .86); color: #fff; font: 600 1.2em var(--sans); text-align: left; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1.2em 2.4em -1em rgba(0, 0, 0, .8), 0 0 2em -.6em rgba(111, 227, 168, .6); opacity: 0; transform: translateY(-30%); pointer-events: none !important; transition: opacity .4s, transform .4s cubic-bezier(.16,1,.3,1); }
.rz.is-try .rz__try { opacity: 1; transform: none; pointer-events: auto !important; } .rz__try:hover { border-color: #6fe3a8; } .rz__try:active { transform: scale(.96); }
.rz__try i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #6fe3a8; animation: rzPulse 1.6s ease-out infinite; } .rz__try svg { width: 1.4em; height: 1.4em; fill: none; stroke: #04130f; stroke-width: 2.2; }
.rz__try b { display: block; } .rz__try small { display: block; font-weight: 500; font-size: .8em; color: #93a1b2; }
@keyframes rzPulse { 0% { box-shadow: 0 0 0 0 rgba(111, 227, 168, .6); } 100% { box-shadow: 0 0 0 1em rgba(111, 227, 168, 0); } }

/* ---------------------------------------------------------------- PRENOVA: the old and the new, one line between them */
.rn { position: absolute; inset: 0; --cut: 50%; container-type: size; font-size: 1cqw; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.rn__side { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.rn__old { z-index: 0; } .rn__new { z-index: 1; grid-template-rows: auto 1fr; clip-path: inset(0 0 0 var(--cut)); }
.rn.no-old .rn__tag--old, .rn.no-old .rn__time--old, .rn.no-new .rn__tag--new, .rn.no-new .rn__time--new { visibility: hidden; }
.rn__v { position: absolute; inset: 0; display: none; }
.rn[data-v="home"] .o-home, .rn[data-v="search"] .o-search, .rn[data-v="prod"] .o-prod, .rn[data-v="buy"] .o-buy, .rn[data-v="phone"] .o-phone,
.rn[data-v="home"] .n-home, .rn[data-v="search"] .n-search, .rn[data-v="prod"] .n-prod, .rn[data-v="buy"] .n-buy, .rn[data-v="phone"] .n-phone { display: block; }
.rn__line { position: absolute; top: 0; bottom: 0; left: var(--cut); z-index: 10; width: .2em; margin-left: -.1em; background: #fff; box-shadow: 0 0 1.2em rgba(0, 0, 0, .55); pointer-events: none; }
.rn__knob { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; gap: .5em; width: 4.4em; height: 4.4em; margin: -2.2em 0 0 -2.2em; border: .22em solid #fff; border-radius: 50%; background: rgba(20, 16, 12, .38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5); color: #fff; font: 700 1.5em/1 var(--sans); transition: transform .25s; }
.rn__knob i { font-style: normal; } .rn.is-drag .rn__knob, .rn:hover .rn__knob { transform: scale(1.1); }
.rn__tag { position: absolute; top: 7.4em; z-index: 9; padding: .5em 1.1em; border-radius: 999px; background: rgba(20, 16, 12, .72); color: #fff; font: 800 1.05em var(--sans); letter-spacing: .14em; pointer-events: none; }
.rn__tag--old { left: 1.6em; } .rn__tag--new { right: 1.6em; background: rgba(255, 138, 74, .9); color: #1a0d05; }
.rn__time { position: absolute; top: 10.6em; z-index: 9; margin: 0; padding: .45em 1em; border-radius: 999px; background: rgba(20, 16, 12, .8); color: #c8d2de; font: 600 1em var(--sans); opacity: 0; pointer-events: none; }
.rn__time b { font-variant-numeric: tabular-nums; color: #fff; } .rn__time--old { left: 1.6em; } .rn__time--new { right: 1.6em; }
.rn.is-tdone .rn__time--old b { color: #ff7a6a; } .rn__time--new b { color: #6fe3a8; }
.rn__hint { position: absolute; left: 0; right: 0; bottom: 2.6em; z-index: 11; width: fit-content; margin: 0 auto; padding: .7em 1.4em; border-radius: 999px; background: rgba(20, 16, 12, .8); color: #fff; font: 600 1.15em var(--sans); opacity: 0; pointer-events: none; }
.rn__hint span { color: #ff8a4a; font-weight: 800; }
.rn__sum { position: absolute; left: 0; right: 0; bottom: 2.2em; z-index: 11; display: flex; justify-content: center; gap: .8em; margin: 0; pointer-events: none; }
.rn__sum span { display: grid; gap: .1em; padding: .8em 1.3em; border-radius: 1em; background: rgba(13, 15, 18, .9); border: 1px solid rgba(255, 138, 74, .45); color: #fff; font: 700 1.15em var(--sans); opacity: 0; box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .8); }
.rn__sum small { font: 600 .72em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ff8a4a; }
.rn .rz__cur { z-index: 12; }
/* the old: a window of its time */
.rn__old { background: #c0c0c0; color: #000; font-family: "Times New Roman", Times, serif; }
.o-chrome { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: .95em; }
.o-title { display: flex; align-items: center; gap: .5em; margin: 0; padding: .35em .5em; background: linear-gradient(90deg, #0a246a, #3a6ea5 60%, #a6caf0); color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; }
.o-ie { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: #2a7fd8; color: #fff; font: italic 900 1em Georgia, serif; } .o-wb { display: flex; gap: .2em; margin-left: auto; } .o-wb i { display: grid; place-items: center; width: 1.4em; height: 1.2em; background: #d4d0c8; color: #000; font: 700 .8em Tahoma, sans-serif; font-style: normal; border: 1px outset #fff; }
.o-menu { display: flex; gap: 1.2em; margin: 0; padding: .25em .6em; background: #d4d0c8; border-bottom: 1px solid #808080; }
.o-addr { display: flex; align-items: center; gap: .5em; margin: 0; padding: .3em .6em; background: #d4d0c8; border-bottom: 2px groove #fff; } .o-addr b { flex: 1; padding: .15em .4em; background: #fff; border: 2px inset #fff; font-weight: 400; } .o-addr em { font-style: normal; padding: .1em .6em; border: 2px outset #fff; }
.o-body { position: relative; overflow: hidden; background: #c0c0c0 repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 .3em, transparent .3em .6em); }
.o-status { display: flex; gap: 1em; margin: 0; padding: .2em .6em; background: #d4d0c8; border-top: 1px solid #fff; font: .85em Tahoma, sans-serif; } .o-status span:first-child { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.o-prog { position: relative; width: 12em; height: 1em; border: 1px inset #fff; background: #fff; } .o-prog b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--op, 0%); background: repeating-linear-gradient(90deg, #0a246a 0 .6em, transparent .6em .8em); }
.o-wrap { position: relative; width: 58em; margin: .8em auto; background: #fff; border: 2px outset #ddd; font-size: 1.15em; }
.o-head { display: flex; align-items: baseline; gap: 1em; padding: .7em 1em; background: #000080; } .o-head b { font: 700 2.3em "Times New Roman", serif; color: #ffff00; letter-spacing: .02em; }
.o-blink { font: 700 1.2em "Comic Sans MS", cursive; color: #ff0000; animation: rzBlink 1s steps(1) infinite; } @keyframes rzBlink { 50% { visibility: hidden; } }
.o-head small { margin-left: auto; font: .85em Arial, sans-serif; color: #fff; }
.o-nav { margin: 0; padding: .3em 1em; background: #c0c0c0; font: .95em Arial, sans-serif; } .o-nav u { color: #0000ee; } .o-nav u:nth-child(3) { color: #551a8b; }
.o-marq { overflow: hidden; padding: .2em 0; background: #ffff00; white-space: nowrap; font: 700 1.1em "Comic Sans MS", cursive; color: #ff0000; } .o-marq span { display: inline-block; padding-left: 100%; animation: rzOMarq 9s linear infinite; } @keyframes rzOMarq { to { transform: translateX(-100%); } }
.o-cols { display: grid; grid-template-columns: 11em 1fr 12em; }
.o-side { margin: 0; padding: .6em .4em; list-style: none; background: #000080; font: .92em Verdana, sans-serif; } .o-side li { padding: .22em .3em; color: #fff; text-decoration: underline; }
.o-main { padding: .6em 1em; } .o-h { margin: .2em 0 .6em; font: 700 1.6em "Comic Sans MS", cursive; color: #cc0000; text-align: center; text-shadow: 1px 1px 0 #ffcc00; }
.o-row { margin: 0; overflow: hidden; font-size: .95em; text-align: justify; } .o-img { float: left; width: 12em; height: auto; margin: 0 .8em .4em 0; border: 3px ridge #999; image-rendering: pixelated; }
.o-uc { display: flex; align-items: center; gap: .6em; justify-content: center; margin: .8em 0 .4em; font: 700 1em Arial, sans-serif; } .o-uc i { width: 4em; height: 1.1em; background: repeating-linear-gradient(-45deg, #000 0 .5em, #ffcc00 .5em 1em); }
.o-count { margin: 0; text-align: center; font: .9em Arial, sans-serif; } .o-count b { padding: 0 .3em; background: #000; color: #00ff00; font: 1.1em "Courier New", monospace; letter-spacing: .2em; }
.o-right { display: grid; align-content: start; gap: .6em; padding: .6em; background: #eeeeee; border-left: 1px solid #999; }
.o-box { margin: 0; padding: .5em; border: 2px dashed #ff0000; background: #ffffcc; font: 700 .9em Arial, sans-serif; color: #cc0000; text-align: center; } .o-box--y { border-color: #0000ee; background: #ccffff; color: #0000ee; }
.o-flash { margin: 0; padding: 1.2em .5em; border: 1px solid #999; background: #ddd; font: .8em Arial, sans-serif; color: #555; text-align: center; }
.o-foot { margin: 0; padding: .5em; border-top: 1px solid #999; font: .78em Arial, sans-serif; color: #666; text-align: center; }
.o-veil { position: absolute; inset: 0; z-index: 3; background: #fff; }
.o-pad { padding: 1em 1.6em 1.6em; } .o-small { font: .85em Arial, sans-serif; color: #333; } .o-crumb { margin: 0 0 .4em; font: .9em Arial, sans-serif; }
.o-form { display: flex; align-items: center; gap: .6em; margin: 1em 0; font: 1.05em Arial, sans-serif; }
.o-input { display: inline-flex; align-items: center; width: 16em; height: 1.6em; padding: 0 .3em; background: #fff; border: 2px inset #ddd; font: 1em "Times New Roman", serif; }
.o-btn { padding: .2em .9em; border: 2px outset #fff; background: #d4d0c8; color: #000; font: .95em Tahoma, Arial, sans-serif; cursor: pointer; } .o-btn:active { border-style: inset; }
.o-wait, .o-res { display: none; margin: .6em 0; font: 1em Arial, sans-serif; } .rn.is-owait .o-wait { display: flex; align-items: center; gap: .5em; } .rn.is-onone .o-res { display: block; }
.o-hg { width: 1.2em; height: 1.4em; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h12v5l-4 5 4 5v5H6v-5l4-5-4-5z' fill='%23fff' stroke='%23000' stroke-width='1.5'/><path d='M8 4h8v2.6l-4 4.4-4-4.4zM8 20l4-4.5 4 4.5z' fill='%23c9a14a'/></svg>") center / contain no-repeat; animation: rzHg 1s steps(2) infinite; }
.o-none { font: 700 1.3em Arial, sans-serif; color: #cc0000; } .o-tip { font: .85em Arial, sans-serif; color: #555; }
.o-img--s { width: 9em; } .o-tab { margin: .8em 0; border: 1px solid #000; border-collapse: collapse; font: .95em Arial, sans-serif; } .o-tab td { padding: .25em .9em; border: 1px solid #000; } .o-tab td:first-child { background: #ccccff; font-weight: 700; }
.o-call { margin: .4em 0; font: 700 1em Arial, sans-serif; color: #cc0000; }
.o-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .3em 1.6em; margin: .6em 0; font: .88em Arial, sans-serif; }
.o-fields label { display: grid; grid-template-columns: 7.6em 1fr; align-items: center; gap: .5em; } .o-fields i { height: 1.4em; padding: 0 .3em; background: #fff; border: 2px inset #ddd; font: normal 1em "Times New Roman", serif; }
.o-cap { display: flex; align-items: center; gap: .6em; margin: .6em 0; font: .9em Arial, sans-serif; } .o-cap i { width: 6em; height: 1.4em; background: #fff; border: 2px inset #ddd; }
.o-capimg { padding: .1em .5em; background: repeating-linear-gradient(20deg, #ccc 0 .2em, #eee .2em .5em); font: italic 700 1.3em "Courier New", monospace; letter-spacing: .25em; color: #444; transform: skewX(-12deg); text-decoration: line-through; }
.o-btns { display: flex; gap: .6em; margin: .4em 0 0; }
.o-dlg { position: absolute; left: 50%; top: 42%; z-index: 5; width: 26em; margin-left: -13em; background: #d4d0c8; border: 2px outset #fff; box-shadow: .3em .3em 0 rgba(0, 0, 0, .4); font: 1em Tahoma, Arial, sans-serif; opacity: 0; }
.o-dlgt { display: flex; justify-content: space-between; margin: 0; padding: .3em .5em; background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; font-weight: 700; } .o-dlgt i { font-style: normal; padding: 0 .4em; background: #d4d0c8; color: #000; }
.o-dlgb { display: flex; align-items: center; gap: .8em; margin: 0; padding: 1.2em 1em; } .o-x { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: #e00; color: #fff; font: 700 1.4em Arial, sans-serif; font-style: normal; }
.o-dlgf { margin: 0; padding: 0 0 1em; text-align: center; }
.rn__ph { position: absolute; left: 50%; top: 52%; height: 78%; aspect-ratio: 9 / 18.5; transform: translate(-50%, -50%); overflow: hidden; border-radius: 2.6em; border: .7em solid #111; box-shadow: 0 2em 4em -1em rgba(0, 0, 0, .6); }
.o-ph { background: #fff; } .o-mini { position: absolute; left: 0; top: 0; width: 66.7em; transform: scale(.3); transform-origin: 0 0; } .o-mini .o-wrap { margin: 0; }
.o-pinch { position: absolute; left: 50%; top: 50%; width: 0; height: 0; cursor: pointer; } .o-pinch i { position: absolute; left: -1.3em; top: -1.3em; width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(255, 138, 74, .55); border: .2em solid #fff; opacity: 0; }
.o-hbar { position: absolute; left: .4em; right: .4em; bottom: .3em; height: .5em; border-radius: 1em; background: rgba(0, 0, 0, .1); } .o-hbar i { display: block; width: 30%; height: 100%; border-radius: 1em; background: rgba(0, 0, 0, .35); }
.rn__note { position: absolute; top: 46%; z-index: 4; width: 14em; margin: 0; font: 600 1.25em var(--sans); } .rn__note--old { left: 6%; font-family: "Comic Sans MS", cursive; color: #cc0000; } .rn__note--new { right: 6%; color: #f2efe9; text-align: right; }
.o-phone .o-pinch { display: none; } .rn[data-v="phone"] .o-pinch { display: block; }
/* the new: calm, big, quick */
.rn__new { background: #0d0f12; color: #f2efe9; font-family: var(--sans); }
.n-chrome { display: flex; align-items: center; gap: 1em; padding: .7em 1.2em; background: #15181d; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: .95em; } .n-chrome .bb__dots { display: flex; gap: .4em; } .n-chrome .bb__dots i { width: .7em; height: .7em; border-radius: 50%; background: #3a3f48; }
.n-url { display: flex; align-items: center; gap: .5em; margin: 0 auto; padding: .35em 1.2em; border-radius: 999px; background: #0b0d10; color: #e9eef4; font: 600 1em var(--sans); } .n-url svg { width: 1em; height: 1em; fill: none; stroke: #6fe3a8; stroke-width: 1.6; }
.n-body { position: relative; overflow: hidden; }
.n-logo { font: italic 500 1.8em var(--serif); color: #fff; } .n-logo i { font-style: normal; color: #ff8a4a; }
.n-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.7em; border-radius: 999px; background: #ff8a4a; color: #1a0d05; font: 700 1.1em var(--sans); font-style: normal; }
.n-btn--ghost { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .3); } .n-btn--sm { padding: .55em 1em; font-size: .95em; background: rgba(255, 255, 255, .1); color: #fff; } .n-btn svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.n-heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: -1 1; } .n-home::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(10, 8, 6, .88), rgba(10, 8, 6, .35) 55%, rgba(10, 8, 6, .1)), linear-gradient(0deg, rgba(10, 8, 6, .75), transparent 45%); }
.n-nav { position: absolute; left: 50%; top: 1.4em; z-index: 2; display: flex; align-items: center; gap: 2em; width: 88%; margin-left: -44%; padding: .7em .8em .7em 1.6em; border-radius: 999px; background: rgba(20, 16, 12, .4); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 1.05em var(--sans); color: rgba(255, 255, 255, .85); box-sizing: border-box; }
.n-nav .n-logo { margin-right: auto; font-size: 1.6em; }
.n-copy { position: absolute; left: 54%; top: 17%; z-index: 2; display: grid; gap: 1.1em; } .n-copy small { font: 700 .95em var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #ff8a4a; }
.n-h1 { margin: 0; font: 800 5.6em/.95 var(--sans); letter-spacing: -.04em; color: #fff; } .n-lead { margin: 0; max-width: 24em; font-size: 1.3em; color: rgba(242, 239, 233, .8); } .n-acts { display: flex; gap: .9em; margin: .3em 0 0; }
.n-models { position: absolute; right: 3%; bottom: 5%; z-index: 2; display: flex; gap: 1em; }
.n-models figure { width: 12.4em; margin: 0; overflow: hidden; border-radius: 1.2em; background: rgba(20, 16, 12, .55); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.n-models img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #ece9e4; } .n-models figcaption { display: grid; gap: .1em; padding: .7em .9em .9em; } .n-models b { font-size: 1.1em; } .n-models small { color: rgba(242, 239, 233, .65); } .n-models em { font-style: normal; font-weight: 700; color: #ff8a4a; }
.n-search { display: grid !important; align-content: start; justify-items: center; gap: 1.6em; padding-top: 7em; background: radial-gradient(70% 60% at 50% 0%, #2a1c12, #0d0f12); }
.rn:not([data-v="search"]) .n-search { display: none !important; }
.n-h2 { margin: 0; font: 800 3.4em var(--sans); letter-spacing: -.03em; }
.n-sbox { display: flex; align-items: center; gap: .8em; width: 38em; height: 4.4em; padding: 0 1.6em; border: 2px solid #ff8a4a; border-radius: 999px; background: #fff; color: #10151c; font: 600 1.4em var(--sans); text-align: left; cursor: text; box-shadow: 0 1em 3em -1em rgba(255, 138, 74, .5); }
.n-sbox svg { width: 1.3em; height: 1.3em; fill: none; stroke: #10151c; stroke-width: 2; } .n-sbox .bb__caret { width: 2px; height: 1.2em; background: #ff8a4a; animation: bbCaret 1s steps(1) infinite; }
.n-sugg { display: grid; gap: .3em; width: 38em; padding: .8em; border-radius: 1.4em; background: #fff; color: #10151c; box-shadow: 0 2em 4em -1em rgba(0, 0, 0, .7); opacity: 0; font-size: 1.15em; }
.rn:not(.is-nsugg) .n-sugg { visibility: hidden; }
.n-sugg p { display: grid; grid-template-columns: 4.4em 1fr auto; align-items: center; gap: 1em; margin: 0; padding: .5em; border-radius: .9em; } .n-sugg img { width: 4.4em; height: 3.3em; border-radius: .6em; object-fit: cover; background: #ece9e4; }
.n-sugg b { display: block; } .n-sugg small { color: #6b7480; } .n-sugg em { font-style: normal; font-weight: 800; color: #c4602e; } .n-sugg .n-all { display: flex; justify-content: center; gap: .4em; color: #c4602e; font-weight: 700; } .n-all svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; }
.n-chips { display: flex; gap: .7em; margin: 0; } .n-chips span { padding: .5em 1.1em; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font: 600 1.05em var(--sans); }
.rn[data-v="prod"] .n-prod { display: grid; } .n-prod { grid-template-columns: 1.45fr 1fr; gap: 2.4em; padding: 2em 2.6em 2em 2em; background: #0f0c0a; }
.n-view { position: relative; overflow: hidden; border-radius: 1.4em; background: radial-gradient(80% 70% at 50% 62%, #2c221a, #0f0c0a); }
.rn__gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; } .rn__gl.is-grab { cursor: grabbing; }
.n-fall { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: contain; } .n-prod.is-nogl .n-fall { display: block; }
.n-3d { position: absolute; left: 50%; bottom: 1.4em; padding: .55em 1.2em; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font: 600 1.05em var(--sans); transform: translateX(-50%); opacity: 0; pointer-events: none; }
.n-info { display: grid; align-content: center; gap: .6em; } .n-info > small { font: 700 .95em var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #ff8a4a; }
.n-name { margin: 0; font: 800 3.4em/1 var(--sans); letter-spacing: -.035em; } .n-stars { display: flex; align-items: center; gap: .15em; margin: 0; } .n-stars svg { width: 1.2em; height: 1.2em; fill: #ffb347; } .n-stars span { margin-left: .6em; color: rgba(242, 239, 233, .6); }
.n-price { display: grid; margin: .2em 0; font: 800 2.6em var(--sans); } .n-price small { font: 500 .42em var(--sans); color: rgba(242, 239, 233, .6); }
.n-lbl { margin: .4em 0 0; color: rgba(242, 239, 233, .65); font-size: 1.05em; } .n-lbl b { color: #fff; }
.n-sw { display: flex; gap: .8em; margin: 0; } .n-sw button { width: 2.8em; height: 2.8em; border: 0; border-radius: 50%; background: var(--k); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.n-sw button:hover { transform: scale(1.12); } .n-sw button.is-on { box-shadow: 0 0 0 .22em #0f0c0a, 0 0 0 .42em #ff8a4a; }
.n-buynow { width: 100%; margin-top: .6em; padding: 1em; font-size: 1.25em; box-sizing: border-box; } .n-facts { display: flex; flex-wrap: wrap; gap: .5em; margin: .3em 0 0; } .n-facts span { padding: .4em .9em; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: .95em; }
.rn[data-v="buy"] .n-buy.n-v { display: grid; } .n-buy.n-v { place-items: center; background: radial-gradient(70% 60% at 50% 30%, #2a1c12, #0d0f12); }
.n-card { position: relative; display: grid; gap: 1em; width: 36em; padding: 2.2em; border-radius: 1.8em; background: #fff; color: #10151c; box-shadow: 0 2.4em 5em -1.6em rgba(0, 0, 0, .8); overflow: hidden; }
.n-h3 { margin: 0; font: 800 2.2em var(--sans); letter-spacing: -.02em; }
.n-line { display: grid; grid-template-columns: 6em 1fr auto; align-items: center; gap: 1em; margin: 0; padding: .7em; border-radius: 1em; background: #f4f2ee; } .n-line img { width: 6em; height: 4.5em; border-radius: .7em; object-fit: cover; background: #ece9e4; } .n-line b { display: block; font-size: 1.2em; } .n-line small { color: #6b7480; } .n-line em { font-style: normal; font-weight: 800; font-size: 1.2em; }
.n-opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7em; margin: 0; font-size: 1.1em; } .n-opt svg { width: 1.3em; height: 1.3em; fill: none; stroke: #1f9d6b; stroke-width: 3; stroke-linecap: round; } .n-opt span { color: #6b7480; }
.n-pay { position: relative; overflow: hidden; display: grid; place-items: center; height: 3.8em; margin-top: .4em; border: 0; border-radius: 999px; background: #10151c; color: #fff; font: 700 1.3em var(--sans); cursor: pointer; }
.n-pay i { position: absolute; inset: 0; background: #ff8a4a; transform: scaleX(0); transform-origin: 0 50%; } .n-pay span { position: relative; }
.n-paid { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: .4em; background: #fff; text-align: center; opacity: 0; }
.rn:not([data-np="2"]) .n-paid { visibility: hidden; }
.n-paid > i { display: grid; place-items: center; width: 6em; height: 6em; border-radius: 50%; background: #ff8a4a; } .n-paid svg { width: 3.4em; height: 3.4em; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.n-paid b { font: 800 2.6em var(--sans); } .n-paid span { font-size: 1.15em; color: #4a535e; }
.n-phone { background: radial-gradient(70% 60% at 50% 30%, #2a1c12, #0d0f12); } .o-phone { background: #c0c0c0; }
.n-ph { background: #0d0f12; cursor: pointer; } .n-m { position: absolute; inset: 0; overflow: hidden; } .n-mpage { position: absolute; inset: 0 0 auto; display: grid; gap: .8em; padding-bottom: 6em; }
.n-mhero { position: relative; height: 26em; overflow: hidden; } .n-mhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .n-mhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 8, 6, .9), transparent 60%); }
.n-mnav { position: absolute; left: 1.2em; right: 1.2em; top: 1.2em; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin: 0; } .n-mnav .n-logo { font-size: 1.5em; } .n-burger { display: grid; gap: .3em; } .n-burger i { width: 1.6em; height: 2px; background: #fff; }
.n-mh { position: absolute; left: 1.2em; right: 1.2em; bottom: 1.2em; z-index: 1; margin: 0; font: 800 2.6em/1 var(--sans); letter-spacing: -.03em; color: #fff; }
.n-mrow { display: grid; grid-template-columns: 4.4em 1fr auto; align-items: center; gap: .7em; margin: 0 .8em; padding: .5em; border-radius: 1em; background: rgba(255, 255, 255, .06); font-size: 1.05em; } .n-mrow b { white-space: nowrap; } .n-mrow img { width: 4.4em; height: 3.3em; border-radius: .7em; object-fit: cover; background: #ece9e4; } .n-mrow b { display: block; } .n-mrow small { color: rgba(242, 239, 233, .6); } .n-mrow em { font-style: normal; font-weight: 800; color: #ff8a4a; }
.n-mbar { position: absolute; left: .8em; right: .8em; bottom: .8em; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: .8em .8em .8em 1.4em; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #10151c; font-size: 1.15em; }
.n-mbar small { display: block; color: #6b7480; font-size: .8em; } .n-mbar b { font-size: 1.15em; } .n-mbar em { padding: .7em 1.6em; border-radius: 999px; background: #ff8a4a; color: #1a0d05; font-style: normal; font-weight: 800; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  .rz .rz__cam { bottom: auto; aspect-ratio: 16 / 9; } .rz .rz__ov { position: static; }
  .k-m { display: none; } .ws--web[data-shot="predstavitev"] .k-m, .ws--web[data-shot="objava"] .k-m { position: relative; right: auto; top: auto; display: grid; width: min(78%, 19rem); height: auto; aspect-ratio: 9 / 18; margin: .8rem auto; font-size: 11px; opacity: 1 !important; transform: none !important; }
  .rz__dev, .rz__react { display: none; } .rz__try { font-size: 2.2cqw; bottom: 4%; }
  .ws--ren .ws__stage { aspect-ratio: 4 / 5; } .ws--ren .ws__stage::before, .ws--ren .ws__stage::after { aspect-ratio: auto; bottom: 0; }
  .rn { font-size: 1.9cqw; }
  .o-wrap { width: auto; margin: .6em; } .o-cols { grid-template-columns: 1fr; } .o-side, .o-right { display: none; } .o-head { flex-wrap: wrap; } .o-head small { margin-left: 0; }
  .o-chrome .o-menu { display: none; } .o-title { font-size: .85em; }
  .n-nav span, .n-models figure:nth-child(n+2) { display: none; } .n-nav { width: 92%; margin-left: -46%; } .n-copy { top: 16%; } .n-h1 { font-size: 4.2em; } .n-models { left: 6%; right: 6%; } .n-models figure { width: 100%; display: grid; grid-template-columns: 9em 1fr; }
  .n-sbox, .n-sugg { width: 88%; } .n-prod { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 1em; gap: 1em; } .n-info { gap: .3em; } .n-name { font-size: 2.6em; } .n-facts, .n-stars { display: none; }
  .o-fields { grid-template-columns: 1fr; } .n-card { width: 86%; }
  .rn__ph { height: 70%; } .rn__note { display: none; } .rn__sum { flex-wrap: wrap; padding: 0 1em; } .rn__tag { top: 5.6em; } .rn__time { top: 8.6em; }
}
/* v35 · what only shows (the studio's layers over the site, a dialog that is not open) never takes the visitor's click */
.kx__idle, .kx__wire, .kx__code, .kx__pub, .o-dlg, .o-veil, .ax__toast, .k-m__note { pointer-events: none; }
/* v35 · what the visitor can try breathes softly (a ring that comes and goes), so a hand knows where to go */
.rn [data-try], .k-go, .k-chips button:not(.is-on), .s-sw button:not(.is-on), .s-add, .n-sw button:not(.is-on) { animation: rzTry 2.4s ease-out infinite; }
.rn .n-sbox { animation: rzTryO 2.4s ease-out infinite; }
@keyframes rzTry { 0%, 30% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 .7em color-mix(in srgb, var(--c) 0%, transparent); } }
@keyframes rzTryO { 0%, 30% { box-shadow: 0 1em 3em -1em rgba(255, 138, 74, .5), 0 0 0 0 rgba(255, 138, 74, .6); } 80%, 100% { box-shadow: 0 1em 3em -1em rgba(255, 138, 74, .5), 0 0 0 .8em rgba(255, 138, 74, 0); } }
.ws.is-paused .rn [data-try], .ws.is-paused .k-go, .ws.is-paused .k-chips button, .ws.is-paused .s-sw button, .ws.is-paused .s-add, .ws.is-paused .n-sw button, .ws.is-paused .n-sbox { animation-play-state: paused; }
.rn__ph[data-try] { animation: none; } .o-pinch[data-try] { animation: none; }
@media (prefers-reduced-motion: reduce) { .rn [data-try], .k-go, .k-chips button, .s-sw button, .s-add, .n-sw button, .n-sbox { animation: none; } }
/* v37 · what is not seen is not drawn: the drawing under a screen that fills the stage, the studio's screen before the studio */
.rz.is-full .ws__svg, .rz.no-mon .rz__mon { visibility: hidden; }
/* v37 · glass that would be blurred anew every frame (over a moving line, a video, a story) is a denser tint instead */
.n-nav { background: rgba(20, 16, 12, .66); } .n-models figure { background: rgba(20, 16, 12, .8); } .rn__knob { background: rgba(20, 16, 12, .55); }
.k-rate { background: rgba(20, 14, 10, .7); } .k-quote { background: rgba(20, 14, 10, .74); }
.n-nav, .n-models figure, .rn__knob, .k-rate, .k-quote, .kx__pub, .rz__dev, .rz__try, .rz__react { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ==========================================================================
   v38 — the phases as story chapters (all drawn stories): no boxes — a row of thin light tracks that fill as the story
   plays, a glowing playhead on the one that plays, the chapter's number and name under its track
   ========================================================================== */
.ws.ws .ws__steps { gap: 1.2rem; margin-top: 1.15rem; }
.ws.ws .ws__steps button { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: baseline; gap: .6rem .55rem; min-height: 0; padding: .4rem 0 .25rem;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text-3); transform: none; transition: color .3s; }
.ws.ws .ws__steps button:hover { border: 0; background: none; transform: none; color: var(--text); }
.ws.ws .ws__steps button[aria-pressed="true"] { border: 0; background: none; box-shadow: none; color: #fff; }
.ws.ws .ws__bar { position: relative; left: auto; right: auto; bottom: auto; grid-column: 1 / -1; grid-row: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: visible; transition: height .25s, background .3s; }
.ws.ws .ws__bar i { border-radius: inherit; }
.ws.ws .ws__steps button[aria-pressed="true"] .ws__bar i { box-shadow: 0 0 12px -1px var(--c); }
.ws.ws .ws__bar::after { content: ""; position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: .6rem; height: .6rem; margin: -.3rem 0 0 -.3rem; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 0 16px var(--c); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s; }
.ws.ws .ws__steps button[aria-pressed="true"] .ws__bar::after { opacity: 1; transform: none; }
.ws.ws .ws__steps button:hover .ws__bar { height: 5px; background: rgba(255, 255, 255, .16); }
.ws.ws .ws__steps button.is-past .ws__bar i { opacity: .55; }
.ws.ws .ws__num { grid-row: 2; font-size: .64rem; } .ws.ws .ws__lbl { grid-row: 2; font-size: .74rem; letter-spacing: .18em; }
.ws.ws .ws__steps button[aria-pressed="true"] .ws__num { color: var(--c); } .ws.ws .ws__steps button[aria-pressed="true"] .ws__lbl { text-shadow: 0 0 18px color-mix(in srgb, var(--c) 70%, transparent); }
.ws.ws .ws__steps button:focus-visible { outline: 2px solid var(--c); outline-offset: 6px; border-radius: 4px; }
@media (max-width: 760px) { .ws.ws .ws__steps { gap: .55rem; } .ws.ws .ws__steps button { grid-template-columns: 1fr; padding: .4rem 0 .3rem; min-height: 44px; text-align: left; } .ws.ws .ws__lbl { font-size: .58rem; letter-spacing: .06em; } }

/* ==========================================================================
   v38 — PRENOVA played by hand: both sites answer every move (the old slowly, the new at once); the line has a handle
   ========================================================================== */
.rn { cursor: auto; user-select: auto; -webkit-user-select: auto; }
.rn__line { width: 3.2em; margin-left: -1.6em; background: none; box-shadow: none; pointer-events: auto; cursor: ew-resize; touch-action: none; }
.rn__line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: .2em; margin-left: -.1em; background: #fff; box-shadow: 0 0 1.2em rgba(0, 0, 0, .55); }
.rn__line:focus-visible { outline: none; } .rn__line:focus-visible .rn__knob { box-shadow: 0 0 0 .3em #ff8a4a, 0 .6em 1.6em rgba(0, 0, 0, .5); }
.rn.is-drag, .rn.is-drag * { cursor: ew-resize; user-select: none; }
.rn__hint { bottom: 1.6em; opacity: 1; display: flex; align-items: center; gap: .6em; transition: opacity .6s, transform .6s; }
.rn__hint i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #ff8a4a; transform: rotate(-90deg); } .rn__hint svg { width: 1em; height: 1em; fill: none; stroke: #1a0d05; stroke-width: 2.6; }
.rn.is-touched .rn__hint { opacity: 0; transform: translateY(40%); }
.rn__time { transition: opacity .4s; } .rn.is-timing .rn__time { opacity: 1; }
/* the pages scroll (each its own way), the other follows */
.o-home, .n-home { overflow-y: auto; overscroll-behavior: auto; }
.o-home::-webkit-scrollbar { width: 1.2em; } .o-home::-webkit-scrollbar-track { background: #e6e3db; border-left: 1px solid #fff; } .o-home::-webkit-scrollbar-thumb { background: #d4d0c8; border: 2px outset #fff; }
.n-home { scrollbar-width: none; } .n-home::-webkit-scrollbar { display: none; }
/* the old: every page builds in pieces under a white sheet; the hourglass while it works */
.o-veil { display: none; position: absolute; inset: 0; z-index: 6; background: #fff; pointer-events: none; }
.rn__old.is-load .o-veil { display: block; animation: oVeil var(--load, 1.3s) steps(6, end) forwards; } @keyframes oVeil { to { transform: translateY(100%); } }
.rn__old.is-load .o-prog b { animation: oProg var(--load, 1.3s) steps(8, end) forwards; } @keyframes oProg { from { width: 0; } to { width: 100%; } }
.rn__old.is-load, .rn.is-owait .rn__old, .rn.is-osend .rn__old { cursor: progress; }
.o-wrap u[data-act], .o-wrap b[data-act] { cursor: pointer; } .o-wrap u[data-act]:hover { color: #ff0000; }
.o-in, .o-fin { height: 1.6em; padding: 0 .3em; border: 2px inset #ddd; background: #fff; color: #000; font: 1em "Times New Roman", serif; border-radius: 0; outline: none; }
.o-in { width: 15em; } .o-form label { display: inline-flex; align-items: center; gap: .5em; } .o-main > .o-form { margin: 0 0 .6em; font-size: .9em; }
.o-fields input { width: 100%; height: 1.4em; box-sizing: border-box; } .o-capin { width: 6em; }
.rn.is-osend .o-btns .o-btn:first-child { border-style: inset; }
.rn.is-oerr .o-dlg { opacity: 1; animation: oDlg .12s steps(2); pointer-events: auto; } @keyframes oDlg { from { opacity: 0; } }
.o-more { padding: .6em 1em 1em; border-top: 2px groove #ddd; } .o-h2 { margin: .8em 0 .3em; font: 700 1.05em Arial, sans-serif; color: #000080; text-decoration: underline; }
.o-news { margin: 0; padding-left: 1.2em; font: .9em "Times New Roman", serif; } .o-news b { color: #cc0000; }
.o-gal { display: flex; gap: .4em; margin: 0; } .o-gal img { width: 7em; height: auto; border: 2px ridge #999; image-rendering: pixelated; }
.o-banners { display: flex; flex-wrap: wrap; gap: .4em; margin: .8em 0 0; } .o-banners span { padding: .25em .5em; border: 1px solid #000; background: #ffcc00; font: 700 .7em Verdana, sans-serif; }
/* the new: every page is there at once */
.rn__new.is-in .n-v { animation: nIn .35s cubic-bezier(.2,.8,.3,1); } @keyframes nIn { from { opacity: 0; transform: translateY(1.2%); } }
.n-nav { z-index: 4; } .n-nav [data-act] { cursor: pointer; transition: color .2s; } .n-nav span[data-act]:hover { color: #ff8a4a; }
.n-sico { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(255, 255, 255, .1); } .n-sico svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rn[data-v="phone"] .n-nav { display: none; }
.n-btn[data-act], .n-cards figure, .n-sugg p[data-act] { cursor: pointer; transition: transform .2s, box-shadow .2s; } .n-btn[data-act]:hover { transform: translateY(-2px); box-shadow: 0 .8em 1.6em -.8em rgba(255, 138, 74, .9); }
.n-home .n-hero { position: relative; height: 100%; overflow: hidden; } .n-home .n-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(10, 8, 6, .88), rgba(10, 8, 6, .35) 55%, rgba(10, 8, 6, .1)), linear-gradient(0deg, rgba(10, 8, 6, .75), transparent 45%); }
.n-home::after { display: none; }
.n-home .n-copy { top: 22%; }
.n-more { position: absolute; left: 54%; bottom: 1.6em; z-index: 2; display: flex; align-items: center; gap: .6em; margin: 0; font: 600 .95em var(--sans); color: rgba(242, 239, 233, .7); }
.n-more i { width: .9em; height: 1.4em; border: 2px solid currentColor; border-radius: 1em; position: relative; } .n-more i::after { content: ""; position: absolute; left: 50%; top: .2em; width: .2em; height: .3em; margin-left: -.1em; border-radius: 1em; background: currentColor; animation: nWheel 1.6s ease-in-out infinite; }
@keyframes nWheel { 50% { transform: translateY(.35em); opacity: .3; } }
.n-sec { padding: 3.4em 6% 2.4em 54%; } .n-kick { display: block; margin-bottom: .6em; font: 700 .9em var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #ff8a4a; }
.n-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; margin-top: 1.4em; }
.n-cards figure { margin: 0; overflow: hidden; border-radius: 1.1em; background: #17191d; border: 1px solid rgba(255, 255, 255, .08); } .n-cards figure:hover { transform: translateY(-3%); box-shadow: 0 1.6em 2.4em -1.4em rgba(0, 0, 0, .9); }
.n-cards img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #ece9e4; } .n-cards figcaption { display: grid; gap: .1em; padding: .7em .8em .9em; } .n-cards b { font-size: 1.05em; } .n-cards small { color: rgba(242, 239, 233, .6); } .n-cards em { font-style: normal; font-weight: 800; color: #ff8a4a; }
.n-feat { display: grid; gap: 1em; } .n-feat p { display: grid; grid-template-columns: auto 1fr; gap: .1em 1em; margin: 0; padding: 1.1em 1.2em; border-radius: 1em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.n-feat i { grid-row: span 2; display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .9em; background: rgba(255, 138, 74, .15); } .n-feat svg { width: 1.5em; height: 1.5em; fill: none; stroke: #ff8a4a; stroke-width: 1.8; stroke-linejoin: round; }
.n-feat b { font-size: 1.15em; } .n-feat span { color: rgba(242, 239, 233, .65); }
.n-quote p { margin: .5em 0; font: italic 300 2em/1.25 var(--serif); } .n-quote small { color: rgba(242, 239, 233, .6); } .n-stars svg { width: 1.2em; height: 1.2em; fill: #ffb347; }
.n-cta { display: grid; gap: 1.2em; justify-items: start; }
.n-foot { display: flex; gap: 2em; align-items: baseline; padding: 2em 6% 2.4em 54%; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(242, 239, 233, .55); }
.n-sbox { cursor: text; } .n-in { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #10151c; font: 600 1em var(--sans); } .n-in::placeholder { color: #9aa3ad; font-weight: 500; }
.n-go { display: grid; place-items: center; width: 2.6em; height: 2.6em; border: 0; border-radius: 50%; background: #ff8a4a; cursor: pointer; } .n-go svg { width: 1.3em; height: 1.3em; fill: none; stroke: #1a0d05; stroke-width: 2.4; }
.rn.is-nsugg .n-sugg { opacity: 1; animation: nIn .25s cubic-bezier(.2,.8,.3,1); } .n-sugg p[data-act]:hover { background: rgba(255, 138, 74, .12); }
.rn.is-nres .n-sugg { box-shadow: 0 0 0 2px rgba(255, 138, 74, .6), 0 2em 4em -1em rgba(0, 0, 0, .7); }
.n-chips span { cursor: pointer; transition: background .2s; } .n-chips span:hover { background: rgba(255, 138, 74, .2); }
.n-prod { padding-top: 6em !important; } .n-buy.n-v { padding-top: 4em; }
.rn[data-np="1"] .n-pay i { transform: scaleX(1); transition: transform .6s cubic-bezier(.5,0,.3,1); }
.rn[data-np="2"] .n-paid { opacity: 1; animation: nIn .45s cubic-bezier(.16,1,.3,1); }
.n-m { overflow-y: auto; scrollbar-width: none; } .n-m::-webkit-scrollbar { display: none; } .n-mpage { position: relative; inset: auto; }
.n-mfeat { display: grid; gap: .2em; margin: 1em; padding: 1em; border-radius: 1em; background: rgba(255, 138, 74, .14); font-size: 1.1em; } .n-mfeat span { color: rgba(242, 239, 233, .7); }
.n-mbar em { cursor: pointer; }
.o-ph { cursor: zoom-in; } .o-mini { transition: transform .9s cubic-bezier(.45,0,.25,1); } .rn.is-zoom .o-ph { cursor: zoom-out; } .rn.is-zoom .o-mini { transform: scale(1) translate(-6%, -2%); }
.rn .o-pinch i { animation: oPinch 2.4s ease-in-out infinite; } .rn .o-pinch i:last-child { animation-name: oPinch2; }
@keyframes oPinch { 0%, 20% { transform: none; opacity: 0; } 35% { opacity: 1; } 70% { transform: translate(-80%, -80%); opacity: 1; } 85%, 100% { transform: translate(-80%, -80%); opacity: 0; } }
@keyframes oPinch2 { 0%, 20% { transform: none; opacity: 0; } 35% { opacity: 1; } 70% { transform: translate(80%, 80%); opacity: 1; } 85%, 100% { transform: translate(80%, 80%); opacity: 0; } }
.rn.is-zoom .o-pinch { display: none; }
.ws.is-paused .rn .o-pinch i, .ws.is-paused .n-more i::after { animation-play-state: paused; }
@media (max-width: 760px) { .n-sec, .n-foot { padding-left: 8%; padding-right: 8%; } .n-more { left: 8%; } .n-cards { grid-template-columns: 1fr; } .n-quote p { font-size: 1.5em; } .rn__hint { font-size: 1.1em; left: 4%; right: 4%; width: auto; } }
.rn__line { width: 1em; margin-left: -.5em; } .rn__knob { pointer-events: auto; cursor: ew-resize; }   /* v38: a thin strip, the round handle to grab — the pages under the line stay clickable */
.n-more { bottom: 4.6em; }   /* v38: above the hint */
/* v38: PRENOVA has no chapters — it is used, not watched; the one switch under it is the device (the pill of STRAN's) */
.rn__dev { display: flex; gap: .3em; width: max-content; margin: 1.15rem auto 0; padding: .25em; border-radius: 999px; background: rgba(8, 13, 20, .78); border: 1px solid rgba(255, 255, 255, .14); }
.rn__dev button { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: .4em 1.2em; border: 0; border-radius: 999px; background: transparent; color: #c8d2de; font: 600 .84rem var(--sans); letter-spacing: .03em; cursor: pointer; transition: background .25s, color .25s; }
.rn__dev svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rn__dev button:hover { color: #fff; } .rn__dev button[aria-pressed="true"] { background: var(--c); color: #061019; }
.rn__dev button:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

/* ==========================================================================
   v39/v40 — PR, digital only: ČLANEK, OGLAS, REKLAMA — three films on an HTML stage (1em = 1 % of the stage width)
   ========================================================================== */
@property --pk { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --pull { syntax: '<number>'; inherits: true; initial-value: 0; }
.ws--pr { --c: #d98bff; } .ws--oglas { --c: #ff9ccf; } .ws--reklama { --c: #a7a2ff; }
.ws--pr .ws__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ws--pr .ws__stage { container-type: inline-size; }
.pr { position: absolute; inset: 0; container-type: size; font-size: 1cqw; overflow: hidden; pointer-events: none; color: #eef1f5; font-family: var(--sans); line-height: 1.3; text-shadow: none;
  background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--c) 14%, #0b0f17), #06090e 72%); }
.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }
.pr p, .pr figure { margin: 0; } .pr img { max-width: none; }
.pr-scene { position: absolute; inset: 0; opacity: 0; }
.pc-a, .po-a, .pv-a { opacity: 1; }
.pr-logo { font: 800 1em var(--sans); letter-spacing: -.01em; } .pr-logo i { font-style: normal; color: #e8692a; }
.pr-dots { display: inline-flex; gap: .45em; } .pr-dots i { width: .85em; height: .85em; border-radius: 50%; background: #ff6b5f; } .pr-dots i:nth-child(2) { background: #febc2e; } .pr-dots i:nth-child(3) { background: #28c840; }
.pr-win { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 1em; background: #f6f4f0; color: #16181c; box-shadow: 0 2.4em 5em -1.6em rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08); }
.pr-bar { display: flex; align-items: center; gap: .5em; flex: none; height: 3.2em; padding: 0 1.2em; background: #e6e2dc; border-bottom: 1px solid #d5d0c8; font: 500 1em var(--sans); color: #6b6f77; }
.pr-bar i { width: .85em; height: .85em; border-radius: 50%; background: #ff6b5f; } .pr-bar i:nth-child(2) { background: #febc2e; } .pr-bar i:nth-child(3) { background: #28c840; }
.pr-bar span { flex: 0 1 60%; margin-left: 1.4em; padding: .35em 1.2em; border-radius: 1em; background: #f6f4f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-pnav { display: flex; align-items: center; gap: 2.2em; padding: 1.3em 3em; border-bottom: 1px solid #e0ddd6; background: #fff; font: 600 1.1em var(--sans); color: #4b4f57; white-space: nowrap; }
.pr-plogo { margin-right: auto; font: 700 1.7em var(--serif); color: #111; letter-spacing: -.01em; } .pr-plogo i { font-style: normal; color: #b4162b; }
.pr-pnav .is-on { padding-bottom: .3em; color: #111; box-shadow: inset 0 -.22em 0 #b4162b; }
.pr-sk { display: block; width: var(--w); height: .8em; margin: .55em 0; border-radius: .4em; background: #dcd8d1; }
.pr-ph { position: relative; aspect-ratio: 9 / 19; overflow: hidden; border-radius: 2.4em; border: .55em solid #0c0e12; background: #f6f4f0; box-shadow: 0 2.4em 4em -1.6em rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12); }
.pr-phscr { position: absolute; inset: 0; overflow: hidden; }
.pr-done { position: absolute; left: 50%; bottom: 4.5%; z-index: 8; display: flex; align-items: center; gap: .7em; padding: .65em 1.5em .65em .7em; border-radius: 3em; background: rgba(10, 14, 20, .9); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 2.4em -.6em var(--c); font: 600 1.25em var(--sans); color: #fff; white-space: nowrap; opacity: 0; transform: translateX(-50%); }
.pr-done i, .pc-ready i, .po-pick i, .po-okk i { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--c); } .pr-done svg, .pc-ready svg, .po-pick svg, .po-okk svg { width: 1.1em; height: 1.1em; fill: none; stroke: #140a1c; stroke-width: 2.6; }
.pc-ad { display: inline-block; padding: .3em .7em; border-radius: .25em; background: #fde9c9; color: #8a5300; font: 700 .85em var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pc-av { display: grid; place-items: center; flex: none; width: 3em; height: 3em; border-radius: 50%; background: #1c1a17; color: #e8692a; font: 800 .9em var(--sans); }
.pr .is-typing::after { content: ""; display: inline-block; width: .07em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: var(--c); animation: pcCaret 1s steps(1) infinite; }
@keyframes pcCaret { 50% { opacity: 0; } }
.ws--pr.is-paused .pr .is-typing::after { animation-play-state: paused; }
/* the pointer (placed by the story on the elements it points at) */
.pr-cur { position: absolute; z-index: 20; width: 2.6em; height: 2.6em; margin: -.3em 0 0 -.4em; opacity: 0; transition: opacity .2s; }
.pr-cur svg { position: relative; z-index: 1; width: 100%; height: 100%; fill: #fff; stroke: #0c0e12; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 .3em .5em rgba(0, 0, 0, .5)); }
.pr-cur i { position: absolute; left: .2em; top: .1em; width: 2em; height: 2em; margin: -1em 0 0 -1em; border-radius: 50%; border: .2em solid var(--c); opacity: 0; }
.pr-cur.is-click i { animation: prClick .45s ease-out; } @keyframes prClick { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }

/* ---- ČLANEK (v41) · 1 your information, and the idea we find in it */
.pc-lbl { position: absolute; top: 8.3em; font: 700 .95em var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c); opacity: 0; }
.pc-lbl--in { left: 5.3em; } .pc-lbl--idea { left: 54.2em; }
.pc-mail { position: absolute; left: 5em; top: 11em; width: 42em; padding-bottom: 1.6em; overflow: hidden; border-radius: 1.2em; background: #fbfaf8; color: #17191d; box-shadow: 0 3em 6em -2em rgba(0, 0, 0, .85); opacity: 0; }
.pc-mbar { display: flex; align-items: center; gap: 1.2em; height: 3.2em; padding: 0 1.4em; background: #efece7; border-bottom: 1px solid #e0dcd5; font-size: 1em; } .pc-mbar span:last-child { margin-left: auto; color: #8a8f98; }
.pr .pc-mfrom { display: flex; align-items: center; gap: 1em; padding: 1.4em 2em 0; } .pc-mfrom b { display: block; font-size: 1.15em; } .pc-mfrom small { font-size: .95em; color: #7a7f88; }
.pr .pc-msub { padding: .45em .85em .1em; font: 400 2.3em/1.1 var(--serif); }
.pc-mtext { padding: 0 1.55em; font-size: 1.3em; line-height: 1.55; color: #33363c; } .pr .pc-mtext p { margin: .5em 0; }
.pc-mtext ul { margin: .3em 0; padding-left: 1.2em; } .pc-mtext li { list-style: disc; opacity: 0; } .pc-mtext li::marker { color: #b9b4ab; }
.pc-mtext mark { padding: 0 .1em; color: inherit; background: linear-gradient(#ffe066, #ffe066) no-repeat 0 88% / 0% 42%; }
.pc-att { display: flex; gap: 1em; padding: .5em 2em 0; }
.pc-att figure { width: 12em; opacity: 0; } .pc-att img { display: block; width: 100%; height: 7em; object-fit: cover; border-radius: .5em; background: #ecebe7; } .pc-att figcaption { margin-top: .3em; font-size: .8em; color: #7a7f88; }
.pc-arrow { position: absolute; left: 47.6em; top: 28.4em; width: 5.4em; height: 1.8em; overflow: visible; }
.pc-arrow path { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px var(--c)); }
.pc-idea { position: absolute; left: 53.6em; top: 11em; width: 42em; padding: .6em 2em; border-radius: 1.2em; background: linear-gradient(165deg, rgba(42, 26, 58, .92), rgba(16, 12, 24, .94)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 0 4em -1.6em var(--c), 0 3em 5em -2.4em #000; opacity: 0; }
.pc-row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 1em; align-items: start; padding: 1.25em 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .pc-row:last-child { border-bottom: 0; }
.pc-row > small { padding-top: .45em; font: 700 .85em var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #a993c4; }
.pr .pc-chips { display: flex; flex-wrap: wrap; gap: .42em; }
.pc-chips span { padding: .32em .72em; border-radius: 2em; background: rgba(255, 224, 102, .14); border: 1px solid rgba(255, 224, 102, .55); font: 600 .96em var(--sans); color: #ffe9a8; white-space: nowrap; opacity: 0; }
.pc-chips--m span { background: transparent; border-color: color-mix(in srgb, var(--c) 60%, transparent); color: #f1e3ff; }
.pc-angs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.pr .pc-ang { position: relative; padding: .8em .9em; border-radius: .8em; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); opacity: 0; transition: border-color .4s, background .4s, opacity .4s, box-shadow .4s; }
.pc-ang b { display: block; font: 600 1.05em/1.2 var(--sans); color: #fff; } .pc-ang span { display: block; margin-top: .35em; font-size: .85em; line-height: 1.35; color: #a7a0b4; }
.pc-ang i { position: absolute; right: -.6em; top: -.6em; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--c); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s cubic-bezier(.2, 1, .3, 1); }
.pc-ang svg { width: 1em; height: 1em; fill: none; stroke: #140a1c; stroke-width: 2.6; }
.pc-ang.is-hover { border-color: rgba(255, 255, 255, .35); }
.pc-ang.is-pick { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: 0 0 2em -.6em var(--c); } .pc-ang.is-pick i { opacity: 1; transform: none; }
.pr .pc-ang.is-dim { opacity: .4; }
.pc-heads { display: grid; gap: .3em; }
.pr .pc-draft { position: relative; justify-self: start; font: 500 1.05em var(--sans); color: #a7a0b4; opacity: 0; }
.pc-draft i { position: absolute; left: -.1em; right: -.1em; top: 52%; height: .1em; background: #ff6b6b; transform: scaleX(0); transform-origin: left; }
.pr .pc-final { min-height: 2.2em; font: 400 2.05em/1.1 var(--serif); letter-spacing: -.01em; color: #fff; }

/* ---- ČLANEK · 2 the design: a design tool, the grid, the article part by part */
.pa-cv { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1.3px) 0 0 / 2em 2em, #0a0d13; }
.pa-desk { position: absolute; inset: 0; opacity: 0; background: radial-gradient(55% 70% at 42% 34%, rgba(255, 210, 160, .16), transparent 72%), radial-gradient(130% 110% at 50% 0%, #2c2620, #141210 62%, #0b0a09); }
.pa-desk::after { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(94deg, rgba(255, 255, 255, .018) 0 .3em, transparent .3em .9em); }
.pa-top { position: absolute; z-index: 2; left: 3em; right: 3em; top: 3.6em; height: 3.2em; display: flex; align-items: center; gap: 1.4em; padding: 0 1.4em; border-radius: .8em .8em 0 0; background: #141921; border: 1px solid rgba(255, 255, 255, .08); font-size: 1em; color: #8d97a4; opacity: 0; }
.pa-top b { color: #fff; font-weight: 600; } .pa-top small { margin-left: auto; font-size: .95em; }
.pa-layers, .pa-style { position: absolute; z-index: 2; top: 6.8em; bottom: 2.4em; display: flex; flex-direction: column; gap: .7em; padding: 1.4em; background: #10141b; border: 1px solid rgba(255, 255, 255, .07); border-top: 0; opacity: 0; }
.pa-layers { left: 3em; width: 15em; border-radius: 0 0 0 .8em; } .pa-style { right: 3em; width: 16em; border-radius: 0 0 .8em 0; }
.pa-layers small, .pa-style > small { font: 700 .8em var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6b7685; } .pa-style > small:not(:first-child) { margin-top: 1em; }
.pr .pa-layers p { display: flex; align-items: center; gap: .7em; padding: .45em .6em; border-radius: .4em; font-size: 1em; color: #4d5866; transition: color .3s, background .3s; }
.pa-layers i { width: 1.1em; height: .8em; border-radius: .15em; border: 1px solid currentColor; }
.pr .pa-layers p.is-on { color: #e7ecf2; background: rgba(255, 255, 255, .05); } .pa-layers p.is-on i { border-color: var(--c); background: color-mix(in srgb, var(--c) 35%, transparent); }
.pr .pa-aa { display: flex; align-items: center; gap: .9em; opacity: 0; } .pa-aa b { font: 400 3em/1 var(--serif); color: #fff; } .pa-aa--s b { font: 600 2.6em/1 var(--sans); }
.pa-aa span { font: 600 1em var(--sans); color: #e7ecf2; } .pa-aa span small { display: block; margin-top: .2em; font: 400 .85em var(--sans); color: #8d97a4; }
.pr .pa-sw { display: flex; gap: .6em; } .pa-sw i { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); opacity: 0; }
.pa-master { position: absolute; z-index: 1; left: 34.5em; top: 10.2em; width: 30em; opacity: 0; transform-origin: 50% 45%; }
.pr .pa-name { position: absolute; left: 0; bottom: 100%; margin-bottom: .6em; font: 600 .9em var(--sans); color: #8d97a4; white-space: nowrap; }
.pa-page { position: relative; height: 38.4em; padding: 2.2em 2.4em; background: #fbfaf8; color: #17191d; box-shadow: 0 2em 4em -1.6em rgba(0, 0, 0, .9); }
.pa-grid { position: absolute; inset: 0 2.4em; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1em; opacity: 0; pointer-events: none; } .pa-grid i { background: rgba(255, 92, 140, .06); border-inline: 1px solid rgba(255, 92, 140, .2); }
.pa-page [data-p] { position: relative; opacity: 0; }
.pa-page [data-p]::after { content: ""; position: absolute; inset: -.4em; border: .1em solid #b77cf0; opacity: 0; transition: opacity .2s;
  background: linear-gradient(#fff, #fff) 0 0 / .5em .5em no-repeat, linear-gradient(#fff, #fff) 100% 0 / .5em .5em no-repeat, linear-gradient(#fff, #fff) 0 100% / .5em .5em no-repeat, linear-gradient(#fff, #fff) 100% 100% / .5em .5em no-repeat; }
.pa-spec { position: absolute; z-index: 1; left: calc(100% + 3.4em); top: .2em; padding: .3em .7em; border-radius: .3em; background: #8a3fb8; color: #fff; font: 600 .78rem var(--sans); font-size: .82em; font-style: normal; letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.pa-page [data-p].is-sel::after, .pa-page [data-p].is-sel .pa-spec { opacity: 1; }
.pr .pa-k { display: flex; align-items: center; gap: .8em; font: 700 .85em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #c4561f; } .pa-k .pc-ad { font-size: .9em; }
.pr .pa-h { margin-top: .5em; font: 400 2.5em/1.08 var(--serif); letter-spacing: -.012em; } .pa-h .pa-spec { font-size: .33em; left: calc(100% + 1.4em); }
.pr .pa-f { margin-top: 1em; } .pa-f img { display: block; width: 100%; height: 10.8em; object-fit: cover; }
.pr .pa-l { margin-top: 1em; font: 600 1.02em/1.5 var(--sans); color: #22252b; } .pa-l .pa-spec { font-size: .8em; }
.pr .pa-q { margin-top: 1em; padding-left: 1em; border-left: .25em solid #e8692a; font: italic 400 1.3em/1.3 var(--serif); color: #5a2a10; } .pa-q span { display: block; margin-top: .3em; font: 500 .62em var(--sans); font-style: normal; color: #7a7f88; } .pa-q .pa-spec { font-size: .63em; }
.pa-page > .pr-sk { height: .55em; margin: .5em 0; opacity: 0; } .pa-page > .pr-sk:first-of-type { margin-top: 1.2em; }
.pr .pa-okm { position: absolute; left: 50%; top: 100%; margin-top: 1em; display: flex; align-items: center; gap: .6em; padding: .4em 1em .4em .4em; border-radius: 2em; background: rgba(12, 16, 22, .92); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); font: 600 1em var(--sans); white-space: nowrap; color: #fff; opacity: 0; translate: -50% 0; }
.pa-okm i, .pa-ok i { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c); } .pa-okm svg, .pa-ok svg { width: .95em; height: .95em; fill: none; stroke: #140a1c; stroke-width: 2.6; }

/* ---- ČLANEK · 3 one story, five media: each version comes out of the master (--ad), then goes to its medium (--pb) —
   centre x, y in stage em and a scale for the three moments; where it lands is the layout's */
@property --ad { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pb { syntax: '<number>'; inherits: true; initial-value: 0; }
.pa-set { position: absolute; inset: 0; z-index: 3; }
.pa-m { --x0: 49.5; --y0: 29.4; --s0: .28;
  --X: calc(var(--x0) + (var(--x1) - var(--x0)) * var(--ad) + (var(--x2) - var(--x1)) * var(--pb));
  --Y: calc(var(--y0) + (var(--y1) - var(--y0)) * var(--ad) + (var(--y2) - var(--y1)) * var(--pb));
  position: absolute; left: 0; top: 0; width: calc(var(--w) * 1em); height: calc(var(--h) * 1em); opacity: 0;
  translate: calc((var(--X) - var(--w) / 2) * 1em) calc((var(--Y) - var(--h) / 2) * 1em);
  scale: calc(var(--s0) + (var(--s1) - var(--s0)) * var(--ad) + (var(--s2) - var(--s1)) * var(--pb)); rotate: calc(var(--r2) * var(--pb) * 1deg); }
.pa-art { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #fff; color: #16181c;
  box-shadow: 0 .4em 1.4em rgba(0, 0, 0, .4), 0 calc(var(--pb) * 2.6em) calc(var(--pb) * 4.4em) calc(var(--pb) * -1em) rgba(0, 0, 0, calc(var(--pb) * .7)); }
.pa-dev { position: absolute; z-index: 0; inset: 0; opacity: var(--pb); }
.pa-over { position: absolute; z-index: 2; inset: 0; opacity: var(--pb); pointer-events: none; }
.pr .pa-mlbl { position: absolute; left: 0; bottom: 100%; margin-bottom: .6em; display: flex; align-items: baseline; gap: .6em; font-size: calc(1.15em / var(--s1)); white-space: nowrap; opacity: calc(var(--ad) - var(--pb) * 2); }
.pa-mlbl b { font: 600 1em var(--sans); color: #fff; } .pa-mlbl small { font-size: .85em; color: #8d97a4; }
.pr .pa-ok { position: absolute; z-index: 3; left: 0; bottom: calc(100% + var(--okb, 0) * var(--s2) / 1.05 * 1em); margin-bottom: .6em; display: flex; align-items: center; gap: .55em; padding: .35em .9em .35em .35em; border-radius: 2em; background: rgba(12, 16, 22, .92); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 .8em 1.6em -.8em #000; font: 600 calc(1.05em / var(--s2)) var(--sans); white-space: nowrap; color: #fff; opacity: 0; }
/* the five, on a desktop: on the canvas (1) and on the desk (2) */
.pa-m--revija { z-index: 1; --w: 40; --h: 27; --x1: 22; --y1: 19.5; --s1: .7; --x2: 30; --y2: 38.5; --s2: .84; --r2: -3; }
.pa-m--casopis { --w: 24; --h: 32; --x1: 49.5; --y1: 20.5; --s1: .6; --x2: 56; --y2: 21; --s2: .64; --r2: 6; }
.pa-m--portal { --w: 38; --h: 25; --x1: 77; --y1: 19.5; --s1: .6; --x2: 24; --y2: 16.5; --s2: .6; --r2: -4; }
.pa-m--facebook { z-index: 2; --w: 20; --h: 27; --x1: 38; --y1: 43; --s1: .55; --x2: 72.5; --y2: 31; --s2: .52; --r2: -5; --okb: 6.6; }
.pa-m--instagram { z-index: 2; --w: 18; --h: 22.5; --x1: 61; --y1: 43; --s1: .62; --x2: 88; --y2: 28; --s2: .52; --r2: 6; --okb: 6.2; } .pa-m--instagram .pa-ok { left: auto; right: 0; }
/* the magazine: two pages, a photo across one */
.pa-rv { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; background: #f6f2ea; }
.pa-rvl { position: relative; overflow: hidden; } .pa-rvl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.pa-rvl small { position: absolute; left: 1.4em; bottom: 1.2em; font-size: .62em; color: rgba(255, 255, 255, .9); }
.pa-pg { position: absolute; bottom: 1em; font: 600 .7em var(--sans); color: #8a8f98; } .pa-rvl .pa-pg { right: 2em; color: #fff; } .pa-rvr .pa-pg { right: 2.6em; }
.pa-rvr { position: relative; padding: 2em 2em 2em 2.2em; }
.pr .pa-rvk { display: flex; align-items: center; gap: .7em; font: 700 .7em var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #c4561f; } .pa-rvk .pc-ad { font-size: .9em; }
.pr .pa-rvh { margin-top: .5em; font: 400 2.1em/1.04 var(--serif); letter-spacing: -.015em; color: #141414; }
.pr .pa-rvs { margin-top: .7em; font: italic 400 .9em/1.45 var(--serif); color: #3a3d42; }
.pa-rvc { margin-top: .9em; columns: 2; column-gap: 1.2em; } .pa-rvc .pr-sk { height: .4em; margin: .42em 0; }
.pr .pa-rvq { break-inside: avoid; margin: .5em 0; padding: .45em 0; border-block: .1em solid #e8692a; font: italic 400 .9em/1.3 var(--serif); color: #5a2a10; }
.pa-m--revija .pa-over { background: linear-gradient(90deg, transparent 43%, rgba(0, 0, 0, .14) 48.8%, rgba(0, 0, 0, .34) 50%, rgba(255, 255, 255, .16) 50.7%, transparent 57%), linear-gradient(90deg, rgba(0, 0, 0, .1), transparent 6%, transparent 94%, rgba(0, 0, 0, .1)); }
/* the newspaper: a masthead, a black-and-white photo, columns of text */
.pa-cs { position: absolute; inset: 0; padding: 1.4em 1.6em; background: #f3f0ea; color: #111; }
.pr .pa-csm { text-align: center; font: 700 2.6em/1 var(--serif); letter-spacing: -.02em; padding-bottom: .2em; border-bottom: .05em solid #111; } .pa-csm i { font-style: normal; color: #b4162b; }
.pr .pa-csd { display: flex; justify-content: space-between; padding: .45em 0; border-bottom: .2em double #111; font: 600 .6em var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #444; }
.pr .pa-csk { margin-top: .9em; } .pa-csk .pc-ad { font-size: .62em; }
.pr .pa-csh { margin-top: .35em; font: 700 1.85em/1.05 var(--serif); letter-spacing: -.01em; }
.pa-csb { margin-top: .9em; columns: 3; column-gap: 1em; } .pa-csb figure { column-span: all; margin-bottom: .7em; } .pa-csb img { display: block; width: 100%; height: 9em; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.pr .pa-csl { font: 600 .7em/1.4 var(--serif); } .pa-csb .pr-sk { height: .34em; margin: .36em 0; background: #c9c4ba; }
.pa-m--casopis .pa-over { background: linear-gradient(180deg, transparent 49.5%, rgba(0, 0, 0, .14) 50%, rgba(255, 255, 255, .35) 50.4%, transparent 51.2%), rgba(214, 200, 170, .28); mix-blend-mode: multiply; }
/* the portal, read on a tablet */
.pa-pt { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.pa-pt .pr-pnav { padding: 1em 2.2em; font-size: .62em; }
.pa-ptv { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pa-ptp { --sd: -9em; display: grid; grid-template-columns: minmax(0, 1fr) 8em; gap: 1.6em; padding: 1.4em 2em; transform: translateY(calc(var(--pk) * var(--sd))); }
.pa-pta .pc-ad { font-size: .55em; } .pr .pa-pth { margin-top: .4em; font: 400 1.85em/1.06 var(--serif); color: #111; }
.pr .pa-ptb { display: flex; align-items: center; gap: .8em; margin-top: .6em; font-size: .6em; color: #6b6f77; } .pa-ptb .pr-logo { color: #111; }
.pa-pti { height: 10em; margin-top: .8em; overflow: hidden; border-radius: .3em; } .pa-pti img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr .pa-ptl { margin-top: .8em; font: 600 .72em/1.5 var(--sans); color: #22252b; } .pa-pta .pr-sk { height: .4em; margin: .42em 0; }
.pa-pts small { display: block; padding-bottom: .5em; border-bottom: .15em solid #111; font: 800 .5em var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pr .pa-pts p { display: grid; grid-template-columns: 1.6em 1fr; gap: .4em; padding: .6em 0; border-bottom: 1px solid #e0ddd6; } .pa-pts b { font: 400 1.1em var(--serif); color: #b4162b; } .pa-pts .pr-sk { height: .34em; margin: .3em 0; }
.pa-m--portal .pa-dev { inset: -1.7em; border-radius: 2em; background: #0f1216; box-shadow: 0 0 0 .12em #2b3038, 0 2.6em 4.4em -1em rgba(0, 0, 0, .8); }
.pa-cam { position: absolute; left: .7em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: #262b33; }
/* Facebook and Instagram, each on a phone */
.pa-fb { position: absolute; inset: 0; padding-top: 1.1em; background: #fff; color: #1c1e21; }
.pr .pa-fbh { display: flex; align-items: center; gap: .7em; padding: 0 1.1em; } .pa-fbh .pc-av { width: 2.8em; height: 2.8em; font-size: .72em; } .pa-fbh b { display: block; font: 700 .85em var(--sans); } .pa-fbh small { display: block; font-size: .65em; color: #65676b; }
.pr .pa-fbt { padding: .8em 1.1em; font: 400 .8em/1.42 var(--sans); }
.pa-fbl { background: #f0f2f5; } .pa-fbl img { display: block; width: 100%; height: 10.4em; object-fit: cover; } .pr .pa-fbl p { padding: .6em 1.1em .1em; }
.pa-fbl small { display: block; font-size: .58em; letter-spacing: .04em; text-transform: uppercase; color: #65676b; } .pa-fbl b { display: block; margin-top: .2em; font: 700 .82em/1.25 var(--sans); }
.pa-fbl em { display: inline-block; margin: .5em 1.1em .9em; padding: .45em .9em; border-radius: .35em; background: #e4e6eb; font: 600 .7em var(--sans); font-style: normal; }
.pr .pa-fbr { display: flex; justify-content: space-around; padding: .8em 0; border-top: 1px solid #e4e6eb; font: 600 .68em var(--sans); color: #65676b; }
.pa-like { display: inline-block; width: 1.1em; height: 1.1em; margin-right: .4em; vertical-align: -.2em; border-radius: 50%; background: #1877f2; opacity: 0; }
.pa-ig { position: absolute; inset: 0; background: #ecebe7; color: #1c1a17; }
.pa-ig img { position: absolute; left: 5%; bottom: 7%; width: 90%; height: auto; mix-blend-mode: multiply; }
.pr .pa-igk { position: absolute; left: 1.4em; top: 1.5em; font: 700 .6em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #c4561f; }
.pr .pa-igh { position: absolute; left: 1.4em; right: 1.6em; top: 2.5em; font: 400 1.75em/1.04 var(--serif); letter-spacing: -.02em; }
.pr .pa-igf { position: absolute; left: 1.4em; bottom: 1.5em; font: 600 .62em var(--sans); color: #4e4a44; }
.pa-ign { position: absolute; right: 1em; top: 1em; padding: .2em .6em; border-radius: 1em; background: rgba(0, 0, 0, .55); color: #fff; font: 600 .6em var(--sans); }
.pa-igd { position: absolute; left: 0; right: 0; bottom: .6em; display: flex; justify-content: center; gap: .3em; } .pa-igd i { width: .38em; height: .38em; border-radius: 50%; background: rgba(0, 0, 0, .22); } .pa-igd i:first-child { background: #3897f0; }
.pa-m--facebook .pa-dev { inset: -6.6em -1.3em -14.4em; } .pa-m--instagram .pa-dev { inset: -6.2em -1.3em -15.3em; }
.pa-m--facebook .pa-dev, .pa-m--instagram .pa-dev { border-radius: 3.2em; background: #0b0d11; box-shadow: 0 0 0 .14em #2b3038, 0 2.6em 4.4em -1em rgba(0, 0, 0, .85); }
.pa-scr { position: absolute; inset: .6em; overflow: hidden; border-radius: 2.7em; background: #fff; } .pa-m--facebook .pa-scr { background: #f0f2f5; }
.pa-sb { position: absolute; left: 2.2em; right: 2em; top: 1.2em; display: flex; justify-content: space-between; align-items: center; font: 700 .72em var(--sans); color: #111; } .pa-sb i { width: 1.9em; height: .9em; border-radius: .25em; border: .12em solid #111; }
.pa-apph { position: absolute; left: 1.1em; right: 1.1em; top: 3.1em; height: 2.6em; display: flex; align-items: center; gap: .6em; font-size: .95em; }
.pa-m--facebook .pa-apph b { margin-right: auto; font: 800 1.1em var(--sans); color: #1877f2; } .pa-m--facebook .pa-apph i { width: 1.8em; height: 1.8em; border-radius: 50%; background: #e4e6eb; }
.pa-m--instagram .pa-apph .pc-av { width: 2.4em; height: 2.4em; font-size: .7em; box-shadow: 0 0 0 .14em #fff, 0 0 0 .3em #e1306c; } .pa-m--instagram .pa-apph b { font: 700 .82em var(--sans); } .pa-apph b small { display: block; font: 400 .85em var(--sans); color: #737373; }
.pa-appf { position: absolute; left: 0; right: 0; bottom: 0; padding: .9em 1.2em; } .pa-m--facebook .pa-appf { height: 13.8em; } .pa-m--instagram .pa-appf { height: 14.7em; }
.pa-skel { display: block; margin-top: .6em; padding: .4em 0; } .pa-m--facebook .pa-skel { padding: 1em; border-radius: .6em; background: #fff; } .pa-skel .pr-sk { height: .5em; background: #dcdfe4; }
.pa-igact { display: flex; align-items: center; gap: .9em; } .pa-igact svg { width: 1.6em; height: 1.6em; fill: transparent; stroke: #111; stroke-width: 1.8; stroke-linejoin: round; } .pa-igact em { margin-left: auto; font-style: normal; }
.pa-heart { display: inline-flex; } .pa-heart svg { overflow: visible; } .pa-heart path { stroke: #111; }
.pr .pa-iglk { display: block; margin-top: .5em; font: 700 .78em var(--sans); }
.pa-cap { position: absolute; z-index: 4; left: 50%; bottom: 4.5%; font: 400 2em var(--serif); white-space: nowrap; color: #fff; opacity: 0; transform: translateX(-50%); }

/* ---- ČLANEK · 4 the readers: one reader, five moments in a day; then all of them, from every side */
.pb-d { background: radial-gradient(56% 70% at 50% 52%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); }
.pb-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .pb-wires--m { display: none; }
.pb-w { fill: none; stroke: color-mix(in srgb, var(--c) 50%, transparent); stroke-width: .12; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.pb-w.pb-w--c { stroke: color-mix(in srgb, var(--c) 26%, transparent); stroke-width: .09; }
.pb-pl { fill: none; stroke: #fff; stroke-width: .34; stroke-linecap: round; stroke-dasharray: .06 1; stroke-dashoffset: 1.06; opacity: 0; filter: drop-shadow(0 0 4px var(--c)); }
.pb-me { position: absolute; z-index: 3; left: 50%; top: 52%; width: 12em; height: 12em; opacity: 0; transform: translate(-50%, -50%); }
.pb-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.pb-seg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 16 84; stroke-dashoffset: calc(var(--i) * -20 - 2); transition: stroke .4s; }
.pb-seg.is-on { stroke: var(--c); filter: drop-shadow(0 0 3px var(--c)); }
.pb-av { position: absolute; inset: 13%; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #33284a, #120d18 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 3.4em -1em var(--c); }
.pb-sil { display: block; fill: #9a8ab4; }
.pb-av .pb-sil { width: 80%; height: 80%; margin: 24% 0 0 10%; }
.pr .pb-who { position: absolute; left: 50%; top: 100%; margin-top: .6em; text-align: center; white-space: nowrap; translate: -50% 0; } .pb-who b { display: block; font: 400 1.7em var(--serif); } .pb-who small { font-size: 1em; color: #c3b2d8; }
.pb-node { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: flex; align-items: center; gap: .9em; padding: .65em 1.4em .65em .65em; border-radius: 3em; background: rgba(14, 18, 26, .92); border: 1px solid rgba(255, 255, 255, .12); opacity: 0; transform: translate(-50%, -50%); transition: border-color .4s, box-shadow .4s; }
.pb-node.is-on { border-color: var(--c); box-shadow: 0 0 2.6em -.6em var(--c); }
.pb-ic { display: grid; place-items: center; flex: none; width: 3em; height: 3em; border-radius: 50%; background: color-mix(in srgb, var(--c) 20%, #141a24); }
.pb-ic svg { width: 1.6em; height: 1.6em; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pb-node b { display: block; font: 600 1.15em var(--sans); } .pb-node small { display: block; font-size: .95em; color: #9aa6b6; white-space: nowrap; }
.pb-p { position: absolute; z-index: 1; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 3.1em; height: 3.1em; overflow: hidden; border-radius: 50%; background: #161c26; border: .12em solid rgba(255, 255, 255, .14); opacity: 0; transform: translate(-50%, -50%); transition: background .5s, border-color .5s, box-shadow .5s; }
.pb-p .pb-sil { width: 80%; height: 80%; margin: 26% 0 0 10%; fill: #4b5566; transition: fill .5s; }
.pb-p.is-lit { border-color: var(--c); background: color-mix(in srgb, var(--c) 24%, #161c26); box-shadow: 0 0 1.4em -.3em var(--c); } .pb-p.is-lit .pb-sil { fill: #ecdcff; }
.pb-cap { position: absolute; z-index: 4; left: 50%; top: 4.5%; height: 1.3em; font: 400 2em var(--serif); color: #fff; }
.pb-cap span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; translate: -50% 0; }
.pb-d .pr-done { top: 4%; bottom: auto; }

/* ---- OGLAS (v41) · 1 six ideas */
.pr .po-brief { position: absolute; left: 50%; top: 3.4em; display: flex; align-items: baseline; gap: 1em; padding: .7em 1.4em; border-radius: 2em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; opacity: 0; translate: -50% 0; }
.po-brief small { font: 700 .9em var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c); } .po-brief b { font: 500 1.2em var(--sans); color: #e7ecf2; }
.po-cons { position: absolute; left: 4.5em; right: 4.5em; top: 10.4em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4em 2.4em; }
.po-con { position: relative; opacity: 0; transition: transform .6s cubic-bezier(.2, 1, .3, 1), opacity .5s, filter .5s; }
.po-conad { overflow: hidden; border-radius: .6em; border: 1px solid rgba(255, 255, 255, .1); transition: border-color .4s, box-shadow .4s; }
.po-conad .po-ad { --s: .4787; display: block; border-radius: 0; box-shadow: none; }
.pr .po-con figcaption { margin-top: .7em; font-size: 1.2em; color: #c8d2de; } .po-con figcaption small { display: block; margin-top: .2em; font-size: .8em; color: #8d97a4; } .po-con figcaption b { margin-right: .5em; font: 700 1.05em var(--sans); color: var(--c); }
.po-pick { position: absolute; z-index: 2; left: 50%; top: -1.3em; display: flex; align-items: center; gap: .6em; padding: .45em 1.1em .45em .45em; border-radius: 2em; background: #10141b; border: 1px solid var(--c); font: 600 1.05em var(--sans); white-space: nowrap; opacity: 0; transform: translate(-50%, .6em); transition: opacity .4s, transform .4s; }
.po-pick i { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--c); } .po-pick svg { width: 1.1em; height: 1.1em; fill: none; stroke: #140a1c; stroke-width: 2.6; }
.po-con.is-hover .po-conad { border-color: rgba(255, 255, 255, .4); }
.po-con.is-pick { z-index: 1; transform: scale(1.06); } .po-con.is-pick .po-conad { border-color: var(--c); box-shadow: 0 0 3em -.8em var(--c); } .po-con.is-pick .po-pick { opacity: 1; transform: translate(-50%, 0); }
.po-con.is-dim { filter: saturate(.25) brightness(.55); }
/* an ad (60 × 31.4 em; --s scales it): positions in % of the ad */
.po-ad { position: relative; flex: none; width: 60em; height: 31.4em; overflow: hidden; border-radius: .4em; background: #ecebe7; color: #1c1a17; font-size: calc(1em * var(--s, 1)); line-height: 1.2; box-shadow: 0 2em 4em -1.6em rgba(0, 0, 0, .8); }
.po-ad > * { position: absolute; margin: 0; } .pr .po-ad > p { margin: 0; }
.po-bg { inset: 0; background: linear-gradient(90deg, #e3e0da, #ecebe7 46%); } .po-bg::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .5em; background: #e8692a; }
.po-img { left: 42%; top: 8%; width: 56%; height: auto; mix-blend-mode: darken; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.po-logo { left: 6%; top: 8%; font: 800 1.4em var(--sans); letter-spacing: -.01em; white-space: nowrap; } .po-logo i { font-style: normal; color: #e8692a; }
.po-h { left: 6%; top: 22%; width: 40%; font: 700 4.6em/1 var(--serif); letter-spacing: -.02em; } .po-h span { display: block; } .po-h span:last-child { color: #c4561f; }
.po-s { left: 6%; top: 58%; width: 36%; font: 500 1.35em/1.35 var(--sans); color: #4e4a44; }
.po-cta { left: 6%; top: 74%; padding: .7em 1.4em; border-radius: 2em; background: #e8692a; color: #fff; font: 700 1.3em var(--sans); font-style: normal; white-space: nowrap; }
.po-ad--c { background: radial-gradient(90% 120% at 80% 50%, #3a2213, #120b07 70%); color: #fff; } .po-ad--c .po-logo { color: #f1e3cf; }
.po-ad--c .po-img { left: 46%; top: 14%; width: 52%; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 1em 1em rgba(0, 0, 0, .6)); opacity: .95; border-radius: .6em; }
.po-num { left: 6%; top: 22%; } .po-num--2 { top: 46%; } .po-num b { font: 700 6.4em/.9 var(--sans); letter-spacing: -.04em; color: #ffb27a; } .po-num small { margin-left: .5em; font: 600 1.2em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #d9c3b2; }
.po-ad--c .po-h { top: 72%; width: 40%; font-size: 2.4em; } .po-ad--c .po-cta { top: 84%; left: 46%; }
/* the photo ideas: a picture across the ad, the words on its dark side */
.po-ad--ph { background: #111; color: #fff; } .po-bimg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.po-ad--ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 5, 2, .78), rgba(8, 5, 2, .25) 55%, transparent); }
.po-ad--ph > :not(.po-bimg) { z-index: 1; } .po-ad--ph .po-logo { color: #fff; } .po-ad--ph .po-h { width: 50%; } .po-ad--ph .po-h span:last-child { color: #ffb27a; } .po-ad--ph .po-s { color: #f1e3cf; } .po-ad--ph .po-cta { top: 72%; }
.po-ad--b .po-bimg { object-position: 70% 40%; } .po-ad--d .po-bimg { object-position: 70% 50%; } .po-ad--d .po-h span:last-child { color: #ffd9b8; }
.po-ad--f .po-h { font-size: 3.6em; width: 54%; }

/* ---- OGLAS · 2 the billboard: six layers in an exploded stack (--ex), seen from above (--rot); each drops in (--dz);
   then the stack closes into one flat billboard (60 × 28.3 em, 504 × 238 cm) and plays as a digital one */
@property --ex { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --rot { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --dz { syntax: '<number>'; inherits: false; initial-value: 0; }
.ob-3d { position: absolute; inset: 0; perspective: 170em; perspective-origin: 50% 35%; }
.ob-stack { --ex: 1; --rot: 1; position: absolute; left: 50%; top: 47%; width: 60em; height: 28.3em; margin: -14.15em 0 0 -30em; transform-style: preserve-3d;
  transform: translate(calc(var(--rot) * var(--tx, -11em)), calc(var(--rot) * var(--ty, 13.5em))) rotateX(calc(var(--rot) * 56deg)) rotateZ(calc(var(--rot) * -32deg)) scale(calc((1 - var(--rot) * .4) * var(--k, 1))); }
.ob-l { position: absolute; inset: 0; opacity: 0; transform: translateZ(calc((var(--i) * 5.6 * var(--ex) + var(--dz)) * 1em)); }
.ob-lc { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--ex) * .5em); background: rgba(255, 255, 255, calc(var(--ex) * .025)); box-shadow: inset 0 0 0 calc(var(--ex) * .12em) rgba(255, 255, 255, calc(var(--ex) * .3)); }
.ob-l--ozadje .ob-lc { background: none; box-shadow: 0 2em 4em -1.6em rgba(0, 0, 0, .85); }
.ob-tag { position: absolute; right: 0; bottom: 100%; margin-bottom: .6em; display: flex; align-items: center; gap: .6em; font: 600 1.9em var(--sans); white-space: nowrap; color: #fff; opacity: 0; }
.ob-tag b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c); color: #1a0b14; font-size: .85em; }
.ob-bg { position: absolute; inset: 0; background: linear-gradient(100deg, #fbf4e9 0%, #f7e3c9 38%, #efb37c 100%); }
.ob-ph { position: absolute; right: 0; top: 0; width: 64%; height: 100%; object-fit: cover; object-position: 62% 42%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%); mask-image: linear-gradient(90deg, transparent, #000 24%); transform-origin: 70% 50%; }
.pr .ob-h { position: absolute; left: 4.6%; top: 18%; font: 400 6em/.94 var(--serif); letter-spacing: -.03em; color: color-mix(in srgb, #f4ead9 calc(var(--ex) * 100%), #1c1a17); } .ob-h span { display: block; } .ob-h span:last-child { color: #c4561f; }
.pr .ob-s { position: absolute; left: 4.8%; top: 58%; font: 600 1.35em/1.35 var(--sans); color: color-mix(in srgb, #e4d6c4 calc(var(--ex) * 100%), #4e4a44); }
.ob-logo { position: absolute; left: 4.8%; top: 7%; font: 800 1.6em var(--sans); letter-spacing: -.01em; color: color-mix(in srgb, #fff calc(var(--ex) * 100%), #1c1a17); } .ob-logo i { font-style: normal; color: #e8692a; }
.ob-cta { position: absolute; left: 4.8%; bottom: 10%; padding: .7em 1.3em; border-radius: 2em; background: #e8692a; color: #fff; font: 700 1.25em var(--sans); font-style: normal; white-space: nowrap; }
.pr .ob-size { position: absolute; left: 50%; bottom: 5%; display: flex; align-items: baseline; gap: .8em; opacity: 0; translate: -50% 0; } .ob-size b { font: 400 2em var(--serif); } .ob-size small { font: 700 .95em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.ob-checks { position: absolute; right: 4em; top: 50%; display: grid; gap: .8em; margin: 0; padding: 0; list-style: none; transform: translateY(-50%); }
.ob-checks li { display: flex; align-items: center; gap: .8em; padding: .7em 1.2em .7em .7em; border-radius: 2em; background: rgba(12, 16, 22, .9); border: 1px solid rgba(255, 255, 255, .1); font: 600 1.15em var(--sans); white-space: nowrap; opacity: 0; }
.ob-checks i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #1f9d63; } .ob-checks svg { width: 1em; height: 1em; fill: none; stroke: #fff; stroke-width: 2.6; }
.ob-dooh { position: absolute; left: 50%; bottom: 5.5%; width: 30em; opacity: 0; transform: translateX(-50%); }
.pr .ob-dooh p { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6em; } .ob-dooh b { font: 600 1.15em var(--sans); } .ob-dooh small { font: 700 .85em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.ob-prog { display: block; height: .3em; border-radius: .3em; background: rgba(255, 255, 255, .12); overflow: hidden; } .ob-prog i { display: block; height: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }

/* ---- OGLAS · 3 every medium: each comes to the front (--fo 1), then takes its place on the campaign board (--fo 0) */
@property --fo { syntax: '<number>'; inherits: true; initial-value: 0; }
.of-m { --fo: 1; --xf: 50; --yf: 26.5;
  --X: calc(var(--xs) + (var(--xf) - var(--xs)) * var(--fo)); --Y: calc(var(--ys) + (var(--yf) - var(--ys)) * var(--fo)); --S: calc(var(--ss) + (var(--sf) - var(--ss)) * var(--fo));
  position: absolute; z-index: calc(1 + var(--fo) * 9); left: 0; top: 0; width: calc(var(--w) * 1em); height: calc(var(--h) * 1em); opacity: 0;
  translate: calc((var(--X) - var(--w) / 2) * 1em) calc((var(--Y) - var(--h) / 2) * 1em); scale: var(--S); rotate: calc(var(--rs, 0) * (1 - var(--fo)) * 1deg); }
.of-art { position: absolute; inset: 0; }
.of-scrim { position: absolute; z-index: 5; inset: 0; background: rgba(5, 7, 11, .74); opacity: 0; }
.pr .of-lbl { position: absolute; left: 50%; top: 100%; margin-top: .5em; font: 600 calc(1.1em / var(--S)) var(--sans); white-space: nowrap; color: #c8d2de; opacity: calc(1 - var(--fo) * 2.5); translate: -50% 0; }
.of-note { position: absolute; z-index: 12; left: 50%; bottom: 4.2%; display: flex; align-items: baseline; gap: .8em; padding: .6em 1.3em; border-radius: 2em; background: rgba(12, 16, 22, .92); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font: 500 1.15em var(--sans); white-space: nowrap; color: #dfe5ec; opacity: 0; translate: -50% 0; }
.of-note b { font-weight: 700; color: var(--c); }
.of-m--plakat { --w: 64; --h: 36; --sf: .82; --xs: 25; --ys: 15.6; --ss: .6; }
.of-m--instagram { --w: 20; --h: 41; --sf: .95; --xs: 72.5; --ys: 27.5; --ss: .58; --rs: -3; }
.of-m--facebook { --w: 20; --h: 41; --sf: .95; --xs: 87.5; --ys: 27.5; --ss: .58; --rs: 3; }
.of-m--google { --w: 36; --h: 24; --sf: 1.05; --xs: 23.5; --ys: 42.4; --ss: .64; }
.of-m--revija { --w: 21; --h: 29.7; --sf: 1.2; --xs: 50.5; --ys: 40.4; --ss: .54; --rs: 4; }
/* the billboard on a street at dusk, lit from above */
.of-street { position: absolute; inset: 0; overflow: hidden; border-radius: .8em; background: radial-gradient(70% 40% at 50% 84%, rgba(255, 170, 110, .28), transparent 70%), linear-gradient(180deg, #08111f 0%, #172744 50%, #3a3452 74%, #6a4848 100%); box-shadow: 0 2.4em 4em -1.6em rgba(0, 0, 0, .9); }
.of-stars { position: absolute; inset: 0 0 55%; opacity: .6; background-image: radial-gradient(.12em .12em at 8% 22%, #fff, transparent), radial-gradient(.1em .1em at 23% 9%, #fff, transparent), radial-gradient(.12em .12em at 41% 30%, #fff, transparent), radial-gradient(.1em .1em at 62% 12%, #fff, transparent), radial-gradient(.12em .12em at 79% 26%, #fff, transparent), radial-gradient(.1em .1em at 93% 8%, #fff, transparent); }
.of-sky { position: absolute; left: 0; right: 0; bottom: 17%; width: 100%; height: 27%; fill: #0a0e18; }
.of-road { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(#151a24, #0a0c11); }
.of-road::after { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: .25em; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 3em, transparent 3em 6em); }
.of-car { position: absolute; left: -10em; bottom: 9%; width: 4em; height: .5em; border-radius: .3em; background: linear-gradient(90deg, transparent, rgba(255, 238, 200, .9)); box-shadow: 1em 0 2em .4em rgba(255, 230, 180, .25); }
.of-car--2 { left: auto; right: -10em; bottom: 3%; background: linear-gradient(270deg, transparent, rgba(255, 90, 80, .9)); box-shadow: -1em 0 2em .4em rgba(255, 80, 70, .25); }
.of-bb { position: absolute; left: 20%; top: 9%; width: 60%; aspect-ratio: 504 / 238; }
.of-bbf { position: absolute; inset: 0; overflow: hidden; font-size: .64em; border: .55em solid #14171d; background: #000; box-shadow: 0 0 7em -1em rgba(255, 214, 150, .4); }
.ob-l2 { position: absolute; inset: 0; }
.of-pole { position: absolute; left: 30%; top: 100%; width: 1.3em; height: 9em; background: linear-gradient(90deg, #10131a, #252a33, #10131a); } .of-pole--2 { left: auto; right: 30%; }
.of-lamp { position: absolute; left: 22%; top: -1.8em; width: 9em; height: 13em; background: radial-gradient(60% 100% at 50% 0%, rgba(255, 228, 170, .32), transparent 75%); mix-blend-mode: screen; }
.of-lamp::before { content: ""; position: absolute; left: 50%; top: 0; width: 3em; height: .5em; margin-left: -1.5em; border-radius: .2em; background: #2b2f38; box-shadow: 0 .3em 1em rgba(255, 230, 180, .5); }
.of-lamp--2 { left: auto; right: 22%; }
/* Instagram: a story on a phone; Facebook: a post in the feed */
.of-ph { position: absolute; inset: 0; border-radius: 3em; background: #0b0d11; box-shadow: 0 0 0 .14em #2b3038, 0 2.4em 4em -1em rgba(0, 0, 0, .85); }
.of-scr { position: absolute; inset: .7em; overflow: hidden; border-radius: 2.4em; background: #000; }
.of-stimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.of-st::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 38%, transparent 62%, rgba(0, 0, 0, .6)); }
.of-st > :not(img) { z-index: 1; }
.of-stbar { position: absolute; left: 1em; right: 1em; top: 1.2em; display: flex; gap: .3em; } .of-stbar i { flex: 1; height: .22em; border-radius: .2em; background: rgba(255, 255, 255, .35); } .of-stbar i:first-child { background: #fff; transform-origin: left; }
.pr .of-sth { position: absolute; left: 1em; top: 2.2em; display: flex; align-items: center; gap: .5em; color: #fff; } .of-sth .pc-av { width: 2.2em; height: 2.2em; font-size: .7em; } .of-sth b { font: 700 .82em var(--sans); } .of-sth small { font-size: .72em; opacity: .8; }
.of-stx { position: absolute; left: 1.2em; right: 1.2em; top: 5.2em; } .pr .of-sthl { font: 400 3.6em/.95 var(--serif); letter-spacing: -.02em; color: #fff; text-shadow: 0 .1em .6em rgba(0, 0, 0, .35); }
.pr .of-sts { margin-top: .8em; font: 600 .9em var(--sans); color: #ffe2c6; }
.of-stc { position: absolute; left: 50%; bottom: 2.2em; padding: .65em 1.2em; border-radius: 2em; background: #fff; color: #111; font: 700 .9em var(--sans); font-style: normal; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .35); }
.of-fb { background: #f0f2f5; color: #1c1e21; }
.pr .of-fbtop { display: flex; align-items: center; gap: .5em; padding: 2.4em 1.1em .7em; background: #fff; } .of-fbtop b { margin-right: auto; font: 800 1.15em var(--sans); color: #1877f2; } .of-fbtop i { width: 1.8em; height: 1.8em; border-radius: 50%; background: #e4e6eb; }
.of-fbpost { margin-top: .6em; background: #fff; }
.pr .of-fbh { display: flex; align-items: center; gap: .6em; padding: .9em 1em 0; } .of-fbh .pc-av { width: 2.4em; height: 2.4em; font-size: .7em; } .of-fbh b { display: block; font: 700 .82em var(--sans); } .of-fbh small { display: block; font-size: .65em; color: #65676b; }
.pr .of-fbt { padding: .7em 1em; font: 400 .78em/1.42 var(--sans); }
.of-fbimg { display: block; width: 100%; height: 15em; object-fit: cover; object-position: 66% 50%; }
.pr .of-fbcta { display: flex; align-items: center; gap: .6em; padding: .7em 1em; background: #f0f2f5; } .of-fbcta span { flex: 1; min-width: 0; } .of-fbcta small { display: block; font-size: .6em; text-transform: uppercase; color: #65676b; } .of-fbcta b { display: block; font: 700 .76em var(--sans); }
.of-fbcta em { padding: .5em .9em; border-radius: .35em; background: #1877f2; color: #fff; font: 700 .72em var(--sans); font-style: normal; }
.pr .of-fbr { display: flex; justify-content: space-around; padding: .7em 0; font: 600 .66em var(--sans); color: #65676b; }
/* Google: a search ad, words only */
.of-g { position: absolute; inset: 0; padding: 1.6em 2em; border-radius: .9em; background: #fff; color: #202124; box-shadow: 0 2.4em 4em -1.6em rgba(0, 0, 0, .9); }
.pr .of-gq { display: flex; align-items: center; gap: .7em; padding: .6em 1.1em; border-radius: 2em; border: 1px solid #dfe1e5; box-shadow: 0 .1em .4em rgba(32, 33, 36, .12); font-size: 1em; color: #3c4043; } .of-gq svg { width: 1.1em; height: 1.1em; fill: none; stroke: #5f6368; stroke-width: 2.2; }
.of-gad { margin-top: 1.3em; } .pr .of-gs { font: 700 .82em var(--sans); color: #202124; }
.pr .of-gu { display: flex; align-items: center; gap: .6em; margin-top: .6em; } .of-gu .pc-av { width: 2.2em; height: 2.2em; font-size: .62em; } .of-gu b { display: block; font: 500 .85em var(--sans); } .of-gu small { display: block; font-size: .74em; color: #4d5156; }
.pr .of-gt { margin-top: .4em; font: 400 1.35em/1.25 var(--sans); color: #1a0dab; }
.pr .of-gd { margin-top: .3em; font-size: .88em; line-height: 1.5; color: #4d5156; }
.pr .of-gl { display: flex; gap: 1.6em; margin-top: .6em; font-size: .88em; color: #1a0dab; }
.of-gorg { margin-top: 1.2em; padding-top: 1em; border-top: 1px solid #ebebeb; } .of-gorg .pr-sk { height: .5em; background: #e8eaed; } .pr .of-gt2 { width: 62%; height: .9em; margin: .7em 0; border-radius: .4em; background: #c6cdf7; }
/* the magazine: a whole A4 page */
.of-rv { position: absolute; inset: 0; overflow: hidden; background: #f4efe6; color: #1c1a17; box-shadow: 0 2.4em 4em -1.6em rgba(0, 0, 0, .9); }
.of-rvimg { position: absolute; left: 0; top: 0; width: 100%; height: 52%; object-fit: cover; background: #e9e7e2; mix-blend-mode: multiply; }
.pr .of-rvh { position: absolute; left: 1.4em; top: 53%; font: 400 3em/.95 var(--serif); letter-spacing: -.02em; }
.pr .of-rvt { position: absolute; left: 1.5em; right: 1.5em; top: 73%; font: 400 .66em/1.5 var(--sans); color: #3a3d42; }
.pr .of-rvsp { position: absolute; left: 1.5em; right: 1.5em; top: 82.5%; display: flex; gap: 1.4em; } .of-rvsp span { font-size: .55em; color: #6b6f77; } .of-rvsp b { display: block; font: 700 1.9em var(--sans); color: #c4561f; }
.pr .of-rvf { position: absolute; left: 1.5em; right: 1.5em; bottom: 1.2em; display: flex; justify-content: space-between; align-items: baseline; padding-top: .6em; border-top: 1px solid #d8d1c4; font-size: .62em; color: #6b6f77; } .of-rvf .pr-logo { font-size: 1.5em; color: #1c1a17; }
.of-rvo { position: absolute; right: 1em; top: .9em; font: 600 .5em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6b6f77; }

/* ---- OGLAS · 4 the reach: a city, five media, people on their way; on the right what it brings */
.od-city { position: absolute; left: 3em; top: 5.2em; width: 57em; aspect-ratio: 570 / 460; opacity: 0; }
.od-map { display: block; width: 100%; height: 100%; overflow: visible; }
.od-land { fill: #0d131c; stroke: rgba(255, 255, 255, .07); } .od-blk { fill: #121a25; }
.od-river { fill: none; stroke: #12304a; stroke-width: 22; stroke-linecap: round; }
.od-road { fill: none; stroke: #1d2735; stroke-width: 9; stroke-linecap: round; }
.od-p { fill: #5d6878; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 156, 207, .35)); }
.od-t { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: flex; align-items: center; gap: .55em; padding: .35em .9em .35em .35em; border-radius: 2em; background: rgba(12, 16, 22, .92); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); font: 600 1em var(--sans); white-space: nowrap; color: #fff; opacity: 0; transform: translate(-50%, -50%); }
.od-t::before { content: ""; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--c); box-shadow: 0 0 1em var(--c); }
.od-t i { position: absolute; left: .35em; top: 50%; width: 1.3em; height: 1.3em; margin-top: -.65em; border-radius: 50%; border: .14em solid var(--c); }
.od-shop { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: grid; justify-items: center; gap: .2em; padding: .5em 1em; border-radius: .8em; background: #1c1a17; border: 1px solid #e8692a; color: #fff; opacity: 0; transform: translate(-50%, -50%); transition: box-shadow .3s; }
.od-shop i { font-style: normal; } .od-shop .pr-logo { font-size: 1.1em; } .od-shop small { font-size: .78em; color: #d9c3b2; white-space: nowrap; }
.od-shop.is-on { box-shadow: 0 0 0 .3em rgba(232, 105, 42, .35), 0 0 2.4em rgba(232, 105, 42, .6); }
.od-pan { position: absolute; left: 63em; right: 3.4em; top: 5.2em; bottom: 6.6em; display: flex; flex-direction: column; gap: 1.6em; padding: 1.8em 2em; border-radius: 1em; background: rgba(16, 20, 28, .92); border: 1px solid rgba(255, 255, 255, .08); opacity: 0; }
.pr .od-ph { display: flex; justify-content: space-between; align-items: baseline; } .od-ph b { font: 400 1.9em var(--serif); } .od-ph small { font: 700 .8em var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.od-fun { display: grid; gap: .9em; } .pr .od-fun p { display: grid; gap: .35em; } .od-fun span { font-size: 1em; color: #c8d2de; }
.od-fun i { display: block; width: calc(var(--w) * 1%); height: .85em; border-radius: .5em; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); transform: scaleX(0); transform-origin: left; }
.od-chart { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pr .od-ch { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6em; } .od-ch b { font: 600 1.1em var(--sans); } .od-ch small { font-size: .85em; color: #8d97a4; }
.od-chart svg { flex: 1; min-height: 0; width: 100%; overflow: visible; }
.od-grid { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.od-area { fill: color-mix(in srgb, var(--c) 20%, transparent); opacity: 0; }
.od-line { fill: none; stroke: var(--c); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--c)); }
.od-mark { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1.2; stroke-dasharray: 4 4; }
.pr .od-mon { display: flex; justify-content: space-between; margin-top: .5em; font-size: .8em; color: #6b7685; }
.od-start { position: absolute; left: 34%; top: 2.2em; padding: .2em .6em; border-radius: .3em; background: rgba(255, 255, 255, .08); font: 600 .78em var(--sans); color: #dfe5ec; opacity: 0; }
.od-up { position: absolute; right: 0; top: 2.2em; font: 700 1.05em var(--sans); color: var(--c); opacity: 0; } .od-up::before { content: "↑ "; }
.po-d .pr-done { left: 31.5em; bottom: 2%; }

/* ---- REKLAMA · the storyboard and the shoot */
.pv-sheet { position: absolute; left: 3%; right: 3%; top: 50%; translate: 0 -50%; padding: 2em 2.4em 2.4em; border-radius: 1em; background: #10141b; border: 1px solid rgba(255, 255, 255, .08); opacity: 0; }
.pr .pv-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1em; border-bottom: 1px solid rgba(255, 255, 255, .08); } .pv-head b { font: 400 2.4em var(--serif); } .pv-head small { font-size: .95em; letter-spacing: .12em; text-transform: uppercase; color: #8d97a4; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20em; gap: 2.4em; margin-top: 1.8em; }
.pv-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6em 1.2em; align-content: center; }
.pv-shot { opacity: 0; }
.pv-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5em; background: #f1ede4; container-type: inline-size; }
.pv-sk { position: absolute; inset: 0; width: 100%; height: 100%; } .pv-sk circle, .pv-sk path { fill: none; stroke: #2b2f36; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pr .pv-sk text { font: italic 600 14px var(--serif); letter-spacing: 0; text-transform: none; fill: #1d2026; stroke: none; opacity: 0; }
.pv-foot { position: absolute; inset: 0; background: #000; opacity: 0; }
.pv-m { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; object-fit: cover; }
.pv-end { display: grid; place-content: center; justify-items: center; gap: .4em; background: radial-gradient(circle at 50% 42%, #fbf6ee, #e2dbd0 75%); color: #1c1a17; text-align: center; }
.pv-end .pv-sl { font: 300 9cqw var(--serif); } .pv-end .pv-sl i { font-style: normal; color: #c4561f; } .pv-end .pr-logo { font-size: 4cqw; color: #1c1a17; }
.pv-vf { position: absolute; inset: 7%; color: #fff; font: 700 .85em var(--sans); opacity: 0; }
.pv-vf i { position: absolute; width: 1.2em; height: 1.2em; border: .14em solid #fff; } .pv-vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; } .pv-vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; } .pv-vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; } .pv-vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.pv-vf b { position: absolute; left: 1.7em; top: .1em; color: #ff5a5a; letter-spacing: .1em; } .pv-vf b::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .35em; border-radius: 50%; background: #ff5a5a; }
.pv-vf small { position: absolute; right: 1.7em; bottom: .1em; font-size: .9em; }
.pv-shot figcaption { display: flex; align-items: baseline; gap: .6em; margin-top: .7em; font: 500 1.15em var(--sans); color: #c8d2de; } .pv-shot figcaption b { color: var(--c); } .pv-shot figcaption small { margin-left: auto; color: #6b7685; }
.pv-script { display: flex; flex-direction: column; gap: .9em; padding-left: 2em; border-left: 1px solid rgba(255, 255, 255, .08); }
.pv-script > small { font: 700 .85em var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.pr .pv-script p { min-height: 1.3em; font: 400 1.55em/1.2 var(--serif); color: #e7ecf2; } .pr .pv-script .pv-mus { margin-top: auto; font: 500 1em/1.4 var(--sans); letter-spacing: .02em; text-transform: none; color: #8d97a4; }
/* the edit */
.pv-ed { position: absolute; inset: 3%; display: grid; grid-template-columns: 15em minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1.2em; opacity: 0; }
.pv-bin { display: flex; flex-direction: column; gap: .8em; padding: 1.2em; border-radius: .8em; background: #10141b; border: 1px solid rgba(255, 255, 255, .07); }
.pv-bin small { font: 700 .8em var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6b7685; } .pr .pv-bin p { display: flex; align-items: center; gap: .7em; font-size: .92em; color: #c8d2de; }
.pv-th { flex: none; width: 5em; aspect-ratio: 16 / 9; border-radius: .3em; background: #222 center / cover no-repeat; }
.pv-th--detajl { background-image: url(/assets/img/fx/rk-macro.jpg); } .pv-th--mesto { background-image: url(/assets/img/fx/rk-aerial.jpg); } .pv-th--zastoj { background-image: url(/assets/img/fx/rk-traffic.jpg); }
.pv-th--jutro { background-image: url(/assets/img/fx/rk-rider.jpg); } .pv-th--mimo { background-image: url(/assets/img/fx/rk-wheel.jpg); }
.pv-th--delavnica { background-image: url(/assets/img/fx/rk-shop.jpg); } .pv-th--izdelek { background-image: url(/assets/img/fx/rk-studio.jpg); } .pv-th--napis { background: radial-gradient(circle, #fbf6ee, #ddd6cb); }
.pv-mon { display: flex; flex-direction: column; min-height: 0; }
.pv-scr { position: relative; flex: 1; min-height: 0; max-width: 100%; aspect-ratio: 16 / 9; align-self: center; overflow: hidden; border-radius: .6em; background: #000; container-type: size; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 1.6em 3em -1.4em rgba(0, 0, 0, .9); }
.pv-grade { position: absolute; left: 4%; right: 4%; top: 5%; display: flex; justify-content: space-between; opacity: 0; }
.pv-grade span { padding: .3em .8em; border-radius: .3em; background: rgba(0, 0, 0, .6); font: 700 3cqh var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.pr .pv-mbar { display: flex; justify-content: space-between; align-items: center; margin-top: .6em; font-size: .95em; color: #8d97a4; } .pv-mbar b { font: 600 1.3em ui-monospace, Consolas, monospace; letter-spacing: .06em; color: #fff; }
.pv-tl { grid-column: 1 / -1; padding: 1em 1.2em 1.2em; border-radius: .8em; background: #10141b; border: 1px solid rgba(255, 255, 255, .07); }
.pr .pv-ruler { display: flex; justify-content: space-between; margin: 0 0 .5em 7em; font: 500 .8em var(--sans); color: #6b7685; }
.pv-tracks { position: relative; display: grid; gap: .45em; }
.pr .pv-tr { display: grid; grid-template-columns: 7em 1fr; align-items: center; height: 2.5em; } .pv-tr > b { font: 600 .9em var(--sans); letter-spacing: .06em; color: #8d97a4; } .pr .pv-tr--v { height: 3.4em; }
.pv-lane { position: relative; height: 100%; border-radius: .35em; background: rgba(255, 255, 255, .04); }
.pv-cl, .pv-ti { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc(var(--w) * 1%); display: flex; align-items: center; gap: .5em; overflow: hidden; border-radius: .35em; white-space: nowrap; opacity: 0; }
.pv-cl { padding: 0 .4em; background: color-mix(in srgb, var(--c) 28%, #1b2230); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); font: 600 .82em var(--sans); color: #fff; } .pv-cl .pv-th { width: 4.4em; }
.pv-ti { padding: 0 .5em; background: #3a2a52; border: 1px solid #7b5fb0; font: italic 400 .9em var(--serif); color: #e9ddff; transform-origin: left; }
.pv-wave { position: absolute; left: 0; right: 0; top: .3em; bottom: .3em; display: flex; align-items: center; gap: .12em; clip-path: inset(0 100% 0 0); }
.pv-wave i { flex: 1; height: calc(var(--v) * 100%); border-radius: .1em; background: #5fd3a0; opacity: .85; }
.pv-phw { position: absolute; left: 7em; right: 0; top: -2em; bottom: 0; pointer-events: none; }
.pv-ph { position: absolute; left: 0; top: 0; bottom: 0; width: .16em; margin-left: -.08em; background: #ff4d4d; box-shadow: 0 0 .8em #ff4d4d; }
.pv-ph::before { content: ""; position: absolute; left: 50%; top: 0; width: 1em; height: 1em; margin-left: -.5em; background: #ff4d4d; clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* the premiere: the film full stage, letterboxed; then three cuts together */
.pv-prem { --px: 6%; --py: 22%; --pw: 50%; --ph: 50%; position: absolute; z-index: 1; left: calc(var(--pull) * var(--px)); top: calc(var(--pull) * var(--py)); width: calc(100% - var(--pull) * (100% - var(--pw))); height: calc(100% - var(--pull) * (100% - var(--ph))); }
.pv-film { position: absolute; inset: 0; overflow: hidden; border-radius: .2em; background: #000; box-shadow: 0 2.4em 4em -1.6em rgba(0, 0, 0, .9); }
.pv-film .pv-m { object-fit: cover; } .pv-endimg { opacity: 0; }
.pr .pv-ptag { position: absolute; left: 3%; top: 4.5%; display: flex; align-items: center; gap: .7em; font: 700 1em var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85); opacity: 0; }
.pv-ptag i { width: .7em; height: .7em; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 .8em #ff4d4d; }
.pv-d { perspective: 110em; }
.pv-o { position: absolute; opacity: 0; transform-style: preserve-3d; }
.pv-ofr { overflow: hidden; border-radius: .7em; background: #000; box-shadow: 0 2.4em 4em -1.6em rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12); } .pv-ofr img { display: block; width: 100%; height: auto; }
.pr .pv-o--9 { left: 61%; top: 12%; width: 15em; } .pr .pv-o--1 { left: 78%; top: 22%; width: 19em; }
.pv-o figcaption, .pr .pv-o16cap { margin-top: .9em; text-align: center; font-size: 1em; color: #9aa6b6; } .pv-o figcaption b, .pv-o16cap b { display: block; font: 700 1.5em var(--sans); letter-spacing: .06em; color: var(--c); }
.pr .pv-o16cap { position: absolute; left: 6%; top: 73%; width: 50%; opacity: 0; }

/* ---- the films on a phone: a taller stage, larger type, the scenes stacked */
@media (max-width: 760px) {
  .ws--pr .ws__stage { aspect-ratio: 3 / 4; }
  .pr { font-size: 2.1cqw; }
  /* ČLANEK: the information above the idea; the tool without its panels; the five versions and the desk re-laid for a tall stage */
  .pc-lbl { top: 1.4em; } .pc-lbl--in, .pc-arrow { display: none; } .pc-lbl--idea { left: 2.6em; top: 36em; }
  .pc-mail { left: 2.4em; top: 3.4em; width: 42.8em; padding-bottom: 1.2em; } .pr .pc-mfrom { padding: 1em 1.6em 0; } .pr .pc-msub { font-size: 1.9em; }
  .pc-mtext { font-size: 1.12em; } .pc-att { padding: .3em 1.6em 0; } .pc-att figure { width: 9em; } .pc-att img { height: 5em; }
  .pc-idea { left: 2.4em; top: 38em; width: 42.8em; padding: .2em 1.4em; }
  .pc-row { grid-template-columns: 5.6em minmax(0, 1fr); gap: .7em; padding: .8em 0; } .pc-row > small { font-size: .78em; }
  .pc-chips span { font-size: .92em; } .pc-ang span { display: none; } .pr .pc-ang { padding: .55em .6em; } .pc-ang b { font-size: .92em; }
  .pr .pc-draft { font-size: .92em; } .pr .pc-final { min-height: 0; font-size: 1.55em; }
  .pa-top { left: 2em; right: 2em; } .pa-top span { display: none; } .pa-layers, .pa-style { display: none; }
  .pa-master { left: 8.8em; top: 11em; } .pa-spec { left: auto; right: 0; top: auto; bottom: calc(100% + .5em); } .pa-h .pa-spec { left: auto; } .pa-page [data-p]::after { inset: -.3em; }
  .pa-m { --x0: 23.8; --y0: 30.2; }
  .pa-m--revija { --x1: 15.8; --y1: 13.4; --s1: .55; --x2: 23; --y2: 31.5; --s2: .62; --r2: -2; }
  .pa-m--casopis { --x1: 37.6; --y1: 13.8; --s1: .43; --x2: 37.4; --y2: 16.2; --s2: .46; --r2: 6; }
  .pa-m--portal { --x1: 23.8; --y1: 34.4; --s1: .78; --x2: 16.4; --y2: 14.4; --s2: .5; --r2: -4; }
  .pa-m--facebook { --x1: 15.4; --y1: 54.6; --s1: .4; --x2: 13.6; --y2: 50.8; --s2: .38; --r2: -5; }
  .pa-m--instagram { --x1: 33.4; --y1: 54.8; --s1: .46; --x2: 34.2; --y2: 50.6; --s2: .42; --r2: 6; }
  .pa-cap, .pa-b .pr-done { display: none; }
  .pb-wires--d { display: none; } .pb-wires--m { display: block; } .pb-wires--m .pb-w { stroke-width: .26; } .pb-wires--m .pb-w--c { stroke-width: .2; } .pb-wires--m .pb-pl { stroke-width: .8; }
  .pb-me { top: 50%; width: 11em; height: 11em; } .pb-node, .pb-p { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); } .pb-node { padding: .5em 1.1em .5em .5em; gap: .7em; } .pb-ic { width: 2.6em; height: 2.6em; }
  .pb-p { width: 2.3em; height: 2.3em; } .pb-cap { top: 6.4%; font-size: 1.6em; } .pb-d .pr-done { top: 5.6%; }
  /* OGLAS: the ideas two by three; the stack smaller; the board and the city re-laid for a tall stage */
  .pr .po-brief { top: 3.6em; width: 88%; white-space: normal; justify-content: center; flex-wrap: wrap; gap: .2em .8em; text-align: center; } .po-brief b { font-size: 1.05em; }
  .po-cons { left: 2.2em; right: 2.2em; top: 9.4em; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em 1.6em; } .po-conad .po-ad { --s: .3467; } .pr .po-con figcaption { margin-top: .4em; font-size: 1em; } .po-con figcaption small { display: none; } .po-pick { font-size: .9em; }
  .ob-stack { --k: .7; --tx: -4em; --ty: 9em; } .ob-tag { font-size: 2.4em; } .pr .ob-size { display: none; }
  .ob-checks { left: 2.4em; right: 2.4em; top: auto; bottom: 3%; grid-template-columns: 1fr 1fr; gap: .6em; transform: none; } .ob-checks li { padding: .5em .8em .5em .5em; font-size: .95em; white-space: normal; }
  .ob-dooh { bottom: 12%; width: 34em; }
  .of-m { --xf: 23.8; --yf: 27; }
  .of-m--plakat { --sf: .7; --xs: 23.8; --ys: 15.2; --ss: .66; } .of-m--google { --sf: .95; --xs: 12.4; --ys: 36.4; --ss: .58; } .of-m--revija { --sf: 1; --xs: 35.4; --ys: 36.4; --ss: .5; }
  .of-m--instagram { --sf: .75; --xs: 15; --ys: 52.6; --ss: .35; } .of-m--facebook { --sf: .75; --xs: 32.6; --ys: 52.6; --ss: .35; }
  .of-note { left: 6%; right: 6%; bottom: 2%; display: block; white-space: normal; text-align: center; font-size: 1em; translate: none; } .of-note b { margin-right: .5em; }
  .od-city { left: 2em; top: 4.6em; width: 43.6em; } .od-pan { left: 2em; right: 2em; top: 41.4em; bottom: 5.4em; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: .8em 1.6em; padding: 1.2em 1.4em; }
  .od-ph { grid-column: 1 / -1; } .od-ph b { font-size: 1.5em; } .od-fun { gap: .5em; } .od-fun span { font-size: .85em; } .od-fun i { height: .7em; } .od-t, .od-shop { font-size: .82em; }
  .po-d .pr-done { left: 50%; bottom: 1%; }
  .pv-sheet { left: 3%; right: 3%; padding: 1.6em 1.8em; } .pv-grid { grid-template-columns: 1fr; gap: 1.6em; } .pv-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9em .6em; } .pv-shot figcaption { font-size: .82em; } .pv-shot figcaption small, .pv-head small { display: none; }
  .pv-script { padding: 1.2em 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); } .pv-script { display: grid; grid-template-columns: 1fr 1fr; gap: .5em 1.2em; } .pv-script > small { grid-column: 1 / -1; } .pr .pv-script p { font-size: 1.2em; } .pr .pv-script .pv-mus { margin-top: .4em; }
  .pv-ed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; } .pv-bin { display: none; }
  .pv-scr { flex: none; width: 100%; height: auto; } .pr .pv-tr { grid-template-columns: 5.4em 1fr; } .pr .pv-ruler { margin-left: 5.4em; } .pv-phw { left: 5.4em; } .pv-cl .pv-th { display: none; } .pv-ruler span:nth-child(2n) { visibility: hidden; } .pv-ti { font-size: .75em; }
  .pv-prem { --px: 5%; --py: 7%; --pw: 90%; --ph: 38%; } .pv-film { top: calc((1 - var(--pull)) * 31%); bottom: calc((1 - var(--pull)) * 31%); }
  .pr .pv-o--9 { left: 14%; top: 51%; width: 11em; } .pr .pv-o--1 { left: 52%; top: 54%; width: 17em; } .pv-d .pr-done { bottom: 1.2%; } .pr .pv-o16cap { left: 5%; top: 45.5%; width: 90%; }
}
@media (prefers-reduced-motion: reduce) { .pr .is-typing::after { animation: none; } .po-con { transition: none; } }

/* ==========================================================================
   v39 — STORITVE: the offer by area. Each area carries its fire's colour and hologram emblem (sticky beside its services);
   every service is a glass card with its picture, what it brings and where its price starts; a running light on hover
   ========================================================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.view--work { container-type: inline-size; }
.svc-all { margin-inline: calc((100% - min(100cqw - 2 * var(--gutter), 1240px)) / 2); outline: none; }
/* the same reveal from the top as every panel, without a side edge: the offer is wider than the panel */
.view--work.is-entering .panel { animation-name: panelInWide; }
@keyframes panelInWide { from { opacity: 0; transform: translateY(40px); clip-path: inset(0 -50vw 100% -50vw); } to { opacity: 1; transform: none; clip-path: inset(0 -50vw 0 -50vw); } }
.svn { position: sticky; top: calc(var(--nav-h) - 1.3rem); z-index: 6; display: flex; gap: .3rem; width: max-content; max-width: 100%; margin: 0 auto 1rem; padding: .35rem; overflow-x: auto; scrollbar-width: none;
  border-radius: 999px; background: rgba(8, 12, 19, .74); border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.svn::-webkit-scrollbar { display: none; }
.svn button { display: inline-flex; align-items: center; gap: .55rem; flex: none; min-height: 2.6rem; padding: 0 1.05rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-2);
  font: 600 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.svn i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.svn button:hover { color: #fff; }
.svn button[aria-current] { color: #fff; background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.svn button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.svp { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.6rem); padding: clamp(3.2rem, 7vh, 5rem) 0; border-bottom: 1px solid var(--line); }
.svp__head { position: sticky; top: calc(var(--nav-h) + 4.4rem); align-self: start; padding-left: 1.4rem; }
.svp__head::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px; border-radius: 2px; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 0%, transparent)); box-shadow: 0 0 14px var(--c); }
.svp__emb.area-emblem { display: block; width: 104px; height: 104px; margin: 0 0 1.1rem -.4rem; vertical-align: 0; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 45%, transparent)); }
.svp__no { margin: 0 0 .5rem; font: 400 1.05rem var(--serif); color: var(--c); letter-spacing: .04em; } .svp__no small { margin-left: .4rem; font-size: .8rem; color: var(--text-3); }
.svp__name { margin: 0; font: 300 clamp(1.9rem, 2.6vw, 2.5rem)/1.05 var(--serif); letter-spacing: -.015em; color: #fff; }
.svp__line { margin: .9rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--text-2); }
.svp__from { margin: 1.3rem 0 0; font: 600 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.svp__from b { margin-left: .4rem; font: 400 1.25rem var(--serif); letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--c) 80%, #fff); } .svp__from small { margin-left: .3rem; font: 500 .74rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.svp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
/* the card */
.svc { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; isolation: isolate; border-radius: 20px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015) 45%), rgba(8, 12, 19, .8); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .95); }
.svc.rise { transition: opacity .9s var(--ease-out) var(--d, 0ms), transform 1.1s var(--ease-out) var(--d, 0ms), border-color .4s, box-shadow .6s var(--ease-out); }
.svc.rise.is-in:hover { transform: translateY(-6px); transition-delay: 0ms; }
.svc:hover, .svc:focus-within { border-color: color-mix(in srgb, var(--c) 42%, transparent); box-shadow: 0 46px 90px -46px color-mix(in srgb, var(--c) 55%, transparent), 0 30px 60px -40px #000; }
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 20%, transparent), transparent 62%); opacity: 0; transition: opacity .45s; }
.svc:hover::before { opacity: 1; }
.svc::after { content: ""; position: absolute; inset: 0; z-index: 4; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: conic-gradient(from var(--ang), transparent 0 68%, color-mix(in srgb, var(--c) 85%, #fff) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.svc:hover::after, .svc:focus-within::after { opacity: 1; animation: svcRun 3.4s linear infinite; }
@keyframes svcRun { to { --ang: 360deg; } }
.svc__media { position: relative; z-index: -1; height: 210px; overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: saturate(.85) brightness(.8); transition: transform 1.4s var(--ease-out), filter .6s; }
.svc:hover .svc__media img { transform: scale(1.08); filter: saturate(1.05) brightness(.95); }
.svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 19, 0) 35%, rgba(8, 12, 19, .96)), linear-gradient(110deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%); }
.svc__body { display: flex; flex: 1; flex-direction: column; gap: .85rem; margin-top: -2.4rem; padding: 0 1.7rem 1.6rem; }
.svc__title { margin: 0; font: 400 clamp(1.4rem, 1.8vw, 1.75rem)/1.12 var(--serif); letter-spacing: -.01em; }
.svc__link { color: #fff; text-decoration: none; outline: none; } .svc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.svc:has(.svc__link:focus-visible) { outline: 2px solid var(--c); outline-offset: 3px; }
.svc__lead { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text-2); }
.svc__get { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.svc__get li { display: inline-flex; align-items: center; gap: .45rem; padding: .34rem .72rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); font: 500 .72rem var(--sans); color: var(--text-2); }
.svc__get li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.svc__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.15rem; border-top: 1px solid rgba(255, 255, 255, .08); }
/* v41: one starting price, or two of the same weight side by side; always without VAT */
.svc__price { display: flex; flex-wrap: wrap; gap: .9rem 1.7rem; line-height: 1; }
.svc__tier { margin: 0; }
.svc__price small { display: block; margin-bottom: .45rem; font: 600 .6rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.svc__price b { font: 400 2.45rem/1 var(--serif); letter-spacing: -.02em; color: #fff; background: linear-gradient(115deg, #fff 35%, color-mix(in srgb, var(--c) 85%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.svc__price em { margin-left: .35rem; font: 500 .76rem var(--sans); font-style: normal; color: var(--text-2); }
.svc__price small i { display: block; margin-bottom: .35rem; font-style: normal; letter-spacing: .14em; color: var(--text-2); }
.svc__price--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; gap: .9rem 0; }
.svc__price--2 b { font-size: 2.15rem; } .svc__price--2 em { display: block; margin: .4rem 0 0; }
.svc__price--2 .svc__tier + .svc__tier { padding-left: 1.4rem; border-left: 1px solid rgba(255, 255, 255, .1); }
.svc__price--2 .svc__note { grid-column: 1 / -1; }
.svc__note { flex-basis: 100%; font-size: .76rem; line-height: 1.35; color: var(--text-3); }
.svc__go { display: inline-flex; align-items: center; gap: .5rem; flex: none; padding-bottom: .2rem; font: 600 .66rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 85%, #fff); white-space: nowrap; }
.svc__go svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
.svc:hover .svc__go svg { transform: translateX(5px); }
.svc__reel { position: absolute; top: 1rem; right: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.3rem; padding: 0 .95rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: rgba(6, 10, 16, .58); color: #fff; font: 600 .6rem var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .3s, background .3s; }
.svc__reel svg { width: 9px; height: 9px; fill: var(--c); }
.svc__reel:hover { border-color: var(--c); background: rgba(6, 10, 16, .8); } .svc__reel:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* a lone or last odd card lies wide: the picture beside the text */
.svp__grid > .svc:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
.svp__grid > .svc:last-child:nth-child(odd) .svc__media { width: 46%; height: auto; min-height: 290px; flex: none; }
.svp__grid > .svc:last-child:nth-child(odd) .svc__media::after { background: linear-gradient(90deg, rgba(8, 12, 19, 0) 45%, rgba(8, 12, 19, .96)), linear-gradient(110deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%); }
.svp__grid > .svc:last-child:nth-child(odd) .svc__body { margin: 0 0 0 -3rem; padding: 2rem 2rem 1.7rem; }
.svc-terms { max-width: 46rem; margin: 2.6rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--text-3); }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; padding: 1.8rem 2rem; border-radius: 20px; border: 1px solid rgba(232, 105, 42, .3);
  background: radial-gradient(120% 180% at 0% 0%, rgba(232, 105, 42, .18), transparent 60%), rgba(8, 12, 19, .74); }
.svc-cta p { margin: 0; font: 300 1.45rem/1.3 var(--serif); color: var(--text-2); } .svc-cta b { font-weight: 400; color: #fff; }
.svc-cta .btn-pill { flex: none; --c: var(--copper); }
@media (max-width: 900px) {
  .svp { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding: 3rem 0; }
  .svp__head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem 1.1rem; align-items: center; }
  .svp__emb.area-emblem { grid-row: span 2; width: 72px; height: 72px; margin: 0; }
  .svp__line, .svp__from { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .svn { top: calc(var(--nav-h) - .6rem); margin-inline: 0; }
  .svn button { min-height: 2.75rem; }
  .svp__grid { grid-template-columns: minmax(0, 1fr); }
  .svp__grid > .svc:last-child:nth-child(odd) { flex-direction: column; }
  .svp__grid > .svc:last-child:nth-child(odd) .svc__media { width: auto; min-height: 0; height: 190px; }
  .svp__grid > .svc:last-child:nth-child(odd) .svc__media::after { background: linear-gradient(180deg, rgba(8, 12, 19, 0) 35%, rgba(8, 12, 19, .96)); }
  .svp__grid > .svc:last-child:nth-child(odd) .svc__body, .svc__body { margin: -2.2rem 0 0; padding: 0 1.25rem 1.4rem; }
  .svc__media { height: 190px; } .svc__reel { min-height: 2.75rem; }
  .svc__price b { font-size: 2.2rem; } .svc__price--2 b { font-size: 1.85rem; } .svc__price--2 .svc__tier + .svc__tier { padding-left: 1.1rem; }
  .svc-cta { flex-direction: column; align-items: flex-start; padding: 1.5rem; } .svc-cta p { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .svc:hover::after, .svc:focus-within::after { animation: none; } .svc.rise.is-in:hover, .svc:hover .svc__media img { transform: none; } }

/* ============================================================== v49h · new-era controls (owner, 8. 11.: "gumbi ali prikazi
   na pill ali square gumbih … moderno new era prikaz"). The buttons were 10 px capitals with wide tracking on thin
   hairline pills, the back button a hard rectangle. Now: readable sentence-case labels, soft 14 px corners, a glass
   surface with a lit top edge, a warm gradient primary with a soft glow, calm lift on hover, a press state, and the same
   focus ring everywhere. Layout and sizes of the blocks around them stay as approved. */
:root {
  --ctl-h: 2.95rem;
  --ctl-r: 14px;
  --ctl-font: 600 .84rem/1 var(--sans);
  --ctl-glass: linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 100%);
  --ctl-edge: rgba(238, 241, 245, .16);
  --ctl-hi: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.btn-solid, .btn-ghost, .btn-pill, .nav__cta, .back {
  font: var(--ctl-font); letter-spacing: .005em; text-transform: none;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .3s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn-solid, .btn-ghost { min-height: var(--ctl-h); padding: 0 1.35rem; border-radius: var(--ctl-r); gap: .55rem; }
.btn-solid {
  border: 0; color: #1a0c03;
  background: linear-gradient(180deg, #ff9653 0%, #ff6a1f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(120, 36, 0, .25), 0 10px 26px -12px rgba(255, 106, 31, .85), 0 0 0 1px rgba(255, 150, 90, .35);
}
.btn-solid:hover, .btn-solid:focus-visible {
  background: linear-gradient(180deg, #ffa66b 0%, #ff7a32 100%); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(120, 36, 0, .25), 0 16px 34px -12px rgba(255, 106, 31, .95), 0 0 0 1px rgba(255, 170, 110, .45);
}
.btn-ghost {
  color: var(--text); border: 1px solid var(--ctl-edge); background: var(--ctl-glass); box-shadow: var(--ctl-hi);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: #fff; border-color: rgba(255, 122, 47, .55); background: linear-gradient(180deg, rgba(255, 122, 47, .14) 0%, rgba(255, 122, 47, .05) 100%); transform: translateY(-1px); }
.btn-solid:active, .btn-ghost:active, .btn-pill:active, .nav__cta:active, .back:active { transform: translateY(0) scale(.985); transition-duration: .12s; }
.btn-pill {
  height: var(--ctl-h); padding: 0 1.15rem 0 1.35rem; border-radius: var(--ctl-r); gap: .6rem;
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent) 0%, color-mix(in srgb, var(--c) 6%, transparent) 100%);
  box-shadow: var(--ctl-hi);
}
.btn-pill:hover, .btn-pill:focus-visible { border-color: color-mix(in srgb, var(--c) 75%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 24%, transparent) 0%, color-mix(in srgb, var(--c) 10%, transparent) 100%); transform: translateY(-1px); }
.nav__cta {
  display: inline-flex; align-items: center; height: 2.25rem; padding: 0 1.05rem; border-radius: 12px; font-size: .8rem;
  border: 1px solid var(--ctl-edge); background: var(--ctl-glass); box-shadow: var(--ctl-hi);
}
.nav__cta:hover, .nav__cta:focus-visible { color: #fff; border-color: rgba(255, 122, 47, .6); background: linear-gradient(180deg, rgba(255, 122, 47, .16) 0%, rgba(255, 122, 47, .06) 100%); }
.back {
  height: 2.9rem; padding: 0 1.1rem 0 .45rem; gap: .65rem; border-radius: var(--ctl-r); font-size: .8rem;
  border: 1px solid var(--ctl-edge); background: linear-gradient(180deg, rgba(14, 20, 30, .78) 0%, rgba(6, 10, 16, .7) 100%); box-shadow: var(--ctl-hi), 0 10px 30px -14px rgba(0, 0, 0, .8);
}
.back svg { box-sizing: content-box; width: 13px; height: 13px; padding: .5rem; border-radius: 10px; background: rgba(232, 105, 42, .14); box-shadow: inset 0 0 0 1px rgba(232, 105, 42, .35); transition: background .3s, transform .35s var(--ease-out); }
.back:hover, .back:focus-visible { border-color: rgba(232, 105, 42, .55); }
.back:hover svg, .back:focus-visible svg { background: rgba(232, 105, 42, .26); transform: translateX(-2px); }
.kontakt [role="tab"], .seg button { font: 600 .8rem/1 var(--sans); letter-spacing: .005em; text-transform: none; border-radius: 11px; }
.kontakt [role="tab"][aria-selected="true"] { background: linear-gradient(180deg, rgba(255, 122, 47, .26) 0%, rgba(255, 122, 47, .12) 100%); box-shadow: inset 0 0 0 1px rgba(255, 122, 47, .45), var(--ctl-hi); color: #fff; }
.seg button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), var(--ctl-hi); }
.btn-solid:focus-visible, .btn-ghost:focus-visible, .btn-pill:focus-visible, .nav__cta:focus-visible, .back:focus-visible, .kontakt [role="tab"]:focus-visible, .seg button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
@media (max-width: 600px) { .seg button { letter-spacing: 0; } .ref .seg button { letter-spacing: 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn-solid, .btn-ghost, .btn-pill, .nav__cta, .back, .back svg { transition: none; }
  .btn-solid:hover, .btn-ghost:hover, .btn-pill:hover, .btn-solid:active, .btn-ghost:active, .btn-pill:active, .nav__cta:active, .back:active { transform: none; }
}
/* v49h · on a phone the fixed back control is a compact arrow (it lay over a line of text); its label stays for screen readers */
@media (max-width: 600px) {
  .back { width: 2.9rem; padding: 0; justify-content: center; gap: 0; background: linear-gradient(180deg, rgba(14, 20, 30, .9) 0%, rgba(6, 10, 16, .86) 100%); }
  .back .roll { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* v49h · the services' area bar sits in a dark frosted band the full width of the list (the cards scrolled past either
   side of the floating pill and their titles showed through under the header); the pills, chips and links read as
   sentence-case labels on soft tinted surfaces instead of 10 px capitals with dots */
.svn { --svn-p: calc(var(--nav-h) - 1.3rem); top: 0; width: 100%; max-width: none; margin: calc(-1 * var(--svn-p)) 0 -.6rem; padding: var(--svn-p) 0 1.6rem; display: flex; justify-content: center; overflow: visible;
  border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: none; pointer-events: none; }
.svn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-out);
  background: linear-gradient(180deg, rgba(6, 9, 14, .97) 0%, rgba(6, 9, 14, .95) 66%, rgba(6, 9, 14, 0) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent); }
.svn.is-stuck::before { opacity: 1; }
.svn__in { pointer-events: auto; }
.svn__in { display: flex; gap: .3rem; width: max-content; max-width: 100%; padding: .35rem; overflow-x: auto; scrollbar-width: none; border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 27, 39, .82) 0%, rgba(9, 13, 20, .82) 100%); border: 1px solid rgba(238, 241, 245, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.svn__in::-webkit-scrollbar { display: none; }
.svn button { border-radius: 12px; font: 600 .8rem/1 var(--sans); letter-spacing: .005em; text-transform: none; gap: .5rem; }
.svn i { width: 6px; height: 6px; }
.svn button[aria-current] { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 24%, transparent) 0%, color-mix(in srgb, var(--c) 10%, transparent) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.svc__get li { gap: 0; padding: .38rem .7rem; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); font: 500 .74rem/1.15 var(--sans); color: color-mix(in srgb, var(--c) 18%, #dfe6ee); }
.svc__get li::before { content: none; }
.svc__go { font: 600 .8rem/1 var(--sans); letter-spacing: .005em; text-transform: none; }
.svc__reel { border-radius: 12px; font: 600 .74rem/1 var(--sans); letter-spacing: .005em; text-transform: none; border-color: rgba(255, 255, 255, .16); background: linear-gradient(180deg, rgba(20, 27, 39, .7) 0%, rgba(6, 10, 16, .62) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
@media (max-width: 760px) { .svn { --svn-p: calc(var(--nav-h) - .6rem); } .svn__in { max-width: calc(100% - 1rem); } }
/* v49h · the area pages: what it delivers as soft tinted chips (not 10 px capitals with dots), the "more" toggle as a
   real control (a glass row, a chevron that turns), the showcases' Premor / Ponovi prikaz as small glass buttons */
.deliver { gap: .5rem; padding: 1.1rem 0; }
.deliver li { padding: .5rem .85rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, transparent) 0%, color-mix(in srgb, var(--c) 5%, transparent) 100%);
  font: 600 .8rem/1.2 var(--sans); letter-spacing: .005em; text-transform: none; color: color-mix(in srgb, var(--c) 16%, #eef2f6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.deliver li::before { content: none; }
@media (max-width: 760px) { .deliver { flex-direction: row; } }
.area__more > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; cursor: pointer; padding: .85rem 1rem .85rem 1.1rem; border: 1px solid var(--ctl-edge); border-radius: var(--ctl-r);
  background: var(--ctl-glass); box-shadow: var(--ctl-hi); font: 600 .84rem/1.2 var(--sans); letter-spacing: .005em; text-transform: none; color: var(--text); transition: border-color .3s, background .3s; }
.area__more > summary::-webkit-details-marker { display: none; }
.area__more > summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease-out); opacity: .8; }
.area__more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.area__more > summary:hover { border-color: color-mix(in srgb, var(--c, var(--copper)) 55%, transparent); }
.area__more > summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.sh__ctl .link-btn { display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0 .85rem; border: 1px solid var(--ctl-edge); border-radius: 11px; background: var(--ctl-glass); box-shadow: var(--ctl-hi);
  font: 600 .76rem/1 var(--sans); letter-spacing: .005em; text-transform: none; color: var(--text-2); }
.sh__ctl .link-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--c, var(--copper)) 55%, transparent); }
@media (max-width: 760px) { .sh__ctl .link-btn { min-height: 44px; font-size: 13px; letter-spacing: 0; } }
/* v49h · the AI story's one confirmation (appended to style.css when the v49h film goes live):
   the app lists the three tasks numbered as the page's windows (01 stranka, 02 računovodstvo, 03 skladišče) and has
   ONE button, "Potrdi vse"; the message written above the phone has a row per task, each leaving as its own packet */
.ai__ap { grid-template-columns: auto 1fr auto; }
.ai__apn { display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c) 70%, #fff); color: color-mix(in srgb, var(--c) 40%, #fff); font: 700 .74em var(--sans); font-style: normal; letter-spacing: .02em; }
.ai__ap.is-done .ai__apn { border-color: rgba(111, 227, 168, .75); color: #bff5d9; }
.ai__apall { position: relative; margin-top: .55em; padding: .82em 1em; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff) 0%, var(--c) 100%); color: #0b0620; font: 700 .95em var(--sans); letter-spacing: .03em; box-shadow: 0 .6em 1.6em -.6em color-mix(in srgb, var(--c) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); transition: background .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.ai__apk { display: none; }
.ws__phone[data-ok="approve"] .ai__apall { background: linear-gradient(180deg, #4fe3a0 0%, #22b673 100%); color: #03140b; box-shadow: 0 .6em 1.6em -.6em rgba(52, 211, 140, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ws__phone[data-ok="approve"] .ai__apl { display: none; }
.ws__phone[data-ok="approve"] .ai__apk { display: inline; animation: wsScr .3s var(--ease-out); }
.ws__phone[data-ok="approve"] .ai__apk::before { content: "\2713  "; }
.ws .ws-txt.ai-mn { font: 800 11px var(--sans); letter-spacing: .06em; fill: #ff9be6; }
.ws .ws-txt.ai-mto { font: 800 10.5px var(--sans); letter-spacing: .06em; fill: #3ef0ff; }
@media (prefers-reduced-motion: reduce) { .ai__apall { transition: none; } }
.ai__ap > span { display: grid; gap: .1em; min-width: 0; }   /* v49h: the task's name over its line (the number badge is now the first child) */
/* v49h · on a phone the stage's illustration tag is a small caption above the stage (over the film it spanned almost
   the whole stage and covered the AI confirmation's message) */
@media (max-width: 600px) {
  .ws.has-film .demo-tag { position: static; display: inline-block; margin: 0 0 .5rem; font-size: .52rem; letter-spacing: .1em; padding: .3em .65em; }
}

/* v53 · the SANDBOX island (owner, 9. 11. 2026): the rendered launch pad and sign are the button — two invisible hit
   areas follow them over the world; a click opens one calm question, "Vpišite vaš projekt" */
.sbx-hit { position: absolute; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); padding: 0; border: 0; border-radius: 12px; background: transparent;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0); pointer-events: auto; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; }
.sbx-hit.is-behind { visibility: hidden; pointer-events: none; }
.sbx-hit:focus-visible { outline: 2px solid var(--ember); outline-offset: 6px; }
.holo-on .sbx-hit { pointer-events: none; }   /* an open hologram keeps its own clicks, even where it passes over the island */

/* v53 v2 · the dialog as a cinematic view (owner: "to ni luksuzen prikaz"): no card — the page goes dark and soft
   around the island, which stays lit in a spotlight that follows it while the camera glides closer; beside it a
   typographic panel floats: a champagne rule, a large serif title, one hairline to write on, a round arrow */
.sbx { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: hidden; }
.sbx::backdrop { background: transparent; }
.sbx__veil { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at var(--sx, 50%) var(--sy, -60%), rgba(255, 150, 80, .07) 0, rgba(255, 150, 80, 0) calc(var(--sr, 220px) * 1.2)),
    radial-gradient(circle at var(--sx, 50%) var(--sy, -60%), rgba(2, 4, 8, 0) 0, rgba(2, 4, 8, .08) calc(var(--sr, 220px) * .7), rgba(2, 4, 8, .76) calc(var(--sr, 220px) * 1.7), rgba(2, 4, 8, .9) calc(var(--sr, 220px) * 2.8)),
    linear-gradient(90deg, rgba(2, 4, 8, .18) 0%, rgba(2, 4, 8, 0) 30%, rgba(2, 4, 8, .42) 62%, rgba(2, 4, 8, .62) 100%); }
.sbx__veil::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(7px) saturate(.8); -webkit-backdrop-filter: blur(7px) saturate(.8);
  -webkit-mask-image: radial-gradient(circle at var(--sx, 50%) var(--sy, -60%), transparent calc(var(--sr, 220px) * .95), #000 calc(var(--sr, 220px) * 2));
  mask-image: radial-gradient(circle at var(--sx, 50%) var(--sy, -60%), transparent calc(var(--sr, 220px) * .95), #000 calc(var(--sr, 220px) * 2)); }
.sbx__panel { position: absolute; top: 50%; left: var(--px, 50%); width: min(33rem, calc(100vw - 2 * var(--gutter))); transform: translate(-50%, -50%); }
.sbx.is-spot .sbx__panel { transform: translate(0, -50%); }
.sbx__eyebrow { display: flex; align-items: center; gap: .95rem; margin: 0 0 1.5rem; font: 500 .7rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: #e9cfa8; }
.sbx__rule { width: 2.8rem; height: 1px; background: linear-gradient(90deg, rgba(233, 207, 168, 0), #e9cfa8); }
.sbx__title { margin: 0; font: 300 clamp(2.7rem, 5.2vw, 4.7rem)/.98 var(--serif); letter-spacing: -.028em; color: #f4f1eb; text-wrap: balance; }
.sbx__title em { font-style: italic; font-weight: 300; padding-right: .05em; background: linear-gradient(100deg, #f8dfb9 8%, #ffb27c 55%, #ff8a4c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sbx__lead { margin: 1.45rem 0 0; max-width: 31ch; font: 400 1.03rem/1.7 var(--sans); color: rgba(233, 236, 241, .66); text-wrap: pretty; }
.sbx__form { margin-top: 2.7rem; }
.sbx__label { display: block; font: 500 .74rem/1 var(--sans); letter-spacing: .02em; color: rgba(233, 236, 241, .5); }
.sbx__field { position: relative; }
.sbx__input { display: block; width: 100%; height: 4.2rem; padding: 0 4.4rem 0 0; border: 0; border-radius: 0; background: transparent; color: #f6f3ee;
  font: 300 clamp(1.5rem, 2.2vw, 1.95rem)/1 var(--serif); letter-spacing: -.01em; caret-color: #ffb07a; }
.sbx__input::placeholder { color: rgba(233, 236, 241, .27); font-style: italic; }
.sbx__input:focus-visible { outline: none; }
.sbx__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(233, 236, 241, .2); transform-origin: left; }
.sbx__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f8dfb9, #ff8a4c 70%, rgba(255, 138, 76, 0)); box-shadow: 0 0 14px rgba(255, 150, 80, .5);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); }
.sbx__field:focus-within .sbx__line::after { transform: scaleX(1); }
.sbx__input[aria-invalid="true"] ~ .sbx__line { background: rgba(255, 150, 130, .65); }
.sbx__go { position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin-top: -1.65rem; border-radius: 50%;
  color: #f3d9b2; border: 1px solid rgba(243, 217, 178, .38); background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%);
  transition: background .45s var(--ease-out), color .3s, border-color .3s, box-shadow .45s var(--ease-out); cursor: pointer; }
.sbx__go svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
.sbx__go:hover, .sbx__go:focus-visible { color: #1c0d04; border-color: transparent; background: linear-gradient(180deg, #ffc496 0%, #ff8a4c 100%); box-shadow: 0 12px 34px -10px rgba(255, 138, 76, .85); outline: none; }
.sbx__go:hover svg, .sbx__go:focus-visible svg { transform: translateX(2px); }
.sbx__go:focus-visible { box-shadow: 0 0 0 3px rgba(255, 186, 140, .32), 0 12px 34px -10px rgba(255, 138, 76, .85); }
.sbx.is-busy .sbx__go { animation: sbxBusy 1.3s ease-in-out infinite; }
@keyframes sbxBusy { 50% { box-shadow: 0 0 0 7px rgba(255, 176, 122, .08), 0 0 26px rgba(255, 138, 76, .45); } }
.sbx__status { min-height: 1.6em; margin: 1.1rem 0 0; font: 400 .92rem/1.6 var(--sans); color: rgba(233, 236, 241, .72); text-wrap: pretty; }
.sbx__status[data-tone="err"] { color: #f1c3b6; }
.sbx__status[data-tone="ok"] { color: #cdebd9; }
.sbx__status .link-btn { border: 0; padding: 0; font: 500 .92rem/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: #f3d3a8; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.sbx__close { position: absolute; top: clamp(.9rem, 3vh, 2rem); right: clamp(.9rem, 3vw, 2.4rem); display: inline-flex; align-items: center; gap: .75rem; height: 2.75rem; padding: 0 0 0 1rem;
  font: 500 .8rem/1 var(--sans); letter-spacing: .03em; color: rgba(233, 236, 241, .6); transition: color .3s; cursor: pointer; }
.sbx__close svg { width: 2.75rem; height: 2.75rem; padding: .82rem; border-radius: 50%; border: 1px solid rgba(233, 236, 241, .2); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round;
  transition: border-color .3s, transform .6s var(--ease-out), box-shadow .3s; }
.sbx__close:hover, .sbx__close:focus-visible { color: #fff; outline: none; }
.sbx__close:hover svg, .sbx__close:focus-visible svg { border-color: rgba(243, 217, 178, .6); transform: rotate(90deg); }
.sbx__close:focus-visible svg { box-shadow: 0 0 0 3px rgba(255, 186, 140, .3); }
/* the entrance: the dark comes in slowly, then the panel's lines one after another (ease-out, no bounce). "backwards"
   only: after the entrance nothing holds the opacity, so the closing fade can run */
.sbx[open] .sbx__veil { animation: sbxFade 1s ease-out backwards; }
.sbx[open] .sbx__close { animation: sbxFade .8s .6s ease-out backwards; }
.sbx[open] .sbx__eyebrow, .sbx[open] .sbx__title, .sbx[open] .sbx__lead, .sbx[open] .sbx__form { animation: sbxRise 1.15s var(--ease-out) backwards; }
.sbx[open] .sbx__eyebrow { animation-delay: .25s; }
.sbx[open] .sbx__title { animation-delay: .36s; }
.sbx[open] .sbx__lead { animation-delay: .52s; }
.sbx[open] .sbx__form { animation-delay: .64s; }
.sbx[open] .sbx__line { animation: sbxLine 1.3s .8s var(--ease-out) backwards; }
@keyframes sbxFade { from { opacity: 0; } }
@keyframes sbxRise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes sbxLine { from { transform: scaleX(0); } }
.sbx__veil, .sbx__panel, .sbx__close { transition: opacity .38s ease-in; }
.sbx.is-closing .sbx__veil, .sbx.is-closing .sbx__panel, .sbx.is-closing .sbx__close { opacity: 0; }
/* a phone, or the island out of view: the panel centred over an even dark */
@media (max-width: 699px) {
  .sbx__panel { width: calc(100vw - 2 * var(--gutter)); }
  .sbx__title { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .sbx__lead { font-size: .98rem; }
  .sbx__form { margin-top: 2.2rem; }
}
@media (max-height: 520px) {
  .sbx__eyebrow { margin-bottom: .8rem; }
  .sbx__title { font-size: clamp(2rem, 4.6vw, 2.6rem); }
  .sbx__lead { margin-top: .7rem; font-size: .9rem; line-height: 1.5; }
  .sbx__form { margin-top: 1.1rem; }
  .sbx__input { height: 3.2rem; }
  .sbx__status { margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sbx[open] *, .sbx[open] .sbx__veil { animation: none !important; }
  .sbx__veil, .sbx__panel, .sbx__close { transition: none; }
}

/* v53 · prices quoted on request (owner, 9. 11. 2026): the same place and colour as a price, a calmer size */
.svc__price--ask b { font-size: 1.95rem; } .svp__from b { white-space: nowrap; }
@media (max-width: 760px) { .svc__price--ask b { font-size: 1.75rem; } }

/* v53 · the phone (owner, 9. 11. 2026: the desktop is approved — the phone is its clean mini copy). Phone widths only:
   the story's chapter names take the room they need (five equal columns made "Predstavitev" run into "Objava"), the
   area bar fades at the edge where more areas wait, and the floating back control steps aside while one reads down */
@media (max-width: 760px) {
  .ws.ws .ws__steps { display: flex; gap: .55rem; }
  .ws.ws .ws__steps button { flex: 1 1 auto; min-width: min-content; }
  .svn__in.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent); }
  .svn__in.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.2rem); mask-image: linear-gradient(90deg, transparent, #000 2.2rem); }
  .svn__in.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.2rem, #000 calc(100% - 2.2rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.2rem, #000 calc(100% - 2.2rem), transparent); }
}
@media (max-width: 600px) {
  .foot .back { transition: transform .5s var(--ease-out), opacity .35s ease, background .3s, border-color .3s; }
  .foot.is-tucked .back { transform: translateY(calc(100% + 2.2rem)); opacity: 0; pointer-events: none; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { .foot .back { transition: none; } }
@media (max-height: 500px) and (pointer: coarse) {
  .foot .back { width: 2.9rem; padding: 0; justify-content: center; gap: 0; transition: transform .5s var(--ease-out), opacity .35s ease; transform: translateY(calc(100% + 2.2rem)); opacity: 0; pointer-events: none; }
  .foot .back .roll { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .foot.is-out:not(.is-tucked) .back { transform: none; opacity: 1; pointer-events: auto; }
}

/* ==========================================================================
   v56 (owner, 12. 11. 2026) - before going live
   1 the speaker is a free-floating emblem: no ring and no plate behind it. It is on the entry screen too, in the very
     place it has on the site, crossed out until the visitor turns the sound on
   2 the header's pane of glass runs from edge to edge
   ========================================================================== */
.sound, .nav .sound { border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--text); }
.sound .sound__ico { width: 23px; height: 23px; stroke-width: 1.15; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .5)); transition: filter .3s; }
.sound:hover .sound__ico { filter: drop-shadow(0 0 7px rgba(255, 255, 255, .42)); }
.sound[aria-pressed="false"] { color: rgba(238, 241, 245, .8); }
.sound:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 10px; }
.gate__sound { position: absolute; top: calc((var(--nav-h) - 2.75rem) / 2); right: calc(var(--gutter) + clamp(.2rem, .6vw, .6rem)); opacity: 0; animation: fade 1.2s .5s forwards; }
.nav::before, .nav::after { left: 0; right: 0; border-radius: 0; }
.nav::before { border-left: 0; border-right: 0; }
/* 3 the rolling labels (header links, buttons): a capital with a caron was cut at the top, and the caron of the waiting
     copy showed as a speck under it ("NAŠI PROJEKTI"). The window is now a little taller than the line: same box, same place */
.roll { overflow: visible; clip-path: inset(-.24em 0); }
.roll > span:last-child { transform: translateY(150%); }
a:hover .roll > span:first-child, a:focus-visible .roll > span:first-child, button:hover .roll > span:first-child { transform: translateY(-150%); }
a:hover .roll > span:last-child, a:focus-visible .roll > span:last-child, button:hover .roll > span:last-child { transform: none; }
/* 4 "Kontakt" in the header: the word sat 3.4 px above the line of the other links and 4.5 px above the middle of its own
     pill, and the pill 1 px under that line (an older, stronger rule undid the centring of the v49h control). Now the word
     is centred in the pill and both sit on the links' line. The row keeps its height, so no other link moves */
.nav__links li:last-child { display: flex; align-items: center; height: 2.375rem; }
.nav__links .nav__cta { display: inline-flex; padding-block: 0; margin-top: 0; }