/* Approved space concept, with independently animated HTML foreground. */
#onboarding { background: linear-gradient(90deg,rgba(5,2,12,.82),rgba(5,2,12,.2)), url('aazizo-space-background.png') center top / cover no-repeat #060310; isolation:isolate; }
#onboarding::before, #onboarding::after, #onboarding > .event-horizon-shadow, #landingHorizon, #onboarding > .cosmic-vortex, #onboarding .glow { display:none !important; }
#onboarding .onboarding-main { display:grid; grid-template-areas:'copy visual' 'connect visual'; grid-template-columns:minmax(0, .95fr) minmax(0,1.25fr); grid-template-rows:auto auto; gap:28px 32px; padding:55px 0 65px; width:min(1400px,calc(100% - 64px)); }
#onboarding .onboarding-copy { grid-area:copy; align-self:end; }
#onboarding .onboarding-copy h1 { font-size:clamp(40px,4.1vw,66px); }
#onboarding .lead { color:#cdc5dc; }
#onboarding .connect-card-wrap { grid-area:connect; }
#onboarding .floating-chip { display:none; }
#onboarding .connect-card { background:rgba(13,8,27,.85); backdrop-filter:blur(16px); }
.space-stage { grid-area:visual; position:relative; min-width:0; min-height:610px; align-self:center; height:100%; max-height:760px; }
.space-emblem { position:absolute; width:67%; left:16.5%; top:20%; mix-blend-mode:screen; animation:space-float 7s ease-in-out infinite; }
.space-ring { position:absolute; width:77%; height:35%; left:11.5%; top:35%; border:1px solid #b878ed; border-radius:50%; transform:rotate(-27deg); box-shadow:0 0 14px #a051e533; }
.space-ring.ring-second { transform:rotate(28deg); height:32%; top:37%; border-color:#d1b8c6; }
.space-ring i { position:absolute; inset:-1px; border-radius:50%; animation:space-orbit 18s linear infinite; }
.space-ring i::before { content:''; position:absolute; top:50%; left:-4px; width:8px; height:8px; border-radius:50%; background:#ead7ff; box-shadow:0 0 15px 5px #be74ff; }
.ring-second i { animation-duration:25s; animation-direction:reverse; }
.space-feature { position:absolute; z-index:3; display:flex; align-items:center; gap:13px; padding:17px 19px; border:1px solid #af78e480; border-radius:18px; background:linear-gradient(120deg,rgba(22,13,40,.95),rgba(16,9,30,.84)); box-shadow:0 15px 45px #0005,inset 0 1px 0 #e0bbff20; backdrop-filter:blur(12px); animation:space-float 8s ease-in-out infinite; }
.space-feature > span { font-size:32px; color:#d3a3ff; text-shadow:0 0 16px #b054ff; }
.space-feature strong { display:block; font-size:16px; color:#f5efff; }
.space-feature small { display:block; margin-top:6px; font-size:12px; color:#bdb0ca; }
.feature-mod { top:15%; left:0; }
.feature-ticket { bottom:16%; left:1%; animation-delay:-3s; }
.feature-ai { right:0; top:52%; animation-delay:-5s; }
.space-caption { position:absolute; bottom:4%; left:0; width:100%; text-align:center; color:#c0abda; font-size:10px; letter-spacing:2px; }
.space-caption span { display:block; margin-top:9px; letter-spacing:.5px; color:#a997b8; }
@keyframes space-float { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }
@keyframes space-orbit { to { transform:rotate(360deg); } }
@media(max-width:960px) {
  #onboarding .onboarding-main { grid-template-areas:'visual' 'copy' 'connect'; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; width:min(700px,calc(100% - 36px)); padding-top:10px; }
  .space-stage { min-height:480px; height:480px; }
  #onboarding .onboarding-copy, #onboarding .connect-card-wrap { max-width:100%; width:100%; }
}
@media(max-width:560px) {
  #onboarding { background-position:65% top; }
  .space-stage { min-height:350px; height:350px; }
  .space-emblem { width:75%; left:12.5%; top:10%; }
  .space-feature { padding:10px; gap:8px; border-radius:12px; }
  .space-feature strong { font-size:12px; }
  .space-feature small { font-size:10px; }
  .space-feature > span { font-size:23px; }
  .feature-mod { top:2%; }
  .feature-ticket { bottom:15%; left:0; }
  .feature-ai { top:44%; right:0; }
  .space-caption { bottom:0; font-size:8px; }
  #onboarding .onboarding-copy h1 { font-size:40px; letter-spacing:-2px; }
}
@media(prefers-reduced-motion:reduce) { .space-emblem,.space-feature,.space-ring i { animation:none; } }