/* Motion is progressive: content is visible without this file or JavaScript. */
.hero h1>.headline-row{display:block;overflow:hidden;color:#fff;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1>.headline-accent{color:#849eff}
.headline-inner{display:block}
.hero-visual{position:relative;min-width:0;isolation:isolate}
.hero-visual::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-45px -25px;background:radial-gradient(ellipse at 70% 38%,#315efe25,transparent 62%),radial-gradient(ellipse at 20% 72%,#0dbebc14,transparent 64%);filter:blur(30px);opacity:.9}
.scroll-progress{position:fixed;z-index:30;left:0;right:0;top:0;height:2px;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#7896ff,#87e4df);box-shadow:0 0 12px #7896ff55}
.example-window,.package,.designer-signature,.demo-stage{position:relative}
.example-window::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffff1a 47%,#ffffff04 55%,transparent 75%);transform:translateX(-125%);opacity:0}
.package::before{content:'';position:absolute;pointer-events:none;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--spot-x,50%) var(--spot-y,30%),#7c9dff18,transparent 78%);opacity:0}
.button{position:relative}
.button>span[aria-hidden]{display:inline-block}
.button.primary{overflow:hidden}
.button.primary::before{content:'';position:absolute;pointer-events:none;inset:-1px;background:linear-gradient(110deg,transparent 20%,#ffffff21 48%,transparent 76%);transform:translateX(-130%)}
@media(prefers-reduced-motion:no-preference){
 html[data-motion=enabled] .headline-accent .headline-inner{background:linear-gradient(100deg,#849eff 12%,#acd8f5 38%,#8edbd7 51%,#849eff 78%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:accent-sweep 2.8s .18s cubic-bezier(.2,.7,.2,1) 1 both}
 @keyframes accent-sweep{from{background-position:100% 50%}to{background-position:0 50%}}
 html[data-motion=enabled] .demo-stage{transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
 html[data-motion=enabled] .demo-stage.is-depth-active{transform:perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:#5977a2;box-shadow:0 30px 80px #0005,0 0 45px #315efe0d}
 html[data-motion=enabled] .designer-signature.is-depth-active{transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
 .example-window,.package,.designer-signature{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s}
 .example-window>img{transition:transform .85s cubic-bezier(.2,.8,.2,1),filter .6s}
 .example-window::after{transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .25s}
 .package::before{transition:opacity .3s}
 .button>span[aria-hidden]{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
 .button.primary::before{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
 .button.primary{transition:background .2s,box-shadow .35s,border-color .2s}
 .button:focus-visible>span[aria-hidden]{transform:translate(3px,-3px)}
 .button.primary:focus-visible{box-shadow:0 7px 25px #315efe35}
 @media(hover:hover) and (pointer:fine){
  html[data-motion=enabled] .example:hover .example-window{transform:translateY(-7px);box-shadow:0 24px 45px #0003}
  html[data-motion=enabled] .example:hover .example-window>img{transform:scale(1.045);filter:saturate(1.06)}
  html[data-motion=enabled] .example:hover .example-window::after{transform:translateX(125%);opacity:1}
  html[data-motion=enabled] .package:hover{transform:translateY(-6px);border-color:#647fbd;box-shadow:0 20px 48px #0003}
  html[data-motion=enabled] .package:hover::before{opacity:1}
  html[data-motion=enabled] .button:hover>span[aria-hidden]{transform:translate(3px,-3px)}
  html[data-motion=enabled] .button.primary:hover{box-shadow:0 8px 30px #315efe38}
  html[data-motion=enabled] .button.primary:hover::before{transform:translateX(130%)}
 }
}
@media(max-width:960px){.hero-visual::before{inset:-24px 0;filter:blur(22px)}}
@media(prefers-reduced-motion:reduce){
 .scroll-progress{display:none}
 .hero-visual::before{filter:none;opacity:.45}
 .demo-stage,.package,.example-window,.example-window>img,.designer-signature,.headline-inner,.button>span[aria-hidden]{transform:none!important;animation:none!important;transition:none!important}
 .example-window::after,.button.primary::before{display:none}
}
@media print{.scroll-progress,.hero-visual::before{display:none}.headline-accent .headline-inner{color:#172033!important;background:none!important}.hero-visual{display:none}}