/* ═══════════════════════════════════════════════════════════════════
   FA LANDING V3 — Stripe-inspired sections, Bento grid, Enterprise stats
   Layered on top of fa-v2.css. Only adds new components; doesn't
   override existing ones.
   ═══════════════════════════════════════════════════════════════════ */
/* ─── 1. NOTION-STYLE PROOF STRIP (replaces logo strip) ────────── */




.fa-proof__inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.fa-proof__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--c-ink-8);
}

.fa-proof__mark svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

.fa-proof__mark-name {
  line-height: 1;
}

/* "17 let zaupanja" — wide diagonal fade from FA purple to MK green.
   Specificity bumped (.fa-proof__claim .fa-proof__years) so the generic
   .fa-proof__claim strong rule below does NOT override it. */


.fa-proof__claim .fa-proof__years {
  background: linear-gradient(-145deg,
      var(--c-purple-6) -10%,
      var(--c-purple-7) 25%,
      #80BB64 75%,
      #509141 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}

.fa-proof__claim {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-ink-8);
  line-height: 1.4;
}

/* Generic strong-bolding inside the claim. The headline "17 let zaupanja"
   carries .fa-proof__years and gets its own gradient styling above. */


.fa-proof__claim strong {
  font-weight: 700;
}

.fa-proof__sub {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--c-ink-6);
  letter-spacing: 0.005em;
}

/* ─── 2. ENTERPRISE STATS — full-width band, 4 metrics ─────────── */




.fa-stats {
  position: relative;
  z-index: 1;
  padding: var(--sp-7) 0 var(--sp-7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
}

.fa-stats__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  /* hairline between cells */
  background: linear-gradient(90deg,
      transparent 4%,
      rgba(189, 85, 215, 0.20) 18%,
      rgba(189, 85, 215, 0.20) 82%,
      transparent 96%);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}

.fa-stats__cell {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  position: relative;
  transition: transform 0.4s var(--ease-out), background 0.4s;
}

.fa-stats__cell:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.92);
}

.fa-stats__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #4a1a59 0%, var(--c-purple-5) 60%, var(--c-purple-6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fa-stats__label {
  font-size: 0.85rem;
  color: var(--c-ink-6);
  margin-top: 8px;
  line-height: 1.35;
  letter-spacing: 0.005em;
}

.fa-stats__sublabel {
  display: block;
  font-size: 0.72rem;
  color: var(--c-ink-5);
  margin-top: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Soft purple ambient highlight following hover */


.fa-stats__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(189, 85, 215, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.fa-stats__cell:hover::before {
  opacity: 1;
}

@media (max-width: 880px) {
  .fa-stats__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .fa-stats__inner {
    grid-template-columns: 1fr;
  }
}

/* ─── 3. PILLARS — 3 main product stebri (Stripe-style summary section) ──── */
/* Section frame: lives AFTER bento on plain white bg, acts as the
   distillation/recap. A subtle top stripe separates from the previous
   bento card row. */





.fa-pillars-section {
  position: relative;
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
  background: #ffffff;
}

.fa-pillars-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(140px, 30%);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-purple-5), transparent);
  opacity: 0.55;
  border-radius: 1px;
}

.fa-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.fa-pillar {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: #fff;
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-lg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s;
  overflow: hidden;
}

.fa-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--c-purple-5), var(--c-purple-7));
  opacity: 0;
  transition: opacity 0.35s;
}

.fa-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(189, 85, 215, 0.35);
  box-shadow: 0 18px 36px -16px rgba(126, 47, 149, 0.20), 0 4px 10px rgba(0, 0, 0, 0.04);
}

.fa-pillar:hover::before {
  opacity: 1;
}

.fa-pillar__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  /* purple-6 namesto purple-5: 5.3:1 kontrast na beli (WCAG AA), purple-5 je 3.9:1 */
  color: var(--c-purple-6);
  margin-bottom: var(--sp-3);
}

.fa-pillar__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-purple-1), var(--c-purple-2));
  display: grid;
  place-items: center;
  color: var(--c-purple-7);
  margin-bottom: var(--sp-4);
}

.fa-pillar__icon svg {
  width: 22px;
  height: 22px;
}

.fa-pillar h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin-bottom: 8px;
  color: var(--c-ink-9);
}

.fa-pillar p {
  font-size: 0.92rem;
  color: var(--c-ink-6);
  line-height: 1.55;
}

.fa-pillar__feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-4);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-purple-7);
  letter-spacing: 0.01em;
}

.fa-pillar__feature::before {
  content: "→";
  font-weight: 600;
  transition: transform 0.3s;
}

.fa-pillar:hover .fa-pillar__feature::before {
  transform: translateX(3px);
}

/* Migracija: 4 enakovredne kartice prehoda */


.fa-pillars--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Benefits checklist pod karticami */


.fa-migrate__benefits {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3) var(--sp-5);
}

.fa-migrate__benefits li {
  position: relative;
  padding-left: 30px;
  font-size: 0.9rem;
  color: var(--c-ink-7);
  line-height: 1.45;
}

.fa-migrate__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-purple-1), var(--c-purple-2));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e2f95' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.fa-migrate__cta {
  margin-top: var(--sp-6);
  text-align: center;
}

@media (max-width: 980px) {
  .fa-pillars--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 880px) {
  .fa-pillars {
    grid-template-columns: 1fr;
  }

  .fa-migrate__benefits {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .fa-pillars--4 {
    grid-template-columns: 1fr;
  }

  .fa-migrate__benefits {
    grid-template-columns: 1fr;
  }
}

/* ─── 4. BENTO GRID — asymmetric features mosaic ───────────────── */




.fa-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* Integracijske kartice (channel-card): fiksna okvirna skatla (130x28),
   object-fit:contain znotraj nje ohrani naravno razmerje logotipa (namesto
   raztega na fiksen width/height iz HTML atributov) - potrebno predvsem za
   zelo "vodoravne" logotipe (npr. Temu, Mimovrste), ki bi se sicer stisnili. */
.channel-card__logo {
  width: 130px;
  height: 28px;
  object-fit: contain;
  object-position: left center;
}

.fa-bento__cell {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5);
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    border-color 0.35s;
  isolation: isolate;
}

.fa-bento__cell:hover {
  transform: translateY(-3px);
  border-color: rgba(189, 85, 215, 0.35);
  box-shadow: 0 22px 44px -20px rgba(126, 47, 149, 0.22), 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* Spans */


.fa-bento__cell--hero {
  grid-column: span 2;
  grid-row: span 2;
}

/* Subtle FA gradient watermark in each card */


.fa-bento__cell::after {
  content: "";
  position: absolute;
  right: -20%;
  top: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(189, 85, 215, 0.07) 0%, transparent 65%);
  z-index: -1;
  transition: opacity 0.4s;
}

.fa-bento__cell:hover::after {
  opacity: 1.5;
}

.fa-bento__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-purple-1) 0%, var(--c-purple-2) 100%);
  display: grid;
  place-items: center;
  color: var(--c-purple-7);
  margin-bottom: var(--sp-3);
}

.fa-bento__icon svg {
  width: 20px;
  height: 20px;
}

/* Unified title + lede sizing across the entire bento — single
   visual rhythm, no per-cell jumps. Hero/integ used to scale up;
   we removed those overrides to keep every card on the same beat. */


.fa-bento__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--c-ink-9);
  margin-bottom: 6px;
}

.fa-bento__lede {
  font-size: 0.88rem;
  color: var(--c-ink-6);
  line-height: 1.55;
}

/* HERO Bento card — animated warehouse path visual */


.fa-bento__visual {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #fbf5ff 0%, #f4e5fb 100%);
  border: 1px solid rgba(189, 85, 215, 0.20);
  position: relative;
  overflow: hidden;
}

.fa-bento__visual svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Integrated layout for the warehouse logic bento cell (2x1 wide) */


@media (min-width: 641px) {
  .fa-bento__cell.fa-bento__cell--integ {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: var(--sp-4);
    align-items: center;
  }

  .fa-bento__cell.fa-bento__cell--integ .fa-bento__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .fa-bento__cell.fa-bento__cell--integ .fa-bento__visual {
    margin-top: 0;
    /* Scale from the left edge — grows right & clips at card border-radius */
    transform: scale(1.9) translateY(0%);
    transform-origin: left center;
  }

  .fa-bento__cell.fa-bento__cell--integ:hover .fa-bento__visual {
    transform: scale(1.9) translateY(0%);
  }
}

.fa-bento__cell.fa-bento__cell--integ .fa-bento__visual {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  overflow: visible;
  width: 100%;
}

/* Premium KPI Badge/Stat block inside the cell info */


.fa-bento__kpi-stat {
  margin-top: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 16px 8px 4px;
  position: relative;
  width: fit-content;
}

/* Blobby gradient blob behind the KPI — purely decorative */


.fa-bento__kpi-stat::before {
  content: "";
  position: absolute;
  inset: -14px -20px -14px -12px;
  background: rgba(189, 85, 215, 0.22);
  border-radius: 50%;
  filter: blur(58px);
  z-index: 0;
  pointer-events: none;
}

.fa-bento__kpi-stat>* {
  position: relative;
  z-index: 1;
}

.fa-bento__kpi-val {
  font-size: 1.35rem;
  font-weight: 850;
  color: var(--c-purple-7);
  line-height: 1;
}

.fa-bento__kpi-lbl {
  font-size: 0.8rem;
  color: var(--c-ink-6);
  font-weight: 600;
  line-height: 1.25;
}

.fa-bento__visual .fa-path-bad,
.fa-bento__visual .fa-path-good {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}

.fa-bento__visual .fa-path-bad {
  stroke: rgba(238, 49, 38, 0.25);
  stroke-width: 1.8;
  animation: fa-trace 7s ease-in-out infinite;
}

.fa-bento__visual .fa-path-good {
  stroke: var(--c-purple-6);
  stroke-width: 2.4;
  animation: fa-trace 7s ease-in-out infinite 0.6s;
}

@keyframes fa-trace {
  0% {
    stroke-dashoffset: 1500;
    opacity: 1;
  }

  50% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 1500;
    opacity: 0.2;
  }
}

.fa-bento__visual .fa-shelf {
  fill: #e8d6f3;
}

.fa-bento__visual .fa-shelf--hot {
  fill: var(--c-purple-3);
}

.fa-bento__visual .fa-pin {
  fill: var(--c-purple-7);
  animation: fa-pin-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes fa-pin-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.95;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

@keyframes fa-barcode-scan {
  0% {
    left: 0;
    opacity: 0.9;
  }

  50% {
    left: 100%;
    opacity: 1;
  }

  51% {
    opacity: 0;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Bento responsive */


@media (max-width: 1000px) {
  .fa-bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .fa-bento__cell--hero {
    grid-column: span 2;
    grid-row: span 2;
  }

  .fa-bento__cell--wide {
    grid-column: span 2;
  }

  .fa-bento__cell--tall {
    grid-row: span 1;
  }
}

@media (max-width: 640px) {
  .fa-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .fa-bento__cell--hero {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@keyframes fa-flow-progress {
  0% {
    width: 0;
  }

  100% {
    width: 90%;
  }
}

/* ─── 7. TRUST GRID — "Built for scale" pillars ────────────────── */




.fa-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.fa-trust__card {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(189, 85, 215, 0.05), transparent 60%),
    #fff;
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-lg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s;
}

.fa-trust__card:hover {
  transform: translateY(-3px);
  border-color: rgba(189, 85, 215, 0.35);
  box-shadow: 0 18px 36px -16px rgba(126, 47, 149, 0.18);
}

.fa-trust__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-purple-1), var(--c-purple-2));
  display: grid;
  place-items: center;
  color: var(--c-purple-7);
  margin-bottom: var(--sp-4);
  position: relative;
}

.fa-trust__icon svg {
  width: 24px;
  height: 24px;
}

.fa-trust__icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  border: 1px solid rgba(189, 85, 215, 0.30);
  opacity: 0;
  transition: opacity 0.35s;
}

.fa-trust__card:hover .fa-trust__icon::after {
  opacity: 1;
}

.fa-trust__card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin-bottom: 8px;
}

.fa-trust__card p {
  font-size: 0.9rem;
  color: var(--c-ink-6);
  line-height: 1.55;
}

.fa-trust__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--sp-4);
  padding: 4px 12px;
  background: var(--c-purple-1);
  border: 1px solid rgba(189, 85, 215, 0.22);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-purple-7);
}

.fa-trust__metric b {
  font-weight: 700;
}

@media (max-width: 880px) {
  .fa-trust {
    grid-template-columns: 1fr;
  }
}

/* ─── 9. CTA — final, premium gradient panel ───────────────────── */




.fa-cta-section {
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(189, 85, 215, 0.16) 0%, transparent 60%),
    radial-gradient(60% 40% at 0% 100%, rgba(126, 47, 149, 0.10) 0%, transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #faf0ff 100%);
  border: 1px solid rgba(189, 85, 215, 0.22);
  position: relative;
  overflow: hidden;
}

.fa-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(189, 85, 215, 0.02) 0px, rgba(189, 85, 215, 0.02) 1px,
      transparent 1px, transparent 16px);
  pointer-events: none;
}

.fa-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.fa-cta h2 {
  margin-bottom: var(--sp-3);
}

.fa-cta__lede {
  max-width: 560px;
  margin: 0 auto var(--sp-5);
  color: var(--c-ink-6);
  font-size: 1.05rem;
  line-height: 1.55;
}

.fa-cta__perks {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  font-size: 0.82rem;
  color: var(--c-ink-6);
}

.fa-cta__perks span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fa-cta__perks span::before {
  content: "✓";
  color: var(--c-purple-7);
  font-weight: 700;
}

/* ─── 10. STAT COUNT-UP entrance for fa-stats ─────────────────── */




.fa-stats__num[data-count-target] {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.6s, translate 0.6s;
}

.fa-stats__num.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ─── 11. TOAST NOTIFICATIONS (FA hero overlay) ────────────────── */




.toast-stack {
  position: absolute;
  top: 80px;
  right: -12px;
  width: 280px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

/* Na mobilu/tablici je mockup preozek — lebdeča obvestila (280px, right:-12px)
   bi prekrila vsebino in se prelila čez rob. So dekorativna, zato jih skrijemo;
   mockup ostane čist in berljiv. (Enako načelo kot pri prefers-reduced-motion.) */
@media (max-width: 768px) {
  .toast-stack {
    display: none;
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--c-ink-8, #333);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  animation: fa-toast-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: auto;
}

.toast.is-exiting {
  animation: fa-toast-out 0.35s ease-in forwards;
}

.toast__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-weight: 600;
  font-size: 11px;
  color: var(--c-ink-8, #333);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast__meta {
  font-size: 10px;
  color: var(--c-ink-5, #999);
  margin-top: 1px;
}

@keyframes fa-toast-in {
  from {
    opacity: 0;
    translate: 40px 0;
    scale: 0.95;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes fa-toast-out {
  from {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  to {
    opacity: 0;
    translate: 40px 0;
    scale: 0.95;
  }
}

/* ─── 12. FA MOCKUP entrance polish (mirrors om-mockup-in) ─────── */




.fa-mockup-in {
  z-index: 1;
  position: relative;
}

/* ─── 13. FA NAV — Notion-style mega menu icons ────────────────
   Light pastel background + saturated outline icon (vs. the default
   strong-bg + white-icon used elsewhere on the marketing site).
   Inline styles in nav.js FA template set `background: <pastel>` and
   `color: <saturated>`; we add stroke crispness + subtle hairline
   border so the icon reads as a small "card" on light backgrounds. */




[data-brand="fa"] .mega__item-icon {
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

[data-brand="fa"] .mega__item-icon svg {
  stroke-width: 1.8;
}

/* Tiny upgrade on hover — the icon "lifts" slightly */


[data-brand="fa"] .mega__item:hover .mega__item-icon {
  border-color: rgba(189, 85, 215, 0.18);
}

/* ─── 15. BENTO MINI-VISUALS — bring the 3 "bare" standard cells up
       to the richness of hero/billing/scan. Shared light-purple panel. ── */




.fa-bento__mini {
  margin-top: var(--sp-4);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #fbf5ff 0%, #f4e5fb 100%);
  border: 1px solid rgba(189, 85, 215, 0.18);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}

@keyframes fa-print-sweep {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(240px);
    opacity: 0;
  }
}

/* 15b. Shipping-label fan — 7 labels stacked, rightmost on top, fills bottom 2/3 of card */


.fa-sl-fan {
  margin-top: var(--sp-5);
  position: relative;
  height: 150px;
  perspective: 1800px;
}

.fa-sl-fan::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-5));
  right: calc(-1 * var(--sp-5));
  bottom: calc(-1 * var(--sp-5));
  height: calc(120px + var(--sp-5));
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(252, 252, 255, 0.10) 30%,
      rgba(252, 252, 255, 0.42) 65%,
      rgba(252, 252, 255, 0.72) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 40%, #000 100%);
  pointer-events: none;
  z-index: 10;
}

/* Background + inset frame span the WHOLE bento cell, not just the fan area */


.fa-bento__cell--globe {
  background:
    /* Strong bottom vignette */
    radial-gradient(ellipse 110% 55% at 50% 105%, rgba(126, 47, 149, 0.42) 0%, transparent 78%),
    /* Warm pink-white light from the right where front label rests */
    radial-gradient(ellipse 45% 55% at 78% 75%, rgba(255, 220, 240, 0.75) 0%, transparent 65%),
    /* Stage wash — top brighter, bottom deeper purple */
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(189, 85, 215, 0.04) 45%, rgba(126, 47, 149, 0.22) 100%),
    #fff;
}

.fa-sl {
  /* --i is the index 0..6; 6 is the topmost/rightmost label */
  --depth: calc(6 - var(--i));
  /* 0 (front/right) .. 6 (back/left) */
  --rot: calc(var(--depth) * -2.6deg);
  /* 0deg (right) .. -15.6deg (left) */
  --x: calc(var(--i) * 72px - 216px);
  /* -216px (left) .. +216px (right) */
  --y: calc(var(--depth) * 4px);
  /* linear 0..24px downward stagger */

  position: absolute;
  left: 50%;
  bottom: -136px;
  /* Tall labels that bleed off the bottom edge of the cell */
  width: 342px;
  height: 260px;
  margin-left: -171px;
  /* center the 342px-wide card on left:50% */
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  padding: 8px 9px 7px;
  font-family: var(--font-mono);
  color: #111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 14px -6px rgba(0, 0, 0, 0.20),
    0 1px 3px rgba(0, 0, 0, 0.08);
  transform-origin: 50% 50%;
  /* pivot at center so hover-scale doesn't fling the label */
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  z-index: calc(var(--i) + 1);
  transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), box-shadow 0.35s ease;
  cursor: pointer;
  /* Auto-cycle: only the remaining 5 labels animate (5 labels × 6s window = 30s cycle).
     We subtract 2 from the index so the 3rd label (--i: 2) starts immediately at 0s. */
  animation: fa-sl-auto-lift 30s cubic-bezier(.45, .05, .55, .95) infinite;
  animation-delay: calc((var(--i) - 2) * 6s);
}

/* First two labels (index 0 and 1) are static and excluded from auto-lift cycle */


.fa-sl-fan .fa-sl:nth-child(1),
.fa-sl-fan .fa-sl:nth-child(2) {
  animation: none;
}

/* Individual hover — lift, straighten, scale the focused label. */


.fa-sl-fan .fa-sl:hover {
  transform: translate(var(--x), calc(var(--y) - 30px)) scale(1.1) rotate(0deg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 36px -10px rgba(0, 0, 0, 0.30),
    0 4px 10px rgba(0, 0, 0, 0.14);
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.25s ease;
}

/* Hover anywhere in the fan kills the auto-cycle so hovered label can lift cleanly.
   Mouse leaves → animation re-applies and restarts from label 0. */


.fa-sl-fan:hover .fa-sl {
  animation: none;
}

/* When the bento card is hovered (but no label specifically), open the stack just a touch */


.fa-bento__cell--globe:hover .fa-sl {
  --x: calc(var(--i) * 76px - 228px);
}

/* Auto-lift keyframes — gentle nudge up from the stack; rotation stays the same.
   Of 28s: rise (0→4%) = 1.12s, hold (4→11%) = 1.96s, fall (11→15%) = 1.12s, rest = 22.8s. */


@keyframes fa-sl-auto-lift {

  0%,
  15%,
  100% {
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    z-index: calc(var(--i) + 1);
  }

  4%,
  11% {
    transform: translate(var(--x), calc(var(--y) - 26px)) rotate(var(--rot));
  }
}

.fa-sl__lbl {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
}

.fa-sl__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.01em;
  margin: 2px 0;
}

.fa-sl__addr {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.3;
}

/* Barcode row */


.fa-sl__bc-row {
  margin-top: auto;
}

.fa-sl__big-bc {
  display: flex;
  align-items: stretch;
  height: 46px;
  gap: 1px;
}

.fa-sl__big-bc i {
  display: block;
  width: 1.5px;
  background: #0a0a0a;
  flex-shrink: 0;
}

.fa-sl__big-bc i:nth-child(2n) {
  width: 1px;
}

.fa-sl__big-bc i:nth-child(3n) {
  width: 2.5px;
}

.fa-sl__big-bc i:nth-child(5n) {
  width: 2px;
  opacity: 0.7;
}

.fa-sl__big-bc i:nth-child(7n) {
  width: 1px;
}

.fa-sl__bc-num {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #333;
  margin-top: 4px;
}

.fa-sl__logo-img {
  height: 25px;
  max-width: 130px;
  object-fit: contain;
}

/* Simplified label header: logo left, flag+code right */


.fa-sl__head2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  flex-shrink: 0;
}

.fa-sl__flag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Simplified recipient block */


.fa-sl__to {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: 6px 0 4px;
}

.fa-sl__divider {
  height: 1px;
  background: #ddd;
  margin: 4px 0;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {

  .fa-sl,
  .fa-sl-fan .fa-sl:hover {
    transition: none;
    animation: none;
  }
}

@media (max-width: 1000px) {
  /* On narrow screens, calm the stack a touch so labels don't fly off-card */


  .fa-sl {
    --rot: calc(var(--depth) * -3deg);
    --x: calc(var(--i) * 28px - 84px);
  }
}

@keyframes fa-lane-run {
  0% {
    left: -16px;
  }

  100% {
    left: 100%;
  }
}

@keyframes fa-lane-divert {
  0% {
    left: -16px;
    top: 15px;
  }

  45% {
    left: 52%;
    top: 15px;
  }

  62% {
    left: 60%;
    top: 44px;
  }

  100% {
    left: 64%;
    top: 44px;
  }
}

/* 15c-bis. Mobilni čitalec — handheld scanner mockup (device shell + LCD + lens + laser) */
/* The purple wash lives on the whole bento cell (concentrated in the bottom third
   where the device sits). The mini panel has no background, border or shadow —
   it becomes a transparent container so the cell gradient shows through. */



.fa-bento__cell--scanner {
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 50%,
      #fbf5ff 70%,
      #f1deef 100%);
}

.fa-bento__cell--scanner .fa-bento__mini.fa-scan-dev {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
}

.fa-scan-dev {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
  padding-top: var(--sp-3);
}

/* Outer scanner body — Zebra/Honeywell silver-gray shell */


.fa-scan-dev__device {
  position: relative;
  width: 100%;
  max-width: 240px;
  padding: 7px 7px 6px;
  background: linear-gradient(180deg, #e8eaef 0%, #d2d6dd 55%, #c0c5cd 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
    0 10px 22px rgba(38, 14, 56, 0.18),
    0 3px 6px rgba(38, 14, 56, 0.10);
  overflow: hidden;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Scanner lens window — dark band at top, where the laser emits */


.fa-scan-dev__lens {
  position: relative;
  height: 12px;
  background: linear-gradient(180deg, #16171b 0%, #25272d 50%, #16171b 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.fa-scan-dev__lens-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255, 56, 56, 0.22) 0%, transparent 70%);
  opacity: 0;
  animation: fa-scanner-glow 2.6s ease-in-out infinite;
}

@keyframes fa-scanner-glow {

  0%,
  100% {
    opacity: 0;
  }

  20%,
  50% {
    opacity: 1;
  }

  65% {
    opacity: 0;
  }
}

.fa-scan-dev__laser {
  position: absolute;
  top: 50%;
  left: -25%;
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #ff3838 30%, #ffb0b0 50%, #ff3838 70%, transparent 100%);
  box-shadow:
    0 0 3px #ff3838,
    0 0 8px rgba(255, 56, 56, 0.7),
    0 0 14px rgba(255, 56, 56, 0.4);
  animation: fa-scanner-laser 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fa-scanner-laser {

  0%,
  100% {
    left: -25%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    left: 75%;
    opacity: 1;
  }

  60% {
    opacity: 0;
  }
}

/* LCD screen */


.fa-scan-dev__screen {
  background: linear-gradient(180deg, #f7f5ef 0%, #efedea 100%);
  border-radius: 5px;
  padding: 7px 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    inset 0 0 14px rgba(0, 0, 0, 0.04);
}

.fa-scan-dev__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fa-scan-dev__order {
  font-size: 8.5px;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.fa-scan-dev__signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 7px;
}

.fa-scan-dev__signal i {
  display: block;
  width: 2px;
  background: var(--c-purple-6, #a13fbc);
  border-radius: 1px;
}

.fa-scan-dev__signal i:nth-child(1) {
  height: 30%;
}

.fa-scan-dev__signal i:nth-child(2) {
  height: 55%;
}

.fa-scan-dev__signal i:nth-child(3) {
  height: 80%;
}

.fa-scan-dev__signal i:nth-child(4) {
  height: 100%;
}

.fa-scan-dev__ean {
  font-size: 9.5px;
  color: #7e2f95;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.fa-scan-dev__ean b {
  color: #1f2024;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.fa-scan-dev__barcode {
  display: flex;
  align-items: stretch;
  gap: 1.5px;
  height: 22px;
  padding: 1px 0;
}

.fa-scan-dev__barcode i {
  display: block;
  flex: 1 1 auto;
  min-width: 1px;
  background: #1f2024;
  border-radius: 0.5px;
}

.fa-scan-dev__barcode i:nth-child(3n) {
  flex-basis: 3px;
  min-width: 3px;
}

.fa-scan-dev__barcode i:nth-child(5n) {
  flex-basis: 1px;
  min-width: 1px;
  opacity: 0.65;
}

.fa-scan-dev__barcode i:nth-child(7n) {
  flex-basis: 4px;
  min-width: 4px;
}

.fa-scan-dev__barcode i:nth-child(11n) {
  flex-basis: 2px;
  min-width: 2px;
  opacity: 0.85;
}

.fa-scan-dev__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 13px;
}

.fa-scan-dev__check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: #4a7a34;
  font-weight: 700;
  opacity: 0;
  animation: fa-scanner-check 2.6s ease-out infinite;
}

.fa-scan-dev__check svg {
  width: 11px;
  height: 11px;
  stroke: #519141;
}

@keyframes fa-scanner-check {

  0%,
  58% {
    opacity: 0;
    transform: scale(0.88);
  }

  68% {
    opacity: 1;
    transform: scale(1.08);
  }

  78%,
  100% {
    opacity: 0.95;
    transform: scale(1);
  }
}

.fa-scan-dev__next {
  font-size: 8.5px;
  color: #888;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Bottom: physical buttons + status LED */


.fa-scan-dev__keys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-top: 1px;
}

.fa-scan-dev__btn {
  width: 14px;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #b3b8c1 0%, #969ba4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.fa-scan-dev__btn--trigger {
  width: 22px;
  background: linear-gradient(180deg, #c4c8d0 0%, #a4a9b2 100%);
}

.fa-scan-dev__led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #80BB64;
  box-shadow: 0 0 3px #80BB64, 0 0 6px rgba(128, 187, 100, 0.6);
  animation: fa-scanner-led 2.6s ease-in-out infinite;
  margin-left: 4px;
}

@keyframes fa-scanner-led {

  0%,
  60%,
  100% {
    background: #80BB64;
    box-shadow: 0 0 3px #80BB64, 0 0 6px rgba(128, 187, 100, 0.6);
  }

  68%,
  76% {
    background: #c8eb9c;
    box-shadow: 0 0 4px #c8eb9c, 0 0 10px rgba(128, 187, 100, 0.9);
  }
}

/* Narrow bento (single-column mobile) — slight enlargement OK */


@media (max-width: 1000px) {
  .fa-scan-dev__device {
    max-width: 300px;
  }
}

/* ─── 16. COURIER / INTEGRATION TILE polish — premium monochrome
       wordmarks (no fake brand logos), brand color reveals on hover. ── */




#kurirji .tile {
  border: 1px solid var(--c-ink-3);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}

#kurirji .tile:hover {
  transform: translateY(-3px);
  border-color: rgba(189, 85, 215, 0.30);
  box-shadow: 0 14px 28px -14px rgba(126, 47, 149, 0.22);
}

#kurirji .tile__logo {
  letter-spacing: 0.02em;
  filter: saturate(0.15) contrast(0.9);
  opacity: 0.92;
  transition: filter 0.35s var(--ease-out), transform 0.35s;
}

#kurirji .tile:hover .tile__logo {
  /* brand color blooms in on hover */
  filter: saturate(1) contrast(1);
  transform: scale(1.04);
}

/* ─── 17. TESTIMONIAL — decorative quote + results strip ──────────── */




.fa-testimonial {
  position: relative;
}

.fa-testimonial .quote-card {
  position: relative;
  overflow: hidden;
}

.fa-testimonial .quote-card::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: var(--c-purple-3);
  opacity: 0.30;
  pointer-events: none;
}

.fa-testimonial__results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--c-ink-3);
}

.fa-testimonial__results-lbl {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* ink-6 namesto ink-5: 5.7:1 kontrast na beli (WCAG AA), ink-5 je 2.6:1 */
  color: var(--c-ink-6);
  margin-bottom: -6px;
}

.fa-tm-metric__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #4a1a59 0%, var(--c-purple-5) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fa-tm-metric__lbl {
  display: block;
  margin-top: 5px;
  font-size: 0.74rem;
  color: var(--c-ink-6);
  line-height: 1.35;
}

@media (max-width: 560px) {
  .fa-testimonial__results {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

/* ─── 18. HERO depth — faint dot-grid + top glow behind the headline ── */




.fa-flow .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(126, 47, 149, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 62%);
}

.fa-flow .hero>.hero__inner,
.fa-flow .hero>.container {
  position: relative;
  z-index: 1;
}

/* Bottom fade — pulls hero into proof strip with a stronger luminous wash.
   The hero bg ends around #fbf5ff (very pale), so a pure white fade is too
   subtle. We use a luminous off-white that's slightly cooler/cleaner than
   the surrounding tint, so the eye reads a clear transition. */


.fa-flow .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.35) 35%,
      rgba(255, 255, 255, 0.80) 65%,
      rgba(252, 253, 255, 0.96) 85%,
      #fcfdff 100%);
  pointer-events: none;
  z-index: 2;
}

/* ─── 19. APP-SHELL SECONDARY NAV — text menu beside the icon rail
       (mirrors the real FulfillmentApp: Odprema, Naročila, Skladišče…) ── */




.app-shell--with-nav {
  grid-template-columns: 48px 125px 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "rail   nav    main";
}

.app-shell__nav {
  grid-area: nav;
  background: #f4f5f6;
  border-right: 1px solid #e2e8f0;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.app-shell__nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 6px;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  color: #4a5568;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.app-shell__nav-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.75;
}

.app-shell__nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a1a;
}

.app-shell__nav-item.is-active {
  background: transparent;
  color: var(--c-purple-7);
  border-left-color: var(--c-purple-6);
  box-shadow: none;
  font-weight: 600;
}

.app-shell__nav-item.is-active svg {
  opacity: 1;
  color: var(--c-purple-6);
}

/* Collapse the text menu on narrow mockups so it never cramps the table. */


@media (max-width: 760px) {
  .app-shell--with-nav {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "topbar topbar"
      "rail   main";
  }

  .app-shell__nav {
    display: none;
  }
}

/* ─── 19b. APP-SHELL PAGEHEAD TITLE & SUBTITLE ── */


.app-shell__title-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-shell__title-icon {
  width: 18px;
  height: 18px;
}

.app-shell__title-text {
  font-family: 'Montserrat', var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  line-height: 1.25;
  margin: 0;
}

.app-shell__subtitle {
  font-size: 13px;
  color: #8c8e8f;
  margin-top: 4px;
}

/* ─── 19c. FAKE CURSOR AND CUSTOM CHECKBOX FOR ANIMATION ── */


.fake-cursor {
  position: absolute;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='white' stroke-width='2.5'><path d='M4.5 3v15.2l3.8-3.8 2.9 6.8 2.6-1.1-2.9-6.8h5.3z'/></svg>");
  background-size: contain;
  pointer-events: none;
  z-index: 99999;
  transition: top 0.45s cubic-bezier(0.16, 1, 0.3, 1), left 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease-out;
  transform-origin: top left;
  display: none;
}

.fake-cursor.is-clicked {
  transform: scale(0.85);
}

.app-shell__check {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background: white;
  transition: background 0.15s, border-color 0.15s;
}

.app-shell__check.is-checked {
  background: var(--c-purple-6);
  border-color: var(--c-purple-6);
}

.app-shell__check.is-checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid white;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

.app-shell {
  position: relative;
}

.app-shell__row {
  transition: max-height 0.4s ease, height 0.4s ease, padding 0.4s ease, border-bottom-color 0.4s ease, opacity 0.4s ease;
}

.app-shell__row.is-leaving {
  height: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0px solid transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─── 19d. CENTRED PRINT MODAL ─── */


.fa-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.11);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.fa-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.fa-modal__content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fa-modal.is-visible .fa-modal__content {
  transform: scale(1);
}

.fa-modal__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--c-purple-6);
  border-radius: 50%;
  animation: modalSpinnerSpin 0.75s linear infinite;
  display: inline-block;
  box-sizing: border-box;
}

@keyframes modalSpinnerSpin {
  to {
    transform: rotate(360deg);
  }
}

.fa-modal__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fa-modal__title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}

.fa-modal__subtitle {
  font-size: 11px;
  font-weight: 400;
  color: #6c6e70;
}

/* ─── 20. REDUCED MOTION ──────────────────────────────────────── */



@media (prefers-reduced-motion: reduce) {

  .fa-flow-stages::after,
  .fa-bento__visual .fa-path-bad,
  .fa-bento__visual .fa-path-good,
  .fa-bento__visual .fa-pin,
  .fa-bento__barcode::after,
  .fa-label__bars::after,
  .fa-lane__pkg {
    animation: none;
  }

  .fa-lane__pkg--err {
    animation: none;
    left: 60%;
    top: 44px;
  }

  .toast {
    animation: none;
    opacity: 1;
  }

  .toast.is-exiting {
    animation: none;
    opacity: 0;
  }

  .toast-stack {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BENTO v2 — deterministic mosaic + globe & courier-hub coded visuals
   ═══════════════════════════════════════════════════════════════ */
/* 21. Layout — explicit area map (desktop) */





/* Opomba: prejsnji mosaic layout (grid-template-areas hero/integ/globe/
   courier/billing/portal/scan/scanr, fiksne visine vrstic 320px/300px) je
   OSIROTEL, ko je domaca stran presla na `.fa-bento--split` (locen layout,
   glej ta razred nizje - eksplicitno resetira grid-template-*). Ker je
   selektor spodaj veljal za VSAK navaden `.fa-bento` (brez --split), je
   vsiljeval te fiksne visine tudi na straneh s preprosto enotno mrezo kartic
   (features/billing, solutions/ecommerce-integrations + sl varianti) - 2 do
   4 prazne vrstice (do ~770px) pod zadnjo vrstico kartic. Odstranjeno;
   privzeto pravilo `.fa-bento` (visje v datoteki, grid-auto-rows:
   minmax(220px, auto)) ze samo pravilno prilagodi visino vsebini. */
@media (min-width: 641px) and (max-width: 1000px) {
  .fa-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fa-bento {
    grid-template-columns: 1fr;
  }

  .fa-bento__cell {
    grid-column: auto;
  }
}

/* 21. "Pripravljeni za vsak trg" — text left / map right layout */


a.fa-bento__cell.fa-bento__cell--courier {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.fa-eu-text {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  z-index: 1;
  min-width: 0;
}

/* Arrow stays in top-right of the cell */


.fa-bento__cell--courier .fa-bento__arrow {
  top: var(--sp-4);
  right: var(--sp-4);
}

.fa-bento__globe {
  flex: 1;
  position: relative;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.fa-eu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fa-eu svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Land dots */


.fa-eu__dots circle {
  fill: rgba(126, 47, 149, 0.16);
}

/* Hub markers */


.fa-eu__hub {
  fill: var(--c-purple-6);
  stroke: #fff;
  stroke-width: 2;
}

.fa-eu__hub--origin {
  fill: #1d9d5f;
}

/* Pulsing rings */


.fa-eu__ring {
  fill: none;
  stroke: var(--c-purple-6);
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: fa-eu-pulse 6s ease-out infinite;
}

/* Origin rings are green; second ring offset in time for a double-pulse */


.fa-eu__ring--o,
.fa-eu__ring--2 {
  stroke: #1d9d5f;
}

.fa-eu__ring--2 {
  animation-delay: 1.5s;
}

@keyframes fa-eu-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  70% {
    transform: scale(3);
    opacity: 0;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Country tags */


.fa-eu__tag rect {
  fill: rgba(255, 255, 255, 0.93);
  stroke: rgba(126, 47, 149, 0.18);
  stroke-width: 1;
  filter: drop-shadow(0 1px 3px rgba(126, 47, 149, 0.14));
}

.fa-eu__tag text {
  font-size: 11.5px;
  text-anchor: middle;
  fill: #5a4663;
}

.fa-eu__tag-c {
  font-weight: 700;
  fill: #3c2d44;
}

.fa-eu__tag-k {
  font-weight: 500;
  fill: var(--c-purple-6);
}

/* Hover — pulses speed up a touch */


.fa-bento__cell--courier:hover .fa-eu__ring {
  animation-duration: 3s;
}

@media (prefers-reduced-motion: reduce) {
  .fa-eu__ring {
    animation: none;
  }
}

@keyframes fa-globe-rotate {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-180px);
  }
}

@keyframes fa-globe-arc {
  0% {
    stroke-dashoffset: 120;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  55% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  85% {
    opacity: 0.15;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes fa-globe-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.55);
    opacity: 1;
  }
}

@keyframes fa-hub-in {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  55% {
    transform: translateX(34px);
    opacity: 1;
  }

  72% {
    transform: translateX(52px);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fa-hub-pulse {

  0%,
  100% {
    box-shadow: 0 6px 18px -6px rgba(126, 47, 149, 0.45);
  }

  50% {
    box-shadow: 0 6px 26px -2px rgba(126, 47, 149, 0.85);
  }
}

@keyframes fa-hub-out {

  0%,
  100% {
    opacity: 0.45;
    border-color: var(--c-ink-3);
    color: var(--c-ink-6);
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    border-color: var(--c, var(--c-purple-5));
    color: var(--c-ink-9);
    transform: translateX(5px);
  }
}

@keyframes fa-chip-cycle {

  0%,
  14%,
  100% {
    transform: scale(1);
    box-shadow: none;
  }

  5% {
    transform: scale(1.7);
    box-shadow: 0 0 8px var(--c-status-ok);
  }
}

/* 25. reduced motion */


@media (prefers-reduced-motion: reduce) {

  .fa-globe__arc,
  .fa-globe__dot,
  .fa-hub__dot,
  .fa-hub__core,
  .fa-hub__courier,
  .fa-bento__chip-dot {
    animation: none;
  }

  .fa-globe__arc {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }

  .fa-hub__dot,
  .fa-hub__courier {
    opacity: 1;
  }
}

.fa-carriers__stat {
  text-align: center;
  font-size: 0.95rem;
  color: var(--c-ink-6);
  margin: 0 0 var(--sp-6);
}

.fa-carriers__stat b {
  color: var(--c-purple-7);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
}

/* 27. STRIPE-INSPIRED ERP+WMS INTEGRATION SECTION */



.fa-stripe-section {
  position: relative;
  padding: var(--sp-8) 0;
  background: #14111a;
  overflow: hidden;
}

.fa-stripe-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
  align-items: center;
}

@media (max-width: 960px) {
  .fa-stripe-header {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
  }
}

.fa-stripe-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

.fa-stripe-header p {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0;
}

.fa-stripe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 760px) {
  .fa-stripe-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

.fa-stripe-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform 0.4s var(--ease-out), background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
}

.fa-stripe-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(189, 85, 215, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.fa-stripe-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.fa-stripe-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.5;
  margin: 0;
}

.fa-stripe-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(189, 85, 215, 0.15), rgba(126, 47, 149, 0.05));
  border: 1px solid rgba(189, 85, 215, 0.2);
  display: grid;
  place-items: center;
  color: var(--c-purple-4);
  margin-bottom: var(--sp-2);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.fa-stripe-icon svg {
  width: 24px;
  height: 24px;
}

.fa-stripe-card:hover .fa-stripe-icon {
  transform: scale(1.05);
  color: #fff;
  background: linear-gradient(135deg, var(--c-purple-5), var(--c-purple-7));
  border-color: transparent;
}

/* 27. CARRIERS FUNNEL — Corgi-style bowtie: wide intake left, FA at the waist, 100+ carriers right */



.fa-funnel {
  max-width: 760px;
  margin: var(--sp-6) auto var(--sp-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--c-ink-3);
  box-shadow: 0 18px 44px -26px rgba(126, 47, 149, 0.30);
  padding: var(--sp-5);
}

.fa-funnel__svg {
  width: 100%;
  height: auto;
  display: block;
}

.fa-funnel__flow {
  fill: none;
  stroke: rgba(161, 63, 188, 0.45);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 9 8;
  animation: fa-funnel-flow 1.4s linear infinite;
}

.fa-funnel__flow:nth-of-type(2n) {
  animation-duration: 1.7s;
}

.fa-funnel__flow:nth-of-type(3n) {
  animation-duration: 1.2s;
}

@keyframes fa-funnel-flow {
  to {
    stroke-dashoffset: -34;
  }
}

.fa-funnel__order {
  fill: #fff;
  stroke: var(--c-ink-3);
}

.fa-funnel__order-dot {
  fill: var(--c-purple-5);
}

.fa-funnel__order-line {
  fill: var(--c-ink-3);
}

.fa-funnel__chip-box {
  fill: #fff;
  stroke: var(--c-ink-3);
}

.fa-funnel__chip-box--more {
  fill: var(--c-purple-1);
  stroke: rgba(189, 85, 215, 0.35);
}

.fa-funnel__chip-txt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  fill: var(--c-ink-7);
}

.fa-funnel__chip-txt--more {
  fill: var(--c-purple-7);
  font-weight: 700;
}

.fa-funnel__core-ring {
  fill: none;
  stroke: rgba(189, 85, 215, 0.35);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: fa-funnel-ring 3s ease-in-out infinite;
}

@keyframes fa-funnel-ring {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.fa-funnel__core-glow {
  animation: fa-funnel-glow 3s ease-in-out infinite;
}

@keyframes fa-funnel-glow {

  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .fa-funnel__flow,
  .fa-funnel__core-glow {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BENTO v3 — billing 2x2 (animated) + full-width Order Management card
   ═══════════════════════════════════════════════════════════════ */



@media (min-width: 1001px) {

  /* Bento Split Layout on Desktop */
  .fa-bento--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
    gap: 16px;
  }

  .fa-bento__col-left,
  .fa-bento__col-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .fa-bento__scan-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex-grow: 1;
  }

  .fa-bento--split .fa-bento__cell {
    grid-area: auto;
  }

  .fa-bento__cell--channels {
    height: 540px;
  }

  .fa-bento__cell--integ {
    height: 370px;
  }

  .fa-bento__cell--sync {
    height: 320px;
  }

  .fa-bento__cell--globe {
    height: 300px;
  }

  .fa-bento__cell--courier {
    height: 320px;
  }

  .fa-bento__cell--billing {
    flex-grow: 1;
  }

  .fa-bento--split .fa-bento__cell--om {
    grid-column: span 2;
  }
}

@media (min-width: 641px) and (max-width: 1000px) {

  .fa-bento__cell--billing,
  .fa-bento__cell--om,
  .fa-bento__cell--sync {
    grid-column: span 2;
  }
}

@media (max-width: 1000px) {

  .fa-bento--split .fa-bento__col-left,
  .fa-bento--split .fa-bento__col-right,
  .fa-bento--split .fa-bento__scan-row {
    display: contents;
  }

  .fa-bento--split .fa-bento__cell--channels {
    order: 1;
  }

  .fa-bento--split .fa-bento__cell--integ {
    order: 2;
  }

  .fa-bento--split .fa-bento__cell--sync {
    order: 3;
  }

  .fa-bento--split .fa-bento__cell--globe {
    order: 4;
  }

  .fa-bento--split .fa-bento__cell--billing {
    order: 5;
  }

  .fa-bento--split .fa-bento__cell--scan {
    order: 6;
  }

  .fa-bento--split .fa-bento__cell--courier {
    order: 7;
  }

  .fa-bento--split .fa-bento__cell--scanner {
    order: 8;
  }

  .fa-bento--split .fa-bento__cell--om {
    order: 9;
  }
}



/* ═══════════════════════════════════════════════════════════════
   SYNC cell — živi status + zaloga, zrcaljena klientom
   Two panes (vaše skladišče → v živo → klient vidi) of one order.
   ═══════════════════════════════════════════════════════════════ */


.fa-mirror {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--sp-3);
  font-family: var(--font-mono);
}

.fa-mirror__pane {
  background: #fff;
  border: 1px solid var(--c-ink-3);
  border-radius: 12px;
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.25);
  min-width: 0;
}

.fa-mirror__pane--client {
  border-color: rgba(189, 85, 215, 0.32);
  background: linear-gradient(180deg, #fff 0%, #fdf7ff 100%);
}

.fa-mirror__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-6);
}

.fa-mirror__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ink-5);
  flex-shrink: 0;
}

.fa-mirror__dot--ok {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.fa-mirror__order {
  font-size: 0.74rem;
  color: var(--c-ink-6);
}

.fa-mirror__order b {
  color: var(--c-ink-9);
  font-weight: 700;
}

.fa-mirror__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fa-mirror__steps li {
  position: relative;
  padding-left: 18px;
  font-size: 0.72rem;
  color: var(--c-ink-5);
  line-height: 1.2;
}

.fa-mirror__steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--c-ink-3);
  box-sizing: border-box;
}

.fa-mirror__steps li.is-done {
  color: var(--c-ink-7);
}

.fa-mirror__steps li.is-done::before {
  background: #16a34a;
  border-color: #16a34a;
}

.fa-mirror__steps li.is-done::after {
  content: "";
  position: absolute;
  left: 3.4px;
  top: 4.4px;
  width: 5px;
  height: 2.5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.fa-mirror__steps li.is-active {
  color: var(--c-purple-8);
  font-weight: 700;
}

.fa-mirror__steps li.is-active::before {
  border-color: var(--c-purple-6);
  background: var(--c-purple-1);
  animation: fa-mirror-pulse 2.4s ease-in-out infinite;
}

.fa-mirror__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.28);
}

.fa-mirror__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
}

.fa-mirror__track {
  font-size: 0.68rem;
  color: var(--c-ink-5);
}

.fa-mirror__stock {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-ink-3);
  font-size: 0.68rem;
  color: var(--c-ink-6);
}

.fa-mirror__stock span {
  letter-spacing: 0.02em;
}

.fa-mirror__stock b {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-ink-9);
  font-variant-numeric: tabular-nums;
}

/* Sync connector between the two panes */


.fa-mirror__sync {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 54px;
}

.fa-mirror__beam {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-ink-3), var(--c-purple-4), var(--c-ink-3));
  overflow: hidden;
}

.fa-mirror__beam::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--c-purple-7), transparent);
  animation: fa-mirror-beam 2.4s linear infinite;
}

.fa-mirror__sync-tag {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-purple-7);
  background: var(--c-purple-1);
  border: 1px solid rgba(189, 85, 215, 0.28);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

@keyframes fa-mirror-beam {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

@keyframes fa-mirror-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(189, 85, 215, 0.45);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(189, 85, 215, 0);
  }
}

@media (max-width: 520px) {
  .fa-mirror {
    grid-template-columns: 1fr;
  }

  .fa-mirror__sync {
    flex-direction: row;
    min-width: 0;
  }

  .fa-mirror__beam {
    height: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .fa-mirror__beam::after,
  .fa-mirror__steps li.is-active::before {
    animation: none;
  }
}

/* Billing — animated obračun panel (tally -> total -> generiraj) */


.fa-bill {
  margin-top: var(--sp-4);
  background: #fff;
  border: 1px solid var(--c-ink-3);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--c-ink-7);
}

.fa-bill__head {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--c-ink-6);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-ink-2);
}

.fa-bill__client {
  color: var(--c-purple-7);
}

.fa-bill__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  margin: 0 -6px;
  border-radius: 6px;
  animation: fa-bill-tally 12s ease-in-out infinite;
}

.fa-bill__row:nth-child(2) {
  animation-delay: 0s;
}

.fa-bill__row:nth-child(3) {
  animation-delay: .35s;
}

.fa-bill__row:nth-child(4) {
  animation-delay: .7s;
}

.fa-bill__row:nth-child(5) {
  animation-delay: 1.05s;
}

@keyframes fa-bill-tally {

  0%,
  12%,
  100% {
    background: transparent;
  }

  6% {
    background: var(--c-purple-1);
  }
}

.fa-bill__total {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-ink-3);
  font-weight: 700;
  color: var(--c-purple-7);
}

.fa-bill__btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--c-purple-5), var(--c-purple-7));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  padding: 9px;
  cursor: pointer;
  animation: fa-bill-btn 12s ease-in-out infinite;
}

@keyframes fa-bill-btn {

  0%,
  55%,
  100% {
    box-shadow: 0 2px 8px -2px rgba(126, 47, 149, .4);
  }

  72% {
    box-shadow: 0 6px 20px 0 rgba(126, 47, 149, .7);
  }
}

/* Order Management full-width card (blue, with dashboard preview peeking from bottom) */


.fa-bento__cell--om {
  min-height: 340px;
  display: flex;
  flex-direction: column;
}

.fa-bento__cell--om::after {
  background: radial-gradient(circle, rgba(189, 85, 215, 0.10) 0%, transparent 65%);
}

.fa-bento__cell--om:hover {
  border-color: rgba(189, 85, 215, 0.40);
  box-shadow: 0 22px 44px -20px rgba(126, 47, 149, 0.22), 0 4px 10px rgba(0, 0, 0, 0.04);
}

.fa-om__intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding-top: var(--sp-3);
}

.fa-om__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-purple-7);
  margin-bottom: 10px;
}

.fa-om__eyebrow img {
  width: 18px;
  height: 18px;
}

.fa-om__cta {
  display: inline-block;
  margin-top: 12px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-purple-7);
}

.fa-om__cta::after {
  content: " \2192";
}

.fa-om__cta:hover {
  color: var(--c-purple-8);
}

/* OM iframe preview — light, transparent over the card-wide bloby gradient */


.fa-om__preview {
  position: relative;
  margin: var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  background: transparent;
  overflow: hidden;
  padding: var(--sp-5) 0 0;
  display: flex;
  justify-content: center;
}

/* Inner "device" stage — narrower than card edge so gradient breathes on L/R */


.fa-om__preview-stage {
  position: relative;
  width: 80%;
  max-width: 1020px;
  container-type: inline-size;
  aspect-ratio: 1280 / 420;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: #1f2329;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 28px 56px -22px rgba(126, 47, 149, 0.30),
    0 14px 28px -14px rgba(126, 47, 149, 0.22),
    0 2px 8px -2px rgba(15, 40, 80, 0.18);
}

.fa-om__preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  display: block;
  width: 1280px;
  height: 900px;
  transform-origin: top left;
  transform: scale(calc(100cqi / 1280px));
  pointer-events: none;
  background: #fff;
}

/* Bottom fade — over the stage so it blends back into the card's bloby gradient */


.fa-om__preview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(240, 231, 250, 0.85) 70%, #f0e7fa);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 720px) {
  .fa-om__preview-stage {
    width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .fa-bill__row,
  .fa-bill__total,
  .fa-bill__btn {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   28. BENTO v4 — clickable cards (Stripe-style)
       Whole card is a link to its subpage; discrete hover indicator.
   ═══════════════════════════════════════════════════════════════ */
/* Base: anchor cell looks identical to article but is a link */





a.fa-bento__cell {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.fa-bento__cell:focus-visible {
  outline: 2px solid var(--c-purple-5);
  outline-offset: 3px;
}

/* Discrete arrow indicator — top-right of every card, slides+fades on hover */


.fa-bento__arrow {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--c-purple-1);
  color: var(--c-purple-7);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), background 0.35s;
  z-index: 2;
  pointer-events: none;
}

.fa-bento__arrow svg {
  width: 14px;
  height: 14px;
  display: block;
}

.fa-bento__cell:hover .fa-bento__arrow,
.fa-bento__cell:focus-visible .fa-bento__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* OM card uses blue accent instead of purple */


.fa-bento__cell--om .fa-bento__arrow {
  background: var(--c-blue-1);
  color: var(--c-blue-7);
}

/* Discrete inner-visual scale on hover — Stripe-style "things lean in" feel */


.fa-bento__cell .fa-bento__visual,
.fa-bento__cell .fa-bento__mini,
.fa-bento__cell .fa-bento__globe,
.fa-bento__cell .fa-bento__barcode,
.fa-bento__cell .fa-bill,
.fa-bento__cell .fa-bento__logo-cluster {
  transition: transform 0.5s var(--ease-out);
  transform-origin: center;
}

.fa-bento__cell:hover .fa-bento__visual,
.fa-bento__cell:hover .fa-bento__mini,
.fa-bento__cell:hover .fa-bento__globe,
.fa-bento__cell:hover .fa-bento__barcode,
.fa-bento__cell:hover .fa-bill {
  transform: scale(1.015);
}

/* Icon tile leans in slightly on hover */


.fa-bento__cell .fa-bento__icon {
  transition: transform 0.35s var(--ease-out), background 0.35s;
}

.fa-bento__cell:hover .fa-bento__icon {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--c-purple-2) 0%, var(--c-purple-3) 100%);
}

.fa-bento__cell--om:hover .fa-bento__icon {
  background: linear-gradient(135deg, var(--c-purple-2) 0%, var(--c-purple-3) 100%);
}

/* Title shifts a hair on hover (mirrors Stripe link feel) */


.fa-bento__cell .fa-bento__title {
  transition: color 0.3s;
}

.fa-bento__cell:hover .fa-bento__title {
  color: var(--c-purple-8);
}

.fa-bento__cell--om:hover .fa-bento__title {
  color: var(--c-purple-8);
}

/* OM CTA — now a span inside the link; keep visual identity */


.fa-bento__cell--om .fa-om__cta {
  cursor: pointer;
}

.fa-bento__cell--om:hover .fa-om__cta {
  color: var(--c-purple-8);
}

/* Disable the inner-card lift conflict for the OM card (it has its own scale rules) */


.fa-bento__cell--om:hover .fa-bento__visual {
  transform: none;
}

/* Reduced motion */


@media (prefers-reduced-motion: reduce) {

  .fa-bento__arrow,
  .fa-bento__cell .fa-bento__visual,
  .fa-bento__cell .fa-bento__mini,
  .fa-bento__cell .fa-bento__globe,
  .fa-bento__cell .fa-bento__barcode,
  .fa-bento__cell .fa-bill,
  .fa-bento__cell .fa-bento__icon {
    transition: none;
  }

  .fa-bento__cell:hover .fa-bento__visual,
  .fa-bento__cell:hover .fa-bento__mini,
  .fa-bento__cell:hover .fa-bento__globe,
  .fa-bento__cell:hover .fa-bento__barcode,
  .fa-bento__cell:hover .fa-bill,
  .fa-bento__cell:hover .fa-bento__icon {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   29. BENTO v4 — glamour pass on inner visuals
       Adds depth, soft glows, inset highlights so visuals feel
       premium rather than flat illustration boxes.
   ═══════════════════════════════════════════════════════════════ */
/* Hero warehouse visual — deeper gradient + edge glow */





.fa-bento__visual {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(189, 85, 215, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(101, 172, 255, 0.10) 0%, transparent 65%),
    linear-gradient(160deg, #fbf5ff 0%, #efe1f7 100%);
  border-color: rgba(189, 85, 215, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 22px -14px rgba(126, 47, 149, 0.25);
}

/* Mini stages (label, lane) — deeper gradient + inset highlight */


.fa-bento__mini {
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(189, 85, 215, 0.10) 0%, transparent 60%),
    linear-gradient(160deg, #fbf5ff 0%, #f1deef 100%);
  border-color: rgba(189, 85, 215, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 10px 24px -16px rgba(126, 47, 149, 0.22);
}

/* Billing card — refined paper feel with subtle gradient */


.fa-bill {
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 100%);
  border-color: rgba(189, 85, 215, 0.20);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 22px -14px rgba(126, 47, 149, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

.fa-bill__btn {
  letter-spacing: 0.01em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 6px 18px -6px rgba(126, 47, 149, 0.5);
}

/* Globe — stronger central glow under the sphere */


.fa-bento__globe {
  position: relative;
}

.fa-bento__globe::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -10%;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
}

/* OM card — bloby light gradient that spans the whole card edge-to-edge */


.fa-bento__cell--om {
  background:
    radial-gradient(ellipse 55% 70% at 18% 25%, rgba(101, 172, 255, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 80%, rgba(189, 85, 215, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(133, 200, 255, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #f4f9ff 0%, #fbf5ff 55%, #f0e7fa 100%);
}

.fa-bento__cell--om::after {
  background: radial-gradient(circle, rgba(101, 172, 255, 0.18) 0%, transparent 65%);
}

.fa-bento__cell--om .fa-om__eyebrow {
  background: linear-gradient(180deg, var(--c-blue-1) 0%, rgba(101, 172, 255, 0.05) 100%);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(101, 172, 255, 0.18);
}

/* Hover deepens the visual's glow — keeps the discrete motion feel */


.fa-bento__cell:hover .fa-bento__visual {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 30px -16px rgba(126, 47, 149, 0.32);
}

.fa-bento__cell:hover .fa-bento__mini,
.fa-bento__cell:hover .fa-bento__barcode,
.fa-bento__cell:hover .fa-bill {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 16px 32px -18px rgba(126, 47, 149, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ═══════════════════════════════════════════════════════════════
   30. FA-LOGOS — customer logo strip (3PL ponudniki, ki uporabljajo
       Fulfillment App). Sits above .fa-proof.
   ═══════════════════════════════════════════════════════════════ */



.fa-logos {
  position: relative;
  padding: var(--sp-6) 0 var(--sp-4);
  z-index: 1;
  overflow: hidden;
}

/* Marquee viewport — full-bleed inside the section, masks the edges */


.fa-logos__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Soft fade at left + right edges: the leftmost/rightmost logos blur
     into the background, mimicking the "infinite" feel. */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.15) 4%,
      rgba(0, 0, 0, 0.55) 9%,
      #000 16%,
      #000 84%,
      rgba(0, 0, 0, 0.55) 91%,
      rgba(0, 0, 0, 0.15) 96%,
      transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.15) 4%,
      rgba(0, 0, 0, 0.55) 9%,
      #000 16%,
      #000 84%,
      rgba(0, 0, 0, 0.55) 91%,
      rgba(0, 0, 0, 0.15) 96%,
      transparent 100%);
}

/* The track holds 2 identical groups side-by-side and translates -50%
   for a seamless infinite loop. */


.fa-logos__track {
  display: flex;
  width: max-content;
  animation: fa-logos-scroll 38s linear infinite;
}

.fa-logos__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(40px, 6vw, 72px);
  padding-right: clamp(40px, 6vw, 72px);
  /* spacing between the two groups */
}

@keyframes fa-logos-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.fa-logos:hover .fa-logos__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .fa-logos__track {
    animation: none;
  }
}

.fa-logos__item {
  height: 36px;
  width: auto;
  max-width: 160px;
  flex-shrink: 0;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.55) contrast(1.15);
  opacity: 0.78;
  transition: filter 0.35s var(--ease-out), opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  /* SVGs here embed PNG data; keep them sharp on hi-DPI */
  image-rendering: -webkit-optimize-contrast;
}

.fa-logos__item:hover {
  filter: grayscale(0%) brightness(1) contrast(1);
  opacity: 1;
  transform: translateY(-2px);
}

/* Logos that need a custom height (some logos are square, some wide) */


.fa-logos__item[alt="Delnext"],
.fa-logos__item[alt="GLS Italia"] {
  height: 33px;
}

.fa-logos__item[alt="Kelmar"] {
  height: 45px;
}

.fa-logos__item[alt="CGP Logistics"] {
  height: 30px;
  max-width: 180px;
}

@media (max-width: 700px) {

  .fa-logos__item {
    height: 28px;
  }

  .fa-logos__item[alt="Delnext"],
  .fa-logos__item[alt="GLS Italia"] {
    height: 34px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   31b. FA-EXCH — dvosmerna izmenjava podatkov
        Prodajni kanali (logotipi) ⇄ Fulfillment App vozlišče.
        Naročila pritečejo noter, zaloga/statusi/sledilne kode nazaj.
   ═══════════════════════════════════════════════════════════════ */
/* Celica integracij je flex-stolpec, da vizual zapolni vso razpoložljivo
   višino (celica je hero span-2 in se na širokih zaslonih raztegne). */



.fa-bento__cell.fa-bento__cell--channels {
  display: flex;
  flex-direction: column;
}

.fa-channels-showcase {
  position: relative;
  margin-top: var(--sp-4);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Subtle dot-grid backdrop, faded toward the edges */
.fa-channels-showcase::before {
  content: '';
  position: absolute;
  inset: -8px;
  background-image: radial-gradient(circle, rgba(24, 24, 40, 0.14) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 30%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.fa-channels-showcase__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--active-glow, rgba(149, 191, 71, 0.18)) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  transition: background 0.6s ease;
}

.fa-channels-showcase__watermarks {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 220px;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fa-channels-showcase__watermark {
  position: absolute;
  width: 100%;
  height: 100%;
  /* keep wordmark logos proportional despite width/height attributes */
  object-fit: contain;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
  filter: grayscale(1) brightness(0.85);
}

.fa-channels-showcase__watermark.is-active {
  opacity: 0.09;
  transform: scale(1.05);
}

.fa-channels-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: auto 0;
}

@media (max-width: 1100px) {
  .fa-channels-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .fa-channels-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .fa-channels-showcase__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.fa-channels-active-info {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  background: var(--active-glow, rgba(149, 191, 71, 0.08));
  border: 1px solid var(--active-color, #95BF47);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-ink-8);
  margin-bottom: var(--sp-4);
  transition: all 0.4s var(--ease-out);
  z-index: 2;
  position: relative;
}

.fa-channels-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--active-color, #95BF47);
  box-shadow: 0 0 8px var(--active-color, #95BF47);
  animation: faLiveDotBlink 1.2s step-end infinite;
  transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.fa-channels-active-text {
  line-height: 1;
}

.fa-channels-showcase__card {
  background: rgba(250, 251, 252, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-md);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--sp-3);
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s, background 0.25s;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.fa-channels-showcase__card--more {
  background: rgba(124, 58, 237, 0.03);
  border: 1px dashed var(--c-purple-3);
  cursor: default;
}

@media (min-width: 1101px) {
  .fa-channels-showcase__card--wide {
    grid-column: span 2;
  }
}

.fa-channels-showcase__card:not(.fa-channels-showcase__card--more):hover {
  transform: translateY(-2px);
  border-color: var(--c-purple-3);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03);
}

.fa-channels-showcase__card.is-active {
  border-color: var(--card-accent, var(--active-color));
  box-shadow: 0 8px 24px var(--card-glow, rgba(149, 191, 71, 0.12));
  background: #ffffff;
}

.fa-channels-showcase__logo {
  max-height: 28px;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: grayscale(0.25) contrast(0.9);
}

.fa-channels-showcase__card.is-active .fa-channels-showcase__logo,
.fa-channels-showcase__card:hover .fa-channels-showcase__logo {
  filter: none;
  transform: scale(1.05);
}



@keyframes faLiveDotBlink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fa-channels-showcase__status-dot {
    animation: none;
  }
}

/* ============================================================
   32) ANALITIKA BENTO — area chart (Spakirani artikli)
   ============================================================ */
/* Make the analitika cell flex-column so chart can stretch to bottom */



a.fa-bento__cell--scan {
  display: flex;
  flex-direction: column;
}

.fa-bento__chart {
  /* Bleed to card edges — cell's overflow:hidden + border-radius clips bottom corners naturally */
  margin: 12px calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  padding: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(189, 85, 215, 0.06) 100%);
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
  flex: 1 1 auto;
  min-height: 140px;
  position: relative;
  /* Container so dot wave amplitude can be expressed in % of chart height (cqh) */
  container-type: size;
}

/* KPI chip — anchored to the peak dot via absolute positioning inside the dot span */



.fa-chart__kpi {
  position: absolute;
  bottom: calc(100% + 7px);
  right: 50%;
  transform: translateX(50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  line-height: 1.2;
  color: #1a6644;
  background: rgba(232, 250, 242, 0.95);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(29, 157, 95, 0.28);
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(29, 157, 95, 0.14);
  white-space: nowrap;
  pointer-events: none;
}

.fa-chart__kpi strong {
  font-size: 11.5px;
  font-weight: 700;
  color: #1d9d5f;
}

.fa-chart__trend {
  font-weight: 700;
  color: #1d9d5f;
  font-size: 10px;
  opacity: 0.85;
}

/* Day labels along the bottom */


.fa-chart__days {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 12px;
  pointer-events: none;
}

.fa-chart__days span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(107, 85, 117, 0.55);
}

.fa-chart__days span:first-child,
.fa-chart__days span:last-child {
  transform: none;
}

.fa-chart {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: block;
  overflow: visible;
}

.fa-chart__grid--v {
  stroke: rgba(189, 85, 215, 0.10);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.fa-chart__grid {
  stroke: rgba(189, 85, 215, 0.14);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.fa-chart__area {
  fill: url(#faChartFill);
}

.fa-chart__line {
  fill: none;
  stroke: var(--c-purple-6);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(126, 47, 149, 0.28));
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: fa-chart-draw 1.6s cubic-bezier(.22, 1, .36, 1) 0.2s both;
}

@keyframes fa-chart-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Dots — HTML overlay so the SVG can stretch while dots stay perfectly round */


.fa-chart__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fa-chart__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  border: 1.6px solid var(--c-purple-6);
  box-shadow: 0 1px 3px rgba(126, 47, 149, 0.3);
  opacity: 0;
  animation: fa-chart-dot-in 0.4s ease 1.3s both;
}

/* Peak dot — must come after .fa-chart__dot to win specificity */


.fa-chart__dot--peak {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: #e8faf2;
  border-color: #1d9d5f;
  box-shadow: 0 1px 4px rgba(29, 157, 95, 0.3);
  z-index: 3;
}

.fa-chart__dot:nth-of-type(2) {
  animation-delay: 1.4s;
}

.fa-chart__dot:nth-of-type(3) {
  animation-delay: 1.5s;
}

.fa-chart__dot:nth-of-type(4) {
  animation-delay: 1.6s;
}

.fa-chart__dot:nth-of-type(5) {
  animation-delay: 1.7s;
}

.fa-chart__dot:nth-of-type(6) {
  animation-delay: 1.8s;
}

.fa-chart__dot:nth-of-type(7) {
  animation-delay: 1.9s;
}

@keyframes fa-chart-dot-in {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hover — vsaka pika niha neodvisno (lastna hitrost + faza) */


@keyframes fa-chart-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.fa-bento__cell:hover .fa-chart__dot {
  opacity: 1;
  animation: fa-chart-bob ease-in-out infinite;
}

/* Vsaka pika: unikatna hitrost (2–3 s) in zamik (0–1.4 s), brez skupne sinhronizacije */


.fa-bento__cell:hover .fa-chart__dot:nth-of-type(1) {
  animation-duration: 2.3s;
  animation-delay: 0s;
}

.fa-bento__cell:hover .fa-chart__dot:nth-of-type(2) {
  animation-duration: 2.8s;
  animation-delay: -0.7s;
}

.fa-bento__cell:hover .fa-chart__dot:nth-of-type(3) {
  animation-duration: 2.1s;
  animation-delay: -1.2s;
}

.fa-bento__cell:hover .fa-chart__dot:nth-of-type(4) {
  animation-duration: 3.0s;
  animation-delay: -0.4s;
}

.fa-bento__cell:hover .fa-chart__dot:nth-of-type(5) {
  animation-duration: 2.5s;
  animation-delay: -1.0s;
}

.fa-bento__cell:hover .fa-chart__dot:nth-of-type(6) {
  animation-duration: 1.9s;
  animation-delay: -0.2s;
}

.fa-bento__cell:hover .fa-chart__dot:nth-of-type(7) {
  animation-duration: 2.6s;
  animation-delay: -0.9s;
}

@media (prefers-reduced-motion: reduce) {

  .fa-chart__line,
  .fa-chart__area,
  .fa-chart__dot,
  .fa-bento__cell:hover .fa-chart__line,
  .fa-bento__cell:hover .fa-chart__area,
  .fa-bento__cell:hover .fa-chart__dot {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
  }
}

/* ────────────────── SECTION RENDERING OPTIMIZATIONS ────────────────── */


#funkcionalnosti,
.fa-pillars-section,
#kurirji,
.fa-stripe-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}

/* Dark theme overrides for fa-trust and s-head inside fa-stripe-section */


.fa-stripe-section .s-head h2 {
  color: #fff;
}

.fa-stripe-section .s-head p {
  color: rgba(255, 255, 255, 0.65);
}

.fa-stripe-section .fa-trust__card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
}

.fa-stripe-section .fa-trust__card h3 {
  color: #fff;
}

.fa-stripe-section .fa-trust__card p {
  color: rgba(255, 255, 255, 0.65);
}

.fa-stripe-section .fa-trust__card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(189, 85, 215, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* 28. STRIPE-LIKE "WHAT'S HAPPENING" SECTION */


.fa-happening-section {
  background: var(--c-ink-0);
  border-top: 1px solid var(--c-ink-2);
  overflow: hidden;
}

.fa-happening-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-7);
}

.fa-happening-nav {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
  /* Align vertically with s-head spacing */
}

.fa-happening-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-ink-3);
  background: #ffffff;
  color: var(--c-ink-7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease-out);
}

.fa-happening-btn:hover {
  background: var(--c-purple-1);
  border-color: rgba(189, 85, 215, 0.3);
  color: var(--c-purple-7);
}

.fa-happening-btn svg {
  width: 20px;
  height: 20px;
}

.fa-happening-container {
  display: flex;
  gap: var(--sp-4);
  width: 100%;
  margin-bottom: var(--sp-5);
  align-items: stretch;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 380px;
}

.fa-happening-card {
  position: relative;
  height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-ink-2);
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    margin 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s ease;
  flex: 1 1 0%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

/* On desktop: graduated widths for first 4 positions, equal collapse for the rest */


@media (min-width: 768px) {
  .fa-happening-card.is-active {
    flex: 60 1 0%;
  }

  .fa-happening-card.is-next {
    flex: 12 1 0%;
  }

  .fa-happening-card.is-small {
    flex: 6 1 0%;
  }

  .fa-happening-card.is-smallest {
    flex: 3 1 0%;
  }

  .fa-happening-card.is-collapsed {
    flex: 2 1 0%;
    margin-left: -8px;
  }
}

/* On mobile, show only the active card */


@media (max-width: 767px) {
  .fa-happening-container {
    min-height: 250px;
  }

  .fa-happening-card {
    height: 250px;
  }

  .fa-happening-card.is-active {
    flex: 1 0 100%;
  }

  .fa-happening-card.is-next,
  .fa-happening-card.is-collapsed {
    display: none;
  }
}

/* Hover effects — expand slightly instead of lifting */



.fa-happening-card:not(.is-active):hover {
  flex-grow: 9 !important;
}

/* is-next rests at 12, so its hover must be higher than 12 */


.fa-happening-card.is-next:hover {
  flex-grow: 16 !important;
}

/* Cards 3+ are small — grow only a little on hover */


.fa-happening-card.is-small:hover {
  flex-grow: 8 !important;
}

.fa-happening-card.is-smallest:hover {
  flex-grow: 5 !important;
}

.fa-happening-card.is-collapsed:hover {
  flex-grow: 4 !important;
}

.fa-happening-card.is-active:hover {
  transform: none;
  flex-grow: 65 !important;
}

/* Premium gradient classes for fallback card backgrounds */


.fa-bg-wave {
  background: linear-gradient(135deg, #1b1725 0%, #3a1c5c 50%, #7e2f95 100%);
}

.fa-bg-interview {
  background: linear-gradient(135deg, #0d0c15 0%, #151f3c 100%);
}

.fa-bg-device {
  background: linear-gradient(135deg, #091a1e 0%, #0d3b37 100%);
}

.fa-bg-checklist {
  background: linear-gradient(135deg, #2c0e15 0%, #5d152c 100%);
}

/* Active card text details under the cards */


.fa-happening-details {
  margin-top: var(--sp-4);
  position: relative;
  overflow: hidden;
}

.fa-happening-details__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fa-happening-details__tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-purple-6);
  background: var(--c-purple-1);
  padding: 4px 10px;
  border-radius: 999px;
}

.fa-happening-details__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--c-ink-9);
  margin: 0;
  line-height: 1.3;
}

.fa-happening-details__excerpt {
  font-size: 0.98rem;
  color: var(--c-ink-6);
  line-height: 1.5;
  margin: 0 0 var(--sp-2) 0;
}

.fa-happening-details__btn {
  align-self: flex-start;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-purple-7);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--c-ink-3);
  background: #ffffff;
  transition: all 0.3s;
  text-decoration: none !important;
}

.fa-happening-details__btn:hover {
  background: var(--c-purple-1);
  border-color: rgba(189, 85, 215, 0.3);
  color: var(--c-purple-7);
}

.fa-happening-details__btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

.fa-happening-details__btn:hover svg {
  transform: translateX(4px);
}

/* Loop transition utility classes.
   Width is locked inline by JS; the card slides off the edge via a
   negative margin at full width and full opacity (Stripe-style). */


.fa-happening-card.is-vanishing-left,
.fa-happening-card.is-vanishing-right {
  pointer-events: none;
}

.fa-happening-card.is-vanishing-left:hover,
.fa-happening-card.is-vanishing-right:hover {
  transform: none;
}

.fa-happening-card.is-appearing {
  flex: 0 0 0% !important;
  width: 0px !important;
  border: none !important;
  margin: 0 !important;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   32. FA-SCALE — realistic warehouse: corrugated gable roof,
       glowing skylights, X-truss band, dense dark racking.
       Full-bleed; the hall fades into the dark ERP band below.
   ═══════════════════════════════════════════════════════════════ */



.fa-scale-section {
  padding-bottom: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, #ffffff 0%, rgba(255, 255, 255, 0.95) 30%, transparent 60%),
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.85) 0%, transparent 55%),
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.85) 0%, transparent 55%),
    radial-gradient(circle at 50% 65%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 5% 72%, rgba(255, 255, 255, 0.65) 0%, transparent 45%),
    radial-gradient(circle at 95% 72%, rgba(255, 255, 255, 0.65) 0%, transparent 45%),
    radial-gradient(circle at 50% 38%, rgba(14, 165, 233, 0.35) 0%, transparent 60%),
    linear-gradient(180deg, #e0f2fe 0%, #bae6fd 35%, #7dd3fc 60%, #38bdf8 100%);
}

.fa-scale {
  position: relative;
  margin-top: var(--sp-6);
}

.fa-scale__roof-svg {
  display: block;
  width: 100%;
  height: clamp(90px, 9.6vw, 150px);
  background: transparent;
}

/* --- Hall interior --- */


.fa-scale__hall {
  position: relative;
  background: linear-gradient(180deg, #1c1626 0%, #181321 45%, #14111a 100%);
  padding: 0;
}

/* Skylight light cones falling onto the racks */


.fa-scale__hall::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(26% 70% at 31.25% 0%, rgba(248, 244, 252, 0.16) 0%, transparent 70%),
    radial-gradient(26% 70% at 68.75% 0%, rgba(248, 244, 252, 0.16) 0%, transparent 70%),
    radial-gradient(18% 50% at 6.25% 0%, rgba(248, 244, 252, 0.09) 0%, transparent 70%),
    radial-gradient(18% 50% at 93.75% 0%, rgba(248, 244, 252, 0.09) 0%, transparent 70%),
    radial-gradient(60% 45% at 50% 100%, rgba(126, 47, 149, 0.10) 0%, transparent 75%);
  pointer-events: none;
}

.fa-scale__warehouse {
  position: relative;
  height: 372px;
  overflow: hidden;
}

/* ── Rows for 3D depth ── */


.fa-scale__row {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(8px, 1vw, 18px);
  width: 100%;
}

.fa-scale__row--back {
  transform: scale(1) translateY(0);
  opacity: 0.65;
  filter: brightness(0.65);
  z-index: 1;
}

.fa-scale__row--middle {
  transform: scale(1) translateY(0);
  opacity: 0.85;
  filter: brightness(0.8);
  z-index: 2;
}

.fa-scale__row--front {
  transform: scale(1) translateY(0);
  opacity: 1;
  z-index: 3;
}

/* Concrete floor strip fading seamlessly into the next dark section */


.fa-scale__hall::after {
  content: "";
  display: block;
  height: 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, transparent 35%),
    linear-gradient(180deg, #1c1625 0%, #14111a 100%);
  position: relative;
  z-index: 5;
  margin-bottom: -2px;
  /* overlaps the next section to prevent subpixel blue lines */
}

/* ── Rack: slim dark steel with purple rim light ── */


.fa-scale__rack {
  position: relative;
  flex: 0 0 clamp(150px, 12vw, 210px);
  height: 352px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.fa-scale__rack::before,
.fa-scale__rack::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 12px,
      rgba(255, 255, 255, 0.14) 12px 14px,
      transparent 14px 19px),
    linear-gradient(90deg, #2c2437 0%, #5f5172 40%, #8a76a1 50%, #463b55 60%, #241d2e 100%);
  border-radius: 1px;
  z-index: 2;
}

.fa-scale__rack::before {
  left: 0;
}

.fa-scale__rack::after {
  right: 0;
}

.fa-scale__level {
  height: 86px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(3px, 0.45vw, 7px);
  padding: 0 12px 7px;
  box-sizing: border-box;
}

/* Shelf beam: slim, rim-lit on top */


.fa-scale__level::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
  height: 5px;
  background: linear-gradient(180deg, #7a6991 0%, #4a3f5a 45%, #2a2336 100%);
  border-radius: 1px;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* Shadow under each shelf level for depth */


.fa-scale__level::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 5px;
  height: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, transparent 100%);
  pointer-events: none;
}

/* ── Cardboard boxes, softly lit ── */


.fa-scale__box {
  width: 27px;
  height: 35px;
  background: linear-gradient(165deg, #e2cda8 0%, #cdb084 55%, #b3925f 100%);
  border: 1px solid rgba(120, 95, 60, 0.85);
  border-radius: 1.5px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 1;
  min-width: 13px;
  box-shadow:
    0 3px 6px -2px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  opacity: 0;
  transform: translateY(-14px) scale(0.88);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition:
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.34, 1.45, 0.5, 1);
  z-index: 0;
}

.fa-scale__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 5px;
  height: 100%;
  background: rgba(20, 17, 26, 0.12);
}

.fa-scale__box--wide {
  width: 38px;
  height: 30px;
}

.fa-scale__box--low {
  height: 26px;
}

.fa-scale__box.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Floating glass slider panel over the roof/hall junction ── */


.fa-scale__controls {
  position: absolute;
  left: 50%;
  top: clamp(86px, 9.2vw, 136px);
  transform: translateX(-50%);
  width: min(520px, calc(100% - 48px));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 28px 70px -28px rgba(0, 0, 0, 0.7),
    0 4px 14px rgba(126, 47, 149, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  z-index: 5;
}

.fa-scale__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}

.fa-scale__label {
  font-weight: 600;
  color: var(--c-ink-8);
  font-size: 0.95rem;
}

.fa-scale__count {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-purple-7);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fa-scale__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--c-purple-2), var(--c-purple-3));
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.fa-scale__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--c-purple-5), var(--c-purple-7));
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 3px 10px rgba(126, 47, 149, 0.45);
  transition: transform 0.1s ease;
  cursor: grab;
}

.fa-scale__slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.fa-scale__slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--c-purple-5), var(--c-purple-7));
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 3px 10px rgba(126, 47, 149, 0.45);
  cursor: grab;
}

.fa-scale__status {
  text-align: center;
  margin-top: var(--sp-3);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-ink-6);
  transition: color 0.3s;
}

.fa-scale__status[data-tier="2"] {
  color: var(--c-purple-6);
}

.fa-scale__status[data-tier="3"] {
  color: var(--c-purple-8);
}

.fa-scale-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: var(--sp-5);
  position: relative;
  z-index: 10;
  width: 100%;
}

#faDemoBtn {
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#faDemoBtn.is-interacting {
  transition: all 0.1s ease;
  transform: scale(1.05);
  background: var(--c-purple-1) !important;
  border-color: var(--c-purple-5) !important;
  color: var(--c-purple-7) !important;
  box-shadow: 0 0 18px rgba(126, 47, 149, 0.3);
}



@media (max-width: 500px) {
  .fa-scale-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2.5);
  }

  .fa-scale-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .fa-scale__warehouse {
    height: 290px;
  }

  .fa-scale__rack {
    height: 272px;
    flex-basis: clamp(130px, 38vw, 180px);
  }

  .fa-scale__level {
    height: 66px;
    padding: 0 8px 5px;
  }

  .fa-scale__box {
    width: 20px;
    height: 27px;
  }

  .fa-scale__box--wide {
    width: 27px;
    height: 23px;
  }

  .fa-scale__box--low {
    height: 20px;
  }

  .fa-scale__controls {
    padding: var(--sp-4) var(--sp-5);
    top: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fa-scale__box {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   33. FA-TRUST VISUALS — coded mini-graphics inside trust cards
   ═══════════════════════════════════════════════════════════════ */



.fa-trust__visual {
  margin-top: var(--sp-4);
  background: #fbf8fd;
  border: 1px solid rgba(126, 47, 149, 0.10);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}

/* Onboarding timeline */


.fa-onb__track {
  display: flex;
  align-items: center;
}

.fa-onb__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--c-purple-3);
  flex-shrink: 0;
}

.fa-onb__dot.is-done {
  background: var(--c-purple-6);
  border-color: var(--c-purple-6);
}

.fa-onb__dot.is-pulse {
  background: #1d9d5f;
  border-color: #1d9d5f;
  position: relative;
}

.fa-onb__dot.is-pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid #1d9d5f;
  opacity: 0;
  animation: fa-onb-pulse 2.4s ease-out infinite;
}

@keyframes fa-onb-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }

  70%,
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.fa-onb__line {
  flex: 1;
  height: 2.5px;
  background: var(--c-purple-2);
}

.fa-onb__line.is-done {
  background: var(--c-purple-6);
}

.fa-onb__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--c-ink-6);
  letter-spacing: 0.02em;
}

/* Black Friday spike chart */


.fa-bf__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 74px;
}

.fa-bf__bars>span {
  flex: 1;
  height: var(--h, 30%);
  background: var(--c-purple-2);
  border-radius: 3px 3px 0 0;
  transition: height 0.4s var(--ease-out);
}

.fa-bf__bars>.fa-bf__bar--peak {
  background: linear-gradient(180deg, var(--c-purple-5), var(--c-purple-7));
  position: relative;
}

.fa-bf__flag {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-65%);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-purple-7);
  background: #fff;
  border: 1px solid rgba(126, 47, 149, 0.25);
  border-radius: 999px;
  padding: 1px 8px;
  box-shadow: 0 1px 4px rgba(126, 47, 149, 0.15);
}

.fa-bf {
  padding-top: calc(var(--sp-3) + 18px);
}

.fa-trust__card:hover .fa-bf__bars>span:not(.fa-bf__bar--peak) {
  height: calc(var(--h, 30%) * 1.12);
}

.fa-bf__base {
  display: flex;
  justify-content: space-between;
  border-top: 1.5px solid rgba(126, 47, 149, 0.15);
  margin-top: 0;
  padding-top: 5px;
  font-size: 0.64rem;
  font-weight: 600;
  /* ink-6 namesto ink-5: 5.7:1 kontrast (WCAG AA), ink-5 je 2.6:1 */
  color: var(--c-ink-6);
}

/* Security checklist */


.fa-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fa-sec__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-ink-7);
}

.fa-sec__row svg {
  width: 14px;
  height: 14px;
  color: #1d9d5f;
  flex-shrink: 0;
  background: #e8faf2;
  border-radius: 50%;
  padding: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fa-onb__dot.is-pulse::after {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   33. PERFORMANCE OPTIMIZATIONS (Lazy-Rendering)
   Instructs browser to skip layout & paint for off-screen sections.
   ═══════════════════════════════════════════════════════════════ */



.fa-pillars-section,
#kurirji,
.fa-scale-section,
.fa-stripe-section,
.fa-happening-section,
.fa-cta-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* ═══════════════════════════════════════════════════════════════
   35. FA-SHIFT — "Prej / Zdaj" primerjava (3PL angle)
       Dve kartici (problem → rešitev) + vrstica koristi.
   ═══════════════════════════════════════════════════════════════ */


.fa-shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--sp-4);
  max-width: 980px;
  margin: 0 auto;
}

.fa-shift__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border: 1px solid var(--c-ink-3);
  background: #fff;
}

.fa-shift__card--before {
  background: #fbfbfc;
}

.fa-shift__card--after {
  border-color: var(--c-purple-3);
  background: linear-gradient(165deg, #ffffff 0%, #faf2ff 100%);
  box-shadow: 0 26px 52px -30px rgba(189, 85, 215, 0.5);
}

.fa-shift__head {
  margin-bottom: var(--sp-5);
}

.fa-shift__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--c-ink-2);
  color: var(--c-ink-6);
}

.fa-shift__tag--after {
  background: var(--c-purple-1);
  color: var(--c-purple-7);
}

.fa-shift__sub {
  display: block;
  margin-top: 10px;
  color: var(--c-ink-6);
  font-size: .9rem;
}

.fa-shift__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fa-shift__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.45;
  font-size: .95rem;
}

.fa-shift__list li svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 1px;
}

.fa-shift__card--before li {
  color: var(--c-ink-6);
}

.fa-shift__card--before li svg {
  color: var(--c-ink-5);
}

.fa-shift__card--after li {
  color: var(--c-ink-9);
}

.fa-shift__card--after li svg {
  color: var(--c-purple-5);
}

.fa-shift__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-purple-4);
}

.fa-shift__arrow svg {
  width: 34px;
  height: 34px;
}

.fa-shift__wins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-7);
}

.fa-shift__win {
  text-align: center;
}

.fa-shift__win strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--c-purple-6);
  line-height: 1;
}

.fa-shift__win span {
  display: block;
  margin-top: 7px;
  color: var(--c-ink-6);
  font-size: .86rem;
  max-width: 22ch;
}

@media (max-width: 760px) {
  .fa-shift {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .fa-shift__arrow {
    transform: rotate(90deg);
    padding: 2px 0;
  }
}

/* ════════════════════════════════════════════════════════════
   SECTION 36 — Searchable carrier directory (.fa-carriers)
   ════════════════════════════════════════════════════════════ */
.fa-carriers {
  max-width: 880px;
  margin: var(--sp-6) auto 0;
}

.fa-carriers__search {
  position: relative;
  max-width: 460px;
  margin: 0 auto var(--sp-5);
}

.fa-carriers__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--c-ink-5);
  pointer-events: none;
}

.fa-carriers__input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-ink-9);
  background: #fff;
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-lg);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.fa-carriers__input::placeholder {
  color: var(--c-ink-5);
}

.fa-carriers__input:focus {
  border-color: var(--c-purple-5);
  box-shadow: 0 0 0 3px rgba(189, 85, 215, 0.15);
}

.fa-carriers__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-3);
  max-height: 188px;
  overflow: hidden;
  transition: max-height .35s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  padding: 6px;
  margin: -6px;
}

/* Razprto (gumb "Prikaži vse"): pokaži vse, brez bledenja */
.fa-carriers.is-open .fa-carriers__grid {
  max-height: 2400px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Med iskanjem: nekaj več vrstic, ostalo se drsno pomakne */
.fa-carriers.is-searching .fa-carriers__grid {
  max-height: 420px;
  overflow-y: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

.fa-carriers__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Filter iskanja: razred .fa-carriers__card premaga atribut [hidden], zato ga moramo eksplicitno skriti */
.fa-carriers__card[hidden] {
  display: none;
}

.fa-carriers__card:hover {
  border-color: var(--c-purple-3);
  box-shadow: 0 4px 14px rgba(90, 29, 108, 0.08);
  transform: translateY(-1px);
}

.fa-carriers__logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
}

/* Prava slika logotipa: nevtralna bela ploščica, logo se prilega znotraj */
.fa-carriers__logo--img {
  background: #fff;
  border: 1px solid var(--c-ink-3);
  padding: 5px;
}

.fa-carriers__logo--img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.fa-carriers__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fa-carriers__name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--c-ink-9);
  line-height: 1.2;
}

.fa-carriers__country {
  font-size: 0.74rem;
  /* ink-6 namesto ink-5: 5.7:1 kontrast na beli (WCAG AA), ink-5 je 2.6:1 */
  color: var(--c-ink-6);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fa-carriers__empty {
  text-align: center;
  color: var(--c-ink-6);
  font-size: 0.92rem;
  margin: var(--sp-5) 0 0;
}

.fa-carriers__toggle {
  display: block;
  margin: var(--sp-4) auto 0;
  padding: 9px 20px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-purple-7);
  background: transparent;
  border: 1px solid var(--c-purple-3);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.fa-carriers__toggle:hover {
  background: var(--c-purple-1);
  border-color: var(--c-purple-5);
}

/* Med iskanjem gumb "Prikaži vse" ni potreben */
.fa-carriers.is-searching .fa-carriers__toggle {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  .fa-carriers__grid,
  .fa-carriers__card {
    transition: none;
  }
}

/* Ensure hero text and CTAs stay on top of the monitor container and backdrop blur filters */
.hero__inner {
  position: relative;
  z-index: 10 !important;
}

.fa-mockup-in:has(.hero__monitor-container)::before {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse 65% 90% at 50% 50%, #000 35%, rgba(0, 0, 0, 0.4) 60%, transparent 80%) !important;
  mask-image: radial-gradient(ellipse 65% 90% at 50% 50%, #000 35%, rgba(0, 0, 0, 0.4) 60%, transparent 80%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Parallax background wrapper for hardware-accelerated smooth scrolling */
.hero__bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  background: url('../assets/warehouse_q50.webp') center/cover no-repeat;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 80%);
}

/* Na telefonu zadošča 900px verzija (38KB namesto 110KB) — LCP element na mobile.
   Breakpoint mora ostati usklajen s preload media atributi v index.html. */
@media (max-width: 768px) {
  .hero__bg {
    background-image: url('../assets/warehouse_q50_mobile.webp');
  }
}

/* Force clip on hero to contain the hardware-accelerated parallax background only on English page */
html[lang="en"] .hero {
  overflow: hidden !important;
}

/* Pull the MetaKocka 17 years social proof strip onto the monitor desk as a glass overlay only on English page */
html[lang="en"] .fa-proof {
  position: relative;
  z-index: 6 !important; /* Stack above the monitor container (z-index 5) */
  margin-top: 0 !important; /* Sit naturally right under the logos strip without overlapping it */
  padding: var(--sp-4) 0 1.4vw 0 !important; /* Adjusted bottom padding to cover the wooden desk edge exactly */
  /* Make the glass background whiter and more opaque to increase text contrast against the dark table */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.68) 0%,
    rgba(255, 255, 255, 0.82) 50%,
    rgba(255, 255, 255, 0.68) 100%) !important;
}

/* Isolated English page toast notification alignment on monitor mockup screen */
html[lang="en"] .hero__monitor-container .toast-stack {
  top: calc(35.20% + 20px) !important;
  right: calc(31.3% + 20px) !important;
  width: 240px !important;
}

/* ════════════════ HERO MONITOR MOCKUP ════════════════ */

.hero__monitor-container {
  --monitor-w: 112vw;
  --monitor-h: calc(var(--monitor-w) * 571 / 1024);
  --screen-w: calc(var(--monitor-w) * 0.3725);
  --screen-h: calc(var(--monitor-h) * 0.3984);

  position: relative;
  /* Pull the monitor up to cancel the transparent space above the bezel in the source image */
  margin-top: calc(var(--sp-4) - (var(--monitor-h) * 0.355));
  width: var(--monitor-w);
  max-width: var(--monitor-w);
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 1024 / 571;
  z-index: 5;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.18));
}

.hero__monitor-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  object-fit: fill; /* Avoid rounding mismatch */
}

.hero__monitor-screen {
  position: absolute;
  top: 35.20%;
  left: 31.45%;
  width: 37.25%;
  height: 39.84%;
  z-index: 1;
  overflow: hidden;
  background: #f8fafc;
  container-type: size; /* Enable container query units cqw and cqh */
}

/* Notranjost ekrana: UI je kodiran v fiksni "oblikovalski" širini (1150px),
   JS (initMonitorScale v main.js) pa jo s transform: scale proporcionalno
   pomanjša točno na velikost ekrana. Višina se preračuna iz istega faktorja,
   zato je spodnji rob UI-ja vedno zaklenjen na spodnji rob ekrana — pri
   kateri koli širini okna, brez prekrivanja elementov. */
.hero__monitor-screen-inner {
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
}

/* Skrito do prvega skaliranja (initMonitorScale v main.js jo razkrije) —
   neskaliran 1150px UI bi ob prvem izrisu poskočil in dvignil CLS.
   Gated na html.js, da brez JavaScripta vsebina ne ostane skrita. */
html.js .hero__monitor-screen-inner {
  visibility: hidden;
}

.hero__monitor-screen-inner .app-shell {
  flex: 1;
  min-height: 0;
  border-radius: 0;
}

/* Scoped English page logo pull-up to overlay keyboard/mouse area */
html[lang="en"] .fa-logos {
  z-index: 6 !important; /* Render above the monitor container (z-index 5) */
  margin-top: -9.5vw !important; /* Pull up onto the desk */
  padding: var(--sp-4) 0 !important;
}

/* ── A11y kontrast: primarni CTA gumbi ──────────────────────────────
   Bel tekst na purple-5 je 3.9:1 (pod WCAG AA 4.5:1) — PageSpeed flag.
   purple-6 ozadje = 5.3:1, hover purple-7 = 7.7:1. Velja samo za gumbe;
   ostali akcenti (naslovi, ikone, obrobe) ostanejo na brand purple-5. */
.btn--primary {
  background: var(--c-purple-6);
}

.btn--primary:hover {
  background: var(--c-purple-7);
}

/* ── Mobile LCP/TBT: preskoči izris sekcij pod pregibom ─────────────
   PageSpeed mobile: 772ms Style & Layout na 3602-elementnem DOM-u je
   glavni "render delay" LCP-ja. content-visibility:auto izriše sekcijo
   šele, ko se približa vidnemu polju; contain-intrinsic-size drži oceno
   višine za scrollbar ('auto' si po prvem izrisu zapomni pravo mero).
   Sidra (#funkcionalnosti, #kurirji) delujejo — izris se sproži ob skoku.
   Samo mobile: na desktopu je izris poceni, tveganje pa nepotrebno. */
@media (max-width: 768px) {
  #funkcionalnosti,
  .fa-pillars-section,
  .fa-shift-section,
  #kurirji,
  .fa-scale-section,
  .fa-stripe-section,
  .fa-happening-section,
  .fa-cta-section,
  footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
  }

  /* Ocene višin izmerjene pri 375px (EN landing) — točnejše kot pavšal,
     da skoki na sidra (#kurirji ipd.) pristanejo na pravem mestu.
     Po prvem izrisu si 'auto' zapomni dejansko mero. */
  #funkcionalnosti { contain-intrinsic-size: auto 5100px; }
  .fa-pillars-section { contain-intrinsic-size: auto 1950px; }
  .fa-shift-section { contain-intrinsic-size: auto 1500px; }
  #kurirji { contain-intrinsic-size: auto 660px; }
  .fa-scale-section { contain-intrinsic-size: auto 2200px; }
  .fa-stripe-section { contain-intrinsic-size: auto 1330px; }
  .fa-happening-section { contain-intrinsic-size: auto 910px; }
  .fa-cta-section { contain-intrinsic-size: auto 570px; }
  footer { contain-intrinsic-size: auto 1430px; }
}