/* SolidCode Motion 20260925-1. Scoped to two hero sections; no global resets. */
.solid-motion-hero{position:relative;isolation:isolate;overflow:hidden;background:#091217!important;color:#f8f9f2;padding-block:clamp(2rem,5vw,5rem)}
.solid-motion-hero::before{display:none}
.solid-motion-hero>.wrap{position:relative;z-index:2}
.solid-motion-hero .hero-grid,.solid-motion-hero .mobile-feature{gap:clamp(1.5rem,3vw,3rem)}
.solid-motion-hero h1{max-width:13ch;font-size:clamp(2.7rem,5.2vw,5.2rem);line-height:1.06;letter-spacing:-.055em;text-wrap:balance}
.solid-motion-hero h1 em{display:block;color:#d5fa72}
.solid-motion-hero .hero-lead{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.75;max-width:48ch;color:#c0cdc9}
.solid-motion-hero .hero-note{max-width:48ch;font-size:.8rem;color:#aebfba}
.solid-motion-hero .breadcrumbs{margin-bottom:2rem}
.solid-motion-hero .primary{background:#d5fa72;color:#12201b;border-color:#d5fa72}
.solid-motion-hero .primary:hover{background:#e4ff9d}
.solid-motion-hero .mobile-copy>p:not(.eyebrow):not(.hero-lead):not(.mobile-note){font-size:1rem;line-height:1.7}
.sm-terrain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s}
.solid-motion-hero[data-terrain-ready] .sm-terrain{opacity:1}
.sm-static-grid{position:absolute;inset:40% -20% -50%;z-index:0;pointer-events:none;background-image:radial-gradient(circle,#c9f88a70 1px,transparent 1.8px);background-size:26px 26px;transform:perspective(500px) rotateX(55deg);mask-image:linear-gradient(transparent,#0006 50%,transparent);opacity:.5}
.solid-motion-hero[data-terrain-ready] .sm-static-grid{opacity:0}
.solid-motion-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#091217a8 0%,#09121766 32%,transparent 65%),linear-gradient(0deg,#091217 0%,transparent 24%)}
.solid-motion{position:relative;min-width:0;width:100%;margin:0;padding:0;align-self:center;color:#e8eee6;contain:layout style}
.sm-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;font:500 .58rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;color:#a9bfb7;padding-inline:2%;min-height:30px}
.sm-stage-label{color:#d5fa72;min-width:10rem;text-align:right}
.sm-stage{position:relative;aspect-ratio:4/3;width:100%}
.sm-halo{position:absolute;inset:12% 2% 5% 8%;border-radius:50%;background:radial-gradient(ellipse,#afef4820 0%,#afef4805 50%,transparent 70%);pointer-events:none}
.sm-scene{display:block;width:100%;height:100%;overflow:visible;font-family:Manrope,system-ui,-apple-system,sans-serif}
.sm-phone{transform-origin:95px 170px;filter:drop-shadow(0 16px 12px #0008)}
.sm-dash{transform-origin:142px 134px;filter:drop-shadow(0 16px 14px #0006)}
.sm-node{transform-origin:30px 30px}
.sm-wires{opacity:.36}
.sm-packets{opacity:0;stroke-dasharray:4 96;stroke-dashoffset:100}
.sm-badge{transform-origin:90px 22px}
.sm-controls{display:flex;align-items:center;gap:.8rem;justify-content:space-between;padding:0 2%;min-height:48px}
.sm-steps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;gap:.6rem;margin:0!important;padding:0!important;flex:1;min-width:0}
.sm-steps li{position:relative;padding:.65rem 0 0!important;border-top:1px solid #52665a;list-style:none!important;font:500 .6rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#acc1b7;white-space:nowrap;text-align:left}
.sm-steps li.is-current{border-top-color:#d5fa72;color:#e4ffad}
.sm-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;padding:.4rem .65rem;border:1px solid #53634f;border-radius:5px;background:#14201c;color:#d5fa72;font:500 .65rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer;flex-shrink:0}
.sm-toggle:hover{background:#263623}.sm-toggle:focus-visible{outline:2px solid #d5fa72;outline-offset:4px}
.solid-motion .sm-caption{font-size:.61rem;line-height:1.55;color:#9eb3a8;padding:.7rem 2% 0;margin:0;border:0;display:block}
/* All movement is optional. Initial HTML and no-JS visitors see the complete composition. */
[data-motion-enhanced] .sm-phone{animation:sm-phone 12s ease-in-out infinite}
[data-motion-enhanced] .sm-dash{animation:sm-dash 12s ease-in-out infinite}
[data-motion-enhanced] .sm-node{animation:sm-node 6s ease-in-out infinite}
[data-motion-enhanced] .sm-node-b{animation-delay:-1.5s}
[data-motion-enhanced] .sm-node-c{animation-delay:-3s}
[data-motion-enhanced] .sm-node-d{animation-delay:-4.5s}
[data-motion-enhanced] .sm-packets{opacity:1}
[data-motion-enhanced] .sm-packets path{animation:sm-flow 3s linear infinite}
[data-motion-enhanced] .sm-packets path:nth-child(2){animation-delay:-.75s}
[data-motion-enhanced] .sm-packets path:nth-child(3){animation-delay:-1.5s}
[data-motion-enhanced] .sm-packets path:nth-child(4){animation-delay:-2.25s}
[data-motion-enhanced] .sm-chart{stroke-dasharray:100;animation:sm-chart 12s ease-in-out infinite}
[data-motion-enhanced] .sm-endpoint{animation:sm-point 3s ease-in-out infinite}
[data-motion-enhanced] .sm-badge{animation:sm-badge 8s ease-in-out infinite}
[data-motion-enhanced] .sm-badge-alt{animation-delay:-4s}
[data-motion-state]:not([data-motion-state="running"]) .sm-scene *{animation-play-state:paused!important}
@keyframes sm-phone{0%,100%{transform:translate(0,3px) rotate(0deg)}25%{transform:translate(5px,-8px) rotate(2deg)}65%{transform:translate(-2px,-4px) rotate(-1deg)}}
@keyframes sm-dash{0%,100%{transform:translate(0,-3px) rotate(0deg)}35%{transform:translate(-4px,8px) rotate(-1deg)}75%{transform:translate(3px,-6px) rotate(1deg)}}
@keyframes sm-node{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sm-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes sm-chart{0%,8%{stroke-dashoffset:100;opacity:.3}45%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:100;opacity:.3}}
@keyframes sm-point{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes sm-badge{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(min-width:960px){.solid-motion-hero .hero-grid,.solid-motion-hero .mobile-feature{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr)}.solid-motion-hero .hero-copy{padding-bottom:1rem}.solid-motion{margin-left:1%;width:99%}}
@media(max-width:959px){.solid-motion{max-width:690px;margin:0 auto}.solid-motion-hero .hero-copy,.solid-motion-hero .mobile-copy{max-width:44rem}.solid-motion-hero .hero-grid,.solid-motion-hero .mobile-feature{grid-template-columns:minmax(0,1fr)}.solid-motion-hero::after{background:linear-gradient(0deg,#091217,transparent 22%),linear-gradient(180deg,#09121766,transparent 60%)}}
@media(max-width:599px){.solid-motion-hero{padding-top:2.2rem}.solid-motion-hero h1{font-size:clamp(2.65rem,10.8vw,4rem)}.solid-motion-hero .hero-note{display:none}.solid-motion-hero .hero-mobile-link{font-size:.72rem}.solid-motion-hero .hero-grid,.solid-motion-hero .mobile-feature{gap:1.5rem}.sm-heading{font-size:.5rem;letter-spacing:.03em}.sm-stage-label{min-width:0}.sm-controls{gap:.5rem}.sm-steps{gap:.4rem}.sm-steps li{font-size:.52rem}.sm-toggle{padding:.4rem;gap:.35rem;font-size:.58rem}.solid-motion .sm-caption{font-size:.55rem}.solid-motion-hero .breadcrumbs{margin-bottom:1.8rem}.solid-motion-hero .mobile-copy .mobile-note{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.solid-motion .sm-scene *{animation:none!important;transition:none!important}.sm-terrain{transition:none}.sm-packets{display:none}}