/* HERO-002: one contained environment, one authentic foreground image.
   All atmospheric layers share the entire hero, never the product's box. */
.nebula-home-hero {
  --product-width: min(920px, calc(100vw - 96px), calc((100svh - 390px) * 1.363636));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - 121px);
  padding: 20px 0;
  background: #050911;
}
.nebula-home-hero__environment,
.nebula-home-hero__far-field,
.nebula-home-hero__atmosphere,
.nebula-home-hero__stars,
.nebula-home-hero__falloff {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nebula-home-hero__environment { z-index: -1; }
.nebula-home-hero__far-field { opacity: .5; }
.nebula-home-hero__far-field img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
/* Explicit elliptical radii end in transparent pixels. No local light panels. */
.nebula-home-hero__atmosphere {
  background:
    radial-gradient(ellipse 28% 34% at 29% 58%, #1686b333, #145e8718 45%, #145e8700 100%),
    radial-gradient(ellipse 26% 34% at 73% 57%, #6851b535, #3f428918 45%, #3f428900 100%),
    radial-gradient(ellipse 36% 5.5% at 50% 94%, #4ca3c943, #27648716 48%, #27648700 100%);
}
.nebula-home-hero__stars {
  opacity: .38;
  background:
    radial-gradient(circle 2px at 14% 36%, #acdbec 0, #6e99ce00 100%),
    radial-gradient(circle 1px at 84% 20%, #c7c3ec 0, #7e71bb00 100%),
    radial-gradient(circle 2px at 88% 65%, #99d0f0 0, #476da100 100%);
}
.nebula-home-hero__falloff {
  background:
    linear-gradient(180deg, #050911 0%, #05091122 17%, #05091100 50%, #05091135 78%, #050911 100%),
    radial-gradient(ellipse 70% 65% at 50% 50%, #05091100 42%, #05091170 100%);
}
.nebula-home-hero__copy {
  position: relative;
  width: calc(100% - 40px);
  margin-inline: auto;
  text-align: center;
}
.nebula-home-hero h1 {
  font: 300 clamp(40px, 3.8vw, 68px) / 1.15 'Space Grotesk', sans-serif;
  letter-spacing: .19em;
  text-indent: .19em;
  white-space: nowrap;
  color: #f1f5fa;
}
.nebula-home-hero h1 span:last-child { color: #09cfe4; }
.nebula-home-hero__descriptor {
  margin-top: 10px;
  padding-left: .48em;
  font: 400 13px / 1.5 'Space Grotesk', sans-serif;
  letter-spacing: .48em;
  color: #afc1d4;
}
.nebula-home-hero__actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.nebula-home-hero .button {
  min-height: 48px;
  min-width: 205px;
  padding: 11px 25px;
  border-radius: 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  transition: box-shadow .2s, border-color .2s, background-color .2s;
}
.nebula-home-hero .button .action-icon { width: 20px; height: 20px; }
.nebula-home-hero__beta {
  border: 1px solid transparent;
  background: linear-gradient(115deg, #076b8d, #124775 58%, #272452) padding-box,
    linear-gradient(110deg, #6cdef1, #548fb9 55%, #8c81bf) border-box;
  color: #f3faff;
  box-shadow: inset 0 1px 0 #bdfaff20, 0 3px 20px #007da61a;
}
.nebula-home-hero__beta:hover { box-shadow: inset 0 1px 0 #bdfaff40, 0 3px 24px #00a9d32e; }
.nebula-home-hero__explore {
  border: 1px solid #567f9e;
  background: #050d17a6;
  color: #e2ecf6;
}
.nebula-home-hero__explore:hover { border-color: #a2cddd; background: #112232; }
.nebula-home-hero__figure {
  position: relative;
  width: var(--product-width);
  margin: 20px auto 0;
}
.nebula-home-hero__interface {
  position: relative;
  border-radius: 8px;
  /* Tight occlusion, then a detached soft shadow: the native frame supplies the edge. */
  box-shadow: 0 3px 7px #000b, 0 20px 30px #0009, 0 42px 72px #0007;
}
.nebula-home-hero .product-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  overflow: visible;
  transform: none;
  transition: none;
  /* Directional, subpixel-strength rim; no second luminous rectangular frame. */
  box-shadow: -1px -1px 0 #9ad3e042, 1px 0 0 #afa4d727, 0 1px 0 #4b9bb72e;
}
.nebula-home-hero .product-image-button:hover { transform: none; }
.nebula-home-hero .product-image-button img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.nebula-home-hero__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding-top: 3px;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: .025em;
  color: #8da3b8;
}
.nebula-home-hero__caption i {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 6px 2px 0;
  border-radius: 50%;
  background: #67a8b7;
}
.nebula-home-hero__platform { white-space: nowrap; }
.nebula-home-hero__platform span { margin-inline: 5px; color: #536c85; }
@media (min-width:1101px) and (max-height:820px) {
  .nebula-home-hero {
    --product-width: min(920px, calc(100vw - 96px), calc((100svh - 330px) * 1.363636));
    padding: 12px 0 16px;
  }
  .nebula-home-hero h1 { font-size: 44px; }
  .nebula-home-hero__descriptor { margin-top: 7px; font-size: 11px; }
  .nebula-home-hero__actions { margin-top: 16px; }
  .nebula-home-hero .button { min-height: 44px; padding-block: 9px; }
  .nebula-home-hero__figure { margin-top: 16px; }
  .nebula-home-hero__caption { min-height: 28px; }
}
@media (max-width:1100px) {
  .nebula-home-hero {
    --product-width: min(760px, calc(100vw - 56px));
    min-height: 0;
    padding: 30px 0;
  }
  .nebula-home-hero h1 { font-size: clamp(30px, 4.8vw, 48px); letter-spacing: .16em; text-indent: .16em; }
  .nebula-home-hero__descriptor { font-size: 11px; letter-spacing: .4em; padding-left: .4em; }
  .nebula-home-hero__figure { margin-top: 24px; }
  .nebula-home-hero__far-field { opacity: .48; }
}
@media (max-width:600px) {
  .nebula-home-hero { --product-width: calc(100vw - 32px); padding: 28px 0 34px; }
  .nebula-home-hero__copy { width: calc(100% - 32px); }
  .nebula-home-hero h1 { font-size: clamp(22px, 6.3vw, 34px); letter-spacing: .12em; text-indent: .12em; }
  .nebula-home-hero__descriptor { margin-top: 12px; font-size: 10px; letter-spacing: .29em; padding-left: .29em; }
  .nebula-home-hero__actions { flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
  .nebula-home-hero .button { width: 242px; min-height: 46px; font-size: 12px; }
  .nebula-home-hero__far-field img { object-position: 18% 50%; }
  .nebula-home-hero__atmosphere {
    background: radial-gradient(ellipse 70% 28% at 50% 65%, #1d698e24, #1d698e00 100%);
  }
  .nebula-home-hero__interface { border-radius: 4px; }
  .nebula-home-hero__caption { flex-direction: column; justify-content: center; gap: 4px; padding-top: 13px; }
  .nebula-home-hero__inspect { display: none; }
  .nebula-home-hero__platform { font-size: 8px; letter-spacing: .06em; }
}
/* Very short windows remain usable by scrolling, rather than shrinking the UI away. */
@media (min-width:1101px) and (max-height:640px) {
  .nebula-home-hero { --product-width: 460px; }
}
@media (prefers-reduced-motion:reduce) {
  .nebula-home-hero .button { transition: none; }
}