/* Lunar atmosphere v3. Each section selects an actual source image; no painted phase mask. */
:root { --lunar-crossfade: 520ms; --lunar-ease: cubic-bezier(.23,1,.32,1); --ambient-light-opacity:.18; --ambient-light-strength:.9; --ambient-light-x:66%; --ambient-light-y:37%; --galaxy-opacity:.38; --galaxy-brightness:1.18; --galaxy-detail:.92; --galaxy-shift-x:0px; --galaxy-shift-y:0px; --galaxy-scale:1.02; }
body { background:#05070a; color:#f7f7f5; }
.sky { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#05070a; }
.sky::before { content:""; display:block; position:absolute; inset:-18%; z-index:1; pointer-events:none; background:radial-gradient(ellipse at var(--ambient-light-x) var(--ambient-light-y),rgb(219 231 239 / calc(var(--ambient-light-opacity) * var(--ambient-light-strength))) 0%,rgb(184 204 216 / calc(var(--ambient-light-opacity) * .38)) 17%,transparent 55%); filter:blur(28px); transform:scale(1.04); transition:background 420ms var(--lunar-ease),filter 420ms var(--lunar-ease),transform 650ms var(--lunar-ease); }
.sky::after,.star-field,.aurora { display:none; }
.galaxy-field { position:absolute; inset:-28% -22%; z-index:1; pointer-events:none; opacity:var(--galaxy-opacity,.38); mix-blend-mode:screen; filter:brightness(var(--galaxy-brightness,1.18)) contrast(1.14); transform:translate3d(var(--galaxy-shift-x),var(--galaxy-shift-y),0) rotate(-21deg) scale(var(--galaxy-scale,1.02)); transform-origin:center; transition:opacity 560ms var(--lunar-ease),filter 560ms var(--lunar-ease),transform 900ms var(--lunar-ease); background:
  radial-gradient(ellipse at 47% 52%,rgba(245,248,250,.17) 0%,rgba(212,224,235,.12) 7%,transparent 24%),
  radial-gradient(ellipse at 61% 48%,rgba(225,235,245,.12) 0%,transparent 27%),
  linear-gradient(166deg,transparent 27%,rgba(170,190,210,.04) 33%,rgba(236,242,247,.18) 43%,rgba(189,207,222,.25) 49%,rgba(231,238,244,.1) 56%,transparent 66%),
  radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.05),transparent 46%); }
/* Star concentrations are now seeded inside the existing Canvas, aligned to
   this glow. CSS only paints the broad cloud, not a repeating full-screen grid. */
.galaxy-field::after { content:""; position:absolute; inset:-8%; opacity:calc(var(--galaxy-detail,.92) * .72); filter:blur(8px); background:
  radial-gradient(ellipse at 38% 49%,rgba(245,249,252,.24) 0 2%,transparent 17%),
  radial-gradient(ellipse at 55% 54%,rgba(226,238,246,.2) 0 2%,transparent 19%),
  radial-gradient(ellipse at 70% 45%,rgba(255,255,255,.14) 0 1.5%,transparent 16%); mix-blend-mode:screen; animation:galaxy-cloud-breathe 13s ease-in-out infinite alternate; }
.lunar-background { position:absolute; inset:0; z-index:0; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 68% 36%,#11161c 0%,#070a0e 52%,#030407 100%); transition:opacity 280ms ease; }
.sky[data-webgl="true"] .lunar-background { opacity:.07; }
.lunar-background::after { content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(90deg,rgba(3,5,8,.82),rgba(5,8,12,.36) 43%,transparent 78%),linear-gradient(0deg,rgba(2,4,7,.28),transparent 28% 80%,rgba(2,4,7,.2)); }
.lunar-layer { position:absolute; inset:0; z-index:1; opacity:0; mix-blend-mode:screen; transition:opacity var(--lunar-crossfade) var(--lunar-ease); pointer-events:none; }
.lunar-layer.is-active { opacity:1; }
.lunar-layer img { position:absolute; display:block; width:min(115vmin,1340px); height:min(115vmin,1340px); max-width:none; left:63%; top:51%; object-fit:contain; object-position:center; opacity:.82; filter:grayscale(1) contrast(1.18) brightness(.98); transform:translate(-50%,-50%) rotate(-7deg) scale(1); animation:lunar-image-drift 80s linear infinite alternate; animation-play-state:paused; user-select:none; }
.lunar-layer.is-active img { animation-play-state:running; }
.lunar-credit { position:absolute; right:5vw; bottom:6vh; z-index:2; color:rgba(240,243,244,.45); font:500 8px/1 DM Mono,monospace; letter-spacing:.08em; opacity:0; transition:opacity var(--lunar-crossfade) var(--lunar-ease); }
.lunar-layer[data-lunar-layer="workflow"].is-active .lunar-credit { opacity:1; }
.lunar-layer[data-lunar-layer="product"] img { left:60%; top:49%; }
.lunar-layer[data-lunar-layer="workspace"] img { left:65%; opacity:.7; }
.lunar-layer[data-lunar-layer="workflow"] img { left:62%; opacity:.77; }
.lunar-layer[data-lunar-layer="roadmap"] img,.lunar-layer[data-lunar-layer="cta"] img { left:64%; opacity:.72; }
.lunar-film,.lunar-orbit { display:none; }
.sky #space-canvas { position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:var(--space-opacity,1); filter:contrast(var(--space-contrast,1.16)) brightness(var(--space-brightness,1.1)); mix-blend-mode:screen; pointer-events:none; transition:opacity 420ms var(--lunar-ease),filter 420ms var(--lunar-ease); }
.lunar-background[data-motion-paused="true"] .lunar-layer img,html[data-background-paused="true"] .lunar-layer img { animation-play-state:paused; }
main,.header,.footer { position:relative; z-index:1; }
.hero,.product,.workspace,.workflow-section,.roadmap,.cta-section { background:transparent !important; backdrop-filter:none; }
.hero { grid-template-columns:1.15fr .85fr; min-height:760px; }
.hero-copy { max-width:720px; }
.hero h1 { font-size:clamp(56px,5.4vw,84px); line-height:1.11; letter-spacing:-.065em; }
.hero h1 em { display:inline-block; white-space:nowrap; }
.hero h1 em,.section-heading h2 em,.workspace-heading h2 em,.workflow-section h2 em,.roadmap h2 em { color:#d6dadd; background:none; -webkit-background-clip:initial; background-clip:initial; }
.hero-copy,.section-heading,.workspace-heading,.workflow-layout,.roadmap .section-heading,.cta-section { text-shadow:none; }
.hero-copy>p,.section-heading>p,.workflow-section .section-heading>p,.roadmap .section-heading>p,.cta-section p,.road-item p { color:#d9dcde; text-shadow:0 1px 5px rgba(0,0,0,.18); }
.eyebrow,.eyebrow span,.hero-signal,.orbit-label,.label-bottom { color:#d0d5d8; }
.eyebrow i,.eyebrow i.silver,.eyebrow i.cyan,.eyebrow i.gold { background:#e5e7e7; box-shadow:0 0 12px rgba(255,255,255,.2); }
.hero-signal b { background:rgba(255,255,255,.3); }
.brand { color:#fafafa; }.brand img { filter:grayscale(1) brightness(0) invert(1); }.brand strong { color:#c4c9cc; }
.main-nav,.main-nav a,.footer,.footer a { color:#dce0e2; }.main-nav a:hover,.footer a:hover { color:#fff; }
.header .button.ghost { color:#eff0f1; background:transparent; border-color:rgba(255,255,255,.38); }
.button.solid { color:#fafafa; background:#111315; border-color:rgba(255,255,255,.36); box-shadow:0 8px 22px rgba(0,0,0,.17); }.button.solid span { color:#e1e3e4; }
.button.link,.button.link span { color:#f0f1f2; }.button.link:hover { color:#fff; }
.motion-toggle { color:#f2f3f4; background:rgba(30,33,37,.58); border-color:rgba(255,255,255,.32); box-shadow:none; }.motion-toggle:hover { color:#fff; background:#303438; border-color:rgba(255,255,255,.62); }
.menu-button { border-color:rgba(255,255,255,.3); background:rgba(0,0,0,.14); }.menu-button i { background:#fff; }
.product-card,.app-frame,.template-card,.auth-card { color:#1b1e21; }
.product-card { background:linear-gradient(145deg,rgba(251,252,252,.96),rgba(225,229,231,.95)); border-color:rgba(255,255,255,.65); box-shadow:0 14px 36px rgba(0,0,0,.13); }.product-card-wide { background:linear-gradient(145deg,rgba(251,252,252,.96),rgba(217,224,227,.95)); }
.road-item small { color:#d2d6d8; }.road-item>b,.road-item.current>b { color:#eff1f1; border-color:rgba(255,255,255,.34); background:rgba(27,30,33,.27); }.roadmap-grid::before { background:linear-gradient(90deg,#e0e5e6,#a5b1b7,#b4b6b8); }.road-dot { border-color:#45494c; background:#f4f5f5; box-shadow:0 0 0 1px #b6bfc3,0 0 12px rgba(255,255,255,.2); }.footer { border-color:rgba(255,255,255,.2); }.signal-dot { background:#9ed4b4; box-shadow:0 0 12px rgba(158,212,180,.28); }
@keyframes lunar-image-drift { from { transform:translate(-50%,-50%) rotate(-7deg) scale(1); } to { transform:translate(-50%,-50%) rotate(3deg) scale(1.025); } }
@keyframes galaxy-cloud-breathe { from { opacity:calc(var(--galaxy-detail,.92) * .45); transform:scale(.98); } to { opacity:calc(var(--galaxy-detail,.92) * .8); transform:scale(1.02); } }
@media (hover:hover) and (pointer:fine) { .button.solid:hover { background:#24282c; box-shadow:0 12px 28px rgba(0,0,0,.22); } }
@media (max-width:980px) { .hero { min-height:670px; }.lunar-layer img { width:120vmin; height:120vmin; left:69%; opacity:.7; }.lunar-background::after { background:linear-gradient(90deg,rgba(43,46,50,.74),rgba(43,46,50,.28) 66%,transparent); }.hero h1 { font-size:clamp(48px,6.5vw,64px); }.hero-copy { max-width:640px; } }
@media (max-width:680px) { .hero { display:block; min-height:660px; padding-top:100px; }.hero h1 { font-size:clamp(36px,8.3vw,54px); letter-spacing:-.06em; }.hero-copy { max-width:100%; }.lunar-layer img,.lunar-layer[data-lunar-layer] img { width:138vw; height:138vw; left:73%; top:43%; opacity:.66; }.lunar-background::after { background:linear-gradient(90deg,rgba(42,45,49,.67),rgba(42,45,49,.24)),linear-gradient(0deg,rgba(38,41,45,.38),transparent 75%); }.sky #space-canvas { opacity:calc(var(--space-opacity,1) * .88); }.hero-signal { flex-wrap:wrap; }.motion-toggle { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { .lunar-layer { transition-duration:180ms; }.lunar-layer img { animation:none; }.galaxy-field::after { animation:none; } }
html[data-background-paused="true"] .galaxy-field::after { animation-play-state:paused; }

/* Scroll-driven Three.js scene sits above the photographic fallback. If WebGL
   cannot start, the fallback remains fully visible. */
.sky #moon-canvas { position:absolute; inset:0; z-index:3; width:100%; height:100%; opacity:0; pointer-events:none; transition:opacity 520ms var(--lunar-ease); mix-blend-mode:normal; }
.sky[data-webgl="true"] #moon-canvas { opacity:.96; }
.sky[data-webgl="true"] .lunar-background { opacity:.07; }
.sky #space-canvas { transform:translate3d(var(--star-parallax-x, 0px),0,0) scale(1.015); transform-origin:center; }
@media (max-width:680px) { .sky[data-webgl="true"] #moon-canvas { opacity:.92; } }
@media (prefers-reduced-motion:reduce) { .sky #moon-canvas { opacity:0; } }