.homepage-full-preview .primary-pathway-grid .flagship-flow-card {
  background-color: #090c14;
  background-image:
    radial-gradient(circle at 78% 12%, rgba(37, 63, 246, 0.22), transparent 30%),
    linear-gradient(145deg, #0b0f1b, #07080d 70%);
  background-position: center;
  background-size: auto;
}

.homepage-full-preview .primary-pathway-grid .flagship-flow-card.food-ingredients-primary {
  background-image:
    radial-gradient(circle at 22% 12%, rgba(116, 152, 253, 0.19), transparent 30%),
    linear-gradient(145deg, #0c101c, #08090e 70%);
}

.homepage-full-preview .primary-pathway-grid .flagship-flow-card.food-beverage-primary {
  background-image:
    radial-gradient(circle at 78% 15%, rgba(202, 239, 86, 0.12), transparent 28%),
    radial-gradient(circle at 18% 22%, rgba(37, 63, 246, 0.16), transparent 30%),
    linear-gradient(145deg, #0b1020, #07080d 72%);
}

.homepage-full-preview .primary-pathway-grid .flagship-flow-card.manufacturing-primary {
  background-image:
    radial-gradient(circle at 48% 10%, rgba(116, 152, 253, 0.18), transparent 32%),
    linear-gradient(145deg, #11141c, #07080d 72%);
}

.homepage-full-preview .primary-pathway-grid .flagship-flow-card::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.76;
}

.homepage-full-preview .primary-pathway-grid .flagship-flow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  color: transparent;
  background: linear-gradient(180deg, transparent 0 36%, rgba(7, 8, 13, 0.24) 54%, rgba(7, 8, 13, 0.96) 82%);
  font-size: 0;
  letter-spacing: 0;
  pointer-events: none;
}

.homepage-full-preview .flagship-flow-visual {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 62%;
  pointer-events: none;
}

.homepage-full-preview .flagship-flow-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.homepage-full-preview .flagship-flow-content {
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.homepage-full-preview .flagship-flow-content span,
.homepage-full-preview .flagship-flow-content p,
.homepage-full-preview .flagship-flow-content strong {
  position: relative;
  z-index: 3;
}

.homepage-full-preview .flow-grid path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.homepage-full-preview .flow-label {
  fill: rgba(255, 255, 255, 0.48);
  font-family: var(--font-secondary);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.homepage-full-preview .flow-primary-label {
  fill: rgba(255, 255, 255, 0.62);
}

.homepage-full-preview .flow-unit-label {
  fill: rgba(255, 255, 255, 0.8);
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 800;
}

.homepage-full-preview .flow-outcome-label {
  fill: #090c12;
  font-family: var(--font-secondary);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.homepage-full-preview .flow-path {
  fill: none;
  stroke: var(--sky-mist);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.homepage-full-preview .flow-muted {
  stroke: rgba(157, 164, 179, 0.55);
}

.homepage-full-preview .flow-channel {
  stroke-width: 2.4;
}

.homepage-full-preview .flow-checkpoint {
  fill: #0c101c;
  stroke: var(--sky-mist);
  stroke-width: 3;
}

.homepage-full-preview .flow-unit,
.homepage-full-preview .flow-batch,
.homepage-full-preview .flow-component {
  fill: rgba(37, 63, 246, 0.48);
  stroke: var(--sky-mist);
  stroke-width: 1.5;
}

.homepage-full-preview .flow-neutral {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.32);
}

.homepage-full-preview .flow-record rect,
.homepage-full-preview .flow-window {
  fill: rgba(255, 255, 255, 0.035);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
}

.homepage-full-preview .flow-record path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.48);
  stroke-width: 1.5;
}

.homepage-full-preview .flow-gate path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
}

.homepage-full-preview .flow-freshness {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.2;
  opacity: 0.74;
}

.homepage-full-preview .flow-lot {
  fill: rgba(116, 152, 253, 0.36);
  stroke: var(--sky-mist);
  stroke-width: 1.5;
}

.homepage-full-preview .flow-availability path {
  fill: none;
  stroke: var(--sky-mist);
  stroke-width: 7;
}

.homepage-full-preview .flow-sequence rect {
  fill: rgba(116, 152, 253, 0.16);
  stroke: var(--sky-mist);
  stroke-width: 1.5;
}

.homepage-full-preview .flow-continuity,
.homepage-full-preview .flow-status {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3;
}

.homepage-full-preview .flow-outcome {
  fill: var(--lime);
}

.homepage-full-preview .flow-system {
  transform-origin: center;
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card:not(.is-flow-active) .flow-path {
  opacity: 0.18;
  stroke-dasharray: var(--flow-dash, 300);
  stroke-dashoffset: var(--flow-dash, 300);
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card.is-flow-active .flow-path {
  animation: flagship-draw-path 1.15s cubic-bezier(0.4, 0, 0.2, 1) var(--flow-delay, 0s) both;
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card:not(.is-flow-active) .flow-node {
  opacity: 0.12;
  transform: scale(0.45);
  transform-origin: center;
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card.is-flow-active .flow-node {
  animation: flagship-node-resolve 0.52s ease-out var(--flow-delay, 0.2s) both;
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card:not(.is-flow-active) .flow-system {
  opacity: 0.16;
  transform: translateY(8px);
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card.is-flow-active .flow-system {
  animation: flagship-layer-settle 0.68s cubic-bezier(0.2, 0.72, 0.2, 1) var(--flow-delay, 0.3s) both;
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card:not(.is-flow-active) .flow-outcome,
.flagship-flow-js .homepage-full-preview .flagship-flow-card:not(.is-flow-active) .flow-outcome-label,
.flagship-flow-js .homepage-full-preview .flagship-flow-card:not(.is-flow-active) .flow-status,
.flagship-flow-js .homepage-full-preview .flagship-flow-card:not(.is-flow-active) .flow-continuity {
  opacity: 0.08;
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card.is-flow-active .flow-outcome,
.flagship-flow-js .homepage-full-preview .flagship-flow-card.is-flow-active .flow-outcome-label,
.flagship-flow-js .homepage-full-preview .flagship-flow-card.is-flow-active .flow-status,
.flagship-flow-js .homepage-full-preview .flagship-flow-card.is-flow-active .flow-continuity {
  animation: flagship-outcome-resolve 0.7s ease-out 1.45s both;
}

.flagship-flow-js .homepage-full-preview .flagship-flow-card.is-flow-active .flow-freshness {
  animation: flagship-quiet-pulse 1.2s ease-out 1.05s both;
}

@keyframes flagship-draw-path {
  from { opacity: 0.18; stroke-dasharray: var(--flow-dash, 300); stroke-dashoffset: var(--flow-dash, 300); }
  to { opacity: 1; stroke-dasharray: var(--flow-dash, 300); stroke-dashoffset: 0; }
}

@keyframes flagship-node-resolve {
  from { opacity: 0.12; transform: scale(0.45); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes flagship-layer-settle {
  from { opacity: 0.16; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flagship-outcome-resolve {
  from { opacity: 0.08; }
  to { opacity: 1; }
}

@keyframes flagship-quiet-pulse {
  0% { opacity: 0.25; }
  45% { opacity: 1; }
  100% { opacity: 0.74; }
}

@media (max-width: 820px) {
  .homepage-full-preview .flagship-flow-visual {
    height: 56%;
  }

  .homepage-full-preview .flagship-flow-visual svg {
    width: 100%;
    max-width: none;
    transform: none;
  }

  .homepage-full-preview .flagship-flow-visual::before,
  .homepage-full-preview .flagship-flow-visual::after {
    position: absolute;
    z-index: 2;
    font-family: var(--font-secondary);
    font-weight: 820;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .homepage-full-preview .flagship-flow-visual::before {
    content: attr(data-flow-start);
    top: 18px;
    left: 22px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.58rem;
  }

  .homepage-full-preview .flagship-flow-visual::after {
    content: attr(data-flow-outcome);
    top: 64px;
    right: 18px;
    max-width: 86px;
    padding: 10px 9px;
    color: #090c12;
    background: var(--lime);
    border-radius: 5px;
    box-shadow: 0 0 14px rgba(202, 239, 86, 0.2);
    font-size: 0.56rem;
    line-height: 1.15;
    text-align: center;
  }

  .homepage-full-preview .flagship-flow-visual .flow-label,
  .homepage-full-preview .flagship-flow-visual .flow-outcome,
  .homepage-full-preview .flagship-flow-visual .flow-outcome-label,
  .homepage-full-preview .flagship-flow-visual .flow-status {
    display: none;
  }

  .homepage-full-preview .flow-mobile-emphasis {
    stroke-width: 3;
  }
}

@media (max-width: 760px) {
  .homepage-full-preview .flagship-flow-visual {
    height: 53%;
  }

  .homepage-full-preview .flagship-flow-content p {
    max-width: 34ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-full-preview .flagship-flow-card,
  .homepage-full-preview .flagship-flow-card *,
  .homepage-full-preview .flagship-flow-card::before,
  .homepage-full-preview .flagship-flow-card::after {
    animation: none !important;
    transition: none !important;
  }

  .homepage-full-preview .flagship-flow-card .flow-path {
    opacity: 1 !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  .homepage-full-preview .flagship-flow-card .flow-node,
  .homepage-full-preview .flagship-flow-card .flow-system,
  .homepage-full-preview .flagship-flow-card .flow-outcome,
  .homepage-full-preview .flagship-flow-card .flow-outcome-label,
  .homepage-full-preview .flagship-flow-card .flow-status,
  .homepage-full-preview .flagship-flow-card .flow-continuity {
    opacity: 1 !important;
    transform: none !important;
  }
}