/* Colors sampled from the supplied references. */
footer,.dv6-footer{background:#06182b}.connected-section{background:#0a2540}.connected-head p,.diagram-footer p{color:#c2d2e3}
.system-diagram{height:auto;min-height:440px;background:#0d2e4d;border:1px solid #28465f;border-radius:12px;padding:30px;overflow:hidden}
.system-diagram> :not(.scenario-stage){display:none!important}
.scenario-stage{position:relative;color:#fff}.scene-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.scene-heading small{color:#5ce5bb;font-size:10px;letter-spacing:.14em}.scene-heading h3{font:600 26px/1.2 'DM Sans',sans-serif;margin:10px 0 0;letter-spacing:-.035em}.scene-pause{border:1px solid #10b981;color:#58dfb6;background:transparent;padding:10px 14px;border-radius:5px;font-size:11px;white-space:nowrap}.scene-pause:hover{color:white;background:#10b981}
.scenario.active{background:#10b981;color:#fff;border-color:#10b981}.scenario{color:white;border-color:#50728e}.scenario:hover{border-color:#10b981}
.scene-body{animation:scene-enter .5s ease both}.scene-grid{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:28px;align-items:center;min-height:280px}.scene-card{padding:23px;background:#143b59;border:1px solid #41637d;border-radius:10px;position:relative}.scene-card small,.scene-stat small{display:block;color:#aac6dc;font-size:10px;letter-spacing:.08em}.scene-card strong{display:block;font-size:18px;margin:12px 0;color:#fff}.scene-label{font-size:11px;color:#caddec;line-height:1.6}.scene-source{display:grid;gap:12px}.scene-source div{padding:13px 16px;background:#183e5c;border:1px solid #355f7e;border-radius:7px;font-size:12px;animation:source-light 6s ease infinite}.scene-source div:nth-child(2){animation-delay:1s}.scene-source div:nth-child(3){animation-delay:2s}.scene-source div span{color:#49e1b1;float:right}
.scene-chart{height:145px;display:flex;align-items:end;gap:12px;padding:20px 0 0;border-bottom:1px solid #3c617c}.scene-chart i{flex:1;background:linear-gradient(#10b981,#40dcba);height:var(--h);transform-origin:bottom;animation:scene-bars 6s ease-in-out infinite;animation-delay:var(--d)}.scene-chart i:nth-child(even){background:linear-gradient(#479bde,#76cdf2)}.scene-stat{margin-top:18px;display:flex;justify-content:space-between;gap:12px}.scene-stat b{color:#51e4b8;font-size:13px;display:block;margin-top:6px}.scan-line{height:2px;background:#73f5d0;box-shadow:0 0 18px #10b981;position:absolute;left:20px;right:20px;top:50%;animation:scene-scan 6s ease-in-out infinite}
.scene-result{border-color:#10b981;background:#103f48;animation:result-light 6s ease infinite}.scene-check{width:40px;height:40px;border:1px solid #10b981;color:#5cf0c3;display:grid;place-items:center;border-radius:50%;font-size:22px}.scene-note{font-size:9px;letter-spacing:.1em;color:#9fb9cf;margin:24px 0 0}
.expansion-visual{position:relative;border-radius:10px;background:#103451;padding:20px 24px}.expansion-visual svg{display:block;width:100%;height:175px;overflow:visible}.expansion-path{stroke-dasharray:650;animation:route-build 8s ease-in-out infinite}.expansion-dot{offset-path:path('M 15 150 C 110 150 105 110 170 110 S 245 40 310 40 S 380 25 430 15');offset-distance:0%;animation:route-travel 8s ease-in-out infinite;fill:#fff;filter:drop-shadow(0 0 5px #10b981)}.milestones{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#c6e1f1}.milestones span{animation:milestone-light 8s infinite}.milestones span:nth-child(2){animation-delay:2s}.milestones span:nth-child(3){animation-delay:4s}
.ai-process{position:relative;min-height:260px;display:grid;place-items:center}.ai-circuit{position:absolute;inset:20px;border:1px solid #477599;border-radius:50%;animation:ai-orbit 18s linear infinite}.ai-circuit:before,.ai-circuit:after{content:'';position:absolute;width:9px;height:9px;background:#40e3b5;border-radius:50%;top:50%;left:-5px;box-shadow:0 0 20px #10b981}.ai-circuit:after{left:auto;right:-5px;background:#74c6ff}.ai-circuit.inner{inset:50px;animation-direction:reverse;transform:rotate(30deg)}.ai-core-scene{width:116px;height:116px;background:#124d52;border:1px solid #10b981;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:22px;z-index:1;animation:ai-think 4s ease infinite}.ai-core-scene b{font-size:30px;color:#5df0c4}.ai-core-scene small{font-size:9px;color:#b6dedc;margin-top:8px}.ai-task{padding:12px;border-bottom:1px solid #326272;font-size:11px;animation:task-done 6s infinite}.ai-task:nth-child(2){animation-delay:2s}.ai-task:nth-child(3){animation-delay:4s}.ai-task span{float:right;color:#50e4b8}
.scene-paused *, .scene-offscreen *{animation-play-state:paused!important}
@keyframes scene-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes source-light{0%,20%{border-color:#10b981;transform:translateX(5px)}40%,100%{border-color:#355f7e;transform:none}}
@keyframes scene-bars{0%,100%{transform:scaleY(.35)}45%,75%{transform:scaleY(1)}}
@keyframes scene-scan{0%,100%{top:30%;opacity:0}15%,75%{opacity:.8}85%{top:85%;opacity:0}}
@keyframes result-light{0%,35%,100%{box-shadow:0 0 0 transparent}60%,85%{box-shadow:0 0 25px #10b98125}}
@keyframes route-build{0%,10%{stroke-dashoffset:650}70%,100%{stroke-dashoffset:0}}
@keyframes route-travel{0%,10%{offset-distance:0%;opacity:0}15%{opacity:1}70%,100%{offset-distance:100%}}
@keyframes milestone-light{0%,20%{color:#50e4b8}35%,100%{color:#c6e1f1}}
@keyframes ai-orbit{to{rotate:360deg}}
@keyframes ai-think{50%{box-shadow:0 0 0 15px #10b9810f,0 0 40px #10b98125}}
@keyframes task-done{0%,25%{background:#10b98120;color:#fff}35%,100%{background:transparent;color:#b9d2e4}}
@media(max-width:850px){.scene-grid{grid-template-columns:1fr 1.5fr;gap:18px}.scene-result{grid-column:1/-1;display:flex;gap:18px;align-items:center}.scene-result strong{margin:0}.scene-result .scene-label{margin-left:auto}.system-diagram{padding:23px}}
@media(max-width:600px){.scene-grid{grid-template-columns:1fr;gap:18px}.scene-source{grid-template-columns:repeat(3,1fr);gap:7px}.scene-source div{padding:12px 8px;font-size:10px}.scene-source div span{float:none;display:block;margin-top:8px}.scene-heading h3{font-size:22px}.scene-heading{align-items:start;gap:10px}.scene-pause{padding:8px;font-size:10px}.scene-result{display:block}.scene-result strong{margin:12px 0}.system-diagram{min-height:0;padding:18px}.scene-card{padding:18px}.expansion-visual{padding:18px 8px}.scene-note{line-height:1.6}.ai-process{min-height:230px}.scene-heading small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.scenario-stage *{animation:none!important}.expansion-path{stroke-dashoffset:0}.expansion-dot,.scan-line{display:none}.scene-pause{display:none}}
/* Keep content visible when switching scenes while motion is paused. */
.scene-body{animation:none;opacity:1}