.moon-hero{position:relative;height:100svh;min-height:690px;overflow:hidden;isolation:isolate;background:#03101f}/* Scene built from CSS, vector geometry and Canvas. No background bitmap. */
.scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 72% 30%,#234c66 0%,#10293f 22%,#071728 48%,#030b16 85%)}
.stars{position:absolute;inset:0 0 36%;opacity:.8;background-image:radial-gradient(1px 1px at 11% 23%,#bcd5e8 90%,transparent),radial-gradient(1px 1px at 22% 48%,#bcd5e8 90%,transparent),radial-gradient(1.5px 1.5px at 45% 13%,#d9edf8 90%,transparent),radial-gradient(1px 1px at 62% 34%,#bcd5e8 90%,transparent),radial-gradient(1px 1px at 87% 19%,#bcd5e8 90%,transparent);background-size:397px 283px;animation:starPulse 8s ease-in-out infinite alternate}
.moon{position:absolute;left:72%;top:24%;width:clamp(115px,15vw,220px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at 29% 34%,#728d9c22 0%,transparent 19%),radial-gradient(ellipse at 66% 61%,#8098a833 0%,transparent 28%),radial-gradient(ellipse at 41% 72%,#8098a822 0%,transparent 24%),radial-gradient(circle at 38% 34%,#f2f3e9,#b7ccd5 68%,#637f96);box-shadow:0 0 38px #c7eaff44,0 0 110px 32px #9edbff1c,inset -12px -6px 25px #4d71875c}
.moon:before{content:'';position:absolute;inset:-38%;border-radius:50%;border:1px solid #d1eaff12;box-shadow:0 0 65px #afd6ed0d}
.cloud{position:absolute;left:40%;top:27%;width:65%;height:7%;background:linear-gradient(0deg,transparent,#06213999,transparent);filter:blur(14px);animation:cloudDrift 30s ease-in-out infinite alternate}
.ocean{position:absolute;inset:58% 0 0;background:linear-gradient(#183649,#081c2c 12%,#061625 60%,#030c17);border-top:1px solid #accddd38}
.ocean:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(178deg,transparent 0 13px,#7da9c00a 14px,transparent 15px 25px)}
.island{position:absolute;left:0;top:46%;width:100%;height:18%;filter:drop-shadow(0 -2px 7px #8bb7d51c)}
.fog{z-index:2;position:absolute;left:-20%;width:140%;height:8%;top:54%;background:radial-gradient(ellipse,#a0c9df24,transparent 65%);filter:blur(14px);animation:cloudDrift 22s ease-in-out infinite alternate;pointer-events:none}
.fog.two{top:70%;opacity:.4;animation-direction:alternate-reverse}
.waves{z-index:1;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.moon-hero:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(90deg,#030c1755,transparent 65%),linear-gradient(0deg,#03101f,transparent 18%)}
.scene-caption{position:absolute;z-index:4;right:5vw;top:49%;font-size:9px;letter-spacing:.35em;color:#bad4e0;writing-mode:vertical-rl}
@keyframes starPulse{to{opacity:.35}}@keyframes cloudDrift{to{transform:translateX(-12%)}}
.hero-content{position:absolute;inset:0 34% 0 0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:110px 20px 70px}.hero-logo{width:clamp(340px,43vw,640px);max-height:60vh;mix-blend-mode:normal;object-fit:contain;filter:none;animation:logoEnter 2.7s cubic-bezier(.16,.7,.25,1) .6s both,logoFloat 6s ease-in-out 3.3s infinite}.hero-logo-wrap{position:relative;display:grid;place-items:center;isolation:auto;mix-blend-mode:normal}.hero-sub{font-size:clamp(12px,1.4vw,17px);letter-spacing:.52em;color:#fff2d7;text-shadow:0 2px 16px #00101f;margin-top:-55px;animation:fadeUp 1.7s ease 2.3s both}.hero-tag{font-size:10px;letter-spacing:.48em;color:#b3e8f7;margin:8px 0 18px;animation:fadeUp 1.7s ease 2.5s both}.moon-hero .actions{display:flex;gap:14px;justify-content:center;margin-top:20px;animation:fadeUp 1.7s ease 2.7s both}.moon-hero .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;border:1px solid #9ff7e7aa;border-radius:10px;background:linear-gradient(125deg,#176b70,#39bfa7);box-shadow:0 0 24px #49e4ca40;color:#f2ffff;font-weight:650;font-size:13px;letter-spacing:.1em;transition:transform .25s,box-shadow .25s}.moon-hero .btn:before{content:'';position:absolute;inset:-70% auto -70% -80%;width:45%;background:linear-gradient(90deg,transparent,#fff8,transparent);transform:rotate(25deg);transition:left .65s}.moon-hero .btn:hover{transform:translateY(-3px);box-shadow:0 0 35px #49e4ca88}.moon-hero .btn:hover:before{left:140%}.moon-hero .btn.ghost{background:#06192c7d;border-color:#c7ebff6e;box-shadow:none}.moon-hero .scroll{position:absolute;z-index:5;bottom:26px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;color:#d0edff;animation:bob 2s ease-in-out infinite}.moon-hero .scroll:after{content:'↓';display:block;font-size:22px;text-align:center}@keyframes shieldIn{from{opacity:0}to{opacity:1}}@keyframes sceneIn{from{transform:scale(1.22);filter:brightness(.18) saturate(.65)}to{transform:scale(1);filter:brightness(.76) saturate(.99) contrast(1.08)}}@keyframes drift{from{transform:scale(1)}to{transform:scale(1.045) translateY(-.7%)}}@keyframes breathe{from{opacity:.45}to{opacity:1}}@keyframes fog{from{transform:translateX(-6%) skewY(-2deg)}to{transform:translateX(9%) skewY(1deg)}}@keyframes logoEnter{from{opacity:0;transform:translateY(42px) scale(.82);filter:blur(18px) drop-shadow(0 0 0 transparent)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 0 4px #061224) drop-shadow(0 0 24px #d1edff85)}}@keyframes logoFloat{50%{transform:translateY(-10px)}}@keyframes ring{from{opacity:0;transform:scale(.65)}60%{opacity:1}to{opacity:.35;transform:scale(1.22)}}@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes bob{50%{transform:translate(-50%,8px)}}a:focus-visible,button:focus-visible{outline:2px solid #a4eadf;outline-offset:6px}.motion-toggle{font:inherit;color:#bcd1df;background:transparent;border:1px solid #7695a155;padding:8px 12px;cursor:pointer;border-radius:20px;font-size:11px;position:absolute;right:5vw;bottom:30px;z-index:6}.moon-hero.motion-paused *{animation-play-state:paused!important}
@media(max-width:700px){.nav{padding:14px 18px}.navlinks{gap:12px;font-size:10px}.navbrand{font-size:15px}.navbrand small{font-size:7px}.moon-hero{min-height:740px;max-height:1000px}.hero-content{inset:0;padding:120px 12px 110px;justify-content:center}.hero-logo{width:min(94vw,440px);max-height:none}.hero-sub{letter-spacing:.25em;margin-top:-34px;font-size:13px}.hero-tag{font-size:8px;letter-spacing:.23em}.moon{left:79%;top:21%;width:105px;opacity:.72}.scene{background:radial-gradient(ellipse at 80% 25%,#24475e,#0b2033 35%,#030b16 80%)}.ocean{top:64%}.island{top:54%;height:14%}.fog{top:61%}.scene-caption{top:39%;right:5%;font-size:8px}.moon-hero .actions{gap:10px;margin-top:14px}.moon-hero .btn{padding:13px 18px;font-size:12px}.grid{grid-template-columns:1fr}.section{padding:70px 22px}.demo{position:static;text-align:center;border:0;border-radius:0;background:#030b16}.motion-toggle{bottom:28px;right:16px;font-size:10px}.moon-hero .scroll{left:25%;font-size:8px}.moon-hero:after{background:linear-gradient(0deg,#03101f,transparent 25%)} }
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}