/* Real screenshots stay in a flat layer so small UI text remains legible. */
html.lenis{scroll-behavior:auto}
.product-stage{height:720px;perspective:none;isolation:isolate}
.studio-backdrop{position:absolute;inset:0 -20px;background:url('/assets/moneta-studio-v1.webp') center/cover no-repeat;z-index:-1;opacity:.68;mask-image:radial-gradient(ellipse 64% 54% at 50% 50%,#000 38%,#0009 68%,transparent 100%)}
.product-stage::after{content:"";position:absolute;left:50%;bottom:40px;width:240px;height:25px;transform:translateX(-50%);border-radius:50%;background:#020d09;filter:blur(12px);z-index:-1}
.phone-rig{top:auto;bottom:54px;left:50%;width:300px;height:631px;margin-left:-150px;transform:none;transform-style:flat;animation:none;transition:none}
.phone-rig .phone{border:8px solid #131c19;border-radius:40px;transform:none;background:#f4f8f2;box-shadow:0 0 0 1px #a8b9a2,0 0 0 3px #435e50,0 22px 45px #0009;isolation:isolate}
.phone-rig .phone img{width:100%;height:100%;object-fit:contain}
.phone-rig .phone::after{inset:7px auto auto 50%;width:48px;height:10px;transform:translateX(-50%);border-radius:20px;background:#131c19;box-shadow:inset 0 0 0 1px #253b31}
.phone-back,.phone-edge{display:none}
.phone-key{right:-5px;top:142px;width:3px;height:46px;transform:none;background:linear-gradient(#a1b3a3,#466453);box-shadow:0 -64px 0 #789383}
.gallery-stage{perspective:none}
.gallery-phone img{aspect-ratio:720/1640;object-fit:contain;height:auto}
.gallery-phone,.screen-gallery figure:nth-child(even) .gallery-phone{width:220px;transform:none;border:6px solid #172d23;border-radius:31px;box-shadow:0 0 0 1px #94a889,0 17px 28px #263c302b;transition:transform .2s}
.gallery-phone:hover,.gallery-phone:focus-visible,.screen-gallery figure:nth-child(even) .gallery-phone:hover,.screen-gallery figure:nth-child(even) .gallery-phone:focus-visible{transform:translateY(-6px)}
@media(max-width:1100px){.product-stage{height:640px}.product-stage::after{bottom:31px;width:210px}.phone-rig{width:260px;height:544px;margin-left:-130px;bottom:45px}}
@media(max-width:760px){.product-stage{height:640px}.product-stage::after{bottom:22px}.studio-backdrop{inset-inline:-20px}.phone-rig{width:270px;height:566px;margin-left:-135px;bottom:36px}.phone-rig .phone{border-radius:37px}.gallery-phone,.screen-gallery figure:nth-child(even) .gallery-phone{width:210px}}
@media(max-width:380px){.product-stage{height:580px}.phone-rig{width:244px;height:510px;margin-left:-122px;bottom:35px}}
@media(prefers-reduced-motion:reduce){.gallery-phone{transition:none}}

/* One continuous studio environment across the entire first screen. */
body::before{height:max(100svh,900px);background:var(--dark)}
.header{position:relative;z-index:3}
.hero{min-height:calc(100svh - 100px);isolation:isolate}
.hero::before{background:linear-gradient(90deg,#091f19f5 0%,#091f19e8 30%,#091f1966 65%,#091f1933 100%),url('/assets/moneta-studio-v1.webp') center 65%/cover no-repeat;inset-block:-100px 0;z-index:-1}
.studio-backdrop{display:none}
/* A shared gallery environment keeps the original screenshots crisp. */
#fitur{position:relative;isolation:isolate}
.getting-started{background:linear-gradient(#183c3140,#183c3140),url('/assets/moneta-install-studio-v1.webp') center/cover no-repeat}
.getting-started::after{display:none}
#faq{position:relative;isolation:isolate}
#faq::before{content:"";position:absolute;inset:0 calc((100% - 100vw)/2);z-index:-1;background:linear-gradient(#f0f1e940,#f0f1e940),url('/assets/moneta-faq-studio-v1.webp') center/cover no-repeat;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);pointer-events:none}
.closing-section{position:relative;isolation:isolate}
.closing-section::before{content:"";position:absolute;inset:0 calc((100% - 100vw)/2) -150px;z-index:-1;background:linear-gradient(#f0f1e930,#f0f1e930),url('/assets/moneta-download-studio-v1.webp') center/cover no-repeat;mask-image:linear-gradient(transparent,#000 18%);pointer-events:none}
.footer{position:relative;z-index:1}
#fitur::before{content:"";position:absolute;inset:0 calc((100% - 100vw)/2);z-index:-1;background:linear-gradient(#f0f1e930,#f0f1e930),url('/assets/moneta-features-studio-v1.webp') center/cover no-repeat;mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);pointer-events:none}
#tampilan{position:relative;isolation:isolate;padding-top:70px}
#tampilan::before{content:"";position:absolute;inset:0 calc((100% - 100vw)/2);z-index:-1;background:url('/assets/moneta-gallery-studio-v1.webp') center/cover no-repeat;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);pointer-events:none}
#tampilan .gallery-stage{background:transparent;border-radius:0}
#tampilan .gallery-stage::before{display:none}
#tampilan .gallery-phone{box-shadow:0 0 0 1px #94a889,0 20px 26px #263c3033}
.hero-copy{padding-top:84px}
.hero-visual{justify-content:center}
.getting-started{isolation:isolate;background:none}
.getting-started::before{content:"";position:absolute;inset:-6px 0;z-index:-1;background:linear-gradient(#183c3140,#183c3140),url('/assets/moneta-install-studio-v1.webp') center/cover no-repeat;pointer-events:none}
@keyframes moneta-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes moneta-background{0%,100%{translate:0 0}50%{translate:0 5px}}
@keyframes moneta-reveal{from{opacity:.2;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  .phone-rig{animation:moneta-float 6s ease-in-out infinite;animation-play-state:paused}
  .hero::before,#fitur::before,#tampilan::before,.getting-started::before,#faq::before,.closing-section::before{animation:moneta-background 12s ease-in-out infinite;animation-play-state:paused}
  .motion-visible::before,.hero.motion-visible .phone-rig{animation-play-state:running}
  .reveal-enter{animation:moneta-reveal .7s cubic-bezier(.2,.7,.2,1) both}
  body.motion-paused .hero .phone-rig,.motion-paused section::before,.motion-paused .reveal-enter,body.motion-inactive .hero .phone-rig,.motion-inactive section::before{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){.phone-rig,.reveal-enter,section::before{animation:none!important}}
@media(max-width:760px){body::before{height:100svh}.hero{min-height:calc(100svh - 80px)}.hero::before{inset-block:-80px 0;background-position:center,center 65%}.hero-copy{padding-top:48px}.hero-visual{border-top:0}}

.mobile-download{display:none}
.demo-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;border-bottom:1px solid var(--line)}
#demo{position:relative;isolation:isolate}
#demo::before{content:"";position:absolute;inset:0 calc((100% - 100vw)/2);z-index:-1;background:url('/assets/moneta-demo-studio-v1.webp') center/cover no-repeat;mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);pointer-events:none}
.demo-copy>p:last-child{margin-top:24px;color:var(--muted);font-size:15px}
.demo-stage{display:flex;justify-content:center;padding:12px;background:transparent}
.demo-video{display:block;width: min(100%,280px);height:auto;aspect-ratio:1280/2772;border:6px solid #172d23;border-radius:30px;background:#091f19;box-shadow:0 0 0 1px #94a889,0 20px 30px #263c302b}
@media(max-width:760px){.demo-layout{grid-template-columns:1fr;gap:28px}.demo-video{width:min(100%,260px)}.demo-copy>p:last-child{margin-top:18px}}
@media(max-width:760px){#demo::before{background-position:60% center;opacity:.5}}
.updates-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:60px}
#pembaruan{position:relative;isolation:isolate}
#pembaruan::before{content:"";position:absolute;inset:0 calc((100% - 100vw)/2);z-index:-1;background:linear-gradient(#f0f1e91a,#f0f1e91a),url('/assets/moneta-updates-studio-v1.webp') left center/cover no-repeat;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);pointer-events:none}
@media(max-width:760px){#pembaruan::before{background-position:left top;background-size:auto 520px;background-repeat:no-repeat;opacity:.22}}
.release-history details{border-bottom:1px solid #183c3130}
.release-history details:first-child{border-top:1px solid var(--ink)}
.release-history summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none}
.release-history summary::-webkit-details-marker{display:none}
.release-version{display:flex;align-items:center;gap:12px;font:12px Consolas,monospace;color:#56733e}
.release-badge{background:#dce8c7;color:#294d35;border-radius:20px;padding:4px 10px;font:11px 'Segoe UI',sans-serif}
.release-history strong{display:block;font-size:21px;line-height:1.4;margin:9px 0 4px}
.release-history time{font-size:12px;color:var(--muted)}
.release-expand{font-size:24px}
.release-history details[open] .release-expand{transform:rotate(45deg)}
.release-body{padding:0 0 25px;font-size:14px;line-height:1.8;color:var(--muted)}
.release-body ul{margin:0 0 16px;padding-left:20px}
.release-body li+li{margin-top:6px}
.release-body a{color:var(--ink)}
@media(max-width:760px){.updates-layout{grid-template-columns:1fr;gap:28px}.release-history strong{font-size:20px}}
@media(max-width:760px){
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .mobile-download{display:flex;align-items:center;justify-content:space-between;gap:16px;position:fixed;inset:auto 0 0;z-index:20;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#091f19f5;color:#f2f5e9;border-top:1px solid #afc3b440;box-shadow:0 -5px 20px #091f1920}
  .mobile-download strong{font-size:17px;display:block;line-height:1.2}
  .mobile-download small{font-size:11px;color:#afc3b4}
  .mobile-download .button{min-height:46px;padding:12px 22px;flex-shrink:0}
  .viewer-open .mobile-download{display:none}
  .hero h1{font-size:clamp(54px,12vw,82px);letter-spacing:-3px}
  .hero-copy{padding-bottom:12px}
  .hero-actions{gap:18px}
  .hero-description{font-size:15px}
  .header{height:76px}
  .header nav{display:none}
  .product-stage{height:570px}
  .phone-rig{width:244px;height:510px;margin-left:-122px;bottom:32px}
  .hero-visual{padding-top:16px}
  .gallery-navigation{flex-wrap:wrap;gap:12px}
  .gallery-navigation button{width:46px;height:46px}
  .faqs summary{min-height:56px;font-size:14px}
  .steps p,.feature p{font-size:14px;line-height:1.7}
  .feature p{margin-top:0}
  .closing-section::before{bottom:-200px}
}