/* One composition: oversized typography meets a freely rotating lunar sphere. */
.journey>.stage{overflow:clip}
@font-face{font-family:"Doto";src:url("fonts/Doto-Variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
.hero.hero-gravity{display:block;padding:0;text-align:left;isolation:isolate;overflow:clip;--arrival-gutter:clamp(24px,6.5vw,180px)}
.hero-gravity::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.32) 55%,transparent);pointer-events:none}
.hero-gravity .hero-copy{position:absolute;top:49%;left:var(--arrival-gutter);width:calc(100% - 2 * var(--arrival-gutter));max-width:1400px;transform:translateY(-50%);display:block;z-index:2;pointer-events:none;isolation:auto}
.hero-gravity .hero-copy>.ey{display:block;max-width:none;margin:0 0 30px;font-size:14px;line-height:1.6;letter-spacing:.1em;color:#b6c2cd;text-shadow:none;font-weight:400}
.hero-gravity h1{font-family:"Unbounded",sans-serif;font-variation-settings:normal;font-kerning:normal;letter-spacing:-.065em;font-size:clamp(84px,11.8vw,230px);line-height:1.03;font-weight:500;color:#f0f2f4;margin:0;text-shadow:0 4px 32px rgba(0,0,0,.24)}
.hero-gravity .hero-lead{display:block;font-size:.42em;line-height:1.25;font-weight:350;letter-spacing:-.05em;margin-bottom:.08em;color:#c7cdd3}
.hero-gravity .hero-word{display:block;width:max-content;max-width:100%;white-space:nowrap}
.hero-gravity .hero-word i{font-style:normal;color:#a9bacb}
.hero-gravity .hero-description{font-family:"Unbounded",sans-serif;font-variation-settings:normal;font-weight:350;letter-spacing:-.025em;max-width:480px;margin:28px 0 0;font-size:16px;line-height:1.85;color:#aeb8c3;text-shadow:0 2px 12px #000}
.hero-gravity .heroactions{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;width:auto;margin:28px 0 0;pointer-events:auto}
.hero-gravity .heroactions .btn{min-height:50px;padding:14px 22px;width:auto;font-size:14px;font-weight:450;line-height:1.5;letter-spacing:-.025em;white-space:normal}
.hero-gravity .heroactions .btn:not(.main){border-color:rgba(214,227,239,.3);background:rgba(4,7,11,.4)}
.hero-gravity .heroactions .btn:focus-visible{outline:2px solid #cbe8ff;outline-offset:5px}
.hero-gravity .moon-slot{position:absolute;inset:0;display:block;grid-area:auto;container-type:normal;pointer-events:none;z-index:1;max-width:none}
.hero.hero-gravity .hero-moon{position:absolute;left:auto;right:-7vw;top:51%;transform:translateY(-50%);width:min(91svh,66vw,1200px);height:auto;max-width:none;aspect-ratio:1;border-radius:50%;pointer-events:auto;opacity:0;transition:opacity 1.4s ease;touch-action:pan-y pinch-zoom}
.hero.hero-gravity .hero-moon.moon-ready{opacity:.88}
.hero-gravity .hero-moon{cursor:grab;user-select:none;-webkit-user-select:none}
.hero-gravity .hero-moon.is-dragging{cursor:grabbing}
.hero-gravity .hero-moon:focus{outline:none}
.hero-gravity:has(.hero-moon:focus-visible) .moon-hint{color:#e0ecf7;text-decoration:underline;text-underline-offset:4px}
.hero-gravity .hero-moon canvas{display:block;width:100%;height:100%;transform:scale(1);transition:transform .75s cubic-bezier(.2,.65,.3,1);pointer-events:none}
@media(hover:hover) and (pointer:fine){.hero-gravity .hero-moon:hover canvas{transform:scale(1.035)}}
.hero-gravity .hero-footer{position:absolute;left:var(--arrival-gutter);right:var(--arrival-gutter);bottom:max(32px,env(safe-area-inset-bottom));width:auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:24px;z-index:2;pointer-events:none;grid-area:auto;max-width:none}
.hero-gravity .hero-footer .micro{display:block;font-family:"Doto",monospace;font-variation-settings:"ROND" 60;font-size:14px;font-weight:650;line-height:1.5;letter-spacing:.06em;color:#8193a5;max-width:none;margin:0;text-transform:uppercase}
.hero-gravity .moon-hint{display:block;font-size:12px;font-weight:350;line-height:1.6;color:#a7b5c4;text-align:right;margin:0 150px 0 0;max-width:260px}
.hero-gravity .moon-hint span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero.is-arrived.hero-gravity .hero-copy>.ey{animation:arrivalFade .9s ease .05s both}
.hero.is-arrived.hero-gravity .hero-lead{animation:arrivalFade 1s ease .12s both}
.hero.is-arrived.hero-gravity .hero-word{animation:arrivalFade 1.2s cubic-bezier(.16,1,.3,1) .2s both}
.hero.is-arrived.hero-gravity .hero-description,.hero.is-arrived.hero-gravity .heroactions{animation:arrivalFade .9s ease .4s both}
.hero.is-arrived.hero-gravity .hero-footer{animation:arrivalFade 1s ease .6s both}
@keyframes arrivalFade{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(min-width:1700px){.hero-gravity .hero-description{font-size:18px;max-width:550px}.hero-gravity .heroactions{margin-top:34px}.hero-gravity .hero-copy>.ey{margin-bottom:36px}}
@media(max-width:900px){
 .hero.hero-gravity{--arrival-gutter:var(--mobile-gutter,24px)}
 .hero-gravity .hero-copy{top:46%;max-width:none;grid-area:auto}
 .hero-gravity .hero-copy>.ey{font-size:12px;letter-spacing:.07em;margin-bottom:26px;max-width:65%}
 .hero-gravity h1{font-size:clamp(76px,13.5vw,120px);line-height:1.05;margin:0}
 .hero-gravity .hero-description{font-size:16px;line-height:1.75;max-width:390px;margin-top:24px}
 .hero.hero-gravity .hero-moon{width:min(82svh,76vw);right:-18vw;top:45%}
 .hero-gravity .hero-footer{bottom:max(24px,env(safe-area-inset-bottom))}
 .hero-gravity .hero-footer .micro{font-size:12px;max-width:220px}
 .hero-gravity .moon-hint{font-size:12px;margin-right:0;max-width:180px}
}
@media(max-width:560px){
 .hero-gravity .hero-copy{top:clamp(112px,19svh,175px);transform:none;left:var(--arrival-gutter);width:calc(100% - 2 * var(--arrival-gutter))}
 .hero-gravity .hero-copy>.ey{max-width:100%;font-size:12px;line-height:1.6;letter-spacing:.03em;margin-bottom:22px}
 .hero-gravity h1{font-size:clamp(58px,14.6vw,82px);line-height:1.12;letter-spacing:-.065em}
 .hero-gravity .hero-lead{font-size:.5em;line-height:1.35;margin-bottom:.1em}
 .hero-gravity .hero-description{max-width:310px;margin:20px 0 0;font-size:16px;line-height:1.7}
 .hero-gravity .heroactions{margin-top:24px;gap:10px;display:grid;grid-template-columns:1fr 1.2fr;width:100%;max-width:360px}
 .hero-gravity .heroactions .btn{font-size:14px;min-height:48px;padding:12px 10px}
 .hero.hero-gravity .hero-moon{width:min(112vw,64svh);right:-28vw;top:auto;bottom:-9svh;transform:none}
 .hero-gravity .hero-footer{left:var(--arrival-gutter);right:var(--arrival-gutter);bottom:max(22px,env(safe-area-inset-bottom));align-items:flex-end}
 .hero-gravity .hero-footer .micro{display:none}
 .hero-gravity .moon-hint{font-size:12px;max-width:145px;text-align:left;text-shadow:0 2px 8px #000}
}
@media(max-height:650px) and (min-width:561px){
 .hero-gravity .hero-copy{top:53%}
 .hero-gravity .hero-copy>.ey{display:block;font-size:12px;margin-bottom:12px}
 .hero-gravity h1{font-size:clamp(62px,10vw,150px)}
 .hero-gravity .hero-description{margin-top:16px;max-width:440px;font-size:16px;line-height:1.65}
 .hero-gravity .heroactions{margin-top:18px}
 .hero-gravity .hero-footer{bottom:20px}
}
@media(max-height:500px) and (min-width:561px){
 .hero-gravity .hero-copy{top:54%;width:75%;grid-area:auto}
 .hero-gravity .hero-copy>.ey{display:none}
 .hero-gravity h1{font-size:clamp(56px,9vw,95px)}
 .hero-gravity .hero-description{max-width:420px;margin-top:12px;font-size:14px;line-height:1.55}
 .hero-gravity .heroactions{margin-top:14px}.hero-gravity .heroactions .btn{min-height:44px;font-size:12px;padding:10px 16px}
 .hero-gravity .hero-footer{display:none}
}
@media(max-width:560px) and (max-height:700px){
 .hero-gravity .hero-copy{top:98px}
 .hero-gravity .hero-copy>.ey{margin-bottom:12px}
 .hero-gravity h1{font-size:clamp(54px,14vw,76px)}
 .hero-gravity .hero-description{margin-top:14px;line-height:1.6}
 .hero-gravity .heroactions{margin-top:18px}
 .hero.hero-gravity .hero-moon{width:92vw;right:-31vw;bottom:-15vw}
}
@media(prefers-reduced-motion:reduce){.hero.is-arrived.hero-gravity .hero-copy>*,.hero.is-arrived.hero-gravity h1>*,.hero.is-arrived.hero-gravity .hero-footer{animation:none!important}.hero-gravity .hero-moon,.hero-gravity .hero-moon canvas{transition:none}.hero-gravity .hero-moon:hover canvas{transform:none}}