/* Live particle blocks. The canvas covers the whole viewport (fixed and
   click-transparent) so the blocks can fly over the entire page; the static
   logo still covers loading and reduced-motion fallbacks inside the hero. */
.wordmark-stage{height:auto!important;width:min(100%,1280px);max-width:1280px;margin:0 auto!important;padding-bottom:0;perspective:none}
.wordmark-media{position:relative;width:100%;aspect-ratio:1440/560}
.wordmark-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.wordmark-canvas{position:fixed;inset:0;width:100%;height:100%;opacity:0;background:transparent;pointer-events:none;z-index:40}
.wordmark-stage.webgl-ready .wordmark-canvas{opacity:1}
.wordmark-stage.webgl-ready .wordmark-poster{visibility:hidden}
.motion-static .wordmark-stage .wordmark-canvas{opacity:0}
.motion-static .wordmark-stage .wordmark-poster{visibility:visible}
@media(max-width:520px){.wordmark-media{aspect-ratio:1440/728}}
.hero-bottom{margin-top:12px}
.approach-heading{container-type:inline-size}
.approach-heading h2{max-width:none;font-size:clamp(14px,6.4vw,64px);font-size:clamp(14px,7.5cqw,64px);white-space:nowrap;line-height:1.2;letter-spacing:-.045em}
html[lang=es] .approach-heading h2{font-size:clamp(14px,4.7vw,64px);font-size:clamp(14px,5.4cqw,64px)}
.approach-visual img,.assembly-canvas{object-fit:contain}
/* A single, staggered accent as each solution enters; no perpetual card shimmer. */
.service-card.has-entered .slab-front>i{animation:code-reveal 1.8s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
.service-card.has-entered .slab-front>i:nth-of-type(2){animation-delay:.12s}.service-card.has-entered .slab-front>i:nth-of-type(3){animation-delay:.24s}
.service-card.has-entered .network-node{animation:node-arrive 1.5s cubic-bezier(.2,.8,.2,1) both}.service-card.has-entered .node-b{animation-delay:.14s}.service-card.has-entered .node-c{animation-delay:.28s}.service-card.has-entered .node-d{animation-delay:.42s}
.service-card.has-entered .device-symbol{animation:symbol-arrive 1.8s cubic-bezier(.2,.8,.2,1) both}
.service-card:is(:hover,:focus-visible) .floating-square{transform:translateY(-10px) rotate(12deg)}
.floating-square{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.service-card:is(:hover,:focus-visible) .device-symbol{transform:rotate(90deg)}.device-symbol{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
@keyframes code-reveal{from{transform:scaleX(.15);opacity:.3}to{transform:scaleX(1);opacity:1}}
@keyframes node-arrive{0%{translate:0 14px;opacity:.2}60%{translate:0 -5px}100%{translate:0 0;opacity:1}}
@keyframes symbol-arrive{from{rotate:-100deg;scale:.7}to{rotate:0deg;scale:1}}
/* CSS remains static without JS; one controller handles all scene visibility/preferences. */
[data-motion-scene] *,[data-motion-scene] *::before,[data-motion-scene] *::after{animation-play-state:paused}
.motion-enabled [data-motion-scene].is-inview *,.motion-enabled [data-motion-scene].is-inview *::before,.motion-enabled [data-motion-scene].is-inview *::after{animation-play-state:running}
.motion-static [data-motion-scene] *{animation:none!important}
@media(max-width:760px){.wordmark-stage{margin-top:12px!important;padding-bottom:12px}.approach-visual{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.wordmark-canvas{display:none}}