@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--night:#0B1020;--surface:#151C2E;--card:#1B2437;--border:#30384B;--ivory:#F5F2EC;--muted:#A7AABD;--lav:#B9A6E8;--gold:#D8C5A0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--ivory);font:16px/1.65 'DM Sans',system-ui,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%}.serif,h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.08}.container{width:min(1120px,calc(100% - 48px));margin:auto}.stars{position:absolute;inset:0 0 auto;height:1100px;pointer-events:none;opacity:.6;background-image:radial-gradient(1px 1px at 12% 15%,#fff 98%,transparent),radial-gradient(1px 1px at 74% 18%,#fff 98%,transparent),radial-gradient(1px 1px at 38% 58%,#fff 98%,transparent),radial-gradient(1px 1px at 88% 74%,#fff 98%,transparent),radial-gradient(1px 1px at 62% 38%,#fff 98%,transparent),radial-gradient(1px 1px at 21% 79%,#fff 98%,transparent);background-size:240px 260px}.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.8);backdrop-filter:blur(18px);border-bottom:1px solid #ffffff12}.nav{height:82px;display:flex;justify-content:space-between;align-items:center}.brand{display:inline-flex;align-items:center;gap:12px;font:29px 'Instrument Serif',Georgia,serif}.brand img{height:36px;width:36px;border-radius:10px}.nav-links{display:flex;align-items:center;gap:30px;color:var(--muted);font-size:13px}.nav-links a:hover,.footer a:hover{color:var(--lav)}.pill{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:50px;font-size:13px;font-weight:600;min-height:46px;white-space:nowrap}.primary{background:var(--lav);color:var(--night)}.ghost{border:1px solid #6c7185;color:var(--ivory)}.eyebrow{font-size:11px;letter-spacing:.23em;text-transform:uppercase;color:var(--gold);font-weight:700}.hero{min-height:720px;display:grid;grid-template-columns:47% 53%;align-items:center;position:relative;padding-top:65px;padding-bottom:90px}.hero-copy{position:relative;z-index:5}.hero h1{font-size:clamp(72px,8vw,122px);margin:22px 0 26px}.hero h1 em,.manifesto em{color:var(--gold)}.lead{font-size:18px;color:var(--muted);max-width:490px;line-height:1.8}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0}.micro{font-size:12px;color:#858aa0}.hero-visual{height:620px;position:relative;perspective:1300px}.hero-glow{position:absolute;inset:10% -15%;background:radial-gradient(ellipse,#b9a6e822,transparent 66%);filter:blur(18px)}.orbit{position:absolute;width:530px;height:530px;left:4%;top:4%;border:1px solid #b9a6e82a;border-radius:50%;transform:rotateX(68deg) rotate(-28deg)}.phone{position:absolute;width:260px;filter:drop-shadow(20px 35px 35px #000b);transition:transform .5s}.phone img{display:block;width:100%;border-radius:40px}.phone.front{left:32%;top:7%;transform:rotateY(-12deg) rotateZ(5deg);z-index:3}.phone.back{left:3%;top:21%;transform:rotateY(16deg) rotateZ(-10deg) scale(.9);z-index:2}.phone.front:hover{transform:rotateY(-4deg) rotateZ(0)}.float-moon{position:absolute;z-index:4;right:2%;top:2%;width:145px;height:145px;border-radius:50%;background:url('/assets/app-icon.png') center/cover;box-shadow:0 0 70px #d8c5a02b;animation:float 7s ease-in-out infinite}.rule{height:1px;background:linear-gradient(90deg,transparent,#5b5f773f,transparent)}.section{padding:125px 0}.section-head{max-width:730px;margin:0 auto 55px;text-align:center}.section h2,.manifesto h2,.final-cta h2{font-size:clamp(48px,5vw,76px);margin:16px 0 20px}.section-head p,.showcase-copy p,.premium p,.manifesto p{color:var(--muted);font-size:17px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{padding:36px 30px;background:linear-gradient(145deg,#1b2437,#131b2b);border:1px solid #30384bb3;border-radius:22px;min-height:250px}.feature .symbol{color:var(--gold);font-size:34px}.feature h3{font-size:31px;margin:25px 0 10px}.feature p{color:var(--muted);font-size:14px}.showcase{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px;margin-bottom:120px}.showcase.reverse .showcase-art{order:2}.showcase-art{display:flex;align-items:center;justify-content:center;min-height:590px;background:radial-gradient(ellipse,#b9a6e81c,transparent 68%);position:relative}.showcase-art:before{content:'';position:absolute;width:400px;height:400px;border:1px solid #b9a6e830;border-radius:50%;transform:rotateX(65deg)}.showcase-art img{position:relative;width:min(320px,80%);filter:drop-shadow(20px 25px 40px #0009);transform:rotate(-5deg)}.reverse .showcase-art img{transform:rotate(5deg)}.showcase-copy h2{font-size:clamp(52px,5vw,78px)}.detail{margin-top:26px;color:var(--gold);font-size:13px;letter-spacing:.05em}.premium{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;padding:65px;border:1px solid #d8c5a061;border-radius:30px;background:linear-gradient(140deg,#1b2437,#11192b);box-shadow:0 20px 90px #0004}.premium-list{align-self:center}.premium-item{padding:22px 0;border-bottom:1px solid #ffffff20}.premium-item span{color:var(--gold);margin-right:15px}.manifesto{text-align:center;padding:140px 0;max-width:800px}.final-cta{text-align:center;padding:135px 20px;background:radial-gradient(ellipse at center,#b9a6e814,transparent 65%)}.footer{padding:65px 0 30px;border-top:1px solid #ffffff1a}.footer-main{display:flex;justify-content:space-between;gap:45px}.footer-main>div:first-child{max-width:540px}.footer p,.footer-bottom{font-size:12px;color:var(--muted)}.footer-links{display:flex;gap:22px;flex-wrap:wrap;align-content:flex-start;color:var(--muted);font-size:13px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff15;padding-top:25px;margin-top:40px}.legal{max-width:780px;padding:90px 0 130px}.legal h1{font-size:64px}.legal h2{font-size:32px;margin-top:40px}.legal p,.legal li{color:var(--muted)}.legal a{color:var(--lav);text-decoration:underline}.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}@keyframes float{50%{transform:translateY(-20px)}}@media(max-width:850px){.nav-links{gap:12px}.nav-links a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;text-align:center;padding-top:80px}.hero-copy{display:flex;align-items:center;flex-direction:column}.hero h1{font-size:84px}.hero-visual{height:530px;width:min(550px,100%);margin:auto}.phone{width:230px}.float-moon{width:115px;height:115px}.features{grid-template-columns:1fr}.showcase,.premium{grid-template-columns:1fr;gap:30px}.showcase.reverse .showcase-art{order:0}.showcase{margin-bottom:60px}.showcase-art{min-height:470px}.premium{padding:35px}.section{padding:80px 0}}@media(max-width:520px){.container{width:calc(100% - 36px)}.nav{height:68px}.hero h1{font-size:72px}.hero-visual{height:420px}.phone{width:190px}.phone.front{left:35%}.phone.back{left:3%}.float-moon{width:90px;height:90px;right:0}.orbit{width:330px;height:330px}.hero{padding-bottom:20px}.section h2,.manifesto h2{font-size:49px}.showcase-art{min-height:410px}.showcase-art img{width:240px}.footer-main,.footer-bottom{flex-direction:column}.premium{padding:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* Moondu v2 — tighter, illustrated feature cards */
.features{gap:18px}
.feature{min-height:0;padding:24px 25px 22px;display:flex;flex-direction:column;position:relative;overflow:hidden;isolation:isolate;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.feature:hover{transform:translateY(-5px);border-color:#b9a6e877;box-shadow:0 20px 50px #0004}
.feature:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 5%,#b9a6e811,transparent 55%);z-index:-1}
.feature h3{margin:12px 0 7px;font-size:30px}
.feature p{margin:0 0 17px;font-size:14px;line-height:1.55;max-width:32ch}
.feature-art{height:98px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid #d8c5a01c}
.feature-art-phase .phase-ring{width:91px;height:91px;border:1px solid #b9a6e833;border-radius:50%;position:absolute}
.feature-art-phase .phase-disc{width:69px;height:69px;border-radius:50%;background:radial-gradient(circle at 76% 40%,#f5f2ec,#d8c5a0 63%,#9c8e74 90%);box-shadow:inset 37px 0 0 1px #1a2236,0 0 32px #d8c5a03a;transform:rotate(-18deg)}
.feature-art-phase .phase-glint{position:absolute;left:calc(50% + 55px);top:24px;width:5px;height:5px;border-radius:50%;background:#b9a6e8;box-shadow:0 0 14px #b9a6e8}
.feature-art-calendar{gap:11px}
.mini-phase{width:27px;height:27px;border-radius:50%;border:1px solid #d8c5a044;background:#1a2236;flex:none}
.mini-phase-0{box-shadow:inset -8px 0 #d8c5a0}.mini-phase-1{box-shadow:inset -15px 0 #d8c5a0}.mini-phase-2{background:linear-gradient(90deg,#1a2236 50%,#d8c5a0 50%)}.mini-phase-3{background:#d8c5a0;box-shadow:0 0 17px #d8c5a04b}.mini-phase-4{background:linear-gradient(90deg,#d8c5a0 50%,#1a2236 50%)}.mini-phase-5{box-shadow:inset 9px 0 #d8c5a0}.mini-phase-6{box-shadow:inset 4px 0 #d8c5a0}
.journal-sheet{width:145px;height:76px;border:1px solid #b9a6e877;border-radius:11px 11px 0 0;background:linear-gradient(145deg,#30354d,#202941);box-shadow:10px 9px 0 #121a2b,10px 9px 0 1px #d8c5a035;display:flex;align-items:center;justify-content:center;color:#d8c5a0;font-size:23px;letter-spacing:8px;transform:rotate(-5deg) translateY(12px)}
.feature-foot{border-top:1px solid #ffffff12;padding-top:13px;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#a7aabd}
.feature-foot span:first-child{color:#d8c5a0}
.appstore-badge{display:inline-flex;align-items:center;gap:12px;background:#050505;border:1px solid #7a7a83;border-radius:11px;padding:8px 16px;color:#fff;text-align:left;min-width:180px;box-shadow:0 8px 24px #0003;vertical-align:middle}
.appstore-symbol{font-family:Arial,sans-serif;font-size:34px;font-weight:700;line-height:1;letter-spacing:-.12em;padding-right:5px}
.appstore-copy{display:flex;flex-direction:column;line-height:1.15}
.appstore-copy small{font-size:9px;letter-spacing:.09em;color:#d5d5d5;font-weight:600}
.appstore-copy strong{font-size:21px;font-family:system-ui,sans-serif;font-weight:600;letter-spacing:-.04em}
@media(max-width:850px){.features{grid-template-columns:1fr;gap:14px}.feature{padding:20px 23px}.feature-art{height:86px}.feature h3{margin-top:12px}.feature p{margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){.feature:hover{transform:none}}

/* v3: star field stays stationary behind all pages during scrolling */
.stars{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:0!important;pointer-events:none;opacity:.54;background-repeat:repeat;background-size:240px 260px;transform:translateZ(0)}
body{position:relative;isolation:isolate}
body>.nav-wrap,body>main,body>footer{position:relative;z-index:1}
body>.nav-wrap{position:sticky;z-index:50}
.appstore-badge{display:inline-flex;padding:0;min-width:0;width:min(230px,100%);border:0;border-radius:11px;background:transparent;overflow:hidden;line-height:0;box-shadow:0 8px 24px #0003}
.appstore-badge img{display:block;width:100%;height:auto;object-fit:contain}

/* App Store artwork: clip source edges cleanly to badge shape. */
.appstore-badge{background:#040607;overflow:hidden;border-radius:11px;isolation:isolate}
.appstore-badge img{display:block;width:100%;height:auto;border:0;vertical-align:middle}


/* V6 — lunar sky parallax: stars drift at 18% of the page scroll speed. */
.stars{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  transform:none!important;
  background-position:0 var(--moondu-star-shift, 0px)!important;
  will-change:background-position;
}
/* A second, finer star field gives the background a subtle depth cue. */
.stars::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.48;
  pointer-events:none;
  background-image:radial-gradient(1px 1px at 18% 26%,#d8c5a0 98%,transparent),radial-gradient(1px 1px at 78% 67%,#b9a6e8 98%,transparent),radial-gradient(1px 1px at 46% 86%,#fff 98%,transparent);
  background-size:310px 350px;
  background-position:0 var(--moondu-star-shift-far, 0px);
  will-change:background-position;
}
@media(prefers-reduced-motion:reduce){
  .stars,.stars::after{will-change:auto;background-position:0 0!important}
}
