.wdw-flow-v1,
.wdw-flow-v1 * { box-sizing: border-box; }

.wdw-flow-v1 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 118px 24px 128px;
  color:var(--wdw-text-primary);
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb,var(--wdw-ambient-glow-primary) 10%,transparent), transparent 28%),
    linear-gradient(180deg, var(--wdw-container-bg) 0%, var(--wdw-container-bg) 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.wdw-flow-v1__ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wdw-flow-v1__glow { position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(90px); opacity: .16; }
.wdw-flow-v1__glow--one { left: -220px; top: 22%; background:color-mix(in srgb,var(--wdw-ambient-glow-primary) 34%,transparent); }
.wdw-flow-v1__glow--two { right: -220px; bottom: 8%; background:color-mix(in srgb,var(--wdw-ambient-glow-secondary) 24%,transparent); }
.wdw-flow-v1__grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(118,163,197,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(118,163,197,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }

.wdw-flow-v1__inner { width: min(1480px, 100%); margin: 0 auto; }
.wdw-flow-v1__heading { width: min(1020px, 100%); margin: 0 auto 68px; text-align: center; }
.wdw-flow-v1__eyebrow { display: inline-flex; align-items: center; gap: 9px; color:var(--wdw-text-accent); font-size: 14px; font-weight: 900; letter-spacing: .15em; }
.wdw-flow-v1__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #79d9e7; box-shadow: 0 0 14px rgba(121,217,231,.62); }
.wdw-flow-v1__heading h2 {color:var(--wdw-text-primary); margin: 18px 0 0; font-size: clamp(46px, 5.35vw, 80px); line-height: .98; letter-spacing: -.055em; font-weight: 900; }
.wdw-flow-v1__heading h2 span { background: linear-gradient(90deg, var(--wdw-heading-gradient-start), var(--wdw-heading-gradient-middle) 54%, var(--wdw-heading-gradient-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wdw-flow-v1__heading p { width: min(870px, 100%); margin: 24px auto 0; color:var(--wdw-text-secondary); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.7; }

.wdw-flow-v1__pipeline { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr); align-items: center; }
.wdw-flow-v1__stage { position: relative; min-width: 0; min-height: 360px; padding: 24px 22px 22px; border:1px solid color-mix(in srgb,var(--wdw-container-border) 22%,transparent); border-radius: 23px; background: linear-gradient(160deg, color-mix(in srgb,var(--wdw-container-elevated-bg) 95%,transparent), color-mix(in srgb,var(--wdw-container-bg) 98%,transparent)); box-shadow: 0 28px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.wdw-flow-v1__stage.is-active { transform: translateY(-5px); border-color:var(--wdw-field-border-strong); box-shadow: 0 34px 76px rgba(0,0,0,.22), 0 0 34px rgba(84,185,212,.07); }
.wdw-flow-v1__stage--alert.is-active { border-color:rgba(255,111,126,.30); box-shadow: 0 34px 76px rgba(0,0,0,.22), 0 0 34px rgba(255,95,114,.07); }
.wdw-flow-v1__stage--recover.is-active { border-color:rgba(91,214,194,.30); box-shadow: 0 34px 76px rgba(0,0,0,.22), 0 0 34px rgba(91,214,194,.07); }
.wdw-flow-v1__stage-number { position: absolute; top: 18px; right: 18px; color:var(--wdw-text-muted); font-size: 14px; font-weight: 900; letter-spacing: .12em; }
.wdw-flow-v1__stage-icon { width: 50px; height: 50px; display: grid; place-items: center; border:1px solid var(--wdw-field-border-soft); border-radius: 15px; color:var(--wdw-text-accent); background: rgba(111,206,226,.05); }
.wdw-flow-v1__stage-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wdw-flow-v1__stage small { display: block; margin-top: 22px; color:var(--wdw-text-accent); font-size: 14px; font-weight: 900; letter-spacing: .15em; }
.wdw-flow-v1__stage h3 { margin: 10px 0 0; color:var(--wdw-text-accent); font-size: 22px; line-height: 1.12; letter-spacing: -.025em; }
.wdw-flow-v1__stage p { margin: 14px 0 0; color:var(--wdw-text-muted); font-size: 14px; line-height: 1.65; }
.wdw-flow-v1__stage > b { position: absolute; left: 22px; right: 22px; bottom: 20px; min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; border:1px solid var(--wdw-field-border-soft); border-radius: 11px; color:var(--wdw-text-muted); background:var(--wdw-field-bg); font-size: 14px; font-weight: 900; letter-spacing: .055em; text-align: center; }
.wdw-flow-v1__stage.is-active > b { color:var(--wdw-text-accent); border-color:var(--wdw-field-border-strong); background:var(--wdw-field-active-bg); }
.wdw-flow-v1__stage--alert.is-active > b { color: #ffadb7; border-color:rgba(255,111,126,.18); background: rgba(255,111,126,.055); }
.wdw-flow-v1__stage--recover.is-active > b { color: #8ce1c5; border-color:rgba(91,214,194,.18); background: rgba(91,214,194,.05); }

.wdw-flow-v1__connector { position: relative; display: block; height: 1px; overflow: hidden; background: rgba(111,178,209,.18); }
.wdw-flow-v1__connector i { position: absolute; top: 0; left: -20px; width: 20px; height: 1px; background: #72d9e6; box-shadow: 0 0 10px rgba(114,217,230,.62); opacity: 0; }
.wdw-flow-v1__connector.is-active i { opacity: 1; animation: wdwFlowConnector .8s linear forwards; }

.wdw-flow-v1__demo { margin-top: 38px; padding: 28px; border:1px solid color-mix(in srgb,var(--wdw-container-border) 22%,transparent); border-radius: 26px; background: linear-gradient(150deg, color-mix(in srgb,var(--wdw-container-elevated-bg) 95%,transparent), color-mix(in srgb,var(--wdw-container-bg) 98%,transparent)); box-shadow: 0 30px 76px rgba(0,0,0,.18); }
.wdw-flow-v1__demo-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.wdw-flow-v1__demo-head small { display: block; color:var(--wdw-text-accent); font-size: 14px; font-weight: 900; letter-spacing: .15em; }
.wdw-flow-v1__demo-head strong { display: block; margin-top: 7px; color:var(--wdw-text-accent); font-size: 21px; line-height: 1.3; }
.wdw-flow-v1__demo-mode { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border:1px solid var(--wdw-field-border-soft); border-radius: 999px; color:var(--wdw-text-accent); background: rgba(111,206,226,.05); font-size: 14px; font-weight: 850; }

.wdw-flow-v1__demo-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 34px; padding-top: 18px; }
.wdw-flow-v1__demo-track::before { content: ""; position: absolute; left: 8%; right: 8%; top: 34px; height: 2px; background: rgba(126,169,200,.12); }
.wdw-flow-v1__demo-progress { position: absolute; left: 8%; top: 34px; width: 0; height: 2px; background: linear-gradient(90deg, #72d9e6, #ff8a99 70%, #76ddbd); box-shadow: 0 0 12px rgba(114,217,230,.32); transition: width .55s ease; }
.wdw-flow-v1__demo-point { position: relative; z-index: 1; display: grid; justify-items: center; gap: 7px; text-align: center; }
.wdw-flow-v1__demo-point i { width: 34px; height: 34px; display: block; border:7px solid var(--wdw-container-bg); border-radius: 50%; background: #546d82; box-shadow: 0 0 0 1px rgba(126,169,200,.14); transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
.wdw-flow-v1__demo-point b { color:var(--wdw-text-secondary); font-size: 14px; }
.wdw-flow-v1__demo-point small { color:var(--wdw-text-muted); font-size: 14px; line-height: 1.35; }
.wdw-flow-v1__demo-point.is-active i { transform: scale(1.08); background: #72d9e6; box-shadow: 0 0 0 1px rgba(114,217,230,.24), 0 0 18px rgba(114,217,230,.32); }
.wdw-flow-v1__demo-point[data-wdw-flow-point="3"].is-active i,
.wdw-flow-v1__demo-point[data-wdw-flow-point="4"].is-active i { background: #ff8494; box-shadow: 0 0 0 1px rgba(255,132,148,.25), 0 0 18px rgba(255,132,148,.32); }
.wdw-flow-v1__demo-point[data-wdw-flow-point="5"].is-active i { background: #73d8b9; box-shadow: 0 0 0 1px rgba(115,216,185,.25), 0 0 18px rgba(115,216,185,.30); }

.wdw-flow-v1__demo-verdict { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding: 17px 18px; border:1px solid var(--wdw-field-border-soft); border-radius: 16px; background:var(--wdw-field-bg); }
.wdw-flow-v1__demo-led { width: 12px; height: 12px; border-radius: 50%; background: #5b758c; box-shadow: 0 0 0 5px rgba(91,117,140,.06); }
.wdw-flow-v1__demo-verdict small { display: block; color:var(--wdw-text-muted); font-size: 14px; font-weight: 900; letter-spacing: .11em; }
.wdw-flow-v1__demo-verdict strong { display: block; margin-top: 4px; color:var(--wdw-text-primary); font-size: 17px; }
.wdw-flow-v1__demo-verdict[data-state="warning"] { border-color:rgba(255,184,91,.17); background: rgba(255,184,91,.035); }
.wdw-flow-v1__demo-verdict[data-state="warning"] .wdw-flow-v1__demo-led { background: #ffb85b; box-shadow: 0 0 0 5px rgba(255,184,91,.06), 0 0 15px rgba(255,184,91,.24); }
.wdw-flow-v1__demo-verdict[data-state="down"] { border-color:rgba(255,111,126,.18); background: rgba(255,111,126,.04); }
.wdw-flow-v1__demo-verdict[data-state="down"] .wdw-flow-v1__demo-led { background: #ff6f7e; box-shadow: 0 0 0 5px rgba(255,111,126,.06), 0 0 15px rgba(255,111,126,.28); }
.wdw-flow-v1__demo-verdict[data-state="recovered"] { border-color:rgba(91,214,194,.18); background: rgba(91,214,194,.04); }
.wdw-flow-v1__demo-verdict[data-state="recovered"] .wdw-flow-v1__demo-led { background: #73d8b9; box-shadow: 0 0 0 5px rgba(115,216,185,.06), 0 0 15px rgba(115,216,185,.24); }

.wdw-flow-v1__modes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.wdw-flow-v1__modes article { position: relative; padding: 20px; border:1px solid var(--wdw-field-border-soft); border-radius: 18px; background: var(--wdw-field-bg); }
.wdw-flow-v1__modes small { color:var(--wdw-text-muted); font-size: 14px; font-weight: 900; letter-spacing: .14em; }
.wdw-flow-v1__modes strong { display: block; margin-top: 9px; color:var(--wdw-text-primary); font-size: 18px; }
.wdw-flow-v1__modes span { display: block; margin-top: 5px; color:var(--wdw-text-muted); font-size: 14px; }
.wdw-flow-v1__mode-selected { border-color:color-mix(in srgb,var(--wdw-container-border) 20%,transparent) !important; background: rgba(111,206,226,.035) !important; }
.wdw-flow-v1__mode-selected > b { position: absolute; right: 15px; top: 15px; color:var(--wdw-text-accent); font-size: 14px; letter-spacing: .07em; }

@keyframes wdwFlowConnector { from { transform: translateX(0); } to { transform: translateX(52px); } }

@media (max-width: 1220px) {
  .wdw-flow-v1__pipeline { grid-template-columns: 1fr; gap: 14px; }
  .wdw-flow-v1__stage { min-height: 0; padding-bottom: 78px; }
  .wdw-flow-v1__connector { width: 1px; height: 26px; justify-self: center; background: rgba(111,178,209,.18); }
  .wdw-flow-v1__connector i { top: -16px; left: 0; width: 1px; height: 16px; background: #72d9e6; }
  .wdw-flow-v1__connector.is-active i { animation: wdwFlowConnectorVertical .6s linear forwards; }
}

@media (max-width: 760px) {
  .wdw-flow-v1 { padding: 92px 16px 102px; }
  .wdw-flow-v1__heading { margin-bottom: 44px; }
  .wdw-flow-v1__heading h2 {color:var(--wdw-text-primary); font-size: clamp(42px, 13vw, 62px); }
  .wdw-flow-v1__demo { padding: 20px 16px; border-radius: 20px; }
  .wdw-flow-v1__demo-head { flex-direction: column; align-items: flex-start; }
  .wdw-flow-v1__demo-track { grid-template-columns: 1fr; gap: 14px; padding-top: 0; }
  .wdw-flow-v1__demo-track::before,
  .wdw-flow-v1__demo-progress { display: none; }
  .wdw-flow-v1__demo-point { grid-template-columns: 34px 80px minmax(0,1fr); justify-items: start; align-items: center; text-align: left; }
  .wdw-flow-v1__demo-point i { grid-row: 1; }
  .wdw-flow-v1__demo-point b { grid-column: 2; }
  .wdw-flow-v1__demo-point small { grid-column: 3; }
  .wdw-flow-v1__modes { grid-template-columns: 1fr; }
}

@keyframes wdwFlowConnectorVertical { from { transform: translateY(0); } to { transform: translateY(42px); } }

@media (prefers-reduced-motion: reduce) {
  .wdw-flow-v1 *,
  .wdw-flow-v1 *::before,
  .wdw-flow-v1 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}