.architecture-demo { overflow:hidden; }
.architecture-demo .architecture-heading { margin-bottom:48px; }
.commerce-flow {
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px minmax(0,1.15fr) 42px minmax(0,1fr);
  gap:10px;
  align-items:stretch;
}
.flow-card {
  position:relative;
  min-width:0;
  min-height:425px;
  padding:26px;
  border:1px solid #344965;
  border-radius:18px;
  background:#122946;
  box-shadow:0 20px 55px #030b1a28;
}
.flow-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:20px; }
.flow-number { color:#86b8ee; font-size:11px; font-weight:700; letter-spacing:.09em; white-space:nowrap; }
.flow-status { display:flex; align-items:center; gap:6px; color:#b9d8fb; font-size:11px; white-space:nowrap; }
.flow-status i { width:6px; height:6px; background:#64d9ca; border-radius:50%; box-shadow:0 0 10px #64d9ca; }
.flow-card h3 { font-size:clamp(24px,2.4vw,32px); line-height:1.12; letter-spacing:-.035em; margin:30px 0 9px; }
.flow-card > p { color:#aec4dd; font-size:14px; line-height:1.5; margin:0 0 25px; }
.source-list { display:grid; gap:7px; }
.source-list > div { display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid #385273; border-radius:10px; background:#193657; animation:source-glow 9s ease-in-out infinite; }
.source-list > div:nth-child(2) { animation-delay:.35s; }
.source-list > div:nth-child(3) { animation-delay:.7s; }
.source-list > div:nth-child(4) { animation-delay:1.05s; }
.source-icon { display:grid; place-items:center; width:30px; height:30px; flex:none; color:#9dccff; border:1px solid #416b9b; border-radius:7px; font-size:17px; }
.source-list strong,.source-list small { display:block; }
.source-list strong { font-size:13px; font-weight:600; }
.source-list small { margin-top:2px; font-size:11px; color:#a3bfdc; }
.flow-brain { background:linear-gradient(155deg,#0755f5,#0b41c3); border-color:#4382ff; box-shadow:0 24px 70px #0755f533; animation:brain-glow 9s ease-in-out infinite; }
.flow-brain .flow-number { color:#d8e8ff; }
.flow-brand { font-size:12px; font-weight:700; color:#fff; }
.flow-brain h3 { margin:28px 0 23px; }
.intent-example { background:#ffffff1c; border:1px solid #ffffff55; border-radius:10px; padding:13px 15px; animation:intent-emphasis 9s ease-in-out infinite; }
.intent-example span { font-size:10px; font-weight:700; letter-spacing:.08em; color:#d8e8ff; }
.intent-example p { margin:6px 0 0; font-size:14px; line-height:1.4; }
.qualified-result { display:flex; align-items:center; gap:11px; margin-top:13px; padding:12px 13px; border-radius:10px; background:#fff; color:#0b1e3d; animation:result-emphasis 9s ease-in-out infinite; }
.qualified-result strong,.qualified-result small { display:block; }
.qualified-result strong { font-size:13px; }
.qualified-result small { color:#536078; font-size:10px; line-height:1.35; margin-top:3px; }
.result-orbit { display:flex; align-items:center; justify-content:center; gap:2px; width:34px; height:34px; flex:none; border-radius:8px; background:#e4edff; }
.result-orbit i { display:block; width:5px; height:12px; border-radius:2px; background:#0755f5; }
.result-orbit i:nth-child(2) { height:18px; }
.result-check { margin-left:auto; color:#0755f5; font-size:17px; }
.capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:13px; }
.capability { min-width:0; min-height:106px; padding:11px; border:1px solid #a8c8ff69; border-radius:10px; background:#ffffff16; animation:capability-emphasis 9s ease-in-out infinite; }
.capability-memory { animation-delay:.8s; }
.capability-voice { animation-delay:1.6s; }
.capability-governance { animation-delay:2.4s; }
.cap-label { display:block; color:#e9f2ff; font-size:12px; font-weight:700; }
.cap-visual { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:28px; margin-top:8px; color:#fff; font-size:11px; line-height:1.25; }
.cap-visual span:not(.cap-check),.cap-visual strong { min-width:0; }
.cap-visual span:not(.cap-check) { color:#c9deff; }
.cap-visual b { color:#9cc8ff; font-size:15px; }
.cap-visual strong { font-size:11px; font-weight:700; }
.cap-check { display:grid; place-items:center; width:18px; height:18px; flex:none; border-radius:50%; background:#e8f2ff; color:#0755f5; font-size:12px; font-weight:700; }
.capability-voice .cap-visual strong { font-style:italic; font-weight:500; }
.capability small { display:block; margin-top:5px; color:#c9deff; font-size:10px; }
.destination-list { display:grid; gap:8px; }
.destination-list > div { display:flex; align-items:center; gap:9px; min-height:47px; padding:10px 11px; border:1px solid #385273; border-radius:10px; background:#193657; animation:destination-glow 9s ease-in-out infinite; }
.destination-list > div:nth-child(2) { animation-delay:.25s; }
.destination-list > div:nth-child(3) { animation-delay:.5s; }
.destination-list > div:nth-child(4) { animation-delay:.75s; }
.destination-dot { width:8px; height:8px; flex:none; border-radius:50%; background:#64a7ff; box-shadow:0 0 10px #64a7ff88; }
.destination-list strong { font-size:13px; font-weight:600; }
.destination-list small { margin-left:auto; color:#a3bfdc; font-size:10px; text-align:right; }
.flow-link { position:relative; align-self:center; height:2px; background:#315b8f; }
.flow-link::after { content:""; position:absolute; right:-1px; top:-4px; width:8px; height:8px; border-top:2px solid #78b6ff; border-right:2px solid #78b6ff; transform:rotate(45deg); }
.flow-link span { position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:#81c6ff; box-shadow:0 0 14px 4px #3598ff9c; animation:travel 9s ease-in-out infinite; }
.flow-link:nth-of-type(4) span { animation-delay:2.6s; }
.architecture-demo .architecture-foot { margin-top:40px; }
@keyframes source-glow { 0%,35%,100% { border-color:#385273; background:#193657; } 12%,24% { border-color:#79baff; background:#22507e; } }
@keyframes travel { 0%,16%,100% { left:0; opacity:0; } 20% { opacity:1; } 36% { left:calc(100% - 8px); opacity:1; } 40% { opacity:0; } }
@keyframes brain-glow { 0%,35%,100% { box-shadow:0 24px 70px #0755f533; } 46%,70% { box-shadow:0 24px 78px #257eff88; } }
@keyframes intent-emphasis { 0%,30%,100% { border-color:#ffffff55; } 42%,55% { border-color:#fff; } }
@keyframes capability-emphasis { 0%,31%,47%,100% { border-color:#a8c8ff69; background:#ffffff16; } 35%,43% { border-color:#fff; background:#ffffff32; box-shadow:0 0 24px #b8d7ff55; } }
@keyframes result-emphasis { 0%,68%,100% { transform:translateY(0); box-shadow:none; } 75%,87% { transform:translateY(-3px); box-shadow:0 10px 30px #021b7c55; } }
@keyframes destination-glow { 0%,66%,100% { border-color:#385273; background:#193657; } 78%,89% { border-color:#79baff; background:#22507e; } }
@media (max-width:1050px) {
  .commerce-flow { grid-template-columns:minmax(0,1fr) 24px minmax(0,1.15fr) 24px minmax(0,1fr); gap:7px; }
  .flow-card { padding:20px; }
  .destination-list > div { flex-wrap:wrap; }
  .destination-list small { width:100%; margin-left:17px; text-align:left; }
}
@media (max-width:900px) {
  .architecture-demo .architecture-heading { margin-bottom:32px; }
  .commerce-flow { grid-template-columns:1fr; gap:0; }
  .flow-card { min-height:0; padding:23px; }
  .flow-card h3 { font-size:27px; margin-top:22px; }
  .source-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .source-list > div { align-items:flex-start; gap:8px; padding:10px; }
  .source-icon { width:25px; height:25px; font-size:14px; }
  .source-list strong { font-size:11px; line-height:1.2; }
  .source-list small { font-size:10px; }
  .flow-link { justify-self:center; width:2px; height:27px; margin:0; }
  .flow-link::after { top:auto; bottom:0; right:-4px; transform:rotate(135deg); }
  .flow-link span { top:0; left:-3px; animation:travel-vertical 9s ease-in-out infinite; }
  .flow-link:nth-of-type(4) span { animation-delay:2.6s; }
  .destination-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .destination-list > div { align-content:center; }
  .destination-list small { margin-left:0; }
  .architecture-demo .architecture-foot { margin-top:30px; }
}
@keyframes travel-vertical { 0%,16%,100% { top:0; opacity:0; } 20% { opacity:1; } 36% { top:calc(100% - 8px); opacity:1; } 40% { opacity:0; } }
@media (max-width:370px) {
  .source-list,.destination-list { grid-template-columns:1fr; }
  .destination-list > div { flex-wrap:nowrap; }
  .destination-list small { width:auto; margin-left:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .commerce-flow *, .commerce-flow *::before, .commerce-flow *::after { animation:none!important; }
  .flow-link span { left:50%; opacity:1; }
}

.destination-list > div:nth-child(5) { animation-delay:1s; }
.destination-list > div:nth-child(6) { animation-delay:1.25s; }