/* Motion layer: the original layout, palette and typography stay intact. */
body{overflow-x:clip}.hero{isolation:isolate}.hero:after{z-index:-1;background:radial-gradient(ellipse at var(--light-x,70%) var(--light-y,45%),#2e79a949,transparent 60%);transition:background .25s}.hero-copy{z-index:3}.hero h1>span{background-size:220% 100%;background-image:linear-gradient(110deg,#ffad57 20%,#ff8125 40%,#ffe4ad 50%,#ff8a24 60%,#ffb969 80%);animation:title-light 2s ease-out .5s both}.hero .showcase{perspective:1400px;transform-style:preserve-3d}.hero .browser-window{transform:rotateX(var(--rx,3deg)) rotateY(var(--ry,-8deg)) rotateZ(var(--rz,2deg)) translateY(var(--lift,0px));transition:transform .5s cubic-bezier(.18,.7,.2,1),box-shadow .5s;will-change:transform;box-shadow:0 30px 70px #0008,0 0 45px #497eac20;position:relative}.hero .showcase:hover .browser-window{transform:rotateX(var(--rx,3deg)) rotateY(var(--ry,-8deg)) rotateZ(var(--rz,2deg)) translateY(var(--lift,0px))}.browser-window:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at var(--shine-x,30%) var(--shine-y,0%),#fff2,transparent 60%);opacity:var(--shine,0);transition:opacity .5s}.hero .floating-note{transform:translate3d(var(--note-x,0px),var(--note-y,0px),45px) rotate(-2deg);transition:transform .6s cubic-bezier(.18,.7,.2,1);z-index:6}.hero .demo-nav{animation:assembly-nav .8s .25s backwards}.hero .demo-hero{animation:assembly-photo 1.2s .35s backwards}.hero .demo-overlay{animation:assembly-copy .9s .65s backwards}.hero .demo-bottom{animation:assembly-nav .8s .85s backwards}.hero .floating-note{animation:assembly-note 1s 1.1s backwards}.hero-copy{animation:copy-arrives 1s .1s backwards}
@keyframes title-light{from{background-position:100% 0}to{background-position:0 0}}@keyframes assembly-nav{from{opacity:0;transform:translateY(-22px)}}@keyframes assembly-photo{from{opacity:0;clip-path:inset(50% 0 50% 0)}to{opacity:1;clip-path:inset(0)}}@keyframes assembly-copy{from{opacity:0;transform:translateY(25px)}}@keyframes assembly-note{from{opacity:0;translate:0 30px;scale:.92}}@keyframes copy-arrives{from{opacity:0;translate:0 20px}}
.reading-line{position:fixed;inset:0 auto auto 0;width:100%;height:2px;z-index:30;background:linear-gradient(90deg,#ff8a24,#ffd395);transform:scaleX(var(--read-progress,0));transform-origin:left;pointer-events:none;box-shadow:0 0 12px #ff8a2466}
.cinematic{--film-progress:0;isolation:isolate;overflow:clip;position:relative;background:#081520}.cinematic-sticky{overflow:visible;isolation:isolate}.cinematic-sticky:before{content:'';position:absolute;inset:10% -4%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at calc(15% + var(--film-progress)*70%) 52%,#ff8a2426,transparent 43%),radial-gradient(ellipse at calc(85% - var(--film-progress)*60%) 40%,#3888bc2b,transparent 50%);opacity:.8}.cinematic-stage{position:relative;border-radius:calc(22px - var(--film-progress)*12px);transform:perspective(1400px) rotateX(calc((1 - var(--film-progress))*7deg)) scale(calc(.92 + var(--film-progress)*.08));transform-origin:center;isolation:isolate;outline:1px solid #86b5d522;box-shadow:0 30px 80px #0006;overflow:hidden}.cinematic-stage:before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 36%,#ff9b3d16 46%,#ffe4b755 49.8%,#ffeacba8 50%,#ffae592b 50.3%,transparent 60%);transform:translateX(calc(-90% + var(--film-progress)*180%));mix-blend-mode:screen}.cinematic-stage:after{border:1px solid #a7c7dd22;box-shadow:inset 0 -24px 30px -12px #081520,inset 0 20px 25px -10px #081520}.cinematic-caption,.cinematic-bottom{position:relative;z-index:4}.cinematic-caption .eyebrow{color:#d5e3ed}.cinematic-progress>span{box-shadow:0 0 16px #ff8a2488}.cinematic-sticky>.film-grid{position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(#6388a90c 1px,transparent 1px),linear-gradient(90deg,#6388a90c 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse,#000,transparent 72%);transform:perspective(900px) rotateX(28deg) translateY(calc(var(--film-progress)*-35px));transform-origin:50% 70%}
.website-project{perspective:1400px;--project-entry:0;--card-x:0deg;--card-y:0deg;--card-glow:0}.website-project .project-browser{position:relative;transform:perspective(1400px) rotateX(calc(var(--project-entry)*6deg + var(--card-x))) rotateY(var(--card-y)) translateY(calc(var(--project-entry)*45px));transition:transform .5s cubic-bezier(.15,.75,.2,1),box-shadow .5s;transform-style:preserve-3d;box-shadow:0 30px 65px #0007,0 0 45px #ff8a240a}.website-project:nth-child(2) .project-browser{transform:perspective(1400px) rotateX(calc(var(--project-entry)*6deg + var(--card-x))) rotateY(var(--card-y)) translateY(calc(var(--project-entry)*65px))}.website-project .project-browser:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:radial-gradient(ellipse at var(--card-light-x,50%) var(--card-light-y,30%),#b7e1ff29,transparent 65%);opacity:var(--card-glow);transition:opacity .4s}.website-project .project-mobile{transform:translate3d(calc(var(--project-entry)*-15px),calc(var(--project-entry)*25px - 3px),45px) rotate(calc(var(--project-entry)*-7deg));transition:transform .65s cubic-bezier(.15,.75,.2,1);box-shadow:0 25px 40px #0008}.website-project:hover .project-browser{box-shadow:0 38px 80px #0009,0 0 40px #568aaf1c}.website-project:hover img{transform:none}.website-project .project-meta{transition:transform .5s}.website-project:hover .project-meta{transform:translateY(4px)}
.comparison{isolation:isolate}.comparison.is-transforming .compare-handle{box-shadow:0 0 36px 4px #ffa85d88}.comparison.is-transforming .compare-handle:before{box-shadow:0 0 25px #ff8a2466}.compare-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:23px}.compare-replay{display:inline-flex;align-items:center;gap:12px;border:1px solid #ffffff30;border-radius:100px;background:#142637;color:#f1f4f6;padding:12px 19px;font-size:.82rem;transition:background .2s,border-color .2s}.compare-replay:hover{background:#1b354b;border-color:#ff8a24}.compare-replay>span{color:#ffab5b;font-size:1.1rem}.compare-actions>p{font-size:.76rem;color:#91a8ba}.comparison:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 60px #559fcc00;transition:box-shadow .5s}.comparison.is-transforming:after{box-shadow:inset 0 0 60px #559fcc1c}
.service-card{--glow-x:50%;--glow-y:0%}.service-card:not(.orange-card):after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(280px circle at var(--glow-x) var(--glow-y),#5096c521,transparent 75%);opacity:0;transition:opacity .3s}.service-card:hover:after{opacity:1}.button:not(:disabled){position:relative;overflow:hidden}.button:not(:disabled):after{content:'';position:absolute;inset:-50% -100%;background:linear-gradient(115deg,transparent 38%,#fff4 49%,transparent 61%);translate:-40% 0;transition:translate .65s ease;pointer-events:none}.button:not(:disabled):hover:after{translate:40% 0}.effect-reveal{transition:opacity .75s,translate .75s,clip-path .85s;transition-delay:var(--reveal-delay,0ms)}.effect-reveal:not(.effect-visible){opacity:0;translate:0 28px;clip-path:inset(0 0 12% 0)}.effect-visible{opacity:1;translate:0 0;clip-path:inset(0)}
@media(max-width:760px){.cinematic-stage{box-shadow:0 16px 35px #0005;border-radius:12px;transform:scale(calc(.96 + var(--film-progress)*.04))}.cinematic-sticky>.film-grid{background-size:42px 42px;transform:none}.hero .browser-window{transition:transform .2s linear;transform:perspective(1100px) rotateX(var(--mobile-tilt,2deg)) rotateY(-3deg) rotateZ(var(--mobile-turn,2deg))}.hero .showcase:hover .browser-window{transform:perspective(1100px) rotateX(var(--mobile-tilt,2deg)) rotateY(-3deg) rotateZ(var(--mobile-turn,2deg))}.compare-actions{flex-wrap:wrap;gap:12px}.compare-actions>p{font-size:.71rem}.compare-replay{padding:12px 16px;font-size:.8rem}.website-project .project-browser,.website-project:nth-child(2) .project-browser{transform:perspective(1000px) rotateX(calc(var(--project-entry)*5deg)) translateY(calc(var(--project-entry)*28px))}.effect-reveal:not(.effect-visible){translate:0 18px}.hero .browser-window{will-change:auto}}
@media(prefers-reduced-motion:reduce){.hero h1>span,.hero .demo-nav,.hero .demo-hero,.hero .demo-overlay,.hero .demo-bottom,.hero .floating-note,.hero-copy{animation:none!important}.hero .browser-window,.hero .showcase:hover .browser-window,.website-project .project-browser,.website-project:nth-child(2) .project-browser,.website-project .project-mobile,.cinematic-stage,.cinematic-sticky>.film-grid{transform:none!important;transition:none!important}.effect-reveal{opacity:1!important;translate:none!important;clip-path:none!important;transition:none!important}.reading-line,.cinematic-stage:before,.film-grid{display:none}.button:after{display:none}.website-project .project-browser:after{display:none}.compare-replay{display:none}.compare-actions>p{margin-top:0}}