:root{
  --navy:#06133D; --white:#F4F7FF; --pink:#F70A96; --violet:#8C5BEF; --blue:#1384F8;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030918;color:var(--white);font-family:Inter,Montserrat,Poppins,system-ui,-apple-system,"Segoe UI",sans-serif}
body{cursor:auto;isolation:isolate}
img{user-select:none;-webkit-user-drag:none} button{font:inherit}

.loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:linear-gradient(180deg,#040B22 0%, #07143B 66%, #04091C 100%);transition:opacity .55s ease, visibility .55s ease}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader__field{position:absolute;inset:0;opacity:.38;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px),radial-gradient(circle,#4eb1ff 0 1px,transparent 1.7px),radial-gradient(circle,#ff57cf 0 1px,transparent 1.7px);background-size:180px 180px,260px 260px,340px 340px;animation:drift 24s linear infinite}
.loader__mark{position:relative;z-index:2;width:102px;height:102px;animation:spin 2.5s linear infinite;filter:none}
.loader__status{position:absolute;top:calc(50% + 98px);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.loader__bar{position:absolute;top:calc(50% + 132px);width:min(320px,68vw);height:2px;background:rgba(255,255,255,.08)}
.loader__bar span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--pink),var(--violet),var(--blue));transition:width .12s ease}

.universe{position:fixed;inset:0;overflow:hidden;opacity:0;transform:scale(1.02);background:radial-gradient(circle at 56% -6%, rgba(153,85,255,.16), transparent 18%), radial-gradient(circle at 60% 15%, rgba(74,66,255,.10), transparent 25%), linear-gradient(180deg,#071245 0%, #07133D 28%, #06133B 48%, #040B22 74%, #020815 100%);transition:opacity .85s ease, transform 1.2s cubic-bezier(.16,1,.3,1)}
.universe.is-ready{opacity:1;transform:scale(1)}
.starfield,.meteors,.dustfield{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform,opacity}
.meteors,.dustfield{pointer-events:none}
.dustfield{mix-blend-mode:screen;opacity:.34}
.hero-shield{position:absolute;left:0;top:0;bottom:0;width:46vw;pointer-events:none;background:linear-gradient(90deg, rgba(2,8,25,.42) 0%, rgba(3,10,30,.25) 44%, rgba(3,10,30,.10) 72%, transparent 100%)}
.nebula-glow{position:absolute;border-radius:50%;filter:blur(60px);mix-blend-mode:screen;pointer-events:none}
.glow-a{width:54vw;height:28vw;left:36vw;top:-8vw;background:radial-gradient(ellipse, rgba(176,92,255,.16), rgba(123,61,255,.05), transparent 72%);animation:nebulaMove 18s ease-in-out infinite}
.glow-b{width:42vw;height:20vw;right:-6vw;top:22vh;background:radial-gradient(ellipse, rgba(19,132,248,.08), transparent 72%);animation:nebulaMove2 22s ease-in-out infinite}
.glow-c{width:28vw;height:16vw;left:16vw;bottom:6vh;background:radial-gradient(ellipse, rgba(247,10,150,.05), transparent 74%);animation:nebulaMove 20s ease-in-out infinite reverse}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 200px 60px rgba(0,0,0,.38)}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");animation:grain 1.2s steps(2) infinite}
.layer{position:absolute;will-change:transform}
.planet{left:-20vw;bottom:-22vw;width:min(52vw,900px);opacity:.22;filter:brightness(.38) saturate(.72) blur(.8px);pointer-events:none;z-index:1}

.shell{left:0;right:0;top:0;bottom:0;z-index:8;display:flex;justify-content:flex-start;align-items:center;padding-inline:clamp(36px,5vw,92px)}
.copy-column{width:min(600px, 42vw);padding-left:clamp(18px,2vw,28px)}
.brand{width:clamp(240px,22vw,420px);max-height:122px;object-fit:contain;object-position:left center;margin-bottom:28px;display:block}
.eyebrow{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.72);font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;margin-bottom:18px}
.eyebrow span{width:28px;height:1px;background:linear-gradient(90deg,var(--pink),var(--blue))}
.headline{margin:0;line-height:.92;letter-spacing:-.06em;font-weight:300;font-size:clamp(3.7rem,7vw,7.7rem);text-shadow:0 8px 24px rgba(0,0,0,.16)}
.headline > span{display:block}
.headline__gradient{min-height:1.05em;background:linear-gradient(90deg,#ff14a5 0%,#b768ed 44%,#1999ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.copy{margin:24px 0 18px;max-width:560px;font-size:clamp(1rem,1.28vw,1.22rem);line-height:1.58;font-weight:400;color:rgba(245,247,253,.92);text-shadow:0 4px 16px rgba(0,0,0,.28)}
.caret{display:inline-block;width:.055em;height:.76em;margin-left:.06em;vertical-align:.05em;background:#1d9dff;animation:blink .8s steps(1) infinite}
.signal{display:flex;align-items:center;gap:14px;width:min(430px,90%);margin-top:14px}
.signal__track{height:3px;flex:1;background:rgba(255,255,255,.11);overflow:hidden}
.signal__track span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--pink),var(--violet),var(--blue));transition:width .35s ease}
.signal__label{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.74);white-space:nowrap}
.actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.glass-btn{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(8,18,62,.28);color:rgba(255,255,255,.96);border-radius:999px;padding:11px 16px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:.76rem;letter-spacing:.05em;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.glass-btn:hover{transform:translateY(-2px);border-color:rgba(85,157,255,.5);background:rgba(23,54,120,.38);box-shadow:0 8px 35px rgba(25,75,200,.16)}
.glass-btn--ghost{opacity:.95}.btn-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.45)}.btn-star{display:inline-block;transform:translateY(-1px)}
.mobile-menu{display:none}

.ground{left:50%;bottom:-1.6vh;transform:translateX(-50%);width:min(142vw,2500px);z-index:4;pointer-events:none;opacity:.99;filter:drop-shadow(0 22px 36px rgba(0,0,0,.30))}
.ship-wrap{right:10vw;bottom:11vh;width:min(43vw,710px);z-index:7;pointer-events:none}
.ship{display:block;width:100%;filter:drop-shadow(0 18px 34px rgba(0,0,0,.54)) drop-shadow(0 0 22px rgba(89,72,255,.14));animation:shipHover 6.8s ease-in-out infinite}
.ship-glow{position:absolute;left:13%;right:10%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(ellipse, rgba(255,255,255,.05), rgba(61,128,255,.08) 28%, rgba(247,10,150,.06) 46%, transparent 72%);filter:blur(18px);animation:pulseGround 3.4s ease-in-out infinite}
.mist{position:absolute;border-radius:50%;background:radial-gradient(ellipse, rgba(180,200,255,.10), rgba(120,95,255,.05), transparent 70%);filter:blur(26px);opacity:.62;animation:mistMove 8s ease-in-out infinite}
.m1{left:8%;bottom:-5%;width:42%;height:22%}.m2{right:10%;bottom:-3%;width:34%;height:18%;animation-delay:-2.6s}
.astronaut{right:1vw;bottom:-.2vh;width:min(29vw,485px);z-index:9;pointer-events:none;filter:drop-shadow(0 16px 28px rgba(0,0,0,.35));animation:astronautFloat 6.6s ease-in-out infinite}

.wormhole-wrap{position:absolute;right:7vw;top:6.5vh;width:min(20vw,320px);aspect-ratio:1;display:grid;place-items:center;z-index:5;pointer-events:none;opacity:.82}
#wormhole{width:100%;filter:none;animation:spinReverse 28s linear infinite}

.hud{position:absolute;left:6vw;bottom:3.7vh;display:flex;align-items:center;gap:10px;z-index:10;color:rgba(255,255,255,.34);font-size:.58rem;letter-spacing:.22em}
.hud i{width:4px;height:4px;border-radius:50%;background:#f70a96;display:block;animation:blink 1.7s infinite}
.scroll-hint{position:absolute;right:2.4vw;top:50%;z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.34);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-hint i{display:block;width:1px;height:38px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(71,151,255,.55), rgba(255,255,255,.04));animation:scrollLine 2s ease-in-out infinite}

.space-cursor{position:fixed;left:0;top:0;will-change:transform;width:24px;height:24px;margin-left:-12px;margin-top:-12px;border-radius:50%;pointer-events:none;z-index:300;background:radial-gradient(circle, rgba(255,255,255,.96) 0 16%, rgba(64,181,255,.88) 30%, rgba(247,10,150,.38) 58%, transparent 74%);filter:drop-shadow(0 0 10px rgba(64,181,255,.52)) drop-shadow(0 0 14px rgba(247,10,150,.28));mix-blend-mode:screen;transition:none}
.space-cursor span{position:absolute;inset:3px;border-radius:50%;border:1px solid rgba(255,255,255,.45);opacity:.55;animation:cursorPulse 2s ease-in-out infinite}
.cursor-trail{position:fixed;inset:0;pointer-events:none;z-index:299}
.cursor-trail::before,.cursor-trail::after{content:"";position:absolute;left:var(--tx,50%);top:var(--ty,50%);transform:translate(-50%,-50%);border-radius:50%}
.cursor-trail::before{width:88px;height:88px;background:radial-gradient(circle, rgba(64,181,255,.12), rgba(247,10,150,.06), transparent 68%);filter:blur(11px)}
.cursor-trail::after{width:42px;height:42px;background:radial-gradient(circle, rgba(255,255,255,.12), rgba(64,181,255,.08), transparent 68%);filter:blur(7px)}

.click-bursts{position:fixed;inset:0;pointer-events:none;z-index:301}
.click-burst{position:absolute;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;border:1px solid rgba(140,91,239,.82);box-shadow:0 0 0 0 rgba(20,132,248,.26),0 0 14px rgba(247,10,150,.22);animation:clickBurst 1.7s cubic-bezier(.16,1,.3,1) forwards}
.click-burst::before,.click-burst::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(20,132,248,.55)}
.click-burst::after{border-color:rgba(247,10,150,.45);animation-delay:.14s}

body.warping .wormhole-wrap{animation:wormholePulse .96s cubic-bezier(.18,1,.28,1)}
body.warping #wormhole{animation:wormholeSpin .92s cubic-bezier(.18,1,.28,1), spinReverse 28s linear infinite;filter:blur(.85px) brightness(1.04) saturate(1.03)}
body.warping .universe{filter:hue-rotate(6deg)}
body.warping .starfield{filter:blur(1.25px) brightness(1.05)}
body.warping .dustfield{filter:blur(1.7px)}
body.warping .shell{animation:spaceDistort .96s cubic-bezier(.18,1,.28,1)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
@keyframes drift{to{background-position:260px 260px, 360px 360px, 480px 480px}}
@keyframes blink{0%,48%{opacity:1}49%,100%{opacity:.16}}
@keyframes nebulaMove{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2vw,-1vw,0) scale(1.1)}}
@keyframes nebulaMove2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3vw,2vw,0) scale(1.15)}}
@keyframes shipHover{0%,100%{transform:translate3d(0,0,0) rotate(.2deg)}50%{transform:translate3d(0,-6px,0) rotate(-.2deg)}}
@keyframes pulseGround{0%,100%{opacity:.32;transform:scale(.94)}50%{opacity:.72;transform:scale(1.06)}}
@keyframes mistMove{0%,100%{transform:translateX(0) translateY(0) scale(1)}50%{transform:translateX(8px) translateY(-6px) scale(1.06)}}
@keyframes astronautFloat{0%,100%{transform:translate3d(0,0,0) rotate(.3deg)}25%{transform:translate3d(-3px,-10px,0) rotate(-.4deg)}50%{transform:translate3d(2px,-16px,0) rotate(-.7deg)}75%{transform:translate3d(4px,-8px,0) rotate(.2deg)}}
@keyframes cursorPulse{0%,100%{transform:scale(.84);opacity:.45}50%{transform:scale(1.18);opacity:.85}}
@keyframes scrollLine{0%,100%{transform:scaleY(.45);transform-origin:top;opacity:.3}50%{transform:scaleY(1);opacity:1}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-2%)}}
@keyframes wormholePulse{0%{transform:scale(1);opacity:.86}25%{transform:scale(1.04);opacity:1}55%{transform:scale(1.10);opacity:1}100%{transform:scale(1);opacity:.86}}
@keyframes wormholeSpin{0%{transform:scale(.99) rotate(0deg)}50%{transform:scale(1.04) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}
@keyframes spaceDistort{0%{transform:translateX(0) scale(1);filter:blur(0)}24%{transform:translateX(3px) scale(.996);filter:blur(.3px)}58%{transform:translateX(-4px) scale(1.008);filter:blur(1px)}100%{transform:translateX(0) scale(1);filter:blur(0)}}
@keyframes clickBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.24)}72%{opacity:.58;transform:translate(-50%,-50%) scale(5.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(7.6)}}

@media (hover:hover) and (pointer:fine){body{cursor:none}}
@media (max-width:1100px){
  .copy-column{width:min(48vw,620px)}
  .ground{width:min(150vw,2500px);left:50%;bottom:-2.2vh}
  .ship-wrap{width:47vw;right:6vw;bottom:10.6vh}
  .astronaut{width:min(33vw,470px);right:-1vw}
}
@media (max-width:820px){
  body{cursor:auto}
  .space-cursor,.cursor-trail,.scroll-hint,.hud{display:none!important}
  .starfield,.meteors,.dustfield{transform:translateZ(0)}
  .grain{display:none}
  .hero-shield{display:none}
  .glow-a{width:92vw;height:58vw;left:10vw;top:-14vw;opacity:.48}
  .glow-b{width:70vw;height:48vw;right:-25vw;top:16vh;opacity:.34}
  .glow-c{width:65vw;height:35vw;left:-20vw;bottom:18vh;opacity:.22}
  .vignette{box-shadow:inset 0 0 110px 26px rgba(0,0,0,.32)}

  .mobile-menu{display:flex;position:absolute;right:clamp(20px,6vw,34px);top:calc(env(safe-area-inset-top,0px) + 28px);z-index:30;width:52px;height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(6,17,55,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
  .mobile-menu span{display:block;width:21px;height:2px;border-radius:999px;background:rgba(255,255,255,.90);box-shadow:0 0 8px rgba(69,155,255,.18)}

  .shell{position:absolute;left:0;right:0;top:0;bottom:auto;height:auto;z-index:14;display:block;padding:0;transform:none!important}
  .copy-column{width:auto;max-width:min(88vw,400px);margin:0;padding:calc(env(safe-area-inset-top,0px) + 28px) 24px 0}
  .brand{width:clamp(220px,58vw,286px);max-height:none;margin:0 0 22px 0}
  .eyebrow{width:max-content;max-width:100%;padding:10px 16px;border-radius:999px;border:1px solid rgba(247,10,150,.48);background:rgba(6,17,55,.22);margin:0 0 22px 0;font-size:.64rem;letter-spacing:.28em;color:rgba(255,255,255,.83)}
  .eyebrow span{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px rgba(247,10,150,.62)}
  .headline{font-size:clamp(3.1rem,13.2vw,4.8rem);line-height:.91;letter-spacing:-.062em;margin:0;max-width:92vw}
  .headline__gradient{padding-bottom:.08em}
  .copy{margin:22px 0 0;max-width:94%;font-size:1rem;line-height:1.5;color:rgba(247,249,255,.92);font-weight:350}
  .signal{width:100%;max-width:min(86vw,350px);display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px}
  .signal__label{order:-1;font-size:.66rem;letter-spacing:.28em;color:rgba(255,255,255,.78)}
  .signal__track{width:100%;height:3px;background:rgba(255,255,255,.08)}
  .actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px;width:100%;max-width:min(88vw,350px)}
  .glass-btn{width:100%;min-height:54px;border-radius:30px;padding:0 20px;justify-content:flex-start;position:relative;font-size:.92rem;letter-spacing:.01em;background:linear-gradient(90deg,rgba(10,25,72,.48),rgba(18,16,65,.30));border-color:rgba(104,118,255,.38)}
  .glass-btn::after{content:'›';position:absolute;right:18px;top:50%;transform:translateY(-54%);font-size:1.9rem;line-height:1;color:#9c5dff;text-shadow:0 0 12px rgba(156,93,255,.45)}
  .btn-dot{width:17px;height:17px;border-color:rgba(255,255,255,.42);box-shadow:inset 0 0 0 3px rgba(6,17,55,.8)}
  .btn-star{font-size:1.05rem;color:#a965ff}

  .wormhole-wrap{width:clamp(145px,35vw,180px);right:-1vw;top:calc(env(safe-area-inset-top,0px) + 88px);opacity:.82;z-index:7;filter:saturate(.96) brightness(.96)}
  .planet{width:78px;left:auto;right:6vw;bottom:44vh;opacity:.18;filter:brightness(.42) saturate(.65) blur(.7px)}
  .ground{width:248vw;max-width:none;left:50%;bottom:-1.8vh;opacity:.99;z-index:4;transform:translateX(-50%)!important}
  .ship-wrap{width:92vw;max-width:none;right:-10vw;bottom:9.4vh;z-index:7;transform:none!important}
  .ship{animation:shipHover 7.2s ease-in-out infinite}
  .astronaut{width:54vw;max-width:none;right:-16vw;bottom:-.6vh;z-index:11;transform:none!important}
}
@media (max-width:520px){
  .mobile-menu{right:18px;top:calc(env(safe-area-inset-top,0px) + 20px);width:48px;height:48px;border-radius:15px}
  .copy-column{max-width:min(90vw,360px);padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 0}
  .brand{width:220px;margin-bottom:18px}
  .eyebrow{margin-bottom:18px;padding:8px 13px;font-size:.56rem;letter-spacing:.23em}
  .headline{font-size:clamp(2.95rem,13.4vw,4.15rem)}
  .copy{font-size:.96rem;line-height:1.45;max-width:95%;margin-top:18px}
  .signal{max-width:calc(100vw - 40px);margin-top:18px}
  .actions{max-width:calc(100vw - 40px);margin-top:18px}
  .glass-btn{min-height:50px;padding:0 18px;font-size:.88rem}
  .glass-btn::after{right:16px;font-size:1.8rem}
  .wormhole-wrap{width:40vw;right:-2vw;top:calc(env(safe-area-inset-top,0px) + 92px)}
  .planet{right:5vw;bottom:45vh;width:68px}
  .ground{width:265vw;left:50%;bottom:-1.4vh}
  .ship-wrap{width:98vw;right:-14vw;bottom:8.7vh}
  .astronaut{width:56vw;right:-19vw;bottom:-.8vh}
}
@media (max-width:420px){
  .copy-column{padding-top:calc(env(safe-area-inset-top,0px) + 14px)}
  .brand{width:205px}
  .headline{font-size:clamp(2.75rem,13vw,3.8rem)}
  .copy{font-size:.92rem;line-height:1.42}
  .ground{width:282vw;bottom:-1vh}
  .ship-wrap{width:104vw;right:-17vw;bottom:8.2vh}
  .astronaut{width:58vw;right:-21vw}
}
@media (max-width:520px) and (max-height:760px){
  .brand{width:190px;margin-bottom:14px}
  .eyebrow{margin-bottom:14px}
  .headline{font-size:clamp(2.55rem,12.6vw,3.55rem)}
  .copy{font-size:.88rem;line-height:1.38;max-width:92%;margin-top:14px}
  .signal{margin-top:14px}
  .actions{margin-top:14px;gap:8px}
  .glass-btn{min-height:46px;font-size:.81rem}
  .ground{width:290vw;bottom:-.6vh}
  .ship-wrap{width:106vw;right:-16vw;bottom:7.6vh}
  .astronaut{width:55vw;right:-19vw}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* =========================
   V10 MOBILE COMPOSITION TUNING
   - logo lower / better vertical rhythm
   - narrower CTA buttons
   - larger astronaut foreground
   ========================= */
@media (max-width:520px){
  .copy-column{
    padding-top:calc(env(safe-area-inset-top,0px) + 34px);
    padding-left:22px;
    padding-right:22px;
    max-width:min(92vw,370px);
  }
  .brand{
    width:218px;
    margin-bottom:20px;
  }
  .eyebrow{
    margin-bottom:16px;
  }
  .headline{
    font-size:clamp(2.92rem,13.2vw,4.06rem);
  }
  .copy{
    margin-top:16px;
    line-height:1.43;
  }
  .signal{
    margin-top:14px;
    max-width:300px;
  }
  .actions{
    margin-top:14px;
    width:min(76vw,292px);
    max-width:292px;
    gap:9px;
  }
  .glass-btn{
    width:100%;
    min-height:48px;
    padding:0 17px;
    font-size:.85rem;
  }
  .wormhole-wrap{
    top:calc(env(safe-area-inset-top,0px) + 104px);
    width:39vw;
    right:-3vw;
  }
  .ship-wrap{
    width:103vw;
    right:-20vw;
    bottom:8.9vh;
  }
  .astronaut{
    width:70vw;
    right:-27vw;
    bottom:-1.2vh;
  }
  .ground{
    width:278vw;
    bottom:-1.1vh;
  }
}

@media (max-width:420px){
  .copy-column{
    padding-top:calc(env(safe-area-inset-top,0px) + 30px);
    padding-left:20px;
    padding-right:20px;
  }
  .brand{width:204px;margin-bottom:18px}
  .headline{font-size:clamp(2.72rem,12.9vw,3.72rem)}
  .copy{font-size:.91rem;margin-top:15px}
  .signal{max-width:282px;margin-top:13px}
  .actions{width:min(78vw,278px);max-width:278px;margin-top:13px}
  .glass-btn{min-height:46px;font-size:.82rem}
  .ship-wrap{width:108vw;right:-23vw;bottom:8.2vh}
  .astronaut{width:73vw;right:-30vw;bottom:-1.2vh}
  .ground{width:290vw;bottom:-.9vh}
}

@media (max-width:520px) and (max-height:760px){
  .copy-column{padding-top:calc(env(safe-area-inset-top,0px) + 24px)}
  .brand{width:190px;margin-bottom:13px}
  .eyebrow{margin-bottom:12px}
  .copy{margin-top:12px}
  .signal{margin-top:11px}
  .actions{margin-top:11px}
  .ship-wrap{width:105vw;right:-21vw;bottom:7.6vh}
  .astronaut{width:66vw;right:-25vw;bottom:-1.4vh}
}


/* =========================
   V11 MOBILE LAYOUT REBALANCE
   - CTA cluster moved to bottom-left
   - preserve space for astronaut on right
   - better lower composition
   ========================= */
@media (max-width:520px){
  .shell{min-height:100svh}
  .copy-column{
    position:relative;
    min-height:100svh;
    padding-bottom:208px;
  }
  .copy{max-width:86%}
  .signal{
    position:absolute;
    left:22px;
    bottom:132px;
    width:min(58vw,236px);
    max-width:min(58vw,236px);
    margin:0;
    z-index:18;
  }
  .actions{
    position:absolute;
    left:22px;
    bottom:28px;
    width:min(58vw,236px);
    max-width:min(58vw,236px);
    margin:0;
    z-index:18;
    gap:10px;
  }
  .glass-btn{
    min-height:46px;
    font-size:.82rem;
    padding:0 16px;
    border-radius:26px;
  }
  .ship-wrap{
    width:104vw;
    right:-16vw;
    bottom:10.2vh;
  }
  .astronaut{
    width:74vw;
    right:-31vw;
    bottom:-1.2vh;
  }
  .ground{
    width:286vw;
    bottom:-.8vh;
  }
}

@media (max-width:420px){
  .copy-column{padding-bottom:198px}
  .signal{
    left:20px;
    bottom:126px;
    width:min(59vw,222px);
    max-width:min(59vw,222px);
  }
  .actions{
    left:20px;
    bottom:24px;
    width:min(59vw,222px);
    max-width:min(59vw,222px);
    gap:9px;
  }
  .glass-btn{min-height:44px;font-size:.79rem}
  .ship-wrap{width:108vw;right:-19vw;bottom:10vh}
  .astronaut{width:78vw;right:-36vw;bottom:-1.3vh}
  .ground{width:298vw;bottom:-.6vh}
}

@media (max-width:520px) and (max-height:760px){
  .copy-column{padding-bottom:184px}
  .signal{bottom:118px}
  .actions{bottom:20px}
  .ship-wrap{bottom:9.5vh}
}


/* =========================
   V12 MOBILE VERTICAL BALANCE
   - logo lower from top
   - headline + description pushed toward vertical center
   ========================= */
@media (max-width:520px){
  .copy-column{
    padding-top:calc(env(safe-area-inset-top,0px) + 54px);
    padding-bottom:210px;
  }
  .brand{
    width:214px;
    margin-bottom:24px;
  }
  .eyebrow{
    margin-bottom:18px;
  }
  .headline{
    margin-top:2px;
    max-width:82%;
  }
  .copy{
    margin-top:20px;
    max-width:82%;
    line-height:1.46;
  }
}

@media (max-width:420px){
  .copy-column{
    padding-top:calc(env(safe-area-inset-top,0px) + 48px);
    padding-bottom:198px;
  }
  .brand{width:202px;margin-bottom:22px}
  .eyebrow{margin-bottom:16px}
  .headline{max-width:84%}
  .copy{margin-top:18px;max-width:84%}
}

@media (max-width:520px) and (max-height:760px){
  .copy-column{padding-top:calc(env(safe-area-inset-top,0px) + 38px)}
  .brand{margin-bottom:18px}
  .eyebrow{margin-bottom:14px}
  .copy{margin-top:14px}
}


/* =========================
   V13 MOBILE CENTERED HERO
   - remove fake menu
   - keep logo above
   - center badge/title/description vertically
   ========================= */
.intro-block{display:block}
.mobile-menu{display:none !important}

@media (max-width:520px){
  .shell{height:100svh;display:block}
  .copy-column{
    position:relative;
    min-height:100svh;
    max-width:min(92vw,370px);
    padding:0 22px 210px;
  }
  .brand{
    position:absolute;
    left:22px;
    top:calc(env(safe-area-inset-top,0px) + 44px);
    width:214px;
    margin:0;
    z-index:20;
  }
  .intro-block{
    position:absolute;
    left:22px;
    top:43%;
    transform:translateY(-50%);
    width:min(84vw,320px);
    z-index:20;
  }
  .eyebrow{
    margin:0 0 16px 0;
  }
  .headline{
    margin:0;
    max-width:100%;
    font-size:clamp(2.95rem,13vw,4.02rem);
  }
  .copy{
    margin:18px 0 0 0;
    max-width:100%;
    font-size:.96rem;
    line-height:1.46;
  }
  .signal{
    position:absolute;
    left:22px;
    bottom:126px;
    width:min(58vw,236px);
    max-width:min(58vw,236px);
    margin:0;
    z-index:22;
  }
  .actions{
    position:absolute;
    left:22px;
    bottom:24px;
    width:min(58vw,236px);
    max-width:min(58vw,236px);
    margin:0;
    z-index:22;
    gap:10px;
  }
}

@media (max-width:420px){
  .copy-column{padding:0 20px 198px}
  .brand{
    left:20px;
    top:calc(env(safe-area-inset-top,0px) + 40px);
    width:202px;
  }
  .intro-block{
    left:20px;
    top:41.5%;
    width:min(84vw,300px);
  }
  .headline{font-size:clamp(2.78rem,12.9vw,3.78rem)}
  .copy{font-size:.92rem;line-height:1.42}
  .signal{
    left:20px;
    bottom:122px;
    width:min(59vw,222px);
    max-width:min(59vw,222px);
  }
  .actions{
    left:20px;
    bottom:22px;
    width:min(59vw,222px);
    max-width:min(59vw,222px);
    gap:9px;
  }
}

@media (max-width:520px) and (max-height:760px){
  .brand{top:calc(env(safe-area-inset-top,0px) + 28px);width:190px}
  .intro-block{top:39.5%}
  .headline{font-size:clamp(2.58rem,12.2vw,3.45rem)}
  .copy{font-size:.88rem;line-height:1.38;margin-top:14px}
  .signal{bottom:114px}
  .actions{bottom:18px}
}


/* =========================
   V14 MOBILE COMPOSITION REFINEMENT
   - lower wormhole
   - smaller ship
   - astronaut becomes clearer protagonist
   ========================= */
@media (max-width:520px){
  .wormhole-wrap{
    top:calc(env(safe-area-inset-top,0px) + 138px);
    right:-1vw;
    width:clamp(138px,34vw,170px);
  }
  .ship-wrap{
    width:88vw;
    right:-8vw;
    bottom:9.6vh;
  }
  .astronaut{
    width:79vw;
    right:-36vw;
    bottom:-1.4vh;
  }
}

@media (max-width:420px){
  .wormhole-wrap{
    top:calc(env(safe-area-inset-top,0px) + 128px);
    width:clamp(132px,34vw,158px);
  }
  .ship-wrap{
    width:92vw;
    right:-11vw;
    bottom:9.2vh;
  }
  .astronaut{
    width:82vw;
    right:-40vw;
    bottom:-1.6vh;
  }
}

@media (max-width:520px) and (max-height:760px){
  .wormhole-wrap{top:calc(env(safe-area-inset-top,0px) + 110px)}
  .ship-wrap{width:90vw;bottom:8.8vh}
  .astronaut{width:78vw;right:-37vw}
}


/* =========================
   V15 SHIP SIZE REDUCTION
   - reduce spaceship prominence on desktop and mobile
   - let astronaut lead the composition
   ========================= */
.ship-wrap{
  width:min(36vw,580px);
  right:11vw;
  bottom:10.5vh;
}

@media (max-width:1100px){
  .ship-wrap{
    width:39vw;
    right:8vw;
    bottom:10.2vh;
  }
}

@media (max-width:820px){
  .ship-wrap{
    width:82vw;
    right:-3vw;
    bottom:9.2vh;
  }
}

@media (max-width:520px){
  .ship-wrap{
    width:76vw;
    right:1vw;
    bottom:9.2vh;
  }
}

@media (max-width:420px){
  .ship-wrap{
    width:80vw;
    right:-1vw;
    bottom:8.8vh;
  }
}

@media (max-width:520px) and (max-height:760px){
  .ship-wrap{
    width:78vw;
    right:0vw;
    bottom:8.4vh;
  }
}


/* =========================
   V16 NEW ASSET INTEGRATION
   New generated PNGs: wormhole, astronaut, ship, terrain.
   Less magenta overall and rebalanced composition for desktop/mobile.
   ========================= */
.ship{filter:drop-shadow(0 16px 28px rgba(0,0,0,.52)) drop-shadow(0 0 18px rgba(70,120,255,.12));}
.astronaut{filter:drop-shadow(0 16px 24px rgba(0,0,0,.34));}
.wormhole-wrap{opacity:.9;filter:saturate(.95) brightness(.96);}
.ground{opacity:.985;filter:drop-shadow(0 20px 32px rgba(0,0,0,.28));}

/* Desktop rebalance */
.ship-wrap{width:min(31vw,500px);right:16vw;bottom:10vh;}
.astronaut{width:min(33vw,520px);right:6vw;bottom:0vh;}
.wormhole-wrap{width:min(28vw,430px);right:2vw;top:4.5vh;}
.ground{width:min(148vw,2500px);bottom:-1.5vh;}

@media (max-width:1100px){
  .ship-wrap{width:min(33vw,470px);right:15vw;bottom:9.8vh;}
  .astronaut{width:min(36vw,480px);right:2vw;bottom:-.1vh;}
  .wormhole-wrap{width:min(29vw,390px);right:0vw;top:5vh;}
}

@media (max-width:820px){
  .ground{width:250vw;bottom:-1.2vh;}
  .ship-wrap{width:78vw;right:-2vw;bottom:9.8vh;}
  .astronaut{width:58vw;right:-10vw;bottom:-.5vh;}
  .wormhole-wrap{width:34vw;right:0vw;top:9.2vh;}
}

@media (max-width:520px){
  .ground{width:258vw;bottom:-1.0vh;}
  .ship-wrap{width:72vw;right:6vw;bottom:9.2vh;}
  .astronaut{width:64vw;right:-15vw;bottom:-.3vh;}
  .wormhole-wrap{width:36vw;right:-1vw;top:calc(env(safe-area-inset-top,0px) + 118px);}
}

@media (max-width:420px){
  .ground{width:270vw;bottom:-.7vh;}
  .ship-wrap{width:76vw;right:4vw;bottom:8.6vh;}
  .astronaut{width:68vw;right:-18vw;bottom:-.4vh;}
  .wormhole-wrap{width:37vw;right:-2vw;top:calc(env(safe-area-inset-top,0px) + 112px);}
}

@media (max-width:520px) and (max-height:760px){
  .ship-wrap{width:74vw;right:5vw;bottom:8.2vh;}
  .astronaut{width:64vw;right:-16vw;bottom:-.6vh;}
  .wormhole-wrap{top:calc(env(safe-area-inset-top,0px) + 102px);}
}


/* =========================
   V17 DESKTOP COMPOSITION REWORK
   - full-width terrain
   - larger, more centered astronaut cropped from torso on desktop
   - larger upper-right wormhole filling the corner
   ========================= */
@media (min-width:821px){
  .hero-shield{
    width:42vw;
    background:linear-gradient(90deg, rgba(2,8,25,.20) 0%, rgba(3,10,30,.12) 42%, rgba(3,10,30,.04) 72%, transparent 100%);
  }
  .ground{
    width:min(210vw,3400px);
    left:50%;
    bottom:-1.2vh;
    opacity:1;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.24));
  }
  .ship-wrap{
    width:min(24vw,400px);
    right:15vw;
    bottom:10.5vh;
    z-index:7;
  }
  .astronaut{
    width:min(39vw,640px);
    right:4vw;
    bottom:-26vh;
    z-index:10;
  }
  .wormhole-wrap{
    width:min(35vw,560px);
    right:-1vw;
    top:-2vh;
    opacity:.94;
  }
}

@media (min-width:821px) and (max-width:1200px){
  .ground{
    width:min(228vw,3400px);
    bottom:-1.0vh;
  }
  .ship-wrap{
    width:min(27vw,360px);
    right:13vw;
    bottom:10vh;
  }
  .astronaut{
    width:min(44vw,560px);
    right:1vw;
    bottom:-20vh;
  }
  .wormhole-wrap{
    width:min(34vw,430px);
    right:-1vw;
    top:0vh;
  }
}


/* =========================
   V18 TERRAIN + ASTRONAUT FIX
   Ground is no longer a parallax layer, so translateX(-50%) is preserved.
   Desktop astronaut is intentionally oversized and cropped from the waist down.
   Assets are visually neutralized to reduce purple cast.
   ========================= */

/* Reduce the magenta/purple cast without killing the blue lighting */
.ship{
  filter:saturate(.72) brightness(.96) contrast(1.03)
         drop-shadow(0 16px 28px rgba(0,0,0,.52))
         drop-shadow(0 0 16px rgba(60,120,255,.10));
}
.astronaut{
  filter:saturate(.62) brightness(1.02) contrast(1.02)
         drop-shadow(0 18px 28px rgba(0,0,0,.34));
}
.ground{
  filter:saturate(.66) brightness(.82) contrast(1.08)
         drop-shadow(0 18px 28px rgba(0,0,0,.24));
}
.wormhole-wrap{
  filter:saturate(.92) brightness(.96);
}

@media (min-width:821px){
  /* FIX: terrain must cover the entire viewport width; it is no longer moved by JS parallax */
  .ground{
    left:50%;
    bottom:-1.0vh;
    width:max(100vw, 2200px);
    min-width:100vw;
    max-width:none;
    transform:translateX(-50%);
    z-index:4;
    opacity:1;
    object-fit:cover;
  }

  /* Smaller supporting ship */
  .ship-wrap{
    width:min(22vw,360px);
    right:17vw;
    bottom:9.5vh;
    z-index:7;
  }

  /* Main protagonist: large astronaut, centered on right side, only upper body visible */
  .astronaut{
    width:min(47vw,760px);
    right:1.5vw;
    bottom:-58vh;
    z-index:12;
  }

  /* Large spiral occupying the upper-right corner like the reference */
  .wormhole-wrap{
    width:min(43vw,700px);
    right:-5vw;
    top:-8vh;
    opacity:.95;
    z-index:6;
  }
}

@media (min-width:821px) and (max-width:1200px){
  .ground{
    width:max(115vw,1900px);
    bottom:-.8vh;
  }
  .ship-wrap{
    width:min(24vw,330px);
    right:16vw;
    bottom:9vh;
  }
  .astronaut{
    width:min(52vw,650px);
    right:-1vw;
    bottom:-50vh;
  }
  .wormhole-wrap{
    width:min(42vw,520px);
    right:-5vw;
    top:-4vh;
  }
}

/* Keep mobile composition from V17, but neutralize asset color and ensure terrain remains centered */
@media (max-width:820px){
  .ground{
    left:50%;
    transform:translateX(-50%) !important;
    filter:saturate(.66) brightness(.84) contrast(1.07);
  }
  .ship{filter:saturate(.72) brightness(.96) contrast(1.03) drop-shadow(0 12px 22px rgba(0,0,0,.42));}
  .astronaut{filter:saturate(.62) brightness(1.02) contrast(1.02) drop-shadow(0 14px 24px rgba(0,0,0,.30));}
}


/* ==========================================================
   V19 — FULL-WIDTH TERRAIN + RICHER COSMIC BACKGROUND
   ========================================================== */

/* Make the background richer so the wormhole feels integrated,
   without turning the entire page purple. */
.universe{
  background:
    radial-gradient(ellipse at 78% 12%, rgba(49,124,255,.18) 0%, rgba(49,124,255,.07) 22%, transparent 46%),
    radial-gradient(ellipse at 64% 18%, rgba(121,71,218,.18) 0%, rgba(121,71,218,.07) 24%, transparent 50%),
    radial-gradient(ellipse at 88% 50%, rgba(13,95,176,.11) 0%, transparent 44%),
    radial-gradient(ellipse at 50% 62%, rgba(91,52,145,.08) 0%, transparent 46%),
    linear-gradient(180deg,#081541 0%, #07143d 28%, #061239 54%, #040b22 78%, #020815 100%);
}

.universe::before,
.universe::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  mix-blend-mode:screen;
}
.universe::before{
  width:72vw;
  height:34vw;
  right:-10vw;
  top:-4vw;
  background:
    radial-gradient(ellipse at 52% 54%, rgba(59,139,255,.13), transparent 45%),
    radial-gradient(ellipse at 66% 48%, rgba(147,69,224,.12), transparent 48%);
  filter:blur(54px);
  opacity:.78;
}
.universe::after{
  width:62vw;
  height:25vw;
  left:28vw;
  top:6vh;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(47,91,187,.09), transparent 52%),
    radial-gradient(ellipse at 38% 55%, rgba(126,75,195,.07), transparent 55%);
  filter:blur(64px);
  opacity:.56;
}

/* Stronger but still subtle gas clouds around the upper-right portal. */
.glow-a{
  width:72vw;
  height:38vw;
  left:38vw;
  top:-12vw;
  background:radial-gradient(ellipse, rgba(126,79,216,.18), rgba(60,93,196,.08) 42%, transparent 72%);
  filter:blur(72px);
}
.glow-b{
  width:58vw;
  height:32vw;
  right:-14vw;
  top:14vh;
  background:radial-gradient(ellipse, rgba(18,132,248,.12), rgba(74,71,185,.05) 48%, transparent 74%);
  filter:blur(76px);
}
.glow-c{
  width:42vw;
  height:24vw;
  left:33vw;
  bottom:6vh;
  background:radial-gradient(ellipse, rgba(96,54,162,.06), transparent 74%);
}

/* True full-width terrain layer. This replaces the img sizing that
   could look like a rectangular cut. */
.ground-stage{
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  width:100%;
  height:46vh;
  z-index:4;
  pointer-events:none;
  background-image:url("assets/ground.png");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  filter:saturate(.66) brightness(.76) contrast(1.08);
}

/* Add a soft shadow/haze transition above the terrain so it merges
   with the universe instead of reading as a pasted rectangle. */
.ground-stage::before{
  content:"";
  position:absolute;
  inset:-14vh 0 auto 0;
  height:18vh;
  background:linear-gradient(180deg, transparent 0%, rgba(5,12,34,.24) 54%, rgba(4,10,26,.58) 100%);
  pointer-events:none;
}

/* Desktop composition: astronaut is the protagonist. */
@media (min-width:821px){
  .ship-wrap{
    width:min(18vw,300px);
    right:20vw;
    bottom:10vh;
    z-index:7;
    opacity:.94;
  }

  .astronaut{
    width:min(52vw,820px);
    right:3vw;
    bottom:-70vh;
    z-index:12;
    filter:saturate(.56) brightness(1.06) contrast(1.02)
           drop-shadow(0 20px 30px rgba(0,0,0,.34));
  }

  .wormhole-wrap{
    width:min(48vw,780px);
    right:-7vw;
    top:-11vh;
    opacity:.96;
    z-index:6;
  }

  #wormhole{
    filter:saturate(.92) brightness(.96);
  }

  .ground-stage{
    height:48vh;
  }
}

/* Medium desktop */
@media (min-width:821px) and (max-width:1200px){
  .ship-wrap{
    width:min(20vw,260px);
    right:19vw;
    bottom:9.5vh;
  }
  .astronaut{
    width:min(57vw,700px);
    right:-1vw;
    bottom:-61vh;
  }
  .wormhole-wrap{
    width:min(47vw,610px);
    right:-8vw;
    top:-7vh;
  }
}

/* Mobile keeps prior composition, but terrain is also truly full-width. */
@media (max-width:820px){
  .ground-stage{
    height:43vh;
    background-size:auto 100%;
    background-position:center bottom;
    filter:saturate(.66) brightness(.80) contrast(1.07);
  }
}

@media (max-width:520px){
  .ground-stage{
    height:41vh;
    background-size:auto 100%;
  }
}

@media (max-width:420px){
  .ground-stage{
    height:40vh;
  }
}


/* ==========================================================
   V20 — richer sky, visible meteor shower, smoother terrain
   ========================================================== */
.hero-shield{
  width:40vw;
  background:linear-gradient(90deg, rgba(2,8,25,.28) 0%, rgba(3,10,30,.14) 44%, rgba(3,10,30,.03) 74%, transparent 100%);
}

.universe{
  background:
    radial-gradient(ellipse at 81% 15%, rgba(68,150,255,.20) 0%, rgba(68,150,255,.08) 23%, transparent 44%),
    radial-gradient(ellipse at 74% 21%, rgba(183,88,255,.18) 0%, rgba(183,88,255,.07) 24%, transparent 48%),
    radial-gradient(ellipse at 63% 12%, rgba(113,69,215,.16) 0%, transparent 32%),
    radial-gradient(ellipse at 84% 41%, rgba(46,104,206,.10) 0%, transparent 38%),
    linear-gradient(180deg,#081541 0%, #07143d 25%, #061239 50%, #040b22 78%, #020815 100%);
}
.universe::before{
  width:78vw;
  height:38vw;
  right:-12vw;
  top:-6vw;
  background:
    radial-gradient(ellipse at 54% 52%, rgba(58,135,255,.16), transparent 45%),
    radial-gradient(ellipse at 69% 45%, rgba(171,86,255,.14), transparent 50%);
  filter:blur(62px);
  opacity:.82;
}
.universe::after{
  width:56vw;
  height:20vw;
  left:30vw;
  top:10vh;
  background:
    radial-gradient(ellipse at 45% 50%, rgba(52,93,185,.09), transparent 56%),
    radial-gradient(ellipse at 58% 42%, rgba(132,75,206,.08), transparent 60%);
  filter:blur(72px);
  opacity:.44;
}
.glow-a{
  width:74vw;
  height:38vw;
  left:40vw;
  top:-12vw;
  background:radial-gradient(ellipse, rgba(126,79,216,.18), rgba(66,103,210,.08) 44%, transparent 74%);
  filter:blur(78px);
}
.glow-b{
  width:60vw;
  height:34vw;
  right:-16vw;
  top:12vh;
  background:radial-gradient(ellipse, rgba(20,139,255,.12), rgba(74,71,185,.05) 50%, transparent 74%);
  filter:blur(80px);
}
.meteors{
  opacity:.96;
  filter:drop-shadow(0 0 7px rgba(142,97,255,.26)) drop-shadow(0 0 9px rgba(38,153,255,.18));
}
.ground-stage{
  left:-4%;
  width:108%;
  height:34vh;
  bottom:-1px;
  background-position:center bottom;
  background-size:cover;
  filter:saturate(.74) brightness(.79) contrast(1.05);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 42%, rgba(0,0,0,.82) 66%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 42%, rgba(0,0,0,.82) 66%, rgba(0,0,0,0) 100%);
}
.ground-stage::before{
  inset:-9vh 0 auto 0;
  height:11vh;
  background:linear-gradient(180deg, transparent 0%, rgba(5,12,34,.10) 58%, rgba(4,10,26,.28) 100%);
}
.ground-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,10,26,0) 0%, rgba(4,10,26,.04) 46%, rgba(4,10,26,.12) 100%);
}

@media (min-width:821px){
  .ground-stage{
    left:-5%;
    width:110%;
    height:35vh;
  }
  .ship-wrap{
    width:min(17vw,270px);
    right:22vw;
    bottom:8.8vh;
    opacity:.92;
  }
  .astronaut{
    width:min(54vw,860px);
    right:1vw;
    bottom:-86vh;
    filter:saturate(.58) brightness(1.04) contrast(1.02) drop-shadow(0 20px 30px rgba(0,0,0,.34));
  }
  .wormhole-wrap{
    width:min(50vw,820px);
    right:-7vw;
    top:-11vh;
    opacity:.97;
  }
}

@media (min-width:821px) and (max-width:1200px){
  .ground-stage{height:33vh;}
  .ship-wrap{width:min(19vw,240px); right:20vw; bottom:8.6vh;}
  .astronaut{width:min(58vw,700px); right:-1vw; bottom:-70vh;}
  .wormhole-wrap{width:min(49vw,620px); right:-8vw; top:-8vh;}
}

@media (max-width:820px){
  .ground-stage{height:40vh; background-size:auto 100%;}
}


/* ==========================================================
   V21 — softer wormhole integration, richer cosmic sky,
   more meteor activity, cleaner terrain fusion
   ========================================================== */
.universe{
  background:
    radial-gradient(ellipse at 82% 20%, rgba(62,147,255,.19) 0%, rgba(62,147,255,.08) 18%, transparent 42%),
    radial-gradient(ellipse at 77% 19%, rgba(187,83,255,.18) 0%, rgba(187,83,255,.08) 19%, transparent 44%),
    radial-gradient(ellipse at 70% 24%, rgba(118,72,225,.17) 0%, transparent 34%),
    radial-gradient(ellipse at 60% 10%, rgba(85,66,199,.12) 0%, transparent 26%),
    radial-gradient(ellipse at 85% 45%, rgba(27,107,219,.09) 0%, transparent 34%),
    linear-gradient(180deg,#081541 0%, #07143d 24%, #061239 52%, #040b22 79%, #020815 100%);
}
.universe::before,
.universe::after{content:"";position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;}
.universe::before{
  width:88vw;
  height:40vw;
  right:-8vw;
  top:-7vw;
  background:
    radial-gradient(ellipse at 57% 48%, rgba(61,142,255,.14) 0%, rgba(61,142,255,.05) 24%, transparent 50%),
    radial-gradient(ellipse at 68% 42%, rgba(165,84,255,.13) 0%, rgba(165,84,255,.05) 28%, transparent 56%);
  filter:blur(64px);
  opacity:.74;
}
.universe::after{
  width:72vw;
  height:26vw;
  left:34vw;
  top:9vh;
  background:
    radial-gradient(ellipse at 42% 54%, rgba(71,111,210,.08) 0%, transparent 56%),
    radial-gradient(ellipse at 66% 44%, rgba(133,78,211,.06) 0%, transparent 62%);
  filter:blur(76px);
  opacity:.36;
}
.glow-a{
  width:82vw;
  height:40vw;
  left:35vw;
  top:-14vw;
  background:radial-gradient(ellipse, rgba(121,76,220,.16), rgba(57,106,212,.08) 42%, transparent 76%);
  filter:blur(84px);
  opacity:.84;
}
.glow-b{
  width:62vw;
  height:34vw;
  right:-14vw;
  top:10vh;
  background:radial-gradient(ellipse, rgba(14,145,255,.12), rgba(113,71,219,.05) 48%, transparent 75%);
  filter:blur(82px);
  opacity:.78;
}
.glow-c{
  width:48vw;
  height:22vw;
  left:20vw;
  bottom:18vh;
  background:radial-gradient(ellipse, rgba(111,65,184,.05), rgba(247,10,150,.03) 44%, transparent 78%);
  filter:blur(72px);
}
.meteors{
  opacity:1;
  filter:drop-shadow(0 0 8px rgba(149,98,255,.34)) drop-shadow(0 0 12px rgba(53,162,255,.22));
}
.wormhole-wrap{
  opacity:.76;
  filter:saturate(.88) brightness(.94);
  mix-blend-mode:screen;
}
.wormhole-wrap::before{
  content:"";
  position:absolute;
  inset:-18%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(108,64,214,.12) 0%, rgba(59,124,242,.06) 34%, transparent 68%);
  filter:blur(28px);
  opacity:.72;
}
#wormhole{
  filter:saturate(.88) brightness(.94) contrast(1.01) blur(.15px);
  opacity:.94;
}
.hero-shield{
  width:42vw;
  background:linear-gradient(90deg, rgba(2,8,25,.22) 0%, rgba(3,10,30,.12) 44%, rgba(3,10,30,.03) 76%, transparent 100%);
}
.ground-stage{
  left:0;
  width:100%;
  height:31vh;
  bottom:-1px;
  background-size:100% auto;
  background-position:center bottom;
  filter:saturate(.72) brightness(.82) contrast(1.04);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 40%, rgba(0,0,0,.75) 66%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 40%, rgba(0,0,0,.75) 66%, rgba(0,0,0,0) 100%);
}
.ground-stage::before{
  inset:-13vh 0 auto 0;
  height:15vh;
  background:linear-gradient(180deg, rgba(4,10,26,0) 0%, rgba(4,10,26,.04) 42%, rgba(4,10,26,.14) 78%, rgba(4,10,26,.22) 100%);
  filter:blur(10px);
}
.ground-stage::after{display:none;}

@media (min-width:821px){
  .ground-stage{
    height:30vh;
  }
  .ship-wrap{
    width:min(17vw,270px);
    right:22.5vw;
    bottom:8.7vh;
    opacity:.90;
  }
  .astronaut{
    width:min(56vw,900px);
    right:0vw;
    bottom:-73vh;
    clip-path:inset(0 0 26% 0);
    filter:saturate(.60) brightness(1.04) contrast(1.02) drop-shadow(0 18px 28px rgba(0,0,0,.34));
  }
  .wormhole-wrap{
    width:min(49vw,800px);
    right:-6vw;
    top:-9vh;
  }
}

@media (min-width:821px) and (max-width:1200px){
  .ground-stage{height:28vh;}
  .astronaut{width:min(60vw,760px);right:-1vw;bottom:-60vh;clip-path:inset(0 0 24% 0);} 
  .ship-wrap{width:min(19vw,240px);right:21vw;bottom:8.4vh;}
  .wormhole-wrap{width:min(49vw,620px);right:-7vw;top:-6vh;}
}

@media (max-width:820px){
  .ground-stage{height:39vh;background-size:auto 100%;}
  .wormhole-wrap{opacity:.80;}
}


/* ==========================================================
   V22 — stronger wormhole + richer star clusters / galaxy dust
   ========================================================== */

/* More luminous but still integrated wormhole */
.wormhole-wrap{
  opacity:.91;
  mix-blend-mode:normal;
  filter:saturate(.96) brightness(.98);
}
.wormhole-wrap::before{
  inset:-22%;
  background:
    radial-gradient(circle at 50% 50%, rgba(133,74,230,.18) 0%, rgba(62,132,247,.10) 34%, rgba(43,93,190,.04) 54%, transparent 72%);
  filter:blur(34px);
  opacity:.84;
}
#wormhole{
  opacity:.98;
  filter:saturate(.96) brightness(.98) contrast(1.025);
}

/* Extra deep-space structures so the sky does not feel flat */
.universe .cosmic-cluster{
  position:absolute;
  pointer-events:none;
  z-index:1;
  border-radius:50%;
  mix-blend-mode:screen;
}
.universe .cluster-a{
  width:36vw;
  height:24vw;
  left:28vw;
  top:8vh;
  background:
    radial-gradient(circle at 18% 35%, rgba(255,255,255,.28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 58%, rgba(134,104,255,.28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 67% 32%, rgba(78,174,255,.24) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 55% 50%, rgba(91,75,190,.08), transparent 64%);
  background-size:80px 80px,110px 110px,145px 145px,100% 100%;
  filter:blur(.2px);
  opacity:.92;
}
.universe .cluster-b{
  width:28vw;
  height:18vw;
  left:48vw;
  top:36vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 50%, rgba(176,91,255,.20) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 38%, rgba(79,170,255,.18) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 52% 50%, rgba(79,60,157,.06), transparent 68%);
  background-size:95px 95px,130px 130px,165px 165px,100% 100%;
  opacity:.78;
}
.universe .cluster-c{
  width:34vw;
  height:22vw;
  right:4vw;
  bottom:14vh;
  background:
    radial-gradient(circle at 22% 34%, rgba(255,255,255,.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 66%, rgba(123,90,255,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 28%, rgba(77,155,255,.18) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 58% 52%, rgba(72,74,172,.06), transparent 68%);
  background-size:105px 105px,150px 150px,180px 180px,100% 100%;
  opacity:.72;
}

/* Additional faint galactic dust across the central sky */
.universe .galaxy-dust{
  position:absolute;
  pointer-events:none;
  z-index:1;
  left:22vw;
  right:12vw;
  top:7vh;
  height:48vh;
  background:
    radial-gradient(ellipse at 28% 42%, rgba(111,82,217,.10) 0%, transparent 32%),
    radial-gradient(ellipse at 52% 36%, rgba(71,121,229,.08) 0%, transparent 34%),
    radial-gradient(ellipse at 73% 50%, rgba(159,82,229,.08) 0%, transparent 36%);
  filter:blur(50px);
  opacity:.70;
  mix-blend-mode:screen;
}

/* Keep text side calmer while preserving star detail */
.hero-shield{
  width:39vw;
  background:linear-gradient(90deg, rgba(2,8,25,.18) 0%, rgba(3,10,30,.10) 48%, rgba(3,10,30,.025) 78%, transparent 100%);
}

@media (max-width:820px){
  .wormhole-wrap{opacity:.88}
  .universe .cluster-a{width:72vw;height:46vw;left:4vw;top:18vh;opacity:.58}
  .universe .cluster-b{width:58vw;height:34vw;left:28vw;top:40vh;opacity:.48}
  .universe .cluster-c{width:64vw;height:38vw;right:-6vw;bottom:18vh;opacity:.44}
  .universe .galaxy-dust{left:4vw;right:0;top:12vh;height:44vh;opacity:.48}
}


/* ==========================================================
   V23 — denser galaxy background / brighter pink stars
   ========================================================== */
.wormhole-wrap{
  opacity:.86;
  mix-blend-mode:screen;
  filter:saturate(.94) brightness(.97);
}
#wormhole{
  opacity:.97;
  filter:saturate(.94) brightness(.98) contrast(1.02);
}

/* Galactic dust bands behind the portal and across the middle sky */
.universe .galaxy-band{
  position:absolute;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
}
.universe .band-a{
  width:64vw;
  height:25vw;
  right:3vw;
  top:2vh;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 52% 50%, rgba(110,77,220,.13) 0%, rgba(66,107,220,.07) 28%, transparent 68%),
    radial-gradient(ellipse at 72% 42%, rgba(231,77,207,.09) 0%, transparent 52%);
  filter:blur(34px);
  transform:rotate(-10deg);
  opacity:.78;
}
.universe .band-b{
  width:54vw;
  height:17vw;
  left:27vw;
  top:29vh;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 42% 55%, rgba(117,78,217,.08), transparent 58%),
    radial-gradient(ellipse at 67% 44%, rgba(55,135,237,.07), transparent 62%);
  filter:blur(46px);
  transform:rotate(8deg);
  opacity:.62;
}

/* Dense mini star clouds, especially pink/violet, but still behind copy */
.universe .pink-cloud,
.universe .blue-cloud{
  position:absolute;
  z-index:2;
  pointer-events:none;
  border-radius:50%;
  mix-blend-mode:screen;
}
.universe .pink-cloud{
  width:40vw;
  height:27vw;
  left:36vw;
  top:8vh;
  opacity:.90;
  background-image:
    radial-gradient(circle, rgba(255,113,216,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(217,104,255,.62) 0 .9px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.55) 0 .8px, transparent 1.6px);
  background-size:74px 74px,113px 113px,151px 151px;
  background-position:12px 18px,37px 6px,3px 49px;
  -webkit-mask-image:radial-gradient(ellipse, #000 0%, rgba(0,0,0,.92) 42%, transparent 78%);
  mask-image:radial-gradient(ellipse, #000 0%, rgba(0,0,0,.92) 42%, transparent 78%);
}
.universe .blue-cloud{
  width:46vw;
  height:25vw;
  right:5vw;
  top:24vh;
  opacity:.72;
  background-image:
    radial-gradient(circle, rgba(79,174,255,.66) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(184,126,255,.52) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.45) 0 .8px, transparent 1.6px);
  background-size:89px 89px,131px 131px,169px 169px;
  background-position:22px 4px,7px 47px,64px 18px;
  -webkit-mask-image:radial-gradient(ellipse, #000 0%, rgba(0,0,0,.88) 44%, transparent 80%);
  mask-image:radial-gradient(ellipse, #000 0%, rgba(0,0,0,.88) 44%, transparent 80%);
}

.hero-shield{
  width:38vw;
  background:linear-gradient(90deg, rgba(2,8,25,.18) 0%, rgba(3,10,30,.08) 50%, rgba(3,10,30,.02) 80%, transparent 100%);
}

@media (max-width:820px){
  .wormhole-wrap{opacity:.84}
  .universe .band-a{width:92vw;height:48vw;right:-18vw;top:4vh;opacity:.58}
  .universe .band-b{width:78vw;height:34vw;left:10vw;top:33vh;opacity:.42}
  .universe .pink-cloud{width:82vw;height:54vw;left:6vw;top:19vh;opacity:.56}
  .universe .blue-cloud{width:80vw;height:48vw;right:-12vw;top:42vh;opacity:.48}
}


/* ==========================================================
   V27 — long-lived click drawing + cleaner broom
   ========================================================== */
.click-bursts{contain:layout paint;}
.click-burst{
  width:12px;height:12px;
  border-color:rgba(140,91,239,.78);
  box-shadow:0 0 10px rgba(20,132,248,.20),0 0 12px rgba(247,10,150,.16);
  animation:clickBurstLong 11.6s ease-out forwards;
  will-change:transform,opacity;
}
.click-trace{
  position:absolute;
  width:8px;height:8px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.92) 0 14%, rgba(74,174,255,.74) 28%, rgba(199,91,244,.52) 48%, rgba(247,10,150,.22) 65%, transparent 76%);
  box-shadow:0 0 8px rgba(83,166,255,.22);
  animation:traceFade 9.2s ease-out forwards;
  will-change:opacity,transform;
}
@keyframes clickBurstLong{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.28)}
  6%{opacity:.92;transform:translate(-50%,-50%) scale(4.6)}
  68%{opacity:.70;transform:translate(-50%,-50%) scale(4.8)}
  88%{opacity:.36;transform:translate(-50%,-50%) scale(5.0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(5.2)}
}
@keyframes traceFade{
  0%{opacity:.96;transform:translate(-50%,-50%) scale(.65)}
  10%{opacity:.86;transform:translate(-50%,-50%) scale(1)}
  72%{opacity:.62;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
}
.cleaner-btn{
  position:fixed;
  right:18px;
  top:18px;
  z-index:420;
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:14px;
  border:1px solid rgba(124,145,255,.28);
  color:rgba(235,242,255,.90);
  background:rgba(5,14,45,.44);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.16);
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.cleaner-btn svg{width:22px;height:22px;display:block}
.cleaner-btn:hover{transform:translateY(-2px) rotate(-4deg);background:rgba(18,34,82,.56);border-color:rgba(160,111,255,.48)}
.cleaner-btn.is-cleaning{animation:cleanSweep .36s ease}
@keyframes cleanSweep{0%{transform:rotate(0)}35%{transform:rotate(-18deg) translateX(-3px)}70%{transform:rotate(13deg) translateX(3px)}100%{transform:rotate(0)}}
@media (max-width:820px){
  .cleaner-btn{right:12px;top:12px;width:40px;height:40px;border-radius:12px}
  .cleaner-btn svg{width:20px;height:20px}
}


/* V28 — reintroduce the ship clearly in the composition */
.ship-wrap{display:block!important;z-index:8!important;pointer-events:none;}
.ship{display:block;width:100%;height:auto;opacity:1;transform:translateZ(0);will-change:transform;filter:saturate(.82) brightness(.98) contrast(1.04) drop-shadow(0 12px 26px rgba(0,0,0,.46)) drop-shadow(0 0 14px rgba(61,131,255,.14));}
.ship-glow{opacity:.42!important;filter:blur(16px)!important;}
@media (min-width:821px){
  .ship-wrap{width:min(20vw,310px)!important;right:24vw!important;bottom:9.2vh!important;opacity:.96!important;}
  .ship{animation:shipHover 7.8s ease-in-out infinite;}
}
@media (min-width:821px) and (max-width:1200px){
  .ship-wrap{width:min(22vw,280px)!important;right:23vw!important;bottom:8.8vh!important;}
}
@media (max-width:820px){
  .ship-wrap{width:68vw!important;right:7vw!important;bottom:11.2vh!important;opacity:.95!important;z-index:8!important;}
  .ship{filter:saturate(.8) brightness(.99) contrast(1.04) drop-shadow(0 10px 20px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(61,131,255,.12));}
}
@media (max-width:520px){
  .ship-wrap{width:72vw!important;right:4vw!important;bottom:12.6vh!important;}
}


/* V29 — move ship further toward center so it does not hide behind the astronaut */
@media (min-width:821px){
  .ship-wrap{width:min(21vw,330px)!important;right:31vw!important;bottom:9.2vh!important;opacity:.98!important;}
}
@media (min-width:821px) and (max-width:1200px){
  .ship-wrap{width:min(23vw,300px)!important;right:28vw!important;bottom:8.8vh!important;}
}
@media (max-width:820px){
  .ship-wrap{width:64vw!important;right:16vw!important;bottom:11.4vh!important;}
}
@media (max-width:520px){
  .ship-wrap{width:67vw!important;right:14vw!important;bottom:12.4vh!important;}
}