/* ==========================================================================
   Hero line-art schematic — Webflow Component
   Governed transaction flow animation. Self-contained; token fallbacks.
   ========================================================================== */

.bd-hero-lineart,
.bd-hero-lineart * {
  box-sizing: border-box;
}

.bd-hero-lineart {
  --bd-hl-ink: var(--bd-text, #000);
  --bd-hl-ink-2: var(--bd-text-2, #252b37);
  --bd-hl-green: var(--bd-success, #079455);
  --bd-hl-faint: #c7c7d3;
  --bd-hl-line: #a6a6b6;
  --bd-hl-unit-fill: rgba(255, 255, 255, 0.25);
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: var(--bd-font, InterVariable, sans-serif);
  font-feature-settings: "liga" 1, "calt" 1, "cv02", "cv03", "cv04", "cv11";
  font-optical-sizing: auto;
  pointer-events: none;
  user-select: none;
}

.bd-hero-lineart__stage {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.bd-hero-lineart__frame {
  width: 100%;
  min-width: 0;
}

.bd-hero-lineart__scene {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.bd-hero-lineart__deco {
  stroke: #fff;
  fill: none;
}

.bd-hero-lineart__path-base {
  stroke: var(--bd-hl-line);
  stroke-linecap: round;
  stroke-dasharray: 2 2;
}

.bd-hero-lineart__path-trail {
  stroke: var(--bd-hl-ink);
}

.bd-hero-lineart__ticks {
  stroke: var(--bd-hl-line);
}

.bd-hero-lineart__unit {
  fill: var(--bd-hl-unit-fill);
  stroke: var(--bd-hl-faint);
  stroke-width: 1;
  stroke-linecap: round;
  transition: stroke 320ms ease-out, fill 320ms ease-out;
}

.bd-hero-lineart__unit--dot {
  stroke-dasharray: 2 2;
}

.bd-hero-lineart__unit--on,
.bd-hero-lineart__unit.on {
  stroke: var(--bd-hl-ink);
}

.bd-hero-lineart__unit--done,
.bd-hero-lineart__unit.done {
  stroke: var(--bd-hl-ink-2);
}

.bd-hero-lineart__halo {
  fill: none;
  stroke: var(--bd-hl-ink);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 340ms ease-out;
}

.bd-hero-lineart__halo.on {
  opacity: 0.55;
}

.bd-hero-lineart__halo--accent {
  stroke: var(--bd-hl-green);
}

.bd-hero-lineart__net-halos .bd-hero-lineart__halo {
  opacity: 0;
}

.bd-hero-lineart__net-halos.on .bd-hero-lineart__halo {
  opacity: 0.55;
}

.bd-hero-lineart__net-halos.on {
  transform-origin: 245px 340px;
  animation: bd-hl-net-halos-spin 42s linear infinite;
}

@keyframes bd-hl-net-halos-spin {
  to {
    transform: rotate(360deg);
  }
}

.bd-hero-lineart__eyeb {
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--bd-hl-ink-2);
}

.bd-hero-lineart__instr {
  font-size: 12px;
  font-weight: 400;
  fill: var(--bd-hl-ink);
}

.bd-hero-lineart__lbl {
  font-size: 13px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  fill: var(--bd-hl-faint);
  transition: fill 320ms ease-out;
}

.bd-hero-lineart__lbl--sm {
  font-size: 12px;
}

.bd-hero-lineart__lbl.on {
  fill: var(--bd-hl-ink);
}

.bd-hero-lineart__lbl--done,
.bd-hero-lineart__lbl.done {
  fill: var(--bd-hl-ink-2);
}

.bd-hero-lineart__sub {
  font-size: 11px;
  font-weight: 400;
  fill: var(--bd-hl-ink-2);
}

.bd-hero-lineart__chip {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bd-hero-lineart__ico {
  fill: none;
  stroke: var(--bd-hl-faint);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 320ms ease-out;
}

.bd-hero-lineart__ico :is(path, circle, line, rect, ellipse, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

.bd-hero-lineart__ico.on {
  stroke: var(--bd-hl-ink);
}

.bd-hero-lineart__ico--svg {
  stroke: none;
  color: var(--bd-hl-faint);
  transition: color 320ms ease-out;
}

.bd-hero-lineart__ico--svg.on {
  color: var(--bd-hl-ink);
}

.bd-hero-lineart__ico--svg.done {
  color: var(--bd-hl-ink-2);
}

.bd-hero-lineart__ico-svg {
  display: block;
  overflow: visible;
}

.bd-hero-lineart__ico-svg :is(path, circle, line, rect, ellipse, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

.bd-hero-lineart__ico--done,
.bd-hero-lineart__ico.done {
  stroke: var(--bd-hl-ink-2);
}

.bd-hero-lineart__flip {
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  transform-box: fill-box;
  transform-origin: center;
}

.bd-hero-lineart__flip.out {
  opacity: 0;
  transform: translateY(4px);
}

.bd-hero-lineart__tick {
  fill: var(--bd-hl-faint);
  transition: fill 260ms ease-out;
}

.bd-hero-lineart__tick.f {
  fill: var(--bd-hl-ink);
}

.bd-hero-lineart__appear {
  opacity: 0;
  transition: opacity 380ms ease-out;
}

.bd-hero-lineart__appear.show {
  opacity: 1;
}

.bd-hero-lineart__dot-bg {
  fill: var(--bd-bg, #fff);
  stroke: none;
}

.bd-hero-lineart__dot {
  fill: var(--bd-hl-ink);
}

.bd-hero-lineart__dot-ring {
  stroke: var(--bd-hl-ink);
}

#bd-hl-net-logo {
  color: var(--bd-hl-faint);
  transition: color 320ms ease-out;
}

#bd-hl-u-net.on ~ #bd-hl-net-logo {
  color: var(--bd-hl-ink);
}

#bd-hl-u-net.done ~ #bd-hl-net-logo {
  color: var(--bd-hl-ink-2);
}

@media (max-width: 1199px) {
  .bd-hero-lineart__frame {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-hero-lineart__unit,
  .bd-hero-lineart__halo,
  .bd-hero-lineart__lbl,
  .bd-hero-lineart__ico,
  .bd-hero-lineart__flip,
  .bd-hero-lineart__tick,
  .bd-hero-lineart__appear {
    transition: none;
  }

  .bd-hero-lineart__net-halos.on {
    animation: none;
  }
}
