/* ============================================================================
   Pametni razpisi — marketing.css (javne strani: /, /storitve, /o-nas, /demo)
   Naložen ZA portal.css in SAMO prek public_base.html. Deli tokene (:root v
   portal.css) in motion.js konvencije ([data-reveal], [data-count], .topbar
   .stuck, #theme-btn, .scrollprog). @layer marketing se v vrstnem redu plasti
   pojavi ZA `motion` (prva pojavitev) → zmaga znotraj kaskade; vsa pravila so
   dodatno omejena na body.mk, da nič ne pušča v app-stran.
   ============================================================================ */

/* ---------- Self-hosted fonti (samo javne strani; GDPR — brez Google CDN) ----------
   @font-face namenoma IZVEN @layer (at-pravila niso del kaskade plasti).
   Subset latin+latin-ext: šumniki č/š/ž preverjeni v build koraku. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/static/fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/static/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
}
/* metrics-tuned fallback → brez CLS ob font swapu (izračunano proti Arial) */
@font-face{
  font-family:"Plus Jakarta Sans Fallback";
  src:local("Arial");
  size-adjust:105.38%;ascent-override:98.5%;descent-override:21.07%;line-gap-override:0%;
}

@layer marketing {

/* ---------- Tokeni javnih strani (dedovanje prebarva tudi deljene komponente) ---------- */
body.mk{
  --font-d:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",ui-sans-serif,system-ui,sans-serif;
  --font-b:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",ui-sans-serif,system-ui,sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* premium tipografska skala (Premier vzorec: lahke teže, en display vrh) */
  --mk-display:clamp(2.7rem,7.6vw,6.9rem);   /* manifest, do ~110px */
  --mk-h1:clamp(2.2rem,4.8vw,3.8rem);
  --mk-h2:clamp(1.6rem,3vw,2.35rem);
  --mk-w-light:320;--mk-w-reg:400;--mk-w-med:550;--mk-w-bold:700;
  /* struktura */
  --mk-radius-seam:24px;
  --mk-ink:#0e0827;        /* skoraj-črn indigo — manifest/temni vrh */
  --mk-band:#150d39;
  --mk-gold-ink:#7d612a;   /* zlata za TEKST na svetlem (WCAG ≥4,5 na canvas+surface); svetla zlata samo na temnem */
}

/* ---------- Osnova ---------- */
.mk{display:block;min-height:100vh;background:var(--canvas)}
.mk .scrollprog{left:0}
.mk-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.mk-section{padding:clamp(54px,8vw,92px) 0}
.mk-section.tight{padding-top:clamp(30px,4vw,48px)}
.mk-sec-head{max-width:680px;margin-bottom:clamp(28px,4vw,44px)}
.mk-sec-head .kicker{margin-bottom:8px}
.mk-sec-head h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.mk-sec-head .lead{color:var(--text-2);margin-top:10px;font-size:1rem}
.mk-center{text-align:center}
.mk-center.mk-sec-head{margin-left:auto;margin-right:auto}

/* ---------- Header (reuse .topbar za sticky/blur/.stuck) ---------- */
.mk .topbar.mk-head{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:18px;
  padding:12px clamp(20px,4vw,40px);
  transition:border-color .3s,box-shadow .3s,background .35s var(--ease),color .35s var(--ease)}

/* navbar re-theme nad temnimi pasovi (sentineli [data-nav-theme] v marketing-motion.js) */
.mk .topbar.mk-head.on-dark{
  background:color-mix(in srgb,#100a2c 78%,transparent);color:#e7e3f6}
.mk .topbar.mk-head.on-dark.stuck{border-bottom-color:rgba(255,255,255,.08)}
.mk .topbar.mk-head.on-dark .brand-name{color:#fff}
.mk .topbar.mk-head.on-dark .brand-sub{color:var(--gold-bright)}
.mk .topbar.mk-head.on-dark .mk-nav a{color:#c6bfe8}
.mk .topbar.mk-head.on-dark .mk-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.mk .topbar.mk-head.on-dark .mk-nav a.on{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 -2px 0 var(--gold-bright)}
.mk .topbar.mk-head.on-dark .btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
.mk .topbar.mk-head.on-dark .btn-ghost:hover{background:rgba(255,255,255,.14)}
.mk .topbar.mk-head.on-dark .iconbtn{color:#c6bfe8}
.mk-head .brand{display:flex;align-items:center;gap:11px;padding:0;color:inherit}
.mk-head .brand:hover{text-decoration:none}
.mk-head .brand-mark{width:36px;height:36px}
.mk-head .brand-name{color:var(--text);font-size:1.02rem}
.mk-head .brand-sub{color:var(--mk-gold-ink)}
[data-theme=dark] .mk-head .brand-sub{color:var(--gold-bright)}
.mk-nav{display:flex;align-items:center;gap:4px;margin-left:14px}
.mk-nav a{padding:8px 13px;border-radius:10px;color:var(--text-2);font-weight:600;font-size:.9rem;
  transition:background .2s var(--ease),color .2s var(--ease)}
.mk-nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.mk-nav a.on{color:var(--text);background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--gold)}
.mk-head-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.mk-head-actions .btn-ghost,.mk-head-actions .btn-primary{white-space:nowrap}
.mk-burger{display:none}

/* mobilni meni: zlaganje SAMO z JS (html.js); brez JS je nav vedno viden */
@media(max-width:880px){
  .mk-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    margin:0;padding:10px clamp(20px,4vw,40px) 16px;gap:2px;
    background:color-mix(in srgb,var(--canvas) 92%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);box-shadow:var(--shadow-md)}
  .js .mk-nav{display:none}
  .js .mk-nav.open{display:flex}
  .js .mk-burger{display:grid}
  .mk-head-actions .btn-ghost{display:none}
}
@media(max-width:560px){
  .mk-head-actions .btn-primary{padding:9px 13px;font-size:.82rem}
}

/* ---------- Hero: scroll scena (200lvh proga + sticky oder) ----------
   Fallback-first: spodnje (privzete) vrednosti so DOKONČANA statična kompozicija
   za mobilne/no-JS/reduced-motion; sticky proga + animacijska režija se vklopi
   šele v media queryju, ki zrcali GSAP matchMedia kontekst. POZOR: proga ne sme
   imeti overflow:hidden (ubije position:sticky) — clip nosi oder. */
.mk-hero-track{position:relative;color:#fff;background:#100a2c}
/* mobilni privzeto BLOCK (copy nad kartico v toku); flex centriranje šele na velikih
   zaslonih — flex row na 390px je copy in kartico stiskal enega čez drugega */
.mk-hero-stage{position:relative;min-height:100svh;display:block;overflow:clip}
@media(min-width:881px){
  .mk-hero-stage{display:flex;align-items:center}
}
@media(min-width:881px) and (prefers-reduced-motion:no-preference){
  .js .mk-hero-track{height:200vh;height:200lvh}
  .js .mk-hero-stage{position:sticky;top:0;min-height:0;height:100vh;height:100svh}
}
.mk-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.mk-hero-bg picture{position:absolute;inset:0;will-change:transform}
.mk-hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-hero-bgblur{opacity:0}
/* Ambient loop videa (F8): statika spodaj = poster; video se crossfada čez na
   .playing (skrije mikro-razliko statika<->frame 0). preload=none + play() šele
   v motion sloju -> mobile/no-JS/reduced-motion ne prenesejo niti bajta;
   display:none spodaj = pas in varovalke (belt-and-braces). */
.mk-ambient{opacity:0;transition:opacity .8s ease}
.mk-ambient.playing{opacity:1}
@media(max-width:880px){.mk-ambient{display:none}}
@media(prefers-reduced-motion:reduce){.mk-ambient{display:none}}
.mk-hero-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.mk-hero-bg .grain{position:absolute;inset:0;opacity:.42;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.12) .5px,transparent .5px);background-size:4px 4px}
.mk-hero-layout{position:relative;z-index:2;width:100%}
.mk-hero-track .mk-hero-copy{max-width:560px;padding:clamp(96px,14vh,150px) 0 24px}
.mk-hero-track .hero-eyebrow{margin-bottom:14px}
.mk-eyebrow{text-transform:none!important;letter-spacing:.08em} /* ohrani 'eNaročanje' zapis */
.mk-hero-track h1{font-family:var(--font-d);font-weight:600;font-size:var(--mk-h1);
  letter-spacing:-.028em;line-height:1.04;color:#fff}
.mk-hero-track h1 b{font-weight:600;background:linear-gradient(100deg,var(--gold-bright),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* prenosnik s posnetkom: privzeto v toku pod copyjem (mobilni); na velikih
   zaslonih absolutna desno, vertikalno pa jo centrira flex static position
   odra (oder je tam display:flex;align-items:center — abspos otrok brez
   top/bottom se postavi kot edini flex item; robustneje kot fit-content trik).
   BREZ transforma — transform je v lasti GSAP. Figura = prosojen oder;
   vizualni stil nosi MacBook silhueta .mk-laptop-*. */
.mk-hero-media{position:relative;z-index:1;margin:18px auto 56px;width:min(100% - 40px,580px)}
/* MacBook (CSS-only): lid = ekran s temnim bezelom, base = malenkost širši
   spodnji del z utorom za palec. Mere v % širine figure → ohišje z GSAP
   transformom skalira kot celota (px radii vizualno skalirajo zraven). */
.mk-laptop{position:relative}
/* kontaktna senca pod bazo: brez nje naprava na temnem ambientu 'lebdi' */
.mk-laptop::after{content:"";position:absolute;top:99%;left:5%;right:5%;height:7%;
  background:radial-gradient(ellipse at 50% 0,rgba(0,0,0,.55),transparent 62%);pointer-events:none}
.mk-laptop-lid{position:relative;margin:0 3%;padding:2.2% 2.2% 2.6%;
  background:linear-gradient(180deg,#262631,#12121a 55%,#08080d);
  border-radius:14px 14px 0 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.14)}
.mk-laptop-lid video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:6px;background:#160d3a}
.mk-laptop-base{position:relative;aspect-ratio:1000/34;
  background:linear-gradient(180deg,#3e3e49,#1c1c24 45%,#0b0b11);
  border-radius:3px 3px 16px 16px/3px 3px 22px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.mk-laptop-base::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:13%;height:40%;background:linear-gradient(180deg,#0a0a10,#23232c);
  border-radius:0 0 26px 26px/0 0 16px 16px}
/* senca ohišja: na mobilnih poceni box-shadow (filter:drop-shadow nad autoplay
   videom bi re-blurral ob vsakem video framu = GPU/baterija); pravokotnik
   .mk-laptop ni točna silhueta, a je z velikim blurom na temnem ozadju neviden */
@media(max-width:880px){
  .mk-laptop{box-shadow:0 30px 70px -16px rgba(0,0,0,.6)}
}
@media(min-width:881px){
  /* desktop: silhuetna senca prek filtra — GSAP scale jo skalira z ohišjem
     (re-blur ob video framih je na desktop GPU zanemarljiv) */
  .mk-hero-media{position:absolute;right:4.5%;margin:0;width:45%;
    will-change:transform;filter:drop-shadow(0 36px 70px rgba(0,0,0,.55))}
  .mk-hero-track .mk-hero-copy{max-width:46%;padding:0}
}
.mk-hero-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:#a99fd6;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.mk-hero-hint .mk-hint-line{width:1px;height:34px;background:linear-gradient(180deg,var(--gold-bright),transparent);
  animation:mkHintDrop 2.4s var(--ease) infinite}
@keyframes mkHintDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:880px){.mk-hero-hint{display:none}}
@media(prefers-reduced-motion:reduce){.mk-hero-hint .mk-hint-line{animation:none}}
/* mobilni hero CTA: gumba v stolpec, polna širina, brez preloma napisa */
.mk-hero-cta .btn-primary,.mk-hero-cta .btn-ghost{white-space:nowrap}
@media(max-width:560px){
  .mk-hero-cta{flex-direction:column;align-items:stretch}
  .mk-hero-cta .btn-primary,.mk-hero-cta .btn-ghost{text-align:center;justify-content:center}
}
/* grid blowout varovalka (item min-width:auto sicer razširi track čez kontejner) */
.mk-feature>*,.mk-demo-grid>*{min-width:0}
.mk-hero-sub{color:#c6bfe8;font-size:clamp(.96rem,1.4vw,1.1rem);margin-top:16px;max-width:54ch;line-height:1.65}
.mk-hero-sub b{color:#fff}
.mk-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.mk-hero-cta .btn-primary{background:linear-gradient(120deg,var(--gold-bright),var(--gold));color:var(--navy-deep);
  box-shadow:0 6px 22px -6px rgba(201,169,97,.65)}
.mk-hero-cta .btn-primary:hover{box-shadow:var(--glow-gold)}
.mk-hero-cta .btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
.mk-hero-cta .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.36)}
.mk-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:30px;color:#a99fd6;font-size:.8rem;align-items:center}
.mk-trust b{color:#e7e3f6;font-weight:600}
.mk-trust .sep{opacity:.45}

/* ---------- Statistika (count-up trak) ---------- */
.mk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mk-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 22px;box-shadow:var(--shadow-sm);text-align:left}
.mk-stat .n{font-family:var(--font-d);font-weight:700;font-size:2.2rem;line-height:1;color:var(--text);letter-spacing:-.02em}
.mk-stat .n small{font-size:1.15rem;color:var(--muted);font-weight:600}
.mk-stat .l{color:var(--muted);font-size:.82rem;font-weight:600;margin-top:8px;line-height:1.45}

/* ---------- Kartice storitev ---------- */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px}
.mk-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 24px 22px;box-shadow:var(--shadow-sm);overflow:hidden;display:block;color:inherit;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.mk-card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(420px circle at 50% 0%,rgba(107,91,201,.10),transparent 60%);transition:opacity .4s}
.mk-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--violet-soft) 50%,var(--border));text-decoration:none}
.mk-card:hover::after{opacity:1}
.mk-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(201,169,97,.18),rgba(107,91,201,.14));color:var(--mk-gold-ink)}
[data-theme=dark] .mk-ico{color:var(--gold-bright)}
.mk-ico svg{width:21px;height:21px;stroke-width:1.7}
.mk-card h3{font-family:var(--font-d);font-weight:700;font-size:1.02rem;color:var(--text);margin:0 0 7px}
.mk-card p{color:var(--text-2);font-size:.88rem;line-height:1.6;margin:0}
.mk-card .mk-more{display:inline-flex;align-items:center;gap:5px;margin-top:13px;font-size:.82rem;font-weight:600;color:var(--violet);transition:gap .25s}
.mk-card:hover .mk-more{gap:9px}
/* v mrežah: link 'Več o storitvi' sidran na dno kartice (poravnan ritem vrstice) */
.mk-grid .mk-card{display:flex;flex-direction:column}
.mk-grid .mk-card .mk-more{margin-top:auto;padding-top:13px}
.mk-grid .mk-card p{margin-bottom:0}

/* ---------- Kako deluje (koraki) ---------- */
.mk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:mkstep}
.mk-step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 24px 22px;box-shadow:var(--shadow-sm)}
.mk-step::before{counter-increment:mkstep;content:"0" counter(mkstep);
  font-family:var(--font-m);font-weight:600;font-size:.78rem;letter-spacing:.08em;
  display:inline-block;padding:4px 11px;border-radius:20px;margin-bottom:14px;
  background:linear-gradient(120deg,var(--navy),var(--steel));color:#fff}
.mk-step h3{font-family:var(--font-d);font-weight:700;font-size:1rem;color:var(--text);margin:0 0 7px}
.mk-step p{color:var(--text-2);font-size:.88rem;line-height:1.6;margin:0}

/* ---------- Temni pas (razlikovalniki) ---------- */
.mk-band{position:relative;overflow:hidden;color:#fff;border-radius:24px;
  background:linear-gradient(135deg,#1c1346 0%,#241858 45%,#150d39 100%);
  padding:clamp(34px,5vw,54px) clamp(24px,4vw,48px);box-shadow:var(--shadow-lg)}
.mk-band .mesh{position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(46px);opacity:.85}
.mk-band .mesh i{position:absolute;display:block;border-radius:50%}
.mk-band .mesh .b1{width:300px;height:300px;top:-110px;left:10%;background:radial-gradient(circle,rgba(201,169,97,.5),transparent 60%);animation:floatA 18s var(--ease) infinite alternate}
.mk-band .mesh .b2{width:280px;height:280px;bottom:-120px;right:6%;background:radial-gradient(circle,rgba(107,91,201,.55),transparent 60%);animation:floatB 21s var(--ease) infinite alternate}
.mk-band-in{position:relative;z-index:2}
.mk-band .kicker{color:var(--gold-bright)}
.mk-band h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.02em;max-width:30ch}
.mk-band .lead{color:#c6bfe8;margin-top:10px;max-width:62ch}
.mk-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px 22px;margin-top:26px;
  list-style:none;padding:0}
.mk-checklist li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:#e7e3f6;line-height:1.55}
.mk-checklist li b{color:#fff}
.mk-checklist svg{width:18px;height:18px;flex:0 0 auto;color:var(--gold-bright);margin-top:2px}

/* ---------- Izmenjujoče vrstice (storitve) ---------- */
.mk-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,60px);align-items:center;
  padding:clamp(28px,4vw,44px) 0}
.mk-feature+.mk-feature{border-top:1px solid var(--border)}
.mk-feature h3{font-family:var(--font-d);font-weight:700;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--text);margin:0 0 10px;letter-spacing:-.015em}
.mk-feature p{color:var(--text-2);font-size:.93rem;line-height:1.65;margin:0 0 12px}
.mk-feature ul{margin:0;padding-left:0;list-style:none;display:grid;gap:8px}
.mk-feature ul li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--text-2);line-height:1.55}
.mk-feature ul li svg{width:16px;height:16px;flex:0 0 auto;color:var(--high);margin-top:2px}
.mk-feature ul li b{color:var(--text)}
.mk-feature .vis{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow-md);padding:22px 24px;min-width:0}
.mk-feature.rev .vis{order:-1}
@media(max-width:860px){.mk-feature{grid-template-columns:1fr}.mk-feature.rev .vis{order:0}}

/* vsebine vizualnih panelov */
.mk-vrow{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--border);font-size:.85rem}
.mk-vrow:last-child{border-bottom:none}
.mk-vrow .t{flex:1;min-width:0;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-vrow .t small{display:block;font-weight:400;color:var(--muted)}
.mk-dscore{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;margin-bottom:12px;
  font-family:var(--font-d);font-weight:700;font-size:1.5rem;color:#fff;
  background:linear-gradient(135deg,#168345,#0f6a37);box-shadow:0 6px 16px -5px rgba(31,157,87,.6)}
.mk-gap{display:flex;gap:9px;align-items:flex-start;padding:9px 0;font-size:.85rem;color:var(--text-2);border-bottom:1px dashed var(--border)}
.mk-gap:last-child{border-bottom:none}
.mk-gap .pill{flex:0 0 auto}

/* ---------- Zaključni CTA ---------- */
.mk-cta{position:relative;overflow:hidden;text-align:center;color:#fff;border-radius:24px;
  background:linear-gradient(135deg,#1c1346 0%,#241858 45%,#150d39 100%);
  padding:clamp(44px,6vw,72px) clamp(24px,4vw,48px);box-shadow:var(--shadow-lg)}
.mk-cta .mesh{position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(46px);opacity:.9}
.mk-cta .mesh i{position:absolute;display:block;border-radius:50%}
.mk-cta .mesh .b1{width:340px;height:340px;top:-130px;left:18%;background:radial-gradient(circle,rgba(201,169,97,.5),transparent 60%);animation:floatA 17s var(--ease) infinite alternate}
.mk-cta .mesh .b2{width:300px;height:300px;bottom:-140px;right:14%;background:radial-gradient(circle,rgba(107,91,201,.55),transparent 60%);animation:floatB 20s var(--ease) infinite alternate}
.mk-cta-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}
.mk-cta h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;max-width:26ch}
.mk-cta p{color:#c6bfe8;max-width:56ch;font-size:.96rem}
.mk-cta .btn-primary{margin-top:16px;background:linear-gradient(120deg,var(--gold-bright),var(--gold));color:var(--navy-deep);
  box-shadow:0 6px 22px -6px rgba(201,169,97,.65)}
.mk-cta .btn-primary:hover{box-shadow:var(--glow-gold)}
.mk-cta .mk-cta-sub{font-size:.8rem;color:#a99fd6;margin-top:8px}
.mk-cta .mk-cta-sub a{color:#e7e3f6;font-weight:600;text-decoration:underline}

/* ---------- Podstran: glava ---------- */
.mk-pagehead{padding:clamp(40px,6vw,64px) 0 clamp(14px,2vw,22px)}
.mk-pagehead h1{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.mk-pagehead .lead{color:var(--text-2);margin-top:12px;max-width:64ch;font-size:1rem}

/* ---------- Obrazec (demo) ---------- */
.mk-demo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,48px);align-items:start}
@media(max-width:860px){.mk-demo-grid{grid-template-columns:1fr}}
.mk-form-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow-md);padding:clamp(22px,3vw,32px)}
.mk-form{display:grid;gap:14px}
.mk-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--text-2)}
.mk-form input,.mk-form textarea{padding:11px 13px;border:1px solid var(--border);border-radius:10px;
  font-size:.95rem;font-family:inherit;font-weight:400;background:var(--surface);color:var(--text)}
.mk-form input:focus,.mk-form textarea:focus{outline:none;border-color:var(--violet-soft);box-shadow:0 0 0 3px rgba(107,91,201,.15)}
.mk-form textarea{min-height:110px;resize:vertical}
.mk-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.mk-form-row{grid-template-columns:1fr}}
.mk-form .btn-primary{margin-top:4px;padding:13px;font-size:.95rem}
.mk-form-note{font-size:.76rem;color:var(--muted);line-height:1.55}
/* honeypot: vizualno in za bralnike umaknjen, a prisoten v DOM za bote */
.mk-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;overflow:hidden}
.mk-aside .mk-card{margin-bottom:14px}
.mk-aside .mk-card:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border)}
.mk-next{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:mknext}
.mk-next li{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--text-2);line-height:1.55}
.mk-next li::before{counter-increment:mknext;content:counter(mknext);flex:0 0 auto;width:26px;height:26px;
  display:grid;place-items:center;border-radius:8px;font-family:var(--font-m);font-weight:600;font-size:.78rem;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--navy-deep)}
.mk-next li b{color:var(--text)}

/* ---------- O nas ---------- */
.mk-prose{max-width:70ch}
.mk-prose p{color:var(--text-2);font-size:.95rem;line-height:1.7;margin:0 0 14px}
.mk-prose p b{color:var(--text)}
.mk-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:8px}
.mk-contact{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:18px;font-size:.92rem}
.mk-contact a{font-weight:600}

/* ---------- Footer (vedno temen) ---------- */
.mk-foot{margin-top:clamp(40px,6vw,72px);color:#b8b2d8;
  background:linear-gradient(176deg,#1d1448 0%,#160d3a 55%,#100a2c 100%);
  border-top:1px solid rgba(255,255,255,.07)}
.mk-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px);
  padding:clamp(36px,5vw,56px) 0 clamp(22px,3vw,34px)}
@media(max-width:860px){.mk-foot-grid{grid-template-columns:1fr}}
.mk-foot .brand{display:flex;align-items:center;gap:11px;color:inherit}
.mk-foot .brand:hover{text-decoration:none}
.mk-foot .brand-mark{width:34px;height:34px}
.mk-foot .brand-name{color:#fff;font-size:1rem}
.mk-foot-about{font-size:.85rem;line-height:1.65;margin-top:14px;max-width:40ch}
.mk-foot h4{font-family:var(--font-d);font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin:4px 0 14px;font-weight:600}
.mk-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.88rem}
.mk-foot a{color:#b8b2d8;transition:color .2s}
.mk-foot a:hover{color:#fff;text-decoration:none}
.mk-foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;
  padding:16px 0 22px;border-top:1px solid rgba(255,255,255,.08);font-size:.76rem;color:#6f679a}
.mk-foot-bottom b{color:var(--gold)}

/* ---------- WCAG: zlata za tekst na svetlem ---------- */
.mk .kicker{color:var(--mk-gold-ink)}

/* ---------- Polni temni pasovi s šivi (F4) ----------
   CSS privzeto = trajno zaobljen vložen pas (fallback). GSAP (data-mk-seam,
   samo desktop+no-preference) scruba clip-path do full-bleed in nazaj. */
/* isolation: ekspliciten sklad za negativne z-index orbe (F9) — ne zanaša se
   le na stranski učinek clip-patha; blend rendrov znotraj pasu ne spremeni */
.mk-band-full{position:relative;isolation:isolate;color:#fff;margin:clamp(8px,1.5vw,18px) 0;
  background:linear-gradient(135deg,#1c1346 0%,#241858 45%,#150d39 100%);
  padding:clamp(40px,5.5vw,72px) 0;
  clip-path:inset(0 clamp(14px,4vw,56px) round var(--mk-radius-seam))}
.mk-band-full .kicker{color:var(--gold-bright)}
.mk-band-full h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:650;letter-spacing:-.02em;max-width:32ch}
.mk-band-full .lead{color:#c6bfe8;margin-top:10px;max-width:62ch}
.mk-band-full .mk-band-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.mk-band-full .mk-band-vis{position:relative;min-width:0}
.mk-band-full .mk-band-vis img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;
  mix-blend-mode:screen;opacity:.95}
@media(max-width:880px){.mk-band-full .mk-band-grid{grid-template-columns:1fr}}

/* ---------- Manifest scena (oversized tipografija + potujoči objekt) ---------- */
.mk-manifest-track{position:relative;color:#fff;background:var(--mk-band)}
.mk-manifest-stage{position:relative;min-height:86svh;display:flex;align-items:center;
  overflow:clip;background:var(--mk-band)}
@media(min-width:881px) and (prefers-reduced-motion:no-preference){
  .js .mk-manifest-track{height:230vh;height:230lvh}
  .js .mk-manifest-stage{position:sticky;top:0;min-height:0;height:100vh;height:100svh}
}
.mk-manifest-obj{position:absolute;right:4%;top:10%;width:min(36vw,460px);aspect-ratio:1;
  pointer-events:none;mix-blend-mode:screen;opacity:.95;will-change:transform;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 70%)}
.mk-manifest-obj picture{display:block;width:100%;height:100%}
.mk-manifest-obj img{width:100%;height:100%;object-fit:cover}
.mk-manifest-obj video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-manifest-in{position:relative;z-index:2;max-width:880px}
.mk-display{font-family:var(--font-d);font-size:var(--mk-display);font-weight:300;
  letter-spacing:-.03em;line-height:1.02;color:#fff;margin:14px 0 0}
.mk-display b{font-weight:550;background:linear-gradient(100deg,var(--gold-bright),#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mk-manifest-sub{color:#c6bfe8;font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.65;
  max-width:56ch;margin-top:22px}
.mk-manifest-sub b{color:#fff}
@media(max-width:880px){.mk-manifest-obj{right:-14%;top:4%;width:64vw;opacity:.55}}

/* ---------- Marquee virov (scroll-velocity aware na desktopu) ---------- */
.mk-marquee{overflow:clip;border-block:1px solid var(--border);background:var(--surface);padding:13px 0}
.mk-marquee-track{display:flex;width:max-content;will-change:transform;
  animation:mkMarquee 32s linear infinite}
.mk-marquee-seq{display:flex;align-items:center;gap:28px;padding-right:28px;
  font-family:var(--font-m);font-size:.78rem;font-weight:500;letter-spacing:.14em;
  color:var(--muted);white-space:nowrap} /* brez uppercase — 'eNaročanje' je brand zapis */
.mk-marquee-seq i{font-style:normal;color:var(--mk-gold-ink)}
@keyframes mkMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mk-marquee-track{animation:none}}
.mk-marquee--gsap .mk-marquee-track{animation:none}

/* ---------- Konverzijski stack (_mk_stack.html) ---------- */
.mk-diffs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 26px}
.mk-diffs li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--text-2);line-height:1.55}
.mk-diffs li b{color:var(--text)}
.mk-diffs svg{width:17px;height:17px;flex:0 0 auto;color:var(--high);margin-top:2px}
a.mk-stat{color:inherit;display:block;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
a.mk-stat:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--violet-soft) 50%,var(--border))}
.mk-stats-src{margin-top:14px;font-size:.8rem;color:var(--muted)}
.mk-stats-src a{font-weight:600}

/* FAQ: nativni <details>, animiran kjer brskalnik zna (interpolate-size) */
.mk-faq{border-top:1px solid var(--border)}
.mk-faq details{border-bottom:1px solid var(--border)}
.mk-faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  cursor:pointer;list-style:none;padding:16px 2px;font-weight:600;font-size:.95rem;color:var(--text)}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:8px;color:var(--mk-gold-ink);font-weight:500;
  transition:transform .3s var(--ease),background .3s}
.mk-faq details[open] summary::after{content:"–";background:var(--surface-2)}
.mk-faq .mk-faq-body{padding:0 2px 18px;color:var(--text-2);font-size:.9rem;line-height:1.65;max-width:72ch}
.mk-faq .mk-faq-body a{font-weight:600}
@supports (interpolate-size: allow-keywords){
  .mk-faq{interpolate-size:allow-keywords}
  .mk-faq details::details-content{height:0;overflow:clip;
    transition:height .35s var(--ease),content-visibility .35s allow-discrete}
  .mk-faq details[open]::details-content{height:auto}
}

/* CTA pas v stacku (reuse mk-band-full + centriran content) */
.mk-cta-full .mk-cta-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mk-cta-full h2{max-width:26ch;font-size:clamp(1.5rem,3vw,2.2rem)}
.mk-cta-full p{color:#c6bfe8;max-width:56ch;font-size:.96rem}
.mk-cta-full .btn-primary{margin-top:16px;background:linear-gradient(120deg,var(--gold-bright),var(--gold));color:var(--navy-deep);
  box-shadow:0 6px 22px -6px rgba(201,169,97,.65)}
.mk-cta-full .btn-primary:hover{box-shadow:var(--glow-gold)}
.mk-cta-full .mk-cta-sub{font-size:.8rem;color:#a99fd6;margin-top:8px}
.mk-cta-full .mk-cta-sub a{color:#e7e3f6;font-weight:600;text-decoration:underline}

/* Demo: forma kot junak na temnem pasu */
.mk-demo-band .mk-form-card{box-shadow:0 36px 110px -30px rgba(107,91,201,.65),0 0 0 1px rgba(201,169,97,.18),var(--shadow-lg)}
.mk-demo-band .mk-aside .mk-card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13);box-shadow:none}
.mk-demo-band .mk-aside .mk-card:hover{border-color:rgba(255,255,255,.13)}
.mk-demo-band .mk-aside h3{color:#fff}
.mk-demo-band .mk-aside p,.mk-demo-band .mk-next li{color:#c6bfe8}
.mk-demo-band .mk-next li b{color:#fff}
.mk-demo-band .mk-aside .btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
.mk-demo-band .mk-aside .btn-ghost:hover{background:rgba(255,255,255,.14)}

/* Gumb s klonirano puščico (Premier mikrointerakcija, čisti CSS) */
.mk-btn-arr{position:relative}
.mk-btn-arr .arrs{display:inline-grid;width:1em;height:1em;overflow:hidden;vertical-align:-.12em;margin-left:8px}
.mk-btn-arr .arrs svg{grid-area:1/1;width:1em;height:1em;transition:transform .38s var(--ease)}
.mk-btn-arr .arrs svg:last-child{transform:translate(-120%,120%)}
.mk-btn-arr:hover .arrs svg:first-child{transform:translate(120%,-120%)}
.mk-btn-arr:hover .arrs svg:last-child{transform:translate(0,0)}
@media(prefers-reduced-motion:reduce){.mk-btn-arr .arrs svg{transition:none}}

/* ---------- Parallax dekor (F9) ----------
   [data-mk-parallax="<globina>"] premika SAMO marketing-motion.js (desktop +
   no-preference, scrub). CSS privzeto = statična dokončana kompozicija —
   mobilni/no-JS/reduced-motion vidijo dekor pri miru (fallback-first). */
@media(min-width:881px) and (prefers-reduced-motion:no-preference){
  .js .mk [data-mk-parallax]{will-change:transform}
}
/* mehka sijaja v polnih temnih pasovih — različni globini = slojevitost.
   Pod vsebino prek NEGATIVNEGA z-indexa znotraj sklada pasu (isolation na
   .mk-band-full) — pozitiven z-index na .mk-wrap bi ustvaril stacking context
   in izoliral mix-blend-mode interludij rendrov (kontrakt 6, en nivo višje) */
.mk-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(52px)}
.mk-orb.gold{width:380px;height:380px;top:-120px;left:7%;
  background:radial-gradient(circle,rgba(201,169,97,.38),transparent 62%)}
.mk-orb.violet{width:440px;height:440px;bottom:-160px;right:5%;
  background:radial-gradient(circle,rgba(107,91,201,.5),transparent 62%)}
/* interludij <picture> mora biti block: inline strut bi bil degeneriran
   ScrollTrigger trigger (~17px pas ob dnu slike → zamaknjeno okno gibanja);
   parallax kljuka ostane na <img> (kontrakt 6), trigger = pravokotnik slike */
.mk-band-full .mk-band-vis picture{display:block}
/* glava podstrani: bled brand vozel za naslovom (parallax ozadje) */
.mk-pagehead{position:relative;overflow:clip}
.mk-pagehead .mk-wrap{position:relative;z-index:1}
.mk-ph-orna{position:absolute;top:-14%;right:-1.5%;width:clamp(200px,24vw,330px);aspect-ratio:1;
  color:var(--violet);opacity:.08;pointer-events:none}
.mk-ph-orna svg{width:100%;height:100%;display:block}
@media(max-width:560px){.mk-ph-orna{display:none}}

/* ---------- Odzivnost ---------- */
@media(max-width:1020px){
  .mk-stats{grid-template-columns:repeat(2,1fr)}
  .mk-steps{grid-template-columns:1fr}
}
@media(max-width:560px){
  .mk-stats{grid-template-columns:1fr}
}
}