.statement { padding: 88px 0; }
.statement-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 94px); align-items: center; }
.statement-visual { min-width: 0; }
.statement-visual .label { margin-bottom: 17px; }
.workflow { overflow: hidden; border: 1px solid #99816a; border-radius: 8px; background: radial-gradient(circle at 67% 35%, #314035, transparent 53%), #202a24; box-shadow: 0 25px 55px #3b302224, inset 0 1px #fff2; color: #f8efdf; }
.workflow-head { height: 49px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid #b9a17950; color: #d7b785; font: 600 9px/1.2 'JetBrains Mono', monospace; letter-spacing: .09em; white-space: nowrap; }
.workflow-head span:first-child { display: flex; align-items: center; gap: 9px; }
.workflow-head span:last-child { color: #aeb9a9; font-weight: 400; }
.workflow-head i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #efa96b; box-shadow: 0 0 12px #efa96b; animation: workflow-pulse 2.6s ease-in-out infinite; }
.workflow-canvas { position: relative; width: 100%; aspect-ratio: 500 / 390; min-height: 320px; }
.workflow-canvas:before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 23px, #fff1 24px), repeating-linear-gradient(90deg, transparent 0 23px, #fff1 24px); opacity: .22; pointer-events: none; }
.workflow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #d8ad794f; stroke-width: 1.6; }
.workflow-lines .workflow-signal { stroke: #f5b977; stroke-width: 2.4; stroke-dasharray: 7 32; stroke-linecap: round; animation: workflow-stream 3.5s linear infinite; filter: drop-shadow(0 0 4px #f0ae67); }
.workflow-node { position: absolute; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; width: 26%; height: 20%; min-height: 64px; padding: 10px 12px; border: 1px solid #c1a87979; border-radius: 5px; background: #2d3a31; color: #f8efdf; text-align: left; cursor: pointer; box-shadow: 0 8px 18px #0003; transition: border-color .3s, background .3s, transform .3s, box-shadow .3s; }
.workflow-node:hover, .workflow-node:focus-visible { transform: translateY(-3px); border-color: #f0ba75; box-shadow: 0 10px 22px #0005, 0 0 0 2px #f0ba7530; outline: none; }
.workflow-node[aria-pressed="true"] { border-color: #ffc77f; background: #45513d; box-shadow: 0 10px 25px #0005, 0 0 17px #ecad6240; }
.workflow-node small { color: #f0b879; font: 600 clamp(6px, .65vw, 9px)/1.2 'JetBrains Mono', monospace; letter-spacing: .09em; }
.workflow-node strong { max-width: 100%; color: #fcf4e6; font: 400 clamp(11px, 1vw, 16px)/1.13 'Fraunces', serif; }
.workflow-node .node-icon { position: absolute; right: 9px; top: 8px; color: #e8b67a92; font: 18px/1 'Fraunces', serif; }
.workflow-node.node-input, .workflow-node.node-test { left: 4%; }
.workflow-node.node-ai, .workflow-node.node-secure { left: 37%; }
.workflow-node.node-design, .workflow-node.node-build { left: 70%; }
.workflow-node.node-input, .workflow-node.node-ai, .workflow-node.node-design { top: 13%; }
.workflow-node.node-build, .workflow-node.node-secure, .workflow-node.node-test { top: 51%; }
.workflow-node.node-product { left: 34%; top: 81%; width: 32%; height: 16%; min-height: 55px; background: #ac7544; border-color: #e7ba81; }
.workflow-node.node-product strong { color: #fff7ed; }
.workflow-node.node-product[aria-pressed="true"] { background: #c58d54; box-shadow: 0 10px 27px #0005, 0 0 22px #e6a36370; }
.workflow-detail { min-height: 63px; display: flex; align-items: center; gap: 17px; padding: 12px 20px; border-top: 1px solid #b9a17950; background: #1b241f; }
.workflow-step { flex: 0 0 auto; color: #eab575; font: 600 9px/1.3 'JetBrains Mono', monospace; letter-spacing: .08em; }
.workflow-detail p { margin: 0; color: #e7e0cf; font: 12px/1.45 Inter, sans-serif; letter-spacing: 0; }
@keyframes workflow-stream { to { stroke-dashoffset: -39; } }
@keyframes workflow-pulse { 50% { box-shadow: 0 0 0 5px #efa96b1c, 0 0 18px #efa96b; } }
@media (max-width: 1024px) { .statement-grid { grid-template-columns: 1fr; gap: 36px; } .statement-visual { width: min(100%, 520px); } }
@media (max-width: 580px) { .workflow-head { height: 43px; padding: 0 12px; font-size: 7px; } .workflow-canvas { min-height: 265px; } .workflow-node { min-height: 55px; padding: 6px; gap: 4px; } .workflow-node small { font-size: 6px; } .workflow-node strong { font-size: 11px; } .workflow-node .node-icon { display: none; } .workflow-node.node-product { min-height: 46px; } .workflow-detail { min-height: 72px; padding: 10px 12px; } .workflow-detail p { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { html:not(.motion-enabled) .workflow-lines .workflow-signal, html:not(.motion-enabled) .workflow-head i { animation: none; } }