/* playmoonhold.com. From the design board's Artwork/landing/landing.css plus variant A's hero.
   Rajdhani SemiBold (OFL, fonts/OFL.txt) is the only weight shipped, so every weight draws it. */
@font-face{font-family:'Rajdhani';src:url('fonts/Rajdhani-SemiBold.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{
  --space:#050b14;--deep:#081626;--state:#B5CFDB;--muted:#7D8FA3;--text:#E6EEF3;
  --teal:#4DF2E0;--coral:#FF6B59;--gold:#F2BA40;--amber:#FFB86B;--acc:var(--teal);
  --line:rgba(46,106,154,.35);--hud:'Rajdhani',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-synthesis:none;margin:0;background:var(--space);color:var(--text);font-family:var(--hud);font-weight:500;font-size:18px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.in{max-width:1180px;margin:0 auto;padding:0 24px}
@media(max-width:600px){.in{padding:0 16px}}

/* nav */
.nav{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;gap:16px}
.nav .mark{width:150px}
.nav .links{display:flex;gap:22px;font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;align-items:center}
.nav .links a{text-decoration:none;color:var(--state)}
.nav .links a:hover{color:var(--text)}
.nav .buy{border:1px solid rgba(77,242,224,.55);color:var(--teal)!important;border-radius:999px;padding:7px 15px;background:rgba(77,242,224,.08)}
@media(max-width:720px){.nav{padding:14px 16px}.nav .links a:not(.buy){display:none}.nav .mark{width:120px}}

/* type */
.kick{font-size:13.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--acc);font-weight:700;margin:0 0 10px}
h1,h2,h3{font-weight:700;letter-spacing:.04em;margin:0;line-height:1.05}
h2{font-size:clamp(32px,5vw,54px);text-transform:uppercase;letter-spacing:.06em}
.lead{color:var(--state);font-size:clamp(17px,2vw,20px);max-width:56ch;margin:16px 0 0}

/* store buttons (placeholders for the official badges) */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.store{display:flex;align-items:center;gap:11px;text-decoration:none;background:#0b0f15;border:1px solid rgba(230,238,243,.32);
  border-radius:12px;padding:8px 18px 9px 14px;min-width:172px;transition:border-color .2s,transform .2s}
.store:hover{border-color:var(--acc);transform:translateY(-1px)}
.store .glyph{font-size:20px;color:var(--text);width:22px;text-align:center}
.store span:last-child{display:flex;flex-direction:column;font-size:21px;font-weight:700;letter-spacing:.02em;line-height:1.05;font-family:system-ui,-apple-system,sans-serif}
.store small{font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--state)}
.pricechip{display:block;margin-top:18px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--state);font-weight:600}
.pricechip b{font-size:26px;color:var(--text);letter-spacing:.04em;margin-right:6px}
.pricechip i{margin:0 4px}
.pricechip i{font-style:normal;color:var(--acc)}

/* sections */
.sec{padding:110px 0;position:relative}
@media(max-width:600px){.sec{padding:72px 0}}
.honest{background:linear-gradient(180deg,var(--space),#07131f 40%,var(--space))}
.honest h2 .big{color:var(--acc)}
.nope{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:10px 12px}
.nope li{font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 36px;position:relative;color:var(--text);background:rgba(8,22,38,.6)}
.nope li::before{content:'';position:absolute;left:14px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid var(--acc)}
.nope li::after{content:'';position:absolute;left:12px;top:50%;width:16px;height:2px;background:var(--acc);transform:rotate(-45deg)}

.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:42px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{margin:0}
.shot{border-radius:20px;overflow:hidden;border:7px solid #161c24;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(77,242,224,.12);aspect-ratio:2400/1080;background:#000}
.shot img{width:100%;height:100%;object-fit:cover}
.step figcaption{margin-top:14px;display:grid;gap:4px}
.step b{font-size:21px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.step b i{font-style:normal;font-size:13px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(77,242,224,.14);color:var(--teal);letter-spacing:0}
.step span{color:var(--state)}

.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
@media(max-width:1000px){.mgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mgrid{grid-template-columns:1fr}}
.mode{border:1px solid var(--line);border-top:2px solid var(--c);border-radius:12px;overflow:hidden;background:rgba(8,22,38,.55)}
.mimg{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.85}
.mtx{padding:16px 18px 20px}
.mk{margin:0;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--c);font-weight:700}
.mk em{font-style:normal;font-size:10.5px;border:1px solid currentColor;border-radius:4px;padding:1px 5px;margin-left:6px;letter-spacing:.14em;opacity:.8}
.mode h3{font-size:24px;margin:6px 0 6px;letter-spacing:.06em;text-transform:uppercase}
.mode p:last-child{margin:0;color:var(--state);font-size:16px}

.final{text-align:center;background:radial-gradient(ellipse at 50% 100%,rgba(27,63,92,.55),transparent 65%)}
.final .in{display:flex;flex-direction:column;align-items:center}
.flogo{width:min(520px,86vw);height:auto}
.final .stores{justify-content:center;width:100%;max-width:420px}
.store span:last-child{white-space:nowrap}
.foot{border-top:1px solid var(--line);padding:26px 0 34px;font-size:14px;color:var(--muted);letter-spacing:.08em}
.foot .in{display:flex;flex-wrap:wrap;gap:12px 26px}
.foot span{margin-right:auto}
.foot a{text-decoration:none}
.foot a:hover{color:var(--text)}
@media(max-width:600px){
  .stores{gap:8px;margin-top:20px}
  .store{min-width:0;flex:1;padding:7px 10px;gap:8px}
  .store span:last-child{font-size:17px}
  .store small{font-size:10px}
  .store .glyph{font-size:16px;width:16px}
  .pricechip{font-size:13px}.pricechip b{font-size:22px}
}

/* the hero: the living galaxy */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .pool{position:absolute;inset:0;background:radial-gradient(ellipse 60% 75% at 18% 52%,rgba(5,11,20,.92),rgba(5,11,20,.55) 55%,transparent 80%);pointer-events:none}
.hero .copy{position:relative;z-index:2;max-width:560px;padding-top:40px}
.hero .wm{width:min(470px,84vw);margin-bottom:22px}
.hero .h1{margin:0;font-weight:600;font-size:clamp(30px,4.2vw,46px);text-transform:uppercase;letter-spacing:.08em;line-height:1.08}
.hero .h1 em{font-style:normal;color:var(--teal)}
.hero .h1 b{color:var(--coral)}
.live{position:absolute;right:26px;bottom:22px;z-index:2;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;gap:16px;align-items:center}
.live i{font-style:normal;color:var(--text);font-weight:700}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.3}}
.scrollcue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;width:22px;height:34px;border:2px solid rgba(181,207,219,.4);border-radius:12px}
.scrollcue::after{content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--state);animation:cue 1.8s infinite}
@keyframes cue{to{transform:translateY(10px);opacity:0}}
@media(max-width:720px){
  .hero{align-items:flex-end}
  .hero .pool{background:linear-gradient(0deg,rgba(5,11,20,.96) 30%,rgba(5,11,20,.5) 62%,transparent 85%)}
  .hero .copy{padding:0 0 70px}
  .live,.scrollcue{display:none}
  .hero .h1{margin:0;font-weight:600;font-size:25px}
  .hero .wm{width:min(300px,70vw);margin-bottom:14px}
  .hero .lead{font-size:16px;margin-top:10px}
}
.hero .wm img{width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}