/* NexURLs Core 0.3.0 - 3D hero */
.nexu-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: min(86vh, 820px);
  min-height: 560px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, #FFFFFF 0%, #F4F0E8 62%);
  color: #121212;
  isolation: isolate;
}
body.nexu-app-page { overflow-x: clip; }
body.nexu-app-page #primary:has(.nexu-hero) { margin-top: 0 !important; }
.nexu-hero-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; z-index: 0; }
.nexu-hero-c.is-hover { cursor: pointer; }
.nexu-hero-in {
  position: relative; z-index: 2; height: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  pointer-events: none;
}
.nexu-hero-in > * { pointer-events: auto; position: relative; }
/* A soft paper glow behind the words so they always read over the cards. */
.nexu-hero-in::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(900px, 110%); height: 400px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(244,240,232,.9), rgba(244,240,232,.7) 50%, rgba(244,240,232,0));
}
.nexu-hero-mark { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; margin: 0 0 14px; letter-spacing: -0.01em; }
.nexu-hero-mark span { color: #FF5A1F; }
.nexu-hero h1 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #121212;
  font-size: clamp(38px, 7vw, 76px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 16px;
  text-shadow: 0 0 24px #F4F0E8, 0 0 48px #F4F0E8;
}
.nexu-hero-sub {
  font-size: 18px; line-height: 1.5; color: #3A3732; max-width: 540px; margin: 0 0 26px;
  text-shadow: 0 0 16px #F4F0E8, 0 0 16px #F4F0E8;
}
.nexu-hero-go {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px;
  background: #FF5A1F; color: #121212; border: 0; border-radius: 999px; padding: 18px 40px; cursor: pointer;
  box-shadow: 0 6px 0 #E2470F; transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.nexu-hero-go:hover { filter: brightness(1.05); }
.nexu-hero-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #E2470F; }
.nexu-hero-go[disabled] { cursor: wait; }
.nexu-hero-count { margin: 18px 0 0; font-size: 14px; font-weight: 600; color: #6B665E; }
.nexu-hero-down {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #121212; color: #121212 !important;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6);
  animation: nexu-bob 2.4s ease-in-out infinite;
}
@keyframes nexu-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* During the warp the words get out of the way. */
.nexu-hero.is-warping .nexu-hero-in, .nexu-hero.is-warping .nexu-hero-down { opacity: 0; transform: scale(.96); transition: opacity .35s ease, transform .35s ease; }
.nexu-hero-in, .nexu-hero-down { transition: opacity .35s ease, transform .35s ease; }

/* With the hero above it, the app drops its own small header. */
.nexu.has-hero .nexu-head { display: none; }

/* No WebGL: the words still stand on their own. */
.nexu-hero.no-gl { background: #F4F0E8; height: auto; min-height: 0; padding: 72px 0 64px; }

@media (max-width: 700px) {
  .nexu-hero { height: 82svh; min-height: 520px; }
  .nexu-hero-sub { font-size: 16px; }
  .nexu-hero-go { font-size: 20px; padding: 16px 30px; }
  .nexu-hero-down { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nexu-hero-down { animation: none; }
}