/* ==========================================================================
   nexus — estilos
   Todo o layout está em rem; o font-size da raiz escala com a viewport
   (grade rem adaptativa). Cada px de design aparece como px/16 rem.
   ========================================================================== */

/* ── Tokens de design ─────────────────────────────────────────────────── */
:root {
  --background: #ffffff;
  --scene-ground: #000000;
  --hero-word: #ffdfa9; --hero-ink: #ffffff; --hero-vignette: #341f00;
  --action-surface: #000000; --action-text: #c1f7f5; --action-accent: #26ff3f;
  --menu-surface: #000000; --menu-foreground: #ffffff; --menu-logotype: #c1f7f5;
  --preloader-surface: #ffffff; --preloader-ink: #6d1a2b;
  --radius-action: 0.6875rem;  /* 11px */
  --radius-marker: 0.125rem;   /* 2px */
  --radius-hairline: 0.0625rem;
  --tracking-display: -0.04em; --tracking-logo: -0.03em; --leading-ui: 1.12;
  --duration-fast: 150ms; --duration-normal: 250ms; --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --font-display: "Audiowide", system-ui, sans-serif;
  --font-ui: "Urbanist", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --background: #0a0a0a; }
}

/* ── Grade rem adaptativa ─────────────────────────────────────────────── */
html { font-size: 16px; }
@media (max-width: 1400px) { html { font-size: 1.142857vw; } } /* 16·100/1400 — desktop, desenhado em 1400 */
@media (max-width: 1024px) { html { font-size: 1.5625vw; } }   /* 16·100/1024 */
@media (max-width: 640px)  { html { font-size: 4.444444vw; } } /* 16·100/360 — celular, desenhado em 360 */

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { display: block; }

body {
  background: var(--background);
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-scroll-locked { overflow: hidden; touch-action: none; }

/* ── Camadas da cena ──────────────────────────────────────────────────── */
.scene-layer {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 100lvh;
}
#scene-field { z-index: -10; background: var(--scene-ground); }
#scene-robot { z-index: 10; pointer-events: none; }
.scene-box { position: absolute; inset: 0; }
.scene-box .still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#lvh-probe {
  position: fixed; left: 0; top: 0;
  width: 0; height: 100lvh;
  visibility: hidden; pointer-events: none;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* Nada entre o texto com blend e o <body> pode criar um stacking context. */
.hero {
  position: relative;
  height: 100lvh;
  width: 100%;
  overflow: hidden;
  color: var(--hero-ink);
}

.hero-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(77.45% 116.06% at 50% 50%, transparent 37.414%, var(--hero-vignette) 100%);
}

/* Logotipo partido: "ne" e "xus" */
.logotype {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 8rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  color: var(--hero-word);
  mix-blend-mode: exclusion;
  text-box: trim-both cap alphabetic;
}
.logotype-ne  { left: 1.25rem; top: 5rem; }
.logotype-xus { bottom: 11rem; right: 0.625rem; text-align: right; }

.hero-headline {
  position: absolute;
  bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--hero-ink);
  mix-blend-mode: exclusion;
  text-box: trim-both cap alphabetic;
}
.headline-line { display: block; }

.hero-tagline {
  position: absolute;
  bottom: 6rem; left: 1.25rem;
  z-index: 20;
  width: 16.375rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  line-height: var(--leading-ui);
}

/* Texto dividido em letras (Squeeze In) */
.split-wrap { display: flex; flex-wrap: wrap; }
.logotype-xus .split-wrap { justify-content: flex-end; }
.split-word { display: inline-flex; white-space: nowrap; }
.split-letter { display: inline-block; white-space: pre; transform-origin: 50% 50%; }
.logotype .split-word,
.logotype .split-letter { text-box: trim-both cap alphabetic; }
.headline-line:first-child .split-letter { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.headline-line:last-child  .split-letter { text-box-trim: trim-end;   text-box-edge: cap alphabetic; }

/* Line Rise */
.rise-line { display: block; overflow: hidden; }
.rise-inner { display: block; }

/* ── Cabeçalho ────────────────────────────────────────────────────────── */
.site-header {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 20;
  height: 4.125rem;
  color: #fff;
}

.header-rule {
  position: absolute;
  left: 0; right: 0; top: 4.125rem;
  margin-top: -1px;
  height: 1px;
  background: #fff;
}

.header-short-rule {
  position: absolute;
  left: 50%; top: 0;
  height: 4.125rem;
  width: 0;
  display: none;
}
.header-short-rule > span {
  flex-shrink: 0;
  display: block;
  width: 4.125rem;
  height: 1px;
  background: #fff;
  rotate: -90deg;
}

.header-marker {
  position: absolute;
  left: 50%; top: 3.875rem;
  width: 0.4375rem; height: 0.4375rem;
  border-radius: var(--radius-marker);
  background: #fff;
  display: none;
}

.header-logo { position: absolute; left: 1.25rem; top: 1.125rem; }
.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: var(--tracking-logo);
  white-space: nowrap;
}

.header-nav {
  position: absolute;
  left: 50%; top: 1.5rem;
  transform: translateX(-50%);
  display: none;
}
.header-nav ul {
  display: flex;
  gap: 3rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  line-height: var(--leading-ui);
  white-space: nowrap;
}
.nav-link { position: relative; display: inline-flex; align-items: center; }
.nav-link-marker {
  position: absolute;
  left: -0.75rem; top: 50%;
  margin-top: -0.1875rem;
  width: 0.375rem; height: 0.375rem;
  border-radius: var(--radius-marker);
  background: #fff;
  opacity: 0;
  scale: 0;
  transition: opacity var(--duration-fast) var(--ease-entrance), scale var(--duration-fast) var(--ease-entrance);
}
.nav-link-label { transition: translate var(--duration-fast) var(--ease-entrance); }
.nav-link:hover .nav-link-marker,
.nav-link:focus-visible .nav-link-marker { opacity: 1; scale: 1; }
.nav-link:hover .nav-link-label,
.nav-link:focus-visible .nav-link-label { translate: 0.25rem 0; }

.header-toggle { position: absolute; right: 1rem; top: 0.6875rem; }
.header-contact { position: absolute; right: 1rem; top: 0.5rem; display: none; }

/* Botão "Fale Conosco" */
.contact-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-action);
  background: var(--action-surface);
}
.contact-button-label {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--action-text);
  transition: color var(--duration-fast) var(--ease-entrance);
}
.contact-button-dash {
  height: 0.125rem;
  width: 0.6875rem;
  border-radius: var(--radius-hairline);
  background: var(--action-accent);
  transform-origin: left;
  transition: scale var(--duration-fast) var(--ease-entrance);
}
.contact-button:hover .contact-button-label,
.contact-button:focus-visible .contact-button-label { color: #fff; }
.contact-button:hover .contact-button-dash,
.contact-button:focus-visible .contact-button-dash { scale: 2 1; }

/* Botão Menu / Fechar */
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.75rem;
  padding-left: 1rem;
  padding-right: 0.875rem;
  border-radius: var(--radius-action);
  background: var(--action-surface);
}
.menu-toggle-label {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  color: var(--action-text);
}
.menu-toggle-icon { position: relative; display: block; width: 0.6875rem; height: 0.6875rem; }
.menu-toggle-icon > span {
  position: absolute;
  left: 0; top: 50%;
  margin-top: -1px;
  height: 0.125rem;
  width: 0.6875rem;
  border-radius: var(--radius-hairline);
  background: var(--action-accent);
  transition: translate var(--duration-normal) var(--ease-entrance), rotate var(--duration-normal) var(--ease-entrance);
}
.menu-toggle-icon > span:first-child { translate: 0 -0.1875rem; }
.menu-toggle-icon > span:last-child  { translate: 0 0.1875rem; }
.menu-toggle:hover .menu-toggle-icon > span:first-child { translate: 0 -0.25rem; }
.menu-toggle:hover .menu-toggle-icon > span:last-child  { translate: 0 0.25rem; }
.menu-toggle.is-open .menu-toggle-icon > span:first-child { translate: 0 0; rotate: 45deg; }
.menu-toggle.is-open .menu-toggle-icon > span:last-child  { translate: 0 0; rotate: -45deg; }

/* ── Menu do celular ──────────────────────────────────────────────────── */
#mobile-menu {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 60;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--menu-surface);
  color: var(--menu-foreground);
  padding-bottom: env(safe-area-inset-bottom);
  clip-path: inset(0% 0% 100% 0%);
}
#mobile-menu[inert] { pointer-events: none; }

.mobile-menu-head {
  flex-shrink: 0;
  height: 4.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.25rem;
  padding-right: 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
}

.mobile-menu-nav { padding: 1.25rem 1.25rem 0; }
.mobile-menu-nav li { border-bottom: 1px solid rgb(255 255 255 / 0.15); }
.mobile-menu-nav a { display: block; overflow: hidden; padding: 1rem 0; }
.mobile-menu-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  transform: translate3d(0, 110%, 0);
}
.mobile-menu-num {
  width: 1.5rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.5);
}
.mobile-menu-label {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}
.mobile-menu-marker {
  margin-left: auto;
  align-self: center;
  width: 0.4375rem; height: 0.4375rem;
  border-radius: var(--radius-marker);
  background: var(--action-accent);
  opacity: 0;
  scale: 0.5;
  transition: opacity var(--duration-fast) var(--ease-entrance), scale var(--duration-fast) var(--ease-entrance);
}
.mobile-menu-nav a:hover .mobile-menu-marker,
.mobile-menu-nav a:focus-visible .mobile-menu-marker,
.mobile-menu-nav a:active .mobile-menu-marker { opacity: 1; scale: 1; }

.mobile-menu-cta {
  margin-top: auto;
  padding: 2.5rem 1.25rem 0;
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}
.mobile-menu-cta a {
  display: flex;
  height: 3.125rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-radius: var(--radius-action);
  border: 1px solid rgb(255 255 255 / 0.2);
}
.mobile-menu-cta-label {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--action-text);
}
.mobile-menu-cta-dash {
  height: 0.125rem;
  width: 0.6875rem;
  border-radius: var(--radius-hairline);
  background: var(--action-accent);
  transform-origin: right;
  transition: scale var(--duration-fast) var(--ease-entrance);
}
.mobile-menu-cta a:hover .mobile-menu-cta-dash,
.mobile-menu-cta a:focus-visible .mobile-menu-cta-dash { scale: 2 1; }

.mobile-menu-logotype {
  flex-shrink: 0;
  overflow: hidden;
  padding: 1.5rem 1.25rem 0;
}
.mobile-menu-fit {
  font-size: 6rem;
  line-height: 1;
  transform: translate3d(0, 70%, 0);
}
.mobile-menu-fit p {
  display: inline-block;
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  color: var(--menu-logotype);
}

/* ── Pré-carregador ───────────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  background: var(--preloader-surface);
  color: var(--preloader-ink);
}
.preloader-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader-name {
  position: absolute;
  left: 0; right: 0; top: 1.125rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: var(--tracking-logo);
}
.preloader-face {
  width: 11rem;
  height: auto;
  overflow: visible;
  fill: currentColor;
}
.preloader-count {
  position: absolute;
  left: 0; right: 0; bottom: 1.25rem;
  display: flex;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.count-box { position: relative; display: inline-block; }
.count-ghost { visibility: hidden; }
.count-live { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; }

/* Barra de erro de recurso */
.asset-error {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  padding: .75rem 1rem;
  background: #b3261e;
  color: #fff;
  font: 500 13px/1.4 ui-monospace, monospace;
  text-align: center;
}

/* ── Tablet (≥ 768px) ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .header-short-rule { display: flex; align-items: center; justify-content: center; }
  .header-short-rule--left  { margin-left: -16rem; }
  .header-short-rule--right { margin-left: 16.0625rem; }
  .header-marker { display: block; }
  .header-marker--left  { margin-left: -16.25rem; }
  .header-marker--right { margin-left: 15.8125rem; }
  .header-nav { display: block; }
  .header-toggle { display: none; }
  .header-contact { display: block; }

  .logotype { font-size: 13.5rem; }
  .logotype-ne  { top: 6rem; }
  .logotype-xus { bottom: 1.25rem; right: 1.5rem; }

  .hero-headline { right: auto; font-size: 3rem; }
  .hero-tagline { bottom: 9rem; width: 20rem; font-size: 1.125rem; }

  #mobile-menu { display: none; }

  .preloader-face { width: 16rem; }
  .preloader-count { bottom: 1.5rem; font-size: 8rem; }
}
@media (min-width: 768px) and (orientation: landscape) {
  .hero-headline { font-size: 2.25rem; }
}

/* ── Desktop (≥ 1025px) — o quadro Figma 1400×800 em 1:1 ──────────────── */
@media (min-width: 1025px) {
  .header-short-rule--left  { margin-left: -21.0625rem; }
  .header-short-rule--right { margin-left: 21.125rem; }
  .header-marker--left  { margin-left: -21.3125rem; }
  .header-marker--right { margin-left: 20.875rem; }
  .header-contact { right: 1.25rem; }
  .contact-button { height: 3.125rem; padding: 1rem 2rem; }
  .contact-button-label { font-size: 1.125rem; }

  .logotype { font-size: 21.58475rem; } /* 345.356px */
  .logotype-ne { left: 0; top: 3.25rem; width: 27.4375rem; text-align: right; }
  .logotype-ne .split-wrap { justify-content: flex-end; }

  .hero-headline { width: 34.625rem; }
  .hero-tagline { bottom: 10.4375rem; width: 16.375rem; font-size: 1rem; }
}
@media (min-width: 1025px) and (orientation: landscape) {
  .hero-headline { font-size: 3rem; }
}