/* Progressive enhancement: all content is visible without JavaScript. */
.ux-reveal{transition:opacity .7s ease var(--ux-delay,0ms),translate .85s cubic-bezier(.16,1,.3,1) var(--ux-delay,0ms)}
.ux-reveal.ux-pending{opacity:0;translate:0 26px}
.ux-reveal:focus-within{opacity:1;translate:0 0}
.ux-hero-visual{width:calc(100% - 44px);max-width:850px;margin:28px auto 6px;padding:10px;border:1px solid #304a60;border-radius:18px;background:linear-gradient(130deg,#12263c,#0c1726);box-shadow:0 18px 48px #0003}
.ux-hero-stage{position:relative;height:330px;border-radius:11px;overflow:hidden;background:#142031;--ux-split:50%}
.ux-hero-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none}
.ux-hero-stage .ux-original{clip-path:inset(0 calc(100% - var(--ux-split)) 0 0);image-rendering:auto}
.ux-hero-line{position:absolute;left:var(--ux-split);top:0;bottom:0;width:2px;background:#f2f8ff;pointer-events:none}
.ux-hero-line:after{content:'↔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f2f8ff;color:#0a2035;box-shadow:0 3px 16px #0004}
.ux-hero-label{position:absolute;top:12px;left:12px;color:#fff;background:#071724db;padding:7px 10px;border-radius:5px;font-size:11px;pointer-events:none}
.ux-hero-label.ux-after{left:auto;right:12px}
.ux-hero-slider{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:pan-y}
.ux-hero-stage:focus-within{outline:3px solid #63dafa;outline-offset:3px}
.ux-hero-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px 0;color:#abc0d7;font-size:11px}
.ux-demo-replay{font:inherit;min-height:44px;padding:8px 14px;border:1px solid #345068;border-radius:7px;background:#112a40;color:#d2eeff;cursor:pointer}
.ux-hero-visual.ux-floating{animation:ux-float 4s ease-in-out 1}
@keyframes ux-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
body .button,body .nav-action,.ux-demo-replay{transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease}
body .button:hover,body .nav-action:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0a496525}
body .button:active,body .nav-action:active{transform:translateY(0)}
header nav a{transition:color .2s ease}header nav a:hover{color:#76deff}
.plan{transition:opacity .7s ease var(--ux-delay,0ms),translate .85s cubic-bezier(.16,1,.3,1) var(--ux-delay,0ms),transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0003;border-color:#59a8c6}
.feature-tile svg,.portfolio-thumbs button{transition:transform .25s ease}.feature-tile:hover svg{transform:translateY(-3px)}.portfolio-thumbs button:hover{transform:translateY(-2px)}
.questions details{transition:border-color .25s ease}.questions details[open]{border-color:#49788f}.questions summary:focus-visible,.ux-demo-replay:focus-visible{outline:3px solid #63dafa;outline-offset:4px}
.ux-parallax{translate:0 var(--ux-drift,0px)}
@supports (interpolate-size:allow-keywords){.questions details{interpolate-size:allow-keywords}.questions details::details-content{height:0;overflow:clip;opacity:0;transition:height .28s ease,opacity .22s ease,content-visibility .28s allow-discrete}.questions details[open]::details-content{height:auto;opacity:1}}
@media(max-width:650px){.ux-hero-stage{height:260px}.ux-hero-visual{margin-top:20px;padding:7px}.ux-hero-caption{font-size:10px;gap:8px}.ux-hero-label{font-size:10px}.ux-reveal.ux-pending{translate:0 18px}}
@media(prefers-reduced-motion:reduce){.ux-reveal,.ux-reveal.ux-pending{opacity:1;translate:none;transition:none}.ux-floating{animation:none!important}.ux-parallax{translate:none}.questions details::details-content{transition:none}body .button,body .nav-action,.plan,.feature-tile svg,.portfolio-thumbs button,.ux-demo-replay{transition:none!important;transform:none!important}html{scroll-behavior:auto}}