/* Scoped hero layout and navigation; original styling remains elsewhere. */
.homepage-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  margin-bottom: -80px;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: 'Geist', sans-serif;
}
/* Keep the glass on its own layer so only the page behind it is blurred.
   The sticky header's stacking context keeps this layer above page content. */
.homepage-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(7, 13, 20, .96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    inset 0 -1px 0 rgba(165, 215, 240, .1),
    0 8px 28px rgba(0, 0, 0, .18);
}
.homepage-nav::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 5%, rgba(125, 211, 252, .25) 50%, transparent 95%);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .homepage-nav::before {
    background: linear-gradient(180deg, rgba(13, 23, 33, .8), rgba(7, 13, 20, .72));
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .homepage-nav::before {
    background: #0a121b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.homepage-nav-bar {
  display: flex;
  align-items: center;
  gap: 44px;
  width: 100%;
  max-width: 1280px;
  min-height: 80px;
  margin-inline: auto;
  padding: 14px 32px;
}
.homepage-brand {
  display: flex;
  flex: 0 0 120px;
  align-items: center;
}
.homepage-brand img { width: 120px; height: auto; }
.homepage-nav-links, .homepage-nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  white-space: nowrap;
}
.homepage-nav-links > a, .homepage-nav .spark-products-trigger {
  color: rgba(255, 255, 255, .78);
  transition: color 180ms ease;
}
.homepage-nav-links > a:hover, .homepage-nav .spark-products-trigger:hover { color: #fff; }
.homepage-nav .spark-products-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: 10px;
  font-size: 13px;
}
.homepage-nav-actions { gap: 10px; margin-left: auto; }
.homepage-nav-contact, .homepage-nav-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 38px;
  padding: 8px 17px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  color: white;
}
.homepage-nav-contact:hover { background: rgba(255, 255, 255, .06); }
.homepage-nav-login { color: #05080a; background: #fff; border-color: #fff; }
.homepage-nav-login:hover { background: #e7e7e7; }
.homepage-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  color: white;
}
.homepage-nav a:focus-visible, .homepage-nav button:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 4px;
}
.homepage-hero-inner {
  width: 100%;
  min-width: 0;
  /* Keep the content in place while the artwork extends beneath the nav. */
  padding-top: 152px;
  padding-bottom: 56px;
}
.homepage-hero-content { min-width: 0; }
.homepage-hero { border-bottom: 0; background: #070b0f; }
.homepage-hero [data-container-bg] {
  z-index: 0;
  isolation: isolate;
  background: #030609;
}
/* Production composites the translucent scene over near-black. A blue
   fallback underneath it lifts the shadows and washes out the globe. */
.homepage-hero .hero-static-fallback { background: #030609; }
/* Size the scene itself: transforms make Unicorn measure an already enlarged
   canvas and then scale it a second time, shifting the globe off center. */
.homepage-hero [data-us-project] {
  inset: auto 0 0;
  width: 100%;
  height: max(100%, 65vw);
}
.homepage-hero [data-us-project] canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  /* Overscan only the rendered canvas, never the measured scene container. */
  transform: scale(2);
  transform-origin: center 65%;
}
.homepage-hero .hero-static-fallback::before {
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}
.homepage-hero-shade, .homepage-hero-fade {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.homepage-hero-shade {
  inset: 0;
  background:
    linear-gradient(rgba(3,5,7,.18), rgba(3,5,7,.18)),
    radial-gradient(ellipse at 50% 48%, transparent 35%, rgba(3,6,9,.4) 100%);
}
.homepage-hero-fade {
  inset: auto 0 0;
  height: 320px;
  background: linear-gradient(to bottom, rgba(7,11,15,0), rgba(7,11,15,.3) 35%, #070b0f 100%);
}
.homepage-hero-copy {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}
.homepage-hero-copy > div:first-child { justify-content: center; }
.homepage-hero-copy h1 { max-width: 1000px; margin-inline: auto; }
.homepage-hero-copy > p { max-width: 690px; margin-inline: auto; }
.homepage-hero-copy > div:last-child { max-width: 510px; margin-inline: auto; }
.homepage-hero-preview {
  width: calc(100% - 64px);
  max-width: 1080px;
  min-width: 0;
  margin: 60px auto 0;
}
.homepage-hero-preview #dashboard-container { margin-bottom: 0; }
@media (min-width: 768px) and (max-width: 1023px) {
  .homepage-nav-bar { gap: 26px; padding-inline: 24px; }
  .homepage-nav-links { gap: 20px; }
  .homepage-nav-contact, .homepage-nav-login { padding-inline: 14px; }
}
@media (max-width: 767px) {
  .homepage-nav { margin-bottom: -68px; }
  .homepage-nav-bar { min-height: 68px; padding: 12px 20px; gap: 16px; }
  .homepage-brand { flex-basis: 108px; }
  .homepage-brand img { width: 108px; }
  .homepage-nav-links, .homepage-nav-contact { display: none; }
  .homepage-menu-toggle { display: flex; }
  .homepage-nav #mobile-menu { max-height: calc(100dvh - 68px); overflow-y: auto; }
  .homepage-hero-inner { padding-top: 116px; padding-bottom: 32px; }
  .homepage-hero-preview { width: calc(100% - 32px); margin-top: 36px; }
}