/* Página provisória da Phason. Tokens do design system v2 (tema profundo). */
@font-face { font-family: "Geist"; src: url("/fonts/geist-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --profundo: #001D23;
  --branco: #FFFFFF;
  --aqua: #80C9C8;
  --aqua-02: #A0C2C7;
  --aqua-07: #00353E;
  --vidro: rgba(255, 255, 255, 0.06);
  --vidro-linha: rgba(255, 255, 255, 0.14);
  --raio-md: 20px;
  --raio-pill: 9999px;
  --sombra-botao: 0 1px 4px rgba(0, 29, 35, 0.2);
  --desfoque-vidro: saturate(180%) blur(40px);
}

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

html { color-scheme: dark; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--profundo);
  color: var(--branco);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.palco {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(128, 201, 200, 0.16), transparent 70%),
    radial-gradient(50% 45% at 10% 95%, rgba(0, 53, 62, 0.9), transparent 70%),
    var(--profundo);
}

.marca-dagua {
  position: absolute;
  right: -12vw;
  bottom: -18vh;
  width: min(70vw, 760px);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

.cartao {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: clamp(28px, 6vw, 48px);
  border-radius: var(--raio-md);
  background: var(--vidro);
  border: 1px solid var(--vidro-linha);
  -webkit-backdrop-filter: var(--desfoque-vidro);
  backdrop-filter: var(--desfoque-vidro);
}

.logotipo { display: block; width: 168px; height: auto; margin-bottom: 40px; }

.rotulo {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: var(--raio-pill);
  border: 1px solid var(--vidro-linha);
  color: var(--aqua);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(1.75rem, 4.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.texto { color: var(--aqua-02); font-size: 1.0625rem; margin-bottom: 32px; }

.botao {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--raio-pill);
  background: var(--aqua);
  color: var(--profundo);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--sombra-botao);
  word-break: break-all;
  transition: background-color 0.2s ease;
}

.botao:hover { background: var(--branco); }

.botao:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

@media (prefers-reduced-transparency: reduce) {
  .cartao { background: var(--aqua-07); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
}