/* Approved Astrix hero artwork and responsive interaction map — v3.
   The visual layer uses the client-approved desktop/mobile compositions.
   Live semantic content remains in the document and the two CTAs remain interactive. */

.hero3 {
  position: relative !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #020819 !important;
}

/* Keep the full-bleed composition edge-to-edge while preserving normal scroll. */
html {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html body .hero3::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url('/astrix-hero-approved-desktop-v2.png?v=3') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  transform: none !important;
  opacity: 1 !important;
}

.hero3::after,
.hero3 .hero3-shade {
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* These elements are already rendered in the approved artwork. Keeping them
   transparent preserves the accessible document outline without double text. */
.hero3 .astrix-hero-logo {
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero3 .hero3-copy > .overline,
.hero3 .cosmic-lockup,
.hero3 .hero3-copy > p:not(.overline) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero3 .hero3-dock {
  display: none !important;
}

/* Desktop CTA hit areas mirror the approved 2048 x 1152 composition. */
.hero3 .hero3-actions {
  position: absolute !important;
  left: 6.543% !important;
  top: 85.243% !important;
  z-index: 12 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.563vw !important;
  width: 58.691% !important;
  height: 8.16vh !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.hero3 .hero3-actions > a,
.hero3 .hero3-actions > a:first-child,
.hero3 .hero3-actions > button,
.hero3 .hero3-actions > a:hover,
.hero3 .hero3-actions > a:first-child:hover,
.hero3 .hero3-actions > button:hover {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-color: transparent !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.hero3 .hero3-actions svg {
  opacity: 0 !important;
}

.hero3 .hero3-actions > a:focus-visible,
.hero3 .hero3-actions > button:focus-visible {
  outline: 2px solid rgba(224, 241, 255, .92) !important;
  outline-offset: 3px !important;
}

@media (max-width: 800px) {
  html body .hero3 {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  html body .hero3::before {
    background-image: url('/astrix-hero-approved-mobile-v4.png?v=3') !important;
    background-position: center !important;
    background-size: cover !important;
  }

  /* Mobile CTA hit areas mirror the approved 709 x 1417 composition. */
  .hero3 .hero3-actions {
    left: 8.745% !important;
    top: 61.397% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.27svh !important;
    width: 82.37% !important;
    height: auto !important;
  }

  .hero3 .hero3-actions > a,
  .hero3 .hero3-actions > button,
  .hero3 .hero3-actions > a:hover,
  .hero3 .hero3-actions > button:hover {
    flex: 0 0 6.21svh !important;
    height: 6.21svh !important;
  }
}

/* Final laptop first page: clean client background, no hero copy or logo,
   with the original navigation and two CTA buttons kept live. */
@media (min-width: 801px) {
  html body .hero3::before {
    background-image: url('/astrix-hero-desktop-clean-v1.png?v=1') !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  html body .hero3::after,
  .hero3 .astrix-hero-logo,
  .hero3 .hero3-shade,
  .hero3 .hero3-copy > .overline,
  .hero3 .cosmic-lockup,
  .hero3 .hero3-copy > p:not(.overline) {
    display: none !important;
    opacity: 0 !important;
  }

  .hero3 .hero3-actions {
    left: 6.4% !important;
    top: auto !important;
    bottom: 6.6% !important;
    z-index: 12 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 1.6vw, 32px) !important;
    width: min(1200px, 72vw) !important;
    height: clamp(72px, 8.2vh, 94px) !important;
  }

  .hero3 .hero3-actions > a,
  .hero3 .hero3-actions > a:first-child,
  .hero3 .hero3-actions > button,
  .hero3 .hero3-actions > a:hover,
  .hero3 .hero3-actions > a:first-child:hover,
  .hero3 .hero3-actions > button:hover {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 clamp(24px, 2.2vw, 44px) !important;
    border: 1px solid rgba(232, 239, 255, .28) !important;
    border-radius: 999px !important;
    color: #f7f8fb !important;
    -webkit-text-fill-color: currentColor !important;
    background: rgba(3, 11, 31, .12) !important;
    font: 420 clamp(18px, 1.65vw, 28px)/1 var(--font-display) !important;
    letter-spacing: -.04em !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  .hero3 .hero3-actions > a:first-child,
  .hero3 .hero3-actions > a:first-child:hover {
    color: #0b1730 !important;
    border-color: transparent !important;
    background: linear-gradient(110deg, #ffc5ae, #f4e5cf 34%, #d5e2f8 66%, #c1efd1) !important;
  }

  .hero3 .hero3-actions svg {
    width: 1.25em !important;
    height: 1.25em !important;
    opacity: 1 !important;
  }
}

/* Single raster artwork layer for laptop: all copy, the orbit and the mark are
   inside this transparent PNG; live duplicate copy remains hidden. */
@media (min-width: 801px) {
  html body .hero3::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    background: transparent url('/astrix-landscape-transparent.png?v=1') center top / 100% auto no-repeat !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

/* Keep the requested navigation available without covering the hero artwork. */
@media (min-width: 801px) {
  body.hero-reference-top .nav3 {
    top: 18px !important;
    right: 2.4% !important;
    left: auto !important;
    width: auto !important;
    height: 54px !important;
    padding: 0 22px !important;
    gap: 0 !important;
    border: 1px solid rgba(236, 242, 255, .24) !important;
    background: rgba(3, 11, 31, .62) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.hero-reference-top .nav3 > .brand3,
  body.hero-reference-top .nav3 > .nav-world,
  body.hero-reference-top .nav3 > .talk3,
  body.hero-reference-top .nav3 > button:last-child {
    display: none !important;
  }

  body.hero-reference-top .nav3 nav {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
    margin: 0 !important;
  }

  body.hero-reference-top .nav3 nav .explore-btn,
  body.hero-reference-top .nav3 nav a {
    display: block !important;
    padding: 8px 0 !important;
    color: rgba(250, 250, 248, .94) !important;
    background: transparent !important;
    font: 600 12px/1 var(--font-body) !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
}

@media (max-width: 800px) {
  body.hero-reference-top .nav3 {
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    justify-content: center !important;
    border: 1px solid rgba(236, 242, 255, .24) !important;
    border-radius: 50% !important;
    background: rgba(3, 11, 31, .56) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.hero-reference-top .nav3 > .brand3,
  body.hero-reference-top .nav3 > .nav-world,
  body.hero-reference-top .nav3 > nav,
  body.hero-reference-top .nav3 > .talk3 {
    display: none !important;
  }

  body.hero-reference-top .nav3 > button:last-child {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    place-items: center !important;
  }
}

/* Native portrait phone artwork with the existing live hero layers. */
@media (max-width: 800px) {
  html body .hero3::before {
    background-image: url('/astrix-hero-portrait-v1.png?v=1') !important;
    background-position: center !important;
    background-size: cover !important;
  }

  .hero3 .astrix-hero-logo {
    display: none !important;
  }

  .hero3 .hero3-shade {
    display: block !important;
    position: absolute !important;
    inset: auto !important;
    top: 2px !important;
    left: 50% !important;
    z-index: 5 !important;
    width: 96px !important;
    height: 111px !important;
    background: transparent url('/astrix-a-mark-transparent-v17.png?v=18') center / contain no-repeat !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }

  .hero3 .hero3-copy > .overline {
    top: 10.5% !important;
  }

  .hero3 .cosmic-lockup,
  .hero3:not(.previewing) h1.cosmic-lockup {
    top: 16% !important;
  }

  .hero3 .hero3-copy > .overline,
  .hero3 .cosmic-lockup,
  .hero3 .hero3-copy > p:not(.overline) {
    opacity: 1 !important;
  }

  .hero3 .hero3-actions {
    left: 9.3% !important;
    top: 69.2% !important;
    width: 81.5% !important;
    height: auto !important;
    gap: 12px !important;
  }

  .hero3 .hero3-actions > a,
  .hero3 .hero3-actions > a:first-child,
  .hero3 .hero3-actions > button,
  .hero3 .hero3-actions > a:hover,
  .hero3 .hero3-actions > a:first-child:hover,
  .hero3 .hero3-actions > button:hover {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 58px !important;
    width: 100% !important;
    height: 58px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(236, 242, 255, .28) !important;
    border-radius: 999px !important;
    color: #f6f6f4 !important;
    -webkit-text-fill-color: currentColor !important;
    background: rgba(3, 11, 31, .10) !important;
    font: 430 clamp(15px, 4.1vw, 18px)/1 var(--font-display) !important;
    letter-spacing: -.035em !important;
  }

  .hero3 .hero3-actions > a:first-child,
  .hero3 .hero3-actions > a:first-child:hover {
    color: #0b1730 !important;
    background: linear-gradient(110deg, rgba(255, 189, 170, .96), rgba(244, 231, 199, .94) 34%, rgba(207, 218, 248, .95) 66%, rgba(191, 239, 204, .92)) !important;
  }

  .hero3 .hero3-actions svg {
    width: 1.25em !important;
    height: 1.25em !important;
    opacity: 1 !important;
  }

  /* Keep the phone orbit attached to the live numeral so it always lands
     between “1” and “Universe”, above the artwork and beneath the word. */
  .hero3 .cosmic-universe .universe-one::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    display: block !important;
    box-sizing: border-box !important;
    left: calc(100% + .18em) !important;
    top: -.17em !important;
    width: 2em !important;
    height: 2.44em !important;
    border: 1.7px solid rgba(196, 218, 244, .82) !important;
    border-top-color: rgba(244, 205, 224, .92) !important;
    border-right-color: rgba(166, 222, 247, .84) !important;
    border-bottom-color: rgba(29, 226, 239, .94) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: 0 0 14px rgba(77, 218, 239, .12) !important;
    transform: rotate(-11deg) !important;
    transform-origin: center !important;
    pointer-events: none !important;
  }

  .hero3 .cosmic-universe .universe-one::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    display: block !important;
    left: calc(100% + 1.89em) !important;
    top: .31em !important;
    width: .19em !important;
    height: .19em !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f4d99b, #b7dff3) !important;
    box-shadow: 0 0 9px rgba(183, 223, 243, .58) !important;
    pointer-events: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero3,
  .hero3::before,
  .hero3 .hero3-actions > a,
  .hero3 .hero3-actions > button {
    animation: none !important;
    transition: none !important;
  }
}

/* Final phone first page: use only the two client-supplied raster assets.
   The supplied artwork already contains the logo, copy, metrics and orbit. */
@media (max-width: 800px) {
  html body .hero3::before {
    background-image: url('/astrix-phone-background-final-v1.png?v=1') !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  html body .hero3::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    background: transparent url('/astrix-phone-artwork-v1.png?v=1') center top / 100% auto no-repeat !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .hero3 .astrix-hero-logo,
  .hero3 .hero3-shade,
  .hero3 .hero3-copy > .overline,
  .hero3 .cosmic-lockup,
  .hero3 .hero3-copy > p:not(.overline) {
    display: none !important;
    opacity: 0 !important;
  }

  .hero3 .hero3-actions {
    top: 80.5% !important;
    z-index: 12 !important;
  }
}