/* Homepage hero: full-bleed dot field behind centred words. Only the top section. */
/* Exactly one screen tall from where it starts (under the header), plus 2px so the divider sits just out of view. */
.hxh { position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; min-height:calc(100svh - var(--hxh-top, 64px) + 2px); padding:48px 16px 96px; text-align:center; }
.hxh-field { position:absolute; z-index:-1; top:-5rem; left:0; right:0; bottom:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 2px), transparent); mask-image:linear-gradient(#000 calc(100% - 2px), transparent); }
.hxh-field canvas { display:block; width:100%; height:100%; opacity:0; transition:opacity 1.4s cubic-bezier(.22,.61,.36,1); }
.hxh.is-live .hxh-field canvas { opacity:1; }
/* Until the field is ready (or on devices without WebGL) the hero is simply dark space: no placeholder pattern. */

.hxh-copy { position:relative; width:100%; max-width:1180px; }
.hxh-face { display:block; width:96px; height:auto; margin:0 auto 30px; filter:drop-shadow(0 14px 28px #000c); animation:hxh-float 8s ease-in-out infinite; }
@keyframes hxh-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

/* Geist, one weight, tight tracking. Line two types out Nexus features in the cyan of the Nexus eyes;
   it is one fixed line tall so nothing below moves while it types. */
.hxh-title { display:flex; flex-direction:column; align-items:center; margin:0; font:600 clamp(3rem, 6.6vw, 6.25rem)/1.04 Geist,"Inter Tight",Inter,system-ui,sans-serif; letter-spacing:-.05em; color:#f5f5f7; }
.hxh-l1, .hxh-l2 { display:block; white-space:nowrap; }
.hxh-l2 { position:relative; height:1.14em; margin-top:.06em; padding-bottom:.06em; font-size:.72em; letter-spacing:-.04em; }
.hxh-word { background:linear-gradient(180deg, #8eeafc 0%, #2fd2f5 55%, #19b6e0 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hxh-caret { display:inline-block; width:.055em; min-width:3px; height:.82em; margin-left:.07em; border-radius:2px; background:#5fe0fa; vertical-align:-.04em; animation:hxh-blink 1.1s steps(1, end) infinite; }
.hxh-title.is-typing .hxh-caret { animation:none; }
@keyframes hxh-blink { 0%,55% { opacity:1; } 56%,100% { opacity:0; } }

/* Buttons come from the shared set (assets/ui.css); the hero only sizes them up. */
.hxh-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:44px; }
.hxh-btn.ui-btn { min-height:50px; padding:0 22px; gap:10px; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.hxh-btn.ui-btn--secondary { background:rgba(4, 4, 10, .45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.hxh-btn.ui-btn--secondary:hover { background:rgba(255, 255, 255, .08); }
.hxh-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hxh-btn.discord svg { width:20px; height:20px; fill:currentColor; stroke:none; }

/* A crisp hairline where the dots end and the page begins. */
.hxh::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, #ffffff1c 18%, #ffffff1c 82%, transparent); }

@media (max-width:639px) {
  .hxh { padding:24px 16px 72px; }
  .hxh-face { width:80px; margin-bottom:26px; }
  /* Sized so the longest phrase ("Browser Extension") still fits on one line at 320px. */
  .hxh-title { font-size:clamp(2rem, 10.2vw, 3.4rem); letter-spacing:-.045em; }
  .hxh-actions { flex-direction:column; gap:10px; margin-top:36px; }
  .hxh-btn.ui-btn { width:min(100%, 300px); }
}
@media (prefers-reduced-motion:reduce) {
  .hxh-face { animation:none; }
  .hxh-field canvas { transition:none; }
  .hxh-caret { display:none; }
}