/* Landing motion system. Everything here is progressive: without JavaScript, or with reduced motion, the page renders static and complete. */
:root{--m-spring:cubic-bezier(.34,1.4,.64,1);--m-out:cubic-bezier(.22,1,.36,1)}

/* Hero intro — plays once on first paint. html.motion-ok is set by an inline head script. */
@keyframes m-rise{from{opacity:0;translate:0 28px;scale:.98;filter:blur(8px)}to{opacity:1;translate:0 0;scale:1;filter:none}}
@keyframes m-phones{from{opacity:0;translate:0 70px;scale:.9;rotate:4deg}to{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes m-chip{from{opacity:0;translate:0 14px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
.motion-ok .original-hero h1{animation:m-rise 1s var(--m-out) .05s both}
.motion-ok .original-hero .lede{animation:m-rise 1s var(--m-out) .2s both}
.motion-ok .original-hero .claim{animation:m-rise 1s var(--m-out) .32s both}
.motion-ok .original-hero .niche-showcase>.niche-canvas{animation:m-phones 1.3s var(--m-out) .25s both}
.motion-ok .original-hero .platforms>*{animation:m-chip .7s var(--m-spring) both;animation-delay:calc(.55s + var(--m-i,0)*45ms)}

/* Pointer-tracked depth on the phone stack. JS writes --tilt-x/--tilt-y/--lift. */
.motion-ok .niche-showcase{transform:perspective(1600px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translate3d(0,var(--lift,0px),0);transform-style:preserve-3d;will-change:transform}
.hero-spotlight{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s var(--m-out);background:radial-gradient(520px circle at var(--spot-x,70%) var(--spot-y,40%),#b98cff38,transparent 62%)}
.original-hero:hover .hero-spotlight{opacity:1}
.original-hero .sheet.hero{position:relative}
.original-hero .wrap{position:relative;z-index:1}

/* Floating glass navigation once the hero scrolls away. */
@keyframes m-nav-in{from{translate:0 -130%}to{translate:0 0}}
.nav.nav-floating{position:fixed;top:12px;height:64px;z-index:50;background:color-mix(in srgb,#fffdf8 74%,transparent);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 1px 0 #fff9,0 0 0 1px #33006614,0 18px 40px -18px #1a003a55;animation:m-nav-in .6s var(--m-spring) both}
@media(max-width:760px){.nav.nav-floating{height:58px;top:8px}}

/* Scroll progress hairline (browsers with scroll-driven animations). */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ffc53d,#ff6fb1,#9a5cff)}
@keyframes m-progress{to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()){.motion-ok .scroll-progress{animation:m-progress linear both;animation-timeline:scroll(root)}}

/* Coloured panels rise into place like iOS sheets as they enter the viewport. */
@keyframes m-sheet{from{translate:0 56px;scale:.94}to{translate:0 0;scale:1}}
@supports (animation-timeline:view()){
 .motion-ok main>.section,.motion-ok main>section.section{animation:m-sheet linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
 @keyframes m-parallax{from{translate:0 30px}to{translate:0 -30px}}
 .motion-ok .profession-window,.motion-ok .editor-visual{animation:m-parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}

/* Staggered reveals. landing-motion.js adds [data-reveal] and --m-i, then .is-in once visible. */
.motion-ok [data-reveal]{opacity:0;translate:0 26px;scale:.985;filter:blur(6px);transition:opacity .8s var(--m-out),translate .9s var(--m-spring),scale .9s var(--m-spring),filter .8s var(--m-out);transition-delay:calc(var(--m-i,0)*70ms)}
.motion-ok [data-reveal].is-in{opacity:1;translate:0 0;scale:1;filter:none}

/* Magnetic buttons and 3D tilt cards (fine pointers only; JS writes the offsets). */
.magnetic,.magnetic:hover{transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0);transition:transform .5s var(--m-spring)}
.magnetic:hover{--mag-lift:-3px;transform:translate3d(var(--mag-x,0px),calc(var(--mag-y,0px) + var(--mag-lift)),0)}
.magnetic.is-tracking{transition-duration:.12s}
.tilt-card{transform:perspective(900px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)) translate3d(0,var(--card-lift,0px),0);transition:transform .6s var(--m-spring)}
.tilt-card.is-tracking{transition-duration:.15s}

/* Press feedback everywhere a finger lands. */
.motion-ok :is(.button,.btn,.filters button,.text-link,.template-tile,.signature-card):active{scale:.965;transition:scale .12s}

@media(prefers-reduced-motion:reduce){
 .motion-ok *,.motion-ok *:before,.motion-ok *:after{animation:none!important}
 .motion-ok [data-reveal]{opacity:1;translate:none;scale:none;filter:none;transition:none}
 .motion-ok .niche-showcase,.magnetic,.tilt-card{transform:none!important}
 .nav.nav-floating{animation:none}
}

/* Closing: link chips gather around the promise "all your links, one page". */
.closing .closing-title{display:flex;flex-direction:column;align-items:center;gap:.05em}
.closing .closing-title>span{display:block}
.closing-links,.closing-links[hidden]{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
.closing>*:not(.closing-links):not(.closing-star){position:relative;z-index:1}
.closing-links span{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:#fffdf8;color:#330066;font-size:15px;font-weight:700;white-space:nowrap;box-shadow:0 14px 30px -14px #33006666,inset 0 1px 0 #fff;left:var(--x);top:var(--y);rotate:var(--r,0deg)}
.closing-links span b{font-size:17px;font-weight:400}
.closing-links span:nth-child(1){--x:7%;--y:18%;--r:-6deg}
.closing-links span:nth-child(2){--x:80%;--y:14%;--r:5deg}
.closing-links span:nth-child(3){--x:3%;--y:56%;--r:4deg}
.closing-links span:nth-child(4){--x:83%;--y:52%;--r:-5deg}
.closing-links span:nth-child(5){--x:12%;--y:74%;--r:-3deg}
.closing-links span:nth-child(6){--x:74%;--y:72%;--r:6deg}
@keyframes m-chip-in{from{opacity:0;translate:var(--from-x,0) 60px;scale:.6}to{opacity:1;translate:0 0;scale:1}}
@keyframes m-chip-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.motion-ok .closing-links span{opacity:0}
.motion-ok .closing.is-live .closing-links span{animation:m-chip-in .9s var(--m-spring) both,m-chip-float 5s ease-in-out infinite;animation-delay:calc(var(--n)*90ms),calc(1s + var(--n)*400ms)}
.closing-links span:nth-child(odd){--from-x:-40px}.closing-links span:nth-child(even){--from-x:40px}
@keyframes m-line{from{opacity:0;translate:0 40px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:none}}
.motion-ok .closing .closing-title>span,.motion-ok .closing .eyebrow,.motion-ok .closing .closing-cta,.motion-ok .closing>p:last-child{opacity:0}
.motion-ok .closing.is-live .eyebrow{animation:m-line .7s var(--m-out) both}
.motion-ok .closing.is-live .closing-title>span:nth-child(1){animation:m-line .9s var(--m-out) .12s both}
.motion-ok .closing.is-live .closing-title>span:nth-child(2){animation:m-line .9s var(--m-out) .3s both}
.motion-ok .closing.is-live .closing-cta{animation:m-line .8s var(--m-spring) .5s both}
.motion-ok .closing.is-live>p:last-child{animation:m-line .8s var(--m-out) .65s both}
/* A light sweep crosses the button every few seconds. */
.closing-cta{overflow:hidden;isolation:isolate}
.closing-cta:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff99 50%,transparent 70%);translate:-120% 0}
@keyframes m-shine{0%,70%{translate:-120% 0}100%{translate:120% 0}}
.motion-ok .closing.is-live .closing-cta:after{animation:m-shine 3.6s ease-in-out 1.4s infinite}
.closing-cta{position:relative}
/* The asterisk turns as you scroll past. */
@supports (animation-timeline:view()){@keyframes m-spin{from{rotate:-40deg}to{rotate:80deg}}.motion-ok .closing-star{animation:m-spin linear both;animation-timeline:view()}}
@media(max-width:760px){.closing-links span:nth-child(n+5){display:none}.closing-links span{font-size:12px;padding:9px 13px}.closing-links span:nth-child(1){--x:4%;--y:6%}.closing-links span:nth-child(2){--x:58%;--y:4%}.closing-links span:nth-child(3){--x:5%;--y:83%}.closing-links span:nth-child(4){--x:56%;--y:84%}}
@media(prefers-reduced-motion:reduce){.motion-ok .closing .closing-title>span,.motion-ok .closing .eyebrow,.motion-ok .closing .closing-cta,.motion-ok .closing>p:last-child,.motion-ok .closing-links span{opacity:1}}
@media(max-width:760px){main>.closing.section{padding-top:104px;padding-bottom:104px}.closing-links span:nth-child(1),.closing-links span:nth-child(2){top:24px}.closing-links span:nth-child(3),.closing-links span:nth-child(4){top:auto;bottom:24px}}

/* Phones: readable text, 40px+ tap targets, one-row floating nav, swipeable looks. */
@media(max-width:760px){
 .nav-actions .button{font-size:13px;min-height:40px;padding:0 14px;display:inline-flex;align-items:center}
 .nav-login{font-size:13px;min-height:40px}
 .nav.nav-floating{height:auto;min-height:58px;padding-top:9px;padding-bottom:9px}
 .nav.nav-floating>nav{display:none}
 .platforms>p{font-size:12px}
 .migration-platform span{font-size:12px}
 .editor-colours button{width:32px;height:32px}
 .editor-fonts button{min-width:40px;min-height:40px}
 .editor-open{display:inline-flex;align-items:center;min-height:40px}
 .text-link{display:inline-flex;align-items:center;min-height:40px}
 .footer-panel-heading .brand{font-size:clamp(26px,8vw,40px);white-space:nowrap}
 .footer-columns a{display:flex;align-items:center;min-height:40px;line-height:1.3}
 .footer-columns nav{gap:0}
 .signature-grid{display:flex;grid-template-columns:none;max-width:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -6%;padding:4px 6% 12px;scrollbar-width:none;min-height:0}
 .signature-grid::-webkit-scrollbar{display:none}
 .signature-card{flex:0 0 82%;scroll-snap-align:center}
}
@media(max-width:760px){
 html body .nav-login{font-size:13px}
 html body .nav nav a,html body .nav nav summary{display:inline-flex;align-items:center;min-height:44px}
 html body .nav .brand{display:inline-flex;align-items:center;min-height:44px}
 html body .platforms>p{font-size:12px}
 html body .claim input{min-height:44px}
 html body .editor-control-label,html body .editor-open{font-size:12px}
 html body .footer-columns a{min-height:44px}
 html body .footer-panel-heading p{font-size:13px}
 html body .footer-legal small{font-size:12px}
}
@media(max-width:760px){
 .top-navigation .nav-login.nav-login{font-size:13px}
 .original-hero .platforms>p.platforms-label,.original-hero .platforms>p:first-child{font-size:12px}
 .company-footer .footer-legal small.footer-note,.company-footer .footer-legal>small{font-size:12px}
 .company-footer .footer-panel-heading>p{font-size:13px}
}
@media(max-width:760px){html body .editor-fonts button,html body .editor-open,html body .text-link{min-height:44px}}
/* Touch screens at any width (phones in landscape, tablets): same readable text and tap sizes. */
@media(pointer:coarse){
 .top-navigation .nav-login.nav-login{font-size:13px}
 .original-hero .platforms>p:first-child{font-size:12px}
 .company-footer .footer-legal>small{font-size:12px}
 html body .nav .brand,html body .nav nav a,html body .nav nav summary,html body .claim input,html body .editor-fonts button,html body .editor-open,html body .text-link,html body .footer-columns a{display:inline-flex;align-items:center;min-height:44px}
 html body .footer-columns a{display:flex}
 html body .editor-control-label,html body .editor-open{font-size:12px}
 html body .editor-colours button{width:32px;height:32px}
}
@media(max-width:760px){
 .top-navigation .nav-login.nav-login{display:none}
 html body .nav nav a,html body .nav nav summary{min-height:40px}
}