/* HolyShift Applied AI - motion layer (pairs with motion.js) */

/* appear effects are driven by motion.js from Framer's data (no CSS needed) */

/* letter-by-letter statement: colours are set by motion.js as you scroll */

/* marquees are driven by motion.js (measured speeds, hover slow-down) */
ul.hs-marquee { will-change: transform; }

/* accordions */
[hidden] { display: none !important; }
/* Framer captured the open item mid colour-transition: retheme.py pins the title and body colours inline */
.hs-acc-closed, .hs-acc-open { cursor: pointer; }
.hs-motion .hs-acc-open.hs-anim { animation: hs-fade .35s ease; }
@keyframes hs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the asterisk in the section-title tickers turns once every 30s */
.hs-motion .hs-spin { animation: hs-spin 30s linear infinite; }
@keyframes hs-spin { to { transform: rotate(-360deg); } }

/* closed strips: the number pill sits centred (its translateX(-50%) was lost in the snapshot) */
[data-hs-group="approach"] .framer-hxl480 { transform: translateX(-50%) !important; border-radius: 100px !important; }

/* the open approach panel hides its vertical strip label (template keeps it at opacity 0) */
.hs-acc-open[data-hs-group="approach"] .framer-1pbz76c-container { opacity: 0 !important; }

/* founder photo card in the vision block: 30% larger than the template's 320px */
.framer-1f7iwmt { max-width: 416px !important; }

/* the featured drawings, larger than the template's 270px and centred in their area
   (the snapshot lost the template's translate(-50%,-50%) on the approach object) */
.framer-19oz1o0 { width: 430px !important; height: 430px !important; transform: translate(-50%, -50%) !important; }
.framer-1nphcmz { width: 400px !important; height: 400px !important; }
@media (max-width: 809px) { .framer-19oz1o0 { width: 260px !important; height: 260px !important; } .framer-1nphcmz { width: 260px !important; height: 260px !important; } }

/* the featured object in the approach panel floats gently (measured: a few px up and down, continuous) */
.hs-motion .hs-float { animation: hs-float 3.2s ease-in-out infinite; }
@keyframes hs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* "How we work" stones: each tile bobs up and down in turn, first to last, then the loop restarts */
.hs-stones .hs-stone { transform-box: fill-box; transform-origin: center; }
.hs-motion .hs-stones .hs-stone { animation: hs-bob 2.8s ease-in-out infinite; }
.hs-motion .hs-stones .hs-stone-2 { animation-delay: .35s; }
.hs-motion .hs-stones .hs-stone-3 { animation-delay: .7s; }
.hs-motion .hs-stones .hs-stone-4 { animation-delay: 1.05s; }
@keyframes hs-bob { 0% { transform: translateY(0); } 7% { transform: translateY(-14px); } 14% { transform: translateY(0); } 100% { transform: translateY(0); } }

/* platform strip lens shapes: two positions (41° at rest / -20° shifted), swapped every 1.5s by motion.js */
.hs-lens .framer-1ulnb9e, .hs-lens .framer-10we1b5, .hs-lens .framer-1bfhpqw { transform: rotate(41deg) !important; transition: transform .9s cubic-bezier(.22, 1.4, .36, 1), top .9s cubic-bezier(.22, 1.4, .36, 1), left .9s cubic-bezier(.22, 1.4, .36, 1); }
.hs-lens.hs-lens-b .framer-1ulnb9e, .hs-lens.hs-lens-b .framer-10we1b5, .hs-lens.hs-lens-b .framer-1bfhpqw { transform: rotate(-20deg) !important; }
.hs-lens.hs-lens-b .framer-1ulnb9e { top: -1px; left: 9px; }
.hs-lens.hs-lens-b .framer-10we1b5 { top: 5px; left: 22px; }

/* platform strip rings (measured ~60°/s and ~72°/s, opposite directions) */
/* the template centres this ring with a translate the snapshot lost; it goes in `translate`
   (applied before `rotate`), so the spin pivots on the ring's own centre */
.framer-1nngo1c { transform: none !important; translate: 0 -50%; }
.framer-45cjkf { translate: 0 -50%; }  /* the centre dot: same lost centring shift */
.hs-motion .hs-spin-cw { animation: hs-spin-cw 6s linear infinite; }
.hs-motion .hs-spin-ccw { animation: hs-spin-ccw 5s linear infinite; }
@keyframes hs-spin-cw { to { rotate: 360deg; } }
@keyframes hs-spin-ccw { to { rotate: -360deg; } }

/* testimonial cards: a roomier pill for the photo and logo */
.hs-slideshow .framer-1wg3ekl { padding: 6px 12px 6px 6px !important; gap: 8px !important; }
.hs-slideshow .framer-niawy8 { width: 40px !important; height: 40px !important; }
.hs-slideshow .framer-j385ju { width: 110px !important; height: 32px !important; aspect-ratio: auto !important; }
.hs-slideshow .framer-j385ju img { height: 30px !important; max-width: 110px !important; }

/* testimonial cards: real avatars and logos from the wins wall; on hover the card turns
   black and its text white (0.3s) */
.hs-slideshow a.framer-8N9ef { transition: background-color .3s ease; }
.hs-slideshow a.framer-8N9ef:hover { background-color: #1a1a1a !important; }
.hs-slideshow a.framer-8N9ef .framer-text { transition: color .3s ease; }
.hs-slideshow a.framer-8N9ef:hover .framer-text { --framer-text-color: #fff !important; color: #fff !important; }
.hs-slideshow a.framer-8N9ef:hover .framer-pg03wo { background-color: rgba(255,255,255,.4) !important; }
.hs-slideshow a.framer-8N9ef:hover .framer-ScJvX { color: #fff; fill: #fff; }

/* testimonial arrows: pressed state as on the template */
.hs-slideshow button { transition: background-color .15s ease; }
.hs-slideshow button:active { background-color: #1a1a1a !important; }

/* buttons (dark sections, "Secondary" in the template): dark grey pill, near-black icon
   box on the left. On hover the box grows to fill the pill, the text slides left and the
   icon travels to the right of the text (~0.4s). The icon is a 14-frame pixel sprite
   looping at 200ms a frame, as on the template. */
a[data-framer-name^="Secondary"] { position: relative; background-color: rgb(46, 46, 46) !important; overflow: hidden; }
a[data-framer-name^="Secondary"] .framer-1emdssz { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 65px; border-radius: 14px; background: #1a1a1a !important; transition: width .4s cubic-bezier(.22, 1, .36, 1); }
a[data-framer-name^="Secondary"]:hover .framer-1emdssz { width: calc(100% - 6px); }
a[data-framer-name^="Secondary"] .framer-x5l8-container { position: absolute; top: 50%; left: 18px; width: 30px; height: 15px; margin-top: -7px; transition: left .4s cubic-bezier(.22, 1, .36, 1); }
a[data-framer-name^="Secondary"]:hover .framer-x5l8-container { left: calc(100% - 50px); }
a[data-framer-name^="Secondary"] .framer-yk1t5j { position: relative; z-index: 1; margin-left: 68px; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
a[data-framer-name^="Secondary"]:hover .framer-yk1t5j { transform: translateX(-50px); }
/* light-section button ("Primary" in the template): black pill, white icon box with a dark
   icon; on hover the white box fills the pill and the text turns black. Same motion. */
a[data-framer-name="Primary"] { position: relative; background-color: #1a1a1a !important; overflow: hidden; }
a[data-framer-name="Primary"] .framer-1emdssz { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 65px; border-radius: 14px; background: #fff !important; transition: width .4s cubic-bezier(.22, 1, .36, 1); }
a[data-framer-name="Primary"]:hover .framer-1emdssz { width: calc(100% - 6px); }
a[data-framer-name="Primary"] .framer-x5l8-container { position: absolute; top: 50%; left: 18px; width: 30px; height: 15px; margin-top: -7px; filter: none !important; transition: left .4s cubic-bezier(.22, 1, .36, 1); }
a[data-framer-name="Primary"]:hover .framer-x5l8-container { left: calc(100% - 50px); }
a[data-framer-name="Primary"] .framer-yk1t5j { position: relative; z-index: 1; margin-left: 68px; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
a[data-framer-name="Primary"]:hover .framer-yk1t5j { transform: translateX(-50px); }
a[data-framer-name="Primary"] .framer-yk1t5j p { transition: color .3s ease; }
a[data-framer-name="Primary"]:hover .framer-yk1t5j p { color: #1a1a1a !important; --framer-text-color: #1a1a1a !important; }

/* sprite loop: one frame visible at a time */
.hs-sprite use { visibility: hidden; }
.hs-motion .hs-sprite use { animation: hs-frame 2.8s steps(1, end) infinite; }
.hs-motion-off .hs-sprite use.hs-f4 { visibility: visible; }
@keyframes hs-frame { 0% { visibility: visible; } 7.15% { visibility: hidden; } }
.hs-sprite use.hs-f0 { animation-delay: 0.0s; }
.hs-sprite use.hs-f1 { animation-delay: 0.2s; }
.hs-sprite use.hs-f2 { animation-delay: 0.4s; }
.hs-sprite use.hs-f3 { animation-delay: 0.6s; }
.hs-sprite use.hs-f4 { animation-delay: 0.8s; }
.hs-sprite use.hs-f5 { animation-delay: 1.0s; }
.hs-sprite use.hs-f6 { animation-delay: 1.2s; }
.hs-sprite use.hs-f7 { animation-delay: 1.4s; }
.hs-sprite use.hs-f8 { animation-delay: 1.6s; }
.hs-sprite use.hs-f9 { animation-delay: 1.8s; }
.hs-sprite use.hs-f10 { animation-delay: 2.0s; }
.hs-sprite use.hs-f11 { animation-delay: 2.2s; }
.hs-sprite use.hs-f12 { animation-delay: 2.4s; }
.hs-sprite use.hs-f13 { animation-delay: 2.6s; }
/* results cards on hover (measured on the template): the body darkens to 80% ink and the
   picture area loses its white ground; the template then fades its photo in at 54%
   behind a client logo. We have no client logos, so the photo is shown by default and
   dims to the same 54% on hover. The small tag icon turns dark. No lift. */
a.framer-cFRyW .framer-cpmhks, a.framer-cFRyW .framer-1jfytwx { transition: background-color .3s ease; }
a.framer-cFRyW:hover .framer-cpmhks { background-color: rgba(26, 26, 26, .8) !important; }
a.framer-cFRyW:hover .framer-1jfytwx { background-color: rgba(255, 255, 255, 0) !important; }
a.framer-cFRyW .framer-jh1g71 { transition: filter .3s ease; }
a.framer-cFRyW:hover .framer-jh1g71 { filter: invert(0) !important; }
a.framer-cFRyW .framer-1cj72p0 { opacity: 1 !important; }
/* before/after: the card shows the "before" photo; on hover the assembled photo crossfades in */
a.framer-cFRyW img.hs-after { opacity: 0; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }
a.framer-cFRyW:hover img.hs-after { opacity: 1; }

/* team cards: smaller than the template's 330px column (row keeps its spacing) */
.hs-bp-desktop .framer-116bwgd { justify-content: center !important; gap: 48px !important; }
.hs-bp-desktop .framer-116bwgd .framer-45lxkn-container { flex: 0 0 270px !important; width: 270px !important; max-width: 270px; }
/* Matej's team photo, zoomed in 20% */
.framer-116bwgd img[src*="matej-zalar"] { transform: scale(1.2); transform-origin: 50% 40%; }
/* FAQ: a closed question grows 5% under the pointer (template: ~0.2s) */
.hs-acc-closed[data-hs-group="faq"] .framer-1z04rk { transition: transform .2s ease !important; }
.hs-acc-closed[data-hs-group="faq"]:hover .framer-1z04rk { transform: scale(1.05) !important; }
/* Remzo's team photo sits a little lower in its card */
.framer-116bwgd img[src*="remzo-hotic"] { transform: translateY(10px) scale(1.04); }
/* hero: six glowing cubes lie on the grass and gather into a stack on the crest as you scroll (motion.js) */
.hs-cubes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hs-cube { position: absolute; width: 3.1%; margin-left: -1.55%; margin-top: -1.8%; will-change: transform, left, top; overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 225, 160, .95)) drop-shadow(0 0 18px rgba(255, 190, 90, .8)) drop-shadow(0 0 40px rgba(255, 160, 50, .5)); }
.hs-motion .hs-cube { animation: hs-glow 2.6s ease-in-out infinite; }
.hs-cube:nth-child(2n) { animation-delay: -.9s; } .hs-cube:nth-child(3n) { animation-delay: -1.7s; }
@keyframes hs-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 225, 160, .95)) drop-shadow(0 0 18px rgba(255, 190, 90, .8)) drop-shadow(0 0 40px rgba(255, 160, 50, .5)); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 235, 180, 1)) drop-shadow(0 0 26px rgba(255, 200, 110, .95)) drop-shadow(0 0 56px rgba(255, 170, 60, .7)); } }
/* the two cubes in the air drift gently until they land */
.hs-motion .hs-cube[data-hs-i="6"] > g, .hs-motion .hs-cube[data-hs-i="7"] > g { animation: hs-hover 3.4s ease-in-out infinite; }
.hs-motion .hs-cube[data-hs-i="7"] > g { animation-delay: -1.5s; animation-duration: 4.1s; }
.hs-cube.hs-landed > g { animation: none !important; }
@keyframes hs-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
/* at the end of the scroll the stack bursts and a glowing screen stands on the crest */
.hs-screen { position: absolute; width: 10%; margin-left: -5%; margin-top: -9.2%; opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(0 0 10px rgba(255, 230, 170, .95)) drop-shadow(0 0 30px rgba(255, 195, 100, .85)) drop-shadow(0 0 70px rgba(255, 165, 55, .6)); }
.hs-motion .hs-screen { animation: hs-glow-screen 2.8s ease-in-out infinite; }
@keyframes hs-glow-screen { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 230, 170, .95)) drop-shadow(0 0 30px rgba(255, 195, 100, .85)) drop-shadow(0 0 70px rgba(255, 165, 55, .6)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 240, 190, 1)) drop-shadow(0 0 42px rgba(255, 205, 120, .95)) drop-shadow(0 0 96px rgba(255, 175, 65, .75)); } }
@media (max-width: 809px) { .hs-cubes { display: none; } }
/* hero on desktop: the section (.framer-hmw7d8) and its card (.framer-1w8qob2) were fixed at 100vh with the
   "We run our own AI platform" note pinned to the card's bottom, so on windows under ~940px tall the longer hero
   copy ran under the note. Grow past the viewport instead (24px = the section's 12px padding, top and bottom). */
.hs-bp-desktop .framer-hmw7d8 { height: auto !important; min-height: 100vh !important; }
.hs-bp-desktop .framer-1w8qob2 { height: auto !important; min-height: calc(100vh - 24px) !important; }
/* platform card: a knowledge graph whose five clusters light up one after another (7.5s loop) */
.hs-graph { display: block; width: 100%; height: 100%; }
.hs-graph .hs-e { stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; }
.hs-graph .hs-e.hs-gb { stroke: rgba(255, 255, 255, .22); stroke-dasharray: 3 4; }
.hs-graph .hs-n { fill: #6B6B6B; }
.hs-graph .hs-halo { fill: #DCFF54; opacity: 0; }
.hs-motion .hs-graph .hs-n { animation: hs-net-node 7.5s ease-in-out infinite; }
.hs-motion .hs-graph .hs-halo { animation: hs-net-halo 7.5s ease-in-out infinite; }
.hs-motion .hs-graph .hs-e { animation: hs-net-edge 7.5s ease-in-out infinite; }
.hs-graph .hs-g1 { animation-delay: 1.5s !important; } .hs-graph .hs-g2 { animation-delay: 3s !important; }
.hs-graph .hs-g3 { animation-delay: 4.5s !important; } .hs-graph .hs-g4 { animation-delay: 6s !important; }
.hs-motion .hs-graph .hs-e.hs-gb { animation: hs-net-bridge 7.5s linear infinite; }
@keyframes hs-net-node { 0%, 100% { fill: #6B6B6B; } 8%, 22% { fill: #DCFF54; } 30% { fill: #6B6B6B; } }
@keyframes hs-net-halo { 0%, 100% { opacity: 0; } 8%, 20% { opacity: .28; } 30% { opacity: 0; } }
@keyframes hs-net-edge { 0%, 100% { stroke: rgba(255, 255, 255, .16); } 9%, 22% { stroke: rgba(220, 255, 84, .75); } 30% { stroke: rgba(255, 255, 255, .16); } }
@keyframes hs-net-bridge { to { stroke-dashoffset: -70; } }
/* the core in the middle: every node is wired to it; it flashes first, the light runs out along the
   spokes, then the region on the surface lights up (inside out) */
.hs-graph .hs-s { stroke: rgba(255, 255, 255, .07); stroke-width: .8; }
.hs-graph .hs-core { fill: #DCFF54; }
.hs-graph .hs-core-halo { fill: #DCFF54; opacity: .12; }
.hs-motion .hs-graph .hs-s { animation: hs-net-spoke 7.5s ease-in-out infinite; }
.hs-motion .hs-graph .hs-core { animation: hs-net-core 1.5s ease-out infinite; }
.hs-motion .hs-graph .hs-core-halo { animation: hs-net-core-halo 1.5s ease-out infinite; }
@keyframes hs-net-spoke { 0%, 100% { stroke: rgba(255, 255, 255, .07); } 3%, 16% { stroke: rgba(220, 255, 84, .55); } 26% { stroke: rgba(255, 255, 255, .07); } }
@keyframes hs-net-core { 0% { fill: #DCFF54; r: 12px; } 45%, 100% { fill: #B8D93A; r: 9px; } }
@keyframes hs-net-core-halo { 0% { opacity: .5; r: 18px; } 60%, 100% { opacity: .1; r: 30px; } }
/* compliance badges in the stats card: side by side instead of the template's overlapping pile */
.framer-1y2bgm-container, .framer-1pvz1lb-container, .framer-dnl86t-container, .framer-m1kaix-container { width: 56px !important; flex: 0 0 56px !important; }
.framer-1y2bgm-container .framer-87EUM, .framer-1pvz1lb-container .framer-87EUM, .framer-dnl86t-container .framer-87EUM, .framer-m1kaix-container .framer-87EUM { width: 56px !important; }
.framer-15p7md2 { gap: 8px !important; justify-content: center !important; padding: 0 !important; }
/* results source note: a slow ticker under the cards (same engine as the HOLYSHIFT strip) */
.hs-note-ticker { margin: 40px 0 56px; width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.hs-note-ticker ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; white-space: nowrap; width: max-content; }
.hs-note-ticker li { display: flex; align-items: center; flex: 0 0 auto; font: 13px/1.5 Inter, sans-serif; color: #6B6B6B; }
.hs-note-ticker li i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6B6B6B; margin: 0 40px; opacity: .6; }
/* team cards: on hover a white panel slides in from the left over the photo with the bio and a LinkedIn link */
.framer-116bwgd .framer-14x64ze { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; transform: translateX(-102%); transition: transform .6s cubic-bezier(.22, 1, .36, 1); padding: 22px 20px !important; box-sizing: border-box; border-radius: 20px !important; }
.framer-116bwgd .framer-45lxkn-container:hover .framer-14x64ze { transform: translateX(0); }
.framer-116bwgd .framer-14x64ze .framer-text { font-size: 13.5px !important; line-height: 1.45 !important; }
.framer-116bwgd .framer-14x64ze .framer-44qbn6 { display: none; }
.framer-116bwgd .hs-li { display: inline-block; margin-top: 14px; font: 500 13px/1 Inter, sans-serif; color: #1A1A1A; text-decoration: none; border-bottom: 1px solid #1A1A1A; padding-bottom: 3px; }
.framer-116bwgd .hs-li:hover { color: #6B6B6B; border-color: #6B6B6B; }
/* footer: three glowing cubes take turns rolling along the crest of the hill, one at a time (36s each,
   the next starts as the previous leaves), each a different size on a slightly different path;
   softened and dimmed like the darkened photo behind them */
.hs-roll { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hs-rcube { position: absolute; top: 62%; left: -6%; width: 2.6%; overflow: visible; opacity: .85;
  filter: blur(1.2px) brightness(.8) drop-shadow(0 0 6px rgba(255, 225, 160, .9)) drop-shadow(0 0 18px rgba(255, 190, 90, .7)) drop-shadow(0 0 40px rgba(255, 160, 50, .45)); }
.hs-motion .hs-rcube { animation: hs-roll-a 108s linear infinite; animation-delay: calc(var(--i) * 36s); }
.hs-rcube:nth-child(n+4) { display: none; }
@keyframes hs-roll-a { 0.0% { left: -6%; top: 61.7%; transform: rotate(0deg); } 1.79% { left: 0%; top: 61.7%; transform: rotate(77deg); } 4.17% { left: 8%; top: 66.7%; transform: rotate(180deg); } 7.59% { left: 19.5%; top: 68.7%; transform: rotate(328deg); } 11.01% { left: 31%; top: 65.7%; transform: rotate(476deg); } 14.29% { left: 42%; top: 61.2%; transform: rotate(617deg); } 17.56% { left: 53%; top: 60.2%; transform: rotate(759deg); } 20.83% { left: 64%; top: 62.7%; transform: rotate(900deg); } 24.4% { left: 76%; top: 69.7%; transform: rotate(1054deg); } 27.68% { left: 87%; top: 74.7%; transform: rotate(1196deg); } 30.95% { left: 98%; top: 70.7%; transform: rotate(1337deg); } 33.33% { left: 106%; top: 70.7%; transform: rotate(1440deg); } 100% { left: 106%; top: 70.7%; transform: rotate(1440deg); } }
.hs-rcube[style*='--i:0'] { width: 2.6%; animation-name: hs-roll-a; }
@keyframes hs-roll-b { 0.0% { left: -6%; top: 62.3%; transform: rotate(0deg); } 1.79% { left: 0%; top: 62.3%; transform: rotate(58deg); } 4.17% { left: 8%; top: 67.3%; transform: rotate(135deg); } 7.59% { left: 19.5%; top: 69.3%; transform: rotate(246deg); } 11.01% { left: 31%; top: 66.3%; transform: rotate(357deg); } 14.29% { left: 42%; top: 61.8%; transform: rotate(463deg); } 17.56% { left: 53%; top: 60.8%; transform: rotate(569deg); } 20.83% { left: 64%; top: 63.3%; transform: rotate(675deg); } 24.4% { left: 76%; top: 70.3%; transform: rotate(791deg); } 27.68% { left: 87%; top: 75.3%; transform: rotate(897deg); } 30.95% { left: 98%; top: 71.3%; transform: rotate(1003deg); } 33.33% { left: 106%; top: 71.3%; transform: rotate(1080deg); } 100% { left: 106%; top: 71.3%; transform: rotate(1080deg); } }
.hs-rcube[style*='--i:1'] { width: 3.4%; animation-name: hs-roll-b; }
@keyframes hs-roll-c { 0.0% { left: -6%; top: 61.2%; transform: rotate(0deg); } 1.79% { left: 0%; top: 61.2%; transform: rotate(96deg); } 4.17% { left: 8%; top: 66.2%; transform: rotate(225deg); } 7.59% { left: 19.5%; top: 68.2%; transform: rotate(410deg); } 11.01% { left: 31%; top: 65.2%; transform: rotate(595deg); } 14.29% { left: 42%; top: 60.7%; transform: rotate(771deg); } 17.56% { left: 53%; top: 59.7%; transform: rotate(948deg); } 20.83% { left: 64%; top: 62.2%; transform: rotate(1125deg); } 24.4% { left: 76%; top: 69.2%; transform: rotate(1318deg); } 27.68% { left: 87%; top: 74.2%; transform: rotate(1495deg); } 30.95% { left: 98%; top: 70.2%; transform: rotate(1671deg); } 33.33% { left: 106%; top: 70.2%; transform: rotate(1800deg); } 100% { left: 106%; top: 70.2%; transform: rotate(1800deg); } }
.hs-rcube[style*='--i:2'] { width: 2.0%; animation-name: hs-roll-c; }
@media (max-width: 809px) { .hs-rcube { width: 6% !important; } }

/* Stat tiles under the "Where AI pays off" cards.
   The 2x2 grid gives its rows equal height, but each tile ships with
   place-self:start and height:min-content, so a tile whose caption wraps to
   two lines leaves the one beside it short and the boxes stop lining up.
   Letting each tile fill its cell puts the edges and gutters back in line.
   Two <style> blocks load after this file, hence !important. */
.framer-17k2gmo > * { place-self: stretch !important; height: auto !important; }

/* testimonial cards: Framer snapshotted the phone/tablet copies with every card visibility:hidden */
.hs-slideshow ul > li > [class$="-container"] { visibility: visible !important; }

/* the page owns horizontal swipes on the testimonials (motion.js pages the row); vertical scrolling stays native */
.hs-slideshow { touch-action: pan-y; }

/* 97% stat tile: Framer's phone override sets the caption to white-space:pre / flex:none, so it never
   wraps and its 426px pushes the number out of the tile. Restore the desktop layout: wrap beside the number. */
.hs-bp-phone .framer-1q77v8, .hs-bp-tablet .framer-1q77v8 { white-space: pre-wrap !important; flex: 1 0 0 !important; width: 1px !important; max-width: 200px !important; }

/* article body: Framer's text presets reset <strong> to the paragraph weight; the count-up numbers keep theirs */
strong.framer-text:not(.hs-count) { font-weight: 600; }

/* team-training article hero: the robot sits right of centre in works-4.jpg, so keep it in the phone crop */
.hs-bp-phone section.framer-1tkh2c3 img[src$="works-4.jpg"] { object-position: 72% center !important; }

/* "Everyone has the same tools" section (.framer-1d0is7q) now sits inside #results between the
   stat cards (.framer-1jrwazz) and OUR APPROACH; move the rounded bottom edge down to it */
.framer-1r64yog > .framer-1jrwazz { border-radius: 0 !important; }
.framer-1r64yog > .framer-1d0is7q { border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; }

/* results cards: the same hover that reveals img.hs-after swaps the stat tiles (.framer-17k2gmo)
   for a short "how AI helps here" note (.hs-why, inserted as the grid's first child) */
a.framer-cFRyW .hs-why { position: absolute; inset: 0; z-index: 1; padding: 14px 15px; box-sizing: border-box; overflow: hidden; background: var(--token-7bbf4f4d-a8fb-4fe0-a164-a8cf2fd0048a, #fff); font: 300 14px/1.5 "Inter Display", "Inter Display Placeholder", sans-serif; letter-spacing: .01em; color: var(--token-12bdb585-eb60-40ed-9a8e-f96b7019ea83, #1a1a1ab3); opacity: 0; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
a.framer-cFRyW:hover .hs-why { opacity: 1; }
.hs-motion-off a.framer-cFRyW .hs-why { transition: none; }

/* ---- Customer example page (case-forma-svetila.html): three-panel visual inside the article body
   (.framer-hgs6aj). Drawing 22% / product schedule 30% / finished space 48% on desktop; plan and
   schedule side by side with the room below on tablet; stacked in that order on phone. ---- */
.hs-case-panels { display: grid; grid-template-columns: 22fr 30fr 48fr; gap: 20px; align-items: start; width: 100%; margin: 8px 0; font-family: "Inter Display", "Inter Display Placeholder", sans-serif; color: var(--token-2ddcea38-bb42-4986-8e36-4a45eb0c9596, #1f1f1f); --hs-muted: var(--token-12bdb585-eb60-40ed-9a8e-f96b7019ea83, rgba(26,26,26,.7)); --hs-line: rgba(31,31,31,.08); --hs-sage: #e8eee0; --hs-sage-ink: #4a5a44; }
.hs-case-panels figure, .hs-case-panels p, .hs-case-panels ul { margin: 0; padding: 0; }
.hs-case-step { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.hs-case-step span { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: #1f1f1f; color: #fff; font-size: 11px; font-weight: 500; }
.hs-case-frame { border: 1px solid var(--hs-line); border-radius: 12px; overflow: hidden; background: #fff; }
.hs-case-frame img { display: block; width: 100%; height: auto; }
.hs-case-panel figcaption { margin-top: 10px; font-size: 13px; line-height: 1.45; font-weight: 300; color: var(--hs-muted); }
.hs-sched { padding: 12px 14px; font-size: 12px; }
.hs-sched-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 500; letter-spacing: .06em; font-size: 10px; }
.hs-sched-match { padding: 3px 8px; border-radius: 999px; background: var(--hs-sage); color: var(--hs-sage-ink); letter-spacing: 0; font-size: 11px; font-weight: 400; }
.hs-sched table { width: 100%; border-collapse: collapse; }
.hs-sched th, .hs-sched td { font-size: 12px; padding: 7px 4px; text-align: left; vertical-align: top; border-top: 1px solid var(--hs-line); font-weight: 400; line-height: 1.3; }
.hs-sched th { font-size: 10px; color: var(--hs-muted); border-top: 0; }
.hs-sched th:nth-child(n+3), .hs-sched td:nth-child(n+3) { text-align: right; white-space: nowrap; }
.hs-sched td:first-child { white-space: nowrap; font-weight: 500; }
.hs-sched td small { display: block; font-size: 11px; color: var(--hs-muted); }
.hs-sched tfoot td { font-weight: 500; border-top: 1px solid #1f1f1f; }
.hs-sched-flag { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #fbf5e6; color: #6b5420; font-size: 11px; line-height: 1.4; }
.hs-sched-flag strong { display: block; font-weight: 500; }
.hs-sched-caption { margin-top: 8px !important; font-size: 10px; color: var(--hs-muted); }
.hs-case-visual { position: relative; }
.hs-offer { position: absolute; right: 16px; bottom: 16px; width: min(260px, calc(100% - 32px)); padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.hs-offer-label { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.hs-offer-label span { letter-spacing: 0; font-weight: 300; color: var(--hs-muted); }
.hs-offer-title { margin-top: 8px !important; font-size: 15px; font-weight: 500; }
.hs-offer-meta { font-size: 12px; font-weight: 300; color: var(--hs-muted); }
.hs-offer-total { margin-top: 8px !important; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.hs-offer-note { font-size: 11px; font-weight: 300; color: var(--hs-muted); }
.hs-case-outputs { position: absolute; left: 16px; top: 16px; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.hs-case-outputs li { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 11px; font-weight: 400; }
.hs-case-caption { margin: 0 0 8px !important; font-size: 12px; line-height: 1.45; font-weight: 300; color: var(--token-12bdb585-eb60-40ed-9a8e-f96b7019ea83, rgba(26,26,26,.7)); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; }
.hs-case-sources { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: "Inter Display", "Inter Display Placeholder", sans-serif; }
.hs-case-sources li { padding: 6px 12px; border: 1px solid rgba(31,31,31,.12); border-radius: 999px; font-size: 12px; color: var(--token-2ddcea38-bb42-4986-8e36-4a45eb0c9596, #1f1f1f); }
.hs-bp-tablet .hs-case-panels { grid-template-columns: 1fr 1fr; }
.hs-bp-tablet .hs-case-room { grid-column: 1 / -1; }
.hs-bp-phone .hs-case-panels { grid-template-columns: 1fr; }
.hs-bp-phone .hs-offer { position: static; width: auto; padding: 12px 14px; border-radius: 0; border-top: 1px solid var(--hs-line); box-shadow: none; background: #fff; }
.hs-bp-phone .hs-offer-total { font-size: 20px; }

/* ---- Partner logo roll (.hs-partners): sits between the testimonial slider and the HOLYSHIFT
   ticker inside .framer-14qwybz, a flex column with a 180px gap; the negative margins pull it to
   ~70px from each neighbour. Uses the same ul.hs-marquee loop as the other tickers. ---- */
.hs-partners { width: 100%; margin: -60px 0 -20px; } /* ~120px below the testimonial cards, ~160px above the ticker */
.hs-partners-label { margin: 0 0 22px; text-align: center; font: 500 11px/1 "Inter Display", "Inter Display Placeholder", sans-serif; letter-spacing: .12em; color: rgba(26,26,26,.55); }
.hs-partners-roll { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.hs-partners-roll ul { display: flex; align-items: center; gap: 72px; width: max-content; margin: 0; padding: 0 36px; list-style: none; }
.hs-partners-roll li { flex: 0 0 auto; display: flex; align-items: center; }
.hs-partners-roll img { display: block; height: 34px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.hs-partners-roll li:hover img { filter: none; opacity: 1; }
.hs-bp-phone .hs-partners { margin: -30px 0 0; }
.hs-bp-phone .hs-partners-roll img { height: 28px; }
.hs-bp-phone .hs-partners-roll ul { gap: 48px; }
/* icon-only logos (Kovačnica, Impact Hub, Fil Rouge) get their name set beside the mark */
.hs-partners-roll .hs-partner-icon { gap: 10px; }
.hs-partners-roll .hs-partner-icon img { height: 38px; }
.hs-partners-roll .hs-partner-icon span { font: 500 17px/1 "Inter Display", "Inter Display Placeholder", sans-serif; letter-spacing: -.01em; color: #1a1a1a; opacity: .7; white-space: nowrap; transition: opacity .3s; }
.hs-partners-roll .hs-partner-icon:hover span { opacity: 1; }
.hs-bp-phone .hs-partners-roll .hs-partner-icon img { height: 30px; }
.hs-bp-phone .hs-partners-roll .hs-partner-icon span { font-size: 14px; }
/* programs (LUI, Kovačnica): a second .hs-partners-roll under the partner roll, so the logo styles above
   apply; two logos are too few to loop, so the row stands still and centred */
.hs-programs-label { margin: 72px 0 12px; } /* clear of the partner roll, close to its own logos */
.hs-bp-phone .hs-programs-label { margin-top: 56px; }
.hs-programs ul { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 20px; } /* centred; wraps on phone */
/* Podjetniški inkubator Kočevje: its name is set in three lines inside the logo, so it needs more height to stay legible */
.hs-partners-roll .hs-logo-tall img { height: 48px; }
.hs-bp-phone .hs-partners-roll .hs-logo-tall img { height: 40px; }

/* ---- "New questions. New possibilities." (.hs-questions): full-width section between the hero and
   "Where AI pays off" (.framer-1r64yog) in every breakpoint copy. ---- */
.hs-questions { position: relative; z-index: 4; /* above the fixed full-screen Framer layer (.framer-no1ell-container), like every template section */ width: 100%; box-sizing: border-box; padding: 100px 40px; background: var(--token-7bbf4f4d-a8fb-4fe0-a164-a8cf2fd0048a, #fff); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; color: var(--token-2ddcea38-bb42-4986-8e36-4a45eb0c9596, #1f1f1f); }
.hs-q-inner { max-width: none; }
.hs-q-inner p, .hs-q-inner h2, .hs-q-inner h3, .hs-q-inner ul { margin: 0; padding: 0; }
/* label row like the HOW WE WORK header (.framer-acrqpn), in black for the white panel */
.hs-q-head { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.hs-q-line { flex: 1 0 0; height: 1px; background: rgba(31,31,31,.12); }
.hs-q-icon { flex: none; width: 26px; height: 26px; background: url(img/unicorn-black.png) center/contain no-repeat; }
/* headline in the "Clear scope, clear outcomes" preset (6s66nj), then the visual card beside the copy,
   mirroring the HOW WE WORK block (.framer-139tig8 / .framer-15kdlea) on a white ground */
.hs-q-h2 { max-width: 800px; }
/* left half: the animation card; right half: headline, intro, the rolling list, the note */
.hs-q-right { display: flex; flex-direction: column; min-width: 0; }
.hs-q-right .hs-q-intro { margin-bottom: 32px !important; }
.hs-q-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 20px; margin-top: 40px; }
.hs-q-visual { width: auto; min-height: 400px; align-self: stretch; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(31,31,31,.1); border-radius: 20px; background: #fff; }
/* the animation: the hero's glowing monitor (img/hero-pc.png, same glow as .hs-screen) with cubes of
   different sizes (the hero's cube, same glow as .hs-cube) dropping into its screen on a loop */
.hs-q-pc { position: relative; width: min(440px, 72%); aspect-ratio: 1; }
.hs-q-screen { position: absolute; left: 50%; top: 56%; width: 62%; height: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 10px rgba(255, 230, 170, .95)) drop-shadow(0 0 30px rgba(255, 195, 100, .85)) drop-shadow(0 0 70px rgba(255, 165, 55, .6)); }
.hs-motion .hs-q-screen { animation: hs-glow-screen 2.8s ease-in-out infinite; }
.hs-q-cube { position: absolute; left: var(--sx); top: var(--sy); width: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); overflow: visible; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 225, 160, .95)) drop-shadow(0 0 18px rgba(255, 190, 90, .8)) drop-shadow(0 0 40px rgba(255, 160, 50, .5)); }
.hs-motion .hs-q-cube { animation: hs-q-fly 4.2s cubic-bezier(.5, 0, .7, .3) var(--d) infinite, hs-glow 2.6s ease-in-out infinite; }
.hs-motion-off .hs-q-cube { opacity: 1; }
/* each cube starts at its own edge point (--sx/--sy) and flies to the middle of the screen */
@keyframes hs-q-fly {
  0%   { left: var(--sx); top: var(--sy); transform: rotate(-14deg) scale(1);  opacity: 0; }
  8%   { opacity: 1; }
  70%  { left: 50%; top: 54%; transform: rotate(10deg) scale(.8);  opacity: 1; }
  82%  { left: 50%; top: 55%; transform: rotate(18deg) scale(.12); opacity: 0; }
  100% { left: 50%; top: 55%; transform: rotate(18deg) scale(.12); opacity: 0; }
}
.hs-q-intro { margin-top: 24px !important; max-width: 640px; font-size: 18px; line-height: 1.5; font-weight: 300; color: rgba(26,26,26,.8); }
.hs-q-note { margin-top: 12px !important; max-width: 640px; font-size: 14px; line-height: 1.5; font-weight: 300; color: rgba(26,26,26,.6); }
/* question rows (.hs-qa) in a self-rolling list (.hs-q-list, driven by motion.js), styled like the
   process steps (// 01, title, tag, description) on a white ground; the middle row is open */
.hs-q-list-wrap { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; }
/* up/down arrows: the testimonial slider's round buttons, turned to point up and down */
.hs-q-arrows { flex: none; display: flex; flex-direction: column; gap: 10px; }
.hs-q-arrow { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 40px; background: #1a1a1a; cursor: pointer; overflow: hidden; }
.hs-q-arrow img { display: block; width: 40px; height: 40px; transform: rotate(90deg); }
.hs-q-arrow:hover { background: #333; }
.hs-q-arrow:focus-visible { outline: 2px solid #1f1f1f; outline-offset: 2px; }
.hs-q-list { flex: 1 1 0; min-width: 0; height: 520px; overflow: hidden; position: relative; -webkit-mask: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.hs-q-track { display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.hs-q-static { height: auto; overflow: visible; -webkit-mask: none; mask: none; }
.hs-qa { display: flex; align-items: flex-start; gap: 24px; padding: 22px 28px; border: 1px solid rgba(31,31,31,.1); border-radius: 16px; background: #fff; cursor: pointer; transition: background .5s, border-color .5s; }
.hs-qa-active { background: #f0f0f0; border-color: rgba(31,31,31,.04); cursor: default; }
.hs-qa-num { flex: none; width: 44px; padding-top: 2px; white-space: nowrap; }
.hs-qa-body { flex: 1 1 0; min-width: 0; }
.hs-qa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hs-qa-tag { flex: none; padding: 6px 10px; border: 1px solid rgba(31,31,31,.25); border-radius: 999px; white-space: nowrap; text-transform: uppercase; opacity: 0; transition: opacity .5s; }
.hs-qa-active .hs-qa-tag { opacity: 1; }
.hs-qa-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.25, 1, .3, 1); }
.hs-qa-more > div { overflow: hidden; min-height: 0; }
.hs-qa-active .hs-qa-more { grid-template-rows: 1fr; }
.hs-qa-desc { padding-top: 18px; max-width: 520px; opacity: 0; transition: opacity .5s .1s; }
.hs-qa-active .hs-qa-desc { opacity: 1; }
.hs-q-note { margin-top: 40px !important; text-transform: uppercase; }
.hs-bp-tablet .hs-questions { padding: 80px 40px; }
.hs-bp-tablet .hs-q-row { grid-template-columns: 1fr; }
.hs-bp-tablet .hs-q-list-wrap, .hs-bp-phone .hs-q-list-wrap { flex: none; } /* column layout: a zero flex-basis would override the height */
.hs-bp-tablet .hs-q-visual { width: 100%; height: 360px; }
.hs-bp-phone .hs-questions { padding: 60px 20px; }
.hs-bp-phone .hs-qa { padding: 18px 18px; gap: 14px; }
.hs-bp-phone .hs-qa-head { flex-direction: column; gap: 10px; }
.hs-bp-phone .hs-qa-desc { padding-top: 12px; }
.hs-bp-phone .hs-q-list { height: 460px; flex: none; }
.hs-bp-phone .hs-q-list-wrap { flex-direction: column; align-items: stretch; gap: 12px; } /* arrows go under the list on phone */
.hs-bp-phone .hs-q-arrows { flex-direction: row; justify-content: flex-end; }
.hs-bp-phone .hs-q-row { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
.hs-bp-phone .hs-q-visual { width: 100%; height: 300px; }
.hs-bp-phone .hs-q-pc { width: 72%; }

/* OUR APPROACH: the empty #242424 strip (.framer-hmm637) the template tucks under the founder block's
   rounded corners read as a stray line between the founder quote and "Engineering systems…" */
.framer-hmm637 { display: none !important; }
/* the #1f1f1f strip (.framer-uric3t) pinned to the top of "What clients say" rounded off "Where AI pays off"
   above it in the template; with HOW WE WORK moved in between, whose card already has rounded corners, it
   hung below that card as a second little box */
.framer-uric3t { display: none !important; }

/* "Everyone has the same tools": the fourth card (.framer-1cbrm4u) is an illustrative monthly report —
   three baseline → month-3 rows; numbers count up (.hs-count) and bars grow when it scrolls in */
.framer-1cbrm4u .hs-report { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; font-family: "Inter Display", "Inter Display Placeholder", sans-serif; color: #1f1f1f; }
.hs-report p, .hs-report ul { margin: 0; padding: 0; }
.hs-report-label { font-size: 11px; font-weight: 500; letter-spacing: .08em; color: rgba(31,31,31,.55); }
.hs-report-title { margin-top: 10px !important; font-size: 18px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.hs-report-rows { list-style: none; margin-top: auto !important; padding-top: 18px !important; display: flex; flex-direction: column; gap: 14px; }
.hs-report-rows li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.hs-report-name { font-size: 13px; font-weight: 300; color: rgba(31,31,31,.7); }
.hs-report-vals { font-size: 13px; white-space: nowrap; }
.hs-report-vals s { color: rgba(31,31,31,.4); text-decoration: line-through; margin-right: 8px; }
.hs-report-vals b { font-weight: 500; }
.hs-report-vals em { font-style: normal; }
.hs-report-bar { grid-column: 1 / -1; display: block; height: 3px; border-radius: 3px; background: rgba(31,31,31,.08); overflow: hidden; }
.hs-report-bar::after { content: ""; display: block; height: 100%; width: 0; border-radius: 3px; background: #1f1f1f; transition: width 1.1s cubic-bezier(.22, 1, .36, 1); }
.hs-report.hs-in .hs-report-bar::after, .hs-motion-off .hs-report-bar::after { width: var(--w); }
.hs-report-foot { margin-top: 16px !important; font-size: 11px; font-weight: 300; color: rgba(31,31,31,.5); }