/* ==========================================================================
   Voxterra — Coming soon
   Tokens copied verbatim from the Voxterra Design System
   (tokens/typography.css, tokens/colors.css, tokens/spacing.css).
   ========================================================================== */

:root {
  /* --- Typography -------------------------------------------------------- */
  --vx-font-display: "Space Grotesk", system-ui, sans-serif;
  --vx-font-base: "Inter", Arial, Helvetica, sans-serif;
  --vx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --vx-w-regular: 400;
  --vx-w-medium: 500;
  --vx-w-semibold: 600;
  --vx-w-bold: 700;

  --vx-text-hero: 66px;
  --vx-text-display: 44px;
  --vx-text-h2: 42px;
  --vx-text-action-title: 22px;
  --vx-text-body: 15px;
  --vx-text-eyebrow: 12px;
  --vx-text-caption: 11px;

  --vx-track-eyebrow: 0.14em;
  --vx-leading-tight: 1.08;
  --vx-leading-body: 1.5;

  /* --- Color (proporção 70 / 18 / 12) --------------------------------- */
  --vx-navy: #051C2C;
  --vx-navy-2: #132F42;

  --vx-blue: #22A3DF;        /* o sinal */
  --vx-blue-deep: #1877A2;
  --vx-blue-light: #A2D5EC;

  --vx-green: #3FCDA8;       /* a resposta */
  --vx-green-deep: #2FB595;

  --vx-purple: #7C5CFF;

  --vx-paper: #FAFCFD;
  --vx-surface-1: #F4F6F8;
  --vx-surface-2: #E9EEF2;

  --vx-ink: #051C2C;
  --vx-ink-2: #3C4A54;

  --vx-hairline: #C7CED4;
  --vx-hairline-web: #DCE3E8;

  --vx-status-ok: #2BA84A;
  --vx-status-warn: #F8BC3B;
  --vx-status-bad: #D44141;

  /* --- Spacing / corners / lines (grade 4pt) -------------------------- */
  --vx-space-1: 4px;
  --vx-space-2: 8px;
  --vx-space-3: 12px;
  --vx-space-4: 16px;
  --vx-space-5: 24px;
  --vx-space-6: 32px;
  --vx-space-7: 48px;
  --vx-space-8: 64px;

  --vx-radius-0: 0px;
  --vx-radius-1: 2px;
  --vx-radius-2: 6px;
  --vx-radius-pill: 999px;

  --vx-line-hairline: 1px;
  --vx-line-rule: 2px;

  --vx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vx-dur: 130ms;

  /* --- Page-local ----------------------------------------------------- */
  --tint: rgba(5, 28, 44, 0.90);   /* #051C2C @ 90% — em frente ao vídeo */
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--vx-navy);
  color: #fff;
  font-family: var(--vx-font-base);
  font-weight: var(--vx-w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--vx-blue); text-decoration: none; }

/* ==========================================================================
   Background stage — looping video + navy tint + subtle scanlines
   ========================================================================== */
.bg-video,
.bg-tint,
.bg-scan {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  background: var(--vx-navy);
}
.bg-tint {
  z-index: -2;
  background:
    radial-gradient(130% 100% at 50% 30%, rgba(5,28,44,0.10), rgba(5,28,44,0) 70%),
    var(--tint);
}
/* hero navy com scanlines sutis — DS foundation */
.bg-scan {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 40px,
    rgba(162, 213, 236, 0.05) 40px 41px
  );
}

/* Fallback scene while assets/video/hero.* is absent (video element stays empty) */
body:not(.has-video) {
  background:
    radial-gradient(130% 100% at 50% 0%, var(--vx-navy-2), var(--vx-navy) 70%);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--vx-space-6);
}

.stage {
  align-self: center;
  justify-self: center;
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vx-space-5);
}

.logo {
  width: clamp(172px, 44vw, 284px);   /* -21% vs. antes */
  height: auto;
}

.eyebrow {
  margin: 0;
  font: var(--vx-w-semibold) var(--vx-text-eyebrow) / 1 var(--vx-font-mono);
  letter-spacing: var(--vx-track-eyebrow);
  text-transform: uppercase;
  color: var(--vx-blue-light);
}

.headline {
  margin: var(--vx-space-5) 0 0;      /* +100% de respiro sob o eyebrow (24 + 24 do gap) */
  font-family: var(--vx-font-display);
  font-weight: var(--vx-w-medium);     /* sem bold */
  font-size: clamp(20px, 4.5vw, 33px); /* -50% */
  line-height: var(--vx-leading-tight);
  letter-spacing: -0.01em;
  color: #fff;
}
.headline .dot { color: var(--vx-green); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--vx-space-4);
  font: var(--vx-w-medium) var(--vx-text-caption) / 1 var(--vx-font-mono);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}
.foot .domain {
  display: inline-flex;
  align-items: center;
  gap: var(--vx-space-2);
  justify-self: start;
}
.foot .copy { justify-self: center; white-space: nowrap; }
.foot .lang { justify-self: end; display: inline-flex; gap: var(--vx-space-3); }

.foot .lang button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--vx-dur) var(--vx-ease);
}
.foot .lang button:hover { color: #fff; }
.foot .lang button[aria-current="true"] {
  color: var(--vx-blue);
  border-bottom: var(--vx-line-rule) solid var(--vx-blue);
  padding-bottom: 2px;
}
.foot .lang button:focus-visible,
.foot a:focus-visible {
  outline: var(--vx-line-rule) solid var(--vx-blue);
  outline-offset: 2px;
}

/* status blip — glow pulsante lento (~6s), DS animation guidance */
.blip {
  width: 7px;
  height: 7px;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-blue);
  box-shadow: 0 0 0 0 rgba(34, 163, 223, 0.55);
  animation: vx-blip 6s var(--vx-ease) infinite;
}
@keyframes vx-blip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 163, 223, 0.55); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(34, 163, 223, 0);   opacity: 0.6; }
}

/* ==========================================================================
   Motion / responsive
   ========================================================================== */
@media (max-width: 560px) {
  .wrap { padding: var(--vx-space-5); }
  .foot {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--vx-space-3);
    text-align: center;
  }
  .foot .domain, .foot .lang, .foot .copy { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .blip { animation: none; }
  .bg-scan { display: none; }
}