/* Motion augments the approved composition; textual illustrations remain still. */
:root{--motion-ease:cubic-bezier(.2,.7,.2,1)}
.page{overflow:clip}.header{position:sticky;top:0;z-index:40;transition:box-shadow .3s,background .3s}.header.is-scrolled{background:linear-gradient(105deg,#001225f5,#001a36f5);backdrop-filter:blur(14px);box-shadow:0 6px 25px #00000025}html{scroll-padding-top:calc(70 * var(--u))}
.reading-progress{position:fixed;left:0;top:0;z-index:70;height:2px;width:100%;pointer-events:none}.reading-progress i{height:100%;display:block;background:linear-gradient(90deg,#007aff,#15d0ff);transform:scaleX(var(--read-progress,0));transform-origin:left;box-shadow:0 0 8px #00bfff66}
.header nav a{position:relative;transition:color .2s;padding:8px 0}.header nav a:after{content:'';height:1px;position:absolute;bottom:1px;left:0;right:0;background:#27bcff;transform:scaleX(0);transform-origin:left;transition:transform .25s}.header nav a.is-active{color:#64d1ff}.header nav a.is-active:after,.header nav a:hover:after{transform:scaleX(1)}
.hero-copy>.eyebrow{animation:heroEnter .7s var(--motion-ease) both}.hero h1{animation:heroEnter .85s .08s var(--motion-ease) both}.hero-support{animation:heroEnter .8s .2s var(--motion-ease) both}.audience{animation:heroEnter .75s .3s var(--motion-ease) both}.hero-mark>path[stroke]{stroke-dasharray:300;animation:drawBrand 1.8s .25s var(--motion-ease) both}.hero-mark>g:last-of-type circle{transform-box:fill-box;transform-origin:center;animation:brandPulse 5.5s ease-in-out infinite;animation-play-state:paused}.hero-mark>g:last-of-type circle:nth-child(2){animation-delay:.65s}.hero-mark>g:last-of-type circle:nth-child(3){animation-delay:1.3s}.hero-mark.motion-visible>g:last-of-type circle{animation-play-state:running}
.demo-panel{height:calc(353 * var(--u));transition:border-color .3s,box-shadow .3s}.demo-panel.is-playing{border-color:#23bfff;box-shadow:0 0 35px #008cff16}.demo-tabs{bottom:calc(40 * var(--u))}.demo-playbar{position:absolute;left:0;right:0;bottom:0;height:calc(34 * var(--u));padding:0 calc(17 * var(--u));display:flex;align-items:center;gap:calc(13 * var(--u));border-top:1px solid #174365;background:#00182bd9}.play-flow,.motion-toggle{display:inline-flex;align-items:center;gap:calc(6 * var(--u));padding:calc(5 * var(--u)) 0;background:none;white-space:nowrap;font-size:calc(8.5 * var(--u));color:#8fddff;line-height:1.2}.play-symbol{display:inline-flex;width:calc(17 * var(--u));height:calc(17 * var(--u));align-items:center;justify-content:center;font-size:calc(11 * var(--u));border:1px solid #28769e;border-radius:50%}.play-flow:hover,.motion-toggle:hover{color:white}.flow-caption{font-size:calc(7.8 * var(--u));color:#95acc0;line-height:1.4}.motion-toggle{margin-left:auto;color:#8ba7bc;font-size:calc(7.5 * var(--u))}.motion-toggle>span:first-child{font-size:calc(11 * var(--u));color:#80d9ff}.motion-toggle[aria-pressed=true]{color:#d1ebfa}.motion-toggle:disabled{opacity:.6;cursor:default}
.flow-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.flow-trace{fill:none;stroke:#5de0ff;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:2 38;animation:flowTravel 3.8s linear infinite;animation-play-state:paused}.flow-haze{fill:none;stroke:#14bdff;stroke-width:3;stroke-dasharray:2 38;animation:flowTravel 3.8s linear infinite;animation-play-state:paused;opacity:.65}.motion-visible .flow-trace,.motion-visible .flow-haze{animation-play-state:running}.flow-node{fill:#00bfff10;stroke:#31cfff;stroke-width:1;opacity:0;transition:opacity .4s,stroke-width .4s}.is-playing[data-phase="1"] .flow-node[data-flow-step="1"],.is-playing[data-phase="2"] .flow-node[data-flow-step="2"],.is-playing[data-phase="3"] .flow-node[data-flow-step="3"]{opacity:1;stroke-width:2.5;filter:drop-shadow(0 0 5px #008cff)}.flow-result{fill:none;stroke:#36ceff;stroke-width:1.5;opacity:0;transition:opacity .5s}.demo-panel[data-phase="4"] .flow-result{opacity:.8}.demo-panel[data-phase="4"] .scene-approval:not(:disabled){box-shadow:0 0 0 2px #38ceff,0 0 18px #00aaff55}
.demo-stage.switching{animation:stageEnter .38s var(--motion-ease) both}.alternate-scene .alternate-result{transition:box-shadow .35s}.is-playing .alternate-result{box-shadow:0 0 0 1px #2acbff,0 0 25px #008cff25}.demo-panel[data-phase="2"] .alternate-field:nth-child(1),.demo-panel[data-phase="2"] .alternate-field:nth-child(2),.demo-panel[data-phase="3"] .alternate-field:nth-child(3){background:#dcefff;transition:background .3s}.demo-panel.is-verified .flow-result{stroke:#3ed4a0;opacity:.8}.demo-panel.is-verified{border-color:#2a9d89}
.feature{transition:border-color .3s,box-shadow .3s}.feature:hover,.feature:focus-within{border-color:#4aaee8;box-shadow:0 7px 23px #103f6412}.feature-main:hover,.feature-main:focus-within{border-color:#29a9e5;box-shadow:0 8px 25px #00132925}.feature .icon-link{transition:transform .25s,color .25s}.feature:hover .icon-link,.feature:focus-within .icon-link{transform:translateX(4px);color:#006de4}.feature .under-link span,.button>span,.under-link>span{display:inline-block;transition:transform .25s}.feature .under-link:hover span,.button:hover>span,.under-link:hover>span{transform:translate(2px,-2px)}.feature-main:after{content:'';pointer-events:none;position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 80% 15%,#008cff10,transparent 60%);opacity:0;transition:opacity .4s}.feature-main:hover:after{opacity:1}.feature-ops.motion-visible .checklist>div{animation:checkRow 6s ease-in-out infinite}.feature-ops.motion-visible .checklist>div:nth-child(2){animation-delay:1.5s}
.is-entering{animation:sectionEnter .7s var(--motion-ease) both}.steps li{transition:opacity .3s}.steps li:before{transition:box-shadow .4s,background .4s}.steps li.is-current:before{background:#00a7ff;box-shadow:0 0 0 5px #00a7ff16,0 0 14px #00a7ff30}.steps li.is-current h3{color:#0069bd;transition:color .3s}.steps li.is-passed:before{background:#008cff}.faq-list summary{transition:color .2s}.faq-list summary:hover{color:#087bd0}.faq-list details[open]>p{animation:faqEnter .28s ease-out both}.faq-list summary>span{transition:transform .25s}.contact-band .button{transition:box-shadow .3s,background .3s}.contact-band .button:hover{box-shadow:0 0 30px #078aff45}dialog[open]{animation:dialogEnter .25s var(--motion-ease) both}
.motion-paused *,.motion-paused *:before,.motion-paused *:after,.page-inactive *,.page-inactive *:before,.page-inactive *:after{animation-play-state:paused!important}.motion-paused .flow-node{transition:none}.motion-paused .is-entering{animation:none!important}.motion-paused .hero h1,.motion-paused .hero-support,.motion-paused .audience,.motion-paused .hero-copy>.eyebrow{animation:none!important}.motion-paused .hero-mark>path[stroke]{animation:none!important;stroke-dasharray:none}
@keyframes heroEnter{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes drawBrand{from{stroke-dashoffset:300;opacity:.25}to{stroke-dashoffset:0;opacity:1}}@keyframes brandPulse{0%,55%,100%{opacity:.65;transform:scale(.95)}22%{opacity:1;transform:scale(1.14)}}@keyframes flowTravel{to{stroke-dashoffset:-160}}@keyframes stageEnter{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes sectionEnter{from{opacity:.75;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@keyframes checkRow{0%,50%,100%{box-shadow:inset 0 0 0 1px transparent}15%,30%{box-shadow:inset 0 0 0 1px #7fc4f2}}@keyframes faqEnter{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes dialogEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){html{scroll-padding-top:88px}.demo-panel{height:auto}.demo-tabs{position:static}.demo-playbar{position:static;height:auto;min-height:65px;padding:11px 13px;display:grid;grid-template-columns:1fr auto;gap:9px 10px}.play-flow{font-size:11px;gap:7px;min-height:27px}.play-symbol{width:21px;height:21px;font-size:13px}.motion-toggle{font-size:9px;gap:5px;min-height:27px}.motion-toggle>span:first-child{font-size:12px}.flow-caption{grid-column:1/-1;grid-row:2;font-size:10px;line-height:1.45}.flow-motion{display:none}.mobile-route{position:relative}.mobile-route b{animation:routeArrow 3s ease-in-out infinite;animation-play-state:paused}.mobile-route b:nth-of-type(2){animation-delay:.8s}.motion-visible .mobile-route b{animation-play-state:running}.demo-panel[data-phase="1"] .mobile-route span:nth-of-type(1),.demo-panel[data-phase="2"] .mobile-route span:nth-of-type(2),.demo-panel[data-phase="3"] .mobile-route span:nth-of-type(3){color:white;text-shadow:0 0 10px #00bfff}.scene-approval{bottom:3%}.is-entering{animation-duration:.5s}.header nav a:after{right:auto;width:35px}}@keyframes routeArrow{0%,60%,100%{opacity:.45;transform:translateX(0)}25%{opacity:1;transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.hero-mark>path[stroke]{stroke-dasharray:none}.reading-progress{display:none}.is-entering{opacity:1;transform:none}.motion-toggle{opacity:.6}}
.motion-paused dialog[open],.motion-paused .faq-list details[open]>p,.motion-paused .demo-stage.switching{animation:none!important}