/* weblj dash — javne strani (domov, navodila). Uporabljata tokens.css in
 * base.css za barve/tipografijo/grain; ta datoteka doda samo postavitev,
 * ločeno od components.css, da se nikoli ne prelije v app shell — čeprav si
 * nekaj razredov (.card, .badge, mono) namenoma sposoja, da je "posnetek
 * produkta" v heroju dejansko zgrajen iz istih gradnikov kot prava konzola,
 * ne iz ponarejene ilustracije. */

.mkt-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid transparent;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mkt-nav.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 12px 28px oklch(0 0 0 / 0.28);
  background: color-mix(in oklch, var(--bg) 94%, transparent);
}

.mkt-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.mkt-brand-mark {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--grad-brand);
  background-size: 220% 220%;
  animation: brand-drift 7s ease-in-out infinite;
}

.mkt-nav-links { display: flex; align-items: center; gap: var(--sp-5); }
.mkt-link { color: var(--text-muted); font-size: 14px; font-weight: 500; position: relative; }
.mkt-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
  background: var(--primary-text); transition: right var(--dur) var(--ease);
}
.mkt-link:hover { color: var(--text); text-decoration: none; }
.mkt-link:hover::after { right: 0; }

.mkt-shell { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-6); }
.mkt-prose { max-width: 700px; margin: 0 auto; padding: 0 var(--sp-6); }

/* ---- hero: asymmetric, not centered — copy on one side, a real fragment of
   the product on the other, instead of a stock illustration or blob. ---- */
.mkt-hero {
  padding: 84px 0 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.mkt-hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.mkt-hero-copy .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 0 oklch(0.78 0.16 158 / .5);
  animation: mkt-pulse 2.2s ease-out infinite;
}
.mkt-hero-copy h1 {
  font-size: clamp(34px, 4.2vw, 50px); line-height: 1.08; margin-top: var(--sp-3);
  max-width: 14ch;
}
.mkt-hero-copy h1 em {
  font-style: normal; color: var(--primary-text);
  background: linear-gradient(180deg, transparent 62%, oklch(0.62 0.24 265 / 0.28) 62%);
}
.mkt-hero-copy p.lede { font-size: 17px; color: var(--text-muted); max-width: 46ch; margin-top: var(--sp-4); }
.mkt-cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.mkt-hero-copy .eyebrow, .mkt-hero-copy h1, .mkt-hero-copy p.lede, .mkt-hero-copy .mkt-cta {
  animation: mkt-fade-up .7s var(--ease) both;
}
.mkt-hero-copy h1 { animation-delay: .08s; }
.mkt-hero-copy p.lede { animation-delay: .16s; }
.mkt-hero-copy .mkt-cta { animation-delay: .24s; }

/* The "product shot": built from the same .card/.badge/mono vocabulary as
   the real app, at a slight tilt, so it reads as a fragment of the actual
   tool rather than a generic dashboard illustration. */
.mkt-mockup-wrap { position: relative; perspective: 1400px; animation: mkt-fade-up .8s .3s var(--ease) both; }
.mkt-mockup {
  transform: rotateY(-6deg) rotateX(2deg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease);
}
.mkt-mockup-wrap:hover .mkt-mockup { transform: rotateY(-2deg) rotateX(0.5deg) translateY(-3px); }
.mkt-mockup__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--n-900); border-bottom: 1px solid var(--border);
}
.mkt-mockup__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--n-300); }
.mkt-mockup__bar em {
  font-style: normal; margin-left: 8px; color: var(--text-faint); font: 600 11px var(--font-mono);
}

/* Body = the panel's own miniature of the app shell: an icon rail on the
   left, content on the right, mirroring the real sidebar + .content split. */
.mkt-mockup__body { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.mkt-mockup__rail {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 0; border-right: 1px solid var(--border); background: oklch(0 0 0 / 0.12);
}
.mkt-mockup__rail i { width: 16px; height: 4px; border-radius: 2px; background: var(--n-300); opacity: .55; }
/* The active rail item carries the brand gradient, same as .nav-item.active. */
.mkt-mockup__rail i.is-active { background: var(--grad-brand); opacity: 1; width: 20px; }

.mkt-mockup__main { padding: 15px 16px 14px; min-width: 0; }
.mkt-mockup__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.mkt-mockup__head h4 { margin: 0; font-size: 13px; }
.mkt-mockup__pill {
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--border);
  color: var(--text-faint); font: 600 9px var(--font-mono);
}

.mkt-mockup__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.mkt-mockup__tiles > div {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: oklch(1 0 0 / 0.02); min-width: 0;
}
.mkt-mockup__tiles span { display: block; color: var(--text-faint); font-size: 9px; font-weight: 600; }
/* Tabular numerals so the three readings line up like an instrument panel —
   the same rule the real .stat-card__value follows. */
.mkt-mockup__tiles strong {
  display: block; margin: 2px 0 3px; font-family: var(--font-mono);
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.mkt-mockup__tiles i { font-style: normal; font: 700 9px var(--font-mono); }
.mkt-mockup__tiles i.up { color: var(--success); }
.mkt-mockup__tiles i.ok { color: var(--text-faint); }

.mkt-mockup__chart { display: block; width: 100%; height: auto; }
.mkt-mockup__live {
  display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--border); color: var(--text-faint); font: 600 10px var(--font-mono);
}
.mkt-mockup__live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 oklch(0.78 0.16 158 / .5); animation: mkt-pulse 2.2s ease-out infinite;
}

.mkt-mockup-caption { margin-top: 14px; color: var(--text-faint); font-size: 12px; text-align: center; }

/* ---- chapters: "Kaj je notri" as two numbered spreads instead of a
   four-icon feature grid — the number is oversized and ghosted, the way a
   print feature spread marks sections, not a rounded-square icon tile. ---- */
.mkt-chapters { border-top: 1px solid var(--border); }
.mkt-chapter {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 28px; padding: 44px 0; border-bottom: 1px solid var(--border);
}
.mkt-chapter__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--text-faint); opacity: 0.4; letter-spacing: -0.02em;
}
.mkt-chapter__intro { grid-column: 2; max-width: 62ch; margin-bottom: var(--sp-4); }
.mkt-chapter__intro h3 { font-size: 22px; margin-bottom: 4px; }
.mkt-chapter__intro p { margin: 0; }
.mkt-chapter__num, .mkt-chapter__intro { grid-row: 1; }
.mkt-list { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.mkt-list li {
  padding-left: var(--sp-5); position: relative; color: var(--text-muted); font-size: 14px;
  transition: color var(--dur-fast) var(--ease);
}
.mkt-list li::before { content: "→"; position: absolute; left: 0; color: var(--primary-text); transition: transform var(--dur-fast) var(--ease); }
.mkt-list li:hover::before { transform: translateX(3px); }
.mkt-list li strong { color: var(--text); transition: color var(--dur-fast) var(--ease); }
.mkt-list li:hover strong { color: var(--primary-text); }
.mkt-list li[data-live]::before {
  content: ""; top: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 0 oklch(0.78 0.16 158 / .5);
  animation: mkt-pulse 2.2s ease-out infinite;
}
.mkt-list li[data-live]:hover::before { transform: none; }

/* ---- how it works ---- */
.mkt-section { padding: 56px 0; }
.mkt-section h2 { font-size: 22px; margin-bottom: var(--sp-1); }
.mkt-section > p { max-width: 60ch; color: var(--text-muted); }

.mkt-steps { counter-reset: step; list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mkt-steps li { position: relative; padding: 22px 0 22px 52px; border-top: 1px solid var(--border); }
.mkt-steps li:first-child { border-top: none; }
.mkt-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 20px;
  color: var(--text-faint); font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mkt-steps li:hover::before { border-color: var(--primary-text); color: var(--primary-text); transform: scale(1.05); }
.mkt-steps li strong { display: block; color: var(--text); margin-bottom: 2px; }

.mkt-scroll-cue {
  display: inline-flex; margin-top: 44px; color: var(--text-faint);
  animation: mkt-fade-up .7s var(--ease) .4s both;
}
.mkt-scroll-cue svg { animation: mkt-bob 1.8s ease-in-out infinite; }
.mkt-scroll-cue:hover { color: var(--text-muted); }

.mkt-footer {
  padding: 40px 0 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  border-top: 1px solid var(--border);
}
.mkt-footer small { color: var(--text-faint); }

/* ---- scroll-reveal (JS toggles .is-visible via IntersectionObserver) ----
   The hidden state is deliberately scoped to .js. Only marketing.js ever adds
   .is-visible, so an unscoped `opacity: 0` here means six real sections of the
   page — two chapters, a heading and three steps — are permanently invisible
   to anyone whose scripting is off or whose marketing.js failed to load.
   index.html's head sets .js and removes it again if the script never checks
   in, so the content survives both cases. */
.js .mkt-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js .mkt-reveal.is-visible { opacity: 1; transform: none; }

/* ---- shared micro-interactions ---- */
.mkt-nav .btn, .mkt-cta .btn, .mkt-footer .btn { transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mkt-nav .btn:hover, .mkt-cta .btn:hover, .mkt-footer .btn:hover { transform: translateY(-2px); }
.mkt-cta .btn-primary:hover { box-shadow: var(--shadow-lift); }

@keyframes mkt-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes mkt-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.78 0.16 158 / .5); }
  70%, 100% { box-shadow: 0 0 0 7px oklch(0.78 0.16 158 / 0); }
}
@keyframes mkt-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---- navodila (docs) ---- */
.mkt-doc h2 { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.mkt-doc h2:first-of-type { margin-top: var(--sp-6); padding-top: 0; border-top: none; }
.mkt-doc h3 { margin-top: var(--sp-5); }
.mkt-doc ul, .mkt-doc ol { color: var(--text-muted); padding-left: 1.3em; }
.mkt-doc li { margin-bottom: var(--sp-2); }
.mkt-doc code { font-family: var(--font-mono); font-size: 13px; background: var(--n-100); padding: 1px 6px; border-radius: 5px; color: var(--text); }

/* Small phones: the nav carries a wordmark, a prose link and a button — more
   than 320px allows, so the wordmark and link each folded onto two lines.
   Drop the text link rather than shrink everything: on the homepage the hero
   already has a "Preberi navodila" button and the footer repeats it, and on
   the docs page the wordmark itself links home. That leaves the wordmark and
   the one action, which fit whole. */
@media (max-width: 460px) {
  .mkt-nav { padding: var(--sp-3) var(--sp-4); }
  .mkt-brand { white-space: nowrap; font-size: 15px; }
  .mkt-link { display: none; }
  .mkt-shell, .mkt-prose { padding: 0 var(--sp-4); }
}

@media (max-width: 860px) {
  .mkt-hero { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 40px; }
  .mkt-mockup { transform: none; }
  .mkt-mockup-wrap:hover .mkt-mockup { transform: translateY(-3px); }
  .mkt-hero-copy h1 { font-size: 34px; max-width: none; }
  .mkt-chapter { grid-template-columns: 1fr; }
  .mkt-chapter__num { font-size: 40px; }
  .mkt-chapter__intro, .mkt-list { grid-column: 1; }
  .mkt-nav-links { gap: var(--sp-3); }
}