/* Motion enhances visible content; no entrance relies on hidden default styles. */
.motion-picture{display:contents}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(1100px,100%);height:640px;top:18px;left:50%;border-radius:50%;background:radial-gradient(ellipse,#8dc5ff20,transparent 68%);transform:translateX(-50%);animation:hero-atmosphere 30s ease-in-out infinite}
.hero-top,.hero-product,.hero-bottom{position:relative}
.hero-glyph{display:inline-block;white-space:pre;vertical-align:baseline}
.hero h1>.hero-glyph{background:none;color:var(--text)}
.hero h1>.hero-title-accent{background:none}
.hero-title-accent>.hero-glyph{color:transparent;background:linear-gradient(145deg,#254e80,#1685f5);background-clip:text;-webkit-background-clip:text}
html[data-theme=dark] .hero h1>.hero-glyph{background:none;color:var(--text)}
html[data-theme=dark] .hero h1>.hero-title-accent{background:none}
html[data-theme=dark] .hero-title-accent>.hero-glyph{background-image:linear-gradient(145deg,#badbff,#55aaff)}
.nav-links a{position:relative;transition:color .2s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.button>span:last-child,.button>svg:last-child,.text-link>span,.preview-launch>span{transition:transform .24s ease}
.button:hover>span:last-child,.button:hover>svg:last-child,.text-link:hover>span{transform:translateX(3px)}
.hero-actions .button:hover>span:last-child,.preview-launch:hover>span{transform:translateY(3px)}
.hero-proof span{transition:color .25s ease}
.hero-proof span:hover{color:var(--blue)}
.scenario-grid article,.detail-card,.req-intro-card,.case-card{transition:border-color .3s ease,box-shadow .3s ease}
.scenario-grid article:hover{border-color:#5d91c9;box-shadow:0 12px 35px #020e2022}
.detail-card:hover,.case-card:hover{border-color:#a4c8ef;box-shadow:0 16px 35px #264d7c0b}
html[data-theme=dark] .detail-card:hover,html[data-theme=dark] .case-card:hover{border-color:#38536d;box-shadow:0 16px 35px #020b1926}
html[data-theme=dark] .scenario-grid article:hover{border-color:#38536d;box-shadow:0 12px 35px #020e2022}
.faq-list summary span{transition:transform .24s ease}
.faq-list details[open] p{animation:detail-enter .45s ease both}
.brand-mark{transition:transform .35s ease}
.brand:hover .brand-mark{transform:rotate(0)}
.hero .live-dot{animation:status-breathe 5.6s ease-in-out infinite}
.hero.motion-outside::before,.hero.motion-outside .live-dot,.site-motion-paused .hero::before,.site-motion-paused .hero .live-dot{animation-play-state:paused}
#requirements-dialog[open]{animation:dialog-enter .34s cubic-bezier(.2,.75,.2,1) both}
#requirements-dialog[open]::backdrop{animation:backdrop-enter .32s ease both}
@keyframes hero-atmosphere{0%,100%{transform:translateX(-50%) translateY(0) scale(1);opacity:.7}50%{transform:translateX(-48%) translateY(22px) scale(1.08);opacity:1}}
@keyframes status-breathe{0%,100%{box-shadow:0 0 0 0 #36c6a529;opacity:.7}50%{box-shadow:0 0 0 4px #36c6a500;opacity:1}}
@keyframes detail-enter{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
/* Inline symbols use their own geometry, so feedback never moves button text. */
.svg-motion-icon>path,.svg-motion-icon>rect,.svg-motion-icon>circle{transform-box:fill-box;transform-origin:center}
.svg-motion-icon .icon-data-bar{transform-origin:center bottom}
.svg-motion-icon .icon-flow-accent{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:16 84;pointer-events:none;opacity:0}
.svg-motion-enabled .svg-motion-icon .icon-data-bar{animation:icon-data-rise 9.2s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--icon-order,0)*-.88s)}
.svg-motion-enabled .svg-motion-icon .icon-space-layer{animation:icon-layer-lift 9.6s ease-in-out infinite;animation-delay:calc(var(--icon-order,0)*-1.1s)}
.svg-motion-enabled .svg-motion-icon .icon-link-node{animation:icon-node-signal 8.4s ease-in-out infinite;animation-delay:calc(var(--icon-order,0)*-2.8s)}
.svg-motion-enabled .svg-motion-icon .icon-flow-accent{animation:icon-connection-flow 8.4s linear infinite;animation-delay:calc(var(--icon-order,0)*-2.8s)}
.svg-motion-enabled .svg-motion-icon .icon-alert-mark{animation:icon-alert-signal 4.8s ease-in-out infinite}
.svg-motion-enabled .svg-motion-icon .icon-phone-receiver{animation:icon-phone-ring 12.4s ease-in-out infinite}
.svg-motion-icon:not(.svg-motion-visible)>*,.svg-motion-document-paused .svg-motion-icon>*{animation-play-state:paused!important}
.req-more>summary svg{transition:transform .28s cubic-bezier(.2,.75,.2,1)}
@keyframes icon-data-rise{0%,100%{transform:scaleY(.86);opacity:.76}35%,60%{transform:scaleY(1);opacity:1}}
@keyframes icon-layer-lift{0%,100%{transform:translateY(.65px);opacity:.76}45%,65%{transform:translateY(-.65px);opacity:1}}
@keyframes icon-node-signal{0%,100%{opacity:.72}25%,45%{opacity:1}}
@keyframes icon-connection-flow{0%{stroke-dashoffset:100;opacity:0}12%{opacity:.85}70%{opacity:.85}90%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes icon-alert-signal{0%,100%{opacity:.55}45%,65%{opacity:1}}
@keyframes icon-phone-ring{0%,5%,18%,100%{transform:rotate(0)}8%{transform:rotate(-4deg)}11%{transform:rotate(4deg)}14%{transform:rotate(-2deg)}}
@media(max-width:760px){.nav-links a::after{left:12px;right:12px;bottom:7px}.hero::before{height:460px}.hero-title-accent>.hero-glyph{background-image:linear-gradient(145deg,#235589,#1685f5)}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero .live-dot,.faq-list details[open] p,#requirements-dialog[open],#requirements-dialog[open]::backdrop{animation:none}.button>span:last-child,.button>svg:last-child,.text-link>span,.preview-launch>span,.nav-links a,.nav-links a::after,.brand-mark,.hero-proof span,.scenario-grid article,.detail-card,.req-intro-card,.case-card,.faq-list summary span{transition:none}.button:hover>span:last-child,.button:hover>svg:last-child,.text-link:hover>span,.hero-actions .button:hover>span:last-child,.preview-launch:hover>span{transform:none}}
@media(prefers-reduced-motion:reduce){.svg-motion-icon>*,.svg-motion-enabled .svg-motion-icon>*{animation:none!important}.svg-motion-icon .icon-flow-accent{opacity:0}.req-more>summary svg{transition:none}}

/* Slow ambient light belongs to the page surface, below all content. */
.ambient-surface{position:relative;isolation:isolate}
.section-ambient{position:absolute;inset:0;z-index:-1;overflow:hidden;contain:paint;pointer-events:none;border-radius:inherit;mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect;--ambient-blue:#509cff1a;--ambient-cyan:#51cddd13}
.section-ambient::before,.section-ambient::after{content:"";position:absolute;inset:-12%;pointer-events:none;background:radial-gradient(ellipse 43% 48% at 20% 30%,var(--ambient-blue),transparent 74%),radial-gradient(ellipse 35% 47% at 78% 69%,var(--ambient-cyan),transparent 76%);animation:ambient-light-flow 40s ease-in-out infinite;animation-delay:var(--ambient-phase,0s);opacity:.8}
.section-ambient::after{background:radial-gradient(ellipse 42% 37% at 70% 18%,var(--ambient-blue),transparent 76%);animation-name:ambient-light-return;animation-duration:48s;opacity:.65}
html[data-theme=dark] .section-ambient,.dark-section .section-ambient{--ambient-blue:#347fff20;--ambient-cyan:#47c5e512}
.ambient-surface:not(.ambient-in-view)>.section-ambient::before,.ambient-surface:not(.ambient-in-view)>.section-ambient::after,.ambient-motion-paused .section-ambient::before,.ambient-motion-paused .section-ambient::after{animation-play-state:paused}
@keyframes ambient-light-flow{0%,100%{transform:translate3d(-5%,-3%,0) scale(1);opacity:.65}50%{transform:translate3d(6%,5%,0) scale(1.06);opacity:.95}}
@keyframes ambient-light-return{0%,100%{transform:translate3d(5%,4%,0) scale(1);opacity:.5}50%{transform:translate3d(-7%,-4%,0) scale(1.08);opacity:.8}}
@media(max-width:760px){.section-ambient::before,.section-ambient::after{inset:-8%;background-size:100% 100%;opacity:.7}}
@media(prefers-reduced-motion:reduce){.section-ambient::before,.section-ambient::after{animation:none!important;transform:none;opacity:.65}}