/* Causal Meeting landing — shared by index.html (EN) and pt-br.html (pt-BR)
   Aesthetic: luminous ultra-light headline on dark navy (per reference screenshot). */

:root {
  --bg: #0b0c1b;      /* dark navy */
  --display: #b8b1d5; /* lavender headline */
  --meta: #a29bc4;    /* location line */
  --body: #8f8aa6;    /* tagline */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--body);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--display);
  color: var(--bg);
}

/* Top bar: language switch, top-right */
.topbar {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem;
}

.lang-switch {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--meta);
  border-bottom: 1px solid transparent;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  color: var(--display);
  border-bottom-color: var(--display);
}

/* Hero: full viewport, centered stack */
.hero {
  min-height: 92vh; /* fallback */
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.75rem;
  padding: 2rem 1.5rem;
}

/* Giant display title — ultra-light, glowing lavender */
.display {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(2.75rem, 11.5vw, 16rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--display);
  text-shadow: 0 0 24px color-mix(in srgb, var(--display) 25%, transparent),
              0 0 90px color-mix(in srgb, var(--display) 18%, transparent);
  max-width: 14ch; /* wraps to Causal / Meeting on narrow screens */
}

/* Location line — small mono, uppercase, tracked */
.meta {
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta);
}

/* Tagline — readable sentence */
.tagline {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  max-width: 40ch;
  color: var(--body);
}