/* One 25s story: choose folder → load model → QR pairing → scan → stream AI chat. */
.hero[data-computer-state="marketing"] {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 72px);
}
.hero-flow { width: 100%; max-width: 900px; justify-self: center; align-self: center; pointer-events: none; }
.hero-flow svg { display: block; width: 100%; overflow: visible; }
.hero:not([data-computer-state="marketing"]) .hero-flow { display: none; }
.flow-lines { stroke: #88ebe9; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flow-guide { display: none; }
.flow-computer { stroke: #9cc9c9; opacity: .8; }
.flow-phone { opacity: .9; }
.flow-computer-workflow { opacity: .78; animation: flow-computer-workflow 25s linear infinite; }
.flow-file-dialog { opacity: 0; filter: drop-shadow(0 5px 8px #020d12aa); animation: flow-file-dialog 25s ease-in-out infinite; }
.flow-dialog-panel { fill: #071d24e8; stroke: none; opacity: .96; }
.flow-dialog-toolbar { fill: #173b42dd; stroke: none; filter: drop-shadow(0 2px 3px #020d1266); }
.flow-dialog-chevron { fill: none; stroke: #b8ffff; opacity: .75; }
.flow-dialog-selected-name { stroke: #e1ffff; opacity: .8; }
.flow-dialog-divider { opacity: .25; }
.flow-dialog-folder-selected { fill: #68fff0; stroke: none; filter: drop-shadow(0 2px 3px #36e8df66); }
.flow-dialog-muted-folder { opacity: .42; }
.flow-dialog-sidebar, .flow-dialog-title, .flow-dialog-row, .flow-dialog-cancel { opacity: .38; }
.flow-dialog-cancel { fill: #12333acc; stroke: none; filter: drop-shadow(0 2px 3px #020d1266); }
.flow-dialog-folder { fill: #27d9d1; stroke: none; filter: drop-shadow(0 2px 3px #36e8df66); }
.flow-dialog-folder.flow-dialog-folder-selected { fill: #68fff0; }
.flow-dialog-selection { fill: #0b8492d9; stroke: none; opacity: .9; filter: drop-shadow(0 3px 4px #020d1266); }
.flow-dialog-open { fill: #27e1d9; stroke: none; filter: drop-shadow(0 3px 5px #21dfd966); animation: flow-dialog-open 25s ease-in-out infinite; }
.flow-models-page { opacity: 0; transform: translateY(-11px); animation: flow-models-page 25s ease-in-out infinite; }
.flow-mini-cube { fill: #00c8cd33; stroke: #87f8f3; stroke-width: 1; opacity: .84; }
.flow-model-active { fill: #27e0c3; stroke: none; opacity: 0; animation: flow-model-active 25s ease-in-out infinite; }
.flow-model-active path { fill: none; stroke: #05272b; stroke-width: 1.2; }
.flow-models-header, .flow-model-name { opacity: .44; }
.flow-model-row { fill: #10343bc7; stroke: none; opacity: .72; }
.flow-model-selected { fill: #087f91d9; stroke: none; animation: flow-model-selected 25s ease-in-out infinite; }
.flow-model-load-track { stroke: #74a7a8; opacity: .32; }
.flow-model-load-progress { stroke: #9ffff6; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: flow-model-load-progress 25s linear infinite; }

.flow-ui-header, .flow-ui-sidebar, .flow-ui-row, .flow-ui-row-line, .flow-ui-line { opacity: .4; }
.flow-folder-icon { fill: #27d9d1; stroke: none; opacity: .92; filter: drop-shadow(0 2px 3px #36e8df66); }
.flow-folder-selection { fill: #0b8492d9; stroke: none; animation: flow-folder-selection 25s ease-in-out infinite; }
.flow-computer-workflow .flow-model-row { fill: #10343bc7; stroke: none; opacity: .72; }
.flow-model-dot { fill: #7bffe9; stroke: none; animation: flow-model-dot 25s linear infinite; }
.flow-model-load { opacity: 0; animation: flow-model-load 25s linear infinite; }
.flow-load-track { stroke: #74a7a8; opacity: .35; }
.flow-load-progress { stroke: #9ffff6; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: flow-load-progress 25s linear infinite; }
.flow-load-node { fill: #b3fff8; stroke: none; animation: flow-load-node 25s linear infinite; }
.flow-cursor { opacity: 0; transform-origin: 270px 270px; animation: flow-cursor 25s ease-in-out infinite; }
.flow-cursor > path:first-child { fill: #07191d; stroke: #b9ffff; stroke-width: 1.4; filter: drop-shadow(0 0 3px #67ffff); }
.hero-flow .flow-qr { stroke: #b6ffff; animation: flow-qr 25s linear infinite; }
.flow-qr-frame { opacity: .35; }
.flow-qr-modules { fill: #9af5f1; stroke: none; }
.hero-flow .flow-cube { stroke: #adffff; transform-origin: 346px 234px; filter: drop-shadow(0 0 7px #43dbda55); animation: flow-cube 25s ease-in-out infinite; }
.hero-flow .flow-edge { stroke-width: 2; stroke-dasharray: 1; animation: flow-edge 25s linear infinite; }
.hero-flow .flow-edge-left { animation-name: flow-edge-left; }
.hero-flow .flow-edge-right { animation-name: flow-edge-right; }
.hero-flow .flow-link { stroke: transparent; stroke-dasharray: 1; animation: flow-link 25s linear infinite; }
.hero-flow .flow-scan { animation: flow-scan 25s linear infinite; }
.hero-flow .flow-scan-bar { animation: flow-scan-bar 25s linear infinite; }
.hero-flow .flow-check { stroke: #79eed1; stroke-dasharray: 1; animation: flow-check 25s linear infinite; }
.hero-flow .flow-transmission { opacity: 0; fill: none; stroke: #8fffee; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; animation: flow-transmission 25s linear infinite; }
.hero-flow .flow-matrix-glyph { opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px #67ffff); animation: flow-matrix-shift 1.35s linear infinite; }
.hero-flow .flow-matrix-glyph-b { animation-delay: -.32s; }
.hero-flow .flow-matrix-glyph-c { animation-delay: -.66s; }
.hero-flow .flow-matrix-glyph-d { animation-delay: -.96s; }
.hero-flow .flow-matrix-glyph-e { animation-delay: -.18s; }
.hero-flow .flow-chat { transform-box: fill-box; transform-origin: center bottom; animation: flow-chat-user-one 25s ease-out infinite; }
.flow-chat-user-one, .flow-chat-user-two { fill: #8be7e41a; stroke: #95cecf; }
.flow-chat-ai-one, .flow-chat-ai-two { fill: #19bdbb1c; stroke: #9fffee; }
.flow-chat-text { opacity: .65; stroke-width: 1.2; }
.hero-flow .flow-chat-ai-one { animation-name: flow-chat-ai-one; }
.hero-flow .flow-chat-user-two { animation-name: flow-chat-user-two; }
.hero-flow .flow-chat-ai-two { animation-name: flow-chat-ai-two; }
.hero-flow .flow-typing { animation: flow-typing 25s linear infinite; }
.hero-flow[data-paused] * { animation-play-state: paused !important; }

@keyframes flow-computer-workflow {
  0%, 8% { opacity: .78; }
  9%, 100% { opacity: 0; }
}
@keyframes flow-file-dialog {
  0%, 8% { opacity: 0; }
  9%, 20% { opacity: 1; }
  21%, 100% { opacity: 0; }
}
@keyframes flow-dialog-open {
  0%, 11% { opacity: .25; }
  13%, 19% { opacity: 1; filter: drop-shadow(0 0 4px #67ffff); }
  22%, 100% { opacity: .25; filter: none; }
}
@keyframes flow-models-page {
  0%, 19.5% { opacity: 0; }
  20%, 37% { opacity: 1; }
  39.2%, 100% { opacity: 0; }
}
@keyframes flow-model-selected {
  0%, 24% { opacity: .35; }
  26%, 36% { opacity: 1; }
  39.2%, 100% { opacity: 0; }
}
@keyframes flow-model-active {
  0%, 25% { opacity: 0; }
  27%, 38% { opacity: 1; }
  39.2%, 100% { opacity: 0; }
}
@keyframes flow-model-load-progress {
  0%, 28% { stroke-dashoffset: 1; opacity: .35; }
  36% { stroke-dashoffset: .04; opacity: 1; }
  39.2%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes flow-folder-selection {
  0%, 9% { opacity: .24; }
  12%, 20% { opacity: 1; }
  24%, 34% { opacity: .38; }
  36%, 100% { opacity: 0; }
}
@keyframes flow-model-dot {
  0%, 20% { opacity: .55; }
  22%, 32% { opacity: 1; }
  36%, 100% { opacity: 0; }
}
@keyframes flow-cursor {
  0%, 3% { opacity: 0; transform: translate(0, 0) scale(.8); }
  5%, 8% { opacity: 1; transform: translate(28px, -68px) scale(.8); }
  9%, 11% { opacity: 1; transform: translate(28px, -68px) scale(.8); }
  12%, 16% { opacity: 1; transform: translate(129px, 12px) scale(.8); }
  17%, 20% { opacity: 1; transform: translate(129px, 12px) scale(.8); }
  22%, 39.2% { opacity: 0; transform: translate(145px, 24px) scale(.8); }
  100% { opacity: 0; transform: translate(0, 0) scale(.8); }
}
@keyframes flow-model-load {
  0%, 20% { opacity: 0; }
  22%, 34% { opacity: 1; }
  39%, 100% { opacity: 0; }
}
@keyframes flow-load-progress {
  0%, 22% { stroke-dashoffset: 1; }
  34% { stroke-dashoffset: .04; }
  39%, 100% { stroke-dashoffset: 0; }
}
@keyframes flow-load-node {
  0%, 22% { opacity: .2; }
  26%, 35% { opacity: 1; }
  39%, 100% { opacity: .2; }
}
@keyframes flow-qr {
  0%, 39.1% { opacity: 0; }
  39.2%, 52.8% { opacity: 1; }
  54%, 100% { opacity: 0; }
}
@keyframes flow-scan {
  0%, 39.1% { opacity: 0; }
  39.2%, 62.4% { opacity: 1; }
  63%, 100% { opacity: 0; }
}
@keyframes flow-scan-bar {
  0%, 39.2% { transform: translateY(-15px); }
  50% { transform: translateY(15px); }
  62.4%, 100% { transform: translateY(-15px); }
}
@keyframes flow-check {
  0%, 62.4%, 100% { stroke-dashoffset: 1; opacity: 0; }
  63.2%, 66.4% { stroke-dashoffset: 0; opacity: 1; }
  70.4%, 99.2% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes flow-link {
  0%, 62.4%, 100% { stroke-dashoffset: 1; opacity: 0; }
  64%, 74% { stroke-dashoffset: 0; opacity: .8; }
  78%, 98.4% { stroke-dashoffset: 0; opacity: .8; }
  99.2% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes flow-cube {
  0%, 61.6%, 100% { opacity: 0; transform: scale(.24, .06) rotate(-10deg); }
  67.2%, 98.4% { opacity: 1; transform: scale(1) rotate(0deg); }
  99.2% { opacity: 0; transform: scale(1) rotate(0deg); }
}
@keyframes flow-edge {
  0%, 61.6%, 100% { stroke-dashoffset: 1; }
  67.2%, 99.2% { stroke-dashoffset: 0; }
}
@keyframes flow-edge-left {
  0%, 63.2%, 100% { stroke-dashoffset: 1; }
  68.8%, 99.2% { stroke-dashoffset: 0; }
}
@keyframes flow-edge-right {
  0%, 64.8%, 100% { stroke-dashoffset: 1; }
  71.2%, 99.2% { stroke-dashoffset: 0; }
}
@keyframes flow-transmission {
  0%, 70%, 100% { opacity: 0; }
  72%, 98% { opacity: 1; }
  99.2% { opacity: 0; }
}
@keyframes flow-matrix-shift {
  0%, 5% { opacity: 0; transform: translateX(-4px) scale(.86); }
  16% { opacity: .95; transform: translateX(10px) scale(1); }
  78% { opacity: .72; transform: translateX(62px) scale(1.04); }
  100% { opacity: 0; transform: translateX(84px) scale(1.08); }
}
@keyframes flow-chat-user-one {
  0%, 72% { opacity: 0; transform: translateY(5px) scale(.9); }
  74%, 98.4% { opacity: 1; transform: none; }
  99.2%, 100% { opacity: 0; transform: none; }
}
@keyframes flow-chat-ai-one {
  0%, 78.4% { opacity: 0; transform: translateY(5px) scale(.9); }
  80.4%, 98.4% { opacity: 1; transform: none; }
  99.2%, 100% { opacity: 0; transform: none; }
}
@keyframes flow-chat-user-two {
  0%, 84.8% { opacity: 0; transform: translateY(5px) scale(.9); }
  86.8%, 98.4% { opacity: 1; transform: none; }
  99.2%, 100% { opacity: 0; transform: none; }
}
@keyframes flow-chat-ai-two {
  0%, 91.2% { opacity: 0; transform: translateY(5px) scale(.9); }
  93.2%, 98.4% { opacity: 1; transform: none; }
  99.2%, 100% { opacity: 0; transform: none; }
}
@keyframes flow-typing {
  0%, 78.4%, 80.4%, 86.8%, 88.8%, 100% { opacity: 0; }
  79.2%, 80% { opacity: .8; transform: translateY(0); }
  87.6%, 88.4% { opacity: .8; transform: translateY(64px); }
}
@media (max-width: 860px) {
  .hero[data-computer-state="marketing"] { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 28px; }
  .hero-flow { max-width: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-flow * { animation: none !important; }
  .hero-flow .flow-qr { opacity: .55; }
  .hero-flow .flow-scan, .hero-flow .flow-check, .hero-flow .flow-typing, .hero-flow .flow-cursor { display: none; }
  .hero-flow .flow-computer-workflow, .hero-flow .flow-model-load { opacity: 0; }
  .hero-flow .flow-load-progress { stroke-dashoffset: 0; }
  .hero-flow .flow-cube, .hero-flow .flow-chat { opacity: 1; transform: none; }
  .hero-flow .flow-edge, .hero-flow .flow-link { stroke-dashoffset: 0; }
  .hero-flow .flow-transmission { opacity: .72; }
  .hero-flow .flow-matrix-glyph { animation: none; opacity: .72; transform: none; }
}