/* Homepage motion and layout (index.html only). Everything animated is switched off by prefers-reduced-motion
   and by the "Pause motion" button (html.motion-paused). Animations use transform/opacity only. */
:root{--gold:#e8d29d;--mint:#7fd1b9;--ink:#132e29;--card:#1b3b32}
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#7fd1b9,#e8d29d);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:50}
.navigation{position:sticky;top:0;z-index:40;background:#132e29cc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:padding .25s,box-shadow .25s}
.navigation.scrolled{padding-top:14px;padding-bottom:14px;box-shadow:0 8px 30px #04130f66}
.navigation nav .motion-switch{position:static}
.center{text-align:center}

/* ---------- hero ---------- */
.hero-v2{position:relative;isolation:isolate;overflow:visible;padding-top:36px}
.sky{position:absolute;inset:-120px 0 0;z-index:-1;overflow:hidden;pointer-events:none;mask-image:linear-gradient(#000 70%,transparent)}
.stars i{position:absolute;display:block;border-radius:50%;background:#f6efcf;opacity:.15;animation:twinkle var(--d,4s) ease-in-out var(--delay,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.1;transform:scale(.8)}50%{opacity:.95;transform:scale(1.25)}}
.aurora{position:absolute;width:70vw;height:50vh;filter:blur(70px);opacity:.38;border-radius:50%;animation:drift 22s ease-in-out infinite alternate}
.a1{left:-10%;top:5%;background:radial-gradient(closest-side,#2f8f78,transparent)}
.a2{right:-15%;top:25%;background:radial-gradient(closest-side,#7a63c9,transparent);animation-duration:28s;animation-delay:-8s}
@keyframes drift{from{transform:translate3d(-4%,0,0) scale(1)}to{transform:translate3d(8%,6%,0) scale(1.15)}}
.orb{position:absolute;border-radius:50%;transform:translate3d(0,calc(var(--scroll,0) * var(--k,0.2) * -1px),0)}
.o1{right:12%;top:18%;width:84px;height:84px;background:radial-gradient(circle at 30% 25%,#cfe0bf,#5e947c 45%,#1b413c 78%);box-shadow:0 0 70px #92c2a544;animation:bob 9s ease-in-out infinite}
.o2{left:47%;top:9%;width:40px;height:40px;background:radial-gradient(circle at 30% 25%,#f1d9a0,#b3834a 50%,#5a3a22);box-shadow:0 0 40px #e0b36a33;animation:bob 7s ease-in-out -3s infinite}
.ring{position:absolute;right:calc(12% - 40px);top:calc(18% + 22px);width:170px;height:44px;border:7px solid #91a79555;border-radius:50%;transform:rotate(-22deg)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
.hero-copy h1 em.shimmer{background:linear-gradient(100deg,#e4cc93 20%,#fff6d6 45%,#e4cc93 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0}
.chips li{font-size:12px;padding:7px 13px;border:1px solid #5f7b6e;border-radius:99px;background:#1d3c3366;color:#d9e5d6}
.button.glow{position:relative;overflow:hidden;box-shadow:0 0 0 0 #e8d29d55;animation:pulse 3.2s ease-out infinite}
.button.glow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff9 50%,transparent 65%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #e8d29d66}70%,100%{box-shadow:0 0 0 18px #e8d29d00}}
@keyframes sheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.product-preview{position:relative;margin:0}
.product-preview .screenshot-button img{border-radius:14px;box-shadow:0 30px 80px #04130fcc,0 0 0 1px #ffffff1a}
.float-badge{position:absolute;z-index:2;padding:8px 14px;font-size:12px;font-weight:700;border-radius:99px;background:#17352cf0;border:1px solid #8ba593;box-shadow:0 12px 30px #04130f88;animation:bob 6s ease-in-out infinite;white-space:nowrap}
.b1{left:-18px;top:14%;color:#e8d29d}.b2{right:-14px;top:38%;animation-delay:-2s}.b3{left:6%;bottom:21%;animation-delay:-4s;color:#7fd1b9}
.tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;will-change:transform}

/* ---------- scrolling pictures ---------- */
.marquee-section{padding:22px 0 14px;overflow:hidden}
.marquee{overflow:hidden;margin:14px 0;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.track{display:flex;gap:20px;width:max-content;margin:0;padding:6px 10px;list-style:none;animation:marquee var(--dur,70s) linear infinite}
.marquee.reverse .track{animation-direction:reverse}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.track li{flex:none;width:clamp(220px,26vw,340px);text-align:center}
.track .screenshot-button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:12px;transition:transform .25s,box-shadow .25s}
.track .screenshot-button:hover,.track .screenshot-button:focus-visible{transform:translateY(-6px) scale(1.03);box-shadow:0 18px 40px #04130faa}
.track img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #ffffff22;aspect-ratio:4/3;object-fit:cover}
.track span{display:block;margin-top:9px;font-size:12px;color:#c3d1c5;letter-spacing:.4px}

/* ---------- stats ---------- */
.stats{max-width:1100px;margin:36px auto;padding:0 6%;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.stats div{padding:22px 12px;border:1px solid #3d6153;border-radius:16px;background:linear-gradient(180deg,#1b3b32,#16332b)}
.stats strong{display:block;font-family:welcomeFallback,Georgia,serif;font-size:clamp(38px,5vw,58px);font-weight:400;line-height:1;color:#e8d29d}
.stats span{display:block;margin-top:8px;font-size:12px;color:#b9c9bb;line-height:1.5}

/* ---------- reveal ---------- */
.js-anim [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js-anim [data-reveal].revealed{opacity:1;transform:none}
.js-anim .tilt[data-reveal].revealed{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ---------- features ---------- */
.lift{transition:transform .25s,box-shadow .25s,border-color .25s}
.lift:hover{transform:translateY(-8px);box-shadow:0 24px 50px #04130f88;border-color:#a8be9f}
.lift .feature-icon{display:inline-block;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.lift:hover .feature-icon{transform:rotate(14deg) scale(1.18)}
.feature-grid{grid-template-columns:repeat(3,1fr)}

/* ---------- token math ---------- */
.fuel{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.slider{display:block;margin:22px 0 6px;font-size:15px}
.slider b{color:#e8d29d;font-size:22px}
.slider input{display:block;width:100%;margin-top:14px;accent-color:#e8d29d;height:28px}
.fuel-result{display:flex;align-items:center;gap:18px;margin:20px 0 4px;padding:20px;border:1px solid #5f7b6e;border-radius:16px;background:#17352c}
.fuel-result>div{flex:1;text-align:center}
.fuel-result small{display:block;font-size:11px;letter-spacing:1.4px;color:#a9bcac;text-transform:uppercase}
.fuel-result strong{display:block;font-family:welcomeFallback,Georgia,serif;font-size:50px;font-weight:400;line-height:1.1;color:#e8d29d;transition:transform .25s}
.fuel-result strong.bump{transform:scale(1.18)}
.fuel-result span{font-size:13px;color:#cfdccf}
.fuel-result .arrow{flex:none;font-size:28px;color:#7fd1b9;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.fuel-shot{position:relative;margin:0}
.fuel-shot img{width:100%;height:auto;border-radius:16px;box-shadow:0 30px 70px #04130fcc,0 0 0 1px #ffffff22}
.fuel-shot .screenshot-button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.coin{position:absolute;color:#e8d29d;font-size:26px;text-shadow:0 0 18px #e8d29daa;animation:rise 5s ease-in infinite}
.c1{left:8%;bottom:-6px}.c2{left:46%;bottom:-14px;animation-delay:-1.7s;font-size:20px}.c3{right:10%;bottom:-8px;animation-delay:-3.2s;font-size:32px}
@keyframes rise{0%{transform:translateY(0) scale(.7);opacity:0}15%{opacity:1}100%{transform:translateY(-190px) scale(1.2) rotate(40deg);opacity:0}}

/* ---------- steps timeline ---------- */
.timeline{position:relative;list-style:none;margin:0;padding:0}
.timeline::before{content:"";position:absolute;left:23px;top:20px;bottom:20px;width:2px;background:linear-gradient(#e8d29d,#7fd1b9);opacity:.5;transform-origin:top;animation:grow 1.6s ease-out both}
@keyframes grow{from{transform:scaleY(0)}}
.timeline li{position:relative}

/* ---------- worlds ---------- */
.world-grid article{transition:box-shadow .3s}
.world-grid article:hover{box-shadow:0 30px 70px #04130faa}
.world-grid .screenshot-button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.world-grid img{width:100%;height:auto;border-radius:14px;display:block}

/* ---------- families ---------- */
.families h2{max-width:560px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.trust-grid article{padding:22px;border:1px solid #3d6153;border-radius:16px;background:#17352c;transition:transform .25s,border-color .25s}
.trust-grid article:hover{transform:translateY(-6px);border-color:#a8be9f}
.trust-grid span{display:block;font-size:30px;margin-bottom:6px}
.trust-grid h3{margin:0 0 6px;font-size:17px}
.trust-grid p{margin:0;font-size:13px;color:#c0cfc1;line-height:1.7}
.trust-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px;font-size:14px}
.trust-links a{color:#e8d29d}

/* ---------- closing ---------- */
.closing{position:relative;isolation:isolate;overflow:hidden;text-align:center}
.closing-glow{position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:radial-gradient(closest-side,#e8d29d44,transparent);z-index:-1;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.25);opacity:.65}}

/* ---------- responsive ---------- */
@media(max-width:900px){
 .stats{grid-template-columns:repeat(2,1fr)}
 .feature-grid{grid-template-columns:1fr}
 .fuel{grid-template-columns:1fr;gap:30px}
 .trust-grid{grid-template-columns:repeat(2,1fr)}
 .b1{left:0}.b2{right:0}
 .navigation nav{gap:14px}.navigation nav>a:not(.button){display:none}
}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr}.fuel-result strong{font-size:40px}.float-badge{font-size:11px;padding:6px 10px}}

/* ---------- motion off ---------- */
@media(prefers-reduced-motion:reduce){
 .stars i,.aurora,.orb,.float-badge,.shimmer,.button.glow,.button.glow::after,.track,.coin,.fuel-result .arrow,.timeline::before,.closing-glow{animation:none!important}
 .js-anim [data-reveal]{opacity:1;transform:none;transition:none}
 .tilt{transition:none}
 .track{flex-wrap:wrap;width:auto;justify-content:center}.track li:nth-child(n+13){display:none}
}
.motion-paused .stars i,.motion-paused .aurora,.motion-paused .orb,.motion-paused .float-badge,.motion-paused .shimmer,.motion-paused .button.glow,.motion-paused .button.glow::after,.motion-paused .track,.motion-paused .coin,.motion-paused .fuel-result .arrow,.motion-paused .timeline::before,.motion-paused .closing-glow{animation-play-state:paused!important}
@media(max-width:640px){
 .navigation{padding:12px 5%;gap:10px;flex-wrap:nowrap}
 .logo{font-size:25px}
 .navigation nav{gap:8px;flex-wrap:nowrap}
 .navigation .motion-switch{padding:6px 9px;font-size:11px;white-space:nowrap}
 .navigation .button.small{min-height:36px;padding:6px 12px;font-size:12px;gap:6px;white-space:nowrap}
 .hero-v2{padding-top:18px}
 .product-preview{margin-top:20px}
 .chips li{font-size:11px;padding:5px 10px}
}
@media(max-width:640px){.o1{width:54px;height:54px;right:7%;top:2%}.ring{width:110px;height:30px;border-width:5px;right:calc(7% - 28px);top:calc(2% + 12px)}.o2{left:70%;top:1%;width:26px;height:26px}}

/* ---------- feature showcase: tabs + crossfading screenshots that advance on their own ---------- */
.showcase{--sc-dur:6.5s;max-width:1000px;margin:18px auto 8px;padding:0 20px}
.sc-head{display:flex;align-items:center;gap:10px}
.sc-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 10px;flex:1;mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 12px;border-radius:999px;border:1px solid #ffffff26;background:#0d221d99;color:#cfdccf;font:600 14px/1 system-ui,-apple-system,sans-serif;cursor:pointer;overflow:hidden;transition:background .3s,color .3s,border-color .3s,transform .2s}
.sc-tab span{font-size:15px;opacity:.85}
.sc-tab:hover{border-color:#e2b86788;transform:translateY(-1px)}
.sc-tab.is-active{background:#e2b867;color:#16231c;border-color:#e2b867}
.sc-bar{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:#16231c33;overflow:hidden}
.sc-bar::after{content:"";position:absolute;inset:0;background:#16231c;transform-origin:left;transform:scaleX(0)}
.showcase.is-auto .sc-tab.is-active .sc-bar::after{animation:sc-fill var(--sc-dur) linear forwards}
.showcase.is-paused .sc-tab.is-active .sc-bar::after,.motion-paused .showcase .sc-tab.is-active .sc-bar::after{animation-play-state:paused}
@keyframes sc-fill{to{transform:scaleX(1)}}
.sc-pause{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff33;background:#0d221d;color:#e8e4cf;font-size:12px;cursor:pointer;margin-bottom:8px}
.sc-pause[aria-pressed="true"]{background:#e2b867;color:#16231c}
.sc-stage{position:relative;aspect-ratio:4/3;max-height:min(78vh,720px);margin:4px auto 0;border-radius:20px;overflow:hidden;border:1px solid #ffffff24;background:#0a1915;box-shadow:0 40px 90px #020c09cc,0 0 0 1px #e2b86714;isolation:isolate}
.sc-stage::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 30% 20%,#e2b86722,transparent 40%),radial-gradient(circle at 80% 90%,#67e8f91c,transparent 45%);z-index:-1}
.sc-slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.035) translateY(12px);transition:opacity .75s ease,transform 1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.sc-slide.is-active{opacity:1;transform:none;pointer-events:auto;z-index:1}
.sc-slide.is-leaving{opacity:0;transform:scale(.985) translateY(-8px);z-index:0}
.sc-slide .screenshot-button{position:absolute;inset:0;border-radius:0;background:none;height:100%}
.sc-slide img{width:100%;height:100%;object-fit:cover;object-position:top left;transform-origin:30% 20%}
.showcase.is-auto .sc-slide.is-active img{animation:sc-drift var(--sc-dur) ease-out forwards}
.showcase.is-paused .sc-slide.is-active img,.motion-paused .showcase .sc-slide.is-active img{animation-play-state:paused}
@keyframes sc-drift{from{transform:scale(1)}to{transform:scale(1.05) translate(-1%,-1%)}}
.sc-slide figcaption{position:absolute;left:18px;bottom:18px;max-width:min(430px,calc(100% - 36px));padding:14px 16px;border-radius:14px;background:#0b1b17d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff22;color:#e6eee7;display:grid;gap:4px;transform:translateY(16px);opacity:0;transition:transform .7s .25s cubic-bezier(.2,.7,.2,1),opacity .6s .25s}
.sc-slide.is-active figcaption{transform:none;opacity:1}
.sc-slide figcaption b{font:400 22px/1.1 Georgia,serif;color:#f6efd7}
.sc-slide figcaption span{font-size:14px;line-height:1.45;color:#cbd8cd}
.sc-slide figcaption a{font-size:13px;font-weight:700;color:#e2b867;text-decoration:none;margin-top:2px}.sc-slide figcaption a:hover{text-decoration:underline}
@media(max-width:640px){.sc-stage{border-radius:14px}.sc-slide figcaption{left:10px;right:10px;bottom:10px;max-width:none;padding:10px 12px}.sc-slide figcaption b{font-size:18px}.sc-slide figcaption span{font-size:13px}.sc-tab{padding:9px 13px 11px;font-size:13px}}

/* ---------- picture strip: drag, momentum and a gentle depth effect (driven by home.js) ---------- */
.marquee-hint{text-align:center;font-size:13px;color:#a9baae;margin:26px 0 0}
.marquee.is-js{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;perspective:1200px}
.marquee.is-js.is-dragging{cursor:grabbing}
.marquee.is-js .track{animation:none;will-change:transform;transform-style:preserve-3d}
.marquee.is-js .track li{transition:none;will-change:transform,opacity}
.marquee.is-js .track img{pointer-events:none;-webkit-user-drag:none}
.track li span{transition:color .3s}
.track li.is-near span{color:#f2e3b6}
@media(prefers-reduced-motion:reduce){.sc-slide,.sc-slide figcaption{transition:opacity .2s!important;transform:none!important}.sc-slide img{animation:none!important}}


body>footer div{flex-wrap:wrap;row-gap:8px}
@media(max-width:640px){.sc-slide figcaption span{display:none}.sc-slide figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px}}