/* REP-517 Landing v2 (Wonder "Landing v2": desktop pcs 1440x900, mobile now 390x844). Hand-written, no build step. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fdfcfc;overflow-x:hidden}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:normal}
h1,p{margin:0}
a{text-decoration:none}

.vr-stage{display:none;justify-content:center;align-items:center;min-height:100vh;overflow:hidden}
.vr-mobile{display:flex;align-items:flex-start}
@media (min-width:900px){.vr-desktop{display:flex}.vr-mobile{display:none}}

.vr-board{position:relative;flex:none;background:#fdfcfc;overflow:visible;color:#171717}
.vr-board--desk{width:1440px;height:900px}
.vr-board--mob{width:390px;height:844px}

/* Decor: grainy orbs and floating task chips */
.vr-decor{position:absolute;inset:0;pointer-events:none}
.vr-orb{position:absolute;border-radius:9999px;overflow:hidden;box-shadow:0 16px 40px rgba(8,7,7,.12);will-change:transform}
.vr-orb img{display:block;width:100%;height:100%}
.vr-chip{position:absolute;width:max-content}
.vr-chip>span{display:block;background:#fff;border-radius:9999px;padding:12px 20px;white-space:nowrap;
  box-shadow:0 16px 40px rgba(8,7,7,.08),0 0 0 1px rgba(8,7,7,.05);
  font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:normal;color:#171717;will-change:transform}

/* Motion (unchanged from the previous landing) */
@keyframes vrOrbA{from{transform:translate(-4px,-10px) scale(.97)}to{transform:translate(4px,12px) scale(1.04)}}
@keyframes vrOrbB{from{transform:translate(5px,10px) scale(1.035)}to{transform:translate(-5px,-10px) scale(.975)}}
@keyframes vrOrbC{from{transform:translate(3px,-12px) scale(.99)}to{transform:translate(-3px,10px) scale(1.045)}}
@keyframes vrCardA{from{transform:translateY(-9px) rotate(-3deg)}to{transform:translateY(10px) rotate(3deg)}}
@keyframes vrCardB{from{transform:translateY(9px) rotate(2.5deg)}to{transform:translateY(-9px) rotate(-3.5deg)}}
.vr-o1{animation:vrOrbA 6.2s ease-in-out -1.4s infinite alternate}
.vr-o2{animation:vrOrbB 7.6s ease-in-out -3.1s infinite alternate}
.vr-o3{animation:vrOrbC 8.8s ease-in-out -.6s infinite alternate}
.vr-o4{animation:vrOrbB 5.4s ease-in-out -2.2s infinite alternate}
.vr-o5{animation:vrOrbA 7s ease-in-out -4s infinite alternate}
.vr-o6{animation:vrOrbC 5.8s ease-in-out -2.8s infinite alternate}
.vr-c1{animation:vrCardA 6.6s ease-in-out -2s infinite alternate}
.vr-c2{animation:vrCardB 8.2s ease-in-out -.8s infinite alternate}
.vr-c3{animation:vrCardB 5.6s ease-in-out -3.4s infinite alternate}
.vr-c4{animation:vrCardA 7.4s ease-in-out -1.6s infinite alternate}
.vr-c5{animation:vrCardB 9s ease-in-out -4.4s infinite alternate}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* Type */
.vr-logo{font-family:'Permanent Marker',cursive;line-height:1;color:#171717;white-space:nowrap}
.vr-h1{font-optical-sizing:none;font-variation-settings:'opsz' 14;display:flex;flex-direction:column;align-items:center;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;color:#171717;text-align:center}
.vr-h1>span{display:block;white-space:nowrap}
.vr-sub{font-family:'Inter Tight',system-ui,sans-serif;font-weight:500;line-height:1.4;color:#3d3d3d;text-align:center}

/* Google Play button */
.vr-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:56px;flex:none;border-radius:9999px;background:#080707;
  box-shadow:0 8px 24px rgba(0,0,0,.16);color:#fff;font-family:'Inter Tight',system-ui,sans-serif;font-weight:500;font-size:16px;line-height:normal;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease}
.vr-btn svg{width:24px;height:24px;flex:none}
.vr-btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.2)}
.vr-btn:focus-visible{outline:2px solid #171717;outline-offset:3px}

/* Content layer */
.vr-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}

/* Desktop (pcs) */
.vr-board--desk .vr-content{padding:40px 0}
.vr-board--desk .vr-header{display:flex;width:100%;height:48px;justify-content:center;align-items:center}
.vr-board--desk .vr-logo{font-size:48px}
.vr-board--desk .vr-hero{display:flex;flex:1;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:32px}
.vr-board--desk .vr-h1{font-size:120px;line-height:.88;letter-spacing:-5.4px}
.vr-board--desk .vr-actions{display:flex;flex-direction:column;align-items:center;gap:24px}
.vr-board--desk .vr-sub{font-size:20px}
.vr-board--desk .vr-btn{padding:0 28px 0 24px}
.vr-board--desk .vr-balance{width:100%;height:48px;flex:none}

/* Mobile (now) */
.vr-board--mob .vr-content{justify-content:space-between;padding:80px 32px 40px}
.vr-board--mob .vr-top{display:flex;width:100%;flex-direction:column;align-items:center;gap:40px}
.vr-board--mob .vr-header{display:flex;width:100%;justify-content:center}
.vr-board--mob .vr-logo{font-size:40px}
.vr-board--mob .vr-hero{display:flex;width:100%;flex-direction:column;align-items:center;gap:16px}
.vr-board--mob .vr-h1{font-size:52px;line-height:48px;letter-spacing:-2.34px}
.vr-board--mob .vr-sub{font-size:16px}
.vr-board--mob .vr-btn{padding:0 24px 0 20px}
/* Soft blurred backdrop behind the bottom button (REP-499), so chips/orbs never fight with the CTA on short screens */
.vr-cta{position:relative;display:flex;justify-content:center;width:100%}
.vr-cta-backdrop{position:absolute;left:-200px;right:-200px;top:-64px;bottom:-40px;pointer-events:none;background:rgba(253,252,252,.7);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 64px);mask-image:linear-gradient(to bottom,transparent 0,#000 64px)}