.customer-flow { position:relative; z-index:2; overflow:hidden; padding:clamp(18px,2.1vw,26px); border:1px solid rgba(129,198,198,.42); background:radial-gradient(circle at 88% 3%,rgba(129,198,198,.14),transparent 26%),linear-gradient(145deg,rgba(9,31,35,.96),rgba(5,18,21,.92)); box-shadow:0 0 70px rgba(108,155,160,.1),24px 24px 0 rgba(108,155,160,.035); color:#e8f2ef; font-family:'Instrument Sans',sans-serif; backdrop-filter:blur(16px) }
.customer-flow::before,.customer-flow::after { content:''; position:absolute; width:35px; height:35px; border-color:#81c6c6; opacity:.75; pointer-events:none }
.customer-flow::before { top:-1px; left:-1px; border-top:1px solid; border-left:1px solid }.customer-flow::after { right:-1px; bottom:-1px; border-right:1px solid; border-bottom:1px solid }
.customer-flow * { box-sizing:border-box }.customer-flow button { font:inherit }.customer-flow-head,.customer-flow-core-top,.customer-flow-result { display:flex; align-items:center }.customer-flow-head { justify-content:space-between; margin-bottom:8px }
.customer-flow-kicker,.customer-flow-live,.customer-flow-label { font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.13em }.customer-flow-kicker { display:inline-flex; align-items:center; gap:8px; color:#81c6c6; font-size:.75rem }.customer-flow-kicker i { width:6px; height:6px; border-radius:50%; background:#e8753d; box-shadow:0 0 10px rgba(232,117,61,.8); animation:customer-flow-breathe 1.8s ease-in-out infinite }.customer-flow-live { padding:3px 7px; border:1px solid rgba(132,169,149,.32); color:#a6c5b4; font-size:.69rem; font-weight:600 }
.customer-flow h2 { max-width:430px; margin:0; color:#f1eee7; font-family:'Syne',sans-serif; font-size:clamp(1.24rem,2.1vw,1.62rem); font-weight:500; line-height:1.15; letter-spacing:-.025em }.customer-flow-sub { max-width:440px; margin:8px 0 0; color:rgba(232,242,239,.65); font-size:.8125rem; line-height:1.45 }
.customer-flow-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 14px }.customer-flow-progress span { color:rgba(129,169,174,.6); font-size:.75rem; font-family:'IBM Plex Mono',monospace; line-height:1.25; transition:color 300ms ease }.customer-flow-progress span::before { content:''; display:block; height:2px; margin-bottom:6px; background:rgba(129,198,198,.18); transition:background 300ms ease,box-shadow 300ms ease }.customer-flow-progress .is-active { color:#d9f6f4 }.customer-flow-progress .is-active::before { background:#81c6c6; box-shadow:0 0 10px rgba(129,198,198,.48) }.customer-flow-progress .is-done { color:#91d7b3 }.customer-flow-progress .is-done::before { background:#69e6aa }
.customer-flow-label { margin-bottom:6px; color:rgba(232,242,239,.55); font-size:.69rem; font-weight:600 }.customer-flow-channels,.customer-flow-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px }
.customer-flow-channel { position:relative; min-height:64px; padding:8px 4px 7px; overflow:hidden; border:1px solid rgba(129,198,198,.16); border-radius:3px; background:rgba(5,18,21,.6); color:rgba(232,242,239,.55); cursor:pointer; transition:transform 220ms ease,border-color 220ms ease,background 220ms ease,color 220ms ease,box-shadow 220ms ease }.customer-flow-channel:hover { transform:translateY(-2px); border-color:rgba(129,198,198,.52) }.customer-flow-channel:focus-visible { outline:2px solid #81c6c6; outline-offset:2px }.customer-flow-channel.is-active { border-color:#81c6c6; background:rgba(31,77,81,.5); color:#e9f9f7; box-shadow:0 8px 20px rgba(59,127,134,.16) }.customer-flow-channel[data-tone='green'].is-active { border-color:#69e6aa }.customer-flow-channel svg { display:block; width:20px; height:20px; margin:0 auto 4px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }.customer-flow-channel span { display:block; font-size:.75rem; font-weight:600 }
.customer-flow-routes { height:35px; margin:0 2px }.customer-flow-routes svg { width:100%; height:100%; overflow:visible }.customer-flow-routes path { fill:none; stroke:rgba(129,198,198,.17); stroke-width:1.2 }.customer-flow-routes path.is-current { stroke:url(#customer-route-gradient); stroke-width:2.2; filter:drop-shadow(0 0 8px rgba(129,198,198,.6)); stroke-dasharray:8 5; animation:customer-route-flow .85s linear infinite }.customer-flow-signal { fill:#e8753d; opacity:0; filter:drop-shadow(0 0 8px #e8753d) }.customer-flow-signal.is-moving { animation:customer-flow-travel 1.1s cubic-bezier(.45,0,.3,1) both }
.customer-flow-core { position:relative; padding:12px; overflow:hidden; border:1px solid rgba(129,198,198,.5); border-radius:4px; background:linear-gradient(145deg,rgba(22,67,72,.75),rgba(5,18,21,.95)) }.customer-flow-core::after { content:''; position:absolute; width:85px; height:85px; right:-38px; top:-42px; border-radius:50%; background:rgba(129,198,198,.18); filter:blur(22px); opacity:.25; transition:opacity 250ms ease }.customer-flow-core.is-thinking::after { opacity:1; animation:customer-flow-orbit 1.6s ease-in-out infinite alternate }.customer-flow-core-top { position:relative; z-index:1; gap:8px }.customer-flow-mark { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border:1px solid rgba(129,198,198,.65); border-radius:4px; background:rgba(129,198,198,.1); color:#d5f8f5; font-size:.85rem }.customer-flow-core-title { min-width:0; flex:1; font-size:.8125rem; font-weight:650 }.customer-flow-core-title small { display:block; margin-top:2px; overflow:hidden; color:#81c6c6; font-size:.69rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap }.customer-flow-wave { display:flex; align-items:center; gap:2px; height:19px; padding:0 6px; border:1px solid rgba(129,198,198,.2); background:rgba(3,11,13,.78) }.customer-flow-wave i { width:2px; height:16%; background:#81c6c6 }.customer-flow-core.is-thinking .customer-flow-wave i { animation:customer-flow-wave .52s ease-in-out infinite alternate }.customer-flow-request { position:relative; z-index:1; display:grid; grid-template-columns:120px 1fr; gap:10px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(129,198,198,.2) }.customer-flow-request span { color:rgba(232,242,239,.55); font-size:.69rem }.customer-flow-request strong { color:#e9f9f7; font-size:.8125rem; font-weight:550; line-height:1.35; text-align:right }
.customer-flow-down { position:relative; width:1px; height:17px; margin:0 auto; background:linear-gradient(#81c6c6,rgba(59,127,134,.2)) }.customer-flow-down::after { content:''; position:absolute; left:-2px; bottom:-2px; border:3px solid transparent; border-top-color:#5a9ba0 }.customer-flow-action { min-height:44px; display:grid; place-items:center; padding:6px 4px; border:1px solid rgba(129,198,198,.14); border-radius:3px; background:rgba(5,18,21,.55); color:rgba(232,242,239,.55); font-size:.75rem; line-height:1.25; text-align:center; transition:border-color 350ms ease,background 350ms ease,color 350ms ease,transform 350ms ease }.customer-flow-action.is-on { border-color:rgba(105,230,170,.58); background:rgba(30,97,70,.22); color:#cdf5df; transform:translateY(-1px) }.customer-flow-check { display:grid; place-items:center; width:14px; height:14px; margin:0 auto 3px; border-radius:50%; background:#69e6aa; color:#052b1d; font-size:.625rem; font-style:normal; font-weight:800; transform:scale(0) }.customer-flow-action.is-on .customer-flow-check { animation:customer-flow-check 320ms cubic-bezier(.2,1.55,.45,1) forwards; animation-delay:var(--delay) }
.customer-flow-result { gap:8px; margin-top:9px; padding:9px 11px; border:1px solid rgba(105,230,170,.22); border-radius:3px; background:rgba(30,97,70,.11); opacity:.36; transform:translateY(2px); transition:opacity 380ms ease,transform 380ms ease,border-color 380ms ease,background 380ms ease }.customer-flow-result.is-on { opacity:1; transform:none; border-color:rgba(105,230,170,.62); background:rgba(30,97,70,.23) }.customer-flow-result>i { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; border-radius:50%; background:#69e6aa; color:#052b1d; font-size:.75rem; font-style:normal; font-weight:800 }.customer-flow-result strong { display:block; font-size:.8125rem }.customer-flow-result small { display:block; margin-top:3px; color:rgba(176,230,201,.75); font-size:.75rem; line-height:1.3 }
@keyframes customer-route-flow { from { stroke-dashoffset: 26 } to { stroke-dashoffset: 0 } }
@keyframes customer-flow-breathe { 50% { opacity:.4; transform:scale(.72) } }@keyframes customer-flow-travel { 0% { opacity:0; offset-distance:0% }15%,82% { opacity:1 }100% { opacity:0; offset-distance:100% } }@keyframes customer-flow-wave { to { height:var(--height) } }@keyframes customer-flow-check { to { transform:scale(1) } }@keyframes customer-flow-orbit { to { transform:translate(-25px,16px) } }
@media (max-width:1100px) { .customer-flow { width:min(100%,720px) } }@media (max-width:560px) { .customer-flow { padding:15px 11px; box-shadow:12px 12px 0 rgba(108,155,160,.035) }.customer-flow-wave { display:none }.customer-flow-request { grid-template-columns:1fr; gap:3px }.customer-flow-request strong { text-align:left }.customer-flow-progress span { font-size:.69rem } }